/* =========================================================
   MULLUX Reifenhandel Arnsberg – Landingpage
   Design-Rezept „Profil & Graphit"
   Monochrom (Logo-treu) · Archivo · XXL-Display-Typo
   Deko-System: Reifenprofil-Rillenraster · EIN Display-Trick: Outline-Headline
   ========================================================= */

/* ---------------- Fonts (lokal, DSGVO) ---------------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/archivo-latin-400.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/archivo-latin-500.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/archivo-latin-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/archivo-latin-700.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/archivo-latin-800.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;
  src:url('../fonts/archivo-latin-900.woff2') format('woff2')}

/* ---------------- Tokens ---------------- */
:root{
  /* Monochrome Skala – abgeleitet aus dem MULLUX-Logo (#4A4A4A Graphit) */
  --ink:#101010;           /* Headlines, dunkle Flaechen */
  --ink-2:#1C1C1C;         /* Karten auf dunkel */
  --ink-3:#2A2A2A;         /* Raender auf dunkel */
  --graphit:#4A4A4A;       /* Logo-Grau */
  --grau:#6E6E6E;          /* Fliesstext auf hell – 5,7:1 auf Porzellan */
  --grau-2:#8C8C8C;
  --linie:#E2E1DE;
  --porzellan:#F5F4F2;     /* Grundflaeche */
  --porzellan-2:#EFEEEB;   /* Sektionswechsel – 2 % Sprung */
  --weiss:#FFFFFF;
  --ok:#2F6B45;
  --no:#A82C2C;

  --font:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  /* Drei Radien – Button ≈ halber Karten-Radius (Clean-Layer) */
  --r-btn:10px;
  --r-card:20px;
  --r-lg:28px;
  --r-pill:999px;

  /* Schatten 1,5–6 % Deckkraft, mehrschichtig */
  --sh-xs:0 1px 2px rgba(16,16,16,.03);
  --sh-sm:0 1px 2px rgba(16,16,16,.025), 0 4px 12px rgba(16,16,16,.035);
  --sh-md:0 2px 4px rgba(16,16,16,.022), 0 10px 26px rgba(16,16,16,.04);
  --sh-lg:0 3px 6px rgba(16,16,16,.025), 0 18px 44px rgba(16,16,16,.05), 0 40px 90px rgba(16,16,16,.045);
  --sh-dark:0 10px 26px rgba(0,0,0,.24), 0 34px 78px rgba(0,0,0,.32);

  --container:min(1280px, calc(100vw - 44px));
  --sec-y:clamp(78px, 8.5vw, 132px);

  /* Motion – Charakter „Solide/Praezise": kurze Wege, Expo-Out */
  --ease:cubic-bezier(.2,.7,.2,1);
  --spring:cubic-bezier(.16,1,.3,1);
  --t-fast:180ms;
  --t-mid:340ms;
  --t-slow:520ms;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  margin:0;overflow-x:clip;
  background:var(--porzellan);color:var(--ink);
  font-family:var(--font);font-size:clamp(16.5px,1.1vw,17.5px);font-weight:400;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.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}
.container{width:var(--container);margin-inline:auto}

/* ---------------- Typo-Skala (7 Stufen) ---------------- */
.t-display,.t-h1,.t-h2{
  margin:0;font-weight:900;text-transform:uppercase;
  letter-spacing:-.045em;line-height:.9;text-wrap:balance;
}
.t-display{font-size:clamp(1.68rem,3.75vw,3.28rem)}
.t-h2{font-size:clamp(1.7rem,3.15vw,2.95rem);line-height:.95}
.t-h3{margin:0;font-size:clamp(1.12rem,1.55vw,1.42rem);font-weight:800;letter-spacing:-.022em;line-height:1.16;text-transform:uppercase}
.t-h4{margin:0;font-size:1.02rem;font-weight:700;letter-spacing:-.012em;line-height:1.28}
.t-body{margin:0;color:var(--grau);line-height:1.62}
p,li,summary,.step__hint,.pick__sub,.preis__note,.bew__hinweis{text-wrap:pretty}
.t-small{font-size:.86rem;line-height:1.5;color:var(--grau)}
.t-label{
  display:inline-flex;align-items:center;gap:11px;
  font-size:.7rem;font-weight:700;letter-spacing:.15em;line-height:1.2;text-transform:uppercase;color:var(--grau);
}
.t-label::before{content:"";width:26px;height:2px;background:currentColor;flex:0 0 26px}
.t-label--light{color:rgba(255,255,255,.66)}

.bew__rechts{min-width:0}
/* Bewertungs-Slider — nutzerinitiiert, mit Peek-Kante, Pfeilen und Zähler.
   Keine Auto-Rotation (Dauerregel). */
.bewslider{position:relative}
.bewslider__spur{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 4px 16px;margin:-4px -4px 0;
  scrollbar-width:none;-ms-overflow-style:none}
.bewslider__spur::-webkit-scrollbar{display:none}
.bewslider__spur:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:var(--r-card)}
.bewk{flex:0 0 min(360px,86%);scroll-snap-align:start;display:flex;flex-direction:column;
  padding:24px 24px 22px;border:1px solid var(--linie);border-radius:var(--r-card);background:var(--weiss);
  transition:border-color var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease)}
.bewk:hover{border-color:rgba(16,16,16,.16);box-shadow:var(--sh-sm)}
.bewk__kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.bewk__ico{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;
  border-radius:12px;background:var(--porzellan-2)}
.bewk__ico svg{width:21px;height:21px;fill:none;stroke:var(--ink);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.bewk .sterne{color:var(--ink)}
.bewk .sterne svg{width:14px;height:14px}
.bewk__titel{margin:0 0 9px;font-size:1.02rem;font-weight:800;letter-spacing:-.018em;line-height:1.2}
.bewk__text{margin:0 0 18px;font-size:.885rem;line-height:1.55;color:var(--grau)}
.bewk__quelle{display:flex;align-items:center;gap:9px;margin:auto 0 0;padding-top:16px;
  border-top:1px solid var(--linie);font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--grau-2)}
.bewk__quelle .google-g{width:16px;height:16px;flex:0 0 16px;color:var(--grau-2)}
.bewslider__steuer{display:flex;align-items:center;gap:12px;margin-top:6px}
.bewslider__pfeil{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--linie);background:var(--weiss);color:var(--ink);
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--spring)}
.bewslider__pfeil:hover:not(:disabled){border-color:var(--ink);background:var(--ink);color:var(--weiss)}
.bewslider__pfeil:active:not(:disabled){transform:scale(.94)}
.bewslider__pfeil:disabled{opacity:.32;cursor:default}
.bewslider__pfeil svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.bewslider__zaehler{font-size:.78rem;font-weight:800;letter-spacing:.05em;color:var(--grau-2);
  font-variant-numeric:tabular-nums}
