/* ============================================================
   style.css — Bausteine
   Baut ausschließlich auf tokens.css. Kein Wert steht hier
   frei; wo eine Zahl auftaucht, ist sie ein Vielfaches des
   Grundmaßes und als solches benannt.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font);
  font-weight: var(--fw);
  font-size: var(--t-text);
  line-height: var(--lh-text);
  letter-spacing: var(--tr-text);
  font-kerning: normal;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Tastaturweg sichtbar, aber ohne Kasten um das Element.
   Ein Rahmen mit Abstand setzt auf Schwarz eine zweite weisse
   Kontur neben die vorhandene — das Zeichen ersetzt sie:
   Verweise unterstreichen, Knopf und Feld fuellen sich von innen. */
:focus { outline: none; }
a:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
button:focus-visible,
.btn:focus-visible { outline: none; background: var(--c-ink); color: var(--c-paper); }
input:focus-visible { outline: none; box-shadow: inset 0 0 0 1px currentColor; }


/* ---- Die sechs Rollen -------------------------------------- */

.display, .h1, .h2, .lead, .text, .label { margin: 0; }

.display {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: var(--fw);
  font-synthesis-weight: none;
}
.h1 {
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  font-weight: var(--fw);
  font-synthesis-weight: none;
}
.h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  font-weight: var(--fw);
  text-transform: uppercase;
}
.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
  font-weight: var(--fw);
}
.text {
  font-size: var(--t-text);
  line-height: var(--lh-text);
  letter-spacing: var(--tr-text);
}
.text p + p { margin: var(--s-4) 0 0; }
.text p { margin: 0; }
/* Lead ist auf dieser Seite der Lesetext, nicht Text 16.
   Absatzabstand: eine Leerzeile. */
.lead p { margin: 0; }
.lead p + p { margin: var(--s-5) 0 0; }
.label {
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tr-label);
  font-weight: var(--fw);
}


/* ---- Raster ------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter);
  padding-inline: var(--margin);
}

/* Spaltenzuweisung — 1-basiert, wie im Layout gezählt */
.c1-2  { grid-column: 1 / span 2; }
.c1-3  { grid-column: 1 / span 3; }
.c1-6  { grid-column: 1 / span 6; }
.c2-3  { grid-column: 2 / span 3; }
.c2-4  { grid-column: 2 / span 4; }
.c3-2  { grid-column: 3 / span 2; }
.c3-4  { grid-column: 3 / span 4; }
.c4-2  { grid-column: 4 / span 2; }
.c4-3  { grid-column: 4 / span 3; }

.section { position: relative; }
.section--ink     { background: var(--c-ink);       color: var(--c-paper); }
.section--haltung { background: var(--c-haltung); }
.section--archiv  { background: var(--c-archiv); }
.section--flat    { background: var(--c-grey-flat); }

/* ---- Ganzer Schirm ------------------------------------------
   Home, About und Haltung füllen den Bildschirm — in jeder
   Größe, ohne Ausnahme. Der Weißraum wirkt nur, wenn die Fläche
   die Fläche ist. Inhalt sitzt mittig, der Fuß am unteren Rand.
   svh statt vh, damit die Leiste auf dem Telefon nicht dazwischenfunkt. */

.section--full {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--edge);
}

/* Sektionslabel oben links — H2 im Versalsatz, 28 unter der Oberkante */
.section__label {
  position: absolute;
  top: 2.59svh;
  left: var(--margin);
}

/* Die Höhen kommen aus dem Dokument, nicht aus einer Zentrierung.
   --y-head und --y-copy sind die Oberkanten von Headline und
   Fließtext, gemessen an der Flächenhöhe (bei 1920 × 1080):
     About    Kopf 354 → 32,8 · Text 534 → 49,4
     Haltung  Kopf 239 → 22,1 · Text 380 → 35,2
   Die beiden Flächen sind im Dokument unterschiedlich gesetzt —
   der Haltungstext ist länger und musste höher ansetzen.        */
.section__body { padding-top: calc(var(--y-head, 30) * 1svh); }
.section__copy {
  padding-top: max(
    var(--s-7),
    calc(var(--y-copy, 48) * 1svh - var(--y-head, 30) * 1svh - var(--t-h1) * 1.8)
  );
}

/* Die Textspalte im Dokument läuft von 940 bis 1573: sie beginnt
   im Spaltenabstand VOR Spalte 4 und endet bündig am Ende von
   Spalte 5. 633 breit — der Spaltenabstand gehört links dazu,
   nicht rechts. */
.col-copy {
  grid-column: 4 / span 2;
  margin-inline-start: calc(var(--gutter) * -1);
}

.band { margin-top: auto; }


/* ---- Navigation --------------------------------------------
   Verschwindet beim Runterscrollen, kommt beim Hochscrollen
   sofort zurück.                                              */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--u) * 4.4);   /* Dokument: Textabstände 61–82, Mittel 71 */
  padding-inline: var(--margin);
  background: var(--c-paper);
  transform: translateY(0);
  transition: transform var(--dur) var(--ease);
  will-change: transform;
  backface-visibility: hidden;
}
.nav--flat   { background: var(--c-grey-nav); }
/* Archiv-Tür: die Seite steht, also trägt die Leiste die Fläche mit (21.09.). */
.nav--clear  { background: transparent; }
/* Cases-Übersicht (22.09.): Die Leiste trägt die Orangefläche — wirkt
   durchsichtig, aber beim Hochscrollen läuft die Tabelle nicht unter
   der Schrift durch. */
