/* swiss-jobrollen-check.ch · Design «Zukunft», Variante «Tageslicht» (hell)
   ------------------------------------------------------------------
   Laedt NACH zukunft.css (media="screen", Ausdruck/PDF bleiben unveraendert) und gilt nur,
   wenn assets/js/zukunft-theme.js <html data-theme="light"> setzt: bei «Automatisch» mit hellem
   System, oder wenn der Besucher «Hell» gewaehlt hat. Dunkel steht in zukunft.css.

   Aufbau: Die Komponenten in zukunft.css rechnen mit Tokens (--zk-*, Farbkanaele --zk-*-rgb). Hier werden nur
   die Werte getauscht und die wenigen Stellen angepasst, die in Dunkel feste Farben tragen.
   Vorbild: absofort.ch, Design «Zukunft», Tageslicht (hellblauer Grund, weisse Karten, dieselben Akzente
   Violett/Cyan/Mint, aber als dunkle Textfarben). Dunkle Inseln mit hellem Text (.sec-dark, CTA-Karten) bleiben
   in beiden Modi dunkel und tragen dort ihre eigenen Tokens (siehe zukunft.css, Abschnitt 1).

   Kontraste (WCAG AA), gerechnet gegen Weiss bzw. den Grund #eef2f9:
   Text #0d1530 ~17:1, Lead #1b2848 ~14:1, gedaempft #26345a ~11:1, blass #2f3d5c ~7:1 (alle >= 7:1 auch auf den getoenten Flaechen),
   Cyan-Text #006477 ~6.8:1, Violett #5540ad ~7.8:1 (Titel-Verlauf nur gross, >= 3:1), Mint-Text #176344 ~7.9:1, Amber-Text #92400e ~7.5:1,
   Rot-Text #b91c1c ~6.5:1, Knopftext Weiss auf Verlauf #5540ad..#176344 >= 6.4:1,
   Feldrand #7a8ba5 ~3.4:1 (Bedienelement, >= 3:1). */

