/* ============================================================================
   BBFahrschule — main.css
   Aufbau: 1 Tokens · 2 Reset · 3 Layout · 4 Typografie · 5 Komponenten
           6 Header/Nav · 7 Hero · 8 Sektionen · 9 Rechner · 10 Formulare
           11 Footer · 12 Recht/Legal · 13 RTL · 14 Print · 15 Motion
   Durchgängig logische Eigenschaften (margin-inline, inset-inline …),
   damit die arabische RTL-Ansicht ohne zweites Stylesheet spiegelt.
   ========================================================================== */

/* ------------------------------------------------------------ 1 · TOKENS */
:root{
  /* Markenfarben — abgeleitet aus dem Logo (weiß auf Anthrazit) */
  --ink-900:#16181D; --ink-800:#1D2027; --ink-700:#262A33; --ink-600:#333843;
  --ink-500:#575D69; --ink-400:#7C838F; --ink-300:#A8AEB8;
  --line:#E4E7EC; --line-2:#EFF1F4;
  /* Seitenhintergrund: helles Türkis; Karten bleiben weiß (--paper) */
  --bg:#E8FCF0;
  --paper:#FFFFFF; --paper-2:#DCF6E8; --paper-3:#D2F1E1;

  --accent:#FFB703; --accent-600:#E5A203; --accent-700:#A87400;
  --accent-soft:#FFF6E0; --accent-line:#FFE29A;
  --on-accent:#16181D;

  --ok:#15803D; --ok-soft:#E8F6ED;
  --info:#1D6FD1; --info-soft:#E9F2FD;
  --warn:#B45309; --warn-soft:#FDF3E3;

  /* Typografie */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", "Noto Sans Arabic", sans-serif;
  --fs-xs:.78rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.0625rem;
  --fs-lg:clamp(1.125rem,.98rem + .6vw,1.3rem);
  --fs-h4:clamp(1.15rem,1.02rem + .5vw,1.35rem);
  --fs-h3:clamp(1.35rem,1.15rem + .9vw,1.75rem);
  --fs-h2:clamp(1.7rem,1.33rem + 1.6vw,2.6rem);
  --fs-h1:clamp(2.1rem,1.5rem + 2.8vw,3.9rem);

  /* Raster & Form */
  --wrap:1200px; --wrap-narrow:820px;
  --gap:clamp(1rem,.7rem + 1.2vw,1.75rem);
  --sect:clamp(3.5rem,2.4rem + 4.4vw,6.5rem);
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(22,24,29,.06), 0 1px 3px rgba(22,24,29,.05);
  --sh-2:0 4px 10px rgba(22,24,29,.06), 0 12px 28px rgba(22,24,29,.07);
  --sh-3:0 10px 24px rgba(22,24,29,.09), 0 28px 60px rgba(22,24,29,.11);
  --sh-accent:0 10px 30px rgba(255,183,3,.32);

  --ease:cubic-bezier(.22,.7,.3,1);
  --header-h:76px;
}

/* ------------------------------------------------------------- 2 · RESET */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
/* muss nach den Komponenten greifen: display:flex würde [hidden] sonst aushebeln */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  font-family:var(--font); font-size:var(--fs-base); line-height:1.65;
  color:var(--ink-700); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%; height:auto}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
ul,ol{padding:0; list-style:none}
table{border-collapse:collapse; width:100%}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:4px}
::selection{background:var(--accent); color:var(--on-accent)}

.skip-link{
  position:absolute; inset-inline-start:0; inset-block-start:-100px; z-index:2000;
  background:var(--ink-900); color:#fff; padding:.85rem 1.25rem;
  border-end-end-radius:var(--r); font-weight:600;
}
.skip-link:focus{inset-block-start:0}
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ------------------------------------------------------------ 3 · LAYOUT */
.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem, var(--wrap-narrow)); margin-inline:auto}
@media (max-width:560px){ .wrap,.wrap-narrow{width:calc(100% - 2rem)} }
.section{padding-block:var(--sect)}
.section--tight{padding-block:calc(var(--sect) * .62)}
.section--paper{background:var(--paper-2)}
.section--ink{background:var(--ink-900); color:#fff}
.grid{display:grid; gap:var(--gap)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr))}
.stack>*+*{margin-block-start:1rem}
.cluster{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center}

/* -------------------------------------------------------- 4 · TYPOGRAFIE */
h1,h2,h3,h4,h5{color:var(--ink-900); line-height:1.16; font-weight:800; letter-spacing:-.022em; text-wrap:balance}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} h4{font-size:var(--fs-h4)}
p{text-wrap:pretty}
.lead{font-size:var(--fs-lg); color:var(--ink-500); line-height:1.6}
.muted{color:var(--ink-500)}
.small{font-size:var(--fs-sm)}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--fs-xs); font-weight:750; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-700); margin-block-end:.9rem;
}
.eyebrow::before{content:""; inline-size:22px; block-size:2px; background:var(--accent); border-radius:2px}
.section--ink .eyebrow{color:var(--accent)}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.section--ink .lead,.section--ink .muted{color:#B9BFC9}
.sect-head{max-width:65ch; margin-block-end:clamp(2rem,1.4rem + 2vw,3.25rem)}
.sect-head--center{margin-inline:auto; text-align:center}
.sect-head--center .eyebrow{justify-content:center}

/* ------------------------------------------------------- 5 · KOMPONENTEN */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.85rem 1.6rem; border-radius:var(--r-pill); font-weight:700;
  font-size:var(--fs-sm); letter-spacing:.01em; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             background-color .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease);
  border:2px solid transparent; cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{inline-size:1.1em; block-size:1.1em; flex:none}
