/* ============================================================
   2DOPE LABS / design system
   editorial brutalism / agency confident / video forward
   ============================================================ */

/* ---- TYPE -------------------------------------------------- */
/* Display: Fraunces variable @ optical size 144, mixed weights inside a single headline.
   Editorial italic pull: Newsreader italic.
   Body: Fraunces at smaller optical size (kept inside one family so the prototype
   has a coherent voice without falling back to Inter/Satoshi/Geist).
   Numerals + meta: JetBrains Mono, tabular, slashed zero.
   --- If/when PP Neue Montreal + PP Editorial New are licensed,
   swap the two @font-face declarations below and update --font-display /
   --font-body / --font-edit. Nothing else needs to change. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=JetBrains+Mono:wght@300;400;500;700&display=swap');

:root {
  /* LIVE SITE THEME / paper background + royal blue signal.
     pulled from 2dopelabs.com current live colors.

     BACKUP THEMES:
       - dark editorial brutalism (original brief direction):
         see css/system.dark.backup.css. swap by replacing this :root.
       - light editorial brutalism (paper + acid yellow):
         saved at the bottom of this file as commented block. */

  /* surfaces */
  --ink:     #F6F3EC;          /* warm paper, page background */
  --ink-2:   #ECE8DE;          /* card / hover lift */
  --paper:   #0E0E0E;          /* near black, primary type */
  --paper-2: #5A5852;          /* secondary type, meta */
  --rule:    #D9D4C6;          /* hairlines */

  /* signal / royal blue from the live logo pill.
     placeholder pending exact SVG sample. swap when sampled. */
  --acid:    #2027E6;          /* live site royal blue */

  /* tertiary accent / acid yellow stays available for highlights */
  --acid-2:  #E8FF00;

  /* single muted clinical tone / used once, in section 10 background only */
  --clinical:#E3E7DF;          /* soft x ray / chart green at light value */

  /* families */
  --font-display: 'Fraunces', 'PP Editorial New', Georgia, serif;
  --font-body:    'Fraunces', 'PP Neue Montreal', Georgia, serif;
  --font-edit:    'Newsreader', 'PP Editorial New', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Söhne Mono', ui-monospace, monospace;

  /* scale */
  --fs-hero: clamp(72px, 11vw, 220px);
  --fs-disp: clamp(48px, 7vw, 132px);
  --fs-h2:   clamp(32px, 4.2vw, 72px);
  --fs-h3:   clamp(22px, 2vw, 36px);
  --fs-body: clamp(15px, 1.05vw, 18px);
  --fs-meta: 11px;

  /* motion */
  --ease-slab: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---- RESET ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); color: var(--paper); -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.45;
  font-feature-settings: "ss01", "tnum", "zero";
  font-variant-numeric: tabular-nums slashed-zero;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--acid); color: var(--ink); }

/* ---- LAYOUT ------------------------------------------------ */
.wrap { width: 100%; padding: 0 clamp(20px, 4vw, 64px); }
.hairline { height: 1px; background: var(--rule); width: 100%; }

/* ---- TYPE PRIMITIVES -------------------------------------- */
.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-2);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acid);
}
.display {
  font-family: var(--font-display);
  font-size: var(--fs-disp);
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.italic {
  font-family: var(--font-edit);
  font-style: italic;
  font-weight: 300;
}
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-weight: 500;
  letter-spacing: -0.04em;
}

/* underline draw on hover for text CTAs */
.text-cta {
  position: relative;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 4px;
  display: inline-block;
}
.text-cta::after {
  content: "";
  position: absolute;
  left: 0; right: auto; bottom: 0;
  height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 520ms var(--ease-slab);
}
.text-cta:hover::after { transform: scaleX(1); }
.text-cta.acid { color: var(--acid); }

/* ---- NAV --------------------------------------------------- */
nav.top {
  position: fixed; inset: 0 0 auto 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 64px);
  background: rgba(246, 243, 236, 0.78);     /* paper, slightly translucent */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 320ms var(--ease-soft), background 320ms var(--ease-soft);
}
nav.top.scrolled {
  background: rgba(246, 243, 236, 0.94);
  border-bottom-color: var(--rule);
}
nav.top .brand {
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper);
  display: inline-flex; align-items: center; gap: 0;
}
nav.top .brand img {
  height: clamp(28px, 2.2vw, 48px); width: auto;
  transition: opacity 220ms var(--ease-soft);
}
nav.top .brand:hover img { opacity: 0.7; }

/* placeholder gradient wordmark — hidden by default. only shown if
   the img errors out (the onerror handler hides the img and reveals this). */
