/* =====================================================================
   KEPH — Designsystem
   Struktur, Raster, Typo-Skala, Folds, Motion: 1:1 nach overjet.com
   nachgebaut (aus dem Seitenarchiv vermessen, nicht geschätzt).
   Farbe: Sand statt Elfenbein/Indigo. Knöpfe: poliertes Metall.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Easings — exakt die Kurven, die Overjet benutzt
   --------------------------------------------------------------- */
:root {
  --ease-in-quad:      cubic-bezier(.55, .085, .68, .53);
  --ease-in-cubic:     cubic-bezier(.55, .055, .675, .19);
  --ease-in-quart:     cubic-bezier(.895, .03, .685, .22);
  --ease-out-quad:     cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic:    cubic-bezier(.215, .61, .355, 1);
  --ease-out-quart:    cubic-bezier(.165, .84, .44, 1);
  --ease-out-quint:    cubic-bezier(.23, 1, .32, 1);
  --ease-out-expo:     cubic-bezier(.19, 1, .22, 1);
  --ease-out-circ:     cubic-bezier(.075, .82, .165, 1);
  --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
  --ease-in-out-expo:  cubic-bezier(1, 0, 0, 1);
  --gleasing:          cubic-bezier(.4, 0, 0, 1);
}

/* ---------------------------------------------------------------
   2. Farbtoken — Sand
   Aufbau parallel zu Overjet: ein Rohsatz, darüber zwei Themes.
   Jeder Abschnitt trägt .theme-light oder .theme-dark und liest
   ausschließlich --theme-*. Deshalb kann ein Fold umschalten,
   ohne dass eine einzige Komponente davon weiß.
   --------------------------------------------------------------- */
:root {
  /* Rohsatz */
  --sand-25:   #FBF7F0;
  --sand-50:   #F6F0E4;
  --sand-100:  #EFE7D6;
  --sand-200:  #E5DAC3;
  --sand-300:  #D6C7A9;
  --sand-400:  #BBA783;

  --ink:       #1A1611;
  --ink-800:   #241F17;
  --ink-700:   #332C21;

  --text-light-mode: #5A5140;
  --text-dark-mode:  #C3B79E;

  /* Messing — der Akzent. --brass-700 ist der einzige, der Text
     tragen darf (4,8:1 auf Sand). Die helleren sind Glanzlichter. */
  --brass-900: #6B5220;
  --brass-700: #A16207;
  --brass-500: #C08A2E;
  --brass-300: #E3C77E;
  --brass-100: #F6E9C4;

  --white:     #FFFFFF;
  --signal:    #A8482A;

  /* Schriften */
  --font-display: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Inter Fallback", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.theme-light {
  --shimmer-lo:  #4A3712;
  --shimmer-mid: #7E611F;
  --shimmer-hi:  #A87F2C;
  --theme-primary:   var(--sand-100);
  --theme-secondary: var(--ink);
  --theme-contrast:  var(--brass-900);
  --theme-text:      var(--text-light-mode);
  --theme-card:      var(--sand-200);
  --theme-header-button: var(--sand-200);
  --theme-stroke:    #1A16111F;
  --theme-text-semi: #5A514040;
  --theme-shine-a:   #FFFFFFB8;
  --theme-shine-b:   #1A161114;
}

.theme-sand {
  --shimmer-lo:  #4A3712;
  --shimmer-mid: #7E611F;
  --shimmer-hi:  #A87F2C;
  --theme-primary:   var(--sand-50);
  --theme-secondary: var(--ink);
  --theme-contrast:  var(--brass-900);
  --theme-text:      var(--text-light-mode);
  --theme-card:      var(--sand-200);
  --theme-header-button: var(--sand-200);
  --theme-stroke:    #1A16111F;
  --theme-text-semi: #5A514040;
  --theme-shine-a:   #FFFFFFB8;
  --theme-shine-b:   #1A161114;
}

.theme-dark {
  --shimmer-lo:  #9A7733;
  --shimmer-mid: #D9BA76;
  --shimmer-hi:  #FBF1D6;
  --theme-primary:   var(--ink);
  --theme-secondary: var(--sand-50);
  --theme-contrast:  var(--brass-300);
  --theme-text:      var(--text-dark-mode);
  --theme-card:      #241F17CC;
  --theme-header-button: var(--ink-700);
  --theme-stroke:    #F6F0E41F;
  --theme-text-semi: #C3B79E90;
  --theme-shine-a:   #FFFFFF2E;
  --theme-shine-b:   #00000038;
}

/* ---------------------------------------------------------------
   3. Raster & Rhythmus
   Overjets Kniff: jede Größe ist min(px, vw). Bis 1440px skaliert
   alles mit dem Viewport, darüber friert es ein. Mobil (<800px)
   gilt eine eigene vw-Skala mit 375px als Bezug.
   --------------------------------------------------------------- */
:root {
  --layout-columns-count: 4;
  --layout-columns-gap:   2.13333vw;
  --layout-margin:        4.26667vw;

  --header-height:   17.0667vw;
  --alertbar-height: 12.2667vw;

  --section-margin:   21.3333vw;
  --section-margin-s: 17.0667vw;
  --section-margin-l: 32vw;

  --spacing-micro: 2.66667vw;
  --spacing-xs:    4vw;
  --spacing-sm:    6.66667vw;
  --spacing-md:    8vw;
  --spacing-lg:    13.3333vw;
  --spacing-xl:    20vw;

  --grid-gap-xs: 4vw;
  --grid-gap:    6.66667vw;
  --grid-gap-sm: 9.33333vw;
  --grid-gap-md: 13.3333vw;
  --grid-gap-lg: 20vw;

  --radius-fold: 8.53333vw;
}

@media (min-width: 800px) {
  :root {
    --layout-columns-count: 12;
    --layout-columns-gap:   min(8px, .555556vw);
    --layout-margin:        min(24px, 1.66667vw);

    --header-height:   min(80px, 5.55556vw);
    --alertbar-height: min(40px, 2.77778vw);

    --section-margin:   min(160px, 11.1111vw);
    --section-margin-s: min(80px, 5.55556vw);
    --section-margin-l: min(216px, 15vw);

    --spacing-micro: min(10px, .694444vw);
    --spacing-xs:    min(10px, .694444vw);
    --spacing-sm:    min(30px, 2.08333vw);
    --spacing-md:    min(50px, 3.47222vw);
    --spacing-lg:    min(75px, 5.20833vw);
    --spacing-xl:    min(130px, 9.02778vw);

    --grid-gap-xs: min(15px, 1.04167vw);
    --grid-gap:    min(25px, 1.73611vw);
    --grid-gap-sm: min(35px, 2.43056vw);
    --grid-gap-md: min(50px, 3.47222vw);
    --grid-gap-lg: min(75px, 5.20833vw);

    --radius-fold: min(32px, 2.22222vw);
  }
}

:root {
  --layout-width: calc(100vw - (2 * var(--layout-margin)));
  --layout-column-width: calc(
    (var(--layout-width) - ((var(--layout-columns-count) - 1) * var(--layout-columns-gap)))
    / var(--layout-columns-count)
  );
  --header-top-offset: var(--alertbar-height);
}

body[data-alertbar="closed"] { --header-top-offset: 0px; }

/* ---------------------------------------------------------------
   4. Grundlagen
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.has-smooth-scroll { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--ink);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

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

:focus-visible {
  outline: 2px solid var(--brass-700);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------
   5. Typo-Skala — die Werte sind aus Overjet übernommen.
   Display: Archivo 800, Versal, negativer Buchstabenabstand,
   Zeilenhöhe unter 100 %. Fließtext: Inter 500. Label: Mono.
   --------------------------------------------------------------- */
.h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.04em;
  font-size: 14.4vw;
  font-weight: 800;
  line-height: 86%;
}
.h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.03em;
  font-size: 11.2vw;
  font-weight: 800;
  line-height: 86%;
}
.h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.03em;
  font-size: 8.53333vw;
  font-weight: 800;
  line-height: 92%;
}
.h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.03em;
  font-size: 6.4vw;
  font-weight: 800;
  line-height: 92%;
}
.h5 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-size: 5.33333vw;
  font-weight: 800;
  line-height: 102%;
}
.h6 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-size: 4.26667vw;
  font-weight: 700;
  line-height: 105%;
}
.p-l {
  font-family: var(--font-body);
  letter-spacing: -.01em;
  font-size: 4.26667vw;
  font-weight: 500;
  line-height: 120%;
}
.p {
  font-family: var(--font-body);
  letter-spacing: -.01em;
  font-size: 3.46667vw;
  font-weight: 500;
  line-height: 120%;
  text-transform: none;
}
.p-s {
  font-family: var(--font-mono);
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-size: 2.66667vw;
  font-weight: 400;
  line-height: 129%;
}
.p-menu {
  font-family: var(--font-body);
  font-size: 3.2vw;
  line-height: 107.5%;
  text-transform: none;
}
.cta {
  font-family: var(--font-body);
  letter-spacing: -.01em;
  font-size: 3.46667vw;
  font-weight: 500;
  line-height: 100%;
}
.pre-heading {
  margin-bottom: var(--spacing-xs);
  font-family: var(--font-mono);
  letter-spacing: .06em;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--theme-text);
}

@media (min-width: 800px) {
  .h1 { letter-spacing: -.03em; font-size: min(176px, 12.2222vw); line-height: 81.8182%; }
  .h2 { font-size: min(104px, 7.22222vw); line-height: 82.6923%; }
  .h3 { font-size: min(64px, 4.44444vw);  line-height: 92.1875%; }
  .h4 { font-size: min(48px, 3.33333vw);  line-height: 91.6667%; }
  .h5 { letter-spacing: -.03em; font-size: min(32px, 2.22222vw); line-height: 90.625%; }
  .h6 { font-size: min(24px, 1.66667vw);  line-height: 100%; }
  .p-l { font-size: min(20px, 1.38889vw); line-height: 120%; }
  .p   { font-size: min(16px, 1.11111vw); line-height: 118.75%; }
  .p-s { font-size: min(12px, .833333vw); line-height: 125%; }
  .p-menu { font-size: min(12px, .833333vw); line-height: 125%; }
  .cta { font-size: min(13px, .902778vw); line-height: 100%; }
}

/* Text-Hilfsklassen */
.muted     { color: var(--theme-text); }
.mono      { font-family: var(--font-mono); }
.num       { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.accent    { color: var(--theme-contrast); }
.max-60    { max-width: 60ch; }
.max-46    { max-width: 46ch; }
.center    { text-align: center; }

/* ---------------------------------------------------------------
   6. Layout-Container
   --------------------------------------------------------------- */
.layout-block,
.layout-grid {
  width: calc(100% - 2 * var(--layout-margin));
  max-width: 1392px;
  margin-left: auto;
  margin-right: auto;
}
.layout-grid-inner {
  padding-left: var(--layout-margin);
  padding-right: var(--layout-margin);
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}
.layout-grid,
.layout-grid-inner {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns-count), minmax(0, 1fr));
  gap: 0 var(--layout-columns-gap);
}

/* ---------------------------------------------------------------
   7. Fold — Overjets Signaturbewegung.
   Abschnitte stapeln sich. Ein isBottom-Fold klebt am unteren Rand
   und wird vom nächsten überschoben; die abgerundete Oberkante des
   nächsten wird per clip-path aus dem darunterliegenden gestanzt,
   damit die Ecke sauber bleibt statt zu überlappen.
   Reines CSS: position:sticky + negative Ränder + ein 100svh-Platz-
   halter. Kein Scroll-Listener.
   --------------------------------------------------------------- */
.fold {
  --radius: var(--radius-fold);
  position: relative;
  z-index: 2;                       /* Inhalt liegt über der Fußzeile */
  color: var(--theme-secondary);
}
.fold > .fold-sticky { min-height: 100svh; }
.fold.has-background > .fold-sticky { background-color: var(--theme-primary); }

/* Abgerundete Oberkante: der Abschnitt schiebt sich mit runder Kante
   über den vorherigen. Der negative Rand deckt genau die Rundung ab,
   damit darunter kein Spalt aufblitzt. */
.fold:not(.is-hero):not(.is-footer) > .fold-sticky {
  border-top-left-radius:  var(--radius);
  border-top-right-radius: var(--radius);
  padding-top: 32vw;
}
.fold:not(.is-hero):not(.is-footer).has-background { margin-top: calc(-1 * var(--radius)); }

.fold.is-last > .fold-sticky {
  border-bottom-left-radius:  var(--radius);
  border-bottom-right-radius: var(--radius);
}
@media (min-width: 800px) {
  .fold:not(.is-hero):not(.is-footer) > .fold-sticky { padding-top: min(160px, 11.1111vw); }
}

/* Klebt am unteren Rand: der Abschnitt bleibt stehen, der nächste
   schiebt sich darüber. Der 100svh-Platzhalter davor liefert den Weg,
   der negative Rand nimmt ihn aus dem Fluss wieder heraus. */
.fold.is-bottom              { margin-bottom: -100svh; }
.fold.is-bottom::before      { content: ""; visibility: hidden; min-height: 100svh; display: block; }
.fold.is-bottom > .fold-sticky { position: sticky; bottom: 0; }

/* Luft unter dem letzten Abschnitt eines klebenden Folds. Ohne sie
   frisst die heranfahrende Kante des nächsten Folds sofort in den
   Text — der Abschnitt wäre nur einen Wimpernschlag lang ganz zu
   sehen. Die Kante läuft jetzt erst durch leeren Grund. */
@media (min-width: 800px) {
  .fold.is-bottom:not(.is-hero) > .fold-sticky { padding-bottom: min(200px, 13.8889vw); }
}

/* Klebt am oberen Rand: die Fußzeile steht schon da und wird
   freigelegt, während der letzte Inhaltsabschnitt hochfährt. */
.fold.is-top                 { margin-top: -100svh; z-index: 1; }
.fold.is-top::after          { content: ""; visibility: hidden; min-height: 100svh; display: block; }
.fold.is-top > .fold-sticky  { position: sticky; top: 0; }

.fold.is-disabled            { margin-bottom: 0; margin-top: 0; }
.fold.is-disabled::before,
.fold.is-disabled::after     { display: none; }
.fold.is-disabled > .fold-sticky { position: relative; }

/* Unter 800px ist der Weg zu kurz, als dass das Stapeln lesbar wäre —
   dort laufen die Abschnitte normal durch, die Rundung bleibt. */
@media (max-width: 799px) {
  .fold.is-bottom            { margin-bottom: 0; }
  .fold.is-bottom::before    { display: none; }
  .fold.is-bottom > .fold-sticky { position: relative; }
  .fold.is-top               { margin-top: 0; }
  .fold.is-top::after        { display: none; }
  .fold.is-top > .fold-sticky { position: relative; }
  .fold > .fold-sticky       { min-height: 0; }
}

/* ---------------------------------------------------------------
   7a. Das Metall.

   Ein gelber Verlauf von hell nach dunkel sieht nach Verlauf aus.
   Metall sieht man daran, dass sich darin etwas spiegelt: eine helle
   Lichtkante oben, darunter ein Aufhellen, dann ein *dunkles Band*
   — der Horizont — und darunter wieder Licht, das vom Boden zurück-
   geworfen wird. Dieses dunkle Band in der Mitte ist der ganze
   Unterschied; ohne es bleibt es ein Farbverlauf.

   Und weil sich in Metall etwas spiegelt, steht es nie still.

   ---------------------------------------------------------------
   EINE LICHTQUELLE FÜR DIE GANZE SEITE

   Vorher hatte jede Messingfläche ihre eigene Uhr: der Knopf 11 s,
   die Schrift 7 s, der Balken 5,5 s, die Scheibe 16 s. Uhren, die
   unterschiedlich schnell gehen, driften auseinander — die Seite
   flackerte an mehreren Stellen gleichzeitig, aber nie im selben
   Takt. Genau das liest sich als billig.

   Jetzt gibt es genau **einen** Wert: --light. keph.js schreibt ihn
   an :root, gespeist aus der Scrollposition (der Hauptanteil) plus
   einem sehr langsamen Grundlicht, damit auch eine stillstehende
   Seite nicht tot wirkt. Jede Messingfläche leitet ihre Spiegelung
   daraus ab. Damit ist Gleichlauf keine Einstellungssache mehr,
   sondern baulich unmöglich zu verfehlen: es gibt nur eine Uhr.

   Wer scrollt, bewegt das Licht — so verhält sich Metall.

   --light-offset verschiebt eine Fläche gegen die anderen, ohne die
   Geschwindigkeit zu ändern. Gleicher Takt, andere Phase: verwandt,
   aber nicht im Gleichschritt.

   --light läuft bei 3600 um. Alle bewegten Flächen sind 300 % breit
   (3600/300 = 12 volle Kacheln) und die Scheibe dreht 1° je Einheit
   (3600° = 10 volle Umdrehungen) — der Umlauf ist deshalb an keiner
   Stelle sichtbar.
   --------------------------------------------------------------- */
:root {
  --light: 0;

  --metal-1: #FFF6E2;   /* Lichtkante */
  --metal-2: #F2DFB0;   /* Aufhellung */
  --metal-3: #D9BA76;   /* Übergang */
  --metal-4: #A98436;   /* Horizont — das dunkle Band */
  --metal-5: #E4CB8E;   /* Bodenreflex */
  --metal-6: #B68F42;   /* Schattenkante */

  /* Die Form der Platte. Steht fest: Lichtkante oben, Horizont in
     der Mitte, Bodenreflex unten. Bewusst flacher als vorher — die
     Dramatik kommt jetzt aus der wandernden Spiegelung darüber,
     nicht aus dem Grundverlauf. */
  --metal-plate: linear-gradient(178deg,
    #FBEBC6  0%,
    #EBD49A 17%,
    #D7B269 44%,
    #C7A053 57%,
    #E3C78C 83%,
    #BE9548 100%);

  /* Die Spiegelung, die darüber wandert. Dasselbe Prinzip wie beim
     Wort „Befund": ein Reflex, der quer durch das Material zieht.
     Beide Enden sind vollständig durchsichtig — nur so lässt sich
     die Kachel nahtlos weiterschieben. */
  --metal-sweep: linear-gradient(100deg,
    #FFFFFF00   0%,
    #6B522026  10%,
    #FFFDF2A0  25%,
    #FFF6E24D  35%,
    #FFFFFF00  50%,
    #6B52201C  60%,
    #FFFAEC73  75%,
    #FFF3D640  85%,
    #FFFFFF00 100%);

  /* Hell poliert. Die Platte, die beim Darauffahren von links
     durchzieht: dieselbe Form, nur ins Licht gekippt. */
  --metal-plate-lit: linear-gradient(178deg,
    #FFFAEC  0%,
    #F8E7BC 17%,
    #E7C88A 44%,
    #DCB871 57%,
    #F3DFAA 83%,
    #D2A85F 100%);

  --metal-bevel:
    inset 0  1px 0 #FFFFFFD9,
    inset 0 -1px 0 #00000042,
    inset  1px 0 0 #FFFFFF59,
    inset -1px 0 0 #0000002E,
    0 1px 2px #1A161126,
    0 6px 18px -8px #6B52205C;
}

/* Die eine Rechnung, aus der jede Spiegelung ihre Lage bezieht. */
@property --light {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* ---------------------------------------------------------------
   8. Knöpfe.
   Mechanik von Overjet: ein Kreis-Pseudoelement wächst aus der
   Mitte (scale 0 → 1, .5s ease-out-expo) und färbt den Knopf um.
   Material: siehe oben.
   --------------------------------------------------------------- */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  border: none;
  border-radius: 3.2vw;
  height: 12.2667vw;
  padding: 0 4.8vw;
  isolation: isolate;

  font-family: var(--font-body);
  font-size: 3.46667vw;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 100%;

  color: #1C1505;

  /* Zwei Schichten: oben die wandernde Spiegelung, darunter die feste
     Form der Platte. Die Form steht, das Licht laeuft — genau wie beim
     Wort „Befund". Kein weisser Streifen, der quer durchschiesst; der
     Reflex ist Teil des Materials, kein Effekt darauf. */
  background-image: var(--metal-sweep), var(--metal-plate);
  background-size: 200% 100%, 100% 100%;
  background-position: calc((var(--light) + var(--light-offset, 0)) * -1%) 50%, 0 0;
  background-repeat: repeat, no-repeat;
  box-shadow: var(--metal-bevel);
  transition:
    box-shadow .5s var(--ease-out-expo),
    transform  .25s var(--ease-out-quad),
    color      .4s var(--ease-out-expo);
}
@media (min-width: 800px) {
  .button {
    border-radius: min(8px, .555556vw);
    height: min(46px, 3.19444vw);
    padding: 0 min(18px, 1.25vw);
    font-size: min(13px, .902778vw);
  }
}

/* Der Zug von links.

   Vorher wuchs hier ein Kreis aus der Mitte auf. Das ist Overjets
   Geste, aber sie ploppt: der Knopf wirkt, als spränge etwas heraus.
   Jetzt zieht eine helle Platte gleichmäßig von links nach rechts
   durch — anfangs schnell, zum Ende hin auslaufend.

   Bewegt wird ausschließlich transform. Das läuft auf der Grafikkarte
   und damit in der vollen Bildrate des Monitors, auch bei 120 Hz; eine
   Animation auf width oder clip-path müsste dafür jedes Bild neu
   umbrechen und würde genau das Ruckeln erzeugen, das man vermeiden
   will. Die Platte ist deshalb formatfüllend und wird verschoben,
   nicht gestaucht: so bleibt der Verlauf unverzerrt. */
.button::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  right: -16%;                 /* laeuft rechts aus dem Knopf hinaus */
  z-index: -1;
  pointer-events: none;
  transform: translate3d(-101%, 0, 0);
  transition: transform .62s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;

  background-image: var(--metal-plate-lit);
  background-size: 100% 100%;
  background-repeat: no-repeat;

  /* Die Vorderkante laeuft weich aus, sonst schiebt sich eine harte
     Kante durch den Knopf und es sieht nach Fortschrittsbalken aus
     statt nach Licht. Der weiche Teil liegt im Endzustand ausserhalb
     des Knopfes, die Flaeche ist also durchgehend hell, wenn der Zug
     angekommen ist. */
  -webkit-mask-image: linear-gradient(90deg, #000 0 84%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0 84%, transparent 100%);
}
.button:hover::before,
.button:focus-visible::before,
.button:active::before { transform: translate3d(0, 0, 0); }

/* Beim Druecken kommt der Zug schneller durch und der Knopf senkt sich
   einen Hauch. Auf dem Telefon gibt es kein :hover — dort ist das hier
   die einzige Rueckmeldung, deshalb muss sie sitzen. */
.button:active::before { transition-duration: .16s; }

.button:hover {
  box-shadow:
    inset 0  1px 0 #FFFFFFF2,
    inset 0 -1px 0 #00000047,
    inset  1px 0 0 #FFFFFF73,
    inset -1px 0 0 #00000033,
    0 2px 4px #1A16112E,
    0 14px 30px -8px #6B52208C;
}
.button:active { transform: translateY(1px); }

.button .button-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .55em;
  height: 100%;
}
.button .button-inner svg { width: 1em; height: auto; }

/* Umriss-Variante: gebürstet statt poliert, füllt sich bei Hover. */
.button.stroke {
  color: var(--theme-secondary);
  background: transparent;
  background-image: none;
  animation: none;
  border: 1px solid var(--theme-stroke);
  box-shadow: none;
}
.button.stroke::before {
  background-image: linear-gradient(178deg,
    color-mix(in srgb, var(--theme-secondary) 92%, var(--brass-700)) 0%,
    var(--theme-secondary) 100%);
}
.button.stroke::after { display: none; }
.button.stroke:hover {
  color: var(--theme-primary);
  border-color: transparent;
  box-shadow: 0 8px 22px -10px #1A161166;
}

/* Geisterknopf für dunkle Folds */
.button.ghost {
  color: var(--theme-secondary);
  background: color-mix(in srgb, var(--theme-secondary) 8%, transparent);
  background-image: none;
  animation: none;
  border: 1px solid var(--theme-stroke);
  box-shadow: none;
}
.button.ghost::after { display: none; }
.button.ghost::before {
  background-image: linear-gradient(178deg, var(--sand-50) 0%, var(--sand-200) 100%);
}
.button.ghost:hover { color: var(--ink); border-color: transparent; }

/* Gedeckt: Stein statt Messing. Auf der Preisseite stehen drei Knöpfe
   dicht beieinander; drei glänzende Messingplatten nebeneinander nehmen
   sich gegenseitig die Wirkung und der Blick weiß nicht, wohin. Der Zug
   von links bleibt, nur eben in Stein. */
.button.gedeckt {
  color: var(--theme-secondary);
  background-image: none;
  background-color: color-mix(in srgb, var(--theme-secondary) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-secondary) 18%, transparent);
  box-shadow: none;
}
.button.gedeckt::before {
  background-image: linear-gradient(178deg,
    color-mix(in srgb, var(--theme-secondary) 90%, var(--brass-700)) 0%,
    var(--theme-secondary) 100%);
}
.button.gedeckt:hover,
.button.gedeckt:focus-visible {
  color: var(--theme-primary);
  border-color: transparent;
  box-shadow: 0 10px 24px -12px #1A16116B;
}

.button.btn-lrg { font-size: 4.26667vw; height: 14vw; padding: 0 6vw; }
@media (min-width: 800px) {
  .button.btn-lrg {
    font-size: min(16px, 1.11111vw);
    height: min(56px, 3.88889vw);
    padding: 0 min(26px, 1.80556vw);
  }
}

/* ---------------------------------------------------------------
   9. Links — Unterstrich fährt aus, Text kippt ins Messing
   --------------------------------------------------------------- */
.link {
  position: relative;
  cursor: pointer;
  width: fit-content;
  display: inline-block;
}
.link::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0;
  transition: transform .5s var(--ease-out-expo);
}
.link.arrow::after,
.link:hover::after,
.link.active::after { transform: scaleX(1); }

.link.arrow {
  transition: color .4s var(--ease-out-expo);
}
.link.arrow:hover,
.link.arrow.active {
  color: var(--theme-contrast);
}

/* --------------------------------------------------------------
   10. Alertbar
   -------------------------------------------------------------- */
.alertbar {
  /* Absolut, nicht fest: der Hinweis gehört an den Anfang des
     Dokuments und darf weggescrollt werden. Die Kopfzeile rückt
     dabei nach oben nach — keph.js schreibt --header-top-offset. */
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 110;
  height: var(--alertbar-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.13333vw;
  padding: 0 var(--layout-margin);
  background: var(--ink);
  color: var(--sand-50);
  transition: transform .6s var(--ease-out-expo), opacity .4s linear;
}
body[data-alertbar="closed"] .alertbar {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.alertbar-text {
  font-family: var(--font-mono);
  font-size: 2.66667vw;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
}
.alertbar-text b { color: var(--brass-300); font-weight: 500; }
.alertbar-close {
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: .6;
  padding: 0;
  line-height: 0;
  transition: opacity .3s var(--ease-out-quad);
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
}
.alertbar-close:hover { opacity: 1; }
@media (min-width: 800px) {
  .alertbar { gap: min(16px, 1.11111vw); }
  .alertbar-text { font-size: min(12px, .833333vw); }
}

/* --------------------------------------------------------------
   11. Kopfzeile — schwebende Pille mit Milchglas.
   Beim Scrollen nach unten fährt sie weg, beim Scrollen nach oben
   kommt sie zurück. Hinter den Menüpunkten gleitet eine Kachel mit,
   deren Breite und Position von keph.js in --item-* geschrieben wird.
   -------------------------------------------------------------- */
.site-header {
  position: fixed;
  left: 0; right: 0;
  top: calc(min(8px, .555556vw) + var(--header-top-offset));
  height: var(--header-height);
  padding: 0 var(--layout-margin);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--theme-secondary);
  transition: top .5s var(--ease-out-expo);
}
.site-header[data-collapsed="true"] { pointer-events: none; }

.header-nav {
  position: relative;
  z-index: 2;               /* über der Schublade, die im selben Kopf liegt */
  width: 100%;
  max-width: 1392px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: 0 var(--layout-columns-gap);
  padding: min(10px, .694444vw) min(12px, .833333vw) min(10px, .694444vw) min(18px, 1.25vw);
  border-radius: min(12px, .833333vw);
  background-color: color-mix(in srgb, var(--theme-primary) 88%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--theme-secondary) 14%, transparent);
  box-shadow: 0 10px 30px -18px #1A161159;
  transition: transform .4s var(--ease-out-quad) .1s, opacity .4s var(--ease-out-quad) .1s;
}
.site-header[data-collapsed="true"] .header-nav {
  transition: all .75s var(--ease-out-expo);
  opacity: 0;
  transform: translateY(-200%);
}

.header-logo {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: .5em;
  z-index: 100;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: min(20px, 1.38889vw);
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.header-logo .mark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: min(22px, 1.52778vw);
  height: min(22px, 1.52778vw);
  border-radius: min(6px, .416667vw);
  flex: none;

  /* Dasselbe Material wie die Knöpfe, auf derselben Uhr. Vorher lag
     hier ein Kegelverlauf, der sich drehte — der läuft in der Mitte
     zwangsläufig in einen Punkt zusammen, und dieser Knoten sah bei
     22 px nach Fehler aus statt nach Metall. */
  background-image: var(--metal-sweep), var(--metal-plate);
  background-size: 200% 100%, 100% 100%;
  background-position: calc((var(--light) + var(--light-offset, 35)) * -1%) 50%, 0 0;
  background-repeat: repeat, no-repeat;
  box-shadow:
    inset 0  1px 0 #FFFFFFCC,
    inset 0 -1px 0 #0000003D,
    inset  1px 0 0 #FFFFFF4D,
    inset -1px 0 0 #00000026;
}

/* Ein einzelner dunkler Punkt: der Referenzpunkt, aus dem bei KEPH
   alles Weitere entsteht. Mehr braucht die Marke bei dieser Größe
   nicht — jede zusätzliche Linie wird bei 22 px zu Matsch. */
.header-logo .mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 50%,
    #241B06 0 16%, #241B0600 17%);
  background-repeat: no-repeat;
}

.header-links {
  --item-width: 0;
  --item-x: 0;
  --item-active: 0;
  grid-column: span 7;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(4px, .277778vw);
  position: relative;
}
.header-links::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: var(--item-width);
  transform: translateX(var(--item-x));
  opacity: var(--item-active);
  background-color: var(--theme-header-button);
  border-radius: min(8px, .555556vw);
  pointer-events: none;
  z-index: 0;
  transition:
    transform .3s var(--ease-out-quad),
    width     .3s var(--ease-out-quad),
    opacity   .3s var(--ease-out-quad);
}
.header-links > * { position: relative; z-index: 1; }

.header-link {
  display: flex;
  align-items: center;
  gap: .4em;
  height: min(38px, 2.63889vw);
  padding: 0 min(14px, .972222vw);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: min(14px, .972222vw);
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
  border-radius: min(8px, .555556vw);
}
.header-link .chevron {
  width: .7em;
  transition: transform .3s var(--ease-out-quad);
}
.header-link[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.header-buttons {
  grid-column: span 3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--layout-columns-gap);
  z-index: 10;
}
.header-buttons .header-login {
  font-size: min(14px, .972222vw);
  font-weight: 500;
  padding: 0 min(10px, .694444vw);
}

.menu-icon {
  display: none;
  width: min(42px, 2.91667vw);
  height: 20px;
  position: relative;
  background: none; border: none; cursor: pointer;
  justify-self: end;
}
.menu-icon span {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background-color: currentColor;
  transition:
    rotate .2s var(--ease-out-expo),
    translate .2s var(--ease-out-expo) .2s;
}
.menu-icon span:first-child { top: 7px; }
.menu-icon span:last-child  { top: 12px; }
[data-menu="true"] .menu-icon span:first-child { translate: 0 2.5px; rotate: 45deg;  transition-delay: 0s, 0s; }
[data-menu="true"] .menu-icon span:last-child  { translate: 0 -2.5px; rotate: -45deg; transition-delay: 0s, 0s; }

/* Mega-Menü */
.mega {
  position: absolute;
  top: calc(100% + min(10px, .694444vw));
  left: 0; right: 0;
  padding: min(28px, 1.94444vw);
  border-radius: min(14px, .972222vw);
  background-color: color-mix(in srgb, var(--theme-primary) 96%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--theme-stroke);
  box-shadow: 0 30px 60px -30px #1A161166;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: min(24px, 1.66667vw) var(--layout-columns-gap);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity .35s var(--ease-out-quad),
    transform .45s var(--ease-out-expo),
    visibility 0s linear .45s;
}
.mega[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity .35s var(--ease-out-quad),
    transform .45s var(--ease-out-expo),
    visibility 0s;
}
.mega-col       { grid-column: span 3; }
.mega-col.wide  { grid-column: span 6; }
.mega-label {
  font-family: var(--font-mono);
  font-size: min(11px, .763889vw);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--theme-text);
  margin-bottom: min(14px, .972222vw);
}
.mega-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: min(14px, .972222vw);
  align-items: center;
  padding: min(10px, .694444vw);
  border-radius: min(10px, .694444vw);
  transition: background-color .3s var(--ease-out-quad);
}
.mega-item:hover { background-color: var(--theme-card); }
.mega-item .item-title {
  display: block;
  font-size: min(15px, 1.04167vw);
  font-weight: 600;
  letter-spacing: -.01em;
}
.mega-item .item-desc {
  display: block;
  font-size: min(13px, .902778vw);
  color: var(--theme-text);
  line-height: 1.35;
  margin-top: 2px;
}

/* --------------------------------------------------------------
   12. Platzhalter für Grafiken.
   Ausdrücklich leer gelassen. Jeder Rahmen nennt sein Seitenver-
   hältnis und wofür er gedacht ist, damit später niemand raten muss.
   -------------------------------------------------------------- */
.ph {
  position: relative;
  width: 100%;
  border-radius: min(16px, 1.11111vw);
  border: 1px dashed color-mix(in srgb, var(--theme-secondary) 22%, transparent);
  background-color: color-mix(in srgb, var(--theme-secondary) 3.5%, transparent);
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent 0 10px,
      color-mix(in srgb, var(--theme-secondary) 4%, transparent) 10px 20px
    );
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ph::after {
  content: attr(data-ph);
  font-family: var(--font-mono);
  font-size: min(11px, .763889vw);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--theme-secondary) 45%, transparent);
  text-align: center;
  padding: 1em;
  line-height: 1.5;
}
.ph.ratio-16-9  { aspect-ratio: 16 / 9; }
.ph.ratio-4-3   { aspect-ratio: 4 / 3; }
.ph.ratio-1-1   { aspect-ratio: 1 / 1; }
.ph.ratio-3-4   { aspect-ratio: 3 / 4; }
.ph.ratio-21-9  { aspect-ratio: 21 / 9; }
.ph.round       { border-radius: 999px; }
.ph.icon {
  width: min(40px, 2.77778vw);
  height: min(40px, 2.77778vw);
  border-radius: min(9px, .625vw);
  flex: none;
}
.ph.icon::after { content: ""; }
@media (max-width: 799px) {
  .ph { border-radius: 3.2vw; }
  .ph::after { font-size: 2.66667vw; }
  .ph.icon { width: 9.6vw; height: 9.6vw; border-radius: 2.13333vw; }
}

/* --------------------------------------------------------------
   12b. Grafiken — was die Platzhalter ersetzt.
   Gleiche Maße und Rundung wie .ph, damit nichts springt. Befund-
   grafiken (Fernröntgenbild) stehen auf ihrem eigenen dunklen Grund,
   weil Graustufen auf Sand nicht lesbar sind (DESIGN.md § 9.3).
   -------------------------------------------------------------- */