@media (max-width:1080px){ .bewk{flex:0 0 min(340px,84%)} }
.bew__hinweis{text-wrap:pretty}
/* Der EINE Display-Trick: Outline-Zeile */
.outline{
  -webkit-text-stroke:1.5px var(--ink);
  color:transparent;
  display:block;
}
.on-dark .outline{-webkit-text-stroke-color:rgba(255,255,255,.72)}
@supports not (-webkit-text-stroke:1px black){
  .outline{color:var(--grau-2)}
}

/* ---------------- Deko: Reifenprofil-Rillenraster ---------------- */
.deko{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.deko--rillen::before{
  content:"";position:absolute;inset:-20%;
  background:repeating-linear-gradient(74deg,
    rgba(16,16,16,.055) 0 2px, transparent 2px 13px);
  opacity:.85;
}
.on-dark .deko--rillen::before{background:repeating-linear-gradient(74deg,
    rgba(255,255,255,.05) 0 2px, transparent 2px 13px)}
.deko--block::after{
  content:"";position:absolute;right:-6%;top:-14%;width:44%;height:128%;
  background:repeating-linear-gradient(74deg,
    rgba(16,16,16,.05) 0 3px, transparent 3px 19px);
  transform:skewX(-8deg);
}
.on-dark .deko--block::after{background:repeating-linear-gradient(74deg,
    rgba(255,255,255,.045) 0 3px, transparent 3px 19px)}

/* ---------------- Buttons ---------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:58px;padding:15px 26px;
  border:1.5px solid transparent;border-radius:var(--r-btn);
  font-size:.87rem;font-weight:800;letter-spacing:.045em;line-height:1.1;text-transform:uppercase;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--spring);
  overflow:hidden;
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn svg{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn--ink{background:var(--ink);color:var(--weiss);border-color:var(--ink)}
.btn--ink:hover{background:#000;border-color:#000}
.btn--weiss{background:var(--weiss);color:var(--ink);border-color:var(--weiss)}
.btn--weiss:hover{background:var(--porzellan-2);border-color:var(--porzellan-2)}
.btn--linie{background:transparent;color:var(--ink);border-color:rgba(16,16,16,.28)}
.btn--linie:hover{background:var(--ink);color:var(--weiss);border-color:var(--ink)}
.btn--geist{background:rgba(255,255,255,.06);color:var(--weiss);border-color:rgba(255,255,255,.42);backdrop-filter:blur(8px)}
.btn--geist:hover{background:var(--weiss);color:var(--ink);border-color:var(--weiss)}
.btn--gross{min-height:64px;font-size:.92rem;width:100%}
.btn.is-load{pointer-events:none;opacity:.75}
.btn.is-load::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:currentColor;opacity:.5;animation:load 1.1s var(--ease) infinite;
}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ---------------- Header ---------------- */
.hdr{
  position:fixed;z-index:120;top:14px;left:50%;transform:translateX(-50%);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;
  width:min(1320px,calc(100% - 28px));min-height:76px;padding:11px 12px 11px 20px;
  border:1px solid rgba(255,255,255,.16);border-radius:18px;
  background:rgba(16,16,16,.5);backdrop-filter:blur(18px) saturate(130%);
  color:var(--weiss);
  transition:background-color var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease),color var(--t-mid) var(--ease),top var(--t-mid) var(--ease);
}
.hdr.is-stuck,.hdr--fest{
  top:10px;color:var(--ink);
  background:rgba(255,255,255,.92);border-color:var(--linie);box-shadow:var(--sh-md);
}

.hdr--fest .hdr__tel{border-color:rgba(16,16,16,.22)}
.hdr--fest .hdr__tel:hover{background:var(--ink);color:var(--weiss);border-color:var(--ink)}
/* Logo in zwei Fassungen: weiß über dem Hero, Original sobald die Leiste hell wird.
   Beide stammen aus derselben Kundendatei — nur der weiße Hintergrund ist freigestellt. */
.hdr__brand{position:relative;display:block;width:152px;line-height:0}
.hdr__logo{width:100%;height:auto;transition:opacity var(--t-mid) var(--ease)}
.hdr__logo--dunkel{position:absolute;inset:0;opacity:0}
.hdr.is-stuck .hdr__logo--hell{opacity:0}
.hdr.is-stuck .hdr__logo--dunkel{opacity:1}
/* Unterseiten: Leiste ist dauerhaft hell, dort steht nur die dunkle Fassung */
.hdr--fest .hdr__logo--dunkel{position:static;opacity:1}

.nav{display:flex;justify-content:center;gap:clamp(16px,2.2vw,34px)}
.nav a{font-size:.755rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;opacity:.86;
  transition:opacity var(--t-fast) var(--ease)}
.nav a:hover{opacity:1}
.hdr__ctas{display:flex;align-items:center;gap:10px}
.hdr__tel{
  display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:var(--r-btn);
  font-size:.79rem;font-weight:800;letter-spacing:.03em;
  border:1.5px solid rgba(255,255,255,.34);transition:all var(--t-fast) var(--ease);
}
.hdr.is-stuck .hdr__tel{border-color:rgba(16,16,16,.22)}
.hdr__tel:hover{background:var(--weiss);color:var(--ink);border-color:var(--weiss)}
.hdr.is-stuck .hdr__tel:hover{background:var(--ink);color:var(--weiss);border-color:var(--ink)}
.hdr__tel svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hdr__cta{min-height:48px;padding:12px 20px;font-size:.775rem}
.hdr.is-stuck .hdr__cta{background:var(--ink);color:var(--weiss);border-color:var(--ink)}

/* ---------------- Hero ---------------- */
.hero{position:relative;isolation:isolate;padding:calc(112px + 5vw) 0 clamp(64px,6vw,92px);color:var(--weiss);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, rgba(8,8,8,.94) 0%, rgba(8,8,8,.82) 34%, rgba(8,8,8,.5) 58%, rgba(8,8,8,.66) 100%),
    linear-gradient(180deg, rgba(8,8,8,.7) 0%, transparent 22%, transparent 62%, rgba(8,8,8,.8) 100%);
}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.86fr);gap:clamp(34px,4.4vw,72px);align-items:center}