.btn--primary{background:var(--accent); color:var(--on-accent); box-shadow:var(--sh-accent)}
.btn--primary:hover{background:var(--accent-600); box-shadow:0 14px 36px rgba(255,183,3,.42)}
.btn--dark{background:var(--ink-900); color:#fff; box-shadow:var(--sh-2)}
.btn--dark:hover{background:var(--ink-700)}
.btn--ghost{border-color:var(--line); background:var(--paper); color:var(--ink-900)}
.btn--ghost:hover{border-color:var(--ink-900); background:var(--paper)}
.btn--on-ink{border-color:rgba(255,255,255,.28); color:#fff}
.btn--on-ink:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.btn--lg{padding:1.05rem 2rem; font-size:var(--fs-base)}
.btn--block{inline-size:100%; white-space:normal; text-align:center; line-height:1.3; padding-inline:1.1rem}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.35rem,1.1rem + .8vw,1.9rem);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card--hover:hover{transform:translateY(-5px); box-shadow:var(--sh-3); border-color:transparent}
.card__icon{
  inline-size:52px; block-size:52px; border-radius:15px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-700); margin-block-end:1.15rem; flex:none;
}
.card__icon svg{inline-size:26px; block-size:26px}
.card h3{margin-block-end:.55rem; font-size:var(--fs-h4)}
.card p{color:var(--ink-500); font-size:var(--fs-sm)}

.badge{
  display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem;
  border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:700;
  background:var(--accent-soft); color:var(--accent-700); border:1px solid var(--accent-line);
}
.badge--ok{background:var(--ok-soft); color:var(--ok); border-color:#BFE5CD}
.badge--info{background:var(--info-soft); color:var(--info); border-color:#C7DFF8}
.badge--ink{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.2)}

.ticklist li{display:flex; gap:.7rem; align-items:flex-start; margin-block-end:.65rem; font-size:var(--fs-sm)}
.ticklist svg{inline-size:1.15rem; block-size:1.15rem; color:var(--ok); flex:none; margin-block-start:.2rem}
.section--ink .ticklist svg{color:var(--accent)}

/* ------------------------------------------------------ 6 · HEADER / NAV */
.header{
  position:sticky; inset-block-start:0; z-index:900; background:rgba(232,252,240,.9);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-block-end:1px solid var(--line); transition:box-shadow .2s var(--ease);
}
.header--scrolled{box-shadow:var(--sh-2)}
.header__bar{display:flex; align-items:center; gap:1rem; block-size:var(--header-h)}
.brand{display:flex; align-items:center; gap:.7rem; margin-inline-end:auto; flex:none}
.brand img{inline-size:42px; block-size:42px; object-fit:contain}
.brand__name{font-weight:800; font-size:1.12rem; color:var(--ink-900); letter-spacing:-.03em; line-height:1.1}
.brand__sub{display:block; font-size:.66rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-400)}
@media (max-width:420px){ .brand__name{font-size:1rem} .brand img{inline-size:36px; block-size:36px} }

.nav{display:flex; align-items:center; gap:.15rem}
.nav a{
  padding:.55rem .85rem; border-radius:var(--r-sm); font-size:var(--fs-sm);
  font-weight:600; color:var(--ink-600); transition:color .15s, background-color .15s;
}
.nav a:hover{color:var(--ink-900); background:var(--paper-3)}
.nav a[aria-current="page"]{color:var(--ink-900); background:var(--accent-soft)}
.header__actions{display:flex; align-items:center; gap:.6rem; flex:none}
@media (max-width:1060px){ .nav,.header__actions .btn{display:none} }

.burger{
  display:none; inline-size:44px; block-size:44px; border-radius:var(--r-sm);
  border:1px solid var(--line); place-items:center; color:var(--ink-900);
}
.burger svg{inline-size:22px; block-size:22px}
@media (max-width:1060px){ .burger{display:grid} }

.mobilenav{
  position:fixed; inset:var(--header-h) 0 0 0; z-index:890; background:var(--bg);
  padding:1.5rem clamp(1rem,5vw,2rem) 2.5rem; overflow-y:auto;
  transform:translateY(-12px); opacity:0; visibility:hidden;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.mobilenav[data-open="true"]{transform:none; opacity:1; visibility:visible}
.mobilenav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem .35rem; border-block-end:1px solid var(--line-2);
  font-size:1.1rem; font-weight:650; color:var(--ink-900);
}
.mobilenav a[aria-current="page"]{color:var(--accent-700)}
.mobilenav .btn{margin-block-start:1.5rem}
.mobilenav__legal{margin-block-start:2rem; display:flex; flex-wrap:wrap; gap:1rem}
.mobilenav__legal a{border:0; padding:0; font-size:var(--fs-sm); font-weight:600; color:var(--ink-500)}
body[data-navopen="true"]{overflow:hidden}

