/* Gemeinsame Gestaltung der Prüf-Seite (Liste, Video, Vorschau, Vergleich, Studio, Anmeldung).
   Quelle: Vault App-Design (Handwerk, Oberfläche, Bedienung) und Marcels abgenommener Postfach-Stil
   ("clean, Mischung aus Mochi und Mohana"). Werte nur aus diesen Tokens, keine freien Farben oder Abstände.
   Hell und dunkel folgen dem System; html[data-theme] erzwingt eins von beiden. */

@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: Systemschrift für Lesetext und Bedienung, Poppins für Überschriften, Titel und große Zahlen */
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-marke: "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 */

  /* Flächen: grauer Rahmen außen, weiße Arbeitsfläche innen (Mochi) */
  --app: oklch(96.5% 0 0);
  --grund: #ffffff;
  --flaeche: oklch(97% 0 0);
  --flaeche-2: oklch(94.5% 0 0);
  --hover: oklch(95% 0 0);
  --linie: oklch(92.2% 0 0);
  --linie-stark: oklch(87% 0 0);
  --text: oklch(14.5% 0 0);
  --text-2: oklch(42% 0 0);
  --text-3: oklch(51% 0 0);          /* auf allen hellen Flächen mindestens 4,5:1 */
  --tinte: oklch(20.5% 0 0);         /* starkes Neutral (Text auf Auswahl, Symbole) */
  --tinte-text: #ffffff;
  --buehne: #000000;                 /* Videos stehen immer auf Schwarz */

  /* Mohana-Farben (Brand Guideline, Vault "Mohana Trips - InDesign-Branding"): Blau dominiert, Amber setzt Akzente */
  --cobalt: #012B9A; --ocean: #1360DC; --sky: #26B4FA; --rim: #04DBCC; --amber: #FDA002;
  --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(--ocean);             /* Hauptknopf: Ocean mit weißer Schrift (5,6:1) */
  --haupt-hover: #0f52bf;
  --haupt-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 */
  --grau-g: #eef0f3; --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 #0000000f, 0 0 0 var(--haar) var(--linie-stark);
  --schatten: 0 4px 8px rgb(32 34 36 / .04), 0 12px 24px #0000001a, 0 0 0 var(--haar) var(--linie-stark);
  --abdunkeln: oklch(0% 0 0 / .32);
  --fokus: 0 0 0 2px var(--grund), 0 0 0 4px var(--akzent);

  /* Bewegung: unter 300 ms, nur transform und opacity */
  --dauer-1: 120ms; --dauer-2: 180ms; --dauer-3: 260ms;
  --kurve: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --app: oklch(12% 0 0); --grund: oklch(17.5% 0 0); --flaeche: oklch(21.5% 0 0); --flaeche-2: oklch(25.5% 0 0);
    --hover: oklch(23.5% 0 0);
    --linie: oklch(100% 0 0 / 10%); --linie-stark: oklch(100% 0 0 / 17%);
    --text: oklch(97% 0 0); --text-2: oklch(80% 0 0); --text-3: oklch(66% 0 0);
    --tinte: oklch(92.2% 0 0); --tinte-text: oklch(20.5% 0 0);
    --akzent: #4d8ef0; --akzent-text: #7fb0f7; --akzent-g: #142a52;
    --haupt: var(--ocean); --haupt-hover: #2a72e6; --haupt-text: #ffffff; --marke: #7fb0f7;
    --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: #262b35; --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 12px 24px #00000066, 0 0 0 var(--haar) var(--linie-stark);
    --abdunkeln: oklch(0% 0 0 / .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --app: oklch(12% 0 0); --grund: oklch(17.5% 0 0); --flaeche: oklch(21.5% 0 0); --flaeche-2: oklch(25.5% 0 0);
  --hover: oklch(23.5% 0 0);
  --linie: oklch(100% 0 0 / 10%); --linie-stark: oklch(100% 0 0 / 17%);
  --text: oklch(97% 0 0); --text-2: oklch(80% 0 0); --text-3: oklch(66% 0 0);
  --tinte: oklch(92.2% 0 0); --tinte-text: oklch(20.5% 0 0);
  --akzent: #4d8ef0; --akzent-text: #7fb0f7; --akzent-g: #142a52;
  --haupt: var(--ocean); --haupt-hover: #2a72e6; --haupt-text: #ffffff; --marke: #7fb0f7;
  --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: #262b35; --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 12px 24px #00000066, 0 0 0 var(--haar) var(--linie-stark);
  --abdunkeln: oklch(0% 0 0 / .5);
}

@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; }
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); }
.zahl { font-variant-numeric: tabular-nums; }
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: var(--sg-16); }
}