:root[data-theme="light"] {
  color-scheme: light;

  --zk-violet: #5540ad;
  --zk-indigo: #43318f;
  --zk-cyan: #006477;
  --zk-mint: #176344;
  --zk-amber: #92400e;
  --zk-rot: #b91c1c;
  --zk-grad: linear-gradient(105deg, #5a3fd4, #0e7898 58%, #137a4f);
  --zk-grad-text: linear-gradient(105deg, #5b3fd6, #0a86a6 55%, #12875a);
  --zk-ink: #ffffff;

  --zk-cyan-rgb: 0, 100, 119;
  --zk-mint-rgb: 23, 99, 68;
  --zk-indigo-rgb: 90, 63, 212;
  --zk-violet-rgb: 90, 63, 212;
  --zk-amber-rgb: 146, 64, 14;
  --zk-rot-rgb: 185, 28, 28;
  --zk-wash-rgb: 25, 36, 59;
  --zk-shadow-rgb: 30, 49, 88;
  --zk-bg-rgb: 238, 242, 249;
  --zk-deep-rgb: 231, 237, 249;
  --zk-surface-rgb: 255, 255, 255;
  --zk-surface-strong-rgb: 255, 255, 255;

  --zk-bg: #eef2f9;
  --zk-surface: #ffffff;
  --zk-surface-2: #f3f6fb;
  --zk-glass: rgba(255, 255, 255, .88);
  --zk-glass-strong: rgba(255, 255, 255, .95);
  --zk-tint: rgba(0, 100, 119, .06);
  --zk-line: rgba(25, 36, 59, .18);
  --zk-line-strong: rgba(25, 36, 59, .32);
  --zk-field: #ffffff;
  --zk-field-rand: #66779a;

  --zk-text: #0d1530;
  --zk-lead: #1b2848;
  --zk-muted: #26345a;
  --zk-faint: #2f3d5c;

  /* alte Tokens aus style.css */
  --primary: #006477;
  --primary-dark: #176344;
  --primary-light: rgba(0, 100, 119, .09);
  --secondary: #006477;
  --accent: #176344;
  --pink: #5540ad;
  --teal: #006477;
  --dark: #0d1530;
  --dark-2: #1b2848;
  --bg: #eef2f9;
  --bg-soft: #f3f6fb;
  --white: #ffffff;
  --text: #0d1530;
  --text-muted: #26345a;
  --border: rgba(25, 36, 59, .14);
  --shadow-sm: 0 4px 14px rgba(30, 49, 88, .08);
  --shadow: 0 12px 34px rgba(30, 49, 88, .10);
  --shadow-lg: 0 20px 54px rgba(30, 49, 88, .14);

  scrollbar-color: #b5c2d8 transparent;
}

/* ---------- Grund, Nebel, Auswahl ---------- */
:root[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%, rgba(120, 96, 235, .30), transparent 70%),
    radial-gradient(ellipse 60% 45% at 94% 38%, rgba(30, 190, 215, .24), transparent 70%),
    radial-gradient(ellipse 70% 50% at 30% 100%, rgba(80, 220, 170, .22), transparent 70%),
    var(--zk-bg);
}
:root[data-theme="light"] ::selection { background: #5540ad; color: #ffffff; }

/* ---------- Kopf, Fuss ---------- */
:root[data-theme="light"] body > header,
:root[data-theme="light"] .header-shell { background: rgba(255, 255, 255, .84); }
:root[data-theme="light"] body > header::after { opacity: .4; }
:root[data-theme="light"] footer::before { opacity: .4; }
:root[data-theme="light"] footer { background: linear-gradient(180deg, rgba(231, 237, 249, .6), rgba(222, 230, 245, .95)); }
:root[data-theme="light"] .topbar { background: rgba(255, 255, 255, .5); }
:root[data-theme="light"] .lang-menu { background: #ffffff; }
:root[data-theme="light"] .zk-theme-menu { background: #ffffff; }
:root[data-theme="light"] .lang-current { background: rgba(0, 100, 119, .08); border-color: rgba(0, 100, 119, .3); }
:root[data-theme="light"] .lang-current:hover { background: rgba(0, 100, 119, .16); color: var(--zk-text); }
@media (max-width: 640px) { :root[data-theme="light"] .nav-links { background: #ffffff; } }

/* ---------- Himmel, Rakete ---------- */
:root[data-theme="light"] .zk-rocket { filter: drop-shadow(0 14px 22px rgba(30, 49, 88, .22)); }
:root[data-theme="light"] .zk-rakete-mini { filter: drop-shadow(0 6px 10px rgba(30, 49, 88, .22)); }
:root[data-theme="light"] .zk-orbit-track { border-color: rgba(25, 36, 59, .20); }
:root[data-theme="light"] .zk-orbit-dot { background: #006477; box-shadow: 0 0 12px rgba(0, 100, 119, .6); }
:root[data-theme="light"] .zk-status-dot { background: #176344; box-shadow: 0 0 8px rgba(23, 99, 68, .6); }
:root[data-theme="light"] .zk-particles { opacity: .45; }
:root[data-theme="light"] .zk-rocket-clouds { opacity: .16; }
:root[data-theme="light"] .zk-exhaust-halo { opacity: .5; }
:root[data-theme="light"] .zk-trajectory { opacity: .7; }
:root[data-theme="light"] .zk-telemetry { box-shadow: 0 20px 50px rgba(30, 49, 88, .14); border-color: rgba(85, 64, 173, .3); }
:root[data-theme="light"] .hero-content,
:root[data-theme="light"] .results-hero .container,
:root[data-theme="light"] .upgrade-hero .container,
:root[data-theme="light"] .co-hero .container,
:root[data-theme="light"] .rg-head .rg-wrap,
:root[data-theme="light"] .ar-hero .container { text-shadow: 0 0 18px rgba(238, 242, 249, .9), 0 0 4px rgba(238, 242, 249, .8); }

/* ---------- Schatten, die in Dunkel fest schwarz waren ---------- */
:root[data-theme="light"] .feature-card:hover,
:root[data-theme="light"] .who-card:hover,
:root[data-theme="light"] .result-card:hover { box-shadow: 0 16px 40px rgba(30, 49, 88, .14), 0 0 0 1px rgba(0, 100, 119, .12); }
:root[data-theme="light"] .zk-fehler-karte { box-shadow: 0 20px 50px rgba(30, 49, 88, .16); border-color: rgba(85, 64, 173, .3); }
:root[data-theme="light"] .assess-choice.selected,
:root[data-theme="light"] .quiz-answer.selected,
:root[data-theme="light"] .ctx-opt-sel { box-shadow: 0 0 0 1px rgba(0, 100, 119, .5), 0 8px 20px rgba(30, 49, 88, .12); }
:root[data-theme="light"] body .ctx-opt.ctx-opt-sel { background: linear-gradient(135deg, rgba(85, 64, 173, .12), rgba(0, 100, 119, .10)); }

/* ---------- Knoepfe, Kennzeichen ---------- */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .btn-hero,
:root[data-theme="light"] .btn-coaching,
:root[data-theme="light"] .btn-success { box-shadow: 0 8px 22px rgba(85, 64, 173, .28), inset 0 1px 0 rgba(255, 255, 255, .25); }
:root[data-theme="light"] .aktion-btn,
:root[data-theme="light"] .aktion-btn:hover { background: linear-gradient(105deg, #f5c451, #ffe08a); color: #2a1a00; }
:root[data-theme="light"] .result-card-rank.gold,
:root[data-theme="light"] .result-card-rank.silver,
:root[data-theme="light"] .result-card-rank.bronze { color: #1a1200; }
:root[data-theme="light"] .alert-error,
:root[data-theme="light"] .badge-admin { color: #8f1d1d; }
:root[data-theme="light"] .alert-info { color: #00566a; }
:root[data-theme="light"] .beruf-tag-stufe { color: #43318f; }
:root[data-theme="light"] .ix14 { color: rgba(85, 64, 173, .55); }
:root[data-theme="light"] .btn-light { background: #ffffff; }
:root[data-theme="light"] .zk-pause { background: rgba(255, 255, 255, .9); }

/* ---------- Formulare ---------- */
:root[data-theme="light"] .form-control:hover:not(:focus) { border-color: #5d6b84; }
:root[data-theme="light"] .form-control:focus { box-shadow: 0 0 0 3px rgba(0, 100, 119, .22); }
:root[data-theme="light"] input:-webkit-autofill,
:root[data-theme="light"] input:-webkit-autofill:hover,
:root[data-theme="light"] input:-webkit-autofill:focus { -webkit-text-fill-color: #19243b; box-shadow: 0 0 0 40px #f3f6fb inset; }

/* ---------- Logos: auf hellem Grund die dunkle Marke ---------- */
:root[data-theme="light"] img[src$="alpasana_logo_weiss.png"] { content: url("../img/alpasana_logo.png"); }

/* ---------- Seiten mit eigenem dunklem Kopf im Bestand (Institutionen-Antrag) ---------- */
:root[data-theme="light"] .zk-seite-pad > .container-xs > div:first-child h1 { color: var(--zk-text) !important; }
:root[data-theme="light"] .zk-seite-pad > .container-xs > div:first-child p { color: var(--zk-muted) !important; }

/* ---------- Inline-Styles des Bestands: Abschnitt 18 in zukunft.css rechnet ueber Tokens; blaue Inline-Verlaufs-Panels sind dunkle Inseln ---------- */

/* ---------- Hochkontrast bleibt Sache des Systems ---------- */
@media (forced-colors: active) {
  :root[data-theme="light"] .zk-theme-btn, :root[data-theme="light"] .zk-theme-menu button { border: 1px solid ButtonText; }
}

/* ---------- Texte, die im Bestand fuer dunklen Grund weiss gesetzt sind ---------- */
:root[data-theme="light"] .final-cta { color: var(--zk-lead); }
:root[data-theme="light"] .final-cta p { color: var(--zk-lead); opacity: 1; }
:root[data-theme="light"] .final-cta .ix48 { color: var(--zk-muted); }
:root[data-theme="light"] .footer-bottom { color: var(--zk-muted); }
:root[data-theme="light"] .ix14 { color: rgba(85, 64, 173, .75); }
/* Dunkle Inseln: deckender, damit sie auf hellem Grund als ruhige dunkle Flaeche stehen */
:root[data-theme="light"] :is(.sec-dark, .coaching-section, .partner-section) { background: linear-gradient(135deg, #0a0f1e, #11193a); }
:root[data-theme="light"] :is(.ar-cta, .rg-cta, .lead-wrap, .teaser-cta, .user-pro-cta),
:root[data-theme="light"] :is([style*="linear-gradient(135deg,#1C7CB0,#1C7CB0)" i], [style*="linear-gradient(135deg,#269CD9,#1C7CB0)" i], [style*="linear-gradient(135deg, #269CD9, #1C7CB0)" i]) { background-color: #0c1228 !important; }

/* Zweitknopf im Seitenkopf mit weissem Inline-Stil (Coaching: «Unsere Buecher») */
:root[data-theme="light"] :is(.hero, .co-hero, .results-hero, .upgrade-hero) .btn[style*="color:#fff" i] {
  background: rgba(var(--zk-cyan-rgb), .06) !important;
  color: var(--zk-cyan) !important;
  border-color: rgba(var(--zk-cyan-rgb), .5) !important;
}

/* Umsatz-Bausteine (umsatz.css gehoert zu einer anderen Arbeit und bleibt unberuehrt): Rangzahl auf dem dunklen Verlauf */
:root[data-theme="light"] .bsp-rank { color: var(--zk-ink); }

/* ============================ Farbspiel (Tageslicht, kraeftiger) ============================
   Sascha, 11.10.2026: «noch etwas langweilig - mit den Farben spielen, Kontrast staerken».
   Verlauf Violett-Cyan-Mint grossflaechig im Seitenkopf, getoente Abschnitte im Wechsel, farbige Kartenraender
   und Symbole, kraeftigere Titel und Knoepfe. Ergebnis, Kasse und Check-Ablauf bleiben ruhig (nur der Kopf getoent,
   Karten weiss). Alle Texte liegen auf den getoenten Flaechen weiter bei >= 7:1. */
:root[data-theme="light"] .zk-netz {
  background:
    radial-gradient(ellipse 60% 90% at 88% 20%, rgba(80, 220, 170, .42), transparent 70%),
    linear-gradient(125deg, rgba(160, 140, 250, .42), rgba(90, 205, 240, .36) 52%, rgba(120, 235, 195, .34));
}
:root[data-theme="light"] :is([data-zk-ruhig]).zk-netz {
  background: linear-gradient(125deg, rgba(150, 128, 250, .26), rgba(90, 205, 240, .22) 55%, rgba(120, 235, 195, .22));
}
:root[data-theme="light"] body > header::after, :root[data-theme="light"] footer::before { opacity: .85; height: 2px; }
:root[data-theme="light"] .how-it-works { background: linear-gradient(135deg, rgba(30, 175, 215, .20), rgba(120, 235, 195, .30)); border-block: 1px solid var(--zk-line); }
:root[data-theme="light"] .sec-soft { background: linear-gradient(180deg, rgba(150, 128, 250, .22), rgba(90, 205, 240, .18)); border-block: 1px solid var(--zk-line-strong); }
:root[data-theme="light"] section#pro { background: rgba(255, 255, 255, .6); }
:root[data-theme="light"] section#faq { background: linear-gradient(180deg, rgba(120, 235, 195, .26), rgba(90, 205, 240, .14)); border-block: 1px solid var(--zk-line); }
:root[data-theme="light"] .final-cta { background: linear-gradient(135deg, rgba(150, 128, 250, .50), rgba(90, 205, 240, .40) 55%, rgba(120, 235, 195, .50)) !important; border-top: 1px solid var(--zk-line-strong); }

/* Karten: farbiger Kopfrand im Wechsel Violett / Cyan / Mint, Symbole auf getoenter Kachel */
:root[data-theme="light"] :is(.feature-card, .who-card, .co-card, .book-card) { border-top: 3px solid #5a3fd4; box-shadow: 0 14px 34px rgba(60, 70, 160, .13); }
:root[data-theme="light"] :is(.feature-card, .who-card, .co-card, .book-card):nth-child(3n+2) { border-top-color: #0e7898; }
:root[data-theme="light"] :is(.feature-card, .who-card, .co-card, .book-card):nth-child(3n+3) { border-top-color: #137a4f; }
:root[data-theme="light"] :is(.feature-icon, .ix15) {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(150, 128, 250, .30), rgba(90, 205, 240, .30));
  border: 1px solid rgba(90, 63, 212, .25);
}
:root[data-theme="light"] .step-num, :root[data-theme="light"] .beruf-rank, :root[data-theme="light"] .result-card-rank { box-shadow: 0 6px 16px rgba(90, 63, 212, .35); }
:root[data-theme="light"] .section-tag { background: rgba(255, 255, 255, .75); border-color: rgba(90, 63, 212, .35); color: #4a30b8; }

/* Titel: kraeftigerer Verlauf (nur grosse Schrift, >= 3:1) */
:root[data-theme="light"] .section-header h2 { background: linear-gradient(105deg, #0d1530 12%, #4a30c0 48%, #0a7a9a 78%, #12875a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
:root[data-theme="light"] .btn-primary, :root[data-theme="light"] .btn-hero, :root[data-theme="light"] .btn-coaching, :root[data-theme="light"] .btn-success { box-shadow: 0 10px 26px rgba(90, 63, 212, .38), inset 0 1px 0 rgba(255, 255, 255, .3); }
:root[data-theme="light"] .btn-secondary { background: rgba(255, 255, 255, .8); border-color: #0e7898; color: #00566f; }
:root[data-theme="light"] .btn-secondary:hover { background: rgba(14, 120, 152, .12); }
:root[data-theme="light"] .zk-telemetry { border-color: rgba(90, 63, 212, .45); box-shadow: 0 22px 54px rgba(60, 70, 160, .2); }
:root[data-theme="light"] .zk-hero-copy .hero-badge, :root[data-theme="light"] .hero .hero-badge { color: #4a30b8; }
/* ruhige Seiten: Ergebnis, Kasse, Fragebogen, Kundenbereich - Karten bleiben weiss und klar */
:root[data-theme="light"] :is(.result-card, .path-result, .upgrade-card, .quiz-card, .user-sidebar, .user-card, .user-panel, .stat-card, .plan-card, .upgrade-proof, .upgrade-next, .faq-item) { border-top-width: 1px; }
:root[data-theme="light"] :is(.result-card, .path-result, .upgrade-card, .quiz-card) { box-shadow: 0 14px 34px rgba(60, 70, 160, .12); }