.nav--cases  { background: var(--c-archiv); }
.nav--hidden { transform: translateY(-100%); }
.nav a { font-size: var(--t-text); font-weight: var(--fw); }
.nav a[aria-current] { color: var(--c-active); }
/* Auf der Startseite hebt das Dokument nichts hervor — dort ist
   die ganze Leiste schwarz. Die Auszeichnung bleibt für
   Vorleseprogramme erhalten, nur die Farbe entfällt. */
.nav--home a[aria-current] { color: inherit; }


/* ---- Footer ------------------------------------------------- */

/* Keine Linie. Die Zeilen docken unten an, nach oben läuft der Weißraum. */
.footer {
  min-height: var(--footer-h);
  display: flex;
  align-items: flex-end;
  padding-block: var(--gap-s) var(--edge);
}
.footer .grid { width: 100%; }
.footer__col { grid-column: span 1; }
.footer__col:nth-child(1) { grid-column: 1 / span 2; }
.footer__col:nth-child(2) { grid-column: 4 / span 1; }
.footer__col:nth-child(3) { grid-column: 5 / span 1; }
.footer__col:nth-child(4) { grid-column: 6 / span 1; }
.footer a { display: block; }


/* ---- Platzhalter --------------------------------------------
   Jeder Kasten hat ein festes Seitenverhältnis. Nichts springt
   beim Laden, weil die Höhe vor dem Inhalt feststeht.
   --ratio setzt das Verhältnis, Standard 16:9.                 */

.ph {
  --ratio: 16 / 9;
  aspect-ratio: var(--ratio);
  background: var(--c-haltung);
  color: var(--c-ink);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-4);
}
.ph--media { background: var(--c-media); }
.ph--square { --ratio: 1 / 1; }
.ph__label { font-size: var(--t-lead); line-height: var(--lh-lead); font-weight: 400; }


/* ---- Hero ----------------------------------------------------
   Füllt den Bildschirm. Das Wortbild läuft in Display und steht
   mittig — rechts und links derselbe Abstand. Es füllt die
   Satzbreite NICHT randbündig: im Entwurf ist der Rahmen 1860
   breit, der Satz darin rund 1715. Die Größe kommt aus der
   Leiter wie überall sonst, nicht aus einer Breitenrechnung.  */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-bottom: 4.65svh;
}
.hero__mark { padding-top: 38.2svh; }
.hero__wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
}
/* Das Foto sitzt im Wortbild, auf Versalhöhe — in em, damit es
   mit der Schriftgröße mitgeht statt eigene Wege zu laufen. */
.hero__portrait {
  position: relative;
  width: 0.669em;
  height: 0.669em;
  margin-inline: 0.012em;
  flex: none;
  overflow: hidden;
  background: var(--c-grey-flat);
}

/* Die Motive sitzen auf den Seiten eines Koerpers, der sich um die
   eigene Achse dreht. Bei vier Bildern ist das genau ein Wuerfel;
   bei drei oder sechs ein Prisma mit ebenso vielen Flaechen. Winkel
   und Tiefe rechnet app.js aus der Anzahl aus. Gedreht wird immer
   in dieselbe Richtung, deshalb gibt es kein Zuruecksetzen und
   keinen Sprung.                                                 */
/* Der Traeger dreht sich, die Bilder sitzen auf seinen Flaechen.
   Winkel, Tiefe und der ganze Ablauf stehen in app.js: eine Drehung
   um 90 Grad ist keine Strecke von A nach B, sondern schwingt in der
   Mitte etwas zurueck — sonst ragt die Wuerfelkante ueber das
   Quadrat hinaus in die Nachbarbuchstaben. Ein overflow schneidet
   das nicht ab; was in einem 3D-Raum liegt, laesst sich vom Rahmen
   darum nicht beschneiden.                                        */
.hero__wuerfel {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.hero__wuerfel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotateY(calc(var(--i, 0) * var(--winkel, 90deg)))
             translateZ(var(--tiefe, 0.3345em));
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .hero__wuerfel { transition: none; }
}

.hero__intro { margin-top: auto; align-items: end; }

/* ---- Pixel-Trail (24.09.) ------------------------------------
   Drei Ebenen: Raster und Spur im Canvas, darüber weiße Boxen,
   die an den Zellgrenzen einrasten, darüber die Typo. Die Spur
   läuft unter der Schrift durch. Logik in js/trail.js.         */
.hero { position: relative; }
.trail, .trail__boxen { position: absolute; inset: 0; pointer-events: none; }
.trail { width: 100%; height: 100%; display: block; z-index: 0; }
.trail__boxen { z-index: 1; }
.trail__boxen > div { position: absolute; background: var(--c-paper); }
.hero > .grid { position: relative; z-index: 2; }
/* Der Introrahmen im Dokument läuft von 663 bis 1336 — 673 breit,
   nicht rasterbündig, sondern so weit gezogen, dass drei Zeilen
   stehen. Deshalb 80 über die zwei Spalten hinaus. */
.hero__intro .c3-2 { margin-inline-end: calc(var(--u) * -5); }


/* ---- Vier Zeilen, scrollgetrieben ---------------------------
   Jede Zeile läuft einmal durch, jede mit eigener Dynamik.
   Das Raster dahinter bewegt sich deutlich langsamer.          */

.rows { position: relative; }   /* jede Zeile beschneidet selbst */

.rows__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}
.rows__gridline {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--c-ink-20);
}

.row {
  position: relative;
  border-top: 1px solid var(--c-line);
  overflow: hidden;
  white-space: nowrap;
  will-change: transform;
  height: var(--t-display);   /* Zeilenraster im Dokument: 160 */
}
.row:last-of-type { border-bottom: 1px solid var(--c-line); }
.row__inner {
  display: inline-flex;
  align-items: center;
  height: 100%;
  gap: var(--s-2);        /* Dokument: Punkt sitzt dicht am Wort */
  line-height: 1;
  will-change: transform;
}
/* Etwas nach oben gerückt, damit g, y und p unten nicht abreißen. */
.row__inner > span { transform: translateY(calc(var(--row-lift) * -1)); }
.row__dot { transform: none !important; }
.row__dot {
  width: calc(var(--u) * 8.375);
  height: calc(var(--u) * 8.375);
  border-radius: 50%;
  background: currentColor;
  flex: none;
}