.hero h1{
  margin:0 0 16px;font-size:clamp(.76rem,1vw,.86rem);font-weight:700;letter-spacing:.1em;line-height:1.4;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.hero__claim{max-width:none;margin:0 0 22px}
/* Beide Zeilen bleiben zwingend einzeilig — sonst rutscht „€." in eine dritte Reihe */
.hero__claim,.hero__claim .outline,.hero__claim .unterstrich{white-space:nowrap}
.hero__claim .outline{-webkit-text-stroke-color:rgba(255,255,255,.75)}
.hero__text{max-width:47ch;margin:0 0 26px;color:rgba(255,255,255,.8);font-size:1.06rem;line-height:1.58}
.hero__usps{display:grid;gap:11px;margin:0 0 30px;padding:0;list-style:none}
.hero__usps li{display:flex;align-items:flex-start;gap:12px;font-size:.955rem;font-weight:600;color:rgba(255,255,255,.94)}
.hero__usps svg{width:19px;height:19px;flex:0 0 19px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px}
.hero__proof{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}

/* Sterne */
.sterne{display:inline-flex;align-items:center;gap:7px}
.sterne svg{width:15px;height:15px;fill:currentColor}
.google-g{width:19px;height:19px;flex:0 0 19px}
.proof-line{display:inline-flex;align-items:center;gap:10px;font-size:.83rem;font-weight:600}
.proof-line strong{font-weight:800}

/* ---------------- Formularkarte / Reifen-Finder ---------------- */
.fcard{
  position:relative;border-radius:var(--r-lg);background:var(--weiss);color:var(--ink);
  box-shadow:var(--sh-dark);overflow:hidden;
}
.fcard__head{padding:26px clamp(20px,2.4vw,32px) 0}
.fcard__head p{padding-right:118px}
@media (max-width:860px){.fcard__head p{padding-right:104px}}
.fcard__head .t-h3{margin-bottom:7px}
.fcard__head p{margin:0;color:var(--grau);font-size:.9rem;line-height:1.5}
.stoerer{
  position:absolute;z-index:3;top:14px;right:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  width:112px;height:112px;border-radius:50%;
  background:var(--ink);color:var(--weiss);text-align:center;line-height:1;
  transform:rotate(-11deg);box-shadow:var(--sh-dark);
}
.stoerer b{display:block;font-size:1.62rem;font-weight:900;letter-spacing:-.04em;line-height:1}
.stoerer span{display:block;margin:0;font-size:.5rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;opacity:.72}
.prog{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
  margin:20px clamp(20px,2.4vw,32px) 0;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--grau-2)}
.prog__track{height:5px;border-radius:var(--r-pill);background:var(--linie);overflow:hidden}
.prog__track i{display:block;height:100%;background:var(--ink);transition:width var(--t-mid) var(--ease)}
.step{display:none;padding:20px clamp(20px,2.4vw,32px) 26px}
.step.is-active{display:block;animation:stepIn var(--t-mid) var(--spring) both}
@keyframes stepIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.step__q{margin:0 0 4px;font-size:1.2rem;font-weight:800;letter-spacing:-.022em;line-height:1.18}
.step__hint{margin:0 0 16px;color:var(--grau);font-size:.85rem;line-height:1.5}
.picks{display:grid;gap:10px}
.picks--2{grid-template-columns:1fr 1fr}
.picks--3{grid-template-columns:repeat(3,1fr)}
.pick{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:15px 14px;text-align:left;
  border:1.5px solid var(--linie);border-radius:var(--r-card);background:var(--weiss);
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--spring),box-shadow var(--t-fast) var(--ease);
}
.pick:hover{border-color:rgba(16,16,16,.4);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.pick.is-sel{border-color:var(--ink);background:var(--ink);color:var(--weiss)}
.pick.is-sel .pick__sub{color:rgba(255,255,255,.68)}
.pick svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pick b{font-size:.925rem;font-weight:800;letter-spacing:-.012em;line-height:1.2}
.pick__sub{font-size:.775rem;color:var(--grau);line-height:1.35}
.feld{display:block;margin-bottom:13px}
.feld > span{display:block;margin-bottom:7px;font-size:.775rem;font-weight:700;letter-spacing:.03em}
.feld input,.feld textarea{
  width:100%;min-height:54px;padding:14px 15px;
  border:1.5px solid var(--linie);border-radius:var(--r-btn);background:var(--porzellan);
  font-size:1rem;transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.feld textarea{min-height:96px;resize:vertical}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--ink);background:var(--weiss)}
.feld--reihe{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.feld--reihe input{text-align:center;font-weight:700;letter-spacing:.04em}
.groesse-hilfe{
  display:flex;gap:13px;align-items:center;margin:0 0 16px;padding:13px 14px;
  border:1px dashed var(--linie);border-radius:var(--r-card);background:var(--porzellan);
}
.groesse-hilfe svg{width:56px;height:56px;flex:0 0 56px}
.groesse-hilfe p{margin:0;font-size:.79rem;line-height:1.45;color:var(--grau)}
.groesse-hilfe b{color:var(--ink)}
.consent{display:grid;grid-template-columns:19px 1fr;gap:10px;align-items:start;margin:14px 0 16px;
  font-size:.755rem;line-height:1.45;color:var(--grau);cursor:pointer}
.consent input{width:19px;height:19px;margin:2px 0 0;accent-color:var(--ink)}
.consent a{text-decoration:underline;text-underline-offset:2px}
.form-err{margin-top:12px;font-size:.84rem;font-weight:600;color:var(--no)}
.step__nav{display:flex;gap:10px;margin-top:6px}
.back{min-height:58px;padding:15px 20px;border:1.5px solid var(--linie);border-radius:var(--r-btn);
  font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grau);
  transition:all var(--t-fast) var(--ease)}
.back:hover{border-color:var(--ink);color:var(--ink)}
.fcard__trust{padding:0 clamp(20px,2.4vw,32px) 22px}
.grev{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 14px;border-top:1px solid var(--linie);
  font-size:.79rem;font-weight:600;color:var(--grau)}
.grev .sterne{color:var(--ink)}
.formstate{display:none;padding:34px clamp(20px,2.4vw,32px) 34px;text-align:center}
.formstate.is-on{display:block;animation:stepIn var(--t-mid) var(--spring) both}
.formstate__mark{display:grid;place-items:center;width:66px;height:66px;margin:0 auto 20px;
  border-radius:50%;background:var(--ink);color:var(--weiss)}