.grafik {
  position: relative;
  width: 100%;
  margin: 0;
  border-radius: min(16px, 1.11111vw);
  overflow: hidden;
  background: var(--theme-card);
}
.grafik.ratio-16-9 { aspect-ratio: 16 / 9; }
.grafik.ratio-4-3  { aspect-ratio: 4 / 3; }
.grafik.ratio-1-1  { aspect-ratio: 1 / 1; }
.grafik.ratio-21-9 { aspect-ratio: 21 / 9; }
.grafik > img, .grafik > svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.grafik--befund {
  background: #0D1015;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
@media (max-width: 799px) { .grafik { border-radius: 3.2vw; } }

/* Diagramme (Belegkette, Ablaufband): Inline-SVG, Farben aus dem Thema
   des Abschnitts, Kacheln und Faden im Gold der Symbole (#k-gold). */
.grafik--diagramm { background: color-mix(in srgb, var(--theme-card), transparent 35%); box-shadow: inset 0 0 0 1px var(--theme-stroke); }
.dg { display: block; width: 100%; height: 100%; overflow: visible; }
.dg text { font-feature-settings: "tnum"; }
.dg-label { font: 500 13px/1 var(--font-mono); letter-spacing: .06em; fill: var(--theme-text); opacity: .8; }
.dg-mini  { font: 500 10px/1 var(--font-mono); letter-spacing: .08em; fill: var(--theme-text); opacity: .7; }
.dg-wert  { font: 700 22px/1 var(--font-display); letter-spacing: -.01em; fill: var(--theme-secondary); }
.dg-sub   { font: 400 15px/1 var(--font-body); fill: var(--theme-text); }
.dg-vor   { fill: #A8482A; }
.theme-dark .dg-vor { fill: #E5A78F; }
.dg-einstufung { font: 600 16px/1 var(--font-mono); fill: #F3DFA6; letter-spacing: .02em; }
.dg-schiene, .dg-klammer { fill: none; stroke: var(--theme-secondary); stroke-opacity: .22; stroke-width: 1.5; }
.dg-schnitt { fill: none; stroke: var(--theme-secondary); stroke-opacity: .3; stroke-width: 1.5; stroke-dasharray: 4 6; }
.dg-element      { fill: none; stroke: var(--theme-secondary); stroke-opacity: .35; stroke-width: 1.4; }
.dg-element-voll { fill: var(--theme-secondary); fill-opacity: .32; }
.dg-zart  { fill: none; stroke: var(--theme-secondary); stroke-opacity: .35; stroke-width: 1.2; stroke-linecap: round; }
.dg-punkt { fill: var(--theme-secondary); fill-opacity: .75; }
.dg-faden { fill: none; stroke: url(#dg-gold); stroke-width: 2.4; stroke-linecap: round; }
.dg-faden-ring  { fill: none; stroke: url(#dg-gold); stroke-width: 2; }
.dg-faden-rahmen { fill: none; stroke: url(#dg-gold); stroke-width: 2; }
.dg-faden-feld  { fill: rgba(227, 199, 126, .14); stroke: url(#dg-gold); stroke-width: 1.8; }
.dg-faden-voll  { fill: url(#dg-gold); }
.grafik--band .band-schmal { display: none; }
@media (max-width: 799px) {
  .grafik--band.ratio-21-9 { aspect-ratio: 360 / 700; }
  .grafik--band .band-breit { display: none; }
  .grafik--band .band-schmal { display: block; }
}

/* --------------------------------------------------------------
   12a. Symbole — goldene Kacheln.
   Ein Satz für alle Stellen: dunkle Tinte-Kachel mit feiner
   Messingkante, darin das Symbol im goldenen Platin-Verlauf
   (#k-gold, im Sprite am Anfang von <body>). Die Kachel ist in
   allen drei Themen dieselbe — wie das Favicon —, damit Gold
   auf Sand und auf Tinte gleich trägt.
   -------------------------------------------------------------- */
.icon-kachel {
  position: relative;
  display: flex;               /* nicht grid: dort löst die Prozent-Höhe des Symbols nicht auf */
  align-items: center;
  justify-content: center;
  flex: none;
  width: min(40px, 2.77778vw);
  height: min(40px, 2.77778vw);
  border-radius: min(9px, .625vw);
  background: linear-gradient(150deg, #2B251C 0%, #17140F 58%, #0E0C09 100%);
  box-shadow:
    inset 0 0 0 1px rgba(227, 199, 126, .30),
    inset 0 1px 0 rgba(255, 244, 214, .14),
    0 1px 2px rgba(14, 12, 9, .28);
  transition: box-shadow .3s var(--ease-out-quad);
}
.icon-kachel .icon { display: block; flex: none; width: 58%; height: auto; aspect-ratio: 1; overflow: visible; }
.mega-item:hover .icon-kachel,
.mega-item:focus-visible .icon-kachel,
.audience:hover .icon-kachel,
.audience.active .icon-kachel {
  box-shadow:
    inset 0 0 0 1px rgba(227, 199, 126, .62),
    inset 0 1px 0 rgba(255, 244, 214, .22),
    0 4px 14px -6px rgba(192, 138, 46, .55);
}
.marquee-item .icon-kachel {
  width: min(28px, 1.94444vw); height: min(28px, 1.94444vw);
  border-radius: min(7px, .486111vw);
}
.audience .icon-kachel { width: 14.9333vw; height: 14.9333vw; border-radius: 2.66667vw; }
.principle-foot .icon-kachel { width: 19.7333vw; height: 21.3333vw; border-radius: 2.13333vw; }
.principle-foot .icon-kachel .icon { width: 46%; }
@media (min-width: 800px) {
  .audience .icon-kachel { width: min(48px, 3.33333vw); height: min(48px, 3.33333vw); border-radius: min(10px, .694444vw); }
  .principle-foot .icon-kachel { width: min(84px, 5.83333vw); height: min(92px, 6.38889vw); border-radius: min(8px, .555556vw); }
}
@media (max-width: 799px) {
  .icon-kachel { width: 9.6vw; height: 9.6vw; border-radius: 2.13333vw; }
  .marquee-item .icon-kachel { width: 7.46667vw; height: 7.46667vw; border-radius: 1.86667vw; }
  .audience .icon-kachel { width: 14.9333vw; height: 14.9333vw; border-radius: 2.66667vw; }
  .principle-foot .icon-kachel { width: 19.7333vw; height: 21.3333vw; border-radius: 2.13333vw; }
}

/* --------------------------------------------------------------
   13. Hero
   -------------------------------------------------------------- */
.hero {
  display: flex;
  flex-flow: column nowrap;
  min-height: 100svh;
  padding-top: 40vw;
  padding-bottom: 12.8vw;
  gap: 8.53333vw;
}
@media (min-width: 800px) {
  .hero {
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    gap: min(40px, 2.77778vw);
    padding-top: 16vh;
    padding-bottom: min(36px, 2.5vw);
    margin-bottom: min(80px, 5.55556vw);
  }
}
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4.26667vw;
  flex: 1;
}
@media (min-width: 800px) { .hero-content { gap: min(24px, 1.66667vw); } }

.hero-title { max-width: 22ch; }

/* Geschriebenes Messing.

   Derselbe Gedanke wie beim Knopf: nicht ein Verlauf von dunkel nach
   hell, sondern ein Reflex, der durch die Buchstaben wandert. Die
   Spanne ist bewusst eng — --shimmer-hi ist der hellste Messington,
   der als Schrift noch 3,2:1 gegen den Grund hält. Ein Reflex, der
   das Wort für einen Moment unlesbar macht, ist kein Reflex, sondern
   ein Fehler.

   .shimmer liegt auf einer eigenen Klasse, damit der Zeilen-Splitter
   sie beim Umbau auf die Wortspans mitnehmen kann. */
.shimmer,
.hl {
  /* Zwei Lichter je Kachel. Mit nur einem konnte ein kurzes Wort
     komplett in die dunkle Strecke fallen und sah dann tot aus. */
  background-image: linear-gradient(101deg,
    var(--shimmer-lo)   0%,
    var(--shimmer-mid) 12%,
    var(--shimmer-hi)  24%,
    var(--shimmer-mid) 36%,
    var(--shimmer-lo)  50%,
    var(--shimmer-mid) 62%,
    var(--shimmer-hi)  74%,
    var(--shimmer-mid) 86%,
    var(--shimmer-lo) 100%);
  background-size: 200% 100%;
  background-repeat: repeat;
  background-position: calc((var(--light) + var(--light-offset, 0)) * -1%) 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Zweite und dritte Zeile laufen versetzt — gleicher Takt, andere
   Phase. Sonst blitzt die ganze Überschrift auf einmal auf. */
.rv-line:nth-child(2n) .shimmer,
.rv-line:nth-child(2n) .hl { --light-offset: 48; }
.rv-line:nth-child(3n) .shimmer,
.rv-line:nth-child(3n) .hl { --light-offset: 96; }
.hero-text { display: grid; gap: 4.26667vw; align-items: start; }
@media (min-width: 800px) { .hero-text { gap: min(20px, 1.38889vw); } }
.hero-lede { color: var(--theme-text); }
@media (min-width: 800px) { .hero-lede { width: min(500px, 34.7222vw); } }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 3.2vw; }
@media (min-width: 800px) { .hero-ctas { gap: min(12px, .833333vw); } }

@property --glow-a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --glow-b {
  syntax: "<angle>";
  initial-value: 180deg;
  inherits: false;
}

.hero-media {
  --frame: 2px;
  --r: min(16px, 1.11111vw);
  flex: 1;
  max-width: 100%;
  position: relative;
  border-radius: var(--r);
  padding: var(--frame);
  background:
    conic-gradient(from var(--glow-a),
      transparent 0%, #7E611F 6%, #D4B65C 13%, #A87F2C 20%, transparent 32%,
      transparent 50%, #4A3712 56%, #A87F2C 64%, #D4B65C 70%, transparent 82%),
    conic-gradient(from var(--glow-b),
      transparent 0%, transparent 18%, #7E611F 26%, #A87F2C 32%, transparent 42%,
      transparent 58%, #D4B65C 68%, #7E611F 76%, transparent 88%);
  animation: glow-spin-a 5s infinite, glow-spin-b 8s infinite;
  box-shadow:
    0 0 30px -8px rgba(168, 127, 44, .25),
    0 0 60px -15px rgba(168, 127, 44, .1);
}
@media (max-width: 799px) { .hero-media { --r: 3.2vw; } }
@media (min-width: 800px) { .hero-media { max-width: 50%; } }

@keyframes glow-spin-a {
  0%   { --glow-a: 0deg; }
  20%  { --glow-a: 110deg; }
  45%  { --glow-a: 160deg; }
  70%  { --glow-a: 290deg; }
  100% { --glow-a: 360deg; }
}
@keyframes glow-spin-b {
  0%   { --glow-b: 180deg; }
  30%  { --glow-b: 60deg; }
  55%  { --glow-b: 10deg; }
  80%  { --glow-b: -100deg; }
  100% { --glow-b: -180deg; }
}

.fold.is-hero.has-background > .fold-sticky {
  background: linear-gradient(180deg, #D5D5D5 40%, var(--sand-50) 100%);
}

.hero-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r, 16px) - var(--frame, 2px));
}

@media (prefers-reduced-motion: reduce) {
  .hero-media { animation: none; }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  width: fit-content;
  padding: .5em .9em;
  border-radius: 999px;
  border: 1px solid var(--theme-stroke);
  background: color-mix(in srgb, var(--theme-secondary) 4%, transparent);
  font-family: var(--font-mono);
  font-size: 2.93333vw;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--theme-text);
}
@media (min-width: 800px) { .badge { font-size: min(11px, .763889vw); } }
.badge i {
  width: .5em; height: .5em;
  border-radius: 50%;
  background-image: radial-gradient(circle at 32% 28%, var(--metal-1), var(--metal-4) 70%);
  background-size: 300% 300%;
  background-repeat: repeat;
  background-position: calc((var(--light) + var(--light-offset, 80)) * -1%) 50%;
  box-shadow: 0 0 0 0 #C08A2E99;
  animation: keph-pulse 2.4s var(--ease-out-quad) infinite;
  flex: none;
}
@keyframes keph-pulse {
  0%   { box-shadow: 0 0 0 0 #C08A2E99; }
  70%  { box-shadow: 0 0 0 .55em #C08A2E00; }
  100% { box-shadow: 0 0 0 0 #C08A2E00; }
}

/* --------------------------------------------------------------
   14. Marquee — Endlosband der Quellformate
   -------------------------------------------------------------- */
.sub-hero-content {
  padding-top: 12.8vw;
  padding-bottom: 6.4vw;
  text-align: center;
}
@media (min-width: 800px) {
  .sub-hero-content { padding-top: min(60px, 4.16667vw); padding-bottom: min(40px, 2.77778vw); }
}
.marquee {
  display: flex;
  overflow-x: clip;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  padding-bottom: 12.8vw;
}
@media (min-width: 800px) { .marquee { padding-bottom: min(100px, 6.94444vw); } }
.marquee-inner {
  display: flex;
  white-space: nowrap;
  flex: none;
  animation: keph-marquee 42s linear infinite;
}
.marquee:hover .marquee-inner { animation-play-state: paused; }
.marquee-inner > * { flex-shrink: 0; }
@keyframes keph-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 2.13333vw;
  height: 12.8vw;
  padding: 0 4.26667vw;
  margin-right: 2.13333vw;
  border: 1px solid var(--theme-stroke);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 3.2vw;
  font-weight: 500;
  color: var(--theme-text);
}
@media (min-width: 800px) {
  .marquee-item {
    gap: min(10px, .694444vw);
    height: min(52px, 3.61111vw);
    padding: 0 min(22px, 1.52778vw);
    margin-right: min(10px, .694444vw);
    font-size: min(16px, 1.11111vw);
  }
}
.marquee-item .ph.icon {
  width: min(24px, 1.66667vw); height: min(24px, 1.66667vw);
  border-radius: min(6px, .416667vw);
}
@media (max-width: 799px) {
  .marquee-item .ph.icon { width: 6.4vw; height: 6.4vw; }
}

/* --------------------------------------------------------------
   15. Produktsuite — Reiter + abwechselnde Zeilen
   -------------------------------------------------------------- */
.product-suite { color: var(--theme-secondary); padding-top: 12.8vw; padding-bottom: 21.3333vw; }
@media (min-width: 800px) {
  .product-suite { padding-top: min(80px, 5.55556vw); padding-bottom: min(120px, 8.33333vw); }
}
.product-suite-header { margin-bottom: 6.4vw; }
@media (min-width: 800px) { .product-suite-header { margin-bottom: min(24px, 1.66667vw); } }

.audiences { grid-column: 1 / -1; margin-bottom: 8.53333vw; }
@media (min-width: 800px) { .audiences { margin-bottom: min(48px, 3.33333vw); } }

.audience {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.6vw;
  height: 25.6vw;
  margin-bottom: 2.13333vw;
  padding: 2.13333vw 2.66667vw;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 1.6vw;
  background: none;
  cursor: pointer;
  opacity: .7;
  transition: opacity .3s var(--ease-out-quad), background-color .3s var(--ease-out-quad), border-color .3s var(--ease-out-quad);
}
@media (min-width: 800px) {
  .audience {
    grid-column: span 3;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    height: auto;
    gap: min(12px, .833333vw);
    padding: min(12px, .833333vw) min(16px, 1.11111vw);
    border-radius: min(8px, .555556vw) min(8px, .555556vw) 0 0;
    border-bottom-width: min(2px, .138889vw);
    margin-bottom: 0;
  }
}
.audience:hover { opacity: 1; border-bottom-color: color-mix(in srgb, var(--theme-stroke), var(--theme-text) 25%); }
.audience.active {
  opacity: 1;
  background: color-mix(in srgb, var(--theme-card), var(--theme-text) 4%);
  border-bottom-color: var(--theme-text);
}
.audience .audience-icon {
  width: 14.9333vw; height: 14.9333vw;
  border-radius: 2.66667vw;
}
@media (min-width: 800px) {
  .audience .audience-icon { width: min(48px, 3.33333vw); height: min(48px, 3.33333vw); border-radius: min(10px, .694444vw); }
}
.audience span {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 3.46667vw;
}
@media (min-width: 800px) { .audience span { font-size: min(16px, 1.11111vw); } }

.ps-panel { display: none; }
.ps-panel.active { display: block; }

.ps-body { align-items: start; padding: 8.53333vw 0; }
@media (min-width: 800px) { .ps-body { padding: min(60px, 4.16667vw) 0; } }
.ps-copy { grid-column: 1 / -1; }
@media (min-width: 800px) { .ps-copy { grid-column: 1 / span 6; } }
.ps-copy h3 { opacity: .9; }
.ps-copy > p { opacity: .75; margin-top: 3.2vw; color: var(--theme-text); }
@media (min-width: 800px) { .ps-copy > p { margin-top: min(12px, .833333vw); } }
.ps-cta { margin-top: 4.26667vw; display: inline-block; }
@media (min-width: 800px) { .ps-cta { margin-top: min(24px, 1.66667vw); } }

.feature-list { margin-top: 4.26667vw; padding-left: 4.26667vw; }
@media (min-width: 800px) { .feature-list { margin-top: min(48px, 3.33333vw); padding-left: min(20px, 1.38889vw); } }
.feature-list li {
  font-family: var(--font-body);
  letter-spacing: -.01em;
  color: var(--theme-text);
  opacity: .85;
  margin-bottom: 1.6vw;
  font-size: 3.46667vw;
  font-weight: 500;
  line-height: 130%;
  list-style: outside;
}
@media (min-width: 800px) {
  .feature-list li { margin-bottom: min(10px, .694444vw); font-size: min(16px, 1.11111vw); line-height: 130%; }
}
.feature-list li::marker { color: var(--brass-700); }

.ps-button { margin-top: 6.4vw; }
@media (min-width: 800px) { .ps-button { margin-top: min(32px, 2.22222vw); } }

.ps-media { grid-column: 1 / -1; margin-top: 8.53333vw; display: flex; justify-content: center; }
@media (min-width: 800px) { .ps-media { grid-column: 8 / -1; margin-top: 0; } }

/* Vertauschte Zeile — jede zweite spiegelt sich */
@media (min-width: 800px) {
  .ps-body.flip .ps-copy  { grid-column: 7 / -1; }
  .ps-body.flip .ps-media { grid-column: 1 / span 5; }
}

/* --------------------------------------------------------------
   16. Abschnittskopf
   -------------------------------------------------------------- */
.section-header {
  width: calc(100% - 2 * var(--layout-margin));
  max-width: 1392px;
  margin: 0 auto;
}
.section-header.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.section-header h2 { margin-bottom: min(24px, 1.66667vw); }
.section-header.center h2 { max-width: 100%; }
@media (min-width: 800px) { .section-header.center h2 { max-width: 60%; } }

/* --------------------------------------------------------------
   17. Kartenraster mit Parallaxe.
   Overjet versetzt hier die Spalten beim Scrollen gegeneinander
   (translate3d per GSAP). Hier setzt keph.js --shift je Karte;
   Spalte 1 und 3 laufen langsamer als Spalte 2.
   -------------------------------------------------------------- */
.principles { padding: 0 var(--layout-margin); }
.principle-grid {
  row-gap: 2.13333vw;
  margin-top: 32vw;
  padding-bottom: 32vw;
}
@media (min-width: 800px) {
  .principle-grid {
    row-gap: min(8px, .555556vw);
    column-gap: min(8px, .555556vw);
    margin-top: min(160px, 11.1111vw);
    padding-bottom: min(80px, 5.55556vw);
  }
}
.principle-card {
  grid-column: span 4;
  display: grid;
  grid-template-rows: auto auto 1fr;
  background: var(--theme-card);
  border: 1px solid var(--theme-stroke);
  border-radius: 4.26667vw;
  padding: 4.26667vw;
  height: 86.1333vw;
  transform: translate3d(0, var(--shift, 0px), 0);
  will-change: transform;
}
@media (min-width: 800px) {
  .principle-card {
    border-radius: min(16px, 1.11111vw);
    padding: min(22px, 1.52778vw);
    height: min(433px, 30.0694vw);
  }
}
.principle-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 8.53333vw;
  line-height: .8;
  width: fit-content;
}
/* Die Karten laufen versetzt, damit nicht sechs Ziffern im Gleichtakt
   aufleuchten. */
.principle-card:nth-child(2n) .principle-mark { --light-offset: 62; }
.principle-card:nth-child(3n) .principle-mark { --light-offset: 124; }
@media (min-width: 800px) { .principle-mark { font-size: min(40px, 2.77778vw); } }
.principle-body { color: var(--theme-text); margin-top: 16.2667vw; }
@media (min-width: 800px) { .principle-body { margin-top: min(85px, 5.90278vw); } }
.principle-body b { color: var(--theme-secondary); font-weight: 600; }
.principle-foot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.13333vw;
  align-items: end;
  margin-top: auto;
  color: var(--theme-text);
}
@media (min-width: 800px) { .principle-foot { gap: min(16px, 1.11111vw); } }
.principle-foot .ph {
  width: 19.7333vw; height: 21.3333vw;
  border-radius: 2.13333vw;
}
@media (min-width: 800px) {
  .principle-foot .ph { width: min(84px, 5.83333vw); height: min(92px, 6.38889vw); border-radius: min(8px, .555556vw); }
}

/* --------------------------------------------------------------
   18. Kennzahlen
   -------------------------------------------------------------- */
.stats { padding: 12.8vw 0; }
@media (min-width: 800px) { .stats { padding: min(80px, 5.55556vw) 0; } }
.stat {
  grid-column: span 2;
  padding: 6.4vw 0;
  border-top: 1px solid var(--theme-stroke);
}
@media (min-width: 800px) { .stat { grid-column: span 3; padding: min(28px, 1.94444vw) 0 0; } }
.stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: 12.8vw;
  line-height: 92%;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 800px) { .stat-value { font-size: min(72px, 5vw); } }
.stat-label { margin-top: 2.13333vw; color: var(--theme-text); }
@media (min-width: 800px) { .stat-label { margin-top: min(10px, .694444vw); } }

/* --------------------------------------------------------------
   19. Mission / Diptychon
   -------------------------------------------------------------- */
.diptych { padding: 12.8vw 0 21.3333vw; align-items: center; }
@media (min-width: 800px) { .diptych { padding: min(60px, 4.16667vw) 0 min(120px, 8.33333vw); } }
.diptych-copy { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4.26667vw; }
@media (min-width: 800px) { .diptych-copy { grid-column: 1 / span 6; gap: min(20px, 1.38889vw); } }
.diptych-media { grid-column: 1 / -1; margin-top: 8.53333vw; }
@media (min-width: 800px) { .diptych-media { grid-column: 8 / -1; margin-top: 0; } }

/* --------------------------------------------------------------
   20. Prefooter-CTA
   -------------------------------------------------------------- */
.prefooter {
  text-align: center;
  padding: 21.3333vw 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.4vw;
}
@media (min-width: 800px) { .prefooter { padding: min(120px, 8.33333vw) 0; gap: min(28px, 1.94444vw); } }
.prefooter .button-row { display: flex; flex-wrap: wrap; gap: 3.2vw; justify-content: center; }
@media (min-width: 800px) { .prefooter .button-row { gap: min(12px, .833333vw); } }

/* --------------------------------------------------------------
   21. Fußzeile
   -------------------------------------------------------------- */
.site-footer { padding-top: 17.0667vw; padding-bottom: 8.53333vw; }
@media (min-width: 800px) { .site-footer { padding-top: min(100px, 6.94444vw); padding-bottom: min(40px, 2.77778vw); } }
.footer-top { padding-bottom: 12.8vw; }
@media (min-width: 800px) { .footer-top { padding-bottom: min(80px, 5.55556vw); } }
.footer-brand { grid-column: 1 / -1; margin-bottom: 8.53333vw; }
@media (min-width: 800px) { .footer-brand { grid-column: span 4; margin-bottom: 0; } }
.footer-col { grid-column: span 2; margin-bottom: 6.4vw; }
@media (min-width: 800px) { .footer-col { grid-column: span 2; margin-bottom: 0; } }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 2.66667vw;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--theme-text);
  margin-bottom: 4.26667vw;
}
@media (min-width: 800px) { .footer-col h4 { font-size: min(11px, .763889vw); margin-bottom: min(18px, 1.25vw); } }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 2.66667vw; }
@media (min-width: 800px) { .footer-col ul { gap: min(10px, .694444vw); } }
.footer-col a { font-size: 3.46667vw; color: var(--theme-secondary); }
@media (min-width: 800px) { .footer-col a { font-size: min(15px, 1.04167vw); } }

.footer-note {
  color: var(--theme-text);
  border-top: 1px solid var(--theme-stroke);
  padding-top: 6.4vw;
}
@media (min-width: 800px) { .footer-note { padding-top: min(28px, 1.94444vw); } }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4.26667vw;
  padding-top: 6.4vw;
  color: var(--theme-text);
}
@media (min-width: 800px) { .footer-bottom { padding-top: min(28px, 1.94444vw); gap: min(20px, 1.38889vw); } }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 4.26667vw; }
@media (min-width: 800px) { .footer-bottom nav { gap: min(24px, 1.66667vw); } }

/* Wortmarke als Fußabschluss, wie bei Overjet */
.footer-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.04em;
  line-height: .8;
  font-size: 26vw;
  margin-top: 8.53333vw;
  user-select: none;
  text-align: center;

  /* Schattenriss, durch den sehr leise ein Messingzug wandert. Rein
     dekorativ (aria-hidden), deshalb darf er so schwach sein. */
  background-image: linear-gradient(101deg,
    #F6F0E410  0%,
    #F6F0E41A 24%,
    #D9BA7638 40%,
    #F6F0E41A 56%,
    #F6F0E410 80%,
    #F6F0E41A 100%);
  background-size: 200% 100%;
  background-repeat: repeat;
  background-position: calc((var(--light) + var(--light-offset, 150)) * -1%) 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (min-width: 800px) { .footer-wordmark { font-size: 21vw; margin-top: min(60px, 4.16667vw); } }

/* --------------------------------------------------------------
   22. Scroll-Reveal.
   Overjet lässt Zeilen hinter einer Maske hochfahren (GSAP
   SplitText). Ohne GSAP: jede Zeile bekommt beim Bauen ein
   .rv-line mit overflow:hidden, das Innere fährt hoch.
   -------------------------------------------------------------- */
/* Nur wenn JavaScript laeuft, darf etwas versteckt anfangen. Ohne JS
   gibt es niemanden, der es je wieder einblendet — dann steht der
   Inhalt eben sofort da. Die Klasse .js setzt ein Einzeiler im <head>,
   noch bevor das erste Bild gemalt wird. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .8s var(--ease-out-quad),
    transform 1s var(--ease-out-expo);
  transition-delay: var(--rv-delay, 0ms);
}
.js [data-reveal].revealed { opacity: 1; transform: none; }

.rv-line { overflow: hidden; display: block; }
.rv-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease-out-expo);
  transition-delay: var(--rv-delay, 0ms);
}
.revealed .rv-line > span,
.rv-line.revealed > span { transform: translateY(0); }

/* --------------------------------------------------------------
   23. Mobil: Kopfzeile wird zur Schublade
   -------------------------------------------------------------- */
@media (max-width: 799px) {
  .header-nav {
    grid-template-columns: 1fr auto;
    padding: 2.66667vw 2.66667vw 2.66667vw 4.26667vw;
    border-radius: 3.2vw;
  }
  .header-logo { grid-column: auto; font-size: 4.8vw; }
  .header-logo .mark { width: 5.6vw; height: 5.6vw; border-radius: 1.3vw; }
  .menu-icon { display: block; grid-column: auto; }

  .header-links,
  .header-buttons {
    display: none;
  }

  .mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--theme-primary);
    padding: calc(var(--header-top-offset) + 24vw) var(--layout-margin) 12vw;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2%);
    transition:
      opacity .4s var(--ease-out-quad),
      transform .6s var(--ease-out-expo),
      visibility 0s linear .6s;
  }
  body[data-menu="true"] { overflow: hidden; }
  body[data-menu="true"] .mobile-drawer {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity .4s var(--ease-out-quad), transform .6s var(--ease-out-expo), visibility 0s;
  }
  .mobile-drawer nav { display: flex; flex-direction: column; }
  .mobile-drawer nav > a {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.02em;
    font-size: 8vw;
    line-height: 1.15;
    padding: 3.2vw 0;
    border-bottom: 1px solid var(--theme-stroke);
  }
  .mobile-drawer .drawer-actions {
    display: flex; flex-direction: column; gap: 3.2vw;
    margin-top: 8vw;
  }
  .mobile-drawer .drawer-actions .button { width: 100%; justify-content: center; }
  .mega { display: none; }
}
@media (min-width: 800px) {
  .mobile-drawer { display: none; }
}

/* --------------------------------------------------------------
   24. Innenseiten
   -------------------------------------------------------------- */
.page-hero {
  padding-top: calc(var(--header-top-offset) + 38vw);
  padding-bottom: 12.8vw;
}
@media (min-width: 800px) {
  .page-hero {
    padding-top: calc(var(--header-height) + min(140px, 9.72222vw));
    padding-bottom: min(80px, 5.55556vw);
  }
}
.page-hero h1 { max-width: 100%; }
@media (min-width: 800px) { .page-hero h1 { width: 80%; } }
.page-hero .eyebrow { margin-bottom: 4.26667vw; }
@media (min-width: 800px) { .page-hero .eyebrow { margin-bottom: min(16px, 1.11111vw); } }
.page-hero .page-lede { margin-top: 6.4vw; color: var(--theme-text); }
@media (min-width: 800px) { .page-hero .page-lede { margin-top: min(24px, 1.66667vw); max-width: 60ch; } }

.meta-row {
  display: grid;
  gap: 4.26667vw;
  margin-top: 8.53333vw;
  padding-top: 6.4vw;
  border-top: 1px solid var(--theme-stroke);
}
@media (min-width: 800px) {
  .meta-row {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: min(32px, 2.22222vw);
    margin-top: min(64px, 4.44444vw);
    padding-top: min(24px, 1.66667vw);
  }
}
.meta-row dt {
  font-family: var(--font-mono);
  font-size: 2.66667vw;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--theme-text);
  margin-bottom: 1.6vw;
}
@media (min-width: 800px) { .meta-row dt { font-size: min(11px, .763889vw); margin-bottom: min(8px, .555556vw); } }
.meta-row dd { margin: 0; font-size: 3.73333vw; font-weight: 500; }
@media (min-width: 800px) { .meta-row dd { font-size: min(17px, 1.18056vw); } }

.section { padding: 12.8vw 0; }
@media (min-width: 800px) { .section { padding: min(100px, 6.94444vw) 0; } }
.section + .section { border-top: 1px solid var(--theme-stroke); }

.section-index {
  font-family: var(--font-mono);
  font-size: 2.93333vw;
  letter-spacing: .1em;
  color: var(--theme-contrast);
  margin-bottom: 3.2vw;
}
@media (min-width: 800px) { .section-index { font-size: min(12px, .833333vw); margin-bottom: min(14px, .972222vw); } }

.prose { color: var(--theme-text); }
.prose p + p { margin-top: 1em; }
.prose b, .prose strong { color: var(--theme-secondary); font-weight: 600; }

.card {
  background: var(--theme-card);
  border: 1px solid var(--theme-stroke);
  border-radius: 3.2vw;
  padding: 5.33333vw;
}
@media (min-width: 800px) { .card { border-radius: min(14px, .972222vw); padding: min(28px, 1.94444vw); } }

.card-grid {
  display: grid;
  gap: 3.2vw;
  margin-top: 8.53333vw;
}
@media (min-width: 800px) {
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: min(10px, .694444vw); margin-top: min(48px, 3.33333vw); }
}

/* Schlüssellisten-Tabelle */
.keytable { width: 100%; border-collapse: collapse; margin-top: 6.4vw; }
@media (min-width: 800px) { .keytable { margin-top: min(32px, 2.22222vw); } }
.keytable th, .keytable td {
  text-align: left;
  padding: 3.2vw 2.13333vw;
  border-bottom: 1px solid var(--theme-stroke);
  font-size: 3.46667vw;
}
@media (min-width: 800px) { .keytable th, .keytable td { padding: min(14px, .972222vw) min(12px, .833333vw); font-size: min(15px, 1.04167vw); } }
.keytable th {
  font-family: var(--font-mono);
  font-size: 2.66667vw;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--theme-text);
  font-weight: 400;
}
@media (min-width: 800px) { .keytable th { font-size: min(11px, .763889vw); } }
.keytable td.n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--theme-contrast); }
.keytable-wrap { overflow-x: auto; }

/* Beleg-Zeile: so steht der Nachweis neben dem Code */
.evidence {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5em;
  font-family: var(--font-mono);
  font-size: 3.2vw;
  padding: .55em .9em;
  border-radius: .5em;
  background: color-mix(in srgb, var(--theme-secondary) 6%, transparent);
  border: 1px solid var(--theme-stroke);
  color: var(--theme-secondary);
}
@media (min-width: 800px) { .evidence { font-size: min(14px, .972222vw); } }
.evidence .sep { color: var(--theme-text); }

/* Fortschrittsbalken für Anteilswerte */
.bar {
  height: 2.13333vw;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-secondary) 8%, transparent);
  overflow: hidden;
  margin-top: 3.2vw;
}
@media (min-width: 800px) { .bar { height: min(8px, .555556vw); margin-top: min(14px, .972222vw); } }
.bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background-image: linear-gradient(100deg,
    var(--brass-900) 0%, var(--brass-500) 30%, var(--metal-2) 46%,
    var(--brass-500) 62%, var(--brass-900) 100%);
  background-size: 200% 100%;
  background-repeat: repeat;
  background-position: calc((var(--light) + var(--light-offset, 20)) * -1%) 50%;
  transition: width 1.4s var(--ease-out-expo) var(--rv-delay, 0ms);
}
.revealed .bar > i { width: var(--pct, 0%); }