/* Sprachumschalter */
.lang{position:relative; flex:none}
.lang__btn{
  display:flex; align-items:center; gap:.45rem; padding:.5rem .7rem;
  border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:700; color:var(--ink-700);
  transition:border-color .15s, background-color .15s;
}
.lang__btn:hover{border-color:var(--ink-300); background:var(--paper-2)}
.lang__btn svg{inline-size:16px; block-size:16px; color:var(--ink-400)}
.lang__flag{font-size:1.05rem; line-height:1}
.lang__menu{
  position:absolute; inset-block-start:calc(100% + .5rem); inset-inline-end:0; min-inline-size:190px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-3); padding:.4rem; z-index:1000;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.lang__menu[data-open="true"]{opacity:1; visibility:visible; transform:none}
.lang__menu button{
  display:flex; align-items:center; gap:.65rem; inline-size:100%; text-align:start;
  padding:.6rem .7rem; border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:600;
}
.lang__menu button:hover{background:var(--paper-3)}
.lang__menu button[aria-selected="true"]{background:var(--accent-soft); color:var(--accent-700); font-weight:750}
.lang__menu button .lang__flag{font-size:1.15rem}

/* --------------------------------------------------------------- 7 · HERO */
.hero{
  position:relative; background:var(--ink-900); color:#fff; overflow:hidden;
  padding-block:clamp(3rem,2rem + 5vw,5.5rem) clamp(2rem,1.4rem + 3vw,3.5rem);
}
.hero::before{
  content:""; position:absolute; inset-block-start:-25%; inset-inline-end:-10%;
  inline-size:min(72vw,880px); block-size:min(72vw,880px); border-radius:50%;
  background:radial-gradient(circle, rgba(255,183,3,.20) 0%, rgba(255,183,3,.05) 42%, transparent 68%);
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset-block-end:0; inset-inline:0; block-size:1px;
  background:linear-gradient(90deg, transparent, rgba(255,183,3,.45), transparent);
}
.hero__inner{position:relative; z-index:2; display:grid; gap:clamp(1.5rem,1rem + 3vw,3rem);
  grid-template-columns:1fr; align-items:center}
