/* IPEK System 5 "Präzisions-Messwerk": Tokens, Kopie für v5. Angepasst nach Rashids Nachtrag 15:50 (siehe ANNAHMEN.md): weiche Ecken statt Fase, Ladestrich statt Pegel im Knopf.
   Herleitung und Quellen: DESIGNSYSTEM.md. Farben später änderbar: nur die Rohfarben ganz oben tauschen. */

@font-face { font-family: "Outfit"; src: url("../schriften/outfit-var.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../schriften/inter-var.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

:root {
  /* Rohfarben (aus Logo, Petrol im PNG gemessen) */
  --c-navy: #043055;
  --c-navy-2: #0B406E;      /* Hover auf Navy-Fläche */
  --c-navy-3: #022440;      /* Tiefe Fläche (Haus-Bühne, Fuß) */
  --c-orange: #F07225;      /* nur Fläche mit Navy-Text oder Deko, nie Text auf Hell */
  --c-orange-tief: #B4500F; /* Orange als Text/Symbol auf Hell (5,13:1) */
  --c-petrol: #006B74;      /* Messwert, Wasser, Information */
  --c-petrol-hell: #5FB3BA; /* Petrol auf Navy (5,54:1) */
  --c-weiss: #FFFFFF;
  --c-grund: #E2E8EE;       /* Neutrale aus Navy-Farbton 247, Buntheit 0,003 */
  --c-grund-2: #D8E0E8;     /* Sektionswechsel hell, 3 L-Punkte zu grund */
  --c-grund-3: #CBD5DF;     /* Hover Sekundärknopf, Navy darauf 10,48:1 */
  --c-text-hell: #D7E1EA;   /* leiser Text auf Navy, 10,16:1 */
  --c-linie: #BAC6D1;       /* Haarlinie, Deko */
  --c-linie-fest: #6E7C89;  /* Feldrand, Bedienelement-Rand (>= 3:1) */
  --c-text: #0E1B26;
  --c-text-2: #4A5866;

  /* Rollen */
  --flaeche: var(--c-weiss);
  --flaeche-2: var(--c-grund);
  --flaeche-3: var(--c-grund-2);
  --flaeche-dunkel: var(--c-navy);
  --flaeche-tief: var(--c-navy-3);
  --vordergrund: var(--c-text);
  --vordergrund-2: var(--c-text-2);
  --marke: var(--c-navy);
  --signal: var(--c-orange);
  --signal-text: var(--c-orange-tief);
  --messwert: var(--c-petrol);
  --fokus: var(--c-navy);
  --fokus-dunkel: var(--c-orange);

  /* Raster */
  --inhalt: 1200px;
  --spalten: 12;
  --steg: 24px;
  --rand: 24px;
  --leiste: 288px;          /* mitlaufendes Messblatt rechts = 3 Spalten + 2 Stege */

  /* Abstände (4er-Feinstufen, 8er-Raster) */
  --a-1: 4px; --a-2: 8px; --a-3: 12px; --a-4: 16px; --a-5: 24px;
  --a-6: 32px; --a-7: 48px; --a-8: 64px; --a-9: 96px;
  --sektion: 96px;          /* Desktop, Briefing 72 bis 96 */
  --kopf-zu-inhalt: 48px;   /* mindestens H2-Größe (40), auf Skala gerundet */

  /* Giebel-Fase: Dachneigung des Logos 35 Grad (gemessen 7 px Steigung je 10 px).
     Angabe = senkrechter Schenkel b; waagerechter Schenkel = b / tan(35) = 1,428 b.
     Verschachtelt: b innen = b außen minus 0,48 x Abstand (parallele Schräge). */
  --fase-s: 8px;  --fase-s-w: 11.4px;   /* Plakette, Marker */
  --fase-m: 12px; --fase-m-w: 17.1px;   /* Knopf 48 hoch */
  --fase-l: 16px; --fase-l-w: 22.9px;   /* Bild in Karte (24 - 0,48 x 16 = 16,3) */
  --fase-xl: 24px; --fase-xl-w: 34.3px; /* Karte, Formular, Leiste */

  /* Radien: Messwerk ist scharfkantig. Nur Felder 2px, Kartenmarker rund. Innen = außen minus Abstand, also innen 0. */
  --r-0: 0px; --r-feld: 2px; --r-rund: 999px;

  /* Rahmen */
  --haar: 1px;     /* Haarlinie, Skala, Kartenrand */
  --strich: 1.5px; /* Symbole, Maßlinien-Pfeil */
  --fokus-breite: 2px; --fokus-abstand: 2px;
  --pegel-b: 4px; --pegel-fuge: 2px; /* Lamellen 2:1 wie im Logo (21 bis 28 px Balken, 11 bis 12 px Fuge) */

  /* Typografie: 6 Größen, Verhältnis 1,22 bis 1,8, fluid 390 bis 1440 */
  --f-titel: "Outfit", system-ui, sans-serif;
  --f-text: "Inter", system-ui, sans-serif;
  --t-mess: 0.8125rem;                                   /* 13, Mess-Label, Versal +0,06em */
  --t-text: clamp(1rem, 0.952rem + 0.19vw, 1.125rem);    /* 16 bis 18 */
  --t-h4: clamp(1.25rem, 1.206rem + 0.19vw, 1.375rem);   /* 20 bis 22 */
  --t-h3: clamp(1.5rem, 1.405rem + 0.38vw, 1.75rem);     /* 24 bis 28 */
  --t-h2: clamp(1.875rem, 1.643rem + 0.95vw, 2.5rem);    /* 30 bis 40 */
  --t-h1: clamp(2.75rem, 1.914rem + 3.43vw, 5rem);    /* 46 bis 72 */
  --zh-text: 1.6; --zh-titel: 1.1; --zh-mess: 1.25;
  --lw-mess: 0.06em; --lw-titel: -0.01em;
  --zeile: 62ch;

  /* Schatten: keine. Tiefe nur über Fläche und Haarlinie. */
  --schatten: none;

  /* Bewegung */
  --d-1: 120ms; --d-2: 200ms; --d-3: 320ms; --d-4: 480ms;
  --kurve: cubic-bezier(0.2, 0, 0, 1);
  --kurve-aus: cubic-bezier(0.3, 0, 1, 1);
  --pegel-takt: 60ms;

  /* Ebenen */
  --z-kopf: 30; --z-leiste: 20; --z-overlay: 40;
}

@media (max-width: 760px) {
  :root { --rand: 16px; --steg: 16px; --sektion: 48px; --kopf-zu-inhalt: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --d-1: 0ms; --d-2: 0ms; --d-3: 0ms; --d-4: 0ms; --pegel-takt: 0ms; }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 96px; }
body { margin: 0; font-family: var(--f-text); font-size: var(--t-text); line-height: var(--zh-text); color: var(--vordergrund); background: var(--flaeche); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--f-titel); font-weight: 600; line-height: var(--zh-titel); letter-spacing: var(--lw-titel); margin: 0; text-wrap: balance; color: var(--marke); }
h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); } h4 { font-size: var(--t-h4); }
p { margin: 0; text-wrap: pretty; max-width: var(--zeile); }
.mess { font-family: var(--f-text); font-size: var(--t-mess); line-height: var(--zh-mess); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--vordergrund-2); }
.versal { text-transform: uppercase; letter-spacing: var(--lw-mess); } /* höchstens 4 je Seite: Kopf-Telefon, Formular-Kopf, je Plakette */
.zahl { font-variant-numeric: tabular-nums; }
.huelle { width: min(100% - 2 * var(--rand), var(--inhalt)); margin-inline: auto; }
:focus-visible { outline: var(--fokus-breite) solid var(--fokus); outline-offset: var(--fokus-abstand); }
.dunkel :focus-visible { outline-color: var(--fokus-dunkel); }

