/* ========================================================================== Magic Flow 8.0 — theme-b.css (V3 „Entwurf B: Rhythmus & Atmung") KONZEPT Vier definierte Hintergrund-Treatments, die sich über die Page abwechseln und einen klaren Lese-Rhythmus erzeugen — alle aus EINER kosmischen Indigo/Violett/Gold-Familie. Zuordnung nach dramaturgischer Funktion der Sektion (nicht stur A/B/A/B), aber mit erkennbarem Alternieren: · T1 „Nacht" = tiefes, ruhiges Nachtindigo (flach, atmet vertikal minimal) — Lese-/Verarbeitungs-Sektionen. · T2 „Nebel" = violetter Nebel mit weichem Glow (emotional) — Gefühls-/Beziehungs-Sektionen. · T3 „Bild" = Bild-/Textur-BG, immersiv, mit weichen Fade-Masken oben/unten — Hero, Tunnel, Portraits, Galerie. · T4 „Goldbühne" = gold-akzentuierte Bühne (Bühnenlicht von oben + violette Tiefe + Gold-Glow-Divider als Signatur) — Conversion-Momente: Stipendium, Ticket-Zähler, Tickets, Footer-Abschluss (+ beide UI-Bars). RHYTHMUS (27 Sektionen): T4 T4 | T3 T4 T2 T4 T1 T2 T3 T1 T2 T4 T2 T1 T3 T1 T2 T4 T2 T3 T3 T3 T1 T2 T1 T2 T4 EDGE-CHAIN (Farbton an jeder Grenze, oben → unten): hero #000 → ctalogos #140a24 → video #0d0819 → [T4-Divider] stipendium #120a20 → proof #0a0716 → pain #08050f → [tiles = Foto, Fade-Masken] → outcomes #0a0716 → testi #0d0819 → [T4-Divider] progress #10081c → hlhead #150a24 → erwartet #0a0716 → break #0a0716 → gruende #0a0716 → werte #0d0819 → [T4-BÜHNEN-Divider] tickets #130a22 → charity #0d0819 → galerie #0d0819 → zitat #0d0819 → galerie-mobile #0d0819 → lehren #0a0716 → gastgeber #0d0819 → team #08050f → faq #0b0714 → [T4-Divider] footer. (Galerie-Cluster bewusst einheitlich #0d0819 — so stimmen die Nähte auf Desktop UND Mobil, obwohl dort je eine Galerie ausgeblendet ist.) Scope: body[data-theme="b"] — überschreibt Basis-Fallbacks aus sections.css inkl. der config-BGs ([data-mf-bg]-Variablen; Theme-Selektor hat höhere Spezifität). Nur Hintergründe/Divider — Copy, Layout, Preise, CTAs, Reihenfolge unverändert. Keine Animationen (nur statische BGs), Text-Kontrast überall >= 4.5:1 (weisser Text auf tiefdunklen Flächen). Entwurf A (theme-a.css) bleibt unberührt. ========================================================================== */ /* ------------------------------------------------------------ Basis-Canvas Ruhiges Nachtindigo als Grund — sichtbar nur an Rändern/Nähten. Überschreibt die Body-Ray-Textur ([data-mf-bg] auf ). */ body[data-theme="b"] { background: linear-gradient(180deg, #0a0716 0%, #100b1e 50%, #0a0716 100%); background-color: #0a0716; } /* ============================================================ 1 Countdown-Bar — T4 Gold-Bar (Original-Charakter) als Conversion-UI: satter Gold-Verlauf, unten eine leuchtende Gold-Kante statt hartem Schattenwurf. */ body[data-theme="b"] .mf-announce { background: linear-gradient(180deg, #dcb987 0%, #c9a472 50%, #b08a55 100%); border-bottom: 2px solid rgba(245, 205, 72, 0.75); box-shadow: 0 0 18px rgba(251, 194, 1, 0.28), 0 10px 26px rgba(5, 3, 11, 0.42); } /* ============================================================ 2 CTA-Bar (mobil) — T4 Dunkle Bühne mit Gold-Haarlinie — gehört sichtbar zur Conversion-Familie. */ body[data-theme="b"] .mf-ctastrip { background: radial-gradient(420px 120px at 50% 100%, rgba(201, 168, 76, 0.14), transparent 70%), linear-gradient(180deg, #110a20 0%, #0b0714 100%); border-bottom: 1px solid rgba(201, 168, 76, 0.5); box-shadow: 0 8px 22px rgba(5, 3, 11, 0.5); } /* ============================================================ 3 Hero — T3 (Bild) Bild-BG (Headline steckt in der Grafik) auf Schwarz — nahtlos, weil ctalogos exakt in Schwarz startet. */ body[data-theme="b"] .mf-hero { background: #000; } /* ============================================================ 4 Hero-CTA + Logos — T4 Erste Goldbühne: warmes Bühnenlicht hinter dem CTA-Button (der aus dem Hero herabhängt), Schwarz läuft in tiefes Nachtviolett. Kein Divider — der CTA ragt über die Kante, die Naht bleibt unsichtbar schwarz. */ body[data-theme="b"] .sec-ctalogos { /* V12 (Jonas): kein Gold-Glow-Streifen mehr — im Hero-Überlappungsbereich bleibt der BG transparent (= Hero-Schwarz, durchgehend), Violett erst weiter unten, damit kein sichtbarer horizontaler Streifen entsteht. */ background: linear-gradient(180deg, transparent 0%, transparent 66%, #0b0618 88%, #140a24 100%); } /* V4 A1 (mobil): Button KOMPLETT auf Schwarz — Gold-Bühnenlicht erst unter der 170px-Schwarzzone, weicher Auslauf ins Nachtviolett danach. */ @media (max-width: 767px) { body[data-theme="b"] .sec-ctalogos { background: radial-gradient(560px 260px at 50% 210px, rgba(201, 168, 76, 0.12), transparent 66%), linear-gradient(180deg, #000 0%, #000 170px, #0b0618 320px, #140a24 100%); } } /* ============================================================ 5 Hero-Video — T2 (Nebel) Violetter Kino-Nebel hinter dem Titel-Video — der erste emotionale Atemzug nach der Gold-Eröffnung. */ body[data-theme="b"] .sec-video { background: radial-gradient(880px 500px at 50% 36%, rgba(139, 63, 201, 0.22), transparent 66%), radial-gradient(700px 420px at 82% 78%, rgba(163, 38, 160, 0.1), transparent 64%), linear-gradient(180deg, #140a24 0%, #180c2b 45%, #0d0819 100%); } /* ============================================================ 6 Stipendium — T4 (Goldbühne) Conversion-Moment 1: Steampunkmagier-Bild bleibt als leiser Untergrund, darüber goldenes Bühnenlicht von oben — plus Gold-Glow-Divider als T4-Signatur-Auftakt. */ body[data-theme="b"] [data-section="stipendium"] { background: linear-gradient(180deg, #0d0819 0, rgba(13, 8, 25, 0) 200px), linear-gradient(0deg, #120a20 0, rgba(18, 10, 32, 0) 200px), radial-gradient(980px 460px at 50% 0%, rgba(201, 168, 76, 0.14), transparent 64%), linear-gradient(165deg, rgba(28, 11, 44, 0.72) 0%, rgba(16, 7, 30, 0.78) 100%), url('../assets/img/Steampunkmagier-Designs-3-min.webp') center / cover no-repeat; } body[data-theme="b"] [data-section="stipendium"]::before { content: ''; position: absolute; top: 0; left: 50%; /* V3 Motion: Divider driftet ±6px mit dem Scroll (--mf-drift via motion.js) */ transform: translateX(-50%) translateY(calc(var(--mf-drift, 0) * 1px)); width: min(640px, 78%); height: 2px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(201, 168, 76, 0.75) 28%, #e9c96a 50%, rgba(201, 168, 76, 0.75) 72%, transparent 100%); box-shadow: 0 0 14px rgba(251, 194, 1, 0.35); } /* ============================================================ 7 Proof-Bar — T1 (Nacht) Erste Ruhe-Fläche: flaches Nachtindigo, die drei Claims tragen allein. */ body[data-theme="b"] [data-section="proof-bar"] { background: linear-gradient(180deg, #120a20 0%, #0d0918 55%, #0a0716 100%); } /* ============================================================ 8 Pain-Points — T2 (Nebel) Innenschau: magenta-violetter Nebel von links (Emotion), läuft unten in Fast-Schwarz an die Foto-Mosaik-Kante. */ body[data-theme="b"] .sec-pain { background: radial-gradient(1050px 860px at -4% 30%, rgba(163, 38, 160, 0.32), transparent 62%), radial-gradient(760px 560px at 88% 68%, rgba(120, 60, 190, 0.14), transparent 64%), linear-gradient(180deg, #0a0716 0%, #170c29 40%, #110a22 70%, #08050f 100%); } /* ============================================================ 9 Highlight-Mosaik — T3 (Bild) Vollflächige Fotos = immersiver Raum. Trennung in B: weiche Fade-Masken oben/unten (statt Gold-Rahmen wie in A) — das Mosaik taucht aus dem Dunkel auf und wieder ab. */ body[data-theme="b"] .sec-tiles { background: #08050f; } body[data-theme="b"] .sec-tiles::before, body[data-theme="b"] .sec-tiles::after { content: ''; position: absolute; left: 0; right: 0; height: 110px; z-index: 2; pointer-events: none; } body[data-theme="b"] .sec-tiles::before { top: 0; background: linear-gradient(180deg, #08050f 0%, rgba(8, 5, 15, 0) 100%); } body[data-theme="b"] .sec-tiles::after { bottom: 0; background: linear-gradient(0deg, #08050f 0%, rgba(8, 5, 15, 0) 100%); } /* Abnahme R1: Kachel-Beschriftungen ÜBER den Fade-Masken halten — die ::before/::after-Masken (z-index 2) grauten Labels an Ober-/Unterkante aus. */ body[data-theme="b"] .sec-tiles__label, body[data-theme="b"] .sec-tiles__center-inner { position: relative; z-index: 3; } /* ============================================================ 10 Outcomes — T1 (Nacht) Ruhe nach den Bildern: flaches, sehr dunkles Indigo hinter den 6 Karten. */ body[data-theme="b"] .sec-outcomes { background: linear-gradient(180deg, #08050f 0%, #0d0919 45%, #0a0716 100%); } /* ============================================================ 11 Testimonials — T2 (Nebel) Emotion: violetter Nebel hinter dem Video-Karussell — die Kacheln leuchten als hellste Elemente aus dem Dunst. */ body[data-theme="b"] .sec-testi { background: radial-gradient(1000px 620px at 70% 20%, rgba(139, 63, 201, 0.18), transparent 66%), radial-gradient(820px 560px at 14% 74%, rgba(163, 38, 160, 0.12), transparent 64%), linear-gradient(180deg, #0a0716 0%, #120b21 45%, #0d0819 100%); } /* ============================================================ 12 Ticket-Progress-CTA — T4 (Goldbühne) Conversion-Moment 2: der Zähler bekommt Bühnenlicht — Gold-Glow von oben, violette Tiefe, Gold-Glow-Divider als Auftakt. */ body[data-theme="b"] [data-section="ticket-progress-cta"] { background: radial-gradient(920px 440px at 50% 0%, rgba(201, 168, 76, 0.13), transparent 64%), radial-gradient(680px 460px at 50% 55%, rgba(251, 194, 1, 0.07), transparent 62%), linear-gradient(180deg, #0d0819 0%, #17092a 45%, #10081c 100%); } body[data-theme="b"] [data-section="ticket-progress-cta"]::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(calc(var(--mf-drift, 0) * 1px)); /* V3 Motion */ width: min(640px, 78%); height: 2px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(201, 168, 76, 0.75) 28%, #e9c96a 50%, rgba(201, 168, 76, 0.75) 72%, transparent 100%); box-shadow: 0 0 14px rgba(251, 194, 1, 0.35); } /* ============================================================ 13 Highlights-Heading — T2 (Nebel) Der hellste Nebel-Moment der Page: violette Lichtkuppel, mit 220px Einblendung aus dem Dunkel und weichem Auslauf. */ body[data-theme="b"] .sec-hlhead { /* Abnahme R1: zusätzliche Unterkanten-Blendzone — auf Mobil ist die Sektion so kurz, dass die Lichtkuppel sonst bis zur Kante blutet (harte Kante gegen das dunkle „erwartet"). */ background: linear-gradient(180deg, #10081c 0, rgba(16, 8, 28, 0) 220px), linear-gradient(0deg, #150a24 0, rgba(21, 10, 36, 0) 160px), radial-gradient(900px 620px at 50% 44%, rgba(196, 74, 205, 0.46), rgba(120, 38, 132, 0.28) 45%, rgba(74, 21, 88, 0) 75%), linear-gradient(180deg, #38124a 0%, #2f0f45 55%, #150a24 100%); } /* ============================================================ 14 Was Dich erwartet — T1 (Nacht) Ruhiges Programm-Lesen: flaches Nachtindigo, die weissen Gold-Rahmen-Karten tragen. */ body[data-theme="b"] .sec-erwartet { background: linear-gradient(180deg, #150a24 0%, #100b1e 50%, #0a0716 100%); } /* ============================================================ 15 Breakthrough-Challenge — T3 (Bild) Immersiv: Tunnel-/Nacht-Bild dunkel eingebettet, oben/unten weich in die Nacht-Nähte eingeblendet. */ body[data-theme="b"] [data-section="breakthrough-challenge"] { background: linear-gradient(180deg, #0a0716 0, rgba(10, 7, 22, 0) 200px), linear-gradient(0deg, #0a0716 0, rgba(10, 7, 22, 0) 200px), linear-gradient(180deg, rgba(8, 5, 18, 0.7) 0%, rgba(9, 5, 20, 0.72) 100%), url('../assets/img/ChatGPT-Image-11.-Jan.-2026-17_36_59-1.webp') center / cover no-repeat; } /* ============================================================ 16 Fünf Gründe — T2 (Nebel) V4 A9 (2026-07-06, Jonas): der harte schwarze BG raus — weicher Violett-Verlauf der Treatment-Familie mit leisem Nebel-Glow; Ober- und Unterkante bleiben auf #0a0716 → softe Übergänge zu Breakthrough (oben) und Werte-Fit-Check (unten). */ body[data-theme="b"] [data-section="fuenf-gruende"] { background: radial-gradient(920px 620px at 50% 14%, rgba(139, 63, 201, 0.18), transparent 65%), radial-gradient(760px 540px at 10% 78%, rgba(163, 38, 160, 0.1), transparent 62%), linear-gradient(180deg, #0a0716 0%, #1a0e2f 42%, #150b27 72%, #0a0716 100%); } /* ============================================================ 17 Werte-Fit-Check — T2 (Nebel) Leiser violetter Nebel — emotionale Selbstprüfung vor der Ticket-Bühne. */ body[data-theme="b"] .sec-werte { background: radial-gradient(900px 640px at 22% 24%, rgba(139, 63, 201, 0.14), transparent 64%), radial-gradient(760px 520px at 84% 76%, rgba(163, 38, 160, 0.09), transparent 62%), linear-gradient(180deg, #0a0716 0%, #110b21 50%, #0d0819 100%); } /* ============================================================ 18 Tickets — T4 DIE GOLDBÜHNE (expliziter Jonas-Punkt) Der grösste Conversion-Moment: goldenes Bühnenlicht von oben, violette Tiefe hinter den Karten, ruhige Rand-Vignette — eröffnet mit dem breitesten Gold-Glow-Divider. */ body[data-theme="b"] .sec-tickets { background: radial-gradient(1150px 640px at 50% 0%, rgba(201, 168, 76, 0.17), transparent 62%), radial-gradient(1500px 900px at 50% 55%, rgba(84, 42, 146, 0.26), transparent 72%), radial-gradient(140% 100% at 50% 50%, transparent 58%, rgba(5, 3, 11, 0.5) 100%), linear-gradient(180deg, #0d0819 0%, #1c0c30 32%, #211034 64%, #130a22 100%); } body[data-theme="b"] .sec-tickets::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(calc(var(--mf-drift, 0) * 1px)); /* V3 Motion */ width: min(860px, 88%); height: 3px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(201, 168, 76, 0.85) 25%, #f5cd48 50%, rgba(201, 168, 76, 0.85) 75%, transparent 100%); box-shadow: 0 0 18px rgba(251, 194, 1, 0.45); } /* Abnahme R1 (mobil): T4-Bühnenlicht-Radiale füllen auf 390px die ganze Breite und starteten hart an der Oberkante, während die Divider dort kaum sichtbar waren → weiche Einblendzone über dem Gold-Glow + präsentere Divider. */ @media (max-width: 767px) { body[data-theme="b"] .sec-tickets { background: linear-gradient(180deg, #0d0819 0, rgba(13, 8, 25, 0) 110px), radial-gradient(1150px 640px at 50% 0%, rgba(201, 168, 76, 0.17), transparent 62%), radial-gradient(1500px 900px at 50% 55%, rgba(84, 42, 146, 0.26), transparent 72%), radial-gradient(140% 100% at 50% 50%, transparent 58%, rgba(5, 3, 11, 0.5) 100%), linear-gradient(180deg, #0d0819 0%, #1c0c30 32%, #211034 64%, #130a22 100%); } body[data-theme="b"] .sec-tickets::before { width: 94%; background: linear-gradient(90deg, rgba(201, 168, 76, 0.2) 0%, rgba(201, 168, 76, 0.85) 16%, #f5cd48 50%, rgba(201, 168, 76, 0.85) 84%, rgba(201, 168, 76, 0.2) 100%); } body[data-theme="b"] [data-section="ticket-progress-cta"] { background: linear-gradient(180deg, #0d0819 0, rgba(13, 8, 25, 0) 100px), radial-gradient(920px 440px at 50% 0%, rgba(201, 168, 76, 0.13), transparent 64%), radial-gradient(680px 460px at 50% 55%, rgba(251, 194, 1, 0.07), transparent 62%), linear-gradient(180deg, #0d0819 0%, #17092a 45%, #10081c 100%); } body[data-theme="b"] [data-section="ticket-progress-cta"]::before { width: 92%; background: linear-gradient(90deg, rgba(201, 168, 76, 0.18) 0%, rgba(201, 168, 76, 0.75) 18%, #e9c96a 50%, rgba(201, 168, 76, 0.75) 82%, rgba(201, 168, 76, 0.18) 100%); } } /* ============================================================ 19 Charity + Garantien — T2 (Nebel) Warmer Nebel fürs Herz: Amber-Hauch + warmes Magenta im tiefen Violett. */ body[data-theme="b"] .sec-charity { background: radial-gradient(980px 680px at 80% 18%, rgba(255, 150, 70, 0.07), transparent 60%), radial-gradient(880px 700px at 14% 72%, rgba(163, 38, 160, 0.14), transparent 64%), linear-gradient(180deg, #130a22 0%, #221136 45%, #0d0819 100%); } /* ============================================================ 20 Galerie (Desktop) — T3 (Bild) Immersiver Erinnerungs-Raum: Party-Foto-BG, oben/unten weich in die #0d0819-Naht des Galerie-Clusters eingeblendet. */ body[data-theme="b"] [data-section="galerie-desktop"] { background: linear-gradient(180deg, #0d0819 0, rgba(13, 8, 25, 0) 220px), linear-gradient(0deg, #0d0819 0, #0d0819 40px, rgba(13, 8, 25, 0) 280px), linear-gradient(180deg, rgba(9, 5, 16, 0.54) 0%, rgba(9, 5, 16, 0.58) 100%), url('../assets/img/Magic-Flow-Desktop-Grafiken-und-Header-fuer-Landingpage-18-min.webp') center / cover no-repeat; } /* ============================================================ 21 Zitat — T3 (Bild) / T2 mobil V4.1 (Jonas-Review 2026-07-07): Desktop wieder ORIGINAL (V3-Stand) — Jonas-Foto-Banner, Foto bleibt der Star; Lesbarkeits-Verlauf links plus weiche Blendzonen oben/unten in die Cluster-Naht #0d0819. (!important nötig: der Renderer setzt hier ein Inline-background-image.) Mobil (max-width 900px) behält das V4-A13-Redesign: Portrait als Bild-ELEMENT, die Sektion selbst als ruhige Violett-Bühne. */ body[data-theme="b"] .mf-quote { background-image: linear-gradient(180deg, #0d0819 0, rgba(13, 8, 25, 0) 190px), linear-gradient(0deg, #0d0819 0, rgba(13, 8, 25, 0) 190px), linear-gradient(90deg, rgba(9, 4, 14, 0.64) 0%, rgba(9, 4, 14, 0) 55%), url('../assets/img/WhatsApp-Image-2025-10-08-at-12.59.24.webp') !important; background-size: auto, auto, auto, cover; background-position: center, center, center, center right; background-repeat: no-repeat; background-color: #0d0819; } @media (max-width: 900px) { body[data-theme="b"] .mf-quote { background: radial-gradient(880px 560px at 72% 32%, rgba(139, 63, 201, 0.16), transparent 64%), radial-gradient(640px 460px at 14% 80%, rgba(163, 38, 160, 0.09), transparent 62%), linear-gradient(180deg, #0d0819 0%, #180d2b 45%, #0d0819 100%) !important; } } /* ============================================================ 22 Galerie (Mobil) — T3 (Bild) Kompakte Collage — gleiche Einbettung wie die Desktop-Galerie. */ body[data-theme="b"] .sec-galerie--mobile { background-image: linear-gradient(180deg, #0d0819 0, rgba(13, 8, 25, 0) 90px), linear-gradient(0deg, #0d0819 0, rgba(13, 8, 25, 0) 90px), linear-gradient(rgba(8, 4, 15, 0.52), rgba(8, 4, 15, 0.52)), url('../assets/img/Magic-Flow-Desktop-Grafiken-und-Header-fuer-Landingpage-18-min.webp'); background-size: auto, auto, auto, cover; background-position: center; } /* ============================================================ 23 Drei Lehren — T2 (Nebel) V4 A14 (Jonas): BG war zu dunkel — auf T2-Niveau aufgehellt (violetter Nebel-Glow + hellerer Verlauf), Karten/Texte klar lesbar; Nähte weiter #0d0819 (oben, Galerie-Cluster) und #0a0716 (unten, Gastgeber). */ body[data-theme="b"] [data-section="drei-lehren"] { background: radial-gradient(900px 620px at 50% 22%, rgba(139, 63, 201, 0.2), transparent 64%), radial-gradient(740px 540px at 84% 74%, rgba(163, 38, 160, 0.12), transparent 62%), linear-gradient(180deg, #0d0819 0%, #1c1030 45%, #140b26 78%, #0a0716 100%); } /* ============================================================ 24 Gastgeber — T2 (Nebel) Emotionale Begegnung: violetter Nebel mit warmem Glow hinter der grossen Jonas-Karte. */ body[data-theme="b"] .sec-host { background: radial-gradient(880px 620px at 50% 38%, rgba(139, 63, 201, 0.16), transparent 64%), radial-gradient(720px 520px at 50% 46%, rgba(201, 168, 76, 0.07), transparent 60%), linear-gradient(180deg, #0a0716 0%, #160c27 45%, #0d0819 100%); } /* ============================================================ 25 Team + Location — T1→T2 V4 A16 (Jonas): das zu dunkle Schwarz raus — die ganze Sektion läuft in einem weichen dunklen Violett-Verlauf; "Location und Daten" bekommt als eigenes Band (sec-team__locwrap) einen klaren eigenen BG-Switch mit softem Übergang; unten Naht auf FAQ (#08050f). */ body[data-theme="b"] .sec-team { background: linear-gradient(180deg, #0d0819 0%, #140b24 35%, #100a1e 70%, #100a1e 100%); } body[data-theme="b"] .sec-team__black { background: linear-gradient(180deg, #100a1e 0%, #150b26 35%, #0f0a1c 75%, #08050f 100%); } body[data-theme="b"] .sec-team__locwrap { background: linear-gradient(180deg, #120a20 0, rgba(18, 10, 32, 0) 130px), linear-gradient(0deg, #0f0a1c 0, rgba(15, 10, 28, 0) 130px), radial-gradient(780px 440px at 50% 18%, rgba(139, 63, 201, 0.17), transparent 64%), radial-gradient(560px 380px at 82% 76%, rgba(201, 168, 76, 0.06), transparent 60%), linear-gradient(180deg, #180d2a 0%, #1e1134 50%, #140b24 100%); } /* ============================================================ 26 FAQ — T2 (Nebel) Letzter leiser Nebel: kaum sichtbarer violetter Dunst — die violetten Accordion-Karten bleiben die Farbtupfer. */ body[data-theme="b"] .sec-faq { background: radial-gradient(900px 600px at 76% 20%, rgba(139, 63, 201, 0.09), transparent 64%), linear-gradient(180deg, #08050f 0%, #0d0917 50%, #0b0714 100%); } /* ============================================================ 27 Footer — T4 (Goldbühne) V4 A17: Footer im jonasschiffmann.com-Stil (zwei Stockwerke, Struktur/ Typo in sections.css). Theme B behält die Gold-Haarlinie als Auftakt- Divider über der Violett-Dom-Bühne; die Bühne selbst startet auf der FAQ-Nahtfarbe (#0b0714). */ body[data-theme="b"] .mf-footer { position: relative; background: none; border-top: 0; } body[data-theme="b"] .mf-footer__stage { background: linear-gradient(180deg, rgba(11, 7, 20, 0.95) 0%, rgba(11, 7, 20, 0) 26%), radial-gradient(ellipse 140% 100% at 50% 58%, rgba(90, 22, 144, 0.55) 0%, rgba(58, 15, 110, 0.45) 48%, rgba(11, 7, 20, 0.9) 100%), linear-gradient(180deg, #0b0714 0%, #170b2c 55%, #0d0716 100%); } body[data-theme="b"] .mf-footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(calc(var(--mf-drift, 0) * 1px)); /* V3 Motion */ width: min(460px, 72%); height: 2px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(201, 168, 76, 0.65) 30%, rgba(233, 201, 106, 0.85) 50%, rgba(201, 168, 76, 0.65) 70%, transparent 100%); box-shadow: 0 0 10px rgba(251, 194, 1, 0.25); } /* ============================================================ V4.2 (Jonas 07.07.): Desktop-Header-Bar Gold → Badge-Violett. Verlauf exakt aus dem "TICKETS FÜR NUR 47€"-Badge gesampelt (Hero-Asset WhatsApp-Image-2026-03-30): #6e2288 → #521c6d. Bar ist mobil display:none — wirkt nur Desktop. CTA bleibt Gold. ============================================================ */ body[data-theme="b"] .mf-announce { background: linear-gradient(180deg, #6e2288 0%, #611f7e 52%, #521c6d 100%) !important; border-bottom: 1px solid rgba(201, 168, 76, 0.45); } body[data-theme="b"] .mf-announce__headline, body[data-theme="b"] .mf-announce .mf-countdown-inline, body[data-theme="b"] .mf-announce .mf-cd-label { color: #fff !important; }