/* Neodock – gemeinsames Stylesheet aller Seiten.
   Gestaltungsmotiv: das Logo-Raster (2x2-Kacheln, Plus im Negativraum).
   Jede Farbe ist ein Token; hell/dunkel über prefers-color-scheme und data-theme. */

:root{
  --bg:#F3F5F7;
  --bg-2:#E9EDF2;
  --surface:#FFFFFF;
  --ink:#0B1626;
  --muted:#5B6878;
  --line:#D9DEE5;
  --accent:#0B4CFF;
  --accent-ink:#FFFFFF;
  --fahrschule:#0B4CFF;
  --erstehilfe:#E2473C;
  --next:#8A94A3;
  --on-fahrschule:#FFFFFF;
  --on-erstehilfe:#FFFFFF;
  --fahrschule-text:#0B4CFF;
  --erstehilfe-text:#B8352B;
  /* Effekte */
  --glow-a:rgba(11,76,255,.20);
  --glow-b:rgba(226,71,60,.14);
  --shadow:0 1px 2px rgba(11,22,38,.06),0 12px 32px -12px rgba(11,22,38,.18);
  --shadow-lg:0 2px 4px rgba(11,22,38,.06),0 40px 80px -24px rgba(11,22,38,.30);
  --device:#0B1626;
  --device-edge:#2A3549;
  --grid-line:rgba(11,22,38,.06);
  --chip-bg:rgba(255,255,255,.86);
  --wa:#1F8F4E;          /* WhatsApp-Hinweis in Mockups (Text-Kontrast AA auf hell) */
  --wa-bubble:#DCF5E3;
  --display:"Bricolage Grotesque","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --radius:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* Federn (apple-design): kritisch gedämpft als Standard, leicht federnd nur nach Schwung */
  --spring:linear(0, 0.059, 0.1842, 0.3268, 0.4624, 0.5807, 0.6786, 0.7571, 0.8184, 0.8654, 0.901, 0.9277, 0.9474, 0.962, 0.9726, 0.9803, 0.9859, 0.99, 0.9929, 0.9949, 0.9964, 0.9975, 0.9982, 1);
  --spring-bounce:linear(0, 0.052, 0.1715, 0.318, 0.4659, 0.6004, 0.7147, 0.8066, 0.877, 0.9287, 0.9647, 0.9885, 1.0031, 1.0111, 1.0145, 1.0151, 1.014, 1.0121, 1.0098, 1.0076, 1.0056, 1.004, 1.0027, 1.0017, 1.0009, 1.0004, 1.0001, 0.9999, 0.9998, 0.9998, 0.9998, 1);
  --dur-spring:.5s;
  --dur-bounce:.7s;
  --press:.1s;
  /* Materialien */
  --mark-accent:#0B4CFF;   /* Logo-Kachel, in hell und dunkel gleich wie im Original */
  --material:color-mix(in srgb,var(--bg) 60%,transparent);
  --material-dark:rgba(11,22,38,.74);
  --material-dark-ink:#F3F5F7;
  --material-dark-muted:rgba(243,245,247,.74);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1220; --bg-2:#0F1828; --surface:#121B2C; --ink:#EEF2F7; --muted:#A7B2C2; --line:#24304A;
    --accent:#5B8CFF; --accent-ink:#06122A; --fahrschule:#5B8CFF; --erstehilfe:#FF6F63; --next:#7C879A;
    --on-fahrschule:#06122A; --on-erstehilfe:#06122A; --fahrschule-text:#7FA4FF; --erstehilfe-text:#FF6F63;
    --glow-a:rgba(91,140,255,.26); --glow-b:rgba(255,111,99,.16);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.3),0 40px 80px -24px rgba(0,0,0,.7);
    --device:#05080F; --device-edge:#2A3549; --grid-line:rgba(238,242,247,.05); --chip-bg:rgba(18,27,44,.88);
    --wa:#5BD38C; --wa-bubble:#123524;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1220; --bg-2:#0F1828; --surface:#121B2C; --ink:#EEF2F7; --muted:#A7B2C2; --line:#24304A;
  --accent:#5B8CFF; --accent-ink:#06122A; --fahrschule:#5B8CFF; --erstehilfe:#FF6F63; --next:#7C879A;
  --on-fahrschule:#06122A; --on-erstehilfe:#06122A; --fahrschule-text:#7FA4FF; --erstehilfe-text:#FF6F63;
  --glow-a:rgba(91,140,255,.26); --glow-b:rgba(255,111,99,.16);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.3),0 40px 80px -24px rgba(0,0,0,.7);
  --device:#05080F; --device-edge:#2A3549; --grid-line:rgba(238,242,247,.05); --chip-bg:rgba(18,27,44,.88);
  --wa:#5BD38C; --wa-bubble:#123524;
  color-scheme:dark;
}

/* Seitenwechsel als weiche Überblendung (Browser mit View Transitions) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}

*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:90px}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.05;letter-spacing:-0.02em}
h1{font-size:clamp(2.5rem,7vw,5.6rem);font-weight:800}
h2{font-size:clamp(1.9rem,4.2vw,3.3rem);font-weight:750}
h3{font-size:1.25rem;font-weight:700;letter-spacing:-0.01em;line-height:1.2}
p{margin:0}
p+p{margin-top:.9rem}
::selection{background:var(--accent);color:var(--accent-ink)}

.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.narrow{max-width:760px}
.skip{position:absolute;left:16px;top:-100px;z-index:50;background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;border-radius:10px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt-s{margin-top:.6rem}.mt-m{margin-top:1rem}.mt-l{margin-top:1.4rem}.mt-xl{margin-top:2.4rem}
.muted{color:var(--muted)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
section{padding:clamp(64px,10vw,130px) 0;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:12px;height:12px;flex:0 0 auto;background:
  linear-gradient(var(--c,var(--accent)),var(--c,var(--accent))) 0 0/5px 5px no-repeat,
  linear-gradient(var(--c,var(--accent)),var(--c,var(--accent))) 100% 0/5px 5px no-repeat,
  linear-gradient(var(--c,var(--accent)),var(--c,var(--accent))) 0 100%/5px 5px no-repeat,
  linear-gradient(var(--c,var(--accent)),var(--c,var(--accent))) 100% 100%/5px 5px no-repeat}
.lead{font-size:clamp(1.1rem,1.7vw,1.32rem);color:var(--muted);max-width:62ch;line-height:1.55}
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:2.6rem 0 1rem}
.prose h3{margin:1.8rem 0 .6rem}
.prose ul,.prose ol{padding-left:1.2rem;margin:.9rem 0}
.prose li+li{margin-top:.4rem}
.prose a{color:var(--fahrschule-text)}
.grad{background:linear-gradient(100deg,var(--fahrschule) 10%,color-mix(in srgb,var(--fahrschule) 55%,var(--erstehilfe)) 55%,var(--erstehilfe) 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-fs-c{color:var(--fahrschule-text)}
.t-eh-c{color:var(--erstehilfe-text)}

/* Buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;gap:.5rem;padding:.9rem 1.35rem;border-radius:999px;font-weight:600;text-decoration:none;border:1.5px solid transparent;font-size:1rem;cursor:pointer;font-family:var(--body);transition:transform var(--dur-spring) var(--spring);overflow:hidden;isolation:isolate;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn svg{width:18px;height:18px;transition:transform var(--dur-spring) var(--spring)}
.btn:hover svg{transform:translateX(3px)}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px -10px var(--glow-a)}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-ghost{border-color:var(--line);background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--ink);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.btn-eh{background:var(--erstehilfe);color:var(--on-erstehilfe);box-shadow:0 10px 30px -10px var(--glow-b)}
.actions{display:flex;gap:.8rem;flex-wrap:wrap}
.link-arrow{font-weight:600;color:var(--ct,var(--fahrschule-text));text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.link-arrow::after{content:"→";display:inline-block;transition:transform var(--dur-spring) var(--spring)}
.link-arrow:hover::after{transform:translateX(4px)}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-0.03em}
.logo .dot{color:var(--accent)}
.mark{width:30px;height:30px;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:1px;transition:transform var(--dur-spring) var(--spring)}
.logo:hover .mark{transform:scale(1.06)}
.logo:active .mark{transform:scale(.94);transition:transform var(--press) ease-out}
/* Zeichen wie neodock-fahrschule/public/brand/neodock-mark.svg: gleiche Kacheln (Radius ~23 %), oben rechts Dock-Blau */
.mark span{background:var(--ink);border-radius:3px}
.mark span:nth-child(2){background:var(--mark-accent)}

/* Kopfzeile */
.site-header{position:sticky;top:0;z-index:30;isolation:isolate}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--material);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--line);opacity:0;transition:opacity .25s ease}
.site-header.scrolled::before{opacity:1}
.site-header nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px}
.site-header ul{display:flex;gap:.3rem;list-style:none;margin:0;padding:0}
.site-header ul a{display:block;white-space:nowrap;text-decoration:none;font-weight:500;color:var(--muted);padding:.5rem .8rem;border-radius:999px;transition:transform var(--dur-spring) var(--spring);-webkit-tap-highlight-color:transparent}
.site-header ul a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.site-header ul a[aria-current="page"],.site-header ul a.active{color:var(--ink);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.nav-right{display:flex;align-items:center;gap:.5rem}
.icon-btn{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0}
.icon-btn svg{width:20px;height:20px}
.menu-btn{display:none}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .theme-btn .sun{display:none}:root:not([data-theme="light"]) .theme-btn .moon{display:block}}
@media (max-width:1100px){
  .site-header nav{position:relative}
  .menu-btn{display:grid}
  .site-header ul{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:8px clamp(16px,4vw,40px) 18px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow);transform-origin:calc(100% - clamp(16px,4vw,40px) - 22px) 0;opacity:0;transform:translateY(-8px) scale(.97);visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform var(--dur-spring) var(--spring),visibility 0s linear .5s}
  .site-header ul.open{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .2s ease,transform var(--dur-spring) var(--spring),visibility 0s}
  .site-header ul a{padding:.8rem 0;font-size:1.1rem;color:var(--ink);border-radius:0}
  .site-header ul a:hover{background:none}
}
@media (max-width:460px){.nav-right .btn{padding:.7rem 1rem;font-size:.92rem}.nav-right .theme-btn{display:none}}

/* Fortschrittsbalken beim Scrollen */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:40;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--fahrschule),var(--erstehilfe));pointer-events:none}

/* Hintergrund: Raster + Lichtflecken */
.bg-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg-grid::before{content:"";position:absolute;inset:-2px;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 80%)}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.9}
.blob.a{width:46vw;height:46vw;max-width:640px;max-height:640px;background:radial-gradient(circle,var(--glow-a),transparent 65%);top:-12%;right:-8%;animation:drift 18s ease-in-out infinite alternate}
.blob.b{width:36vw;height:36vw;max-width:520px;max-height:520px;background:radial-gradient(circle,var(--glow-b),transparent 65%);bottom:-10%;left:-6%;animation:drift 22s ease-in-out infinite alternate-reverse}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-4vw,3vw) scale(1.08)}100%{transform:translate(3vw,-2vw) scale(.96)}}

/* Hero */
.hero{padding-top:clamp(40px,7vw,90px);padding-bottom:clamp(60px,8vw,110px);overflow:hidden;isolation:isolate}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}}
.hero h1 .thin{font-weight:500;color:var(--muted)}
.hero .lead{margin-top:1.4rem}
.hero .actions{margin-top:2rem}
.hero .note{margin-top:1.4rem;font-size:.95rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.hero .note span{display:inline-flex;align-items:center;gap:.45rem}
.hero .note span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c,var(--accent))}
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .8rem .35rem .4rem;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent);font-size:.9rem;font-weight:500;color:var(--muted);text-decoration:none;backdrop-filter:blur(6px)}
.pill b{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:.2rem .5rem;border-radius:999px}
.pill:hover{color:var(--ink)}

/* Wort für Wort einblenden (h1) */
.split-words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split-words .w>span{display:inline-block;transform:translateY(105%);animation:wordUp .9s var(--ease) forwards;animation-delay:calc(var(--i)*70ms + 100ms)}
@keyframes wordUp{to{transform:none}}

/* Bühne mit Geräten */
.stage{position:relative;perspective:1600px;min-height:300px}
.stage-inner{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.laptop{position:relative;border-radius:16px;background:var(--device);padding:10px 10px 12px;box-shadow:var(--shadow-lg);border:1px solid var(--device-edge)}
.laptop::before{content:"";position:absolute;top:4px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--device-edge)}
.laptop .screen{border-radius:8px;overflow:hidden;background:var(--surface);aspect-ratio:16/10}
.laptop .screen img{width:100%;height:100%;object-fit:cover;object-position:top left}
.laptop-base{height:14px;margin:0 -5%;border-radius:0 0 18px 18px;background:linear-gradient(var(--device-edge),var(--device));box-shadow:var(--shadow)}
.browser{border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.browser .bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.browser .bar span{margin-left:10px;flex:1;max-width:320px;font-size:.75rem;color:var(--muted);background:var(--surface);border-radius:6px;padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.phone{position:relative;width:min(34%,210px);aspect-ratio:9/19.5;border-radius:34px;background:var(--device);padding:8px;border:1px solid var(--device-edge);box-shadow:var(--shadow-lg)}
.phone::before{content:"";position:absolute;top:14px;left:50%;width:30%;height:16px;margin-left:-15%;border-radius:10px;background:var(--device);z-index:2}
.phone .screen{width:100%;height:100%;border-radius:27px;overflow:hidden;background:var(--surface)}
.phone .screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.stage .phone{position:absolute;right:-4%;bottom:-12%;transform:translateZ(60px)}
@media (max-width:560px){.stage .phone{right:-2%;bottom:-16%;width:36%;border-radius:24px;padding:5px}.stage .phone .screen{border-radius:19px}.stage .phone::before{top:9px;height:10px}}
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;border-radius:14px;background:var(--material-dark);color:var(--material-dark-ink);border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);font-size:.85rem;line-height:1.3;max-width:250px;transform:translateZ(90px);animation:float 6s ease-in-out infinite}
.chip b{display:block;font-weight:600;color:var(--material-dark-ink)}
.chip small{color:var(--material-dark-muted)}
.chip .ci{flex:0 0 32px;height:32px;border-radius:10px 10px 10px 3px;display:grid;place-items:center;background:color-mix(in srgb,var(--c,var(--accent)) 45%,transparent);color:var(--material-dark-ink)}
.chip .ci svg{width:18px;height:18px}
.chip.c1{top:8%;left:-6%}
.chip.c2{bottom:18%;left:-9%;animation-delay:-2s}
.chip.c3{top:-6%;right:10%;animation-delay:-4s}
@media (max-width:980px){.chip.c1{left:2%}.chip.c2{left:0}}
@media (max-width:560px){.chip{font-size:.75rem;padding:.45rem .6rem;max-width:190px}.chip .ci{flex-basis:26px;height:26px}.chip.c3{display:none}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.stage-intro{animation:stageIn 1.2s var(--ease) both .35s}
@keyframes stageIn{from{opacity:0;transform:translateY(40px) rotateX(18deg) scale(.96)}to{opacity:1;transform:none}}

/* Laufband */
.marquee{--gap:2.2rem;display:flex;overflow:hidden;user-select:none;gap:var(--gap);border-block:1px solid var(--line);padding:1.1rem 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee ul{flex-shrink:0;display:flex;gap:var(--gap);list-style:none;margin:0;padding:0;min-width:100%;justify-content:space-around;animation:scrollX 38s linear infinite}
.marquee li{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--display);font-weight:700;font-size:clamp(1rem,2vw,1.35rem);white-space:nowrap;color:var(--muted)}
.marquee li::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--fahrschule)}
.marquee li:nth-child(3n)::before{background:var(--erstehilfe)}
.marquee li:nth-child(3n+2)::before{background:var(--ink)}
.marquee:hover ul{animation-play-state:paused}
@keyframes scrollX{to{transform:translateX(calc(-100% - var(--gap)))}}

/* Einblenden beim Scrollen */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .5s ease,transform var(--dur-bounce) var(--spring);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity .5s ease,transform var(--dur-bounce) var(--spring);transition-delay:var(--d,0ms)}
.reveal-scale.in{opacity:1;transform:none}
.no-js .reveal,.no-js .reveal-scale{opacity:1;transform:none}

/* Karten */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:2.6rem}
@media (max-width:860px){.cards{grid-template-columns:1fr}}
.cards.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.cards.three{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards.three{grid-template-columns:1fr}}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:1rem;overflow:hidden;isolation:isolate;transition:transform var(--dur-spring) var(--spring);-webkit-tap-highlight-color:transparent}
.card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s ease;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c,var(--accent)) 14%,transparent),transparent 60%)}
.card:hover::before{opacity:1}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c,var(--accent)) 40%,var(--line))}
a.card{text-decoration:none;color:inherit}
.card .brand{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-0.03em;display:flex;align-items:baseline;flex-wrap:wrap}
.card .brand .sfx{color:var(--ct)}
.card ul{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
.card li{display:flex;gap:.65rem;align-items:flex-start}
.card li::before{content:"";flex:0 0 auto;width:10px;height:10px;margin-top:.55em;border-radius:3px;background:var(--c,var(--accent))}
.status{align-self:flex-start;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;background:color-mix(in srgb,var(--c,var(--accent)) 14%,transparent);color:var(--ct,var(--fahrschule-text))}
.card .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem 1rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);font-size:.95rem;color:var(--muted)}
.card .shot{margin:-4px -4px 0;border-radius:10px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--bg-2)}
.card .shot img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform var(--dur-bounce) var(--spring)}
.card:hover .shot img{transform:scale(1.04)}
.ico{flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;border-radius:14px 14px 14px 4px;background:color-mix(in srgb,var(--c,var(--accent)) 13%,transparent);color:var(--ct,var(--fahrschule-text))}
.ico svg{width:24px;height:24px}

/* Bento-Raster */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:2.6rem}
.bento>*{grid-column:span 2}
.bento .w3{grid-column:span 3}
.bento .w4{grid-column:span 4}
.bento .w6{grid-column:span 6}
@media (max-width:980px){.bento{grid-template-columns:1fr 1fr}.bento>*,.bento .w3,.bento .w4{grid-column:span 1}.bento .w6{grid-column:span 2}}
@media (max-width:640px){.bento{grid-template-columns:1fr}.bento>*,.bento .w3,.bento .w4,.bento .w6{grid-column:span 1}}
.bento .card h3{font-size:1.15rem}
.bento .card p{color:var(--muted);font-size:.97rem}
.bento .card.dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.bento .card.dark p{color:color-mix(in srgb,var(--bg) 72%,transparent)}
.bento .card.dark .ico{background:color-mix(in srgb,var(--bg) 14%,transparent);color:var(--bg)}
.bento .card.tint{background:color-mix(in srgb,var(--c,var(--accent)) 9%,var(--surface))}

/* Sticky-Funktionsrundgang */
.tour{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,80px);margin-top:3rem}
@media (max-width:980px){.tour{grid-template-columns:1fr}}
.tour-steps{display:grid;gap:clamp(36px,20vh,180px);padding:6vh 0 20vh}
.tour-step{opacity:.35;transition:opacity .5s ease;padding-left:22px;border-left:3px solid var(--line)}
.tour-step.on{opacity:1;border-color:var(--c,var(--accent))}
.tour-step .num{font-family:var(--display);font-weight:800;font-size:.85rem;color:var(--ct,var(--fahrschule-text));letter-spacing:.1em}
.tour-step h3{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:.4rem 0 .7rem}
.tour-step p{color:var(--muted)}
.tour-step ul{margin:.9rem 0 0;padding:0;list-style:none;display:grid;gap:.45rem}
.tour-step li{display:flex;gap:.6rem}
.tour-step li::before{content:"";flex:0 0 8px;height:8px;margin-top:.6em;border-radius:2px;background:var(--c,var(--accent))}
.tour-visual{position:sticky;top:110px;align-self:start}
.tour-visual .frames{position:relative}
.tour-visual figure{margin:0;position:absolute;inset:0;opacity:0;transform:translateY(18px) scale(.98);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.tour-visual figure:first-child{position:relative}
.tour-visual figure.on{opacity:1;transform:none}
.tour-visual figcaption{margin-top:.8rem;font-size:.9rem;color:var(--muted)}
.tour-mobile-shot{display:none}
@media (max-width:980px){
  .tour-visual{display:none}
  .tour-steps{gap:56px;padding:0}
  .tour-step{opacity:1}
  .tour-mobile-shot{display:block;margin-top:1.2rem}
}

/* Bild-Text-Zeilen */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.feature-row+.feature-row{margin-top:clamp(64px,9vw,120px)}
.feature-row.flip>:first-child{order:2}
@media (max-width:900px){.feature-row{grid-template-columns:1fr}.feature-row.flip>:first-child{order:0}}
.checks{margin:1.2rem 0 0;padding:0;list-style:none;display:grid;gap:.6rem}
.checks li{display:flex;gap:.7rem;align-items:flex-start}
.checks li svg{flex:0 0 20px;width:20px;height:20px;margin-top:.2em;color:var(--ct,var(--fahrschule-text))}

/* Telefone nebeneinander */
.phones{display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,3vw,28px)}
.phones .phone{width:min(46%,250px)}
.phones .phone:nth-child(2){transform:translateY(-36px)}

/* Schritte */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:2.6rem;counter-reset:s}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.steps li{list-style:none;counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.steps li::before{content:counter(s,decimal-leading-zero);display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px 12px 12px 4px;background:var(--c,var(--accent));color:var(--on-fahrschule);font-family:var(--display);font-weight:800;margin-bottom:1rem}
.steps.eh li::before{background:var(--erstehilfe);color:var(--on-erstehilfe)}
.steps h3{font-size:1.1rem;margin-bottom:.4rem}
.steps p{color:var(--muted);font-size:.96rem}
ol.steps{padding:0}

/* Abschnitt dunkel */
.band{background:var(--ink);color:var(--bg);overflow:hidden;isolation:isolate}
.band .eyebrow,.band .lead,.band .muted{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.band .card{background:color-mix(in srgb,var(--bg) 6%,transparent);border-color:color-mix(in srgb,var(--bg) 14%,transparent);color:var(--bg)}
.band .card p{color:color-mix(in srgb,var(--bg) 72%,transparent)}
.band .bg-grid::before{background-image:linear-gradient(color-mix(in srgb,var(--bg) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--bg) 7%,transparent) 1px,transparent 1px)}
.band .btn-ghost{color:var(--bg);border-color:color-mix(in srgb,var(--bg) 30%,transparent);background:transparent}
.surface{background:var(--surface);border-block:1px solid var(--line)}

/* Große Kachel-Komposition (Logo) */
.dock{display:grid;grid-template-columns:1fr 1fr;gap:12px;aspect-ratio:1;max-width:460px;width:100%}
.tile{position:relative;border-radius:26px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;min-height:0;text-decoration:none;transition:transform var(--dur-spring) var(--spring);-webkit-tap-highlight-color:transparent}
.tile:hover{transform:scale(1.03)}
.tile .sub{font-family:var(--display);font-weight:700;font-size:clamp(1rem,2vw,1.35rem);letter-spacing:-0.02em;line-height:1.1}
.tile .sub small{display:block;font-weight:500;opacity:.85;font-size:.78em;letter-spacing:0}
.tile .tag{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.t-core{background:var(--ink);color:var(--bg);border-top-left-radius:46px}
.t-fs{background:var(--fahrschule);color:var(--on-fahrschule);border-top-right-radius:46px}
.t-eh{background:var(--erstehilfe);color:var(--on-erstehilfe);border-bottom-left-radius:46px}
.t-next{background:var(--surface);color:var(--ink);border:1.5px dashed var(--line);border-bottom-right-radius:46px}
.t-next .sub{color:var(--muted)}
.dock.assemble .tile{animation:tileIn 1s var(--ease) both}
.dock.assemble .tile:nth-child(1){--fx:-40px;--fy:-40px;animation-delay:.1s}
.dock.assemble .tile:nth-child(2){--fx:40px;--fy:-40px;animation-delay:.2s}
.dock.assemble .tile:nth-child(3){--fx:-40px;--fy:40px;animation-delay:.3s}
.dock.assemble .tile:nth-child(4){--fx:40px;--fy:40px;animation-delay:.4s}
@keyframes tileIn{from{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(-6deg) scale(.8)}to{opacity:1;transform:none}}

/* Statistik ohne erfundene Zahlen: nur belegbare Fakten */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:2.6rem}
@media (max-width:860px){.facts{grid-template-columns:1fr 1fr}}
.fact{padding:22px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface)}
.fact b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.8rem);letter-spacing:-0.03em;line-height:1;color:var(--ct,var(--ink))}
.fact span{display:block;margin-top:.6rem;color:var(--muted);font-size:.95rem}
.band .fact{background:color-mix(in srgb,var(--bg) 6%,transparent);border-color:color-mix(in srgb,var(--bg) 14%,transparent)}
.band .fact b{color:var(--bg)}
.band .fact span{color:color-mix(in srgb,var(--bg) 70%,transparent)}

/* Vergleich */
.compare{width:100%;border-collapse:separate;border-spacing:0;margin-top:2rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.97rem}
.compare th,.compare td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare tr:last-child td{border-bottom:0}
.compare thead th{font-family:var(--display);background:var(--bg-2)}
.compare td:first-child{font-weight:600}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* FAQ */
.faq{margin-top:2.4rem;display:grid;gap:12px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:0 22px}
.faq details[open]{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:18px 0;font-family:var(--display);font-weight:700;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 14px;height:14px;background:linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 14px no-repeat;transition:transform var(--dur-bounce) var(--spring-bounce)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 0 20px;color:var(--muted)}

/* Brotkrumen */
.crumbs{font-size:.9rem;color:var(--muted);margin-bottom:1.4rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.6}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}

/* Unterseiten-Kopf */
.page-hero{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(48px,6vw,80px);overflow:hidden;isolation:isolate}
.page-hero h1{font-size:clamp(2.3rem,6vw,4.6rem)}

/* CTA */
.cta{border-radius:32px;padding:clamp(32px,6vw,72px);background:var(--ink);color:var(--bg);position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;align-items:center}
@media (max-width:860px){.cta{grid-template-columns:1fr}}
.cta .lead{color:color-mix(in srgb,var(--bg) 72%,transparent)}
.cta .btn-ghost{color:var(--bg);border-color:color-mix(in srgb,var(--bg) 30%,transparent);background:transparent}
.cta::after{content:"";position:absolute;right:-60px;bottom:-60px;width:300px;height:300px;z-index:-1;background:
  linear-gradient(var(--fahrschule),var(--fahrschule)) 0 0/46% 46% no-repeat,
  linear-gradient(var(--erstehilfe),var(--erstehilfe)) 100% 0/46% 46% no-repeat,
  linear-gradient(color-mix(in srgb,var(--bg) 20%,transparent),color-mix(in srgb,var(--bg) 20%,transparent)) 0 100%/46% 46% no-repeat,
  linear-gradient(color-mix(in srgb,var(--bg) 10%,transparent),color-mix(in srgb,var(--bg) 10%,transparent)) 100% 100%/46% 46% no-repeat;opacity:.5;border-radius:40px;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Formular */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
form.form{display:grid;gap:14px;background:var(--surface);color:var(--ink);padding:clamp(20px,3vw,32px);border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.row{grid-template-columns:1fr}}
.form label{display:grid;gap:.35rem;font-size:.9rem;font-weight:600}
.form input,.form select,.form textarea{font:inherit;padding:.8rem .95rem;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--accent)}
.form textarea{min-height:120px;resize:vertical}
.form .btn{justify-self:start}
.form .opt{font-weight:500;color:var(--muted)}
.form input[aria-invalid="true"]{border-color:var(--erstehilfe-text)}
.form-msg{display:none;border-radius:10px;padding:.9rem 1rem;background:color-mix(in srgb,var(--accent) 12%,transparent);font-size:.95rem}
.form-msg.error{background:color-mix(in srgb,var(--erstehilfe) 14%,transparent)}
.form-msg.show{display:block}
.form-msg code{font-family:inherit;font-weight:600}

/* Platzhalter für fehlende Bilder */
.shot-ph{display:grid;place-items:center;aspect-ratio:16/10;background:var(--bg-2);color:var(--muted);font-size:.9rem}

