/* tokens.css – Gestaltungssystem E «Ruhiges Kopfband»
   Eine Quelle für Website, Lernwelt-Rahmen und Druckträger. Dieselben Werte in mm/pt: tokens.json.
   Kontraste nach WCAG 2.1, aus den Hexwerten gerechnet (bau/kontrast.py). */

@font-face{font-family:"Newsreader";src:url("fonts/Newsreader-var.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("fonts/PublicSans-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* ── Farben: vier Grundwerte (Vorlage v2 §1) ─────────────────────────────── */
  --navy:#0B1F33;        /* Kopfband, Fuss; Text auf Elfenbein 14,92:1 */
  --elfenbein:#F4F2ED;   /* Grund; Text auf Navy 14,92:1 */
  --messing:#C39A5B;     /* Naht, Ring, Horizon-Endstück, Fokus auf Navy 6,43:1 – nie Text auf Elfenbein (2,32:1) */
  --slate:#536B80;       /* Horizon 90 %; Nebentext auf Elfenbein 4,96:1 */

  /* Mischwerte aus den Grundwerten (keine neue Farbe) */
  --linie:#808890;       /* Navy 50 % auf Elfenbein: Trennlinien, 3,21:1 (Nichttext >= 3:1) */
  --hell-85:#D1D2D1;     /* Elfenbein 85 % auf Navy: Navigation, Fussname, 11,01:1 */

  /* Rollen – Bausteine greifen nur auf Rollen zu */
  --grund:var(--elfenbein);
  --text:var(--navy);
  --text-neben:var(--slate);
  --kopf-grund:var(--navy);
  --kopf-text:var(--elfenbein);
  --kopf-text-neben:var(--hell-85);
  --akzent:var(--messing);
  --fokus-hell:var(--navy);      /* Fokusrahmen auf Elfenbein */
  --fokus-dunkel:var(--messing); /* Fokusrahmen auf Navy */

  /* ── Schrift ──────────────────────────────────────────────────────────────── */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;   /* Person: Name, Titel, Zeugniszitate */
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; /* Apparat: alles andere */
  --gew-text:400; --gew-mittel:500; --gew-halbfett:600;
  --sperrung:.08em;      /* nur Versal-Etiketten und Navigation */

  /* Sechs Grade. t4–t6 gleiten zwischen 560 und 1200 px; bei jeder Breite bleiben es sechs. */
  --t1:.8125rem;                                          /* 13 px  Etikett, Quelle, Navigation */
  --t2:.9375rem;                                          /* 15 px  Zeile, Firma, Datumsspalte */
  --t3:1.0625rem;                                         /* 17 px  Fliesstext */
  --t4:1.3125rem;                                         /* 21 px  Leitsatz, Zitat */
  --t5:clamp(1.5rem,1.25rem + .714vw,1.75rem);            /* 24–28  Seitentitel, Blatt, Name Unterseite */
  --t6:clamp(1.75rem,1.09375rem + 1.875vw,2.5rem);        /* 28–40  Name Startseite */

  --zh-eng:1.1;      /* Name */
  --zh-titel:1.2;    /* Titel */
  --zh-dicht:1.4;    /* Zitat, Funktion, Zeile */
  --zh-klein:1.5;    /* Etikett, Quelle */
  --zh-text:1.6;     /* Fliesstext */

  /* ── Raum: 4/8/12/16/24/32/48/64 ─────────────────────────────────────────── */
  --r4:.25rem; --r8:.5rem; --r12:.75rem; --r16:1rem;
  --r24:1.5rem; --r32:2rem; --r48:3rem; --r64:4rem;

  /* ── Radien und Linien ────────────────────────────────────────────────────── */
  --radius-0:0;          /* Bilder, Flächen: eckig */
  --radius-taste:4px;
  --radius-kreis:50%;    /* nur Porträt */
  --st-haar:1px;         /* Trennlinie */
  --st-fokus:2px;        /* Fokusrahmen, Tastenkontur, aktiver Menüpunkt */
  --st-horizon:3px;
  --st-ring:3px;         /* Messingring um das Porträt */
  --st-naht:4px;         /* Messingnaht unter dem Kopfband */

  /* ── Raster ───────────────────────────────────────────────────────────────── */
  --buehne:70rem;                              /* 1120 px */
  --spalte:36rem;                              /* Textspalte 576 px */
  --spalte-bild:52rem;                         /* Bildspalte 832 px (Belege >= 800 px) */
  --spalte-register:9.25rem;                   /* Datums- und Etikettenspalte 148 px: «05/2021–06/2023» misst 145 px */
  --spalte-app:60rem;                          /* Lernwelt */
  --rinne:var(--r24);
  --pad:max(var(--r32),50vw - var(--buehne) / 2);
  --portraet-start:clamp(140px,13.2vw,190px);
  --portraet-unter:56px;
  --x:calc(var(--pad) + var(--portraet-start) + var(--r32)); /* gemeinsame linke Kante: Name, Text, Lernwelt */
  --register-links:max(var(--pad),var(--x) - var(--spalte-register) - var(--rinne)); /* hängende Spalte, Bildspalte */

  /* ── Kopf ─────────────────────────────────────────────────────────────────── */
  --kopf-pad-start:var(--r48);
  --kopf-pad-unter:var(--r24);
  --kopf-start-max:300px;     /* Prüfwert ab 1024 px */
  --kopf-unter-max:180px;     /* Prüfwert ab 1024 px */
  --kopf-handy-max:210px;     /* Prüfwert 390 px – v12 E (25.09.2026): vorher 260; gemessen Start 199, Unterseiten 195, Lernwelt 197 */
  --relief-streifen:clamp(96px,26vw,120px);      /* Handy, Startseite */
  --relief-streifen-unter:clamp(64px,18vw,80px); /* Handy, Unterseiten – seit v12 E (25.09.2026) ohne Wirkung: kein Streifen mehr */
  --relief-feld-mittel:16rem;   /* v12: Mindestbreite Relief-Feld der Unterseiten 700–935 px (Menü zweizeilig) = 1,25 × Bandhöhe 200 px → volle Höhe */
  --relief-auslauf:14%;       /* weicher linker Rand des Reliefs (Vorlage §6, Ausnahme J) */

  /* ── Bedienung ────────────────────────────────────────────────────────────── */
  --tast:44px;           /* Navigation, Fuss, Tasten */
  --tast-min:24px;       /* Quellenlinks im Satz (WCAG 2.5.8) */
  --taste-hoehe:48px;
  --dauer:150ms;

  /* Breakpoints (nur Dokumentation – in @media nicht als Variable nutzbar):
     S < 700 px · M 700–1023 px · L >= 1024 px · XL >= 1440 px */
  --bp-m:700px; --bp-l:1024px; --bp-xl:1440px;

  /* ── Druck (A4, Visitenkarte) – dieselben Werte stehen in tokens.json ───────── */
  --d-t1:7.5pt; --d-t2:8.5pt; --d-t3:10pt; --d-t4:12pt; --d-t5:15pt; --d-t6:21pt;   /* A4 */
  --k-name:15.9pt; --k-zeile:7.5pt; --k-kontakt:7pt;   /* Visitenkarte (Vorlage §2) */
  --d-rand:25mm;                /* Satzspiegel 25–185 mm */
  --d-kopfband:30mm;
  --d-portraet:24mm;
  --d-relief-b:69mm; --d-relief-h:30mm;   /* relief-norm 2,31:1 (Relief-Norm 24.09.2026), volle Höhe, rechtsbündig */
  --d-brief:135mm;              /* Brieftext 25–160 mm, rund 74 Zeichen je Zeile */
  --d-register:32mm; --d-rinne:5mm;
  --d-naht:1.14mm;              /* unter dem Kopfband, Karte */
  --d-kopf-folge:20mm;          /* Messinglinie des schmalen Kopfs der Folgeseiten */
  --d-fuss-y:283.6mm;           /* Oberkante Fussnaht */
  --d-fussnaht:.7mm;            /* Fuss jeder Seite, 25–185 mm */
  --d-horizon:.9mm;
  --d-ring:.6mm;
  --d-haar:.5pt;
}

/* Mittlere Breiten: Name und Text teilen die Kante erst ab 1024 px */
@media (max-width:1023px){
  :root{--pad:var(--r32);--portraet-start:112px;--x:var(--pad)}
}
@media (max-width:699px){
  :root{--pad:var(--r16);--portraet-start:72px;--portraet-unter:44px}
}
@media (prefers-reduced-motion:reduce){
  :root{--dauer:0ms}
}