/* Erklaerfilme v6 im iPhone-17-Rahmen: vier Fassungen ueber zwei Umschalter, weisser Film bis zum Rand, startet ohne
   Ton, Ton-Knopf im Display, Kleingedrucktes im i-Knopf, darunter der eine gefuellte Knopf (Freischaltung der Seite). */
.growth-model{max-width:520px;margin:64px auto 0;text-align:center;color:#f7f9f7}
.gm-intro{margin:0 auto 28px}.growth-model .gm-intro .eyebrow{display:block;width:100%;max-width:none;text-align:center;font-size:10px;color:#98aea1}
.gm-intro h3{font-size:clamp(20px,4.6vw,28px);font-weight:500;letter-spacing:-.04em;margin:12px 0}
.gm-figure{width:min(310px,100% - 24px);margin:0 auto;container-type:inline-size}
.gm-phone{box-shadow:0 28px 65px #0005,inset 0 0 0 1px #9ba49e}.gm-screen{background:#fff}.gm-screen:after,.gm-screen:before{display:none}
.gm-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.gm-screen>.selfie-island{z-index:3}
.gm-home{position:absolute;bottom:1.5%;left:35%;width:30%;height:3px;border-radius:4px;background:rgba(21,23,21,.35);pointer-events:none}
.gm-ton{position:absolute;right:5%;bottom:3.4%;z-index:4;min-width:44px;height:44px;padding:0 12px 0 10px;border-radius:22px;border:1px solid rgba(21,23,21,.16);background:rgba(255,255,255,.72);color:#151715;font:inherit;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gm-ton svg{width:18px;height:18px;flex:none}.gm-ton .an{display:none}.has-sound .gm-ton .an{display:block}.has-sound .gm-ton .aus{display:none}
.gm-film-error{display:none;position:absolute;inset:auto 6% 14%;padding:12px;background:#fffffff2;color:#365542;font-size:11px;border-radius:12px}.has-media-error .gm-film-error{display:block}
/* Der Film zeigt jeden Satz selbst; die Kapiteltexte bleiben fuer Screenreader. */
.gm-figure figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.gm-mode{display:flex;gap:4px;width:max-content;max-width:100%;padding:4px;margin:14px auto 0;background:#ffffff0c;border-radius:30px}
.gm-mode button{min-height:44px;padding:8px 18px;border-radius:25px;border:0;background:transparent;color:#b1beb5;font:inherit;font-size:12px;cursor:pointer}.gm-mode button[aria-pressed=true]{background:#f6f9f7;color:#214631;box-shadow:0 2px 10px #0002}
.growth-model button:focus-visible,.growth-model summary:focus-visible{outline:2px solid #8ebba0;outline-offset:3px;border-radius:6px}
.growth-model .gm-ton:focus-visible{outline-color:#047857;border-radius:22px}
.gm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:820px){.growth-model{margin-top:40px}.gm-intro{margin-bottom:24px}.gm-figure{width:clamp(240px,calc((100svh - 300px)*.47794),300px);max-width:calc(100% - 16px)}}

/* i-Knopf neben dem Film (Muster der uebrigen iPhones der Seite) */
.gm-figure{position:relative}
.gm-figure .gm-info{position:absolute;right:-48px;bottom:44px;text-align:left}
.gm-figure .gm-info p{width:min(280px,76vw)}
/* Handy: wie die uebrigen iPhones der Seite bleibt rechts eine Spalte fuer den i-Knopf (auch bei 320 px kein seitliches
   Scrollen), der Knopf steht mittig in dieser Spalte. */
@media(max-width:820px){.gm-figure{width:min(clamp(240px,calc((100svh - 300px)*.47794),300px),calc(100vw - 104px))}.gm-figure .gm-info{right:calc(-22px - (100vw - 100cqw)/4)}}

/* Auswahl und Endbild IM Display: am Anfang waehlen und starten, am Ende dieselbe Auswahl plus der naechste Schritt.
   Glas ueber Bild 0 des Films; alles tippbar ab 44 px. */
.gm-auswahl{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:18% 7% 13%;text-align:center;color:#151715;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.9) 42%,#fff 70%);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.gm-auswahl[hidden]{display:none}
.gm-auswahl:focus{outline:none}
.gm-titel{margin:0 0 6px;font-size:clamp(15px,7.2cqw,21px);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.gm-titel>span:last-child{display:block;margin-top:3px;font-size:.62em;font-weight:500;letter-spacing:0;color:#5b6660}
.gm-auswahl .gm-mode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:none;margin:0;padding:3px;gap:3px;background:#eef1ef;border-radius:99px}
.gm-auswahl .gm-mode button{display:flex;align-items:center;justify-content:center;line-height:1.2;min-width:0;min-height:44px;padding:6px 4px;white-space:nowrap;border-radius:99px;color:#56605a;font-size:clamp(11px,4.6cqw,13px);font-weight:500}
.gm-auswahl .gm-mode button[aria-pressed=true]{background:#fff;color:#151715;box-shadow:0 1px 6px #15251c1f}
.gm-start,.gm-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin-top:6px;padding:10px 14px;border:0;border-radius:99px;
  background:var(--emerald,#047857);color:#fff;font:inherit;font-size:clamp(11px,4.6cqw,14px);font-weight:600;text-decoration:none;cursor:pointer}
.gm-start svg,.gm-cta svg{width:16px;height:16px;flex:none}
.gm-start small{font-size:.78em;font-weight:500;opacity:.75}
.gm-start,.gm-cta{white-space:nowrap}.gm-start span,.gm-cta span{overflow:hidden;text-overflow:ellipsis}
.gm-screen>.selfie-island{z-index:6}
.gm-cta .icon-ticket,.film-complete .gm-cta .icon-play{display:none}.film-complete .gm-cta .icon-ticket{display:block}
.gm-weiter{margin-bottom:10px}
.gm-weiter[hidden]{display:none}
.gm-weiter-titel{margin:0;font-size:clamp(15px,7.2cqw,21px);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.gm-weiter-titel .nur-webinar{display:inline}
.gm-weiter-titel .nur-selfie{display:none}
.growth-model .gm-auswahl :is(button,a):focus-visible{outline:2px solid #047857;outline-offset:2px}

/* Zeitleiste im Display: dunkel = hier bist du, mittel = schon gesehen (bis dahin frei spulbar), hell = noch nicht gesehen. */
.gm-zeit{position:absolute;left:7%;right:7%;bottom:calc(3.4% + 46px);z-index:4;width:86%;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.gm-zeit::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,#151715 var(--jetzt,0%),#1517156b var(--jetzt,0%) var(--gesehen,0%),#15171521 var(--gesehen,0%))}
.gm-zeit::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(90deg,#151715 var(--jetzt,0%),#1517156b var(--jetzt,0%) var(--gesehen,0%),#15171521 var(--gesehen,0%))}
.gm-zeit::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6.5px;border-radius:50%;background:#151715;border:2px solid #fff;box-shadow:0 1px 4px #0003}
.gm-zeit::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#151715;border:2px solid #fff}
.gm-zeit:focus-visible{outline:2px solid #047857;outline-offset:2px;border-radius:6px}
.gm-hinweis{position:absolute;left:8%;right:8%;bottom:17%;z-index:5;margin:0;padding:9px 12px;border-radius:14px;background:#151715e6;color:#fff;font-size:clamp(10px,4.2cqw,12px);line-height:1.35}
.gm-hinweis[hidden]{display:none}
/* Schmale Handys (Display unter 250 px): Knoepfe ohne Laufzeit, engerer Innenraum, damit nichts abgeschnitten wird. */
@container (max-width:250px){.gm-auswahl{padding-left:5%;padding-right:5%}.gm-start,.gm-cta{gap:6px;padding:10px 8px;font-size:11px}.gm-start small{display:none}.gm-start svg,.gm-cta svg{width:13px;height:13px}}
.gm-start small{white-space:nowrap}

/* Ladefehler steht ueber dem Auswahl-Glas, direkt ueber dem Knopf zum Neuversuch. */
.gm-film-error{z-index:5;inset:12% 6% auto}
/* Nach dem Sprung von oben bleibt die Steuerung ueber der festen Navigationsleiste. */

/* Endbild: nur der naechste Schritt, darunter dezent „Nochmal ansehen“ (fuehrt zurueck zur Szenario-Auswahl). */
.growth-model[data-zustand=ende] .gm-auswahl{justify-content:center}
.growth-model[data-zustand=ende] :is(.gm-titel,.gm-mode,.gm-start){display:none}
.gm-weiter .gm-weiter-note{margin:6px auto 0;white-space:nowrap;color:#5b6660;line-height:1.3;text-align:center}
.gm-nochmal{display:inline-flex;align-items:center;justify-content:center;gap:6px;align-self:center;min-height:44px;padding:0 12px;border:0;background:transparent;color:#5b6660;font:inherit;font-size:12px;cursor:pointer}
.gm-nochmal[hidden]{display:none}
.gm-nochmal svg{width:14px;height:14px}

/* Waehrend der Film laeuft: nur Bild. Ein Tipp aufs Display pausiert und blendet unten die Steuerung ein (Play,
   Zeitleiste, Ton); beim Weiterspielen verschwindet sie wieder. */
.gm-flaeche{position:absolute;inset:0;z-index:3;border:0;padding:0;background:transparent;cursor:pointer}
.growth-model:not([data-zustand=film]) .gm-flaeche{display:none}
.gm-leiste{position:absolute;left:5%;right:5%;bottom:calc(1.5% + 12px);z-index:4;display:flex;align-items:center;gap:2px;padding:0 4px;border-radius:99px;
  background:rgba(255,255,255,.86);box-shadow:0 2px 12px #15251c1f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.growth-model:not([data-zustand=film]) .gm-leiste{display:none}
.gm-leiste .gm-zeit{position:static;flex:1;width:auto;min-width:0;height:44px}
.gm-play{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#151715;cursor:pointer}
.gm-play svg{width:18px;height:18px}
.gm-leiste .gm-ton{position:static;flex:none;min-width:44px;width:44px;height:44px;padding:0;justify-content:center;border:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.gm-leiste .gm-ton span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.gm-hinweis{bottom:calc(1.5% + 66px)}
.growth-model :is(.gm-flaeche,.gm-play):focus-visible{outline:2px solid #047857;outline-offset:-3px}
/* Sprung von oben: das Display endet ueber der festen Navigationsleiste. */
@media(max-width:820px){.gm-phone{scroll-margin-bottom:calc(96px + env(safe-area-inset-bottom))}}

/* Auswahl, neu geordnet: oben mit Luft „So funktioniert / blackestate-Logo / Senior Partner.“, darunter nach einem
   Abstand „Wähle dein Szenario.“ und nur vier Begriffe. Leadpreise hinter dem i in einer Glasbox. */
.gm-auswahl{justify-content:flex-end}
.gm-kopf{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 auto;padding-top:16%}
.gm-kopf .gm-titel{margin:0;font-size:clamp(16px,7.4cqw,22px);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.gm-logo{display:block;width:62%;height:auto;margin:4px 0}
.gm-wahl{margin:0 0 4px;font-size:clamp(11px,4.6cqw,13px);font-weight:500;color:#5b6660}
/* One shared explanation keeps all four options identically aligned and fully tappable. */
.gm-info-toggle{display:flex;align-items:center;justify-content:center;gap:7px;align-self:center;min-height:44px;margin:-6px 0;padding:0 12px;border:0;background:transparent;color:#56605a;font:inherit;font-size:11px;cursor:pointer}
.gm-info-toggle>span{display:grid;place-items:center;width:15px;height:15px;border:1px solid currentColor;border-radius:50%;font:italic 10px Georgia,serif}
.gm-info-toggle[aria-expanded=true]{color:#17563e}
.gm-infobox{position:absolute;left:7%;right:7%;bottom:calc(13% + 112px);z-index:6;margin:0;padding:14px 16px;border-radius:14px;background:#fffffff5;box-shadow:0 6px 28px #12241b24;
  color:#526158;font-size:clamp(11px,4.6cqw,12px);line-height:1.55;text-align:left;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.gm-infobox[hidden]{display:none}
.growth-model[data-zustand=ende] :is(.gm-kopf,.gm-wahl,.gm-infobox,.gm-info-toggle){display:none}
/* Ruhiger Grund hinter dem Titel: das Bild 0 des Films bleibt nur als Ahnung sichtbar. */
.gm-auswahl{background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.94) 45%,#fff 72%);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* Die Glasbox erscheint im freien Raum unter dem Titel und verdeckt keine Auswahl. */
.gm-infobox{bottom:auto;top:36%;text-align:center}
@container (max-width:250px){.gm-infobox{top:34%;padding:10px 12px;font-size:11px}}

/* Titel als Marken-Einheit direkt ueber der Auswahl: „So funktioniert“, Abstand, dann „blackestate / Senior Partner.“
   eng zusammen; das Logo ist exakt so breit wie „Senior Partner.“. Dahinter bleibt das Video leicht verschwommen sichtbar. */
.gm-auswahl{background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.4) 34%,rgba(255,255,255,.9) 58%,#fff 76%);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.gm-kopf{margin:0 0 22px;padding-top:0;gap:0}
.gm-kopf .gm-titel{font-size:clamp(20px,9.4cqw,28px);font-weight:600;letter-spacing:-.035em;line-height:1.1}
.gm-marke{display:inline-grid;justify-items:center;row-gap:5px;margin-top:16px}
.gm-marke .gm-logo{width:0;min-width:100%;height:auto;margin:0}
.gm-infobox{top:16%;white-space:pre-line}@container (max-width:250px){.gm-infobox{top:14%}}
@container (max-width:250px){.gm-kopf{font-size:18px}.gm-kopf .gm-titel{font-size:18px}.gm-marke{margin-top:10px;row-gap:3px}}

/* Kopf ueber dem iPhone: klare Nutzen-Aussage, darunter direkt ueber dem iPhone „Am Beispiel von [b] Partner Max“;
   das b als App-Icon (weisse Kachel wie das Markenzeichen der App). */
.gm-intro h3{margin:0;font-size:clamp(24px,6.4vw,34px);font-weight:600;letter-spacing:-.045em;line-height:1.08}
.gm-intro h3 span{display:block;margin-top:.12em;color:#8fc9ad}
.gm-beispiel{display:flex;align-items:center;justify-content:center;gap:7px;margin:18px 0 0;font-size:13px;font-weight:500;color:#b7c4bc}
.gm-beispiel .gm-app{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:6px;
  background:linear-gradient(160deg,#fff,#e9ecea);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.35),0 4px 10px -4px rgba(0,0,0,.5)}
.gm-beispiel .gm-app img{width:auto;height:12px;display:block}
/* Titel: zwei gleich grosse Zeilen, die erste passt immer in eine Zeile (Schrift waechst und schrumpft mit der Breite).
   Zweite Zeile im blackestate-Smaragd-Verlauf wie die uebrigen Akzent-Zeilen auf dunklem Grund. */
.gm-intro h3{font-size:min(34px,calc((100vw - 40px) / 16.2));white-space:nowrap;line-height:1.12}
.gm-intro h3 span{margin-top:.04em;color:transparent;background:linear-gradient(135deg,hsl(var(--brand,162 52% 48%)),hsl(var(--brand,162 52% 48%) / .76));-webkit-background-clip:text;background-clip:text}
@media(min-width:821px){.gm-intro h3{font-size:34px}}
/* b-Icon so gross wie die Schrift der Zeile daneben. */
.gm-beispiel{gap:.4em;font-size:14px}
.gm-beispiel .gm-app{width:1.2em;height:1.2em;border-radius:.3em}
.gm-beispiel .gm-app img{height:.66em}
/* Founder 29.09.: Titelblock direkt ueber „Wähle dein Szenario.“ mit etwas Luft, nicht mehr oben in der Karte.
   Hintergrund klarer und transparenter, aber so stark weichgezeichnet, dass kein Detail des Films lesbar ist. */
.gm-kopf{position:static;margin:0 0 18px}
.gm-auswahl{background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.22) 38%,rgba(255,255,255,.78) 60%,#fff 80%);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1)}
/* Hintergrund im Display: das Video soll erkennbar laufen, Einzelheiten bleiben unlesbar.
   Das Titelformat ueber dem iPhone ist seit 29.09. das globale Format aller Haupttitel (.be-titel in journey.css). */
.gm-auswahl{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 36%,rgba(255,255,255,.62) 60%,rgba(255,255,255,.94) 80%);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}

/* One standard film: keep the start action clear of the mobile navigation. */
.growth-model[data-zustand=start] .gm-auswahl{padding-bottom:clamp(76px,30cqw,96px)}

/* Branded end card: the next action is the webinar, never a scenario selector. */

.gm-end-logo{display:block;width:min(185px,100%);height:auto;margin:0 auto clamp(18px,9cqw,28px)}
.gm-weiter-titel{font-size:clamp(24px,11cqw,34px);font-weight:500;line-height:1.08;letter-spacing:-.045em;margin-bottom:clamp(20px,9cqw,28px)}
.gm-weiter-titel .nur-webinar{background:var(--section-title-emerald,linear-gradient(135deg,#1f6f57,#55927f));-webkit-background-clip:text;background-clip:text;color:transparent}
.gm-weiter-titel .nur-selfie{font-size:.7em;color:#151715}

/* Keep a still behind both glass cards, including a return visit before video decoding. */
.gm-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.growth-model[data-zustand=film] .gm-cover{display:none}
.growth-model:not([data-zustand=film]) .gm-film{visibility:hidden}
.gm-auswahl{background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.42) 32%,rgba(255,255,255,.78) 62%,rgba(255,255,255,.62));-webkit-backdrop-filter:blur(12px) saturate(1.08);backdrop-filter:blur(12px) saturate(1.08);box-shadow:inset 0 1px 0 #ffffff85}
.growth-model[data-zustand=ende] .gm-auswahl{background:linear-gradient(165deg,rgba(255,255,255,.22),rgba(255,255,255,.78) 38%,rgba(255,255,255,.82) 70%,rgba(255,255,255,.38))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.gm-auswahl,.growth-model[data-zustand=ende] .gm-auswahl{background:#fffffff0}}
@media(prefers-reduced-transparency:reduce){.gm-auswahl,.growth-model[data-zustand=ende] .gm-auswahl{background:#f5f5f5;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Erstbesuch: direkt starten, nur ein Playzeichen auf dem weichgezeichneten Film. */
.growth-model[data-zustand=start] .gm-auswahl{justify-content:center;align-items:center;padding:0;background:rgba(12,22,18,.12);box-shadow:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.visitor-flow #main .growth-model[data-zustand=start] .gm-auswahl{padding:0;gap:0;overflow:hidden}
.growth-model[data-zustand=start] :is(.gm-kopf,.phone-video-expand){display:none}
.growth-model[data-zustand=start] .gm-start{width:72px;height:72px;min-height:72px;margin:0;padding:23px;border-radius:50%;color:#fff;background:linear-gradient(145deg,#ffffff38,#ffffff14);border:1px solid #ffffff73;box-shadow:inset 0 1px 0 #ffffff40,0 8px 24px #0002;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.growth-model[data-zustand=start] .gm-start svg{width:26px;height:26px;flex:none;filter:drop-shadow(0 1px 2px #0003)}
.growth-model[data-zustand=start] .gm-start :is(span,small){position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.growth-model[data-zustand=start] .gm-start:focus-visible{outline:3px solid #fff;outline-offset:4px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.growth-model[data-zustand=start] .gm-cover{filter:blur(12px);transform:scale(1.06)}}
@media(prefers-reduced-transparency:reduce){.growth-model[data-zustand=start] .gm-auswahl{background:#163e31;-webkit-backdrop-filter:none;backdrop-filter:none}}