/* =========================================================================
   AUTO DEPPING · MEISTERWERKSTATT — Kfz-Werkstatt Rodenberg
   Design-Rezept „Werkstatt-Tafel": weiße Grundfläche wie das Werkstattschild,
   tiefes Anthrazit nur an den Konversionspunkten. Zwei Farben mit getrennten
   Aufgaben — Blau trägt die Aussagen, Rot trägt die Zahlen. Display-Schrift
   schwer und schmal wie der Schriftzug am Haus.
   Kein Framework, keine Library.
   ========================================================================= */

/* --- 1. Schriften (lokal) ------------------------------------------------ */
@font-face{
  font-family:'SairaCond';src:url('../fonts/saira-cond-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'SairaCond';src:url('../fonts/saira-cond-800.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hanken';src:url('../fonts/hanken-grotesk-400-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hanken';src:url('../fonts/hanken-grotesk-500-latin.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hanken';src:url('../fonts/hanken-grotesk-600-latin.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}

/* --- 2. Marken-Token ----------------------------------------------------- */
/* Farben abgenommen vom Firmenschild (schwarz auf weiß) und der Zeitungsanzeige
   vom September 2026 (blaues Band #2868A8, rote Preiskästen #D01818).
   Alle Werte per Canvas gegen sRGB gemessen, nicht geschätzt. */
:root{
  color-scheme:only light;     /* kein erzwungener Dark Mode (Kunde 25.09.) */
  --blau:#2868A8;              /* Leitfarbe — Aussagen, Knöpfe, Navigation. 5,78:1 auf Weiß */
  --blau-tief:#1F5288;         /* Knopf im Hover, 8,01:1 auf Weiß */
  --blau-hell:#7FB3E0;         /* Leitfarbe auf Anthrazit, 7,44:1 */
  --rot:#D01818;               /* Signalfarbe — Zahlen, Störer, Fristen und der Pannendienst-Knopf (Kundenwunsch 25.09.). 5,49:1 */
  --rot-hell:#FF6B6B;          /* Signal auf Anthrazit, 5,97:1 */
  --gruen:#1E7A32;             /* Haken, 5,41:1 auf Weiß */
  --gruen-hell:#5FD06F;        /* Haken auf Anthrazit, 8,48:1 */
  --anthrazit:#1B1F23;         /* Ankerflächen */
  --anthrazit-2:#23282D;       /* Karte auf Anthrazit */
  --ink:#14171A;
  --txt:#333A40;               /* Fließtext, 11,54:1 auf Weiß */
  --txt-2:#5C666E;             /* Nebentext, 5,86:1 auf Weiß */
  --txt-3:#7A838B;             /* nur Platzhalter und Deko, nie Aussage */
  --bg:#FFFFFF;
  /* Die hellen Flächen tragen seit dem 21.09.2026 einen Blaustich statt reinem Grau.
     Vorlage ist die Zeitungsanzeige des Kunden — die hellblauen Angebotsfelder darin
     sind das, was ihm an der Anzeige gefällt. Grauwerte waren: F4F6F8 / E9EDF1 /
     DFE4E9 / EDF0F3. Kontrast nach der Umstellung neu gemessen, 0 Befunde. */
  --hell:#EFF5FB;              /* Wechselfläche */
  --hell-2:#DFEBF7;
  --linie:#D7E3EF;
  --linie-2:#E8F0F8;
  --wa:#25D366;
  --wa-ink:#14171A;            /* 9,07:1 — WhatsApp trägt immer dunkle Schrift */
  --gold:#E0A008;

  /* Radien: Werkstatt-Tafel — Knöpfe fast eckig, Karten ruhig */
  --r-btn:10px; --r-klein:10px; --r-karte:20px; --r-gross:26px; --r-pille:999px; /* RGN-Standard seit Runde 2 (vorher 6/16/22) */

  --sh-1:0 1px 2px rgba(20,23,26,.05);
  --sh-2:0 1px 2px rgba(20,23,26,.05),0 12px 28px rgba(20,23,26,.07);
  --sh-3:0 2px 6px rgba(20,23,26,.05),0 26px 56px rgba(20,23,26,.08);

  --e-kurve:cubic-bezier(.22,.72,.3,1);
  --e-soft:.4s cubic-bezier(.22,.61,.36,1);
  --e-calm:.7s cubic-bezier(.22,.61,.36,1);
  --e-snap:.45s cubic-bezier(.34,1.26,.64,1);

  --wrap:1200px;
  --kopf:76px;
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --e-soft:.4s linear(0,.24 7%,.66 18%,.89 29%,1.01 40%,1.02 52%,1);
    --e-calm:.7s linear(0,.14 8%,.46 21%,.74 34%,.92 47%,1 59%,1.01 72%,1);
    --e-snap:.45s linear(0,.3 8%,.78 21%,1.06 35%,1.07 46%,1 62%,1);
  }
}

/* --- 3. Grundlagen ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Hanken',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.64;letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
svg{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blau);outline-offset:3px;border-radius:4px} /* Radius 4: Fokusring, begründete Ausnahme */
/* Dunkle Flächen dieser Seite — jede Textrollen-Regel läuft gegen genau diese Liste.
   Seit Runde 2 (25.09.2026) sind das nur noch Hero, CTA-Band, Final-CTA und Fußzeile,
   alle mit Overlay in Markenblau statt Anthrazit (Kunde: „heller, nicht so schwarz").
   Helle Inseln darin (.qk, .promo, .kekse__c) setzen weiter unten zurück. */
:is(.sec--dark,.hero,.final,.fuss,.ctaband,.rkopf) :focus-visible{outline-color:#fff}
.qk :focus-visible{outline-color:var(--blau)}
section[id]{scroll-margin-top:calc(var(--kopf) + 8px)}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
@media (max-width:620px){.wrap{width:min(100% - 1.75rem,var(--wrap))}}

.sec{position:relative;padding-block:clamp(3.15rem,2.2rem + 4vw,5.5rem)}
.sec--alt{background:var(--hell)}
.sec--dark{background:var(--anthrazit);color:#fff}
.sec--eng{padding-block:clamp(2.2rem,1.7rem + 2.2vw,3.4rem)}

/* --- 4. Typo-Stufen ------------------------------------------------------ */
/* Display: Saira Condensed, schwer und versal — dem Schriftzug am Werkstattschild
   nachempfunden (schwere Grotesk, flache Enden). Laufweite 0, padding-top gegen
   Umlaut-Kollision bei enger Zeile. */
.t-display,.t-h2,.t-h3{font-family:'SairaCond',sans-serif;letter-spacing:0}
.t-display,.t-h2{text-transform:uppercase}
.t-h3{text-transform:none}
.t-display{font-weight:800;font-size:clamp(2.4rem,1.45rem + 4.1vw,4rem);line-height:1.0;margin:0;padding-top:.07em}
.t-h2{font-weight:700;font-size:clamp(1.75rem,1.2rem + 2.3vw,2.65rem);line-height:1.04;margin:0 0 .9rem;padding-top:.07em}
.t-h3{font-weight:700;font-size:1.25rem;line-height:1.14;margin:0 0 .5rem;padding-top:.04em}
/* Der Kicker steht in der Akzentfarbe, ohne Strich und ohne Versalien
   (rgn-moderne-optik-standard). Er sitzt in der h1 und darf NICHT versal werden. */
.kicker,.hero__kicker{
  display:block;margin-bottom:.8rem;font-family:'Hanken',sans-serif;text-transform:none;
  font-size:.9375rem;font-weight:600;color:var(--blau);letter-spacing:-.002em;line-height:1.4;padding-top:0;
}
:is(.sec--dark,.hero,.final,.fuss,.ctaband,.rkopf) .kicker{color:var(--blau-hell)}
h2 em,h3 em,.t-display em{font-style:normal;display:block}
.hl{color:var(--blau);display:block}
:is(.sec--dark,.hero,.final,.fuss,.ctaband,.rkopf) .hl{color:var(--blau-hell)}
:is(.sec--dark,.hero,.final,.fuss,.ctaband,.rkopf) :is(h2,h3,.t-h2,.t-h3){color:#fff}

@supports (text-wrap:balance){
  .t-display,.t-h2,.t-h3,.hero__sub,.qk__kopf h2,.qk__frage,.fq__b,
  .e404 h1,.rkopf h1,.vgk__kopf b,.ak__text h3,.lbk__body h3,.pg__t{text-wrap:balance}
}
@supports (text-wrap:pretty){
  p,li,.t-lead,.hero__p{text-wrap:pretty}
}
.t-lead{font-size:1.0625rem;line-height:1.66;color:var(--txt);margin:0 0 1.5rem;max-width:44rem}
:is(.sec--dark,.hero,.final,.fuss,.ctaband,.rkopf) .t-lead{color:rgba(255,255,255,.82)}
.kopf{max-width:45rem;margin-bottom:clamp(1.75rem,1.3rem + 1.6vw,2.6rem)}
.kopf--mitte{margin-inline:auto;text-align:center}
.kopf--mitte .t-lead{margin-inline:auto}

/* --- 5. Gewerk-Textur und Deko (0 Byte Assets) --------------------------- */
/* Werkstatt-Tafel: Millimeterraster 80 px, nach unten ausgeblendet. Kein
   Warnstreifen, kein Zebra-Divider. */
.tex-raster{position:relative;isolation:isolate;overflow:hidden}
.tex-raster::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(40,104,168,.10) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(40,104,168,.10) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.3) 58%,transparent);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.3) 58%,transparent);
}
.tex-raster.sec--dark::before{
  background-image:
    linear-gradient(to right,rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.07) 1px,transparent 1px);
}
/* Halo-Ring hinter der Formularkarte */
.halo{position:relative;overflow:hidden;isolation:isolate}
.halo::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(44vw,600px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(40,104,168,.11),transparent 68%);
}
.halo--tr::after{top:-18%;right:-10%}
.halo--bl::after{bottom:-22%;left:-12%}