/* ---- Markenband — endlos, langsam ----------------------------
   Sitzt am Fuß der About-Fläche: 40 zum unteren Rand, dann eine
   Haarlinie, 40 Abstand, dann die zweite. Der Versalsatz läuft
   mittig dazwischen. Zurückgenommen (22.09.): Lead 20 statt H2,
   Schrift und Linien hellgrau, Linien 0,5 pt statt 1 pt.       */

.band { color: var(--c-band); text-transform: uppercase; }
.band__rule {
  height: 0.5pt;
  background: currentColor;
}
.band__viewport {
  height: var(--edge);          /* 40 zwischen den beiden Linien */
  display: flex;
  align-items: center;
  overflow: hidden;
}
.band__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.band__set { white-space: pre; }   /* pre statt nowrap: sonst fällt das Leerzeichen nach dem letzten „·“ weg (29.09.) */


/* ---- Knopf --------------------------------------------------- */

.btn {
  display: inline-block;
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
  border: 1px solid currentColor;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: var(--fw);
  padding: 0.125em 0.2em;   /* Dokument: Rechteck 101 × 27 um 93 × 23 Satz */
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--c-ink); color: var(--c-paper); }

.btn--block {
  display: block;
  width: 100%;
  height: calc(var(--u) * 4.9375);   /* 79 */
  text-transform: uppercase;
  letter-spacing: var(--tr-h2);
}


/* ---- Innenseiten -------------------------------------------
   Archiv und Agentic AI setzen wie die Startseite: die Fläche
   füllt den Schirm, die Höhen kommen aus dem Dokument.
   Display bei 146 von 1080 → 13,5 %. Der Block darunter bei
   467 → 43,2 %.                                              */

.seite__kopf  { padding-top: calc(var(--nav-h) + var(--u) * 4.5); }   /* 146 */
.c1-4 { grid-column: 1 / span 4; }
.seite__block { padding-inline: var(--margin); padding-top: calc(43.24svh - 13.52svh - var(--t-display) * 0.9); }
/* Rechtsseiten: Vorspann bei 380, Satz ab 558. Der Satz läuft
   zweispaltig ab Spalte 2, Spaltenabstand 40 wie im Raster.
   Paragrafenüberschriften in H2 Versal, Text in Lead 20.      */
.seite__satz { padding-top: calc(var(--u) * 3.5); }   /* Satz ab 558 */
.recht { columns: 2; column-gap: var(--gutter); }
.recht .h2 { break-after: avoid; margin-top: var(--gap-xs); }
.recht .h2:first-child { margin-top: 0; }
.recht .lead { margin-top: var(--s-5); break-inside: avoid; }
.recht__vorspann { margin-top: var(--s-5); }

/* Agentic AI: Einleitung bei 380, erste Linie bei 565 (Skizze 22.09.) */
.seite__intro { padding-top: calc(var(--u) * 14.625 - var(--t-display) * 0.9); }

/* ---- Archiv-Tür ---------------------------------------------- */

.gate { padding-top: calc(var(--nav-h) + var(--gap-s)); }
/* Feld, 30 Abstand, Knopf, 24 Abstand, Fußnote — wie im Dokument. */
.gate__form { display: grid; gap: var(--margin); align-content: start; }
.gate__input {
  width: 100%;
  height: calc(var(--u) * 4.9375);   /* 79 */
  border: 1px solid var(--c-ink);
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}
.gate__input::placeholder { color: var(--c-ink); opacity: 1; }
.gate__note { margin-top: calc(var(--u) * -0.375); }   /* 24 unter dem Knopf statt der 30 aus dem Raster */
.gate__error { margin-top: var(--s-3); min-height: var(--t-label); }

/* Detailbild-Band: unten bündig, Höhen unterschiedlich.
   Läuft mit dem Scrollen, dreht die Richtung beim Hochscrollen. */
.strip { overflow: hidden; margin-top: auto; }
.strip__track {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);            /* 12 */
  width: max-content;
  will-change: transform;
}
.strip__item {
  width: calc(var(--u) * 14);          /* 224 */
  height: calc(var(--u) * var(--hoehe, 13.8));
  background: var(--c-haltung);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  flex: none;
  /* Die Beschriftungen stehen im Dokument alle auf einer Höhe,
     90 über der gemeinsamen Unterkante. */
  padding-bottom: calc(var(--u) * 4.75);
}


/* ---- Tabelle --------------------------------------------------
   Kopf in Text 16, Linie darunter, dann acht Zeilen im 60er
   Raster mit je einer Linie darunter. Die Case-Spalte läuft in
   Lead 20 und ist so breit wie Spalte 1 und 2 zusammen; die
   übrigen vier sitzen auf Spalte 3 bis 6.
   Die Zeilenmarkierung geht über die volle Seitenbreite, die
   Linien nur über den Satzspiegel.                             */

.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  table-layout: fixed;
}
.table th {
  font-size: var(--t-text);
  line-height: var(--lh-text);
  letter-spacing: var(--tr-text);
  font-weight: var(--fw);
  padding-bottom: calc(var(--u) * 0.5);   /* Kopf 470, Linie 493 */
  border-bottom: 1px solid var(--c-line);
  vertical-align: bottom;
}
.table td {
  height: calc(var(--u) * 3.75);             /* 60 */
  padding: 0;
  border-bottom: 1px solid var(--c-line);
  vertical-align: middle;
  font-size: var(--t-text);
  line-height: var(--lh-text);
  letter-spacing: var(--tr-text);
  font-weight: var(--fw);
}
.table td.lead { font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--tr-lead); }