.formstate__mark svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:36;stroke-dashoffset:36;animation:draw .5s var(--ease) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.formstate p{margin:0 auto 18px;max-width:38ch;color:var(--grau)}

/* ---------------- Sektionen ---------------- */
.sec{position:relative;padding:var(--sec-y) 0}
.sec > .container{position:relative;z-index:1}
.sec--weiss{background:var(--weiss)}
.sec--porzellan{background:var(--porzellan-2)}
.sec--ink{background:var(--ink);color:var(--weiss)}
.sec--ink .t-body,.sec--ink .t-small{color:rgba(255,255,255,.66)}
.sec__kopf{max-width:62ch;margin:0 0 clamp(38px,4vw,60px)}
.sec__kopf .t-label{margin-bottom:16px}
.sec__kopf .t-h2{margin-bottom:16px}
.sec__kopf--mitte{max-width:64ch;margin-inline:auto;text-align:center}
.sec__kopf--mitte .t-label{justify-content:center}
.sec__kopf--breit{max-width:none;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,72px);align-items:end}

/* Marken-Leiste — Original-Herstellerlogos, optisch auf gleiche Wirkung normiert */
.marken{padding:34px 0;background:var(--weiss);border-bottom:1px solid var(--linie);overflow:hidden}
.marken__spur{display:flex;gap:clamp(42px,5.5vw,86px);align-items:center;width:max-content;
  padding-left:clamp(42px,5.5vw,86px);animation:spur 52s linear infinite}
.marken:hover .marken__spur{animation-play-state:paused}
@keyframes spur{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marken__i{display:grid;place-items:center;flex:0 0 auto;height:44px}
.marken__i img{max-height:100%;width:auto;object-fit:contain;
  transition:transform var(--t-mid) var(--spring)}
.marken__i:hover img{transform:scale(1.05)}
/* Jede Wortmarke hat andere Proportionen — Höhe einzeln gesetzt, damit sie gleich stark wirken */
.marken__i--con img{height:26px}
.marken__i--mic img{height:24px}
.marken__i--bri img{height:24px}
.marken__i--han img{height:26px}
.marken__i--nex img{height:22px}
.marken__i--toy img{height:22px}
.marken__wrap{position:relative}
.marken__wrap::before,.marken__wrap::after{content:"";position:absolute;z-index:2;top:0;width:90px;height:100%;pointer-events:none}
.marken__wrap::before{left:0;background:linear-gradient(90deg,var(--weiss),transparent)}
.marken__wrap::after{right:0;background:linear-gradient(270deg,var(--weiss),transparent)}
@media (max-width:860px){
  .marken{padding:26px 0}
  .marken__i{height:34px}
  .marken__i--con img{height:21px}
  .marken__i--mic img{height:19px}
  .marken__i--bri img{height:19px}
  .marken__i--han img{height:21px}
  .marken__i--nex img{height:17px}
  .marken__i--toy img{height:17px}
  .marken__wrap::before,.marken__wrap::after{width:44px}
}

/* Preistabelle */
.preis__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);align-items:start}
.preis__karte{
  display:flex;flex-direction:column;height:100%;padding:clamp(24px,2.4vw,32px);
  border:1px solid var(--linie);border-radius:var(--r-card);background:var(--weiss);
  transition:transform var(--t-mid) var(--spring),box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease);
}
.preis__karte:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:rgba(16,16,16,.16)}
.preis__karte--haupt{background:var(--ink);color:var(--weiss);border-color:var(--ink)}
.preis__karte--haupt .preis__zeile{border-color:rgba(255,255,255,.14)}
.preis__karte--haupt .preis__zeile span{color:rgba(255,255,255,.72)}
.preis__karte--haupt .preis__note{color:rgba(255,255,255,.56)}
.preis__tag{display:inline-flex;align-self:flex-start;padding:6px 11px;margin-bottom:16px;
  border:1px solid currentColor;border-radius:var(--r-pill);
  font-size:.62rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;opacity:.7}
.preis__karte .t-h3{margin-bottom:6px}
.preis__sub{margin:0 0 20px;font-size:.83rem;color:var(--grau)}
.preis__karte--haupt .preis__sub{color:rgba(255,255,255,.66)}
.preis__liste{margin:0;padding:0;list-style:none}
.preis__zeile{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:12px 0;border-top:1px solid var(--linie)}
.preis__zeile span{font-size:.9rem;color:var(--grau)}
.preis__zeile b{font-size:1.06rem;font-weight:900;letter-spacing:-.02em;white-space:nowrap}
.preis__note{margin:18px 0 0;font-size:.75rem;line-height:1.45;color:var(--grau-2)}
.preis__cta{margin-top:auto;padding-top:22px}

/* Leistungs-Boxen: Foto + Titel + Text + genau 3 Bullets */
.leist__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px)}
.leist{display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:var(--r-card);
  background:var(--weiss);overflow:hidden;
  transition:transform var(--t-mid) var(--spring),box-shadow var(--t-mid) var(--ease)}
.leist:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.leist__bild{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--porzellan-2)}
.leist__bild img{width:100%;height:100%;object-fit:cover;transition:transform 620ms var(--ease)}
.leist:hover .leist__bild img{transform:scale(1.045)}
.leist__nr{position:absolute;z-index:2;left:14px;top:14px;display:grid;place-items:center;
  min-width:34px;height:28px;padding:0 9px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--weiss);font-size:.68rem;font-weight:900;letter-spacing:.04em}
.leist__body{display:flex;flex-direction:column;flex:1;padding:24px 22px 26px}
.leist__body .t-h3{margin-bottom:9px}
.leist__body > p{margin:0 0 18px;font-size:.905rem;line-height:1.55;color:var(--grau)}
.haken{margin:auto 0 0;padding:0;list-style:none;display:grid;gap:9px}
.haken li{display:flex;align-items:flex-start;gap:10px;font-size:.86rem;font-weight:600;line-height:1.4}
.haken svg{width:17px;height:17px;flex:0 0 17px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.is-in .haken svg path{stroke-dasharray:26;stroke-dashoffset:26;animation:draw .45s var(--ease) forwards}
.is-in .haken li:nth-child(2) svg path{animation-delay:.09s}
.is-in .haken li:nth-child(3) svg path{animation-delay:.18s}

/* Beweis-Sektion (Lager) */
.beweis{position:relative;overflow:hidden}
.beweis__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,4vw,68px);align-items:center}
.beweis__bild{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-dark)}
.beweis__bild img{width:100%}
.beweis__zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px}
.beweis__z{padding:0 18px;border-left:1px solid rgba(255,255,255,.16)}
.beweis__z:first-child{border-left:0;padding-left:0}
.beweis__z b{display:block;font-size:clamp(1.7rem,3vw,2.6rem);font-weight:900;letter-spacing:-.04em;line-height:1}
.beweis__z span{display:block;margin-top:5px;font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.56)}

