/* Farbschema «Tageslicht» für modernhosting.ch (wird nach style.css und zukunft.css geladen).
   Dunkel bleibt das bisherige Design und steht unverändert in style.css und zukunft.css.
   Hell gilt nur, wenn <html data-theme="light"> steht: theme.js setzt es vor dem ersten Zeichnen
   (Standard = Systemeinstellung, Wahl des Besuchenden hat Vorrang). Die Werte sind eine eigene
   helle Variante im Stil von absofort.ch, keine blosse Umkehrung: helle Flächen, dieselben Akzente
   Violett, Cyan, Mint in dunkleren Tönen. Text gemessen mindestens 4.5:1 (WCAG AA), Werte im Prüfbericht
   docs/DESIGN-HELL-DUNKEL-PRUEFBERICHT.md. Nur Tokens und Selektoren, keine Farbwerte in PHP/HTML,
   keine externen Quellen (CSP: style-src 'self'). Druck bleibt unverändert: die hellen Tokens
   gelten nur auf dem Bildschirm. */

/* ---------- Umschalter in der Kopfzeile (beide Farbschemata) ---------- */
.theme-toggle { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 7px; background: none; color: var(--muted); transition: border-color .25s, color .25s, box-shadow .25s, background .25s; }
.theme-js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { border-color: var(--cyan); color: var(--text); background: var(--cyan-dim); box-shadow: 0 0 22px var(--cyan-glow); }
.theme-ico { display: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme-mode="auto"] .theme-ico-auto, html[data-theme-mode="light"] .theme-ico-light, html[data-theme-mode="dark"] .theme-ico-dark { display: block; }
.logo-light { display: none; }
@media (max-width: 420px) { .header-inner { gap: 8px; } }
@media print { .theme-toggle, .theme-status { display: none !important; } }
@media (forced-colors: active) { .theme-toggle { border-color: CanvasText; color: ButtonText; } }

