/* ==========================================================================
e.a.s.i.® Leadership Academy — Website 2026
Design: Schwarz / Weiß / Grün · kontrastreiche Sektionswechsel
Schriften lokal eingebunden (DSGVO-konform, keine externen Requests)
========================================================================== */
/* ---------- 1. Schriften ------------------------------------------------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
src:url('../fonts/inter-latin-ext-400-normal.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
src:url('../fonts/inter-latin-ext-500-normal.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
src:url('../fonts/inter-latin-ext-600-normal.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
src:url('../fonts/inter-latin-ext-700-normal.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ---------- 2. Tokens ---------------------------------------------------- */
:root{
/* Petrol-Familie, an die Farbgebung von roger-rankel.de angelehnt */
--pet-900:#0A2C34;
--pet-950:#061F25; /* tiefster Ton – Fußbereich */
--pet-800:#0F3F4A;
--pet-700:#14505E;
--pet-600:#1B5662;
--pet-500:#246A78;
--paper:#FAF8F4; /* Kartenfläche – kein reines Weiß, leicht warm */
--paper-2:#F2EEE7;
--paper-3:#E3DCD1;
/* AKZENT – aus dem Logo abgeleitet.
--brand ist das Türkis direkt aus easi-leadership-academy-logo-farbig.png.
Es allein reicht nicht: Auf hellem Grund kommt es nur auf 2,75:1, die
Barrierefreiheit verlangt 4,5:1 für Text. Deshalb vier Abstufungen auf
demselben Farbton (185°), jede für ihre Aufgabe geprüft. */
--brand:#119BA8; /* Türkis wie im Logo – Flächen, Zierlinien */
--acc:#0C6B74; /* Text und Links auf Hell 4,6:1 */
--acc-mid:#0F8B97; /* große Headlines auf Hell 3,0:1 */
--acc-fill:#0E828D; /* Fläche hinter weißer Schrift 4,6:1 */
--acc-bright:#5FE0EC; /* auf Petrol 5,7:1 */
--acc-deep:#0A5A62;
/* ZWEITAKZENT – warm. Türkis bleibt die Leitfarbe; das Orange kommt nur an
wenigen Stellen vor und soll dort Wärme setzen, nicht konkurrieren.
--warm trägt weiße Schrift (4,8:1) und steht auch als Text auf Papier
(4,6:1); --warm-bright ist die Variante für dunkle Flächen (7,4:1). */
--warm:#B4581E;
--warm-bright:#F0A868;
/* HANDLUNGSAUFFORDERUNGEN – knalliges Orange, damit jeder Knopf sofort
gefunden wird. Weiße Schrift wäre darauf nicht lesbar (2,6:1), deshalb
trägt der Knopf dunkle Schrift: 6,8:1. Gegenüber der dunklen Fläche
steht das Orange bei 5,7:1, hebt sich also klar ab. */
--cta:#FF7A18;
--cta-ink:#23140A;
--cta-hover:#FF9442;
--ink:#24201C; /* Text auf Hell – warmes Anthrazit 15,3:1 */
--ink-soft:#5C554E; /* 6,9:1 */
--ink-mute:#8C837A; /* 3,5:1 – nur für Beiwerk */
/* Seitenhintergründe: zwei Ebenen, die per Scroll gekreuzt werden */
--bg-dark:radial-gradient(118% 78% at 74% 6%,#1E5F6D 0%,#123F4A 44%,#0A2C34 100%);
--bg-light:radial-gradient(112% 74% at 18% 0%,#F5F1EA 0%,#EDE7DD 54%,#E0D8CB 100%);
/* SCHRIFT – bitte vor dem Ändern lesen.
Apple setzt SF Pro. Die Schrift darf NICHT mitgeliefert werden: Apples
Lizenz erlaubt sie nur auf Apple-Geräten, eine woff2-Datei auf dem
Server wäre ein Lizenzverstoß. Erlaubt und überall üblich ist der Weg
hier: -apple-system spricht die Schrift an, die auf dem Gerät ohnehin
installiert ist. Auf Mac, iPhone und iPad rendert die Seite damit in
echtem SF Pro – inklusive optischer Größen, also enger und feiner in
großen Graden.
Windows und Android haben SF nicht. Dort greift Inter, lokal
eingebunden: die offene Schrift, die als Entsprechung gezeichnet wurde.
Beide sind sich nahe genug, dass Umbrüche und Zeilenlängen stimmen –
ein Buchstabenvergleich fällt aber auf. Wer überall exakt dasselbe Bild
will, stellt 'Inter' nach vorne; dann sehen auch Apple-Geräte Inter.
Der ruhige Charakter kommt ohnehin weniger von der Schrift als von
Gemischtschreibung, halbfett statt fett, enger Laufweite und viel
Luft – das gilt für beide. */
--font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',
'Inter','Segoe UI Variable Display','Segoe UI',Helvetica,Arial,sans-serif;
--font-body:-apple-system,BlinkMacSystemFont,'SF Pro Text',
'Inter','Segoe UI Variable Text','Segoe UI',Helvetica,Arial,sans-serif;
--wrap:1280px;
--wrap-narrow:840px;
--bar:1120px;
--gut:clamp(20px,5vw,72px);
--sec-y:clamp(80px,11vw,168px);
/* Zusätzlicher Anlauf über der ersten Überschrift einer Sektion. Der
Hintergrund wechselt erst, wenn die Sektion die 10-Prozent-Linie
erreicht; dieser Vorlauf sorgt dafür, dass die Überschrift danach noch
einen langen Scrollweg vor sich hat, statt dunkel auf dunkel zu laufen. */
--lead-in:clamp(24px,5vh,64px);
--r:10px; /* Eingabefelder, kleine Flächen */
--r-card:18px; /* Kacheln */
--r-btn:12px;
--ease:cubic-bezier(.22,1,.36,1);
--ease-soft:cubic-bezier(.33,.9,.28,1);
--swap:.22s; /* Dauer des Hintergrundwechsels */
/* Reihenfolge der geteilten Überschriften: dunkel · Linie · grün · Text */
--t-up:.04s; --t-rule:.46s; --t-down:.72s; --t-after:1.22s;
}
/* Theme-Tokens: werden beim Scrollen an umgeschaltet
und lokal von .on-dark / .on-light überschrieben. */
html,.on-light{
--fg:var(--ink);
--fg-2:var(--ink-soft);
--fg-3:var(--ink-mute);
--line:rgba(16,38,44,.14);
--line-2:rgba(16,38,44,.09);
--surface:var(--paper);
--surface-2:var(--paper-2);
--acc-on:var(--acc);
--acc-big:var(--acc-mid);
}
html.t-dark,.on-dark{
--fg:#FFFFFF;
--fg-2:rgba(255,255,255,.74);
--fg-3:rgba(255,255,255,.5);
--line:rgba(255,255,255,.16);
--line-2:rgba(255,255,255,.1);
--surface:var(--pet-700);
--surface-2:var(--pet-600);
--acc-on:var(--acc-bright);
--acc-big:var(--acc-bright);
}
/* ---------- 3. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:118px}
body{
margin:0;background:transparent;color:var(--fg);
font-family:var(--font-body);font-size:clamp(16px,1.05vw,17.5px);
line-height:1.62;font-weight:400;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;
/* Große Grade laufen eng, kleine Grade brauchen mehr Luft – deshalb wird
die Sperrung über den Schriftgrad geregelt und nicht pauschal. */
letter-spacing:-.016em;line-height:1.07;text-wrap:balance;
overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;color:var(--fg)}
h3,h4{letter-spacing:-.01em;line-height:1.25}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--acc-bright);outline-offset:3px}
::selection{background:var(--acc-mid);color:#fff}
/* ---------- 3b. Der Hintergrundwechsel beim Scrollen --------------------- */
.page-bg{position:fixed;inset:0;z-index:-2;background:var(--bg-dark);pointer-events:none}
/* Hell ist der Standard: Fällt JavaScript aus, bleibt die Seite lesbar. */
.page-bg::after{content:"";position:absolute;inset:0;background:var(--bg-light);
opacity:1;transition:opacity var(--swap) var(--ease-soft)}
html.t-dark .page-bg::after{opacity:0}
/* Feines Rauschen über der Fläche – nimmt Verläufen das Digitale */
.page-bg::before{content:"";position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
/* Farben laufen weich mit dem Hintergrund mit */
.sec,.sec h2,.sec h3,.sec h4,.sec p,.sec li,.sec strong,.sec .eyebrow,
.sec .statement,.symptoms li,.step,.step p,.easi__item,.easi__item p,.easi__letter,
.dl,.dl p,.quote,.quote figcaption,.proof__t,.costs li,.hair,.prose p,.prose li{
transition:color var(--swap) var(--ease-soft),border-color var(--swap) var(--ease-soft),
background-color var(--swap) var(--ease-soft);
}
/* ---------- 4. Layout ---------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.sec{padding-block:var(--sec-y);position:relative;background:transparent}
/* Ohne Skript und bei „Bewegung reduzieren" steht statt des Films das
Standbild – die Klasse setzt main.js. */
.hero__vid.is-still{display:none}
.hero__media.is-still-bg{background:url("../img/fuehrung-mittelstand-silhouetten.jpg") 64% 42%/cover no-repeat}
/* Sektionen, die mit einer geteilten Überschrift beginnen, bekommen den
Anlauf oben dazu – siehe --lead-in. */
.sec:has(.hsplit){padding-top:calc(var(--sec-y) + var(--lead-in))}
/* Jede Sektion bringt ihren Hintergrund selbst mit. Der Verlauf ist am
Fenster verankert (background-attachment:fixed), also wirkt er über die
ganze Seite wie eine durchgehende Fläche – der Wechsel passiert hart an
der Sektionskante, während man scrollt. Das ist der Grund, warum die
Einblendungen früh starten dürfen: Text steht nie auf dem Grund der
vorigen Sektion. Auf älteren iOS-Geräten fällt „fixed“ auf „scroll“
zurück; dann sitzt der Verlauf pro Sektion – die Farben stimmen weiter. */
.sec--dark{background-image:var(--bg-dark)}
.sec--paper,.sec--paper-2{background-image:var(--bg-light)}
.sec--dark,.sec--paper,.sec--paper-2{background-attachment:fixed;background-size:cover}
/* Dasselbe feine Rauschen wie auf der Grundfläche */
.sec--dark::before,.sec--paper::before,.sec--paper-2::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.sec>.wrap{position:relative;z-index:1}
/* Die alten Klassen setzen außerdem die Theme-Tokens. */
.sec--dark{--fg:#FFFFFF;--fg-2:rgba(255,255,255,.74);--fg-3:rgba(255,255,255,.5);
--line:rgba(255,255,255,.16);--line-2:rgba(255,255,255,.1);
--surface:var(--pet-700);--surface-2:var(--pet-600);
--acc-on:var(--acc-bright);--acc-big:var(--acc-bright);color:#fff}
.sec--paper,.sec--paper-2{--fg:var(--ink);--fg-2:var(--ink-soft);--fg-3:var(--ink-mute);
--line:rgba(16,38,44,.14);--line-2:rgba(16,38,44,.09);
--surface:var(--paper);--surface-2:var(--paper-2);
--acc-on:var(--acc);--acc-big:var(--acc-mid);color:var(--ink)}
.sec--tight{padding-block:clamp(56px,7vw,100px)}
.sec p{color:var(--fg-2)}
.sec--paper p,.sec--paper-2 p{color:var(--ink-soft)}
/* Kein Kapitälchen-Kicker mehr: eine ruhige, gemischt geschriebene Zeile,
die den Abschnitt benennt, ohne sich vor die Überschrift zu drängen. */
.eyebrow{display:flex;align-items:center;gap:14px;
font-family:var(--font-display);font-weight:500;font-size:1rem;
letter-spacing:-.006em;margin-bottom:clamp(20px,2.2vw,32px);color:var(--fg)}
.eyebrow__num{display:none}
.eyebrow__line{display:none}
.eyebrow span:last-child{opacity:.58}
.h-xxl{font-size:clamp(2.4rem,6.6vw,5.6rem);line-height:1.04;letter-spacing:-.021em}
.h-xl {font-size:clamp(2.05rem,5vw,4.2rem);line-height:1.06;letter-spacing:-.019em}
.h-l {font-size:clamp(1.66rem,3.2vw,2.6rem);line-height:1.12;letter-spacing:-.016em}
.h-m {font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.14;letter-spacing:-.015em}
.h-s {font-family:var(--font-display);font-weight:600;font-size:1rem;
letter-spacing:.02em;line-height:1.2;margin:0}
.dim{opacity:.42}
.acc{color:var(--acc-big)}
h2.acc,h3.acc,.h-s.acc{color:var(--acc-big)}
.lead{font-size:clamp(1.06rem,1.45vw,1.28rem);line-height:1.58;max-width:60ch}
.body-max{max-width:66ch}
.hair{height:1px;background:var(--line);border:0;margin:0}
/* ---------- 5. Buttons --------------------------------------------------- */
.btn{
--btn-bg:var(--cta);--btn-fg:var(--cta-ink);--btn-bd:var(--cta);
position:relative;display:inline-flex;align-items:center;gap:.7em;
padding:1.05em 1.9em;border:1px solid var(--btn-bd);border-radius:var(--r-btn);
background:var(--btn-bg);color:var(--btn-fg);overflow:hidden;
font-family:var(--font-display);font-weight:600;font-size:.85rem;
letter-spacing:.005em;text-decoration:none;cursor:pointer;
transition:transform .4s var(--ease),background .3s,color .3s,border-color .3s;
}
.btn>*{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;z-index:0;background:rgba(0,0,0,.22);
transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover::before{transform:translateY(0)}
.btn__arrow{transition:transform .4s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(5px)}
.on-dark .btn--primary,.sec--dark .btn--primary,.hero .btn--primary,.band .btn--primary,
.check .btn--primary{--btn-bg:var(--cta);--btn-bd:var(--cta);--btn-fg:var(--cta-ink)}
.hero .btn--primary{box-shadow:0 12px 40px -14px rgba(255,122,24,.62)}
.on-dark .btn--primary::before,.sec--dark .btn--primary::before,.hero .btn--primary::before,
.band .btn--primary::before,.check .btn--primary::before{background:rgba(255,255,255,.28)}
/* Beim Überfahren wird der Knopf heller statt dunkler – die Abdunklung aus
.btn::before würde das Orange sonst stumpf machen. */
.btn--primary:hover{--btn-bg:var(--cta-hover);--btn-bd:var(--cta-hover)}
.btn--primary::before{background:rgba(255,255,255,.3)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--fg);--btn-bd:var(--line)}
.btn--ghost::before{background:rgba(127,127,127,.14)}
.btn--ghost:hover{--btn-bd:currentColor}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.txtlink{display:inline-flex;align-items:center;gap:.5em;
font-family:var(--font-display);font-weight:600;font-size:.85rem;
letter-spacing:.005em;text-decoration:none;
color:var(--acc-on);border-bottom:1px solid currentColor;padding-bottom:3px;
transition:gap .35s var(--ease),color .3s}
.txtlink:hover{gap:.9em}
/* ---------- 6. Kopfleiste (schwebender Balken + Burger-Block) ------------- */
.site-header{position:fixed;inset:24px 0 auto 0;z-index:90;pointer-events:none;
transition:transform .5s var(--ease),top .4s var(--ease)}
.site-header.is-compact{top:12px}
.site-header.is-hidden{transform:translateY(calc(-100% - 40px))}
.site-header__row{width:100%;max-width:calc(var(--bar) + 88px);margin-inline:auto;
padding-inline:clamp(12px,3vw,24px);display:flex;align-items:stretch;gap:8px}
.bar{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;
gap:20px;background:var(--pet-800);color:#fff;padding:0 clamp(18px,2.4vw,30px);
height:76px;pointer-events:auto;position:relative;
transition:height .4s var(--ease),background .4s}
.site-header.is-compact .bar{height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;flex:0 0 auto}
/* Das Logo liegt als Fassung für dunklen Grund vor: der Balken „Leadership
Academy" ist freigestellt, die Figuren sind aufgehellt. Auf hellem Grund
gehört die Originaldatei easi-leadership-academy-logo-farbig.png daneben. */
.brand img,.brand__logo{height:clamp(38px,4vw,54px);width:auto;display:block}
.site-header.is-compact .brand__logo{height:clamp(32px,3.3vw,44px);
transition:height .3s var(--ease)}
.brand__fallback{font-family:var(--font-display);font-weight:600;font-size:1.2rem;
letter-spacing:-.02em;text-transform:lowercase;color:#fff;line-height:1}
.brand__fallback b{color:var(--acc-bright)}
/* text-transform:none ist nötig: .brand__fallback stellt den Wortmarken-Text
auf Kleinschreibung, und das würde sonst hierher durchschlagen. */
.brand__sub{display:block;font-family:var(--font-display);font-weight:500;font-size:.72rem;
text-transform:none;letter-spacing:-.005em;color:rgba(255,255,255,.55);margin-top:3px}
.bar__claim{font-size:1.02rem;font-weight:300;color:rgba(255,255,255,.9);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Burger-Block */
.burger{flex:0 0 auto;width:76px;height:76px;background:var(--pet-800);border:0;
cursor:pointer;pointer-events:auto;display:grid;place-content:center;gap:6px;
transition:width .4s var(--ease),height .4s var(--ease),background .3s}
.site-header.is-compact .burger{width:64px;height:64px}
.burger:hover{background:var(--pet-600)}
.burger span{display:block;width:30px;height:2.5px;background:#fff;
transition:transform .45s var(--ease),opacity .25s,width .35s var(--ease)}
.burger span:nth-child(2){width:22px}
.burger:hover span:nth-child(2){width:30px}
.burger[aria-expanded="true"]{background:transparent}
body.no-scroll .bar{opacity:0;visibility:hidden;transition:opacity .3s var(--ease-soft),visibility .3s}
body.no-scroll .site-header{transform:none!important}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
@media (max-width:720px){
.site-header{inset:12px 0 auto 0}
.site-header__row{padding-inline:12px;gap:6px}
.bar{height:62px;padding:0 16px}
.site-header.is-compact .bar{height:56px}
.bar__claim{display:none}
.burger{width:62px;height:62px}
.site-header.is-compact .burger{width:56px;height:56px}
}
/* Vollbild-Menü: redaktionelle Linkliste statt Buttons */
.menu{position:fixed;inset:0;z-index:85;background:var(--pet-800);
overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
padding:clamp(78px,9.5vh,110px) var(--gut) clamp(30px,4vh,48px);
opacity:0;visibility:hidden;transition:opacity .38s var(--ease-soft),visibility .38s}
.menu.is-open{opacity:1;visibility:visible}
.menu::before{content:"";position:fixed;inset:0;pointer-events:none;
background:radial-gradient(80% 60% at 78% 8%,rgba(95,224,236,.14),transparent 64%),
radial-gradient(70% 60% at 8% 96%,rgba(36,138,160,.4),transparent 66%)}
.menu__inner{position:relative;width:100%;max-width:1120px;margin-inline:auto;
display:grid;grid-template-columns:.86fr 1.14fr;grid-template-rows:auto 1fr;
gap:clamp(30px,5vw,72px);align-items:start;align-content:start}
@media (max-width:860px){.menu__inner{grid-template-columns:1fr;gap:34px}}
.menu__col{min-width:0}
.menu__head{display:flex;align-items:center;gap:12px;margin-bottom:6px;
font-family:var(--font-display);font-weight:600;font-size:.68rem;
letter-spacing:.005em;color:rgba(255,255,255,.5)}
.menu__head::before{content:"";width:22px;height:1px;background:var(--acc-bright)}
/* Ein Menüpunkt: Titel plus kurzer Teaser darunter */
.mlink{display:block;position:relative;text-decoration:none;color:#fff;
padding:clamp(13px,1.4vw,17px) 0;border-top:1px solid rgba(255,255,255,.14);
transform:translateY(16px);opacity:0;
transition:transform .6s var(--ease),opacity .45s var(--ease),
border-color .3s,padding-left .4s var(--ease)}
.menu.is-open .mlink{transform:none;opacity:1}
.mlink:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.mlink:hover{padding-left:12px;border-top-color:rgba(95,224,236,.5)}
.mlink__t{display:flex;align-items:baseline;gap:.5em;
font-family:var(--font-display);font-weight:600;font-size:clamp(1.18rem,2.1vw,1.75rem);letter-spacing:-.025em;line-height:1.04;
transition:color .28s}
.mlink:hover .mlink__t{color:var(--acc-bright)}
.mlink__t i{font-style:normal;font-size:.7em;opacity:0;transform:translateX(-8px);
transition:opacity .3s,transform .35s var(--ease);color:var(--acc-bright)}
.mlink:hover .mlink__t i{opacity:1;transform:none}
.mlink__d{display:block;margin-top:7px;max-width:44ch;
font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.56);
transition:color .28s}
.mlink:hover .mlink__d{color:rgba(255,255,255,.78)}
/* Die drei Handlungspunkte etwas hervorheben */
.menu__col--do .mlink__t{color:#fff}
.menu__col--do .mlink::after{content:"";position:absolute;left:-14px;top:50%;
width:3px;height:0;background:var(--acc-bright);border-radius:3px;
transform:translateY(-50%);transition:height .4s var(--ease)}
.menu__col--do .mlink:hover::after{height:56%}
/* Auftritt der Einträge nacheinander */
.menu.is-open .menu__col:nth-child(1) .mlink:nth-of-type(1){transition-delay:.06s}
.menu.is-open .menu__col:nth-child(1) .mlink:nth-of-type(2){transition-delay:.11s}
.menu.is-open .menu__col:nth-child(1) .mlink:nth-of-type(3){transition-delay:.16s}
.menu.is-open .menu__col:nth-child(2) .mlink:nth-of-type(1){transition-delay:.13s}
.menu.is-open .menu__col:nth-child(2) .mlink:nth-of-type(2){transition-delay:.18s}
.menu.is-open .menu__col:nth-child(2) .mlink:nth-of-type(3){transition-delay:.23s}
.menu.is-open .menu__col:nth-child(2) .mlink:nth-of-type(4){transition-delay:.28s}
.menu.is-open .menu__col:nth-child(2) .mlink:nth-of-type(5){transition-delay:.33s}
.menu__col--do{grid-column:1;grid-row:1}
.menu__col:not(.menu__col--do){grid-column:2;grid-row:1/span 2}
.menu__card{grid-column:1;grid-row:2;align-self:start;margin-top:clamp(22px,3vh,34px)}
@media (max-width:860px){
.menu__col--do,.menu__col:not(.menu__col--do),.menu__card{grid-column:1;grid-row:auto}
.menu__card{margin-top:30px}
}
.menu__card p{margin:0}
.menu__card__v{font-family:var(--font-display);font-weight:600;
font-size:clamp(1rem,1.35vw,1.15rem);letter-spacing:-.01em;margin-top:8px!important}
.menu__card__v a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.24);
padding-bottom:2px;transition:.25s}
.menu__card__v a:hover{color:var(--acc-bright);border-bottom-color:var(--acc-bright)}
.menu__card__a{margin-top:14px!important;font-size:.88rem;line-height:1.5;
color:rgba(255,255,255,.5)}
.menu__foot{position:relative;max-width:1120px;margin:clamp(24px,3.5vh,40px) auto 0;
display:flex;flex-wrap:wrap;gap:12px clamp(20px,3vw,36px);align-items:center;
padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
font-size:.86rem;color:rgba(255,255,255,.45)}
.menu__foot a{color:rgba(255,255,255,.78);text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:2px;transition:.25s}
.menu__foot a:hover{color:var(--acc-bright);border-bottom-color:var(--acc-bright)}
.menu__foot strong{font-family:var(--font-display);font-weight:600;font-size:.68rem;
letter-spacing:.005em;color:rgba(255,255,255,.4)}
.menu__close{display:none}
@media (prefers-reduced-motion:reduce){.mlink{transform:none;opacity:1}}
/* Lesefortschritt */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:95;background:transparent}
.progress i{display:block;height:100%;width:0;background:var(--acc-bright)}
/* ---------- 7. Hero ------------------------------------------------------ */
/* Der Hero ist eine Bühne: Die Sektion bekommt über --stage-len (aus main.js,
gespeist von data-stage im HTML) zusätzliche Höhe, .hero__pin klebt per
position:sticky am Fensterrand und hält Film, Schleier und Text fest,
während der Fortschritt --sp durchläuft. Ohne JavaScript fällt die
Zusatzhöhe weg und der Hero ist eine ganz normale Sektion.
WICHTIG: overflow:hidden sitzt am Pin, nicht an der Sektion – ein
beschneidender Vorfahre würde position:sticky aushängen. */
.hero{position:relative;color:#fff;background:var(--pet-900)}
.hero__pin{position:relative;overflow:hidden;
min-height:min(100svh,1020px);
display:flex;align-items:flex-end;padding-top:190px;
padding-bottom:clamp(56px,7vw,104px)}
html.has-js .hero{min-height:calc(100svh + var(--stage-len,0) * 100vh)}
/* Im Bühnenbetrieb ist der Pin genau fensterhoch – alles, was tiefer läge,
wäre während des Halts unerreichbar. Deshalb hängen die Abstände hier an
der Fensterhöhe statt an festen Pixeln. */
html.has-js .hero__pin{position:sticky;top:0;height:100svh;min-height:0;
/* --hero-lift hebt den ganzen Hero-Inhalt an: Auf großen Fenstern sitzt er
sonst zu dicht an der Unterkante. Auf dem Handy bleibt er bei 0, dort ist
kein Platz dafür übrig. */
--hero-lift:0px;
padding-top:clamp(118px,15vh,190px);
padding-bottom:calc(clamp(40px,6vh,86px) + var(--hero-lift))}
@media (min-width:721px){
html.has-js .hero__pin{--hero-lift:clamp(20px,5vh,56px)}
}
html.has-js .hero__steps{margin-top:clamp(18px,3vh,30px)}
/* Der Aufstieg: Am Anfang sitzt der ganze Hero-Inhalt um --hero-rise tiefer
(main.js misst diesen Weg), die Überschrift steht also unten im Bild. Über
das erste Viertel des Halts fährt alles nach oben an seinen Platz – genau
der Platz, den danach die Absätze füllen. RISE = Länge dieses Wegs auf dem
Fortschritt 0..1: kleiner = der Aufstieg ist früher fertig. */
html.has-js .hero__inner{
/* Etappe 1: bis --rise-1 steigt nur der Platz für die Absätze auf.
Etappe 2: von --rise-2a bis --rise-2b kommt der Rest dazu, während
Knöpfe und Zahlenleiste erscheinen. So bleibt der Inhalt immer unten
verankert und es klafft nie ein leerer Block unter der Überschrift. */
--rise-1:.18; --rise-2a:.68; --rise-2b:.84;
--r1:min(1,var(--sp,0) / var(--rise-1));
--r2:min(1,max(0,(var(--sp,0) - var(--rise-2a)) / (var(--rise-2b) - var(--rise-2a))));
transform:translateY(calc(
(1 - var(--r1)) * (var(--hero-rise,30vh) - var(--hero-rise2,16vh))
+ (1 - var(--r2)) * var(--hero-rise2,16vh)))}
html.has-js .hero .hero__meta{margin-top:clamp(22px,4vh,54px);padding-top:clamp(14px,2.4vh,26px)}
.hero__pin::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;
background:linear-gradient(90deg,transparent,var(--acc-bright) 22%,#3FC9E0 55%,transparent);
opacity:.7}
.hero__media{position:absolute;inset:-52% 0;z-index:0;will-change:transform}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;
object-position:56% 44%;opacity:.62;display:block;
/* Duotone: Schatten ins Petrol, Lichter ins Türkis */
filter:grayscale(1) contrast(1.42) brightness(.82) sepia(1) hue-rotate(150deg) saturate(1.9)}
/* Der Schleier ist seit dem Hintergrundfilm kräftiger: Ein bewegtes Bild
zieht die Aufmerksamkeit stärker als ein Foto, die Aussage muss vorn
bleiben. Rechts bleibt bewusst am meisten vom Film sichtbar. */
.hero__veil{position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(100deg,rgba(7,34,41,.96) 0%,rgba(8,38,45,.9) 34%,rgba(10,44,52,.62) 68%,rgba(10,44,52,.42) 100%),
linear-gradient(to top,var(--pet-900) 0%,rgba(10,44,52,.34) 42%,rgba(10,44,52,.1) 68%)}
/* Farbschleier: drei weiche Lichter, die langsam wandern */
.hero__aurora{position:absolute;inset:-12%;z-index:1;pointer-events:none;
mix-blend-mode:screen;filter:blur(58px);opacity:.72}
.hero__aurora i{position:absolute;display:block;border-radius:50%;will-change:transform}
.hero__aurora i:nth-child(1){left:44%;top:-6%;width:46vw;height:46vw;
background:radial-gradient(circle,rgba(95,224,236,.5),transparent 66%);
animation:drift1 26s var(--ease-soft) infinite alternate}
.hero__aurora i:nth-child(2){left:2%;top:34%;width:40vw;height:40vw;
background:radial-gradient(circle,rgba(38,168,196,.6),transparent 66%);
animation:drift2 32s var(--ease-soft) infinite alternate}
.hero__aurora i:nth-child(3){left:66%;top:52%;width:34vw;height:34vw;
background:radial-gradient(circle,rgba(0,196,140,.45),transparent 66%);
animation:drift3 22s var(--ease-soft) infinite alternate}
.hero__aurora i:nth-child(4){left:74%;top:-14%;width:26vw;height:26vw;
background:radial-gradient(circle,rgba(120,240,220,.4),transparent 64%);
animation:drift4 19s var(--ease-soft) infinite alternate}
@keyframes drift4{to{transform:translate3d(-8%,14%,0) scale(1.25)}}
@keyframes drift1{to{transform:translate3d(-9%,7%,0) scale(1.16)}}
@keyframes drift2{to{transform:translate3d(11%,-8%,0) scale(1.22)}}
@keyframes drift3{to{transform:translate3d(-13%,-6%,0) scale(1.1)}}
.hero__grid{position:absolute;inset:-12% -5%;z-index:2;pointer-events:none;opacity:.55;
will-change:transform;
background-image:linear-gradient(rgba(95,224,236,.11) 1px,transparent 1px),
linear-gradient(90deg,rgba(95,224,236,.11) 1px,transparent 1px);
background-size:92px 92px;
mask-image:radial-gradient(ellipse 88% 68% at 28% 42%,#000 18%,transparent 76%);
-webkit-mask-image:radial-gradient(ellipse 88% 68% at 28% 42%,#000 18%,transparent 76%)}
.hero__inner{position:relative;z-index:3;width:100%;will-change:transform,opacity}
.hero__inner::before{content:"";position:absolute;left:-6%;top:-8%;width:74%;height:88%;
z-index:-1;pointer-events:none;border-radius:50%;
background:radial-gradient(ellipse at 30% 40%,rgba(6,32,38,.72),transparent 68%);
filter:blur(42px)}
.hero h1{font-size:clamp(1.9rem,4.7vw,3.9rem);line-height:1.08;letter-spacing:-.019em;max-width:20ch;color:#fff}
/* Zweite Zeile: satt gefülltes Grün mit weichem Schein.
(Konturschrift wäre: color:transparent; -webkit-text-stroke:2px var(--acc-bright)) */
.hero h1 .dim{display:block;opacity:1;color:var(--acc-bright);
text-shadow:0 0 46px rgba(95,224,236,.34)}
.hero .lead{margin-top:30px;color:rgba(255,255,255,.82)}
/* Die Absätze der Hero-Bühne. --ps (0..1) ist der Auftritt, --pso der
Abgang – beides rechnet main.js aus data-step. Sie liegen im selben
Rasterfeld übereinander, damit der Platzbedarf konstant bleibt. */
.hero__steps{margin-top:30px;max-width:min(100%,62ch)}
html.has-js .hero__steps{display:grid}
.hero .hero__step{margin:0;color:rgba(255,255,255,.82)}
html.has-js .hero__step{
grid-area:1 / 1;
opacity:var(--ps,0);
transform:translateY(calc((1 - var(--ps,0) - var(--pso,0)) * 38px - var(--pso,0) * 44px));
filter:blur(calc((1 - var(--ps,0)) * 5px));
transition:none}
/* Knopfreihe und Zahlenleiste kommen zum Schluss dazu und bleiben stehen. */
html.has-js .hero .hero__late{
opacity:var(--ps,0);
transform:translateY(calc((1 - var(--ps,0)) * 24px));
transition:none}
/* Der Hinweis zum Weiterscrollen hat sich erledigt, sobald gescrollt wird. */
html.has-js .hero .scrollcue{opacity:calc(1 - var(--sp,0) * 6)}
.hero__kicker{display:inline-flex;align-items:center;gap:11px;margin-bottom:30px;
padding:9px 16px;border:1px solid rgba(255,255,255,.22);border-radius:99px;
font-family:var(--font-display);font-weight:700;font-size:.7rem;
letter-spacing:.005em;color:rgba(255,255,255,.92);
background:linear-gradient(100deg,rgba(95,224,236,.2),rgba(36,138,160,.16));
border-color:rgba(95,224,236,.4);backdrop-filter:blur(6px)}
.hero__kicker::before{content:"";width:7px;height:7px;border-radius:50%;
background:var(--acc-bright);box-shadow:0 0 0 0 rgba(95,224,236,.6);animation:pulse 2.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 11px rgba(95,224,236,0)}100%{box-shadow:0 0 0 0 rgba(95,224,236,0)}}
.hero__meta{display:flex;flex-wrap:wrap;gap:12px 44px;margin-top:54px;
padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.hero__meta li{font-family:var(--font-display);font-weight:700;font-size:.76rem;
letter-spacing:.005em;color:rgba(255,255,255,.58)}
.hero__meta b{color:var(--acc-bright);font-weight:600}
.scrollcue{position:absolute;left:var(--gut);bottom:26px;z-index:4;
display:flex;align-items:center;gap:14px;
font-family:var(--font-display);font-weight:700;font-size:.6rem;letter-spacing:.005em;
color:rgba(255,255,255,.42);text-decoration:none}
.scrollcue i{display:block;width:54px;height:1px;
background:linear-gradient(to right,rgba(255,255,255,.75),transparent);
animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:scaleX(0);transform-origin:0 50%}
45%{transform:scaleX(1);transform-origin:0 50%}
55%{transform:scaleX(1);transform-origin:100% 50%}
100%{transform:scaleX(0);transform-origin:100% 50%}}
@media (max-width:760px){.scrollcue{display:none}}
@media (max-width:720px){
html.has-js .hero{min-height:calc(100svh + var(--stage-len,0) * 72vh)}
}
/* Flache Fenster (kleine Notebooks, Handys quer, iPhone hochkant): Der Pin
ist genau fensterhoch, also muss der Inhalt hineinpassen. Überschrift und
Abstände hängen hier zusätzlich an der Fensterhöhe. */
@media (max-height:880px){
html.has-js .hero h1{font-size:min(clamp(1.9rem,4.7vw,3.9rem),7.6vh)}
html.has-js .hero__pin{padding-top:clamp(100px,12vh,190px);
padding-bottom:calc(clamp(32px,4.5vh,86px) + var(--hero-lift))}
html.has-js .hero__steps{margin-top:clamp(14px,2.2vh,30px)}
html.has-js .hero .hero__meta{margin-top:clamp(16px,2.6vh,54px);
padding-top:clamp(12px,1.8vh,26px)}
}
/* Ohne Bewegung keine Bühne: Der Halt fällt weg, alle Absätze stehen
untereinander da. (main.js setzt --ps in diesem Fall auf 1.) */
@media (prefers-reduced-motion:reduce){
html.has-js .hero{min-height:min(100svh,1020px)}
html.has-js .hero__pin{position:static;height:auto;min-height:min(100svh,1020px);
padding-top:190px;padding-bottom:clamp(56px,7vw,104px)}
html.has-js .hero__inner{transform:none}
html.has-js .hero__steps{display:block}
html.has-js .hero__step{opacity:1;transform:none;filter:none}
html.has-js .hero__step + .hero__step{margin-top:18px}
html.has-js .hero .hero__late{opacity:1;transform:none}
html.has-js .hero .scrollcue{opacity:1}
}
/* ---------- 8. Statement ------------------------------------------------- */
/* Blockzitat: großes, enges Gänsefüßchen statt Linie */
.statement{position:relative;padding-left:clamp(42px,5.2vw,96px)}
.statement::before{content:"\201E";position:absolute;left:0;top:0;
font-family:var(--font-display);font-weight:600;font-style:normal;
font-size:clamp(3.4rem,6.4vw,5.6rem);line-height:.72;letter-spacing:-.06em;
color:var(--acc-on);pointer-events:none;transform:translateY(-.46em)}
.statement__quote{font-family:var(--font-display);font-weight:600;font-size:clamp(1.28rem,2.9vw,2.35rem);line-height:1.08;letter-spacing:-.026em;
margin:0 0 20px;text-wrap:balance;color:var(--fg)}
/* ---------- 9. Symptom-Liste --------------------------------------------- */
.symptoms{display:grid;gap:0;margin-top:52px;border-top:1px solid var(--line)}
.symptoms li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:22px;
align-items:baseline;padding:22px 4px;border-bottom:1px solid var(--line);
font-size:clamp(1.02rem,1.6vw,1.28rem);line-height:1.4;font-weight:500;color:var(--fg);
transition:padding-left .45s var(--ease),color var(--swap) var(--ease-soft)}
.symptoms li::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:1px;
background:var(--acc-on);transition:right .55s var(--ease)}
.symptoms li:hover{padding-left:16px}
.symptoms li:hover::after{right:0}
.symptoms li::before{content:attr(data-n);font-family:var(--font-display);font-weight:600;
font-size:.78rem;letter-spacing:.005em;color:var(--acc-on)}
/* Ohne Textlabel: schlichter Strich statt einer Nummer */
.symptoms li:not([data-n])::before{content:"";display:block;width:22px;height:2px;
border-radius:2px;background:var(--acc-on);margin-top:.72em}
/* ---------- 9b. Symptom-Kacheln -------------------------------------------
Vier Kacheln mit eigenem Icon. Ersetzt in „Das Problem“ die Aufzählung. */
.symcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,248px),1fr));
gap:clamp(14px,1.5vw,18px);margin-top:clamp(44px,5vw,62px)}
.symcard{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
padding:clamp(28px,3vw,38px) clamp(24px,2.4vw,32px) clamp(30px,3vw,38px);
box-shadow:0 1px 2px rgba(10,44,52,.05),0 14px 30px -28px rgba(10,44,52,.5);
transition:transform .5s var(--ease),border-color .35s var(--ease),box-shadow .45s var(--ease),
background-color var(--swap) var(--ease-soft)}
/* Weicher Farbschimmer, der beim Hover aufzieht */
.symcard::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
background:radial-gradient(88% 68% at 12% -12%,rgba(17,155,168,.14),transparent 62%);
transition:opacity .45s var(--ease)}
/* Haarlinie an der Oberkante, die von links einläuft */
.symcard::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;
transform:scaleX(0);transform-origin:0 50%;
background:linear-gradient(90deg,var(--acc-on),transparent);
transition:transform .55s var(--ease)}
.symcard:hover{transform:translateY(-6px);border-color:var(--acc-on);
box-shadow:0 1px 2px rgba(10,44,52,.05),0 30px 54px -34px rgba(10,44,52,.62)}
.symcard:hover::after{opacity:1}
.symcard:hover::before{transform:none}
.symcard__ico{width:clamp(56px,4.6vw,66px);aspect-ratio:1;display:grid;place-items:center;
border-radius:18px;margin-bottom:clamp(22px,2.4vw,30px);color:var(--acc-on);flex:none;
background:rgba(17,155,168,.11);
background:color-mix(in srgb,var(--acc-on) 11%,transparent);
box-shadow:inset 0 0 0 1px rgba(17,155,168,.14);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc-on) 16%,transparent);
transition:background .35s,box-shadow .35s,transform .55s var(--ease)}
.symcard:hover .symcard__ico{transform:translateY(-3px) rotate(-5deg);
background:rgba(17,155,168,.19);
background:color-mix(in srgb,var(--acc-on) 19%,transparent)}
.symcard__ico svg{width:62%;height:62%;stroke-width:1.5;fill:none;stroke:currentColor;
stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.symcard h3{font-size:1.06rem;letter-spacing:-.012em;font-weight:600;margin-bottom:10px;color:var(--fg)}
.symcard p{margin:0;font-size:1.02rem;line-height:1.5;color:var(--fg-2);text-wrap:pretty}
@media (max-width:620px){
.symcards{gap:12px}
.symcard{flex-direction:row;align-items:flex-start;gap:18px;
padding:clamp(20px,5vw,26px) clamp(18px,4.4vw,24px)}
.symcard__ico{width:52px;margin-bottom:0}
}
/* ---------- 10. Kostenliste ---------------------------------------------- */
/* ---- Die verborgenen Kosten: der Fokus wandert mit ---------------------
Jede Zeile bekommt aus main.js --focus (0..1), je nachdem wie nah sie an
der Fokuslinie im Fenster steht. Daraus entstehen Helligkeit, Größe und
der Marker am linken Rand – immer nur eine Zeile ist ganz da, die anderen
treten zurück. Ohne JavaScript steht --focus auf 1 und alles ist normal
sichtbar. */
.costs{margin-top:60px}
.costs li:last-child{border-bottom:0}
.costs li{--focus:1;position:relative;display:grid;
grid-template-columns:minmax(0,.82fr) minmax(0,1.45fr);
gap:clamp(16px,3vw,48px);align-items:center;
padding:clamp(22px,2.6vw,32px) clamp(16px,2vw,26px);
border-bottom:1px solid var(--line);border-radius:var(--r-card);
transition:background .35s var(--ease)}
html.has-js .costs[data-focus-list] li{--focus:0;transition:none;
background:rgba(255,255,255,calc(.055 * var(--focus)));
transform:translateX(calc(var(--focus) * 8px))}
/* Marker am linken Rand: wächst aus der Mitte, wenn die Zeile dran ist. */
.costs li::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:2px;
border-radius:2px;background:var(--warm-bright);
transform:scaleY(var(--focus,0));transform-origin:50% 50%}
.costs li:hover{background:rgba(255,255,255,.06)}
.costs__n{display:none}
.costs__k{display:inline-block;font-family:var(--font-display);font-weight:600;
font-size:clamp(1.15rem,2.1vw,1.7rem);
letter-spacing:-.022em;line-height:1.05;color:var(--fg);
opacity:calc(.44 + .56 * var(--focus));
/* Der Begriff wächst deutlich, wenn die Zeile in den Fokus rückt. Bewusst
über transform und nicht über font-size: Eine wachsende Schrift würde die
Zeilenhöhe ändern, die folgenden Zeilen verschieben und damit die
Fokusrechnung selbst stören. --zoom ist der Faktor im Fokus. */
--zoom:1.55;
transform:scale(calc(1 + (var(--zoom) - 1) * var(--focus)));
transform-origin:0 50%}
.costs__t{font-size:1.02rem;line-height:1.5;color:var(--fg-2);margin:0;
opacity:calc(.46 + .54 * var(--focus))}
@media (max-width:760px){
.costs li{grid-template-columns:1fr;gap:10px}
.costs__k{--zoom:1.32}
}
@media (prefers-reduced-motion:reduce){
html.has-js .costs[data-focus-list] li{--focus:1;transform:none}
}
/* ---------- 11. Split / Bildrahmen --------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:start}
.split--media{grid-template-columns:1.02fr .98fr;align-items:center}
.split--offset{grid-template-columns:1.16fr .84fr}
@media (max-width:900px){.split,.split--media,.split--offset{grid-template-columns:1fr}}
.pframe{position:relative;overflow:hidden;background:var(--pet-900);border-radius:var(--r-card)}
.pframe--portrait{aspect-ratio:4/5}
.pframe--wide{aspect-ratio:16/10}
/* Flache Rahmen brauchen mehr Überstand, sonst läuft das Bild bei starkem
Parallax oben oder unten aus dem Rahmen. */
.pframe--wide img{top:-40%;height:180%}
.pframe--tall{aspect-ratio:3/4}
.pframe--square{aspect-ratio:1}
/* Quadratische Quelle in einem hohen Rahmen: Der Überstand, den die anderen
Rahmen für den Parallax brauchen, würde hier seitlich die halbe Bildbreite
wegschneiden. --fit lässt das Motiv den Rahmen genau füllen. */
.pframe.pframe--fit img,.pframe.pframe--fit video{top:0;height:100%}
.pframe img,.pframe video{position:absolute;left:0;top:-26%;width:100%;height:152%;object-fit:cover;
filter:grayscale(.7) sepia(.14) hue-rotate(140deg) contrast(1.02) brightness(1.05);will-change:transform;
transition:filter .6s var(--ease)}
.pframe:hover img,.pframe:hover video{filter:grayscale(.15) contrast(1.04) brightness(1.06)}
/* Menschen bleiben natürlich. Die Duotone-Behandlung ist für Stimmungs-
bilder gedacht; ein Porträt bekäme damit grüne Haut. */
.pframe--natural img,.pframe--natural video,
.pframe--natural:hover img,.pframe--natural:hover video{
filter:contrast(1.04) saturate(.97)}
/* Das Namensschild liegt auf dem Bild wie ein aufgenähter Aufnäher: etwas
vom Rand abgerückt, leicht schräg, mit Steppnaht innen und einem weichen
Schatten, der es von der Fläche abhebt. Die Naht ist ein gestrichelter
Innenrahmen – kein Bild, keine zusätzliche Anfrage.
Sitz ändern: --tag-x / --tag-y, Neigung: --tag-tilt. */
.pframe__tag{--tag-x:clamp(16px,6%,30px); --tag-y:clamp(22px,9%,46px); --tag-tilt:-3.2deg;
position:absolute;left:var(--tag-x);bottom:var(--tag-y);z-index:2;
background:var(--warm);color:#fff;
padding:13px 20px;font-family:var(--font-display);font-weight:600;font-size:.74rem;
letter-spacing:.005em;
border-radius:4px;
transform:rotate(var(--tag-tilt));transform-origin:0 100%;
box-shadow:0 10px 22px -10px rgba(4,22,27,.62), 0 2px 5px -2px rgba(4,22,27,.4);
/* Steppnaht: gestrichelte Linie, ein Stück nach innen gesetzt. */
outline:1.5px dashed rgba(255,255,255,.62);outline-offset:-5px}
.pframe__cap{margin-top:14px;font-size:.82rem;color:var(--fg-3)}
/* ---------- Freigestelltes Porträt -------------------------------------
Ohne Rahmen schwebt eine freigestellte Figur leicht. Zwei Mittel dagegen:
ein weicher Lichtfleck dahinter, der sie auf der Fläche verankert, und ein
Schlagschatten, der der Silhouette folgt (drop-shadow, nicht box-shadow –
box-shadow käme am rechteckigen Rahmen, nicht an der Person). */
.cutout{position:relative;margin:0;align-self:end}
.cutout__img{position:relative;z-index:1;display:block;
width:118%;max-width:none;margin-left:-9%;height:auto;
filter:drop-shadow(0 26px 46px rgba(6,31,37,.24));
/* Das Foto ist unten angeschnitten – ohne Auslauf bricht die Schulter an
einer geraden Kante ab und das sieht nach Fehler aus. Die Maske blendet
die letzten 20 % weich aus; der Schlagschatten wird mit ausgeblendet. */
-webkit-mask-image:linear-gradient(to bottom,#000 80%,rgba(0,0,0,0) 100%);
mask-image:linear-gradient(to bottom,#000 80%,rgba(0,0,0,0) 100%)}
.cutout::before{content:"";position:absolute;z-index:0;
left:4%;top:8%;width:92%;height:84%;border-radius:50%;pointer-events:none;
background:radial-gradient(ellipse at 50% 58%,rgba(36,106,120,.18),transparent 70%);
filter:blur(26px)}
/* Das Namensschild bezieht sich auf die Figur, nicht mehr auf einen Rahmen. */
/* Das Schild sitzt auf Brusthöhe – weiter unten läge es im Auslauf. */
.cutout .pframe__tag{--tag-x:clamp(10px,8%,46px); --tag-y:clamp(58px,22%,150px);z-index:2}
@media (max-width:900px){
/* In einer Spalte gibt es keinen Platz zum Überstehen. */
.cutout__img{width:100%;margin-left:0}
.cutout{max-width:460px;margin-inline:auto}
}
/* ---------- CTA am Abschnittsende --------------------------------------
Frage, Antwort, Knopf. Farben kommen über --fg / --fg-2 / --line aus der
Sektion – dieselbe Zeile funktioniert damit auf hellem und dunklem Grund. */
.cta-row{margin-top:clamp(40px,5vw,72px);padding-top:clamp(24px,3vw,38px);
border-top:1px solid var(--line);
display:flex;align-items:center;justify-content:space-between;
gap:clamp(18px,3vw,48px);flex-wrap:wrap}
.cta-row__text{max-width:58ch}
.cta-row__q{margin:0;font-family:var(--font-display);font-weight:600;
font-size:clamp(1.12rem,1.9vw,1.5rem);line-height:1.2;letter-spacing:-.018em;
color:var(--fg)}
.cta-row__a{margin-top:9px;font-size:.96rem;color:var(--fg-2)}
.cta-row__btn{flex:none}
@media (max-width:620px){
.cta-row{gap:20px}
.cta-row__btn{width:100%;justify-content:center}
}
/* ---------- CTA-Leiste am unteren Rand (nur schmale Fenster) -----------
Kommt erst nach dem Hero und geht wieder, sobald der Kontaktbereich im
Bild ist – die Klasse is-on setzt main.js. Auf dem Desktop gibt es sie
nicht: Dort sind die Zeilen in den Abschnitten präsent genug. */
.cta-bar{display:none}
@media (max-width:720px){
.cta-bar{display:flex;gap:9px;position:fixed;left:0;right:0;bottom:0;z-index:60;
padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
background:rgba(6,31,37,.9);backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-top:1px solid rgba(255,255,255,.14);
transform:translateY(130%);transition:transform .38s var(--ease);
pointer-events:none}
.cta-bar.is-on{transform:none;pointer-events:auto}
.cta-bar .btn{flex:1;justify-content:center;padding:.92em 10px;font-size:.8rem}
/* Die Leiste liegt außerhalb jeder Sektion, --fg und --line wären dort die
hellen Grundwerte. Der zweite Knopf braucht deshalb eigene Farben. */
.cta-bar .btn--ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.38)}
.cta-bar .btn--ghost::before{background:rgba(255,255,255,.14)}
}
@media (prefers-reduced-motion:reduce){
.cta-bar{transition:none}
}
/* ---------- 12. Full-Bleed-Band ------------------------------------------ */
.band{position:relative;overflow:hidden;color:#fff;background:var(--pet-900);
min-height:clamp(420px,64svh,760px);display:flex;align-items:center;
padding-block:clamp(72px,10vw,140px)}
.band__media{position:absolute;inset:-52% 0;z-index:0;will-change:transform}
/* Bildausschnitt verschieben.
object-position allein reicht hier nicht: Das Bild füllt den Rahmen fast
genau aus, es bleiben nur wenige Pixel Luft. Deshalb wird es leicht
vergrößert (--zoom) – das schafft Rand – und dann verschoben (--shift).
Ein positiver Wert schiebt das Bild nach unten, der sichtbare Ausschnitt
wandert also im Motiv nach OBEN. 0 % = unverändert mittig. */
.band__media img,.pagehero__media img{
transform:translateY(var(--shift,0%)) scale(var(--zoom,1));
transform-origin:50% 50%}
.band__media img,.band__media video{width:100%;height:100%;object-fit:cover;display:block;
/* --pos wählt den waagerechten Ausschnitt, --pos-m denselben für schmale
Fenster: Dort ist der Rahmen hoch und schmal, es bleibt also deutlich
weniger Bildbreite übrig. Beides wird am ![]()
gesetzt. */
object-position:var(--pos,50% 50%);
filter:grayscale(.8) contrast(1.06) sepia(.22) hue-rotate(140deg)}
@media (max-width:720px){
.band__media img,.band__media video{object-position:var(--pos-m,var(--pos,50% 50%))}
}
.band__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(96deg,rgba(10,44,52,.9) 4%,rgba(10,44,52,.56) 50%,rgba(10,44,52,.22) 100%),
radial-gradient(70% 60% at 80% 30%,rgba(95,224,236,.1),transparent 68%)}
/* Helle Motive brauchen mehr Tiefe: Der Schleier allein reicht nicht, weiße
Schrift stünde sonst auf Hellgrau. band--deep dunkelt das Bild selbst ab. */
.band--deep .band__media img{filter:grayscale(.85) contrast(1.14) brightness(.5) sepia(.24) hue-rotate(140deg)}
.band--light{color:var(--ink);background:var(--paper-2)}
.band--light .band__veil{background:linear-gradient(96deg,rgba(236,241,239,.97) 4%,rgba(236,241,239,.82) 40%,rgba(236,241,239,.14) 100%)}
/* Helles Band: Der Schleier legt sich hell darüber, das Motiv muss also
dunkler und kontrastreicher kommen, sonst verschwindet es ganz. Die alten
Werte waren auf ein bereits dunkles Demo-Bild eingestellt. */
.band--light .band__media img,.band--light .band__media video{
filter:grayscale(.86) contrast(1.4) brightness(.66)}
/* Zeigt der Film nicht, übernimmt das Standbild aus dem poster-Attribut. */
.vid-lazy.is-still{display:none}
.band__media.is-still-bg,.pframe.is-still-bg{background:var(--pet-900) center/cover no-repeat}
.band__inner{position:relative;z-index:2;width:100%}
.band__quote{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,3.7vw,3.1rem);line-height:.98;letter-spacing:-.03em;
margin:0;max-width:20ch;text-wrap:balance}
.band__sub{margin-top:24px;max-width:52ch;font-size:clamp(1rem,1.35vw,1.18rem);
color:rgba(255,255,255,.78)}
.band--light .band__sub{color:var(--ink-soft)}
.band__edge{display:none}
/* ---------- 13. e.a.s.i. Raster ------------------------------------------
NICHT MEHR IN GEBRAUCH seit dem 20.09.2026. Die vier Buchstaben laufen
jetzt als Bühne (Abschnitt „DAS WIRKSYSTEM“ weiter unten). Die Regeln
hier stehen noch, falls das Raster woanders gebraucht wird – auf keiner
Seite ist derzeit ein .easi mehr im Markup. */
.easi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
gap:clamp(14px,1.6vw,20px);margin-top:60px}
.easi__item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
padding:clamp(30px,3.4vw,42px);position:relative;
transition:background .35s var(--ease),transform .45s var(--ease),
border-color .3s,box-shadow .4s}
.easi__item:hover{background:var(--surface-2);transform:translateY(-4px);
border-color:var(--acc-on);box-shadow:0 20px 44px -30px rgba(10,44,52,.55)}
.easi__letter{font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,1.95vw,1.6rem);
line-height:1.05;letter-spacing:-.035em;text-transform:lowercase;margin-bottom:22px;
color:var(--fg);white-space:nowrap}
.easi__letter span{color:var(--acc-on);font-size:1.55em;line-height:0}
.easi__item h3{font-size:1.08rem;letter-spacing:-.012em;font-weight:600;margin-bottom:12px}
.easi__item p{font-size:.99rem;line-height:1.55;color:var(--fg-2);margin:0}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
gap:clamp(14px,1.6vw,20px);margin-top:clamp(14px,1.6vw,20px)}
.pillars__item{background:var(--pet-800);color:#fff;border-radius:var(--r-card);
padding:clamp(30px,3.4vw,42px);
transition:background .35s var(--ease),transform .45s var(--ease)}
.pillars__item:hover{background:var(--pet-700);transform:translateY(-4px)}
.pillars__item h3{font-size:.92rem;letter-spacing:.005em;color:var(--acc-bright);margin-bottom:14px;color:var(--acc-bright)}
.pillars__item p{font-size:.99rem;line-height:1.55;color:rgba(255,255,255,.76);margin:0}
/* ---------- 14. Formate --------------------------------------------------- */
.formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
gap:clamp(14px,1.6vw,20px);margin-top:60px}
.format{position:relative;background:var(--pet-800);text-decoration:none;color:inherit;
display:flex;flex-direction:column;min-height:340px;overflow:hidden;isolation:isolate;
border-radius:var(--r-card);border:1px solid rgba(255,255,255,.13);
transition:transform .5s var(--ease),border-color .35s}
.format:hover{transform:translateY(-5px);border-color:rgba(95,224,236,.5)}
.format__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* Das Bild trug bei 30 % Deckkraft nichts – die Kacheln wirkten leer.
Jetzt ist es deutlich zu sehen; lesbar bleibt der Text über den Verlauf
darüber, der unten dicht ist und nach oben aufmacht. */
.format__bg img{width:100%;height:100%;object-fit:cover;
filter:grayscale(.72) contrast(1.1) sepia(.2) hue-rotate(140deg);
opacity:.62;transform:scale(1.04);transition:transform 1.2s var(--ease),opacity .6s var(--ease)}
.format:hover .format__bg img{transform:scale(1.13);opacity:.78}
.format__bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(to top,var(--pet-900) 4%,rgba(10,44,52,.92) 34%,rgba(10,44,52,.66) 66%,rgba(10,44,52,.4) 100%)}
.format__body{position:relative;z-index:1;padding:clamp(30px,3.4vw,46px);
display:flex;flex-direction:column;flex:1}
.format__meta{font-family:var(--font-display);font-weight:600;font-size:.68rem;
letter-spacing:.005em;color:var(--acc-bright);margin-bottom:18px}
.format h3{font-size:clamp(1.35rem,2.1vw,1.8rem);text-transform:none;letter-spacing:-.025em;
color:#fff;margin-bottom:16px;line-height:1.03}
.format p{color:rgba(255,255,255,.76);font-size:1rem;margin:0}
.format__go{margin-top:auto;padding-top:28px;display:flex;align-items:center;gap:9px;
font-family:var(--font-display);font-weight:600;font-size:.76rem;letter-spacing:.005em;
color:#fff;transition:gap .35s var(--ease),color .3s}
.format:hover .format__go{gap:16px;color:var(--acc-bright)}
/* ---------- 15. Beweis / Zahlen ------------------------------------------ */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
gap:clamp(24px,3vw,48px);margin-top:60px;padding-top:46px;border-top:1px solid var(--line)}
.proof__n{font-family:var(--font-display);font-weight:600;
font-size:clamp(2.6rem,5.2vw,4.2rem);line-height:.9;letter-spacing:-.045em;
color:var(--acc-on);margin-bottom:14px;font-variant-numeric:tabular-nums}
.proof__n--word{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.proof__t{font-size:.98rem;line-height:1.5;color:var(--fg-2)}
/* ---------- 16. Schritte -------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
gap:clamp(22px,2.6vw,36px);margin-top:58px;counter-reset:s}
.step{position:relative;padding-top:26px;border-top:1px solid var(--line)}
.step h3{font-size:.94rem;letter-spacing:.005em;margin-bottom:12px}
.step p{font-size:.97rem;line-height:1.55;color:var(--fg-2);margin:0}
/* ---------- 17. Zitate / Logos ------------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
gap:clamp(22px,2.6vw,32px);margin-top:56px}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
padding:clamp(30px,3.2vw,40px);
display:flex;flex-direction:column;transition:transform .5s var(--ease),border-color .3s}
.quote:hover{transform:translateY(-4px);border-color:var(--acc-on)}
.quote__mark{font-family:var(--font-display);font-weight:600;font-size:3rem;line-height:.6;
color:var(--acc-on);margin-bottom:18px}
.quote p{font-size:1.04rem;line-height:1.55;margin-bottom:26px;color:var(--fg)}
.quote footer{margin-top:auto;display:flex;align-items:center;gap:14px}
.quote footer img{width:46px;height:46px;border-radius:50%;object-fit:cover;
filter:grayscale(.8) sepia(.2) hue-rotate(140deg)}
.quote figcaption{font-family:var(--font-display);font-weight:600;font-size:.74rem;
letter-spacing:.005em;color:var(--fg-3);line-height:1.45}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,64px);
margin-top:48px;padding-top:38px;border-top:1px solid var(--line)}
.logos li{font-family:var(--font-display);font-weight:600;font-size:1.05rem;
letter-spacing:.005em;color:var(--fg-3);transition:color .35s}
.logos li:hover{color:var(--fg)}
.logos img{height:34px;width:auto;filter:grayscale(1) brightness(3);opacity:.55}
/* ---------- 18. Ursachen-Check ------------------------------------------- */
.check{background:var(--pet-900);color:#fff;position:relative;overflow:hidden}
.check::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(80% 60% at 78% 14%,rgba(95,224,236,.14),transparent 62%),
radial-gradient(70% 60% at 10% 90%,rgba(36,106,120,.5),transparent 66%)}
.check__inner{position:relative;z-index:1}
.check__card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
border-radius:clamp(18px,2vw,26px);padding:clamp(28px,4vw,56px);margin-top:54px;
backdrop-filter:blur(6px)}
.check__bar{height:3px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.16);
margin-bottom:34px;position:relative}
.check__bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--acc-bright);
transition:width .5s var(--ease)}
.check__status{display:flex;justify-content:space-between;align-items:baseline;
font-family:var(--font-display);font-weight:600;font-size:.72rem;letter-spacing:.005em;
color:rgba(255,255,255,.55);margin-bottom:14px}
.check__q{font-family:var(--font-display);font-weight:600;font-size:clamp(1.12rem,2.3vw,1.75rem);line-height:1.08;letter-spacing:-.022em;
margin:0 0 30px;text-wrap:balance;color:#fff}
.check__opts{display:grid;gap:10px}
.check__opt{display:flex;align-items:center;gap:16px;width:100%;text-align:left;
padding:17px 20px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.22);
border-radius:var(--r-btn);cursor:pointer;font-size:1.02rem;line-height:1.35;
transition:border-color .25s,background .25s,transform .3s var(--ease)}
.check__opt:hover{border-color:var(--acc-bright);background:rgba(95,224,236,.09);transform:translateX(4px)}
.check__opt.is-sel{border-color:var(--acc-bright);background:rgba(95,224,236,.16)}
.check__opt i{flex:0 0 auto;width:26px;height:26px;border:1px solid rgba(255,255,255,.32);
border-radius:50%;display:grid;place-items:center;font-style:normal;
font-family:var(--font-display);font-weight:600;font-size:.7rem;color:rgba(255,255,255,.62);
transition:.25s}
.check__opt:hover i,.check__opt.is-sel i{border-color:var(--acc-bright);color:var(--acc-bright);
background:rgba(95,224,236,.14)}
.check__nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:30px}
.check__back{background:none;border:0;color:rgba(255,255,255,.55);cursor:pointer;
font-family:var(--font-display);font-weight:600;font-size:.76rem;letter-spacing:.005em;
padding:8px 0;transition:color .25s}
.check__back:hover{color:#fff}
.check__back[hidden]{display:none}
.check__fade{animation:ckin .34s var(--ease) both}
@keyframes ckin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.check p{color:rgba(255,255,255,.76)}
.check__result{display:grid;gap:30px}
.check__score{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.check__score b{font-family:var(--font-display);font-weight:600;
font-size:clamp(3.4rem,9vw,6rem);line-height:.85;letter-spacing:-.045em;color:var(--acc-bright)}
.check__score span{font-family:var(--font-display);font-weight:600;font-size:.8rem;
letter-spacing:.005em;color:rgba(255,255,255,.6);padding-bottom:12px}
.check__areas{display:grid;gap:14px}
.check__area{display:grid;grid-template-columns:minmax(140px,1fr) 2fr auto;gap:16px;
align-items:center;padding-block:12px;border-bottom:1px solid rgba(255,255,255,.14);font-size:.95rem}
.check__area em{font-style:normal;font-family:var(--font-display);font-weight:600;
font-size:.76rem;letter-spacing:.005em;}
.check__area .track{height:6px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.15)}
.check__area .track i{display:block;height:100%;background:var(--acc-bright);width:0;
transition:width .9s var(--ease)}
.check__area .val{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.62);font-size:.85rem;
min-width:5.5ch;text-align:right}
@media (max-width:640px){.check__area{grid-template-columns:1fr auto;row-gap:10px}
.check__area .track{grid-column:1/-1;order:3}}
/* ---------- 19. Downloads ------------------------------------------------ */
.downloads{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
gap:clamp(20px,2.4vw,28px);margin-top:56px}
.dl{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-card);
padding:clamp(30px,3.2vw,38px);
display:flex;flex-direction:column;
transition:border-color .35s,transform .5s var(--ease),box-shadow .4s}
.dl:hover{border-color:var(--acc-on);transform:translateY(-5px);
box-shadow:0 18px 40px -26px rgba(10,44,52,.5)}
.dl__ico{width:34px;height:34px;color:var(--acc-on);margin-bottom:22px}
.dl__type{font-family:var(--font-display);font-weight:600;font-size:.68rem;letter-spacing:.005em;
color:var(--fg-3);margin-bottom:12px}
.dl h3{font-size:1.15rem;text-transform:none;letter-spacing:-.015em;line-height:1.15;margin-bottom:12px}
.dl p{font-size:.97rem;color:var(--fg-2);margin-bottom:24px}
.dl .txtlink,.dl .btn{margin-top:auto;align-self:flex-start}
/* ---------- 20. Formulare ------------------------------------------------ */
.form{display:grid;gap:20px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:640px){.form__row{grid-template-columns:1fr}}
.field{display:grid;gap:8px}
.field label{font-family:var(--font-display);font-weight:600;font-size:.72rem;
letter-spacing:.005em;color:var(--fg-3)}
.field input,.field textarea,.field select{
width:100%;padding:15px 17px;background:rgba(255,255,255,.06);color:var(--fg);
border:1px solid var(--line);border-radius:var(--r);appearance:none;-webkit-appearance:none;
font-family:var(--font-body);font-size:1rem;transition:border-color .25s,background .25s}
.field textarea{min-height:140px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3)}
.field input:focus,.field textarea:focus,.field select:focus{
border-color:var(--acc-on);background:rgba(255,255,255,.1);outline:none}
.field input:user-invalid{border-color:#FF8B8B}
.sec--paper .field input,.sec--paper .field textarea,.sec--paper .field select,
.form--light .field input,.form--light .field textarea,.form--light .field select{
background:#FCFEFD;color:var(--ink);border-color:rgba(16,38,44,.2)}
.consent{display:flex;gap:13px;align-items:flex-start;font-size:.87rem;line-height:1.5;
color:var(--fg-2)}
.consent input{flex:0 0 auto;width:19px;height:19px;margin-top:2px;accent-color:var(--acc-on)}
.consent a{color:var(--acc-on)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.formnote{font-size:.82rem;color:var(--fg-3);margin-top:4px}
/* ---------- 21. Kontaktspalte -------------------------------------------- */
.contact-info{display:grid;gap:26px;align-content:start}
.contact-info__item{padding-bottom:22px;border-bottom:1px solid var(--line)}
.contact-info__item:last-child{border-bottom:0}
.contact-info__k{font-family:var(--font-display);font-weight:600;font-size:.7rem;
letter-spacing:.005em;color:var(--acc-on);margin-bottom:10px}
.contact-info__v{font-size:1.06rem;line-height:1.5;color:var(--fg)}
.contact-info__v a{text-decoration:none;border-bottom:1px solid var(--line);
transition:border-color .25s}
.contact-info__v a:hover{border-bottom-color:var(--acc-on)}
/* ---------- 22. Laufband -------------------------------------------------- */
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* ---------- 23. Footer --------------------------------------------------- */
.site-footer{background:var(--pet-950);color:rgba(255,255,255,.62);
padding-block:clamp(56px,6vw,88px) 34px;font-size:.94rem;position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(70% 80% at 88% 0%,rgba(36,106,120,.26),transparent 66%)}
.site-footer .wrap{position:relative;z-index:1}
.site-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
gap:clamp(28px,4vw,52px);padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.13)}
@media (max-width:860px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.site-footer__grid{grid-template-columns:1fr}}
.site-footer h4,.site-footer .foot-h{font-family:var(--font-display);font-weight:600;font-size:.72rem;
letter-spacing:.005em;color:#fff;margin-bottom:18px}
.site-footer a{color:rgba(255,255,255,.62);text-decoration:none;transition:color .25s}
.site-footer a:hover{color:var(--acc-bright)}
.site-footer{--foot-gap:11px}
.site-footer li{margin-bottom:var(--foot-gap)}
/* Die Adresse ist ein Eintrag, steht aber auf zwei Zeilen. Damit sie im
selben Raster liegt wie die Links in den Spalten daneben, bekommen ihre
Zeilen denselben Abstand wie zwei Listeneinträge – über dieselbe Variable,
nicht über eine nachgerechnete Zeilenhöhe. */
.site-footer .foot-adr span{display:block}
.site-footer .foot-adr span + span{margin-top:var(--foot-gap)}
.site-footer p{color:rgba(255,255,255,.62)}
.site-footer__bottom{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;
padding-top:26px;font-size:.85rem;color:rgba(255,255,255,.42)}
.site-footer__legal{display:flex;flex-wrap:wrap;gap:22px}
/* ---------- 24. Page-Hero (Unterseiten) ---------------------------------- */
.pagehero{background:var(--pet-900);color:#fff;padding-top:clamp(168px,16vw,236px);
padding-bottom:clamp(60px,7vw,104px);position:relative;overflow:hidden}
.pagehero__media{position:absolute;inset:-46% 0;z-index:0;will-change:transform}
.pagehero__media img{width:100%;height:100%;object-fit:cover;opacity:.5;
filter:grayscale(.82) contrast(1.08) sepia(.22) hue-rotate(140deg)}
.pagehero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(100deg,var(--pet-900) 8%,rgba(10,44,52,.88) 46%,rgba(10,44,52,.44) 92%),
radial-gradient(70% 60% at 82% 22%,rgba(36,106,120,.45),transparent 70%),
linear-gradient(to top,var(--pet-900) 2%,transparent 50%)}
.pagehero__inner{position:relative;z-index:2}
.pagehero h1{font-size:clamp(2.2rem,6vw,4.8rem);line-height:1.05;letter-spacing:-.021em;max-width:19ch;color:#fff}
.pagehero .lead{margin-top:26px;color:rgba(255,255,255,.78)}
.crumbs{display:flex;gap:10px;font-family:var(--font-display);font-weight:700;font-size:.72rem;
letter-spacing:.005em;color:rgba(255,255,255,.5);margin-bottom:26px}
.crumbs a{text-decoration:none;color:inherit;transition:color .25s}
.crumbs a:hover{color:var(--acc-bright)}
/* ---------- 25. Prosa ---------------------------------------------------- */
.prose h2{font-size:clamp(1.3rem,2.4vw,1.8rem);margin:52px 0 16px;letter-spacing:-.02em}
.prose h3{font-size:1.05rem;letter-spacing:.02em;margin:34px 0 12px;text-transform:none}
.prose p,.prose li{color:var(--fg-2)}
.prose ul{list-style:disc;padding-left:22px;margin:0 0 18px}
.prose li{margin-bottom:8px}
.prose a{color:var(--acc-on)}
.prose>:first-child{margin-top:0}
/* ---------- 26. Scroll-Reveal -------------------------------------------- */
/* Der versteckte Ausgangszustand gilt nur, wenn JavaScript läuft –
sonst stünde der Text ohne Skript unsichtbar da. */
html.has-js .rv{opacity:0;transform:translateY(16px)}
.rv{transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft)}
html.has-js .rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.06s}.rv-d2{transition-delay:.12s}
.rv-d3{transition-delay:.18s}.rv-d4{transition-delay:.24s}
html.has-js .rv-stagger>*{opacity:0;transform:translateY(14px)}
.rv-stagger>*{transition:opacity .45s var(--ease-soft),transform .45s var(--ease-soft)}
html.has-js .rv-stagger.is-in>*{opacity:1;transform:none}
html.has-js .rv-stagger.is-in>*:nth-child(1){transition-delay:.03s}
html.has-js .rv-stagger.is-in>*:nth-child(2){transition-delay:.09s}
html.has-js .rv-stagger.is-in>*:nth-child(3){transition-delay:.15s}
html.has-js .rv-stagger.is-in>*:nth-child(4){transition-delay:.21s}
html.has-js .rv-stagger.is-in>*:nth-child(5){transition-delay:.27s}
html.has-js .rv-stagger.is-in>*:nth-child(6){transition-delay:.33s}
.rv-mask{display:block;overflow:hidden}
html.has-js .rv-mask>span{transform:translateY(105%)}
.rv-mask>span{display:block;transition:transform .72s var(--ease)}
html.has-js .rv-mask.is-in>span{transform:none}
/* ---- Überschrift aus einer Linie heraus ---------------------------------
Nacheinander: erst der obere (dunkle) Teil von unten nach oben, dann
zieht die Linie auf, dann der untere (grüne) Teil von oben nach unten –
und zuletzt der Fließtext, der auf die Überschrift folgt.
Tempo: --draw (Linie), --slide (Textblöcke).
Startzeiten: --t-up, --t-rule, --t-down, --t-after.
Die Startzeiten stehen im :root, weil auch Geschwister sie brauchen. */
.hsplit{--draw:.5s;--slide:.92s;position:relative}
.hsplit__up,.hsplit__down{display:block;overflow:hidden}
.hsplit .hsplit__up>*,.hsplit .hsplit__down>*{display:block;
transition:transform var(--slide) var(--ease)}
.hsplit .hsplit__up>*{transition-delay:var(--t-up)}
.hsplit .hsplit__down>*{transition-delay:var(--t-down)}
html.has-js .hsplit__up>*{transform:translateY(calc(102% + var(--mask-pad-in,0px)))}
html.has-js .hsplit__down>*{transform:translateY(calc(-102% - var(--mask-pad-in,0px)))}
html.has-js .hsplit.is-in .hsplit__up>*,
html.has-js .hsplit.is-in .hsplit__down>*{transform:none}
/* Fließtext direkt unter oder neben einer geteilten Überschrift wartet,
bis beide Hälften stehen. Nur das unmittelbar folgende Element –
alles Weitere hat seinen eigenen Auslöser. */
html.has-js .hsplit+.rv,
html.has-js .hsplit+.split>.rv,
html.has-js .split>*:has(.hsplit)+.rv{transition-delay:var(--t-after)}
html.has-js .hsplit+.split>.rv+.rv{transition-delay:calc(var(--t-after) + .14s)}
.hsplit .hsplit__rule{display:block;height:1px;background:var(--acc-on);
margin-block:clamp(9px,1.1vw,16px);transform-origin:0 50%;
transition:transform var(--draw) var(--ease),background-color var(--swap) var(--ease-soft);
transition-delay:var(--t-rule),0s}
html.has-js .hsplit__rule{transform:scaleX(0)}
html.has-js .hsplit.is-in .hsplit__rule{transform:none}
/* Im Hero läuft die Linie in beide Richtungen auf und leuchtet */
.hero .hsplit__rule{transform-origin:0 50%;
background:linear-gradient(90deg,var(--acc-bright),rgba(17,155,168,.9) 60%,transparent);
box-shadow:0 0 22px rgba(95,224,236,.4)}
.hsplit--slow{--slide:1.05s}
/* ---- dieselbe Reihenfolge, aber am Scrollrad ---------------------------
main.js hängt jeden Teil an den Scrollfortschritt und schreibt ihn als
--pu (dunkel), --pr (Linie), --pd (grün), --pa (Text danach) – jeweils
0 bis 1. Keine Transition: Die Bewegung folgt direkt dem Scrollen, hält
an, wenn man anhält, und läuft rückwärts, wenn man zurückscrollt.
Reichweite und Reihenfolge stehen oben in main.js (SCRUB_START, PH_*). */
html.has-js .hsplit[data-scrub]{
/* Zoom über den ganzen Weg: der Block wächst von 86 % auf 100 %, und beim
Hinausscrollen zieht er sich wieder etwas zusammen (--px).
Ursprung links, damit der linke Satzspiegel stehen bleibt.
--dy kommt aus data-drift (main.js, Abschnitt 2c) und schiebt zusätzlich. */
opacity:calc(1 - var(--px,0) * .92);
transform:translate3d(0,calc(var(--dy,0px) - var(--px,0) * 70px),0)
scale(calc(.86 + .14 * var(--pz,0) - var(--px,0) * .08));
transform-origin:0 50%;will-change:transform,opacity}
/* Die beiden Hälften schieben sich hinter der Linie hervor und schärfen
sich dabei. Der Weichzeichner ist das, was die Bewegung spürbar macht. */
html.has-js .hsplit[data-scrub] .hsplit__up>*{
transform:translateY(calc((1 - var(--pu,0)) * (104% + var(--mask-pad-in,0px))));
filter:blur(calc((1 - var(--pu,0)) * 9px));transition:none}
html.has-js .hsplit[data-scrub] .hsplit__down>*{
transform:translateY(calc((var(--pd,0) - 1) * (104% + var(--mask-pad-in,0px))));
filter:blur(calc((1 - var(--pd,0)) * 9px));transition:none}
html.has-js .hsplit[data-scrub] .hsplit__rule{
transform:scaleX(var(--pr,0));
transition:background-color var(--swap) var(--ease-soft);transition-delay:0s}
/* --px ist der Austritt: 0 = voll da, 1 = oben aus dem Bild verabschiedet. */
html.has-js .rv.is-scrub{
opacity:calc(var(--pa,0) * (1 - var(--px,0)));
transform:translate3d(0,calc((1 - var(--pa,0)) * 70px + var(--dy,0px) - var(--px,0) * 60px),0)
scale(calc(.93 + .07 * var(--pa,0) - var(--px,0) * .06));
filter:blur(calc((1 - var(--pa,0)) * 6px + var(--px,0) * 5px));
transform-origin:0 50%;transition:none}
/* ---- alle übrigen Blöcke, ebenfalls am Scrollrad -----------------------
--pb kommt aus main.js (Abschnitt 2c) und läuft von 0 bis 1. Absätze
steigen leicht auf, Kacheln und Bilder kommen zusätzlich aus einem
kleinen Zoom heraus. */
html.has-js .rv.is-scrub-blk{
opacity:calc(var(--pb,0) * (1 - var(--px,0)));
transform:translate3d(0,calc((1 - var(--pb,0)) * 72px + var(--dy,0px) - var(--px,0) * 60px),0)
scale(calc(.94 + .06 * var(--pb,0) - var(--px,0) * .06));
filter:blur(calc((1 - var(--pb,0)) * 7px + var(--px,0) * 5px));
transform-origin:0 50%;transition:none}
/* Ausnahme: die Abschnitts-Zeile über der Überschrift. Sie schob sich wie
jeder andere Block um 72px von UNTEN herein – und saß dabei kurz mitten
in der Überschrift, die ihr gleichzeitig entgegenkam. Sie kommt jetzt von
oben und bewegt sich damit immer VON der Überschrift WEG. Alles übrige
(Zoom, Unschärfe, Austritt) bleibt wie bei den anderen Blöcken. */
html.has-js .eyebrow.is-scrub-blk{
transform:translate3d(0,calc((1 - var(--pb,0)) * -26px + var(--dy,0px) - var(--px,0) * 60px),0)
scale(calc(.94 + .06 * var(--pb,0) - var(--px,0) * .06))}
/* In einer Bühne rückt die Überschrift beim Aufbau nach oben (.stage__head).
Die Abschnitts-Zeile darüber macht das mit, sonst holt die Überschrift sie
im Lauf des Halts ein. */
html.has-js .stage .eyebrow.is-scrub-blk{
/* Kein --dy hier: Die Bühnenüberschrift hat selbst keinen Drift, das
Eyebrow würde ihr sonst als einziges entgegenwandern. */
transform:translate3d(0,calc((1 - var(--pb,0)) * -26px
- var(--px,0) * 60px - var(--sp,0) * 1.2vh),0)
scale(calc(.94 + .06 * var(--pb,0) - var(--px,0) * .06))}
html.has-js .rv-mask.is-scrub-blk{opacity:1;transform:translate3d(0,var(--dy,0px),0)}
html.has-js .rv-mask.is-scrub-blk>span{
transform:translateY(calc((1 - var(--pb,0)) * 105%));transition:none}
/* Kachelraster: Die Kacheln kippen nacheinander aus der Tiefe nach oben.
perspective macht daraus eine räumliche Bewegung statt eines Schiebens. */
html.has-js .rv-stagger.is-scrub-blk{
opacity:1;transform:translate3d(0,var(--dy,0px),0);perspective:1400px}
html.has-js .rv-stagger.is-scrub-blk>*{
opacity:calc(var(--pb,0) * (1 - var(--px,0)));
transform:translateY(calc((1 - var(--pb,0)) * 96px))
rotateX(calc((1 - var(--pb,0)) * 16deg))
scale(calc(.88 + .12 * var(--pb,0)));
transform-origin:50% 120%;
filter:blur(calc((1 - var(--pb,0)) * 6px));
transition:none}
/* Bildrahmen kommen aus einem etwas größeren Zoom – das gibt Tiefe. */
html.has-js .pframe.is-scrub-blk,
html.has-js .rv.is-scrub-blk:has(>.pframe){
transform:translate3d(0,calc((1 - var(--pb,0)) * 80px + var(--dy,0px)),0)
scale(calc(.86 + .14 * var(--pb,0)));
filter:none}
/* ---- Bühne: die Sektion bleibt stehen, der Inhalt läuft weiter --------
Die Sektion bekommt zusätzliche Höhe (--stage-len in Fensterhöhen), ihr
Inhalt klebt über position:sticky am Fensterrand. Gehalten wird also rein
über CSS; JavaScript rechnet nur den Fortschritt --sp und daraus je
Schritt --ps. Ohne JavaScript ist --stage-len leer, die Zusatzhöhe fällt
weg und alles steht untereinander wie in jeder anderen Sektion. */
.stage{padding-bottom:0}
html.has-js .stage{
min-height:calc(100vh + var(--stage-len,0) * 100vh);
padding-top:0;padding-bottom:0}
html.has-js .stage__pin{
position:sticky;top:0;min-height:100vh;
display:flex;align-items:center;
padding-block:clamp(96px,12vh,168px)}
.stage__inner{width:100%}
/* Die Überschrift der Bühne rückt beim Aufbau etwas nach oben und gibt
den Schritten Platz. */
html.has-js .stage__head{
transform:translateY(calc(var(--sp,0) * -1.2vh)) scale(calc(1 - var(--sp,0) * .04));
transform-origin:0 50%}
/* Die Schritte liegen im Raster übereinander: So ist der Platz so hoch wie
der längste Schritt und nichts springt, wenn gewechselt wird. */
.stage__steps{margin-top:clamp(30px,4vh,54px);max-width:min(100%,62ch)}
html.has-js .stage__steps{display:grid}
.stage__step{margin:0;font-size:clamp(1.05rem,1.55vw,1.42rem);line-height:1.5}
html.has-js .stage__step{
grid-area:1 / 1;
opacity:var(--ps,0);
/* kommt von unten herein, zieht nach oben weiter (--pso) */
transform:translateY(calc((1 - var(--ps,0) - var(--pso,0)) * 40px - var(--pso,0) * 46px));
filter:blur(calc((1 - var(--ps,0)) * 5px));
transition:none}
/* Der letzte Schritt ist die Pointe – etwas größer und fester. */
.stage__step--hit{font-weight:600}
/* ---- Bühne mit Bildwechsel -------------------------------------------
In dieser Bühne steht zuerst nur die erste Zeile der Überschrift. Die
zweite – die, die die Aussage umdreht – kommt erst im Halt, und mit ihr
das Bild im Hintergrund. --turn treibt beides gemeinsam und läuft von
--turn-a bis --turn-b auf dem Bühnenfortschritt --sp.
Früher/später umschlagen: die beiden Werte ändern. */
html.has-js .stage--turn{
--turn-a:.05; --turn-b:.22;
--turn:min(1,max(0,(var(--sp,0) - var(--turn-a)) / (var(--turn-b) - var(--turn-a))))}
/* Die zweite Zeile hängt jetzt an --turn statt am Einlaufen der Sektion. */
html.has-js .stage--turn .hsplit[data-scrub] .hsplit__down>*{
transform:translateY(calc((1 - var(--turn)) * (-104% - var(--mask-pad-in,0px))));
filter:blur(calc((1 - var(--turn)) * 9px))}
html.has-js .stage--turn .hsplit[data-scrub] .hsplit__rule{
transform:scaleX(var(--turn))}
/* Das Bild liegt hinter dem Text im festgehaltenen Bereich. Es bleibt hell
getönt: Die Sektion ist eine helle Sektion, der Text darauf dunkel. Der
Schleier ist links am dichtesten, damit die Schrift steht – rechts kommt
das Motiv durch. Ohne JavaScript bleibt die Ebene unsichtbar. */
.stage__media,.stage__veil{position:absolute;inset:0;pointer-events:none}
.stage__media{z-index:0;overflow:hidden;opacity:0}
.stage__media img{width:100%;height:100%;object-fit:cover;
object-position:var(--pos,50% 50%)}
@media (max-width:720px){
.stage__media img{object-position:var(--pos-m,var(--pos,50% 50%))}
}
.stage__veil{z-index:1;opacity:0;
background:linear-gradient(96deg,rgba(246,249,248,.97) 2%,rgba(246,249,248,.88) 38%,rgba(246,249,248,.3) 100%)}
html.has-js .stage--turn .stage__media,
html.has-js .stage--turn .stage__veil{opacity:var(--turn,0)}
.stage__inner{position:relative;z-index:2}
@media (max-width:720px){
/* Schmales Fenster: Der Text liegt über der ganzen Breite, der Schleier
deckt deshalb von oben. Unten, wo kein Text mehr steht, macht er auf –
sonst bleibt vom Bild nur grauer Nebel. */
.stage__veil{background:linear-gradient(180deg,
rgba(246,249,248,.95) 0%,rgba(246,249,248,.9) 52%,
rgba(246,249,248,.46) 76%,rgba(246,249,248,.28) 100%)}
}
/* ---------- Filme laufen ungetönt -------------------------------------
Bilder behalten die Duotone-Behandlung, Filme nicht: Bewegtes Material
wirkt eingefärbt schnell unwirklich, und die Gesichter darin sollen
natürlich bleiben. Übrig bleibt eine milde Tonwertkorrektur, damit die
Filme neben den getönten Bildern nicht flau wirken.
Zurücknehmen: diesen Block löschen, dann gilt wieder der Bildfilter. */
.hero__media video{filter:contrast(1.1) brightness(.9) saturate(1.04)}
.band__media video{filter:contrast(1.05) saturate(1.02)}
.band--deep .band__media video{filter:contrast(1.1) brightness(.72) saturate(1.02)}
.band--light .band__media video{filter:contrast(1.2) brightness(.8) saturate(1.02)}
.pframe video,.pframe:hover video{filter:contrast(1.03) saturate(1.02)}
@media (prefers-reduced-motion:reduce){
/* Ohne Bühne gibt es keinen Fortschritt: Zweite Zeile und Bild stehen da. */
html.has-js .stage--turn{--turn:1}
}
@media (max-width:720px){
html.has-js .stage{min-height:calc(100vh + var(--stage-len,0) * 72vh)}
html.has-js .stage__pin{padding-block:clamp(80px,10vh,120px)}
}
/* ---- Jede Überschrift wird beim Scrollen freigelegt --------------------
--ph kommt aus main.js (Abschnitt 2c). clip-path legt die Zeile von unten
nach oben frei, die Verschiebung lässt sie dabei aufsteigen. Kein extra
Element nötig: Die Maske sitzt auf der Überschrift selbst.
Kein Weichzeichner hier – der würde an der Maskenkante hart abbrechen. */
html.has-js h2.is-scrub-h,
html.has-js h3.is-scrub-h,
html.has-js h4.is-scrub-h{
/* Oben endet die Maske bei -24 %, nicht bei 0: Umlautpunkte und
Akzente ragen über die Zeilenbox hinaus und würden sonst abgeschnitten. */
clip-path:inset(calc((1 - var(--ph,0)) * 130% - 24%) -6% -8% -2%);
transform:translateY(calc((1 - var(--ph,0)) * .42em));
transition:none;will-change:clip-path,transform}
/* ---- Kernsätze schreiben sich beim Scrollen ----------------------------
--pw ist der Lesefortschritt des Absatzes (main.js), --n die Wortanzahl,
--i die Nummer des Wortes. Der Teiler bestimmt, über wie viele Wörter der
Übergang verläuft: kleiner = härtere Kante, größer = weicher. */
html.has-js .rv-read .w{
--t:calc((var(--pw,0) * (var(--n,1) + 8) - var(--i,0)) / 2.4);
opacity:clamp(.14, var(--t), 1);
transition:none}
/* Elemente mit data-drift, die keine Einblendung haben, bewegen sich allein. */
html.has-js [data-drift]:not(.is-scrub):not(.is-scrub-blk):not([data-scrub]){
transform:translate3d(0,var(--dy,0px),0)}
@media (prefers-reduced-motion:reduce){
html.has-js .hsplit__up>*,html.has-js .hsplit__down>*{transform:none}
html.has-js .hsplit__rule{transform:none}
}
/* Überschriften blenden Wort für Wort ein.
Tempo: --step (Abstand zwischen zwei Wörtern), --dur (Dauer je Wort). */
.rv-words{--step:95ms;--dur:.78s}
html.has-js .rv-words .w{opacity:0;transform:translateY(.58em) scale(.94);filter:blur(5px)}
.rv-words .w{display:inline-block;transform-origin:0 80%;
transition:opacity var(--dur) var(--ease-soft),transform var(--dur) var(--ease),
filter var(--dur) var(--ease-soft);
transition-delay:calc(var(--i,0) * var(--step))}
html.has-js .rv-words.is-in .w{opacity:1;transform:none;filter:none}
.rv-words--fast{--step:72ms;--dur:.66s}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.rv,.rv-stagger>*,.rv-mask>span,.rv-words .w{opacity:1;transform:none;transition:none}
.hero__kicker::before,.scrollcue i,.hero__aurora i{animation:none}
[data-parallax]{transform:none!important}
.page-bg::after{transition:none}
.menu a{transform:none;opacity:1}
}
/* ---------- 27. Utilities ------------------------------------------------ */
.mt-l{margin-top:clamp(36px,4.5vw,68px)}
.mt-m{margin-top:clamp(24px,3vw,40px)}
.mt-s{margin-top:18px}
.center{text-align:center;margin-inline:auto}
.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}
.skip{position:absolute;left:-9999px;z-index:200;padding:12px 20px;background:var(--acc-bright);
color:#05261A;font-weight:700}
.skip:focus{left:16px;top:16px}
.sig-name{font-family:var(--font-display);font-weight:600;font-size:1.15rem;
letter-spacing:-.01em;color:var(--fg)}
.sig-role{font-family:var(--font-display);font-weight:600;font-size:.74rem;
letter-spacing:.005em;color:var(--fg-3)}
.sig-meta{font-size:.92rem;color:var(--fg-3)}
body.no-scroll{overflow:hidden}
/* ---------- e.a.s.i. – kompakte Reihe -----------------------------------
Kundenwunsch aus der Abstimmung vom 19.09.2026: vier Felder in einer
Reihe, deutlich weniger Text. Die vier brechen deshalb erst spät um –
250 px Mindestbreite hätten bei 1120 px schon nach drei umgebrochen.
Ab 900 px zwei in einer Reihe, ab 520 px untereinander.
HINWEIS: Ob die Begriffe (e.mpowering …) so bleiben, klärt Martina noch
mit Jürgen. Zum Tauschen reichen die vier .easi__letter-Zeilen. */
.easi--row{grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.3vw,18px)}
.easi--row .easi__item{padding:clamp(24px,2.4vw,32px)}
.easi--row .easi__letter{font-size:clamp(1.1rem,1.5vw,1.34rem);margin-bottom:16px}
.easi--row .easi__item h3{font-size:1rem;margin-bottom:8px}
.easi--row .easi__item p{font-size:.94rem;line-height:1.48}
@media (max-width:900px){.easi--row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.easi--row{grid-template-columns:1fr}}
/* ---------- Fünf Symptom-Kacheln ----------------------------------------
Seit die Punkte aus „Die Konsequenzen“ hier mit drinstehen, sind es fünf
statt vier. Mit der normalen Mindestbreite ergäbe das 4 + 1 – eine
einsame Kachel in der zweiten Reihe. 300 px lassen drei in die erste
Reihe und zwei in die zweite. */
.symcards--5{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
@media (min-width:1060px){.symcards--5{grid-template-columns:repeat(3,1fr)}}
/* Die Wunsch-Kacheln sind die freundliche Seite derselben Form: Der
Schimmer zieht in Bernstein auf statt in Türkis. */
.symcard--wish::after{
background:radial-gradient(88% 68% at 12% -12%,rgba(180,88,30,.13),transparent 62%)}
/* ---------- Das Bild im Perspektivwechsel wird Stufe für Stufe frei ----
Kein zusätzliches JavaScript: --sp ist der Bühnenfortschritt 0..1, den
main.js ohnehin schreibt. --turn (0,05 bis 0,22) blendet die Bildebene
überhaupt erst ein; danach übernimmt --wash-o.
---- Die Fläche über dem Bild geht in vier Stufen auf ----------------
Kundenwunsch 20.09.2026: nicht ein durchgehendes Ausblenden, sondern
eine Stufe je Abschnitt der Bühne.
Überschrift steht Fläche 80 % deckend (20 % durchsichtig)
Absatz 1 kommt Fläche 55 % (45 %)
Absatz 2 kommt Fläche 32 % (68 %)
Schlusssatz kommt Fläche 10 % (90 %)
Zweite Runde: Die Stufen gehen weiter hinunter als die ursprünglich
genannten 20/40/60/80 – Kundenwunsch „noch etwas mehr“. Unten bleiben
10 Prozent stehen, damit die Fläche nicht ganz verschwindet und der
Übergang zur nächsten Sektion nicht abreißt.
Jede Stufe ist eine eigene kleine Rampe von acht Hundertstel des
Bühnenwegs – kurz genug, dass man die Stufe sieht, lang genug, dass es
nicht springt. Die Schaltpunkte liegen jeweils kurz VOR dem Absatz, der
dazugehört, damit Bild und Text gemeinsam ankommen.
Die Fläche ändert nichts am Kontrast: Die Schrift steht auf dem
Schleier (.stage__veil), nicht auf ihr. Wer die Stufen verschiebt, muss
also nicht nachmessen – wer am Schleier dreht, schon. */
html.has-js .stage--turn{
--wash-1:min(1,max(0,(var(--sp,0) - .26) / .08));
--wash-2:min(1,max(0,(var(--sp,0) - .54) / .08));
--wash-3:min(1,max(0,(var(--sp,0) - .82) / .08));
--wash-o:calc(.8 - .25 * var(--wash-1) - .23 * var(--wash-2) - .22 * var(--wash-3))}
/* Das Bild bleibt unangetastet (Kundenwunsch 20.09.2026). Der Umschlag
kommt jetzt aus einer Lage in der Hintergrundfarbe, die über dem Motiv
liegt und beim Scrollen gegen null geht: erst steht dort fast nur die
Fläche der Sektion, dann kommt das Leben durch.
Startdeckung 80 %: Bei voller Deckung wäre am Anfang gar nichts zu sehen
und der Block wirkte leer – so ahnt man das Motiv und sieht es dann mit
jedem Satz weiter aufgehen. Gesteuert von --wash-o (siehe oben).
Die Lage sitzt IN .stage__media, also unter dem Schleier und damit unter
dem Text. --stage-wash setzt die Farbe; v2.css überschreibt sie mit dem
Sandton der zweiten Fassung. */
html.has-js .stage--turn .stage__media img{filter:none}
/* Die Fläche ist selbst ein Verlauf, kein gleichmäßiger Ton.
Kundenwunsch 20.09.2026: „Der rechte Bereich darf von Anfang an mehr zu
sehen sein und am Ende fast vollständig.“ Links, wo der Text steht,
deckt sie voll; nach rechts fällt sie auf 30 Prozent ab. Zusammen mit
den vier Stufen ergibt das:
rechts am Anfang 0,80 × 0,30 = 0,24 → drei Viertel Bild
rechts am Ende 0,10 × 0,30 = 0,03 → praktisch ganz frei
links am Anfang 0,80 → links bleibt Fläche
links am Ende 0,10
Geprüft wurde der ungünstigste Fall: Fläche komplett aus, nur der
Schleier trägt. Wenn der Text DA noch AA erfüllt, erfüllt er es auf
jeder Stufe – die Fläche kann Kontrast nur hinzufügen, nie wegnehmen. */
html.has-js .stage--turn{
--stage-wash:linear-gradient(96deg,
rgb(250 248 244 / 1) 0%,
rgb(250 248 244 / 1) 40%,
rgb(250 248 244 / .58) 70%,
rgb(250 248 244 / .30) 100%)}
html.has-js .stage--turn .stage__media::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:var(--stage-wash);
opacity:var(--wash-o,.8);
transition:none}
/* Der Schleier färbt sich NICHT mit um. Er ist die Fläche, auf der der
Text steht – wandert sie mit, färbt sich gefühlt die halbe Seite ein,
und der Effekt sieht aus wie ein Hintergrundwechsel statt wie ein Bild,
das umschlägt. Er behält deshalb eine feste Farbe.
ACHTUNG: Die Farbwerte stehen NICHT hier, sondern weiter unten im
Abschnitt „Warmes Gleiten am Wendepunkt“ – dort ist der Schleier auf die
Morgentöne umgestellt worden. Ein zweiter Block mit Papierfarbe stand
bis zum 20.09.2026 an dieser Stelle und war wirkungslos: gleiche
Gewichtung, aber früher in der Datei. Wer hier etwas ändert, ändert
nichts. (Gekostet hat mich das eine halbe Messreihe.) */
@media (prefers-reduced-motion:reduce){
/* Ohne Bewegung keine Bühne – dann gilt gleich die unterste Stufe. */
html.has-js .stage--turn{--wash-o:.1}
}
/* Die zweite Überschriftzeile der Bühne steht auf dem Foto, nicht auf
glatter Fläche. --acc-mid (#0F8B97) reicht dort nicht: gemessen 2,5:1
gegen den dunkelsten Punkt unter der Schrift, gefordert sind 3,0:1 für
große Schrift. --acc (#0C6B74) bringt sie auf 4,0:1. Auf den übrigen
Seiten, wo dieselbe Zeile auf einer ruhigen Fläche steht, bleibt
--acc-mid unverändert. */
/* Die zweite Zeile steht bis weit nach rechts und damit über dem offenen
Teil des Bildes. Seit das Motiv ungetönt läuft, ist der Grund dort hell
und warm – --acc (#0C6B74) kam nur noch auf 2,96:1, große Schrift
braucht 3,0. Ein Ton tiefer löst das mit Reserve (3,35 bis 4,4:1) und
bleibt in der Markenfamilie. Gilt nur in dieser Bühne. */
.stage--turn .stage__head .hsplit__down h2.acc{color:#0A5A62}
/* ---------- Menü kompakter ----------------------------------------------
Kundenwunsch vom 20.09.2026. Die Untertexte sind auf eine Zeile gekürzt;
damit die Einträge nicht trotzdem die alte Höhe behalten, gehen hier
Schriftgrad, Innenabstand und Zeilenabstand mit herunter. Ein Eintrag
ist damit rund 80 statt 137 px hoch, das ganze Menü passt auf allen
Größen ohne Scrollen ins Bild. */
.menu{padding-block:clamp(64px,8vh,92px) clamp(24px,3vh,38px)}
.menu__inner{gap:clamp(24px,3.6vw,54px)}
.menu__head{margin-bottom:2px;font-size:.66rem}
.mlink{padding:clamp(10px,1.05vw,13px) 0}
.mlink__t{font-size:clamp(1.06rem,1.62vw,1.34rem);line-height:1.1}
.mlink__d{margin-top:4px;max-width:52ch;font-size:.86rem;line-height:1.42}
.menu__card{margin-top:clamp(16px,2.2vh,26px)}
.menu__card__v{font-size:clamp(.95rem,1.15vw,1.05rem);margin-top:6px!important}
.menu__card__a{margin-top:10px!important;font-size:.84rem;line-height:1.45}
.menu__foot{margin-top:clamp(18px,2.6vh,30px);padding-top:16px;font-size:.82rem}
@media (max-width:860px){
.menu__inner{gap:26px}
.menu__card{margin-top:22px}
}
/* Seit die Einträge kompakt sind, bleibt auf großen Bildschirmen viel Luft
übrig und das Menü klebte oben. margin-block:auto verteilt sie gleich-
mäßig über und unter dem Block; die Fußzeile rutscht dabei an den
unteren Rand. Reicht der Platz nicht, wird das auto zu 0 und das Menü
scrollt wie vorher – anders als bei align-content:center wird dabei
nichts oben abgeschnitten. */
.menu{display:flex;flex-direction:column}
.menu__inner{margin-block:auto}
/* Drei Zeilen im Menü standen auf 45 bis 50 % Weiß und kamen damit auf
3,6 bis 4,1:1 gegen den Menügrund (#0F3F4A). Gefordert sind 4,5:1.
58 % bringt sie auf 4,98:1. Das war schon vorher so und ist beim
Kompaktmachen mit korrigiert worden. */
.menu__head{color:rgba(255,255,255,.58)}
.menu__card__a{color:rgba(255,255,255,.58)}
.menu__foot{color:rgba(255,255,255,.58)}
/* ---------- Der Hero-Slogan als ein Satz --------------------------------
Kundenwunsch vom 20.09.2026: Die zwei gleich großen Zeilen mit Trennlinie
wirkten monoton. Jetzt liest sich der Satz durch – gleiche Größe, gleiche
Farbe, enger Zeilenabstand, keine Linie – und nur das Ende hebt sich ab.
Die Mechanik bleibt: Beide Hälften laufen weiterhin getrennt ein, die
obere von unten, die untere von oben. Das gibt dem Satz Bewegung, ohne
ihn in zwei Aussagen zu zerlegen. */
.hsplit--claim .hsplit__rule{display:none}
.hero h1.hsplit--claim{
font-size:clamp(1.92rem,4.75vw,4.05rem);line-height:1.04;letter-spacing:-.026em;
/* Keine Zeichenbegrenzung: Die beiden Hälften sollen je auf einer Zeile
stehen bleiben, sonst zerfällt der Satz wieder in Blöcke. Umbrechen
dürfen sie erst, wenn das Fenster es erzwingt. */
max-width:none}
html.has-js .hero h1.hsplit--claim{font-size:min(clamp(1.92rem,4.75vw,4.05rem),7.6vh)}
.hsplit--claim .hsplit__down>*{margin-top:.04em}
/* „nicht mehr dabei." darf nicht mitten im Ausdruck umbrechen. */
.hero h1.hsplit--claim em{white-space:nowrap}
@media (max-width:560px){.hero h1.hsplit--claim em{white-space:normal}}
/* Das Ende des Satzes: dieselbe Größe, aber schwerer, in Türkis und mit
dem weichen Schein, den vorher die ganze zweite Zeile hatte. */
.hero h1.hsplit--claim em{
font-style:normal;font-weight:700;color:var(--acc-bright);
text-shadow:0 0 46px rgba(95,224,236,.34)}
/* ---------- Volle warme Farbe in der positiven Hälfte -------------------
Kundenwunsch vom 20.09.2026. Die Seite soll nach unten hin freundlicher
werden, die Bilder dort in voller warmer Farbe stehen.
Oben bleibt die Duotone-Behandlung: entsättigt, kühl, türkis getönt.
Das ist der Alltag in der Blase – monoton, farblos, immer dasselbe.
Ab dem Ansatz trägt jeder Abschnitt die Klasse .is-warm. Dort fällt die
Entsättigung weg: volle Farbe, leicht angewärmt und einen Hauch heller.
Kein grayscale, kein hue-rotate.
Einen Abschnitt dazunehmen: .is-warm ans . Und: Die Reihenfolge
muss stimmen – ein kalter Abschnitt nach einem warmen fällt auf. */
.is-warm .pframe img,.is-warm .pframe video,
.is-warm .pframe:hover img,.is-warm .pframe:hover video,
.is-warm .band__media img,.is-warm .band__media video,
.is-warm .format__bg img,
.is-warm .stage__media img{
filter:saturate(1.14) contrast(1.03) brightness(1.04) sepia(.07)}
/* Das helle Bildband hatte einen eigenen, sehr dunklen Filter, damit das
Motiv unter dem hellen Schleier überhaupt zu sehen war. In der warmen
Hälfte braucht es den nicht mehr. */
.is-warm.band--light .band__media img,.is-warm.band--light .band__media video{
filter:saturate(1.1) contrast(1.16) brightness(.86)}
/* Der Schleier über den Bildbändern der warmen Hälfte: warm statt petrol,
und rechts deutlich offener, damit die Farbe durchkommt. Links bleibt er
dicht – dort steht die Schrift. Der dichte Teil reicht bis 58 %, genau
bis zum Ende der Textspalte; gemessen kommt die Unterzeile damit auf
5,2:1 statt auf 3,1:1. */
.is-warm .band__veil{
background:linear-gradient(96deg,rgba(26,20,12,.88) 4%,rgba(30,23,14,.8) 58%,rgba(38,30,18,.14) 100%),
radial-gradient(70% 60% at 82% 26%,rgba(240,168,104,.16),transparent 62%)}
.is-warm.band{background:#241C12}
.is-warm .band__media.is-still-bg{background-color:#241C12}
/* Die Unterzeile der Bildbänder stand auf 78 % Weiß. Über einem hellen
Motiv sind das 3,7:1, gefordert sind 4,5:1. Volles Weiß plus der
dichtere Schleier oben bringen sie über die Grenze. Betrifft auch die
kalten Bänder – das war dort schon vorher zu knapp. */
.band__sub{color:#fff}
.band--light .band__sub{color:var(--ink-soft)}
.band:not(.band--light) .band__veil{
background:linear-gradient(96deg,rgba(10,44,52,.92) 4%,rgba(10,44,52,.78) 58%,rgba(10,44,52,.2) 100%),
radial-gradient(70% 60% at 82% 28%,rgba(95,224,236,.1),transparent 66%)}
.is-warm .band__veil{
background:linear-gradient(96deg,rgba(26,20,12,.88) 4%,rgba(30,23,14,.8) 58%,rgba(38,30,18,.14) 100%),
radial-gradient(70% 60% at 82% 26%,rgba(240,168,104,.16),transparent 62%)}
/* ---------- Der Perspektivwechsel: Farbe und Morgenlicht ----------------
Kundenwunsch vom 20.09.2026, zwei Dinge an derselben Stelle.
1. Das Bildband „Warum löst der nächste Prozess es nicht?“ lief mit der
stärksten Entsättigung der ganzen Seite (grayscale .85, hue-rotate
ins Türkise, brightness .5). Es steht aber schon an der Kippe – hier
geht die Farbe auf. Fast normal also: natürliche Farben, nur noch so
weit abgedunkelt, dass die weiße Schrift trägt. */
.band--deep .band__media img,.band--deep .band__media video{
filter:saturate(1.04) contrast(1.08) brightness(.58)}
/* 2. Die Bühne darunter war blass – nahezu farbloses Creme über einem
Foto. Jetzt liegt dort Morgenlicht: Beige mit einem Stich ins
Orange. Das ist genau die Stelle, an der die Seite dreht, und der
Ton macht das jetzt auch sichtbar.
Kontrast auf #F0E1C6 (dunkelster Punkt): --ink 12,6:1,
--ink-soft 5,7:1, --acc 4,8:1. */
.stage--turn{
--dawn-1:#F7EEDD; --dawn-2:#F3E7D0; --dawn-3:#F0E1C6;
background-image:radial-gradient(118% 82% at 26% 0%,
var(--dawn-1) 0%,var(--dawn-2) 52%,var(--dawn-3) 100%);
background-attachment:fixed;background-size:cover}
/* Links deckt der Schleier für die Schrift, rechts lässt er das Motiv
durch – aber nicht mehr farblos. Der rechte Stopp ist ein warmes Orange:
Das Bild bleibt zu sehen, die Fläche liest sich trotzdem als Morgenlicht
statt als weißes Büro.
Die dichte Zone reicht bis 80 %. Das ist mehr, als es aussieht: Bei
768 px Breite läuft „Ist aber menschlicher Natur.“ bis 91 % und der
Schlusssatz bis 83 % – dort stand vorher der dunkle Kasten aus dem Foto
hinter kleiner Schrift (3,36:1 bei geforderten 4,5). Gemessen wird am
Glyphenpixel, nicht am Textkasten: Der Kasten ist breiter als die
Schrift und liefert zu strenge Werte.
Dass der Schleier hier so dicht sein muss, ist der Preis für dunkle
Schrift auf diesem Foto. Sichtbar wird das Bild trotzdem – im Finale,
wenn der Text abtritt und der Schleier mit ihm verschwindet. */
/* Der Schleier war ein Keil über die ganze Breite und die ganze Höhe –
auch dort, wo gar keine Schrift steht. Kundenwunsch 20.09.2026: „den
linken Bereich mit dem beigen Verlauf im Bild um die Hälfte reduzieren.“
Aus dem Keil ist deshalb eine Ellipse geworden, die um den Textblock
liegt und nach allen Seiten ausläuft: oben, unten und rechts steht jetzt
das Foto frei. Die Fläche der beigen Zone ist damit etwa halbiert, ohne
dass unter einem einzigen Buchstaben weniger Deckung steht.
Die Mitte sitzt links (22 bis 24 % der Breite, 46 bis 48 % der Höhe),
also dort, wo der Satzspiegel beginnt. Die Radien sind so gewählt, dass
die dichte Zone bis ans Ende der längsten Zeile reicht. */
html.has-js .stage--turn .stage__veil{
background:radial-gradient(118% 78% at 22% 48%,
rgb(244 233 213 / .97) 0%,
rgb(243 230 205 / .95) 48%,
rgb(243 230 205 / .78) 64%,
rgb(240 219 180 / .18) 84%,
rgb(238 206 152 / 0) 98%)}
/* Ab 1320 px bricht „Ist aber menschlicher Natur.“ auf zwei Zeilen um und
reicht dann nur noch bis 69 % statt bis 91 % der Breite. Die Ellipse darf
dort deutlich kleiner sein. Nachgemessen bei 1320, 1366 und 1440 px. */
@media (min-width:1320px){
html.has-js .stage--turn .stage__veil{
background:radial-gradient(100% 70% at 22% 46%,
rgb(244 233 213 / .98) 0%,
rgb(243 230 205 / .97) 54%,
rgb(243 230 205 / .76) 68%,
rgb(240 219 180 / .16) 85%,
rgb(238 206 152 / 0) 97%)}
}
@media (max-width:720px){
html.has-js .stage--turn .stage__veil{
background:linear-gradient(180deg,
rgb(244 233 213 / .96) 0%,
rgb(243 230 205 / .94) 76%,
rgb(240 219 180 / .52) 90%,
rgb(238 206 152 / .36) 100%)}
}
/* ---------- Ausnahme: ein Film, der doch getönt läuft -------------------
Der Block „Filme laufen ungetönt“ weiter oben nimmt alle Filme von der
Duotone-Behandlung aus – aus gutem Grund, bewegtes Material wirkt
eingefärbt schnell unwirklich. Genau deshalb hat auch das Entfernen von
pframe--natural am Film im Denkfehler nichts bewirkt: Die Regel dort
ist spezifischer und steht später.
Für diesen einen Film ist es aber gewollt (Kundenwunsch 20.09.2026):
Der Mann am Telefon soll in derselben türkisen Welt stehen wie alles
andere in der kalten Hälfte. Deshalb eine Klasse zum Anschalten statt
einer Änderung an der allgemeinen Regel – wer den nächsten Film tönen
will, hängt .pframe--tint an den Rahmen.
Die Tönung bleibt auch beim Überfahren. Bei den Bildern hellt der Hover
auf; bei einem Hintergrundfilm wäre das ein Effekt, den niemand sucht. */
.pframe.pframe--tint{isolation:isolate}
.pframe.pframe--tint video,
.pframe.pframe--tint:hover video{
filter:grayscale(1) contrast(1.1) brightness(.62)}
/* Der Farbstich kommt nicht mehr aus hue-rotate, sondern aus einer Lage
Petrol darüber. hue-rotate dreht auch die Haut ins Grüne und hellt auf –
deshalb sah der Film hellblau aus statt dunkel. Jetzt: Film schwarzweiß
und dunkel, darüber Petrol im Modus `screen` (hebt nur die Schatten in
die Markenfarbe) und ein dunkler Verlauf von unten. Das ist die klassische
Duotone-Bauweise und hält den Film in derselben Welt wie der Abschnitt. */
.pframe.pframe--tint::after{content:"";position:absolute;inset:0;z-index:1;
pointer-events:none;background:var(--pet-800);mix-blend-mode:screen;opacity:.5}
.pframe.pframe--tint::before{content:"";position:absolute;inset:0;z-index:1;
pointer-events:none;
background:linear-gradient(180deg,rgba(6,31,37,.18) 0%,rgba(6,31,37,.05) 42%,rgba(6,31,37,.55) 100%)}
/* Stärke der Tönung: grayscale hoch und hue-rotate Richtung 140 macht sie
kräftiger (dann wird die Haut allerdings deutlich grün – genau dagegen
gibt es die Regel „Filme laufen ungetönt“). Richtung 160 und weniger
grayscale macht sie weicher und lässt mehr Gesicht übrig.
kräftig: grayscale(.74) sepia(.18) hue-rotate(140deg) contrast(1.08) brightness(1.02)
weich: grayscale(.45) sepia(.10) hue-rotate(160deg) contrast(1.05) brightness(1.06) saturate(.9) */
/* =====================================================================
DAS WIRKSYSTEM – der Höhepunkt der Seite
=====================================================================
Kundenwunsch vom 20.09.2026: Die vier Buchstaben sollen einzeln und
plakativ auftreten, nicht als kleine Kachelreihe. Die Sektion bleibt
deshalb stehen, während e., a., s. und i. nacheinander durchlaufen.
Mechanik: dieselbe wie bei den anderen Bühnen. main.js schreibt --sp
(Bühnenfortschritt) und daraus je Schritt --ps (Auftritt) und --pso
(Abgang). Hier steht kein einziges neues Stück JavaScript.
Warum die Platten so groß sind: Bei einer Aussage, die man nur einmal
liest, gewinnt die Größe. Ein Buchstabe, ein Satz, viel Luft – und der
nächste erst, wenn der vorige weg ist.
===================================================================== */
.wsx__stack{position:relative;margin-top:clamp(26px,3.4vh,44px)}
html.has-js .wsx__stack{display:grid}
/* Die vier liegen im selben Rasterfeld übereinander. Damit ist der Platz
so hoch wie der höchste – beim Wechseln springt nichts. */
.wsx__panel{margin:0}
html.has-js .wsx__panel{
grid-area:1 / 1;
opacity:var(--ps,0);
transform:translateY(calc((1 - var(--ps,0) - var(--pso,0)) * 46px - var(--pso,0) * 54px))
scale(calc(.965 + var(--ps,0) * .035));
filter:blur(calc((1 - var(--ps,0)) * 7px));
transform-origin:0 50%;
transition:none;
pointer-events:none}
/* Nur der sichtbare Schritt ist anklickbar – sonst liegen vier Ebenen
übereinander und fangen Klicks ab, die gar nicht für sie sind. */
html.has-js .wsx__panel[style*="--ps: 1"],
html.has-js .wsx__panel[style*="--ps:1"]{pointer-events:auto}
/* Die Platte füllt, was die Bühne hergibt. Ein Schritt, der nur ein
Drittel des Fensters belegt, ist keine Ansage – deshalb die Mindesthöhe
und die großen Grade. */
.wsx__panel{display:grid;grid-template-columns:1.02fr .98fr;
gap:clamp(30px,5vw,76px);align-items:center;
min-height:min(58vh,600px)}
@media (max-width:900px){
.wsx__panel{grid-template-columns:1fr;gap:clamp(22px,3.4vh,34px);min-height:0}
}
.wsx__claim{font-size:clamp(2.3rem,6vw,5.1rem);line-height:1;
letter-spacing:-.03em;color:var(--fg);margin:0;max-width:13ch;
text-wrap:balance}
.wsx__lead{margin-top:clamp(18px,2.6vh,32px);
font-size:clamp(1.1rem,1.75vw,1.58rem);line-height:1.42;
color:var(--fg-2);max-width:32ch}
/* ---------- Die Buchstabenplatte ---------------------------------------
Steht anstelle eines Films und ist selbst das Bild: ein Buchstabe, so
groß wie es der Rahmen zulässt. Kommt später ein Clip in den Slot
darüber, deckt er die Platte einfach zu – am Markup ist nichts zu tun. */
.wsx__media{position:relative;aspect-ratio:1/1;border-radius:clamp(20px,2.2vw,32px);
overflow:hidden;isolation:isolate;
background:linear-gradient(152deg,
color-mix(in srgb,var(--acc-on) 17%,transparent),
color-mix(in srgb,var(--acc-on) 6%,transparent) 54%,
color-mix(in srgb,var(--fg) 5%,transparent));
box-shadow:inset 0 0 0 1px var(--line),
0 40px 90px -54px rgba(36,32,28,.55)}
@media (max-width:900px){.wsx__media{aspect-ratio:4/3}}
.wsx__media video,.wsx__media img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* Auf der Platte steht nur der Buchstabe – groß, mittig, sonst nichts.
Das ganze Wort steht ohnehin im Chip oben links und in der Leiste
darunter; zweimal dasselbe große Wort wäre Lärm. */
.wsx__plate{position:absolute;inset:0;display:grid;place-items:center;
font-family:var(--font-display);font-weight:600;letter-spacing:-.06em;
line-height:.8;text-transform:lowercase}
.wsx__letter{font-size:clamp(7.5rem,22vw,19rem);color:var(--acc-on);
display:block;transform-origin:50% 50%}
/* Der Chip trägt die Marke – und bleibt sichtbar, wenn später ein Film
in den Slot kommt und die Platte zudeckt. Deshalb liegt er darüber. */
.wsx__badge{position:absolute;left:clamp(16px,2vw,26px);top:clamp(16px,2vw,26px);
z-index:2;display:inline-flex;align-items:baseline;
padding:9px 15px;border-radius:999px;
background:color-mix(in srgb,var(--fg) 8%,transparent);
box-shadow:inset 0 0 0 1px var(--line);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
font-family:var(--font-display);font-weight:600;font-size:.82rem;
letter-spacing:-.012em;color:var(--fg);text-transform:lowercase}
.wsx__badge b{color:var(--acc-on);font-weight:600}
/* Der Buchstabe zieht beim Auftritt leicht nach – das gibt der Platte
Tiefe, ohne dass es nach Effekt aussieht. */
html.has-js .wsx__panel .wsx__letter{
transform:scale(calc(.86 + var(--ps,0) * .14));
opacity:calc(.25 + var(--ps,0) * .75);
transition:none}
html.has-js .wsx__panel .wsx__badge{
opacity:var(--ps,0);
transform:translateY(calc((1 - var(--ps,0)) * -10px));
transition:none}
/* ---------- Die Buchstabenleiste ---------------------------------------
Zeigt, wo man gerade steht. Die vier tragen dieselben data-step wie die
Platten, main.js setzt ihnen deshalb dasselbe --ps – ohne Zusatzarbeit.
Keine Ziffern: Die Buchstaben sind die Sache selbst. */
.wsx__dots{list-style:none;margin:clamp(28px,4vh,52px) 0 0;padding:0;
display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,38px);align-items:baseline}
.wsx__dots li{font-family:var(--font-display);font-weight:600;
font-size:clamp(1rem,1.5vw,1.32rem);letter-spacing:-.02em;
color:var(--fg-3);position:relative;padding-bottom:12px;
text-transform:lowercase}
.wsx__dots li span{color:var(--fg-3)}
html.has-js .wsx__dots li{
color:color-mix(in srgb,var(--fg) calc(var(--ps,0) * 100%),var(--fg-3));
transition:none}
html.has-js .wsx__dots li span{
color:color-mix(in srgb,var(--acc-on) calc(var(--ps,0) * 100%),var(--fg-3))}
/* Die Linie darunter wächst mit dem Fortschritt des Schritts */
.wsx__dots li::after{content:"";position:absolute;left:0;right:0;bottom:0;
height:2px;border-radius:2px;background:var(--acc-on);
transform:scaleX(var(--ps,0));transform-origin:0 50%;transition:none}
/* Ohne Bewegung steht alles da: vier Platten untereinander statt einer
Bühne. Dann ist auch die Leiste überflüssig. */
@media (prefers-reduced-motion:reduce){
.wsx__stack{display:block}
.wsx__panel{opacity:1;filter:none;transform:none;pointer-events:auto;
margin-bottom:clamp(34px,5vh,64px)}
.wsx__dots{display:none}
}
/* ---------- Die beiden Säulen darunter ---------------------------------
Mehr Abstand und mehr Gewicht: eigener Abschnitt, größere Flächen,
eine Kennzeile über der Überschrift, spürbar mehr Luft dazwischen. */
.pillars{gap:clamp(20px,3vw,44px);margin-top:0}
.pillars__item{padding:clamp(36px,4.6vw,64px);border-radius:clamp(18px,2vw,26px);
position:relative;overflow:hidden;isolation:isolate}
.pillars__item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:linear-gradient(180deg,var(--acc-bright),transparent);opacity:.9}
.pillars__k{margin:0 0 clamp(18px,2.2vw,28px)!important;
font-family:var(--font-display);font-weight:600;font-size:.72rem;
letter-spacing:.005em;color:var(--acc-bright)}
.pillars__item h3{font-size:clamp(1.4rem,2.6vw,2.05rem);letter-spacing:-.02em;
line-height:1.08;margin-bottom:clamp(14px,1.8vw,22px);color:#fff}
.pillars__item p{font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.55}
/* Diese Bühne trägt Flächen, keine Absätze – sie braucht weniger Rand
oben und unten als die Textbühnen. */
html.has-js .wsx .stage__pin{padding-block:clamp(72px,8vh,110px)}
/* ---------- Kontrast-Nachzügler (kleine Schrift auf Papier) --------------
--acc-big/--fg-3 sind für große Typo gedacht (3:1 reicht dort). Wo sie an
kleiner Schrift hängen, braucht AA 4.5:1 – darum hier dunklere Töne.
Gemessen auf #EDE7DD: 3.31 → 5.07 bzw. 3.03 → 5.96. */
.sec--paper .h-s.acc,.sec--paper-2 .h-s.acc,
.sec--light .h-s.acc,[data-bg="light"] .h-s.acc{color:var(--acc)}
.sec--dark .h-s.acc,[data-bg="dark"] .h-s.acc{color:var(--acc-bright)}
.sec--paper .sig-role,.sec--paper-2 .sig-role,
.sec--light .sig-role,[data-bg="light"] .sig-role,
.sec--paper .sig-meta,.sec--paper-2 .sig-meta,
.sec--light .sig-meta,[data-bg="light"] .sig-meta{color:var(--ink-soft)}
/* ---------- Säulen in der hellen Hälfte ----------------------------------
#fundament steht in beiden Dateien in einer hellen Sektion. Petrolfarbene
Kacheln waren dort der letzte dunkle Block im warmen Teil – und in v2 hat
`.sec--s6 p` die weiße Schrift überschrieben (1.57:1). Darum hier helle,
warme Kacheln mit eigenen Farben statt geerbter Tokens. */
.is-warm .pillars__item,
.sec--s5 .pillars__item,.sec--s6 .pillars__item,
.sec--s7 .pillars__item,.sec--s8 .pillars__item{
background:
radial-gradient(120% 96% at 100% 0%,rgba(240,168,104,.16),transparent 58%),
linear-gradient(168deg,#FFFDF8 0%,#FBF6EC 58%,#F6EFE1 100%);
color:var(--ink);
box-shadow:
inset 0 0 0 1px rgba(180,88,30,.12),
0 44px 96px -62px rgba(90,52,20,.55),
0 2px 6px -3px rgba(90,52,20,.16)}
.is-warm .pillars__item:hover,
.sec--s5 .pillars__item:hover,.sec--s6 .pillars__item:hover,
.sec--s7 .pillars__item:hover,.sec--s8 .pillars__item:hover{
background:
radial-gradient(120% 96% at 100% 0%,rgba(240,168,104,.24),transparent 60%),
linear-gradient(168deg,#FFFEFB 0%,#FDF9F2 58%,#F9F3E8 100%);
transform:translateY(-5px);
box-shadow:
inset 0 0 0 1px rgba(180,88,30,.2),
0 54px 110px -60px rgba(90,52,20,.6),
0 3px 8px -3px rgba(90,52,20,.2)}
.is-warm .pillars__item::before,
.sec--s5 .pillars__item::before,.sec--s6 .pillars__item::before,
.sec--s7 .pillars__item::before,.sec--s8 .pillars__item::before{
background:linear-gradient(180deg,var(--warm),rgba(180,88,30,0));opacity:1}
/* Ziffer im Hintergrund – gibt den beiden Kacheln Gewicht */
.is-warm .pillars__item::after,
.sec--s5 .pillars__item::after,.sec--s6 .pillars__item::after,
.sec--s7 .pillars__item::after,.sec--s8 .pillars__item::after{
content:attr(data-n);position:absolute;right:-.06em;bottom:-.3em;z-index:-1;
font-family:var(--font-display);font-weight:600;font-size:clamp(8rem,17vw,14rem);
line-height:.8;letter-spacing:-.06em;color:rgba(180,88,30,.07);pointer-events:none}
.is-warm .pillars__k,
.sec--s5 .pillars__k,.sec--s6 .pillars__k,
.sec--s7 .pillars__k,.sec--s8 .pillars__k{color:var(--warm)}
.is-warm .pillars__item h3,
.sec--s5 .pillars__item h3,.sec--s6 .pillars__item h3,
.sec--s7 .pillars__item h3,.sec--s8 .pillars__item h3{color:var(--ink)}
.is-warm .pillars__item p,
.sec--s5 .pillars__item p,.sec--s6 .pillars__item p,
.sec--s7 .pillars__item p,.sec--s8 .pillars__item p{color:var(--ink-soft)}
/* Mehr Luft – zwischen den Kacheln und nach oben zur Bühne */
.pillars{gap:clamp(26px,4.2vw,64px)}
#fundament .pillars{margin-top:clamp(8px,2.4vh,26px)}
#fundament .statement{margin-top:clamp(56px,8vh,110px)!important}
/* ---------- Höhepunkt: plakativer ---------------------------------------
Die Kachel ist bis zur Filmlieferung das Bild. Darum warm statt grau,
mit einer Aura, die mit dem Schritt mitwächst, und größerem Anspruch. */
.wsx__claim{font-size:clamp(2.5rem,6.6vw,5.9rem);max-width:12ch}
.wsx__lead{font-size:clamp(1.12rem,1.85vw,1.68rem);max-width:30ch}
.wsx__panel{min-height:min(66vh,680px)}
@media (max-width:900px){.wsx__panel{min-height:0}}
.wsx__media{
background:
radial-gradient(76% 62% at 78% 14%,rgba(17,155,168,.16),transparent 64%),
linear-gradient(152deg,#FDF4E6 0%,#F8E6CD 54%,#F0D6B2 100%);
box-shadow:
inset 0 0 0 1px rgba(180,88,30,.14),
0 54px 120px -62px rgba(90,52,20,.6),
0 3px 9px -4px rgba(90,52,20,.2)}
/* Aura hinter dem Buchstaben */
.wsx__plate::before{content:"";position:absolute;width:74%;aspect-ratio:1;
border-radius:50%;background:radial-gradient(closest-side,rgba(17,155,168,.2),transparent 72%);
filter:blur(14px)}
html.has-js .wsx__panel .wsx__plate::before{
transform:scale(calc(.6 + var(--ps,0) * .55));
opacity:calc(var(--ps,0) * .9);transition:none}
.wsx__letter{color:var(--acc);position:relative}
.wsx__badge{background:rgba(255,255,255,.66);color:var(--ink);
box-shadow:inset 0 0 0 1px rgba(180,88,30,.18)}
.wsx__badge b{color:var(--acc)}
/* Dunkle Sektionen behalten den kühlen Auftritt */
.sec--dark .wsx__media,[data-bg="dark"] .wsx__media{
background:
radial-gradient(76% 62% at 78% 14%,rgba(95,224,236,.14),transparent 64%),
linear-gradient(152deg,rgba(255,255,255,.09),rgba(255,255,255,.03) 54%,rgba(255,255,255,.05))}
.sec--dark .wsx__letter,[data-bg="dark"] .wsx__letter{color:var(--acc-bright)}
.sec--dark .wsx__badge,[data-bg="dark"] .wsx__badge{
background:rgba(255,255,255,.1);color:#fff;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.sec--dark .wsx__badge b,[data-bg="dark"] .wsx__badge b{color:var(--acc-bright)}
/* v2.css lädt nach style.css: `.sec--s6 p` hat dieselbe Gewichtung wie
`.sec--s6 .pillars__k` und gewinnt darum. Eine Stufe höher legen. */
.is-warm .pillars__item .pillars__k,
.sec--s5 .pillars__item .pillars__k,.sec--s6 .pillars__item .pillars__k,
.sec--s7 .pillars__item .pillars__k,.sec--s8 .pillars__item .pillars__k{color:#8F4413}
/* #8F4413 statt --warm: das Label ist klein, AA verlangt 4,5:1. Auf dem
hellsten wie auf dem dunkelsten Punkt der Kachel 6,88:1 bzw. 4,98:1. */
.is-warm .pillars__item h3,.sec--s5 .pillars__item h3,
.sec--s6 .pillars__item h3,.sec--s7 .pillars__item h3,
.sec--s8 .pillars__item h3{color:var(--ink)}
/* ---------- Die Masken schneiden keine Buchstaben mehr ------------------
Gemeldet als „der obere Satz ist noch nicht ganz geladen“. Es war nicht
die Ladezeit: `.hsplit__up` und `.hsplit__down` haben `overflow:hidden`,
und bei einer Zeilenhöhe von 1,06 liegt die Maskenkante fast auf der
Schrift. Oberlängen und Umlautpunkte oben, Unterlängen (g, j, p, y, ß)
und der Fuß runder Buchstaben unten wurden abgeschnitten – die Zeile sah
halb gerendert aus.
Gepolstert wird nur die AUSSENseite, nie die Kante, durch die der Satz
einfährt: Der obere Satz kommt von unten, also bleibt seine Unterkante
scharf und die Oberkante bekommt Luft. Beim unteren Satz umgekehrt. Die
negativen Außenabstände nehmen die Polsterung aus dem Layout wieder
heraus, damit der Zeilenabstand und die Linie dazwischen exakt bleiben.
Achtung bei der Einheit: `.hsplit__up` ist ein span im .hsplit-Container,
nicht in der Überschrift – `em` misst dort 16 px, nicht 67. Deshalb eine
eigene Marke `--mask-pad` als clamp in vw, parallel zur Schriftgröße.
Zwei Werte, weil die beiden Kanten verschiedene Aufgaben haben:
--mask-pad liegt AUSSEN (oben beim oberen Satz, unten beim unteren).
Dort fährt nichts ein, der Wert darf großzügig sein.
--mask-pad-in liegt INNEN, an der Kante zur Linie. Dort fährt der Satz
ein, also kostet jeder Millimeter: Der Text wird um genau
diesen Betrag früher sichtbar. Deshalb klein gehalten und
immer kleiner als der Abstand der Linie (clamp 9–16 px),
damit kein Buchstabe je über die Linie hinausragt.
Der Fahrweg wächst um denselben Betrag mit (104% + --mask-pad-in),
sonst bliebe der Satz in der Ausgangsstellung am Rand sichtbar.
Damit die aufgeblähten Boxen nichts darunter abfangen, nehmen die Masken
keine Mausklicks an – die Sätze selbst schon. */
/* flow-root: ohne eigenen Formatierungskontext würde der negative obere
Außenabstand der ersten Maske mit dem Container verschmelzen – die
Polsterung landete dann in der Höhe des Blocks und schöbe alles darunter
nach unten. Mit flow-root heben sich Polsterung und Abstand exakt auf. */
.hsplit{--mask-pad:clamp(9px,1.15vw,17px);--mask-pad-in:clamp(4px,.55vw,8px);
display:flow-root}
.hsplit__up{padding-top:var(--mask-pad);padding-bottom:var(--mask-pad-in);
margin-top:calc(var(--mask-pad) * -1);margin-bottom:calc(var(--mask-pad-in) * -1)}
.hsplit__down{padding-top:var(--mask-pad-in);padding-bottom:var(--mask-pad);
margin-top:calc(var(--mask-pad-in) * -1);margin-bottom:calc(var(--mask-pad) * -1)}
.hsplit__up,.hsplit__down{pointer-events:none}
.hsplit__up>*,.hsplit__down>*{pointer-events:auto}
/* Der Hero-Slogan leuchtet (text-shadow, 46 px weich). Der Schein braucht
mehr Luft als die Glyphe, sonst endet er an einer geraden Kante. */
.hero h1.hsplit--claim{--mask-pad:clamp(26px,3.2vw,46px)}
/* ==========================================================================
Wirkkette – Grafik „Problem → Veränderung → Ergebnis“ (Konsequenzen)
Nachbau der Grafik von Jürgen Frasch und Martina Graf, Rot → unser Orange.
Steuerung: --kp (0..1) setzt main.js am Scrollrad auf .wkette. Jedes Teil
mit .wk-a hat einen Einsatzpunkt --d und blendet über --sp ein.
Ohne JS und bei „Bewegung reduzieren“ gilt --kp:1 – alles steht sofort.
========================================================================== */
.wkette{--kp:1;margin-top:clamp(48px,6vw,80px)}
html.has-js .wkette{--kp:0}
.wk-a{--t:clamp(0,(var(--kp) - var(--d,0)) / var(--sp,.1),1);
opacity:var(--t);transform:translate3d(0,calc((1 - var(--t)) * 18px),0)}
/* Externe Einflussfaktoren – der Auslöser, als Zeile über der Kette */
.wkette__ext{display:flex;align-items:center;gap:16px;width:fit-content;max-width:100%;
margin:0 0 clamp(22px,2.6vw,32px);padding:10px 24px 10px 10px;
border:1px dashed var(--line);border-radius:999px}
.wkette__ext-ico{flex:none;width:46px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;
color:var(--fg);background:rgba(255,255,255,.07)}
.wkette__ext-ico svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round}
.wkette .wkette__ext p{margin:0;font-size:.95rem;line-height:1.4;color:var(--fg-2)}
.wkette__ext strong{display:block;color:var(--fg);font-weight:600}
/* Die drei Stationen mit den Pfeilen dazwischen */
.wkette__row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:clamp(8px,1vw,14px);align-items:stretch}
.wkette__arrow{align-self:center;width:30px;color:var(--fg-3)}
.wkette__arrow svg{display:block;width:100%;fill:none;stroke:currentColor;stroke-width:2.4;
stroke-linecap:round;stroke-linejoin:round}
.wkette__arrow{transform:translate3d(calc((1 - var(--t)) * -14px),0,0)}
.wk{--wk-c:var(--cta);--wk-ink:var(--cta-ink);--wk-f:var(--cta);--wk-f-ink:var(--cta-ink);
position:relative;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
border:1px solid var(--line);border-radius:var(--r-card);
background:rgba(255,255,255,.035);
box-shadow:0 24px 50px -40px rgba(0,0,0,.7);
padding:clamp(22px,2.2vw,28px) clamp(18px,1.8vw,24px) 0}
.wk--change{--wk-c:#FFFFFF;--wk-ink:var(--pet-900);--wk-f:var(--pet-950);--wk-f-ink:#fff}
.wk--result{--wk-c:var(--acc-bright);--wk-ink:var(--pet-900);--wk-f:var(--acc-fill);--wk-f-ink:#fff}
.wk__head{margin-bottom:clamp(18px,2vw,24px)}
/* Kopf: große Ziffer, daneben eine Haarlinie, die mit dem Auftritt einläuft –
dasselbe Motiv wie die Linie an den Abschnitts-Kennzeilen. Kein farbiger
Rundbogen an der Kartenkante. */
.wk__n{display:flex;align-items:center;gap:16px;margin-bottom:14px;
font-size:clamp(2.1rem,2.8vw,2.7rem);font-weight:600;line-height:1;letter-spacing:-.04em;
font-variant-numeric:tabular-nums;color:var(--wk-c)}
.wk__n::after{content:"";flex:1;height:1px;background:var(--wk-c);opacity:.55;
transform:scaleX(var(--t,1));transform-origin:0 50%}
.wk__t{margin:3px 0 4px;font-size:1.14rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--wk-c)}
.wkette .wk__s{margin:0;font-size:.95rem;line-height:1.4;color:var(--fg-2)}
/* Listen in Station 1 und 3 */
.wk__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wk__list li{display:flex;align-items:center;gap:14px;padding:7px 16px 7px 7px;border-radius:999px;
font-size:.98rem;font-weight:500;line-height:1.3;color:var(--fg);
background:rgba(255,255,255,.05);
background:color-mix(in srgb,var(--wk-c) 11%,transparent)}
.wk__ico{flex:none;width:42px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;
background:var(--wk-c);color:var(--wk-ink);
transform:scale(calc(.6 + .4 * var(--t))) rotate(calc((1 - var(--t)) * -25deg))}
.wk__ico svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
/* Fußzeile: Fläche läuft von links ein */
.wkette .wk__foot{position:relative;z-index:0;margin:auto calc(-1 * clamp(18px,1.8vw,24px)) 0;
padding:18px clamp(18px,1.8vw,24px) 20px;
font-size:.98rem;line-height:1.45;font-weight:500;color:var(--wk-f-ink);
opacity:1;transform:none}
.wk__list,.wk__ring{margin-bottom:clamp(20px,2.2vw,26px)}
.wk__foot::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--wk-f);
transform:scaleX(var(--t));transform-origin:0 50%}
.wkette .wk__foot{color:color-mix(in srgb,var(--wk-f-ink) calc(var(--t) * 100%),transparent)}
.wk__foot strong{font-weight:700}
.wk--change .wk__foot{border-top:1px solid var(--line)}
/* Station 2: der Kreis */
.wk__ring{position:relative;width:min(100%,300px);aspect-ratio:1;margin:4px auto clamp(20px,2.2vw,26px)}
.wk__orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wk__track{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;
stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,(var(--kp) - .40) / .18,1));
transform:rotate(-90deg);transform-origin:150px 150px}
.wk__dots circle{fill:#fff;opacity:clamp(0,(var(--kp) - .55) / .06,1)}
.wk__core{position:absolute;left:50%;top:50%;width:36%;aspect-ratio:1;border-radius:50%;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
background:var(--pet-950);color:#fff;
box-shadow:0 0 0 2px var(--acc-bright),0 0 0 0 rgba(95,224,236,.35);
transform:translate(-50%,-50%) scale(calc(.5 + .5 * var(--t)))}
.wk__core svg{width:40%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wk__core span{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.wk__nodes{list-style:none;margin:0;padding:0}
.wk__node{position:absolute;width:29%;aspect-ratio:1;border-radius:50%;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
background:var(--paper);color:var(--pet-900);text-align:center;
box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
transform:translate(-50%,-50%) scale(calc(.4 + .6 * var(--t)))}
.wk__node svg{width:34%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wk__node span{font-size:.64rem;font-weight:600;line-height:1.15;hyphens:manual;padding-inline:4px}
/* Wenn alles steht, atmet die Mitte leise */
@media (prefers-reduced-motion:no-preference){
.wk__core::after{content:"";position:absolute;inset:0;border-radius:50%;
box-shadow:0 0 0 0 rgba(95,224,236,.45);animation:wkPulse 3.4s var(--ease) infinite;
opacity:clamp(0,(var(--kp) - .9) / .1,1)}
}
@keyframes wkPulse{0%{box-shadow:0 0 0 0 rgba(95,224,236,.45)}70%,100%{box-shadow:0 0 0 22px rgba(95,224,236,0)}}
/* Breit: Kopf, Inhalt und Fußfläche liegen in allen drei Karten auf
denselben Zeilen (Subgrid) – die Fußflächen sind gleich hoch und
beginnen auf einer Linie. Ohne Subgrid: gleiche Mindesthöhe. */
@media (min-width:1061px){
.wkette .wk__foot{min-height:calc(3 * 1.45em + 38px)}
@supports (grid-template-rows:subgrid){
.wkette__row{grid-template-rows:auto 1fr auto}
.wk{display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);grid-row:1 / span 3}
.wkette__arrow{grid-row:1 / span 3}
.wkette .wk__foot{min-height:0;margin-top:0}
}
}
/* Kleiner: untereinander, Pfeile zeigen nach unten */
@media (max-width:1060px){
.wkette__row{grid-template-columns:minmax(0,560px);justify-content:center;gap:10px}
.wkette__arrow{justify-self:center;transform:rotate(90deg) translate3d(calc((1 - var(--t)) * -10px),0,0)}
.wkette__ext{margin-inline:auto}
}
@media (max-width:420px){
.wk__node span{font-size:.58rem}
.wkette__ext{border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
html.has-js .wkette{--kp:1}
}
/* Zwischenbild mit Handlungsaufforderung („Was kostet Sie das im Jahr?“) */
.band__quote--xl{font-size:clamp(2.2rem,5.6vw,4.8rem);line-height:1;max-width:14ch;text-wrap:balance}
/* ==========================================================================
Erkenntnis-Bühne: Das Bild wird mit jedem Absatz deutlicher und wärmer
Kundenwunsch 21.09.2026: „immer deutlicher und wärmer – jetzt sieht man
fast nichts vom Bild“.
--reveal läuft von 0 (zweite Zeile ist gerade da) bis 1 (Schlusssatz).
Drei Dinge hängen daran:
1. Die Fläche über dem Bild (--wash-o) geht jetzt ganz auf 0 statt auf 0,1.
2. Der breite Schleier (Ellipse) blendet aus, stattdessen trägt ein
schmaler Schleier nur noch die Textspalte (--veil-b, .stage__media::before).
Rechts daneben steht das Foto am Ende völlig frei.
3. Das Foto wird wärmer (Sepia + Sättigung steigen mit).
Ohne Bewegung (prefers-reduced-motion) gilt gleich der Endzustand.
========================================================================== */
html.has-js .stage--turn{
--reveal:min(1,max(0,(var(--sp,0) - .22) / .68));
--wash-o:calc(.8 - .27 * var(--wash-1) - .27 * var(--wash-2) - .26 * var(--wash-3));
/* schmaler Schleier: Textspalte, Ende der längsten Headline-Zeile ~69 % */
--veil-b:linear-gradient(90deg,
rgb(245 235 216 / .95) 0%,
rgb(244 232 210 / .93) 46%,
rgb(243 228 202 / .82) 60%,
rgb(241 220 186 / .48) 72%,
rgb(238 206 152 / 0) 87%)}
/* 721–1319 px: die zweite Zeile läuft in einer Zeile bis ~91 % – Schleier breiter */
@media (max-width:1319px){
html.has-js .stage--turn{
--veil-b:linear-gradient(90deg,
rgb(245 235 216 / .95) 0%,
rgb(244 232 210 / .93) 60%,
rgb(243 228 202 / .72) 80%,
rgb(238 206 152 / .15) 100%)}
}
/* Handy: Text über die volle Breite – der Schleier deckt oben, unten frei */
@media (max-width:720px){
html.has-js .stage--turn{
--veil-b:linear-gradient(180deg,
rgb(245 235 216 / .94) 0%,
rgb(244 232 210 / .9) 70%,
rgb(240 219 180 / .35) 86%,
rgb(238 206 152 / 0) 100%)}
}
html.has-js .stage--turn .stage__veil{opacity:calc(var(--turn,0) * (1 - var(--reveal)))}
html.has-js .stage--turn .stage__media::before{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:var(--veil-b);opacity:var(--reveal)}
html.has-js .stage--turn .stage__media img{
filter:sepia(calc(.08 + .30 * var(--reveal)))
saturate(calc(1 + .38 * var(--reveal)))
contrast(calc(1 + .05 * var(--reveal)))}
@media (prefers-reduced-motion:reduce){
html.has-js .stage--turn{--reveal:1;--wash-o:0}
}
/* Wirksystem-Leiste: „s.trengthening“ ist länger als „s.implyfing“ –
auf dem Handy bleiben die vier Begriffe trotzdem in einer Zeile. */
@media (max-width:560px){
.wsx__dots{flex-wrap:nowrap;justify-content:space-between;gap:8px}
.wsx__dots li{font-size:min(.9rem,3.3vw);letter-spacing:-.01em;white-space:nowrap}
}
/* Hero-Überschrift wieder mit Linie zwischen den Zeilen, zweite Zeile ganz
in Türkis – wie die übrigen Abschnittsüberschriften (Kundenwunsch
21.09.2026). Nimmt den Block „Der Hero-Slogan als ein Satz“ in diesen
zwei Punkten zurück. Die Linie ist so lang wie die längere Zeile. */
.hero h1.hsplit--claim{width:fit-content;max-width:100%}
.hero .hsplit--claim .hsplit__rule{display:block}
.hero h1.hsplit--claim .hsplit__down{color:var(--acc-bright);
text-shadow:0 0 46px rgba(95,224,236,.3)}
.hero h1.hsplit--claim em{font-weight:inherit;color:inherit;text-shadow:none}
/* „Warum e.a.s.i.“ dunkel mit orangem Akzent (Kundenwunsch 21.09.2026).
Petrol-Grund wie die übrigen dunklen Abschnitte; statt Türkis trägt hier
das CTA-Orange die zweite Überschriftzeile, die Linie und das
„e.a.s.i.® Wirksystem“. Orange auf Petrol: 5,7:1. */
.sec--ember{--acc-on:var(--cta);--acc-big:var(--cta)}
.sec--ember .hsplit__rule{background:var(--cta)}
.sec--ember strong{color:var(--cta);font-weight:600}
.sec--ember .pframe{box-shadow:0 0 0 1px rgba(255,122,24,.35),0 40px 90px -50px rgba(0,0,0,.7)}
/* ==========================================================================
„Der Mensch dahinter“ – kühler, härter (Kundenwunsch 22.09.2026)
Dunkler Grund, Porträt in Schwarzweiß mit Kontrast, türkises Gegenlicht,
dahinter der Nachname als große Konturschrift. Das Namensschild wird ein
knappes Label statt eines schrägen Aufnähers.
Überschrift oben bündig statt mittig neben dem hohen Porträt – dadurch
steht sie im selben Abstand zur Kennzeile wie in den anderen Abschnitten.
========================================================================== */
.sec--jf{background-image:
radial-gradient(52% 62% at 76% 34%,rgba(17,155,168,.26),transparent 70%),
linear-gradient(180deg,#081A1F 0%,#061317 100%);
background-attachment:scroll}
.sec--jf .split--media{align-items:start}
.sec--jf .cutout{align-self:end;isolation:isolate}
.sec--jf .cutout__img{
filter:contrast(1.08) saturate(1.05)
drop-shadow(0 34px 60px rgba(0,0,0,.55))} /* 22.09.2026: Farbe statt Schwarzweiß */
.sec--jf .cutout::before{
background:radial-gradient(ellipse at 50% 46%,rgba(95,224,236,.28),transparent 66%);
filter:blur(34px)}
.jf-name{position:absolute;z-index:0;right:-6%;top:2%;pointer-events:none;
font-family:var(--font-display);font-weight:700;line-height:.8;letter-spacing:-.05em;
text-transform:uppercase;white-space:nowrap;
font-size:clamp(4.6rem,10.6vw,10.4rem);
color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.18)}
@media (max-width:900px){.jf-name{right:50%;transform:translateX(50%);font-size:clamp(4rem,21vw,9rem)}}
.sec--jf .cutout .pframe__tag{background:var(--cta);color:var(--cta-ink);
transform:none;border-radius:2px;outline:none;
text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;font-weight:700;padding:10px 16px;
box-shadow:0 12px 26px -12px rgba(0,0,0,.7)}
/* Porträt Jürgen: größer, nach rechts oben wachsend, leicht nach rechts
gerückt (Kundenwunsch 22.09.2026). Unten bleibt es am Abschnitt verankert. */
@media (min-width:901px){
.sec--jf .cutout{align-self:start;margin-top:clamp(-70px,-4vw,-30px)}
.sec--jf .cutout__img{width:126%;margin-left:-1%}
.sec--jf{overflow-x:clip}
}
/* ==========================================================================
Unser Angebot – der Kern der Seite (Kundenwunsch 22.09.2026)
Riesige Überschrift, der Punkt als oranger Kreis. Derselbe Punkt beendet
jede Aussage auf den vier Formatkarten. Karten groß, Bild in voller Farbe
beim Überfahren, Aussage in großer Schrift statt Fließtext zuerst.
========================================================================== */
/* Der Punkt: Das Zeichen bleibt im Text (Screenreader, Kopieren), wird aber
unsichtbar; ein oranger Kreis sitzt an seiner Stelle auf der Grundlinie.
Er wächst mit dem Scrollen auf: in der Überschrift über --pd, auf den
Karten über --pb (beides aus main.js; ohne JS = 1). */
.bigdot{position:relative;display:inline-block;color:transparent;
width:.3em;margin-left:.06em}
.bigdot::after{content:"";position:absolute;left:0;bottom:.1em;
width:.3em;height:.3em;border-radius:50%;background:var(--cta);
box-shadow:0 0 .6em rgba(255,122,24,.45);
transform:scale(var(--dot,1));transform-origin:50% 100%}
.angebot .hsplit .bigdot{--dot:var(--pd,1)}
.angebot .format .bigdot{--dot:var(--pb,1)}
/* Überschrift über die ganze Breite, deutlich größer als sonst */
.angebot .angebot__head .h-xl{font-size:clamp(3rem,9.2vw,9.4rem);line-height:.96;letter-spacing:-.045em}
.angebot .angebot__head .hsplit__rule{background:var(--cta);max-width:min(100%,62vw)}
.angebot__lead{max-width:40ch;margin:clamp(28px,3.4vw,46px) 0 0 auto}
@media (max-width:900px){.angebot__lead{margin-left:0}}
.angebot__lead .lead{color:rgba(255,255,255,.86)}
/* Karten: 2 × 2, hoch, Bild trägt */
.angebot .formats{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);
margin-top:clamp(56px,7vw,100px)}
@media (max-width:760px){.angebot .formats{grid-template-columns:1fr}}
.angebot .format{min-height:clamp(440px,64vh,640px);border-radius:var(--r-card);
border:1px solid rgba(255,255,255,.1);background:#1B140C}
.angebot .format:hover{border-color:rgba(255,122,24,.6)}
.angebot .format__bg img{filter:grayscale(.55) contrast(1.08) brightness(.9);opacity:.85;
transition:transform 1.2s var(--ease),filter .7s var(--ease),opacity .6s var(--ease)}
.angebot .format:hover .format__bg img{filter:none;opacity:1;transform:scale(1.08)}
.angebot .format__bg::after{
background:linear-gradient(to top,rgba(20,14,8,.96) 6%,rgba(20,14,8,.78) 38%,rgba(20,14,8,.18) 70%,rgba(20,14,8,.7) 100%)}
.angebot .format__body{justify-content:flex-end;padding:clamp(28px,3.2vw,48px)}
.format__top{position:absolute;top:clamp(24px,2.8vw,40px);left:clamp(28px,3.2vw,48px);right:clamp(28px,3.2vw,48px);
display:flex;align-items:baseline;gap:16px}
.format__no{font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,2.4vw,2.2rem);
letter-spacing:-.04em;line-height:1;color:var(--cta)}
.angebot .format__meta{margin:0;color:rgba(255,255,255,.8);font-size:.74rem}
.angebot .format__claim{font-family:var(--font-display);font-weight:600;
font-size:clamp(2rem,3.9vw,3.6rem);line-height:.98;letter-spacing:-.04em;
color:#fff;margin:0 0 clamp(18px,2vw,26px);max-width:12ch;text-wrap:balance}
.angebot .format h3{font-size:clamp(1rem,1.2vw,1.12rem);font-weight:600;letter-spacing:.01em;
color:var(--cta);margin-bottom:8px;text-transform:uppercase}
.angebot .format p:not(.format__claim){max-width:44ch;color:rgba(255,255,255,.8)}
.angebot .format__go{margin-top:0;padding-top:22px}
.angebot .format:hover .format__go{color:var(--cta)}
/* Abschluss: große Frage + zwei Knöpfe */
.angebot__cta{margin-top:clamp(56px,7vw,96px);display:flex;flex-wrap:wrap;align-items:center;
justify-content:space-between;gap:28px 40px;padding-top:clamp(32px,3.6vw,48px);
border-top:1px solid rgba(255,255,255,.14)}
.angebot__q{margin:0;font-family:var(--font-display);font-weight:600;color:#fff;
font-size:clamp(1.7rem,3.4vw,3rem);line-height:1.02;letter-spacing:-.035em;max-width:18ch}
/* ==========================================================================
Angebot: Die vier Formate als Leiste, die aufgeht (Kundenwunsch 22.09.2026:
„die vier Kacheln müssen richtig knallen“). Ab 1000 px stehen die vier
Formate nebeneinander als hohe Bahnen. Eine ist offen – groß, in voller
Farbe, mit der Aussage –, die anderen stehen schmal daneben: Bild in
Schwarzweiß, große Kontur-Ziffer, Formatname senkrecht. Überfahren,
Antippen oder Tab öffnet eine Bahn (main.js, Abschnitt „Angebot-Leiste“).
Darunter (Handy/Tablet) bleiben es gestapelte Karten.
========================================================================== */
.format__vert{display:none}
@media (min-width:1000px){
.angebot .formats--rail{display:flex;gap:clamp(8px,.8vw,12px);
height:clamp(540px,76vh,780px)}
.angebot .formats--rail .format{flex:1 1 0;min-width:0;min-height:0;
transition:flex-grow .85s var(--ease),border-color .4s,transform .5s var(--ease)}
.angebot .formats--rail .format.is-active{flex-grow:4.4}
.angebot .formats--rail .format:hover{transform:none}
/* Inhalt hat eine feste Breite – so bricht beim Aufgehen nichts um,
die Bahn schiebt ihn nur frei. */
.angebot .formats--rail .format__body{position:absolute;left:0;top:0;bottom:0;
width:clamp(460px,44vw,700px);padding:clamp(34px,3vw,52px);justify-content:flex-end}
.angebot .formats--rail .format__claim{font-size:clamp(2.8rem,4.6vw,4.9rem);max-width:11ch}
.angebot .formats--rail .format__body > *:not(.format__top){
opacity:0;transform:translateY(24px);
transition:opacity .35s var(--ease),transform .5s var(--ease)}
.angebot .formats--rail .format.is-active .format__body > *:not(.format__top){
opacity:1;transform:none;transition-delay:.32s}
.angebot .formats--rail .format.is-active .format__claim{transition-delay:.26s}
/* Ziffer: zu = große Kontur, offen = volles Orange */
.angebot .formats--rail .format__top{left:clamp(22px,2vw,40px);top:clamp(22px,2.4vw,40px);right:auto;
transition:left .6s var(--ease),transform .6s var(--ease)}
/* In der schmalen Bahn steht die Ziffer mittig über der Bahn */
.angebot .formats--rail .format:not(.is-active) .format__top{left:0;transform:none}
.angebot .formats--rail .format:not(.is-active) .format__no{display:block;
width:var(--lane,150px);text-align:center}
.angebot .formats--rail .format__no{font-size:clamp(3.2rem,5vw,5.6rem);font-weight:700;
color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);
transition:color .5s var(--ease),-webkit-text-stroke-color .5s}
.angebot .formats--rail .format.is-active .format__no{color:var(--cta);-webkit-text-stroke-color:var(--cta)}
.angebot .formats--rail .format__meta{opacity:0;transition:opacity .3s}
.angebot .formats--rail .format.is-active .format__meta{opacity:1;transition-delay:.4s}
/* Formatname senkrecht in der geschlossenen Bahn */
.angebot .formats--rail .format__vert{display:block;position:absolute;z-index:1;
left:50%;bottom:clamp(30px,3vw,48px);
writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);
font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;
font-size:clamp(1.3rem,1.7vw,1.8rem);color:#fff;white-space:nowrap;
transition:opacity .3s var(--ease)}
.angebot .formats--rail .format__vert::before{content:"";display:inline-block;
width:.34em;height:.34em;border-radius:50%;background:var(--cta);margin-bottom:.5em}
.angebot .formats--rail .format.is-active .format__vert{opacity:0}
/* Bild: zu = schwarzweiß und dunkel, offen = volle Farbe */
.angebot .formats--rail .format__bg img{filter:grayscale(1) contrast(1.1) brightness(.62);
opacity:1;transform:scale(1.08)}
.angebot .formats--rail .format.is-active .format__bg img{filter:none;transform:scale(1)}
.angebot .formats--rail .format:not(.is-active):hover .format__bg img{filter:grayscale(.4) brightness(.8)}
.angebot .formats--rail .format.is-active{border-color:rgba(255,122,24,.55)}
/* Der Punkt der offenen Aussage setzt einmal kräftig auf */
.angebot .formats--rail .format.is-active .format__claim .bigdot::after{
animation:dotPop .7s .55s var(--ease) both}
}
@keyframes dotPop{0%{transform:scale(0)}60%{transform:scale(1.5)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
.angebot .formats--rail .format,.angebot .formats--rail .format *{transition:none!important;animation:none!important}
}
/* Formatname in den Angebotskarten: nicht über die Überschriften-Maske
einblenden – die Karte selbst blendet schon ein, die Maske schnitt die
Zeile sonst an. */
html.has-js .angebot .format h3.is-scrub-h{clip-path:none;transform:none;opacity:1;filter:none}
/* Nachtrag 22.09.2026: In geschlossenen Bahnen blieb der orange Formatname
(h3) stehen – die Ausnahme für die Überschriften-Maske hatte ihn wieder
sichtbar gemacht. Außerdem: senkrechter Name ohne Punkt, dafür größer. */
@media (min-width:1000px){
html.has-js .angebot .formats--rail .format:not(.is-active) h3.is-scrub-h,
.angebot .formats--rail .format:not(.is-active) h3{opacity:0}
.angebot .formats--rail .format__vert{font-size:clamp(1.9rem,2.6vw,2.9rem);font-weight:700;
letter-spacing:-.02em;line-height:1}
.angebot .formats--rail .format__vert::before{content:none}
}
/* ---- PageSpeed (22.09.2026): Hero-Überschrift ohne Wartezeit -------------
Die Überschrift ist das größte Element im ersten Bild (LCP). Bisher wartete
ihr Auftritt auf main.js und den Sichtbarkeits-Beobachter und lief dann
noch über eine Sekunde – LCP kam erst nach 5 s. Jetzt startet dieselbe
Bewegung als CSS-Animation mit dem ersten Bild, ohne auf Skripte zu
warten, und ist nach gut einer halben Sekunde durch. */
@media (prefers-reduced-motion:no-preference){
html.has-js .hero .hsplit__up>*{animation:heroUp .7s var(--ease) .05s both}
html.has-js .hero .hsplit__down>*{animation:heroDown .7s var(--ease) .3s both}
html.has-js .hero .hsplit__rule{transform:none;animation:heroRule .6s var(--ease) .2s both}
}
@keyframes heroUp{from{transform:translateY(calc(102% + var(--mask-pad-in,0px)))}to{transform:none}}
@keyframes heroDown{from{transform:translateY(calc(-102% - var(--mask-pad-in,0px)))}to{transform:none}}
@keyframes heroRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* ---- Keine Text-Einblendungen beim Scrollen (Kundenwunsch 22.09.2026) ----
main.js setzt html.no-textfx. Absätze, Überschriften, Kacheln und Blöcke
stehen sofort da – kein Wort-für-Wort, kein Auf- und Abblenden, kein
Mitschwimmen. Unberührt bleiben: der Auftritt der Hero-Überschrift, die
Bühnen (Hero-Absätze, Erkenntnis, Wirksystem), die Grafik in „Die
Konsequenzen“ und die Bild-Parallaxe. */
html.no-textfx .rv,html.no-textfx .rv-stagger>*,html.no-textfx .rv-mask>span,
html.no-textfx .rv-words .w,html.no-textfx .rv-read .w{
opacity:1!important;transform:none!important;filter:none!important;
clip-path:none!important;transition:none!important}
html.no-textfx .hsplit:not(.hero .hsplit) .hsplit__up>*,
html.no-textfx .hsplit:not(.hero .hsplit) .hsplit__down>*{transform:none!important;filter:none!important;transition:none!important}
html.no-textfx .hsplit:not(.hero .hsplit) .hsplit__rule{transform:none!important;transition:none!important}
html.no-textfx h2.is-scrub-h,html.no-textfx h3.is-scrub-h,html.no-textfx h4.is-scrub-h{clip-path:none!important;transform:none!important}
/* ==========================================================================
„Die überraschende Erkenntnis“ neu (22.09.2026): warm, orange, Bild daneben
Grund: Verlauf im CTA-Orange. Schrift dunkel (Anthrazit auf Orange 6,8:1),
die umschlagende zweite Zeile in tiefem Petrol. Der Schlusssatz steht in
einer dunklen Karte, „Und beides ist entwickelbar.“ darin in Orange.
========================================================================== */
.erk{position:relative;overflow:hidden;color:var(--ink);
background:
radial-gradient(70% 90% at 92% 8%,rgba(255,214,160,.55),transparent 60%),
linear-gradient(135deg,#FF7A18 0%,#FA8F35 48%,#F2AA62 100%);
--fg:var(--ink);--fg-2:#2A1B10;--fg-3:rgba(36,32,28,.62);--line:rgba(36,32,28,.22);
--acc-on:var(--pet-900);--acc-big:var(--pet-900)}
.erk .eyebrow{color:var(--ink)}
.erk h2{color:var(--ink)}
.erk .erk__turn{color:var(--pet-900)}
.erk .hsplit__rule{background:rgba(36,32,28,.55)}
.erk__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
gap:clamp(32px,5vw,88px);align-items:center;margin-top:clamp(18px,2vw,28px)}
@media (max-width:900px){.erk__grid{grid-template-columns:1fr}}
.erk .erk__head{margin-bottom:clamp(24px,2.6vw,36px)}
.erk p.lead{color:#2A1B10;max-width:40ch;margin:0 0 16px}
.erk__hit{margin-top:clamp(24px,2.6vw,36px);background:var(--pet-900);color:#fff;
border-radius:var(--r-card);padding:clamp(22px,2.4vw,34px) clamp(22px,2.6vw,38px);
box-shadow:0 30px 60px -36px rgba(60,24,0,.7)}
.erk .erk__hit p{color:rgba(255,255,255,.9);margin:0;font-size:clamp(1.05rem,1.35vw,1.22rem);line-height:1.5}
.erk .erk__acc{color:var(--cta);font-weight:700}
.erk .erk__hit p.erk__hit-b{margin-top:12px;color:#fff;font-weight:700}
.erk__img{margin:0;position:relative;aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;
box-shadow:0 44px 90px -44px rgba(70,28,0,.75),0 0 0 1px rgba(255,255,255,.25)}
.erk__img img{width:100%;height:100%;object-fit:cover;object-position:74% 40%;
filter:saturate(1.12) contrast(1.04) sepia(.08);display:block}
@media (max-width:900px){.erk__img{aspect-ratio:4/3;order:-1}}
/* ==========================================================================
„Der Mensch dahinter“ unten kompakter (22.09.2026)
========================================================================== */
.jf-more{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(28px,4.5vw,72px);margin-top:clamp(34px,4vw,56px);align-items:start}
@media (max-width:900px){.jf-more{grid-template-columns:1fr}}
.jf-more .statement__quote{font-size:clamp(1.25rem,2.3vw,1.95rem)}
.jf-more .body-max{margin:0}
.jf-sig{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);line-height:1.5}
.jf-link{margin:12px 0 0}
.sec--jf .cta-row{margin-top:clamp(34px,3.6vw,52px)}
.erk .erk__head .h-xl{font-size:clamp(2.1rem,3.7vw,3.7rem);line-height:1.02}
/* Erkenntnis: Jürgen freigestellt neben dem Text, unten auf der Kante */
.erk{padding-bottom:0}
.erk__grid{align-items:end}
.erk__text{padding-bottom:clamp(72px,9vw,140px);align-self:center}
.erk__cut{margin:0;align-self:end;display:flex;justify-content:center}
.erk__cut img{display:block;width:100%;max-width:640px;height:auto;
filter:drop-shadow(0 30px 40px rgba(90,36,0,.35))}
@media (max-width:900px){
.erk__text{padding-bottom:0}
.erk__cut{margin-top:clamp(32px,6vw,48px)}
.erk__cut img{max-width:440px}
}
/* Jürgen deutlich größer (22.09.2026): Höhe statt Spaltenbreite bestimmt die
Größe, er darf rechts über die Spalte hinausragen (Sektion schneidet ab). */
@media (min-width:901px){
.erk__cut{justify-content:flex-start}
.erk__cut img{width:auto;max-width:none;height:clamp(600px,88vh,960px);
margin-left:clamp(-120px,-6vw,-40px)}
}
@media (max-width:900px){.erk__cut img{max-width:560px;width:112%}}
/* „Warum e.a.s.i.“: Jürgen freigestellt, groß, unten auf der Kante –
gleiche Machart wie in der Erkenntnis (22.09.2026). */
#ansatz{padding-bottom:0;overflow:hidden}
#ansatz .ans__grid{align-items:end}
#ansatz .ans__grid>div:first-child{align-self:center;padding-bottom:clamp(72px,9vw,140px)}
.ans__cut{margin:0;align-self:end;display:flex;justify-content:center}
.ans__cut img{display:block;width:100%;max-width:520px;height:auto;
filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
@media (min-width:901px){
.ans__cut{justify-content:flex-start}
.ans__cut img{width:auto;max-width:none;height:clamp(600px,88vh,960px)}
}
@media (max-width:900px){
#ansatz .ans__grid>div:first-child{padding-bottom:0}
.ans__cut{margin-top:clamp(32px,6vw,48px)}
}
@media (min-width:901px){
#ansatz .ans__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.ans__cut{min-width:0}
}
/* ---------- Wirksystem: seitwärts statt übereinander (2026-09-22) -------
Desktop: Die Bühne hält, der Scroll schiebt die vier Platten als Band
nach links. Mobil / ohne Bewegung: Karussell zum Wischen mit Einrasten.
Die Leiste darunter ist klickbar und springt zur jeweiligen Platte. */
.wsx__track{display:flex}
.wsx__dots a{color:inherit;text-decoration:none;display:block;outline-offset:6px}
.wsx__dots a span{color:inherit}
.wsx__dots li{cursor:pointer}
.wsx__dots a:hover{color:var(--fg)}
@media (prefers-reduced-motion:no-preference){
.wsx{
--t1:clamp(0, calc((var(--sp,0) - .24) / .12), 1);
--t2:clamp(0, calc((var(--sp,0) - .49) / .12), 1);
--t3:clamp(0, calc((var(--sp,0) - .74) / .12), 1)}
html.has-js .wsx__stack{display:block;overflow:hidden;
margin-inline:calc(-1 * clamp(8px,1.4vw,24px));padding-inline:clamp(8px,1.4vw,24px)}
/* Die Verschiebung setzt main.js; der Wechsel ist eine feste, weiche
Animation (30.09.2026). Beim Ziehen folgt das Band direkt der Hand. */
html.has-js .wsx__track{
gap:clamp(40px,6vw,110px);
will-change:transform}
html.has-js .wsx__track.is-gliding{
transition:transform .85s cubic-bezier(.22,.7,.2,1)}
html.has-js .wsx__stack{cursor:grab;touch-action:pan-y;
-webkit-user-select:none;user-select:none}
html.has-js .wsx__stack.is-dragging{cursor:grabbing}
html.has-js .wsx__stack.is-dragging a{pointer-events:none}
.wsx__media video,.wsx__media img{-webkit-user-drag:none}
/* Leiste: Der aktive Buchstabe folgt der Platte, nicht dem Scrollrad */
html.has-js .wsx__dots li{--ps:0!important}
html.has-js .wsx__dots li.is-on{--ps:1!important}
html.has-js .wsx__dots li,html.has-js .wsx__dots li span{transition:color .5s ease}
.wsx__dots li::after{transition:transform .6s cubic-bezier(.22,.7,.2,1)}
html.has-js .wsx__panel{grid-area:auto;flex:0 0 100%;min-width:0;
opacity:1;filter:none;transform:none;pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){
html.has-js .wsx{min-height:0!important}
html.has-js .wsx .stage__pin{position:relative;min-height:0}
html.has-js .wsx__stack,.wsx__stack{display:block}
.wsx__track{overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;gap:14px;
margin-inline:calc(-1 * var(--gut,20px));padding-inline:var(--gut,20px);
scroll-padding-inline:var(--gut,20px);scrollbar-width:none;
-webkit-overflow-scrolling:touch}
.wsx__track::-webkit-scrollbar{display:none}
html.has-js .wsx__panel,.wsx__panel{grid-area:auto;flex:0 0 86%;min-width:0;
scroll-snap-align:start;margin:0;
opacity:1;filter:none;transform:none;pointer-events:auto}
html.has-js .wsx__panel .wsx__letter,html.has-js .wsx__panel .wsx__badge{opacity:1;transform:none}
.wsx__dots{display:flex}
html.has-js .wsx__dots li{--ps:0!important}
html.has-js .wsx__dots li.is-on{--ps:1!important}
.wsx__dots li::after{transition:transform .35s ease}
}
/* Schatten der Platten nicht am Band abschneiden; mobil unten kompakter */
@media (prefers-reduced-motion:no-preference){
html.has-js .wsx__stack{padding-block:40px 70px;margin-block:calc(clamp(26px,3.4vh,44px) - 40px) -70px}
}
@media (max-width:900px){
html.has-js .wsx .stage__pin{padding-bottom:12px}
.wsx__track{padding-bottom:30px;margin-bottom:-30px}
}
@media (prefers-reduced-motion:no-preference){
html.has-js .wsx__stack{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);
padding-block:40px 140px;margin-block:calc(clamp(26px,3.4vh,44px) - 40px) -140px}
}
@media (prefers-reduced-motion:reduce){
.wsx__track .wsx__media{box-shadow:inset 0 0 0 1px var(--line),0 22px 40px -30px rgba(36,32,28,.5)}
.wsx__track{padding-bottom:44px;margin-bottom:-44px}
}
/* ---------- Angebot: Bilder als Duoton Petrol + Orange (2026-09-22) -----
Kein Braun mehr: Die Fotos werden schwarzweiß, darüber färbt eine
Petrol-Schicht (Mischmodus „color“) den Ton ein, ein oranges Licht kommt
von oben rechts. Die offene Kachel bekommt etwas mehr Licht. */
.angebot .format{background:var(--pet-900)}
.angebot .format__bg{isolation:isolate}
.angebot .format__bg img,
.angebot .format:hover .format__bg img,
.angebot .formats--rail .format__bg img,
.angebot .formats--rail .format.is-active .format__bg img,
.angebot .formats--rail .format:not(.is-active):hover .format__bg img{
position:relative;z-index:0;opacity:1;
filter:grayscale(1) contrast(1.18) brightness(.92)}
.angebot .format__bg::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:
radial-gradient(120% 80% at 88% 8%,rgba(255,122,24,.95) 0%,rgba(255,122,24,.35) 34%,rgba(255,122,24,0) 62%),
linear-gradient(160deg,#0E828D 0%,#0F3F4A 55%,#0A2C34 100%);
mix-blend-mode:color;transition:opacity .6s var(--ease)}
.angebot .format__bg::after{z-index:2;
background:
radial-gradient(90% 55% at 92% 0%,rgba(255,122,24,.28),rgba(255,122,24,0) 70%),
linear-gradient(to top,rgba(10,44,52,.97) 6%,rgba(10,44,52,.8) 38%,rgba(10,44,52,.22) 70%,rgba(10,44,52,.66) 100%)}
@media (min-width:901px){
.angebot .formats--rail .format:not(.is-active) .format__bg img{filter:grayscale(1) contrast(1.15) brightness(.6)}
.angebot .formats--rail .format.is-active .format__bg img{filter:grayscale(1) contrast(1.2) brightness(1)}
}
/* Bildband „Die Antwort“: Quelle ist nur ein 1280er-Videostandbild. Deshalb
kaum Überstand und kein Zoom – sonst wird es auf ~1,6-fach aufgeblasen. */
.band__media--flach{inset:-18% 0}
/* „Die Antwort“: Das Motiv lebt vom goldenen Licht – der Schleier deckt nur
die Textspalte, rechts bleibt das Bild warm und offen. */
.band--antwort .band__veil{
background:linear-gradient(96deg,rgba(10,44,52,.93) 0%,rgba(10,44,52,.86) 30%,rgba(10,44,52,.5) 50%,rgba(10,44,52,.08) 72%,rgba(10,44,52,0) 100%)!important}
.band--antwort .band__media img{filter:saturate(1.08) contrast(1.04)!important}
@media (max-width:760px){
.band--antwort .band__veil{background:linear-gradient(180deg,rgba(10,44,52,.35) 0%,rgba(10,44,52,.88) 45%,rgba(10,44,52,.9) 70%,rgba(10,44,52,.4) 100%)!important}
.band--antwort .band__media img{object-position:62% 40%!important}
}
/* Kind nach rechts neben die Textspalte: Bildfläche rechts breiter ziehen */
@media (min-width:761px){.band--antwort .band__media{right:-36%}}
@media (max-width:760px){
.band--antwort .band__veil{background:linear-gradient(180deg,rgba(10,44,52,.05) 0%,rgba(10,44,52,.7) 40%,rgba(10,44,52,.9) 70%,rgba(10,44,52,.5) 100%)!important}
}
/* ---------- Der Faktor Mensch: der orange Punkt (2026-09-22) -------------
Dieselbe Idee wie im Angebot: ein großer oranger Punkt als Lichtquelle.
Er steht rechts oben hinter der Karte und wärmt den Abschnitt; Fortschritt,
Auswahl und Kennzeilen im Check greifen das Orange auf. */
.check::after{content:"";position:absolute;pointer-events:none;z-index:0;
width:clamp(260px,34vw,560px);aspect-ratio:1;border-radius:50%;
right:clamp(-120px,-4vw,-40px);top:clamp(40px,8vw,120px);
background:radial-gradient(circle at 38% 36%,#FFB26B 0%,var(--cta) 42%,#E2600A 100%);
box-shadow:0 0 120px 30px rgba(255,122,24,.35),0 0 260px 90px rgba(255,122,24,.16)}
.check::before{
background:radial-gradient(60% 55% at 88% 22%,rgba(255,122,24,.22),transparent 64%),
radial-gradient(70% 60% at 10% 90%,rgba(36,106,120,.5),transparent 66%)}
.check .hsplit__rule{background:var(--cta)}
.check .hsplit__down .h-xl{color:#fff}
.check .hsplit__down .h-xl .q{color:var(--cta)}
.check__card{background:rgba(10,44,52,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border-color:rgba(255,255,255,.14);box-shadow:0 40px 90px -50px rgba(0,0,0,.6)}
.check__status [data-check-step]{color:var(--cta)}
.check__bar i{background:linear-gradient(90deg,#FFB26B,var(--cta))}
.check__opt:hover{border-color:var(--cta);background:rgba(255,122,24,.1)}
.check__opt.is-sel{border-color:var(--cta);background:rgba(255,122,24,.18)}
.check__opt:hover i,.check__opt.is-sel i{border-color:var(--cta);color:var(--cta)}
.check__opt.is-sel i{background:var(--cta);color:var(--cta-ink,#1b140c)}
.check__area .track i{background:linear-gradient(90deg,#FFB26B,var(--cta))}
@media (max-width:760px){
.check::after{width:220px;right:-90px;top:30px}
}
@media (prefers-reduced-motion:no-preference){
.check::after{animation:checkGlow 6s ease-in-out infinite alternate}
}
@keyframes checkGlow{from{transform:scale(1)}to{transform:scale(1.05)}}
/* Punkt hinter die Karte: kollidiert so nicht mit Text, leuchtet durch */
.check::after{top:auto;bottom:clamp(90px,12vw,200px);right:clamp(-160px,-6vw,-60px)}
.check .hsplit .hsplit__rule{background:var(--cta)!important;opacity:1}
@media (max-width:760px){
.check::after{width:240px;right:-110px;top:500px;bottom:auto}
}
/* ---------- FAQ vor dem Footer (2026-09-22) ------------------------------
Links die Überschrift (klebt beim Scrollen), rechts das Akkordeon aus
nativen . Nummer und Plus in Orange, die offene Frage bekommt
eine orange Kante. Aufklappen weich über grid-template-rows. */
.faq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:clamp(40px,6vw,110px);align-items:start}
.faq__head{position:sticky;top:clamp(100px,14vh,140px)}
.faq .hsplit__rule{background:var(--cta)}
.faq__lead{margin-top:clamp(22px,3vh,34px);color:var(--fg-2)}
.faq__list{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line);position:relative}
.faq__item::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;
background:var(--cta);transform:scaleX(0);transform-origin:0 50%;
transition:transform .5s var(--ease)}
.faq__item[open]::before{transform:scaleX(1)}
.faq__q{list-style:none;cursor:pointer;display:grid;
grid-template-columns:auto 1fr auto;gap:clamp(14px,2vw,26px);align-items:center;
padding:clamp(20px,2.6vw,30px) 0}
.faq__q::-webkit-details-marker{display:none}
.faq__q h3{margin:0;font-size:clamp(1.08rem,1.6vw,1.38rem);line-height:1.25;
letter-spacing:-.015em;text-transform:none;color:var(--fg);transition:color .3s var(--ease)}
.faq__q:hover h3,.faq__item[open] h3{color:var(--fg)}
.faq__no{font-family:var(--font-display);font-weight:600;font-size:.82rem;
color:var(--cta);font-variant-numeric:tabular-nums;min-width:1.6em}
.faq__icon{position:relative;width:40px;height:40px;border-radius:50%;
border:1px solid var(--line);transition:background .35s var(--ease),border-color .35s var(--ease),transform .45s var(--ease)}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:50%;top:50%;
width:14px;height:2px;border-radius:2px;background:var(--fg);
transform:translate(-50%,-50%);transition:transform .45s var(--ease),background .3s}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__q:hover .faq__icon{border-color:var(--cta)}
.faq__item[open] .faq__icon{background:var(--cta);border-color:var(--cta);transform:rotate(180deg)}
.faq__item[open] .faq__icon::before,.faq__item[open] .faq__icon::after{background:#fff}
.faq__item[open] .faq__icon::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq__q:focus-visible{outline-offset:4px}
.faq__a{display:grid;grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{margin:0;padding:0 clamp(40px,5vw,70px) clamp(24px,3vw,34px) calc(1.6em + clamp(14px,2vw,26px));
max-width:68ch;color:var(--fg-2);font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.6}
.faq__a b{color:var(--fg);font-weight:600}
/* weiches Aufklappen, wo der Browser es kann */
@supports (interpolate-size:allow-keywords){
.faq{interpolate-size:allow-keywords}
.faq__item::details-content{height:0;overflow:hidden;
transition:height .45s var(--ease),content-visibility .45s allow-discrete}
.faq__item[open]::details-content{height:auto}
}
@media (max-width:900px){
.faq__grid{grid-template-columns:1fr;gap:34px}
.faq__head{position:static}
.faq__a p{padding-right:0;padding-left:0}
.faq__icon{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
.faq__item::details-content,.faq__icon,.faq__item::before{transition:none!important}
}
.faq__q h3{max-width:none}
/* Großer Punkt beim Faktor Mensch auf Wunsch entfernt (22.09.) */
.check::after{content:none!important;display:none!important;animation:none!important}
/* FAQ folgt direkt auf die helle Download-Sektion: kein doppelter Abstand */
#downloads + .faq{padding-top:0}
#downloads + .faq .faq__grid{padding-top:clamp(20px,3vw,50px)}
/* Porträt „Was ich tue“: Das Foto ist an Schultern/Armen beschnitten.
Statt harter Kanten laufen Seiten und Unterkante weich in den Grund aus. */
.sec--jf .cutout__img{
-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%),
linear-gradient(180deg,#000 72%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%),
linear-gradient(180deg,#000 72%,transparent 100%);
mask-composite:intersect}
/* „Die Antwort“ mit Berg-Motiv: Wanderer stehen schon rechts, keine Verbreiterung nötig */
@media (min-width:761px){.band--antwort .band__media{right:0}}
@media (max-width:760px){.band--antwort .band__media img{object-position:72% 45%!important}}
/* ---------- Hero ohne Bühne (22.09.2026) --------------------------------
Der Hero hielt sich über gut zwei Fensterhöhen fest und gab Absatz,
Knöpfe und Zahlen erst nach und nach frei. Beim Scrollen wirkte das,
als würde die Seite haken. Jetzt steht alles sofort da und die Seite
scrollt normal weiter. */
html.has-js .hero{min-height:min(100svh,1020px)}
html.has-js .hero__pin{position:relative;height:auto;min-height:min(100svh,1020px)}
html.has-js .hero__inner{transform:none}
html.has-js .hero__step,
html.has-js .hero .hero__late{opacity:1;transform:none;filter:none}
html.has-js .hero .scrollcue{opacity:1}
/* ---------- Wirksystem: die Buchstaben groß vor den Claim (22.09.2026) ---
Der kleine Chip im Bild ging unter. Jetzt steht über jedem Claim groß,
um welchen Buchstaben es geht – Buchstabe in Orange, Wort in Schwarz. */
.wsx__word{margin:0 0 clamp(14px,2vh,22px);display:flex;flex-direction:column;gap:6px}
.wsx__step{font-family:var(--font-display);font-weight:600;font-size:.72rem;
letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.wsx__wordline{font-family:var(--font-display);font-weight:600;
font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1;letter-spacing:-.03em;
color:var(--fg);text-transform:lowercase;display:inline-flex;align-items:baseline}
.wsx__wordline b{font-weight:600;color:var(--cta);
font-size:clamp(2.4rem,4.4vw,3.9rem);line-height:.9;margin-right:.04em;
text-shadow:0 10px 30px rgba(255,122,24,.22)}
html.has-js .wsx__panel .wsx__word{opacity:1}
/* Die Leiste darunter trägt dieselbe Logik: Buchstabe orange, Wort dunkel */
.wsx__dots li{font-size:clamp(1.05rem,1.6vw,1.42rem);color:var(--fg-3)}
.wsx__dots li span{color:var(--cta)!important;font-size:1.18em}
html.has-js .wsx__dots li{color:color-mix(in srgb,var(--fg) calc(var(--ps,0) * 100%),var(--fg-3))}
.wsx__dots li::after{background:var(--cta)}
/* Der Buchstabe auf der Platte bleibt, wird aber ruhiger – die Wortmarke führt */
.wsx__letter{opacity:.9}
.wsx__wordline b{margin-right:-.02em;letter-spacing:-.05em}
.wsx__dots li span{letter-spacing:-.05em}
/* Mehr Luft nach dem Punkt */
.wsx__wordline b{margin-right:.12em;letter-spacing:-.02em}
.wsx__dots li span{margin-right:.06em}
/* Die Wortmarke auch im Bild – unten links, über einem weichen Verlauf,
Buchstabe in Orange, Wort in Weiß. */
.wsx__mark{position:absolute;z-index:3;left:clamp(18px,2.4vw,30px);bottom:clamp(16px,2.2vw,26px);
font-family:var(--font-display);font-weight:600;text-transform:lowercase;
font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:-.02em;line-height:1;
color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55);display:inline-flex;align-items:baseline}
.wsx__mark b{font-weight:600;color:var(--cta);font-size:1.55em;line-height:.9;
margin-right:.12em;letter-spacing:-.02em;text-shadow:0 4px 22px rgba(255,122,24,.5)}
.wsx__media::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;z-index:2;
pointer-events:none;background:linear-gradient(to top,rgba(12,28,32,.72),transparent)}
/* Abstand nach dem Punkt etwas zurücknehmen (22.09.) */
.wsx__wordline b{margin-right:.06em}
.wsx__mark b{margin-right:.06em}
.wsx__dots li span{margin-right:.02em}
/* ---------- Erkenntnis wieder hell (22.09.2026) --------------------------
Statt der vollen Orangefläche heller, warmer Grund mit orangem Licht
oben rechts und orangen Akzenten. Die dunkle Kernaussage bleibt. */
.erk{background:
radial-gradient(64% 72% at 88% 6%,rgba(255,122,24,.22),transparent 62%),
radial-gradient(50% 60% at 6% 96%,rgba(255,178,107,.16),transparent 66%),
linear-gradient(180deg,var(--paper-2) 0%,#EFE9E0 100%)!important;
--fg:var(--ink);--fg-2:var(--ink-soft);--fg-3:var(--ink-mute);
--line:rgba(36,32,28,.16);
--acc-on:var(--cta);--acc-big:var(--cta)}
.erk .eyebrow,.erk h2{color:var(--ink)}
.erk .erk__turn{color:var(--cta)}
.erk .hsplit__rule{background:var(--cta)}
.erk p.lead{color:var(--ink-soft)}
.erk__hit{box-shadow:0 30px 70px -44px rgba(36,32,28,.55)}
/* ---------- Wirksystem: Buchstabe als Logo-Kasten (22.09.2026) -----------
Wie im e.a.s.i.-Logo: türkiser Kasten mit leicht schrägen Kanten,
Buchstabe negativ in Weiß. Der Kasten liegt als Pseudo-Element hinter
der Schrift, damit der Buchstabe gerade stehen bleibt. */
.wsx__wordline b,.wsx__mark b{position:relative;z-index:0;color:#fff;
padding:.04em .16em .1em .14em;margin-right:.14em;
text-shadow:none;isolation:isolate}
.wsx__wordline b::before,.wsx__mark b::before{content:"";position:absolute;
inset:-.02em -.02em 0 -.02em;z-index:-1;background:var(--brand);
clip-path:polygon(0 5%,100% 0,100% 95%,0 100%);
box-shadow:0 14px 30px -18px rgba(17,155,168,.7)}
.wsx__mark b{color:#fff}
.wsx__mark b::before{background:var(--brand)}
/* Die Leiste darunter bleibt schlicht – vier Kästen wären zu viel */
.wsx__wordline b::before,.wsx__mark b::before{clip-path:polygon(0 8%,100% 0,100% 92%,0 100%)}
/* ---------- Formate-Seite: die vier Formate mit Bild (23.09.2026) --------
Angelehnt an die Startseite: großes Bild, große Aussage, Fakten als
Karten, eigener Knopf. Die Seiten wechseln sich ab. */
.fmt{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
gap:clamp(28px,4.6vw,78px);align-items:center;
margin-top:clamp(56px,8vw,124px)}
.fmt--flip .fmt__media{order:2}
@media (max-width:860px){
.fmt{grid-template-columns:1fr;gap:clamp(22px,4vw,34px);margin-top:clamp(48px,9vw,72px)}
.fmt--flip .fmt__media{order:0}
}
.fmt__media{position:relative;margin:0;overflow:hidden;isolation:isolate;
aspect-ratio:4/5;border-radius:clamp(20px,2.4vw,34px);
background:var(--pet-900);
box-shadow:0 46px 100px -60px rgba(36,32,28,.7),inset 0 0 0 1px rgba(255,255,255,.1)}
@media (max-width:860px){.fmt__media{aspect-ratio:4/3}}
.fmt__media img{width:100%;height:100%;object-fit:cover;display:block;
transform:scale(1.02);transition:transform 1.2s var(--ease)}
.fmt:hover .fmt__media img{transform:scale(1.07)}
.fmt__media::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;
background:linear-gradient(to top,rgba(10,44,52,.66),transparent);pointer-events:none}
.fmt__no{position:absolute;left:clamp(18px,2vw,28px);top:clamp(14px,1.8vw,24px);z-index:2;
font-family:var(--font-display);font-weight:600;letter-spacing:-.04em;line-height:1;
font-size:clamp(2.6rem,5vw,4.4rem);color:transparent;
-webkit-text-stroke:1.5px rgba(255,255,255,.78)}
.fmt__claim{font-family:var(--font-display);font-weight:600;
font-size:clamp(2rem,3.8vw,3.4rem);line-height:1;letter-spacing:-.035em;
color:var(--fg);margin:clamp(10px,1.4vw,18px) 0 0;max-width:14ch;text-wrap:balance}
.fmt__name{margin:clamp(12px,1.4vw,18px) 0 0;font-family:var(--font-display);font-weight:600;
font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cta)}
.fmt .lead{margin-top:clamp(12px,1.6vw,20px);max-width:44ch}
.fmt__facts{list-style:none;margin:clamp(20px,2.6vw,32px) 0 0;padding:0;display:grid;gap:10px}
.fmt__facts li{display:grid;grid-template-columns:clamp(84px,9vw,116px) 1fr;gap:clamp(12px,1.6vw,22px);
padding:clamp(12px,1.4vw,16px) clamp(14px,1.6vw,20px);
border-radius:14px;background:color-mix(in srgb,var(--fg) 4%,transparent);
box-shadow:inset 0 0 0 1px var(--line)}
.fmt__facts b{font-family:var(--font-display);font-weight:600;font-size:.72rem;
letter-spacing:.1em;text-transform:uppercase;color:var(--cta);padding-top:.25em}
.fmt__facts span{color:var(--fg-2);font-size:clamp(.96rem,1.1vw,1.04rem);line-height:1.5}
@media (max-width:560px){.fmt__facts li{grid-template-columns:1fr;gap:4px}}
.fmt__cta{margin-top:clamp(22px,2.6vw,34px)}
/* ---------- Formate-Seite: Hero größer, unten mehr Rhythmus (23.09.) ----- */
.pagehero--big{padding-top:clamp(180px,18vw,260px);padding-bottom:clamp(80px,9vw,130px);
min-height:min(92svh,940px);display:flex;align-items:flex-end}
.pagehero--big .pagehero__media video{width:100%;height:100%;object-fit:cover;opacity:.52;
filter:grayscale(1) contrast(1.4) brightness(.84) sepia(1) hue-rotate(150deg) saturate(1.8)}
.pagehero--big .pagehero__veil{
background:linear-gradient(100deg,rgba(7,34,41,.95) 0%,rgba(8,38,45,.86) 40%,rgba(10,44,52,.5) 76%,rgba(10,44,52,.34) 100%),
linear-gradient(to top,var(--pet-900) 0%,rgba(10,44,52,.3) 46%,transparent 74%)}
.pagehero--big h1{font-size:clamp(2.6rem,7vw,5.6rem);max-width:15ch}
.pagehero--big .hero__aurora{opacity:.6}
.pagehero--big .lead{max-width:56ch}
.pagehero__meta{margin-top:clamp(28px,4vh,52px);padding-top:clamp(16px,2.4vh,26px)}
.pagehero--big .scrollcue{left:var(--gut);bottom:26px}
/* Die fünf Reifestufen als Leiter statt als fünf gleiche Spalten */
.rungs{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;counter-reset:r;
display:grid;gap:clamp(12px,1.6vw,18px)}
.rung{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.6vw,38px);align-items:start;
padding:clamp(18px,2.4vw,30px) clamp(20px,2.6vw,34px);
border-radius:clamp(14px,1.6vw,20px);
background:linear-gradient(100deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.rung:hover{transform:translateX(6px);box-shadow:inset 0 0 0 1px rgba(255,122,24,.5)}
.rung__no{font-family:var(--font-display);font-weight:600;line-height:.9;letter-spacing:-.04em;
font-size:clamp(1.9rem,3.4vw,3rem);color:transparent;-webkit-text-stroke:1.5px var(--cta)}
.rung h3{margin:0 0 6px;font-size:clamp(1.1rem,1.7vw,1.5rem);letter-spacing:-.02em;color:#fff;text-transform:none}
.rung p{margin:0;color:rgba(255,255,255,.76);max-width:62ch}
/* Jede Stufe rückt ein Stück weiter ein – die Leiter wird sichtbar */
@media (min-width:861px){
.rung:nth-child(2){margin-left:3%}
.rung:nth-child(3){margin-left:6%}
.rung:nth-child(4){margin-left:9%}
.rung:nth-child(5){margin-left:12%}
}
/* Abgrenzung als Karten mit Kreuz */
.nofit{list-style:none;margin:clamp(34px,4vw,56px) 0 0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(12px,1.6vw,20px)}
.nofit li{position:relative;padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,28px) clamp(20px,2.4vw,30px) clamp(52px,5vw,62px);
border-radius:clamp(14px,1.6vw,20px);background:var(--paper);
box-shadow:inset 0 0 0 1px var(--line),0 24px 50px -40px rgba(36,32,28,.5);
color:var(--fg-2);font-size:clamp(.98rem,1.1vw,1.06rem);line-height:1.5}
.nofit li::before{content:"";position:absolute;left:clamp(20px,2.4vw,26px);top:clamp(22px,2.6vw,32px);
width:16px;height:16px;
background:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
background-size:100% 2px,2px 100%;background-position:center;background-repeat:no-repeat;
color:var(--cta);transform:rotate(45deg)}
/* Abschluss mit Jürgen */
.fmt-cta{overflow:hidden;padding-bottom:0}
.fmt-cta__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
gap:clamp(24px,4vw,70px);align-items:end}
.fmt-cta__cut{margin:0;align-self:end;display:flex;justify-content:flex-end}
.fmt-cta__cut img{display:block;width:100%;max-width:520px;height:auto}
@media (max-width:860px){
.fmt-cta__grid{grid-template-columns:1fr;gap:10px}
.fmt-cta__cut{justify-content:center}
.fmt-cta__cut img{max-width:380px}
}
/* Leiste unter dem Wirksystem: Buchstaben türkis wie im Logo (23.09.) */
.wsx__dots li span{color:var(--acc)!important}
html.has-js .wsx__dots li span{color:var(--acc)!important}
/* ---------- Mobil: Bild immer vor dem Text (23.09.2026) -----------------
Auf dem Handy steht in den zweispaltigen Abschnitten erst das Motiv,
dann der Text – sonst scrollt man an der Überschrift vorbei, bevor
überhaupt ein Bild kommt. */
@media (max-width:900px){
.split--media,.erk__grid,#ansatz .ans__grid,.fmt-cta__grid,.wsx__panel{display:grid}
.split--media .pframe,.split--media .cutout,.split--media figure,
.split--media .band__media,.split--media video,
.erk__grid .erk__cut,.erk__grid .erk__img,
#ansatz .ans__grid .ans__cut,
.fmt-cta__grid .fmt-cta__cut,
.wsx__panel .wsx__media,
.fmt .fmt__media{order:-1}
.split--media > *:not(.pframe):not(.cutout):not(figure),
.erk__grid > .erk__text,
#ansatz .ans__grid > div:first-child,
.fmt-cta__grid > div:first-child,
.wsx__panel .wsx__txt{order:0}
/* Abstand unter dem vorangestellten Bild */
.erk__grid .erk__cut,#ansatz .ans__grid .ans__cut,.fmt-cta__grid .fmt-cta__cut{margin-bottom:clamp(18px,4vw,30px);margin-top:0}
}
/* ---------- Wirksystem: Abschluss mit Aufforderung (23.09.2026) ---------
Unter der Buchstabenleiste war kaum Luft und kein Weg weiter. Jetzt
trennt eine Linie, darunter stehen Aussage und zwei Knöpfe. */
.wsx__cta{margin-top:clamp(28px,4vh,48px);padding-top:clamp(22px,3vh,34px);
border-top:1px solid var(--line);
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:clamp(16px,2.4vw,34px)}
.wsx__cta-text{margin:0;max-width:44ch;color:var(--fg-2);
font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.5}
.wsx__cta-text strong{color:var(--fg);font-weight:600}
.wsx__cta .btn-row{margin:0;flex:0 0 auto}
html.has-js .wsx .stage__pin{padding-bottom:clamp(92px,11vh,150px)}
@media (max-width:900px){
html.has-js .wsx .stage__pin{padding-bottom:clamp(40px,7vw,64px)}
.wsx__cta{margin-top:clamp(24px,5vw,34px)}
}
/* ---------- Hero: Überschrift zuerst, Text scrollt herein (24.09.2026) ---
Ersetzt „Hero ohne Bühne“. Kein position:sticky, keine Zusatzhöhe – die
Seite scrollt durchgehend, nichts hakt. Der erste Bildschirm zeigt nur
die Überschrift (unten im Bild). Absatz, Knopf und Zahlen liegen direkt
darunter und blenden sich über den Scrollweg ein (--ps aus main.js,
data-flow im HTML). --hf = Scrollweg in Fensterhöhen (0..1). */
html.has-js .hero{min-height:0}
html.has-js .hero__pin{position:relative;display:block;height:auto;min-height:0;
padding-top:0;padding-bottom:clamp(64px,9vh,120px)}
html.has-js .hero__media{inset:auto 0;top:-40svh;height:190svh}
html.has-js .hero__inner{transform:none}
.hero__claim{min-height:calc(100svh - clamp(110px,20vh,220px));
display:flex;flex-direction:column;justify-content:flex-end;
padding-top:clamp(118px,15vh,190px)}
html.has-js .hero__step,
html.has-js .hero .hero__late{
opacity:var(--ps,0);
transform:translateY(calc((1 - var(--ps,0)) * 36px));
filter:blur(calc((1 - var(--ps,0)) * 4px));
transition:none}
html.has-js .hero .scrollcue{top:calc(100svh - 52px);bottom:auto;
opacity:calc(1 - var(--hf,0) * 5)}
@media (prefers-reduced-motion:reduce){
html.has-js .hero__step,html.has-js .hero .hero__late{opacity:1;transform:none;filter:none}
}
/* Erkenntnis: CTA zum Ursachen-Check in der dunklen Karte (24.09.2026) */
.erk__hit .erk__cta{margin-top:clamp(20px,2.6vw,28px)}
.erk .erk__hit p.erk__hit-b:first-child{margin-top:0}
.erk .erk__cta{margin-top:clamp(24px,2.6vw,36px)}
/* Wirksystem: Claim kleiner, damit er in zwei Zeilen passt; „Schritt x von 4“ entfernt (24.09.2026) */
.wsx__claim{font-size:clamp(2.1rem,4.9vw,4.3rem);max-width:none;text-wrap:balance}
.wsx__step{display:none}
/* Abschnitts-Kicker („Das Problem“, „Der Beweis“ …): größer und näher an
den Inhalt (24.09.2026). Vorher 1rem / Abstand clamp(20px,2.2vw,32px). */
.eyebrow{font-size:clamp(1.08rem,1.3vw,1.25rem);margin-bottom:clamp(10px,1.1vw,16px)}
.jf-more__side .jf-sig:first-child{margin-top:0}
/* Porträt Jürgen etwas kleiner (24.09.2026). Vorher 126 % der Spalte. */
@media (min-width:901px){
.sec--jf .cutout{margin-top:0}
.sec--jf .cutout__img{width:100%;margin-left:6%}
}
@media (max-width:900px){.sec--jf .cutout{max-width:380px}}
/* Logo im Vollbild-Menü (24.09.2026): oben links, bündig mit der Linkliste,
auf Höhe des Schließen-Kreuzes. */
.menu__brand{position:absolute;z-index:2;top:clamp(26px,3.6vh,40px);
left:max(var(--gut),calc((100% - 1120px) / 2));display:block;line-height:0;
opacity:0;transform:translateY(-6px);transition:opacity .4s var(--ease-soft) .08s,transform .4s var(--ease-soft) .08s}
.menu.is-open .menu__brand{opacity:1;transform:none}
.menu__brand img{height:clamp(40px,4.2vw,56px);width:auto;display:block}
@media (max-width:860px){
.menu__brand{top:20px}
.menu__brand img{height:40px}
.menu{padding-top:92px}
}
/* ---------- Menü: ohne Striche, „Direkt loslegen“ als Kacheln (24.09.2026) ---
Die kurzen Linien vor den Rubriken sind weg. Die drei Handlungspunkte
stehen als eigene Kacheln da: der Ursachen-Check voll in Orange, die
beiden anderen dunkel mit oranger Kante und orangem Pfeilkreis. */
.menu__head::before{content:none}
.menu__col--do{display:flex;flex-direction:column;gap:10px}
.menu__col--do .menu__head{margin-bottom:4px}
.menu__col--do .mlink,
.menu__col--do .mlink:last-child{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center;
padding:clamp(14px,1.4vw,18px) clamp(16px,1.6vw,22px);
border:1px solid rgba(255,122,24,.42);border-radius:6px;
background:rgba(255,255,255,.045)}
.menu__col--do .mlink::after{content:"\2192";position:static;grid-column:2;grid-row:1 / span 2;
width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
background:var(--cta);color:var(--cta-ink);font-size:1.05rem;font-weight:700;
transform:none;transition:transform .35s var(--ease),background .25s}
.menu__col--do .mlink__t{grid-column:1}
.menu__col--do .mlink__t i{display:none}
.menu__col--do .mlink__d{grid-column:1;color:rgba(255,255,255,.66)}
.menu__col--do .mlink:hover{padding-left:clamp(16px,1.6vw,22px);
border-color:var(--cta);background:rgba(255,122,24,.1)}
.menu__col--do .mlink:hover .mlink__t{color:#fff}
.menu__col--do .mlink:hover::after{height:40px;transform:translateX(4px);background:var(--cta-hover)}
/* Hauptaktion: voll orange */
.menu__col--do .mlink:first-of-type{background:var(--cta);border-color:var(--cta)}
.menu__col--do .mlink:first-of-type .mlink__t,
.menu__col--do .mlink:first-of-type:hover .mlink__t{color:var(--cta-ink)}
.menu__col--do .mlink:first-of-type .mlink__d{color:rgba(35,20,10,.78)}
.menu__col--do .mlink:first-of-type::after{background:var(--cta-ink);color:var(--cta)}
.menu__col--do .mlink:first-of-type:hover{background:var(--cta-hover);border-color:var(--cta-hover)}
.menu__col--do .mlink:first-of-type:hover::after{background:var(--cta-ink)}
/* ---------- Erkenntnis mobil (24.09.2026) -------------------------------
Eigenes Motiv (juergen-faust.webp, heller Studiogrund). Das Bild steht
ganz oben – noch vor „Die überraschende Erkenntnis“ –, randlos, und läuft
unten weich in den Grund aus. Der Grund ist hier hell statt orange
angehaucht, damit er zum Foto passt. */
.erk__cut picture{display:contents}
@media (max-width:900px){
.erk{background:linear-gradient(180deg,#FCFBF9 0%,#F1F0EC 40%,#ECEAE5 100%)!important;
padding-top:0}
.erk > .wrap{display:flex;flex-direction:column}
.erk__grid{display:contents}
.erk__grid .erk__cut{order:-2;margin:0 calc(-1 * var(--gut)) clamp(18px,4vw,28px);
display:block;justify-content:initial}
.erk .eyebrow{order:-1}
.erk__grid > .erk__text{order:0;padding-bottom:clamp(56px,12vw,80px)}
.erk__cut img{width:100%;max-width:none;height:auto;margin:0;filter:none;
-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
}
@media (max-width:900px){
.sec.erk{padding-top:clamp(16px,4vw,28px)}
.erk__cut img{
-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 72%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 72%,transparent 100%)}
}
/* „Der Wendepunkt“ höher (24.09.2026). Vorher wie alle Bänder
min-height clamp(420px,64svh,760px), padding clamp(72px,10vw,140px). */
.band--wende{min-height:clamp(540px,84svh,980px);padding-block:clamp(96px,13vw,180px)}
/* Erkenntnis: oranger Lichtfleck oben rechts entfernt, auch am Desktop (24.09.2026) */
.erk{background:linear-gradient(180deg,var(--paper-2) 0%,#EFE9E0 100%)!important}
@media (max-width:900px){
.erk{background:linear-gradient(180deg,#FCFBF9 0%,#F1F0EC 40%,#ECEAE5 100%)!important}
}
/* Erkenntnis: oranger Schlagschatten am Porträt entfernt (24.09.2026) */
.erk__cut img{filter:none}
/* Erkenntnis Desktop: Jürgen höher – das Bild wächst nach oben, unten bleibt es
auf der Kante (24.09.2026). Vorher height clamp(600px,88vh,960px). */
@media (min-width:901px){.erk__cut img{height:clamp(680px,100vh,1100px)}}
/* „Warum e.a.s.i.“ Desktop: Jürgen ebenfalls höher (24.09.2026) */
@media (min-width:901px){.ans__cut img{height:clamp(680px,100vh,1100px)}}
/* Wirksystem Desktop: Der Kicker „Das e.a.s.i.® Wirksystem“ hing direkt
unter der Kopfleiste, weit weg vom Inhalt. Jetzt steht er in jeder Station
direkt über der Wortmarke; der Kicker oben ist am Desktop ausgeblendet.
Mobil bleibt alles wie gehabt (24.09.2026). */
.wsx__kicker{display:none}
@media (min-width:901px){
.wsx__eyebrow{display:none}
.wsx__kicker{display:flex;margin-bottom:clamp(12px,1.6vh,18px)}
.wsx__stack{margin-top:0}
}
/* =====================================================================
Ursachen-Check: Fragenwechsel deutlich machen (2026-09-28)
– Fortschritt als 12 Segmente, große Fragennummer, Auswahl mit Haken,
alte Frage gleitet raus, neue kommt von rechts.
===================================================================== */
.check__bar--steps{height:auto;background:none;overflow:visible;display:grid;
grid-template-columns:repeat(12,1fr);gap:6px;margin-bottom:clamp(28px,3.4vw,42px)}
.check__bar--steps b{display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.16);
transition:background .4s var(--ease),transform .4s var(--ease)}
.check__bar--steps b.is-done{background:var(--cta)}
.check__bar--steps b.is-now{background:rgba(255,255,255,.7);transform:scaleY(1.6)}
.check__num{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;line-height:1}
.check__num b{font-family:var(--font-display);font-weight:600;font-size:clamp(2.6rem,5vw,4rem);
letter-spacing:-.04em;color:var(--cta)}
.check__num span{font-family:var(--font-display);font-weight:600;font-size:.9rem;color:rgba(255,255,255,.45)}
.check__status [data-check-step].is-pulse{animation:ckpulse .6s var(--ease)}
@keyframes ckpulse{0%{opacity:.2;transform:translateY(4px)}100%{opacity:1;transform:none}}
.check__status [data-check-step]{display:inline-block}
/* Auswahl bestätigen: Haken statt Buchstabe, Rest tritt zurück */
.check__opt.is-sel i{font-size:0}
.check__opt.is-sel i::before{content:"✓";font-size:.85rem;font-weight:700}
.is-answered .check__opt:not(.is-sel){opacity:.35;transition:opacity .25s}
.is-answered .check__opt{pointer-events:none}
.check__opt.is-sel{transform:translateX(6px)}
/* Wechsel */
.check__fade--next{animation:cknext .42s var(--ease) both}
.check__fade--prev{animation:ckprev .42s var(--ease) both}
.check__fade.is-out{animation:ckout .26s ease-in both}
.check__fade.is-out-prev{animation:ckoutprev .26s ease-in both}
@keyframes cknext{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes ckprev{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
@keyframes ckout{to{opacity:0;transform:translateX(-48px)}}
@keyframes ckoutprev{to{opacity:0;transform:translateX(48px)}}
[data-check-stage]{overflow-x:clip;margin-right:-10px;padding-right:10px}
@media (prefers-reduced-motion:reduce){
.check__fade--next,.check__fade--prev,.check__fade.is-out,.check__fade.is-out-prev{animation:none}
}
/* Kein „Schein-Vorauswahl“ durch Hover nach dem Fragenwechsel bzw. auf Touch-Geräten */
.is-fresh .check__opt:not(.is-sel):hover{border-color:rgba(255,255,255,.22);background:transparent;transform:none}
.is-fresh .check__opt:not(.is-sel):hover i{border-color:rgba(255,255,255,.32);color:rgba(255,255,255,.62);background:transparent}
@media (hover:none){
.check__opt:not(.is-sel):hover{border-color:rgba(255,255,255,.22);background:transparent;transform:none}
.check__opt:not(.is-sel):hover i{border-color:rgba(255,255,255,.32);color:rgba(255,255,255,.62);background:transparent}
}
/* ---------- Handy: Seite darf nicht breiter als der Bildschirm sein (01.10.2026)
Die Buchstabenleiste e · a · s · i und die beiden Knöpfe darunter waren
auf dem iPhone breiter als der Bildschirm. Folge: Ein Wisch zur Seite
verschob die ganze Seite statt des Karussells. Jetzt passt beides in die
Breite, und als Sicherung kann die Seite seitlich nicht mehr wackeln. */
@media (max-width:900px){
html,body{overflow-x:clip}
.wsx__cta .btn-row{flex:1 1 auto;min-width:0;max-width:100%}
.wsx__cta .btn-row .btn{max-width:100%}
}
@media (max-width:560px){
.wsx__dots{display:grid;grid-template-columns:repeat(2,max-content);
justify-content:start;column-gap:clamp(22px,8vw,40px);row-gap:6px}
.wsx__dots li{font-size:1rem;padding-bottom:8px}
}
/* ---------- Wirksystem auf Handy und Tablet als Bühne (01.10.2026) -------
Wie am Desktop: Die Bühne hält, beim Weiterscrollen wechseln die Platten
von selbst, seitliches Wischen geht zusätzlich. Damit Platte, Text und
Leiste in den Bildschirm passen, wird alles kompakter gesetzt.
svh = sichtbare Höhe ohne die Leisten des Handy-Browsers. */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
html.has-js .wsx .stage__pin{min-height:100svh;align-items:flex-start;
padding-top:calc(var(--header-h,72px) + 14px);padding-bottom:14px}
.wsx__eyebrow{margin-bottom:0}
html.has-js .wsx__stack{margin-top:10px;padding-block:14px 30px;
margin-block:0 -30px}
html.has-js .wsx__track{gap:20px}
html.has-js .wsx__panel,.wsx__panel{flex:0 0 100%;
grid-template-columns:1fr;gap:14px;min-height:0;align-items:start}
.wsx__media{aspect-ratio:auto;height:min(32svh,58vw);order:-1}
.wsx__word{margin:0}
.wsx__claim{font-size:clamp(1.7rem,7.6vw,2.7rem);max-width:none}
.wsx__lead{margin-top:8px;font-size:clamp(.98rem,4vw,1.2rem);line-height:1.4;max-width:40ch}
.wsx__dots{margin-top:12px}
.wsx__cta{margin-top:16px;padding-top:14px}
}
/* ---------- Wirksystem: echte Überschrift statt Kicker (01.10.2026) -------
„Das e.a.s.i.® Wirksystem“ steht jetzt einmal als Überschrift über dem
Band – auf allen Bildschirmen. Die kleinen Kicker in den Platten entfallen. */
.wsx__title{margin:0;font-size:clamp(1.9rem,3.4vw,3.2rem);line-height:1.04;
letter-spacing:-.03em;color:var(--fg)}
.wsx__title .acc{color:var(--acc)}
.wsx__kicker,.wsx .wsx__kicker{display:none!important}
html.has-js .wsx__stack{margin-top:clamp(14px,2.4vh,30px)}
@media (min-width:901px){
/* Abstand zur Kopfleiste, Platte so hoch, dass Leiste und Text auch auf
niedrigen Laptop-Bildschirmen im Bild bleiben */
html.has-js .wsx .stage__pin{padding-top:calc(var(--header-h,76px) + 30px);
align-items:flex-start}
.wsx__panel{min-height:0}
.wsx__media{aspect-ratio:auto;height:min(52vh,580px)}
html.has-js .wsx__stack{padding-block:24px 140px;margin-block:4px -140px}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
.wsx__title{font-size:clamp(1.55rem,6.4vw,2.2rem)}
html.has-js .wsx__stack{margin-top:8px}
}
/* ---------- Leseprobe im Buch-Abschnitt (01.10.2026) -------------------- */
.leseprobe{margin:clamp(24px,3vw,36px) 0 0;padding:clamp(22px,2.6vw,34px) clamp(22px,2.8vw,38px);
border-left:3px solid var(--acc);border-radius:0 18px 18px 0;
background:color-mix(in srgb,var(--fg) 4%,transparent);
font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.6;color:var(--fg-2)}
.leseprobe p{margin:0}
.leseprobe p+p{margin-top:14px}
.leseprobe__k{font-family:var(--font-display);font-weight:600;font-size:.8rem;
letter-spacing:.01em;color:var(--acc)!important;margin-bottom:14px!important}
.leseprobe em{font-style:normal;font-weight:600;color:var(--fg)}
/* ---------- „Kein Seminar. Eine Entscheidung.“ – die Antwort darunter (01.10.2026)
Kleiner als die Überschrift, aber deutlich als dritte Zeile lesbar. */
.claim-sub{margin:clamp(14px,1.6vw,24px) 0 0;font-family:var(--font-display);
font-weight:600;font-size:clamp(1.6rem,3.6vw,3.2rem);line-height:1.08;
letter-spacing:-.025em;color:var(--fg)}
/* Auf der Startseite steht die Antwort als dritte Zeile links unter der
Überschrift – nicht mehr als schmale Spalte rechts. */
.angebot__lead{max-width:none;margin:clamp(14px,1.8vw,26px) 0 0}
.angebot .claim-sub{margin:0;color:#fff;font-size:clamp(1.7rem,4.2vw,4rem)}
/* ---------- Symptom- und Zielkacheln als Infoschilder (01.10.2026) -------
Vorher sahen die Kacheln aus wie Knöpfe (Rahmen, Schatten, Anheben beim
Überfahren) – man wollte klicken und traute sich nicht. Jetzt: keine
Box, kein Hover-Effekt. Eine Haarlinie oben, ein kurzer farbiger Balken
als Markierung, das Symbol frei davor. Lesen statt klicken. */
.symcard{background:transparent;border:0;border-top:1px solid var(--line);
border-radius:0;box-shadow:none;overflow:visible;
padding:clamp(22px,2.2vw,28px) clamp(4px,.6vw,10px) 0 0;transition:none;cursor:default}
.symcard::after{display:none}
.symcard::before{width:44px;height:3px;top:-2px;transform:none;transition:none;
background:var(--acc-on)}
.symcard:hover{transform:none;border-color:var(--line);box-shadow:none}
.symcard__ico{width:auto;height:auto;aspect-ratio:auto;display:block;
background:none;box-shadow:none;border-radius:0;transition:none;
margin-bottom:clamp(12px,1.4vw,16px);align-self:flex-start}
.symcard:hover .symcard__ico{transform:none;background:none}
.symcard__ico svg{width:36px;height:36px;stroke-width:1.6;display:block}
.symcards{row-gap:clamp(30px,3.4vw,46px);column-gap:clamp(28px,3vw,48px)}
@media (max-width:620px){
.symcard{padding:18px 0 0;gap:16px}
.symcard__ico{width:auto}
.symcard__ico svg{width:30px;height:30px}
}
/* ---------- Ursachen-Check: der größte Hebel im Ergebnis (01.10.2026) ---- */
.check__hebel{padding:clamp(18px,2vw,24px) clamp(18px,2.2vw,26px);border-radius:16px;
border-left:3px solid var(--cta);background:rgba(255,255,255,.06);max-width:60ch}
.check__hebel+.check__hebel{margin-top:12px}
.check__hebel-k{margin:0 0 6px;font-family:var(--font-display);font-weight:600;font-size:.78rem;
letter-spacing:.02em;color:var(--cta)}
.check__hebel h4{margin:0 0 8px;font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.02em;color:#fff}
.check__hebel p:last-child{margin:0}
/* ---------- Ursachen-Check: Fortschritt in fünf Gruppen (01.10.2026) -----
Vorher 15 Einzelstriche in einem Raster für 12 – das brach um. Jetzt
eine Zeile mit fünf Gruppen (je Kompetenzbereich drei Striche), darunter
der Kurzname. Die aktuelle Gruppe ist hervorgehoben. */
.check__bar--steps{display:flex;flex-wrap:nowrap;gap:clamp(8px,1.4vw,16px);
grid-template-columns:none}
.check__grp{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px}
.check__segs{display:flex;gap:4px}
.check__segs b{flex:1 1 0;min-width:0}
.check__grp em{font-style:normal;font-family:var(--font-display);font-weight:600;
font-size:clamp(.62rem,1vw,.74rem);letter-spacing:.01em;color:rgba(255,255,255,.38);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.check__grp.is-cur em{color:#fff}
@media (max-width:480px){.check__grp em{display:none}}
/* Referenzen: Initialen statt Foto, wo keins vorliegt (01.10.2026) */
.quote__ini{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
font-family:var(--font-display);font-weight:600;font-size:.9rem;letter-spacing:.02em;
color:var(--acc-bright);background:rgba(95,224,236,.12);box-shadow:inset 0 0 0 1px rgba(95,224,236,.3)}
/* Ursachen-Check: zweite Zeile der Überschrift in Türkis wie überall sonst,
statt Weiß – das Fragezeichen bleibt orange (01.10.2026) */
.check .hsplit__down .h-xl{color:var(--acc-bright,#5FE0EC)}
/* ==========================================================================
Angebot als Bühne (01.10.2026)
Die Leiste hält beim Scrollen an; die vier Angebote öffnen sich
nacheinander (main.js, „Angebot-Leiste“). Die Klasse .is-staged setzt
main.js – ohne sie (keine Bewegung gewünscht) bleibt alles wie bisher.
========================================================================== */
.angebot:not(.is-staged) .ang-stage{min-height:0!important}
.angebot:not(.is-staged) .ang-pin{position:static;min-height:0;padding:0;display:block}
html.has-js .angebot.is-staged .ang-pin{height:100vh;height:100svh;min-height:0;box-sizing:border-box;
padding:clamp(92px,12vh,124px) 0 clamp(18px,4vh,40px);align-items:center}
.angebot.is-staged .formats--rail{width:100%}
.angebot.is-staged .angebot__cta{margin-top:clamp(28px,5vh,56px)}
@media (min-width:1000px){
.angebot.is-staged .formats--rail{height:100%;max-height:820px}
}
/* Handy/Tablet: Bahnen untereinander – geschlossen eine schmale Leiste mit
Ziffer und Namen, offen das volle Angebot. */
@media (max-width:999px){
.angebot.is-staged .formats--rail{display:flex;flex-direction:column;gap:8px;height:100%}
.angebot.is-staged .formats--rail .format{flex:1 1 0;min-height:0;
transition:flex-grow .75s var(--ease),border-color .4s}
.angebot.is-staged .formats--rail .format.is-active{flex-grow:7;border-color:rgba(255,122,24,.55)}
.angebot.is-staged .formats--rail .format:hover{transform:none}
.angebot.is-staged .formats--rail .format__body > *:not(.format__top){
opacity:0;transform:translateY(16px);transition:opacity .3s var(--ease),transform .45s var(--ease)}
.angebot.is-staged .formats--rail .format.is-active .format__body > *:not(.format__top){
opacity:1;transform:none;transition-delay:.3s}
.angebot.is-staged .formats--rail .format__top{transition:top .5s var(--ease)}
.angebot.is-staged .formats--rail .format:not(.is-active) .format__top{top:50%;transform:translateY(-50%)}
.angebot.is-staged .formats--rail .format__no{font-size:1.9rem;font-weight:700;line-height:1;
color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.6)}
.angebot.is-staged .formats--rail .format.is-active .format__no{color:var(--cta);-webkit-text-stroke-color:var(--cta)}
.angebot.is-staged .formats--rail .format__meta{opacity:0;transition:opacity .3s}
.angebot.is-staged .formats--rail .format.is-active .format__meta{opacity:1;transition-delay:.35s}
.angebot.is-staged .formats--rail .format__vert{display:block;position:absolute;z-index:1;
left:calc(clamp(28px,3.2vw,48px) + 3.2rem);top:50%;transform:translateY(-50%);
font-family:var(--font-display);font-weight:700;font-size:1.2rem;letter-spacing:-.01em;
color:#fff;white-space:nowrap;transition:opacity .3s var(--ease)}
.angebot.is-staged .formats--rail .format.is-active .format__vert{opacity:0}
.angebot.is-staged .formats--rail .format__bg img{filter:grayscale(1) contrast(1.1) brightness(.5);opacity:1}
.angebot.is-staged .formats--rail .format.is-active .format__bg img{filter:grayscale(.2) brightness(.9)}
.angebot.is-staged .formats--rail .format__claim{font-size:clamp(1.7rem,7vw,2.4rem)}
.angebot.is-staged .formats--rail .format__body{padding:22px 22px 20px}
.angebot.is-staged .formats--rail .format__go{padding-top:14px}
}
@media (max-width:999px){
html.has-js .angebot.is-staged .ang-pin{padding:84px 0 86px}
.angebot.is-staged .formats--rail .format__body{position:absolute;inset:0;
display:flex;flex-direction:column;justify-content:flex-end}
.angebot.is-staged .formats--rail .format__top{left:22px;right:22px;top:20px}
}
/* Nachtrag: Leiste füllt die Bühne genau aus (fünf Bahnen) */
@media (max-width:999px){
html.has-js .angebot.is-staged .ang-pin{flex-direction:column;align-items:stretch}
.angebot.is-staged .formats--rail{flex:1 1 0;min-height:0;height:auto}
}
/* Nachtrag: feste schmale Leisten, die offene Bahn nimmt den Rest.
Auf niedrigen Bildschirmen ohne Beschreibungstext – Aussage, Name und
„Details“ reichen; der volle Text steht auf der Angebotsseite. */
@media (max-width:999px){
.angebot.is-staged .formats--rail{margin-top:0}
.angebot.is-staged .formats--rail .format{flex:0 0 46px;transition:flex-grow .75s var(--ease),border-color .4s}
.angebot.is-staged .formats--rail .format.is-active{flex-grow:1}
.angebot.is-staged .formats--rail .format__no{font-size:1.6rem}
.angebot.is-staged .formats--rail .format__vert{font-size:1.08rem;left:calc(22px + 2.9rem)}
.angebot.is-staged .formats--rail .format p:not(.format__claim){font-size:.92rem;line-height:1.45}
}
@media (max-width:999px) and (max-height:799px){
.angebot.is-staged .formats--rail .format p:not(.format__claim){display:none}
}
@media (max-width:999px) and (max-height:620px){
html.has-js .angebot.is-staged .ang-pin{padding-top:76px;padding-bottom:80px}
.angebot.is-staged .formats--rail{gap:6px}
.angebot.is-staged .formats--rail .format{flex-basis:36px}
.angebot.is-staged .formats--rail .format__no{font-size:1.3rem}
.angebot.is-staged .formats--rail .format__vert{font-size:.98rem;left:calc(22px + 2.4rem)}
.angebot.is-staged .formats--rail .format h3,
.angebot.is-staged .formats--rail .format__meta{display:none}
.angebot.is-staged .formats--rail .format__top{top:14px}
.angebot.is-staged .formats--rail .format__claim{font-size:1.6rem}
}
/* Rückfrage beim Antippen eines Angebots (01.10.2026) */
.angebot .ang-pin{position:relative}
.angebot:not(.is-staged) .ang-pin{position:relative}
.ang-ask{position:absolute;z-index:6;box-sizing:border-box;
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;
padding:clamp(22px,3vw,48px);border-radius:var(--r-card,18px);
background:rgba(6,34,42,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border:1px solid rgba(255,122,24,.55);color:#fff;
opacity:0;transform:scale(.98);transition:opacity .22s ease,transform .22s ease}
.ang-ask.is-on{opacity:1;transform:none}
.ang-ask[hidden]{display:none}
.ang-ask__name{margin:0;font-family:var(--font-display);font-weight:600;font-size:.74rem;
letter-spacing:.14em;text-transform:uppercase;color:var(--cta)}
.ang-ask__q{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.2;
font-size:clamp(1.25rem,2vw,1.9rem);color:#fff}
.ang-ask__q--2{margin-top:10px;font-size:clamp(1rem,1.3vw,1.2rem);font-weight:500;color:rgba(255,255,255,.82)}
.ang-ask .btn{margin:0}
.ang-ask .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55);background:transparent}
.ang-ask .btn--ghost:hover{border-color:#fff}
@media (max-height:620px){
.ang-ask{gap:8px;padding:16px 20px}
.ang-ask__q{font-size:1.1rem}
.ang-ask__q--2{margin-top:4px;font-size:.92rem}
.ang-ask__name{display:none}
}
/* ==========================================================================
Orientierung (01.10.2026): Unterseiten zeigen in der Kopfleiste, wo man
ist, und führen mit „← Startseite“ dorthin zurück, wo man war.
========================================================================== */
.bar__where{display:flex;align-items:center;gap:16px;min-width:0}
.bar__back{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
font-family:var(--font-display);font-weight:600;font-size:.92rem;color:#fff;text-decoration:none;
padding:9px 16px;border:1px solid rgba(255,255,255,.35);border-radius:999px;
transition:border-color .25s,background .25s,color .25s}
.bar__back:hover{border-color:var(--cta);background:rgba(255,122,24,.12)}
.bar__back span{color:var(--cta);font-size:1.05em}
.bar__here{font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:#fff;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
padding-left:16px;border-left:1px solid rgba(255,255,255,.25)}
@media (max-width:720px){
.bar__where{gap:10px}
.bar__back{padding:7px 12px;font-size:.84rem}
.bar__here{display:none}
}
@media (max-width:360px){ .bar__back{padding:6px 10px;font-size:.78rem} }
.backstrip{padding-block:clamp(48px,7vw,84px)}
.backstrip__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.backstrip__t{margin:6px 0 0;font-family:var(--font-display);font-weight:600;
font-size:clamp(1.4rem,2.6vw,2.2rem);letter-spacing:-.02em;line-height:1.15}
/* Menü: aktuelle Seite markieren */
.mlink.is-current .mlink__t{color:var(--cta)}
.mlink.is-current .mlink__t::after{content:"Sie sind hier";margin-left:12px;vertical-align:middle;
font-family:var(--font-body,inherit);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
padding:3px 9px;border-radius:999px;background:rgba(255,122,24,.16);color:var(--cta)}
/* Rückfrage: zwei Knöpfe untereinander, gleiche Breite */
.ang-ask{gap:14px}
.ang-ask__name{margin-bottom:6px}
.ang-ask .btn{width:100%;max-width:420px;justify-content:center;text-align:center;white-space:normal;line-height:1.3}
/* ---------- Kontakt mobil (02.10.2026) ----------------------------------
Auf dem Handy stehen Überschrift und kurzer Einstieg über dem Formular,
die Kontaktdaten erst darunter. So sieht man nach dem Antippen von
„Anfrage“ sofort die Eingabefelder statt einer Bildschirmseite Adressen. */
.contact-info--mobile{display:none}
@media (max-width:900px){
.contact-info--desk{display:none}
.contact-info--mobile{display:grid}
#kontakt .lead + .lead{margin-top:10px}
}
/* ---------- Wissensartikel (02.10.2026) ---------------------------------
Übernommene Fachtexte der alten Seite (Führungsstile, Blog). Lesbar,
ruhig, mit „Kurz gesagt“ oben – das lesen Menschen und KI-Suchen zuerst. */
.article__meta{font-size:.86rem;color:var(--fg-3,#6b7674);margin:0 0 28px}
.article__meta a{color:inherit}
.article__kurz,.article__toc,.article__weiter{border:1px solid var(--line);border-radius:14px;
padding:clamp(18px,2.4vw,28px) clamp(20px,2.8vw,32px);margin:0 0 30px;background:rgba(255,255,255,.55)}
.article__kurz{border-left:4px solid var(--acc-on)}
.article__kurz p:last-child{margin-bottom:0}
.article__kurz-t{font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--acc-on);margin:0 0 10px}
.article__toc ol{margin:0;padding-left:22px}
.article__toc li{margin-bottom:6px}
.article__weiter{margin-top:48px}
.article__weiter ul{margin:0}
.article h2{scroll-margin-top:110px}
.article p{line-height:1.7}
#fragen .faq__list{border-top:1px solid var(--line)}
.article__video a{display:flex;gap:16px;align-items:center;text-decoration:none;border:1px solid var(--line);
border-radius:14px;padding:16px 20px;background:rgba(255,255,255,.55);color:var(--fg)}
.article__video a:hover{border-color:var(--acc-on)}
.article__video-i{flex:0 0 46px;height:46px;border-radius:50%;display:grid;place-items:center;
background:var(--cta);color:#fff;font-size:1rem}
.article__video small{color:var(--fg-2)}
.article blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--acc-on);
font-size:1.12rem;line-height:1.55;color:var(--fg)}
.article__karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0 30px;padding:0;list-style:none}
.article__karten li{margin:0}
.article__karten a{display:block;height:100%;text-decoration:none;border:1px solid var(--line);border-radius:14px;
padding:18px 20px;background:rgba(255,255,255,.55);color:var(--fg)}
.article__karten a:hover{border-color:var(--acc-on)}
.article__karten b{display:block;font-family:var(--font-display);margin-bottom:6px}
.article__karten span{color:var(--fg-2);font-size:.95rem}
.article__table{margin:22px 0 30px;overflow-x:auto}
.article__table table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.article__table th,.article__table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:center}
.article__table th:first-child,.article__table td:first-child{text-align:left}
.article__table thead th{font-family:var(--font-display);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.article__table .tab-sep th{text-align:left;font-size:.78rem;color:var(--acc-on);padding-top:18px;letter-spacing:.1em;text-transform:uppercase}
.tab-xx,.tab-x{color:var(--cta);letter-spacing:2px}
.article__table-note{font-size:.84rem;color:var(--fg-2);margin-top:10px}
.article__quelle{font-size:.86rem;color:var(--fg-2);margin-top:30px}
.article__details{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:22px 0 26px}
.article__details>div{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:rgba(255,255,255,.55)}
.article__details ul{margin:0;padding-left:18px}
.prose ul.article__karten{list-style:none;padding-left:0}
.prose ul.article__karten li{margin:0}
/* =====================================================================
UMBAU NACH DEM GESPRÄCH JÜRGEN / MARTINA (14.10.2026)
===================================================================== */
/* Abschnittsüberschriften („Das Problem“, „Warum e.a.s.i.“ …) besser
lesbar: nicht mehr grau, etwas größer, mit kurzem Akzentstrich. Bleiben
deutlich kleiner als die großen Headlines – Gedankenanker, keine
Konkurrenz. Vorher: Opazität .58, clamp(1.08rem,1.3vw,1.25rem). */
.eyebrow{font-size:clamp(1.14rem,1.45vw,1.38rem);font-weight:600}
.eyebrow span:last-child{opacity:.92}
/* Strich überall in Orange (Wunsch Jürgen 14.10.2026) – nicht je Abschnitt wechselnd */
.eyebrow .eyebrow__line,.sec--ember .eyebrow .eyebrow__line,.band .eyebrow .eyebrow__line{
display:block;width:26px;height:2px;border-radius:2px;background:var(--cta)!important;flex:0 0 auto}
/* KI-Kennzeichnung an Bildern, die mit KI bearbeitet wurden. Muss sichtbar
bleiben – nicht ausblenden, nicht entfernen. */
.ki-hint{position:absolute;right:12px;bottom:12px;z-index:3;
padding:5px 10px;border-radius:999px;
background:rgba(6,31,37,.72);color:#fff;
font-family:var(--font-display);font-weight:600;font-size:.7rem;letter-spacing:.01em;
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
/* „Was kostet Sie das im Jahr?“ – Zwischenüberschrift vor der Wirkkette */
.kost__q{font-family:var(--font-display);font-weight:600;
font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.05;letter-spacing:-.03em;
color:var(--acc-bright);margin:clamp(48px,6vw,84px) 0 clamp(4px,1vw,12px);max-width:none}
/* Die vier Schritte des Wirksystems als schlanke Reihe (Warum e.a.s.i.) */
.esteps{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.esteps li{padding:14px 16px;border:1px solid rgba(255,255,255,.16);border-radius:12px;
background:rgba(255,255,255,.04);font-family:var(--font-display);line-height:1.2}
.esteps b{color:var(--cta);font-weight:700;font-size:1.25em}
.esteps__w{font-weight:600;color:#fff}
.esteps__c{display:block;margin-top:6px;font-size:.92rem;font-weight:500;color:rgba(255,255,255,.72)}
@media (max-width:359px){.esteps{grid-template-columns:1fr}}
@media (max-width:520px){.esteps li{padding:12px 12px}.esteps__c{font-size:.84rem}}
/* Downloads: Art des Dokuments gut sichtbar über dem Titel */
.dl__type{font-size:.82rem;color:var(--acc-on);margin-bottom:10px}
/* Menü: zweite Gruppe „Weiterführend“ */
.menu__head--2{margin-top:clamp(26px,3.2vh,40px)}
/* Kontakt: Formular direkt unter der Überschrift, ohne Fließtext */
#kontakt .split > div:first-child:not(:has(p)){align-self:start}
/* Team-Seite */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
gap:clamp(18px,2vw,28px);margin-top:clamp(36px,4vw,56px)}
.team__card{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-card);
overflow:hidden;display:flex;flex-direction:column}
.team__img{aspect-ratio:4/5;overflow:hidden;background:var(--pet-900)}
.team__img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.team__body{padding:clamp(22px,2.4vw,30px)}
.team__body h3{font-size:1.25rem;letter-spacing:-.015em;margin:0 0 4px}
.team__role{font-family:var(--font-display);font-weight:600;font-size:.82rem;
color:var(--acc-on);margin:0 0 14px!important}
.team__body p{font-size:.98rem;line-height:1.55;margin:0}
.team__quote{margin-top:14px!important;font-style:italic}
.team__card--lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.team__card--lead .team__img{aspect-ratio:auto;position:relative;min-height:360px}
.team__card--lead .team__img img{position:absolute;inset:0}
@media (max-width:760px){.team__card--lead{grid-template-columns:1fr}
.team__card--lead .team__img{aspect-ratio:4/5}}
/* Wirksystem-Seite: Kundenstimmen */
.voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
gap:clamp(16px,1.8vw,24px);margin-top:clamp(30px,3.4vw,48px)}
.voice{margin:0;padding:clamp(24px,2.6vw,32px);border:1px solid var(--line);
border-radius:var(--r-card);background:var(--surface)}
.voice blockquote{margin:0;font-size:1.05rem;line-height:1.5;color:var(--fg)}
.voice figcaption{margin-top:14px;font-size:.88rem;color:var(--fg-3)}
/* Fußzeile: Slogan statt „was wir tun“ (14.10.2026) */
.site-footer .foot-slogan{font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,1.4vw,1.25rem);
line-height:1.35;letter-spacing:-.01em;color:#fff;max-width:30ch;margin:0}
/* Downloads: Vorschau der Titelseite (14.10.2026) */
.dl__prev{margin:calc(-1*clamp(30px,3.2vw,38px)) calc(-1*clamp(30px,3.2vw,38px)) 24px;
aspect-ratio:7/5;overflow:hidden;border-radius:var(--r-card) var(--r-card) 0 0;background:var(--pet-900)}
.dl__prev img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;
transition:transform .6s var(--ease)}
.dl:hover .dl__prev img{transform:scale(1.03)}
/* e.a.s.i. – wie easy (14.10.2026) */
.easy__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
@media (max-width:900px){.easy__grid{grid-template-columns:1fr}.easy__img{order:-1}}
.easy__img{margin:0}
.easy__img .pframe{aspect-ratio:3/2}
.easy__voice{margin:clamp(26px,3vw,36px) 0 0;padding:18px 22px;border-left:3px solid var(--cta);
background:rgba(255,122,24,.07);border-radius:0 12px 12px 0}
.easy__voice blockquote{margin:0;font-family:var(--font-display);font-weight:500;font-size:1.08rem;line-height:1.45;color:var(--fg)}
.easy__voice figcaption{margin-top:8px;font-size:.85rem;color:var(--fg-3)}
/* Downloads: Kachel mit aufgefächertem Dokument + Vorschau-Fenster (14.10.2026) */
button.dl__prev{display:block;width:calc(100% + 2*clamp(30px,3.2vw,38px));border:0;padding:0;cursor:zoom-in;
position:relative;background:#ECF1EF;aspect-ratio:1200/860}
button.dl__prev img{object-position:50% 50%}
.dl__prev-tag{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
padding:7px 14px;border-radius:999px;background:rgba(10,44,52,.86);color:#fff;
font-family:var(--font-display);font-weight:600;font-size:.8rem;white-space:nowrap;
transition:background .25s}
button.dl__prev:hover .dl__prev-tag,button.dl__prev:focus-visible .dl__prev-tag{background:var(--cta);color:#1a0d02}
.dl__type{color:var(--fg-2)}
.dlprev{width:min(760px,94vw);max-height:92vh;padding:0;border:0;border-radius:18px;overflow:hidden;
background:#F6F9F8;color:var(--ink);box-shadow:0 40px 120px -30px rgba(4,22,27,.7)}
.dlprev[open]{display:flex;flex-direction:column}
.dlprev::backdrop{background:rgba(4,22,27,.72);backdrop-filter:blur(3px)}
.dlprev__head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
padding:20px 24px 14px;border-bottom:1px solid rgba(10,44,52,.12)}
.dlprev__type{margin:0 0 4px;font-family:var(--font-display);font-weight:600;font-size:.82rem;color:var(--ink-soft)}
.dlprev__head h3{margin:0;font-size:1.25rem;letter-spacing:-.015em;line-height:1.2}
.dlprev__close{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid rgba(10,44,52,.2);
background:#fff;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink)}
.dlprev__pages{overflow-y:auto;padding:20px 24px;display:grid;gap:18px;background:#E4EAE8}
.dlprev__pages img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 10px 30px -14px rgba(10,44,52,.45);background:#fff}
.dlprev__pages img.is-fade{-webkit-mask-image:linear-gradient(#000 0,#000 25%,transparent 60%);
mask-image:linear-gradient(#000 0,#000 25%,transparent 60%);margin-bottom:-35%}
.dlprev__foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;
padding:16px 24px;border-top:1px solid rgba(10,44,52,.12);background:#F6F9F8}
.dlprev__foot p{margin:0;font-size:.95rem;color:var(--ink-soft)}