nav.top .brand span.brand-text {
  display: none;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800; letter-spacing: -0.04em;
  background: linear-gradient(90deg, #6B2BD9 0%, #3D5FE0 55%, #19D4E2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* footer wordmark — image or gradient text fallback */
footer.site .wordmark img {
  width: 100%; max-width: 100%; height: auto; display: block;
}
footer.site .wordmark .text-fallback {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(72px, 18vw, 320px); line-height: 0.82; letter-spacing: -0.04em;
  background: linear-gradient(90deg, #6B2BD9 0%, #3D5FE0 55%, #19D4E2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block; white-space: nowrap;
}

/* ---- CONFIDENTIAL WATERMARK ------------------------------- */
/* the rotated right-edge rail. fixed at right: 0, rotated using
   writing-mode so the content flows down naturally and never clips. */
#confidential {
  position: fixed;
  top: 0; bottom: 0; right: 8px;
  z-index: 70;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--paper-2);
  pointer-events: none;
  user-select: none;
  opacity: 0.65;
  writing-mode: vertical-rl;
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
}
#confidential .dot {
  width: 6px; height: 6px; background: var(--acid); border-radius: 50%;
  animation: pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
  writing-mode: horizontal-tb;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}
#confidential.hidden { opacity: 0; }

/* corner stamp / bottom left, red fill for high-attention warning */
#confidential-stamp {
  position: fixed; bottom: 20px; left: clamp(20px, 4vw, 64px);
  z-index: 49;
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.78vw, 14px);     /* scales up on big screens */
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500;
  padding: 10px 14px;                       /* roomier hit area */
  background: #D6232C;
  color: #FFFFFF;
  pointer-events: none; user-select: none;
  display: flex; align-items: center; gap: 10px;
  opacity: 1;
  box-shadow: 0 6px 24px rgba(214, 35, 44, 0.18);
}
#confidential-stamp .x {
  color: #FFFFFF;
  font-size: 1.2em;
  line-height: 1;
  animation: pulse 2.2s ease-in-out infinite;
}
#confidential-stamp.hidden { opacity: 0; pointer-events: none; }

/* ---- LANGUAGE TOGGLE -------------------------------------- */
.lang-toggle {
  display: inline-flex; align-items: stretch; gap: 0;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--rule);
  line-height: 1;
  height: 28px;
}
.lang-toggle button {
  padding: 0 10px;
  color: var(--paper-2);
  background: transparent;
  transition: background 220ms var(--ease-soft), color 220ms var(--ease-soft);
  border: 0; cursor: pointer;
  display: flex; align-items: center;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.lang-toggle button.active {
  background: var(--paper);
  color: var(--ink);
}
.lang-toggle button:hover:not(.active) { color: var(--paper); }
.lang-toggle .sep { width: 1px; align-self: stretch; background: var(--rule); }
nav.top ul {
  display: flex; align-items: center; gap: clamp(16px, 2.5vw, 36px); list-style: none;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper);
}
nav.top ul li { display: flex; align-items: center; }
nav.top ul a { position: relative; padding: 4px 0; }
nav.top ul a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 420ms var(--ease-slab);
}
nav.top ul a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- HAMBURGER (mobile only) ------------------------------ */
.nav-burger {
  display: none;                                /* shown only on mobile breakpoint */
  width: 32px; height: 24px;
  flex-direction: column; justify-content: space-between;
  background: transparent; border: 0; cursor: pointer;
  padding: 0;
  z-index: 60;
}
.nav-burger span {
  display: block; width: 100%; height: 2px;
  background: var(--paper);                     /* paper var = near-black on light theme */
  transition: transform 320ms var(--ease-slab), opacity 220ms var(--ease-soft), background 220ms;
}
body.nav-open .nav-burger span { background: var(--ink); } /* invert when on dark sheet */
body.nav-open .nav-burger span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* ---- CONTEXTUAL CURSOR ------------------------------------ */
/* the entire cursor system. no floating disk. native arrow by default. */
#cursor {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none;
  transform: translate(-9999px, -9999px);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--acid); color: var(--ink); /* blue pill, paper text */
  padding: 6px 10px;
  opacity: 0; transition: opacity 160ms linear;
  white-space: nowrap;
}
#cursor.show { opacity: 1; }
body.cursor-active, body.cursor-active * { cursor: none !important; }

/* ---- SECTIONS ---------------------------------------------- */
section { position: relative; padding: clamp(80px, 12vh, 160px) 0; }
section.inverted { background: var(--paper); color: var(--ink); }
section.inverted .meta { color: #4F4D49; }
section.inverted .eyebrow { color: var(--ink); }

/* section number tag / top left of every section */
.sec-tag {
  position: absolute; top: clamp(24px, 4vh, 48px); left: clamp(20px, 4vw, 64px);
  display: flex; gap: 14px; align-items: center;
}
.sec-tag .dot { width: 6px; height: 6px; background: var(--acid); }

/* ---- HERO -------------------------------------------------- */
.hero {
  min-height: 92vh;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding: 110px clamp(20px, 4vw, 64px) clamp(32px, 5vh, 64px);
  align-items: start;          /* content sits up high, not pushed to the bottom */
}
.hero .hero-left { padding-top: clamp(0px, 2vh, 24px); }
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 0.88;
  letter-spacing: -0.025em;
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 0;
}
.hero h1 .l1 { display: block; }
.hero h1 .l2 { display: block; }
.hero h1 .l3 {
  display: block;
  font-family: var(--font-edit);
  font-style: italic;
  font-weight: 200;
  padding-left: clamp(40px, 8vw, 180px);
  letter-spacing: -0.01em;
}
.hero h1 .l4 { display: block; }
.hero h1 .l5 {
  display: inline-block;
  color: var(--acid);
  font-size: 0.55em;
  font-weight: 500;
  vertical-align: baseline;
  margin-left: 0.4em;
}
.hero h1 em.weight-flex {
  font-style: normal;
  font-variation-settings: "opsz" 144, "wght" var(--scroll-weight, 500);
  transition: font-variation-settings 80ms linear;
}

