/* =========================================================
   TOKENS – die einzige Stelle mit Zahlen aus dem Entwurf
   Alle Maße sind Referenzpixel des 1920er-Screendesigns
   (home.jpg, 1920 × 5704) und per Pixelscan ausgemessen.
   Layout-Zahlen sind bewusst einheitenlos: multipliziert mit
   --u skalieren sie proportional zur Viewportbreite.
   ========================================================= */
:root {
  /* ---------- Farben (aus home.jpg gemessen) ----------
     Das Markenblau steht zusätzlich als RGB-Tripel, weil es an
     mehreren Stellen mit wechselnder Deckkraft gebraucht wird
     (Linien, Hero-Verlauf). So gibt es genau eine Fundstelle,
     wenn sich die Marke ändert. */
  --c-blue-rgb: 38 55 75;
  --c-blue:   rgb(var(--c-blue-rgb));   /* #26374B – Marke, Banner, Headlines */
  --c-greige: #D7D8D2;                  /* Schwerpunkte-Sektion, Footer */
  --c-sand:   #F7F7F5;                   /* Fläche der Schwerpunkte-Karten */
  --c-white:  #FFFFFF;
  --c-body:   #313A44;                  /* Fließtext */

  --c-rule-light: rgb(255 255 255 / .8);        /* Spine über dem Hero */
  --c-rule-dark:  rgb(var(--c-blue-rgb) / .45); /* Spine darunter      */
  /* Ruhende Kartenlinie. Eigener Wert statt --c-greige: die Karten
     stehen flach auf dem Greige der Sektion, eine greige Linie wäre
     dort unsichtbar. */
  --c-card-line:  rgb(var(--c-blue-rgb) / .22);

  /* ---------- Schrift ---------- */
  --f-display: "Aguila", "Italiana", Georgia, serif;
  --f-text:    "Inter", system-ui, -apple-system, sans-serif;

  /* ---------- Schriftgrade -----------------------------
     Jeder Grad gilt über die GANZE Viewportbreite – es gibt
     keine zweite Definition im Responsive-Teil.

     Der mittlere Wert ist der Entwurfswert geteilt durch 19.2
     (1920 / 100), also derselbe Anteil der Breite, den der
     Entwurf vorgibt. Einheit ist cqw (Container = `.page`, jetzt
     wieder voll breit), nicht vw – vw schlösse die Scrollbar mit
     ein und erzeugte Overflow.

     Das clamp-MAXIMUM ist der 1600-Deckel: Entwurfswert / 19.2 × 16
     = Koeffizient × 16. Oberhalb 1600px würde der cqw-Term weiter
     wachsen, das Maximum hält ihn aber auf dem 1600-Stand – so bleibt
     die Schrift so groß wie im begrenzten Inhalt, obwohl `.page` voll
     breit ist. Die Untergrenze ist der Mobil-Boden (Lesbarkeit); wo
     sie über dem 1600-Deckel läge (foot, micro), ist der Grad fix.  */
  /* Hero + H2 auf Wunsch der Designerin um 10 % verkleinert
     (Min, cqw-Anteil und 1600-Deckel jeweils × 0,9). */
  --fs-hero:       clamp(30.6px, 5.0625cqw, 81px);
  --fs-hero-sub:   clamp(17px, 2.1875cqw,   35px);
  --fs-h2:         clamp(28.8px, 3.9375cqw, 63px);
  --fs-brand:      clamp(26px, 2.3958cqw,   38.33px); /* Footer-Schriftzug */
  --fs-lead:       clamp(17px, 1.7188cqw,   27.5px);  /* Sektions-Unterzeilen */
  --fs-card-title: clamp(22px, 1.5104cqw,   24.17px);
  --fs-colhead:    clamp(20px, 1.3542cqw,   21.67px); /* Footer-Spaltenkopf */
  --fs-kicker:     clamp(18px, 1.3542cqw,   21.67px); /* Banner-Kicker */
  --fs-body-lg:    clamp(17px, 1.25cqw,     20px);    /* Intro, Arztname */
  --fs-body:       clamp(16px, 1.0938cqw,   17.5px);  /* Grundschrift */
  --fs-small:      clamp(16px, 1.0417cqw,   16.67px); /* Kartentext, Button */
  --fs-foot:       clamp(16px, 0.9896cqw,   16px);    /* 1600-Wert 15.8 < Boden 16 → fix */
  --fs-micro:      clamp(13px, 0.7813cqw,   13px);    /* Copyright; 12.5 < Boden 13 → fix */

  /* ---------- Inline-Links ----------------------------
     Am Pfeil-Link „Wir stellen uns vor" im Entwurf gemessen
     (1920er Raster): Schrift läuft kräftiger als der Fließtext
     daneben (Stammbreite 3px gegen 2px), der Unterstrich ist 2
     stark und sitzt 12 unter der Schriftunterkante – nicht unter
     der Zeilenbox, deshalb setzen die Link-Komponenten
     line-height auf 1.
     Gilt für Links, die ihren Strich TRAGEN. Die Footer- und
     Navigationslinks sind im Entwurf nachgemessen weder fetter
     noch unterstrichen (Stammbreite 2 wie der Fließtext) – sie
     zeigen den Strich erst im Hover und nutzen nur --link-gap.

     Gap und Strich sind an die Schriftgröße gebunden (em), nicht an
     --u: der Abstand soll dem Schriftbild folgen, auch dort wo der
     Grad über clamp() kleiner wird. .57em = 12/21 aus dem Entwurf. */
  --link-weight:  600;
  --link-gap:     .57em;   /* Schriftunterkante bis Strich */
  --link-line:    2px;     /* Strichstärke                 */
  /* Bei line-height:1 endet die Box nicht auf der Schriftunterkante,
     sondern eine Unterlänge tiefer. Dieser Betrag wird vom Gap
     abgezogen, damit der Strich dort sitzt, wo er gemessen wurde.
     Wert = Inter-Metrik (descent-Anteil des Halbdurchschusses). */
  --link-descent: .19em;

  /* ---------- Linke Kanten ----------------------------
     Der Entwurf arbeitet mit vier verschiedenen linken
     Kanten. Sie sind hier benannt, statt als magische Zahl
     in jeder Sektion zu stehen – eine Kante ändern heißt
     eine Zeile ändern. */
  --edge-rule:   130;   /* Spine, Headlines, Intro           */
  --edge-cards:  355;   /* Card-Grid                         */
  --edge-footer: 190;   /* Footer                            */
  --edge-right:  134;   /* rechter Seitenrand (Nav, Footer)  */

  /* Unterer Innenabstand des Schwerpunkte-Bandes. Steht hier,
     weil auch der Linienabschnitt am Kartenraster ihn braucht,
     um bis an die Bandkante zu reichen. */
  --focus-pad-bottom: 78;

  /* ---------- Hero ------------------------------------
     Höhe im Entwurf (1043 bei 1920 Breite). Sie wird auf
     .page zusätzlich durch die Fensterhöhe gedeckelt, damit
     die Dachsilhouette der Unterkante ohne Scrollen sichtbar
     bleibt – siehe --hero-height in base.css.
     Wie alle Layout-Tokens hier eine reine Zahl – var(--u) darf
     in dieser Datei nicht vorkommen, weil --u erst auf .page
     existiert. */
  --hero-h: 1043;
  /* Bildausschnitt: der Hero zeigt das Foto vergrößert und
     rechtsbündig, damit der dunkle Pfeiler links nur als
     schmale Kante stehen bleibt. */
  --hero-img-zoom: 123%;

  /* Dachsilhouette der Hero-Unterkante. Knickpunkte im
     Entwurf: (1447|1043) (1520|996) (1695|996) (1920|922).
     x prozentual, y als Abstand von der Unterkante – so
     bleibt der Dachwinkel bei jeder Hero-Höhe korrekt. */
  --roof-x1: 75.36%;   /* 1447/1920 – Beginn der Schräge   */
  --roof-x2: 79.17%;   /* 1520/1920 – Traufe               */
  --roof-x3: 88.28%;   /* 1695/1920 – Ende des Plateaus    */
  --roof-y1: 47;       /* Höhe des Plateaus über der Kante */
  --roof-y2: 121;      /* Höhe am rechten Rand             */

  /* ---------- Karten ----------------------------------
     Die Höhe steht bewusst nicht hier: die Karte endet an
     ihrem eigenen Text, damit die Linie dem Text folgt. */
  --card-w:    426;
  --card-img:  254;
  --card-gap:   36;

  /* ---------- Button ----------------------------------
     Einheitliche Höhe für ALLE Buttons – Hero, Banner, Nav (in
     beiden Zuständen) und Karte. Früher 62 mit lokalen Ausnahmen;
     auf Wunsch auf eine einzige Höhe (50) vereinheitlicht. */
  --btn-h:      50;
  --btn-pad:    30;    /* Entwurf: 38 – auf Wunsch enger gefasst */
  --btn-notch-x: 32;   /* abgeschrägte Ecke oben links */
  --btn-notch-y: 20;
  --btn-bw:      1;    /* Konturstärke */

  /* ---------- Bewegung --------------------------------
     Drei Dauern, nach Größe des bewegten Gegenstands – vorher
     standen fünf verschiedene Werte verstreut in den Dateien
     (.3 / .38 / .4 / .45 / .7), was am Bildschirm als Unruhe
     ankommt. Wer eine Dauer ändern will, ändert sie hier.

     Ein einziges Easing für alles: schneller Antritt, langes
     Ausrollen. Es ist die Bewegung eines Stifts, der eine Linie
     zieht – und Linien sind das Motiv dieser Seite. */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .28s;   /* hängt am Cursor: Unterstrich, Pfeil       */
  --t-mid:  .45s;   /* Flächen und Farben: Button, Kartenlinie   */
  --t-slow: .8s;    /* Großes und Leises: Bild, kurze Linien     */
  --t-draw: 1.2s;   /* die langen Linien, die sich selbst ziehen */
}