/* --- 6. Knöpfe ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem clamp(.9rem,.65rem + .9vw,1.35rem);
  border-radius:var(--r-btn);border:1px solid transparent;
  font-size:clamp(.84rem,.72rem + .38vw,.9375rem);
  font-weight:600;letter-spacing:-.006em;cursor:pointer;
  transition:background var(--e-soft),color var(--e-soft),border-color var(--e-soft),transform var(--e-snap);
  text-align:center;line-height:1.25;white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:1rem clamp(1rem,.7rem + 1.2vw,1.6rem);font-size:clamp(.875rem,.76rem + .42vw,1rem)}
@media (max-width:359px){.btn--lg{padding-inline:.75rem;font-size:.8125rem}}
.btn--voll{width:100%}
.btn--p{background:var(--blau);color:#fff;box-shadow:0 6px 16px rgba(40,104,168,.06)}
.btn--p:hover{background:var(--blau-tief)}
.btn--geist{background:#fff;border-color:var(--linie);color:var(--ink)}
.btn--geist:hover{border-color:var(--blau);color:var(--blau)}
.btn--klar{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.btn--klar:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn--wa{background:var(--wa);color:var(--wa-ink);box-shadow:0 6px 16px rgba(37,211,102,.06)}
.btn--wa:hover{background:#1FBE5B}
.btn--rot{background:var(--rot);color:#fff;box-shadow:0 6px 16px rgba(208,24,24,.06)}
.btn--rot:hover{background:#B01414}
.btn--hell{background:#fff;color:var(--anthrazit)}
.btn--hell:hover{background:var(--hell)}

/* --- 7. Haken-Listen ----------------------------------------------------- */
.checks{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.6rem}
.checks li{position:relative;padding-left:1.85rem;font-size:.9375rem;line-height:1.55;color:var(--txt)}
.checks li::before{
  content:"";position:absolute;left:0;top:.3em;width:1.15rem;height:1.15rem;border-radius:50%;
  background-color:var(--gruen);
  -webkit-mask:url("../img/i-check.svg") center/.72rem no-repeat;mask:url("../img/i-check.svg") center/.72rem no-repeat;
}
.checks li b,.checks li strong{color:var(--ink);font-weight:600}
:is(.sec--dark,.hero,.final,.fuss,.ctaband,.rkopf) .checks li{color:rgba(255,255,255,.82)}
:is(.sec--dark,.hero,.final,.fuss,.ctaband,.rkopf) .checks li b{color:#fff}
:is(.sec--dark,.hero,.final,.fuss,.ctaband,.rkopf) .checks li::before{background-color:var(--gruen-hell)}
.hk{display:inline-grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;
  background:rgba(95,208,111,.18);color:var(--gruen-hell);flex:none}
.hk svg{width:.72rem;height:.72rem}

/* --- 8. Reveal ----------------------------------------------------------- */
[data-rv]{opacity:0}
[data-rv].is-da{
  animation-name:rvRein;animation-duration:var(--rv-dauer,.7s);
  animation-timing-function:var(--e-kurve);animation-fill-mode:both;
  animation-delay:calc(var(--rv-d,0) * 140ms);
}
@keyframes rvRein{from{opacity:0;translate:0 10px}to{opacity:1;translate:none}}
@media (max-width:620px){@keyframes rvRein{from{opacity:0;translate:0 6px}to{opacity:1;translate:none}}}
.bild-fade{opacity:0;transition:opacity .55s var(--e-kurve)}
.bild-fade.is-da{opacity:1}
@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1;translate:none}
  [data-rv].is-da{animation-name:none}
  .bild-fade{opacity:1}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .lauf{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .lauf__spur{animation:none!important;transform:none!important;width:max-content}
  .lauf__spur > *{scroll-snap-align:start}
}

/* --- 9. Kopfzeile -------------------------------------------------------- */
.kopfz{
  position:fixed;inset:0 0 auto;z-index:900;
  background:transparent;border-bottom:1px solid transparent;
  transition:background var(--e-soft),border-color var(--e-soft),box-shadow var(--e-soft);
}
.kopfz__in{display:flex;align-items:center;gap:1.5rem;height:var(--kopf)}
.kopfz__logo{display:flex;align-items:center;min-height:44px;margin-right:auto}
.kopfz__logo img{height:32px;width:auto;max-width:none;transition:height var(--e-soft)}
.kopfz__nav{display:flex;gap:1.6rem}
.kopfz__nav a{font-size:.9375rem;font-weight:500;color:#fff;opacity:.92;transition:opacity var(--e-soft),color var(--e-soft)}
.kopfz__nav a:hover{opacity:1}
.kopfz__tel{display:inline-flex;align-items:center;gap:.5rem;font-size:.9375rem;font-weight:600;color:#fff;white-space:nowrap}
.kopfz__tel svg{width:16px;height:16px}
.kopfz__mob{display:none;gap:.5rem}
.kopfz__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-btn);
  background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22)}
.kopfz__ic svg{width:18px;height:18px}
.kopfz__ic--wa{background:var(--wa);color:var(--wa-ink);border-color:transparent}
/* Anruf-Knopf zeigt die Nummer als Text (Google misst Website-Anrufe nur so) */
.kopfz__ic--tel{display:inline-flex;align-items:center;gap:.4rem;width:auto;padding:0 .75rem;font-size:.8125rem;font-weight:600;white-space:nowrap}
.kopfz__ic--tel svg{width:16px;height:16px}

.kopfz.is-scrolled{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom-color:var(--linie);box-shadow:var(--sh-1)}
.kopfz.is-scrolled .kopfz__in{height:64px}
.kopfz.is-scrolled .kopfz__logo img{height:28px;content:url("../img/auto-depping-logo-dunkel.svg")}
.kopfz.is-scrolled .kopfz__nav a,.kopfz.is-scrolled .kopfz__tel{color:var(--ink)}
.kopfz.is-scrolled .kopfz__ic{background:var(--hell);color:var(--ink);border-color:var(--linie);backdrop-filter:none}
.kopfz.is-scrolled .kopfz__ic--wa{background:var(--wa);color:var(--wa-ink);border-color:transparent}
@media (max-width:980px){
  .kopfz__nav,.kopfz__tel{display:none}
  .kopfz__mob{display:flex}
  .kopfz .btn--p{display:none}
  .kopfz__logo img{height:28px}
}