.hero .reel-frame {
  border: 1px solid var(--paper);
  padding: 6px;
  background: var(--ink-2);
  position: relative;
}
.hero .reel-frame video,
.hero .reel-frame .poster {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #111;
}
.hero .reel-frame .meta { margin-top: 10px; display: flex; justify-content: space-between; }

/* hero portrait — Alex is the brand, photo carries the section. no frame. */
.hero .hero-portrait {
  position: relative;
}
.hero .hero-portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
  display: block;
}
.hero .hero-portrait .meta {
  margin-top: 14px;
  display: flex; justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

.hero-foot {
  grid-column: 1 / -1;
  margin-top: clamp(48px, 8vh, 96px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  gap: 24px;
}
.hero-foot .stat .n {
  font-family: var(--font-mono);
  font-size: clamp(48px, 7vw, 120px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--paper);
}
.hero-foot .stat .l {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-2);
  margin-top: 12px; max-width: 240px;
}
.hero-foot .stat .n .acid { color: var(--acid); }

.hero .lede { font-family: var(--font-edit); font-style: italic; font-size: clamp(18px, 1.4vw, 22px); max-width: 56ch; color: var(--paper-2); margin-top: 28px; }
.hero .cta-row { margin-top: 28px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }

/* ---- LOGO WALL / static 6-up ------------------------------ */
.logos {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(60px, 8vh, 100px) 0 0;
  background: var(--ink);
  position: relative;
}
.logos .sec-tag { margin-bottom: clamp(28px, 4vh, 48px); }
.logos .logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-top: clamp(40px, 6vh, 64px);
}
.logos .cell {
  aspect-ratio: 3 / 2;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
  padding: clamp(20px, 3vw, 36px);
}
.logos .cell:last-child { border-right: 0; }
.logos .cell img {
  max-width: 80%; max-height: 70%;
  width: auto; height: auto;
  opacity: 0.85;
  transition: opacity 360ms var(--ease-slab);
}
.logos .cell:hover img {
  opacity: 1;
}
.logos .cell .cell-fallback {
  display: none;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper);
  text-align: center;
  opacity: 0.55;
}
.logos .cell.missing .cell-fallback { display: block; }

@media (max-width: 1023px) {
  .logos .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .logos .cell { border-right: 1px solid var(--rule); }
  .logos .cell:nth-child(3n) { border-right: 0; }
}
@media (max-width: 600px) {
  .logos .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .logos .cell { border-right: 1px solid var(--rule); }
  .logos .cell:nth-child(2n) { border-right: 0; }
  .logos .cell:nth-child(3n) { border-right: 1px solid var(--rule); }
  .logos .cell:nth-child(2n) { border-right: 0; }
}

/* ---- PROBLEM CARDS ---------------------------------------- */
.problems { padding-top: clamp(80px, 14vh, 200px); }
.problems .card {
  padding: clamp(48px, 8vh, 120px) clamp(20px, 4vw, 64px);
  border-top: 1px solid var(--rule);
  position: relative;
}
.problems .card:last-child { border-bottom: 1px solid var(--rule); }
.problems .card .rule-acid {
  position: absolute; top: -1px; left: clamp(20px, 4vw, 64px);
  height: 1px; width: 60px; background: var(--acid);
}
.problems .card .tag { position: absolute; top: 24px; right: clamp(20px, 4vw, 64px); }
.problems .card h2 {
  font-family: var(--font-display);
  font-size: var(--fs-disp);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.02em;
  max-width: 16ch;
  font-variation-settings: "opsz" 144;
}
.problems .card .num-big {
  font-family: var(--font-mono);
  font-size: clamp(60px, 10vw, 180px);
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--rule);
  position: absolute; right: clamp(20px, 4vw, 64px); bottom: 24px;
  line-height: 1;
}

