/* ==========================================================================
   Agilunis · Design-Tokens · Richtung K „Werkbank mit Zettel“
   Owner: wdf-design-system (Auftrag P5-DS, 2026-11-10; P9-G0, 2026-11-11: Deaktiviert-Farben, --motion-dim;
   P9-5-FG, 2026-11-11: --h-row, --w-field-num, --measure-narrow;
   P12-DS, 2026-11-11: Bewegung Runde 2 „lebendiger“ — --dur-stage, --dur-image, --dur-count, --motion-distance-l,
   --motion-stagger-l, --motion-zoom, --motion-zoom-s, --motion-depth, --motion-depth-scale;
   P15-DS, 2026-11-11: Runde 3 „feinere Reaktionen“ — --dur-hover, --lift-hover, --nudge-icon, --shadow-button-lift,
   --color-ui-overlay-hover, --color-press-wash;
   P24-DS, 2026-11-12: --color-marker)
   Nur Variablen. Werte identisch mit wdf/design-system/tokens.json.
   Regeln dazu: wdf/design-system/style-lock.md
   ========================================================================== */

/* Breakpoints (in Media Queries als feste Werte schreiben, Variablen gehen dort nicht):
   480px  großes Smartphone
   768px  Tablet hochkant      (Tastenkürzel, Spaltenköpfe, Agent dreispaltig)
   1024px Tablet quer / Laptop (Desktop-Navigation, 12er-Raster, keine stehende Leiste)
   1280px Desktop
   1536px großer Desktop       (Inhalt bleibt bei 1200 px + Rand)
   Grundregeln gelten für schmal, Erweiterungen mit min-width. */