@media screen {
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e8ecfa; --bg-deep: #dbe2f6; --surface: #ffffff; --surface-raised: #f1f4fd;
  --text: #0e1330; --muted: #29324f; --faint: #3a4564;
  --cyan: #004d61; --mint: #0b5033; --violet: #4b34b8; --indigo: #5b45d6;
  --line: #0e133033; --line-strong: #0e133059; --glass: #ffffffe6; --clear: #ffffff00;
  --cyan-dim: #0096b41f; --mint-dim: #14906a1f; --violet-dim: #5b3df01c;
  --violet-glow: #6446f03d; --cyan-glow: #008caf38; --shadow: #1e2a6e33;
  --header-bg: #ffffffe6; --nebula: #b3a6f7;
  /* Verlauf für Knöpfe (weisse Schrift darauf >= 5:1) und für die grossen Titel */
  --gradient: linear-gradient(105deg, #5b3df0, #007a94 58%, #0e7a55);
  --gradient-text: linear-gradient(105deg, #5a38f0, #0a7ea0 55%, #0e8a5c);
  /* Himmel (Canvas in main.js): dunkle, gut sichtbare Punkte und Linien */
  --sky-star: #1f2a5c; --sky-a: #00607a; --sky-b: #4a2fd0; --sky-strength: .95;
  /* Zukunft-Bausteine (zukunft.css) */
  --z-cyan-50: rgba(0, 106, 133, .6); --z-cyan-90: rgba(0, 106, 133, .95); --z-mint-55: rgba(0, 122, 148, .55); --z-mint-90: rgba(14, 110, 76, .95);
  --z-violet-75: rgba(91, 61, 240, .8); --z-horizon-glow: rgba(0, 150, 180, .28); --z-horizon-deep: #b9c3f1;
  --z-halo: rgba(91, 61, 240, .3);
  /* Farbakzente der Karten (Violett, Cyan, Mint) */
  --accent: #4b34b8; --accent-tint: #5b3df01f;
  scrollbar-color: #8d9bc4 transparent;
}

/* Logo mit hellen Verlaufsfarben wäre auf Weiss kaum zu sehen: dunkle Variante */
:root[data-theme="light"] .logo-dark { display: none; }
:root[data-theme="light"] .logo-light { display: block; }

/* ---------- Kontrastinseln: derselbe Weltraum wie im dunklen Design (Tokens zurückgesetzt) ---------- */
:root[data-theme="light"] :is(.terminal, .rocket-scene, .final-section, .flight-label) {
  color-scheme: dark;
  --bg: #070a13; --bg-deep: #04070e; --surface: #0d1322; --surface-raised: #121b2d;
  --text: #eef3ff; --muted: #a6b2ca; --faint: #98a6c2;
  --cyan: #69e1f5; --mint: #9af5d4; --violet: #a492ff; --indigo: #6550db;
  --line: #ffffff17; --line-strong: #ffffff2e; --glass: #111a2bb3; --clear: #00000000;
  --cyan-dim: #69e1f51a; --mint-dim: #9af5d41a; --violet-dim: #a492ff18;
  --violet-glow: #7152da30; --cyan-glow: #47ceeb21; --shadow: #00000055; --header-bg: #070a13ed; --nebula: #25205f;
  --gradient: linear-gradient(105deg, #a492ff, #69e1f5 65%, #9af5d4);
  --gradient-text: linear-gradient(105deg, #a492ff, #69e1f5 65%, #9af5d4);
  --sky-star: #ffffff; --sky-a: #69e1f5; --sky-b: #a492ff; --sky-strength: 1;
  --z-cyan-50: rgba(105, 225, 245, .5); --z-cyan-90: rgba(105, 225, 245, .9); --z-mint-55: rgba(154, 245, 212, .55); --z-mint-90: rgba(154, 245, 212, .9);
  --accent: #a492ff; --accent-tint: #a492ff24;
  --z-violet-75: rgba(164, 146, 255, .75); --z-horizon-glow: rgba(105, 225, 245, .2); --z-horizon-deep: rgba(26, 36, 72, .9); --z-halo: rgba(164, 146, 255, .26);
}

/* ---------- Knöpfe, Verläufe ---------- */
:root[data-theme="light"] .gradient-text { color: #4b34b8; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="light"] .button:not(.button-quiet):not(.button-outline) { color: #ffffff; box-shadow: 0 8px 22px #5b3df040; }
:root[data-theme="light"] .button:not(.button-quiet):not(.button-outline):hover { box-shadow: 0 12px 34px #5b3df066; }
:root[data-theme="light"] .recommended-label { color: #ffffff; box-shadow: 0 6px 18px #5b3df055; }
:root[data-theme="light"] .skip-link { background: var(--mint); color: #ffffff; }
:root[data-theme="light"] .button-outline { background: #ffffff; border-color: #4b34b8; color: #0e1330; }
:root[data-theme="light"] .button-outline:hover { background: #f4f1ff; box-shadow: 0 8px 24px #5b3df040; }
:root[data-theme="light"] .button-quiet:hover { color: #4b34b8; }
:root[data-theme="light"] .final-section .button:not(.button-quiet):not(.button-outline) { color: #04070e; box-shadow: none; }
:root[data-theme="light"] .final-section .button-outline { background: var(--cyan-dim); border-color: var(--line-strong); color: var(--text); }
:root[data-theme="light"] .final-section .gradient-text { color: var(--cyan); }

:root[data-theme="light"] .theme-toggle { border-color: #4b34b8; background: #ffffff; color: #0e1330; }
:root[data-theme="light"] .theme-toggle:hover { border-color: #004d61; background: #f4f1ff; }
:root[data-theme="light"] .menu-toggle { border-color: #4b34b8; }

/* ---------- Kopf und Fuss ---------- */
:root[data-theme="light"] .site-header { box-shadow: 0 10px 30px #1e2a6e1a; }
:root[data-theme="light"] .site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gradient); pointer-events: none; }
:root[data-theme="light"] .site-footer { background: linear-gradient(180deg, #d8dffa, #dbe9f4); border-top: 3px solid transparent; border-image: var(--gradient) 1; }
:root[data-theme="light"] .trust-strip { background: linear-gradient(105deg, #dcd6fb, #d3eaf4 60%, #d3f0e6); border-bottom-color: var(--line-strong); }
:root[data-theme="light"] .trust-grid .icon { color: #4b34b8; }
:root[data-theme="light"] .trust-location { color: var(--text); font-weight: 500; }

/* ---------- Hero: Aurora aus Violett, Cyan und Mint ---------- */
:root[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse 58% 72% at 86% 18%, rgba(112, 84, 255, .5), transparent 70%),
    radial-gradient(ellipse 52% 62% at 6% 92%, rgba(0, 176, 208, .42), transparent 70%),
    radial-gradient(ellipse 42% 50% at 58% 108%, rgba(40, 205, 150, .36), transparent 70%),
    linear-gradient(180deg, #d9defb, #e4f0fb);
  border-bottom-color: var(--line-strong);
}
:root[data-theme="light"] .hero::after { opacity: .1; }
:root[data-theme="light"] .hero-nebula { opacity: .7; }
:root[data-theme="light"] .hero-horizon::before { box-shadow: 0 -6px 30px var(--z-horizon-glow), 0 -30px 100px var(--z-halo), inset 0 16px 50px var(--cyan-dim); }
:root[data-theme="light"] .hero-chips li::before { background: #4b34b8; }
:root[data-theme="light"] .hero-description, :root[data-theme="light"] .hero-chips { color: var(--muted); }
:root[data-theme="light"] .hero-bottom, :root[data-theme="light"] .hero-bottom a { color: var(--muted); }
:root[data-theme="light"] .scroll-indicator { border-color: #4b34b8; }
:root[data-theme="light"] .scroll-indicator::after { background: #4b34b8; }

/* Rakete: dunkle Weltraum-Scheibe als Kontrastinsel */
:root[data-theme="light"] .flight-label { z-index: 3; color: var(--faint); top: 34px; left: 38px; right: 26px; --cyan: #69e1f5; }
:root[data-theme="light"] .rocket-scene { margin-top: 40px; }
:root[data-theme="light"] .hero-visual .terminal { margin-top: 26px; }
:root[data-theme="light"] .rocket-scene::before {
  content: ''; position: absolute; z-index: 0; inset: -26px -6px -4px; border-radius: 30px;
  background:
    radial-gradient(1.4px 1.4px at 12% 22%, #ffffffcc, transparent), radial-gradient(1px 1px at 28% 70%, #ffffff99, transparent),
    radial-gradient(1.6px 1.6px at 72% 14%, #ffffffdd, transparent), radial-gradient(1px 1px at 88% 58%, #ffffffaa, transparent),
    radial-gradient(1.2px 1.2px at 46% 90%, #69e1f5cc, transparent), radial-gradient(1.2px 1.2px at 8% 52%, #a492ffcc, transparent),
    radial-gradient(1px 1px at 60% 40%, #ffffff88, transparent), radial-gradient(1.4px 1.4px at 93% 86%, #9af5d4cc, transparent),
    radial-gradient(ellipse at 62% 38%, #4a3bb8 0%, #1d1a5c 42%, #0a0e24 80%);
  box-shadow: 0 30px 70px #4b34b85c, inset 0 0 0 1px #a492ff55;
}
:root[data-theme="light"] .rocket-scene > * { z-index: 1; }
:root[data-theme="light"] .rocket-scene .rocket-art { filter: none; }
:root[data-theme="light"] .rocket-scene .orbit-ring { z-index: 1; }

/* Terminal: dunkel, mit farbigem Schein */
:root[data-theme="light"] .terminal { background: #0b1022; box-shadow: 0 28px 70px #4b34b84d, 0 0 0 1px #a492ff44; }

/* ---------- Band mit Einstiegspreis ---------- */
:root[data-theme="light"] .support-price-band { background: linear-gradient(105deg, #4b34b8, #006a85 62%, #0e6e4c); border-color: transparent; }
:root[data-theme="light"] .support-price-band p, :root[data-theme="light"] .support-price-band strong { color: #ffffff; }

/* ---------- Abschnitte: getönte Flächen im Wechsel ---------- */
:root[data-theme="light"] .section-lined { border-top-color: var(--line-strong); }
:root[data-theme="light"] #support { background-color: #dff2f8; }
:root[data-theme="light"] #business { background-color: #ece6ff; }
:root[data-theme="light"] #plattform { background-color: #dde9fa; }
:root[data-theme="light"] #ki { background-color: #ebe7fd; }
:root[data-theme="light"] #sicherheit { background-color: #dcf2ec; }
:root[data-theme="light"] #backup { background-color: #e6ebfb; }
:root[data-theme="light"] #vergleich { background-color: #efe9ff; }
:root[data-theme="light"] #wechseln { background-color: #dcf1f6; }
:root[data-theme="light"] #preise { background-color: #e3defc; background-image: radial-gradient(ellipse 60% 60% at 50% 55%, rgba(112, 84, 255, .38), transparent 70%), radial-gradient(ellipse 40% 50% at 8% 20%, rgba(0, 176, 208, .3), transparent 70%), radial-gradient(ellipse 40% 50% at 95% 90%, rgba(40, 205, 150, .3), transparent 70%); }
:root[data-theme="light"] #ablauf { background-color: #ece8fd; }
:root[data-theme="light"] #faq { background-color: #e0f1f4; }
:root[data-theme="light"] :is(#sicherheit, #preise, #vergleich) { border-color: var(--line-strong); }

/* ---------- Karten: farbiger Kopfstreifen, getönter Schatten, Icon-Plakette ---------- */
:root[data-theme="light"] .glass { border-color: #4b34b840; background-color: #ffffff; box-shadow: inset 0 3px 0 var(--accent), 0 18px 42px #4b34b824, 0 2px 6px #0e13300f; }
:root[data-theme="light"] .glass:not(.table-scroll):hover { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent), 0 24px 54px #4b34b838, 0 2px 6px #0e13300f; }
:root[data-theme="light"] .glass.table-scroll { box-shadow: 0 18px 42px #4b34b824; }
:root[data-theme="light"] :is(.business-grid, .bento-grid) > :nth-child(3n+2), :root[data-theme="light"] .backup-route > :nth-child(3) { --accent: #006a85; --accent-tint: #0096b424; }
:root[data-theme="light"] :is(.business-grid, .bento-grid) > :nth-child(3n), :root[data-theme="light"] .backup-route > :nth-child(5) { --accent: #0e6e4c; --accent-tint: #14906a24; }
:root[data-theme="light"] .pricing-grid > :nth-child(1) { --accent: #006a85; --accent-tint: #0096b424; }
:root[data-theme="light"] .pricing-grid > :nth-child(3) { --accent: #0e6e4c; --accent-tint: #14906a24; }
:root[data-theme="light"] .contact-station, :root[data-theme="light"] .shield-display { --accent: #4b34b8; }
:root[data-theme="light"] .console-preview, :root[data-theme="light"] .bento-engine { --accent: #006a85; }
:root[data-theme="light"] .stats-card { --accent: #0e6e4c; }
:root[data-theme="light"] :is(.feature-card, .bento-card, .backup-node) > .icon, :root[data-theme="light"] .bento-access .icon { width: 46px; height: 46px; padding: 11px; border-radius: 14px; color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-tint); }
:root[data-theme="light"] .feature-card > .icon { margin-bottom: 22px; }
:root[data-theme="light"] .eyebrow { color: var(--cyan); font-weight: 600; }
:root[data-theme="light"] .price-card .price { color: var(--accent); }
:root[data-theme="light"] .price-card .price > span, :root[data-theme="light"] .price small { color: var(--muted); }
:root[data-theme="light"] .price-card .eyebrow { color: var(--accent); }
:root[data-theme="light"] .recommended { --accent: #5b3df0; border-color: #5b3df0; box-shadow: inset 0 3px 0 #5b3df0, 0 26px 64px #5b3df052, 0 2px 6px #0e13300f; }
:root[data-theme="light"] .plan-features .icon, :root[data-theme="light"] td .icon { color: var(--accent, #0e6e4c); }
:root[data-theme="light"] .plan-features .icon { color: var(--accent); }
:root[data-theme="light"] .contact-station, :root[data-theme="light"] .price-card, :root[data-theme="light"] .stats-card { background-image: linear-gradient(180deg, var(--accent-tint), transparent 38%); }
:root[data-theme="light"] .node-number { color: #4b34b82e; }

/* Tabelle */
:root[data-theme="light"] thead th { background: #e4defc; }
:root[data-theme="light"] thead th:last-child { background: #d7edf5; color: #006a85; }
:root[data-theme="light"] td:last-child { background: #e1f3ee; color: var(--text); }
:root[data-theme="light"] th, :root[data-theme="light"] td { border-bottom-color: var(--line-strong); }

/* Details (Sicherheit, FAQ), Marquee, Linien */
:root[data-theme="light"] .security-layer, :root[data-theme="light"] .faq-list details { border-bottom-color: var(--line-strong); }
:root[data-theme="light"] .marquee { background: linear-gradient(105deg, #e1dafc, #d2ecf4 60%, #d2f0e6); border-block-color: var(--line-strong); }
:root[data-theme="light"] .marquee-track>span { color: #29324f; }
:root[data-theme="light"] .marquee b { color: #4b34b8; }
:root[data-theme="light"] .tag, :root[data-theme="light"] .code-label { border-color: var(--line-strong); }
:root[data-theme="light"] .code-label { background: #d7ede6; }
:root[data-theme="light"] .support-section { background-image: none; }
:root[data-theme="light"] .timeline-mini span { background: #ffffff; border-color: #4b34b8; }
:root[data-theme="light"] .scan-lines span { background: linear-gradient(to top, #5b3df033, #00a0c04d); }
:root[data-theme="light"] .signal-core { background: #ffffff; box-shadow: 0 0 40px var(--cyan-glow), 0 8px 24px #4b34b830; }
:root[data-theme="light"] .signal-ring { opacity: .45; }
:root[data-theme="light"] .core-chip { background: linear-gradient(135deg, #ffffff, #d7edf5); box-shadow: 0 0 60px var(--violet-glow); }
:root[data-theme="light"] .orbiter>span { background: #ffffff; box-shadow: 0 6px 16px #4b34b833; }
:root[data-theme="light"] .shield-art { filter: drop-shadow(0 10px 16px #4b34b833); }
:root[data-theme="light"] .console-preview { background: linear-gradient(145deg, #ffffff, #efeaff); }
:root[data-theme="light"] .error-orbit { text-shadow: 0 0 60px #5b3df066; color: #4b34b8; }
:root[data-theme="light"] .error-page { background: linear-gradient(180deg, transparent, #d3eaf4); }

/* Statuspunkte, Leuchten */
:root[data-theme="light"] .status-dot, :root[data-theme="light"] .mod-code b { box-shadow: 0 0 8px #0e6e4c99; }
:root[data-theme="light"] .orbit-ring-one::before, :root[data-theme="light"] .signal-point { box-shadow: 0 0 10px #004d6199; }
:root[data-theme="light"] .timeline-mini span:nth-child(3), :root[data-theme="light"] .era-line b, :root[data-theme="light"] .flight-rail li.is-now::after { box-shadow: 0 0 10px #004d6199; }
:root[data-theme="light"] .flight-rail li::after { background: var(--bg); }
:root[data-theme="light"] .launch-beam { background: linear-gradient(to top, transparent, #004d61 55%, #4b34b8); box-shadow: 0 0 20px #004d6188; }
:root[data-theme="light"] .launch-ring { border-color: #4b34b8; }
:root[data-theme="light"] .radar-sweep { background: conic-gradient(from 0deg, transparent 0 74%, rgba(0, 106, 133, .06) 84%, rgba(0, 106, 133, .26) 100%); }
:root[data-theme="light"] .code-label::after { background: linear-gradient(100deg, transparent 30%, rgba(0, 106, 133, .16) 50%, transparent 70%); }

/* Rakete (Zusatz-Raketen: Startrampe, 404): kräftige Farben behalten */
:root[data-theme="light"] .stop-violet { stop-color: #8b72ff; }
:root[data-theme="light"] .stop-indigo { stop-color: #5b45d6; }
:root[data-theme="light"] .stop-cyan { stop-color: #38c8e6; }
:root[data-theme="light"] .stop-white { stop-color: #b6f1fb; }
:root[data-theme="light"] .lost-rocket-art { filter: drop-shadow(0 16px 22px #4b34b840); }
:root[data-theme="light"] .rocket-clouds { fill: #5b3df0; opacity: .14; }
:root[data-theme="light"] .space-particles { stroke: #004d61; fill: #004d61; opacity: .6; }
:root[data-theme="light"] .rocket-scene .rocket-clouds { fill: var(--violet); opacity: .09; }
:root[data-theme="light"] .rocket-scene .space-particles { stroke: var(--cyan); fill: var(--cyan); opacity: .55; }
:root[data-theme="light"] .window-glint { opacity: .85; }

/* Schlussstart: dunkle Kontrastinsel mit Planetenhorizont */
:root[data-theme="light"] .final-section { background: radial-gradient(ellipse at 50% 100%, #7152da66, #00000000 62%), radial-gradient(ellipse 50% 60% at 15% 10%, #1b8fb633, #00000000 70%), linear-gradient(180deg, #0f1440, #070a13 70%); }
:root[data-theme="light"] .final-section p, :root[data-theme="light"] .final-section .eyebrow { color: var(--muted); }
:root[data-theme="light"] .final-section .eyebrow { color: var(--cyan); }
:root[data-theme="light"] .final-section h2 { color: var(--text); }
:root[data-theme="light"] .final-section .pad-rocket-art { filter: none; }
:root[data-theme="light"] .final-section .pad-smoke { background: radial-gradient(ellipse, rgba(164, 146, 255, .34), transparent 70%); }
:root[data-theme="light"] .final-section .launch-pad ~ *, :root[data-theme="light"] .final-section .countdown { color: var(--muted); }

/* KI-Abzeichen */
:root[data-theme="light"] .ki-badge:hover, :root[data-theme="light"] .ki-badge:focus-visible { box-shadow: 0 10px 26px var(--violet-glow); }
:root[data-theme="light"] .ki-badge img { box-shadow: 0 0 0 1px var(--line-strong); border-radius: 18px; }

/* Fokus bleibt gut sichtbar */
:root[data-theme="light"] :focus-visible { outline-color: #004d61; }
:root[data-theme="light"] :is(.terminal, .rocket-scene, .final-section) :focus-visible { outline-color: #69e1f5; }
:root[data-theme="light"] button:focus-visible, :root[data-theme="light"] .button:focus-visible { box-shadow: 0 0 0 4px #004d6140; }

/* Erzwungene Farben (Windows-Kontrastmodus) behalten Vorrang */
@media (forced-colors: active) {
  :root[data-theme="light"] .button:not(.button-quiet):not(.button-outline) { color: ButtonText; }
  :root[data-theme="light"] .gradient-text { color: var(--forced-text); }
}
}