/* ---- ABOUT ALEX -------------------------------------------- */
.about { position: relative; overflow: hidden; min-height: 100vh; display: grid; align-items: end; padding-top: clamp(60px, 8vh, 100px); }
.about .portrait {
  position: absolute; inset: 0;
  background-image: url('https://2dopelabs.com/wp-content/uploads/2026/05/Alexander-Helling-%E2%80%93-2DOPE-Labs-%E2%80%93-Mitarbeitergewinnung-fuer-Arztpraxen.jpg');
  background-size: cover; background-position: center 20%;
  filter: saturate(0.15) contrast(0.98) brightness(1.05);
}
.about .grain {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0.45;
}
.about .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(246,243,236,0.88) 0%, rgba(246,243,236,0.45) 45%, rgba(246,243,236,0) 70%);
}
.about .content { position: relative; padding: 0 clamp(20px, 4vw, 64px) clamp(60px, 10vh, 120px); max-width: 62ch; }
.about .eyebrow { margin-bottom: 24px; }
.about h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 0.98; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 28px; }
.about p { font-size: clamp(16px, 1.15vw, 20px); line-height: 1.55; color: var(--paper-2); margin-bottom: 18px; max-width: 52ch; }
.about .pull {
  font-family: var(--font-edit); font-style: italic; font-weight: 200;
  font-size: clamp(48px, 7vw, 128px); line-height: 0.95; letter-spacing: -0.02em;
  color: var(--paper);
  position: absolute; right: clamp(20px, 4vw, 64px); bottom: 8vh;
  text-align: right; pointer-events: none;
  max-width: 50vw;
}

/* ---- TESTIMONIALS / horizontal editorial -------------------- */
.stimmen { background: var(--ink); padding: 0; }
.stimmen .hdr { padding: clamp(60px, 10vh, 120px) clamp(20px, 4vw, 64px) 40px; display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.stimmen .hdr h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 0.95; font-weight: 500; max-width: 18ch; }
.stimmen .track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.stimmen .track::-webkit-scrollbar { display: none; }
.stimmen .slide {
  flex: 0 0 100vw; min-width: 100vw;
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(24px, 5vw, 80px);
  padding: clamp(40px, 8vh, 80px) clamp(20px, 4vw, 64px) clamp(40px, 6vh, 80px);
  scroll-snap-align: start;
  align-items: center;
  max-height: 80vh;
  overflow: hidden;
}
.stimmen .slide .pic {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-height: 70vh;
  background: var(--ink-2); border: 1px solid var(--rule);
  background-size: cover; background-position: center top;
}
.stimmen .slide blockquote {
  font-family: var(--font-edit); font-style: italic; font-weight: 200;
  font-size: clamp(34px, 5vw, 96px); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--paper);
}
.stimmen .slide .attr {
  margin-top: 32px; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-2);
  display: flex; gap: 12px; align-items: center;
}
.stimmen .progress {
  height: 1px; background: var(--rule); margin: 0 clamp(20px, 4vw, 64px) 48px;
  position: relative;
}
.stimmen .progress .fill { position: absolute; left: 0; top: 0; height: 1px; background: var(--acid); width: 33%; transition: width 380ms var(--ease-soft); }

/* prev / next + dot indicator */
.stimmen-controls {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 4vh, 48px) clamp(20px, 4vw, 64px) clamp(48px, 6vh, 80px);
}
.stim-arrow {
  width: 56px; height: 56px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 240ms var(--ease-soft), color 240ms var(--ease-soft), border-color 240ms var(--ease-soft);
}
.stim-arrow:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.stim-arrow:disabled { opacity: 0.3; cursor: default; }
.stim-arrow:disabled:hover { background: transparent; color: var(--paper); border-color: var(--rule); }
.stim-dots { display: flex; gap: 12px; align-items: center; }
.stim-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rule);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 280ms var(--ease-soft), transform 280ms var(--ease-slab);
}
.stim-dot.active {
  background: var(--acid);
  transform: scale(1.4);
}

/* ---- UNTERSCHIED / two col editorial ----------------------- */
.unterschied .grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); padding: 0 clamp(20px, 4vw, 64px); }
.unterschied h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; line-height: 0.95; letter-spacing: -0.02em; margin-bottom: 32px; max-width: 14ch; }
.unterschied p { font-size: clamp(16px, 1.15vw, 20px); line-height: 1.6; color: var(--paper-2); margin-bottom: 18px; max-width: 50ch; }
.unterschied ul { list-style: none; padding: 0; }
.unterschied li {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--paper);
  display: grid; grid-template-columns: 14px 1fr; gap: 18px;
  align-items: start;
  padding: 22px 0; border-top: 1px solid var(--rule);
}
.unterschied li:last-child { border-bottom: 1px solid var(--rule); }
.unterschied li::before { content: ""; width: 10px; height: 10px; background: var(--acid); margin-top: 4px; }

/* ---- REELS GRID / broken --------------------------------- */
.reels { padding: clamp(80px, 14vh, 200px) clamp(20px, 4vw, 64px); }
.reels .grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 8vh; gap: clamp(12px, 2vw, 24px); }
.reels .r {
  position: relative; overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--ink-2);
  transition: transform 520ms var(--ease-slab);
}
.reels .r:hover { transform: scale(1.02); }
.reels .r video { width: 100%; height: 100%; object-fit: cover; }
.reels .r .meta-tag { position: absolute; bottom: 12px; left: 12px; background: var(--ink); padding: 4px 8px; }
.reels .r-1 { grid-column: 1 / span 7; grid-row: 1 / span 7; }
.reels .r-2 { grid-column: 9 / span 4; grid-row: 3 / span 5; }
.reels .r-3 { grid-column: 4 / span 6; grid-row: 9 / span 6; }
.reels .hdr { display: flex; justify-content: space-between; align-items: end; margin-bottom: clamp(40px, 6vh, 64px); gap: 32px; }
.reels h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; line-height: 0.95; letter-spacing: -0.02em; max-width: 18ch; }

