/* =================================================================
   STARTSEITE IM HELLEN MODUS (09/2026)
   -----------------------------------------------------------------
   Die Startseite laedt global.css nicht — sie hat ihre eigene Welt
   aus drei <style>-Bloecken, output.css und flight.css. Deshalb
   bekommt sie hier ihre eigene Uebersetzungsschicht, nach demselben
   Rezept wie die App: Grund #f4f3f9, Karten weiss, Text #17161f,
   Lila bleibt Lila. JEDE Regel ist unter :root[data-theme="hell"]
   gescoped — im Dunklen aendert diese Datei exakt nichts.

   Bewusst dunkel BLEIBEN: die Laptop-Rahmen (sie zeigen die dunkle
   App wie ein Produktfoto) und Sams lila Kugeln.
   ================================================================= */

/* ─────────────── 1. Grund und Atmosphaere ─────────────── */
:root[data-theme="hell"] body { background-color: #f4f3f9; color: #17161f; }
:root[data-theme="hell"] .bg-grid-pattern {
    background-image: linear-gradient(to right, rgba(23, 22, 34, 0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(23, 22, 34, 0.05) 1px, transparent 1px);
}
/* (.bg-radial-gradient — die helle Fassung steht bei den Chaos-Regeln) */
:root[data-theme="hell"] .hero-glow-1 { opacity: 0.5; }
:root[data-theme="hell"] .hero-glow-2 { opacity: 0.45; }
:root[data-theme="hell"] .warp-tunnel { opacity: 0.5; }

/* ─────────────── 2. Uebersetzungsschicht (Tailwind-Klassen) ───────────────
   Ausnahme ueberall: was im Laptop-Rahmen steht, bleibt dunkel. */
:root[data-theme="hell"] .text-white:not(.laptop-frame *):not(.flip-front *) { color: #17161f; }
:root[data-theme="hell"] .text-gray-100:not(.laptop-frame *):not(.flip-front *),
:root[data-theme="hell"] .text-gray-200:not(.laptop-frame *):not(.flip-front *) { color: #2a2838; }
:root[data-theme="hell"] .text-gray-300:not(.laptop-frame *):not(.flip-front *) { color: #4a4560; }
:root[data-theme="hell"] .text-gray-400:not(.laptop-frame *):not(.flip-front *) { color: #5f5a70; }
:root[data-theme="hell"] .text-gray-500:not(.laptop-frame *):not(.flip-front *) { color: #6f6a80; }
:root[data-theme="hell"] .text-gray-600:not(.laptop-frame *):not(.flip-front *) { color: #9a95aa; }
:root[data-theme="hell"] .text-gray-700:not(.laptop-frame *):not(.flip-front *) { color: #b3aec2; }

:root[data-theme="hell"] .border-white\/5:not(.laptop-frame *):not(.flip-front *) { border-color: rgba(23, 22, 34, 0.08); }
:root[data-theme="hell"] .border-white\/10:not(.laptop-frame *):not(.flip-front *) { border-color: rgba(23, 22, 34, 0.12); }
:root[data-theme="hell"] .border-white\/20:not(.laptop-frame *):not(.flip-front *) { border-color: rgba(23, 22, 34, 0.18); }
:root[data-theme="hell"] .bg-white\/5:not(.laptop-frame *):not(.flip-front *) { background-color: rgba(23, 22, 34, 0.04); }
:root[data-theme="hell"] .bg-white\/10:not(.laptop-frame *):not(.flip-front *) { background-color: rgba(23, 22, 34, 0.07); }
:root[data-theme="hell"] .bg-white\/20:not(.laptop-frame *):not(.flip-front *) { background-color: rgba(23, 22, 34, 0.1); }

/* Die festen dunklen Flaechen der Sektionen */
:root[data-theme="hell"] .bg-\[\#050507\]:not(.laptop-frame *) { background-color: #f4f3f9; }
:root[data-theme="hell"] .bg-\[\#050507\]\/40:not(.laptop-frame *) { background-color: rgba(244, 243, 249, 0.55); }
:root[data-theme="hell"] .bg-\[\#050507\]\/80:not(.laptop-frame *) { background-color: rgba(244, 243, 249, 0.85); }
:root[data-theme="hell"] .bg-\[\#050507\]\/95:not(.laptop-frame *) { background-color: rgba(244, 243, 249, 0.95); }
:root[data-theme="hell"] .bg-\[\#0F0F13\]:not(.laptop-frame):not(#unboxing-dashboard):not(.laptop-frame *) { background-color: #ffffff; }
:root[data-theme="hell"] .bg-\[\#121217\] { background-color: #ffffff; }
:root[data-theme="hell"] .bg-\[\#121217\]\/80 { background-color: rgba(255, 255, 255, 0.85); }
:root[data-theme="hell"] .bg-\[\#1c1c21\]:not(.laptop-frame *):not(.flip-front *):not(.laptop-header) { background-color: #edecf4; }
/* (via-/to-[#050507] kommen nur im Kino-Abschnitt vor und bleiben dunkel) */

/* ─────────────── 3. Hero, Wortmarken, Text-Verlaeufe ─────────────── */
:root[data-theme="hell"] .nx-grad { background: linear-gradient(90deg, #6d28d9, #7c3aed, #17161f); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="hell"] .nx-sub { color: #5f5a70; }
:root[data-theme="hell"] .nx-sub b { color: #17161f; }

/* ─────────────── 4. Navigation und Fusszeile ─────────────── */
:root[data-theme="hell"] .header { border-color: rgba(23, 22, 34, 0.08); }
:root[data-theme="hell"] .header.scrolled { background: rgba(244, 243, 249, 0.92); border-bottom: 1px solid rgba(23, 22, 34, 0.08); }

/* ─────────────── 5. Karten und Glasflaechen ─────────────── */
:root[data-theme="hell"] .glass-panel {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(23, 22, 34, 0.1);
    box-shadow: 0 4px 30px rgba(23, 22, 34, 0.08);
}
:root[data-theme="hell"] #ui-unboxing .glass-panel {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(250, 249, 255, 0.97)) !important;
    border: 1px solid rgba(124, 58, 237, 0.3) !important;
    box-shadow: 0 20px 40px rgba(23, 22, 34, 0.12), 0 0 25px rgba(124, 58, 237, 0.1) !important;
}
:root[data-theme="hell"] #ui-unboxing .glass-panel:hover {
    border-color: rgba(124, 58, 237, 0.55) !important;
    box-shadow: 0 25px 50px rgba(23, 22, 34, 0.16), 0 0 45px rgba(124, 58, 237, 0.18) !important;
}
:root[data-theme="hell"] .bento-card { background: rgba(255, 255, 255, 0.75); border-color: rgba(23, 22, 34, 0.1); }
:root[data-theme="hell"] .bento-card:hover { border-color: rgba(124, 58, 237, 0.35); }
:root[data-theme="hell"] .bento-item { background: linear-gradient(145deg, #ffffff 0%, #faf9ff 100%); border-color: rgba(23, 22, 34, 0.08); }
:root[data-theme="hell"] .bento-item:hover {
    border-color: rgba(124, 58, 237, 0.35);
    box-shadow: 0 20px 40px -10px rgba(23, 22, 34, 0.14), inset 0 0 0 1px rgba(124, 58, 237, 0.08);
}
:root[data-theme="hell"] .premium-glass-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(250, 249, 255, 0.96) 100%);
    border: 1px solid rgba(23, 22, 34, 0.08);
    border-top: 1px solid rgba(124, 58, 237, 0.22);
    border-left: 1px solid rgba(23, 22, 34, 0.06);
    box-shadow: 0 30px 60px -15px rgba(23, 22, 34, 0.14);
}
:root[data-theme="hell"] .premium-glass-card:hover { box-shadow: 0 40px 80px -20px rgba(23, 22, 34, 0.18), 0 0 40px rgba(124, 58, 237, 0.1); }
:root[data-theme="hell"] .glass-bubble {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 249, 255, 0.95) 100%);
    border: 1px solid rgba(124, 58, 237, 0.18);
    box-shadow: 0 20px 40px rgba(23, 22, 34, 0.1), inset 0 1px 0 rgba(124, 58, 237, 0.12);
}
:root[data-theme="hell"] .glass-bubble:hover {
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 20px 40px rgba(23, 22, 34, 0.12), 0 0 30px rgba(124, 58, 237, 0.12), inset 0 1px 0 rgba(124, 58, 237, 0.25);
}
:root[data-theme="hell"] .timeline-card { background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 249, 255, 0.95) 100%); border-color: rgba(23, 22, 34, 0.08); }
:root[data-theme="hell"] .timeline-card:hover {
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 20px 40px -10px rgba(23, 22, 34, 0.14), inset 0 0 20px rgba(124, 58, 237, 0.04);
}
:root[data-theme="hell"] .flip-back { background-color: #faf9ff; }
:root[data-theme="hell"] .flight-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(250, 249, 255, 0.97) 100%);
    border: 1px solid rgba(124, 58, 237, 0.35);
    border-top: 1px solid rgba(124, 58, 237, 0.2);
    box-shadow: 0 0 80px rgba(124, 58, 237, 0.18), inset 0 0 30px rgba(124, 58, 237, 0.05);
}
:root[data-theme="hell"] .floating-badge {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(23, 22, 34, 0.1);
    color: #17161f;
    box-shadow: 0 20px 40px rgba(23, 22, 34, 0.14);
}

/* ─────────────── 6. Zeitachsen, Pfade, Marker ─────────────── */
:root[data-theme="hell"] .timeline-line-bg,
:root[data-theme="hell"] .timeline-track { background: rgba(23, 22, 34, 0.08); }
:root[data-theme="hell"] .timeline-dot,
:root[data-theme="hell"] .timeline-node,
:root[data-theme="hell"] .workflow-dot { background: #f4f3f9; }
:root[data-theme="hell"] .timeline-dot { border-color: rgba(23, 22, 34, 0.25); }
:root[data-theme="hell"] .timeline-node { border-color: rgba(23, 22, 34, 0.25); }
:root[data-theme="hell"] .timeline-dot.active,
:root[data-theme="hell"] .timeline-node.active { border-color: #7c3aed; background: rgba(124, 58, 237, 0.15); }
:root[data-theme="hell"] .phase-header { background: rgba(244, 243, 249, 0.85); border-bottom-color: rgba(23, 22, 34, 0.08); }
:root[data-theme="hell"] .phase-marker span { background: #f4f3f9; border-color: rgba(23, 22, 34, 0.12); }

/* ─────────────── 7. Tabs, Pillen, Eingaben ─────────────── */
:root[data-theme="hell"] .tab-button.active { background-color: #17161f; color: #ffffff; box-shadow: 0 0 20px rgba(23, 22, 34, 0.25); }
:root[data-theme="hell"] .tab-button:not(.active):hover { background-color: rgba(23, 22, 34, 0.06); }
:root[data-theme="hell"] .sub-nav-btn { background: rgba(23, 22, 34, 0.04); border-color: rgba(23, 22, 34, 0.12); color: #5f5a70; }
:root[data-theme="hell"] .sub-nav-btn:hover { background: rgba(23, 22, 34, 0.08); color: #17161f; }
:root[data-theme="hell"] .input-modern { background: rgba(23, 22, 34, 0.03); border-color: rgba(23, 22, 34, 0.14); color: #17161f; }
:root[data-theme="hell"] .input-modern:focus { background: #ffffff; border-color: #7c3aed; }
:root[data-theme="hell"] .input-modern::placeholder { color: #8a84a0; }
:root[data-theme="hell"] .step-label { color: #6d28d9; }

/* ─────────────── 8. Zaehler-Kasten und Fortschritt ─────────────── */
:root[data-theme="hell"] .burn-container {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(250, 249, 255, 0.98));
    border: 1px solid rgba(124, 58, 237, 0.3); border-top: 1px solid rgba(124, 58, 237, 0.5);
    box-shadow: 0 0 40px -10px rgba(124, 58, 237, 0.2), inset 0 0 20px rgba(124, 58, 237, 0.03);
}
:root[data-theme="hell"] .progress-track {
    background: rgba(23, 22, 34, 0.08);
    border-color: rgba(23, 22, 34, 0.1);
    box-shadow: inset 0 2px 5px rgba(23, 22, 34, 0.12);
}

/* ─────────────── 9. Geldstrom-Animation ─────────────── */
:root[data-theme="hell"] .payment-column { color: #059669; text-shadow: 0 0 12px rgba(5, 150, 105, 0.25); }

/* ─────────────── 10. Verknuepfungs-Graph (nx2) und Lern-Zeile ─────────────── */
:root[data-theme="hell"] .nx2-panel {
    background: linear-gradient(155deg, #faf9ff 0%, #f1eefb 100%);
    border-color: rgba(124, 58, 237, 0.35);
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.06) inset, 0 40px 90px -30px rgba(124, 58, 237, 0.22);
}
:root[data-theme="hell"] .nx2-src { background: rgba(23, 22, 34, 0.03); border-color: rgba(23, 22, 34, 0.09); }
:root[data-theme="hell"] .nx2-src p { color: #17161f; }
:root[data-theme="hell"] .nx2-src span { color: #6f6a80; }
:root[data-theme="hell"] .nx2-src-icon { color: #6d28d9; }
:root[data-theme="hell"] .nx2-out { background: rgba(124, 58, 237, 0.06); border-color: rgba(124, 58, 237, 0.22); }
:root[data-theme="hell"] .nx2-out-head p { color: #17161f; }
:root[data-theme="hell"] .nx2-out-icon { color: #6d28d9; }
:root[data-theme="hell"] .nx2-out span.sub { color: #6f6a80; }
:root[data-theme="hell"] .nx2-hubsub b { color: #6d28d9; }
:root[data-theme="hell"] .nx2-foot b { color: #17161f; }
:root[data-theme="hell"] .nx2-mini { background: rgba(23, 22, 34, 0.03); }
:root[data-theme="hell"] .nxm-word { background: rgba(23, 22, 34, 0.25); }
:root[data-theme="hell"] .nxm-strip { background: rgba(23, 22, 34, 0.03); }
:root[data-theme="hell"] .nx-why { background: rgba(124, 58, 237, 0.05); border-color: rgba(124, 58, 237, 0.18); }
:root[data-theme="hell"] .nx-why p { color: #5f5a70; }
:root[data-theme="hell"] .nx-why p b { color: #17161f; }
:root[data-theme="hell"] .nx-chip.tm { color: #6d28d9; }
:root[data-theme="hell"] .nx2-coltitle { color: #8a84a0; }
:root[data-theme="hell"] .nx2-group { color: #9a95aa; }

/* ─────────────── 11. Sam auf der Startseite ─────────────── */
/* Die lila Kugeln bleiben — nur die Sprechblasen werden zu hellen Karten. */
:root[data-theme="hell"] .showcase-bubble {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(124, 58, 237, 0.35);
    color: #17161f;
    box-shadow: 0 15px 35px rgba(23, 22, 34, 0.14), 0 0 30px rgba(124, 58, 237, 0.12);
}
:root[data-theme="hell"] .showcase-bubble::after { border-color: #ffffff transparent transparent transparent; }
:root[data-theme="hell"] .nova-pub-bubble {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(124, 58, 237, 0.3);
    color: #17161f;
    box-shadow: 0 15px 35px rgba(23, 22, 34, 0.14);
}
:root[data-theme="hell"] .nova-pub-bubble a { background: rgba(124, 58, 237, 0.1); color: #6d28d9; border-color: rgba(124, 58, 237, 0.3); }
:root[data-theme="hell"] .nova-pub-bubble a:hover { background: #7c3aed; color: #ffffff; border-color: #7c3aed; }

/* ─────────────── 12. Nachzuegler aus der Kontrastmessung ─────────────── */
/* Die kursiven Serif-Zeilen verlaufen im Original nach Weiss — auf hellem
   Grund loest sich das Wort auf. Im Hellen laufen sie ins satte Lila. */
:root[data-theme="hell"] .text-transparent.bg-clip-text.from-\[\#A78BFA\] {
    background-image: linear-gradient(90deg, #6d28d9, #8b5cf6, #4c2fa8) !important;
}
/* Sams oeffentliche Blase: die Innentexte haengen an eigenen Farben */
:root[data-theme="hell"] .nova-pub-bubble p { color: #3a3550; }
:root[data-theme="hell"] .nova-pub-close:hover { color: #17161f; }
/* Leuchtgruen und Signalrot vertragen kein Hell — eine Stufe satter */
:root[data-theme="hell"] .text-green-400 { color: #059669; }
:root[data-theme="hell"] .nx-chip.you { color: #dc2626; }
/* bg-bg-dark ist das kompilierte #050507 aus der Tailwind-Config (u.a. die
   Preis-Sektion). Der eine bg-black-Filmstreifen mit Set-Fotos bleibt
   absichtlich dunkel — wie die Laptop-Rahmen ein bewusstes Produktfenster. */
:root[data-theme="hell"] .bg-bg-dark { background-color: #f4f3f9; }

/* ═══ Feinschliff nach Leons Screenshot-Runde (02.09.) ═══ */

/* 13. ALLE Verlaufstexte einheitlich: im Hellen laufen sie ins satte Lila
   statt ins Weiss — auch die, die ihren Verlauf als Inline-Style tragen. */
:root[data-theme="hell"] .text-transparent.bg-clip-text {
    background-image: linear-gradient(90deg, #6d28d9, #8b5cf6, #4c2fa8) !important;
}
:root[data-theme="hell"] span[style*="background-clip: text"] {
    background: linear-gradient(90deg, #6d28d9, #8b5cf6, #4c2fa8) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    text-shadow: none !important;
}

/* 14. Die nachgebauten UI-Fenster (Stripe-Zahlung, Transfer) werden helle
   Karten — dann stimmen auch alle uebersetzten Texte und Balken darin. */
:root[data-theme="hell"] .bg-\[\#16161E\]\/80 { background-color: rgba(255, 255, 255, 0.88); }
:root[data-theme="hell"] .bg-\[\#18181b\]\/90 { background-color: rgba(255, 255, 255, 0.92); }

/* 15. Der Filmstreifen mit den Set-Fotos: Leon will ihn im Hellen hell. */
:root[data-theme="hell"] .bg-black { background-color: #f4f3f9; }

/* 16. Die Workflow-Foto-Karten sind kleine Kinos: schwarzer Grund, damit
   Foto-Abdunklung und weisse Titel wie im Dunklen wirken (Inhalte sind
   von der Uebersetzung ausgenommen). */
:root[data-theme="hell"] .flip-front { background-color: #050507; }

/* 17. Der Chaos-Abschnitt (Collage → Logo-Zoom) wird hell (Leons Wunsch
   vom 02.09.): helle Vignette ueber der Collage, und die grosse
   tidalmuse-Wortmarke laeuft dunkel ins Lila statt weiss. */
:root[data-theme="hell"] .bg-radial-gradient { background: radial-gradient(circle at center, transparent 0%, #f4f3f9 70%); }
:root[data-theme="hell"] .brand-wordmark-large {
    background: linear-gradient(90deg, #17161f 30%, #7c3aed 100%);
    -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(0 0 30px rgba(124, 58, 237, 0.2));
}

/* 18. Der Demo-Laptop wurde unten per Maske in den (frueher dunklen)
   Seitengrund ausgeblendet — im Hellen wirkte das wie ein Schleier.
   Ohne Maske steht das Produktfenster klar da. */
:root[data-theme="hell"] .rounded-t-xl[style*="mask-image"] {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* 19. Die fliessenden Zahlungs-Betraege etwas kraeftiger, sonst verblassen
   sie auf hellem Grund (Original-Tiefenstaffelung bleibt erhalten). */
:root[data-theme="hell"] .payment-column.col-1 { opacity: 0.55; }
:root[data-theme="hell"] .payment-column.col-2 { opacity: 0.9; }
:root[data-theme="hell"] .payment-column.col-3 { opacity: 0.65; }
:root[data-theme="hell"] .payment-column.col-4 { opacity: 0.85; }

/* ═══ Hell/Dunkel-Wahl im Kopfbereich: Segment-Pille ═══
   Sonne und Mond nebeneinander, ein gleitender Chip markiert den
   aktiven Modus — ein Klick wechselt, der Chip gleitet mit Schwung. */
.thema-wahl {
    position: relative; display: inline-flex; align-items: center; gap: 2px;
    padding: 3px; border-radius: 999px; flex-shrink: 0; cursor: pointer;
    border: 1px solid rgba(167, 139, 250, 0.28);
    background: rgba(167, 139, 250, 0.12);
    transition: border-color 0.25s ease, background 0.25s ease;
}
.thema-wahl:hover { border-color: rgba(167, 139, 250, 0.5); }
.thema-seg {
    position: relative; z-index: 1; width: 32px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
}
.thema-seg .material-icons { font-size: 16px; color: #6f6a80; transition: color 0.3s ease; }
/* dunkel aktiv = rechtes Segment: Mond leuchtet, Sonne gedimmt */
.thema-seg:last-child .material-icons { color: #e7defb; }
.thema-chip {
    position: absolute; top: 3px; left: 3px; width: 32px; height: 26px;
    border-radius: 999px; background: #342d52;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateX(34px);
    transition: transform 0.4s cubic-bezier(0.34, 1.45, 0.5, 1), background 0.3s ease;
}
.thema-wahl.ist-hell .thema-chip { transform: translateX(0); background: #ffffff; box-shadow: 0 1px 5px rgba(76, 47, 168, 0.35), 0 0 0 1px rgba(124, 58, 237, 0.2); }
.thema-wahl.ist-hell .thema-seg:first-child .material-icons { color: #6d28d9; }
.thema-wahl.ist-hell .thema-seg:last-child .material-icons { color: #9a94ac; }
:root[data-theme="hell"] .thema-wahl { border-color: rgba(124, 58, 237, 0.28); background: rgba(124, 58, 237, 0.09); }
:root[data-theme="hell"] .thema-wahl:hover { border-color: rgba(124, 58, 237, 0.45); }
:root[data-theme="hell"] .thema-seg .material-icons { color: #9a94ac; }

/* ═══ Logo-Bogen: das Laecheln unterm Kreis folgt dem Thema ═══
   (vorher hart weiss — im Hellen war es unsichtbar) */
.logo-bogen { stroke: #ffffff; transition: stroke 0.3s ease; }
:root[data-theme="hell"] .logo-bogen { stroke: #17161f; }

/* Der Kreis-Uebergang beim Wechsel — gleiche Animation wie in der App. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 0; }
::view-transition-new(root) { z-index: 1; animation: themaKreis 0.55s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; }
@keyframes themaKreis {
    from { clip-path: circle(0px at var(--thema-x, 95%) var(--thema-y, 40px)); }
    to   { clip-path: circle(160vmax at var(--thema-x, 95%) var(--thema-y, 40px)); }
}
html.thema-gleitet, html.thema-gleitet body, html.thema-gleitet body * {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease !important;
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-new(root) { animation: none; }
    html.thema-gleitet, html.thema-gleitet body, html.thema-gleitet body * { transition: none !important; }
}



/* Der grosse Show-Sam und der kleine Ecken-Sam laecheln jetzt auch */
.showcase-nova-mund { position: absolute; top: 55%; left: 50%; width: 32px; height: 18px; transform: translateX(-50%); border-bottom: 5px solid rgba(255, 255, 255, 0.92); border-radius: 0 0 26px 26px; z-index: 5; }

/* Der Kreis-Uebergang beim Wechsel — gleiche Animation wie in der App. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 0; }
::view-transition-new(root) { z-index: 1; animation: themaKreis 0.55s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; }
@keyframes themaKreis {
    from { clip-path: circle(0px at var(--thema-x, 95%) var(--thema-y, 40px)); }
    to   { clip-path: circle(160vmax at var(--thema-x, 95%) var(--thema-y, 40px)); }
}
html.thema-gleitet, html.thema-gleitet body, html.thema-gleitet body * {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease !important;
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-new(root) { animation: none; }
    html.thema-gleitet, html.thema-gleitet body, html.thema-gleitet body * { transition: none !important; }
}

/* ═══ Hero-Konzept „Der Hero dreht" (03.09.) — gilt in BEIDEN Modi ═══
   Ein echtes REC-Badge mit laufendem 24fps-Timecode, die Headline
   schneidet sich beim Laden rein wie Filmcuts (keine Fades — harte
   Schnitte mit Mini-Nachfedern), und die Hero-Lichter folgen der Maus. */
.hero-rec {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 16px; border-radius: 999px; margin-bottom: 26px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    font-size: 11px; font-weight: 800; letter-spacing: 0.16em; color: #9ca3af;
}
.hero-rec-punkt {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
    animation: recPuls 1.6s ease-in-out infinite;
}
@keyframes recPuls { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.hero-rec-tc {
    font-family: 'SF Mono', ui-monospace, Menlo, monospace;
    font-size: 11.5px; letter-spacing: 0.08em; color: #e5e7eb;
    font-variant-numeric: tabular-nums;
}
:root[data-theme="hell"] .hero-rec { border-color: rgba(23, 22, 34, 0.12); background: rgba(255, 255, 255, 0.6); color: #6f6a80; }
:root[data-theme="hell"] .hero-rec-tc { color: #17161f; }

/* Weiches Erscheinen beim Laden und beim Take-Wechsel — sichtbar
   gestaltet, nicht wie ein Umspringen. */
.hero-schnitt { opacity: 0; animation: heroRein 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.hero-raus { animation: heroRaus 0.23s ease-in forwards; }
.hero-rein { animation: heroRein 0.38s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes heroRaus { to { opacity: 0; transform: translateY(-16px); } }
@keyframes heroRein { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .hero-schnitt { animation: none; opacity: 1; }
    .hero-rec-punkt { animation: none; }
}


/* ═══ Die Tide (03.09.): nahtlose SVG-Wellen am unteren Hero-Rand ═══
   Drei Ebenen, jede ein mathematisch nahtloser Wellenzug (Ende =
   Anfang samt Steigung), der endlos nach links zieht. Die vorderste
   Ebene traegt die Farbe der NAECHSTEN Sektion — ihre Oberkante ist
   die "lila Linie", an der das Produktfenster abschliesst. */
.tide { position: absolute; bottom: -2px; left: 0; width: 100%; height: 150px; z-index: 30; pointer-events: none; overflow: hidden; }
@media (min-width: 768px) { .tide { height: 190px; } }
.tide-schicht { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; will-change: transform; }
/* Jede Ebene: seitlicher Zug (svg) + eigenes vertikales Schwappen (hub) —
   erst die versetzten Rhythmen machen aus dem Foerderband eine Duenung. */
.tide-hub  { position: absolute; inset: 0; will-change: transform; }
.hub-a     { animation: tideSchwappt 9s  ease-in-out -3s infinite alternate; }
.hub-b     { animation: tideSchwappt 7s  ease-in-out -1.5s infinite alternate; }
.hub-c     { animation: tideSchwappt 8s  ease-in-out infinite alternate; }
@keyframes tideSchwappt { from { transform: translateY(0); } to { transform: translateY(9px); } }
.tide-a    { animation: tideZieht 34s linear infinite; }
.tide-b    { animation: tideZieht 24s linear infinite reverse; }
.tide-deck { animation: tideZieht 17s linear infinite; }
@keyframes tideZieht { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tide-a    { fill: rgba(167, 139, 250, 0.10); }
.tide-b    { fill: rgba(139, 92, 246, 0.16); }
.tide-deck { fill: #050507; }
:root[data-theme="hell"] .tide-a    { fill: rgba(167, 139, 250, 0.30); }
:root[data-theme="hell"] .tide-b    { fill: rgba(139, 92, 246, 0.38); }
:root[data-theme="hell"] .tide-deck { fill: #f4f3f9; }
@media (prefers-reduced-motion: reduce) { .tide-schicht, .tide-hub { animation: none; } }

/* ═══ Hero-Feinschliff (03.09.): Buehne, Play-Knopf, Demo-Label ═══ */
/* Statt einer Licht-Wolke dahinter leuchtet die Serif-Zeile selbst:
   ein naher und ein weiter Schein direkt an den Buchstaben. */
#hero-zeile-2 {
    filter: drop-shadow(0 0 18px rgba(167, 139, 250, 0.55)) drop-shadow(0 0 55px rgba(139, 92, 246, 0.35));
}
:root[data-theme="hell"] #hero-zeile-2 {
    filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.35)) drop-shadow(0 0 44px rgba(124, 58, 237, 0.22));
}

/* Der Play-Knopf im Demo-Fenster */
span.demo-play.material-icons {
    width: 44px; height: 44px; margin-right: 14px; flex-shrink: 0;
    border-radius: 50%; background: #a855f7; color: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px;
    box-shadow: 0 0 22px rgba(168, 85, 247, 0.7);
}
@media (min-width: 768px) { span.demo-play.material-icons { width: 54px; height: 54px; font-size: 34px; margin-right: 18px; } }

/* "Ohne Anmeldung": die Tailwind-Klasse text-[#e9d5ff] existiert im
   eingefrorenen Build nicht — ohne eigene Regel erbt die Zeile die
   Seitenfarbe und war im Hellen dunkel auf dunklem Knopf. */
.demo-btn-glow .tracking-widest { color: #e9d5ff; }


/* ═══ Feiner Staub im Hero (03.09.): zwei Partikel-Ebenen ═══
   Winzige Punkte wie Staub im Scheinwerferlicht, die langsam
   aufsteigen. Jede Ebene ist eine nahtlose Kachel (die Animation
   wandert exakt eine Kachelhoehe) und lebt im Glow-Container —
   faehrt also mit dem Maus-Parallax mit. */
.partikel {
    position: absolute; left: 0; right: 0; top: -420px; bottom: 0;
    background-repeat: repeat; pointer-events: none; will-change: transform;
}
.partikel-fein {
    background-image:
        radial-gradient(3.5px 3.5px at 22px 38px,  rgba(196, 181, 253, 0.85), transparent 60%),
        radial-gradient(2.5px 2.5px at 128px 178px, rgba(255, 255, 255, 0.60), transparent 60%),
        radial-gradient(3.5px 3.5px at 246px 84px,  rgba(167, 139, 250, 0.80), transparent 60%),
        radial-gradient(3px 3px     at 302px 300px, rgba(196, 181, 253, 0.70), transparent 60%),
        radial-gradient(2.5px 2.5px at 68px 262px,  rgba(255, 255, 255, 0.50), transparent 60%),
        radial-gradient(3.5px 3.5px at 186px 366px, rgba(167, 139, 250, 0.75), transparent 60%),
        radial-gradient(3px 3px     at 330px 150px, rgba(196, 181, 253, 0.65), transparent 60%);
    background-size: 340px 420px;
    animation: partikelSteigen 52s linear infinite;
}
.partikel-staub {
    background-image:
        radial-gradient(2px 2px at 44px 120px,  rgba(255, 255, 255, 0.45), transparent 60%),
        radial-gradient(2px 2px at 210px 40px,  rgba(196, 181, 253, 0.55), transparent 60%),
        radial-gradient(2px 2px at 300px 210px, rgba(255, 255, 255, 0.40), transparent 60%),
        radial-gradient(2px 2px at 96px 330px,  rgba(196, 181, 253, 0.50), transparent 60%),
        radial-gradient(2px 2px at 260px 388px, rgba(255, 255, 255, 0.42), transparent 60%),
        radial-gradient(2px 2px at 160px 250px, rgba(196, 181, 253, 0.45), transparent 60%);
    background-size: 340px 420px;
    animation: partikelSteigen 84s linear infinite;
}
@keyframes partikelSteigen { from { transform: translateY(0); } to { transform: translateY(-420px); } }

/* Im Hellen werden die Punkte zu sattem Lila, sonst verschwinden sie */
:root[data-theme="hell"] .partikel-fein {
    background-image:
        radial-gradient(3.5px 3.5px at 22px 38px,  rgba(124, 58, 237, 0.65), transparent 60%),
        radial-gradient(2.5px 2.5px at 128px 178px, rgba(139, 92, 246, 0.55), transparent 60%),
        radial-gradient(3.5px 3.5px at 246px 84px,  rgba(109, 40, 217, 0.60), transparent 60%),
        radial-gradient(3px 3px     at 302px 300px, rgba(139, 92, 246, 0.58), transparent 60%),
        radial-gradient(2.5px 2.5px at 68px 262px,  rgba(124, 58, 237, 0.48), transparent 60%),
        radial-gradient(3.5px 3.5px at 186px 366px, rgba(109, 40, 217, 0.58), transparent 60%),
        radial-gradient(3px 3px     at 330px 150px, rgba(124, 58, 237, 0.52), transparent 60%);
}
:root[data-theme="hell"] .partikel-staub {
    background-image:
        radial-gradient(2px 2px at 44px 120px,  rgba(124, 58, 237, 0.42), transparent 60%),
        radial-gradient(2px 2px at 210px 40px,  rgba(139, 92, 246, 0.48), transparent 60%),
        radial-gradient(2px 2px at 300px 210px, rgba(124, 58, 237, 0.38), transparent 60%),
        radial-gradient(2px 2px at 96px 330px,  rgba(139, 92, 246, 0.44), transparent 60%),
        radial-gradient(2px 2px at 260px 388px, rgba(124, 58, 237, 0.40), transparent 60%),
        radial-gradient(2px 2px at 160px 250px, rgba(139, 92, 246, 0.42), transparent 60%);
}
@media (prefers-reduced-motion: reduce) { .partikel { animation: none; } }


/* Produktfenster je Oberflaeche: jedes Motiv liegt zweimal vor
   (screens/*_dunkel.webp und *_hell.webp), die Oberflaeche blendet
   das passende ein — kein JS, kein Nachladen beim Umschalten. */
.bild-hell { display: none; }
:root[data-theme="hell"] .bild-hell { display: block; }
:root[data-theme="hell"] .bild-dunkel { display: none; }
/* Im Hellen liegt ein heller Screenshot im Demo-Laptop: der dunkle
   Schleier wuerde ihn vergrauen, deshalb ein heller Fokus-Schleier. */
:root[data-theme="hell"] .laptop-content { background-color: #f4f3f9 !important; }
:root[data-theme="hell"] .laptop-content > .bg-\[\#050507\]\/40 { background-color: rgba(244, 243, 249, 0.3) !important; }
:root[data-theme="hell"] .group:hover .laptop-content > .bg-\[\#050507\]\/40 { background-color: rgba(244, 243, 249, 0.72) !important; }
/* Die Demo-Kapsel hat im eingefrorenen Tailwind-Build keine eigene
   Fuellung (bg-[#050507]/60 fehlt dort) — im Dunkeln traegt der dunkle
   Screenshot dahinter, im Hellen braucht sie eine echte dunkle Flaeche. */
:root[data-theme="hell"] .laptop-content .demo-btn-glow { background-color: rgba(23, 22, 34, 0.86) !important; border-color: rgba(167, 139, 250, 0.7) !important; }

/* Studio-Laptop: Textband je Station (Nutzen-Ueberschrift + Solo/Agentur).
   Sitzt unter dem Header (h-28 = 7rem), der Laptop darunter (unboxing.js). */
.phase-band { top: calc(7rem + 1.2vh); }
.phase-text { will-change: transform, opacity; }
.phase-titel { font-size: clamp(1.6rem, 3.3vw, 2.5rem); line-height: 1.1; color: #ffffff; text-shadow: 0 8px 30px rgba(0,0,0,.35); }
.phase-sub { font-size: clamp(.95rem, 1.25vw, 1.12rem); color: #cfcbe0; margin: .45rem auto 0; max-width: 54rem; line-height: 1.45; }
.phase-wer { display: flex; justify-content: center; flex-wrap: wrap; gap: .55rem; margin-top: .8rem; }
.wer-pille { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 999px;
             background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.3); color: #e9e5f5; font-size: .82rem; line-height: 1.25; text-align: left; }
.wer-pille .material-icons { font-size: 1rem; color: #c4b5fd; }
.wer-pille b { color: #ffffff; margin-right: .2rem; }
:root[data-theme="hell"] .phase-titel { color: #17161f; text-shadow: none; }
:root[data-theme="hell"] .phase-sub { color: #5f5a70; }
:root[data-theme="hell"] .wer-pille { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.24); color: #3b3650; }
:root[data-theme="hell"] .wer-pille .material-icons { color: #6d28d9; }
:root[data-theme="hell"] .wer-pille b { color: #17161f; }
@media (max-width: 767px) {
    .phase-band { top: calc(7rem + 0.6vh); }
    .phase-titel { font-size: 1.45rem; }
    .phase-sub { font-size: .88rem; margin-top: .3rem; }
    .phase-wer { gap: .35rem; margin-top: .5rem; }
    .wer-pille { font-size: .7rem; padding: .28rem .6rem; }
}