/* Prüf-Protokoll (Gebrauchtreifen) */
.pruef{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--linie);
  border-radius:var(--r-card);background:var(--weiss);overflow:hidden}
.pruef__i{padding:clamp(22px,2.2vw,30px) clamp(16px,1.6vw,24px);border-left:1px solid var(--linie);
  transition:background-color var(--t-mid) var(--ease)}
.pruef__i:first-child{border-left:0}
.pruef__i:hover{background:var(--porzellan)}
.pruef__nr{display:block;margin-bottom:14px;font-size:.66rem;font-weight:800;letter-spacing:.13em;color:var(--grau-2)}
.pruef__i svg{width:38px;height:38px;margin-bottom:16px;fill:none;stroke:var(--ink);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
/* Die fünf Prüfschritte zeichnen sich nacheinander, sobald die Reihe im Bild ist */
.pruef.is-in .pruef__i svg *{stroke-dasharray:150;stroke-dashoffset:150;
  animation:zeichne 1.15s var(--ease) forwards}
.pruef.is-in .pruef__i:nth-child(2) svg *{animation-delay:.14s}
.pruef.is-in .pruef__i:nth-child(3) svg *{animation-delay:.28s}
.pruef.is-in .pruef__i:nth-child(4) svg *{animation-delay:.42s}
.pruef.is-in .pruef__i:nth-child(5) svg *{animation-delay:.56s}
/* Beim Überfahren zeichnet der Schritt erneut — macht die Prüfung greifbar */
.pruef__i:hover svg *{animation:zeichne .8s var(--ease) forwards}
.pruef__i svg circle{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){
  .pruef.is-in .pruef__i svg *,.pruef__i:hover svg *{stroke-dashoffset:0;animation:none}
}
.pruef__i b{display:block;margin-bottom:7px;font-size:.94rem;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.pruef__i p{margin:0;font-size:.815rem;line-height:1.5;color:var(--grau)}

/* Ablauf — RGN-Standard: 4 Schritte horizontal (PC), vertikale Timeline (mobil),
   pulsierende Linie mit wanderndem Punkt, Icons zeichnen sich beim Eintreten. */
.flow-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.2vw,30px);margin:clamp(34px,4vw,52px) 0 0}
.flowline{position:absolute;z-index:0;top:41px;left:12.5%;right:12.5%;height:3px;border-radius:3px;
  background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.85) 45%,rgba(255,255,255,.22));
  background-size:220% 100%;animation:flowPuls 3.4s linear infinite;opacity:.8}
.flowline::after{content:"";position:absolute;top:50%;left:0;width:11px;height:11px;margin-top:-5.5px;
  border-radius:50%;background:var(--weiss);
  box-shadow:0 0 0 4px rgba(255,255,255,.14), 0 0 18px rgba(255,255,255,.65);
  animation:flowPunkt 3.8s cubic-bezier(.5,0,.5,1) infinite}
@keyframes flowPuls{to{background-position:-220% 0}}
@keyframes flowPunkt{0%{left:0}100%{left:100%}}
.pstep{position:relative;z-index:1;text-align:center;padding:0 6px}
.pstep__badge{position:relative;display:grid;place-items:center;width:84px;height:84px;margin:0 auto 20px;
  border-radius:50%;background:var(--ink-2);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 28px rgba(0,0,0,.4)}
.pstep__badge::before{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(255,255,255,.7);opacity:0;animation:flowPing 2.8s var(--ease) infinite}
.pstep:nth-of-type(2) .pstep__badge::before{animation-delay:.7s}
.pstep:nth-of-type(3) .pstep__badge::before{animation-delay:1.4s}
.pstep:nth-of-type(4) .pstep__badge::before{animation-delay:2.1s}
@keyframes flowPing{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.2);opacity:0}}
.pstep__badge svg{width:38px;height:38px;fill:none;stroke:var(--weiss);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.flow-steps.is-in .pstep__badge svg *{stroke-dasharray:120;stroke-dashoffset:120;
  animation:zeichne 1.1s var(--ease) forwards}
.flow-steps.is-in .pstep:nth-of-type(2) .pstep__badge svg *{animation-delay:.16s}
.flow-steps.is-in .pstep:nth-of-type(3) .pstep__badge svg *{animation-delay:.32s}
.flow-steps.is-in .pstep:nth-of-type(4) .pstep__badge svg *{animation-delay:.48s}
@keyframes zeichne{to{stroke-dashoffset:0}}
.pstep__num{position:absolute;top:-3px;right:-3px;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:var(--weiss);color:var(--ink);
  font-size:.75rem;font-weight:900;letter-spacing:-.02em;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.pstep h3{margin:0 0 8px;font-size:clamp(1rem,1.25vw,1.12rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.2;text-transform:uppercase}
.pstep p{margin:0;font-size:.87rem;line-height:1.55;color:rgba(255,255,255,.64)}
.pstep__meta{display:inline-block;margin-top:12px;padding:5px 12px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);
  font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.8)}
@media (max-width:860px){
  /* Mobil Pflichtform: links Kreise, rechts Texte, linksbündig */
  .flow-steps{grid-template-columns:1fr;gap:26px;max-width:460px;margin-inline:auto}
  .flowline{top:0;bottom:0;left:41px;right:auto;width:3px;height:auto;
    background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.85) 45%,rgba(255,255,255,.22));
    background-size:100% 220%;animation:flowPulsV 3.4s linear infinite}
  .flowline::after{left:50%;top:0;margin-left:-5.5px;margin-top:0;
    animation:flowPunktV 3.8s cubic-bezier(.5,0,.5,1) infinite}
  .pstep{display:grid;grid-template-columns:84px 1fr;column-gap:20px;row-gap:0;
    text-align:left;align-items:start;padding:0}
  .pstep__badge{margin:0;grid-column:1;grid-row:1 / span 3;align-self:start}
  .pstep > :not(.pstep__badge){grid-column:2}
  .pstep h3{margin-top:10px}
  .pstep p{margin-top:5px}
  .pstep__meta{margin-top:11px;justify-self:start}
}
@keyframes flowPulsV{to{background-position:0 -220%}}
@keyframes flowPunktV{0%{top:0}100%{top:100%}}
@media (prefers-reduced-motion:reduce){
  .flowline,.flowline::after,.pstep__badge::before{animation:none}
  .flow-steps.is-in .pstep__badge svg *{stroke-dashoffset:0;animation:none}
}

