/* Firmena · Design-Tokens für das Empfohlene Set (Katalog 12.10.2026)
   Set: L-12 (Logo) + L-15 (App-Symbol), F-1 hell / F-2 dunkel, S-2 Inter Tight + IBM Plex Mono,
        K-2, P-1, A1-2, A2-2, Bewegung B-1 (Signatur) + B-2 (Listen).
   Alle bisherigen Namen bleiben (style.css braucht sie); neue Namen sind ergänzt.
   Schriften: fonts.css, Dateien lokal mit latin-ext. Kontraste nach WCAG 2.1 (BRIEF.md). */

:root {
  /* F-1 Papier, Graphit, Messing (hell, Standard) */
  --paper: #F4F1EA;          /* Grund */
  --paper2: #EDE8DE;         /* Felder, hinterlegte Zeilen */
  --ink: #161513;            /* Schrift, Linien von Feldern   · 16,1 : 1 auf --paper */
  --mute: #5E5A52;           /* Nebentext                     ·  6,1 : 1 auf --paper, 5,6 : 1 auf --paper2 */
  --rule: #D6D1C6;           /* Trennlinien (nur Schmuck, keine Feldgrenzen) */
  --accent: #7A5A12;         /* Messing: Knopf, Link, Fokus   ·  5,7 : 1 auf --paper */
  --accent-hover: #5E450C;
  --accent-ink: #F4F1EA;     /* Text auf Messing-Knopf        ·  5,7 : 1 */
  --warn: #9B2C1A;           /* Fehler                        ·  6,7 : 1 auf --paper */
  --ok: #2F5D3A;             /* „online“-Punkt, Bestätigung */

  /* S-2 Schrift. --serif heißt aus Kompatibilität so, ist aber die Display-Schrift (Überschriften). */
  --display: "Inter Tight", "InterT", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: var(--display);
  --sans: "Inter Tight", "InterT", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", "Plex", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --w-display: 700;
  --w-body: 400;
  --ls-display: -0.045em;    /* große Überschriften (≥ 44 px) */
  --ls-head: -0.02em;

  /* Maße */
  --wrap: 1120px;
  --gap: 56px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;
  --radius: 0;               /* keine runden Ecken, keine Pillen */
  --line-w: 1px;
  --focus-w: 3px;
  --target: 44px;            /* Mindestgröße für Tipp-Ziele */

  /* Bewegung (B-1 Tippen, B-2 Einrasten). Gilt nur ohne reduced-motion, siehe unten. */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --dur-snap: 420ms;         /* B-2: Dauer je Zeile */
  --stagger: 70ms;           /* B-2: Versatz je Zeile */
  --snap-y: 12px;            /* B-2: Weg von unten */
  --type-ms: 45ms;           /* B-1: je Zeichen */
  --type-pause: 1800ms;      /* B-1: Pause am Satzende */
  --type-del-ms: 18ms;       /* B-1: Löschen je Zeichen */
  --caret-blink: 1.06s;      /* B-1: Cursor, Stufe */

  color-scheme: light;
}

/* F-2 Nacht und Messing (dunkel). Greift bei Systemeinstellung „dunkel“ oder wenn ein Bereich
   data-theme="dark" trägt (K-2-Hero ist immer dunkel). data-theme="light" erzwingt hell. */
[data-theme="dark"] {
  --paper: #121211;
  --paper2: #1A1A18;
  --ink: #ECE9E2;            /* 15,4 : 1 auf --paper */
  --mute: #A29D91;           /*  6,9 : 1 auf --paper */
  --rule: #33312D;
  --accent: #C9A35A;         /*  7,9 : 1 auf --paper */
  --accent-hover: #D9B76E;
  --accent-ink: #121211;     /*  7,9 : 1 auf Messing */
  --warn: #F0A08F;           /*  9,1 : 1 auf --paper */
  --ok: #7FB08A;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121211;
    --paper2: #1A1A18;
    --ink: #ECE9E2;
    --mute: #A29D91;
    --rule: #33312D;
    --accent: #C9A35A;
    --accent-hover: #D9B76E;
    --accent-ink: #121211;
    --warn: #F0A08F;
    --ok: #7FB08A;
    color-scheme: dark;
  }
}

/* Öffentliche Seiten (body.pub), Labor R5, Wahl des Inhabers RPE-101: zwei Farbschemata über dieselben Variablen.
   V-1 dunkel = F-2 (Grundwerte unten), V-2 hell = F-1 (Block danach). Werte aus r5/tokens.css (alle AA).
   Welches gilt: html[data-theme] (Umschalter im Kopf, gespeichert, gesetzt von theme.js vor dem ersten Zeichnen),
   sonst die Systemeinstellung (prefers-color-scheme); kann der Browser keine melden, bleibt es dunkel.
   Die alten Namen (--paper, --accent …) zeigen auf dieselben Werte, damit style.css (Vorschlag, Danke, Recht) mitzieht.
   --nur-d / --nur-h: display-Wert für Dinge, die es nur im dunklen bzw. hellen Schema gibt (Logo, Umschalter-Zeichen). */