@media (min-width:940px){ .hero__inner{grid-template-columns:1.05fr .95fr} }
.hero h1{color:#fff; margin-block:0 1.1rem}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero__lead{font-size:var(--fs-lg); color:#C3C9D3; max-width:52ch; margin-block-end:1.9rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:.85rem; margin-block-end:2.25rem}
.hero__trust{display:flex; flex-wrap:wrap; gap:1.75rem; padding-block-start:1.75rem;
  border-block-start:1px solid rgba(255,255,255,.12)}
.hero__trust div{min-inline-size:76px}
.hero__trust b{display:block; font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);
  font-weight:800; color:#fff; line-height:1.1; letter-spacing:-.02em}
.hero__trust span{font-size:var(--fs-xs); color:#9AA2AE; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase}

.hero__media{position:relative}
.hero__car{
  inline-size:100%; filter:drop-shadow(0 34px 34px rgba(0,0,0,.55));
  animation:roll-in 1s var(--ease) both;
}
@keyframes roll-in{from{opacity:0; transform:translateX(34px) scale(.97)} to{opacity:1; transform:none}}
.hero__plate{
  position:absolute; inset-block-end:4%; inset-inline-start:2%;
  background:rgba(255,255,255,.07); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r);
  padding:.7rem 1rem; display:flex; align-items:center; gap:.65rem;
  font-size:var(--fs-xs); font-weight:650; color:#E6E9EE;
}
.hero__plate svg{inline-size:20px; block-size:20px; color:var(--accent); flex:none}
@media (max-width:939px){ .hero__plate{position:static; margin-block-start:1rem; display:inline-flex} }

/* Logo-Leiste / Vertrauensband */
.trustbar{background:var(--ink-800); padding-block:1.1rem; color:#9AA2AE}
.trustbar ul{display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem 2.25rem}
.trustbar li{display:flex; align-items:center; gap:.5rem; font-size:var(--fs-sm); font-weight:600}
.trustbar svg{inline-size:17px; block-size:17px; color:var(--accent); flex:none}

/* ---------------------------------------------------------- 8 · SEKTIONEN */
/* Klassen-Karten */
.klass{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.65rem; transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.klass:hover{transform:translateY(-5px); box-shadow:var(--sh-3); border-color:transparent}
.klass--featured{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.klass__tag{
  position:absolute; inset-block-start:-11px; inset-inline-end:1.35rem;
  background:var(--accent); color:var(--on-accent); font-size:var(--fs-xs);
  font-weight:750; padding:.22rem .7rem; border-radius:var(--r-pill);
}
.klass__key{
  inline-size:60px; block-size:60px; border-radius:var(--r); display:grid; place-items:center;
  background:var(--ink-900); color:#fff; font-size:1.4rem; font-weight:800;
  letter-spacing:-.04em; margin-block-end:1.1rem; flex:none;
}
.klass--featured .klass__key{background:var(--accent); color:var(--on-accent)}
.klass h3{font-size:var(--fs-h4); margin-block-end:.4rem}
.klass__desc{font-size:var(--fs-sm); color:var(--ink-500); margin-block-end:1.1rem}
.klass__meta{
  display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin-block-end:1.15rem;
  padding-block-end:1.15rem; border-block-end:1px solid var(--line-2);
}
.klass__meta span{font-size:var(--fs-xs); font-weight:650; color:var(--ink-500);
  background:var(--paper-3); padding:.25rem .6rem; border-radius:var(--r-pill)}
.klass__foot{margin-block-start:auto; padding-block-start:.35rem}
.klass__price{font-size:var(--fs-sm); color:var(--ink-500)}
.klass__price b{display:block; font-size:1.3rem; color:var(--ink-900); font-weight:800; letter-spacing:-.02em}

/* Ablauf-Schritte */
.steps{counter-reset:step; display:grid; gap:1.25rem}
@media (min-width:760px){ .steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))} }
.step{position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.6rem 1.5rem 1.5rem}
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  display:block; font-size:var(--fs-sm); font-weight:800; color:var(--accent-700);
  letter-spacing:.1em; margin-block-end:.75rem;
}
.step h3{font-size:var(--fs-md); font-weight:750; margin-block-end:.45rem}
.step p{font-size:var(--fs-sm); color:var(--ink-500)}
.section--ink .step{background:var(--ink-800); border-color:var(--ink-700)}
.section--ink .step p{color:#AEB5C0}

/* Feature-Split */
.split{display:grid; gap:clamp(1.75rem,1.2rem + 3vw,3.5rem); align-items:center}
@media (min-width:900px){ .split{grid-template-columns:1fr 1fr} .split--wide{grid-template-columns:1.15fr .85fr} }
.split__media{border-radius:var(--r-xl); overflow:hidden; background:var(--paper-3);
  border:1px solid var(--line); padding:clamp(1.25rem,1rem + 2vw,2.5rem)}
.split__media--ink{background:var(--ink-900); border-color:var(--ink-700)}
.split__media img{margin-inline:auto; filter:drop-shadow(0 22px 26px rgba(0,0,0,.4))}

/* Statistik-Band */
.statband{display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.statband div{background:var(--paper); padding:1.75rem 1.25rem; text-align:center}
.statband b{display:block; font-size:clamp(1.7rem,1.3rem + 1.7vw,2.5rem);
  font-weight:800; color:var(--ink-900); letter-spacing:-.03em; line-height:1}
.statband span{display:block; margin-block-start:.4rem; font-size:var(--fs-sm); color:var(--ink-500); font-weight:600}

/* Bewertungen */
.quote{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.75rem}
.quote__stars{display:flex; gap:.15rem; margin-block-end:.9rem; color:var(--accent)}
.quote__stars svg{inline-size:18px; block-size:18px}
.quote p{font-size:var(--fs-sm); color:var(--ink-600); margin-block-end:1.25rem}
.quote footer{display:flex; align-items:center; gap:.75rem}
.quote__av{inline-size:42px; block-size:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink-900); color:#fff; font-weight:750; font-size:var(--fs-sm); flex:none}
.quote__who b{display:block; font-size:var(--fs-sm); color:var(--ink-900); font-weight:700}
.quote__who span{font-size:var(--fs-xs); color:var(--ink-400)}

/* FAQ / Akkordeon */
.faq{border-block-start:1px solid var(--line)}
.faq__item{border-block-end:1px solid var(--line)}
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  inline-size:100%; text-align:start; padding:1.35rem .25rem;
  font-size:var(--fs-md); font-weight:700; color:var(--ink-900);
}
.faq__q:hover{color:var(--accent-700)}
.faq__ico{inline-size:26px; block-size:26px; border-radius:50%; background:var(--paper-3);
  display:grid; place-items:center; flex:none; transition:transform .22s var(--ease), background-color .2s}
.faq__ico svg{inline-size:14px; block-size:14px}
.faq__q[aria-expanded="true"] .faq__ico{transform:rotate(45deg); background:var(--accent); color:var(--on-accent)}
.faq__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s var(--ease)}
.faq__a[data-open="true"]{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding-block:0 1.35rem; padding-inline-end:3rem; color:var(--ink-500); font-size:var(--fs-sm)}

/* CTA-Band */
.ctaband{position:relative; background:var(--ink-900); color:#fff; border-radius:var(--r-xl);
  padding:clamp(2rem,1.5rem + 3vw,3.5rem); overflow:hidden}