/* Galerie-Marquee */
.galerie{overflow:hidden;padding:0 0 var(--sec-y)}
.galerie__wrap{position:relative}
.galerie__wrap::before,.galerie__wrap::after{content:"";position:absolute;z-index:2;top:0;width:12vw;height:100%;pointer-events:none}
.galerie__wrap::before{left:0;background:linear-gradient(90deg,var(--porzellan-2),transparent)}
.galerie__wrap::after{right:0;background:linear-gradient(270deg,var(--porzellan-2),transparent)}
.galerie__spur{display:flex;gap:16px;width:max-content;animation:spur 58s linear infinite}
.galerie:hover .galerie__spur{animation-play-state:paused}
.galerie__i{position:relative;flex:0 0 clamp(210px,22vw,290px);aspect-ratio:4/5;border-radius:var(--r-card);
  overflow:hidden;background:var(--weiss);border:1px solid var(--linie);box-shadow:var(--sh-sm)}
.galerie__i img{width:100%;height:100%;object-fit:cover;
  transition:filter var(--t-mid) var(--ease),transform 700ms var(--ease)}
.galerie__i:hover img{transform:scale(1.04)}

/* Bewertungen */
.bew__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,4vw,64px);align-items:start}
.bew__score{padding:clamp(26px,2.6vw,36px);border:1px solid var(--linie);border-radius:var(--r-card);background:var(--weiss)}
.bew__zahl{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.bew__zahl b{font-size:clamp(3rem,5vw,4.4rem);font-weight:900;letter-spacing:-.05em;line-height:1}
.bew__zahl i{font-style:normal;font-size:1rem;font-weight:700;color:var(--grau-2)}
.bew__balken{display:grid;gap:9px;margin-top:22px}
.bew__b{display:grid;grid-template-columns:52px 1fr 42px;gap:12px;align-items:center;font-size:.76rem;color:var(--grau)}
.bew__b i{display:block;height:6px;border-radius:var(--r-pill);background:var(--linie);overflow:hidden;font-style:normal}
.bew__b i span{display:block;height:100%;background:var(--ink);width:0;transition:width 900ms var(--ease)}
.is-in .bew__b i span{width:var(--w)}
.bew__themen{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bew__t{display:flex;align-items:flex-start;gap:12px;padding:19px 20px;border:1px solid var(--linie);
  border-radius:var(--r-card);background:var(--weiss);
  transition:transform var(--t-mid) var(--spring),box-shadow var(--t-mid) var(--ease)}
.bew__t:hover{transform:translateY(-2px);box-shadow:var(--sh-sm)}
.bew__t svg{width:20px;height:20px;flex:0 0 20px;margin-top:2px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bew__t b{display:block;margin-bottom:3px;font-size:.9rem;font-weight:800;letter-spacing:-.012em}
.bew__t span{font-size:.79rem;line-height:1.45;color:var(--grau)}
.bew__hinweis{margin:22px 0 0;font-size:.73rem;color:var(--grau-2);line-height:1.5}

/* Einzugsgebiet — links Content, rechts die Gebietskarte.
   Der Rand-Fade steckt in der SVG, dazu ein Verlauf an den Sektionskanten:
   die Karte soll in der Fläche liegen, nicht als Kasten darauf. */
.gebiet{overflow:hidden}
.gebiet__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,3.6vw,64px);align-items:center}
.gebiet__haken{margin:26px 0 0;gap:11px}
.gebiet__haken li{font-size:.93rem}
.gebiet__btns{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}
.gebiet__karte{position:relative;margin:0 calc(var(--rand, 0px) * -1)}
.gebiet__karte img{width:100%;height:auto;display:block}
/* Kanten weich auslaufen lassen — nur dort, wo der Browser Masken kann */
@supports (mask-image: linear-gradient(#000, transparent)) {
  .gebiet__karte img{
    -webkit-mask-image:radial-gradient(108% 100% at 50% 50%, #000 48%, transparent 88%);
            mask-image:radial-gradient(108% 100% at 50% 50%, #000 48%, transparent 88%);
  }
}
@media (max-width:1080px){
  .gebiet__grid{grid-template-columns:1fr;gap:34px}
  .gebiet__karte{order:2;max-width:640px;margin-inline:auto}
}
@media (max-width:520px){
  .gebiet__btns .btn{width:100%}
}

/* FAQ */
.faq{display:grid;gap:0;border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:24px 4px;font-size:1.02rem;font-weight:700;letter-spacing:-.015em;line-height:1.35;
  cursor:pointer;list-style:none;transition:color var(--t-fast) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--graphit)}
.faq__plus{position:relative;flex:0 0 22px;width:22px;height:22px}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;
  transform:translate(-50%,-50%);transition:transform var(--t-mid) var(--spring),opacity var(--t-fast) var(--ease)}
.faq__plus::before{width:14px;height:2px}
.faq__plus::after{width:2px;height:14px}
.faq details[open] .faq__plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq__a{overflow:hidden;padding:0 4px 26px;max-width:74ch}
.faq__a p{margin:0;color:var(--grau);line-height:1.62}
.faq details[open] .faq__a{animation:stepIn var(--t-mid) var(--ease) both}

/* Final-CTA */
.final{position:relative;isolation:isolate;color:var(--weiss);overflow:hidden}
.final__bg{position:absolute;inset:0;z-index:-2}
.final__bg img{width:100%;height:100%;object-fit:cover}
.final__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,rgba(8,8,8,.95) 0%,rgba(8,8,8,.86) 42%,rgba(8,8,8,.6) 100%)}
.final__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(34px,4.4vw,72px);align-items:center}
.final__tel{display:inline-flex;align-items:center;gap:14px;margin:26px 0 0;
  font-size:clamp(1.6rem,2.8vw,2.35rem);font-weight:900;letter-spacing:-.035em;
  transition:opacity var(--t-fast) var(--ease)}
