/* ============================================================ MARKTGESICHT — DESIGN (statisch, kein Build-Step) Ziel-Look: High-End-Betriebssystem / Privatjet-Cockpit. Dunkel, ruhig, klinisch präzise, viel Weißraum, autoritär. DM Sans (eine Familie, mehrere Gewichte; Headlines uppercase). Keine Monospace, keine Verläufe als Deko, kein Glow. Rot NUR im Ticker (fallende Kurse). ============================================================ */ /* ---------- 0. Fonts (self-hosted, public/fonts/, DSGVO) ---------- DM Sans (variabel) — eine Familie, mehrere Gewichte. */ @font-face { font-family: "DM Sans"; src: url("public/fonts/dm-sans-var.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; } /* ---------- 1. Farb-Tokens ---------- */ :root { --accent-primary: #2E00FF; /* Cyber Blue – CTAs, Fokus */ --accent-secondary: #4D6BFF; /* Signal Blue – Akzente, Maske, Daten */ --contrast-light: #EAEBF7; /* Text */ --contrast-dark: #05050A; /* Hintergrund */ --surface: #070710; /* Karten, Panels */ --surface-2: #0B0B14; /* Video-/Antwort-Container */ --border: #14162B; --border-2: #1C2547; --text-muted: #8E92AD; --text-hint: #868CAB; --status-ok: #1D9E75; /* Smaragd – qualifiziert */ --status-reject: #BA7517; /* Bernstein gedimmt – Absage */ --ticker-up: #1D9E75; --ticker-down: #E24B4A; /* Rot NUR hier */ --bg: var(--contrast-dark); --text: var(--contrast-light); /* Typografie */ --font-display: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-headline: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --fs-h1: 1.625rem; /* 26px mobil, 33px ab 768px */ --fs-h2: 1.3125rem; /* 21px (Quiz-Frage, Legal-Titel) */ --fs-body: 0.875rem; /* 14px, 15px Subline ab 768px */ /* Fluid statt fix: der erste Satz der Subline ("Erhalte jetzt das kostenlose Marktgesicht-Playbook.") soll auf JEDEM Handy in EINE Zeile passen. Bei festen 16px braucht er 383px und bricht unter ~430px Viewport in zwei Zeilen um - die Subline waere dann dreizeilig statt zweizeilig. Untergrenze 14px, Deckel 18px (der fruehere Desktop-Wert). */ --fs-sub: clamp(0.875rem, calc(4.05vw - 1px), 1.125rem); --fs-label: 0.625rem; /* 10px Labels (9–11px Spanne) */ /* Layout */ --space-1: 0.5rem; /* 8px */ --space-2: 1rem; /* 16px */ --space-3: 1.5rem; /* 24px */ --space-4: 2rem; /* 32px */ --radius: 8px; --radius-lg: 12px; --maxw: 640px; /* Bewegung: bedacht, nie hektisch (starke ease-out-Kurve) */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-smooth: cubic-bezier(0.33, 1, 0.68, 1); /* easeOutCubic – sanfter, für Fills */ --dur: 250ms; --dur-slow: 400ms; } /* ---------- 2. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { position: relative; /* Verankerung für den Candle-Hintergrund (scrollt mit) */ min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, iframe, video { display: block; max-width: 100%; } button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; } a { color: inherit; } /* ---------- 3. Live-Ticker (einziges Rot: fallende Kurse) ---------- */ .ticker { height: 32px; background: #04040B; border-bottom: 1px solid var(--border); overflow: hidden; display: flex; align-items: center; } .ticker__track { display: flex; width: max-content; animation: tickerScroll 22s linear infinite; } .ticker__group { display: flex; align-items: center; gap: 28px; padding-right: 28px; } .tick { display: inline-flex; align-items: baseline; gap: 6px; font-size: 0.6875rem; /* 11px */ white-space: nowrap; color: var(--text-muted); } .tick b { font-weight: 600; color: var(--contrast-light); letter-spacing: 0.3px; } .tick .up { color: var(--ticker-up); } .tick .down { color: var(--ticker-down); } @keyframes tickerScroll { to { transform: translateX(-50%); } } /* ---------- 4. Layout ---------- */ .page { position: relative; display: flex; flex-direction: column; min-height: 100dvh; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding: var(--space-3) var(--space-3); } .main { flex: 1; display: flex; flex-direction: column; justify-content: center; } /* ---------- 5. Topbar / Marke (nur noch Legal-Seiten) ---------- */ .topbar { border-bottom: 1px solid var(--border); } .topbar .container { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-2); } .brand { /* min-height als Touch-Ziel (war 26px hoch) - das Logo selbst bleibt gleich gross */ display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-family: var(--font-display); font-weight: 600; font-size: 0.6875rem; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: var(--text); } .brand__logo { height: 26px; width: auto; } @keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* ---------- 6. Hero (VSL): Maske zentral als Held ---------- */ .hero { text-align: center; } .hero-mask { display: block; width: clamp(112px, 30vw, 140px); height: auto; aspect-ratio: 2 / 1; /* horizontales Lockup (Icon + Markt-gesicht) */ object-fit: contain; margin: 0 auto clamp(2.5rem, 9vw, 3.5rem); /* Luft Logo -> Pill */ /* Video hat reinen Schwarz-BG -> 'screen' blendet das Schwarz komplett weg, nur das Logo bleibt sichtbar (kein Kasten, kein Clipping). Schwebt überm BG. */ mix-blend-mode: screen; } h1.display { font-family: var(--font-headline); font-size: var(--fs-h1); font-weight: 600; /* DM Sans = neue Logo-Schrift (Archivo raus) */ line-height: 1.25; letter-spacing: 0.2px; text-transform: uppercase; text-wrap: balance; } .display .hl { color: var(--accent-secondary); } /* ---------- Risikohinweis unter der Headline ---------- Stand frueher am Ende der Beweis-Sektion (.proof__disclaimer) und war dort linksbuendig. Im zentrierten Hero braucht er deshalb text-align + eigene Maxbreite, sonst laeuft er ueber die volle Spalte. Bewusst klein und in --text-hint: Pflichtangabe, kein Blickfang vor dem Video. */ .hero-disclaimer { margin: var(--space-2) auto 0; max-width: 52ch; /* Gleiche Groesse wie die Subline (--fs-sub): der Hinweis soll gelesen werden. Unterschieden wird ueber die Farbe (--text-hint statt --contrast-light), nicht mehr ueber die Schriftgroesse. */ font-size: var(--fs-sub); line-height: 1.55; color: var(--text-hint); text-align: center; text-wrap: pretty; } /* ---------- Glanz auf dem Schluesselwort ("MAERKTE") ---------- Basis-Zustand (immer aktiv, auch ohne JS und waehrend des Decrypts): nur schwerer gesetzt plus ein leiser Signal-Blue-Halo. Der eigentliche Sweep haengt an [data-decrypted], das decrypt.js am Ende setzt - und das aus einem harten Grund: background-clip:text braucht -webkit-text-fill-color:transparent, und das VERERBT sich auf die .dc-c-Zeichen-Spans. Waehrend der Animation waere das Wort sonst unsichtbar. So laeuft der Glanz erst an, wenn die Headline steht. */ .display .shine { font-weight: 700; text-shadow: 0 0 10px color-mix(in srgb, var(--accent-secondary) 34%, transparent), 0 0 26px color-mix(in srgb, var(--accent-secondary) 18%, transparent); } .display[data-decrypted] .shine { /* Band aus --accent-secondary wandert durch den hellen Grundton. Nur bestehende Tokens, keine neue Farbe. */ background-image: linear-gradient(100deg, var(--contrast-light) 0%, var(--contrast-light) 40%, color-mix(in srgb, var(--accent-secondary) 78%, var(--contrast-light)) 50%, var(--contrast-light) 60%, var(--contrast-light) 100%); background-size: 300% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shineSweep 4.6s var(--ease-smooth) 500ms infinite; } /* Bei 100% und 0% sitzt das Band ausserhalb des Wortes - der Ruecksprung am Schleifenende ist deshalb nicht sichtbar. Dazwischen: Ruhepause. */ @keyframes shineSweep { 0%, 6% { background-position: 100% 0; } 52%, 100% { background-position: 0% 0; } } @media (prefers-reduced-motion: reduce) { .display[data-decrypted] .shine { animation: none; } } /* ---------- Headline-Decrypt (Zustaende setzt decrypt.js) ---------- Bewusst NICHT auf h1.display eingeschraenkt: dieselbe Animation laeuft auch auf der Quiz-End-Screen-Headline (h2#qualifiedHeading). .dc-w = Wort-Slot mit eingefrorener Endbreite (width kommt inline aus der Messung) -> der Zeilenumbruch kann waehrend der Animation nicht abweichen. .dc-c = einzelnes Zeichen. Bewusst OHNE Glow (Projektregel), die Wirkung traegt allein der Farbwechsel ueber bestehende Tokens. */ .dc-w { display: inline-block; vertical-align: top; overflow: hidden; white-space: nowrap; text-align: left; } .dc-c { color: var(--text-hint); } /* noch verschluesselt: gedimmt */ .dc-c.is-lock { /* rastet ein: kurzer Signal-Blue-Blitz */ animation: dcLock 420ms var(--ease-out) forwards; } @keyframes dcLock { 0% { color: var(--accent-secondary); } 100% { color: inherit; } /* innerhalb von .hl ist das wieder Signal-Blue */ } @media (prefers-reduced-motion: reduce) { .dc-c, .dc-c.is-lock { animation: none; color: inherit; } } /* ---------- Hero-Tag: Geschenk-Badge mit laufendem Rahmen-Licht ---------- */ @property --tag-angle { syntax: ""; initial-value: 0deg; inherits: false; } .hero-tag { display: block; width: fit-content; margin: 0 auto var(--space-3); padding: 0.3rem clamp(0.6rem, 2.4vw, 0.9rem); /* schmaler auf kleinen Displays */ border-radius: 999px; /* Fluide Groesse: der Descriptor ist deutlich laenger als der fruehere Geschenk-Hinweis und sprengte bei 320px mit white-space:nowrap den Viewport (305px Pill bei 272px Platz -> H-Scroll). */ font-size: clamp(0.6875rem, 3.3vw, 0.8125rem); font-weight: 600; letter-spacing: 0.2px; color: var(--contrast-light); white-space: nowrap; background: color-mix(in srgb, var(--surface-2) 85%, #000); position: relative; isolation: isolate; } .hero-tag b { color: var(--accent-secondary); font-weight: 700; } /* dezenter Grund-Rahmen, damit der Pill immer eine Kante hat */ .hero-tag::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--border-2); z-index: -2; } /* laufendes Licht: rotierender Conic-Gradient, per Mask auf den Rahmen-Ring beschränkt */ .hero-tag::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1; background: conic-gradient(from var(--tag-angle), transparent 0deg 250deg, color-mix(in srgb, var(--accent-secondary) 60%, transparent) 300deg, #d4dbff 338deg, var(--accent-secondary) 350deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: tagBorder 3.2s linear infinite; } @keyframes tagBorder { to { --tag-angle: 360deg; } } @media (prefers-reduced-motion: reduce) { .hero-tag::before { animation: none; } } .subline { margin: var(--space-2) auto 0; max-width: 44ch; font-size: var(--fs-sub); line-height: 1.6; color: var(--contrast-light); /* Branding-Textfarbe (#EAEBF7): heller/quasi-weiß */ text-wrap: pretty; } /* Auf dem Handy greift die Subline 12px in die Container-Polsterung hinein. Ohne diese 24px kosten die Seitenraender genau die Zeichen, die den ersten Satz umbrechen lassen - die Subline waere dann drei- statt zweizeilig. Der Text bleibt trotzdem im Viewport, er nutzt nur die Polsterung mit. */ @media (max-width: 767px) { .subline { margin-inline: -12px; max-width: none; } } /* Steht die Subline unter dem Video (ihr 👇 zeigt dann auf den Button), muss sie optisch zum CTA gehoeren, nicht zum Video: Luft nach oben, eng nach unten. Ohne das haengt sie am Videorahmen und der Pfeil zeigt ins Leere. */ .video + .subline, .video-notice + .subline { margin-top: var(--space-4); } .subline + .btn--under-video { margin-top: var(--space-2); } /* ---------- 7. Video-Frame (16:9) ---------- */ .video { margin-top: var(--space-3); position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); /* feine, leicht leuchtende Linie + dezenter Glow (explizit gewünscht) */ border: 1px solid color-mix(in srgb, var(--accent-secondary) 32%, var(--border-2)); box-shadow: 0 0 22px -6px color-mix(in srgb, var(--accent-secondary) 38%, transparent), 0 10px 34px -16px color-mix(in srgb, var(--accent-primary) 30%, transparent); } .video > iframe, .video > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video__placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-2); text-align: center; padding: var(--space-3); background-size: cover; background-position: center; box-shadow: inset 0 0 90px rgba(5,5,10,0.55); } /* VSL-Poster: AVIF -> WebP -> JPG (Browser wählt das beste Format; gleicher Look, ~60% kleiner) */ .video__placeholder--vsl { background-image: url('public/vsl-poster.jpg'); background-image: -webkit-image-set(url('public/vsl-poster.avif') type('image/avif'), url('public/vsl-poster.webp') type('image/webp'), url('public/vsl-poster.jpg') type('image/jpeg')); background-image: image-set(url('public/vsl-poster.avif') type('image/avif'), url('public/vsl-poster.webp') type('image/webp'), url('public/vsl-poster.jpg') type('image/jpeg')); } /* VSL Loop-Thumbnail (self-hosted 5-Sek-Loop; Wistia lädt erst beim Klick). .video > video setzt bereits absolute/inset/100% — hier nur Cover + Stacking. */ .video__loop { object-fit: cover; z-index: 0; background: var(--surface-2); } .video__overlay { z-index: 1; } /* Play-Button + Vignette über dem Loop */ .video__play { width: 56px; height: 56px; border-radius: 50%; display: grid; place-content: center; background: var(--accent-primary); } .video__play svg { width: 22px; height: 22px; translate: 2px 0; } .video__label { font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 1px; } .video__hint { font-size: var(--fs-label); letter-spacing: 0.5px; color: var(--text-hint); } /* ---------- Drittanbieter-Hinweis unter dem Video ---------- Gleiche Rolle wie .hero-disclaimer: Pflichtinformation, die gelesen werden soll, aber nicht der Blickfang ist. Unterschieden wird ueber die Farbe (--text-hint), nicht ueber Winzschrift - deshalb NICHT --fs-label (10px) wie .video__hint. Bewusst --fs-body (fix 14px) statt --fs-sub (fluid bis 18px): der Hinweis steht im Hero ueber dem CTA, und jede zusaetzliche Zeile schiebt den Button nach unten. Abstand nach oben klein (--space-1), damit der Hinweis optisch zum Video gehoert; die Luft zur Subline uebernimmt die erweiterte Regel weiter oben. */ .video-notice { margin: var(--space-1) auto 0; max-width: 52ch; font-size: var(--fs-body); line-height: 1.5; color: var(--text-hint); text-align: center; text-wrap: pretty; } /* Linkfarbe wie in .legal a - der Hinweistext ist --text-hint, ohne eigene Farbe waere der Link darin nicht als Link erkennbar. */ .video-notice a { color: var(--accent-secondary); text-underline-offset: 2px; } /* ---------- 8. Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding: 0.9rem 1.5rem; border-radius: var(--radius); border: 1px solid transparent; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.4px; color: #fff; background: var(--accent-primary); text-decoration: none; transition: transform 160ms var(--ease-out), filter var(--dur) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .btn:hover { filter: brightness(1.12); } .btn:hover:not(:disabled) .arrow { transform: translateX(3px); } } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; filter: none; } .btn:focus-visible { outline: 1.5px solid var(--contrast-light); outline-offset: 3px; } .btn .arrow { transition: transform var(--dur) var(--ease-out); } .btn--whatsapp { background: var(--accent-primary); } .btn--under-video { margin-top: var(--space-4); width: 92%; margin-inline: auto; } /* ---------- CTA: Outline -> füllt sich blau bei Hover ---------- */ .btn--chart { position: relative; overflow: hidden; isolation: isolate; padding: 0.85rem 1.4rem; font-size: clamp(1.0625rem, 4.5vw, 1.25rem); color: var(--accent-secondary); background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 94%, var(--accent-secondary)), var(--surface)); border: 2.5px solid color-mix(in srgb, var(--accent-secondary) 85%, transparent); box-shadow: 0 0 11px -1px color-mix(in srgb, var(--accent-secondary) 58%, transparent), /* Border-Glow (enger, kräftiger) */ 0 0 50px 0 color-mix(in srgb, var(--accent-secondary) 24%, transparent); /* weiter Glow nach außen */ transition: box-shadow 220ms var(--ease-out), transform 160ms var(--ease-out), border-color 240ms var(--ease-out); } .btn--chart > span { position: relative; z-index: 3; white-space: nowrap; /* nie umbrechen -> einzeilig */ transition: color 200ms var(--ease-out); text-shadow: 0 1px 7px color-mix(in srgb, var(--contrast-dark) 60%, transparent); } /* Füll-Overlay (Execute) */ .btn--chart::after { content: ""; position: absolute; inset: 0; z-index: 1; transform: scaleX(0); transform-origin: left center; background: linear-gradient(176deg, color-mix(in srgb, var(--accent-primary) 80%, #8093ff), var(--accent-primary) 60%); transition: transform 420ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .btn--chart:hover { transform: translateY(-1px); border-color: transparent; box-shadow: 0 1px 0 0 rgba(255,255,255,.30) inset, 0 10px 24px -10px color-mix(in srgb, var(--accent-secondary) 90%, transparent), 0 0 34px -6px color-mix(in srgb, var(--accent-secondary) 85%, transparent), 0 0 64px 2px color-mix(in srgb, var(--accent-secondary) 30%, transparent); } .btn--chart:hover::after { transform: scaleX(1); } .btn--chart:hover > span { color: #fff; } /* blaue Füllung -> Text hell für Kontrast */ } /* Press-Feedback gewinnt über Hover-Lift */ .btn--chart:active { transform: scale(0.97); } @media (prefers-reduced-motion: reduce) { .btn--chart:hover { transform: none; } } /* ---------- Marktgesicht-Maske auf dem CTA ---------- Als CSS-Maske + currentColor, nicht als : so nimmt der Marker automatisch die Textfarbe an (Signal-Blue -> Weiss, sobald sich der Button blau fuellt). Als blaues Bild wuerde er in der Fuellung verschwinden. Groesse in em -> skaliert mit der Button-Schrift mit. Spin liegt auf ::before, der Press-Pop auf dem Span selbst - sonst wuerden sich die beiden transform-Regeln gegenseitig ueberschreiben. */ .btn--chart .btn__mask { position: relative; z-index: 3; /* über dem Füll-Overlay (::after, z-index 1) */ flex: 0 0 auto; display: block; width: 1.15em; height: 1.15em; transition: transform 160ms var(--ease-out); } .btn--chart .btn__mask::before { content: ""; display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask: url("public/favicon-192.png") center / contain no-repeat; mask: url("public/favicon-192.png") center / contain no-repeat; animation: maskSpin 3s var(--ease-out) infinite; } /* 700ms Drehung, danach ~2,3s Ruhe - der Blick wird geholt, nicht gehetzt */ @keyframes maskSpin { 0% { transform: rotate(0deg); } 23% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } .btn--chart:active .btn__mask { transform: scale(0.88); } @media (hover: hover) and (pointer: fine) { .btn--chart:hover { color: #fff; } /* zieht currentColor der Maske mit */ } @media (prefers-reduced-motion: reduce) { .btn--chart .btn__mask::before { animation: none; } } /* Auf Telefonbreiten war das Label schon OHNE Maske zu breit fuer den Button und wurde vom overflow:hidden abgeschnitten (gemessen: @320 und @360px). Mit der Maske reicht der Platz bis 390px nicht mehr. Deshalb hier volle Breite, schmalere Polsterung und eine Spur kleinere Schrift - Label und Marker passen damit ab 320px sicher nebeneinander. */ @media (max-width: 480px) { .btn--under-video { width: 100%; } .btn--chart { padding-inline: 0.85rem; /* Untergrenze 14px greift erst unter ~341px Viewport und schafft dort die noetige Reserve - mit 15px blieben bei 320px nur 2,2px uebrig. */ font-size: clamp(0.875rem, 4.1vw, 1.25rem); } .btn--chart .btn__mask { width: 1em; height: 1em; } } /* Platzhalter-Freiraum unter dem Button (Content folgt) */ .btn--ghost { width: auto; background: transparent; color: var(--text-muted); font-family: var(--font-body); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.5px; padding: 0.6rem 0.9rem; } @media (hover: hover) and (pointer: fine) { .btn--ghost:hover { color: var(--text); filter: none; } } .btn--ghost:active { transform: scale(0.97); } .btn--ghost:disabled { opacity: 0.3; } .btn--ghost:focus-visible { outline: 1.5px solid var(--accent-primary); outline-offset: 2px; } /* ---------- 9. CTA-Reveal (fadet nach ~30 Sek. ein) ---------- */ .cta-zone { margin-top: var(--space-3); display: grid; gap: var(--space-2); } .cta-reveal { display: grid; gap: var(--space-1); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow) var(--ease-out); } .js .cta-reveal { opacity: 0; transform: translateY(10px); pointer-events: none; visibility: hidden; } .js .cta-reveal.is-revealed { opacity: 1; transform: none; pointer-events: auto; visibility: visible; } .cta-microcopy { text-align: center; font-size: var(--fs-label); font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-hint); } .cta-wait { display: none; align-items: center; justify-content: center; gap: 0.6rem; font-size: 0.75rem; color: var(--text-hint); transition: opacity var(--dur-slow) var(--ease-out); } .js .cta-wait { display: flex; } .cta-wait.is-done { opacity: 0; height: 0; overflow: hidden; margin: 0; } .cta-wait .spinner { width: 12px; height: 12px; border: 1.5px solid var(--border-2); border-top-color: var(--accent-secondary); border-radius: 50%; animation: spin 1.1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- 10. Candlestick-Hintergrund (ambientes Tiefenfeld) ---------- Full-bleed, fixiert hinter dem Content (z-index:-1). Zwei Layer für Parallax-Tiefe, Back leicht unscharf (depth-of-field), langsame Drift. Scrim + Vignette halten den Text glasklar. Kein Glow, sehr leise. */ .bg { /* NICHT fixed: im Dokument verankert -> scrollt mit dem Content mit (kein Scroll-Parallax). Die horizontale Drift läuft unabhängig weiter. */ position: absolute; top: 0; left: 0; width: 100%; height: 100dvh; z-index: -1; overflow: hidden; pointer-events: none; background: var(--contrast-dark); } /* feines Cockpit-Raster, sehr ruhig */ .bg__grid { position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--accent-secondary) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent-secondary) 5%, transparent) 1px, transparent 1px); background-size: 52px 52px; opacity: 0.4; } .bg__layer { position: absolute; inset: 0; display: flex; width: 200%; will-change: transform; } .bg__layer img { width: 50%; height: 100%; object-fit: cover; object-position: center bottom; } .bg__layer--back { opacity: 0.19; filter: blur(1.6px); animation: bgDrift 135s linear infinite; /* 10% schneller (war 150s) */ } .bg__layer--front { opacity: 0.36; animation: bgDrift 86.4s linear infinite; /* 10% schneller (war 96s) */ } @keyframes bgDrift { to { transform: translateX(-50%); } } /* Scrim: nur den Headline-Bereich abdunkeln (eng) + weiche Rand-Vignette, damit das Feld atmen kann (Cockpit-Display, nicht erstickt). */ .bg__scrim { position: absolute; inset: 0; background: radial-gradient(95% 52% at 50% 19%, var(--contrast-dark) 0%, color-mix(in srgb, var(--contrast-dark) 48%, transparent) 36%, transparent 62%), radial-gradient(145% 125% at 50% 48%, transparent 62%, var(--contrast-dark) 100%); } /* ---------- 11. Kennzahlen-Fundament ---------- */ .kpis { margin-top: var(--space-4); display: grid; grid-template-columns: repeat(3, 1fr); } .kpi { text-align: center; padding: var(--space-2) var(--space-1); } .kpi + .kpi { border-left: 1px solid var(--border); } .kpi__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: 0.4px; color: var(--contrast-light); } .kpi__label { display: block; margin-top: 0.35rem; font-size: 0.5625rem; /* 9px */ font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-hint); } /* ============================================================ QUIZ — "Eignung" ============================================================ */ /* Logo über der Quiz-Karte (nutzt .hero-mask-Basis: Größe, 2:1, screen-blend) */ .quiz-logo { margin: var(--space-2) auto var(--space-3); } /* Karte: Hochformat (V3.1 „Signal Editorial"), Meta + Mini-Progress integriert */ .quiz-card { display: flex; flex-direction: column; min-height: 580px; position: relative; overflow: hidden; isolation: isolate; background: var(--surface); border: 2px solid color-mix(in srgb, var(--accent-secondary) 30%, var(--border-2)); border-radius: 16px; padding: var(--space-3); box-shadow: 0 0 40px -18px color-mix(in srgb, var(--accent-secondary) 45%, transparent); } /* Persistente Bühne (Inhalt wird getauscht) + Soft-Wipe-Transition zwischen Fragen */ .quiz-card__stage { flex: 1; display: flex; flex-direction: column; width: 100%; } .quiz-card__stage.tx-out { animation: quizTxOut 320ms ease forwards; } .quiz-card__stage.tx-in { animation: quizTxIn 420ms var(--ease-smooth); } @keyframes quizTxOut { to { opacity: 0; } } @keyframes quizTxIn { from { opacity: 0; } to { opacity: 1; } } .quiz-card__wipe { position: absolute; inset: -2px; z-index: 6; pointer-events: none; transform: translateX(-120%); background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent-primary) 45%, transparent) 28%, color-mix(in srgb, var(--accent-primary) 78%, #8093ff) 50%, color-mix(in srgb, var(--accent-primary) 45%, transparent) 72%, transparent 100%); filter: blur(2px); box-shadow: 0 0 50px color-mix(in srgb, var(--accent-secondary) 40%, transparent); } .quiz-card__wipe.go { animation: quizWipe 760ms cubic-bezier(0.65, 0, 0.35, 1); } @keyframes quizWipe { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } @media (prefers-reduced-motion: reduce) { .quiz-card__stage.tx-out, .quiz-card__stage.tx-in { animation-duration: 1ms !important; } .quiz-card__wipe { display: none; } } /* große Frage-Nummer oben rechts (Kontur), reagiert auf Auswahl */ .quiz-card__num { position: absolute; top: -14px; right: 8px; z-index: 0; font-family: var(--font-headline); font-weight: 800; font-size: 6.5rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent-secondary) 32%, transparent); pointer-events: none; user-select: none; transition: -webkit-text-stroke-color 400ms var(--ease-out); } .quiz-card.has-pick .quiz-card__num { -webkit-text-stroke-color: color-mix(in srgb, var(--accent-secondary) 55%, transparent); } .quiz-card__meta { position: relative; z-index: 1; font-size: 0.6875rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-hint); } .quiz-card__meta b { color: var(--accent-secondary); font-weight: 600; } /* Hinweis-Zeile über der Frage (z.B. Aufmerksamkeits-Check) */ .quiz-card__note { position: relative; z-index: 1; margin: var(--space-3) 0 calc(-1 * var(--space-2)); font-size: 0.75rem; line-height: 1.5; color: var(--text-muted); max-width: 24ch; /* bleibt frei von der großen Nummer */ } .quiz-card__q { position: relative; z-index: 1; font-family: var(--font-headline); font-size: 1.5rem; font-weight: 600; line-height: 1.25; text-wrap: balance; max-width: 17ch; /* hält die Frage frei von der Nummer */ margin: var(--space-3) 0 0; color: var(--contrast-light); } /* Akzent-Strich = Mini-Progress (Breite setzt quiz.js) */ .quiz-card__prog { position: relative; z-index: 1; width: 84px; height: 4px; border-radius: 99px; background: var(--border-2); margin: 0.9rem 0 var(--space-4); overflow: hidden; } .quiz-card__prog i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); transition: width var(--dur-slow) var(--ease-out); } /* Antwort-Optionen: A/B/C-Chips, Stagger-Entrance, F4 Chart-Fill bei Auswahl */ .options { display: grid; gap: 0.75rem; position: relative; z-index: 1; } .option { display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left; padding: 1.05rem 1.1rem; border-radius: 12px; background: var(--surface-2); border: 1.5px solid var(--border-2); color: var(--text); font-size: 0.9375rem; line-height: 1.4; font-weight: 500; position: relative; overflow: hidden; isolation: isolate; transition: border-color var(--dur) var(--ease-out), /* Hover bleibt schnell */ box-shadow 460ms var(--ease-smooth), /* Glow kommt mit dem Fill */ transform 120ms var(--ease-out); /* Entrance: 'backwards' statt 'forwards' — eine gefüllte Animation würde :active/:hover-Transforms dauerhaft überschreiben */ animation: optIn 320ms var(--ease-out) backwards; } .option:nth-child(1) { animation-delay: 40ms; } .option:nth-child(2) { animation-delay: 90ms; } .option:nth-child(3) { animation-delay: 140ms; } @keyframes optIn { from { opacity: 0; transform: translateY(8px); } } .option > * { position: relative; z-index: 2; } @media (hover: hover) and (pointer: fine) { .option:hover { border-color: color-mix(in srgb, var(--accent-secondary) 70%, transparent); } } .option:active { transform: scale(0.98); } .option:focus-visible { outline: 1.5px solid var(--accent-secondary); outline-offset: 2px; } /* F4: leuchtende Linie zeichnet sich unten, Fläche steigt wie ein Area-Chart (langsamer + sanfte easeOutCubic-Kurve = smoother, cleaner) */ .option::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1; background: #aabcff; filter: drop-shadow(0 0 5px var(--accent-secondary)); transform: scaleX(0); transform-origin: left center; transition: transform 460ms var(--ease-smooth); } .option::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, color-mix(in srgb, var(--accent-primary) 26%, transparent), transparent 78%); transform: scaleY(0); transform-origin: bottom center; transition: transform 540ms var(--ease-smooth) 70ms; } .option.is-selected::after { transform: scaleX(1); } .option.is-selected::before { transform: scaleY(1); } .option.is-selected { border-color: var(--accent-secondary); box-shadow: 0 0 22px -8px color-mix(in srgb, var(--accent-secondary) 75%, transparent); } /* Chip: Buchstabe morpht zu ✓ (Blur-Crossfade) + pingt einmal */ .option__idx { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-content: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; color: var(--accent-secondary); border: 1.5px solid color-mix(in srgb, var(--accent-secondary) 55%, transparent); background: color-mix(in srgb, var(--accent-primary) 10%, transparent); transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform 200ms var(--ease-out); } .option__idx i { grid-area: 1 / 1; font-style: normal; display: grid; place-content: center; transition: opacity 180ms var(--ease-out), filter 180ms var(--ease-out); } .option__check { opacity: 0; filter: blur(3px); } .option.is-selected .option__idx { background: var(--accent-primary); border-color: transparent; color: #fff; transform: scale(1.08); animation: optPing 460ms var(--ease-out) 1; } .option.is-selected .option__letter { opacity: 0; filter: blur(3px); } .option.is-selected .option__check { opacity: 1; filter: blur(0); } @keyframes optPing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-secondary) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } } /* Navigation: Hint + Zurück/Weiter; Weiter = Ghost, füllt sich nach Auswahl */ .quiz-nav { margin-top: auto; padding-top: var(--space-3); position: relative; z-index: 1; display: grid; gap: 0.7rem; } .quiz-nav__hint { text-align: center; font-size: 0.6875rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-hint); } .quiz-nav__row { display: flex; align-items: center; gap: var(--space-2); } .quiz-nav__row .btn--ghost { flex: 0 0 auto; } .quiz-nav__row .btn { flex: 1; width: auto; padding-block: 1rem; font-size: 1rem; } .btn--next { background: transparent; border: 1.5px solid var(--border-2); color: var(--text-hint); transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out), color 300ms var(--ease-out), box-shadow 300ms var(--ease-out), transform 160ms var(--ease-out); } .btn--next:disabled { opacity: 1; cursor: not-allowed; } /* Ghost IST der Disabled-Look */ .btn--next .arrow { opacity: 0; transform: translateX(-6px); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); } .btn--next.is-ready { background: var(--accent-primary); border-color: transparent; color: #fff; box-shadow: 0 0 26px -8px color-mix(in srgb, var(--accent-secondary) 80%, transparent); } .btn--next.is-ready .arrow { opacity: 1; transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .option { animation: none; } .option::before, .option::after { transition: none; } .option.is-selected .option__idx { animation: none; } } /* ============================================================ END-SCREENS ============================================================ */ .endscreen { text-align: center; display: grid; gap: var(--space-2); justify-items: center; } .endscreen h2 { font-family: var(--font-headline); font-size: var(--fs-h1); font-weight: 600; /* DM Sans = neue Logo-Schrift (Archivo raus) */ line-height: 1.25; letter-spacing: 0.2px; text-transform: uppercase; text-wrap: balance; margin-top: var(--space-1); } .endscreen h2:focus { outline: none; } .endscreen p { color: var(--text-muted); max-width: 44ch; } /* Keyword-Hervorhebung im Fliesstext: Signal-Blue + weicher Glow. Zwei gestaffelte text-shadows statt einem - der enge Kern gibt die Leuchtkraft, der weite Hauch den Abstrahl. Keine neue Farbe, alles aus --accent-secondary abgeleitet. */ .kw { color: var(--accent-secondary); font-weight: 600; text-shadow: 0 0 8px color-mix(in srgb, var(--accent-secondary) 55%, transparent), 0 0 22px color-mix(in srgb, var(--accent-secondary) 30%, transparent); } .endscreen .btn { margin-top: var(--space-1); } .endscreen__note { font-size: 0.75rem; line-height: 1.7; color: var(--text-muted); max-width: 46ch; } /* Datenschutz-Hinweis direkt am WhatsApp-Handoff (Transparenz, kein Blocker) */ .endscreen__legal { font-size: 0.6875rem; line-height: 1.6; color: var(--text-hint); max-width: 46ch; margin-top: var(--space-1); } .endscreen__legal a { color: var(--accent-secondary); text-decoration: underline; text-underline-offset: 2px; } /* Status-Badge: Punkt + dünner Rahmen in Statusfarbe */ .status { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; padding: 0.45rem 0.85rem; border-radius: 6px; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); background: color-mix(in srgb, currentColor 8%, transparent); } .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: statusPulse 2.8s var(--ease-out) infinite; } .status--qualified { color: var(--status-ok); } .status--nomatch { color: var(--status-reject); } .status--open { color: var(--accent-secondary); } /* Low-Intent: offen, kein Urteil */ /* Keyword-Box */ .kwbox { display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1.1rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border-2); } .kwbox__label { font-size: var(--fs-label); font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--text-hint); } .kwbox__value { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 1px; color: var(--accent-secondary); } /* Screen-Übergang: ruhig, kontrolliert */ .screen { animation: fadeUp var(--dur-slow) var(--ease-out) both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } [hidden] { display: none !important; } /* ---------- Footer ---------- */ .footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; /* viewport-fit=cover laesst Inhalt bis unter den iOS-Home-Indicator laufen -> unten zusaetzlich die Safe-Area freihalten. */ padding: var(--space-4) var(--space-3); padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); font-size: var(--fs-label); letter-spacing: 1px; color: var(--text-hint); } .footer a { color: var(--text-muted); text-decoration: none; } @media (hover: hover) and (pointer: fine) { .footer a:hover { color: var(--text); } } .footer__links { display: inline-flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; justify-content: center; } /* Touch-Ziele: die Fusszeilen-Links waren nur 21px hoch, also klar unter den 44px, die Apple HIG und WCAG 2.5.5 verlangen - auf dem Handy trifft man sie schlecht. Die Flaeche waechst per min-height/padding, die Schrift bleibt unveraendert. Der Zeilenabstand in .footer__legal wurde dafuer auf 0 gesetzt, sonst wuerde der Footer auseinanderfallen. */ .footer__legal a, .footer__legal .footer__cookie, .footer__links a, .footer__links .footer__cookie { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding-inline: 0.55rem; } /* Rechtstexte: zentriert untereinander, unten auf der Seite */ .footer__legal { display: flex; flex-direction: column; align-items: center; gap: 0; font-size: 0.8125rem; letter-spacing: 0.5px; } .footer__copy { margin: 0; color: var(--text-hint); } /* ---------- Opt-in am Quiz-Ende (letzter Schritt vor der Auswertung) ---------- Zwei harte Anforderungen: Eingabefelder MUESSEN 16px Schrift haben, sonst zoomt iOS Safari beim Fokussieren die ganze Seite rein. Und Fehlerfarbe ist Bernstein, NICHT Rot - Rot ist im Projekt dem Ticker vorbehalten. */ .optin { display: grid; gap: var(--space-2); margin-top: var(--space-3); } .optin__lead { color: var(--text-muted); font-size: 0.875rem; line-height: 1.6; margin-bottom: var(--space-1); } .optin__field { display: grid; gap: 0.35rem; } .optin__label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-hint); } .optin__input { width: 100%; padding: 0.85rem 0.9rem; font-family: var(--font-body); font-size: 1rem; /* 16px - verhindert iOS-Zoom */ color: var(--contrast-light); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); -webkit-appearance: none; appearance: none; } .optin__input::placeholder { color: var(--text-hint); } .optin__input:focus { outline: none; border-color: var(--accent-secondary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-secondary) 26%, transparent); } .optin__input.is-invalid { border-color: var(--status-reject); } .optin__err:empty { display: none; } .optin__err { color: var(--status-reject); font-size: 0.75rem; line-height: 1.5; } /* Telefonzeile: Laendervorwahl + Nummer. Das in Firefox nicht gerendert, ein Hintergrundbild ueberall. Strichfarbe = Wert von --contrast-light, Data-URIs koennen keine CSS-Variablen aufloesen. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1.4 5.6l3.7 3.7L12.6 1.7' fill='none' stroke='%23EAEBF7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 0 0; /* Haken waechst erst beim Setzen */ border: 1px solid var(--border-2); border-radius: 7px; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color var(--dur) var(--ease-out), background-size 170ms var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } /* Unsichtbare Trefferflaeche auf 44px (WCAG 2.5.5), ohne den Kasten optisch aufzublasen. Reicht nur in den Abstand zum Label hinein. */ .optin__cb::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .optin__cb:hover { border-color: color-mix(in srgb, var(--accent-secondary) 60%, var(--border-2)); } .optin__cb:checked { background-color: var(--accent-primary); border-color: var(--accent-primary); background-size: 14px 11px; box-shadow: 0 3px 14px color-mix(in srgb, var(--accent-primary) 38%, transparent); } .optin__cb:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-secondary) 30%, transparent); } .optin__cb.is-invalid { border-color: var(--status-reject); } .optin__cbLabel { font-size: 0.8125rem; line-height: 1.55; color: var(--text-muted); cursor: pointer; } .optin__cbLabel a { color: var(--accent-secondary); text-decoration: underline; text-underline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .optin__cb { transition: none; } } /* Honeypot: bewusst NICHT display:none - genau darauf pruefen viele Bots und ueberspringen das Feld dann. Aus dem Sichtfeld geschoben wirkt es fuer sie wie ein normales Eingabefeld, waehrend Menschen es nie zu sehen bekommen. */ .optin__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* Auf 320px teilen sich Vorwahl und Nummer ~220px - da zaehlt jedes Pixel, sonst wird der Platzhalter der Nummer angeschnitten. */ @media (max-width: 360px) { .optin__input { padding-left: 0.7rem; padding-right: 0.7rem; } .optin__consent { padding: 0.7rem; gap: 0.6rem; } } .optin .btn--next { margin-top: var(--space-2); } /* ---------- Rechtstext-Seiten (AGB): gegliederter Fliesstext ---------- */ .legal { margin-top: var(--space-4); color: var(--text-muted); font-size: var(--fs-body); line-height: 1.7; } .legal__meta { color: var(--text-hint); font-size: 0.75rem; } .legal h2 { margin-top: var(--space-4); margin-bottom: var(--space-2); font-family: var(--font-headline); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--contrast-light); } .legal p + p { margin-top: var(--space-2); } .legal strong { color: var(--contrast-light); font-weight: 600; } .legal a { color: var(--accent-secondary); text-underline-offset: 2px; } /* NOT-FACEBOOK / NOT-GOOGLE Disclaimer (Wortlaut 1:1 aus dem LUX-Funnel). letter-spacing MUSS zurueckgesetzt werden: .footer setzt global 1px, was auf 11px Fliesstext auseinanderfaellt. Ebenso text-transform, damit der Block auf jeder Seite gleich rendert. */ .footer__disclaimer { max-width: 42rem; margin: 0 auto; display: grid; gap: 0.75rem; font-size: 0.6875rem; /* 11px, wie im LUX-Funnel */ line-height: 1.6; letter-spacing: normal; text-transform: none; color: var(--text-hint); text-align: center; text-wrap: pretty; } .footer__disclaimer b { font-weight: 600; color: var(--text-muted); } /* Wistia-Hinweis im Footer: gleiche Rolle und Groesse wie der Disclaimer. letter-spacing/text-transform zuruecksetzen, .footer setzt beides global. */ .footer .video-notice { max-width: 42rem; margin: 0 auto; font-size: 0.6875rem; line-height: 1.6; letter-spacing: normal; text-transform: none; color: var(--text-hint); text-align: center; text-wrap: pretty; } .footer .video-notice a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; } /* ---------- Desktop (Erweiterung, Max-Width bleibt 640) ---------- */ @media (min-width: 768px) { :root { --fs-h1: 2.0625rem; /* 33px */ } .container { padding: var(--space-4) var(--space-4); } .quiz-card { padding: var(--space-4); } .kpi__num { font-size: 1.625rem; } .kpi__label { font-size: 0.625rem; } } /* ---------- Reduced Motion (überall respektieren) ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; } .ticker__track { animation: none !important; transform: none !important; } } /* ---------- 12. Quiz-Verlauf (C1: Dots + Serien-Text) ---------- Persistente 6-Dot-Reihe unter der Karte. Füllt sich ERST nach 'Weiter' (Auswahl ändert hier nichts), Serien-Text variiert pro Stand. */ .quiz-verlauf { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .quiz-verlauf__label { display: block; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-hint); margin-bottom: 0.75rem; } .quiz-verlauf__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .quiz-verlauf__dots { display: flex; gap: 0.3rem; flex: 0 0 auto; } /* fix: Dots brechen nie um, der Text rechts wrappt */ .vdot { width: 16px; height: 16px; /* kompakt: 9 Dots + Serien-Text in EINER Reihe bei 390px */ border-radius: 50%; border: 2px solid var(--border-2); display: grid; place-content: center; font-size: 0.625rem; line-height: 1; color: transparent; transition: border-color 240ms var(--ease-out), color 240ms var(--ease-out), transform 240ms var(--ease-out); } .vdot.is-current { border-color: var(--accent-secondary); } .vdot.is-done { border-color: var(--ticker-up); color: var(--ticker-up); } .vdot.is-done::before { content: "✓"; } .vdot.just { animation: vdotPop 260ms var(--ease-out); } @keyframes vdotPop { from { transform: scale(0.95); opacity: 0.4; } 60% { transform: scale(1.06); } to { transform: scale(1); opacity: 1; } } .quiz-verlauf__msg { font-size: 0.8125rem; font-weight: 600; line-height: 1.25; color: var(--ticker-up); text-align: right; min-width: 0; /* darf schrumpfen + umbrechen — nie clippen */ } .quiz-verlauf__msg.just { animation: vmsgIn 280ms var(--ease-smooth); } @keyframes vmsgIn { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .vdot.just, .quiz-verlauf__msg.just { animation: none; } } /* ---------- Schimmerndes Schluesselwort in Signal-Blue ---------- Wie .shine auf der H1, aber zwei Unterschiede: die Grundfarbe ist der Akzent selbst (nicht der helle Grundton), und der Sweep laeuft sofort und dauerhaft - hier gibt es kein decrypt.js, das ihn freischaltet. background-clip:text braucht -webkit-text-fill-color:transparent; ohne Support waere der Text damit unsichtbar, deshalb steht die volle blaue Farbe ausserhalb und der Clip-Teil nur im @supports-Block. */ .shine-blue { font-weight: 700; color: var(--accent-secondary); text-shadow: 0 0 10px color-mix(in srgb, var(--accent-secondary) 40%, transparent), 0 0 26px color-mix(in srgb, var(--accent-secondary) 22%, transparent); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .shine-blue { /* Heller Kamm wandert durch das Signal-Blue - gleiche Geometrie und gleicher Takt wie der Sweep auf der Headline. */ background-image: linear-gradient(100deg, var(--accent-secondary) 0%, var(--accent-secondary) 40%, color-mix(in srgb, var(--contrast-light) 82%, var(--accent-secondary)) 50%, var(--accent-secondary) 60%, var(--accent-secondary) 100%); background-size: 300% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shineSweep 4.6s var(--ease-smooth) 500ms infinite; } } @media (prefers-reduced-motion: reduce) { .shine-blue { animation: none; } } /* ---------- 13. Playbook-Playlist (gesperrte Lektionen) ---------- Steht an der Stelle der frueheren Proof-Sektion. Ein Lauflicht wandert dauerhaft ueber die sechs Zeilen: 2,2s pro Zeile, 13,2s pro Runde. Ohne JS - alle Zeilen teilen dieselben Keyframes und werden nur ueber animation-delay: --i * 2.2s gegeneinander versetzt. Animiert werden ausschliesslich opacity und transform (Compositor), nie Farbe/Groesse/Position: der Helligkeitswechsel von Titel, Laufzeit und Schloss laeuft deshalb ueber opacity auf voller Textfarbe, nicht ueber einen color-Wechsel. Damit gibt es keinen Layout-Shift. */ .playlist { margin-top: clamp(3.5rem, 9vh, 5rem); } .playlist__headline { font-family: var(--font-headline); font-size: 1.3125rem; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; text-transform: uppercase; text-wrap: balance; color: var(--contrast-light); text-align: center; } .playlist__meta { margin-top: 0.45rem; font-size: 0.8125rem; line-height: 1.55; color: var(--text-muted); text-align: center; } .playlist__list { margin-top: var(--space-3); list-style: none; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; } /* Grid statt Flex: die Laufzeit-Spalte haelt so ueber alle Zeilen dieselbe Breite, auch wenn ein Titel umbricht. */ .playlist__row { position: relative; isolation: isolate; display: grid; align-items: center; text-align: left; /* .hero zentriert - Playlist-Zeilen nicht */ grid-template-columns: auto 1fr auto auto; gap: 0 0.75rem; padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--border); } .playlist__row:last-child { border-bottom: 0; } /* Aktiv-Highlight. Eigenes Pseudo-Element, damit nur seine opacity laeuft und nicht der background der Zeile selbst (der waere nicht animierbar, ohne eine Farbe zu interpolieren). */ .playlist__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--surface-2) 88%, var(--accent-secondary)); opacity: 0; animation: plGlow 13.2s linear infinite; animation-delay: calc(var(--i) * 2.2s); } /* Akzentbalken links: waechst von oben nach unten ein (transform-origin: top). */ .playlist__row::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent-secondary); transform: scaleY(0); transform-origin: top; animation: plBar 13.2s linear infinite; animation-delay: calc(var(--i) * 2.2s); } .playlist__num { font-size: 0.625rem; font-weight: 600; letter-spacing: 2px; color: var(--text-hint); font-variant-numeric: tabular-nums; } /* Volle Textfarbe, gedimmt per opacity - so ist der Aktiv-Zustand ein reiner Compositor-Wechsel. */ .playlist__title { font-size: 0.875rem; line-height: 1.45; color: var(--contrast-light); opacity: 0.62; text-wrap: pretty; animation: plTitle 13.2s linear infinite; animation-delay: calc(var(--i) * 2.2s); } .playlist__time { font-size: 0.8125rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0.6; animation: plMeta 13.2s linear infinite; animation-delay: calc(var(--i) * 2.2s); } .playlist__lock { display: flex; color: var(--text-hint); opacity: 0.6; animation: plMeta 13.2s linear infinite; animation-delay: calc(var(--i) * 2.2s); } .playlist__lock svg { width: 15px; height: 15px; } /* Ein Zyklus = 6 x 2,2s. Ein Zeilen-Fenster sind 16.667%: kurz rein (2%), halten bis 14%, wieder raus. Der Rest der Runde bleibt inaktiv. */ @keyframes plGlow { 0% { opacity: 0; } 2% { opacity: 1; } 14% { opacity: 1; } 16.667% { opacity: 0; } 100% { opacity: 0; } } @keyframes plBar { 0% { transform: scaleY(0); } 2% { transform: scaleY(1); } 14% { transform: scaleY(1); } 16.667% { transform: scaleY(0); } 100% { transform: scaleY(0); } } @keyframes plTitle { 0% { opacity: 0.62; } 2% { opacity: 1; } 14% { opacity: 1; } 16.667% { opacity: 0.62; } 100% { opacity: 0.62; } } @keyframes plMeta { 0% { opacity: 0.6; } 2% { opacity: 0.9; } 14% { opacity: 0.9; } 16.667% { opacity: 0.6; } 100% { opacity: 0.6; } } /* Hover haelt das Lauflicht an - wer liest, soll nicht vom Wandern abgelenkt werden. Trifft bewusst alle vier animierten Ebenen. */ .playlist:hover .playlist__row::before, .playlist:hover .playlist__row::after, .playlist:hover .playlist__title, .playlist:hover .playlist__time, .playlist:hover .playlist__lock { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .playlist__row::before, .playlist__row::after, .playlist__title, .playlist__time, .playlist__lock { animation: none; } /* Ohne Lauflicht darf nichts dauerhaft gedimmt bleiben - sonst waere die Liste schlechter lesbar als noetig. */ .playlist__title { opacity: 1; } .playlist__time, .playlist__lock { opacity: 0.85; } .playlist__row::before { opacity: 0; } } /* ---------- 13. Proof-Sektion (P5 Audit-Log) + Lightbox ---------- Nüchterne Beweisakte unter dem CTA: Logbuch-Zeilen mit Thumbnail, extrahierten Daten, Ergebnis in Ticker-Grün. Jede Zeile öffnet den Original-Screenshot in der Lightbox (Zoom-Badge als Affordance). */ .proof { margin-top: clamp(3.5rem, 9vh, 5rem); text-align: left; } /* deutlicher Abstand zum CTA */ /* Headline + Subline zentriert; die Ledger-Zeilen darunter bleiben bewusst linksbuendig (.proof erbt text-align:left). */ .proof__headline { font-family: var(--font-headline); font-size: 1.3125rem; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; text-transform: uppercase; text-wrap: balance; color: var(--contrast-light); text-align: center; } .proof__sub { margin-top: 0.45rem; font-size: 0.8125rem; line-height: 1.55; color: var(--text-muted); max-width: 48ch; margin-inline: auto; /* auto noetig, sonst klebt der 48ch-Block links */ text-align: center; text-wrap: pretty; } /* Zweiter CTA unter den Trade-Logs: .btn ist inline-flex, damit greift margin-inline:auto nicht. display:flex macht ihn block-level -> zentriert. */ .proof__cta { display: flex; } .ledger { margin-top: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; } .ledger__group { padding: 0.5rem 0.9rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; /* 10px: 9px war zu klein */ color: var(--text-hint); background: color-mix(in srgb, var(--surface-2) 72%, transparent); border-bottom: 1px solid var(--border); } .ledger__row { display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--border); transition: background-color var(--dur) var(--ease-out); } .ledger__row:last-child { border-bottom: 0; } @media (hover: hover) and (pointer: fine) { .ledger__row:hover { background: var(--surface-2); } } .ledger__row:focus-visible { outline: 1.5px solid var(--accent-secondary); outline-offset: -2px; } .ledger__num { flex: 0 0 auto; width: 16px; font-size: 0.625rem; letter-spacing: 1px; color: var(--text-hint); font-variant-numeric: tabular-nums; } .ledger__thumb { position: relative; flex: 0 0 auto; width: 54px; height: 42px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-2); background: var(--surface-2); } .ledger__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: left center; } .ledger__thumb--dash img { object-position: left top; } .ledger__thumb--phone img { object-position: center 12%; } /* Zoom-Badge: signalisiert pro Zeile, dass der Screenshot vergrößerbar ist */ .ledger__zoom { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-content: center; background: rgba(7, 7, 16, 0.88); border: 1px solid var(--border-2); color: var(--text-muted); } .ledger__zoom svg { width: 9px; height: 9px; } @media (hover: hover) and (pointer: fine) { .ledger__row:hover .ledger__zoom { color: var(--accent-secondary); border-color: var(--accent-secondary); } } .ledger__body { flex: 1; min-width: 0; } .ledger__title { font-size: 0.8125rem; font-weight: 600; color: var(--contrast-light); letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ledger__meta { margin-top: 1px; font-size: 0.625rem; letter-spacing: 0.4px; color: var(--text-muted); } .ledger__pct { flex: 0 0 auto; margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; color: var(--ticker-up); white-space: nowrap; font-variant-numeric: tabular-nums; } .ledger__chev { flex: 0 0 auto; color: var(--text-hint); } .ledger__chev svg { width: 12px; height: 12px; } .lightbox { position: fixed; inset: 0; z-index: 60; display: none; } .lightbox.is-open { display: block; } .lightbox__scrim { position: absolute; inset: 0; background: rgba(2, 2, 6, 0.965); opacity: 0; transition: opacity 240ms var(--ease-out); } .lightbox__panel { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(10px); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); } .lightbox.is-visible .lightbox__scrim { opacity: 1; } .lightbox.is-visible .lightbox__panel { opacity: 1; transform: none; } .lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0.8rem 1rem; } .lightbox__caption { font-size: 0.6875rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); min-width: 0; } .lightbox__close { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-content: center; background: rgba(7, 7, 16, 0.85); border: 1px solid var(--border-2); color: var(--text); transition: border-color var(--dur) var(--ease-out); } .lightbox__close svg { width: 14px; height: 14px; } @media (hover: hover) and (pointer: fine) { .lightbox__close:hover { border-color: var(--accent-secondary); } } .lightbox__close:focus-visible { outline: 1.5px solid var(--accent-secondary); outline-offset: 2px; } .lightbox__body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; display: grid; place-items: center; padding: 0 0 1.4rem; touch-action: pan-x pan-y pinch-zoom; } .lightbox__body img { max-width: 94vw; max-height: 76vh; width: auto; height: auto; } /* Pan-Modus: breite Dashboards auf Mobile horizontal scrollbar */ .lightbox--pan .lightbox__body { display: block; padding: 4vh 0 1.4rem; } .lightbox--pan .lightbox__body picture { display: block; width: max-content; padding-inline: 4vw; } .lightbox--pan .lightbox__body img { height: min(70vh, 720px); width: auto; max-width: none; } .lightbox__hint { position: absolute; left: 50%; translate: -50% 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); display: none; padding: 0.32rem 0.7rem; border-radius: 999px; background: rgba(7, 7, 16, 0.85); border: 1px solid var(--border-2); font-size: 0.625rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; /* 10px: 9px war zu klein */ color: var(--text-muted); pointer-events: none; white-space: nowrap; } .lightbox--pan .lightbox__hint { display: block; } /* ---------- 14. Auswertungs-Beat (Regelwerk-Abgleich, nach F9) ---------- Zwischen-Beat zwischen "Auswerten" und Verdict: 5 Kriterien checken nacheinander ein — nur WAHRE, aus den Antworten abgeleitete Werte ("Dokumentiert. Nicht inszeniert."). Läuft im Quiz-Card-Stage. */ .eval { flex: 1; display: flex; flex-direction: column; position: relative; z-index: 1; } .eval__hint { margin-top: 0.6rem; font-size: 0.75rem; line-height: 1.5; color: var(--text-muted); } .eval-rows { margin-block: auto; padding-block: var(--space-3); display: grid; gap: 0.85rem; } .eval-row { display: flex; align-items: center; gap: 0.8rem; opacity: 0; transform: translateY(6px); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); } .eval-row.is-in { opacity: 1; transform: none; } /* Chip in option__idx-Ästhetik: Punkt morpht zu ✓ (Blur-Crossfade) */ .eval-row__idx { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-content: center; font-size: 0.75rem; font-weight: 700; color: var(--accent-secondary); border: 1.5px solid color-mix(in srgb, var(--accent-secondary) 45%, transparent); background: color-mix(in srgb, var(--accent-primary) 8%, transparent); transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 200ms var(--ease-out); } .eval-row__idx i { grid-area: 1 / 1; font-style: normal; display: grid; place-content: center; transition: opacity 160ms var(--ease-out), filter 160ms var(--ease-out); } .eval-row__check { opacity: 0; filter: blur(3px); } .eval-row.is-checked .eval-row__idx { background: var(--accent-primary); border-color: transparent; color: #fff; transform: scale(1.06); } .eval-row.is-checked .eval-row__dash { opacity: 0; filter: blur(3px); } .eval-row.is-checked .eval-row__check { opacity: 1; filter: blur(0); } .eval-row__body { display: grid; min-width: 0; } .eval-row__label { font-size: 0.8125rem; font-weight: 500; color: var(--contrast-light); line-height: 1.3; } .eval-row__src { font-size: 0.625rem; letter-spacing: 0.4px; color: var(--text-hint); } .eval-row__val { margin-left: auto; flex: 0 0 auto; font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.2px; color: var(--contrast-light); } /* ---------- 12. Consent-Banner (Statistik-Opt-in, DSGVO) ---------- Gebrandet: Near-Black-Surface, Cyber-/Signal-Blue-Akzent, DM Sans. Markup wird von public/consent.js injiziert. */ .mg-consent { position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 130%); width: min(720px, calc(100% - 24px)); z-index: 9000; margin-bottom: 12px; transition: transform 340ms var(--ease-out); } .mg-consent.is-open { transform: translate(-50%, 0); } .mg-consent__inner { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(2, 3, 12, 0.6), 0 0 0 1px rgba(46, 0, 255, 0.08); padding: var(--space-3); display: grid; gap: var(--space-3); } .mg-consent__title { font-size: 0.9375rem; font-weight: 600; color: var(--contrast-light); } .mg-consent__body { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.55; margin-top: 6px; } .mg-consent__body b { color: var(--contrast-light); font-weight: 600; } .mg-consent__body a { color: var(--accent-secondary); text-decoration: underline; text-underline-offset: 2px; } .mg-consent__toggle { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; cursor: pointer; user-select: none; } .mg-consent__toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .mg-consent__track { width: 40px; height: 22px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-2); position: relative; flex: 0 0 auto; transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out); } .mg-consent__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: transform 200ms var(--ease-out), background 200ms var(--ease-out); } .mg-consent__toggle input:checked + .mg-consent__track { background: var(--accent-primary); border-color: transparent; } .mg-consent__toggle input:checked + .mg-consent__track::after { transform: translateX(18px); background: #fff; } .mg-consent__toggle input:focus-visible + .mg-consent__track { outline: 2px solid var(--accent-secondary); outline-offset: 2px; } .mg-consent__toggle-label { font-size: 0.8125rem; color: var(--contrast-light); font-weight: 500; } .mg-consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); } .mg-consent__btn { flex: 1 1 auto; min-width: 130px; padding: 0.7rem 1rem; border-radius: var(--radius); font-size: 0.8125rem; font-weight: 600; font-family: inherit; cursor: pointer; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--contrast-light); transition: filter 150ms, border-color 150ms, background 150ms, transform 120ms; } .mg-consent__btn--ghost { background: transparent; color: var(--text-muted); } .mg-consent__btn--ghost:hover { color: var(--contrast-light); border-color: var(--text-muted); } .mg-consent__btn--save:hover { border-color: var(--accent-secondary); } .mg-consent__btn--accept { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); border-color: transparent; color: #fff; } .mg-consent__btn--accept:hover { filter: brightness(1.08); } .mg-consent__btn:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 2px; } .mg-consent__btn:active { transform: translateY(1px); } .footer__cookie { background: none; border: none; font: inherit; color: var(--text-muted); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; } .footer__cookie:hover { color: var(--contrast-light); } @media (min-width: 640px) { .mg-consent__inner { grid-template-columns: 1fr auto; align-items: center; } .mg-consent__actions { flex-direction: column; min-width: 184px; } .mg-consent__btn { min-width: 0; } } @media (prefers-reduced-motion: reduce) { .mg-consent { transition: none; } .mg-consent__track::after { transition: none; } } /* ---------- 15. Stimmen-Seite (stimmen.html) ---------- Mitglieder-Belege: oben Zitat-Karten (Zitat + Original-Screenshot als Thumb), darunter dieselbe Ledger-Bauform wie die fruehere Proof-Sektion. Beide oeffnen den Screenshot ueber die Lightbox aus vsl.js ([data-zoom]). Nur bestehende Tokens, keine neuen Farben. */ .stimmen { margin-top: clamp(3.5rem, 9vh, 5rem); text-align: left; } .stimmen--end .proof__sub { margin-bottom: var(--space-1); } .voices { margin-top: var(--space-3); display: grid; gap: 0.75rem; } .voice { display: flex; align-items: stretch; gap: var(--space-2); width: 100%; text-align: left; padding: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); position: relative; overflow: hidden; isolation: isolate; transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); } /* Akzentbalken links wie in der Playlist, hier statisch beim Hover */ .voice::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent-secondary); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-slow) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .voice:hover { border-color: var(--border-2); background: var(--surface-2); } .voice:hover::after { transform: scaleY(1); } .voice:hover .ledger__zoom { color: var(--accent-secondary); border-color: var(--accent-secondary); } } .voice:active { transform: scale(0.99); } .voice:focus-visible { outline: 1.5px solid var(--accent-secondary); outline-offset: 2px; } .voice__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 0.75rem; } .voice__quote { font-size: 0.9375rem; line-height: 1.5; font-weight: 500; color: var(--contrast-light); text-wrap: pretty; } .voice__meta { font-size: var(--fs-label); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-hint); } .voice__meta b { color: var(--accent-secondary); font-weight: 600; } .voice__thumb { position: relative; flex: 0 0 auto; width: 64px; height: 96px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-2); background: var(--surface-2); } .voice__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* Ledger-Zeilen ohne Ergebniszahl (Kalender): Label statt Gruen */ .ledger__pct--muted { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-label); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-hint); } .stimmen__note { margin-top: var(--space-2); font-size: 0.75rem; line-height: 1.55; color: var(--text-hint); text-align: center; text-wrap: pretty; } @media (min-width: 768px) { .voice__quote { font-size: 1rem; } .voice__thumb { width: 76px; height: 112px; } } /* Ledger-Zeilen sind