.ctaband::before{
  content:""; position:absolute; inset-block-start:-55%; inset-inline-end:-12%;
  inline-size:460px; block-size:460px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,183,3,.24), transparent 66%);
}
.ctaband>*{position:relative; z-index:1}
.ctaband h2{color:#fff; margin-block-end:.75rem}
.ctaband p{color:#B9BFC9; max-width:56ch; margin-block-end:1.75rem}

/* --------------------------------------------------------- 9 · RECHNER */
.calc{display:grid; gap:var(--gap); align-items:start}
@media (min-width:980px){ .calc{grid-template-columns:1.1fr .9fr} }
.calc__panel{background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(1.35rem,1.1rem + 1vw,2rem)}
.calc__group+.calc__group{margin-block-start:1.75rem; padding-block-start:1.75rem; border-block-start:1px solid var(--line-2)}
.calc__label{display:block; font-size:var(--fs-sm); font-weight:750; color:var(--ink-900); margin-block-end:.7rem}
.calc__hint{font-size:var(--fs-xs); color:var(--ink-400); font-weight:500; margin-block-start:.45rem}

.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{
  padding:.55rem 1rem; border:1.5px solid var(--line); border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:700; color:var(--ink-600);
  transition:border-color .16s, background-color .16s, color .16s;
}
.chip:hover{border-color:var(--ink-300)}
.chip[aria-pressed="true"]{background:var(--ink-900); border-color:var(--ink-900); color:#fff}

.range{display:flex; align-items:center; gap:1rem}
.range input[type=range]{
  flex:1; appearance:none; -webkit-appearance:none; background:transparent; block-size:26px; cursor:pointer;
}
.range input[type=range]::-webkit-slider-runnable-track{
  block-size:6px; border-radius:3px;
  background:linear-gradient(90deg,var(--accent) var(--fill,50%), var(--line) var(--fill,50%));
}
.range input[type=range]::-moz-range-track{block-size:6px; border-radius:3px; background:var(--line)}
.range input[type=range]::-moz-range-progress{block-size:6px; border-radius:3px; background:var(--accent)}
.range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; inline-size:22px; block-size:22px; border-radius:50%;
  background:var(--paper); border:3px solid var(--accent); margin-block-start:-8px;
  box-shadow:var(--sh-1); transition:transform .15s var(--ease);
}
.range input[type=range]::-moz-range-thumb{
  inline-size:22px; block-size:22px; border-radius:50%; background:var(--paper);
  border:3px solid var(--accent); box-shadow:var(--sh-1);
}
.range input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.range__val{
  min-inline-size:62px; text-align:center; font-weight:800; font-size:var(--fs-md);
  color:var(--ink-900); background:var(--paper-3); border-radius:var(--r-sm); padding:.35rem .6rem;
}

.switchrow{display:flex; align-items:flex-start; gap:.85rem; padding-block:.7rem}
.switchrow+.switchrow{border-block-start:1px solid var(--line-2)}
.switch{position:relative; inline-size:44px; block-size:26px; flex:none; margin-block-start:.1rem}
.switch input{position:absolute; opacity:0; inline-size:100%; block-size:100%; margin:0; cursor:pointer; z-index:2}
.switch span{
  position:absolute; inset:0; background:var(--line); border-radius:var(--r-pill);
  transition:background-color .2s var(--ease);
}
.switch span::after{
  content:""; position:absolute; inset-block-start:3px; inset-inline-start:3px;
  inline-size:20px; block-size:20px; border-radius:50%; background:#fff;
  box-shadow:var(--sh-1); transition:transform .2s var(--ease);
}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span::after{transform:translateX(18px)}
.switch input:focus-visible+span{outline:3px solid var(--accent); outline-offset:3px}
.switchrow__txt b{display:block; font-size:var(--fs-sm); font-weight:700; color:var(--ink-900)}
.switchrow__txt span{font-size:var(--fs-xs); color:var(--ink-500)}

/* Ergebnis */
.result{position:sticky; inset-block-start:calc(var(--header-h) + 20px);
  background:var(--ink-900); color:#fff; border-radius:var(--r-lg); overflow:hidden}
@media (max-width:979px){ .result{position:static} }
.result__top{padding:clamp(1.5rem,1.2rem + 1vw,2rem); border-block-end:1px solid var(--ink-700);
  background:linear-gradient(160deg, var(--ink-800), var(--ink-900))}
.result__top>span{font-size:var(--fs-xs); font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent)}
.result__sum{font-size:clamp(2rem,1.5rem + 2.3vw,3rem); font-weight:800; letter-spacing:-.035em;
  line-height:1.05; margin-block:.5rem .3rem; color:#fff}
.result__range{font-size:var(--fs-sm); color:#9AA2AE}
.result__rows{padding:1.25rem clamp(1.5rem,1.2rem + 1vw,2rem)}
.result__rows h4{color:#fff; font-size:var(--fs-sm); text-transform:uppercase;
  letter-spacing:.09em; color:#8E96A2; font-weight:700; margin-block:1.1rem .7rem}
.result__rows h4:first-child{margin-block-start:0}
.rrow{display:flex; justify-content:space-between; gap:1rem; padding-block:.5rem;
  font-size:var(--fs-sm); border-block-end:1px solid rgba(255,255,255,.07)}
.rrow span{color:#B9BFC9}
.rrow b{color:#fff; font-weight:650; white-space:nowrap; font-variant-numeric:tabular-nums}
.rrow--sub span{padding-inline-start:.9rem; color:#8E96A2; font-size:var(--fs-xs)}
.rrow--total{border-block-end:0; padding-block-start:.9rem; margin-block-start:.4rem;
  border-block-start:1px solid rgba(255,255,255,.16); font-size:var(--fs-md)}
.rrow--total b{font-weight:800; color:var(--accent)}
.result__foot{padding:0 clamp(1.5rem,1.2rem + 1vw,2rem) clamp(1.5rem,1.2rem + 1vw,2rem)}
.result__note{font-size:var(--fs-xs); color:#8E96A2; margin-block-start:1rem; line-height:1.55}

/* Preistabelle */
.ptable-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg)}
.ptable{min-inline-size:520px; font-size:var(--fs-sm)}
.ptable caption{text-align:start; padding:1.15rem 1.35rem; font-weight:750;
  color:var(--ink-900); font-size:var(--fs-md); border-block-end:1px solid var(--line)}
.ptable th,.ptable td{padding:.85rem 1.35rem; text-align:start; border-block-end:1px solid var(--line-2)}
.ptable thead th{background:var(--paper-2); font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:.07em; color:var(--ink-500); font-weight:700}
.ptable td:last-child,.ptable th:last-child{text-align:end; white-space:nowrap; font-variant-numeric:tabular-nums}
.ptable tbody tr:last-child td{border-block-end:0}
.ptable tbody tr:hover{background:var(--paper-2)}
.ptable .is-total{font-weight:800; color:var(--ink-900); background:var(--accent-soft)}

/* ------------------------------------------------------- 10 · FORMULARE */
.field{margin-block-end:1.15rem}
.field label{display:block; font-size:var(--fs-sm); font-weight:700; color:var(--ink-900); margin-block-end:.45rem}
.field label .req{color:#C22} 
.input,.field input,.field select,.field textarea{
  inline-size:100%; padding:.8rem 1rem; border:1.5px solid var(--line);
  border-radius:var(--r); background:var(--paper); font-size:var(--fs-sm);
  transition:border-color .16s, box-shadow .16s;
}
.field textarea{min-block-size:140px; resize:vertical}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C838F' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:16px; padding-inline-end:2.6rem}
[dir="rtl"] .field select{background-position:left 1rem center}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.field__err{display:none; font-size:var(--fs-xs); color:#C22; margin-block-start:.35rem; font-weight:600}
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea,.field[data-invalid="true"] select{border-color:#C22}
.field[data-invalid="true"] .field__err{display:block}
.checkrow{display:flex; gap:.75rem; align-items:flex-start; font-size:var(--fs-sm); color:var(--ink-500)}
.checkrow input{inline-size:19px; block-size:19px; flex:none; margin-block-start:.2rem; accent-color:var(--accent)}
.checkrow a{color:var(--ink-900); text-decoration:underline; text-underline-offset:2px}
.formnote{font-size:var(--fs-xs); color:var(--ink-400); margin-block-start:1rem; line-height:1.6}
.alert{padding:1rem 1.15rem; border-radius:var(--r); font-size:var(--fs-sm); margin-block-end:1.25rem}
.alert--ok{background:var(--ok-soft); color:var(--ok); border:1px solid #BFE5CD}
.alert--err{background:#FDECEC; color:#B42318; border:1px solid #F7CFCF}
.alert--info{background:var(--info-soft); color:var(--info); border:1px solid #C7DFF8}

/* Kontakt-Infokacheln */
.infotile{display:flex; gap:1rem; align-items:flex-start; padding:1.25rem;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper)}
.infotile__ico{inline-size:44px; block-size:44px; border-radius:13px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-700); flex:none}
.infotile__ico svg{inline-size:21px; block-size:21px}
.infotile b{display:block; font-size:var(--fs-sm); color:var(--ink-900); margin-block-end:.2rem}
.infotile a,.infotile p{font-size:var(--fs-sm); color:var(--ink-500); word-break:break-word}
.infotile a:hover{color:var(--accent-700)}

/* Öffnungszeiten */
.hours{font-size:var(--fs-sm)}
.hours li{display:flex; justify-content:space-between; gap:1rem; padding-block:.55rem;
  border-block-end:1px solid var(--line-2)}
.hours li:last-child{border-block-end:0}
.hours dt,.hours .day{color:var(--ink-500)}
.hours b{color:var(--ink-900); font-weight:650; font-variant-numeric:tabular-nums}
.hours li[data-today="true"]{color:var(--accent-700)}
.hours li[data-today="true"] b,.hours li[data-today="true"] .day{color:var(--accent-700); font-weight:750}

/* Karte mit Consent */
.mapbox{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:var(--paper-3); min-block-size:340px; display:grid; place-items:center}
.mapbox iframe{inline-size:100%; block-size:100%; min-block-size:340px; border:0; display:block}
.mapconsent{text-align:center; padding:2rem 1.5rem; max-inline-size:440px}
.mapconsent svg{inline-size:38px; block-size:38px; color:var(--ink-300); margin-inline:auto; margin-block-end:1rem}
.mapconsent p{font-size:var(--fs-sm); color:var(--ink-500); margin-block-end:1.25rem}

/* ------------------------------------------------------------ 11 · FOOTER */
.footer{background:var(--ink-900); color:#9AA2AE; padding-block:clamp(2.75rem,2rem + 3vw,4.5rem) 0}
.footer__grid{display:grid; gap:2.25rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.footer__brand img{inline-size:46px; block-size:46px; margin-block-end:1rem}
.footer__brand .brand__name{color:#fff; font-size:1.2rem}
.footer__brand p{font-size:var(--fs-sm); margin-block:1rem 1.25rem; max-inline-size:34ch}
.footer h5{color:#fff; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.11em;
  font-weight:750; margin-block-end:1.1rem}
.footer li{margin-block-end:.6rem}
.footer a{font-size:var(--fs-sm); transition:color .15s}
.footer a:hover{color:var(--accent)}
.footer address{font-style:normal; font-size:var(--fs-sm); line-height:1.8}
.social{display:flex; gap:.55rem}
.social a{inline-size:38px; block-size:38px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--ink-800); border:1px solid var(--ink-700); color:#9AA2AE; transition:all .16s}
.social a:hover{background:var(--accent); border-color:var(--accent); color:var(--on-accent); transform:translateY(-2px)}
.social svg{inline-size:17px; block-size:17px}
.footer__bar{margin-block-start:clamp(2rem,1.5rem + 2vw,3rem); padding-block:1.5rem;
  border-block-start:1px solid var(--ink-700); display:flex; flex-wrap:wrap;
  gap:.6rem 1.5rem; align-items:center; justify-content:space-between; font-size:var(--fs-xs)}
.footer__bar nav{display:flex; flex-wrap:wrap; gap:.6rem 1.25rem}
.footer__credit{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.4rem .75rem;
  padding-block:1rem 1.5rem; border-block-start:1px solid var(--ink-700); font-size:var(--fs-xs); color:#7D8591}
.footer__credit a{display:inline-grid; place-items:center; color:#9AA2AE}
.footer__credit svg{inline-size:18px; block-size:18px}
.footer__credit-sep{opacity:.5}

/* ------------------------------------------------------- 12 · RECHT/LEGAL */
.pagehead{background:var(--paper-2); border-block-end:1px solid var(--line);
  padding-block:clamp(2.25rem,1.7rem + 2.5vw,3.75rem)}
.pagehead h1{margin-block-end:.75rem}
.pagehead .lead{max-width:62ch}
.crumbs{display:flex; flex-wrap:wrap; gap:.4rem; font-size:var(--fs-xs);
  color:var(--ink-400); margin-block-end:1rem}
.crumbs a:hover{color:var(--accent-700)}
.crumbs span[aria-hidden]{opacity:.5}

.legal{font-size:var(--fs-sm); line-height:1.75; color:var(--ink-600)}
.legal h2{font-size:var(--fs-h3); margin-block:2.5rem 1rem}
.legal h2:first-child{margin-block-start:0}
.legal h3{font-size:var(--fs-md); margin-block:1.75rem .7rem; font-weight:750}
.legal h4{font-size:var(--fs-base); margin-block:1.35rem .55rem; font-weight:700}
.legal p{margin-block-end:1rem}
.legal ul{list-style:disc; padding-inline-start:1.35rem; margin-block-end:1rem}
.legal ol{list-style:decimal; padding-inline-start:1.35rem; margin-block-end:1rem}
.legal li{margin-block-end:.45rem}
.legal a{color:var(--accent-700); text-decoration:underline; text-underline-offset:2px}
.legal a:hover{color:var(--ink-900)}
.legal strong{color:var(--ink-900)}
.legal address{font-style:normal; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r); padding:1.15rem 1.35rem; margin-block-end:1.25rem; line-height:1.8}
.legal__toc{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.5rem 1.75rem; margin-block-end:2.5rem}
.legal__toc h2{font-size:var(--fs-md); margin:0 0 .85rem}
.legal__toc ol{list-style:decimal; padding-inline-start:1.25rem; margin:0; columns:2; column-gap:2rem}
@media (max-width:640px){ .legal__toc ol{columns:1} }
.legal__toc a{color:var(--ink-600); text-decoration:none}
.legal__toc a:hover{color:var(--accent-700); text-decoration:underline}
.legal__updated{font-size:var(--fs-xs); color:var(--ink-400); padding-block-start:2rem;
  margin-block-start:2.5rem; border-block-start:1px solid var(--line)}

/* Cookie-Banner */
.cookie{
  position:fixed; inset-block-end:1rem; inset-inline:1rem; z-index:1100;
  max-inline-size:480px; margin-inline:auto; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-3);
  padding:1.5rem; transform:translateY(130%); transition:transform .32s var(--ease);
}
.cookie[data-open="true"]{transform:none}
.cookie h4{font-size:var(--fs-md); margin-block-end:.5rem}
.cookie p{font-size:var(--fs-sm); color:var(--ink-500); margin-block-end:1.25rem}
.cookie__btns{display:flex; flex-wrap:wrap; gap:.6rem}
.cookie__btns .btn{flex:1 1 auto}

/* Platzhalter-Warnung (nur lokal sichtbar) */
.devwarn{background:#7A2E0E; color:#FFE8D6; font-size:var(--fs-xs); padding:.6rem 1rem;
  text-align:center; font-weight:650; position:relative; z-index:1200}
.devwarn b{color:#FFD9B8}
.devwarn button{color:#FFD9B8; text-decoration:underline; margin-inline-start:.75rem; font-weight:700}

/* Zurück-nach-oben */
.totop{
  position:fixed; inset-block-end:1.5rem; inset-inline-end:1.5rem; z-index:800;
  inline-size:46px; block-size:46px; border-radius:50%; background:var(--ink-900); color:#fff;
  display:grid; place-items:center; box-shadow:var(--sh-2);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s, background-color .16s;
}
.totop[data-show="true"]{opacity:1; visibility:visible; transform:none}
.totop:hover{background:var(--accent); color:var(--on-accent)}
.totop svg{inline-size:19px; block-size:19px}

/* WhatsApp-Schnellkontakt */
.wa{
  position:fixed; inset-block-end:1.5rem; inset-inline-start:1.5rem; z-index:800;
  display:inline-flex; align-items:center; gap:.55rem; padding:.7rem 1.1rem;
  border-radius:var(--r-pill); background:#25D366; color:#0B2F19; font-weight:750;
  font-size:var(--fs-sm); box-shadow:0 8px 24px rgba(37,211,102,.4); transition:transform .18s var(--ease);
}
.wa:hover{transform:translateY(-3px)}
.wa svg{inline-size:20px; block-size:20px}
@media (max-width:640px){ .wa span{display:none} .wa{padding:.85rem; border-radius:50%} }

/* --------------------------------------------------------------- 13 · RTL */
[dir="rtl"] .hero__car{transform:scaleX(-1)}
[dir="rtl"] .hero__car{animation-name:roll-in-rtl}
@keyframes roll-in-rtl{from{opacity:0; transform:scaleX(-1) translateX(34px) scale(.97)} to{opacity:1; transform:scaleX(-1)}}
[dir="rtl"] .split__media img{transform:scaleX(-1)}
[dir="rtl"] .switch input:checked+span::after{transform:translateX(-18px)}
[dir="rtl"] .range input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(270deg,var(--accent) var(--fill,50%), var(--line) var(--fill,50%))}
[dir="rtl"] .totop svg,[dir="rtl"] .faq__ico svg{transform:none}
[dir="rtl"] .legal__toc ol,[dir="rtl"] .legal ul,[dir="rtl"] .legal ol{padding-inline-start:1.35rem}
[dir="rtl"] .eyebrow{letter-spacing:0}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{letter-spacing:0}
[dir="rtl"] .brand__sub,[dir="rtl"] .footer h5,[dir="rtl"] .hero__trust span,
[dir="rtl"] .result__top>span,[dir="rtl"] .ptable thead th{letter-spacing:.02em}

/* ------------------------------------------------------------- 14 · PRINT */
@media print{
  .header,.mobilenav,.footer,.totop,.wa,.cookie,.devwarn,.hero__cta,.lang,.burger{display:none!important}
  body{color:#000; background:#fff}
  .result{position:static; background:#fff; color:#000; border:1px solid #999}
  .result__sum,.rrow b,.rrow--total b,.result__rows h4{color:#000}
  .rrow span,.result__range,.result__note{color:#333}
  .section{padding-block:1.25rem}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:.7em; color:#555}
}

/* ------------------------------------------------------------ 15 · MOTION */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal[data-shown="true"]{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
}

/* Sprachcode-Badge im Auswahlmenü */
.lang__code{
  display:inline-grid; place-items:center; min-inline-size:30px; padding:.1rem .3rem;
  border-radius:6px; background:var(--paper-3); color:var(--ink-500);
  font-size:.66rem; font-weight:800; letter-spacing:.05em; flex:none;
}
.lang__menu button[aria-selected="true"] .lang__code{background:var(--accent); color:var(--on-accent)}
.lang__btn svg:first-child{color:var(--ink-400)}

/* RTL: Zahlen und Beträge nicht durch die Bidi-Regeln umsortieren lassen
   („92 %" würde sonst als „% 92" erscheinen, „2.400+" als „+2.400"). */
[dir="rtl"] .hero__trust b,
[dir="rtl"] .statband b,
[dir="rtl"] .rrow b,
[dir="rtl"] .result__sum,
[dir="rtl"] .range__val,
[dir="rtl"] .ptable td:last-child{
  direction:ltr; unicode-bidi:isolate;
}
[dir="rtl"] .hero__trust b,[dir="rtl"] .statband b{text-align:start}
[dir="rtl"] .rrow b,[dir="rtl"] .ptable td:last-child{text-align:end}