/* --------------------------------------------------------------
   25. Bewegung bei prefers-reduced-motion

   Vorher stand hier ein Pauschalschalter, der bei "reduce" restlos
   alles abgeschaltet hat. Das war zu grob — und zwar aus einem Grund,
   der für KEPH konkret ist: Praxen arbeiten auf verwalteten
   Windows-Rechnern, oft über RDP oder Thin Clients. Dort ist
   "Animationen anzeigen" standardmäßig aus, ohne dass das jemand
   entschieden hätte. Die Seite kam bei einem großen Teil des
   tatsächlichen Publikums tot an.

   Die Trennlinie ist deshalb nicht "Animation ja oder nein", sondern
   **bewegt sich etwas durch den Raum**. Was Übelkeit auslöst, ist
   großflächige Bewegung, die an das Scrollen gekoppelt ist. Ein
   Verlauf, der an Ort und Stelle langsam seine Helligkeit ändert,
   bewegt nichts.

   Es läuft also für alle: das Metall, die Reflexe in der Schrift,
   der Glanz, die Kegelscheibe, die Zeilen-Reveals, das Endlosband.

   Aus bleiben genau die zwei, die mit dem Scrollrad mitlaufen —
   und die niemand vermisst, weil man ihr Fehlen nicht sehen kann:
     · der weiche Scroll (keph.js greift dafür gar nicht erst ein)
     · die Parallaxe der Karten
   -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Karten stehen in ihrer Spalte, statt gegeneinander zu laufen. */
  .principle-card { transform: none !important; }
}

/* --------------------------------------------------------------
   26. Tarife — Pakete, Bündel, Zahlweise

   Die Preise stehen im Kopf der Seite, nicht hinter einer Überschrift.
   Wer eine Preisseite aufruft, will die Zahl sehen und nicht erst
   scrollen.
   -------------------------------------------------------------- */
.tarife { margin-top: 8.53333vw; }
@media (min-width: 800px) { .tarife { margin-top: min(40px, 2.77778vw); } }

/* Zahlweise. Eine Pille mit gleitendem Messinghintergrund — dieselbe
   Mechanik wie die Kachel hinter den Menüpunkten. */
.takt-schalter-reihe { display: flex; justify-content: center; }
.takt-schalter {
  display: inline-flex;
  gap: 1.06667vw;
  padding: 1.06667vw;
  border-radius: 999px;
  border: 1px solid var(--theme-stroke);
  background: color-mix(in srgb, var(--theme-secondary) 4%, transparent);
}
@media (min-width: 800px) { .takt-schalter { gap: min(4px, .277778vw); padding: min(4px, .277778vw); } }

.takt-schalter button {
  display: inline-flex;
  align-items: baseline;
  gap: .6em;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--theme-text);
  border-radius: 999px;
  padding: 2.66667vw 4.8vw;
  font-family: var(--font-body);
  font-size: 3.46667vw;
  font-weight: 500;
  letter-spacing: -.01em;
  transition: color .35s var(--ease-out-expo);
}
@media (min-width: 800px) {
  .takt-schalter button {
    padding: min(11px, .763889vw) min(22px, 1.52778vw);
    font-size: min(14px, .972222vw);
  }
}
.takt-schalter button[aria-pressed="true"] {
  color: #1C1505;
  background-image: var(--metal-sweep), var(--metal-plate);
  background-size: 200% 100%, 100% 100%;
  background-position: calc((var(--light) + var(--light-offset, 15)) * -1%) 50%, 0 0;
  background-repeat: repeat, no-repeat;
  box-shadow: var(--metal-bevel);
}
.takt-spar {
  font-family: var(--font-mono);
  font-size: .78em;
  letter-spacing: .02em;
  opacity: .8;
  white-space: nowrap;
}
@media (max-width: 799px) { .takt-spar { display: none; } }

/* Die Pakete */
.paket-raster {
  display: grid;
  gap: 3.2vw;
  margin-top: 6.4vw;
}
@media (min-width: 800px) {
  .paket-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: min(10px, .694444vw);
    margin-top: min(28px, 1.94444vw);
  }
}

.paket {
  display: flex;
  flex-direction: column;
  background: var(--theme-card);
  border: 1px solid var(--theme-stroke);
  border-radius: 3.2vw;
  padding: 5.86667vw;
}
@media (min-width: 800px) {
  .paket { border-radius: min(18px, 1.25vw); padding: min(34px, 2.36111vw); }
}
.paket-name { margin-top: 1.6vw; }
@media (min-width: 800px) { .paket-name { margin-top: min(6px, .416667vw); } }