/* --- 10. Hero (Variante B: Vollbild + Overlay, links Text, rechts Quiz) -- */
.hero{position:relative;isolation:isolate;padding-top:calc(var(--kopf) + 2.2rem);padding-bottom:clamp(3rem,2rem + 3vw,4.75rem);overflow:clip}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:52% 52%}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(98deg,rgba(14,42,76,.93) 0%,rgba(20,56,98,.84) 38%,rgba(31,82,136,.52) 72%,rgba(40,104,168,.36) 100%);
}
@media (max-width:980px){
  .hero::before{background:linear-gradient(180deg,rgba(14,42,76,.88),rgba(18,52,92,.85) 58%,rgba(14,42,76,.92))}
  .hero__bg img{object-position:56% 46%}
}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.86fr);gap:clamp(2rem,1rem + 3.5vw,4rem);align-items:center}
@media (max-width:980px){.hero__grid{grid-template-columns:minmax(0,1fr);gap:2.4rem}}
.hero__txt{color:#fff;max-width:37.5rem}
.hero__kicker{margin-bottom:.9rem;font-size:clamp(.84rem,.62rem + .9vw,.9375rem);color:#A9CDEE} /* heller als --blau-hell, weil der Kicker teils über hellen Bildstellen liegt */
.hero h1{margin:0}
.hero__sub{
  font-family:'SairaCond',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(2.4rem,1.45rem + 4.1vw,4rem);line-height:.98;margin:0 0 1.05rem;padding-top:.07em;color:#fff;
}
.hero__sub .hl{color:var(--blau-hell);display:block}
.hero__p{font-size:.9375rem;line-height:1.62;color:rgba(255,255,255,.84);margin:0 0 1.35rem;max-width:32rem}
.hero__bul{list-style:none;margin:0 0 1.35rem;padding:0;display:grid;gap:.68rem}
.hero__bul li{display:flex;align-items:flex-start;gap:.7rem;font-size:.9375rem;line-height:1.45;color:rgba(255,255,255,.9)}
.hero__bul b{color:#fff;font-weight:600}
.hero__sterne{display:flex;align-items:center;gap:.6rem;margin-bottom:1.5rem;font-size:.875rem;color:rgba(255,255,255,.86);flex-wrap:wrap}
.hero__sterne a{display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.hero__adr{display:inline-flex;align-items:flex-start;gap:.5rem}
.hero__adr svg{flex:none;margin-top:.12em}
.hero__sterne a:hover{text-decoration:underline;text-underline-offset:3px}
.sterne{color:var(--gold);letter-spacing:.06em;font-size:.9375rem}
.hero__sterne img,.hero__sterne svg{width:17px;height:17px}
.hero__sterne svg{color:var(--blau-hell)}
.hero__cta{display:flex;gap:.75rem;flex-wrap:wrap}
@media (max-width:560px){
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%}
}

/* --- 11. Quiz-Karte (helle Insel — voller Gegen-Scope) ------------------- */
.qk{
  position:relative;background:#fff;color:var(--ink);border-radius:var(--r-gross);
  box-shadow:0 4px 10px rgba(18,21,24,.08),0 30px 70px rgba(18,21,24,.3);
  padding:1.6rem 1.5rem 1.25rem;max-width:482px;width:100%;margin-inline:auto;overflow:visible;
}
.qk__kopf{margin-bottom:1rem;padding-right:4.6rem}
.ovl__c .qk__kopf{padding-right:2.75rem}
.qk__kopf h2{font-family:'SairaCond',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(1.25rem,1rem + .85vw,1.45rem);line-height:1.06;margin:0 0 .3rem;padding-top:.05em;color:var(--anthrazit)}
.qk__kopf p{margin:0;font-size:.8125rem;color:var(--txt-2);line-height:1.5}
/* Störer: rund, schräg, halb über der Ecke. Er trägt KEINE Prozentzahl und keinen
   Rabatt — die Aktionspreise aus der Zeitungsanzeige sind noch nicht bestätigt. */
.sticker{
  position:absolute;top:-26px;right:-22px;z-index:4;width:104px;height:104px;border-radius:50%;
  display:grid;place-content:center;text-align:center;
  background:radial-gradient(circle at 32% 28%,#3179BE,var(--blau) 74%);color:#fff;transform:rotate(11deg);
  box-shadow:0 6px 16px rgba(18,21,24,.24),0 18px 38px rgba(40,104,168,.3);border:2px solid rgba(255,255,255,.92);
}
.sticker b{display:block;font-family:'SairaCond',sans-serif;font-size:1.3rem;font-weight:800;line-height:1;color:#fff;text-transform:uppercase}
.sticker span{display:block;margin-top:.2rem;font-size:.5625rem;font-weight:700;line-height:1.25;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.95)}
@media (max-width:1240px){.sticker{right:-6px}}
@media (max-width:560px){.sticker{width:88px;height:88px;top:-20px;right:2px}.sticker b{font-size:1.05rem}}

.qk__fort{display:flex;align-items:center;gap:.75rem;margin-bottom:1.1rem}
.qk__bar{flex:1;height:5px;border-radius:var(--r-pille);background:var(--linie);overflow:hidden}
.qk__bar i{display:block;height:100%;border-radius:var(--r-pille);background:var(--blau);width:25%;transition:width var(--e-calm)}
.qk__fort span{font-size:.75rem;font-weight:600;color:var(--txt-2);white-space:nowrap}
.qk__fort b{color:var(--blau);font-weight:700}
.qk__fort-t{white-space:nowrap}
.qk__schritt{display:none}
.qk__schritt.is-an{display:block;animation:qkRein .38s var(--e-soft) both}
@keyframes qkRein{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.qk__frage{font-size:.9375rem;font-weight:600;color:var(--anthrazit);margin:0 0 .8rem;line-height:1.35}
.qk__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-bottom:.9rem}
@media (max-width:400px){.qk__opts{grid-template-columns:minmax(0,1fr)}}
.qk__opt{
  display:flex;align-items:center;gap:.6rem;min-height:46px;padding:.7rem .8rem;text-align:left;
  background:var(--hell);border:1px solid var(--linie);border-radius:var(--r-klein);
  font-size:.8125rem;font-weight:500;line-height:1.32;color:var(--ink);cursor:pointer;
  transition:border-color var(--e-soft),background var(--e-soft),transform var(--e-snap);
}
.qk__opt:hover{border-color:var(--blau);background:#fff;transform:translateY(-1px)}
.qk__opt.is-gewaehlt{border-color:var(--blau);background:rgba(40,104,168,.07);box-shadow:inset 0 0 0 1px var(--blau)}
.qk__opt svg{width:19px;height:19px;color:var(--blau);flex:none}
.qk__feld{display:grid;gap:.55rem;margin-bottom:.9rem}
.qk__feld input,.qk__feld textarea{
  width:100%;padding:.75rem .85rem;border:1px solid var(--linie);border-radius:var(--r-btn);
  background:var(--hell);font:inherit;font-size:1rem;color:var(--ink);
  transition:border-color var(--e-soft),background var(--e-soft);
}
.qk__feld input:focus,.qk__feld textarea:focus{outline:none;border-color:var(--blau);background:#fff}
.qk__feld textarea{min-height:74px;resize:vertical}
.qk__feld input::placeholder,.qk__feld textarea::placeholder{color:var(--txt-3)}
.qk__dsgvo{display:flex;gap:.6rem;align-items:flex-start;font-size:.75rem;line-height:1.45;color:var(--txt-2);margin-bottom:.85rem}
.qk__dsgvo input{margin-top:.18rem;width:15px;height:15px;accent-color:var(--blau);flex:none}
.qk__dsgvo a{color:var(--blau);text-decoration:underline}
.qk__nav{display:flex;gap:.55rem}
.qk__zurueck{min-height:44px;background:none;border:none;padding:.55rem .2rem;font-size:.8125rem;font-weight:600;color:var(--txt-2);cursor:pointer}
.qk__zurueck:hover{color:var(--blau)}
.qk__trust{margin:.95rem 0 0;text-align:center;font-size:.8125rem;font-weight:600;color:var(--txt-2)}
.qk__goog{margin-top:.7rem;padding-top:.8rem;border-top:1px solid var(--linie);
  display:flex;align-items:center;justify-content:center;gap:.45rem;font-size:.8125rem;color:var(--txt-2)}
.qk__goog img{width:17px;height:17px}
.qk__goog b{color:var(--ink);font-weight:700}
.qk__goog .sterne{letter-spacing:.06em;font-size:.875rem}
.qk__ok{display:none;text-align:center;padding:1.5rem .5rem}
.qk__ok.is-an{display:block;animation:qkRein .45s var(--e-soft) both}
.qk__ok .hk{width:3rem;height:3rem;background:rgba(30,122,50,.12);color:var(--gruen);margin:0 auto .8rem}
.qk__ok .hk svg{width:1.4rem;height:1.4rem}
.qk__ok h3{font-family:'SairaCond',sans-serif;text-transform:none;letter-spacing:0;font-size:1.35rem;margin:0 0 .4rem;color:var(--anthrazit)}
.qk__ok p{margin:0;font-size:.875rem;color:var(--txt);line-height:1.6}
.qk__ok a{color:var(--blau);font-weight:600}
.qk__fehler{margin:.5rem 0 0;font-size:.8125rem;color:var(--rot);display:none}
.qk__fehler.is-an{display:block}
.qk [hidden]{display:none!important}
/* Anhang: das echte Dateifeld bleibt fokussierbar, sichtbar ist die Fläche darüber */
.qk__upload{position:relative}
.qk__feld .f-datei{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;border:0;opacity:0;overflow:hidden;pointer-events:none}
.qk__upload-k{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;border:1px dashed #B9CCE0;border-radius:var(--r-btn);
  background:#fff;cursor:pointer;transition:border-color var(--e-soft),background var(--e-soft)}
.qk__upload-k:hover{border-color:var(--blau);background:var(--hell)}
.f-datei:focus-visible + .qk__upload-k{outline:2px solid var(--blau);outline-offset:2px}
.qk__upload-k > svg{width:20px;height:20px;flex:none;color:var(--blau)}
.qk__upload-k b{display:block;font-size:.8125rem;font-weight:600;line-height:1.3;color:var(--ink)}
.f-datei-info{display:block;font-size:.75rem;line-height:1.35;color:var(--txt-2)}
.f-datei-info.is-fehler{color:var(--rot)}
.qk__ok-anhang{margin-top:.6rem!important;font-size:.8125rem!important;color:var(--txt-2)!important}

/* Helle Inseln auf dunklem Grund — Rück-Scope für alle geerbten Textrollen */
.qk :is(.kicker,.hl){color:var(--blau)}
.qk :is(h2,h3,.t-h2,.t-h3){color:var(--anthrazit)}
.qk :is(.t-lead,p,li,.checks li){color:var(--txt)}
.qk .checks li b{color:var(--ink)}
.qk .checks li::before{background-color:var(--gruen)}
.qk .qk__kopf p{color:var(--txt-2)}
.qk .qk__fehler{color:var(--rot)}
.promo :is(.kicker,.hl){color:var(--blau)} .promo :is(h2,h3,li){color:var(--ink)} .promo p{color:var(--txt)}
.kekse__c :is(h2,h3){color:var(--ink)} .kekse__c :is(p,li){color:var(--txt)}
.wa__zettel :is(b,span){color:var(--ink)} .chat__status :is(b,span){color:var(--ink)}

/* --- 12. Markenleiste ---------------------------------------------------- */
/* Die Marken stehen farbig auf heller Fläche. Item-Höhe 72 px, erste Reihe eager. */
.mk{padding-block:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);background:#fff;border-bottom:1px solid var(--linie-2)}
.mk__zeile{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;
  margin:0 0 1.15rem;font-size:.875rem;font-weight:600;color:var(--txt-2);text-align:center}
.mk__zeile b{color:var(--ink);font-weight:700}
.lauf{position:relative;overflow:clip;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.lauf__spur{display:flex;gap:1rem;width:max-content;align-items:stretch;animation:lauf 60s linear infinite;will-change:transform}
.lauf:hover .lauf__spur{animation-play-state:paused}
@keyframes lauf{to{transform:translateX(-50%)}}
.lauf--r .lauf__spur{animation-name:laufR}
@keyframes laufR{from{transform:translateX(-50%)}to{transform:none}}
.mk__spur{gap:2.6rem}
.mk__i{flex:none;display:grid;place-items:center;height:72px;width:96px}
.mk__i img{max-height:52px;width:auto;max-width:96px;object-fit:contain}
@media (max-width:620px){.mk__spur{gap:1.9rem}.mk__i{height:60px;width:76px}.mk__i img{max-height:42px;max-width:76px}}

/* --- 13. Bewertungs-Band ------------------------------------------------- */
.bew__pille{
  display:inline-flex;align-items:center;gap:.6rem;margin:0 auto 1.5rem;
  padding:.6rem 1.1rem;background:#fff;border:1px solid var(--linie);border-radius:var(--r-pille);
  box-shadow:var(--sh-1);font-size:.9375rem;color:var(--ink);
}
.bew__pille img{width:19px;height:19px}
.bew__pille b{font-weight:700;font-size:1.05rem}
.bew__pille .sterne{font-size:.9375rem}
.bew__pille > span:last-child{color:var(--txt-2);font-size:.8125rem}
.bewk{flex:none;width:min(78vw,346px);background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);
  padding:1.3rem 1.35rem 1.15rem;display:flex;flex-direction:column;gap:.7rem}
.bewk__st{color:var(--gold);letter-spacing:.08em;font-size:.9375rem;line-height:1}
.bewk__t{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink);flex:1}
.bewk__f{display:flex;align-items:center;gap:.6rem;padding-top:.75rem;border-top:1px solid var(--linie-2)}
.bewk__n{flex:1;min-width:0}
.bewk__n b{display:block;font-family:'SairaCond',sans-serif;text-transform:none;letter-spacing:0;font-size:1rem;font-weight:700;line-height:1.2}
.bewk__n > span{display:block;font-size:.6875rem;color:var(--txt-2);margin-top:.1rem}
.bew__quelle{margin:1.4rem 0 0;text-align:center;font-size:.75rem;color:var(--txt-2)}
/* Drei Google-Rezensionen im Raster statt der drei Kästchen (21.09.2026). Auszüge
   wörtlich aus dem Profil „Auto Depping Meisterwerkstatt", Kürzungen mit […]. */
.bew__drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.bew__drei{grid-template-columns:minmax(0,1fr);max-width:34rem;margin-inline:auto}}
.bew__drei .bewk{width:auto;margin:0}
.bewk__t{quotes:none}
blockquote.bewk__t{margin:0}
.bewk__f img{flex:none;width:18px;height:18px}
.bew__quelle a{display:inline-flex;align-items:center;min-height:44px;color:var(--blau);font-weight:600;text-decoration:underline;text-underline-offset:.18em}

/* --- 15. WhatsApp-Sektion ------------------------------------------------ */
.wa-sek{position:relative;isolation:isolate;overflow:hidden;background:var(--hell)}
.wa{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
@media (max-width:900px){.wa{grid-template-columns:minmax(0,1fr);gap:2.5rem}.wa__stage{order:-1}}
.wa__stage{position:relative;display:flex;justify-content:center;padding-block:1rem}
/* Ausnahme-Radien: Nachbau eines Telefons (46/36 Gerät, 12 Blase, 8 Foto) */
.phone{position:relative;width:min(100%,340px);border-radius:46px;padding:10px;
  background:linear-gradient(152deg,#FFF,#E6EAEE,#FDFDFE,#CDD4DA,#F6F8FA);
  box-shadow:0 0 0 1px rgba(20,23,26,.08),0 10px 26px rgba(20,40,70,.05),0 40px 80px rgba(20,40,70,.06)}
.phone::before,.phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:#CBD2D8}
.phone::before{left:-3px;top:110px;height:46px;box-shadow:0 58px 0 0 #CBD2D8}
.phone::after{right:-3px;top:150px;height:68px}
.phone__in{border-radius:36px;overflow:hidden;background:#ECE5DD;display:flex;flex-direction:column;border:2px solid #11151A;position:relative}
.phone__sys{display:flex;align-items:center;justify-content:space-between;padding:.55rem .95rem .3rem;background:#075E54;color:#fff;font-size:.6875rem;font-weight:600}
.phone__insel{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:76px;height:19px;border-radius:12px;background:#0B0E11;z-index:3}
.phone__sys svg{width:12px;height:12px;margin-left:.25rem;vertical-align:-2px}
.chat__head{display:flex;align-items:center;gap:.6rem;padding:.55rem .9rem .6rem;background:#075E54;color:#fff}
.chat__av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;background:#fff;display:grid;place-items:center}
.chat__av img{width:88%;height:auto;object-fit:contain}
.chat__head b{display:block;font-size:.8125rem;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.chat__head em{display:block;font-style:normal;font-size:.6875rem;color:rgba(255,255,255,.78)}
.chat__head svg{width:16px;height:16px;margin-left:auto;color:#fff}
.chat__body{background:#ECE5DD;height:clamp(318px,31vw,424px);overflow:hidden;
  background-image:radial-gradient(rgba(0,0,0,.05) 1px,transparent 1.2px);background-size:14px 14px}
.chat__flow{padding:.85rem .8rem 1rem;display:grid;gap:.5rem;align-content:start;transition:transform .55s var(--e-soft);will-change:transform}
.chat__tag{justify-self:center;padding:.2rem .6rem;border-radius:var(--r-pille);background:rgba(255,255,255,.8);font-size:.625rem;font-weight:600;color:#54656F}
.msg{max-width:85%;padding:.55rem .7rem;border-radius:12px;font-size:.75rem;line-height:1.5;position:relative;color:#111B21;
  box-shadow:0 1px 1px rgba(0,0,0,.08);opacity:0;transform:translateY(7px);transition:opacity .5s var(--e-soft),transform .5s var(--e-soft)}
.msg.is-da{opacity:1;transform:none}
.wa__stage.is-schritt .msg:not(.is-da){display:none}
.msg--in{justify-self:start;background:#fff;border-top-left-radius:4px}
.msg--out{justify-self:end;background:#D9FDD3;border-top-right-radius:4px}
.msg time{display:block;margin-top:.2rem;font-size:.5625rem;color:#667781;text-align:right}
.msg--out time::after{content:" ✓✓";color:#53BDEB}
.msg b{font-weight:700}
.msg__foto{display:block;width:100%;border-radius:8px;margin-bottom:.35rem;aspect-ratio:4/3;object-fit:cover}
.chat__status{display:flex;align-items:center;gap:.6rem;padding:.65rem .8rem;background:#fff;border-top:1px solid #E4E0D8;opacity:0;transform:translateY(6px)}
.wa__stage.is-in .chat__status{animation:waRein .5s var(--e-soft) forwards;animation-delay:calc(.3s + var(--i) * .95s)}
.chat__haken{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(30,122,50,.14);color:var(--gruen);flex:none}
.chat__haken svg{width:13px;height:13px}
.chat__status > span:last-child{flex:1;min-width:0}
.chat__status b{display:block;font-size:.75rem;font-weight:600;line-height:1.3;color:var(--ink)}
.chat__status b + span{display:block;font-size:.6875rem;line-height:1.35;color:var(--txt-2)}
@keyframes waRein{to{opacity:1;transform:none}}
.chat__foot{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem .4rem;background:#F0F2F5}
.chat__bar{flex:1;height:30px;border-radius:var(--r-pille);background:#fff;border:1px solid #E4E0D8;display:flex;align-items:center;padding-left:.7rem;font-size:.6875rem;color:#8696A0}
.chat__send{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#00A884;color:#fff;flex:none}
.chat__send svg{width:14px;height:14px}
.phone__home{width:96px;height:4px;border-radius:2px;background:#111;margin:.35rem auto .3rem}
/* Zettel statt Preisschild: die Seite nennt vor der Sichtprüfung keine Zahl */
.wa__zettel{position:absolute;top:-18px;right:-26px;z-index:4;padding:.7rem .95rem;border-radius:var(--r-klein);
  background:#fff;color:var(--ink);box-shadow:0 14px 32px rgba(20,40,70,.06),0 2px 6px rgba(20,40,70,.05);opacity:0;transform:translateY(8px) scale(.96)}
.wa__stage.is-in .wa__zettel{animation:waRein .55s var(--e-snap) forwards;animation-delay:calc(.3s + var(--i) * .95s)}
.wa__zettel b{display:block;font-family:'SairaCond',sans-serif;text-transform:none;letter-spacing:0;font-size:1.1rem;font-weight:700;line-height:1.1;color:var(--blau)}
.wa__zettel span{display:flex;align-items:center;gap:.3rem;margin-top:.2rem;font-size:.6875rem;color:var(--txt-2);white-space:nowrap}
.wa__zettel svg{width:11px;height:11px;color:var(--gruen)}
@media (max-width:400px){.wa__zettel{right:-4px;top:-46px}}
.wa__cta{display:flex;gap:.7rem;flex-wrap:wrap}
@media (max-width:480px){.wa__cta{flex-direction:column}.wa__cta .btn{width:100%}}

/* --- 17. Ablauf-Bildkarten ----------------------------------------------- */
.abl{--luecke:1.4rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--luecke)}
@media (max-width:980px){.abl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.abl{grid-template-columns:minmax(0,1fr);--luecke:1.75rem}}
.ak{position:relative;background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);overflow:visible}
.ak--wichtig{border-color:var(--blau);box-shadow:0 0 0 1px rgba(40,104,168,.18),var(--sh-2)}
.ak__bild{aspect-ratio:16/10;overflow:hidden;border-radius:calc(var(--r-karte) - 1px) calc(var(--r-karte) - 1px) 0 0}
.ak__bild img{width:100%;height:100%;object-fit:cover}
.ak__text{position:relative;padding:1.35rem 1.15rem 1.25rem}
.ak__nr{position:absolute;top:0;right:18px;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--blau);color:#fff;font-family:'SairaCond',sans-serif;font-weight:700;font-size:.9375rem;border:2px solid #fff;z-index:2}
.ak__text::before{content:"";position:absolute;top:0;right:100%;width:var(--luecke);height:2px;
  background:linear-gradient(90deg,rgba(40,104,168,.12),rgba(40,104,168,.45));
  transform-origin:left;transform:scaleX(0);transition:transform .8s var(--e-kurve) .2s}
.ak.is-da .ak__text::before{transform:scaleX(1)}
.ak:first-child .ak__text::before{display:none}
.ak__text h3{margin:0 0 .4rem;font-size:1.15rem;padding-right:2.6rem}
.ak__text p{margin:0;font-size:.8125rem;line-height:1.6;color:var(--txt)}
.ak__marke{display:inline-block;margin-bottom:.5rem;padding:.2rem .6rem;border-radius:var(--r-pille);
  background:rgba(40,104,168,.1);color:var(--blau);font-size:.6875rem;font-weight:700;letter-spacing:.02em}
@media (max-width:620px){
  .ak__text::before{top:auto;right:auto;left:50%;bottom:100%;width:2px;height:var(--luecke);transform-origin:top;transform:scaleY(0);
    background:linear-gradient(180deg,rgba(40,104,168,.12),rgba(40,104,168,.45))}
  .ak.is-da .ak__text::before{transform:scaleY(1)}
}

/* --- 18. CTA-Zwischensektion (Vollbreite Bild + Überlagerung) ------------ */
.ctaband{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  padding-block:clamp(2.8rem,2.2rem + 2.6vw,4.2rem)}
.ctaband__bg{position:absolute;inset:0;z-index:-2}
.ctaband__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.ctaband::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(92deg,rgba(14,42,76,.92),rgba(20,56,98,.82) 52%,rgba(31,82,136,.6))}
@media (max-width:820px){.ctaband::before{background:linear-gradient(180deg,rgba(14,42,76,.88),rgba(14,42,76,.92))}}
.ctaband__in{display:flex;align-items:center;justify-content:space-between;gap:clamp(1.5rem,1rem + 2.5vw,3rem);flex-wrap:wrap}
.ctaband__txt{flex:1 1 26rem;max-width:40rem}
.ctaband h2{margin:0 0 .5rem}
.ctaband p{margin:0;font-size:.9375rem;line-height:1.62;color:rgba(255,255,255,.82);max-width:34rem}
.ctaband__cta{display:flex;gap:.7rem;flex-wrap:wrap}
@media (max-width:520px){.ctaband__cta{flex-direction:column;width:100%}.ctaband__cta .btn{width:100%}}

/* --- 14c. Leistungs-Boxen (RGN-Standardbox, drei pro Seite, 25.09.2026) ---- */
/* Bild oben mit Verlauf, weißer Körper, ein Satz Nutzen, drei Haken. Die Spur
   scrollt nativ (Wischen auf Touch), Pfeile und Automatik blättern um eine ganze
   Seite. Mobil ragt die nächste Box sichtbar herein. */
.lb__kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem 2rem;flex-wrap:wrap;max-width:none}
.lb__kopf > div:first-child{max-width:45rem}
.lb__kopf .t-lead{margin-bottom:0}
.lb__steuer{display:flex;align-items:center;gap:.55rem;flex:none}
.lb__pfeil{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--linie);
  color:var(--ink);cursor:pointer;transition:border-color var(--e-soft),color var(--e-soft),transform var(--e-snap)}
.lb__pfeil:hover{border-color:var(--blau);color:var(--blau);transform:translateY(-1px)}
.lb__pfeil svg{width:18px;height:18px}
.lb__zurueck svg{transform:rotate(180deg)}
.lb__zahl{min-width:3.2rem;text-align:center;font-size:.8125rem;font-weight:600;color:var(--txt-2);font-variant-numeric:tabular-nums}
.lb__spur{--sp:3;--luecke:18px;position:relative;display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--sp) - 1) * var(--luecke)) / var(--sp));column-gap:var(--luecke);
  margin:0;padding:.35rem 0 1rem;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.lb__spur::-webkit-scrollbar{display:none}
@media (max-width:980px){.lb__spur{--sp:2}}
@media (max-width:620px){.lb__spur{--luecke:14px;grid-auto-columns:86%}}
.lb__k{display:flex;scroll-snap-align:start}
.lbk{display:flex;flex-direction:column;width:100%;background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);overflow:hidden;
  transition:border-color var(--e-soft),box-shadow var(--e-soft),transform var(--e-snap)}
.lbk:hover{border-color:rgba(40,104,168,.45);box-shadow:var(--sh-2);transform:translateY(-2px)}
.lbk__bild{position:relative;height:160px;overflow:hidden;background:var(--hell)}
.lbk__bild::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(14,42,76,.3));pointer-events:none}
.lbk__bild img{width:100%;height:100%;object-fit:cover}
.lbk__body{display:flex;flex-direction:column;flex:1;padding:1.15rem 1.2rem 1.2rem}
.lbk__body h3{margin:0 0 .45rem}
.lbk__body p{margin:0 0 .9rem;font-size:.875rem;line-height:1.6;color:var(--txt)}
.lbk .checks{margin:0 0 1rem;gap:.42rem}
.lbk .checks li{font-size:.8125rem;line-height:1.5}
.lbk__cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .1rem;background:none;border:0;
  font-size:.875rem;font-weight:600;color:var(--blau);cursor:pointer}
.lbk__cta svg{width:15px;height:15px;transition:transform var(--e-snap)}
.lbk__cta:hover svg{transform:translateX(3px)}
a.lbk__cta svg{width:16px;height:16px}
a.lbk__cta:hover svg{transform:none}
.lb__mehr{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;margin-top:.6rem;padding:1.1rem 1.25rem;
  background:var(--hell);border:1px solid var(--linie);border-radius:var(--r-karte)}
.lb__mehr p{margin:0;flex:1 1 26rem;font-size:.9375rem;line-height:1.55;color:var(--txt)}
.lb__mehr b{color:var(--ink);font-weight:600}
@media (max-width:520px){.lb__mehr .btn{width:100%}}

/* --- 14d. Partner, nach Aufgaben gruppiert (25.09.2026) ------------------ */
/* Vier Karten statt zwölf gleicher Kacheln: der Besucher liest zuerst, wofür ein
   Name steht, dann das Logo. Jede Karte trägt genau eine Logo-Reihe. */
.pg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:900px){.pg{grid-template-columns:minmax(0,1fr)}}
.pg__k{background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);padding:1.2rem 1.25rem 1.25rem}
.pg__t{display:flex;align-items:center;justify-content:center;text-align:center;gap:.65rem;margin:0 0 1rem;font-size:.9375rem;font-weight:600;line-height:1.3;color:var(--ink)}
.pg__t svg{box-sizing:content-box;width:18px;height:18px;padding:8px;border-radius:50%;background:rgba(40,104,168,.1);color:var(--blau);flex:none}
.pg__l{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
@media (max-width:560px){.pg__l{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pg__l li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;min-height:106px;padding:.95rem .6rem .8rem;
  background:#fff;border:1px solid var(--linie-2);border-radius:var(--r-klein);text-align:center;
  transition:border-color var(--e-soft),box-shadow var(--e-soft)}
.pg__l li:hover{border-color:var(--blau);box-shadow:var(--sh-1)}
.pg__l img{max-height:32px;width:auto;max-width:100%;object-fit:contain}
.pg__l .pg__hoch img{max-height:50px}
.pg__l span{font-size:.6875rem;line-height:1.35;color:var(--txt-2)}

/* --- 16. Meisterbetrieb (ersetzt „Befund statt Behauptung", 25.09.2026) --- */
/* Der Gedanke bleibt (messen, zeigen, zweite Meinung zulassen), die Form wird
   selbstbewusster: vier große Belege statt einer Ampel mit Millimeterwerten. */
.ms{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
@media (max-width:900px){.ms{grid-template-columns:minmax(0,1fr)}}
.ms__zahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 1.3rem;padding:0;list-style:none}
.ms__zahlen li{padding:1rem 1.1rem 1.05rem;background:var(--hell);border:1px solid var(--linie);border-radius:var(--r-karte)}
.ms__zahlen b{display:block;font-family:'SairaCond',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(1.55rem,1.2rem + 1.3vw,2.15rem);line-height:1;padding-top:.05em;color:var(--blau)}
.ms__zahlen li > span{display:block;margin-top:.4rem;font-size:.8125rem;line-height:1.45;color:var(--txt)}
.ms__zweit{display:flex;gap:.6rem;align-items:flex-start;margin:0;font-size:.875rem;line-height:1.55;color:var(--txt)}
.ms__zweit svg{width:20px;height:20px;flex:none;color:var(--blau);margin-top:.1rem}
.ms__zweit b{color:var(--ink);font-weight:600}
.ms__bild{position:relative;border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--sh-3)}
.ms__bild img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ms__wert{position:absolute;left:1rem;bottom:1rem;max-width:15.5rem;display:flex;flex-direction:column;gap:.2rem;
  padding:.8rem .95rem;border-radius:var(--r-klein);background:#fff;box-shadow:var(--sh-2)}
.ms__wert b{font-family:'SairaCond',sans-serif;font-size:1.6rem;font-weight:800;line-height:1;color:var(--rot)}
.ms__wert span{font-size:.75rem;line-height:1.4;color:var(--txt-2)}

/* --- 19. Reifenservice (ersetzt die Garantie-Sektion, 25.09.2026) -------- */
.rf{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
@media (max-width:900px){.rf{grid-template-columns:minmax(0,1fr)}}
.rf__bild{border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--sh-3)}
.rf__bild img{width:100%;aspect-ratio:4/3;object-fit:cover}
.rf__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.5rem;margin:0 0 1.7rem;padding:0;list-style:none}
@media (max-width:560px){.rf__liste{grid-template-columns:minmax(0,1fr)}}
.rf__liste li{padding-left:.95rem;border-left:3px solid var(--blau)}
.rf__liste b{display:block;margin-bottom:.2rem;font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--ink)}
.rf__liste span{display:block;font-size:.8125rem;line-height:1.55;color:var(--txt)}
.rf__cta{display:flex;gap:.7rem;flex-wrap:wrap}
@media (max-width:480px){.rf__cta{flex-direction:column}.rf__cta .btn{width:100%}}

/* --- 21. Anbieter-Vergleich ---------------------------------------------- */
.vgl{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1.5rem;align-items:center}
@media (max-width:860px){.vgl{grid-template-columns:minmax(0,1fr);gap:1rem}}
.vgl__vs{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--linie);box-shadow:var(--sh-1);
  font-family:'SairaCond',sans-serif;font-weight:700;font-size:1.1rem;color:var(--blau)}
@media (max-width:860px){.vgl__vs{margin-inline:auto}}
.vgk{border-radius:var(--r-gross);padding:1.6rem 1.5rem;position:relative}
.vgk--wir{background:#fff;border:1px solid var(--blau);box-shadow:0 0 0 1px rgba(40,104,168,.16),var(--sh-2);transform:translateY(-6px)}
@media (max-width:860px){.vgk--wir{transform:none}}
.vgk--andere{background:var(--hell-2);border:1px solid var(--linie);color:var(--txt-2)}
.vgk__kopf{display:flex;align-items:center;gap:.8rem;padding-bottom:1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--linie-2)}
.vgk__kopf img{height:26px;width:auto;max-width:none}
.vgk__kopf b{font-family:'SairaCond',sans-serif;text-transform:none;letter-spacing:0;font-size:1.05rem;font-weight:700;color:var(--ink)}
.vgk__leer{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#D5DCE2;color:var(--txt-2);flex:none}
.vgk__leer svg{width:20px;height:20px}
.vgk--andere .vgk__kopf b{color:var(--txt-2)}
.vgk__empf{position:absolute;top:-11px;right:1.5rem;padding:.28rem .7rem;border-radius:var(--r-pille);background:var(--blau);color:#fff;font-size:.6875rem;font-weight:700;letter-spacing:.03em}
.vgk ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.vgk li{display:flex;align-items:flex-start;gap:.7rem;font-size:.875rem;line-height:1.5}
.vgk li svg{width:1.05rem;height:1.05rem;flex:none;margin-top:.16rem}
.vgk--wir li{color:var(--ink)}
.vgk--wir li svg{color:var(--gruen)}
/* Rot ist hier die Signalfarbe für Zahlen — die X der Gegenkarte bleiben grau */
.vgk--andere li svg{color:#8C949B}

/* --- 22. Einzugsgebiet ---------------------------------------------------- */
.geb{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,1rem + 4vw,4rem);align-items:center}
@media (max-width:900px){.geb{grid-template-columns:minmax(0,1fr);gap:2.25rem}}
#gebiet{overflow:hidden}
.geb__karte{position:relative;margin:-6% -14px -6% 0}
.geb__karte img{width:112%;max-width:none;height:auto;display:block}
.geb__karte::before,.geb__karte::after{content:"";position:absolute;left:0;right:0;height:16%;pointer-events:none;z-index:1}
.geb__karte::before{top:0;background:linear-gradient(180deg,#fff,transparent)}
.geb__karte::after{bottom:0;background:linear-gradient(0deg,#fff,transparent)}
@media (max-width:900px){.geb__karte{margin:0 -1.75rem}.geb__karte img{width:118%;margin-left:-9%}}
.geb__panne{display:flex;gap:.65rem;align-items:flex-start;margin:0 0 1.5rem;padding:.85rem 1rem;background:var(--hell);
  border:1px solid var(--linie);border-radius:var(--r-klein);font-size:.875rem;line-height:1.5;color:var(--txt)}
.geb__panne svg{width:20px;height:20px;flex:none;margin-top:.05rem;color:var(--blau)}
.geb__panne b{color:var(--ink);font-weight:600}
.geb__panne a{color:var(--blau);font-weight:600;white-space:nowrap}
.geb__cta{display:flex;gap:.7rem;flex-wrap:wrap}
@media (max-width:480px){.geb__cta{flex-direction:column}.geb__cta .btn{width:100%}}

/* --- 23. Anfrage (dunkel) ------------------------------------------------- */
.anfrage{position:relative;background:var(--hell);overflow-x:clip}
.anfrage .qk{box-shadow:0 2px 6px rgba(20,40,70,.05),0 22px 48px rgba(20,40,70,.06)}
.anfrage .sticker{box-shadow:0 2px 6px rgba(20,40,70,.06),0 10px 22px rgba(40,104,168,.06)}
#anfrage .qk{scroll-margin-top:calc(var(--kopf) + 12px)}

/* --- 24. FAQ -------------------------------------------------------------- */
.faq{max-width:48rem;margin-inline:auto;position:relative;z-index:1}
.fq{border-bottom:1px solid var(--linie)}
.fq:first-child{border-top:1px solid var(--linie)}
.fq__b{display:flex;align-items:flex-start;gap:1rem;width:100%;padding:1.2rem .25rem;background:none;border:none;text-align:left;cursor:pointer;
  font-family:'Hanken',sans-serif;font-size:1.05rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.35}
.fq__b:hover{color:var(--blau)}
.fq__ic{margin-left:auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--hell);color:var(--blau);flex:none;transition:transform var(--e-soft),background var(--e-soft),color var(--e-soft)}
.fq__ic svg{width:12px;height:12px}
.fq.is-auf .fq__ic{transform:rotate(45deg);background:var(--blau);color:#fff}
.fq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--e-calm)}
.fq.is-auf .fq__a{grid-template-rows:1fr}
.fq__a > div{overflow:hidden}
.fq__a p{margin:0 0 1.25rem;padding-right:2.5rem;font-size:.9375rem;line-height:1.7;color:var(--txt)}

/* --- 25. Final-CTA -------------------------------------------------------- */
.final{position:relative;isolation:isolate;padding-block:clamp(3.5rem,2.5rem + 4vw,5.5rem);text-align:center;overflow:hidden;color:#fff}
.final__bg{position:absolute;inset:0;z-index:-2}
.final__bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,42,76,.84),rgba(14,42,76,.92))}
.final h2{color:#fff;max-width:42rem;margin-inline:auto}
.final p{max-width:38rem;margin-inline:auto;color:rgba(255,255,255,.84);font-size:1rem}
.final__cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:1.75rem}
@media (max-width:560px){.final__cta{flex-direction:column}.final__cta .btn{width:100%}}

/* --- 26. Fußzeile --------------------------------------------------------- */
.fuss{background:#101315;color:rgba(255,255,255,.74);padding-block:3rem 6.5rem;font-size:.875rem}
.fuss__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:2.5rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1)}
@media (max-width:820px){.fuss__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}}
@media (max-width:560px){.fuss__grid{grid-template-columns:minmax(0,1fr)}}
.fuss__logo{display:inline-flex;align-items:center;min-height:44px;margin-bottom:1rem}
.fuss__logo img{height:34px;width:auto;max-width:none}
.fuss p{margin:0 0 1rem;line-height:1.7;font-size:.8125rem;max-width:26rem}
.fuss h4{font-family:'SairaCond',sans-serif;text-transform:uppercase;letter-spacing:0;font-size:1.05rem;font-weight:700;color:#fff;margin:0 0 .8rem}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;font-size:.8125rem}
.fuss ul a{display:inline-flex;align-items:center;min-height:44px}
.fuss a:hover{color:#fff}
.fuss__u{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.5rem;font-size:.75rem;color:rgba(255,255,255,.58)}
.fuss__u a{display:inline-flex;align-items:center;min-height:44px}
.fuss__u a:hover{color:#fff}

/* --- 27. FAB -------------------------------------------------------------- */
.fab{position:fixed;right:18px;bottom:18px;z-index:940;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;pointer-events:none}
.fab > *{pointer-events:auto}
.fab__aus{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;pointer-events:none}
.fab__i{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:.55rem .9rem .55rem .75rem;border-radius:var(--r-pille);
  background:#fff;border:1px solid var(--linie);box-shadow:var(--sh-2);font-size:.8125rem;font-weight:600;color:var(--ink);
  opacity:0;transform:translateY(8px) scale(.96);pointer-events:none;transition:opacity var(--e-soft),transform var(--e-snap)}
.fab.is-auf .fab__i{opacity:1;transform:none;pointer-events:auto}
.fab.is-auf .fab__i:nth-child(1){transition-delay:.02s}
.fab.is-auf .fab__i:nth-child(2){transition-delay:.07s}
.fab.is-auf .fab__i:nth-child(3){transition-delay:.12s}
.fab__i svg{width:16px;height:16px;color:var(--blau)}
.fab__i--wa svg{color:var(--wa)}
.fab__b{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;
  background:var(--blau);color:#fff;box-shadow:0 10px 26px rgba(40,104,168,.24);transition:transform var(--e-snap),background var(--e-soft)}
.fab__b:hover{transform:scale(1.05)}
.fab__b svg{width:22px;height:22px;transition:transform var(--e-snap)}
.fab.is-auf .fab__b{background:var(--anthrazit)}
.fab.is-auf .fab__b svg{transform:rotate(135deg)}
.fab__blase{position:absolute;right:64px;bottom:9px;white-space:nowrap;padding:.5rem .85rem;border-radius:var(--r-pille);
  background:#fff;border:1px solid var(--linie);box-shadow:var(--sh-2);font-size:.8125rem;color:var(--txt);animation:blaseRein .6s var(--e-soft) 2.4s both}
.fab__blase b{color:var(--blau);font-weight:700}
.fab.is-auf .fab__blase{display:none}
@keyframes blaseRein{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media (max-width:620px){.fab__blase{display:none}}
/* Mobil erst nach der ersten Bildschirmhöhe: dort sitzt der Störer der Formularkarte */
@media (max-width:900px){
  .fab{opacity:0;visibility:hidden;transform:translateY(10px);
    transition:opacity var(--e-soft),transform var(--e-snap),visibility 0s linear .45s}
  .fab.is-da{opacity:1;visibility:visible;transform:none;transition-delay:0s}
}

/* --- 28. Overlay (Modal + Pop-up) ---------------------------------------- */
.ovl{position:fixed;inset:0;z-index:1100;display:none;place-items:center;padding:1rem;background:rgba(18,21,24,.64);backdrop-filter:blur(3px)}
.ovl.is-auf{display:grid;animation:ovlRein .3s var(--e-soft) both}
@keyframes ovlRein{from{opacity:0}to{opacity:1}}
.ovl__c{position:relative;width:100%;max-width:482px;max-height:calc(100dvh - 2rem);overflow-y:auto;overflow-x:hidden;padding:24px 20px 0;
  border-radius:var(--r-gross);animation:kartRein .4s var(--e-snap) both;scrollbar-width:thin}
.ovl__c .sticker{display:none}
@keyframes kartRein{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.ovl__x{position:absolute;top:24px;right:22px;z-index:7;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(18,21,24,.06)}
.ovl__x svg{width:14px;height:14px}
.ovl__x:hover{background:var(--hell)}
.promo{background:#fff;color:var(--ink);padding:0;max-width:26.5rem;text-align:center}
.ovl__c:has(> .promo){padding:0;max-width:26.5rem}
.ovl__c:has(> .promo) .ovl__x{top:12px;right:12px}
.promo__bild{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-gross) var(--r-gross) 0 0}
.promo__bild img{width:100%;height:100%;object-fit:cover}
.promo__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(18,21,24,.7))}
.promo__badge{position:absolute;left:1rem;bottom:.85rem;z-index:1;padding:.32rem .75rem;border-radius:var(--r-pille);background:rgba(255,255,255,.95);font-size:.75rem;font-weight:700;color:var(--anthrazit)}
.promo__in{padding:1.4rem 1.5rem 1.5rem}
.promo h3{font-family:'SairaCond',sans-serif;text-transform:none;letter-spacing:0;font-size:1.55rem;font-weight:700;margin:0 0 .55rem;line-height:1.06}
.promo > .promo__in > p{margin:0 0 1.1rem;font-size:.875rem;line-height:1.62;color:var(--txt)}
.promo .checks{text-align:left;margin:0 auto 1.25rem;padding-block:1rem;border-block:1px solid var(--linie-2);gap:.5rem;width:fit-content;max-width:100%}
.promo .checks li{font-size:.8125rem}
.promo__cta{display:grid;gap:.55rem}
.promo__trust{margin:.85rem 0 .5rem;font-size:.75rem;font-weight:600;color:var(--txt-2)}
.promo__weg{background:none;border:none;font-size:.75rem;color:var(--txt-2);text-decoration:underline;cursor:pointer;padding:.2rem}
.promo__weg:hover{color:var(--ink)}

/* --- 29. Cookie-Wand ------------------------------------------------------ */
.kekse{position:fixed;inset:0;z-index:1200;display:none;place-items:center;padding:1rem;background:rgba(18,21,24,.62);backdrop-filter:blur(3px)}
.kekse.is-auf{display:grid}
.kekse__c{background:#fff;color:var(--ink);border-radius:var(--r-karte);box-shadow:0 24px 64px rgba(18,21,24,.24);
  width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 2rem);overflow:auto;padding:1.75rem 1.6rem 1.5rem;text-align:center}
.kekse__c > img{height:34px;width:auto;max-width:none;margin:0 auto .9rem}
.kekse__c h2{font-family:'SairaCond',sans-serif;text-transform:none;letter-spacing:0;font-size:1.4rem;font-weight:700;margin:0 0 .6rem}
.kekse__c > p{margin:0 0 1.25rem;font-size:.8125rem;line-height:1.65;color:var(--txt)}
.kekse__btn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-bottom:.6rem}
.kekse__btn .btn{min-width:0;padding-inline:.6rem;font-size:clamp(.8rem,.7rem + .3vw,.9rem)}
@media (max-width:400px){.kekse__btn{grid-template-columns:minmax(0,1fr)}}
.kekse__mehr{background:none;border:none;padding:.4rem;font-size:.8125rem;font-weight:600;color:var(--txt-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px;margin-bottom:.9rem}
.kekse__mehr:hover{color:var(--blau)}
.kekse__ein{display:none;text-align:left;margin-bottom:1rem;border:1px solid var(--linie);border-radius:var(--r-klein);overflow:hidden}
.kekse__ein.is-auf{display:block}
.kekse__z{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border-bottom:1px solid var(--linie-2)}
.kekse__z:last-of-type{border-bottom:none}
.kekse__z b{display:block;font-size:.8125rem;font-weight:600}
.kekse__z > span > span{display:block;font-size:.75rem;color:var(--txt-2);line-height:1.45}
.kekse__z i{margin-left:auto;font-style:normal;font-size:.6875rem;font-weight:700;color:var(--txt-2);white-space:nowrap}
.kekse__sw{margin-left:auto;position:relative;width:44px;height:26px;flex:none;cursor:pointer}
.kekse__sw::before{content:"";position:absolute;inset:-10px -8px}
.kekse__sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.kekse__sw span{position:absolute;inset:0;border-radius:var(--r-pille);background:var(--linie);transition:background var(--e-soft)}
.kekse__sw span::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(18,21,24,.25);transition:transform var(--e-snap)}
.kekse__sw input:checked + span{background:var(--blau)}
.kekse__sw input:checked + span::after{transform:translateX(17px)}
.kekse__ein .btn{margin:.85rem 1rem 1rem;width:calc(100% - 2rem)}
.kekse__links{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;font-size:.75rem;color:var(--txt-2)}
.kekse__links a:hover{color:var(--blau)}

/* --- 30. Kleinkram -------------------------------------------------------- */
.nur-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{position:absolute;top:-100px;left:1rem;z-index:1300;padding:.7rem 1.1rem;background:#fff;color:var(--ink);border-radius:var(--r-btn);box-shadow:var(--sh-2);transition:top var(--e-soft)}
.sprung:focus{top:1rem}
body.is-fix{overflow:hidden}

/* --- 31. Rechtsseiten und 404 -------------------------------------------- */
.rkopf{background:linear-gradient(135deg,#0E2A4C,#1A4777);color:#fff;padding-top:calc(var(--kopf) + 2.75rem);padding-bottom:2.5rem;position:relative;overflow:hidden}
.rkopf__krume{font-size:.8125rem;color:rgba(255,255,255,.64);margin:0 0 .6rem}
.rkopf__krume a:hover{color:#fff}
.rkopf h1{font-family:'SairaCond',sans-serif;text-transform:uppercase;letter-spacing:0;font-weight:700;font-size:clamp(1.9rem,1.3rem + 2.4vw,2.7rem);line-height:1.02;margin:0 0 .6rem;padding-top:.06em}
.rkopf p{margin:0;font-size:.9375rem;color:rgba(255,255,255,.8);max-width:40rem}
.rtext{padding-block:clamp(2.5rem,2rem + 2.5vw,4rem)}
.rtext .wrap{max-width:52rem}
.rtext h2{font-family:'SairaCond',sans-serif;text-transform:uppercase;letter-spacing:0;font-weight:700;font-size:1.5rem;line-height:1.08;margin:2.5rem 0 .9rem;padding-top:1.5rem;border-top:1px solid var(--linie)}
.rtext h2:first-of-type{margin-top:0;padding-top:0;border-top:none}
.rtext h3{font-family:'Hanken',sans-serif;font-weight:600;font-size:1.1rem;line-height:1.3;margin:1.75rem 0 .5rem}
.rtext p,.rtext li{font-size:.9375rem;line-height:1.72;color:var(--txt)}
.rtext p{margin:0 0 1rem}
.rtext ul{margin:0 0 1.25rem;padding-left:1.2rem}
.rtext li{margin-bottom:.35rem}
.rtext strong{color:var(--ink);font-weight:600}
.rtext a{color:var(--blau);text-decoration:underline;text-underline-offset:2px}
.rtext a:hover{color:var(--blau-tief)}
.rtext .rtab{overflow-x:auto;margin:0 0 1.5rem;-webkit-overflow-scrolling:touch}
.rtext table{width:100%;border-collapse:collapse;margin:0;font-size:.875rem}
.rtext .rtab table{min-width:34rem}
.rtext th,.rtext td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--linie);vertical-align:top}
.rtext th{font-weight:600;color:var(--ink);background:var(--hell)}
.rtext td{color:var(--txt)}
.e404{display:grid;place-items:center;text-align:center;padding-block:clamp(4rem,3rem + 6vw,8rem);position:relative;overflow:hidden}
.e404__zahl{font-family:'SairaCond',sans-serif;font-weight:800;font-size:clamp(7rem,5rem + 16vw,14rem);line-height:.85;
  background:linear-gradient(180deg,var(--blau),var(--blau-hell));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.2;margin:0}
.e404 h1{font-family:'SairaCond',sans-serif;text-transform:uppercase;letter-spacing:0;font-weight:700;font-size:clamp(1.7rem,1.2rem + 2vw,2.4rem);line-height:1.06;margin:-.5rem 0 .8rem}
.e404 > .wrap > p:not(.e404__zahl){max-width:34rem;margin:0 auto 1.75rem;color:var(--txt);font-size:.9375rem;line-height:1.7}
.e404__cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.5rem}
@media (max-width:480px){.e404__cta{flex-direction:column}.e404__cta .btn{width:100%}}
.e404__liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;text-align:left;max-width:52rem;margin-inline:auto}
@media (max-width:760px){.e404__liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.e404__liste{grid-template-columns:minmax(0,1fr)}}
.e404__k{display:flex;align-items:flex-start;gap:.7rem;padding:.9rem 1rem;background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);transition:border-color var(--e-soft),translate var(--e-soft)}
.e404__k:hover{border-color:var(--blau);translate:0 -2px}
.e404__k svg{width:20px;height:20px;color:var(--blau);flex:none;margin-top:.15rem}
.e404__k b{display:block;font-size:.875rem;font-weight:600;color:var(--ink);line-height:1.3}
.e404__k span{display:block;font-size:.75rem;color:var(--txt-2);line-height:1.45}

/* --- 32. Sichtbarkeits-Helfer (am Ende, gewinnen die Spezifität) --------- */
.kopfz .nur-desktop{display:inline-flex}
@media (max-width:980px){.kopfz .nur-desktop{display:none}}

a[href^="tel:"]{white-space:nowrap}
/* Kopfzeile auf schmalen Handys: Logo, Anruf mit Nummer und WhatsApp passen nebeneinander */
@media (max-width:400px){.kopfz__in{gap:.75rem}.kopfz__logo img,.kopfz.is-scrolled .kopfz__logo img{height:22px}.kopfz__ic--tel{padding:0 .6rem}}
.nw{white-space:nowrap}

/* --- Schmale Handys (R23/R26/R27, Runde 3) ----------------------------- */
/* Rechtsseiten: lange Überschriften mit festen Wortbindungen passen unter 375 px nicht in die Zeile. Keine Silbentrennung (rgn-typo-umbruch § 4). */
@media (max-width:374px){.rtext h2{font-size:1.3rem}.rtext p,.rtext li{font-size:.875rem}}
/* unter 360 px passen Logo, Nummer und WhatsApp nicht in eine Zeile. WhatsApp bleibt im Hero und im Kontakt-Knopf. */
@media (max-width:359px){
  .kopfz__ic--wa{display:none}
  .ms__zahlen{grid-template-columns:minmax(0,1fr)}
}

/* --- 33. Teil 2 (04.10.2026): Consent-Modus, Bewertungsstand, DPF-Schwerpunkt, Einzugsgebiet ---- */
/* EIN Consent-Modus, EINE Konstante: html[data-consent] setzt der Bootstrap aus M ('advanced'|'basic').
   Banner, Datenschutz und Cookie-Richtlinie zeigen nur den Text, der zum Modus passt. */
.nur-basic{display:none}
html[data-consent="basic"] .nur-basic{display:revert}
html[data-consent="basic"] .nur-advanced{display:none}

/* Sterne nur mit Anzahl UND Stand-Datum */
.qk__goog{flex-wrap:wrap;row-gap:.1rem}
.qk__stand{flex-basis:100%;text-align:center;font-size:.75rem;color:var(--txt-2)}
.bew__pille{flex-wrap:wrap;justify-content:center;max-width:100%}
.bew__stand{white-space:normal}
.bew__pille > span:last-child{text-align:center}
@media (max-width:520px){.bew__pille{border-radius:var(--r-karte);padding:.6rem .9rem;row-gap:.2rem}}

/* DPF-Schwerpunkt: helle Tafel direkt unter den Leistungen, Bild links, drei Wege rechts */
.dpf{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.5rem,1rem + 2.5vw,3rem);align-items:center;
  margin-top:clamp(1.75rem,1.2rem + 1.5vw,2.5rem);padding:clamp(1rem,.6rem + 1.6vw,2rem);
  background:var(--hell);border:1px solid var(--linie);border-radius:var(--r-gross)}
@media (max-width:900px){.dpf{grid-template-columns:minmax(0,1fr);gap:1.4rem}}
.dpf__bild{border-radius:var(--r-karte);overflow:hidden;box-shadow:var(--sh-2);background:#fff}
.dpf__bild img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:900px){.dpf__bild img{aspect-ratio:16/9}}
@media (max-width:560px){.dpf__bild img{aspect-ratio:5/2;object-position:50% 62%}}
.dpf__txt .t-lead{margin-bottom:1.2rem}
.dpf__liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 1.25rem;margin:0 0 1.5rem;padding:0;list-style:none}
@media (max-width:1100px){.dpf__liste{grid-template-columns:minmax(0,1fr);gap:.8rem}}
.dpf__liste li{padding-left:.9rem;border-left:3px solid var(--blau)}
.dpf__liste b{display:block;margin-bottom:.15rem;font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--ink)}
.dpf__liste span{display:block;font-size:.8125rem;line-height:1.55;color:var(--txt)}
.dpf__cta{display:flex;gap:.7rem;flex-wrap:wrap}
@media (max-width:480px){.dpf__cta{flex-direction:column}.dpf__cta .btn{width:100%}}

/* Einzugsgebiet nach LP-Regel 7: Kicker, Headline, Fließtext, rechts die Karte */
.geb__text{margin:0;font-size:.9375rem;line-height:1.7;color:var(--txt);max-width:40rem}
.geb__text a{color:var(--blau);font-weight:600;text-decoration:underline;text-underline-offset:.18em}

/* --- 34. r19 (04.10.2026): Formular-Hinweis, Markenleiste als Schrift, Platzhalter ---------------- */
/* Formular ohne Pflicht-Häkchen: Hinweissatz unter dem Absende-Knopf (Art. 6 Abs. 1 lit. b DSGVO) */
.qk__hinweis{margin:.7rem 0 0;font-size:.75rem;line-height:1.5;color:var(--txt-2);text-align:center}
.qk__hinweis a{color:var(--blau);text-decoration:underline;text-underline-offset:.15em}
/* MARKEN_MODUS 'text': Markennamen in der Seitenschrift statt Hersteller-Bildmarken (BGH I ZR 33/10) */
.mk__i--t{width:auto;padding-inline:.35rem}
.mk__t{font-family:'SairaCond',sans-serif;font-weight:700;font-size:1.45rem;line-height:1;letter-spacing:.01em;color:var(--txt-2);white-space:nowrap}
@media (max-width:620px){.mk__i--t{width:auto}.mk__t{font-size:1.2rem}}
/* Offene Angabe (z. B. Löschfrist RGN Manage) sichtbar markieren, bis sie feststeht */
.luecke{background:#FFF7DB;border:1.5px dashed #C9A227;border-radius:10px;padding:0 .3rem;color:#5A4500}
/* Cookie-Wand: Links und „Einstellungen“ mit 44 px Trefferfläche */
.kekse__links{gap:.25rem 1rem}
.kekse__links a{display:inline-flex;align-items:center;min-height:44px}
.kekse__mehr{min-height:44px}