/* ---------- v5: Anpassungen nach Nachtrag 15:50 ---------- */
:root {
  /* Ecken weich statt Fase. Giebel-Ecke: oben rechts dreifacher Radius (Rest der Giebel-Idee aus dem Logo).
     Verschachtelt gilt weiter: innen = außen minus Abstand. */
  --r-s: 4px;          /* Felder, Kacheln, kleine Flächen */
  --r-m: 8px;          /* Knöpfe, Karten, Blätter */
  --r-giebel-s: 0px;  /* Giebel-Ecke klein (3 x r-s): Plakette, kleiner Knopf */
  --r-giebel: 0px;    /* Giebel-Ecke (3 x r-m): Knopf, Karte, Formular, Messblatt */
  --r-giebel-l: 0px;  /* Giebel-Ecke groß: Hero-Platte, große Bilder */
  --r-kreis: 50%;      /* nur Ortsmarken der Karte */
  /* Rahmen-Logik: Flächen tragen die Ordnung. Haarlinie nur als Trenner innerhalb einer Fläche,
     fester Rand nur an Bedienfeldern, Navy-Rand nur für "gewählt". Karten haben keinen Rand. */
  --rand-trenner: var(--haar) solid var(--c-linie);
  --rand-feld: var(--haar) solid var(--c-linie-fest);
  --rand-gewaehlt: var(--haar) solid var(--c-navy);
  /* Ladestrich: Strich am Knopfende, läuft beim Überfahren voll */
  --strich-l: 24px; --strich-h: 2px;
  /* Dichte-Stufen der Sektionen aus der Abstandsskala */
  --sek-weit: var(--a-9); --sek-normal: var(--a-8); --sek-dicht: var(--a-7);
  /* Rahmen der Seite: Inhalt 1200 plus Abstand 32 plus Messblatt 288 */
  --rahmen-max: 1200px;
  --kante: max(var(--rand), calc((100% - var(--rahmen-max)) / 2));
}
@media (max-width: 760px) {
  :root { --sek-weit: var(--a-7); --sek-normal: var(--a-7); --sek-dicht: var(--a-6); --r-giebel-l: 0px; }
}