/* Gemeinsame Gestaltung von FFK (Ford Fließband Konzept, früher Prüf-Seite) im Mohana-Look der Ideen-Seite
   (Teil C17a): Blau dominiert (Cobalt, Ocean, Sky), der Kopf der Seiten ist ein Verlauf wie Licht durch Wasser mit drei
   Wellen, Posterama für Seitentitel, Poppins für Text, Amber nur für die eine Hauptaktion je Bildschirm. Werte nur aus
   diesen Tokens, keine freien Farben oder Abstände. Token-Namen bleiben (Teil C17: nur Werte ändern, neue dazu).
   Hell und dunkel folgen dem System; html[data-theme] erzwingt eins von beiden (gesetzt von einem kleinen Skript im
   head, bevor dieses CSS greift). Der dunkle Block steht deshalb zweimal und muss in beiden Fassungen gleich bleiben
   (tests/oberflaeche/c17a_test.py prüft das). Schriften: Poppins Medium und SemiBold über /schriften/, Poppins Regular
   und Posterama Regular und Bold stehen ganz unten als data-URI, bis die Route /schriften/ sie als Datei liefert. */

@font-face { font-family: "Poppins"; src: url("/schriften/Poppins-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/schriften/Poppins-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light;
  /* Sichere Bereiche (Notch, Home-Leiste) */
  --so: env(safe-area-inset-top, 0px); --su: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);

  /* Schrift: Poppins für Text und Bedienung, Posterama für Seitentitel (h1), Poppins 600 für Überschriften und Zahlen */
  --schrift: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-marke: "Poppins", var(--schrift);
  --schrift-titel: "Posterama", "Poppins", var(--schrift);
  /* Größen: 12 Kleinstes, 13 bis 14 Nebeninfo und Bedienung, 16 Fließtext (nie kleiner für Lesetext), 20 bis 30 Überschriften */
  --sg-12: 12px; --sg-13: 13px; --sg-14: 14px; --sg-16: 16px; --sg-18: 18px; --sg-20: 20px; --sg-24: 24px; --sg-30: 30px;

  /* Abstände nur aus dieser Skala; 2 px nur für optische Feinausrichtung */
  --abst-2: 2px; --abst-4: 4px; --abst-8: 8px; --abst-12: 12px; --abst-16: 16px;
  --abst-20: 20px; --abst-24: 24px; --abst-32: 32px; --abst-48: 48px; --abst-64: 64px;

  /* Form: Haarlinie, Rundungen von klein nach groß, innen kleiner als außen */
  --haar: .5px;
  --rund-mini: 4px; --rund-klein: 6px; --rund-mittel: 8px;
  --rund: 12px;          /* Knöpfe, Felder, Zeilen */
  --rund-flaeche: 16px;  /* Arbeitsfläche, Popover, Palette */
  --rund-gross: 20px;    /* Dialoge, Blätter */
  --rund-voll: 999px;    /* nur schwebende Leisten und Fortschrittsbalken, keine Marken-Pillen */
  --tipp: 44px;          /* kleinste Tippfläche */

  /* Markenfarben (Brand Guideline, Vault "Mohana Trips - InDesign-Branding"): Blau dominiert, Amber setzt den einen Akzent */
  --cobalt: #012B9A; --ocean: #1360DC; --sky: #26B4FA; --rim: #04DBCC; --amber: #FDA002; --navy: #0B1B45;

  /* Flächen: leicht blaugrauer Rahmen außen, fast weiße Arbeitsfläche innen (wie die Ideen-Seite) */
  --app: oklch(95.4% .013 262);
  --grund: oklch(99.7% .002 262);
  --flaeche: oklch(97.5% .007 262);
  --flaeche-2: oklch(95.2% .012 262);
  --hover: oklch(96.3% .01 262);
  --linie: oklch(92.6% .013 262);
  --linie-stark: oklch(86.5% .02 262);
  --text: oklch(23% .075 266);
  --text-2: oklch(41% .06 266);
  --text-3: oklch(49% .05 266);       /* auf allen hellen Flächen mindestens 4,5:1 */
  --tinte: oklch(23% .075 266);       /* starkes Neutral: Meldungen, Hinweise, Text auf Auswahl */
  --tinte-text: #ffffff;
  --buehne: #000000;                  /* Videos stehen immer auf Schwarz */

  --akzent: var(--ocean);             /* Auswahl, Fokus, Links, laufende Stelle */
  --akzent-text: #1360DC;             /* Akzent als Schrift: 5,6:1 auf Weiß */
  --akzent-g: #e6eefc;                /* heller Grund für Auswahl */
  --haupt: var(--amber);              /* die eine Hauptaktion je Bildschirm: Amber mit Navy (8:1) */
  --haupt-hover: #f09500;
  --haupt-text: var(--navy);
  --primaer: var(--cobalt);           /* starker blauer Knopf, wenn es nicht die Hauptaktion ist (Anmelden) */
  --primaer-hover: #0a38b3;
  --primaer-text: #ffffff;
  --marke: var(--cobalt);             /* Markenschriftzug */

  /* Status nur als Farbe mit Bedeutung: heller Grund (g), kräftiger Text (t), Punkt (p); Text auf g mindestens 4,5:1 */
  --offen-g: #fff3dc; --offen-t: #845200; --offen-p: var(--amber);    /* zu prüfen, wartet */
  --passt-g: #dcf9f6; --passt-t: #00675f; --passt-p: #04b8ab;         /* passt, fertig (Rim) */
  --nochmal-g: #fbe8e2; --nochmal-t: #a3432b; --nochmal-p: #e2704f;   /* nochmal, Fehler */
  --neu-g: #e3f4fe; --neu-t: #0b5f8a; --neu-p: var(--sky);            /* neue Fassung, Info, in Arbeit */
  --grau-g: #ebeff7; --grau-t: #4f5b6b; --grau-p: #9aa5b3;            /* Angaben wie Account, Format */

  /* Spuren der Timeline: je Art eine feste Farbe (Füllung g, Kante und Griff p, Schrift t) */
  --spur-video-g: #eef0f3;   --spur-video-p: #9aa5b3;   --spur-video-t: #3f4a59;
  --spur-broll-g: #e3f4fe;   --spur-broll-p: var(--sky);   --spur-broll-t: #0b5f8a;
  --spur-text-g: #e6eefc;    --spur-text-p: var(--ocean);  --spur-text-t: #0f4fb5;
  --spur-sticker-g: #fff3dc; --spur-sticker-p: var(--amber); --spur-sticker-t: #845200;
  --spur-grafik-g: #dcf9f6;  --spur-grafik-p: #04b8ab;  --spur-grafik-t: #00675f;
  --spur-sfx-g: #e8ebf8;     --spur-sfx-p: #4a5fc1;     --spur-sfx-t: #2a3b8f;
  --spur-musik-g: #e4e8f6;   --spur-musik-p: var(--cobalt); --spur-musik-t: #012B9A;
  --pin: var(--amber); --pin-text: #1a1200;   /* Kommentar-Pins: Amber mit dunkler Schrift (10:1) */

  /* Schatten geschichtet, nur für Schwebendes (Popover, Dialog, Leiste, Meldung) */
  --schatten-klein: 0 1px 2px rgb(11 27 69 / 6%), 0 0 0 var(--haar) var(--linie-stark);
  --schatten: 0 2px 4px rgb(11 27 69 / 8%), 0 16px 40px rgb(11 27 69 / 18%), 0 0 0 var(--haar) var(--linie-stark);
  --abdunkeln: rgb(11 27 69 / 32%);
  --fokus: 0 0 0 2px var(--grund), 0 0 0 4px var(--akzent);

  /* Verlaufskopf der Seiten: Cobalt zu Ocean, heller Schimmer oben rechts, Sky-Licht unten links, drei Wellen unten.
     Die dritte Welle hat die Farbe von --grund (Maske --band-welle-3), die beiden oberen stehen in --band-wellen. */
  --band-a: #012b9a; --band-b: #1360dc;
  --band-glanz: rgb(255 255 255 / 16%); --band-licht: rgb(38 180 250 / 22%);
  --band-wellen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-opacity='.1' d='M0 20C180 2 380 38 600 20S1000 0 1200 18V64H0Z'/%3E%3Cpath fill='%2326b4fa' fill-opacity='.24' d='M0 34C220 16 420 52 680 34S1060 18 1200 34V64H0Z'/%3E%3C/svg%3E");
  --band-welle-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 47C260 31 520 63 800 47S1100 35 1200 47V64H0Z'/%3E%3C/svg%3E");
  --band-text: #ffffff; --band-text-2: rgb(255 255 255 / 86%);
  --band-flaeche: rgb(0 16 72 / 26%); --band-hover: rgb(0 16 72 / 16%);
  --band-aktiv: #ffffff; --band-aktiv-text: var(--cobalt);
  --band-linie: rgb(255 255 255 / 40%);
  --band-verlauf: radial-gradient(120% 90% at 92% -20%, var(--band-glanz), transparent 62%),
    radial-gradient(70% 80% at 0% 120%, var(--band-licht), transparent 70%),
    linear-gradient(160deg, var(--band-a) 0%, var(--band-b) 100%);
  --wellen-h: 32px;

  /* Bewegung: unter 300 ms, nur transform und opacity; das Fließband-Band läuft langsam (nur bei In Arbeit) */
  --dauer-1: 120ms; --dauer-2: 180ms; --dauer-3: 260ms;
  --kurve: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Dunkel, Fassung 1: System (ohne feste Wahl) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --app: oklch(12.5% .028 266); --grund: oklch(17% .034 266); --flaeche: oklch(20.5% .04 266); --flaeche-2: oklch(24% .045 266);
    --hover: oklch(22.5% .042 266);
    --linie: rgb(255 255 255 / 8%); --linie-stark: rgb(255 255 255 / 16%);
    --text: oklch(96.5% .008 260); --text-2: oklch(84% .025 260); --text-3: oklch(74% .035 260);
    --tinte: oklch(95% .01 260); --tinte-text: var(--navy);
    --akzent: oklch(80% .115 236); --akzent-text: oklch(80% .115 236); --akzent-g: oklch(30% .07 252);
    --haupt: var(--amber); --haupt-hover: #ffb12e; --haupt-text: var(--navy); --marke: oklch(87% .08 236);
    --primaer: var(--ocean); --primaer-hover: #2a72e6; --primaer-text: #ffffff;
    --offen-g: #3a2a05; --offen-t: #fcd38a; --offen-p: var(--amber);
    --passt-g: #083a37; --passt-t: #8cf0e8; --passt-p: var(--rim);
    --nochmal-g: #3a2620; --nochmal-t: #f3b4a0; --nochmal-p: #ec8664;
    --neu-g: #10324a; --neu-t: #9ed8fb; --neu-p: var(--sky);
    --grau-g: #222b40; --grau-t: #b4bfcc; --grau-p: #7d8898;
    --spur-video-g: #262b35;   --spur-video-p: #7d8898;   --spur-video-t: #c3ccd8;
    --spur-broll-g: #10324a;   --spur-broll-p: var(--sky);  --spur-broll-t: #9ed8fb;
    --spur-text-g: #142a52;    --spur-text-p: #4d8ef0;    --spur-text-t: #a9c6fb;
    --spur-sticker-g: #3a2a05; --spur-sticker-p: var(--amber); --spur-sticker-t: #fcd38a;
    --spur-grafik-g: #083a37;  --spur-grafik-p: var(--rim); --spur-grafik-t: #8cf0e8;
    --spur-sfx-g: #1e2547;     --spur-sfx-p: #7b8de0;     --spur-sfx-t: #c2cbf5;
    --spur-musik-g: #121c45;   --spur-musik-p: #5b74d6;   --spur-musik-t: #b8c4f3;
    --schatten-klein: 0 1px 2px #0000004d, 0 0 0 var(--haar) var(--linie-stark);
    --schatten: 0 2px 4px #0000004d, 0 16px 40px #00000080, 0 0 0 var(--haar) var(--linie-stark);
    --abdunkeln: oklch(0% 0 0 / .5);
    --band-a: #001a63; --band-b: #0c45bd;
    --band-glanz: rgb(255 255 255 / 10%); --band-licht: rgb(38 180 250 / 16%);
    --band-wellen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-opacity='.06' d='M0 20C180 2 380 38 600 20S1000 0 1200 18V64H0Z'/%3E%3Cpath fill='%2326b4fa' fill-opacity='.16' d='M0 34C220 16 420 52 680 34S1060 18 1200 34V64H0Z'/%3E%3C/svg%3E");
    --band-text: #ffffff; --band-text-2: rgb(255 255 255 / 84%);
    --band-flaeche: rgb(0 6 30 / 30%); --band-hover: rgb(255 255 255 / 8%);
    --band-aktiv: rgb(255 255 255 / 94%); --band-aktiv-text: var(--navy);
    --band-linie: rgb(255 255 255 / 34%);
  }
}
/* ---------- Dunkel, Fassung 2: fest gewählt (muss gleich bleiben wie Fassung 1) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --app: oklch(12.5% .028 266); --grund: oklch(17% .034 266); --flaeche: oklch(20.5% .04 266); --flaeche-2: oklch(24% .045 266);
  --hover: oklch(22.5% .042 266);
  --linie: rgb(255 255 255 / 8%); --linie-stark: rgb(255 255 255 / 16%);
  --text: oklch(96.5% .008 260); --text-2: oklch(84% .025 260); --text-3: oklch(74% .035 260);
  --tinte: oklch(95% .01 260); --tinte-text: var(--navy);
  --akzent: oklch(80% .115 236); --akzent-text: oklch(80% .115 236); --akzent-g: oklch(30% .07 252);
  --haupt: var(--amber); --haupt-hover: #ffb12e; --haupt-text: var(--navy); --marke: oklch(87% .08 236);
  --primaer: var(--ocean); --primaer-hover: #2a72e6; --primaer-text: #ffffff;
  --offen-g: #3a2a05; --offen-t: #fcd38a; --offen-p: var(--amber);
  --passt-g: #083a37; --passt-t: #8cf0e8; --passt-p: var(--rim);
  --nochmal-g: #3a2620; --nochmal-t: #f3b4a0; --nochmal-p: #ec8664;
  --neu-g: #10324a; --neu-t: #9ed8fb; --neu-p: var(--sky);
  --grau-g: #222b40; --grau-t: #b4bfcc; --grau-p: #7d8898;
  --spur-video-g: #262b35;   --spur-video-p: #7d8898;   --spur-video-t: #c3ccd8;
  --spur-broll-g: #10324a;   --spur-broll-p: var(--sky);  --spur-broll-t: #9ed8fb;
  --spur-text-g: #142a52;    --spur-text-p: #4d8ef0;    --spur-text-t: #a9c6fb;
  --spur-sticker-g: #3a2a05; --spur-sticker-p: var(--amber); --spur-sticker-t: #fcd38a;
  --spur-grafik-g: #083a37;  --spur-grafik-p: var(--rim); --spur-grafik-t: #8cf0e8;
  --spur-sfx-g: #1e2547;     --spur-sfx-p: #7b8de0;     --spur-sfx-t: #c2cbf5;
  --spur-musik-g: #121c45;   --spur-musik-p: #5b74d6;   --spur-musik-t: #b8c4f3;
  --schatten-klein: 0 1px 2px #0000004d, 0 0 0 var(--haar) var(--linie-stark);
  --schatten: 0 2px 4px #0000004d, 0 16px 40px #00000080, 0 0 0 var(--haar) var(--linie-stark);
  --abdunkeln: oklch(0% 0 0 / .5);
  --band-a: #001a63; --band-b: #0c45bd;
  --band-glanz: rgb(255 255 255 / 10%); --band-licht: rgb(38 180 250 / 16%);
  --band-wellen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-opacity='.06' d='M0 20C180 2 380 38 600 20S1000 0 1200 18V64H0Z'/%3E%3Cpath fill='%2326b4fa' fill-opacity='.16' d='M0 34C220 16 420 52 680 34S1060 18 1200 34V64H0Z'/%3E%3C/svg%3E");
  --band-text: #ffffff; --band-text-2: rgb(255 255 255 / 84%);
  --band-flaeche: rgb(0 6 30 / 30%); --band-hover: rgb(255 255 255 / 8%);
  --band-aktiv: rgb(255 255 255 / 94%); --band-aktiv-text: var(--navy);
  --band-linie: rgb(255 255 255 / 34%);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dauer-1: 0ms; --dauer-2: 0ms; --dauer-3: 0ms; }
}

/* Grundlage, die alle Seiten teilen */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--app); color: var(--text);
  font: var(--sg-16)/1.5 var(--schrift);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--schrift-marke); font-weight: 600; letter-spacing: -.015em; margin: 0; }
/* Seitentitel in Posterama wie auf der Ideen-Seite */
h1 { font-family: var(--schrift-titel); font-weight: 700; letter-spacing: .01em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus { outline: none; }
:focus-visible { box-shadow: var(--fokus); border-radius: var(--rund-klein); }
::selection { background: color-mix(in oklch, var(--akzent) 26%, transparent); }
.zahl { font-variant-numeric: tabular-nums; }
::placeholder { color: var(--text-3); opacity: 1; }
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: var(--sg-16); }
}

/* Schriften aus static/schriften/ über die Route /schriften/ (Poppins Regular, Posterama Regular und Bold) */
@font-face { font-family: "Poppins"; src: url("/schriften/Poppins-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Posterama"; src: url("/schriften/Posterama-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Posterama"; src: url("/schriften/Posterama-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }