/* ============================================================
FREIGHT — shared stylesheet (home + all subpages)
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ---- Neue Haas Grotesk Display (Rogalsky brand font) ---- */
@font-face{font-family:"Neue Haas Grotesk Display";src:url("fonts/NeueHaasDisplay-Roman.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Display";src:url("fonts/NeueHaasDisplay-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Display";src:url("fonts/NeueHaasDisplay-Bold.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
:root{
--bg:#f3f4f6;
--ink:#111213; /* Brandbook 2.1: Tinte */
--ink-soft:#2A2C2E; /* Brandbook 2.1: Graphit */
--white:#ffffff;
--accent:#E85002; /* Rogalsky Branding Orange (Flächen) */
--accent-ink:#C43D00; /* dunkleres Orange für Text/Flächen mit Schrift – AA 5,2:1 */
--black:#000000;
--gray:#5E6266; /* Brandbook 2.1: Stahl, für Lesbarkeit (AA) leicht abgedunkelt */
--gray-lt:#BABEC1; /* Brandbook 2.1: Beton */
--line:rgba(0,0,0,.12);
--line-light:rgba(255,255,255,.22);
--pad:32px;
--maxw:1216px;
--ease:cubic-bezier(.22,1,.36,1);
--mono:"Fragment Mono",ui-monospace,monospace;
--sans:"Neue Haas Grotesk Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:auto;overflow-x:hidden;overflow-x:clip}
/* interactive elements → pointer cursor (parity with original) */
a,button,[role=button],.circle,.filter,.nav__burger,.menu__close,.job,.hero__price .buy,label{cursor:pointer}
/* button reset (parity mit Framer/Original: chromlose Buttons, kein UA-Grau) */
button{font:inherit;color:inherit;background:transparent;border:0;-webkit-appearance:none;appearance:none}
body{font-family:var(--sans);background:var(--bg);color:var(--ink-soft);overflow-x:hidden;overflow-x:clip;line-height:1.4}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-family:var(--mono);font-size:12px;line-height:1;letter-spacing:.02em;text-transform:uppercase}
/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(14px);filter:blur(3px);transition:opacity .45s var(--ease),transform .45s var(--ease),filter .45s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}
.reveal.d3{transition-delay:.18s}.reveal.d4{transition-delay:.24s}.reveal.d5{transition-delay:.30s}
/* LCP-Schutz: die wichtigste Above-the-fold-Überschrift nie aus dem Nichts einblenden */
.hero h1.reveal,.subhero h1.reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
.marquee__track,.ticker__track{animation:none!important}
.svc__img img,.card__img img,.member__img img{transition:none!important;transform:none!important}
.svc:hover .svc__img img,.card:hover .card__img img,.member:hover .member__img img{transform:none!important}
html{scroll-behavior:auto}
}
/* ---- sichtbarer Tastatur-Fokus (adaptiv über currentColor) ---- */
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.menu__btn--primary:focus-visible{outline-color:#fff;outline-offset:2px}
/* Auf orangen/dunklen Flächen currentColor(=weiß) durch dunkles Ink ersetzen (Kontrast) */
.btn-accent:focus-visible,.prc__next:focus-visible,.prc__submit:focus-visible,.prc__btn--p:focus-visible{outline-color:#0a0a0a}
.nav__burger:focus-visible,.menu__close:focus-visible{outline-offset:6px}
/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:24px var(--pad);color:#fff;transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),filter .22s var(--ease)}
/* Über dem Header: festes Weiß + weicher dunkler Halo statt mix-blend-difference.
Difference kippte über hellen Videostellen (z. B. Bäume) und ließ Teile der Wortmarke
verschwinden — der drop-shadow hält Logo/Links immer lesbar, egal was im Video läuft. */
.nav:not(.nav--solid){filter:drop-shadow(0 1px 14px rgba(0,0,0,.5))}
/* nach dem Hero: solide, lesbare Leiste (kein Halo mehr nötig) */
.nav--solid{color:var(--ink);background:rgba(243,244,246,.82);filter:none;
-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
border-bottom:1px solid var(--line)}
.nav__logo{display:block;width:158px;height:15px;background:currentColor;-webkit-mask:url("brand/rogalsky-wordmark.svg") no-repeat left center/contain;mask:url("brand/rogalsky-wordmark.svg") no-repeat left center/contain}
.nav__burger{display:flex;flex-direction:column;gap:5px;cursor:pointer}
.nav__burger span{display:block;width:22px;height:1.5px;background:currentColor}
.nav__cta{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
/* mobile menu */
/* ---- Vollbild-Menü (hell, Referenz-Layout: 2 Spalten + Kontakt + Fuß) ---- */
.menu{position:fixed;inset:0;z-index:80;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;padding:22px var(--pad) 0;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease);overflow-y:auto}
.menu.open{opacity:1;pointer-events:auto;transform:none}
.menu__bar{display:flex;align-items:center;justify-content:space-between;height:40px;flex:0 0 auto}
/* Menü-Wortmarke = echtes Logo (SVG-Maske), nicht Text */
.menu__brand{display:block;width:150px;height:15px;background:var(--ink);
-webkit-mask:url("brand/rogalsky-wordmark.svg") no-repeat left center/contain;
mask:url("brand/rogalsky-wordmark.svg") no-repeat left center/contain}
.menu__barcta{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}
.menu__close{font-size:28px;line-height:1;color:var(--ink);cursor:pointer;user-select:none}
.menu__main{flex:1 1 auto;display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center;padding:40px 0}
.menu__label{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.02em;color:var(--gray);display:block;margin-bottom:28px}
.menu__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:70px;row-gap:2px}
.menu__cols a{font-family:var(--sans);font-weight:400;font-size:clamp(32px,4.6vw,54px);letter-spacing:-.05em;line-height:1.26;color:var(--ink);transition:color .3s var(--ease)}
.menu__contact{min-width:260px;align-self:center}
.menu__btn{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:15px 20px;border-radius:10px;font-size:15px;letter-spacing:-.02em;margin-bottom:12px;transition:transform .16s var(--ease),opacity .3s}
.menu__btn:active{transform:scale(.98)}
.menu__btn--dark{background:var(--ink);color:#fff}
.menu__btn--dark:hover{opacity:.88}
.menu__btn--primary{background:var(--accent-ink);color:#fff}
.menu__btn--primary:hover{opacity:.9}
.menu__foot{display:grid;grid-template-columns:1fr 1fr auto;gap:30px;align-items:end;border-top:1px solid var(--line);padding:26px 0 30px;flex:0 0 auto}
.menu__social{display:flex;gap:10px}
.menu__social a{width:44px;height:44px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:var(--ink);transition:background .3s}
.menu__social a:hover{background:rgba(0,0,0,.05)}
.menu__social svg{width:18px;height:18px;fill:currentColor}
.menu__foot p{font-size:15px;line-height:1.55;color:var(--gray)}
.menu__word{display:block;max-width:300px;justify-self:end}
.menu__word img{width:100%;filter:brightness(0);opacity:.85}
@media (hover:hover){.menu__cols a:hover{color:var(--accent-ink)}}
@media(max-width:860px){
.menu__main{grid-template-columns:1fr;gap:32px;padding:26px 0}
.menu__cols{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none}
.menu__cols a{font-size:clamp(30px,9vw,42px)}
.menu__contact{min-width:0;max-width:340px}
.menu__foot{grid-template-columns:1fr;gap:22px;align-items:start}
.menu__word{justify-self:start;max-width:220px}
}
/* ============ BUTTONS ============ */
.btn-pill{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);font-size:16px;letter-spacing:-.03em;color:#fff;transition:background .22s var(--ease),transform .16s var(--ease)}
.btn-pill:hover{background:rgba(255,255,255,.26)}
.btn-pill:active{transform:scale(.97)}
.btn-dark{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:13px 22px;border-radius:999px;font-size:15px;letter-spacing:-.02em;transition:transform .16s var(--ease),opacity .22s}
.btn-dark:hover{opacity:.86}.btn-dark:active{transform:scale(.97)}
.btn-black{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:13px 22px;border-radius:999px;font-size:15px;letter-spacing:-.02em;white-space:nowrap;transition:transform .16s var(--ease),opacity .22s}
.btn-black:hover{opacity:.85}.btn-black:active{transform:scale(.97)}
.btn-light{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#000;padding:13px 22px;border-radius:999px;font-size:15px;letter-spacing:-.02em;transition:transform .16s var(--ease),opacity .22s}
.btn-light:hover{opacity:.86}.btn-light:active{transform:scale(.97)}
/* ============ HOME HERO ============ */
.hero{position:relative;height:100vh;height:100dvh;min-height:640px;overflow:hidden;color:var(--white)}
.hero__video,.hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero__overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:1}
/* Top-Scrim: verdunkelt den Bereich hinter der Nav, damit das per mix-blend-difference
invertierte Logo im Header klar weiß statt grau erscheint. Dynamische Anpassung bleibt. */
.hero::before{content:"";position:absolute;top:0;left:0;right:0;height:190px;z-index:1;pointer-events:none;
background:linear-gradient(to bottom,rgba(0,0,0,.62),rgba(0,0,0,0))}
.hero__inner{position:relative;z-index:2;height:100%;width:100%;margin:0 auto;padding:0 var(--pad)}
.hero__home{position:absolute;left:var(--pad);top:53%;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.hero__home::before{content:"";width:200px;height:1px;background:rgba(255,255,255,.5);order:2;margin-left:8px}
.hero__home span{order:1}
.hero__bottom{position:absolute;left:var(--pad);right:var(--pad);bottom:56px}
.hero h1{font-family:var(--sans);font-weight:400;font-size:80px;line-height:.98;letter-spacing:-.07em;max-width:760px}
.hero__aside{position:absolute;right:var(--pad);bottom:10px;display:flex;flex-direction:column;align-items:flex-end;gap:20px;width:auto;max-width:452px}
.hero__actions{display:flex;align-items:center;gap:12px}
.hero__note{display:flex;gap:10px;font-size:22px;line-height:1.2;letter-spacing:-.04em;max-width:300px}
.hero__note .arrow{opacity:.8}
.hero__price{z-index:3;display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:10px 14px}
.hero__price img{width:44px;height:33px;border-radius:5px;object-fit:cover}
.hero__price .meta{font-size:12px;line-height:1.3}
.hero__price .meta b{font-weight:500}
.hero__price .buy{font-size:12px;padding:7px 12px;border-radius:999px;background:#fff;color:#000;font-weight:500}
/* ============ SUBPAGE HERO ============ */
.subhero{position:relative;padding:200px var(--pad) 90px;background:var(--ink);color:#fff;overflow:hidden}
.subhero.img{min-height:82vh;display:flex;align-items:flex-end}
.subhero__bg{position:absolute;inset:0;z-index:0}
.subhero__bg img{width:100%;height:100%;object-fit:cover}
.subhero__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
.subhero__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%}
.subhero .eyebrow{opacity:.7;margin-bottom:26px;display:block}
.subhero h1{font-family:var(--sans);font-weight:400;font-size:80px;line-height:.98;letter-spacing:-.06em;max-width:900px}
.subhero__note{display:flex;gap:10px;font-size:22px;line-height:1.25;letter-spacing:-.03em;max-width:420px;margin-top:34px;color:rgba(255,255,255,.85)}
/* ============ SECTION SHELL ============ */
.section{padding:120px 0}
.section-head{display:grid;grid-template-columns:180px 1fr;gap:24px 32px}
/* Eyebrow bricht im Bedarfsfall sauber in der eigenen Spalte um (kein Überlauf in die Statement-Spalte) */
.section-head .eyebrow{line-height:1.35;overflow-wrap:break-word}
.statement{font-family:var(--sans);font-weight:400;color:var(--ink-soft);font-size:40px;line-height:1.1;letter-spacing:-.05em;max-width:760px}
.section-title{font-family:var(--sans);font-weight:400;font-size:56px;letter-spacing:-.055em;color:var(--ink)}
/* prose columns (services focus / about who-we-are) */
.prose3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:70px}
.prose3 p{font-size:16px;line-height:1.6;color:var(--ink-soft)}
/* ---- home: services grid ---- */
.services{margin-top:80px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.svc{border-right:1px solid var(--line)}
.svc:last-child{border-right:0}
.svc__img{aspect-ratio:427/533;overflow:hidden}
.svc__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.svc:hover .svc__img img{transform:scale(1.05)}
.svc__body{padding:26px 24px}
.svc h3{font-family:var(--sans);font-weight:400;font-size:24px;letter-spacing:-.03em;color:var(--ink);margin-bottom:12px}
.svc p{font-size:15px;line-height:1.5;color:var(--gray);max-width:36ch}
.services-foot{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:flex-end}
/* ---- values (black) ---- */
.values{background:var(--black);color:#fff}
.values .wrap{padding-top:110px;padding-bottom:110px}
.values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.val__num{font-family:var(--mono);font-size:12px;opacity:.55;margin-bottom:60px}
.val h3{font-family:var(--sans);font-weight:400;font-size:30px;letter-spacing:-.04em;margin-bottom:16px}
.val p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.62);max-width:34ch}
/* ---- Branchen-Kacheln (auf dunkler .values-Sektion) ---- */
.branchen{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.branche{border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:26px 24px 30px;
font-family:var(--sans);font-weight:400;font-size:22px;letter-spacing:-.03em;color:#fff;
transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.branche:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.36);transform:translateY(-3px)}
@media(max-width:900px){.branchen{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.branchen{grid-template-columns:1fr}}
/* ---- technology (yellow) ---- */
.tech{background:var(--accent);color:#fff;overflow:hidden}
.tech .wrap{padding-top:100px;padding-bottom:0}
.tech__top{display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:start}
.tech h2{font-family:var(--sans);font-weight:400;font-size:56px;line-height:1.02;letter-spacing:-.055em;max-width:640px}
.tech__img{margin-top:70px;height:520px;overflow:hidden}
.tech__img img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
/* ---- process / numbered steps ---- */
/* Schulungsangebot: eigenständige Kacheln (übersichtlich, klar getrennt) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps.four{grid-template-columns:repeat(4,1fr)}
.step{border:1px solid var(--line);border-radius:18px;background:#fff;padding:32px 30px 34px}
.step__n{font-family:var(--mono);font-size:13px;color:var(--ink);margin-bottom:24px}
.step h4{font-family:var(--sans);font-weight:400;font-size:23px;letter-spacing:-.03em;color:var(--ink);margin-bottom:12px}
.step p{font-size:15px;line-height:1.55;color:var(--gray)}
/* ---- Nächste Termine (Live aus der App-API) ---- */
.termine{margin-top:60px}
.termine__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.trm{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;padding:28px 26px 26px;background:#fff;
transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.trm[href]:hover{border-color:rgba(0,0,0,.2);box-shadow:0 14px 34px -18px rgba(0,0,0,.3);transform:translateY(-3px)}
.trm[href]:hover .trm__go{transform:translateX(4px)}
.trm__date{font-family:var(--mono);font-size:13px;color:var(--ink);letter-spacing:.01em;margin-bottom:44px}
.trm h4{font-family:var(--sans);font-weight:400;font-size:22px;letter-spacing:-.03em;color:var(--ink);margin-bottom:8px}
.trm__meta{font-size:14px;line-height:1.5;color:var(--gray);margin-bottom:20px}
.trm__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.trm__seats{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase}
.trm__seats.low{color:var(--accent-ink)}
.trm__seats.full{color:#6b6b6b} /* AA: 4.8:1 auf --bg (statt #999 = 2.6:1) */
.trm__go{font-size:14px;color:var(--ink);transition:transform .16s var(--ease)}
/* „Ausgebucht" wird per Text + gedämpfter Platz-Farbe signalisiert, NICHT über
card-weite opacity — die hätte den Text unter die Lesbarkeitsschwelle gedrückt. */
.trm.is-full .trm__date,.trm.is-full h4{opacity:.7}
.termine__empty{padding:34px 0;color:var(--gray);font-size:16px}
@media(max-width:900px){.termine__grid{grid-template-columns:1fr}.trm{border-right:0}}
/* ---- ticker (marquee of words) ---- */
.ticker{background:var(--ink);color:#fff;overflow:hidden;padding:26px 0}
.ticker__track{display:flex;gap:60px;width:max-content;animation:marquee 30s linear infinite;align-items:center}
.ticker__track span{font-family:var(--sans);font-weight:400;font-size:34px;letter-spacing:-.03em;white-space:nowrap;opacity:.9}
.ticker__track .dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
/* ---- articles marquee (home) ---- */
.articles__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:46px}
.articles__nav{display:flex;gap:10px}
.circle{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:16px;color:var(--ink);transition:background .3s,color .3s;cursor:pointer}
.circle:hover{background:var(--ink);color:#fff}
.marquee{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee__track{display:flex;gap:12px;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
/* article card */
.card{width:382px;flex:0 0 382px}
.card__img{height:420px;overflow:hidden;border-radius:2px}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .card__img img{transform:scale(1.05)}
.card__meta{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-family:var(--mono);font-size:12px;text-transform:uppercase;color:#777}
.card h3{font-family:var(--sans);font-weight:400;font-size:20px;letter-spacing:-.03em;color:var(--ink);margin-top:8px}
/* ---- newsroom listing grid ---- */
.filters{display:flex;gap:10px;margin:0 0 46px}
.filter{font-family:var(--mono);font-size:12px;text-transform:uppercase;padding:9px 18px;border:1px solid var(--line);border-radius:999px;cursor:pointer;transition:background .3s,color .3s}
.filter.active,.filter:hover{background:var(--ink);color:#fff}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 24px}
.news-grid .card{width:auto;flex:none}
.news-grid .card__img{height:300px}
/* ============ ABOUT ============ */
.reach{padding:120px 0}
.reach__map{margin-top:60px;position:relative}
.reach__map img{width:100%;filter:brightness(0);opacity:.82}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:70px}
.metric{padding:40px 24px;border-right:1px solid var(--line)}
.metric:last-child{border-right:0}
.metric b{display:block;font-family:var(--sans);font-weight:400;font-size:56px;letter-spacing:-.04em;color:var(--ink);line-height:1}
.metric span{font-size:14px;color:var(--gray);margin-top:10px;display:block}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:70px}
.quote{border:1px solid var(--line);border-radius:8px;padding:30px}
.quote p{font-family:var(--sans);font-size:22px;letter-spacing:-.03em;line-height:1.25;color:var(--ink)}
.quote span{font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--gray);margin-top:24px;display:block}
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:56px}
.member__img{aspect-ratio:3/4;overflow:hidden;border-radius:4px;background:#e5e7eb}
.member__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s,transform 1s var(--ease)}
.member:hover .member__img img{filter:grayscale(0);transform:scale(1.04)}
.member h4{font-family:var(--sans);font-weight:400;font-size:18px;letter-spacing:-.02em;color:var(--ink);margin-top:14px}
.member span{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--gray);margin-top:4px;display:block}
/* ============ PLATFORM ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.split__text{padding:90px 60px 90px 0}
.split__text.pl{padding:90px 0 90px 60px}
.split__text h2{font-family:var(--sans);font-weight:400;font-size:44px;letter-spacing:-.05em;color:var(--ink);margin-bottom:22px;line-height:1.03}
.split__text p{font-size:16px;line-height:1.6;color:var(--gray);max-width:46ch}
.split__img{overflow:hidden;border-radius:8px;background:#e5e7eb;min-height:440px}
.split__img img{width:100%;height:100%;object-fit:cover}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;background:transparent;border:0;margin-top:70px}
.feature{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 28px 34px;
transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.feature:hover{border-color:rgba(0,0,0,.2);box-shadow:0 14px 34px -18px rgba(0,0,0,.3);transform:translateY(-3px)}
.feature__n{font-family:var(--mono);font-size:13px;color:var(--accent-ink);margin-bottom:44px}
.feature p{font-size:18px;letter-spacing:-.02em;color:var(--ink);line-height:1.35}
/* ============ CAREERS ============ */
.clock{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin-top:20px;font-family:var(--mono);font-size:13px;text-transform:uppercase}
.jobs{margin-top:0}
.job{display:flex;align-items:center;gap:30px;padding:30px 0;border-bottom:1px solid var(--line);transition:padding-left .35s var(--ease)}
.job:hover{padding-left:14px}
.job__n{font-family:var(--mono);font-size:13px;color:var(--gray-lt);width:40px}
.job h4{font-family:var(--sans);font-weight:400;font-size:30px;letter-spacing:-.03em;color:var(--ink);flex:1}
.job__loc{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--gray-lt);white-space:nowrap}
/* ---- SIFA-Rechner Embed (iframe, isolierte App) ---- */
.sifa-frame{width:100%;border:0;display:block;min-height:1600px;background:var(--bg)}
.job .arrow{font-size:20px;color:var(--ink);opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s}
.job:hover .arrow{opacity:1;transform:none}
/* ============ CONTACT ============ */
.contact-hero{padding:200px var(--pad) 60px;background:var(--ink);color:#fff}
.contact-hero .mail{font-family:var(--mono);font-size:13px;text-transform:uppercase;opacity:.75;margin-bottom:24px;display:inline-flex;gap:8px}
.contact-hero h1{font-family:var(--sans);font-weight:400;font-size:80px;letter-spacing:-.06em}
.form-wrap{background:var(--ink);color:#fff;padding-bottom:120px}
.form{max-width:760px;margin:0 auto;padding:0 var(--pad)}
.form .eyebrow{opacity:.6;display:block;margin-bottom:26px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field input,.field textarea{width:100%;background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:16px 18px;color:#fff;font-family:var(--sans);font-size:16px;letter-spacing:-.02em;transition:border-color .3s}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.5)}
.field input:focus,.field textarea:focus{outline:none;border-color:#fff}
.field textarea{min-height:130px;resize:vertical}
.form button{margin-top:8px}
/* ============ ARTICLE ============ */
.article-hero{padding:190px var(--pad) 50px;max-width:var(--maxw);margin:0 auto}
.article-hero h1{font-family:var(--sans);font-weight:400;font-size:64px;letter-spacing:-.05em;color:var(--ink);max-width:16ch;line-height:1.02}
.article-intro{display:grid;grid-template-columns:120px 1fr;gap:24px;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 40px}
.article-intro p{font-size:20px;line-height:1.5;letter-spacing:-.02em;color:#444;max-width:60ch}
.article-meta{display:flex;gap:60px;max-width:var(--maxw);margin:0 auto;padding:24px var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.article-meta div span{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--gray-lt);display:block;margin-bottom:6px}
.article-meta div b{font-family:var(--sans);font-weight:400;font-size:16px;color:var(--ink)}
.article-cover{max-width:var(--maxw);margin:50px auto;padding:0 var(--pad)}
.article-cover img{width:100%;height:560px;object-fit:cover;border-radius:8px}
.article-body{max-width:760px;margin:0 auto;padding:0 var(--pad) 80px}
.article-body h2{font-family:var(--sans);font-weight:400;font-size:32px;letter-spacing:-.04em;color:var(--ink);margin:48px 0 18px}
.article-body p{font-size:17px;line-height:1.7;color:#3f3f3f;margin-bottom:20px}
.article-back{max-width:var(--maxw);margin:0 auto 60px;padding:0 var(--pad)}
/* ============ 404 ============ */
.nf{min-height:100vh;display:grid;place-items:center;text-align:center;background:var(--ink);color:#fff;padding:0 var(--pad)}
.nf h1{font-family:var(--sans);font-weight:400;font-size:180px;letter-spacing:-.06em;line-height:1}
.nf p{font-size:20px;color:rgba(255,255,255,.7);margin:16px 0 34px;letter-spacing:-.02em}
/* ============ CTA (shared) ============ */
.cta{position:relative;height:520px;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden}
.cta__img{position:absolute;inset:0}
.cta__img img{width:100%;height:100%;object-fit:cover}
.cta__img::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
.cta__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:26px}
.cta .eyebrow{opacity:.8}
.cta h2{font-family:var(--sans);font-weight:400;font-size:60px;line-height:1.02;letter-spacing:-.055em;max-width:760px}
/* ============ FOOTER (shared) ============ */
.footer{background:var(--black);color:#fff;padding-top:90px;overflow:hidden}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:70px;border-bottom:1px solid var(--line-light)}
.footer h3{font-family:var(--sans);font-weight:400;font-size:34px;letter-spacing:-.04em;margin-bottom:22px;max-width:14ch}
.footer .eyebrow{opacity:.5;margin-bottom:18px;display:block}
.footer__col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer__col a{font-size:15px;color:rgba(255,255,255,.7);transition:color .3s}
.footer__col a:hover{color:#fff}
.footer__addr{font-size:15px;line-height:1.6;color:rgba(255,255,255,.7)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 0;font-family:var(--mono);font-size:12px;text-transform:uppercase;color:rgba(255,255,255,.5)}
.footer__legal{display:flex;gap:22px;flex-wrap:wrap}
.footer__legal a{color:rgba(255,255,255,.55);transition:color .3s var(--ease)}
.footer__legal a:hover{color:#fff}
/* Riesen-Wortmarke randlos über die ganze Breite (wie Referenz-Footer). */
.footer__word{display:block;width:100%;padding:0;margin-top:40px;line-height:0}
.footer__word img{display:block;width:100%;filter:brightness(0) invert(1);opacity:.16}
/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
.hero h1,.subhero h1{font-size:56px}
.contact-hero h1{font-size:56px}
.statement,.tech h2,.split__text h2{font-size:34px}
.section-title,.articles__head .section-title,.cta h2{font-size:40px}
.article-hero h1{font-size:46px}
.prose3{grid-template-columns:1fr 1fr}
.team{grid-template-columns:repeat(3,1fr)}
.metrics{grid-template-columns:repeat(2,1fr)}
.metric:nth-child(2){border-right:0}
.quotes{grid-template-columns:1fr 1fr}
/* news-grid bleibt 3-spaltig bis 720px (3 Artikel → keine leere Zelle) */
.footer__grid{grid-template-columns:1fr 1fr}
.steps,.steps.four{grid-template-columns:repeat(2,1fr)}
.feature-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
:root{--pad:20px}
.nav__cta{display:none}
.hero h1{font-size:40px}
.hero__bottom{bottom:56px}
.hero__aside{position:static;width:auto;margin-top:24px}
.hero__home{display:none}
.hero__price{display:none}
.subhero{padding-top:150px}
.subhero h1,.contact-hero h1,.nf h1{font-size:40px}
.nf h1{font-size:110px}
.subhero__note{font-size:18px}
.section{padding:72px 0}
.section-head,.tech__top,.article-intro{grid-template-columns:1fr;gap:14px}
.statement,.tech h2{font-size:28px}
.section-title,.cta h2{font-size:32px}
.prose3,.services,.values__grid,.steps,.steps.four,.split,.feature-grid,.quotes,.news-grid,.metrics{grid-template-columns:1fr}
.feature{min-height:0;padding:26px 24px 28px}
.feature__n{margin-bottom:22px}
.feature p{font-size:17px}
.svc{border-right:0;border-bottom:1px solid var(--line)}
.metric{border-right:0;border-bottom:1px solid var(--line)}
.metric:last-child{border-bottom:0}
.team{grid-template-columns:repeat(2,1fr)}
.tech__img{height:300px}
.split__text,.split__text.pl{padding:40px 0}
.form__row{grid-template-columns:1fr}
.article-hero{padding-top:140px}
.article-hero h1{font-size:34px}
.article-cover img{height:280px}
.article-meta{gap:28px;flex-wrap:wrap}
.ticker__track span{font-size:24px}
.job h4{font-size:22px}
.footer__grid{grid-template-columns:1fr}
}
/* ============================================================
DESIGN-ANGLEICHUNG ANS ORIGINAL (Home-Redesign) — 2026-08-25
============================================================ */
/* ---- "+" vor Sektions-Eyebrows (wie Original) ---- */
.section-head .eyebrow::before,.techbig .eyebrow::before,.articles__head .eyebrow::before,
.cta .eyebrow::before,.hww .eyebrow::before,.wwd-head .eyebrow::before,
.reviews__head .eyebrow::before{content:"+ "}
/* ---- Custom Circle Cursor ---- */
@media (pointer:fine){
html.hascursor,html.hascursor *{cursor:none !important}
.cursor{position:fixed;left:0;top:0;width:20px;height:20px;border:1.5px solid #fff;border-radius:50%;
transform:translate(-50%,-50%);pointer-events:none;z-index:99999;mix-blend-mode:difference;
transition:width .25s var(--ease),height .25s var(--ease),background .25s var(--ease),opacity .3s;will-change:transform}
.cursor.hover{background:rgba(255,255,255,.16)} /* Kundenwunsch: NICHT größer werden, nur zarte Füllung */
.cursor.hidden{opacity:0}
}
/* ---- WHAT WE DO — Icon-Version ---- */
.wwd{margin-top:70px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.wwd__col{border-right:1px solid var(--line);padding:36px 32px 46px;display:flex;flex-direction:column}
.wwd__col:last-child{border-right:0}
.wwd__ico{width:50px;height:50px;border-radius:11px;background:#e7e8ea;display:grid;place-items:center;margin-bottom:32px}
/* Primär-Leistung (Akademie) hervorheben: Icon im Marken-Orange, weißes Glyph */
.wwd__col:first-child .wwd__ico{background:var(--accent)}
.wwd__col:first-child .wwd__ico svg{stroke:#fff}
.wwd__ico svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wwd h3{font-family:var(--sans);font-weight:400;font-size:24px;letter-spacing:-.03em;color:var(--ink);margin-bottom:12px}
.wwd p{font-size:15px;line-height:1.5;color:var(--gray);max-width:34ch}
.wwd__link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:15px;letter-spacing:-.02em;color:#fff;background:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:11px 20px;transition:gap .22s var(--ease),transform .16s var(--ease),opacity .22s}
.wwd__link:hover{gap:14px;opacity:.86}
.wwd__link:active{transform:scale(.97)}
/* ---- Buchung (Landingpage) ---- */
.book{background:var(--bg)}
.book__frame{margin-top:44px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.book__frame iframe{display:block;width:100%;height:720px;border:0}
.lp-trust{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;margin-top:26px;font-size:15px;color:var(--ink-soft)}
.lp-trust b{color:var(--ink);font-weight:500}
.lp-trust .sep{width:5px;height:5px;border-radius:50%;background:var(--gray-lt)}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;padding:12px var(--pad);background:rgba(10,10,10,.92);backdrop-filter:blur(10px);align-items:center;justify-content:space-between;gap:14px}
.sticky-cta span{color:#fff;font-size:15px;letter-spacing:-.02em}
.sticky-cta a{white-space:nowrap}
@media (max-width:720px){
.sticky-cta{display:flex}
.book__frame iframe{height:640px}
}
/* ---- FAQ ---- */
.faq{max-width:880px;margin:56px auto 0}
.faq__item{border-top:1px solid var(--line);padding:30px 0}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__item h4{font-family:var(--sans);font-weight:400;font-size:23px;letter-spacing:-.03em;color:var(--ink);margin:0 0 12px}
.faq__item p{font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:74ch}
/* ---- WERTE — helle Editorial-Kacheln (Bild oben, Text darunter) ---- */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;align-items:start}
/* Editorial-Versatz: bricht das dritte gleiche 3-Spalten-Raster auf der Seite auf */
.vcol:nth-child(2){margin-top:44px}
.vcol:nth-child(3){margin-top:88px}
.vcol{display:flex;flex-direction:column}
.vcol__img{aspect-ratio:4/5;overflow:hidden;border-radius:10px;background:#e5e7eb}
.vcol__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.vcol:hover .vcol__img img{transform:scale(1.04)}
.vcol__in{padding-top:26px}
.vnum{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--ink);margin-bottom:22px}
.vcol h3{font-family:var(--sans);font-weight:400;font-size:30px;letter-spacing:-.04em;color:var(--ink);margin-bottom:14px}
.vcol p{font-size:15px;line-height:1.6;color:var(--gray);max-width:34ch}
/* ---- ORANGE GROSS-SEKTION (zentriert, Inline-Bilder, viel Weißraum) ---- */
.techbig{background:var(--accent);color:#000;text-align:center;padding:130px var(--pad) 150px}
.techbig .eyebrow{color:#000;opacity:.75;margin-bottom:70px;display:inline-block}
.techbig h2{font-family:var(--sans);font-weight:400;font-size:60px;line-height:1.12;letter-spacing:-.045em;
color:#000;max-width:1040px;margin:0 auto 64px}
.techbig h2 img{display:inline-block;width:82px;height:58px;border-radius:40px;object-fit:cover;vertical-align:middle;margin:0 12px}
.techbig .btn-black{background:var(--ink);color:#fff;font-size:16px;padding:15px 26px}
/* ---- HOW WE WORK — Bild-Overlay + Pfeile ---- */
.hww{position:relative;color:#fff;overflow:hidden;min-height:940px;padding:110px 0 0}
.hww__bg{position:absolute;inset:0;z-index:0}
.hww__bg img{width:100%;height:100%;object-fit:cover}
.hww__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.5) 46%,rgba(0,0,0,.72) 100%)}
.hww .wrap{position:relative;z-index:2}
.hww__stmt{font-family:var(--sans);font-weight:400;font-size:44px;line-height:1.12;letter-spacing:-.05em;max-width:760px;color:#fff}
.hww__steps{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:420px;padding-bottom:64px}
.hww__step{flex:1;max-width:300px}
.hww__step .step__n{font-family:var(--mono);font-size:13px;margin-bottom:16px;color:#fff}
.hww__step h4{font-family:var(--sans);font-weight:400;font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
.hww__step p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.85)}
.hww__arrow{align-self:center;font-size:20px;color:rgba(255,255,255,.8);padding-top:20px}
/* ---- CARD — Badge auf Bild ---- */
.card__img{position:relative}
.card__badge{position:absolute;top:14px;left:14px;z-index:2;background:rgba(243,244,246,.94);color:#000;
font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.02em;padding:6px 11px;border-radius:5px}
.card__date{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:#8a8a8a;margin-top:8px;display:block}
/* ---- FOOTER — Original-Layout + Social ---- */
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px}
.footer__contact .footer__cta{display:flex;align-items:center;gap:22px;margin-top:20px;flex-wrap:wrap}
.footer__social{padding:40px 0;display:flex;flex-direction:column;gap:18px;border-top:1px solid var(--line-light)}
.footer__icons{display:flex;gap:12px}
.footer__icons a{width:44px;height:44px;border:1px solid var(--line-light);border-radius:8px;display:grid;place-items:center;transition:background .3s}
.footer__icons a:hover{background:rgba(255,255,255,.08)}
.footer__icons svg{width:18px;height:18px;fill:#fff}
@media (max-width:1024px){
.techbig h2{font-size:40px}
.footer__top{grid-template-columns:1fr 1fr}
.hww__stmt{font-size:32px}
}
@media (max-width:720px){
.wwd,.vgrid{grid-template-columns:1fr}
.wwd__col{border-right:0;border-bottom:1px solid var(--line)}
.wwd__ico{margin-bottom:32px}
.vgrid{gap:28px}
.vcol:nth-child(2),.vcol:nth-child(3){margin-top:0}
.vcol__img{aspect-ratio:16/10}
.techbig{padding:70px 20px 80px}
.techbig h2{font-size:30px}
.techbig h2 img{width:52px;height:38px;margin:0 6px}
.hww{min-height:0;padding:70px 0 0}
.hww__bg::after{background:rgba(0,0,0,.66)} /* stärkerer Schleier: Text bleibt über hellen Bildstellen lesbar */
.hww__steps{flex-direction:column;margin-top:60px;gap:28px}
.hww__step p{color:#fff} /* Ablauf-Text weiß statt grau (Mobile) */
.hww__arrow{display:none}
.hww__stmt{font-size:26px}
.footer__top{grid-template-columns:1fr}
/* News mobil: kein Auto-Marquee (mask+animation rendert auf iOS teils leer),
stattdessen sauber wischbarer Scroller mit Snap */
.marquee{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x proximity;scroll-padding-left:20px}
.marquee::-webkit-scrollbar{display:none}
.marquee__track{animation:none!important;width:max-content;gap:14px;padding:0 20px}
.marquee .card{width:82vw;flex:0 0 82vw;scroll-snap-align:start}
.marquee .card__img{height:300px}
}
/* ============================================================
LETTER-SPACING LOCKERN — 2026-08-27
Figma-Vorgabe: Neue Haas Grotesk Display, 0 % Tracking.
Die großen Headlines standen zu eng (-.05…-.07em) und wirkten
gequetscht. Hier auf ein sanftes, fast neutrales Tracking geöffnet
(nahe 0 %, mit minimaler optischer Korrektur bei sehr großen Graden).
Kleine Mono-Labels/Eyebrows bleiben unverändert.
============================================================ */
.hero h1,.subhero h1,.contact-hero h1,.nf h1{letter-spacing:-.015em}
.statement,.section-title,.cta h2,.tech h2,.techbig h2,.split__text h2,
.hww__stmt,.article-hero h1{letter-spacing:-.01em}
.menu a{letter-spacing:-.02em}
.step h4,.svc h3,.val h3,.vcol h3,.job h4,.footer h3,.quote p,.feature p,
.faq__item h4,.card h3,.member h4,.article-body h2,.ticker__track span{letter-spacing:-.005em}
.hero__note,.subhero__note,.btn-pill,.btn-dark,.btn-black,.btn-light{letter-spacing:-.01em}
/* Schulungskarten als Links (akademie.html) — dezente Hover-Bewegung */
a.step{text-decoration:none;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
a.step:hover{border-color:rgba(0,0,0,.22);box-shadow:0 14px 34px -18px rgba(0,0,0,.32);transform:translateY(-3px)}
a.step:hover h4{color:var(--accent-ink)}
/* Touch-Geräte: keine klebenden Hover-Transforms (Emil/HIG „hover:hover") */
@media (hover:none){
.svc:hover .svc__img img,.card:hover .card__img img,.member:hover .member__img img,.vcol:hover .vcol__img img{transform:none}
.member:hover .member__img img{filter:grayscale(1)}
.job:hover{padding-left:0}
.trm:hover{background:transparent}
.wwd__link:hover{gap:8px}
}
/* ============================================================
GOOGLE-ADS-LANDINGPAGES + STADTSEITEN — 2026-08-27
Konversionsorientierte Kurs-LPs (Video-Hero, Zielgruppen-Weiche,
Live-Termine per API, WhatsApp, Bedienerausweis-Mockup, FAQ) und
72 statische Stadt×Kurs-Seiten. Token-treu zum Design-System oben.
============================================================ */
/* ---- Zielgruppen-Weiche OHNE Umschalter -------------------------------
Kundenwunsch: eine Seite, kein Switch. Beide Wege (Privat/Einzelteilnehmer
buchen in Nagold · Betriebe fragen Inhouse an) sind gleichzeitig sichtbar;
die Klarheit trägt die „Zwei Wege"-Sektion. Der alte Toggle ist entfernt. */
.aud-toggle{display:none!important}
/* Hero minimalistisch: eine ruhige Aussage (Privat/Einzelteilnehmer → Termin in Nagold).
Der Betriebs-Weg (Inhouse) steht klar in der „Zwei Wege"-Sektion direkt darunter. */
.hero__note .aud-b2b{display:none!important}
/* Sticky-Leiste bleibt auf eine klare Aktion reduziert (Termin wählen) */
.sticky-cta .aud-b2b{display:none!important}
/* Hero: eine dominante Aktion (Termin wählen); Betriebs-Weg steht in „Zwei Wege" + Final-CTA */
.lp-hero-actions .aud-b2b{display:none!important}
/* LP-Hero weiter entschlackt (Kundenwunsch): Eyebrow (z. B. „DGUV Vorschrift 68"),
die Haken-Bullets und die 5-Sterne-Zeile raus. */
.hero .lp-eyebrow,.hero .lp-bullets,.hero .lp-social{display:none!important}
/* Im Wertstack nur der Privatpreis (237 € inkl.), Betriebs-/Staffelpreis raus. */
.vstack__price.aud-b2b{display:none!important}
.aud-toggle--never{display:inline-flex;padding:4px;gap:4px;border-radius:999px;background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.aud-toggle.dark{background:rgba(0,0,0,.05);border-color:var(--line);backdrop-filter:none}
.aud-toggle button{appearance:none;border:0;background:transparent;color:#fff;font-family:var(--sans);
font-size:14px;letter-spacing:-.01em;padding:9px 18px;border-radius:999px;cursor:pointer;
transition:background .3s var(--ease),color .3s var(--ease);white-space:nowrap}
.aud-toggle.dark button{color:var(--gray)}
.aud-toggle button[aria-pressed="true"]{background:#fff;color:#000}
.aud-toggle.dark button[aria-pressed="true"]{background:var(--ink);color:#fff}
/* ---- LP-Hero-Zusätze (auf .hero aufgesetzt) --------------------------- */
.lp-eyebrow{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;
color:#fff;opacity:.8;display:block;margin-bottom:20px}
.lp-bullets{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:4px}
.lp-bullets li{display:flex;align-items:center;gap:9px;font-size:15px;letter-spacing:-.01em;color:rgba(255,255,255,.92)}
.lp-bullets svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.6;flex:0 0 auto}
.lp-social{display:flex;align-items:center;gap:8px;margin-top:22px;font-size:14px;color:rgba(255,255,255,.8)}
.lp-social .stars{color:var(--accent-ink);letter-spacing:2px}
.lp-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}
.btn-accent{display:inline-flex;align-items:center;gap:10px;background:var(--accent-ink);color:#fff;
padding:15px 26px;border-radius:999px;font-size:16px;letter-spacing:-.01em;font-weight:500;
transition:transform .16s var(--ease),opacity .22s}
.btn-accent:hover{opacity:.9}.btn-accent:active{transform:scale(.97)}
.nav__wa{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;
text-transform:uppercase;letter-spacing:.04em}
.nav__wa svg{width:15px;height:15px;fill:currentColor}
/* ---- Value-Stack (Alles inklusive / Preis-Anker) ---------------------- */
.vstack{margin-top:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--line);
border-radius:16px;overflow:hidden;background:#fff}
.vstack__list{padding:44px 40px}
.vstack__list h3{font-family:var(--sans);font-weight:400;font-size:26px;letter-spacing:-.03em;color:var(--ink);margin-bottom:26px}
.vstack__row{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-top:1px solid var(--line)}
.vstack__row:first-of-type{border-top:0}
.vstack__row svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.6;flex:0 0 auto;margin-top:1px}
.vstack__row b{font-weight:500;color:var(--ink)}
.vstack__row span{display:block;font-size:14px;color:var(--gray);line-height:1.5;margin-top:2px}
.vstack__price{background:var(--ink);color:#fff;padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.vstack__price .vs-ey{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;opacity:.7}
.vstack__price .vs-big{font-family:var(--sans);font-weight:400;font-size:64px;letter-spacing:-.04em;line-height:1;margin:16px 0 6px}
.vstack__price .vs-sub{font-size:15px;color:rgba(255,255,255,.72);line-height:1.55}
.vstack__price .vs-note{font-size:13px;color:rgba(255,255,255,.5);margin-top:18px}
.vstack__price .btn-accent{margin-top:26px;justify-content:center}
/* ---- Zwei Wege (Privat vs Betriebe) ----------------------------------- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px}
.path{border:1px solid var(--line);border-radius:16px;padding:38px 34px;background:#fff;display:flex;flex-direction:column}
.path__k{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-ink);margin-bottom:18px}
.path h3{font-family:var(--sans);font-weight:400;font-size:28px;letter-spacing:-.03em;color:var(--ink);margin-bottom:12px}
.path p{font-size:15px;line-height:1.6;color:var(--gray);margin-bottom:18px}
.path ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.path li{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:var(--ink-soft);line-height:1.45}
.path li svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:1.6;flex:0 0 auto;margin-top:2px}
.path .btn-dark,.path .btn-accent{margin-top:auto;align-self:flex-start}
/* ---- Bedienerausweis-Mockup ------------------------------------------- */
.ausweis{background:var(--ink);color:#fff}
.ausweis .wrap{padding-top:110px;padding-bottom:110px}
.ausweis__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ausweis__copy .eyebrow{color:var(--accent-ink);display:block;margin-bottom:22px}
.ausweis__copy h2{font-family:var(--sans);font-weight:400;font-size:44px;letter-spacing:-.04em;line-height:1.05;margin-bottom:20px}
.ausweis__copy p{font-size:16px;line-height:1.65;color:rgba(255,255,255,.72);max-width:46ch;margin-bottom:26px}
.ausweis__pts{list-style:none;display:flex;flex-direction:column;gap:14px}
.ausweis__pts li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:rgba(255,255,255,.9);line-height:1.5}
.ausweis__pts svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.6;flex:0 0 auto;margin-top:2px}
.ausweis__cards{position:relative;min-height:420px;display:grid;place-items:center}
.avm-card{width:340px;max-width:78%;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);
border:1px solid rgba(255,255,255,.14);background:#111}
.avm-card img{width:100%;display:block}
.avm-card--front{transform:rotate(-6deg) translate(-22px,-26px);z-index:2}
.avm-card--back{position:absolute;transform:rotate(7deg) translate(46px,44px);z-index:1;opacity:.96;width:300px}
.avm-badge{position:absolute;z-index:3;bottom:8px;right:0;background:var(--accent-ink);color:#fff;
font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:8px 14px;border-radius:999px}
/* ---- WhatsApp Floating Action Button ---------------------------------- */
.wa-fab{position:fixed;right:20px;bottom:20px;z-index:75;display:inline-flex;align-items:center;gap:10px;
background:#25D366;color:#fff;padding:13px 18px 13px 15px;border-radius:999px;font-size:15px;font-weight:500;
letter-spacing:-.01em;box-shadow:0 10px 30px rgba(0,0,0,.28);transition:transform .16s var(--ease),box-shadow .3s}
.wa-fab svg{width:22px;height:22px;fill:#fff;flex:0 0 auto}
.wa-fab:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.34)}
.wa-fab:active{transform:scale(.97)}
.wa-fab__t{white-space:nowrap}
@media (max-width:720px){
.wa-fab{bottom:76px;padding:13px} /* über der Sticky-CTA */
.wa-fab__t{display:none}
}
/* ---- LP responsive ---------------------------------------------------- */
@media (max-width:900px){
.vstack,.paths,.ausweis__grid{grid-template-columns:1fr}
.ausweis__cards{min-height:320px;margin-top:20px}
}
@media (max-width:720px){
.vstack__price .vs-big{font-size:52px}
.ausweis__copy h2{font-size:30px}
.avm-card{width:260px}.avm-card--back{width:230px}
}
/* ============================================================
STADTSEITEN (statisch, rogalsky.work-Design)
============================================================ */
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--mono);font-size:12px;
text-transform:uppercase;letter-spacing:.02em;color:var(--gray);margin-bottom:40px}
.crumb a{color:var(--gray);transition:color .3s}.crumb a:hover{color:var(--ink)}
.crumb .sep{opacity:.5}
.crumb .cur{color:var(--ink)}
.st-grid{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:start}
.st-main .eyebrow{color:var(--accent-ink);display:block;margin-bottom:16px}
.st-main h2{font-family:var(--sans);font-weight:400;font-size:38px;letter-spacing:-.04em;color:var(--ink);line-height:1.06;margin-bottom:20px}
.st-main h3{font-family:var(--sans);font-weight:400;font-size:24px;letter-spacing:-.03em;color:var(--ink);margin:40px 0 14px}
.st-main p,.st-main .local p{font-size:16px;line-height:1.75;color:var(--ink-soft);margin-bottom:16px}
.st-main strong{color:var(--ink);font-weight:500}
.hl-box{border-left:2px solid var(--accent);background:rgba(232,80,2,.05);border-radius:0 12px 12px 0;
padding:24px 28px;margin:34px 0}
.hl-box strong{display:block;font-size:17px;color:var(--ink);margin-bottom:8px}
.hl-box p{font-size:15px;line-height:1.6;color:var(--gray);margin:0}
.checklist{list-style:none;display:grid;gap:12px;margin-top:20px}
.checklist li{position:relative;padding-left:32px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.checklist li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
background:rgba(232,80,2,.12);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E85002' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size:12px;background-repeat:no-repeat;background-position:center}
.ptable{width:100%;border-collapse:collapse;margin-top:8px}
.ptable th,.ptable td{text-align:left;padding:14px 4px;border-bottom:1px solid var(--line);font-size:15px}
.ptable th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--gray)}
.ptable td:last-child,.ptable th:last-child{text-align:right;color:var(--ink);font-weight:500}
.ptable td:first-child{color:var(--gray)}
.p-note{font-size:13px;color:var(--gray);margin-top:12px;display:block}
.st-faq{margin-top:12px}
.loc-banner{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;
padding:24px 26px;margin-top:40px;background:#fff}
.loc-banner svg{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:1.6;flex:0 0 auto;margin-top:2px}
.loc-banner p{font-size:15px;line-height:1.6;color:var(--gray);margin:0}
/* Sidebar */
.st-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.st-card{border:1px solid var(--line);border-radius:16px;padding:28px;background:#fff}
.st-card--cta{background:var(--ink);color:#fff;border-color:transparent}
.st-card--cta h4{font-family:var(--sans);font-weight:400;font-size:22px;letter-spacing:-.03em;margin-bottom:6px}
.st-card--cta .sub{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:18px}
.st-card--cta p{font-size:14px;color:rgba(255,255,255,.75);line-height:1.55;margin-bottom:20px}
.st-card--cta .btn-accent{width:100%;justify-content:center}
.st-card--cta .st-tel{display:flex;align-items:center;gap:9px;margin-top:16px;padding-top:16px;
border-top:1px solid rgba(255,255,255,.15);font-size:14px;color:rgba(255,255,255,.8)}
.st-card--cta .st-tel svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.st-card h4.st-h{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--gray);margin-bottom:16px}
.st-card .checklist li{font-size:14px}
.st-card address{font-style:normal;font-size:14px;line-height:1.65;color:var(--gray);margin-bottom:14px}
.st-card address strong{color:var(--ink)}
.rel-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.rel-card{border:1px solid var(--line);border-radius:14px;padding:26px;background:#fff;transition:background .3s var(--ease)}
.rel-card:hover{background:rgba(0,0,0,.02)}
.rel-card .rb{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.02em;color:var(--accent-ink)}
.rel-card h3{font-family:var(--sans);font-weight:400;font-size:20px;letter-spacing:-.02em;color:var(--ink);margin:12px 0 6px}
.rel-card p{font-size:14px;color:var(--gray);margin:0}
@media (max-width:900px){
.st-grid{grid-template-columns:1fr}
.st-side{position:static;flex-direction:row;flex-wrap:wrap}
.st-side>*{flex:1 1 260px}
.rel-row{grid-template-columns:1fr}
}
@media (max-width:720px){
.st-main h2{font-size:28px}
.st-side{flex-direction:column}
}
/* ============================================================
PLATFORM / COCKPIT — 2026-08-28
Nachbau der Freight /platform-Seite: dunkler Scanline-Hero,
zentrale Interface-Aussage + Software-Mockup (Rogalsky-Cockpit
als CSS-Replik im Browserfenster), Wechsel-Statements, Highlights.
============================================================ */
.phero{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:150px var(--pad) 62px;min-height:82vh;display:flex}
.phero__lines{position:absolute;inset:0;z-index:0;
background:repeating-linear-gradient(0deg,rgba(232,80,2,.18) 0 1px,transparent 1px 44px);
-webkit-mask-image:radial-gradient(125% 95% at 28% 42%,#000 0%,rgba(0,0,0,.4) 55%,transparent 100%);
mask-image:radial-gradient(125% 95% at 28% 42%,#000 0%,rgba(0,0,0,.4) 55%,transparent 100%)}
.phero__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;display:flex;flex-direction:column;flex:1}
.phero .eyebrow{opacity:.72;display:block}
.phero__row{margin-top:auto;display:grid;grid-template-columns:1fr auto;gap:44px;align-items:flex-end}
.phero h1{font-family:var(--sans);font-weight:400;font-size:92px;line-height:.95;letter-spacing:-.05em}
.phero__note{display:flex;gap:10px;font-size:18px;line-height:1.35;letter-spacing:-.02em;max-width:300px;color:rgba(255,255,255,.82);padding-bottom:12px}
.phero__note .arrow{opacity:.7}
/* zentrale Aussage + Software-Mockup */
.pintro{padding:120px var(--pad) 0;text-align:center;overflow:hidden}
.pintro .eyebrow{color:var(--gray);display:inline-block;margin-bottom:42px}
.pstmt{font-family:var(--sans);font-weight:400;font-size:50px;line-height:1.08;letter-spacing:-.04em;color:var(--ink-soft);max-width:900px;margin:0 auto}
.device{max-width:1060px;margin:72px auto 0;border-radius:14px 14px 0 0;overflow:hidden;
box-shadow:0 50px 90px -34px rgba(0,0,0,.4);border:1px solid var(--line);border-bottom:0;background:#fff}
.device__bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#e9eaec;border-bottom:1px solid var(--line)}
.device__dot{width:11px;height:11px;border-radius:50%;background:#cfd2d6}
.device__url{margin-left:16px;font-family:var(--mono);font-size:11px;color:var(--gray);background:#fff;border-radius:7px;padding:6px 14px}
/* --- Cockpit-Dashboard-Replik (v2 2026-09-04) --- */
.dash{display:grid;grid-template-columns:206px 1fr;min-height:600px;background:#f6f7f8;text-align:left;
color:#0a0a0a;font-family:var(--sans)}
.dash__side{background:#fff;border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:1px}
.dash__brandrow{display:flex;align-items:center;gap:9px;padding:4px 6px 16px}
.dash__mark{width:26px;height:26px;border-radius:8px;background:#0a0a0a;color:#fff;display:grid;place-items:center;font-weight:500;font-size:14px;letter-spacing:-.02em;flex:0 0 auto}
.dash__brandtx{font-weight:500;font-size:14px;letter-spacing:-.01em;line-height:1}
.dash__brandtx span{display:block;font-family:var(--mono);font-size:8px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-lt);margin-top:3px}
.dash__grp{font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:.1em;color:#a9acb1;margin:13px 0 4px;padding:0 8px}
.dash__item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;color:var(--gray);font-size:12px}
.dash__item .di{width:14px;height:14px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.dash__item.is-active{background:#0a0a0a;color:#fff}
.dash__item.is-active .di{opacity:1}
.dash__side .dash__spacer{margin-top:auto}
.dash__user{display:flex;align-items:center;gap:9px;padding:9px 7px 3px;margin-top:12px;border-top:1px solid var(--line)}
.dash__uav{width:28px;height:28px;border-radius:50%;flex:0 0 auto;background:#dfe1e4 center/cover no-repeat}
.dash__utx{min-width:0}
.dash__utx b{display:block;font-size:11.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash__utx span{font-size:9.5px;color:var(--gray-lt)}
.dash__main{padding:16px 22px 24px;display:flex;flex-direction:column;gap:13px;min-width:0}
.dash__bar{display:flex;align-items:center;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid var(--line)}
.dash__crumb{font-family:var(--mono);font-size:10px;letter-spacing:.02em;color:var(--gray-lt)}
.dash__crumb span{margin:0 5px;color:#c2c5ca}
.dash__tools{display:flex;align-items:center;gap:10px}
.dash__tool{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);display:grid;place-items:center;color:var(--gray);position:relative}
.dash__tool svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dash__tool--bell i{position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--accent);border:1.5px solid #fff}
.dash__me{width:26px;height:26px;border-radius:50%;background:#dfe1e4 center/cover no-repeat}
.dash__head{margin-top:2px}
.dash__date{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-lt)}
.dash__h{font-weight:500;font-size:24px;letter-spacing:-.035em;line-height:1;margin-top:6px}
.dash__sub{color:var(--gray);font-size:12px;margin-top:6px}
.dash__chips{display:flex;flex-wrap:wrap;gap:8px}
.dchip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.01em;color:var(--gray);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 11px}
.dchip svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.dchip--warn{color:var(--accent-ink);border-color:rgba(232,80,2,.3);background:rgba(232,80,2,.05)}
.dchip--warn svg{opacity:.9}
.dash__card{border:1px solid var(--line);border-radius:13px;background:#fff;padding:15px 17px}
.dash__card--flush{padding:14px 16px 6px}
.dash__cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.dash__ck{font-family:var(--mono);font-size:8px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink)}
.dash__ct{font-weight:500;font-size:14px;letter-spacing:-.02em;margin-top:3px}
.dash__pill{font-family:var(--mono);font-size:8.5px;color:var(--gray);border:1px solid var(--line);border-radius:999px;padding:4px 9px;white-space:nowrap}
.dash__status{display:flex;align-items:flex-start;gap:11px;border-left:3px solid #16a34a}
.dash__status .dot{width:9px;height:9px;border-radius:50%;background:#16a34a;margin-top:5px;flex:0 0 auto;box-shadow:0 0 0 4px rgba(22,163,74,.13)}
.dash__statustx{flex:1;min-width:0}
.dash__status b{font-size:14.5px;font-weight:500;letter-spacing:-.02em}
.dash__status p{font-size:11.5px;color:var(--gray);margin-top:3px;line-height:1.45}
.dash__statuslink{font-family:var(--mono);font-size:9px;color:var(--gray);white-space:nowrap;align-self:center}
.dash__split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:13px;align-items:stretch}
.dash__kcol{display:grid;grid-template-rows:1fr 1fr;gap:13px}
.dash__trow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.dash__trow:first-of-type{border-top:0}
.dash__tic{width:28px;height:28px;border-radius:8px;background:#f0f1f3;flex:0 0 auto;display:grid;place-items:center}
.dash__tic svg{width:14px;height:14px;stroke:#4a4e54;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dash__tt{flex:1;min-width:0}
.dash__tt b{display:block;font-size:12px;font-weight:500;letter-spacing:-.01em}
.dash__tt span{font-size:10.5px;color:var(--gray)}
.dash__td{font-size:11px;color:var(--gray);white-space:nowrap}
.dash__tag{font-family:var(--mono);font-size:8px;border-radius:999px;padding:4px 8px;white-space:nowrap}
.dash__tag.warn{color:var(--accent-ink);background:rgba(232,80,2,.1)}
.dash__tag.mut{color:var(--gray);background:#eff0f2}
.dash__kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dash__kpi{border:1px solid var(--line);border-radius:13px;background:#fff;padding:13px 14px;display:flex;flex-direction:column;gap:6px;min-height:104px}
.dash__kpi .kh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dash__kpi .kt{font-size:11px;font-weight:500;letter-spacing:-.01em;color:#3a3e44}
.dash__kpi .kb{font-family:var(--mono);font-size:7.5px;color:var(--gray-lt);border:1px solid var(--line);border-radius:999px;padding:3px 7px;white-space:nowrap}
.dash__kpi .kv{font-size:28px;font-weight:500;letter-spacing:-.04em;line-height:1;margin-top:auto;color:var(--ink)}
.dash__kpi .kv--sm{font-size:17px;font-weight:500;letter-spacing:-.03em}
.dash__kpi .kv__of{font-size:15px;color:#b0b3b8;font-weight:400;letter-spacing:-.02em}
.dash__kpi .kv--ok{display:flex;align-items:center;gap:6px;color:#16a34a;font-size:20px;font-weight:500}
.dash__kpi .kv--ok svg{width:17px;height:17px;stroke:#16a34a;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dash__kpi .kmeta{font-size:9.5px;color:var(--gray-lt)}
.dash__kpi .kbar{height:5px;border-radius:99px;background:#eef0f2;overflow:hidden}
.dash__kpi .kbar i{display:block;height:100%;background:var(--ink);border-radius:99px}
.dash__kcol .dash__kpi{min-height:0}
/* Helle Kopf-Variante (Freight /services · /about · /newsroom) */
.phero--light{background:var(--bg);color:var(--ink);min-height:74vh}
.phero--light .phero__lines{display:none}
.phero--light .eyebrow{color:var(--gray);opacity:1}
.phero--light .phero__note{color:var(--gray)}
.phero--light .phero__note .arrow{opacity:.55}
.phero__lead{margin-top:22px;max-width:620px;display:flex;flex-direction:column;gap:14px}
.phero__lead p{font-size:19px;line-height:1.45;letter-spacing:-.02em;color:var(--gray)}
.hband{height:46vh;min-height:320px;overflow:hidden;background:#e5e7eb}
.hband img{width:100%;height:100%;object-fit:cover}
@media (max-width:720px){.hband{height:34vh;min-height:220px}.phero__lead p{font-size:16px}}
/* Wechsel-Statement-Blöcke (GLOBAL REACH / SHIP SMARTER) */
.pfeature{padding:110px var(--pad) 0}
.pfeature__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.pfeature .eyebrow{color:var(--gray);display:block;margin-bottom:22px}
.pfeature h2{font-family:var(--sans);font-weight:400;font-size:46px;letter-spacing:-.04em;line-height:1.04;color:var(--ink);margin-bottom:20px}
.pfeature p{font-size:16px;line-height:1.7;color:var(--gray);max-width:48ch}
.pfeature__img{border-radius:12px;overflow:hidden;min-height:420px;background:#e5e7eb}
.pfeature__img img{width:100%;height:100%;object-fit:cover}
@media (max-width:1024px){
.phero h1{font-size:60px}
.pstmt{font-size:34px}
.pfeature h2{font-size:34px}
}
@media (max-width:900px){
.pfeature__grid{grid-template-columns:1fr;gap:30px}
.pfeature__img{min-height:280px;order:-1}
.dash{grid-template-columns:1fr}
.dash__side{display:none}
.dash__kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
.phero{padding-top:130px;min-height:70vh}
.phero h1{font-size:44px}
.phero__row{grid-template-columns:1fr;gap:24px}
.phero__note{max-width:none}
.pstmt{font-size:26px}
.pintro{padding-top:80px}
.device{margin-top:44px}
.dash__kpis{grid-template-columns:1fr}
}
/* ============================================================
FREIGHT-SCROLL-EFFEKTE + PLATFORM-AUSBAU — 2026-08-28
pstmt Wort-Einfärbung · iPad-Mockup + Scroll-Zoom · Feature/Step-Icons
· Software-Phone-Mockups · Bild-Scroll-Zoom
============================================================ */
/* Wort-für-Wort-Einfärbung (grau -> schwarz beim Scrollen), wie Freight /platform.
Selector deckt beide JS-Ziele ab (site.js: '.pstmt, .wordcolor') — vorher fehlte
.wordcolor hier, wodurch z.B. .statement.wordcolor (Hero-Statement auf index.html,
Review-Überschriften auf allen LPs) ohne Transition hart umsprang und ohne
reduced-motion-Fallback blieb. */
.pstmt .rw,.wordcolor .rw{color:var(--gray);transition:color .12s linear}
@media (prefers-reduced-motion:reduce){ .pstmt .rw,.wordcolor .rw{color:var(--ink)!important} }
/* Cockpit-Monitor: perspektivische Bühne + schwebende Kennzahl-Karten */
.cockpit-stage{position:relative;max-width:1060px;margin:66px auto 0;padding:0 8px}
.cockpit-stage::after{content:"";position:absolute;left:50%;bottom:-24px;width:68%;height:40px;transform:translateX(-50%);
background:radial-gradient(ellipse at center,rgba(0,0,0,.22),rgba(0,0,0,0) 70%);filter:blur(6px);z-index:0}
.cockpit-frame{perspective:2100px;will-change:transform;transform-origin:center 30%;position:relative;z-index:1}
.ipad{max-width:1000px;margin:0 auto;background:#0b0b0d;border-radius:26px;padding:14px;position:relative;
transform:rotateX(6deg) rotateY(-9deg) rotate(.4deg);transform-origin:center 30%;will-change:transform;
box-shadow:0 4px 0 #050506,-34px 46px 80px -40px rgba(0,0,0,.6),34px 30px 70px -46px rgba(0,0,0,.42),0 0 0 1px rgba(0,0,0,.4)}
.ipad::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:52px;height:5px;border-radius:99px;background:#26272b}
.ipad__screen{border-radius:15px;overflow:hidden;background:#fff}
.cockpit-badge{position:absolute;z-index:3;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;
box-shadow:0 30px 60px -26px rgba(0,0,0,.34);display:flex;flex-direction:column;gap:4px;text-align:left}
.cockpit-badge__n{font-size:34px;font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.cockpit-badge__l{font-size:12.5px;line-height:1.25;color:var(--gray)}
.cockpit-badge__l b{display:block;color:var(--ink);font-weight:500;letter-spacing:-.01em}
.cockpit-badge__dot{width:9px;height:9px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.14);flex:0 0 auto}
.cockpit-badge--tr{top:-30px;right:-6px}
.cockpit-badge--bl{left:-30px;bottom:-16px;flex-direction:row;align-items:center;gap:11px}
.cockpit-badge--phone{right:-14px;top:20%;padding:14px 16px}
/* Feature-Icons (Freight „Platform Highlights") */
.feature{display:flex;flex-direction:column;min-height:236px}
.feature__ico{margin-top:auto;padding-top:40px;display:flex;justify-content:center}
.feature__ico svg{width:38px;height:38px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Step-Icons (nummerierte Steps-Listen) */
.step__ico{margin-bottom:16px}
.step__ico svg{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.step.reveal .step__ico svg,.feature .feature__ico svg{opacity:.92}
/* Schulungsangebot-Kacheln: größere Symbole */
.steps .step__ico{margin-bottom:22px}
.steps .step__ico svg{width:44px;height:44px;stroke-width:1.6}
/* Software-Phone-Mockups (untere Platform-Sektionen) */
.pfeature__mock{display:flex;justify-content:center;position:relative}
.phone{width:300px;max-width:100%;background:#0b0b0d;border-radius:42px;padding:11px;box-shadow:0 44px 84px -30px rgba(0,0,0,.45)}
.phone__screen{background:#f4f5f7;border-radius:32px;overflow:hidden;min-height:540px}
.pm{padding:16px;text-align:left;font-family:var(--sans);color:#0a0a0a}
.pm__top{display:flex;align-items:center;gap:11px;padding:8px 2px 14px;border-bottom:1px solid var(--line)}
.pm__av{width:44px;height:44px;border-radius:12px;flex:0 0 auto;background:#dfe1e4 center/cover no-repeat}
.pm__nm b{font-size:14px;font-weight:500;letter-spacing:-.02em;display:block}
.pm__nm span{font-size:11px;color:var(--gray)}
.pm__badge{margin-left:auto;font-family:var(--mono);font-size:8.5px;color:#16a34a;background:rgba(22,163,74,.12);border-radius:999px;padding:4px 9px;white-space:nowrap}
.pm__sec{font-family:var(--mono);font-size:8.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-lt);margin:16px 2px 8px}
.pm__row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 12px;margin-bottom:8px}
.pm__ic{width:30px;height:30px;border-radius:8px;background:#eef0fb;flex:0 0 auto;display:grid;place-items:center}
.pm__ic svg{width:15px;height:15px;stroke:#3a3f52;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pm__rt{flex:1;min-width:0}
.pm__rt b{font-size:12px;font-weight:500;letter-spacing:-.01em;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm__rt span{font-size:10.5px;color:var(--gray)}
.pm__tag{font-family:var(--mono);font-size:8px;border-radius:999px;padding:4px 8px;white-space:nowrap}
.pm__tag.ok{color:#16a34a;background:rgba(22,163,74,.12)}
.pm__tag.warn{color:var(--accent-ink);background:rgba(232,80,2,.12)}
.pm__tag.mut{color:var(--gray);background:#eceef0}
.pm__field{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:8px}
.pm__field .fl{font-family:var(--mono);font-size:7.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-lt);margin-bottom:3px}
.pm__field .fv{font-size:12px;color:#0a0a0a}
.pm__grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Bild-Scroll-Zoom (Freight: Bilder zoomen beim Scrollen) */
[data-zoom]{overflow:hidden}
[data-zoom] img{will-change:transform;transform:scale(1.02)}
@media (prefers-reduced-motion:reduce){ [data-zoom] img{transform:none!important} }
/* Perspektive nur auf großen Screens; darunter flach, Bühne stapelbar */
@media (max-width:1024px){
.ipad{transform:none;border-radius:22px;padding:11px}
.cockpit-frame{perspective:none}
.cockpit-badge--tr{top:-22px;right:0}
.cockpit-badge--bl{left:0;bottom:-22px}
.cockpit-badge__n{font-size:28px}
}
@media (max-width:900px){
.cockpit-stage{margin-top:44px;padding:0}
.ipad{border-radius:18px;padding:8px}
.ipad__screen{border-radius:12px}
.dash{grid-template-columns:1fr;min-height:0}
.dash__side{display:none}
.dash__split{grid-template-columns:1fr}
.dash__kcol{grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr))}
.dash__kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.cockpit-badge{display:none}
}
@media (prefers-reduced-motion:reduce){ .ipad{transform:rotateX(4deg) rotateY(-6deg)} }
/* Weiße Icon-Variante in dunklen Sektionen */
.hww .step__ico svg,.values .step__ico svg{stroke:#fff}
.hww .step__ico{margin-bottom:14px}
/* HOME-CONVERSION-2026-08-31 */
.hero__overlay{background:linear-gradient(180deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,.16) 42%,rgba(0,0,0,.72) 100%)}
.hero h1{color:#fff}
.hero__trust{display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px;margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.hero__trust .dot{width:4px;height:4px;border-radius:50%;background:var(--accent);display:inline-block}
.hero__more{color:#fff;font-size:15px;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px;white-space:nowrap}
.hero__micro{margin-top:12px;font-size:13px;color:rgba(255,255,255,.78);letter-spacing:-.01em;text-align:right}
@media(max-width:720px){.hero__micro{text-align:left}}
.hero__actions{flex-wrap:wrap;gap:16px 20px}
/* Stats */
.stats{border-bottom:1px solid var(--line)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stats__c{padding:44px var(--pad);border-left:1px solid var(--line)}
.stats__c:first-child{border-left:0}
.stats__n{font-family:var(--sans);font-weight:400;font-size:52px;line-height:1;letter-spacing:-.05em}
.stats__l{margin-top:12px;font-size:14px;line-height:1.5;color:var(--ink-soft);max-width:220px}
@media(max-width:860px){.stats__grid{grid-template-columns:repeat(2,1fr)}.stats__c{border-top:1px solid var(--line)}.stats__c:nth-child(odd){border-left:0}.stats__c:nth-child(-n+2){border-top:0}.stats__n{font-size:40px}}
/* Garantie */
.guar{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:52px}
.guar__c{padding:40px 34px;border-left:1px solid var(--line)}
.guar__c:first-child{border-left:0}
.guar__ico{width:38px;height:38px;color:var(--accent-ink)}
.guar__ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.guar__c h3{font-size:21px;margin:22px 0 10px;letter-spacing:-.02em}
.guar__c p{color:var(--ink-soft);font-size:15px;line-height:1.6}
@media(max-width:860px){.guar{grid-template-columns:1fr}.guar__c{border-left:0;border-top:1px solid var(--line)}.guar__c:first-child{border-top:0}}
/* FAB-SCROLL-GATE-2026-08-31 */
.tel-fab{position:fixed;right:20px;bottom:20px;z-index:75;display:inline-flex;align-items:center;gap:10px;
background:var(--ink);color:#fff;padding:13px 18px 13px 15px;border-radius:999px;font-size:15px;font-weight:500;
letter-spacing:-.01em;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.tel-fab svg{width:21px;height:21px;fill:#fff;flex:0 0 auto}
.tel-fab:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.34)}
.tel-fab:active{transform:scale(.97)}
.tel-fab__t{white-space:nowrap}
.wa-fab,.tel-fab{transition:transform .3s var(--ease),box-shadow .3s,opacity .4s var(--ease)}
.wa-fab:not(.is-visible),.tel-fab:not(.is-visible){opacity:0;transform:translateY(16px);pointer-events:none}
@media(max-width:720px){.tel-fab{bottom:20px;padding:13px}.tel-fab__t{display:none}}
/* TECHBIG-FREIGHT-2026-08-31 : Inline-Bilder rund + Icon-Kreis (wie Freight /) */
.techbig h2 img{width:76px;height:76px;border-radius:50%;margin:0 14px}
.techbig h2 .ic{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;
border-radius:50%;background:#000;vertical-align:middle;margin:0 14px}
.techbig h2 .ic svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:1.6}
@media(max-width:720px){
.techbig h2 img,.techbig h2 .ic{width:46px;height:46px;margin:0 7px}
.techbig h2 .ic svg{width:22px;height:22px}
}
/* ================= HOME-CONVERSION 2026-09-01 (Trust · Offer · Reviews) ================= */
/* Trust-Strip: echte Zahlen + Kundenlogos, direkt unter dem Hero */
.trust{background:var(--white);border-bottom:1px solid var(--line)}
.trust .wrap{padding-top:0;padding-bottom:0}
.trust__stats{display:grid;grid-template-columns:repeat(4,1fr)}
.tstat{padding:40px 24px;border-left:1px solid var(--line);text-align:center}
.tstat:first-child{border-left:0}
.tstat__n{display:block;font-family:var(--sans);font-weight:400;font-size:46px;line-height:1;letter-spacing:-.05em;color:var(--ink)}
.tstat__l{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.trust__logowrap{border-top:1px solid var(--line);padding:30px 0 0}
.trust__caption{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;margin-bottom:0;flex-wrap:wrap}
.trust__caption .eyebrow{color:var(--gray)}
.trust__badges{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap}
.trust__badges img{height:34px;width:auto;filter:grayscale(1) brightness(.55);opacity:.82}
.trust__badges-txt{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);white-space:normal}
@media(max-width:520px){.trust__badges-txt{flex:1 1 100%;font-size:11px}}
/* Kundenlogos: größer & durchlaufend */
.logo-marquee{overflow:hidden;margin-top:26px;padding-bottom:46px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logo-marquee__track{display:flex;align-items:center;gap:66px;width:max-content;animation:logoscroll 42s linear infinite}
.logo-marquee:hover .logo-marquee__track{animation-play-state:paused}
.logo-marquee__track img{height:44px;width:auto;object-fit:contain;filter:grayscale(1) contrast(1.05) brightness(.55);opacity:.78;flex:0 0 auto;transition:opacity .3s var(--ease),filter .3s var(--ease)}
.logo-marquee__track img:hover{filter:grayscale(0);opacity:1}
@keyframes logoscroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.logo-marquee__track{animation:none}}
/* Alt-Statik-Logos (nicht mehr genutzt, Fallback) */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px 40px}
.logos img{height:34px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.5}
/* Offer-Anker in den Leistungs-Kacheln */
/* margin-top:auto zieht Meta+CTAs aller Spalten auf eine gemeinsame Grundlinie (gleiche Höhe) */
.wwd__meta{font-family:var(--mono);font-size:12px;letter-spacing:.01em;color:var(--ink);margin-top:auto;padding-top:22px;border-top:1px solid var(--line)}
.wwd__links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:16px}
.wwd__links .wwd__link{margin-top:0}
.wwd__link--soft{color:var(--ink);background:transparent;border:1px solid var(--line)}
.wwd__link--soft:hover{opacity:1;background:rgba(0,0,0,.04);border-color:var(--ink)}
/* Kundenstimmen */
.reviews__head{max-width:760px}
.reviews__meta{margin-top:16px;font-family:var(--mono);font-size:13px;letter-spacing:.01em;color:var(--gray);display:flex;align-items:center;gap:10px}
.reviews .review-stars{color:var(--accent-ink);letter-spacing:2px;font-size:13px}
.reviews__grid{margin-top:56px;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.rev{background:var(--white);margin:0;padding:38px 34px;display:flex;flex-direction:column;gap:18px}
.rev__stars{color:var(--accent-ink);letter-spacing:3px;font-size:14px}
.rev blockquote{margin:0;font-family:var(--sans);font-weight:400;font-size:20px;line-height:1.4;letter-spacing:-.02em;color:var(--ink)}
.rev blockquote::before{content:"\201C"}
.rev blockquote::after{content:"\201D"}
.rev figcaption{margin-top:auto;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--gray)}
@media(max-width:820px){
.trust__stats{grid-template-columns:repeat(2,1fr)}
.tstat{border-left:0;border-top:1px solid var(--line);padding:30px 16px}
.tstat:first-child,.tstat:nth-child(2){border-top:0}
.tstat:nth-child(odd){border-right:1px solid var(--line)}
.tstat__n{font-size:38px}
.trust__caption{flex-direction:column;align-items:flex-start;gap:14px}
.logos{justify-content:flex-start;gap:22px 30px}
.logos img{height:26px}
.logo-marquee__track{gap:44px}
.logo-marquee__track img{height:36px}
.reviews__grid{grid-template-columns:1fr}
.rev blockquote{font-size:18px}
.hero__micro{text-align:left}
}
/* ===== LP: Termine-Fallback (immer ein Buchungsweg, auch ohne Live-API) ===== */
.trm-fallback{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
border:1px solid var(--line);border-radius:2px;padding:30px 32px;background:var(--white)}
.trm-fallback__txt b{display:block;font-family:var(--sans);font-weight:400;font-size:22px;letter-spacing:-.03em;color:var(--ink)}
.trm-fallback__txt span{display:block;margin-top:8px;font-size:15px;line-height:1.5;color:var(--gray);max-width:52ch}
.trm-fallback__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
@media(max-width:720px){.trm-fallback{padding:24px 20px}.trm-fallback__txt b{font-size:19px}}
/* ===== LP: Prüfungsangst-/Bestehensgarantie-Sektion ===== */
.pa__lead{max-width:62ch;font-size:19px;line-height:1.55;color:var(--ink-soft);margin-top:6px;letter-spacing:-.01em}
.pa .step__n{color:var(--accent-ink)}
/* ============================================================
PREIS-RECHNER (eingebettet, gamifiziert, Ergebnis nach E-Mail)
Markup pro Seite:
============================================================ */
.prc-mount{background:var(--ink);color:#fff;padding:96px var(--pad)}
.prc-mount .wrap{max-width:820px;margin:0 auto}
.prc{position:relative}
.prc__eyebrow{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.6);display:block}
.prc__eyebrow::before{content:"+ "}
.prc__title{font-family:var(--sans);font-weight:400;font-size:clamp(30px,4vw,44px);letter-spacing:-.04em;line-height:1.05;margin:12px 0 30px;color:#fff}
.prc__bar{height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.prc__fill{display:block;height:100%;width:25%;background:var(--accent);border-radius:3px;transition:width .5s var(--ease)}
.prc__stepno{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.55);margin-top:12px}
.prc__stepno b{color:#fff}
.prc__stage{margin-top:26px;min-height:230px}
.prc__step h3{font-family:var(--sans);font-weight:400;font-size:26px;letter-spacing:-.03em;color:#fff;margin-bottom:20px}
.prc__sub{font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.72);max-width:56ch;margin:-8px 0 22px}
.prc__chips{display:flex;flex-wrap:wrap;gap:10px}
.prc__chip{font-family:var(--sans);font-size:15px;letter-spacing:-.01em;color:#fff;background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:12px 20px;cursor:pointer;
transition:background .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease)}
.prc__chip:hover{background:rgba(255,255,255,.13)}
.prc__chip:active{transform:scale(.97)}
.prc__chip.on{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.prc__quick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.prc__stepper{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.22);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.04)}
.prc__stepper button{width:54px;height:56px;font-size:24px;color:#fff;background:transparent;cursor:pointer;transition:background .16s}
.prc__stepper button:hover{background:rgba(255,255,255,.12)}
.prc__stepper input{width:88px;height:56px;text-align:center;border:0;border-left:1px solid rgba(255,255,255,.18);border-right:1px solid rgba(255,255,255,.18);
font-size:21px;font-family:var(--sans);background:transparent;color:#fff;-moz-appearance:textfield}
.prc__stepper input::-webkit-outer-spin-button,.prc__stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.prc__hint{font-size:14px;line-height:1.5;color:rgba(255,255,255,.62);margin-top:16px;max-width:52ch}
.prc__nav{display:flex;gap:12px;align-items:center;margin-top:30px}
.prc__back{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.6);background:transparent;cursor:pointer;padding:12px 4px}
.prc__back:hover{color:#fff}
.prc__next,.prc__submit{display:inline-flex;align-items:center;gap:10px;background:var(--accent-ink);color:#fff;border:0;border-radius:999px;
padding:14px 26px;font-size:15px;letter-spacing:-.02em;cursor:pointer;transition:opacity .2s,transform .12s}
.prc__next:hover,.prc__submit:hover{opacity:.9}
.prc__next:active,.prc__submit:active{transform:scale(.98)}
.prc__form{display:flex;flex-direction:column;gap:12px;max-width:440px}
.prc__form input{height:54px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);
color:#fff;padding:0 18px;font-size:16px;font-family:var(--sans)}
.prc__form input::placeholder{color:rgba(255,255,255,.5)}
.prc__form input:focus{outline:none;border-color:var(--accent-ink)}
.prc__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.prc__submit{justify-content:center;height:56px;margin-top:2px}
.prc__legal{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.5);margin-top:14px;max-width:44ch}
.prc__err{font-size:13px;color:var(--accent-ink);margin-top:2px;min-height:16px}
/* Ergebnis */
.prc__result{text-align:left}
.prc__rk{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.6)}
.prc__price{font-family:var(--sans);font-weight:400;letter-spacing:-.04em;line-height:1;font-size:clamp(52px,9vw,84px);margin:12px 0 6px;color:#fff}
.prc__per{font-size:16px;color:rgba(255,255,255,.82)}
.prc__discnote{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:#fff;background:rgba(232,80,2,.16);border:1px solid rgba(232,80,2,.5);border-radius:999px;padding:7px 14px}
.prc__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.prc__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:15px 26px;font-size:15px;letter-spacing:-.02em;transition:opacity .2s,transform .12s}
.prc__btn:active{transform:scale(.98)}
.prc__btn--p{background:var(--accent-ink);color:#fff}
.prc__btn--p:hover{opacity:.9}
.prc__btn--wa{background:#25d366;color:#0a0a0a}
.prc__btn--wa:hover{opacity:.9}
.prc__btn--wa svg{width:18px;height:18px;fill:currentColor}
.prc__book{align-self:center;font-size:13.5px;color:rgba(255,255,255,.65);border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px}
.prc__restart{margin-top:22px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.6);background:transparent;cursor:pointer}
.prc__restart:hover{color:#fff}
.prc__disclaim{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.5);margin-top:22px;max-width:60ch}
@media (max-width:720px){
.prc-mount{padding:64px 20px}
.prc__step h3{font-size:22px}
.prc__cta{flex-direction:column;align-items:stretch}
.prc__btn{width:100%}
}
/* ============ NAV: drei Hauptbereiche am Desktop + Schulungs-Menü (24.09.2026) ============
Am Desktop stehen Akademie · Beratung · Prüfung direkt in der Leiste, der Burger
bleibt für das volle Menü. Unter „Akademie" klappen die sechs Schulungen auf, damit
niemand erst die Übersicht lesen muss, um zum Staplerschein zu kommen.
Unter 1025px bleibt alles wie vorher: nur Burger. */
.nav__mid{display:flex;align-items:center;gap:44px}
.nav__links{display:none;list-style:none;margin:0;padding:0;align-items:center;gap:32px}
.nav__links>li{position:relative;display:flex;align-items:center}
.nav__link{position:relative;font-size:15px;letter-spacing:-.02em;line-height:1;padding:8px 0}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:currentColor;
transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover){.nav__link:hover::after{transform:scaleX(1)}}
.nav__caret{display:grid;place-items:center;width:24px;height:32px;margin-left:1px;color:inherit;cursor:pointer}
.nav__caret svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.nav__dd.is-open .nav__caret svg{transform:rotate(180deg)}
/* padding-top statt margin: die Lücke zwischen Link und Panel bleibt „hover-bar",
sonst schließt das Menü, sobald die Maus nach unten fährt. */
.nav__panel{position:absolute;top:100%;left:-24px;padding-top:14px;opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .16s var(--ease),transform .2s var(--ease),visibility 0s linear .2s}
.nav__dd:hover .nav__panel,.nav__dd:focus-within .nav__panel,.nav__dd.is-open .nav__panel{
opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav__dd.is-shut .nav__panel{opacity:0;visibility:hidden}
.nav__panel-in{width:560px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:16px;
padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.16)}
.nav__plabel{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--gray);margin:4px 0 10px 12px}
.nav__pgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.nav__pgrid a{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:10px;transition:background .18s var(--ease)}
.nav__pgrid a:hover,.nav__pgrid a:focus-visible,.nav__pgrid a[aria-current="page"]{background:var(--bg)}
.nav__pgrid b{font-weight:500;font-size:16px;letter-spacing:-.02em;color:var(--ink)}
.nav__pgrid span{font-size:13px;line-height:1.35;color:var(--gray);letter-spacing:-.01em}
.nav__pfoot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;border-top:1px solid var(--line);
margin-top:10px;padding:14px 12px 4px;font-size:14px;letter-spacing:-.01em}
.nav__pfoot a{color:var(--ink)}
.nav__pfoot a:last-child{color:var(--accent-ink)}
@media (hover:hover){.nav__pfoot a:hover{text-decoration:underline;text-underline-offset:3px}}
@media (min-width:1025px){.nav__links{display:flex}}
@media (prefers-reduced-motion:reduce){.nav__panel,.nav__link::after,.nav__caret svg{transition:none}}
/* Burger-Menü: Schulungen + Gratis-Tools als kleine Zeilen unter den Kontakt-Knöpfen.
Die sechs Hauptpunkte links bleiben unverändert. */
.menu__more{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.menu__more .menu__label{margin-bottom:10px}
.menu__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.menu__chips a{font-size:14px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink);transition:background .2s var(--ease)}
.menu__chips a:active{transform:scale(.97)}
@media (hover:hover){.menu__chips a:hover{background:rgba(0,0,0,.05)}}
.menu__cols a[aria-current="page"]{color:var(--accent-ink)}
/* ============ LERNWELT: kostenloser Zugang gegen Name + E-Mail (24.09.2026) ============
Block steht auf allen Kursseiten, Landingpages und Kurs-Stadtseiten. Der Kurs kommt
aus data-kurs am , auf der Akademie-Seite wählt der Besucher selbst.
Formular → send/lernwelt.php → App (lernwelt_gast) legt den Gastzugang an. */
.lw{background:var(--ink);color:#fff}
.lw .wrap{padding-top:112px;padding-bottom:112px}
.lw__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center}
.lw .eyebrow{color:rgba(255,255,255,.62)}
.lw__h{font-family:var(--sans);font-weight:400;font-size:56px;line-height:1.02;letter-spacing:-.055em;color:#fff;margin:20px 0 22px}
.lw__h span{color:rgba(255,255,255,.42)}
.lw__lead{font-size:18px;line-height:1.55;color:rgba(255,255,255,.72);max-width:34em;letter-spacing:-.01em}
.lw__lead b{color:#fff;font-weight:500}
.lw__pick{display:flex;flex-wrap:wrap;gap:6px;margin-top:28px}
.lw__pick button{font-size:14px;padding:10px 14px;min-height:40px;border:1px solid var(--line-light);border-radius:999px;color:rgba(255,255,255,.75);
cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),transform .16s var(--ease)}
.lw__pick button:active{transform:scale(.97)}
.lw__pick button[aria-pressed="true"]{background:#fff;color:var(--ink);border-color:#fff}
@media (hover:hover){.lw__pick button:not([aria-pressed="true"]):hover{background:rgba(255,255,255,.1);color:#fff}}
.lw__facts{display:flex;flex-wrap:wrap;gap:22px 44px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line-light)}
.lw__n{font-size:34px;letter-spacing:-.05em;line-height:1;color:#fff}
.lw__l{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:rgba(255,255,255,.55);margin-top:9px}
.lw__card{background:rgba(255,255,255,.05);border:1px solid var(--line-light);border-radius:18px;padding:34px}
.lw__price{font-size:64px;letter-spacing:-.06em;line-height:1;color:#fff}
.lw__sub{font-size:15px;line-height:1.5;color:rgba(255,255,255,.62);margin:12px 0 24px}
.lw__form .field{margin-bottom:10px}
.lw__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lw__submit{width:100%;justify-content:center;margin-top:6px;border:0;cursor:pointer;font-family:var(--sans)}
.lw__submit[disabled]{opacity:.6;cursor:wait}
.lw__submit:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lw__note{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.48);margin-top:14px;text-align:center}
.lw__note a{color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:2px}
.lw__err{font-size:14px;color:var(--accent-ink);margin-top:12px;text-align:center}
.lw__err:empty{display:none}
.lw__done{text-align:center}
.lw__done[hidden],.lw__form[hidden]{display:none}
.lw__done h3{font-family:var(--sans);font-weight:400;font-size:30px;letter-spacing:-.04em;color:#fff;margin:0 0 10px}
.lw__done p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.65);margin:0 0 24px}
.lw__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1024px){.lw__grid{grid-template-columns:1fr;gap:44px}.lw__h{font-size:44px}}
@media (max-width:720px){.lw .wrap{padding-top:76px;padding-bottom:76px}.lw__h{font-size:36px}.lw__card{padding:26px 20px}.lw__price{font-size:52px}.lw__facts{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}}
/* Lernwelt-Block: Direktstart-Karte (seit 2026-10-12, Formular kommt erst im Player) */
.lw__start{padding:14px 14px 30px;display:flex;flex-direction:column}
.lw__shot{position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:#1c1c1c}
.lw__shot img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform .8s var(--ease),opacity .3s}
.lw__shot:hover img{transform:scale(1.04);opacity:1}
.lw__badge{position:absolute;left:12px;top:12px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#fff;
background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:6px 11px}
.lw__m1{font-family:var(--sans);font-weight:400;font-size:30px;line-height:1.08;letter-spacing:-.045em;color:#fff;margin:26px 20px 0}
.lw__start .lw__sub{margin:12px 20px 26px}
.lw__go{margin:0 20px;justify-content:center}
.lw__go:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lw__more{align-self:center;margin-top:18px;font-size:14px;color:rgba(255,255,255,.62);border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:1px}
.lw__more:hover{color:#fff}
@media (max-width:720px){.lw__start{padding:10px 10px 24px}.lw__m1{font-size:25px;margin:22px 12px 0}.lw__start .lw__sub{margin:10px 12px 22px}.lw__go{margin:0 12px}}
/* ===================== FAQ-VIDEO (Stapler / Kran), 2026-09-26 ===================== */
.fvid__frame{position:relative;margin:40px 0 0;aspect-ratio:16/9;background:var(--black);border-radius:16px;overflow:hidden;isolation:isolate}
.fvid__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--black)}
.fvid__play{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:28px 32px;color:#fff;
background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 45%);transition:opacity .35s var(--ease)}
.fvid__btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--sans);font-size:20px;letter-spacing:-.02em}
.fvid__circle{width:64px;height:64px;border-radius:50%;background:#F9F9F9;color:var(--ink);display:grid;place-items:center;
transition:transform .35s var(--ease),background .25s var(--ease)}
.fvid__circle svg{width:22px;height:22px;margin-left:3px;fill:currentColor}
.fvid__play:hover .fvid__circle{transform:scale(1.06)}
.fvid__play:active .fvid__circle{transform:scale(.97)}
.fvid__play:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.fvid__meta{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;opacity:.8}
.fvid.is-playing .fvid__play{opacity:0;pointer-events:none}
.fvid__note{margin-top:14px;font-size:14px;color:var(--gray)}
@media (max-width:760px){
.fvid__frame{border-radius:12px;margin-top:28px}
.fvid__play{padding:18px}
.fvid__circle{width:52px;height:52px}
.fvid__btn{font-size:16px;white-space:nowrap}
.fvid__meta{display:none}
}
@media (prefers-reduced-motion:reduce){ .fvid__play,.fvid__circle{transition:none} }
/* FAQ-Video: Scroll-Effekt + Autoplay stumm + "Ton an" (2026-09-26 b) */
.fvid__frame{transform:scale(.94);transition:transform 1.2s var(--ease),border-radius 1.2s var(--ease)}
.fvid.in-view .fvid__frame{transform:none}
.fvid__sound{position:absolute;left:24px;bottom:24px;z-index:3;display:inline-flex;align-items:center;gap:10px;
padding:12px 18px 12px 14px;border-radius:999px;background:rgba(249,249,249,.92);color:var(--ink);
font-family:var(--sans);font-size:16px;letter-spacing:-.01em;opacity:0;transform:translateY(8px);pointer-events:none;
transition:opacity .35s var(--ease),transform .35s var(--ease),background .2s var(--ease);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.fvid__sound svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fvid__sound:hover{background:#fff}
.fvid__sound:active{transform:scale(.97)}
.fvid__sound:focus-visible{outline:2px solid #fff;outline-offset:3px}
.fvid.is-auto .fvid__play{opacity:0;pointer-events:none}
.fvid.is-auto .fvid__sound{opacity:1;transform:none;pointer-events:auto}
.fvid.is-auto .fvid__video{cursor:pointer}
@media (max-width:760px){ .fvid__sound{left:14px;bottom:14px;font-size:14px;padding:10px 14px 10px 12px} }
@media (prefers-reduced-motion:reduce){ .fvid__frame{transform:none;transition:none} .fvid__sound{transition:none} }
/* ============================================================
WEISSRAUM-FIX + FREIGHT-STATEMENT (2026-09-26 c)
============================================================ */
/* Sektionen mit style="padding-top:0" verlassen sich auf das untere Padding
der Vorgängersektion. Nach einem Block mit eigener Fläche (Lernwelt, dunkle
Werte, Trust-Leiste) fehlt dieser Abstand, der Text klebt an der Kante.
Hier bekommt die Folgesektion ihren Abstand zurück. */
.lw + .section, .values + .section, .values + .wrap,
.trust + .section, .ticker + .section, .prc-mount + .section{padding-top:120px!important}
@media (max-width:720px){
.lw + .section, .values + .section, .values + .wrap,
.trust + .section, .ticker + .section, .prc-mount + .section{padding-top:72px!important}
}
/* Schlüsselwörter im Wort-Scroll-Satz: wird schwarz, Rest bleibt grau */
.wordcolor b,.pstmt b{font-weight:inherit;color:var(--ink)}
.has-key .rw{color:#c8c8c8}
.has-key .rw.key{color:var(--ink)}
@media (prefers-reduced-motion:reduce){ .has-key .rw:not(.key){color:var(--gray)!important} }
/* Freight-Statement: Bild links bis an den Rand, großes Statement, [01]–[03] */
.fx{padding:140px 0}
.fx__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,9fr);gap:0 clamp(40px,6vw,88px);align-items:start;
padding-right:max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad)))}
.fx__img{aspect-ratio:4/5;overflow:hidden;background:#e5e7eb;border-radius:0 4px 4px 0}
.fx__img img{width:100%;height:100%;object-fit:cover;display:block}
.fx__body{padding-top:4px}
.fx__body .eyebrow{display:block;margin-bottom:28px;color:var(--gray)}
.fx__stmt{font-family:var(--sans);font-weight:400;font-size:clamp(34px,3.9vw,58px);line-height:1.08;
letter-spacing:-.045em;color:var(--ink-soft);max-width:960px;text-wrap:pretty}
.fx__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:120px}
.fx__col{border-left:1px solid var(--line);padding:4px 0 4px 24px;display:flex;flex-direction:column;min-height:300px}
.fx__n{font-family:var(--mono);font-size:13px;color:var(--ink);letter-spacing:.02em}
.fx__col h3{font-family:var(--sans);font-weight:400;font-size:28px;letter-spacing:-.03em;color:var(--ink);margin-top:18px}
.fx__col p{margin-top:auto;padding-top:40px;font-size:17px;line-height:1.5;color:var(--ink-soft);max-width:34ch}
@media (max-width:1100px){
.fx__cols{gap:24px;margin-top:80px}
.fx__col{padding-left:18px;min-height:260px}
.fx__col h3{font-size:24px}
.fx__col p{font-size:16px}
}
@media (max-width:860px){
.fx__grid{grid-template-columns:1fr;padding:0 var(--pad);gap:48px}
.fx__img{aspect-ratio:3/2;max-height:60vh;border-radius:4px}
.fx__cols{margin-top:64px}
}
@media (max-width:720px){
.fx{padding:72px 0}
.fx__grid{gap:40px}
.fx__cols{grid-template-columns:1fr;gap:36px;margin-top:48px}
.fx__col{min-height:0}
.fx__col p{padding-top:14px}
}
/* ============================================================
SCHULUNGSZENTRUM-FILM (.sroom) — 2026-09-26
Scroll-Reveal nach fluid.glass/Showroom: Film startet als kleines Fenster
und wächst beim Scrollen bis Vollbild (clip-path, kein [data-scale] → kein
Konflikt mit site.js). Headline, Adresse und Button bleiben stehen.
Werte für --sr-* setzt site.js; ohne JS / bei reduzierter Bewegung: Vollbild, statisch.
============================================================ */
.sroom{position:relative;height:250vh;height:250svh;background:#0a0a0a;color:#fff}
.sroom__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.sroom__head{position:absolute;left:var(--pad);right:var(--pad);top:88px;z-index:3;
border-top:1px solid var(--line-light);padding-top:22px;display:flex;justify-content:space-between;align-items:center}
.sroom__head .eyebrow{color:#fff}
.sroom__head .eyebrow::before{content:"+ "}
.sroom__toggle{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.02em;color:rgba(255,255,255,.7);
background:none;border:0;padding:6px 0;cursor:pointer;transition:color .2s var(--ease)}
.sroom__toggle:hover{color:#fff}
.sroom__toggle:focus-visible{outline:2px solid #fff;outline-offset:4px}
.sroom__media{position:absolute;inset:0;z-index:1;overflow:hidden;background:#111;
clip-path:inset(var(--sr-t,0px) var(--sr-x,0px) var(--sr-b,0px) var(--sr-x,0px));will-change:clip-path}
.sroom__media video,.sroom__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transform:scale(var(--sr-s,1));transform-origin:50% 50%;will-change:transform}
.sroom__shade{position:absolute;inset:0;background:#000;opacity:var(--sr-shade,.45);pointer-events:none}
.sroom__copy{position:absolute;left:var(--pad);right:var(--pad);bottom:56px;z-index:3;
display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.sroom__copy h2{font-family:var(--sans);font-weight:400;font-size:clamp(40px,4.6vw,72px);line-height:1.02;
letter-spacing:-.045em;color:#fff;max-width:11ch;text-wrap:balance}
.sroom__aside{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:10px}
.sroom__aside .eyebrow{color:#fff}
.sroom__addr{font-size:18px;line-height:1.3;letter-spacing:-.02em;color:rgba(255,255,255,.82);font-style:normal}
.sroom__aside .btn-light{margin-top:18px}
/* Ohne Scroll-Animation: normale Sektion in Bildschirmhöhe */
.sroom.is-static{height:auto}
.sroom.is-static .sroom__pin{position:relative}
.sroom.is-static .sroom__media{clip-path:none}
@media (max-width:860px){
.sroom{height:210vh;height:210svh}
.sroom__head{top:76px}
.sroom__copy{flex-direction:column;align-items:flex-start;gap:26px;bottom:36px}
.sroom__copy h2{font-size:clamp(34px,9vw,48px)}
.sroom__aside{align-items:flex-start;text-align:left}
.sroom__addr{font-size:16px}
.sroom__aside .btn-light{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){
.sroom{height:auto}
.sroom__pin{position:relative}
.sroom__media{clip-path:none}
.sroom__media video,.sroom__media img{transform:none}
}
/* ============ LANDINGPAGES MOBIL (01.10.2026) ============
Gilt nur für (alle *-lp.html + cockpit-zugang).
Die Sticky-Leiste erscheint erst nach dem Hero und verschwindet über dem
Formular (site.js setzt body.lp-sticky-on), damit sie nie die Hero-Buttons
oder das Formular verdeckt. */
@media (max-width:720px){
.is-lp .sticky-cta{transform:translateY(110%);transition:transform .32s var(--ease);
padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.is-lp.lp-sticky-on .sticky-cta{transform:none}
.is-lp .sticky-cta span{font-size:14px;line-height:1.3}
.is-lp .sticky-cta .btn-pill{min-height:44px;display:inline-flex;align-items:center}
.is-lp:not(.lp-sticky-on) .wa-fab{bottom:20px}
.is-lp .wa-fab{transition:transform .3s var(--ease),box-shadow .3s,opacity .4s var(--ease),bottom .32s var(--ease)}
.is-lp .nav{padding-top:18px;padding-bottom:18px}
.is-lp .nav__wa{display:none}
.is-lp .nav__mid{margin-left:auto}
.is-lp .hero__bottom{bottom:calc(32px + env(safe-area-inset-bottom,0px))}
.is-lp .hero h1{font-size:clamp(34px,10.4vw,42px);line-height:1.02}
.is-lp .hero__aside{gap:16px;margin-top:18px}
.is-lp .hero__note{font-size:17px;line-height:1.38;max-width:none}
.is-lp .bk-proof{font-size:13px;margin-top:4px}
.is-lp .bk-b2b{font-size:13px;line-height:1.5;margin-top:4px}
.is-lp .lp-hero-actions{gap:10px;margin-top:4px;width:100%}
.is-lp .lp-hero-actions>a{flex:1 1 100%;justify-content:center;min-height:52px;text-align:center}
.is-lp .cta .lp-hero-actions>a.btn-pill{flex:1 1 calc(50% - 5px)}
.is-lp .cta{height:auto;min-height:520px;padding:96px 0}
.is-lp .cta__inner{width:100%;padding:0 var(--pad)}
.is-lp .form-row{gap:0 16px}
.is-lp .lp-trust{flex-direction:column;align-items:flex-start;gap:8px}
.is-lp .lp-trust .sep{display:none}
.is-lp .wege__cta{padding:12px 0 6px}
.is-lp .bk-note a,.is-lp .faq__item a{display:inline-block;padding:4px 0}
.is-lp .footer{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
.is-lp .bk-foot nav{gap:4px 20px}
.is-lp .bk-foot nav a{padding:10px 0}
}
/* ---- LP-Hero ab Tablet: Text, Bewertung und Buttons direkt unter der Headline (01.10.2026) ----
Vorher stand der Erklärtext rechts neben der Headline. Jetzt eine Spalte, linksbündig. */
@media (min-width:721px){
.is-lp .hero__bottom{bottom:clamp(40px,6vh,64px)}
.is-lp .hero h1{max-width:1100px;font-size:clamp(48px,min(6.4vw,9vh),80px)}
.is-lp .hero__aside{position:static;align-items:flex-start;max-width:640px;width:auto;gap:18px;margin-top:clamp(18px,3vh,28px)}
.is-lp .hero__note{max-width:600px;font-size:clamp(18px,2.3vh,21px);line-height:1.35}
.is-lp .bk-proof{margin-top:0}
.is-lp .lp-hero-actions{margin-top:4px}
.is-lp .bk-b2b{margin-top:0}
}
/* ═══ TEILNAHMEPAKET (2026-10-11): Schulungsmappe als Teil des Kurspreises ═══ */
.tpk__fig{margin:0;border-radius:18px;overflow:hidden;background:#0b0b0b}
.tpk__fig img{display:block;width:100%;height:auto}
.tpk__fig--wide{margin-top:60px}
.tpk .metrics{margin-top:18px}
.tpk .metric b{font-size:48px}
.tpk .steps{margin-top:18px}
.tpk__fig--card{max-width:500px;justify-self:center;width:100%;background:transparent;border-radius:0;-webkit-mask-image:radial-gradient(72% 68% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(72% 68% at 50% 50%,#000 62%,transparent 100%)}
.tpk-tag{display:flex;align-items:center;gap:9px;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.tpk-tag i{flex:0 0 auto;width:11px;height:15px;border-radius:1.5px;background:#2B2C2D;box-shadow:0 1px 3px rgba(0,0,0,.3);position:relative}
.tpk-tag i::after{content:"";position:absolute;left:2px;top:3px;width:1.5px;height:9px;background:#BABEC1;opacity:.8}
@media (max-width:720px){
.tpk__fig--wide{margin-top:36px;border-radius:14px}
.tpk__fig--wide img{aspect-ratio:4/3;object-fit:cover;object-position:62% 50%}
.tpk .metric b{font-size:34px}
.tpk .metrics{grid-template-columns:repeat(2,1fr)}
.tpk .metric{padding:24px 14px;border-bottom:1px solid var(--line)}
.tpk .metric:nth-child(odd){border-right:1px solid var(--line)}
.tpk .metric:nth-child(n+3){border-bottom:0}
.tpk .metric span{font-size:13px}
.tpk__fig--card{max-width:360px}
}
/* ============ LERNWELT SICHTBAR (2026-10-12) ============
Nav-Punkt mit „0 €“, Menüpunkt, Hinweis im Kopfbereich der Kursseiten.
Skript: _tools/lernwelt/sichtbarkeit.py */
.nav__free{display:inline-flex;align-items:center;gap:7px}
.nav__free span{font-family:var(--mono);font-size:10px;line-height:1;letter-spacing:.02em;padding:4px 6px 3px;border-radius:999px;background:var(--accent-ink);color:#fff}
.menu__cols{grid-template-rows:repeat(4,auto)}
.menu__free{display:inline-flex;align-items:flex-start;gap:10px}
.menu__free span{font-family:var(--mono);font-size:12px;line-height:1;letter-spacing:.02em;padding:5px 8px 4px;border-radius:999px;background:var(--accent-ink);color:#fff;margin-top:.55em}
.hero-free{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:7px 16px 7px 7px;border-radius:999px;
background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.24);
color:#fff;font-size:15px;line-height:1.25;letter-spacing:-.01em;max-width:100%;transition:background .2s var(--ease),transform .16s var(--ease)}
.hero-free:active{transform:scale(.98)}
@media (hover:hover){.hero-free:hover{background:rgba(255,255,255,.2)}}
.hero-free__tag{flex-shrink:0;font-family:var(--mono);font-size:11px;letter-spacing:.02em;padding:7px 10px 6px;border-radius:999px;background:var(--accent);color:#fff}
.hero-free__go{flex-shrink:0;opacity:.8}
.phero--light .hero-free{background:#fff;color:var(--ink);border-color:var(--line)}
.vhero__in>.hero-free{display:flex;width:max-content}
.hero__aside .hero-free{margin-top:0}
@media (max-width:720px){.hero-free{font-size:14px;margin-top:18px}}
/* ============ CONVERSION-FUNNEL (2026-10-16) ============
Hero mit Angebot + Buchungs-CTA, Kurs-Kacheln (Schritt 1), Team-Angebot inhouse,
Ergebnis/Bestehensgarantie (.guar), Rezensions-Quelle. */
.hero__eyebrow{display:block;margin-bottom:18px;color:rgba(255,255,255,.86)}
.hero__micro a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hero__stars{color:#fff;font-weight:500}
.hero .btn-light{font-weight:500}
.kurse{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.kurs{display:flex;flex-direction:column;gap:10px;padding:28px 26px 24px;background:#fff;border:1px solid var(--line);border-radius:18px;color:var(--ink);transition:transform .2s var(--ease),border-color .2s var(--ease)}
@media (hover:hover){.kurs:hover{transform:translateY(-3px);border-color:var(--ink)}}
.kurs__norm{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--gray)}
.kurs h3{font-size:26px;font-weight:400;letter-spacing:-.04em;line-height:1.05}
.kurs p{font-size:15px;line-height:1.45;color:var(--ink-soft)}
.kurs__meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:15px;color:var(--ink)}
.kurs__go{font-size:15px;color:var(--accent-ink)}
.kurse__foot{margin-top:26px;font-size:15px;color:var(--ink-soft)}
.kurse__foot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.team-offer{display:grid;grid-template-columns:1.4fr 1fr;gap:28px 48px;align-items:center;margin-top:40px;padding:36px;border-radius:18px;background:var(--ink);color:#fff}
.team-offer .eyebrow{color:rgba(255,255,255,.7)}
.team-offer h3{margin-top:14px;font-size:28px;font-weight:400;letter-spacing:-.04em;line-height:1.1}
.team-offer p{margin-top:12px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.8)}
.team-offer p b{color:#fff;font-weight:500}
.team-offer__act{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.team-offer__tel{color:#fff;font-size:15px;text-decoration:underline;text-underline-offset:3px}
.reviews__src{color:inherit;text-decoration:underline;text-underline-offset:3px}
.guar-sec .guar{margin-top:40px}
@media (max-width:900px){.kurse{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){
.kurse{grid-template-columns:1fr;gap:12px;margin-top:32px}
.kurs{padding:22px 20px 20px}
.kurs h3{font-size:24px}
.team-offer{grid-template-columns:1fr;padding:26px 22px}
.team-offer h3{font-size:23px}
.hero__eyebrow{margin-bottom:14px;font-size:11px}
}
/* ============ DESIGN-KOHÄRENZ (2026-10-16) ============
Regeln, an die sich jeder neue Block hält:
· Buttons: ein Format. Orange (.btn-accent) = Hauptaktion (buchen, anfragen).
Schwarz (.btn-dark, .btn-black = Alias) = Nebenaktion auf hell. Weiß (.btn-light) = Nebenaktion auf dunkel.
Glas (.btn-pill) nur über Foto/Video.
· Radien: Interaktives (Buttons, Chips, Badges) = Pill. Container/Karten = 16px.
Bilder in Containern = 12px. Eingabefelder + kleine UI = 8px. Geräte-Mockups ausgenommen.
· Flächen: Seite hell (--bg), Karten/Blöcke weiß. Dunkel nur Hero (Foto/Video), Schulungszentrum-Film, Footer.
· Auswahl-Chips: weiß mit Linie, aktiv = Schwarz (Preis-Rechner und Lernwelt gleich).
· Eyebrows sparsam: höchstens jeder dritte Abschnitt, nie im Hero.
· Icons: Linie 1.6. Sterne in Textfarbe, kein Gelb. */
/* Buttons: ein Format */
.btn-accent,.btn-dark,.btn-black,.btn-light,.btn-pill,.techbig .btn-black,.prc__next,.prc__submit,.prc__btn{
padding:14px 24px;font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.2;border-radius:999px}
.btn-black{background:var(--ink);color:#fff}
.btn-black:hover{opacity:.86}
.prc__btn--wa{background:var(--ink);color:#fff}
.menu__btn{border-radius:999px}
/* Radien */
.step,.trm,.feature,.branche,.loc-banner,.rel-card,.guar,.lw__card,.kurs,.team-offer,.tpk__fig,.tpk__fig--wide,
.book__frame,.hero__price,.vstack,.path,.avm-card,.st-card,.nav__panel-in,.fvid__frame,.trm-fallback,.quote{border-radius:16px}
.lw__shot,.pfeature__img,.split__img,.article-cover img,.vcol__img,.card__img,.member__img{border-radius:12px}
.field input,.field textarea,.prc__form input,.prc__stepper,.wwd__ico{border-radius:8px}
/* Abschnittskopf ohne Eyebrow: Statement über volle Breite */
.section-head:not(:has(>.eyebrow)){grid-template-columns:1fr}
/* Helle Blöcke statt Farbwechsel: Cockpit, Preis-Rechner, Lernwelt */
.prc-mount{background:#fff;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prc__eyebrow,.prc__stepno,.prc__hint,.prc__back,.prc__legal,.prc__rk,.prc__restart,.prc__disclaim{color:var(--gray)}
.prc__title,.prc__step h3,.prc__stepno b,.prc__price{color:var(--ink)}
.prc__sub,.prc__per{color:var(--ink-soft)}
.prc__bar{background:var(--line)}
.prc__back:hover,.prc__restart:hover{color:var(--ink)}
.prc__chip,.lw__pick button{color:var(--ink-soft);background:#fff;border:1px solid var(--line)}
.prc__chip:hover{background:var(--bg)}
.prc__chip.on,.lw__pick button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
@media (hover:hover){.lw__pick button:not([aria-pressed="true"]):hover{background:var(--bg);color:var(--ink)}}
.prc__stepper{border-color:var(--line);background:#fff}
.prc__stepper button{color:var(--ink)}
.prc__stepper button:hover{background:var(--bg)}
.prc__stepper input{color:var(--ink);border-color:var(--line)}
.prc__form input{border-color:var(--line);background:#fff;color:var(--ink)}
.prc__form input::placeholder{color:var(--gray)}
.prc__discnote{color:var(--accent-ink);background:rgba(232,80,2,.07);border-color:rgba(196,61,0,.35)}
.prc__book{color:var(--ink-soft);border-bottom-color:var(--line)}
.lw{background:#fff;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lw .eyebrow,.lw__l,.lw__note{color:var(--gray)}
.lw__h,.lw__lead b,.lw__n,.lw__price,.lw__m1,.lw__done h3{color:var(--ink)}
.lw__h span{color:var(--gray-lt)}
.lw__lead,.lw__sub,.lw__done p{color:var(--ink-soft)}
.lw__facts{border-top-color:var(--line)}
.lw__card{background:var(--bg);border-color:var(--line)}
.lw__shot{background:#e5e7eb}
.lw__note a{color:var(--ink)}
.lw__more{color:var(--ink-soft);border-bottom-color:var(--line)}
.lw__more:hover{color:var(--ink)}
.lw__go:focus-visible,.lw__submit:focus-visible{outline-color:var(--ink)}
.prc-mount + .lw{border-top:0}
/* Einheitlicher Medien-Hero für Schulungs- und Orts-Seiten (vorher 374 Inline-Kopien + 2 Vorlagen) */
.vhero{position:relative;min-height:82vh;min-height:82dvh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);color:#fff}
.vhero .reveal{opacity:1!important;transform:none!important;filter:none!important}
.vhero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vhero__ov{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,.16) 42%,rgba(0,0,0,.72) 100%)}
.vhero__in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 var(--pad) 56px}
.vhero h1{font-family:var(--sans);font-weight:400;font-size:clamp(40px,6.2vw,80px);line-height:.98;letter-spacing:-.015em;max-width:960px;color:#fff}
.vhero__note{display:flex;gap:10px;font-size:22px;line-height:1.25;letter-spacing:-.01em;max-width:520px;margin-top:26px;color:rgba(255,255,255,.88)}
.vhero__note .arrow{opacity:.8}
.vhero__act{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.vhero__rate{margin-top:14px;font-size:13px;color:rgba(255,255,255,.78)}
.vhero__rate b,.hero__stars{color:#fff;font-weight:500}
@media (max-width:720px){.vhero__in{padding-bottom:40px}.vhero__note{font-size:17px;margin-top:18px}.vhero__act{margin-top:22px}}
/* Startseite: Ergebnis als Zweispalter (eigene Layout-Familie), Leistungen zweispaltig */
.res{display:grid;grid-template-columns:1fr 1.15fr;gap:40px 72px;align-items:start}
.res__h{font-family:var(--sans);font-weight:400;font-size:40px;line-height:1.1;letter-spacing:-.05em;color:var(--ink);max-width:14em}
.res__list{border-top:1px solid var(--line)}
.res__item{display:grid;grid-template-columns:40px 1fr;gap:4px 18px;padding:26px 0;border-bottom:1px solid var(--line)}
.res__item .guar__ico{width:30px;height:30px;grid-row:span 2}
.res__item h3{font-size:21px;font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.res__item p{font-size:15px;line-height:1.6;color:var(--ink-soft)}
.wwd--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.res{grid-template-columns:1fr}.res__h{font-size:30px}.wwd--2{grid-template-columns:1fr}}
.res .res__h{margin-top:18px}
.hero__actions--center{justify-content:center}
.prc__eyebrow{display:none}
.wwd__col:first-child .wwd__ico{background:#e7e8ea}
.wwd__col:first-child .wwd__ico svg{stroke:var(--ink)}
/* ============ FREIGHT-UNTERSEITEN-SYSTEM (Musterseite Akademie, 2026-10-16) ============
Seitengerüst: heller Text-Hero (+ Bereichs-Label) → Bild-Band mit Themen-Leiste →
Fokus (Statement + 2 Spalten + Kennzahlen) → Leistungsreihen [01] → Funnel-Blöcke →
Bild-Block Ablauf → Abschluss mit Claim. */
.ak-hero{min-height:78vh;padding-bottom:56px}
.ak-hero .eyebrow{margin-bottom:auto;padding-top:8px}
.ak-hero h1{color:var(--ink)}
.ak-hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.band{position:relative;height:min(78vh,720px);overflow:hidden;background:var(--ink)}
.band__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
.band__labels{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;
max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 30px}
.band__labels a{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:#fff;opacity:.9}
.band__labels a::before{content:"+ "}
.band__labels a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.ak-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px 64px;margin:56px 0 0 212px;max-width:760px}
.ak-cols p{font-size:16px;line-height:1.6;color:var(--ink-soft)}
.ak-cols b{color:var(--ink);font-weight:500}
.svc__title{font-family:var(--sans);font-weight:400;font-size:56px;line-height:1.02;letter-spacing:-.04em;color:var(--ink);margin:0 0 48px}
.svc{border-top:1px solid var(--line)}
.svc__row{display:grid;grid-template-columns:72px 1.1fr 1.3fr 1fr;gap:28px 32px;align-items:start;padding:36px 0;border-bottom:1px solid var(--line);color:var(--ink);scroll-margin-top:96px}
.svc__n{font-family:var(--mono);font-size:13px;color:var(--gray);padding-top:6px}
.svc__head h3{font-size:30px;font-weight:400;letter-spacing:-.03em;line-height:1.05}
.svc__norm{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--gray)}
.svc__body p{font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:34em}
.svc__body .svc__meta{margin-top:14px;color:var(--ink)}
.svc__go{display:inline-block;margin-top:14px;font-size:15px;color:var(--accent-ink)}
.svc__img{border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#e5e7eb}
.svc__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
@media (hover:hover){.svc__row:hover .svc__img img{transform:scale(1.04)}.svc__row:hover .svc__go{text-decoration:underline;text-underline-offset:4px}}
.hww__note{margin-top:22px;max-width:520px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.85)}
.hww__note b{color:#fff;font-weight:500}
.cta__claim{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.75)}
@media (max-width:1024px){.svc__row{grid-template-columns:56px 1fr 32%}.svc__n{grid-row:1 / 3}.svc__head{grid-column:2}.svc__body{grid-column:2}.svc__img{grid-column:3;grid-row:1 / 3}.ak-cols{margin-left:0}}
@media (max-width:720px){
.ak-hero{min-height:auto;padding-top:130px}
.band{height:56vh}
.band__labels{justify-content:flex-start;gap:10px 18px;padding-bottom:20px}
.ak-cols{grid-template-columns:1fr;margin-top:36px}
.svc__title{font-size:38px;margin-bottom:28px}
.svc__row{grid-template-columns:1fr;gap:14px;padding:28px 0}
.svc__n,.svc__head,.svc__body,.svc__img{grid-column:auto;grid-row:auto}
.svc__img{order:-1}
.svc__head h3{font-size:26px}
}
/* Navigation über hellem Text-Hero: dunkel statt weiß (betrifft Akademie, Beratung, Prüfung, Über uns) */
body:has(.phero--light) .nav:not(.nav--solid){color:var(--ink);filter:none}
.svc .svc__body{padding:0}
.ak-hero .reveal{opacity:1!important;transform:none!important;filter:none!important}
.wwd__ico img{width:26px;height:26px;display:block}
/* Leistungen als Text-Reihen (Beratung, Prüfung): gleiche Reihe wie Akademie, ohne Bild */
.svc--text .svc__row{grid-template-columns:72px 1.2fr 1.6fr 200px;align-items:baseline;padding:30px 0}
.svc__turnus{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);text-align:right}
@media (max-width:1024px){.svc--text .svc__row{grid-template-columns:56px 1fr 160px}.svc--text .svc__body{grid-column:2;grid-row:2}.svc--text .svc__turnus{grid-column:3;grid-row:1}}
@media (max-width:720px){.svc--text .svc__row{grid-template-columns:1fr;gap:8px}.svc--text .svc__body,.svc--text .svc__turnus{grid-column:auto;grid-row:auto}.svc__turnus{text-align:left}}
/* Über uns: Kennzahl-Kacheln (Freight /about). Flächen nur aus der Marke: Tinte, Signal-Orange, Nebel, Weiß */
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:48px 72px;align-items:start}
.kpi__h{font-family:var(--sans);font-weight:400;font-size:44px;line-height:1.05;letter-spacing:-.04em;color:var(--ink);margin-top:18px;max-width:12em}
.kpi__img{margin-top:40px;width:62%;aspect-ratio:4/5;border-radius:12px;overflow:hidden}
.kpi__img img{width:100%;height:100%;object-fit:cover}
.kpi__lead{margin-top:22px;max-width:30em;font-size:16px;line-height:1.6;color:var(--ink-soft)}
.kpi__tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi__t{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1/1;padding:26px;border-radius:16px}
.kpi__t b{font-family:var(--sans);font-weight:400;font-size:clamp(44px,5.4vw,76px);line-height:1;letter-spacing:-.05em}
.kpi__t span{font-size:15px;line-height:1.35}
.kpi__t--ink{background:var(--ink);color:#fff}
.kpi__t--accent{background:var(--accent);color:var(--ink)}
.kpi__t--fog{background:#DFE2E4;color:var(--ink)}
.kpi__t--white{background:#fff;color:var(--ink);border:1px solid var(--line)}
@media (max-width:860px){.kpi{grid-template-columns:1fr}.kpi__img{width:100%;aspect-ratio:4/3}.kpi__h{font-size:34px}}
@media (max-width:420px){.kpi__t{padding:18px}.kpi__t span{font-size:13px}}
/* Kontakt im Freight-Split: Foto vollflächig, Text links unten, Formular als helle Karte rechts */
.kx{position:relative;min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1fr minmax(0,560px);gap:40px 64px;align-items:end;
padding:132px var(--pad) 48px;overflow:hidden;background:var(--ink)}
.kx__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kx__ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.72) 100%)}
.kx__txt{position:relative;z-index:2;color:#fff;padding-bottom:8px}
.kx__txt .crumb2{color:rgba(255,255,255,.75);margin-bottom:28px}
.kx__txt .crumb2 a,.kx__txt .crumb2 .cur{color:#fff}
.kx__mail{display:flex;gap:10px;flex-wrap:wrap;font-size:18px;color:rgba(255,255,255,.9)}
.kx__mail a{color:#fff}
.kx__txt h1{margin-top:14px;font-family:var(--sans);font-weight:400;font-size:clamp(48px,7vw,96px);line-height:.95;letter-spacing:-.04em;color:#fff}
.kx__lead{margin-top:18px;max-width:30em;font-size:17px;line-height:1.5;color:rgba(255,255,255,.85)}
.kx__card{position:relative;z-index:2;background:var(--bg);border-radius:16px;padding:32px;color:var(--ink)}
.kx__side{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:72px 0}
.kx__side>*{margin:0!important}
@media (max-width:1024px){.kx{grid-template-columns:1fr;min-height:auto}.kx__side{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.kx{padding:120px 16px 24px;gap:28px}.kx__card{padding:22px 18px}.kx__side{grid-template-columns:1fr;padding:48px 0}}
/* Marke: maximal Medium (500). Hervorhebungen nie Bold. */
b,strong{font-weight:500}
.kx .reveal{opacity:1!important;transform:none!important;filter:none!important}