/* Helle Varianten (Wunsch Auftraggeber 10.11.2026: frischer, heller, aufgeräumt).
   data-theme="blau"  → Blau – vom Auftraggeber gewählt (10.11.2026), Standard
   data-theme="hell"  → Petrol (Alternative, nicht gewählt)
   data-theme="dunkel" → bisherige dunkle Fassung (keine Überschreibung)
   Umschalter in der Prototyp-Leiste (proto-nav.js). Kontraste (WCAG): Weiß auf #0B6577 6,7 : 1, #0B6577 auf #E8F2F1 5,9 : 1. */
html[data-theme="hell"] {
  --ink: #0E1D24;
  --ink-muted: #475A63;
  --ink-subtle: #56666E;
  --paper: #F4F8F8;
  --surface: #FFFFFF;
  --line: #D8E3E4;
  --line-strong: #77878D;
  --signal: #0B6577;
  --signal-strong: #08505E;
  --stage: #E8F2F1;
  --stage-raised: #FFFFFF;
  --stage-line: #C9DCDC;
  --on-stage: #0E1D24;
  --on-stage-muted: #475A63;
  --melt: #2A9D90;
  --melt-glow: #0B6577;
  --melt-gradient: linear-gradient(90deg, #5CC9B8, #0B6577);
  --foot: #0C2630; --foot-ink: #E6F2F1; --foot-muted: #B8CDD1; --foot-line: #1F3D48;
  --stage-top: #F1F7F7;
}
html[data-theme="blau"] {
  --ink: #0F1B2A;
  --ink-muted: #475569;
  --ink-subtle: #566373;          /* ≥ 4,5 : 1 auch auf --stage (Codex-Sonde R03) */
  --paper: #F5F7FA;
  --surface: #FFFFFF;
  --line: #DCE3EA;
  --line-strong: #7B8794;
  --signal: #0B5FAE;
  --signal-strong: #084A88;
  --stage: #EAF0F6;
  --stage-raised: #FFFFFF;
  --stage-line: #CFD9E3;
  --on-stage: #0F1B2A;
  --on-stage-muted: #475569;
  --melt: #1F74C8;
  --melt-glow: #0B5FAE;
  --melt-gradient: linear-gradient(90deg, #5AA3EA, #0B5FAE);
  --foot: #0F1B2A; --foot-ink: #EEF3F8; --foot-muted: #B6C3D1; --foot-line: #24364B;
  --stage-top: #F2F6FA;
}
:is(html[data-theme="hell"], html[data-theme="blau"]) .stage { background: linear-gradient(180deg, var(--stage-top) 0, var(--stage) 100%); }
:is(html[data-theme="hell"], html[data-theme="blau"]) .btn-melt { background: var(--signal); color: #fff; }
:is(html[data-theme="hell"], html[data-theme="blau"]) .btn-melt:hover { background: var(--signal-strong); }
:is(html[data-theme="hell"], html[data-theme="blau"]) .hero-visual,
:is(html[data-theme="hell"], html[data-theme="blau"]) .video { background: radial-gradient(120% 90% at 70% 30%, #FFFFFF 0, var(--stage) 75%, var(--stage-line) 140%); }
:is(html[data-theme="hell"], html[data-theme="blau"]) .media { background: linear-gradient(180deg, #F8FAFA, var(--stage)); }
:is(html[data-theme="hell"], html[data-theme="blau"]) .viewer .badge-need { background: #FFFFFFE6; }
:is(html[data-theme="hell"], html[data-theme="blau"]) .snap img { background: var(--stage); }
/* Fuß bleibt dunkel – ruhiger Abschluss der hellen Seite */
:is(html[data-theme="hell"], html[data-theme="blau"]) .site-foot {
  --stage: var(--foot); --on-stage: var(--foot-ink); --on-stage-muted: var(--foot-muted); --stage-line: var(--foot-line);
  background: var(--foot);
}
:is(html[data-theme="hell"], html[data-theme="blau"]) .site-foot :focus-visible { outline-color: var(--foot-ink); }
/* Prototyp-Leiste neutral, damit sie nicht wie Teil des Designs wirkt */
:is(html[data-theme="hell"], html[data-theme="blau"]) .proto-bar { background: #FFE9A8; color: #3B2F00; }
:is(html[data-theme="hell"], html[data-theme="blau"]) .proto-bar a { color: #3B2F00; }