.paket-preis {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .9;
  font-size: 15.4667vw;
  margin-top: 4.26667vw;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 800px) { .paket-preis { font-size: min(76px, 5.27778vw); margin-top: min(20px, 1.38889vw); } }
.paket-einheit { font-size: .46em; }

.paket-takt { margin-top: 2.13333vw; }
@media (min-width: 800px) { .paket-takt { margin-top: min(8px, .555556vw); } }

.paket-je-fall {
  margin-top: 3.2vw;
  padding-top: 3.2vw;
  border-top: 1px solid var(--theme-stroke);
  color: var(--theme-text);
}
@media (min-width: 800px) { .paket-je-fall { margin-top: min(16px, 1.11111vw); padding-top: min(14px, .972222vw); } }
.paket-je-fall b { color: var(--theme-contrast); font-weight: 600; }

.paket-lede { margin-top: 4.26667vw; }
@media (min-width: 800px) { .paket-lede { margin-top: min(18px, 1.25vw); } }
.paket .feature-list { margin-top: 4.26667vw; }
@media (min-width: 800px) { .paket .feature-list { margin-top: min(20px, 1.38889vw); } }
/* Der Knopf sitzt in beiden Kacheln auf gleicher Höhe am Boden,
   auch wenn die eine Liste länger ist als die andere. */
/* Achtung: padding gehört hier NICHT hin. .paket-cta ist der Knopf
   selbst, ein padding-top hätte ihn oben aufgeblasen statt Abstand davor
   zu schaffen. Genau das hat die Knöpfe verbeult. Der Abstand kommt
   deshalb aus margin. */
.paket .paket-cta {
  margin-top: auto;
  align-self: flex-start;
}
/* Der Abstand haengt an der Liste, nicht am Knopf: eine Regel auf
   .paket-cta wuerde das margin-top:auto ueberschreiben und die Knoepfe
   waeren wieder unterschiedlich hoch. */
.paket .feature-list { margin-bottom: 6.4vw; }
@media (min-width: 800px) { .paket .feature-list { margin-bottom: min(28px, 1.94444vw); } }

/* Das Bündel liegt quer darunter und ist deutlich als das bessere
   Angebot markiert — Messingrand statt Haarlinie. */
.paket-bundle {
  margin-top: 3.2vw;
  border-color: color-mix(in srgb, var(--brass-700) 45%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--brass-300) 16%, transparent),
      transparent 42%),
    var(--theme-card);
}
@media (min-width: 800px) { .paket-bundle { margin-top: min(10px, .694444vw); } }

.bundle-kopf { display: grid; gap: 6.4vw; }
@media (min-width: 800px) {
  .bundle-kopf {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: min(60px, 4.16667vw);
  }
}
.bundle-preis { display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 800px) { .bundle-preis { align-items: flex-end; text-align: right; } }
.bundle-preis .paket-preis { margin-top: 0; }
.bundle-spar {
  margin-top: 2.13333vw;
  color: var(--theme-contrast);
  font-weight: 500;
}
@media (min-width: 800px) { .bundle-spar { margin-top: min(8px, .555556vw); } }
.bundle-preis .button { margin-top: 4.26667vw; }
@media (min-width: 800px) { .bundle-preis .button { margin-top: min(20px, 1.38889vw); } }

.tarif-kleingedruckt {
  margin-top: 8.53333vw;
  max-width: 78ch;
  line-height: 1.6;
}
@media (min-width: 800px) { .tarif-kleingedruckt { margin-top: min(40px, 2.77778vw); } }


/* --------------------------------------------------------------
   27. Der Rechner
   Links die Annahmen, rechts das Ergebnis. Auf dem Schreibtisch
   bleibt das Ergebnis stehen, während man an den Reglern zieht —
   sonst schiebt man den Wert, den man sehen will, aus dem Bild.
   -------------------------------------------------------------- */
.rechner {
  display: grid;
  gap: 6.4vw;
  margin-top: 8.53333vw;
}
@media (min-width: 800px) {
  .rechner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: min(10px, .694444vw);
    margin-top: min(48px, 3.33333vw);
  }
}

.rechner-eingabe,
.rechner-ergebnis {
  background: var(--theme-card);
  border: 1px solid var(--theme-stroke);
  border-radius: 3.2vw;
  padding: 5.33333vw;
}
@media (min-width: 800px) {
  .rechner-eingabe,
  .rechner-ergebnis { border-radius: min(16px, 1.11111vw); padding: min(32px, 2.22222vw); }
  .rechner-ergebnis { position: sticky; top: calc(var(--header-height) + min(24px, 1.66667vw)); }
}

.feld { margin-top: 6.4vw; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2.13333vw; }
@media (min-width: 800px) { .feld { margin-top: min(28px, 1.94444vw); gap: min(12px, .833333vw); } }
.feld label {
  font-family: var(--font-body);
  font-size: 3.46667vw;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--theme-text);
  line-height: 1.3;
}
@media (min-width: 800px) { .feld label { font-size: min(15px, 1.04167vw); } }
.feld output {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5.33333vw;
  letter-spacing: -.02em;
  color: var(--theme-secondary);
  justify-self: end;
}
@media (min-width: 800px) { .feld output { font-size: min(26px, 1.80556vw); } }
.feld /* Regler in Messing. Die Bahn ist eingelassen, der Griff sitzt
   darüber — dasselbe Material wie die Knöpfe.

   Achtung bei den Größen: min(px, vw) nimmt am Telefon den vw-Wert,
   und 1,4vw sind dort 5 px. Ein Griff, den man nicht trifft, ist kein
   Regler. Deshalb hier mobil-zuerst mit echten vw-Werten und erst ab
   800 px die eingefrorene Pixelgröße. */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 11.7333vw;          /* 44 px Antippfläche bei 375 px */
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2.13333vw;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-secondary) 12%, transparent);
  box-shadow: inset 0 1px 2px #1A161126;
}
input[type="range"]::-moz-range-track {
  height: 2.13333vw;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-secondary) 12%, transparent);
  box-shadow: inset 0 1px 2px #1A161126;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6.93333vw;
  height: 6.93333vw;
  margin-top: -2.4vw;
  border: none;
  border-radius: 50%;
  background-image: var(--metal-sweep), var(--metal-plate);
  background-size: 200% 100%, 100% 100%;
  background-position: calc((var(--light) + var(--light-offset, 60)) * -1%) 50%, 0 0;
  background-repeat: repeat, no-repeat;
  box-shadow:
    inset 0  1px 0 #FFFFFFCC,
    inset 0 -1px 0 #0000003D,
    0 1px 3px #1A161140;
}
input[type="range"]::-moz-range-thumb {
  width: 6.93333vw;
  height: 6.93333vw;
  border: none;
  border-radius: 50%;
  background-image: var(--metal-sweep), var(--metal-plate);
  background-size: 200% 100%, 100% 100%;
  background-position: calc((var(--light) + var(--light-offset, 60)) * -1%) 50%, 0 0;
  background-repeat: repeat, no-repeat;
  box-shadow: inset 0 1px 0 #FFFFFFCC, 0 1px 3px #1A161140;
}

@media (min-width: 800px) {
  input[type="range"] { height: min(24px, 1.66667vw); }
  input[type="range"]::-webkit-slider-runnable-track,
  input[type="range"]::-moz-range-track { height: min(6px, .416667vw); }
  input[type="range"]::-webkit-slider-thumb {
    width: min(20px, 1.38889vw);
    height: min(20px, 1.38889vw);
    margin-top: calc((min(6px, .416667vw) - min(20px, 1.38889vw)) / 2);
  }
  input[type="range"]::-moz-range-thumb {
    width: min(20px, 1.38889vw);
    height: min(20px, 1.38889vw);
  }
}

input[type="range"]:focus-visible::-webkit-slider-thumb,
input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--brass-700);
  outline-offset: 2px;
}

.ergebnis-gross { margin-top: 6.4vw; }
@media (min-width: 800px) { .ergebnis-gross { margin-top: min(28px, 1.94444vw); } }
.ergebnis-zahl {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .92;
  font-size: 12.8vw;
}
@media (min-width: 800px) { .ergebnis-zahl { font-size: min(60px, 4.16667vw); } }

.vergleich {
  margin-top: 8.53333vw;
  padding-top: 6.4vw;
  border-top: 1px solid var(--theme-stroke);
}
@media (min-width: 800px) { .vergleich { margin-top: min(36px, 2.5vw); padding-top: min(26px, 1.80556vw); } }
.vergleich-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 2.13333vw; }

/* Die Balken hier füllen sich nach der Rechnung, nicht nach --pct */
.rechner .bar > i { width: 0; transition: width .6s var(--ease-out-expo); }
.rechner .bar-heute > i {
  background-image: linear-gradient(100deg,
    color-mix(in srgb, var(--theme-secondary) 34%, transparent),
    color-mix(in srgb, var(--theme-secondary) 20%, transparent));
  animation: none;
}

.rechner-details {
  margin-top: 8.53333vw;
  padding-top: 6.4vw;
  border-top: 1px solid var(--theme-stroke);
  display: grid;
  gap: 3.2vw;
}
@media (min-width: 800px) {
  .rechner-details { margin-top: min(32px, 2.22222vw); padding-top: min(24px, 1.66667vw); gap: min(12px, .833333vw); }
}
.rechner-details > div { display: flex; justify-content: space-between; align-items: baseline; gap: 2.13333vw; }
.rechner-details dt {
  font-family: var(--font-mono);
  font-size: 2.66667vw;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--theme-text);
}
@media (min-width: 800px) { .rechner-details dt { font-size: min(11px, .763889vw); } }
.rechner-details dd { margin: 0; font-size: 3.46667vw; font-weight: 600; }
@media (min-width: 800px) { .rechner-details dd { font-size: min(15px, 1.04167vw); } }

/* Wenn die Rechnung nicht aufgeht, sagt sie das auch — dann ist die
   grosse Zahl kein Gewinn, sondern eine Warnung. */
.rechner[data-negativ="true"] [data-out="ersparnis"] {
  background-image: none;
  -webkit-text-fill-color: var(--signal);
  color: var(--signal);
  animation: none;
}

/* --------------------------------------------------------------
   28. Grundlage — der Abschnitt über KEPH selbst
   -------------------------------------------------------------- */
.section-grundlage { padding: 12.8vw 0; }
@media (min-width: 800px) { .section-grundlage { padding: min(80px, 5.55556vw) 0; } }
.section-grundlage .card-grid { margin-top: 8.53333vw; }