.table tbody tr { transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.table tbody tr:hover,
.table tbody tr.is-active {
  background: var(--c-grey-nav);
  /* bis an beide Seitenränder, obwohl die Tabelle im Satzspiegel steht */
  box-shadow: calc(var(--margin) * -1) 0 0 var(--c-grey-nav),
              var(--margin) 0 0 var(--c-grey-nav);
}

/* ---- Case-Seite -----------------------------------------------
   Alle Höhen aus dem Dokument, gemessen ab Seitenoberkante:
   Zurück 103 · Kunde 219 · Titel 278 · Leistungen 444 ·
   Headermedium 540 (1920 × 1080) · Zwischenkopf 1679 ·
   Medium 1736 · Text 1770 · Karussell 2578 (1920 × 355) ·
   Slideshow 3103 · Text 3958 · Abschluss 4325 · Credits 5085.
   Die Textspalte ist hier 473 breit und nicht rasterbündig —
   so steht sie im Entwurf.                                    */


.case__head { background: var(--c-ink); color: var(--c-paper); }
.case__body { background: var(--c-ink); color: var(--c-paper); }

.case__back   { padding-top: calc(var(--u) * 6.4375); }   /* 103 ab Seitenoberkante */
.case__kunde  { padding-top: calc(var(--u) * 5.875); }    /* 219 */
.case__titel  { padding-top: var(--s-4); }                /* 278 */
.case__meta   { padding-top: calc(var(--u) * 1.375);      /* 444 */
                padding-bottom: calc(var(--u) * 2.25); }  /* Medium 540 */

.case__arrow {
  display: inline-block;
  width: 0; height: 0;
  border-block: calc(var(--u) * 0.625) solid transparent;
  border-right: calc(var(--u) * 0.625) solid currentColor;
  margin-right: var(--s-2);
  vertical-align: middle;
}

.case__kopf2     { padding-top: calc(var(--u) * 11.0625); }  /* 177 — Faktor 3 (22.09.) */
.case__reihe     { padding-top: calc(var(--u) * 2.1875);     /* Medium 1736 */
                   align-items: start; }
.case__medium    { grid-column: 3 / span 4; }                /* 668 bis zum Rand */
.case__spalte    { grid-column: 1 / span 2;
                   max-width: calc(var(--u) * 29.5);         /* 473 */
                   padding-top: calc(var(--u) * 2.125); }    /* Text 1770 */
.case__karussell { padding-top: calc(var(--u) * 12.75); }  /* 204 — Faktor 3 (22.09.) */
.case__slideshow { padding-top: calc(var(--u) * 31.875); } /* 510 — Faktor 3 (22.09.) */
.case__schluss   { padding-top: calc(var(--u) * 4.25); }   /* 3958 — 108 minus Quadratleiste 40 */
.case__abschluss { padding-top: calc(var(--u) * 14.1875); }    /* 4325 */
.case__credits   { padding-top: calc(var(--u) * 3);     /* 5085 */
                   padding-bottom: calc(var(--u) * 7.125); }
.case__breit     { margin-inline-end: calc(var(--gutter) * -1); }
/* Schlusstext steht bündig unter der Slideshow (Spalte 2), nicht am
   Rand — .case__spalte allein zog ihn auf Spalte 1 (22.09.). */
.case__schluss .case__spalte { grid-column: 2 / span 3; }
/* Kompakter Case (Mia san Future): Credits als eigener Absatz unter dem
   Haupttext, abgesetzt um eine Zeile mehr; das Karussell schließt die
   Seite, 204 Luft darunter wie darüber. */
.case__spalte .case__leistung { margin-top: calc(var(--u) * 2.5); }
.case__karussell--schluss { padding-bottom: calc(var(--u) * 12.75); }
/* Case ohne Karussell (People shaping the Golf, 22.09.): Die Slideshow
   folgt direkt auf Text und Film — 204 Luft wie vor dem Karussell,
   nicht 510. */
.case__slideshow--nach-text { padding-top: calc(var(--u) * 12.75); }
/* Case 05 (23.09.): Der Slider steht rechts neben dem Text, danach folgt der
   Schlusstext — dort fehlt die Slideshow, unter der er sonst hängt. Also
   dieselbe Luft wie vor einem Slider, 204 statt 68. */
.case__schluss--nach-reihe { padding-top: calc(var(--u) * 12.75); }

/* ---- Kapitel-Case (23.09.) --------------------------------------
   Bündelt mehrere Projekte unter einer These. Ein Kapitel ist gebaut
   wie ein Einzelcase: Überschrift und Text in der Textspalte, der
   Slider daneben. Jedes zweite Kapitel rückt auf Spalte 2 ein und
   stellt seinen Slider darunter — der Rhythmus bleibt, die Seite
   wird nicht abzählbar.                                           */
.case__kapitel        { padding-top: calc(var(--u) * 12.75);   /* 204 */
                        align-items: start; }
.case__kapitel--ein .case__spalte { grid-column: 2 / span 2; }
/* Im Kapitel sitzt die Überschrift oben bündig mit dem Slider. */
.case__kapitel .case__spalte { padding-top: 0; }
.case__kapitel-hl     { margin-bottom: calc(var(--u) * 0.75); } /* 12 */
.case__kapitel-zeile  { margin-bottom: calc(var(--u) * 2.5); }  /* 40 */
/* Der Slider des eingerückten Kapitels steht darunter, 40 abgesetzt. */
.case__kapitel-medien { padding-top: calc(var(--u) * 2.5); }

/* Der Fakt schließt den Textblock: Zahl groß, Erklärung klein
   darunter. Zahlen werden plakativ gesetzt, nicht in den Fließtext
   gelegt.                                                          */
.case__fakt       { margin-top: calc(var(--u) * 2.5); }         /* 40 */
.case__fakt b     { display: block;
                    font-size: var(--t-fakt);
                    line-height: var(--lh-fakt);
                    letter-spacing: var(--tr-display); }
.case__fakt span  { display: block; margin-top: calc(var(--u) * 0.5); }

/* Verweise im Case-Text: Die Seite setzt Verweise sonst ohne
   Kennzeichnung — im Fließtext braucht es eine.                    */
.case__spalte a, .case__schluss a { text-decoration: underline;
                                    text-underline-offset: 0.15em; }

/* Ein Slide kann statt eines Bildes ein Raster aus Kacheln tragen.
   Social-Posts sind für kleine Größen gebaut; auf Bühnenbreite
   gezogen wirken sie nicht groß, sondern vergrößert. Im Raster
   stehen sie in ihrer eigenen Größe — sie wachsen nie über ihre
   native Auflösung hinaus.                                         */
.schau__raster {
  display: grid;
  /* minmax(0, 1fr): Ohne die Null nimmt die Zeile die Eigenhöhe der Kachel
     als Mindestmaß und das Raster wächst aus der Bühne heraus. */
  grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--s-4);
  align-items: center;
  justify-items: center;
}
/* Die Kachel füllt ihre Zelle, ohne beschnitten zu werden. Wie groß sie
   wird, bestimmt die Spaltenzahl — gewählt wird sie so, dass die Kachel
   ungefähr die Größe bekommt, die der Post im Feed hat. */