.final__tel:hover{opacity:.78}
.final__tel svg{width:.72em;height:.72em;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.final__tel-label{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* Standort */
.ort__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,3.6vw,60px);align-items:stretch}
.ort__karte{padding:clamp(26px,2.6vw,36px);border-radius:var(--r-card);background:var(--ink);color:var(--weiss)}
.ort__zeile{display:grid;grid-template-columns:22px 1fr;gap:14px;padding:15px 0;border-top:1px solid rgba(255,255,255,.14)}
.ort__zeile:first-of-type{border-top:0;padding-top:0}
.ort__zeile svg{width:20px;height:20px;margin-top:3px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.62}
.ort__zeile span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ort__zeile b{display:block;margin-top:3px;font-size:1rem;font-weight:700;letter-spacing:-.01em}
.ort__map{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--linie);min-height:340px;background:var(--porzellan-2)}
.ort__map iframe{width:100%;height:100%;min-height:340px;border:0;display:block}
.map-platz{display:grid;place-items:center;height:100%;min-height:340px;padding:26px;text-align:center;gap:14px}
.map-platz p{margin:0;font-size:.86rem;color:var(--grau);max-width:34ch}

/* Footer */
.ft{background:var(--ink);color:rgba(255,255,255,.6);padding:clamp(52px,5vw,76px) 0 30px}
.ft__grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,58px)}
.ft__brand img{width:190px}
.ft__grid p{margin:16px 0 0;font-size:.88rem;line-height:1.6;max-width:44ch}
.ft h4{margin:0 0 15px;font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--weiss)}
.ft ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:.88rem}
.ft a:hover{color:var(--weiss)}
.ft__unten{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center;
  margin-top:clamp(36px,4vw,56px);padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:.79rem}
.ft__unten nav{display:flex;flex-wrap:wrap;gap:20px}

/* ---------------- Overlays ---------------- */
.ovl{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(8,8,8,.7);backdrop-filter:blur(5px)}
.ovl.is-on{display:flex;animation:ovlIn var(--t-mid) var(--ease) both}
@keyframes ovlIn{from{opacity:0}to{opacity:1}}
.ovl__box{position:relative;width:min(560px,100%);max-height:92vh;overflow-y:auto;
  border-radius:var(--r-lg);background:var(--weiss);box-shadow:var(--sh-dark);
  animation:boxIn var(--t-mid) var(--spring) both}
@keyframes boxIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.ovl__x{position:absolute;z-index:5;top:12px;right:12px;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:var(--porzellan);color:var(--ink);
  transition:background-color var(--t-fast) var(--ease),transform var(--t-fast) var(--spring)}
.ovl__x:hover{background:var(--ink);color:var(--weiss);transform:rotate(90deg)}
.ovl__x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.promo{width:min(430px,100%);padding:44px 30px 32px;text-align:center}
.promo .t-h3{margin-bottom:12px}
.promo p{margin:0 auto 22px;max-width:30ch;color:var(--grau);font-size:.92rem}
.promo__zahl{display:block;margin:0 auto 16px;font-size:clamp(2.6rem,7vw,3.6rem);font-weight:900;letter-spacing:-.05em;line-height:1}

/* Cookie-Banner */
.cc{position:fixed;z-index:210;left:50%;bottom:16px;transform:translate(-50%,150%);
  width:min(660px,calc(100% - 24px));padding:24px 26px;
  border:1px solid var(--linie);border-radius:var(--r-card);background:var(--weiss);box-shadow:var(--sh-lg);
  transition:transform var(--t-slow) var(--spring)}
.cc.is-on{transform:translate(-50%,0)}
.cc h3{margin:0 0 8px;font-size:1rem;font-weight:800;letter-spacing:-.015em}
.cc p{margin:0 0 18px;font-size:.83rem;line-height:1.55;color:var(--grau)}
.cc p a{text-decoration:underline;text-underline-offset:2px}
.cc__btns{display:flex;flex-wrap:wrap;gap:9px}
.cc__btns .btn{min-height:50px;padding:13px 20px;font-size:.78rem;flex:1 1 auto}

/* Floating-Kontakt */
.fab{position:fixed;z-index:150;right:18px;bottom:18px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fab__list{display:grid;gap:9px;opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);
  transform-origin:bottom right;transition:all var(--t-mid) var(--spring)}
.fab.is-open .fab__list{opacity:1;visibility:visible;transform:none}
.fab__list a{display:flex;align-items:center;gap:11px;padding:12px 17px;border-radius:var(--r-pill);
  background:var(--weiss);box-shadow:var(--sh-lg);font-size:.83rem;font-weight:700;white-space:nowrap;
  transition:transform var(--t-fast) var(--spring)}
.fab__list a:hover{transform:translateX(-3px)}
.fab__list svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fab__btn{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:var(--ink);color:var(--weiss);box-shadow:var(--sh-dark);
  transition:transform var(--t-mid) var(--spring)}
.fab__btn:hover{transform:scale(1.06)}
.fab.is-open .fab__btn{transform:rotate(45deg)}
.fab__btn svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fab__puls{position:absolute;inset:0;border-radius:50%;border:2px solid var(--ink);
  animation:puls 2.6s var(--ease) infinite;pointer-events:none}
@keyframes puls{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.5);opacity:0}}

/* ---------------- Reveal-Engine ---------------- */
.rv{opacity:0;transform:translateY(10px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--spring)}
.rv.is-in{opacity:1;transform:none}

/* Handgezeichneter Unterstrich in der H1-Zone */
.unterstrich{position:relative;display:inline-block}
.unterstrich svg{position:absolute;left:0;bottom:-.14em;width:100%;height:.2em;overflow:visible;pointer-events:none}
.unterstrich path{fill:none;stroke:rgba(255,255,255,.85);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:520;stroke-dashoffset:520;animation:strich 1s var(--ease) .55s forwards}
@keyframes strich{to{stroke-dashoffset:0}}

