/* ============================================================
Live-Webinar – Landingpage (live-webinar.php)
Eigenständiges Stylesheet. Keine Zeile aus style.css übernommen –
Änderungen hier dürfen den bestehenden Evergreen-Funnel nie treffen.
Gestaltungsidee: Die Seite erzählt denselben Weg wie ihr Inhalt –
von der einzelnen Melodiezeile zum vollen Orchestersatz. Das
wiederkehrende Bildmotiv sind Notenlinien ("Notensystem"): schmal
und leise im Hero (eine Stimme), voll ausgebaut in der Agenda
(ganzer Satz). Terrakotta-Doppellinien an den Bandübergängen stehen
für Taktstriche zwischen den Abschnitten.
Fix-Runde 1: heller Grund als Standard (Cream/Weiß im Wechsel, Sand
für zwei Bänder), nur das Schluss-Band bleibt dunkel (Rhythmus am
Ende der langen Seite). Überschriften in --color-dark, Fließtext in
--color-text. --color-accent bleibt der Akzent für Knöpfe, Ziffern,
Trennlinien und Countdown – wo Akzenttext auf hellem Grund die
4,5:1-Marke nicht sicher erreicht (kleine Beschriftungen), steht
stattdessen --color-dark, und akzentgefüllte Flächen mit hellem
Text (Knöpfe, Zeitstrahl-Kreise) sind groß/fett genug für die
Großtext-Schwelle (≥18,66px fett, WCAG 2.4.11-Ausnahme 3:1) bzw.
nutzen --color-accent-dark, das mit Weiß ~4,5:1 erreicht.
============================================================ */
:root {
/* Zusätzliche, seiteneigene Töne – abgeleitet aus tokens.css,
nicht dort verändert. */
--live-ink: #1c0f11; /* einziges verbleibendes Dunkel: Schluss-Band */
--live-line-dark: rgba(239, 236, 234, .16); /* Notenlinien auf dem dunklen Schluss-Band */
--live-line-light: rgba(37, 20, 23, .14); /* Notenlinien auf hellem Grund (Standard) */
--live-on-dark: #f4ede7;
--live-on-dark-sub: rgba(244, 237, 231, .74);
/* Nur für die großen Lösung-Zahlen (.lp-stat__zahl): --color-accent-dark erreicht auf
dem tatsächlichen Grund (--color-white im Lösung-Band) 4,51:1 — reicht knapp, aber
auf --color-cream nur 3,84:1 (reicht nur über die Großtext-Ausnahme, nicht für
4,5:1). Dieser Wert ist derselbe Terrakotta-Ton, gleichmäßig Richtung Schwarz
skaliert (R:G:B-Verhältnis von --color-accent-dark unverändert = 196:84:45, also
exakt dieselbe Farbrichtung, nur dunkler — bleibt Terrakotta statt ins Braune zu
kippen): #ac4a28 erreicht 5,58:1 auf --color-white und, als konservativerer Worst
Case falls der Grund je wechselt, 4,74:1 auf --color-cream — beides rechnerisch mit
der WCAG-Formel geprüft (docker/tests-live.php prüft ebenfalls beide gegen 4,5:1).
--color-accent-dark bleibt unverändert, das wird an vielen anderen Stellen der
Seite genutzt. */
--live-stat-ink: #ac4a28;
/* Space Mono ist am 23.09.2026 mit der Serif zusammen entfallen: die Seite laeuft
durchgehend in Instrument Sans. Die frueheren Mono-Stellen (Kicker, Beschriftungen,
Ziffern) behalten ihre Sperrung und Grossschreibung, erben aber die Familie. */
/* Eigene Spaltenbreite: --maxw aus tokens.css (1080px) gilt weiter fuer index.php und
darf nicht angefasst werden – der bestehende Funnel haengt daran. Diese Seite ist
seit dem 23.09.2026 auf Wunsch etwas breiter. */
--live-maxw: 1200px;
/* Seit 23.09.2026 läuft die Seite durchgehend in Instrument Sans – auch die
Überschriften. Das Token bleibt als Name bestehen (es steht an mehreren Stellen),
zeigt aber auf dieselbe Familie wie --font-head. Die Serif-Schrift ist damit
vollständig raus, auch aus dem Google-Fonts-Aufruf in live-webinar.php. */
--font-display: 'Instrument Sans', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
}
/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--color-text);
background: var(--color-cream);
line-height: var(--body-line);
min-width: 320px;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
font-family: var(--font-head); font-weight: var(--head-weight); line-height: var(--head-line);
letter-spacing: var(--head-spacing); margin: 0; color: var(--color-dark);
}
/* Hero-Titel (h1) und Bandüberschriften (h2) sind dieselbe Familie wie alles andere,
heben sich aber über Gewicht und Größe ab – 700 ist das schwerste Gewicht, das der
Schriftaufruf lädt. */
h1, h2 {
font-weight: 700; line-height: 1.08; letter-spacing: -0.015em;
}
p { margin: 0; }
button { font-family: inherit; }
.lp-visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* ---------- Bänder & Container ---------- */
.lp-band { position: relative; padding: clamp(52px, 9vw, 108px) 0; overflow: hidden; }
.lp-band--cream { background: var(--color-cream); color: var(--color-text); }
.lp-band--white { background: var(--color-white); color: var(--color-text); }
.lp-band--sand { background: var(--color-sand); color: var(--color-text); }
/* Einziges dunkles Band der Seite (Schluss-Block) – bewusste Ausnahme fuer Rhythmus. */
.lp-band--ink { background: var(--live-ink); color: var(--live-on-dark); }
.lp-band--ink h1, .lp-band--ink h2, .lp-band--ink h3, .lp-band--ink h4 { color: var(--live-on-dark); }
.lp-container { width: 100%; max-width: var(--live-maxw); margin: 0 auto; padding: 0 20px; }
/* Taktstrich zwischen den Bändern: schmale + kräftige Linie, wie am Ende eines Systems. */
.lp-barline { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; pointer-events: none; }
.lp-barline::before, .lp-barline::after { content: ''; position: absolute; left: 0; right: 0; background: var(--color-accent); }
.lp-barline::before { top: 0; height: 1.5px; opacity: .55; }
.lp-barline::after { bottom: 0; height: 3px; }
/* Notensystem-Motiv (korrigiert 23.09.2026): Ein Notensystem hat IMMER genau fünf Linien,
und die liegen eng beieinander. Vorher zeichnete die Regel je nach Abschnitt drei bis fünf
Linien über 120–220px Höhe – also 30 bis 44px Abstand. Das sah nach Linienpapier aus, nicht
nach Noten. Jetzt ist ein .lp-staff genau ein System: fünf Linien im Abstand --lp-abstand.
Wo es voller wirken soll, stehen ZWEI Systeme übereinander (wie eine Akkolade), statt die
Linien eines Systems zu vermehren.
Auf hellem Grund (Standardfall) dunkle, sehr leise Linien; im einzigen dunklen Band
(Schluss) hell auf dunkel, sonst wären sie dort unsichtbar. */
.lp-staff {
position: absolute; pointer-events: none; opacity: .55;
--lp-line: var(--live-line-light);
--lp-abstand: 9px; /* Abstand zweier Notenlinien */
--lp-luft: 26px; /* Abstand zwischen zwei Systemen */
/* Fünf Linien = vier Zwischenräume plus die letzte Linie selbst. */
--lp-system: calc(4 * var(--lp-abstand) + 1px);
--lp-notenlinien: repeating-linear-gradient(
to bottom, var(--lp-line) 0 1px, transparent 1px var(--lp-abstand)
);
background-image: var(--lp-notenlinien);
background-size: 100% var(--lp-system);
background-repeat: no-repeat;
height: var(--lp-system);
}
.lp-band--ink .lp-staff { --lp-line: var(--live-line-dark); }
/* Zwei Systeme übereinander – dieselbe Linienregel, nur zweimal gesetzt. */
.lp-staff--doppelt {
height: calc(2 * var(--lp-system) + var(--lp-luft));
background-image: var(--lp-notenlinien), var(--lp-notenlinien);
background-size: 100% var(--lp-system), 100% var(--lp-system);
background-position: 0 0, 0 calc(var(--lp-system) + var(--lp-luft));
}
.lp-staff--hero { top: 14%; right: -6%; width: min(60vw, 620px); }
.lp-staff--probleme{ top: 10%; left: -8%; width: min(50vw, 480px); }
.lp-staff--loesung { bottom: 6%; right: -10%; width: min(55vw, 520px); }
.lp-staff--agenda { top: 8%; left: -6%; width: min(46vw, 420px); }
.lp-staff--schluss { bottom: 8%; left: 50%; transform: translateX(-50%); width: min(80vw, 760px); }
/* ---------- Eyebrow / Kicker (Rehearsal-Mark-Optik) ----------
Text bewusst in --color-dark statt Akzentfarbe: Akzent (auch die dunklere Variante)
erreicht bei dieser Schriftgröße auf hellem Grund die 4,5:1-Marke nicht zuverlässig.
Der kurze Strich davor darf Akzentfarbe tragen – reine Dekoration, kein Text. */
.lp-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--color-dark);
}
.lp-band--ink .lp-eyebrow { color: var(--live-on-dark); }
.lp-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--color-accent); opacity: .9; }
/* Mittige Fassung im Hero-Kopf: Strich links UND rechts. */
.lp-eyebrow--mitte { justify-content: center; text-align: center; }
.lp-eyebrow--mitte::after { content: ''; width: 18px; height: 1px; background: var(--color-accent); opacity: .9; flex-shrink: 0; }
.lp-eyebrow--mitte::before { flex-shrink: 0; }
/* Hero-Kicker: Der **fett** markierte Teil ("Kostenloses Live-Webinar") wird zum gefüllten
Schild, damit er sofort ins Auge fällt. Weiß auf --color-accent-dark hält ~4,5:1. Die
Striche links und rechts entfallen hier, das Schild trägt die Zeile allein. */
.lp-hero__kicker { flex-wrap: wrap; row-gap: 10px; }
.lp-hero__kicker::before, .lp-hero__kicker::after { display: none; }
.lp-hero__kicker strong {
display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
background: var(--color-accent-dark); color: var(--color-white);
font-weight: 700; letter-spacing: .1em;
padding: 7px 14px 7px 12px; border-radius: 999px;
box-shadow: 0 6px 16px rgba(196, 84, 45, .28);
}
.lp-hero__kicker strong::before { /* Live-Punkt */
content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-white);
box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: lp-live-puls 1.8s ease-out infinite;
}
@keyframes lp-live-puls {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .lp-hero__kicker strong::before { animation: none; } }
/* ---------- Dunkles Band ganz oben ----------
Verknappungshinweis über dem Hero. Volle Breite, damit es wie ein Aushang wirkt und
nicht wie ein Teil des Inhalts. */
.lp-banner {
background: var(--live-ink); color: var(--live-on-dark);
text-align: center; font-weight: 600; font-size: .95rem; letter-spacing: .01em;
padding: 13px 24px;
}
/* ---------- Hero ----------
Kopf (Kicker/Titel/Fettzeile/Text) mittig über die volle Breite, darunter zweispaltig:
Bildplatz + Vertrauenszeile links, Nutzenpunkte/Knopf/Countdown rechts. Auf schmalen
Fenstern rutscht die rechte Spalte nach oben – Botschaft und Anmelde-Knopf zuerst, das
Porträt ist Beiwerk (unveränderte Regel aus der ersten Fassung). */
.lp-hero { padding-top: clamp(26px, 4vw, 44px); overflow: hidden; }
.lp-hero__head {
position: relative; z-index: 1;
max-width: 68rem; margin: 0 auto; text-align: center;
display: flex; flex-direction: column; align-items: center;
}
.lp-hero__grid {
position: relative; z-index: 1; margin-top: clamp(36px, 5vw, 56px);
display: grid; grid-template-columns: minmax(240px, 420px) minmax(0, 1fr);
gap: clamp(36px, 5vw, 64px); align-items: start;
}
.lp-hero__body { min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.lp-hero__title {
margin-top: 18px;
font-size: clamp(2.3rem, 5vw, 4.1rem);
letter-spacing: -0.01em;
}
/* Fettzeile zwischen Titel und Fließtext: trägt das Versprechen, deshalb dunkler als der
Lead, aber klar unter der Titelgröße. Die Größe ist so gewählt, dass der Satz auf breiten
Fenstern in EINER Zeile steht (Wunsch 23.09.2026) – daher auch keine Zeilenbegrenzung
über max-width. Unterhalb von rund 900px Fensterbreite bricht er zwangsläufig um; dort
verteilt text-wrap die Zeilen gleichmäßig statt ein einzelnes Wort hängen zu lassen. */
.lp-hero__sub {
margin-top: 16px; font-size: 23px; line-height: 1.35;
color: var(--color-dark); text-wrap: balance;
}
/* Nutzenpunkte mit Haken. Die Haken sind dekorativ (aria-hidden), der Text steht
vollständig daneben. */
.lp-hero__punkte { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.lp-hero__punkte li { display: flex; gap: 14px; align-items: flex-start; }
.lp-hero__haken { flex-shrink: 0; margin-top: 2px; }
.lp-hero__punkte span { font-size: 1.02rem; line-height: 1.55; color: var(--color-text); }
.lp-hero__punkte strong { color: var(--color-dark); font-weight: 600; }
/* Terminzeile + Countdown direkt unter dem Knopf, mittig in der Spalte. */
.lp-hero__termin { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lp-hero__terminzeile { margin: 0; text-align: center; font-size: 1rem; color: var(--color-text); }
.lp-hero__terminzeile strong { color: var(--color-dark); font-weight: 600; }
/* Betonung im Titel: nur Farbe, nicht zusätzlich kursiv – der Titel ist ohnehin schon
fett. Großschrift (>=34px): die 3:1-Schwelle für großen Text reicht hier,
--color-accent-dark erreicht sie auf Cream sicher (~3,8:1). */
.lp-hero__title strong { color: var(--color-accent-dark); font-weight: 700; }
.lp-hero__lead { margin-top: 18px; font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: var(--color-text); max-width: 62ch; }
.lp-hero__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lp-hero__media { position: relative; }
/* Fakten als Chips direkt unterm Knopf – ersetzt im offenen Zustand die reine Textzeile
(lp-hero__note bleibt für den geschlossenen Zustand bestehen). */
.lp-hero__chips { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.lp-chip {
font-weight: 500; font-size: .78rem; letter-spacing: .04em;
color: var(--color-dark); background: var(--color-white);
border: 1px solid rgba(37, 20, 23, .14); border-radius: 999px; padding: 8px 14px;
}
/* Goldener Knopf – entspricht 1:1 .btn + .btn--gold aus assets/css/style.css ("BLOCK 4"),
hier eigenständig nachgebaut statt eingebunden (siehe Dateikopf: keine Zeile aus style.css
übernommen). Verlauf, Schrift, Innenabstand, Schatten und Hover-Zustand sind bewusst
identisch zur bestehenden Seite – das ist das prägendste Wiedererkennungsmerkmal des
Betreibers, siehe Angleichungsauftrag 23.09.2026. border-radius nutzt --radius statt der
vorher hier erfundenen Pillenform (999px), damit auch die Kontur der bestehenden Seite
entspricht (dort trägt .btn ebenfalls var(--radius)).
Kontrast-Hinweis (bewusst so gewollt, keine Abweichung erwünscht): weiße Schrift auf
diesem Gold-Verlauf erreicht nur 1,65:1 bis 2,40:1 (WCAG verlangt 4,5:1 für Fließtext).
Der Betreiber kennt diesen gemessenen Wert und hat sich am 23.09.2026 bewusst dafür
entschieden, ihn unverändert zu lassen – Gleichklang mit der bestehenden Seite wiegt hier
schwerer als die Kontrastmarke. Schriftfarbe deshalb nicht ändern, keine Alternative
vorschlagen. Einzige Ausnahme von den sonstigen Kontrastregeln dieser Seite. */
.lp-btn {
appearance: none; border: 0; cursor: pointer; text-decoration: none;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: linear-gradient(180deg, #f8c14a 0%, #ef911d 100%);
color: #fff; text-shadow: 0 1px 1px rgba(120,70,0,0.35);
font-weight: 600; font-size: 1.15rem;
padding: 18px 40px; border-radius: var(--radius); min-height: 52px;
box-shadow: 0 10px 26px rgba(239,145,29,0.40);
transition: background .16s ease, transform .16s ease;
}
.lp-btn:hover { background: linear-gradient(180deg, #f9c85b 0%, #f59b29 100%); transform: translateY(-2px); }
.lp-btn:active { transform: translateY(0); }
.lp-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.lp-btn--block { width: 100%; }
/* Countdown im Hero: ohne eigene Überschrift, die Terminzeile darüber sagt schon, worum es
geht. Sonst identisch zu den beiden anderen Countdowns. */
.lp-countdown--kompakt { margin: 0; }
.lp-countdown--kompakt .lp-countdown__grid { justify-content: center; }
/* ---------- Vertrauenszeile im Hero ----------
Baustein aus index.php: .hero__trust / .hero__trust-avatars (assets/css/style.css, Abschnitt
"Trust-Element unter dem Hero-Button") – dort eine dunkle, blurred Pille auf Foto-Hintergrund
mit Sternebewertung. Hier eigenständig für den hellen, zweispaltigen Hero nachgebaut statt
kopiert: keine Pille/kein Blur (der helle Cream-Grund braucht keinen eigenen Kontrastrahmen
wie das dunkle Hero-Foto dort). Übernommen ist die eigentliche Bausteinidee: überlappende,
echte Teilnehmerfotos direkt neben einem kurzen Vertrauenssatz.
Die Sterne kamen am 23.09.2026 auf ausdrückliche Entscheidung des Betreibers dazu (Canvas).
Ihre Anzahl steuert 'hero_trust_sterne' in der Inhaltsdatei, 0 blendet sie aus – die
Bewertungszahl daneben ist eine Werbeaussage und muss belegbar bleiben. */
.lp-hero__trust {
margin-top: 22px; display: flex; align-items: center; justify-content: center;
gap: 14px; flex-wrap: wrap; text-align: center;
}
.lp-hero__sterne { display: flex; justify-content: center; gap: 2px; margin-bottom: 4px; color: var(--live-stat-ink); }
.lp-hero__trust-avatars { display: flex; align-items: center; flex: 0 0 auto; }
.lp-hero__trust-avatars img {
width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
border: 2px solid var(--color-cream); box-shadow: var(--shadow);
margin-left: -12px;
}
.lp-hero__trust-avatars img:first-child { margin-left: 0; }
.lp-hero__trust-text { font-size: .88rem; color: var(--color-text); }
.lp-hero__trust-text strong { color: var(--color-dark); font-weight: 700; }
.lp-hero__note { margin-top: 16px; font-weight: 500; font-size: .85rem; letter-spacing: .02em; color: var(--color-text); }
/* ---------- Fakten + Countdown ---------- */
/* Flacher als die uebrigen Baender: Der Streifen traegt nur fuenf kurze Angaben und den
Countdown – volle Bandhoehe liess ihn wie eine leere Flaeche wirken (23.09.2026). */
.lp-fakten { padding: clamp(30px, 4.5vw, 52px) 0; }
.lp-fakten__inner { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 48px); align-items: center; justify-content: space-between; }
.lp-fakten__list { display: flex; flex-wrap: wrap; gap: 18px 34px; list-style: none; margin: 0; padding: 0; }
.lp-fakt { min-width: 108px; }
.lp-fakt__label { display: block; font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-dark); opacity: .62; }
.lp-fakt__wert { display: block; margin-top: 4px; font-weight: 600; font-size: 1.04rem; color: var(--color-dark); }
.lp-countdown { flex: 0 0 auto; }
.lp-countdown__titel { display: block; font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-dark); opacity: .62; margin-bottom: 8px; }
.lp-countdown__grid { display: flex; gap: 10px; }
.lp-countdown__unit {
min-width: 62px; text-align: center; background: var(--color-white); color: var(--color-dark);
border: 1px solid rgba(37, 20, 23, .1); border-radius: var(--radius); padding: 10px 6px 8px; box-shadow: var(--shadow);
}
/* Ziffern in Akzentfarbe: 1,5rem/700 ist "großer Text" (≥24px), die 3:1-Schwelle reicht,
--color-accent-dark erreicht sie auf Weiß deutlich (~3,8:1). */
.lp-countdown__num { display: block; font-variant-numeric: tabular-nums; font-size: 1.75rem; font-weight: 700; color: var(--color-accent-dark); }
.lp-countdown__unitlabel { display: block; margin-top: 2px; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text); }
/* ---------- Überschriften-Zeile mit Taktstrich ---------- */
.lp-probleme__title, .lp-loesung__title, .lp-agenda__title, .lp-stimmen__title, .lp-faq__title, .lp-schluss__title, .lp-gastgeber__title {
font-size: clamp(1.6rem, 3.4vw, 2.3rem); max-width: 30ch;
}
.lp-section-head { position: relative; z-index: 1; margin-bottom: clamp(30px, 5vw, 52px); }
.lp-section-head .lp-eyebrow { margin-bottom: 12px; }
/* Kurzer Taktstrich vor jeder Zwischenüberschrift – reine Formsprache, kein Text. */
.lp-title-rule::before { content: ''; display: block; width: 46px; height: 3px; background: var(--color-accent); margin-bottom: 16px; border-radius: 2px; }
/* ---------- Probleme ----------
Asymmetrisch statt vier gleicher Kacheln: die erste (häufigste) Karte ist hervorgehoben
(zwei Spalten breit, größere Type), die übrigen drei bleiben regulär. */
.lp-probleme__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.problem-card { background: var(--color-white); border-radius: var(--radius-lg); padding: 26px 24px; box-shadow: var(--shadow); }
.problem-card__title { font-size: 1.08rem; font-weight: 600; }
.problem-card__text { margin-top: 10px; color: var(--color-text); font-size: .95rem; }
.problem-card--featured {
grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: center;
padding: clamp(28px, 4vw, 40px); background: var(--color-white);
border: 1px solid rgba(37, 20, 23, .08);
}
.problem-card--featured .problem-card__title { font-size: clamp(1.2rem, 2.2vw, 1.5rem); max-width: 34ch; }
.problem-card--featured .problem-card__text { max-width: 60ch; font-size: 1rem; }
/* Letzte Karte ebenfalls ueber die volle Breite, aber in normaler Schriftgroesse: sie
schliesst den Abschnitt ab, statt ihn wie die erste zu eroeffnen. */
.problem-card--breit { grid-column: 1 / -1; padding: clamp(26px, 3vw, 34px); }
.problem-card--breit .problem-card__text { max-width: 78ch; }
/* ---------- Lösung ----------
Kopf zweispaltig: Text + belegbare Zahlen links, Bildplatz (16:9) rechts. Darunter die
drei Methodenkarten in voller Breite. */
.lp-loesung__top {
position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 420px);
gap: clamp(28px, 5vw, 56px); align-items: start;
}
.lp-loesung__text { max-width: 62ch; color: var(--color-text); font-size: 1.04rem; }
/* Belegbare Zahlen aus dem Text hier oben (nicht erfunden): Anzahl ausgebildeter
Blasmusiker steht wörtlich in loesung_text, die Minutenzahl in den Fakten, die
Stimmenzahl ist die Anzahl der unten gerenderten Teilnehmerstimmen. */
/* Nachbesserung: nur noch zwei Zahlen (statt drei) — dafür größer und mit mehr Luft
dazwischen, statt die frei gewordene Stelle mit einer neuen Zahl zu füllen. */
.lp-loesung__stats { margin-top: 32px; display: flex; flex-wrap: wrap; gap: clamp(40px, 7vw, 72px); }
/* Farbe bewusst --live-stat-ink statt --color-accent-dark: 4,5:1 auf Weiß statt nur der
3:1-Großtext-Ausnahme (siehe Token-Kommentar oben im :root). */
.lp-stat__zahl { display: block; font-weight: 700; font-size: clamp(2.8rem, 5.5vw, 3.8rem); line-height: 1; color: var(--live-stat-ink); }
.lp-stat__label { display: block; margin-top: 6px; font-size: .88rem; color: var(--color-text); max-width: 18ch; }
.lp-loesung__grid { position: relative; z-index: 1; margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.loesung-card { border-radius: var(--radius-lg); padding: 24px; background: var(--color-white); border: 1px solid rgba(37, 20, 23, .1); box-shadow: var(--shadow); }
/* 1,2rem/700 = "großer Text" (≥18,66px fett) – die 3:1-Schwelle reicht für Akzentfarbe. */
.loesung-card__num { display: block; font-size: .82rem; font-weight: 700; color: var(--live-stat-ink); letter-spacing: .1em; }
.loesung-card__title { margin-top: 10px; font-size: 1.06rem; font-weight: 600; }
.loesung-card__text { margin-top: 10px; font-size: .92rem; color: var(--color-text); }
/* ---------- Agenda (Zeitstrahl) ----------
Zweispaltig: Zeitstrahl links (führt), Bildplatz (Format des Fotos, ca. 4:3) rechts – asymmetrisch, der
Zeitstrahl bestimmt die Höhe, das Bild bleibt oben ausgerichtet. */
.lp-agenda__layout {
position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
gap: clamp(28px, 5vw, 56px); align-items: start;
}
.lp-agenda__media { position: sticky; top: 24px; }
.agenda__list { list-style: none; margin: 0; padding: 0; }
.agenda__item { position: relative; padding: 0 0 40px 60px; }
.agenda__item::before { /* die durchgehende Linie */
content: ''; position: absolute; left: 19px; top: 6px; bottom: -6px; width: 2px; background: var(--live-line-light);
}
.agenda__item:last-child::before { display: none; }
.agenda__item:last-child { padding-bottom: 0; }
/* Kreis gefüllt mit --color-accent-dark + weißer, großer/fetter Ziffer (≥18,66px/700):
erfüllt sowohl die Flächen-Kontrastmarke (~4,5:1) als auch die Großtext-Schwelle. */
.agenda__num {
position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
background: var(--color-accent-dark); color: #fff; display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 1.05rem;
}
.agenda__titel { font-size: 1.12rem; font-weight: 600; }
.agenda__text { margin-top: 8px; color: var(--color-text); font-size: .95rem; max-width: 60ch; }
/* ---------- Stimmen ----------
Voller Zitattext, keine Kappung (Nachbesserung: eine Zeilen-Klemmung hätte gerade die
überzeugendsten Details gekostet). Statt gleicher Kartenhöhen über ein CSS-Grid sorgt ein
Mehrspalten-Fluss (columns) für ein ruhiges Gesamtbild: Karten bleiben unterschiedlich
hoch, aber die Spalten füllen sich gleichmäßig, weil jede Karte dort weiterläuft, wo in
ihrer Spalte noch Platz ist – statt einer Zeile pro "Reihe" mit viel Leerraum daneben.
break-inside: avoid verhindert, dass eine Karte über eine Spaltengrenze hinweg reißt.
Tab-Reihenfolge unkritisch: Zitatkarten enthalten keine fokussierbaren Elemente (kein
Link/Button), die Lesereihenfolge für Screenreader bleibt die DOM-Reihenfolge. */
.lp-stimmen__grid { position: relative; z-index: 1; columns: 3; column-gap: 20px; }
.voice-card {
background: var(--color-white); border-radius: var(--radius-lg); padding: 24px;
border: 1px solid rgba(37, 20, 23, .1); box-shadow: var(--shadow);
break-inside: avoid; margin-bottom: 20px;
}
.voice-card__quote { font-size: 1.6rem; color: var(--color-accent); line-height: 1; }
.voice-card__quote::before { content: '♩'; }
.voice-card__text { margin-top: 8px; font-size: .92rem; color: var(--color-text); }
.voice-card__meta { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.voice-card__avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.voice-card__avatar--fallback {
width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; background: var(--color-sand);
display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--color-dark);
}
.voice-card__name { font-weight: 600; font-size: .92rem; color: var(--color-dark); }
.voice-card__ort { font-size: .8rem; color: var(--color-text); opacity: .85; }
/* ---------- Teilnehmer-Werke ----------
Seit dem Canvas-Abgleich (23.09.2026) anstelle des früheren Hörproben-Streifens: drei
Werke statt vier Kacheln, jedes mit Komponist, Kapelle und dem Weg auf die Bühne.
.sample-card bleibt unverändert die Videokachel (gleiche Kartensprache wie .voice-card:
dünner Rand, --radius-lg, --shadow). Play-Symbol rein dekorativ (aria-hidden), der
eigentliche Klick-Ziel-Text steckt im aria-label des Links. */
.lp-werke__lead { margin-top: 14px; font-size: 1.05rem; line-height: 1.65; color: var(--color-text); max-width: 62ch; }
.lp-werke__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.werk-card { display: flex; flex-direction: column; gap: 16px; }
.werk-card__kopf { display: flex; flex-direction: column; gap: 4px; }
.werk-card__titel { margin: 0; font-size: 1.12rem; font-weight: 600; color: var(--color-dark); }
.werk-card__wer { margin: 0; font-size: .9rem; color: var(--color-text); }
/* Der Vermarktungskasten sitzt auf dem Cream-Band – deshalb Weiß, damit er sich absetzt. */
.werk-card__weg {
margin-top: auto; background: var(--color-white); border: 1px solid rgba(37, 20, 23, .1);
border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
}
.werk-card__weglabel {
font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: var(--live-stat-ink);
}
.werk-card__wegtext { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--color-text); }
/* Drei Karten nebeneinander: Video, Namenszeile und Vermarktungskasten sollen auf einer
Linie liegen, auch wenn ein Titel oder ein Name zweizeilig umbricht. Subgrid teilt dafuer
die drei Zeilen des Rasters unter allen Karten – ohne Subgrid (alte Browser) bleibt es
beim Flex-Fallback oben: Kaesten unten buendig, Oberkanten dann ungleich. */
@media (min-width: 901px) {
@supports (grid-template-rows: subgrid) {
.lp-werke__grid { grid-template-rows: auto auto 1fr; }
.werk-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 16px; }
.werk-card__weg { margin-top: 0; }
}
}
/* Verlags- und Orchesternamen stehen im Text kursiv (*so* in der Inhaltsdatei) – in diesem
Abschnitt zusaetzlich fett, damit sie als Namen heraussstechen. Gilt fuer jede kursive
Stelle hier, nicht nur fuer die heute vorhandenen (Wunsch vom 23.09.2026). */
.werk-card__wegtext em { font-style: italic; font-weight: 700; color: var(--color-dark); }
.sample-card {
position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9;
background: var(--color-dark); border-radius: var(--radius-lg);
border: 1px solid rgba(37, 20, 23, .1); box-shadow: var(--shadow);
text-decoration: none;
}
.sample-card__thumb { width: 100%; height: 100%; object-fit: cover; }
.sample-card__play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 56px; height: 56px; border-radius: 50%; background: rgba(28, 15, 17, .68);
transition: background .16s ease, transform .16s ease;
}
.sample-card__play::before {
content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff;
}
.sample-card:hover .sample-card__play { background: var(--color-accent-dark); transform: translate(-50%, -50%) scale(1.06); }
/* Nach dem Klick ersetzt das iframe den Karteninhalt (live-lp.js) – volle Fläche, kein Rahmen. */
.sample-card.is-playing { cursor: default; }
.sample-card.is-playing iframe { width: 100%; height: 100%; border: 0; display: block; }
/* ---------- Bildplätze (Hero, Beweis, Agenda, Schluss) ----------
Gemeinsame Regel für live_bild_html(): echtes ![]()
und Platzhalter- tragen dieselbe
Größenklasse (aspect-ratio), damit beim späteren Eintragen eines Dateinamens exakt derselbe
Platz weiterbesteht – kein Layout-Sprung. Der Platzhalter selbst ist als solcher erkennbar
(Kontur, Symbol, Hinweistext), aber ruhig genug, um nicht wie ein Fehler zu wirken.
gastgeber_bild folgt weiterhin seinem eigenen, unveränderten Muster (siehe unten). */
.lp-bild { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-lg); }
/* Flacher als 4:5, damit über dem Kopf weniger Luft steht (Wunsch 23.09.2026). Der
Beschnitt geht dabei ausschliesslich nach oben: object-position haengt das Bild an der
Unterkante auf, damit das rote LIVE-WEBINAR-Band vollstaendig sichtbar bleibt. */
.lp-bild--hero { aspect-ratio: 8 / 9; object-position: center bottom; }
.lp-bild--beweis { aspect-ratio: 16 / 9; }
.lp-bild--agenda { aspect-ratio: 1000 / 763; }
.lp-bild--abschluss { aspect-ratio: 21 / 9; }
.lp-bild--platzhalter {
background: linear-gradient(150deg, rgba(218, 194, 157, .38), rgba(239, 236, 234, .7));
border: 1.5px dashed rgba(37, 20, 23, .3);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
text-align: center; padding: 20px;
}
.lp-bild__icon { width: 34px; height: 34px; fill: none; stroke: var(--color-accent-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.lp-bild__hinweis { font-size: .78rem; line-height: 1.55; color: var(--color-dark); max-width: 24ch; }
/* Schlussband: dasselbe Muster, aber als Hintergrund hinter Countdown/Knopf statt als
eigenständiger Block – siehe .lp-schluss__bg unten für die abweichende Positionierung.
Symbol + Hinweistext sitzen deshalb bewusst NICHT mittig (das würde sich mit Countdown
und Knopf überlagern, die in der Bandmitte stehen), sondern klein in der unteren linken
Ecke, wie eine Bildunterschrift. */
.lp-schluss__bg.lp-bild--platzhalter {
background: linear-gradient(160deg, rgba(244, 237, 231, .07), rgba(244, 237, 231, .02));
border-color: rgba(244, 237, 231, .18);
align-items: flex-start; justify-content: flex-end; text-align: left;
padding: 22px clamp(20px, 4vw, 40px);
}
.lp-schluss__bg .lp-bild__icon { width: 22px; height: 22px; stroke: var(--live-on-dark-sub); opacity: .5; }
.lp-schluss__bg .lp-bild__hinweis { color: var(--live-on-dark-sub); max-width: 26ch; }
/* ---------- Gastgeber ---------- */
.lp-gastgeber__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: center; }
.lp-gastgeber__img { border-radius: var(--radius-lg); box-shadow: var(--shadow); aspect-ratio: 4 / 5; object-fit: cover; }
.lp-gastgeber__signatur {
margin-top: 18px; font-style: italic; font-weight: 600;
font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--color-dark);
}
.lp-gastgeber__text { margin-top: 16px; color: var(--color-text); max-width: 62ch; }
.lp-gastgeber__text strong { color: var(--color-dark); }
/* ---------- FAQ ---------- */
.lp-faq__list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--color-white); border-radius: var(--radius); border: 1px solid rgba(37, 20, 23, .1); box-shadow: var(--shadow); overflow: hidden; }
.faq-item__frage {
cursor: pointer; list-style: none; padding: 18px 46px 18px 20px; position: relative;
font-weight: 600; font-size: 1rem;
}
.faq-item__frage::-webkit-details-marker { display: none; }
.faq-item__frage::after {
content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
font-size: 1.2rem; color: var(--color-accent); transition: transform .18s ease;
}
.faq-item[open] .faq-item__frage::after { transform: translateY(-50%) rotate(45deg); }
.faq-item__antwort { padding: 0 20px 20px; color: var(--color-text); font-size: .94rem; max-width: 68ch; }
/* ---------- Schluss (einziges dunkles Band) ----------
abschluss_bild liegt als volle Bandfläche hinter Notensystem, Countdown und Knopf. Ein
fester dunkler Verlauf (.lp-schluss__scrim) liegt IMMER darüber – unabhängig davon, wie
hell ein später eingesetztes Foto ist, bleibt der helle Text auf --live-ink-Niveau
kontraststark. Ohne Bild ist der Platzhalter selbst schon dunkel genug (siehe oben),
der Verlauf schadet dort nicht. */
/* aspect-ratio ausdrücklich aufheben: sonst gewinnt es gegen inset:0 bei der Höhenberechnung
(das Ergebnis wäre höher als das Band selbst und liefe unten aus dem overflow:hidden
heraus – genau das hat den Hinweistext unsichtbar gemacht). */
.lp-schluss__bg { position: absolute; inset: 0; z-index: 0; border-radius: 0; aspect-ratio: auto; }
.lp-schluss__scrim {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(28, 15, 17, .55), rgba(28, 15, 17, .88));
}
.lp-staff--schluss { z-index: 1; }
.lp-schluss { text-align: center; }
.lp-schluss__inner { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
.lp-schluss__text { margin-top: 14px; color: var(--live-on-dark-sub); font-size: 1.05rem; }
.lp-schluss__actions { margin-top: 30px; }
/* Zweiter Countdown, hier auf dem einzigen dunklen Band: eigene Farbgebung statt der
hellen Kacheln aus dem Fakten-Band – Ziffern und Labels direkt in --live-on-dark(-sub)
auf --live-ink erreichen deutlich mehr als die geforderten 4,5:1. Zentriert, weil
.lp-schluss text-align:center setzt, das der Flex-Grid darunter sonst ignoriert. */
.lp-countdown--dark { margin: 26px auto 0; }
.lp-countdown--dark .lp-countdown__titel { color: var(--live-on-dark); }
.lp-countdown--dark .lp-countdown__grid { justify-content: center; }
.lp-countdown--dark .lp-countdown__unit {
background: rgba(244, 237, 231, .08); border-color: rgba(244, 237, 231, .22); box-shadow: none;
}
.lp-countdown--dark .lp-countdown__num { color: var(--live-on-dark); }
.lp-countdown--dark .lp-countdown__unitlabel { color: var(--live-on-dark-sub); }
/* ---------- Hinweisblock bei geschlossener Anmeldung ---------- */
.lp-closed { text-align: center; padding: 30px; background: var(--color-white); border-radius: var(--radius-lg); border: 1px solid rgba(37,20,23,.08); }
.lp-closed__text { font-size: 1.05rem; color: var(--color-dark); font-weight: 600; }
/* ---------- Modal ---------- */
.lp-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.lp-modal.is-open { display: block; }
.lp-modal__backdrop { position: absolute; inset: 0; background: rgba(23, 12, 14, .62); backdrop-filter: blur(2px); }
.lp-modal__dialog {
position: relative; z-index: 1; margin: 6vh auto; width: min(94vw, 480px); max-height: 88vh; overflow-y: auto;
background: var(--color-white); border-radius: var(--radius-lg); box-shadow: 0 30px 60px rgba(23,12,14,.35);
padding: 30px 26px 26px;
}
.lp-modal__close {
position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
border: 0; background: var(--color-cream); color: var(--color-dark); font-size: 1.3rem; line-height: 1;
cursor: pointer;
}
.lp-modal__close:hover { background: var(--color-sand); }
.lp-modal__title { font-size: 1.4rem; padding-right: 30px; }
.lp-modal__sub { margin-top: 8px; color: var(--color-text); font-size: .94rem; }
.lp-modal__error {
display: none; margin-top: 16px; padding: 12px 14px; border-radius: var(--radius);
background: #fbe6df; color: #8a2a10; font-size: .9rem;
}
.lp-modal__error.is-visible { display: block; }
.lp-modal__form { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.lp-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--color-dark); margin-bottom: 6px; }
.lp-field input[type="text"], .lp-field input[type="email"] {
width: 100%; padding: 13px 14px; border-radius: var(--radius); border: 1.5px solid #dcd4cd; font-size: 1rem;
font-family: inherit; background: var(--color-white); color: var(--color-dark);
}
.lp-field input:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px rgba(220,102,59,.16); }
.lp-modal__submit { margin-top: 4px; }
/* Der Text bleibt aus der Inhaltsdatei, der Datenschutz-Verweis ist fester Bestandteil des
Markups (Struktur, kein Inhalt) – siehe live-webinar.php. Farbe bewusst --color-dark statt
Akzent: bei dieser Schriftgröße (.8rem) ist nur --color-dark auf Weiß sicher über 4,5:1. */
.lp-modal__foot { margin-top: 4px; font-size: .8rem; color: var(--color-text); }
/* ---------- Bestaetigungsschritt im Anmeldefenster ----------
Nach dem Absenden blendet live-lp.js diesen Block ein und alles davor aus. Der Balken
bleibt bewusst unter 100 %: Der Klick in der E-Mail steht noch aus. */
.lp-modal__dialog.is-fertig .lp-modal__title,
.lp-modal__dialog.is-fertig .lp-modal__sub,
.lp-modal__dialog.is-fertig .lp-modal__form,
.lp-modal__dialog.is-fertig .lp-modal__error { display: none; }
.lp-modal__fertig[hidden] { display: none; }
.lp-modal__fertig { display: block; }
.lp-fortschritt { margin-bottom: 22px; }
.lp-fortschritt__kopf {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
margin-bottom: 8px;
/* Rechts sitzt der Schliessen-Knopf – der Prozentwert darf nicht darunter geraten. */
padding-right: 38px;
}
.lp-fortschritt__schritt {
font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
color: var(--color-dark); opacity: .62;
}
.lp-fortschritt__wert { font-size: 1.05rem; font-weight: 700; color: var(--live-stat-ink); }
.lp-fortschritt__bahn {
height: 10px; border-radius: 999px; overflow: hidden;
background: rgba(37, 20, 23, .10);
}
.lp-fortschritt__fuellung {
display: block; height: 100%; width: 0;
border-radius: 999px;
background: linear-gradient(90deg, #f8c14a 0%, #ef911d 100%);
transition: width .9s cubic-bezier(.22, .8, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
.lp-fortschritt__fuellung { transition: none; }
}
.lp-modal__fertigtitel { font-size: 1.35rem; color: var(--color-dark); }
.lp-modal__fertigtitel:focus { outline: none; }
/* Der Warnsatz steht ganz unten im Fenster und traegt den Akzentbalken – er ist der letzte
Satz vor dem Schliessen und der Grund, warum der Balken oben nicht auf 100 % steht. */
.lp-modal__fertigwarnung {
margin-top: 16px; padding: 12px 15px;
background: #fdf3e8; border-left: 4px solid var(--color-accent);
border-radius: var(--radius);
font-size: .93rem; line-height: 1.55; color: var(--color-text);
}
.lp-modal__fertigwarnung strong { color: var(--color-dark); font-weight: 700; }
.lp-modal__fertigtext { margin-top: 12px; font-size: .95rem; line-height: 1.65; color: var(--color-text); }
.lp-modal__fertigmail {
margin-top: 16px; padding: 14px 16px;
background: var(--color-cream); border-radius: var(--radius);
font-size: .9rem; color: var(--color-text);
display: flex; flex-direction: column; gap: 2px;
/* Lange Adressen duerfen das Fenster nicht sprengen. */
overflow-wrap: anywhere;
}
.lp-modal__fertigmail strong { color: var(--color-dark); }
/* Auf der Dankeseite laeuft derselbe Balken ohne Skript los – dort gibt es kein
live-lp.js. Das Ziel steht als --lp-ziel am Element. */
.lp-fortschritt__fuellung--selbst {
width: 0;
animation: lp-fuellen .9s cubic-bezier(.22, .8, .3, 1) .15s forwards;
}
@keyframes lp-fuellen { from { width: 0 } to { width: var(--lp-ziel, 100%) } }
@media (prefers-reduced-motion: reduce) {
.lp-fortschritt__fuellung--selbst { animation: none; width: var(--lp-ziel, 100%); }
}
/* ---------- Dankeseite: Abstaende ----------
Der Kopf ist kurz (Bestaetigung, zwei Angaben, Kalenderknopf) – das Angebot darunter muss
ins Bild kommen, ohne dass man erst scrollen muss. Deshalb flacher als ein normales Band.
Die Klasse sitzt am dieser Seite, damit assets/css/workbook-angebot.css unveraendert
bleibt: Die Datei gehoert auch danke.php im bestehenden Funnel. */
.lp-danke-seite .lp-danke { padding: clamp(28px, 4vw, 48px) 0 clamp(24px, 3.5vw, 40px); }
.lp-danke-seite .lp-danke .lp-hero__title { margin-top: 12px; font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.lp-danke-seite .lp-danke .lp-hero__lead { margin-top: 12px; }
.lp-danke-seite .lp-danke__fortschritt { margin-bottom: 20px; max-width: 520px; }
.lp-danke-seite .lp-danke__fakten { margin-top: 20px; }
.lp-danke-seite .lp-danke__hint { margin-top: 16px; }
.lp-danke-seite .lp-hero__actions { margin-top: 18px; }
/* Der Abstand ueber "Aber warte, bevor Du gehst!" kommt aus .wb (margin-top: 72px) in
workbook-angebot.css – hier, und nur hier, kleiner. */
.lp-danke-seite .wb { margin-top: clamp(24px, 3vw, 36px); }
/* Kopf der Dankeseite mittig (Wunsch 23.09.2026): Der Abschnitt ist kurz und hat keine
zweite Spalte – linksbuendig liess die rechte Haelfte leer stehen. */
.lp-danke-seite .lp-hero__inner { text-align: center; }
.lp-danke-seite .lp-danke__fortschritt { margin-left: auto; margin-right: auto; }
.lp-danke-seite .lp-eyebrow { justify-content: center; }
.lp-danke-seite .lp-hero__lead { margin-left: auto; margin-right: auto; }
.lp-danke-seite .lp-danke__fakten { justify-content: center; }
.lp-danke-seite .lp-danke__hint {
margin-left: auto; margin-right: auto; text-align: left;
/* Der farbige Balken bleibt links: mittig gesetzt saehe er aus wie ein Fehler. */
}
.lp-danke-seite .lp-hero__actions { justify-content: center; }
/* Satz ueber Kalender- und WhatsApp-Knopf (27.09.2026), bewusst
knapp gehalten: "Aber warte, bevor Du gehst!" muss auf dem Handy im ersten Bild bleiben. */
.lp-danke-seite .lp-danke__knoepfe-text {
margin: 18px auto 0; max-width: 52ch; font-size: .98rem; line-height: 1.5;
}
.lp-danke-seite .lp-danke__knoepfe-text + .lp-hero__actions { margin-top: 10px; }
/* Auf dem Handy muss "Aber warte, bevor Du gehst!" ohne Scrollen lesbar sein. Der Kopf
darueber wird deshalb konsequent zusammengezogen: kleinere Ueberschrift, Termin und Dauer
nebeneinander statt untereinander, schmalerer Hinweiskasten, flacherer Knopf. */
@media (max-width: 600px) {
.lp-danke-seite .lp-danke { padding: 18px 0 16px; }
.lp-danke-seite .lp-danke__fortschritt { margin-bottom: 14px; }
.lp-danke-seite .lp-danke .lp-hero__title { margin-top: 8px; font-size: 1.55rem; line-height: 1.12; }
.lp-danke-seite .lp-danke .lp-hero__lead { margin-top: 8px; font-size: .93rem; }
.lp-danke-seite .lp-danke__fakten {
margin-top: 14px; gap: 8px 20px; flex-wrap: nowrap;
}
.lp-danke-seite .lp-danke__fakten .lp-fakt { min-width: 0; flex: 0 1 auto; }
.lp-danke-seite .lp-danke__fakten .lp-fakt__label { font-size: .64rem; letter-spacing: .08em; }
.lp-danke-seite .lp-danke__fakten .lp-fakt__wert { font-size: .88rem; }
.lp-danke-seite .lp-danke__hint {
margin-top: 12px; padding: 10px 13px; font-size: .84rem; line-height: 1.5;
}
.lp-danke-seite .lp-hero__actions { margin-top: 12px; }
.lp-danke-seite .lp-danke__knoepfe-text { margin-top: 12px; font-size: .86rem; }
.lp-danke-seite .lp-hero__actions .lp-btn {
padding: 12px 18px; min-height: 46px; font-size: .92rem;
}
/* Kalender und WhatsApp nebeneinander statt untereinander – untereinander schoben die
zwei vollen Knoepfe "Aber warte" aus dem ersten Bild. */
.lp-danke-seite .lp-hero__actions { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
.lp-danke-seite .lp-hero__actions .lp-btn {
flex: 1 1 0; min-width: 0; padding: 9px 10px; font-size: .8rem; line-height: 1.25;
text-align: center;
}
.lp-danke-seite .wb { margin-top: 16px; }
/* Die grosse Schlagzeile selbst darf auf dem Handy flacher sitzen. */
.lp-danke-seite .wb .wb-stop { padding: 18px 16px; font-size: 1.75rem; margin-bottom: 20px; }
}
.lp-modal__foot a { color: var(--color-dark); text-decoration: underline; }
/* Honeypot: unsichtbar für Menschen, aber bewusst NICHT display:none – ein einfacher
Bot-Filter, der auf display:none prüft, würde das Feld sonst als Honeypot erkennen
und überspringen. */
/* display:none statt weggeclippt: Ein nur optisch verstecktes Feld fuellt Android-Chrome per
Autofill mit der eigenen E-Mail (29.09.2026, drei echte Anmeldungen verloren). Wie .hp in
style.css und .mel-hp in embed/form.js. */
.lp-hp { display: none; }
/* Fortschrittsanzeige beim Absenden */
.lp-progress { display: none; align-items: center; gap: 8px; margin-top: 12px; font-size: .84rem; color: var(--color-text); }
.lp-progress.is-visible { display: flex; }
.lp-progress__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); animation: lp-pulse 1s ease-in-out infinite; }
@keyframes lp-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* ---------- Klebender Balken (nur schmale Fenster) ----------
bottom rechnet die Höhe des Cookie-Hinweises ein (--cookie-hint-h, gesetzt von
lib/consent_banner.php), sonst legt sich der Hinweis für Erstbesucher über den
einzigen sichtbaren Anmelde-Knopf. z-index 950: über dem Hinweis (900), unter dem
Modal (1000). live-lp.js meldet das Öffnen/Schließen des eigenen Modals per
melicus:modal-Ereignis, auf das consent_banner.php bereits hört. */
.lp-sticky {
position: fixed; left: 0; right: 0; bottom: var(--cookie-hint-h, 0px); z-index: 950;
display: none; align-items: center; justify-content: space-between; gap: 14px;
background: var(--live-ink); color: var(--live-on-dark); padding: 12px 16px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
box-shadow: 0 -8px 24px rgba(0,0,0,.25);
opacity: 1; visibility: visible; transition: opacity .25s ease, visibility .25s ease;
}
/* live-lp.js blendet den Balken aus, solange der Hero-Knopf selbst im Blick ist (sonst
stünden zwei gleiche "Kostenlos anmelden"-Knöpfe übereinander). Ohne IntersectionObserver
bekommt diese Klasse nie jemand gesetzt – der Balken bleibt dann sichtbar (lieber ein
Knopf zu viel als keiner). */
.lp-sticky--hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.lp-sticky__text { font-size: .84rem; font-weight: 600; }
.lp-sticky .lp-btn { padding: 11px 20px; min-height: 44px; font-size: 1rem; flex: 0 0 auto; }
@media (max-width: 767px) {
.lp-sticky { display: flex; }
body.lp-has-sticky { padding-bottom: calc(76px + var(--cookie-hint-h, 0px)); }
}
/* ---------- Bewegung beim Scrollen ----------
.lp-reveal-Elemente blenden per IntersectionObserver dezent ein (live-lp.js). Ohne JS
oder bei reduzierter Bewegung bleibt alles sofort sichtbar: Erst das Skript setzt die
Klasse "js-reveal" auf , die den unsichtbaren Ausgangszustand überhaupt erst
aktiviert – Inhalte bleiben also für Suchmaschinen/ohne JS immer vollständig sichtbar. */
.lp-reveal { opacity: 1; transform: none; }
.js-reveal .lp-reveal {
opacity: 0; transform: translateY(16px);
transition: opacity .26s ease, transform .26s ease;
}
.js-reveal .lp-reveal.is-visible { opacity: 1; transform: none; }
/* ---------- Fußzeile ----------
Hatte bis zum 23.09.2026 kein eigenes Stylesheet – zwei nackte Links direkt unter dem
Schlussband. Jetzt ein ruhiger Abschluss mit dem Pflichthinweis zu Facebook und Google. */
.lp-foot {
background: var(--color-cream);
border-top: 1px solid rgba(37, 20, 23, .1);
padding: 28px 0 34px;
}
.lp-foot__links { text-align: center; font-size: .9rem; color: var(--color-text); }
.lp-foot__links a { color: var(--color-dark); text-decoration: underline; }
.lp-foot__links a:hover { color: var(--color-accent-dark); }
/* Der Hinweis ist lang und rein rechtlich – klein, ruhig, aber lesbar (Kontrast von
--color-text auf --color-cream liegt bei 8,6:1, die Groesse bleibt ueber 12px). */
.lp-foot__hinweis {
margin: 16px auto 0; max-width: 78ch;
font-size: .78rem; line-height: 1.6; color: var(--color-text);
text-align: center;
}
/* ============================================================
Responsive
============================================================ */
/* ---------- Dankeseite (live-danke.php) ----------
Nutzt bewusst dieselben Bausteine wie der Hero oben (.lp-band, .lp-hero, .lp-eyebrow,
.lp-btn, .lp-fakten__list) – nur das hier Fehlende kommt neu dazu. */
.lp-danke__fakten { margin-top: 26px; }
.lp-danke__hint {
margin-top: 22px; max-width: 58ch; padding: 14px 18px;
background: var(--color-white); border: 1px solid rgba(37, 20, 23, .1);
border-left: 4px solid var(--color-accent); border-radius: var(--radius);
font-size: .95rem; color: var(--color-text);
}
/* Zweite, ruhigere Knopf-Variante (Kalender-Download) – kein Fließtext auf Akzentfläche,
damit der eigentliche CTA (Anmelden/Kaufen) die einzige gefüllte Fläche im Blick bleibt. */
.lp-btn--ghost {
background: transparent; color: var(--color-dark); box-shadow: none;
border: 1.5px solid rgba(37, 20, 23, .25);
}
.lp-btn--ghost:hover { background: var(--color-white); transform: translateY(-1px); }
@media (max-width: 900px) {
.lp-hero__grid { grid-template-columns: 1fr; }
/* Knopf vor Porträt: die rechte Spalte rutscht über den Bildplatz. */
.lp-hero__body { order: 1; }
.lp-hero__media { order: 2; max-width: 360px; margin: 4px auto 0; }
.lp-probleme__grid { grid-template-columns: 1fr; }
.problem-card--featured { grid-column: 1 / -1; }
.lp-loesung__top { grid-template-columns: 1fr; }
.lp-loesung__media { max-width: 480px; margin: 0 auto; }
.lp-loesung__grid { grid-template-columns: 1fr; }
.lp-agenda__layout { grid-template-columns: 1fr; }
.lp-agenda__media { position: static; max-width: 420px; margin: 8px auto 0; }
.lp-stimmen__grid { columns: 2; }
.lp-werke__grid { grid-template-columns: repeat(2, 1fr); }
.lp-gastgeber__inner { grid-template-columns: 1fr; text-align: left; }
.lp-gastgeber__img { max-width: 220px; }
}
@media (max-width: 600px) {
.lp-stimmen__grid { columns: 1; }
.lp-werke__grid { grid-template-columns: 1fr; }
.lp-fakten__inner { flex-direction: column; align-items: flex-start; }
.lp-countdown__unit { min-width: 54px; }
.lp-hero__actions { flex-direction: column; align-items: stretch; }
.lp-hero__media { max-width: 280px; }
.lp-banner { font-size: .85rem; padding: 11px 16px; }
.lp-hero__sub { font-size: 18px; }
/* Die flankierenden Striche stehen neben einem drei Zeilen hohen Kicker nur im Weg. */
.lp-eyebrow--mitte::before, .lp-eyebrow--mitte::after { display: none; }
.lp-loesung__stats { gap: 24px; }
.lp-staff { opacity: .3; }
.agenda__item { padding-left: 52px; }
.agenda__num { width: 34px; height: 34px; font-size: 1rem; }
.agenda__item::before { left: 16px; }
}