.schau__raster img, .schau__raster video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Karussell: volle Breite, 355 hoch — die Bilder liegen im
   Dokument im Anschnitt und laufen über den Rand hinaus. */
.carousel { overflow: hidden; }
.carousel__track { display: flex; gap: var(--s-2); width: max-content; will-change: transform; }
.carousel__item {
  height: calc(var(--u) * 22.1875);   /* 355 */
  width: calc(var(--u) * 30);
  flex: none;
}
/* Geliefert in 16:9, der Platz ist 480 : 355 — mittig beschnitten. */
img.carousel__item { display: block; object-fit: cover; }
/* Hochformate (Case 02): Höhe bleibt, die Breite folgt dem Bild —
   kein Motiv wird angeschnitten. */
.carousel--hoch img.carousel__item { width: auto; }

/* Filme der Case-Seite (22.09.): füllen ihren Platz, Grund schwarz
   wie die Fläche, damit vor dem ersten Bild nichts aufblitzt. */
.case__film {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 9);
  background: var(--c-ink);
  overflow: hidden;
}
.case__film video,
.case__film img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Headerfilm eingerückt (22.09.): mindestens 80 zu jeder Seite,
   auf großen Schirmen mit dem Grundmaß (5 u). Die Fläche bleibt schwarz. */
.case__kopffilm {
  background: var(--c-ink);
  padding-inline: max(80px, calc(var(--u) * 5));
}

/* Awardfilm mit Ton: startet nicht von selbst. Weißer Punkt mittig,
   darin das Dreieck — der Punkt aus den Zeilen der Startseite.
   Nach dem Klick übernimmt die Bedienleiste des Browsers. */
.case__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-paper);
  color: var(--c-ink);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease);
}
.case__play::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border-block: calc(var(--u) * 1.125) solid transparent;
  border-left: calc(var(--u) * 1.75) solid currentColor;
  transform: translate(-36%, -50%);
}
.case__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.case__play:focus-visible { outline: 2px solid var(--c-paper); outline-offset: 4px; }
.case__film.is-spielt .case__play { display: none; }

/* Slideshow (50): Bilder liegen übereinander und blenden über.
   Darunter je Bild ein Quadrat 16 × 16, Abstand 16, 24 unter der
   Bühne, mittig. Das aktuelle deckt voll, die anderen 60 %.   */