:root {
  color-scheme: dark;

  /* ---------- Farbe: Flächen der Seite (Abschnittstöne aus dem Wireframe) ---------- */
  --color-surface: #17140F;          /* Ton 1 „hell“: Seitengrund, warmes Graphit */
  --color-surface-alt: #1E1A15;      /* Ton 2 „abgesetzt“: Band (20, 40, 70-Protokoll, 90, 110, Fußzeile) */
  --color-surface-inverse: #48423A;  /* Ton 3 „dunkel/Ruhepunkt“: Stein (50, 120). Gegenton zum dunklen Grund */
  --color-stage: #48423A;            /* Grundton der Bildbühne = Steinfläche des Bildes (gemessen) */
  --color-header-glass: rgb(23 20 15 / 0.94); /* Kopfzeile und stehende Leiste, mit Unschärfe darunter (.94: kein Türkis-Schleier, P9-10-FG) */

  /* ---------- Farbe: Flächen der Software (nur innerhalb .ui-Fenster) ---------- */
  --color-ui-window: #231F1A;        /* App-Fenster */
  --color-ui-raised: #2C2722;        /* Eingaben, Spuren, aktives Segment, Rückfrage */
  --color-ui-overlay: #36302A;       /* Meldung (Toast), Hover in Fenstern, Knopf in der App */
  --color-ui-overlay-hover: #3D3630; /* Knopf in der App unter dem Zeiger (Text 10,4 : 1, muted 5,5 : 1) */

  /* ---------- Farbe: Linien ---------- */
  --color-line: rgb(240 228 210 / 0.09);         /* Haarlinie, dekorativ */
  --color-line-strong: rgb(240 228 210 / 0.17);  /* Fensterrand, Chips, Segment, dekorativ */
  --color-line-input: #7A7166;                   /* Rand von Eingabefeldern, 3,4 : 1 auf Fenster */

  /* ---------- Farbe: Reaktionsflächen (warmes Licht über jedem Grundton, Runde 3) ---------- */
  --color-press-wash: rgb(240 228 210 / 0.07);   /* Zeilenfläche beim Drücken (FAQ-Zeile, auch Touch); Hover = dieselbe Ebene mit 60 % Deckkraft. Dekorativ */

  /* ---------- Farbe: Text ---------- */
  --color-text: #F4EFE7;             /* Überschriften, wichtiger Text */
  --color-text-muted: #B8AFA2;       /* Fließtext, Lead, inhaltstragende Metatexte */
  --color-text-subtle: #9C9387;      /* gedämpfte Überschriftenteile, Platzhalter, Spaltenköpfe; nie auf ui-overlay oder Stein */

  /* ---------- Farbe: Akzent (Türkis aus dem Signet) ---------- */
  --color-accent: #2FD5C8;           /* Füllung NUR für die Hauptaktion; sonst Punkt, Haken, Kontur, Fokus */
  --color-accent-hover: #4FDDD3;
  --color-accent-pressed: #27C2B6;
  --color-on-accent: #062523;        /* Schrift auf Türkis, 8,9 : 1 */
  --color-accent-tint: rgb(47 213 200 / 0.12);  /* getönte Fläche: erledigte Zeile, „Bereit für den Bau“, gewählte Antwort */
  --color-accent-line: rgb(47 213 200 / 0.4);   /* Kontur „Passt“, Unterstreichung Textlink */
  --color-focus: #2FD5C8;            /* Fokusring auf dunklen Flächen */
  --color-focus-on-paper: #24201B;   /* Fokusring auf Papier */

  /* ---------- Farbe: Zustände (nur in gezeigten Oberflächen und Formularen) ---------- */
  --color-warn: #E0AD62;             /* In Arbeit, Abweichung */
  --color-warn-tint: rgb(224 173 98 / 0.08);
  --color-warn-chip: rgb(224 173 98 / 0.12);
  --color-warn-line: rgb(224 173 98 / 0.42);    /* dekorativ, Zustand trägt Raute + Text */
  --color-miss: #EA9A7E;             /* Fehlt im Pflichtenheft */
  --color-miss-line: rgb(234 154 126 / 0.5);    /* dekorativ, gestrichelt, Zustand trägt Zeichen + Text */
  --color-error: #EA9A7E;            /* Formularfehler: gleiche Bedeutung „fehlt / ungültig“, immer mit Icon + Text */

  /* ---------- Farbe: Deaktiviert (statt Deckkraft: Inhalt bleibt lesbar, Zustand per Farbe + Mauszeiger) ---------- */
  --color-disabled-surface: #2C2722; /* Fläche deaktivierter gefüllter Knöpfe (Hauptaktion) */
  --color-disabled-text: #857B6F;    /* Schrift/Icon deaktiviert: 4,43 auf Grund, 3,95 auf Fenster, 3,56 auf disabled-surface, 3,14 auf ui-overlay */
  --color-disabled-line: rgb(240 228 210 / 0.09); /* Rand deaktiviert (= Haarlinie) */

  /* ---------- Farbe: Papier (der Zettel: Startseite nur Abschnitt 40; /excel-ersetzen als Bild der alten Liste) ---------- */
  --color-paper: #ECE5D8;
  --color-paper-text: #24201B;       /* 12,9 : 1 */
  --color-paper-text-muted: #5A5146; /* 6,2 : 1 */
  --color-paper-line: rgb(36 32 27 / 0.14);
  --color-paper-warn: #8A5410;       /* „Zuständig: ?“ 5,0 : 1 */
  --color-marker: #E7CFA9;           /* Textmarker-Gelb, NUR als Zellen-/Zeilenfläche auf Papier (/excel-ersetzen, P24-DS) = color-mix(warn 40 %, paper). Darauf paper-text 10,7 : 1, paper-text-muted 5,2 : 1; paper-warn 4,1 : 1 nur ab 19 px fett/24 px */

  /* ---------- Schrift: Familien (Mensch spricht Schibsted, Software spricht Geist) ---------- */
  --f-page: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Schrift: Größen der Seite (fließend 390 → 1024 px) ---------- */
  --fs-display: clamp(2.75rem, 2.058rem + 2.839vw, 3.875rem);   /* H1 44 → 62 px */
  --fs-heading-2: clamp(1.9375rem, 1.438rem + 2.05vw, 2.75rem); /* H2 31 → 44 px */
  --fs-heading-3: clamp(1.25rem, 1.096rem + 0.631vw, 1.5rem);   /* H3 20 → 24 px */
  --fs-title: 1.0625rem;      /* 17 px Kartentitel, Spaltenköpfe der Fußzeile */
  --fs-quote: 1.1875rem;      /* 19 px */
  --fs-lead: clamp(1.125rem, 1.087rem + 0.158vw, 1.1875rem);    /* 18 → 19 px */
  --fs-body: 1.0625rem;       /* 17 px Fließtext */
  --fs-small: 0.9375rem;      /* 15 px Fakten, Navigation, Dachzeile */
  --fs-micro: 0.875rem;       /* 14 px Mikrozeile unter CTAs */
  --fs-button: 1.0625rem;     /* 17 px */
  --fs-button-s: 0.9375rem;   /* 15 px */
  --fs-input: 1rem;           /* 16 px, nie kleiner (iOS-Zoom) */
  --fs-menu: 1.25rem;         /* 20 px Einträge im mobilen Menü */

  /* ---------- Schrift: Größen der Software (nur .ui) ---------- */
  --fs-ui: 0.875rem;          /* 14 px */
  --fs-ui-title: 0.9375rem;   /* 15 px Fenstertitel */
  --fs-ui-meta: 0.8125rem;    /* 13 px, mobil nie kleiner */
  --fs-ui-colhead: 0.75rem;   /* 12 px, nur ab 768 */
  --fs-mono: 0.8125rem;       /* 13 px mobil */
  --fs-mono-l: 0.75rem;       /* 12 px ab 768 in Tabellen */
  --fs-kbd: 0.6875rem;        /* 11 px, nur ab 768 */

  /* ---------- Schrift: Zeilenhöhen, Laufweiten, Schnitte ---------- */
  --lh-display: 1.04;
  --lh-heading: 1.1;
  --lh-title: 1.3;
  --lh-quote: 1.45;
  --lh-body: 1.55;
  --lh-ui: 1.5;
  --ls-display: -0.03em;
  --ls-heading: -0.025em;
  --ls-title: -0.015em;
  --ls-quote: -0.01em;
  --ls-button: -0.005em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --measure: 66ch;            /* Fließtext höchstens 66 Zeichen */
  --measure-lead: 58ch;
  --measure-narrow: 480px;    /* schmale Spalte für Blöcke neben Text (404-Fenster, Hinweise) */

  /* ---------- Abstände (Rezept 4 / 8 / 12 / 16 / 24 / 40 / 64 / 96) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 40px;
  --s-7: 64px;
  --s-8: 96px;
  --space-stack: 16px;        /* zwischen Blöcken eines Abschnitts, ab 768: 24 px */
  --space-section: 40px;      /* Abschnitt oben/unten (mobil 40 seit P9 Lauf 10, Längenbudget K-PRJ-08), ab 768: 64 px, ab 1024: 96 px */
  --page-pad: 20px;           /* Seitenrand, ab 768: 40 px */

  /* ---------- Raster ---------- */
  --grid-columns: 12;
  --grid-gap: 24px;
  --content-max: 1200px;
  --header-h: 60px;           /* ab 1024: 64 px */
  --sticky-cta-h: 72px;       /* stehende Leiste mobil, ohne Safe-Area */
  --h-row: 50px;              /* Mindesthöhe einer Zeile/Meldung in der Software (z. B. Toast im Hero) */
  --w-field-num: 112px;       /* Breite eines Zahlenfelds mit Einheit (Rechner 30) */

  /* ---------- Radien (kein 999: Pillen gibt es nicht) ---------- */
  --r-paper: 3px;             /* ein Blatt hat fast keine Rundung */
  --r-s: 6px;                 /* Chips, Tags, Tasten, Status */
  --r-m: 10px;                /* Buttons, Felder, Spuren, Rückfrage, Meldung */
  --r-l: 14px;                /* Fenster, Bühne, Karten */

  /* ---------- Schatten (kein Glow) ---------- */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.35), 0 14px 36px -12px rgb(0 0 0 / 0.6);
  --shadow-paper: 0 1px 1px rgb(0 0 0 / 0.3), 0 20px 40px -18px rgb(0 0 0 / 0.7);
  --shadow-button: 0 1px 2px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.28);
  --shadow-popover: 0 1px 2px rgb(0 0 0 / 0.35), 0 18px 48px -16px rgb(0 0 0 / 0.75);
  --shadow-sticky: 0 -10px 30px -12px rgb(0 0 0 / 0.6);
  --shadow-button-lift: 0 2px 4px rgb(0 0 0 / 0.3), 0 10px 22px -10px rgb(0 0 0 / 0.7); /* Knopf angehoben (Hover), nur über Deckkraft eingeblendet */

  /* ---------- Papier (Zettel in 40) ---------- */
  --paper-tilt-s: -1.2deg;    /* bis 1023 px */
  --paper-tilt-l: -1.6deg;    /* ab 1024 px */
  --paper-edge: 24px;         /* sichtbare Kante des Zettels unter dem Fenster im Zustand „Mit Rollen“ */

  /* ---------- Bewegung ---------- */
  --dur-press: 100ms;         /* Druck-Rückmeldung */
  --dur-fast: 150ms;          /* Hover, Farbe, Rand */
  --dur-base: 240ms;          /* Zustandswechsel: Menü, Segment, Aufklappen, Leiste, Verbindungslinie */
  --dur-slow: 350ms;          /* Meldung kommt herein */
  --dur-flip: 420ms;          /* Zettel → Spuren (40) */
  --dur-reveal: 500ms;        /* einmalige Eintritte, Wort-Reveal je Wort */
  --dur-exit: 160ms;          /* Ausgänge sind kürzer als Eingänge */
  --dur-spin: 700ms;          /* eine Umdrehung des Ladezeichens */
  --dur-pulse: 1400ms;        /* ein Atemzug des Skeletts */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-distance: 12px;    /* Weg bei Eintritten */
  --motion-distance-s: 8px;   /* Weg bei Meldungen, Menü */
  --motion-stagger: 40ms;     /* Versatz in Gruppen */
  --press-scale: 0.97;
  --motion-dim: 0.3;          /* Deckkraft gedämpfter Wörter vor dem Reveal (Kernsatz 50), nur mit JS und ohne Reduced Motion */

  /* ---------- Bewegung Runde 2 „lebendiger“ (wdf/motion-konzept.md § Runde 2; nur motion.js und Motion-Blöcke) ---------- */
  --dur-stage: 900ms;         /* Bühnen-Zoom im Hero-Einstieg; zugleich Obergrenze jeder Ankunft */
  --dur-image: 700ms;         /* Bild-Reveal (Wischen per clip-path) ab 768 px; mobil --dur-reveal */
  --dur-count: 800ms;         /* Zahl zählt einmal hoch (Rechner-Ergebnis 30), nie Preise */
  --motion-distance-l: 24px;  /* Weg bei Flächen (App-Fenster, Rechner, Karten) ab 768 px; mobil --motion-distance */
  --motion-stagger-l: 80ms;   /* erster Zeilenversatz in Überschriften (danach 60, dann je --motion-stagger) */
  --motion-zoom: 1.06;        /* Startgröße der Hero-Bühne ab 768 px */
  --motion-zoom-s: 1.03;      /* Startgröße der Hero-Bühne unter 768 px */
  --motion-depth: 6%;         /* Gesamtweg der Bildtiefe (−3 % → +3 % der Bildhöhe), nur ab 768 px */
  --motion-depth-scale: 1.08; /* Übergröße des Bildes in .media, damit bei 6 % Weg nie eine Kante sichtbar wird */

  /* ---------- Bewegung Runde 3 „feinere Reaktionen“ (P15-DS; style-lock § 12a Nachtrag, komponenten.md) ---------- */
  --dur-hover: 200ms;         /* Anheben, Schatten, Unterstreichung wächst, Icon rückt; Loslassen läuft ebenso lange zurück */
  --lift-hover: -2px;         /* Knopf hebt sich unter dem Zeiger (translate, nur hover: hover + pointer: fine) */
  --nudge-icon: 3px;          /* Pfeil im Knopf/Link rückt in Pfeilrichtung (Pfeil runter, Aufklapp-Winkel: 2 px = calc(--nudge-icon − 1px)) */

  /* ---------- Ebenen ---------- */
  --z-raised: 1;
  --z-sticky-cta: 30;
  --z-header: 40;
  --z-popover: 45;
  --z-menu: 50;
  --z-toast: 60;
  --z-skip: 100;
}

/* Sehr schmale Telefone (unter 375 px): H1 schrumpft weiter, damit zusammengehaltene Wortpaare passen */
@media (max-width: 374px) {
  :root { --fs-display: clamp(2.25rem, 10.9vw, 2.75rem); }
}

@media (min-width: 768px) {
  :root {
    --space-stack: 24px;
    --space-section: 64px;
    --page-pad: 40px;
  }
}

@media (min-width: 1024px) {
  :root {
    --space-section: 96px;
    --header-h: 64px;
  }
}