/* ---- ERGEBNISSE / 3-up card grid ------------------------- */
.ergebnisse { padding: clamp(80px, 14vh, 200px) 0; }
.ergebnisse .hdr {
  padding: 0 clamp(20px, 4vw, 64px) clamp(40px, 6vh, 64px);
  display: flex; justify-content: space-between; align-items: end;
  gap: 32px; flex-wrap: wrap;
}
.ergebnisse h2 {
  font-family: var(--font-display); font-size: var(--fs-h2);
  font-weight: 500; line-height: 0.95; letter-spacing: -0.02em; max-width: 18ch;
}
.ergebnisse .erg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0 clamp(20px, 4vw, 64px);
  border-top: 1px solid var(--rule);
}
.erg-card {
  display: flex; flex-direction: column;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(28px, 4vw, 48px);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: background 360ms var(--ease-soft);
  min-height: clamp(280px, 40vh, 420px);
}
.erg-card:nth-child(3n) { border-right: 0; }
.erg-card:hover { background: var(--ink-2); }
.erg-card.featured { background: var(--ink-2); }

.erg-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  min-height: 48px;
}
.erg-logo {
  max-height: 44px; max-width: 50%;
  width: auto; height: auto;
  object-fit: contain; object-position: left center;
  opacity: 0.9;
}
.erg-loc {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-2);
  padding: 4px 8px;
  border: 1px solid var(--rule);
}
.erg-n {
  font-family: var(--font-mono);
  font-size: clamp(72px, 8vw, 132px);
  font-weight: 500; letter-spacing: -0.06em; line-height: 0.85;
  color: var(--paper);
  margin-top: auto;
}
.erg-n .acid-num { color: var(--acid); font-size: 0.6em; vertical-align: top; }
.erg-role {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.15; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--paper);
  max-width: 22ch;
}
.erg-foot {
  display: flex; flex-direction: column;
  gap: 14px;
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--rule);
}
.erg-practice {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper);
  font-weight: 500;
}
.erg-link {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--acid);
  transition: gap 320ms var(--ease-slab), letter-spacing 320ms var(--ease-slab);
}
.erg-card:hover .erg-link { letter-spacing: 0.2em; }

.erg-underline {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--acid);
  transform: scaleX(0); transform-origin: left;
  transition: transform 600ms var(--ease-slab);
}
.erg-card.in .erg-underline { transform: scaleX(1); }

/* coming-soon stories — no hover affordance, muted link */
.erg-card.soon { cursor: default; }
.erg-card.soon:hover { background: transparent; }
.erg-card.featured.soon:hover { background: var(--ink-2); }
.erg-link.soon {
  color: var(--paper-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.erg-card.soon:hover .erg-link.soon { letter-spacing: 0.14em; }

@media (max-width: 1023px) {
  .ergebnisse .erg-grid { grid-template-columns: repeat(2, 1fr); }
  .erg-card:nth-child(3n) { border-right: 1px solid var(--rule); }
  .erg-card:nth-child(2n) { border-right: 0; }
}
@media (max-width: 600px) {
  .ergebnisse .erg-grid { grid-template-columns: 1fr; }
  .erg-card:nth-child(n) { border-right: 0; }
  .erg-card { min-height: auto; padding: 32px clamp(20px, 4vw, 32px); }
  .erg-n { font-size: clamp(64px, 18vw, 96px); }
}

/* ---- LEISTUNGEN / sticky scroll --------------------------- */
.leistungen { padding: 0; }
.leistungen .sticky-wrap { position: relative; }
.leistungen .lead { padding: clamp(80px, 14vh, 200px) clamp(20px, 4vw, 64px) clamp(40px, 6vh, 80px); display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.leistungen h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; line-height: 0.95; letter-spacing: -0.02em; max-width: 18ch; }

.leistungen .scroll-grid {
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: clamp(32px, 6vw, 100px);
  padding: 0 clamp(20px, 4vw, 64px);
}
.leistungen .pin {
  position: sticky; top: 12vh;
  height: 76vh;
  display: flex; flex-direction: column; justify-content: space-between;
}
.leistungen .pin .big-num {
  font-family: var(--font-mono);
  font-size: clamp(120px, 22vw, 360px);
  line-height: 0.85; font-weight: 500; letter-spacing: -0.06em;
  color: var(--paper);
}
.leistungen .pin .big-num .acid { color: var(--acid); }
.leistungen .pin .pin-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-2); }
.leistungen .items .item {
  min-height: 76vh; display: flex; flex-direction: column; justify-content: center;
  border-top: 1px solid var(--rule);
  padding: clamp(40px, 6vh, 80px) 0;
}
.leistungen .items .item:last-child { border-bottom: 1px solid var(--rule); }
.leistungen .items .item .ix { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acid); margin-bottom: 16px; }
.leistungen .items .item h3 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 80px); line-height: 0.98; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 24px; max-width: 14ch; }
.leistungen .items .item p { font-size: clamp(16px, 1.15vw, 20px); line-height: 1.55; color: var(--paper-2); max-width: 50ch; }