.schau__buehne {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 9);
  background: var(--c-ink);
  overflow: hidden;
}
.schau__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.schau__bild.is-aktiv { opacity: 1; }
.schau__punkte {
  display: flex;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.schau__punkt {
  width: var(--s-4);
  height: var(--s-4);
  padding: 0;
  border: 0;
  color: inherit;             /* Knöpfe erben die Schriftfarbe nicht von selbst */
  background: currentColor;
  opacity: 0.6;
  cursor: pointer;
}
.schau__punkt[aria-current="true"] { opacity: 1; }
.schau__punkt:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---- Agentic AI (22.09., Skizze Indesign/AgenticAI_LayoutSkizze.pdf)
   Dunkle Fläche. Je Eintrag: Linie, 160 Luft, dann eine Reihe aus
   drei Teilen — links Titel (H1, Versalien) mit Stichwort-Kästen,
   Mitte das Medium auf Spalte 3–4 in 16:9 mit orangem Versatz-
   schatten, rechts der Teaser in Text 16, unten bündig mit dem
   Medium. Dann 160 Luft und die nächste Linie.                   */

body.agentic { background: var(--c-agentic); color: var(--c-ink); }   /* V2: Rosa, Anthrazit */
body.agentic .nav { background: var(--c-agentic); }
/* Auf dunklem Grund hebt die Leiste nichts hervor — wie auf der
   Startseite. Die Auszeichnung bleibt für Vorleseprogramme. */
body.agentic .nav a[aria-current] { color: inherit; }
body.agentic .footer { background: var(--c-grey-nav); color: var(--c-ink); }

/* Einleitung in H2-Größe, aber gemischt gesetzt, 24 auf 24 */
.h2--gemischt { text-transform: none; line-height: 1; }

.entry {
  padding-block: calc(var(--u) * 10);   /* 160 über und unter dem Medium */
  margin-top: calc(var(--u) * 7);       /* Einleitung → erste Linie bei 565 */
}
.entry + .entry { margin-top: 0; }
/* Die Linie wahrt den Randabstand — 30 links und rechts, wie im
   Dokument. Zum Footer hin steht keine. */
.entry::before {
  content: '';
  display: block;
  height: 1px;
  background: currentColor;
  margin: calc(var(--u) * -10) var(--margin) calc(var(--u) * 10);
}
.entry__raster { align-items: start; }

.entry__kopf { grid-column: 1 / span 2; grid-row: 1; }
.entry__titel { text-transform: uppercase; }

/* Stichwort-Kästen: Haarlinie, Label 12 (Florian, 22.09.). 30 unter
   dem Titel, Reihen 16 auseinander, Kästen 12. Der erste Kasten steht
   optisch auf dem Stamm des ersten Buchstabens, nicht auf seiner
   Vorbreite. */
.stichworte {
  list-style: none;
  margin: var(--margin) 0 0;
  padding: 0 0 0 calc(var(--t-h1) * 0.07);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-3);
}
.stichworte li {
  border: 1px solid currentColor;
  padding: calc(var(--u) * 0.125) var(--s-2);
}

.entry .entry__medium {
  grid-column: 3 / span 2;
  grid-row: 1;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio, 16 / 9);
  box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 var(--c-ink);   /* V2: Underlayer Anthrazit */
}

/* Teaser: schließt an den Schatten mit Spaltenabstand an (1304 bei
   1920), rund 456 breit, unten bündig mit dem Medium. */
.entry__text {
  grid-column: 5 / span 2;
  grid-row: 1;
  align-self: end;
  margin-inline-start: calc(var(--u) * 0.5);
  max-width: calc(var(--u) * 28.5);
}
.entry__art { margin-top: var(--s-4); }

/* Medium: Bildschirmaufnahme oder Grafik. Ein Klick öffnet es groß. */
.film {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--c-grey-flat);
  overflow: hidden;
  font: inherit;
  color: inherit;
}
.film video, .film img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.lupe-auf { cursor: zoom-in; }
.lupe-auf:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ---- Pop-up ----------------------------------------------------
   Dieselbe Datei groß: 600 hoch bei 1920, im Format des Mediums.
   Dunkle Fläche der Seite dahinter. Esc, Klick daneben oder
   „Schließen" beendet es.                                        */
.lupe {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
}
.lupe::backdrop { background: rgba(30, 30, 30, 0.94); }   /* Anthrazit (V2) */
.lupe__buehne {
  height: min(calc(var(--u) * 37.5), 88svh);
  aspect-ratio: var(--ratio, 16 / 9);
  max-width: 92vw;
  background: var(--c-grey-flat);
}
/* BrandCore: die ganze Architektur als Seite im Pop-up, scrollbar.
   Gleiche Höhe, so breit, dass die Grafik in ihrem eigenen
   Zweispalter steht (1152 bei 1920). */