/* ---------------- Responsive ---------------- */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:38px}
  .final__grid,.beweis__grid,.bew__grid,.ort__grid,.sec__kopf--breit{grid-template-columns:1fr}
  .preis__grid,.leist__grid{grid-template-columns:1fr 1fr}
  .pruef{grid-template-columns:1fr 1fr}
  .pruef__i{border-left:1px solid var(--linie);border-top:1px solid var(--linie)}
  .pruef__i:nth-child(odd){border-left:0}
  .pruef__i:nth-child(-n+2){border-top:0}
  .nav{display:none}
}
@media (max-width:860px){
  :root{--container:min(1280px,calc(100vw - 32px))}
  .hero__btns{display:grid;grid-template-columns:1fr;gap:10px}
  .hero__btns .btn{width:100%}
  .hdr{min-height:66px;padding:9px 10px 9px 15px;grid-template-columns:auto 1fr;gap:12px}
  .hdr__brand{width:120px}
  .hdr__cta{display:none}
  .hdr__ctas{justify-self:end}
  .hdr__tel{padding:11px 15px}
  .preis__grid,.leist__grid,.bew__themen{grid-template-columns:1fr}
  .ablauf__i{grid-template-columns:64px 1fr;gap:18px;padding:22px 6px}
  .ablauf__ico{display:none}
  .ablauf__i:hover{transform:none}
  .picks--3{grid-template-columns:1fr 1fr}
  .stoerer{width:96px;height:96px;top:12px;right:12px}
  .stoerer span{font-size:.44rem;letter-spacing:.07em}
  .stoerer b{font-size:1.4rem}
  .ft__grid{grid-template-columns:1fr;gap:32px}
  .fab{right:14px;bottom:14px}
}
@media (max-width:520px){
  .picks--2,.picks--3{grid-template-columns:1fr}
  /* Auswahlkarten werden zu kompakten Zeilen — spart im Quiz ~40 % Hoehe */
  .pick{flex-direction:row;align-items:center;gap:13px;padding:13px 14px}
  .pick svg{width:28px;height:28px;flex:0 0 28px}
  .pick > b{flex:0 0 auto}
  .pick__sub{margin-left:auto;text-align:right}
  .feld--reihe{grid-template-columns:1fr 1fr}
  .feld--reihe label:last-child{grid-column:1 / -1}
  .beweis__zahlen{grid-template-columns:1fr;gap:16px}
  .beweis__z{padding:0;border-left:0;border-top:1px solid rgba(255,255,255,.16);padding-top:14px}
  .beweis__z:first-child{border-top:0;padding-top:0}
  .groesse-hilfe{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
}

@media print{.hdr,.fab,.cc,.ovl{display:none !important}}

/* ---------------- Rechtsseiten ---------------- */
.legal{padding:calc(112px + 3vw) 0 clamp(60px,6vw,100px);background:var(--porzellan)}
.legal__wrap{width:min(820px,calc(100vw - 44px));margin-inline:auto}
.legal .t-label{margin-bottom:16px}
.legal h1{margin:0 0 clamp(28px,3vw,44px);font-size:clamp(2rem,4.2vw,3.4rem);font-weight:900;
  letter-spacing:-.045em;line-height:.95;text-transform:uppercase}
.legal h2{margin:clamp(38px,4vw,58px) 0 16px;font-size:clamp(1.2rem,1.9vw,1.55rem);font-weight:800;
  letter-spacing:-.022em;line-height:1.2;text-transform:uppercase}
.legal h3{margin:28px 0 10px;font-size:1.02rem;font-weight:700;letter-spacing:-.012em;line-height:1.3}
.legal p{margin:0 0 15px;max-width:75ch;color:var(--grau);line-height:1.68}
.legal ul,.legal ol{margin:0 0 18px;padding-left:22px;max-width:75ch;color:var(--grau);line-height:1.68}
.legal li{margin-bottom:7px}
.legal p a,.legal li a,.legal h2 a,.legal h3 a{text-decoration:underline;text-underline-offset:2px;color:var(--ink)}
.legal .btn,.legal .orte a,.legal__zurueck{text-decoration:none}
.legal .btn--ink{color:var(--weiss)}
.legal .btn--linie,.legal .btn--weiss{color:var(--ink)}
.legal .btn--linie:hover{color:var(--weiss)}
.legal .orte a{color:inherit}
.legal strong{color:var(--ink);font-weight:700}
.legal__box{padding:22px 24px;margin:0 0 20px;border:1px solid var(--linie);border-radius:var(--r-card);background:var(--weiss)}
.legal__box p:last-child{margin-bottom:0}
.legal__stand{margin-top:clamp(38px,4vw,58px);padding-top:22px;border-top:1px solid var(--linie);
  font-size:.83rem;color:var(--grau-2)}
.legal__zurueck{display:flex;width:fit-content;align-items:center;gap:10px;margin-bottom:26px;
  font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--grau)}
.legal__zurueck:hover{color:var(--ink)}
.legal__zurueck svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================
   MOTION — Charakter „Solide" (Handwerk): 0,35–0,45 s,
   kein Ueberschwingen, Reveal 8 px Desktop / 6 px mobil.
   Loop-Landkarte: Marken-Marquee · Lager-Karten · Galerie-Marquee
   (nie zwei gleichzeitig im Bild).
   ========================================================= */

/* Reveal auf 8 px (Gesetz 2) */
.rv{transform:translateY(8px)}
@media (max-width:860px){ .rv{transform:translateY(6px)} }

/* --- Baustein 25: handgezeichneter Unterstrich (H2-Zeile im Hero) --- */
.hero__claim .unterstrich{position:relative;display:inline-block}
.hero__claim .unterstrich svg{
  position:absolute;left:-2%;bottom:-.1em;width:104%;height:.26em;
  overflow:visible;pointer-events:none;
}
.hero__claim .unterstrich path{
  fill:none;stroke:rgba(255,255,255,.9);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:340;stroke-dashoffset:340;
}
.hero__claim.is-in .unterstrich path{animation:strich .85s var(--ease) .5s forwards}
@keyframes strich{to{stroke-dashoffset:0}}

/* --- Baustein 6: Ablauf-Linie zeichnet sich einmal --- */
.ablauf{position:relative}
.ablauf::before{
  content:"";position:absolute;z-index:0;left:47px;top:30px;bottom:30px;width:2px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.55) 6%,rgba(255,255,255,.55) 94%,transparent);
  transform-origin:top;transform:scaleY(0);
  transition:transform 1.5s var(--ease);
}
.ablauf.is-in::before{transform:scaleY(1)}
.ablauf__i{position:relative;z-index:1}
.ablauf__nr{position:relative;z-index:2}
@media (max-width:860px){ .ablauf::before{left:26px} }
@media (prefers-reduced-motion:reduce){ .ablauf::before{transform:scaleY(1)} }

/* --- Baustein 4: Zaehler (Endwert steht im Markup, JS zaehlt hoch) --- */
.zahl{font-variant-numeric:tabular-nums}

/* Loops pausieren, wenn die Sektion nicht im Bild ist (Gesetz 8) */
.marken.is-paused .marken__spur,
.galerie.is-paused .galerie__spur{animation-play-state:paused}

/* FAB-Puls laeuft nur dreimal an, statt dauerhaft (Loop-Budget) */
.fab__puls{animation:puls 2.6s var(--ease) 3}

@media (prefers-reduced-motion:reduce){
  .hero__claim .unterstrich path{stroke-dashoffset:0;animation:none}
}