/* ---- FÜR WEN / three doors -------------------------------- */
.fuer-wen { background: var(--clinical); padding: clamp(80px, 14vh, 200px) 0 0; }
.fuer-wen .hdr { padding: 0 clamp(20px, 4vw, 64px) clamp(48px, 8vh, 96px); display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: end; }
.fuer-wen h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; line-height: 0.95; letter-spacing: -0.02em; max-width: 18ch; }
.fuer-wen .doors { display: grid; grid-template-columns: repeat(3, 1fr); height: 80vh; border-top: 1px solid var(--rule); }
.fuer-wen .door {
  position: relative; padding: clamp(32px, 5vh, 56px) clamp(20px, 3vw, 40px);
  border-right: 1px solid var(--rule);
  transition: filter 420ms var(--ease-soft);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.fuer-wen .door:last-child { border-right: 0; }
.fuer-wen .doors:hover .door { filter: saturate(0.2) brightness(0.65); }
.fuer-wen .doors .door:hover { filter: none; }
.fuer-wen .door h3 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 80px); line-height: 0.95; font-weight: 500; letter-spacing: -0.02em; }
.fuer-wen .door .ix { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-2); }
.fuer-wen .door .reveal {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 540ms var(--ease-slab), opacity 380ms var(--ease-soft);
  font-size: clamp(15px, 1vw, 18px); line-height: 1.55; color: var(--paper-2); max-width: 36ch;
}
.fuer-wen .door:hover .reveal { max-height: 240px; opacity: 1; }
.fuer-wen .door .roles { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-2); margin-top: 16px; }

/* ---- FAQ / type only -------------------------------------- */
.faq { padding: clamp(80px, 14vh, 200px) clamp(20px, 4vw, 64px); }
.faq h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; line-height: 0.95; letter-spacing: -0.02em; max-width: 14ch; margin-bottom: clamp(40px, 6vh, 80px); }
.faq .item { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 32px 0; border-top: 1px solid var(--rule); cursor: pointer; transition: padding 320ms var(--ease-slab); }
.faq .item:last-child { border-bottom: 1px solid var(--rule); }
.faq .item .ix { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.16em; color: var(--paper-2); padding-top: 6px; }
.faq .item .q { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 38px); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; transition: transform 320ms var(--ease-slab); }
.faq .item .a { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 540ms var(--ease-slab), opacity 380ms var(--ease-soft), margin 320ms var(--ease-slab); font-size: clamp(15px, 1.1vw, 19px); line-height: 1.6; color: var(--paper-2); max-width: 60ch; }
.faq .item.open .q { transform: translateY(-4px); }
.faq .item.open .a { max-height: 400px; opacity: 1; margin-top: 18px; }

/* ---- CTA BLOCK -------------------------------------------- */
.cta-block { padding: clamp(80px, 14vh, 200px) clamp(20px, 4vw, 64px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cta-block .grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: end; }
.cta-block h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; line-height: 0.95; letter-spacing: -0.02em; max-width: 16ch; }
.cta-block p { font-size: clamp(16px, 1.15vw, 20px); line-height: 1.55; color: var(--paper-2); max-width: 48ch; }

/* ---- FOOTER ----------------------------------------------- */
footer.site {
  padding: clamp(60px, 10vh, 120px) 0 0;
  background: var(--ink); color: var(--paper);
  border-top: 1px solid var(--rule);
  overflow: hidden;
}

/* statement / brand tuning fork */
.ft-statement {
  padding: 0 clamp(20px, 4vw, 64px) clamp(48px, 7vh, 80px);
  max-width: 100%;
}
.ft-statement .meta { color: var(--paper-2); margin-bottom: clamp(24px, 3vh, 40px); }
.ft-statement h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 96px);
  font-weight: 500; line-height: 1.02; letter-spacing: -0.02em;
  max-width: 24ch;
}
.ft-statement h2 span { display: block; }
.ft-statement h2 .italic { font-family: var(--font-edit); font-style: italic; font-weight: 200; }
.ft-statement h2 .acid-line { color: var(--acid); font-size: 0.7em; margin-top: 8px; }

