/* Layout: product-page rhythm. Centered statements, one big picture per screen,
   rounded tiles, a story that changes its picture as you scroll, one dark chapter. */
:root{
  color-scheme: light;
  --bg:#FFFEFA; --alt:#F4F3EC; --ink:#22231F; --muted:#64665D;
  --brand:#60AE2A; --link:#2F6B12; --dark:#24481A; --dark2:#2E5A20; --on-dark:#FBFDF8; --muted-dark:#D3E4C6;
  --tile-green:#DDF0CC; --yellow:#FBEFC2; --yellow-ink:#7A5E00; --apricot:#FBDCC4; --apricot-ink:#9A4716; --num:#C3E8A3; --night:#171513; --night-text:#D9D5CC;
  --font:"Figtree", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --script:"Kaushan Script", "Brush Script MT", cursive;
  --r:28px; --r-s:18px;
  --ease:cubic-bezier(0.23,1,0.32,1);
  --g: clamp(16px, 4vw, 48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-0.012em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-0.025em;text-wrap:balance}
.script{font-family:var(--script);font-weight:400;letter-spacing:0}
p{margin:0}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin-inline:auto;padding-left:max(var(--g), env(safe-area-inset-left,0px));padding-right:max(var(--g), env(safe-area-inset-right,0px))}
.c{text-align:center}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sec{padding-block:clamp(88px,11vw,150px)}
.h-xl{font-size:clamp(2.6rem,1.2rem + 5.2vw,5.6rem);line-height:1.04}
.h-l{font-size:clamp(2.1rem,1.1rem + 3.6vw,4rem);line-height:1.06}
.h-m{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.5rem);line-height:1.1}
.sub{font-size:clamp(1.15rem,1rem + .7vw,1.6rem);line-height:1.3;color:var(--muted);font-weight:500;margin-top:16px}
.name{font-size:clamp(1.05rem,.95rem + .4vw,1.35rem);font-weight:600;color:var(--link);margin-bottom:10px}
.links{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 26px;margin-top:28px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:1rem;padding:12px 22px;border-radius:980px;border:0;cursor:pointer;font-family:inherit;transition:transform 160ms var(--ease),background-color 200ms ease}
.pill:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.pill:hover{background:var(--link)}}
.pill.light{background:var(--brand);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.pill.light:hover{background:#fff}}
.more{color:var(--link);text-decoration:none;font-weight:600;font-size:1.05rem;display:inline-flex;align-items:center;min-height:44px}
.more::after{content:" ›";font-weight:600}
@media (hover:hover) and (pointer:fine){.more:hover{text-decoration:underline;text-underline-offset:.2em}}
.dark .more{color:var(--num)}

/* ---- Global nav ---- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:rgba(255,254,250,.9)}
.gnav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,254,250,.84);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}
.gnav .wrap{display:flex;align-items:center;justify-content:space-between;height:52px;gap:20px}
.gnav img{height:30px;width:auto}
.gnav nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);font-size:.9375rem;color:#3b3d39}
.gnav .wrap>a{display:flex;align-items:center;min-height:44px}
.gnav nav a{text-decoration:none;transition:color 160ms ease;display:inline-flex;align-items:center;min-height:44px}
@media (hover:hover) and (pointer:fine){.gnav nav a:hover{color:var(--ink)}}
.gnav .pill{padding:0 18px;min-height:40px;font-size:.9rem}
@media (max-width:760px){.gnav nav a:not(.pill){display:none}}
.subnav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 52px);z-index:40;background:rgba(244,243,236,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.subnav .wrap{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;height:44px;align-items:center;font-size:.9rem}
.subnav a{text-decoration:none;white-space:nowrap;color:var(--muted);font-weight:500;display:flex;align-items:center;height:44px}
.subnav a.on{color:var(--ink)}

/* ---- Hero ---- */
.hero{padding-top:clamp(56px,7vw,96px);overflow:hidden}
.hero .shot{margin-top:clamp(40px,5vw,64px);width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;aspect-ratio:16/8;max-height:86svh;background:var(--alt)}
.hero .shot{position:relative}
.hero .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .shot img+img{opacity:0;animation:xfade 14s ease-in-out infinite}
@keyframes xfade{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
.hero .shot::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:48%;background:linear-gradient(to bottom,rgba(23,21,19,0) 0%,rgba(23,21,19,.55) 55%,var(--night) 100%);pointer-events:none;z-index:1}
.live{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:0;width:100vw;margin-left:calc(50% - 50vw);background:var(--night);padding:22px 16px 0}
.live .chip{background:rgba(255,255,255,.09);color:var(--on-dark)}
.live .dot.off{background:#8E8A82}
.chip{display:inline-flex;align-items:center;gap:9px;background:var(--alt);border-radius:980px;padding:10px 16px;font-size:.92rem;font-weight:500;font-variant-numeric:tabular-nums}
.chip b{font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
.dot.off{background:#B5B8B1}
.dot.pulse{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
@media (max-width:600px){.hero .shot{aspect-ratio:4/4.4}}

/* ---- Welcome ---- */
.welcome-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.welcome{background:var(--night);color:var(--on-dark)}
.welcome .name{color:var(--num)}
.welcome .ph{border-radius:var(--r);overflow:hidden;aspect-ratio:4/4.6}
.welcome .ph img{width:100%;height:100%;object-fit:cover;object-position:40% 30%}
.welcome .lead{font-size:clamp(1.15rem,1rem + .55vw,1.45rem);line-height:1.5;margin-top:24px;color:var(--night-text);max-width:36ch}
.welcome .lead+.lead{margin-top:16px}
.sig{font-size:clamp(2.6rem,1.8rem + 2.4vw,3.8rem);color:var(--num);margin-top:26px;line-height:1}
.sig-role{color:#B4AFA6;margin-top:6px;font-weight:500}
@media (max-width:760px){.welcome-grid{grid-template-columns:1fr}.welcome .ph{aspect-ratio:4/3.6}}

/* ---- Bestanden wall ---- */
.wall{margin-top:clamp(40px,5vw,64px);overflow:hidden;display:grid;gap:10px;-webkit-mask:linear-gradient(90deg,#0000,#000 8%,#000 92%,#0000);mask:linear-gradient(90deg,#0000,#000 8%,#000 92%,#0000)}
.lane{display:flex;width:max-content;gap:0;animation:lane 60s linear infinite}
.lane.rev{animation-direction:reverse;animation-duration:72s}
.lane span{font-size:clamp(2rem,1.2rem + 3vw,4.2rem);font-weight:800;letter-spacing:-0.03em;white-space:nowrap;padding-right:.5em}
.lane span::after{content:"";display:inline-block;width:.28em;height:.28em;border-radius:50%;background:var(--brand);margin-left:.5em;vertical-align:.12em}
.lane.rev span{color:var(--link)}
@keyframes lane{to{transform:translateX(-50%)}}
.wall-note{margin-top:22px;color:var(--muted);text-align:center}

/* ---- Instagram lane ---- */
.igl{display:flex;width:max-content;animation:lane 80s linear infinite;margin-bottom:22px}
.igset{display:flex}
@media (hover:hover) and (pointer:fine){.igl:hover{animation-play-state:paused}}
.ig{position:relative;flex:none;height:clamp(260px,26vw,380px);aspect-ratio:3/4;border-radius:22px;overflow:hidden;margin-right:16px;color:#fff;text-decoration:none;background:var(--alt)}
.ig.mid{aspect-ratio:1/1.04}
.ig.wide{aspect-ratio:4/3}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease)}
@media (hover:hover) and (pointer:fine){.ig:hover img{transform:scale(1.05)}}
.ig > span{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 16px;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));font-size:.92rem;line-height:1.3;font-weight:500}
.ig b{display:block;font-size:1.2rem;font-weight:800;letter-spacing:-0.01em}

/* ---- Dark chapter ---- */
.dark{background:var(--dark);color:var(--on-dark)}
.dark .sub{color:var(--muted-dark)}
.dark .name{color:var(--num)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(56px,7vw,96px)}
.stat .n{font-size:clamp(2.6rem,1.4rem + 4vw,5rem);font-weight:800;letter-spacing:-0.04em;line-height:1;color:var(--num);font-variant-numeric:tabular-nums}
.stat p{margin-top:12px;color:var(--muted-dark);font-size:1.05rem;max-width:26ch;margin-inline:auto}
.stat p b{color:var(--on-dark);font-weight:600}
.dark .wide{margin-top:clamp(56px,7vw,96px);border-radius:var(--r);overflow:hidden;aspect-ratio:16/10}
.dark .wide img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.stats{grid-template-columns:1fr}.dark .wide{aspect-ratio:4/3}}

/* ---- Bento ---- */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:clamp(48px,6vw,72px)}
.tile{border-radius:var(--r);background:var(--alt);overflow:hidden;position:relative;min-height:340px;display:flex;flex-direction:column;padding:clamp(24px,3vw,36px)}
.tile h3{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.2rem);line-height:1.08}
.tile p{margin-top:10px;color:var(--muted);font-size:1.02rem;max-width:34ch}
.tile .more{margin-top:14px}
.t-photo{grid-column:span 4;padding:0;min-height:460px;color:#fff;justify-content:flex-end}
.t-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
@media (hover:hover) and (pointer:fine){.tile:hover img{transform:scale(1.04)}}
.t-photo .cap{position:relative;padding:clamp(24px,3vw,36px);background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0))}
.t-photo .cap p{color:#E9EBE6}
.t-2{grid-column:span 2}
.t-3{grid-column:span 3}
.t-green{background:var(--brand)}
.t-green p{color:#1D3A0C}
.t-mint{background:var(--tile-green)}
.t-dark{background:var(--dark2);color:var(--on-dark)}
.t-dark p{color:var(--muted-dark)}
.t-dark .more{color:var(--num)}
.t-yellow{background:var(--yellow)}
.t-yellow p{color:#5A4600}
.t-yellow .more{color:var(--yellow-ink)}
.t-apricot{background:var(--apricot)}
.t-apricot p{color:#6E3410}
.t-apricot .more{color:var(--apricot-ink)}
.big-letter{font-size:clamp(5rem,3rem + 6vw,9rem);font-weight:700;letter-spacing:-0.06em;line-height:.9;margin-top:auto}
.tile .row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:auto}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.t-photo,.t-3{grid-column:span 2}.t-2{grid-column:span 1}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.t-photo,.t-3,.t-2{grid-column:auto}.tile{min-height:280px}.t-photo{min-height:420px}}

/* ---- Scroll story ---- */
.story{background:var(--alt)}
.story-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);margin-top:clamp(56px,7vw,88px)}
.pin{position:sticky;top:calc(env(safe-area-inset-top,0px) + 120px);height:min(70svh,620px);border-radius:var(--r);overflow:hidden;background:#dfe3da}
.pin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 500ms ease,transform 900ms var(--ease)}
.pin img.on{opacity:1;transform:none}
.pin .bar{position:absolute;left:24px;right:24px;bottom:22px;display:flex;gap:6px}
.pin .bar i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.45);overflow:hidden}
.pin .bar i.on{background:#fff}
.steps{display:grid;gap:0}
.step{min-height:min(70svh,620px);display:flex;flex-direction:column;justify-content:center;padding-block:40px;opacity:.32;transition:opacity 400ms ease}
.step.on{opacity:1}
.step h3{font-size:clamp(1.8rem,1.2rem + 1.8vw,2.8rem);line-height:1.08}
.step .when{margin-top:10px;font-weight:600;color:var(--link)}
.step p{margin-top:16px;font-size:1.12rem;color:#3d403a;max-width:40ch}
.step ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:1.05rem}
.step li{display:flex;gap:10px;align-items:center}
.step li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
.step .simg{display:none}
@media (max-width:860px){
  .story-grid{grid-template-columns:1fr}
  .pin{display:none}
  .step{min-height:0;opacity:1;padding-block:0 56px}
  .step .simg{display:block;border-radius:var(--r-s);overflow:hidden;aspect-ratio:4/3;margin-bottom:22px}
  .step .simg img{width:100%;height:100%;object-fit:cover}
}

/* ---- Compare ---- */
.compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px);margin-top:clamp(48px,6vw,80px)}
.col{text-align:center;display:grid;gap:0;align-content:start}
.col .badge{width:96px;height:96px;margin:0 auto 22px;border-radius:24px;display:grid;place-items:center;font-weight:700;font-size:2.2rem;letter-spacing:-0.04em;background:var(--alt)}
.col:nth-child(1) .badge{background:var(--brand)}
.col:nth-child(2) .badge{background:var(--tile-green)}
.col:nth-child(3) .badge{background:var(--ink);color:#fff}
.col h3{font-size:1.65rem}
.col .tag{color:var(--muted);margin-top:6px}
.col dl{margin:30px 0 0;display:grid;gap:0}
.col dl div{padding:18px 0;border-top:1px solid #E3E6DF}
.col dt{font-size:.875rem;color:var(--muted);font-weight:500}
.col dd{margin:4px 0 0;font-weight:600;font-size:1.05rem;line-height:1.35}
@media (max-width:760px){.compare{grid-template-columns:1fr;gap:56px}}

/* ---- Fahrzeuge ---- */
.fleet{margin-top:clamp(48px,6vw,72px);width:100vw;margin-left:calc(50% - 50vw);aspect-ratio:16/7.2;max-height:80svh;overflow:hidden}
.fleet img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.fleet-cap{display:flex;justify-content:center;gap:clamp(24px,6vw,96px);flex-wrap:wrap;margin-top:28px;text-align:center}
.fleet-cap div b{display:block;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.3rem);letter-spacing:-0.03em;font-weight:700}
.fleet-cap div span{color:var(--muted)}
.be{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px;margin-top:clamp(64px,8vw,110px)}
.be .tile{min-height:520px}
.be .t-photo{grid-column:auto}
.be .t-dark{justify-content:center}
.be .slogan{font-family:var(--script);font-size:clamp(2.8rem,1.6rem + 3.8vw,5rem);font-weight:400;line-height:1.05;color:var(--num)}
@media (max-width:760px){.be{grid-template-columns:1fr}.be .tile{min-height:340px}.fleet{aspect-ratio:4/3}}

/* ---- Calculator ---- */
.calc-wrap{background:var(--alt)}
.calc{margin:clamp(48px,6vw,72px) auto 0;max-width:880px;background:#fff;border-radius:var(--r);padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px)}
.calc fieldset{border:0;margin:0;padding:0}
.calc legend{font-weight:600;margin-bottom:12px}
.seg{display:grid;gap:10px}
.seg label{position:relative;cursor:pointer;display:block}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:block;padding:14px 18px;border-radius:14px;box-shadow:inset 0 0 0 1.5px #D9DDD4;transition:box-shadow 200ms ease,background-color 200ms ease}
.seg b{display:block;font-weight:600}
.seg small{color:var(--muted);font-size:.9rem}
.seg input:checked+span{box-shadow:inset 0 0 0 2.5px var(--brand);background:#F6FBF1}
.seg input:focus-visible+span{outline:3px solid var(--brand);outline-offset:2px}
.calc label.f{display:grid;gap:8px;font-weight:600;margin-top:22px}
.calc input[type=date]{font:inherit;padding:12px 14px;border-radius:12px;border:1.5px solid #D9DDD4;width:100%;min-width:0;background:#fff;color:var(--ink)}
.chk{display:flex;gap:12px;align-items:center;margin-top:12px;min-height:44px;font-size:.95rem;cursor:pointer}
.chk input{width:24px;height:24px;accent-color:var(--link);margin:0;flex:none}
.res .k{font-size:.9rem;color:var(--muted);font-weight:500}
.res .end{font-size:clamp(2.2rem,1.4rem + 2.6vw,3.4rem);font-weight:700;letter-spacing:-0.04em;line-height:1.02;margin-top:6px;font-variant-numeric:tabular-nums}
.res .first{margin-top:18px;font-weight:600}
.dates{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.dates li{background:var(--alt);border-radius:8px;padding:5px 9px;font-size:.875rem;font-variant-numeric:tabular-nums}
.dates li.hol{background:transparent;color:var(--muted);text-decoration:line-through}
.res .note{margin-top:18px;font-size:.9rem;color:var(--muted)}
.flat-line{margin-top:26px;color:var(--muted)}
@media (max-width:760px){.calc{grid-template-columns:1fr}}

/* ---- Team gallery ---- */
.gal{display:grid;grid-auto-flow:column;grid-auto-columns:min(380px,80vw);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(var(--g), calc((100vw - 1200px)/2 + var(--g))) 30px;margin-top:clamp(48px,6vw,72px);scrollbar-width:none}
.gal::-webkit-scrollbar{display:none}
.card{scroll-snap-align:start;border-radius:var(--r);overflow:hidden;background:var(--alt);display:flex;flex-direction:column}
.card .ph{aspect-ratio:4/4.3;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
@media (hover:hover) and (pointer:fine){.card:hover .ph img{transform:scale(1.04)}}
.card .tx{padding:24px 26px 28px}
.card h3{font-size:1.5rem}
.card .role{color:var(--link);font-weight:600;margin-top:4px}
.card q{display:block;margin-top:14px;color:#3d403a;font-size:1.02rem}
.card.join{background:var(--dark2);color:var(--on-dark);justify-content:flex-end;padding:30px}
.card.join p{color:var(--muted-dark);margin-top:12px}
.card.join .more{color:var(--num);margin-top:18px}
.gal-ctl{display:flex;justify-content:flex-end;gap:12px;margin-top:4px}
.gal-ctl button{width:44px;height:44px;border-radius:50%;border:0;background:var(--alt);cursor:pointer;display:grid;place-items:center;transition:transform 160ms var(--ease),background-color 200ms}
.gal-ctl button:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.gal-ctl button:hover{background:#E6E9E2}}
.gal-ctl svg{width:18px;height:18px}

/* ---- Community ---- */
.comm .wide{border-radius:var(--r);overflow:hidden;aspect-ratio:16/8.5;margin-top:clamp(48px,6vw,72px)}
.comm .wide img{width:100%;height:100%;object-fit:cover}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.duo .tile{min-height:300px}
@media (max-width:700px){.duo{grid-template-columns:1fr}.comm .wide{aspect-ratio:4/3}}

/* ---- Kontakt ---- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:clamp(48px,6vw,72px)}
.ctile{border-radius:var(--r);background:var(--alt);padding:clamp(24px,3.4vw,44px)}
.ctile h3{font-size:1.6rem}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px;margin-top:26px}
.facts dt{font-size:.9rem;color:var(--muted);font-weight:500}
.facts dd{margin:4px 0 0;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums;user-select:all}
form.ctile{display:grid;gap:12px;align-content:start}
form.ctile input,form.ctile select{font:inherit;height:56px;border-radius:14px;border:1.5px solid #D9DDD4;background:#fff;padding:0 16px;width:100%;min-width:0;color:var(--ink)}
form.ctile input:focus-visible,form.ctile select:focus-visible{border-color:var(--brand);outline:none;box-shadow:0 0 0 4px rgba(96,174,42,.25)}
form.ctile .pill{justify-content:center;height:54px;margin-top:6px}
.result{grid-column:1 / -1;border-radius:var(--r);background:var(--dark2);color:var(--on-dark);padding:clamp(24px,3.4vw,44px)}
.result pre{white-space:pre-wrap;font:inherit;background:#2A2B28;border-radius:14px;padding:16px;margin:16px 0 0}
.result .acts{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:18px}
.result .more{color:var(--num)}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:420px){.facts{grid-template-columns:1fr}}

/* ---- Warum ---- */
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(48px,6vw,80px)}
.why h3{font-size:1.4rem;margin-top:18px}
.why p{margin-top:8px;color:#45473F}
.why-dot{display:block;width:56px;height:56px;border-radius:18px}
.why-quote{text-align:center;font-size:clamp(1.7rem,1.1rem + 2vw,2.8rem);color:var(--link);margin:clamp(56px,7vw,96px) auto 0;max-width:24ch;line-height:1.25}
@media (max-width:900px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.why{grid-template-columns:1fr}}

/* ---- Kurse ---- */
.kurse{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(200px,20vw,300px);gap:16px;margin-top:clamp(48px,6vw,72px)}
.kurse figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--alt)}
.kurse img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
@media (hover:hover) and (pointer:fine){.kurse figure:hover img{transform:scale(1.04)}}
.kurse figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 16px;color:#fff;font-weight:600;line-height:1.3;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0))}
.k-big{grid-row:span 2}
.k-wide{grid-column:span 2}
@media (max-width:760px){.kurse{grid-template-columns:1fr 1fr;grid-auto-rows:220px}.k-big{grid-column:span 2;grid-row:span 2}.k-wide{grid-column:span 2}}
@media (max-width:480px){.kurse{grid-template-columns:1fr}.k-big,.k-wide{grid-column:auto}.k-big{grid-row:span 2}}

/* ---- Fahrlehrer ---- */
.fl-steps{list-style:none;margin:clamp(48px,6vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:fl}
.fl-steps li{background:var(--alt);border-radius:var(--r-s);padding:24px 22px;display:grid;gap:8px;align-content:start}
.fl-steps b{font-size:1.2rem;font-weight:800}
.fl-steps span{color:var(--muted);font-size:1rem}
.fl-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.fl-grid .tile{min-height:0}
.fl-list{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px;font-size:1.05rem}
.fl-list li{display:flex;gap:10px;align-items:baseline}
.fl-list li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--link);flex:none;transform:translateY(-2px)}
@media (max-width:900px){.fl-steps{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.fl-steps,.fl-grid{grid-template-columns:1fr}}

/* ---- Soft transitions between sections ---- */
.fade{height:clamp(220px,26vw,440px);background:linear-gradient(to bottom,var(--from),var(--to));background:linear-gradient(to bottom,var(--from) 0.0%,color-mix(in oklch,var(--from) 99.5%,var(--to)) 8.3%,color-mix(in oklch,var(--from) 96.5%,var(--to)) 16.7%,color-mix(in oklch,var(--from) 89.6%,var(--to)) 25.0%,color-mix(in oklch,var(--from) 79.0%,var(--to)) 33.3%,color-mix(in oklch,var(--from) 65.3%,var(--to)) 41.7%,color-mix(in oklch,var(--from) 50.0%,var(--to)) 50.0%,color-mix(in oklch,var(--from) 34.7%,var(--to)) 58.3%,color-mix(in oklch,var(--from) 21.0%,var(--to)) 66.7%,color-mix(in oklch,var(--from) 10.4%,var(--to)) 75.0%,color-mix(in oklch,var(--from) 3.5%,var(--to)) 83.3%,color-mix(in oklch,var(--from) 0.5%,var(--to)) 91.7%,var(--to) 100.0%)}
.fade + .sec{padding-top:clamp(8px,1.5vw,24px)}
.sec:has(+ .fade){padding-bottom:clamp(8px,1.5vw,24px)}
main:has(+ .foot) .fade:last-child{height:clamp(120px,12vw,200px)}
.hero .shot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:22%;background:linear-gradient(to top,rgba(255,254,250,0),var(--bg));pointer-events:none;z-index:1}
.fleet{-webkit-mask:linear-gradient(to bottom,#0000,#000 16%,#000 84%,#0000);mask:linear-gradient(to bottom,#0000,#000 16%,#000 84%,#0000)}

/* ---- Footer ---- */
.foot{background:var(--alt);font-size:.875rem;color:var(--muted);padding-block:40px 28px}
.foot .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-block:22px;border-block:1px solid #DDE0D8}
.foot b{color:var(--ink);font-weight:600;display:block;margin-bottom:8px}
.foot .cols a{display:flex;align-items:center;min-height:40px;text-decoration:none}
@media (hover:hover) and (pointer:fine){.foot .cols a:hover{text-decoration:underline}}
.foot .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:16px}
.foot .note{margin-bottom:18px;line-height:1.5}
@media (max-width:700px){.foot .cols{grid-template-columns:1fr 1fr}}

/* ---- Motion ---- */
.js .fx{opacity:0;transform:translateY(28px)}
.js .fx.in{opacity:1;transform:none;transition:opacity 800ms var(--ease),transform 900ms var(--ease);transition-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){
  .js .fx{opacity:1;transform:none}
  .hero .shot{transform:none!important}
  .hero .shot img+img{animation:none;opacity:0}
  .pin img,.step{transition:none}
  .dot.pulse{animation:none}
  .lane{animation:none;flex-wrap:wrap;width:auto}
  .igl{animation:none;width:auto;overflow-x:auto}
  .igset[aria-hidden]{display:none}
  .lane[aria-hidden]{display:none}
  html{scroll-behavior:auto}
}

/* ---- Form additions ---- */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
#thanks{background:var(--tile-green);color:var(--ink)}
#thanks p{color:#2E4A1D}
.form-err{color:#9A2B1E;font-weight:600;font-size:.95rem}

/* ---- UX-Feinschliff (Prüfung UI UX Pro Max) ---- */
form.ctile label.fl{font-size:.9rem;font-weight:600;color:#3B3D38;margin:4px 0 -6px}
form.ctile .fhint{font-size:.9rem;color:var(--muted);margin:0}
.wall-ctl{display:flex;justify-content:center;margin-top:18px}
.wallbtn{font:inherit;font-weight:600;font-size:.95rem;min-height:44px;padding:0 20px;border-radius:980px;border:1.5px solid #D9DDD4;background:var(--bg);color:var(--ink);cursor:pointer;transition:background-color 160ms ease,transform 120ms ease}
.wallbtn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.wallbtn:hover{background:var(--alt)}.wall:hover .lane{animation-play-state:paused}}
.wall.paused .lane,.wall.paused .igl,.wall:focus-within .igl{animation-play-state:paused}
.stickycta{display:none}
@media (max-width:760px){
  .fade{height:150px}
  .sec{padding-block:64px}
  .stickycta{display:inline-flex;position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:45;justify-content:center;min-height:52px;font-size:1.05rem;box-shadow:0 10px 30px rgba(0,0,0,.22);transform:translateY(160%);transition:transform 320ms var(--ease)}
  .stickycta.show{transform:none}
  .foot{padding-bottom:96px}
}
.cms-edit .stickycta{display:none!important}
@media (prefers-reduced-motion:reduce){.stickycta{transition:none}}

/* Handy: kompakter */
@media (max-width:760px){
  .compare{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--g));padding:4px var(--g) 12px;scrollbar-width:none}
  .compare::-webkit-scrollbar{display:none}
  .compare .col{flex:0 0 82%;scroll-snap-align:center;background:var(--alt);border-radius:var(--r-s);padding:24px 18px 8px}
  .compare .col .badge{width:72px;height:72px;font-size:1.7rem;margin-bottom:14px}
  .compare dl{margin-top:16px}
  .compare dl div{padding:12px 0}
  .step .simg{aspect-ratio:16/9;margin-bottom:16px}
  .step{padding-block:0 40px}
  .step p{font-size:1.05rem}
  .tile{min-height:0}
  .tile .big-letter{font-size:4.5rem;margin-top:18px}
  .t-photo,.t-photo.t-3{min-height:340px}
  .kurse{grid-auto-rows:200px}
  .stats{gap:28px;margin-top:40px}
  .why{margin-top:36px;gap:28px}
  .why-quote{margin-top:44px}
}
.compare-hint{display:none}
@media (max-width:760px){.compare-hint{display:block;text-align:center;color:var(--muted);font-size:.95rem;margin-top:14px}}
/* Handy: Schnellkontakt unter dem ersten Bild */
.quick{display:none}
@media (max-width:760px){
  .live .chip:nth-child(2){display:none}
  .quick{display:grid;gap:10px;width:100vw;margin-left:calc(50% - 50vw);background:var(--night);padding:14px max(16px,env(safe-area-inset-left,0px)) 6px}
  .qopen{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:980px;text-decoration:none;font-weight:600;font-size:1rem;background:rgba(255,255,255,.09);color:var(--on-dark);transition:transform 120ms var(--ease)}
  .qopen.is-open{background:var(--brand);color:var(--ink)}
  .qopen.is-open .dot{background:var(--ink)}
  .qopen:active,.qrow a:active{transform:scale(.97)}
  .qrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .qrow a{display:grid;justify-items:center;gap:6px;padding:14px 6px 12px;border-radius:18px;background:rgba(255,255,255,.09);color:var(--on-dark);text-decoration:none;font-weight:600;font-size:.875rem;line-height:1.2;text-align:center;white-space:nowrap;transition:transform 120ms var(--ease)}
  .qrow svg{width:24px;height:24px;color:var(--num)}
}
.cms-edit .quick a{pointer-events:none}

/* Handy: erster Bildschirm kompakt, Schnellkontakt in Daumenreichweite */
@media (max-width:760px){
  .hero{padding-top:18px}
  .hero .name{margin-bottom:6px}
  .hero .sub{margin-top:10px}
  .hero .links{display:none}
  .hero .h-xl{font-size:2.35rem}
  .hero .shot{margin-top:16px;aspect-ratio:16/10}
  .hero .shot::before{height:16%}
  .hero .shot::after{height:40%}
  .quick{padding-top:4px}
  .qrow a{padding:12px 6px 10px}
  .live{padding-top:16px}
}

/* Handy: Startbildschirm füllt genau den Bildschirm, nächste Theorie ganz unten */
@media (max-width:760px){
  .hero{display:flex;flex-direction:column;min-height:calc(100svh - 96px - env(safe-area-inset-top,0px))}
  .hero>.wrap{flex:1;display:flex;flex-direction:column}
  .hero .shot{flex:1 1 0;aspect-ratio:auto;min-height:200px;max-height:none}
  .live{padding-bottom:20px}
}

/* Handy: keine großen Lücken zwischen den Abschnitten */
@media (max-width:760px){
  .sec{padding-block:44px}
  .fade{height:80px}
  .fade + .sec{padding-top:4px}
  .sec:has(+ .fade){padding-bottom:4px}
  .step:last-child{padding-bottom:0}
  .story .links{margin-top:20px}
  .bento,.compare,.kurse,.contact-grid,.fl-steps,.gal,.comm .wide,.wall,.calc,.why,.fleet{margin-top:28px}
  .be{margin-top:36px}
  .story-grid{margin-top:32px}
  .stats{margin-top:32px}
  .dark .wide{margin-top:32px}
  .why-quote{margin-top:36px}
  main:has(+ .foot) .fade:last-child{height:56px}
  .foot{padding-top:24px}
}

/* Impressum und Datenschutz */
.legal-body{background:var(--bg)}
.legal-main{padding:clamp(40px,6vw,88px) 0 clamp(48px,6vw,96px)}
.legal-text{max-width:760px}
.legal-text h1{font-size:clamp(2.2rem,1.4rem + 2.6vw,3.4rem);line-height:1.06;margin-bottom:14px}
.legal-text h2{font-size:clamp(1.2rem,1rem + .5vw,1.45rem);margin:34px 0 8px;letter-spacing:-.015em}
.legal-text p,.legal-text li{color:#3d403a;font-size:1.02rem;line-height:1.6}
.legal-text p+p{margin-top:10px}
.legal-text ul{margin:8px 0 0;padding-left:1.2em;display:grid;gap:6px}
.legal-text a{color:var(--link);text-underline-offset:.2em}
.legal-text .lg-lead{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);color:var(--muted);line-height:1.5}
.legal-text .lg-stand{margin-top:36px;color:var(--muted);font-size:.95rem}
.legal-body .gnav nav a:not(.pill){display:inline-flex;align-items:center;min-height:44px}
@media (max-width:760px){.legal-body .gnav nav a:not(.pill):not(:first-child){display:none}}
form.ctile .fhint a{color:var(--link);text-underline-offset:.2em}

/* Handy: Startbildschirm endet mit Anrufen / Route / E-Mail (ohne Theorie-Anzeige) */
@media (max-width:760px){
  .hero .live{display:none}
  .quick{padding-bottom:22px}
}