:root {
  --d5: "Unbounded", var(--sans);
  --t5: var(--sans);
  --m5: var(--mono);
}
.pub {
  --bg: #121211;             /* Grund */
  --sf: #1C1B19;             /* Fläche (Formular, Karten) */
  --ink: #ECE9E2;            /* 15,4 : 1 auf --bg */
  --mut: #A29D91;            /*  6,9 : 1 auf --bg, 6,3 : 1 auf --sf */
  --acc: #C9A35A;            /* Messing ·  7,9 : 1 auf --bg */
  --on: #121211;             /* Text auf Messing */
  --ui: #6F6A60;             /* Feldgrenzen, Knopfränder (3 : 1) */
  --ln: #2E2C28;             /* Trennlinien */
  --kle: #C3BEB3;            /* Vorspann im Startbild */
  --ph: #2A2825;             /* Grund unter Bildern, solange sie laden */
  --ki-ink: #161513;         /* Kennzeichnung „KI-Bild“ */
  --ki-bg: rgba(243, 241, 236, .92);
  --licht: rgba(255, 236, 200, .16);
  --licht0: rgba(255, 236, 200, 0);
  --glanz: rgba(201, 163, 90, .2);
  --glanz0: rgba(201, 163, 90, 0);
  --klar: rgba(0, 0, 0, 0);
  --schatten-m: 0 30px 50px -26px rgba(0, 0, 0, .8);
  --schatten-v: 0 40px 60px -24px rgba(0, 0, 0, .85);
  --schatten-b: 0 22px 40px -30px rgba(0, 0, 0, .6);
  --bg-bild: brightness(.34) saturate(.7) blur(2px);   /* gedimmtes Foto hinter dem Startbild */
  --bg-bild-o: 1;
  --m-bild: brightness(.9);
  --nur-d: flex;
  --nur-h: none;
  --paper: var(--bg);
  --paper2: #1A1A18;
  --mute: var(--mut);
  --rule: #33312D;
  --accent: var(--acc);
  --accent-hover: #D9B76E;
  --accent-ink: var(--on);
  --warn: #F0A08F;           /*  9,1 : 1 auf --bg */
  --ok: #7FB08A;
  color-scheme: dark;
}
/* V-2 hell (F-1). Derselbe Block zweimal: einmal für die gespeicherte Wahl, einmal für die Systemeinstellung ohne Wahl. */
html[data-theme="light"] .pub {
  --bg: #F4F1EA;             /* Grund */
  --sf: #FFFFFF;             /* Fläche (Formular, Karten) */
  --ink: #161513;            /* 16,1 : 1 auf --bg */
  --mut: #5E5A52;            /*  6,1 : 1 auf --bg, 6,9 : 1 auf --sf */
  --acc: #7A5A12;            /* Messing ·  5,7 : 1 auf --bg, 6,4 : 1 auf --sf */
  --on: #F4F1EA;             /* Text auf Messing ·  5,7 : 1 */
  --ui: #7D776B;             /* Feldgrenzen, Knopfränder (4,1 : 1 auf --bg) */
  --ln: #D8D1C3;
  --kle: #5E5A52;
  --ph: #E4DED2;
  --glanz: rgba(122, 90, 18, .1);
  --glanz0: rgba(122, 90, 18, 0);
  --klar: rgba(244, 241, 234, 0);
  --schatten-m: 0 26px 44px -26px rgba(22, 21, 19, .5);
  --schatten-v: 0 34px 54px -26px rgba(22, 21, 19, .55);
  --schatten-b: 0 22px 40px -30px rgba(22, 21, 19, .35);
  --bg-bild: saturate(.45) blur(2px);
  --bg-bild-o: .15;
  --m-bild: none;
  --nur-d: none;
  --nur-h: flex;
  --paper2: #EDE8DE;
  --rule: #D6D1C6;
  --accent-hover: #5E450C;
  --warn: #9B2C1A;           /*  6,7 : 1 auf --bg */
  --ok: #2F5D3A;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .pub {
    --bg: #F4F1EA;
    --sf: #FFFFFF;
    --ink: #161513;
    --mut: #5E5A52;
    --acc: #7A5A12;
    --on: #F4F1EA;
    --ui: #7D776B;
    --ln: #D8D1C3;
    --kle: #5E5A52;
    --ph: #E4DED2;
    --glanz: rgba(122, 90, 18, .1);
    --glanz0: rgba(122, 90, 18, 0);
    --klar: rgba(244, 241, 234, 0);
    --schatten-m: 0 26px 44px -26px rgba(22, 21, 19, .5);
    --schatten-v: 0 34px 54px -26px rgba(22, 21, 19, .55);
    --schatten-b: 0 22px 40px -30px rgba(22, 21, 19, .35);
    --bg-bild: saturate(.45) blur(2px);
    --bg-bild-o: .15;
    --m-bild: none;
    --nur-d: none;
    --nur-h: flex;
    --paper2: #EDE8DE;
    --rule: #D6D1C6;
    --accent-hover: #5E450C;
    --warn: #9B2C1A;
    --ok: #2F5D3A;
    color-scheme: light;
  }
}
@keyframes r5in { from { opacity: 0; transform: translateY(14px); } }
@keyframes r5auf { from { opacity: 0; transform: translateY(22px) scale(.97); } }
@keyframes r5wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes r5lauf { to { transform: translate3d(-50%, 0, 0); } }

/* Bewegung: bei „Animationen reduzieren“ alles im Endzustand, Tippen zeigt den ersten Satz still. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-snap: 0ms;
    --stagger: 0ms;
    --snap-y: 0px;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;   /* 0 statt 1 ms: Zustandswechsel (z. B. Knopf leer) sofort, ohne Zwischenbild */
    scroll-behavior: auto !important;
  }
}