/* marquee */
.ft-marquee {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  padding: clamp(24px, 4vh, 48px) 0;
}
.ft-marquee-track {
  display: flex; gap: clamp(40px, 6vw, 80px);
  align-items: center;
  white-space: nowrap;
  animation: marquee 32s linear infinite;
  width: max-content;
}
.ft-marquee-track img {
  height: clamp(80px, 12vw, 160px);
  width: auto;
  display: block;
  flex-shrink: 0;
  filter: brightness(0);                  /* solid black silhouette */
}
.ft-marquee-track span.dot {
  font-family: var(--font-display);
  color: var(--acid);
  font-size: clamp(14px, 1.4vw, 22px);    /* small, restrained */
  line-height: 1;
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* contact grid */
.ft-contact {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  padding: clamp(60px, 8vh, 100px) clamp(20px, 4vw, 64px) clamp(40px, 5vh, 64px);
}
.ft-contact-main { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2vh, 24px); }
.ft-contact-main .meta { color: var(--paper-2); margin-bottom: 8px; }
.ft-mail {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1;
  color: var(--paper);
  display: inline-block;
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: border-color 320ms var(--ease-slab), color 320ms var(--ease-slab);
}
.ft-mail:hover { border-bottom-color: var(--acid); color: var(--acid); }

.ft-contact-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
footer.site h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-2); margin-bottom: 16px; font-weight: 400; }
footer.site ul { list-style: none; }
footer.site li { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 0; color: var(--paper); }
footer.site li a { color: var(--paper); transition: color 220ms var(--ease-soft); }
footer.site li a:hover { color: var(--acid); }
footer.site .legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding: 20px clamp(20px, 4vw, 64px);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--paper-2);
}

@media (max-width: 1023px) {
  .ft-contact { grid-template-columns: 1fr; gap: 48px; }
  .ft-contact-meta { grid-template-columns: repeat(3, 1fr); }
  .ft-marquee-track span { font-size: clamp(80px, 22vw, 200px); }
}
@media (max-width: 600px) {
  .ft-contact-meta { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ft-statement h2 { font-size: clamp(36px, 9vw, 64px); }
  .ft-marquee-track { animation-duration: 22s; }
}

/* ---- PAGE TRANSITION SLAB --------------------------------- */
#slab {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--ink);                      /* paper bg matches the rest of the page */
  transform: translateY(100%);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
#slab.in  { animation: slab-in 600ms var(--ease-slab) forwards; pointer-events: all; }
#slab.out { animation: slab-out 600ms var(--ease-slab) forwards; }
#slab .mark {
  width: clamp(180px, 26vw, 420px); height: auto;
  display: block;
}
@keyframes slab-in  { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes slab-out { from { transform: translateY(0); } to { transform: translateY(-100%); } }

/* ---- EASTER EGG FLASH -------------------------------------- */
#flash { position: fixed; inset: 0; background: var(--acid); opacity: 0; pointer-events: none; z-index: 9997; transition: opacity 80ms linear; }
#flash.on { opacity: 1; }

/* ---- COOKIE BANNER ---------------------------------------- */
#cookie {
  position: fixed; left: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); bottom: clamp(56px, 8vh, 72px);
  background: var(--ink); border: 1px solid var(--paper);
  padding: 18px 20px;
  display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  z-index: 60;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; line-height: 1.5;
  color: var(--paper);
  transform: translateY(120%); opacity: 0;
  transition: transform 560ms var(--ease-slab), opacity 300ms linear;
}
#cookie.show { transform: translateY(0); opacity: 1; }
#cookie .actions { display: flex; gap: 12px; }
#cookie button {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 18px; border: 1px solid var(--paper); color: var(--paper); background: transparent;
  transition: background 240ms var(--ease-soft), color 240ms var(--ease-soft);
}
#cookie button:hover { background: var(--paper); color: var(--ink); }
#cookie .copy { max-width: 64ch; color: var(--paper-2); }
#cookie a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- RESPONSIVE ------------------------------------------- */
@media (max-width: 1199px) {
  #confidential { display: none; }
}
@media (max-width: 1023px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 100px;
    padding-bottom: 64px;
  }
  .hero h1 .l3 { padding-left: 6vw; }
  .hero .hero-portrait { order: -1; }                  /* photo first, type below on mobile */
  .hero .hero-portrait img { aspect-ratio: 16 / 11; }
  .hero-foot { grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 48px; }
  .stimmen .slide { grid-template-columns: 1fr; }
  .stimmen .slide .pic { aspect-ratio: 16/10; max-height: 50vh; }
  .unterschied .grid { grid-template-columns: 1fr; }
  .reels .grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .reels .r { aspect-ratio: 9/16; }
  .reels .r-1, .reels .r-2, .reels .r-3 { grid-column: 1; grid-row: auto; }
  .ergebnisse .row { grid-template-columns: 1fr; gap: 14px; padding: 32px clamp(20px, 4vw, 64px); }
  .ergebnisse .row .loc { text-align: left; }
  .leistungen .scroll-grid { grid-template-columns: 1fr; }
  .leistungen .pin { position: static; height: auto; min-height: auto; }
  .leistungen .pin .big-num { font-size: clamp(96px, 28vw, 200px); }
  .fuer-wen .doors { grid-template-columns: 1fr; height: auto; }
  .fuer-wen .door { border-right: 0; border-bottom: 1px solid var(--rule); padding-block: 48px; }
  .fuer-wen .doors:hover .door { filter: none; }
  .fuer-wen .door .reveal { max-height: 240px; opacity: 1; }    /* always shown on touch */
  .cta-block .grid { grid-template-columns: 1fr; }
  footer.site .ft-grid { grid-template-columns: 1fr 1fr; }
  footer.site .wordmark { font-size: 22vw; }
  .about .pull { font-size: 14vw; right: clamp(16px, 4vw, 32px); bottom: 4vh; max-width: 80vw; }
  .about .content { padding-bottom: 30vh; }                     /* room for the pull quote */

  /* MOBILE NAV — slide down sheet, hidden by default */
  .nav-burger {
    display: flex;
    position: relative; z-index: 60;        /* sit above the nav-open sheet */
  }
  nav.top ul {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--ink);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: clamp(16px, 2.5vh, 28px);
    padding: 96px clamp(24px, 6vw, 48px) 64px;
    font-size: clamp(22px, 5vw, 32px);
    letter-spacing: 0.02em;
    transform: translateY(-100%);
    transition: transform 520ms var(--ease-slab);
    z-index: 55;
    overflow-y: auto;
    visibility: hidden;                     /* don't intercept events when closed */
  }
  body.nav-open nav.top ul {
    transform: translateY(0);
    visibility: visible;
  }
  body.nav-open { overflow: hidden; }
  nav.top ul li {
    width: 100%;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 16px;
    list-style: none;
  }
  nav.top ul li:last-child { border-bottom: 0; padding-top: 16px; }
  nav.top ul a {
    width: 100%; display: block; padding: 6px 0;
    font-family: var(--font-display);
    font-size: clamp(28px, 7vw, 44px);
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: none;
  }
  nav.top ul a::after { display: none; }

  /* lang toggle inside open menu — bigger, bottom anchored */
  nav.top .lang-toggle {
    margin-top: clamp(12px, 2vh, 24px);
    height: 40px;
    font-size: 13px;
  }
}
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(56px, 13vw, 96px); }
  .hero-foot { grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
  .hero-foot .stat { border-bottom: 1px solid var(--rule); padding: 18px 0; }
  .hero-foot .stat:last-child { border-bottom: 0; }
  .problems .card h2 { font-size: clamp(32px, 10vw, 56px); }
  .problems .card .num-big { font-size: 22vw; right: 4vw; }
  .problems .card .tag { position: static; margin-bottom: 18px; display: block; }
  footer.site .ft-grid { grid-template-columns: 1fr; }
  footer.site .legal { flex-direction: column; align-items: flex-start; }
  footer.site .contact-line { font-size: clamp(18px, 5vw, 28px); }
  .stimmen .slide blockquote { font-size: clamp(28px, 7vw, 48px); }
  .ergebnisse .row .n { font-size: clamp(48px, 14vw, 96px); }
  .leistungen .items .item h3 { font-size: clamp(32px, 9vw, 56px); }
  .leistungen .items .item { min-height: auto; padding: 48px 0; }
  .fuer-wen .door h3 { font-size: clamp(36px, 11vw, 64px); }
  .faq .item { grid-template-columns: 50px 1fr; gap: 16px; padding: 24px 0; }
  .faq .item .q { font-size: clamp(18px, 5vw, 28px); }
  #cookie {
    flex-direction: column; align-items: flex-start;
    bottom: clamp(56px, 7vh, 72px);                              /* clear the confidential stamp */
  }
  #cookie .actions { width: 100%; }
  #cookie button { flex: 1; }
  #confidential-stamp {
    bottom: 12px; left: 12px;
    font-size: 9px; padding: 5px 8px; letter-spacing: 0.14em;
  }
  /* hide rotated rail entirely on small screens — already at 1199 cutoff, but for safety */
  #confidential { display: none; }
}