/* Fußzeile */
.site-footer{padding:clamp(48px,7vw,80px) 0 32px;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.site-footer h2{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:.9rem;font-weight:700}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--ink)}
.foot-bottom{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.wordmark-xl{font-family:var(--display);font-weight:800;letter-spacing:-0.05em;line-height:.8;font-size:clamp(4rem,17vw,15rem);color:transparent;-webkit-text-stroke:1.5px var(--line);margin-top:2.4rem;user-select:none;white-space:nowrap;overflow:hidden}
.wordmark-xl span{color:var(--accent);-webkit-text-stroke:0}



/* Bausteine & Preise (Seite /preise/): Paket selbst zusammenstellen, Kacheln im 2x2-Motiv */
.bs-meta{font-size:.92rem;color:var(--muted)}
.bs-notice{border-radius:10px;padding:.9rem 1rem;background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:.95rem;max-width:70ch}
.bs-step{display:flex;align-items:center;gap:.7rem;margin:clamp(36px,5vw,56px) 0 1rem;font-size:clamp(1.3rem,2.4vw,1.6rem)}
.bs-num{flex:0 0 auto;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px 12px 12px 4px;background:var(--accent);color:var(--accent-ink);font-size:1rem}
.bs-fs{border:0;margin:0;padding:0;min-width:0}
.bs-fs+.bs-fs{margin-top:1.8rem}
.bs-fs legend{padding:0;margin-bottom:.8rem;font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px}
.bs-tile{position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:.6rem;min-width:0}
.bs-tile:nth-child(4n+1){border-top-left-radius:28px}
.bs-tile:nth-child(4n+2){border-top-right-radius:28px}
.bs-tile:nth-child(4n+3){border-bottom-left-radius:28px}
.bs-tile:nth-child(4n+4){border-bottom-right-radius:28px}
.bs-tile:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.bs-tile.is-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.bs-tile.is-off{border-style:dashed;background:transparent}
.bs-tile.is-off:hover{border-color:var(--line)}
.bs-tile:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
.bs-tile input:focus-visible{outline:none}
.bs-head{display:flex;align-items:flex-start;gap:.75rem}
.bs-ico{flex:0 0 40px;height:40px;display:grid;place-items:center;border-radius:12px 12px 12px 4px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--fahrschule-text)}
.bs-tile.is-off .bs-ico{background:color-mix(in srgb,var(--next) 16%,transparent);color:var(--muted)}
.bs-ico svg{width:22px;height:22px}
.bs-title{flex:1 1 auto;min-width:0;font-family:var(--display);font-weight:700;font-size:1.08rem;letter-spacing:-0.01em;line-height:1.2;overflow-wrap:anywhere}
.bs-title label{cursor:pointer}
.bs-title label::after{content:"";position:absolute;inset:0;border-radius:inherit}
.bs-tile.is-off .bs-title label{cursor:default}
.bs-title small{display:block;margin-top:.2rem;font-family:var(--body);font-weight:500;font-size:.88rem;color:var(--muted);letter-spacing:0}
.bs-tile input{position:relative;z-index:1;flex:0 0 auto;width:22px;height:22px;margin:.1rem 0 0;accent-color:var(--accent);cursor:pointer}
.bs-tile input:disabled{cursor:not-allowed}
.bs-text{font-size:.95rem;color:var(--muted)}
.bs-points{margin:0;padding:0;list-style:none;display:grid;gap:.35rem;font-size:.92rem}
.bs-points li{display:flex;gap:.55rem;align-items:flex-start}
.bs-points li::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:.5em;border-radius:2px;background:var(--accent)}
.bs-tile.is-off .bs-points li::before{background:var(--next)}
.bs-badges{display:flex;flex-wrap:wrap;gap:.4rem}
.bs-badge{font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.22rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--fahrschule-text)}
.bs-badge.plan{background:color-mix(in srgb,var(--next) 20%,transparent);color:var(--muted)}
.bs-needs{font-size:.88rem;color:var(--muted)}
.bs-needs.auto{color:var(--fahrschule-text);font-weight:600}
.bs-price{margin-top:auto;padding-top:.7rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2rem .8rem;font-size:.95rem}
.bs-price b{font-family:var(--display);font-weight:700}
.bs-price span{color:var(--muted)}
.bs-count{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-bottom:1rem}
.bs-count label{display:flex;align-items:center;gap:.6rem;font-size:.95rem}
.bs-count input{width:6.5rem}
.bs-kern{margin-top:14px;border:1.5px solid var(--line);border-radius:var(--radius);padding:18px 20px;background:var(--surface)}
.bs-kern h4{margin:0 0 .7rem;font-family:var(--display);font-size:1rem;font-weight:700}
.bs-kern ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:.5rem 1.2rem}
.bs-kern li{display:flex;gap:.6rem;align-items:flex-start}
.bs-kern li svg{flex:0 0 18px;width:18px;height:18px;margin-top:.2em;color:var(--fahrschule-text)}
.bs-sum{margin-top:clamp(36px,5vw,56px);background:var(--surface);border:1.5px solid var(--line);border-top:4px solid var(--accent);border-radius:var(--radius);border-top-left-radius:28px;padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,48px)}
@media (max-width:820px){.bs-sum{grid-template-columns:1fr}}
.bs-sum h3{margin-bottom:1rem}
.bs-lines{margin:0;padding:0;list-style:none;display:grid}
.bs-lines li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.15rem 1rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.bs-lines li:last-child{border-bottom:0}
.bs-lines .k{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex-basis:100%}
.bs-lines .v{color:var(--muted);white-space:nowrap}
.bs-total{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.2rem);letter-spacing:-0.02em;line-height:1.1;overflow-wrap:anywhere}
.bs-total small{display:block;margin-top:.35rem;font-family:var(--body);font-weight:500;font-size:.95rem;letter-spacing:0;color:var(--muted)}
.bs-side{display:flex;flex-direction:column;gap:.9rem}
.bs-side .bs-meta{margin:0}
.bs-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.4rem}
.bs-actions .btn{white-space:normal}
.bs-hint{font-size:.92rem;color:var(--fahrschule-text);min-height:1.4em}

/* Korrekturen Hero */
.grad .w,.grad .w>span{background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1{font-size:clamp(2.4rem,6vw,4.9rem)}
.page-hero h1{font-size:clamp(2.2rem,5.2vw,4.2rem)}
@media (min-width:981px){
  .hero-grid{grid-template-columns:1fr 1.08fr}
  .hero .stage{margin-right:calc(-1 * clamp(0px,4vw,60px))}
}
.hero-grid>*,.feature-row>*,.contact-grid>*,.tour>*,.split>*{min-width:0}
h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

/* ===== Bewegung & Material nach apple-design =====
   - Feedback beim Drücken (pointer-down), nicht erst beim Loslassen: scale(.97) in 100 ms, zurück mit Feder.
   - Animiert werden nur transform und opacity. Übergänge (keine Keyframes) sind jederzeit unterbrechbar
     und starten beim aktuellen Wert.
   - Ein- und Ausblenden laufen auf demselben Weg, Ursprung ist das auslösende Element. */
.btn:active,.icon-btn:active{transform:scale(.97);transition:transform var(--press) ease-out}
.btn:active svg{transform:none}
.card:active,a.card:active{transform:scale(.985);transition:transform var(--press) ease-out}
.tile:active{transform:scale(.97);transition:transform var(--press) ease-out}
.site-header ul a:active,.pill:active,.link-arrow:active{transform:scale(.97);transition:transform var(--press) ease-out}
.icon-btn{transition:transform var(--dur-spring) var(--spring);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.pill{transition:transform var(--dur-spring) var(--spring)}
.faq summary{-webkit-tap-highlight-color:transparent}
.faq summary:active::after{transform:scale(.85)}
.faq details[open]>div{animation:faqIn .45s var(--spring) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.bs-tile{-webkit-tap-highlight-color:transparent}
.bs-tile:active{transform:scale(.985)}
.bs-tile{transition:transform var(--dur-spring) var(--spring)}

/* Weniger Bewegung: Schieben und Federn werden zu sanften Überblendungen */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal-scale{transform:none;transition:opacity .4s ease;transition-delay:0ms}
  .split-words .w>span{transform:none;animation:none}
  .marquee ul,.blob,.chip,.cta::after{animation:none}
  .stage-intro,.dock.assemble .tile{animation:fadeOnly .4s ease both}
  .faq details[open]>div{animation:fadeOnly .3s ease both}
  .btn:hover,.btn:active,.card:hover,.card:active,.tile:hover,.tile:active,.icon-btn:active,.pill:active,.bs-tile:active,
  .site-header ul a:active,.link-arrow:active,.logo:hover .mark,.card:hover .shot img,.btn:hover svg,.link-arrow:hover::after{transform:none}
  .btn:active,.card:active,.tile:active,.icon-btn:active{opacity:.8;transition:opacity var(--press) ease-out}
  .site-header ul,.site-header ul.open{transform:none}
  .tour-visual figure{transform:none}
  .stage-inner{transform:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
}
@keyframes fadeOnly{from{opacity:0}to{opacity:1}}

/* Weniger Transparenz: Materialien werden undurchsichtig */
@media (prefers-reduced-transparency: reduce){
  .site-header::before{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .chip{background:#16202F;backdrop-filter:none;-webkit-backdrop-filter:none}
  .pill,.btn-ghost{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
  .blob{display:none}
}

/* Mehr Kontrast: klare Ränder, kräftigere Nebentexte */
@media (prefers-contrast: more){
  :root{--line:#8792A2;--muted:#3D4856}
  :root[data-theme="dark"]{--line:#7C879A;--muted:#D3DAE4}
  .site-header::before,.chip,.pill,.btn-ghost{backdrop-filter:none;-webkit-backdrop-filter:none}
  .site-header::before{background:var(--bg)}
  .chip{background:#0B1626;border-color:#EEF2F7}
  .card,.fact,.faq details,.steps li{border-width:2px}
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--line:#7C879A;--muted:#D3DAE4}
}
.hero h1{font-size:clamp(2.3rem,5.4vw,4.5rem)}
@media (min-width:601px){h1{hyphens:manual;-webkit-hyphens:manual}}
@media (min-width:981px){.hero .chip.c1{left:2%}.hero .chip.c2{left:-2%}}