.lupe__buehne--doc {
  aspect-ratio: auto;
  width: min(calc(var(--u) * 72), 92vw);
}
.lupe__buehne iframe { border: 0; background: #F2F2EF; }
.lupe__buehne > * {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
.lupe__zu {
  position: fixed;
  top: var(--margin);
  right: var(--margin);
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-weight: var(--fw);
  color: var(--c-paper);
  cursor: pointer;
}
.lupe__zu:focus-visible { text-decoration: underline; text-underline-offset: 0.25em; }


/* ---- Abstände zwischen Abschnitten ----------------------------- */

.pad-s { padding-block: var(--gap-s); }
.pad-m { padding-block: var(--gap-m); }
.pad-l { padding-block: var(--gap-l); }
.pt-xs { padding-top: var(--gap-xs); }
.pt-s  { padding-top: var(--gap-s); }
.pb-s  { padding-bottom: var(--gap-s); }


/* ============================================================
   Mobil — eigener Entwurf, nicht der verkleinerte große
   Unterhalb 992 px hört das Mitwachsen auf und der Umbruch
   übernimmt: ein bis zwei Spalten, eigenes Grundmaß, eigene
   Größenleiter. Der große Entwurf wird hier nicht skaliert.
   ============================================================ */

@media (max-width: 991px) {
  :root {
    --u: 14px;
    --margin: 20px;
    --gutter: 16px;
    --cols: 2;
    --t-display: calc(var(--u) * 3.4);
    --t-h1:      calc(var(--u) * 2);
    --nav-h:     56px;
  }

  .c1-2, .c1-3, .c1-6, .c2-3, .c2-4, .c3-2, .c3-4, .c4-2, .c4-3 {
    grid-column: 1 / -1;
  }

  .grid { row-gap: var(--s-6); }

  .nav {
    justify-content: flex-start;
    gap: var(--s-5);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }

  .hero__wordmark { white-space: normal; flex-wrap: wrap; }
  .hero__portrait { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); }

  .row__dot { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); }

  /* Die Übersicht wird zur Liste: zwei Zeilen je Eintrag. */
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tbody tr { border-bottom: 1px solid var(--c-line); padding-block: var(--s-5); }
  .table td { border: 0; padding: 0; }
  .table td:first-child { padding-bottom: var(--s-2); }
  .table td:not(:first-child) {
    display: inline;
    font-size: var(--t-label);
    line-height: var(--lh-label);
  }
  .table td:not(:first-child):not(:last-child)::after { content: " · "; }

  .footer__col:nth-child(n) { grid-column: 1 / -1; }
  .footer { padding-block: var(--s-7); }

  .carousel__item { width: 80vw; }
  /* Case-Seite: Medium und Schlusstext volle Breite. */
  .case__medium, .case__schluss .case__spalte { grid-column: 1 / -1; }
  .case__kopffilm { padding-inline: var(--margin); }
  .strip__item { width: 42vw; }

  /* Agentic AI: Titel und Stichworte, darunter Medium, darunter Teaser —
     alles volle Breite. */
  .col-copy { grid-column: 1 / -1; margin-inline-start: 0; }
  .entry { padding-block: var(--gap-xs); }
  .entry::before { margin: calc(var(--gap-xs) * -1) var(--margin) var(--gap-xs); }
  .entry__kopf, .entry .entry__medium, .entry__text {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .entry__text { margin-inline-start: 0; max-width: none; }
}

/* Tür-Liste (23.09.): Zeilen sind keine Links, also kein Hover. */
.table--statisch tbody tr:hover { background: none; box-shadow: none; }
.tuer__liste { margin-top: calc(var(--u, 16px) * 8); }


/* ==============================================================
   V2 (24.09.) — Digitale Bühnen, Cases als Knöpfe
   Layout: Indesign/WEblayou_Vorlage_1920_V2.pdf
   ============================================================== */

/* ---- Bühne: Punktraster + Textblöcke hinter einem Medium ---------
   Das Medium bleibt, wo es war (Spalte 3–4). Die Bühne ragt darüber
   hinaus: links 72, rechts 56, oben 48, unten 32 bei 1920. Linke Kante
   als Haarlinie. Gezeichnet von js/buehne.js, Farbe = currentColor. */
.entry__buehne {
  grid-column: 3 / span 2;
  grid-row: 1;
  position: relative;
}
.entry__buehne .entry__medium { position: relative; z-index: 1; display: block; }
.buehne {
  position: absolute;
  inset: calc(var(--u) * -6) calc(var(--u) * -3.5) calc(var(--u) * -6) calc(var(--u) * -4.5);   /* oben 96 (×2), unten 96 (×3) — Layouthöhe unberührt */
  border-left: 1px solid currentColor;
  pointer-events: none;
}
.buehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Teaser: Haarlinie links, Claim oben (V2) */
.entry__text {
  border-left: 1px solid currentColor;
  padding-left: var(--s-3);
  /* Bühne ragt 56 in den Spaltenabstand (40) hinein; Linie steht 12 daneben —
     derselbe Abstand wie Linie → Text. */
  margin-inline-start: calc(var(--u) * 3.5 - var(--gutter) + var(--s-3));
}
.entry__claim { margin-bottom: calc(var(--u) * 3); }
/* Stichworte enden vor der Bühne (sie ragt 72 nach links) */
.entry__kopf { padding-right: calc(var(--u) * 5); }

/* ---- Cases-Übersicht als Knöpfe (V2) --------------------------
   Jede Zeile ein Knopf: Mint, Haarlinie, Underlayer 8/8 Anthrazit,
   Hover grau. 60 hoch, 24 Abstand. Spalten nach Layout: Case 39,7 ·
   Kunde 20,3 · Aufgabe 22,2 · Kategorie 17,8 %. Die Zeile verlinkt
   ganz (der Link im Case-Namen wird über die Zeile gezogen).        */
.cases-buehne {
  position: relative;
  margin: calc(var(--u) * 2) calc(var(--u) * 13.75) 0 calc(var(--u) * 12.5);
  padding: calc(var(--u) * 3.5) calc(var(--u) * 2.8) calc(var(--u) * 3) calc(var(--u) * 1.25);
}
.cases-buehne .buehne { inset: 0; }
.knoepfe { position: relative; z-index: 1; display: block; width: 100%; }
.knoepfe tbody { width: 100%; }
.knoepfe thead {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.knoepfe tbody { display: grid; gap: calc(var(--u) * 1.5); }
.knoepfe tr {
  position: relative;
  display: grid;
  grid-template-columns: 39.7% 20.3% 22.2% 17.8%;
  align-items: center;
  height: calc(var(--u) * 3.75);
  padding-left: var(--u);
  background: var(--c-mint);
  border: 1px solid var(--c-ink);
  box-shadow: calc(var(--u) * 0.25) calc(var(--u) * 0.25) 0 var(--c-ink);   /* 4/4 in Ruhe */
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.knoepfe td { border: 0; padding: 0; height: auto; }
.knoepfe td:nth-child(1) { order: 1; }
.knoepfe td:nth-child(4) { order: 2; }
.knoepfe td:nth-child(3) { order: 3; }
.knoepfe td:nth-child(2) { order: 4; }
.knoepfe td:nth-child(5) { display: none; }   /* Agentur steht auf der Case-Seite */
.knoepfe a { color: inherit; text-decoration: none; }
.knoepfe a::after { content: ''; position: absolute; inset: -1px; }
.knoepfe tr:hover, .knoepfe tr.is-active, .knoepfe tr:focus-within { background: var(--c-grey-nav); box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 var(--c-ink); }   /* 8/8 nur bei Hover — der Case springt nach vorn */
.knoepfe a:focus-visible { outline: none; text-decoration: underline; }

@media (max-width: 991px) {
  .entry__buehne { grid-column: 1 / -1; grid-row: auto; margin: calc(var(--u) * 7) 0; }
  .entry__text { margin-inline-start: 0; }
  .cases-buehne { margin-inline: 0; padding: var(--s-5); }
  .knoepfe tr { display: block; height: auto; padding: var(--s-4); }
  .knoepfe td:not(:first-child) { display: inline; }
  .knoepfe td:nth-child(5) { display: none; }
}

/* ---- Cases-Tür V2 (28.09.) ------------------------------------
   Feld und Knopf im Knopf-Look der Übersicht: Mint, Haarlinie,
   Underlayer 4/4 in Ruhe, 8/8 bei Hover/Fokus. Dahinter eine Bühne
   (Chip „Access“), links 72 über die Spalte hinaus, rechts bis an
   den Fensterrand: Spalte 6 + Spaltenabstand + Außenrand.
   Feld beginnt weiter bei 467 — die Bühne zieht sich um ihr
   Innenpolster nach oben. Fußnote unter der Bühne, nicht auf Punkten. */
.tuer-buehne {
  position: relative;
  margin-top: calc(var(--u) * -3.5);
  padding: calc(var(--u) * 3.5) 0 calc(var(--u) * 3);
}
.tuer-buehne .buehne {
  inset: 0 calc(-1 * ((100% - var(--gutter)) / 2 + var(--gutter) + var(--margin))) 0 calc(var(--u) * -4.5);
}
.gate__felder { position: relative; z-index: 1; display: grid; gap: var(--margin); }
.gate__felder .gate__input,
.gate__felder .gate__knopf {
  background: var(--c-mint);
  color: var(--c-ink);
  border: 1px solid var(--c-ink);
  box-shadow: calc(var(--u) * 0.25) calc(var(--u) * 0.25) 0 var(--c-ink);   /* 4/4 in Ruhe */
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gate__felder .gate__knopf:hover,
.gate__felder .gate__knopf:focus-visible,
.gate__felder .gate__input:hover {
  background: var(--c-grey-nav);
  color: var(--c-ink);
  box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 var(--c-ink);   /* 8/8 — springt nach vorn */
}
.gate__felder .gate__input:focus-visible {
  background: var(--c-grey-nav);
  box-shadow: inset 0 0 0 1px currentColor, calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 var(--c-ink);
}
.gate__fuss .gate__note { margin-top: 0; }

@media (max-width: 991px) {
  .tuer-buehne { margin-top: 0; }
  .tuer-buehne .buehne { inset: 0 calc(-1 * var(--margin)) 0 calc(-1 * var(--margin)); border-left: 0; }
  .tuer-buehne { padding-inline: var(--s-5); }
}

/* ---- Cases-Tür: Code-Schritt (28.09.) --------------------------
   data-schritt am Formular: „mail“ = Adressfeld + „Absenden“,
   „code“ = sechs Zahlenfelder + „Öffne Cases“. Gleiche Höhe (79),
   gleicher Look wie die Knöpfe. Felder 30 auseinander wie Feld/Knopf. */
.gate__form[data-schritt="mail"] .gate__code,
.gate__form[data-schritt="mail"] .gate__status,
.gate__form[data-schritt="mail"] .gate__knopf-code,
.gate__form[data-schritt="code"] .gate__mail,
.gate__form[data-schritt="code"] .gate__knopf-mail { display: none; }

.gate__code {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--margin);
  margin: 0; padding: 0; border: 0; min-width: 0;
}
.gate__ziffer {
  width: 100%;
  min-width: 0;
  height: calc(var(--u) * 4.9375);   /* 79 */
  padding: 0;
  font: inherit;
  font-weight: var(--fw);
  font-size: var(--t-h1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--c-ink);
  caret-color: var(--c-ink);
  background: var(--c-mint);
  border: 1px solid var(--c-ink);
  border-radius: 0;
  box-shadow: calc(var(--u) * 0.25) calc(var(--u) * 0.25) 0 var(--c-ink);   /* 4/4 */
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gate__ziffer:hover { background: var(--c-grey-nav); box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 var(--c-ink); }
.gate__ziffer:focus,
.gate__ziffer:focus-visible {
  outline: none;
  background: var(--c-grey-nav);
  box-shadow: inset 0 0 0 1px currentColor, calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 var(--c-ink);   /* 8/8 */
}
.gate__knopf:disabled { cursor: progress; opacity: 0.6; }

.gate__fuss { display: grid; gap: var(--s-3); }
.gate__fuss .gate__error { margin-top: 0; min-height: 0; }
.gate__fuss .gate__error:empty { display: none; }
.gate__link {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.15em;
}
.gate__link:hover, .gate__link:focus-visible { outline: none; text-decoration-thickness: 2px; }

@media (max-width: 991px) {
  .gate__code { gap: var(--s-3); }
  .gate__ziffer { font-size: var(--t-h2); }
}


/* ---- Mobil-Korrektur (29.09.) ----------------------------------
   Nach dem Livegang bei 390 und 360 gemessen: vier Stellen machten
   die Seite breiter als den Schirm (seitlich wischbar, iPhone zoomt raus),
   dazu war „Kontakt“ im Menü angeschnitten. */
.rows { overflow-x: clip; }   /* Rasterlinien laufen beim Scrollen seitlich aus */
@media (max-width: 991px) {
  .hero__intro .c3-2 { margin-inline-end: 0; }   /* Desktop zieht den Intro 80 über die Spalte */
  .recht { columns: 1; }                           /* AGB: zwei Spalten à 167 waren zu schmal */
  .entry__buehne .buehne {                         /* Agentic AI: Bühne randlos statt über den Rand */
    inset: calc(var(--u) * -6) calc(-1 * var(--margin));
    border-left: 0;
  }
}
@media (max-width: 480px) {
  /* Menü: sechs Punkte passen ab 360 in eine Zeile. Darunter bleibt die Leiste wischbar. */
  .nav { justify-content: space-between; gap: 8px; }
}