/* ============================================================
   THEME LIBRARY / paste any block over the :root at the top to switch.
   ============================================================ */

/* --- THEME A / DARK EDITORIAL BRUTALISM (original SOTD brief) ---
:root {
  --ink:     #0B0B0B;
  --ink-2:   #141312;
  --paper:   #F4F1EA;
  --paper-2: #C8C5BD;
  --rule:    #2A2A28;
  --acid:    #E8FF00;
  --acid-2:  #E8FF00;
  --clinical:#1A2421;
}
NOTE: when using THEME A, also revert these spots:
  .logos .cell img            filter: brightness(0) invert(1);
  .ergebnisse .row .logo      filter: brightness(0) invert(1);
  .about .scrim               linear-gradient(90deg, rgba(11,11,11,0.85) ...);
*/

/* --- THEME B / LIGHT EDITORIAL BRUTALISM (paper + yellow) ---
:root {
  --ink:     #F6F3EC;
  --ink-2:   #ECE8DE;
  --paper:   #111110;
  --paper-2: #4A4843;
  --rule:    #D9D4C6;
  --acid:    #E8FF00;
  --acid-2:  #E8FF00;
  --clinical:#E3E7DF;
}
*/

/* --- THEME C / LIVE SITE COLORS (paper + royal blue) — CURRENTLY ACTIVE --- */