/* ============================================================
   Auto-Rickert — Stylesheet für alle Seiten
   Farben: Marineblau #16163F, Rot #A01218 (aus den Elementor-Globals)
   Schrift: Montserrat
   ============================================================ */

:root{
  --navy:#16163F; --navy-tief:#0D0D24;
  --rot:#A01218; --rot-hell:#C0151B;
  --tinte:#111124;
  --text:#1C1C28;    /* Fliesstext */
  --grau:#33323D;    /* Nebentext — bewusst dunkler als ueblich: die Zielgruppe
                        liest oft mit Einschraenkung */
  --linie:#E5E4EA; --nebel:#F5F5F7; --weiss:#fff;
  --aus:cubic-bezier(.23,1,.32,1);
  --s:'AR Montserrat','Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --kopf:72px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--s);color:var(--tinte);background:var(--weiss);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--rot)}
:focus-visible{outline:2px solid var(--rot);outline-offset:4px;border-radius:3px}

.in{max-width:1140px;margin:0 auto;padding-inline:26px}
.eng{max-width:840px;margin:0 auto;padding-inline:26px}
.mitte{text-align:center}

/* ---------- Schriftskala: Laufweite haengt an der Groesse ---------- */
.d1{font-weight:700;font-size:clamp(34px,5.6vw,68px);line-height:1.02;letter-spacing:-.045em}
.d2{font-weight:700;font-size:clamp(29px,5vw,58px);line-height:1.05;letter-spacing:-.04em}
.d3{font-weight:700;font-size:clamp(22px,3vw,34px);line-height:1.12;letter-spacing:-.03em}
.d4{font-weight:600;font-size:clamp(18px,2.1vw,23px);line-height:1.24;letter-spacing:-.025em}
.sub{font-size:clamp(17px,1.85vw,22px);line-height:1.5;letter-spacing:-.012em;color:var(--grau);font-weight:500}
.tx{font-size:16.5px;line-height:1.72;color:var(--grau)}
.tx strong{color:var(--tinte);font-weight:600}
.kl{font-size:12px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--rot)}

/* Kopf und Fuss stehen ausschliesslich in rahmen.css. */

/* ---------- Knoepfe ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.mitte .btns{justify-content:center}
.b{display:inline-flex;align-items:center;justify-content:center;font-family:var(--s);
  font-size:15px;font-weight:600;letter-spacing:-.01em;padding:14px 32px;border-radius:999px;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;min-width:176px;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .12s var(--aus)}
.b:active{transform:scale(.97)}
.b1{background:var(--rot);color:#fff}
.b1:hover{background:var(--rot-hell);color:#fff}
.b2{border-color:var(--tinte);color:var(--tinte)}
/* Auf dunklen Flaechen dreht sich der zweite Knopf um — sonst steht
   dunkelblauer Text auf dunkelblauem Grund. */
.dk .b2,.caddyband .b2,.band-fakten .b2,.tafel--dunkel .b2{
  border-color:rgba(255,255,255,.42);color:#fff;background:transparent}
.dk .b2:hover,.caddyband .b2:hover,.band-fakten .b2:hover,.tafel--dunkel .b2:hover{
  background:#fff;color:var(--navy);border-color:#fff}
.b2:hover{background:var(--tinte);color:#fff}
.hell .b2{border-color:rgba(255,255,255,.7);color:#fff}
.hell .b2:hover{background:#fff;color:var(--navy)}

/* ---------- Flaechen ---------- */
.w{padding-block:clamp(56px,7.5vw,96px);background:#fff}
.n{padding-block:clamp(56px,7.5vw,96px);background:var(--nebel)}
.dk{padding-block:clamp(56px,7.5vw,96px);background:var(--navy);color:#fff}
.dk .sub{color:#B9B8CB}.dk .tx{color:#B9B8CB}
.dk .kl{color:#fff;opacity:.55}
.knapp{padding-block:clamp(44px,6vw,76px)}

/* ---------- Bildflaeche ---------- */
.bild{position:relative;overflow:hidden}
.bild img{width:100%;height:100%;object-fit:cover;display:block}
.bild.halb{height:clamp(400px,60svh,660px)}   /* höher: sonst wird der Umbau beschnitten */
.bild.voll{height:clamp(420px,74svh,720px)}
.bild.breit img{border-radius:clamp(16px,2vw,24px)}

/* Text steht auf einer Karte, nicht auf dem Foto — sonst haengt die
   Lesbarkeit davon ab, was zufaellig im Bild ist. */
.bild .ueber{position:absolute;left:0;right:0;bottom:0;padding:clamp(24px,3.4vw,48px) 0}
.bild .ueber .in{max-width:1560px;margin:0 auto;padding-inline:clamp(20px,3.4vw,52px)}
.bild-karte{display:block;width:min(560px,100%);
  background:#fff;border-radius:clamp(16px,2vw,22px);
  padding:clamp(26px,3vw,38px) clamp(28px,3.2vw,40px);
  box-shadow:0 2px 6px rgba(22,22,63,.06), 0 22px 50px -14px rgba(22,22,63,.28)}
.bild-karte .kl{color:var(--rot)}
.bild-karte .d2,.bild-karte .d3{color:var(--tinte);margin-top:12px;letter-spacing:-.035em;
  font-size:clamp(22px,2.4vw,30px);line-height:1.14}
.bild-karte p:last-child{margin-top:12px;font-size:16px;line-height:1.6;color:var(--text);
  max-width:44ch}
.bild.hell .bild-karte{background:var(--navy)}
.bild.hell .bild-karte .d2,.bild.hell .bild-karte .d3{color:#fff}
.bild.hell .bild-karte p:last-child{color:#D5D4E2}
.bild.hell .bild-karte .kl{color:rgba(255,255,255,.66)}



figure.breit{margin:0}
figure.breit img{width:100%;height:auto}
.bu{padding:20px 26px 0;text-align:center;font-size:15px;color:var(--text);max-width:740px;margin:0 auto}

/* ---------- Zahlenband ---------- */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linie);
  border-block:1px solid var(--linie);margin-top:clamp(40px,6vw,68px)}
@media (max-width:720px){.zahlen{grid-template-columns:repeat(2,1fr)}}
.zahl{background:#fff;padding:28px 16px;text-align:center}
.n .zahl{background:var(--nebel)}
.zahl b{display:block;font-size:clamp(27px,3.5vw,40px);font-weight:700;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;line-height:1}
.zahl span{display:block;margin-top:9px;font-size:12.5px;color:var(--grau);font-weight:500}

/* ---------- Modelle ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:clamp(26px,4vw,40px)}
.tabs button{font-family:var(--s);font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  padding:10px 20px;border-radius:999px;border:1.5px solid var(--linie);background:#fff;
  color:var(--tinte);cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .12s var(--aus)}
.tabs button:active{transform:scale(.96)}
.tabs button[aria-pressed="true"]{background:var(--tinte);border-color:var(--tinte);color:#fff}
.mod{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(24px,5vw,68px);align-items:center;margin-top:clamp(30px,4vw,50px)}
@media (max-width:860px){.mod{grid-template-columns:1fr}}
.modbild{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:14px;background:var(--linie)}
.modbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .42s var(--aus)}
.modbild img.an{opacity:1}
.spec dt{font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--grau)}
.spec dd{font-size:clamp(28px,3.8vw,42px);font-weight:700;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;line-height:1.05}
.spec dd small{font-size:.42em;font-weight:600;color:var(--grau);letter-spacing:-.01em;margin-left:4px}
.speczeile{padding:18px 0;border-bottom:1px solid var(--linie)}
.speczeile:first-child{border-top:1px solid var(--linie)}
.speczeile.txt dd{font-size:19px;letter-spacing:-.02em;font-weight:600}

/* ---------- Fahrzeugkarten ---------- */
.wagen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,30px);
  margin-top:clamp(34px,5vw,54px)}
@media (max-width:940px){.wagen{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.wagen{grid-template-columns:1fr}}
.wagen a{text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:transform .3s var(--aus)}
.wagen a:hover{transform:translateY(-4px)}
.wbild{aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--nebel)}
.wbild img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--aus)}
.wagen a:hover .wbild img{transform:scale(1.04)}
.wagen h3{font-size:16.5px;font-weight:600;letter-spacing:-.02em;margin-top:16px;line-height:1.34}
.wkarte .wdaten{padding-inline:20px}
.wdaten{font-size:13.5px;color:var(--grau);margin-top:7px;line-height:1.55}
.wkarte .wpreis{padding:0 20px 20px;margin-top:auto}
.wpreis{font-size:22px;font-weight:700;letter-spacing:-.035em;margin-top:12px;font-variant-numeric:tabular-nums}
.wpreis small{display:block;font-size:.52em;font-weight:500;color:var(--grau);letter-spacing:0;margin-top:3px}

/* ---------- Zeilenliste ---------- */
.liste{margin-top:clamp(34px,5vw,56px)}
.lz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 28px;
  gap:clamp(14px,3vw,44px);align-items:baseline;padding:28px 0;
  border-bottom:1px solid var(--linie);text-decoration:none;color:inherit}
.lz:first-child{border-top:1px solid var(--linie)}
.dk .lz{border-color:rgba(255,255,255,.16);color:#fff}
.dk .lz:first-child{border-top-color:rgba(255,255,255,.16)}
@media (max-width:780px){.lz{grid-template-columns:minmax(0,1fr) 22px}
  .lz p{grid-column:1 / 3;margin-top:8px}}
.lz h3{font-size:clamp(19px,2.2vw,25px);font-weight:600;letter-spacing:-.025em}
.lz p{font-size:16px;line-height:1.66;color:var(--text)}
.dk .lz p{color:#B9B8CB}
.lz i{font-style:normal;font-size:19px;justify-self:end;color:var(--grau);
  transition:transform .3s var(--aus),color .2s ease}
.dk .lz i{color:rgba(255,255,255,.55)}
.lz:hover i{transform:translateX(7px);color:var(--rot)}
.dk .lz:hover i{color:#fff}

/* ---------- Haekchenliste ---------- */
.haken{list-style:none;display:grid;gap:14px;margin-top:26px}
.haken li{padding-left:32px;position:relative;font-size:16.5px;line-height:1.6}
.haken li::before{content:'';position:absolute;left:0;top:.5em;width:13px;height:7px;
  border-left:2.5px solid var(--rot);border-bottom:2.5px solid var(--rot);transform:rotate(-45deg)}

/* ---------- Bewertungen ---------- */
.note{font-size:clamp(66px,10vw,124px);font-weight:700;line-height:.82;letter-spacing:-.06em}
.st{color:#5C4600;font-size:18px;letter-spacing:4px;margin-top:14px}
.zit{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie);
  border-block:1px solid var(--linie);margin-top:clamp(40px,6vw,66px);text-align:left}
@media (max-width:860px){.zit{grid-template-columns:1fr}}
.z{background:#fff;padding:30px 26px}
.n .z{background:var(--nebel)}
.z p{font-size:16.5px;line-height:1.62;letter-spacing:-.008em}
.z footer{margin-top:15px;font-size:12.5px;color:var(--grau);font-weight:600}

/* ---------- Fragen ---------- */
.faq{margin-top:clamp(30px,4vw,48px);text-align:left}
.faq details{border-bottom:1px solid var(--linie)}
.faq details:first-child{border-top:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;padding:23px 48px 23px 0;position:relative;
  font-size:clamp(16.5px,1.9vw,19px);font-weight:600;line-height:1.4;letter-spacing:-.022em;
  transition:color .2s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:8px;top:50%;width:14px;height:1.5px;
  background:var(--rot);margin-top:-1px}
.faq summary::before{content:'';position:absolute;right:14px;top:50%;width:1.5px;height:14px;
  background:var(--rot);margin-top:-7px;transition:transform .3s var(--aus)}
.faq details[open] summary::before{transform:scaleY(0)}
.faq summary:hover{color:var(--rot)}
.faq-a{padding:0 48px 26px 0;font-size:17px;line-height:1.78;color:var(--text)}

/* ---------- Ablauf ---------- */
.ablauf{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linie);
  border-block:1px solid var(--linie);margin-top:clamp(34px,5vw,54px);text-align:left}
@media (max-width:900px){.ablauf{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ablauf{grid-template-columns:1fr}}
.schritt{background:#fff;padding:28px 24px}
.n .schritt{background:var(--nebel)}
.schritt b{display:block;font-size:11.5px;font-weight:700;letter-spacing:1.8px;color:var(--rot);margin-bottom:12px}
.schritt h3{font-size:18px;font-weight:600;letter-spacing:-.022em;margin-bottom:8px}
.schritt p{font-size:15px;line-height:1.62;color:var(--grau)}

/* ---------- Kontakt ---------- */
.orte{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.16);
  border-block:1px solid rgba(255,255,255,.16);margin-top:clamp(34px,5vw,56px);text-align:left}
@media (max-width:700px){.orte{grid-template-columns:1fr}}
.ort{background:var(--navy);padding:32px 28px}
.ort h3{font-size:12.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:16px}
.ort p{font-size:16.5px;line-height:1.66;color:#fff}
.ort a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.ort a:hover{border-color:#fff}
.ort .zeit{color:#B9B8CB;font-size:15px;margin-top:12px}

/* ---------- Auftreten ---------- */
/* Sichtbarkeit haengt NICHT an JavaScript: erst wenn html.js gesetzt ist,
   wird versteckt. Ohne JS, bei Fehlern oder bei blockierten Skripten
   steht der Inhalt einfach da. */
.js .auf{opacity:0;transform:translateY(24px)}
.js .auf.da{opacity:1;transform:none;transition:opacity .72s var(--aus),transform .72s var(--aus)}
@media (prefers-reduced-motion:reduce){
  .auf{opacity:1!important;transform:none!important}
  .bild img{transform:none!important;transition:none}
  .b:active,.tabs button:active{transform:none}
  .wagen a:hover,.wagen a:hover .wbild img{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .kopf{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--linie)}
}

/* ============================================================
   Bühne ganz oben: Foto sofort, Himmel und Geäst unter Verlauf
   ============================================================ */
.buehne{position:relative;overflow:hidden;background:#0B0B18;
  height:calc(100svh - var(--kopf-h, 200px));min-height:520px;max-height:860px}
@media (max-width:900px){.buehne{height:auto;min-height:0;aspect-ratio:4/5;max-height:none}}

.buehne-bild{position:absolute;inset:0;overflow:hidden}
.buehne-bild img{width:100%;height:100%;object-fit:cover;object-position:82% 22%}
.js .buehne-bild img{transform:scale(1.1);opacity:0;
  transition:transform 2.2s var(--aus),opacity 1.1s ease}
.buehne.da .buehne-bild img{transform:scale(1);opacity:1}

/* Verlauf oben verdeckt grauen Himmel und kahle Baeume, unten traegt er den Text */
.buehne-bild::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    /* oben: Himmel und kahles Geaest ausblenden, endet vor dem Fahrzeug */
    linear-gradient(to bottom, #0B0B18 0%, rgba(11,11,24,.92) 13%, rgba(11,11,24,.45) 24%, rgba(11,11,24,0) 36%),
    /* unten: schmales Band, das nur den Text traegt */
    linear-gradient(to top, rgba(11,11,24,.95) 0%, rgba(11,11,24,.86) 16%, rgba(11,11,24,.55) 30%, rgba(11,11,24,.16) 44%, rgba(11,11,24,0) 56%),
    linear-gradient(to right, rgba(11,11,24,.80) 0%, rgba(11,11,24,.52) 26%, rgba(11,11,24,.14) 47%, rgba(11,11,24,0) 62%)}

.buehne-satz{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding-bottom:clamp(40px,5vw,72px);color:#fff;text-align:left}
.buehne-satz .kl{white-space:nowrap}
.buehne h1{max-width:15ch}
.buehne-satz .sub{max-width:34ch}
@media (max-width:900px){.buehne-satz{padding-block:clamp(90px,22vw,140px) clamp(36px,9vw,60px)}}
.buehne-satz .kl{color:#fff;opacity:.72}
.buehne-satz .btns{justify-content:flex-start;max-width:none}
.buehne-satz .sub{color:rgba(255,255,255,.9);font-weight:400}
.buehne h1{color:#fff;font-size:clamp(32px,4.3vw,56px)}

/* Auftritt: gestaffelt, einmal beim Laden.
   Klasse heisst .tritt — .st ist bereits die Sternereihe der Bewertung. */
.js .buehne .tritt{opacity:0;transform:translateY(30px)}
.buehne.da .tritt{opacity:1;transform:none;
  transition:opacity .95s var(--aus),transform .95s var(--aus)}
.buehne.da .tritt:nth-child(1){transition-delay:.30s}
.buehne.da .tritt:nth-child(2){transition-delay:.42s}
.buehne.da .tritt:nth-child(3){transition-delay:.54s}
.buehne.da .tritt:nth-child(4){transition-delay:.66s}

/* Hinweis zum Weiterscrollen */
.runter{position:absolute;left:auto;right:36px;bottom:22px;z-index:3;transform:none;
  width:26px;height:42px;border:1.5px solid rgba(255,255,255,.45);border-radius:14px;
  opacity:0;transition:opacity .6s ease .95s}
.buehne.da .runter{opacity:1}
.runter::after{content:'';position:absolute;left:50%;top:9px;width:3px;height:7px;border-radius:2px;
  background:rgba(255,255,255,.85);margin-left:-1.5px;animation:tropf 2.1s var(--aus) infinite}
@keyframes tropf{0%{transform:translateY(0);opacity:0}
  22%{opacity:1}62%{transform:translateY(15px);opacity:0}100%{opacity:0}}
@media (max-width:900px){.runter{display:none}}

/* Marken unter der Buehne */
.siegel{background:#0B0B18;color:#fff;padding-block:26px}
.siegel .e-breit,.siegel .in{display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px clamp(22px,4vw,56px)}
.siegel span{font-size:12px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;
  color:rgba(255,255,255,.62);display:flex;align-items:center;gap:9px}
.siegel span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--rot);flex:none}

@media (prefers-reduced-motion:reduce){
  .buehne-bild img{transform:none!important;opacity:1!important;transition:none}
  .buehne .tritt{opacity:1!important;transform:none!important;transition:none!important}
  .runter::after{animation:none}
}

/* Auf schmalen Geraeten steht das Fahrzeug mittig, sonst rutscht es aus dem Bild */
@media (max-width:900px){
  .buehne-bild img{object-position:58% 30%}
  .buehne h1{max-width:none}
  .buehne-satz .sub{max-width:none}
}

/* ---------- Merkmalsraster (Umbau-Argumente) ---------- */
.mkraster{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linie);
  border:1px solid var(--linie);margin-top:clamp(32px,4vw,52px)}
@media (max-width:820px){.mkraster{grid-template-columns:1fr}}
.mk{background:#fff;padding:clamp(24px,3vw,36px)}
.n .mk{background:var(--nebel)}
.mk h3{font-size:clamp(17px,1.8vw,20px);font-weight:600;letter-spacing:-.022em;
  padding-left:26px;position:relative;margin-bottom:10px}
.mk h3::before{content:'';position:absolute;left:0;top:.52em;width:13px;height:7px;
  border-left:2.5px solid var(--rot);border-bottom:2.5px solid var(--rot);transform:rotate(-45deg)}
.mk p{font-size:16px;line-height:1.72;color:var(--text);padding-left:26px}
/* schlichte Variante ohne Haken — fuer Kontakt- und Personenkarten */
.mkraster--schlicht .mk h3{padding-left:0}
.mkraster--schlicht .mk h3::before{display:none}
.mkraster--schlicht .mk p{padding-left:0}

/* ---------- Modell-Steckbrief ---------- */
.steck{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,4vw,60px);align-items:center;padding-block:clamp(40px,5vw,68px);
  border-top:1px solid var(--linie);scroll-margin-top:150px}
@media (max-width:880px){.steck{grid-template-columns:1fr}}
.steck img{width:100%;height:auto;border-radius:12px;display:block}
.steck-nr{font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--rot);
  text-transform:uppercase}
.steck h3{font-size:clamp(22px,2.8vw,32px);font-weight:600;letter-spacing:-.03em;margin:12px 0 6px}
.steck-daten{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linie);
  border:1px solid var(--linie);margin-top:22px}
.steck-daten div{background:#fff;padding:16px 18px}
.n .steck-daten div{background:var(--nebel)}
.steck-daten dt{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grau)}
.steck-daten dd{margin:5px 0 0;font-size:22px;font-weight:700;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.steck-daten dd small{font-size:.5em;font-weight:600;color:var(--grau);margin-left:3px;letter-spacing:0}

/* ---------- Hinweiskasten ---------- */
.hinweis{margin-top:clamp(26px,3vw,38px);padding:20px 24px;background:var(--nebel);
  border-left:3px solid var(--rot);font-size:15.5px;line-height:1.7;color:var(--tinte)}
.n .hinweis{background:#fff}
.hinweis .stand{display:block;margin-top:10px;font-size:12.5px;color:var(--grau)}
.hinweis mark,.recht mark{background:#FFF3C4;padding:1px 5px}

/* ---------- Rechtstexte ---------- */
.recht h2.d3{margin-top:clamp(30px,3.5vw,44px);margin-bottom:12px}
.recht h2.d3:first-child{margin-top:0}
.recht .tx{max-width:76ch}
.recht code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--nebel);padding:2px 6px;border-radius:3px}

/* ---------- Auszeichnungsband ---------- */
.band-fakten{background:var(--navy);color:#fff}
.band-fakten .in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.12);border-inline:1px solid rgba(255,255,255,.12)}
@media (max-width:820px){.band-fakten .in{grid-template-columns:repeat(2,1fr)}}
.bf{background:var(--navy);padding:clamp(26px,3vw,38px) 20px;text-align:center}
.bf b{display:block;font-size:clamp(26px,3.2vw,38px);font-weight:700;letter-spacing:-.04em;
  line-height:1;font-variant-numeric:tabular-nums}
.bf span{display:block;margin-top:9px;font-size:12.5px;color:#B9B8CB}

/* ---------- Caddy: wird gezogen wie mit einem Stift ---------- */
.caddyfeld{position:relative;background:linear-gradient(160deg,#F7F7FB 0%,#EDEDF4 100%);
  border:1px solid var(--linie);border-radius:16px;overflow:hidden;
  padding:clamp(22px,3vw,38px)}
.caddyfeld::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 120% at 22% 0%, rgba(22,22,63,.06) 0%, rgba(22,22,63,0) 60%)}
.caddy-marke{position:relative;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#3B3A46}
.caddyriss{position:relative;width:100%;height:auto;display:block;margin-top:14px;overflow:visible}
.cz{fill:none;stroke:inherit;stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round}
.czg{fill:none}
.stift{fill:#A01218;opacity:0}
.js .caddyriss.laeuft .cz{stroke-linecap:round}
.js .caddyriss .cz{stroke-dasharray:var(--len,0);stroke-dashoffset:var(--len,0)}
.js .caddyriss.laeuft .stift{opacity:1}
@media (prefers-reduced-motion:reduce){
  .js .caddyriss .cz{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .stift{display:none}
}

/* ---------- Fuss: Wortmarke unter dem Caddy ---------- */
.fuss-marke img{width:100%;max-width:260px;height:auto;opacity:.95;display:block}
.fdom{margin-top:14px;max-width:260px;text-align:center;
  font-size:15px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}

/* Fahrzeugkarten aus der Schnittstelle */
.wkarte{text-decoration:none;color:inherit;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);overflow:hidden;
  transition:transform 260ms ease-out, box-shadow 260ms ease-out, border-color 260ms ease-out}
.wkarte:hover{transform:translateY(-4px);border-color:transparent;
  box-shadow:0 2px 6px rgba(22,22,63,.05), 0 20px 44px -14px rgba(22,22,63,.22)}
.n .wkarte{background:#fff}
.wkarte .wbild{aspect-ratio:4/3;overflow:hidden;background:var(--nebel)}
.wkarte .wbild img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--aus)}
.wkarte:hover .wbild img{transform:scale(1.04)}
.wkarte h3{font-size:16.5px;font-weight:600;letter-spacing:-.022em;line-height:1.34;
  padding:18px 20px 0}
.wleer{display:block;width:100%;height:100%;background:
  repeating-linear-gradient(135deg,#EDEDF4 0 12px,#F5F5F7 12px 24px)}
[data-bestand]{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px);
  margin-top:clamp(34px,5vw,54px)}
/* Der Bestand bekommt mehr Breite als der Fliesstext — sonst quetschen
   sich die Karten auf 1140 px zusammen. */
.bestandfeld{width:100%;max-width:1560px;margin-inline:auto;box-sizing:border-box;
  padding-inline:clamp(20px,3.4vw,52px)}
@media (min-width:1200px){.bestandfeld [data-bestand]{grid-template-columns:repeat(4,1fr)}}
[data-bestand] .wagen{display:contents}
@media (max-width:940px){[data-bestand]{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){[data-bestand]{grid-template-columns:1fr}}

/* ---------- Fahrzeugdetail ---------- */
.krume{display:flex;flex-wrap:wrap;gap:9px;font-size:13px;color:var(--grau);margin-bottom:26px}
.krume a{color:var(--grau);text-decoration:none}
.krume a:hover{color:var(--rot)}
.fz{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:900px){.fz{grid-template-columns:1fr}}
.fz-gross{margin:0;border-radius:14px;overflow:hidden;background:var(--nebel);aspect-ratio:4/3}
.fz-gross img{width:100%;height:100%;object-fit:cover;display:block}
.fz-leer{background:repeating-linear-gradient(135deg,#EDEDF4 0 12px,#F5F5F7 12px 24px)}
.fz-streifen{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
.fz-streifen button{padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;
  cursor:pointer;background:none;aspect-ratio:4/3;transition:border-color .2s ease}
.fz-streifen button[aria-current]{border-color:var(--rot)}
.fz-streifen img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:600px){.fz-streifen{grid-template-columns:repeat(4,1fr)}}
.fz-siegel{display:inline-block;margin-top:12px;padding:6px 13px;border-radius:999px;
  background:#F0E3E4;color:var(--rot);font-size:12.5px;font-weight:700;letter-spacing:.04em}
.fz-preis{margin-top:20px;font-size:clamp(30px,4vw,42px);font-weight:700;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;line-height:1}
.fz-preis small{display:block;margin-top:8px;font-size:.33em;font-weight:500;color:var(--grau);
  letter-spacing:0}
.fz-eck{margin-top:24px;border-top:1px solid var(--linie);
  display:grid;grid-template-columns:1fr 1fr;gap:0}
.fz-eck > div{padding:13px 0;border-bottom:1px solid var(--linie)}
.fz-eck > div:nth-child(odd){padding-right:14px}
.fz-eck dt{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--grau)}
.fz-eck dd{margin:4px 0 0;font-size:16px;font-weight:600;letter-spacing:-.015em}
.fz-tasten{display:grid;gap:10px;margin-top:26px}
.fz-tasten .b{width:100%;min-width:0}
.b-wa{background:#0F7A6D;color:#fff}
.b-wa:hover{background:#0F7A6D;color:#fff}
.fz-person{margin-top:18px;font-size:14.5px;color:var(--grau)}
.fz-quelle{margin-top:8px;font-size:13px}
.fz-liste{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px 26px;margin-top:26px}
.fz-liste li{padding-left:24px;position:relative;font-size:15.5px;line-height:1.6}
.fz-liste li::before{content:'';position:absolute;left:0;top:.52em;width:11px;height:6px;
  border-left:2.2px solid var(--rot);border-bottom:2.2px solid var(--rot);transform:rotate(-45deg)}
.fz-text{margin-top:20px;font-size:16.5px;line-height:1.75;color:var(--grau);max-width:76ch}

/* ---------- Exposé ----------
   Zweiseitiges Datenblatt. Am Bildschirm unsichtbar, beim Drucken wird die
   Website ausgeblendet und nur dieser Bogen gezeigt. Beschriftungen in
   Schreibmaschinenschrift, damit Zahlen untereinander stehen.            */
.ex{display:none}



/* ---------- Ansprechpartner ---------- */
/* Breiter als der Fliesstext, damit lange E-Mail-Adressen einzeilig passen */
.teamfeld{width:100%;max-width:1560px;margin-inline:auto;box-sizing:border-box;
  padding-inline:clamp(20px,3.4vw,52px)}
.tkraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:clamp(18px,2.2vw,26px);margin-top:clamp(32px,4vw,52px)}
.tk{background:#fff;border:1px solid var(--linie);overflow:hidden;display:flex;flex-direction:column}
.n .tk{background:var(--nebel)}
.tk-bild{position:relative;aspect-ratio:4/5;background:var(--navy);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.tk-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.tk-kurz{font-size:clamp(34px,4vw,46px);font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.32)}
.tk-bild.ohne{background:linear-gradient(160deg,#1E1E4E,#16163F)}
.tk-inhalt{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.tk h3{font-size:18.5px;font-weight:600;letter-spacing:-.025em}
.tk-rolle{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rot);margin-top:5px}
.tk-kontakt{display:grid;gap:2px;margin-top:16px;padding-top:10px;border-top:1px solid var(--linie)}
/* Tippziele mindestens 44 px hoch — sonst trifft man sie mit dem Daumen nicht */
.tk-kontakt a{font-size:14.5px;color:var(--tinte);text-decoration:none;
  transition:color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;min-height:44px;padding-block:2px}
.tk-kontakt a:hover{color:var(--rot)}
.tk-wa{color:#075A50!important;font-weight:700}

/* ---------- Zeitachse ---------- */
.za{list-style:none;position:relative;max-width:1000px;margin:clamp(34px,5vw,56px) auto 0;padding:0}
.za::before{content:'';position:absolute;left:50%;top:8px;bottom:8px;width:3px;
  background:var(--linie);transform:translateX(-50%);border-radius:2px}
.za-punkt{position:relative;padding-right:calc(50% + 46px);margin-bottom:clamp(26px,3.5vw,44px)}
.za-punkt.za-rechts{padding-right:0;padding-left:calc(50% + 46px)}
.za-knoten{position:absolute;left:50%;top:22px;width:20px;height:20px;border-radius:50%;
  background:#fff;border:3px solid var(--rot);transform:translateX(-50%);z-index:2}
.za-heute .za-knoten{background:var(--rot)}
.za-karte{background:#fff;border:1px solid var(--linie);border-top:3px solid var(--rot);
  padding:clamp(20px,2.6vw,28px)}
.n .za-karte{background:var(--nebel)}
.za-punkt.za-rechts .za-karte{border-top-color:var(--navy)}
.za-punkt.za-rechts .za-knoten{border-color:var(--navy)}
.za-jahr{font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-.035em;
  color:var(--navy);line-height:1}
.za-marke{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--rot);margin-top:8px}
.za-karte h3{font-size:clamp(17px,1.9vw,20px);font-weight:600;letter-spacing:-.02em;margin-top:8px}
.za-text{font-size:16px;line-height:1.72;color:var(--text);margin-top:10px}
@media (max-width:800px){
  .za::before{left:11px}
  .za-punkt,.za-punkt.za-rechts{padding-right:0;padding-left:40px}
  .za-knoten{left:11px}
}

/* ---------- Leihwagen-Anfrage ---------- */
form.an{border:1px solid var(--linie);background:#fff;margin-top:clamp(30px,4vw,48px)}
.n form.an{background:var(--nebel)}   /* nur das Anfrageformular — .an ist
   im Menue die Kennung des aktiven Punktes */
.an-stufen{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;margin:0;padding:0;
  border-bottom:1px solid var(--linie)}
.an-stufe{display:flex;align-items:center;gap:11px;padding:16px 18px;font-size:14px;font-weight:600;
  color:var(--grau);border-right:1px solid var(--linie)}
.an-stufe:last-child{border-right:0}
.an-stufe b{width:26px;height:26px;border-radius:50%;background:var(--linie);color:var(--tinte);
  display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.an-stufe.an-aktiv{color:var(--tinte)}
.an-stufe.an-aktiv b{background:var(--rot);color:#fff}
.an-stufe.an-fertig b{background:var(--navy);color:#fff}
@media (max-width:640px){.an-stufe span{display:none}.an-stufe{justify-content:center}}
.an-inhalt{padding:clamp(22px,3vw,34px)}
.an-feld{border:0;padding:0;margin:0}
.an-frage{font-size:clamp(19px,2.2vw,24px);font-weight:600;letter-spacing:-.025em;
  color:var(--tinte);padding:0;margin-bottom:8px}
.an-hinweis{font-size:15px;color:var(--grau);margin-bottom:20px}
.an-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.an-karte input{position:absolute;opacity:0;width:1px;height:1px}
.an-karte-in{display:block;border:2px solid var(--linie);padding:18px 20px;cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease}
.an-karte-in b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.02em}
.an-karte-in em{display:block;font-style:normal;font-size:14px;color:var(--grau);margin-top:5px}
.an-karte input:checked + .an-karte-in{border-color:var(--rot);background:#FCF4F4}
.an-karte input:focus-visible + .an-karte-in{outline:3px solid var(--navy);outline-offset:3px}
.an-kal{max-width:420px;margin-bottom:22px}
.an-kal-kopf{display:flex;align-items:center;justify-content:space-between;
  font-size:16.5px;font-weight:600;margin-bottom:12px}
.an-pfeil{width:38px;height:38px;border:1.5px solid var(--linie);background:#fff;cursor:pointer;
  font-size:20px;line-height:1;color:var(--tinte);border-radius:6px}
.an-pfeil:hover{border-color:var(--rot);color:var(--rot)}
.an-wochentage,.an-gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.an-wochentage span{text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  color:var(--grau);padding-bottom:6px}
.an-tag{aspect-ratio:1;border:1px solid var(--linie);background:#fff;cursor:pointer;
  font-size:14.5px;font-family:var(--s);color:var(--tinte);border-radius:5px}
.an-tag:hover:not(:disabled){border-color:var(--rot)}
.an-tag:disabled{color:#B4B2BE;background:var(--nebel);cursor:default}
.an-tag.an-gewaehlt{background:var(--rot);border-color:var(--rot);color:#fff;font-weight:700}
.an-tag.an-drin{background:#FCF4F4;border-color:#F0D8D9}
.an-zeitraum{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie);
  border:1px solid var(--linie);margin-bottom:22px}
@media (max-width:600px){.an-zeitraum{grid-template-columns:1fr}}
.an-zeitraum > div{background:#fff;padding:13px 16px}
.an-zeitraum dt{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.an-zeitraum dd{margin:4px 0 0;font-size:15px;font-weight:600}
.an-raster{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
@media (max-width:600px){.an-raster{grid-template-columns:1fr}}
.an-eingabe{display:flex;flex-direction:column;gap:6px}
.an-eingabe.an-breit{margin-top:16px}
.an-eingabe label{font-size:13.5px;font-weight:600;color:var(--tinte)}
.an-eingabe input,.an-eingabe select,.an-eingabe textarea{
  font-family:var(--s);font-size:16px;padding:12px 14px;border:1.5px solid var(--linie);
  border-radius:6px;background:#fff;color:var(--tinte)}
.an-eingabe input:focus,.an-eingabe select:focus,.an-eingabe textarea:focus{
  outline:0;border-color:var(--rot);box-shadow:0 0 0 3px rgba(160,18,24,.14)}
.an-zustimmung{margin-top:18px;font-size:14.5px;line-height:1.6}
.an-zustimmung label{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.an-zustimmung input{margin-top:3px;width:19px;height:19px;flex:none;accent-color:var(--rot)}
.an-fehler{margin-top:14px;padding:12px 16px;background:#FCF4F4;border-left:3px solid var(--rot);
  font-size:15px;color:var(--tinte)}
.an-tasten{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.an-notfall{margin-top:20px;font-size:15px;color:var(--grau)}

/* Modell-Steckbrief: drei Ansichten je Fahrzeug */
.steck-bild{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--nebel)}
.steck-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .4s var(--aus)}
.steck-bild img.an{opacity:1}
.steck-streifen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.steck-streifen button{padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;
  background:none;cursor:pointer;aspect-ratio:4/3;transition:border-color .2s ease}
.steck-streifen button[aria-current]{border-color:var(--rot)}
.steck-streifen img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Leihfahrzeuge mit Bild ---------- */
.lwraster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,28px);
  margin-top:clamp(30px,4vw,48px)}
@media (max-width:900px){.lwraster{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.lwraster{grid-template-columns:1fr}}
.lw{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);overflow:hidden;
  display:flex;flex-direction:column}
.lw figure{margin:0}
.lw img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.lw h3{font-size:19px;font-weight:600;letter-spacing:-.025em;padding:20px 22px 0}
.lw-daten{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rot);padding:6px 22px 0}
.lw p:last-child{font-size:15.5px;line-height:1.68;color:var(--text);padding:10px 22px 22px}

/* Werkstattleistungen als Raster statt langer Liste */
.wsraster{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie);
  border:1px solid var(--linie);margin-top:clamp(30px,4vw,48px)}
@media (max-width:900px){.wsraster{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.wsraster{grid-template-columns:1fr}}
.ws{background:#fff;padding:clamp(22px,2.8vw,30px)}
.n .ws{background:var(--nebel)}
.ws h3{font-size:18px;font-weight:600;letter-spacing:-.022em}
.ws p{font-size:15.5px;line-height:1.7;color:var(--text);margin-top:10px}

/* Teamfoto liegt über den Initialen — fehlt es, bleiben die Initialen stehen */
.tk-bild{position:relative;overflow:hidden}
.tk-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}

/* Zeitachse: Stationen treten beim Scrollen ein */
.js .za-punkt{opacity:0;transform:translateY(26px)}
.js .za-punkt.da{opacity:1;transform:none;
  transition:opacity .7s var(--aus),transform .7s var(--aus)}
.js .za-knoten{transform:translateX(-50%) scale(.4);transition:transform .5s cubic-bezier(.34,1.5,.5,1) .12s}
.js .za-punkt.da .za-knoten{transform:translateX(-50%) scale(1)}
.za-fuell{position:absolute;left:50%;top:8px;width:3px;background:var(--rot);
  transform:translateX(-50%);border-radius:2px;height:0;transition:height .5s linear}
@media (max-width:800px){.za-fuell{left:11px}}
@media (prefers-reduced-motion:reduce){
  .js .za-punkt{opacity:1!important;transform:none!important}
  .js .za-knoten{transform:translateX(-50%)!important}
  .za-fuell{display:none}
}

/* ---------- Karte: laedt erst auf Anforderung ---------- */
.karten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.5vw,28px);
  margin-top:clamp(30px,4vw,48px)}
@media (max-width:820px){.karten{grid-template-columns:1fr}}
.karte{position:relative;aspect-ratio:4/3;border:1px solid var(--linie);overflow:hidden;
  background:var(--nebel)}
.karte-platz{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:clamp(20px,3vw,34px);gap:12px;
  background:
    repeating-linear-gradient(0deg,#EDEDF4 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,#EDEDF4 0 1px,transparent 1px 34px),
    var(--nebel)}
.karte-titel{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--tinte)}
.karte-text{font-size:14.5px;line-height:1.6;color:var(--text);max-width:34ch}
.karte-alt{font-size:13.5px}
.karte-alt a{color:#8E1015}
.karte iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Filter und Sortierung ---------- */
.fltr{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:end;margin-top:26px}
.fltr-f{display:flex;flex-direction:column;gap:6px}
.fltr-f span{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.fltr-f select{font-family:var(--s);font-size:15px;padding:10px 14px;border:1.5px solid var(--linie);
  border-radius:6px;background:#fff;color:var(--tinte);min-width:190px}
.fltr-f select:focus{outline:0;border-color:var(--rot);box-shadow:0 0 0 3px rgba(160,18,24,.14)}
.fltr-zahl{margin-left:auto;font-size:14.5px;color:var(--grau);font-weight:600}
.fltr-leer{grid-column:1/-1;padding:34px;text-align:center;font-size:16.5px;color:var(--text);
  background:var(--nebel);border:1px dashed var(--linie)}

/* ---------- Vollansicht ---------- */
.lupe{position:fixed;inset:0;z-index:200;background:rgba(8,8,20,.94);display:flex;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,48px)}
.lupe img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.lupe-zu{position:absolute;top:16px;right:20px;width:46px;height:46px;border:0;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.lupe-zu:hover{background:rgba(255,255,255,.28)}
.fz-zoom{padding:0;border:0;background:none;cursor:zoom-in;display:block;width:100%;height:100%}
.fz-zurueck{margin-bottom:14px;font-size:15px;font-weight:600}
.fz-zurueck a{text-decoration:none}
.fz-zurueck a:hover{text-decoration:underline}
.fz-punkte{list-style:none;display:grid;gap:8px;margin:14px 0}
.fz-punkte li{padding-left:24px;position:relative}
.fz-punkte li::before{content:'';position:absolute;left:0;top:.55em;width:11px;height:6px;
  border-left:2.2px solid var(--rot);border-bottom:2.2px solid var(--rot);transform:rotate(-45deg)}
.fz-text p{margin-bottom:12px}
.fz-druckbilder{display:none}
   /* Der Druckbogen steht weiter oben unter .ex */

/* Fahrzeugwahl in der Anfrage: mit Bild */
.an-karte-in img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:6px;margin-bottom:14px;display:block}
.an-karte-in{padding:14px 14px 18px}

/* Bilder, die sich vergrössern lassen */
.zoombar{cursor:zoom-in}
.zoombar::after{content:'⤢';position:absolute;right:10px;bottom:10px;width:32px;height:32px;
  border-radius:50%;background:rgba(17,17,36,.72);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:15px;opacity:0;transition:opacity .22s ease;pointer-events:none}
.zoombar:hover::after,.zoombar:focus-within::after{opacity:1}
.lw figure,.steck-bild{position:relative}
.lw figure{margin:0}

/* ---------- Videoplatz ---------- */
.videofeld{margin:clamp(30px,4vw,48px) auto 0;max-width:900px}
.video-platz{position:relative;aspect-ratio:16/9;border-radius:16px;
  background:linear-gradient(160deg,#1E1E4E,#101033);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:clamp(24px,4vw,44px)}
.video-knopf{width:64px;height:64px;border-radius:50%;border:2.5px solid rgba(255,255,255,.5);
  position:relative}
.video-knopf::after{content:'';position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-left:18px solid rgba(255,255,255,.8);border-top:11px solid transparent;
  border-bottom:11px solid transparent}
.video-titel{font-size:19px;font-weight:600;letter-spacing:-.02em}
.video-text{font-size:15.5px;line-height:1.66;color:#D5D4E2;max-width:44ch}

/* ============================================================
   Weiche Ecken durchgehend — nichts steht mehr scharfkantig
   ============================================================ */
:root{--r-s:10px; --r-m:16px; --r-l:22px}
.mkraster,.wsraster,.tkraster,.steck-daten,.fz-eck,.band-fakten .in,form.an,
.zahlen,.liste,.faq{border-radius:var(--r-m);overflow:hidden}
.mk,.ws,.tk,.za-karte,.hinweis,.karte,.videofeld .video-platz,.an-karte-in,
.fltr-leer,.an-fehler{border-radius:var(--r-m)}
.wkarte .wbild,.lw img,.lw figure,.steck img,.steck-bild,.fz-gross,
.caddyfeld,.bild.halb img,figure.breit img{border-radius:var(--r-l)}
.b,.tafel-knoepfe a,.bf-knopf,.an-pfeil,.fltr-f select,.an-eingabe input,
.an-eingabe select,.an-eingabe textarea,.an-tag,.bf-zurueck{border-radius:999px}
.an-eingabe textarea{border-radius:var(--r-m)}
.tafel-knoepfe a{border-radius:999px}
.b{border-radius:999px}
.za-karte{border-top-left-radius:var(--r-m);border-top-right-radius:var(--r-m)}
/* Kein overflow am Menuepunkt — das schneidet das Aufklappmenue ab. */
.klapp{border-radius:0 0 var(--r-m) var(--r-m)}
.mp{overflow:visible!important}
.bf-feld{border-radius:var(--r-l)}
.lupe img{border-radius:var(--r-m)}
.fz-streifen button,.steck-streifen button{border-radius:var(--r-s)}
.tk-bild{border-radius:var(--r-m) var(--r-m) 0 0}

/* ---------- Drei Kacheln ----------
   Kombination aus der Live-Optik (4 px Oberrand rot/navy im Wechsel,
   Anheben beim Ueberfahren) und grossen Bildern. Versetzt angeordnet,
   damit sie sich ueberlappen statt in einer geraden Reihe zu stehen.
   Kein Beschreibungstext — nur Marke und Titel.                        */
.kachelfeld{width:100%;max-width:1560px;margin-inline:auto;box-sizing:border-box;
  padding-inline:clamp(20px,3.4vw,52px)}
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px);margin-top:clamp(40px,4.6vw,64px);
  align-items:start}
/* versetzt: die mittlere sitzt tiefer, die dritte dazwischen */
.kacheln > :nth-child(2){margin-top:clamp(28px,3.4vw,52px)}
.kacheln > :nth-child(3){margin-top:clamp(14px,1.7vw,26px)}
@media (max-width:940px){
  .kacheln{grid-template-columns:1fr}
  .kacheln > :nth-child(2),.kacheln > :nth-child(3){margin-top:0}
}

.kachel{position:relative;display:block;text-decoration:none;color:inherit;
  border-top:4px solid var(--rot);border-radius:0 0 var(--r-m) var(--r-m);
  overflow:hidden;background:var(--navy);
  box-shadow:0 1px 3px rgba(22,22,63,.10), 0 10px 28px -12px rgba(22,22,63,.22);
  transition:transform 320ms cubic-bezier(.16,1,.3,1),
             box-shadow 320ms cubic-bezier(.16,1,.3,1)}
.kachel:nth-child(even){border-top-color:var(--navy)}
.kachel:hover,.kachel:focus-visible{transform:translateY(-8px) scale(1.015);z-index:2;
  box-shadow:0 2px 8px rgba(22,22,63,.10), 0 34px 66px -18px rgba(22,22,63,.36)}
.kachel:focus-visible{outline:3px solid var(--navy);outline-offset:3px}

/* Das Bild traegt die Kachel — im Ruhezustand zurueckgenommen */
.kachel-bild{aspect-ratio:4/5;overflow:hidden}
.kachel-bild img{width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.60) saturate(.86);
  transition:filter 420ms ease-out, transform 760ms cubic-bezier(.16,1,.3,1)}
.kachel:hover .kachel-bild img,.kachel:focus-visible .kachel-bild img{
  filter:brightness(1) saturate(1.03);transform:scale(1.05)}

/* Nur Marke und Titel, direkt auf dem Bild */
.kachel-text{position:absolute;left:0;right:0;bottom:0;
  padding:clamp(22px,2.4vw,32px);color:#fff;
  background:linear-gradient(to top, rgba(8,8,20,.88) 0%, rgba(8,8,20,.62) 46%,
                                      rgba(8,8,20,.18) 78%, rgba(8,8,20,0) 100%)}
.kachel-marke{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.66)}
.kachel:nth-child(even) .kachel-marke{color:rgba(255,255,255,.62)}
.kachel h3{font-size:clamp(21px,2vw,26px);font-weight:600;letter-spacing:-.03em;
  margin-top:9px;line-height:1.18;color:#fff}
.kachel-weiter{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:14.5px;font-weight:600;color:#fff}
.kachel-weiter::after{content:'→';transition:transform 260ms ease-out}
.kachel:hover .kachel-weiter::after{transform:translateX(5px)}

.js .kachel{opacity:0;transform:translateY(24px)}
.js .auf.da .kachel{opacity:1;transform:none;
  transition:opacity 660ms cubic-bezier(.16,1,.3,1), transform 660ms cubic-bezier(.16,1,.3,1),
             box-shadow 320ms cubic-bezier(.16,1,.3,1)}
.js .auf.da .kachel:nth-child(1){transition-delay:0ms}
.js .auf.da .kachel:nth-child(2){transition-delay:120ms}
.js .auf.da .kachel:nth-child(3){transition-delay:240ms}
.js .auf.da .kachel:hover{transform:translateY(-8px) scale(1.015)}
@media (prefers-reduced-motion:reduce){
  .js .kachel{opacity:1!important;transform:none!important;transition:none!important}
  .kachel:hover{transform:none}
  .kachel-bild img{filter:brightness(.8)}
}
.an-vh{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.an-fertig{padding:clamp(20px,3vw,34px) 0;text-align:center}
.an-fertig .an-frage{color:var(--rot)}

/* Ausstattung: schlichte Spalten ohne Haken */
.fz-aus{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:0 26px;margin-top:22px}
.fz-aus li{font-size:15.5px;line-height:1.5;padding:9px 0;border-bottom:1px solid var(--linie);
  color:var(--text)}

/* Rufe aus der Börsenbeschreibung, etwa "AB ANFANG JULI VERFÜGBAR" */
.fz-ruf{font-weight:600;color:var(--tinte);background:#FCF4F4;
  border-left:3px solid var(--rot);padding:12px 16px;margin:16px 0;
  font-size:15.5px;letter-spacing:-.01em}
.fz-punkte{list-style:none;display:grid;gap:7px;margin:14px 0}
.fz-punkte li{padding-left:22px;position:relative;font-size:15.5px;line-height:1.55;
  color:var(--text)}
.fz-punkte li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:5px;
  border-left:2px solid var(--rot);border-bottom:2px solid var(--rot);transform:rotate(-45deg)}




/* Wenn gerade nichts passt */
.fltr-leer{grid-column:1/-1;text-align:center;padding:clamp(34px,5vw,56px) clamp(20px,3vw,40px);
  background:var(--nebel);border-radius:var(--r-m)}
.fltr-leer-t{font-size:clamp(19px,2vw,23px);font-weight:600;letter-spacing:-.025em;
  color:var(--tinte)}
.fltr-leer-x{font-size:16px;line-height:1.6;color:var(--text);margin-top:12px;
  max-width:46ch;margin-inline:auto}
.fltr-leer .btns{margin-top:22px}

/* Tippziele auf Touchgeräten: Apple und Google empfehlen 44 px Mindesthöhe.
   Darunter trifft man mit dem Daumen daneben. */
.tabs button,.mtab button,.mzwahl button,[role=tablist] button{min-height:44px}
@media (hover:none),(max-width:900px){
  .tabs button,.mtab button,.mzwahl button,[role=tablist] button{min-height:46px;padding-inline:16px}
  .fnews-f button{min-height:46px}
  .fltr select,.fltr button{min-height:44px}
  .b,.b1,.b2{min-height:46px}
}


/* ============================================================
   Schutz gegen Theme-Farben

   In WordPress setzen viele Themes eigene Farben für h1, h2, p und a
   mit hoher Gewichtung. Auf hellen Flächen ist das harmlos. Auf
   unseren dunklen Abschnitten würde der Text dann unlesbar.
   Deshalb hier ausdrücklich.
   ============================================================ */
.dk,.dk h1,.dk h2,.dk h3,.dk h4,.dk p,.dk li,.dk dd,.dk dt,.dk span,
.dk .d1,.dk .d2,.dk .d3,.dk .tx,.dk .sub,.dk b,.dk strong{color:#fff!important}
.dk .kl,.dk .marke{color:rgba(255,255,255,.72)!important}

.tafel--dunkel,.tafel--dunkel h1,.tafel--dunkel h2,.tafel--dunkel h3,
.tafel--dunkel p,.tafel--dunkel span{color:#fff!important}

.fuss,.fuss h4,.fuss p,.fuss li,.fuss a,.fuss span,.fuss b{color:#fff!important}
.fuss .fzeit,.fuss .fnews-t,.fuss .fnews-ok label{color:rgba(255,255,255,.78)!important}
.fuss .kl{color:rgba(255,255,255,.72)!important}

.dienst,.dienst a,.dienst span,.dienst b{color:#fff!important}
.dienst .dg b{color:rgba(255,255,255,.62)!important}

.band-fakten,.band-fakten h2,.band-fakten p,.band-fakten span,
.band-fakten b{color:#fff!important}
.bild-karte.hell,.bild .ueber .hell *{color:#fff!important}

/* Knöpfe: Theme-Buttonfarben überschreiben unsere */
.b1{background:var(--rot)!important;color:#fff!important;border-color:var(--rot)!important}
.b2{color:var(--tinte)!important}
.dk .b2,.tafel--dunkel .b2{color:#fff!important;border-color:rgba(255,255,255,.42)!important}

/* Fehlt ein Bild, soll nicht der Alt-Text in der Fläche stehen */
.tafel img,.bild img,.breit img,.kachel-bild img,.wkarte img{color:transparent}


/* Wenn nach drei Sekunden nichts eingeblendet wurde, zeigt diese Regel
   die Abschnitte trotzdem. Eine leere Seite ist der schlimmste Fall. */
@keyframes auf-notfall{to{opacity:1;transform:none}}
.js .auf:not(.da),.js .tafel:not(.da){
  animation:auf-notfall .4s ease-out 3s forwards}


/* ============================================================
   Schutz gegen Theme-Knöpfe und eingeschobene Absätze

   Das WordPress-Theme färbt jeden <button> rot und eckig. Unsere
   Auswahlknöpfe bekommen ihr eigenes Aussehen hier ausdrücklich.
   Leere Absätze und Zeilenumbrüche, die WordPress trotz allem
   einschiebt, werden in Rastern ausgeblendet.
   ============================================================ */
.tabs button{background:#fff!important;color:var(--tinte)!important;
  border:1.5px solid var(--linie)!important;border-radius:999px!important;
  text-transform:none!important;letter-spacing:-.01em!important;
  box-shadow:none!important;font-weight:600!important}
.tabs button:hover{border-color:var(--tinte)!important;background:#fff!important;
  color:var(--tinte)!important}
.tabs button[aria-pressed="true"]{background:var(--tinte)!important;
  border-color:var(--tinte)!important;color:#fff!important}
.bf-dunkel .tabs button{background:#1E1E35!important;color:#E8E7F0!important;
  border-color:#2C2C48!important}
.bf-dunkel .tabs button[aria-pressed="true"]{background:#C2151E!important;
  border-color:#C2151E!important;color:#fff!important}

.ar-seite main p:empty,.ar-seite .liste > p,.ar-seite .liste > br,
.ar-seite .lz > br,.ar-seite .lz > p:empty{display:none!important}


/* Weitere Theme-Eingriffe, gefunden mit einem absichtlich störrischen
   Test-Theme: Versalien auf Knöpfen, unterstrichene Kartenlinks, rote
   Hintergründe auf hellen Knöpfen, dunkle Überschriften auf dunklen Feldern. */
.b,.b1,.b2,.fnews-f button,.an-weiter,.an-zurueck,.fz-tasten button{
  text-transform:none!important;letter-spacing:-.01em!important}
.b2{background:transparent!important}
.fnews-f button{border-radius:999px!important;background:var(--rot)!important;color:#fff!important;
  border:0!important}
a.drei-teil,a.kachel,.wkarte a,a.lz,.klapp a,.mp > a,.fuss a,.dienst a,a.b,.logo,
.tk-kontakt a,.tafel a{text-decoration:none}
a.drei-teil,a.drei-teil *{color:#fff!important}
.video-titel{color:#fff!important}
.video-text{color:#D5D4E2!important}
h1,h2,h3,h4,h5,h6{font-family:var(--s)}


/* ============================================================
   Knöpfe gegen globale Linkfarben

   Zweite Sicherung, falls ein Theme seine Linkfarbe mit einer Klasse am
   <body> setzt. Mit der Kennung #inhalt sind diese Regeln stärker als
   jede Klassenregel des Themes, bleiben aber schwächer als die
   !important-Regeln von Dunkelmodus und Kontrast.
   ============================================================ */
#inhalt .tafel-k1,#inhalt .tafel-k1:hover,#inhalt .tafel-k1:focus{color:#fff}
#inhalt .tafel-k1{background:var(--rot)}
#inhalt .tafel-k1:hover{background:var(--rot-hell)}
#inhalt .tafel-k2{color:var(--tinte)}
#inhalt .tafel--dunkel .tafel-k2,#inhalt .tafel--dunkel .tafel-k2:hover{color:#fff}
#inhalt .b1,#inhalt .b1:hover,#inhalt .drei-k1,#inhalt .drei-k2{color:#fff}
#inhalt a.wkarte,#inhalt a.wkarte:hover{color:var(--tinte)}
#inhalt a.drei-teil{color:#fff}
.kopf .ruf{color:#16163F}
.kopf .ruf:hover{color:#fff}
#inhalt :is(h1,h2,h3,h4),.kopf :is(h1,h2,h3,h4),.fuss :is(h1,h2,h3,h4){font-family:var(--s)}
#inhalt .ex :is(h1,h2,h3,h4){font-family:inherit}   /* Exposé behält IBM Plex */
#inhalt button.b,#inhalt button.b1,#inhalt button.b2{border-radius:999px}

/* ============================================================
   Ansprechpartner kompakter

   Vorher mindestens 330 px breit mit Bild im Hochformat 4:5 — wuchtig.
   Jetzt schmale Karten, die nicht auf volle Breite gedehnt werden, und
   ein quadratisches Bild. Bis zu fünf nebeneinander auf breiten
   Bildschirmen, auf dem Handy zwei, damit die Liste nicht endlos wird.
   ============================================================ */
.tkraster{grid-template-columns:repeat(auto-fill,minmax(200px,230px));
  justify-content:center;gap:clamp(14px,1.8vw,22px)}
.tk-bild{aspect-ratio:1/1}
.tk-kurz{font-size:clamp(26px,2.6vw,34px)}
.tk-inhalt{padding:14px 15px 12px}
.tk h3{font-size:16px;line-height:1.3}
.tk-rolle{font-size:10.5px;letter-spacing:.12em;margin-top:4px}
.tk-kontakt{margin-top:10px;padding-top:6px}
.tk-kontakt a{font-size:13.5px}
@media (max-width:520px){
  .tkraster{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tk-inhalt{padding:12px 12px 10px}
  .tk h3{font-size:15px}
  .tk-rolle{font-size:9.5px;letter-spacing:.08em}
  /* Lange Mail-Adressen umbrechen statt abschneiden */
  .tk-kontakt a{font-size:12.5px;white-space:normal;word-break:break-all;line-height:1.3}
}
/* Flex statt Raster, damit auch eine unvollständige letzte Reihe mittig steht */
.tkraster{display:flex;flex-wrap:wrap;justify-content:center}
.tkraster > .tk{flex:0 1 230px;min-width:0}
/* Lange Mail-Adressen am @ umbrechen statt abschneiden */
.tk-kontakt a{white-space:normal;overflow-wrap:anywhere;line-height:1.3;min-height:40px}
@media (max-width:520px){ .tkraster > .tk{flex:0 1 calc(50% - 6px)} }

/* ============================================================
   Ansprechpartner wie auf der bisherigen Website

   Drei Karten je Reihe, Bild im Querformat mit Kreisdekor und
   Personensymbol, rote Trennlinie, Name und Funktion mittig,
   Kontakte mit Symbolen. Beim Überfahren wird die Bildfläche rot.
   Ersetzt die schmalen Karten von vorher.
   ============================================================ */
.tkraster{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,34px);justify-content:stretch;max-width:1360px;margin-inline:auto}
.tkraster > .tk{flex:none;min-width:0}
.tk{background:#fff;border:1px solid var(--linie);border-radius:14px;overflow:hidden;
  transition:transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s ease}
.tk:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(22,22,63,.14)}
.tk-bild{aspect-ratio:7/5;border-radius:0;border-bottom:3px solid var(--rot);
  background:linear-gradient(160deg,#1C1C47 0%,#2A2A58 100%);isolation:isolate}
.tk-bild.ohne{background:linear-gradient(160deg,#1C1C47 0%,#2A2A58 100%)}
/* Kreisdekor oben rechts */
.tk-bild::after{content:'';position:absolute;z-index:-1;right:-14%;top:-30%;width:62%;
  aspect-ratio:1;border-radius:50%;background:rgba(160,18,24,.20);
  transition:background-color .3s ease}
.tk:hover .tk-bild.ohne{background:linear-gradient(160deg,#9A1A20 0%,#6E0E13 100%)}
.tk:hover .tk-bild::after{background:rgba(255,255,255,.09)}
/* Personensymbol statt Kürzel, solange kein Foto da ist */
.tk-kurz{width:clamp(96px,9vw,124px);aspect-ratio:1;border-radius:50%;
  border:2px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8.2' r='4.1' fill='%23ffffff' fill-opacity='.62'/%3E%3Cpath d='M4 20.6c0-4.2 3.6-6.9 8-6.9s8 2.7 8 6.9z' fill='%23ffffff' fill-opacity='.62'/%3E%3C/svg%3E")
  center 52%/46% no-repeat;font-size:0!important;color:transparent!important}
.tk-inhalt{text-align:center;padding:clamp(22px,2.2vw,30px) clamp(18px,2vw,28px) clamp(20px,2vw,26px)}
.tk h3{font-size:clamp(19px,1.6vw,23px);font-weight:700;letter-spacing:-.02em;color:var(--tinte)}
.tk-rolle{font-size:12.5px;font-weight:700;letter-spacing:.2em;margin-top:8px}
.tk-kontakt{display:grid;justify-items:start;gap:4px;width:max-content;max-width:100%;
  margin:16px auto 0;padding-top:0;border-top:0}
.tk-kontakt a{display:inline-flex;align-items:center;gap:12px;min-height:36px;
  font-size:clamp(15px,1.2vw,17px);color:var(--grau);text-decoration:underline;
  text-decoration-color:rgba(51,50,61,.35);text-underline-offset:4px;white-space:nowrap}
.tk-kontakt a:hover{color:var(--rot);text-decoration-color:currentColor}
.tk-kontakt a::before{content:'';flex:none;width:15px;height:15px;background:var(--rot);
  -webkit-mask:var(--sym) center/contain no-repeat;mask:var(--sym) center/contain no-repeat}
.tk-kontakt a[href^="tel:"]{--sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E")}
.tk-kontakt a[href^="mailto:"]{--sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18c.6 0 1 .4 1 1v12c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1V6c0-.6.4-1 1-1zm9 7.2L4 7.1V8l8 5.1L20 8v-.9z'/%3E%3C/svg%3E")}
.tk-kontakt a.tk-wa{--sym:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 1.9c.1.1.1.3 0 .5l-.3.5-.4.4c-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.3 2.4 1.5.3.1.5.1.6-.1l.9-1c.2-.2.4-.2.6-.1l1.8.9c.3.1.4.2.5.3 0 .2 0 .8-.2 1.4z'/%3E%3C/svg%3E")}
.tk-kontakt a.tk-wa::before{background:#1B8F5A}
/* Tablet zwei, Handy eine Karte je Reihe */
@media (max-width:1000px){ .tkraster{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){
  .tkraster{grid-template-columns:minmax(0,440px);justify-content:center}
  .tk-kontakt a{white-space:normal;overflow-wrap:anywhere}
}
/* Dunkelmodus */
.bf-dunkel .tk{background:#17172A!important;border-color:#2C2C48!important}
.bf-dunkel .tk-kontakt a{color:#D6D5E2!important;text-decoration-color:rgba(255,255,255,.35)}
.bf-dunkel .tk h3{color:#F2F1F8!important}
@media (hover:none),(max-width:900px){ .tk-kontakt a{min-height:44px} }

/* ============================================================
   Nachträge: Linkfarben, Kontaktformular, Ansprechpartner,
   Bildfeld, Kalender, Bildstreifen
   ============================================================ */
/* Textlinks: Das Theme (Hello Elementor) färbt Links pink. */
#inhalt p a,#inhalt li a,#inhalt dd a,#inhalt dt a,#inhalt td a,#inhalt th a,
#inhalt .tx a,#inhalt .sub a,#inhalt summary a,#inhalt figcaption a,
#inhalt .hinweis a,#inhalt address a{color:#96111B;text-decoration-color:rgba(150,17,27,.4)}
#inhalt p a:hover,#inhalt li a:hover,#inhalt .tx a:hover,#inhalt .hinweis a:hover{
  color:var(--rot-hell);text-decoration-color:currentColor}
#inhalt .dk p a,#inhalt .dk li a,#inhalt .tafel--dunkel p a{color:#fff}

/* Kontaktformular */
.kf{margin-top:clamp(28px,3.5vw,44px)}
.kf-gitter{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px)}
.kf-breit{grid-column:1/-1}
.kf-feld{display:flex;flex-direction:column;gap:7px;margin:0}
.kf-feld label,.kf-dsgvo{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--tinte)}
.kf-feld label span[aria-hidden]{color:var(--rot)}
.kf input,.kf select,.kf textarea{font-family:var(--s);font-size:16px;color:var(--tinte);
  padding:13px 15px;border:1.5px solid var(--linie);border-radius:10px;background:#fff;
  width:100%;transition:border-color .2s ease,box-shadow .2s ease}
.kf textarea{resize:vertical;min-height:130px;line-height:1.6}
.kf input:focus,.kf select:focus,.kf textarea:focus{outline:0;border-color:var(--tinte);
  box-shadow:0 0 0 3px rgba(22,22,63,.12)}
.kf-offen input,.kf-offen select,.kf-offen textarea{border-color:var(--rot)}
.kf-offen input[type=checkbox]{outline:2px solid var(--rot);outline-offset:3px}
.kf-dsgvo{margin-top:18px;font-weight:400}
.kf-dsgvo label{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-size:14.5px;line-height:1.55;color:var(--text)}
.kf-dsgvo input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--rot)}
.kf-fehler{margin-top:16px;padding:13px 16px;border-radius:10px;background:#FCF2F2;
  border-left:3px solid var(--rot);color:var(--tinte);font-size:15px}
.kf-fehler[hidden],.kf-ok[hidden]{display:none}
.kf-ok{padding:22px 24px;border-radius:12px;background:#F1F7F2;
  border-left:3px solid #1B8F5A;font-size:16.5px;line-height:1.6;color:var(--tinte)}
.kf-pflicht{margin-top:14px;text-align:center;font-size:13px;color:var(--grau)}
.kf-pflicht span{color:var(--rot)}
@media (max-width:620px){ .kf-gitter{grid-template-columns:1fr} }
@media (hover:none),(max-width:900px){
  .kf-dsgvo input{width:24px;height:24px}
  .kf-dsgvo label{padding-block:6px}
}
.bf-dunkel .kf input,.bf-dunkel .kf select,.bf-dunkel .kf textarea{
  background:var(--dk-grund)!important;color:var(--dk-text)!important;border-color:var(--dk-linie)!important}
.bf-dunkel .kf-feld label,.bf-dunkel .kf-dsgvo label{color:var(--dk-text)!important}
.bf-dunkel .kf-fehler{background:#2A1A1E!important;color:var(--dk-text)!important}
.bf-dunkel .kf-ok{background:#16281E!important;color:var(--dk-text)!important}
.bf-dunkel .kf-feld label span[aria-hidden],.bf-dunkel .kf-pflicht span{color:var(--dk-rot)!important}

/* Bildfeld im Foto: mittig und halbdurchsichtig, nur wenn einzeilig */
.ueber .in:has(.bild-karte > p:only-child){display:flex;justify-content:center}
.ueber .bild-karte:has(> p:only-child){width:auto;max-width:min(520px,100%);text-align:center;
  padding:14px clamp(22px,2.4vw,30px);border-radius:999px;
  background:rgba(22,22,63,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 44px -16px rgba(8,8,20,.5)}
.ueber .bild-karte:has(> p:only-child) p{color:#fff;max-width:none;margin:0;
  display:inline-flex;align-items:center;gap:11px;
  font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.015em;line-height:1.3}
/* Kartennadel vor dem Text */
.ueber .bild-karte:has(> p:only-child) p::before{content:'';flex:none;width:17px;height:17px;
  background:#fff;
  -webkit-mask:var(--nadel) center/contain no-repeat;mask:var(--nadel) center/contain no-repeat;
  --nadel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E")}
@supports not (backdrop-filter:blur(6px)){
  .ueber .bild-karte:has(> p:only-child){background:rgba(22,22,63,.86)}
}

/* Ansprechpartner: 3 – 1 – 3 auf breiten Bildschirmen */
@media (min-width:1001px){
  .tkraster > .tk:nth-child(4){grid-column:2;grid-row:2}
  .tkraster > .tk:nth-child(5){grid-column:1;grid-row:3}
  .tkraster > .tk:nth-child(6){grid-column:2;grid-row:3}
  .tkraster > .tk:nth-child(7){grid-column:3;grid-row:3}
}

/* Kalender der Leihwagen-Anfrage gegen Theme-Farben */
#inhalt .an-tag{background:#fff;color:var(--tinte);border:1px solid var(--linie)}
#inhalt .an-tag:hover:not(:disabled){border-color:var(--rot);background:#fff}
#inhalt .an-tag:disabled{color:#B4B2BE;background:var(--nebel)}
#inhalt .an-tag.an-drin{background:#FCF4F4;border-color:#F0D8D9;color:var(--tinte)}
#inhalt .an-tag.an-gewaehlt{background:var(--rot);border-color:var(--rot);color:#fff}
#inhalt .an-pfeil{background:#fff;color:var(--tinte);border:1.5px solid var(--linie)}
#inhalt .an-pfeil:hover:not(:disabled){border-color:var(--tinte);background:#fff}
#inhalt .an-pfeil:disabled{color:#B4B2BE;background:var(--nebel)}
.bf-dunkel #inhalt .an-tag,.bf-dunkel #inhalt .an-pfeil{background:var(--dk-fl1)!important;
  color:var(--dk-text)!important;border-color:var(--dk-linie)!important}
.bf-dunkel #inhalt .an-tag:disabled{color:#7D7B96!important;background:var(--dk-grund)!important}
.bf-dunkel #inhalt .an-tag.an-drin{background:#2A1A24!important}
.bf-dunkel #inhalt .an-tag.an-gewaehlt{background:#C2151E!important;border-color:#C2151E!important;color:#fff!important}

/* Bildstreifen im Steckbrief: Schatten statt rotem Rahmen */
#inhalt .steck-streifen button{background:none;border:2px solid transparent;padding:0;
  transition:box-shadow .2s ease,transform .2s cubic-bezier(.23,1,.32,1)}
#inhalt .steck-streifen button:hover{background:none;border-color:transparent;
  box-shadow:0 8px 20px -6px rgba(22,22,63,.4);transform:translateY(-2px)}
#inhalt .steck-streifen button[aria-current]{border-color:var(--rot)}
#inhalt .steck-streifen button:focus-visible{outline:3px solid var(--tinte);outline-offset:2px}
/* Bildstreifen auf der Fahrzeugseite: Schatten statt Rahmen beim Überfahren,
   rot bleibt dem gerade gewählten Bild vorbehalten. Das Theme färbt sonst
   jeden Knopf ein. */
#inhalt .fz-streifen button{background:none;border:2px solid transparent;padding:0;
  transition:box-shadow .2s ease,transform .2s cubic-bezier(.23,1,.32,1)}
#inhalt .fz-streifen button:hover{background:none;border-color:transparent;
  box-shadow:0 8px 20px -6px rgba(22,22,63,.4);transform:translateY(-2px)}
#inhalt .fz-streifen button[aria-current]{border-color:var(--rot)}
#inhalt .fz-streifen button:focus-visible{outline:3px solid var(--tinte);outline-offset:2px}

/* Kontaktseite: zwei Standorte nebeneinander, die Anfahrt darunter über die
   volle Breite. Vorher blieb rechts neben der Anfahrt ein leeres Feld. */
@media (min-width:761px){
  .mkraster--schlicht{grid-template-columns:1fr 1fr}
  .mkraster--schlicht .mk:nth-child(3){grid-column:1/-1}
  .mkraster--schlicht .mk:nth-child(3){text-align:center}
  .mkraster--schlicht .mk:nth-child(3) p{max-width:74ch;margin-inline:auto}
}

/* Fußzeile: Das Theme gibt jeder Liste einen Außenabstand und eine
   Einrückung. Im Fuß verschiebt das die Linkzeile gegenüber dem
   Urhebervermerk. Hier zurückgesetzt. */
.fuss ul,.fuss-unten ul,.fuss-unten nav{margin:0;padding:0;list-style:none}
.fuss-unten p{margin:0}
.fuss-unten{align-items:center}
/* Zoom-Knopf über dem großen Fahrzeugbild: Das Theme gibt jedem Knopf einen
   Rahmen und eine Farbe — hier entstand ein roter Rahmen ums ganze Bild. */
#inhalt .fz-zoom{background:none;border:0;padding:0;border-radius:inherit;
  display:block;width:100%;cursor:zoom-in}
#inhalt .fz-zoom:hover,#inhalt .fz-zoom:focus{background:none;border:0;outline:0}
#inhalt .fz-zoom:focus-visible{outline:3px solid var(--tinte);outline-offset:3px}
#inhalt .fz-gross{border:0;background:none}

/* ============================================================
   Druck: gegen fremde Regeln absichern

   Beim Drucken mischen Theme und Seitenbauer mit: eigene Schriften,
   Farben, Ränder, sichtbare Kopf- und Fußbereiche. Diese Regeln stehen
   am Ende und setzen das für den Exposé-Bogen zurück.
   ============================================================ */


/* „Exposé drucken" ist ein <button>, die anderen sind Links. Damit alle
   vier Knöpfe gleich aussehen, bekommt er dieselben Maße und Farben. */
#inhalt button.b,#inhalt button.b1,#inhalt button.b2{
  font-family:var(--s);font-size:15px;font-weight:600;letter-spacing:-.01em;
  padding:16px 26px;border-radius:999px;width:100%;text-align:center;
  line-height:1.2;cursor:pointer;text-transform:none!important;
  min-height:53px;display:inline-flex;align-items:center;justify-content:center}
#inhalt button.b2{background:#fff!important;color:var(--tinte)!important;
  border:1.5px solid var(--tinte)!important}
#inhalt button.b2:hover{background:var(--nebel)!important;color:var(--tinte)!important;
  border-color:var(--tinte)!important}
.bf-dunkel #inhalt button.b2{background:var(--dk-fl1)!important;color:var(--dk-text)!important;
  border-color:var(--dk-text)!important}

/* ============================================================
   Handy: Eingabefelder und Lesbarkeit

   Unter 16 Pixel zoomt das iPhone beim Antippen in das Feld hinein —
   danach steht die Seite verschoben da. Außerdem heben wir kleine
   Schriften an: 12 Pixel sind auf einem Telefon kaum lesbar.
   ============================================================ */
@media (max-width:900px){
  input,select,textarea,.fltr select,.an-eingabe input,.an-eingabe select,
  .an-eingabe textarea,.kf input,.kf select,.kf textarea,.fnews-f input{
    font-size:16px!important}
  /* Ankreuzfelder mit großzügiger Fläche */
  .kf-dsgvo label,.fnews-ok-feld label,label:has(> input[type=checkbox]){
    min-height:48px;display:flex;align-items:flex-start;padding-block:10px}
  .kf-dsgvo input[type=checkbox],.fnews-f input[type=checkbox]{
    width:26px;height:26px}
  /* Kleine Schriften anheben */
  .dg,.fnews-ok,.caddy-marke{font-size:14px!important;line-height:1.5}
  .fzeit,.lw-daten,.karte-alt,.wdaten{font-size:14.5px!important}
  .kl{font-size:13px!important;letter-spacing:.1em}
  /* Knöpfe und Felder im Formular bequem groß */
  .kf input,.kf select{min-height:50px}
  .b,.b1,.b2{min-height:50px;display:inline-flex;align-items:center;justify-content:center}
  .fltr select{min-height:50px}
}
@media (max-width:900px){
  /* Newsletter im Fuß: Feld und Knopf bequem groß */
  .fnews-f input[type=email]{min-height:50px}
  .fnews-f button{min-height:50px}
  .fnews-ok label,.fnews label{min-height:48px;display:flex;align-items:flex-start;gap:12px}
  .fnews input[type=checkbox]{width:26px;height:26px;flex:none;margin-top:2px}
  /* Rechtliche Hinweise lesbar halten */
  .fnews p,.fnews small,.fuss small,.fuss-unten p,.fuss-unten a{font-size:14px!important}
}
@media (max-width:900px){
  /* Ankreuzfelder: sichtbar groß genug zum Treffen */
  input[type=checkbox]{width:28px!important;height:28px!important}
  .fnews-f input[type=checkbox],#kf-dsgvo{width:28px!important;height:28px!important}
}

/* Knöpfe auf der Fahrzeugseite: sichtbare Rückmeldung beim Überfahren.
   Ohne sie wirken sie wie Text — man erkennt nicht, dass sie klickbar sind. */
#inhalt .b1:hover,#inhalt .b1:focus-visible{background:#7E0E16!important;color:#fff!important;
  transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(150,17,27,.55)}
#inhalt .b2:hover,#inhalt button.b2:hover,#inhalt .b2:focus-visible{
  background:var(--nebel)!important;border-color:var(--tinte)!important;
  transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(22,22,63,.4)}
#inhalt .b-wa:hover,#inhalt .b-wa:focus-visible{background:#1F5F50!important;color:#fff!important;
  transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(31,95,80,.5)}
#inhalt .b,#inhalt .b1,#inhalt .b2,#inhalt .b-wa{
  transition:background-color .18s ease,border-color .18s ease,
             transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s ease}
@media (hover:none){
  #inhalt .b1:hover,#inhalt .b2:hover,#inhalt .b-wa:hover{transform:none;box-shadow:none}
}

/* ============================================================
   Knöpfe: sichtbare Rückmeldung beim Überfahren

   Ohne Rückmeldung weiß man nicht, ob man richtig zielt. Jeder Knopf
   dunkelt leicht nach, hebt sich an und bekommt einen weichen Schatten.
   Wer Bewegung im Betriebssystem abgeschaltet hat, bekommt nur die
   Farbänderung.
   ============================================================ */
#inhalt .b,#inhalt .b1,#inhalt .b2,#inhalt button.b1,#inhalt button.b2,
#inhalt .b-wa{
  transition:background-color .18s ease,border-color .18s ease,
             box-shadow .22s ease,transform .22s cubic-bezier(.23,1,.32,1)}
#inhalt .b1:hover,#inhalt button.b1:hover{
  background:#7E0E16!important;transform:translateY(-2px);
  box-shadow:0 10px 24px -10px rgba(150,17,27,.65)}
#inhalt .b2:hover,#inhalt button.b2:hover{
  background:var(--nebel)!important;border-color:var(--tinte)!important;
  transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(22,22,63,.45)}
#inhalt .b-wa:hover{background:#215E52!important;transform:translateY(-2px);
  box-shadow:0 10px 24px -10px rgba(33,94,82,.6)}
#inhalt .b:active,#inhalt .b1:active,#inhalt .b2:active,
#inhalt .b-wa:active{
  transform:translateY(0);box-shadow:none}
#inhalt .b:focus-visible,#inhalt .b1:focus-visible,#inhalt .b2:focus-visible,
#inhalt button.b1:focus-visible,#inhalt button.b2:focus-visible{
  outline:3px solid var(--tinte);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  #inhalt .b,#inhalt .b1,#inhalt .b2{transition:background-color .18s ease}
  #inhalt .b1:hover,#inhalt .b2:hover,#inhalt .b-wa:hover{transform:none;box-shadow:none}
}

/* „Auf einen Blick": ein Absatz, der für sich allein erklärt, wer wir
   sind, was wir anbieten und wo. Für Menschen, die schnell Bescheid
   wissen wollen, und für Suchmaschinen und KI-Dienste, die genau solche
   Absätze zitieren. */
.kurz .eng{max-width:72ch}
.kurz .kl{text-align:left}
/* Linksbündig: zentrierter Fließtext über mehrere Zeilen ist schwer zu lesen */
.kurz-text{margin-top:14px;font-size:clamp(16.5px,1.35vw,18.5px);line-height:1.7;
  color:var(--text);text-align:left;text-wrap:pretty;
  padding-left:20px;border-left:3px solid var(--rot)}
.bf-dunkel .kurz-text{color:var(--dk-text)}
/* Pflichtangabe zu Kundenbewertungen (§ 5b Abs. 3 UWG) */
.bew-hinweis{margin:22px auto 0;max-width:62ch;font-size:13.5px;line-height:1.55;
  color:var(--grau);text-align:center}
@media (max-width:900px){ .bew-hinweis{font-size:14px} }
.bf-dunkel .bew-hinweis{color:#A9A7BF}

/* ============================================================
   Galerie in voller Größe
   Die Knöpfe hängen direkt am Seitenende, außerhalb des Inhalts — dort
   greifen die Theme-Farben für Knöpfe. Deshalb alles mit Vorrang.
   ============================================================ */
.lupe{position:fixed;inset:0;z-index:200;background:rgba(8,8,20,.95);
  display:flex;align-items:center;justify-content:center;padding:64px 16px 56px;
  touch-action:pan-y}
.lupe-bild{margin:0;display:flex;flex-direction:column;align-items:center;
  max-width:100%;max-height:100%}
.lupe-bild img{max-width:100%;max-height:calc(100svh - 140px);object-fit:contain;
  border-radius:10px;user-select:none;-webkit-user-drag:none}
.lupe-zahl{margin-top:14px;color:#E9E8F2;font:600 14px/1 var(--s);letter-spacing:.06em}
.lupe .lupe-zu,.lupe .lupe-pfeil{position:absolute;display:flex;align-items:center;
  justify-content:center;border:0!important;border-radius:999px!important;
  background:rgba(255,255,255,.14)!important;color:#fff!important;cursor:pointer;
  padding:0!important;font:400 30px/1 var(--s)!important;text-transform:none!important;
  -webkit-tap-highlight-color:transparent;transition:background .2s ease}
.lupe .lupe-zu{top:14px;right:14px;width:48px;height:48px;font-size:28px!important}
.lupe .lupe-pfeil{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:40px!important}
.lupe .lupe-zurueck{left:12px}
.lupe .lupe-vor{right:12px}
.lupe .lupe-zu:hover,.lupe .lupe-pfeil:hover{background:rgba(255,255,255,.28)!important;color:#fff!important}
.lupe .lupe-zu:focus-visible,.lupe .lupe-pfeil:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (max-width:620px){
  .lupe{padding:64px 0 52px}
  .lupe-bild img{border-radius:0;max-height:calc(100svh - 150px)}
  .lupe .lupe-pfeil{width:44px;height:44px;font-size:34px!important;background:rgba(8,8,20,.55)!important;
    top:auto;bottom:10px;transform:none}
  .lupe .lupe-zurueck{left:16px} .lupe .lupe-vor{right:16px}
  .lupe-zahl{position:absolute;bottom:22px;left:0;right:0;text-align:center;margin:0}
}
/* Der Zähler darf die Pfeile nicht verdecken */
.lupe-zahl{pointer-events:none}
.lupe .lupe-zu,.lupe .lupe-pfeil{z-index:2}

/* „Auto-Rickert in Kürze": am Seitenende, zugeklappt. Für Besucher eine
   unauffällige Zeile, für Suchmaschinen und KI-Dienste der vollständige
   Text im Quelltext — zugeklappte Inhalte werden genauso gelesen. */
.kurz-ende{padding-block:clamp(28px,4vw,44px);background:transparent}
.kurz-ende .eng{max-width:72ch}
.kurz-auf{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.kurz-auf summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:16px;min-height:52px;padding:6px 2px;
  font:600 13px/1.3 var(--s);letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.kurz-auf summary::-webkit-details-marker{display:none}
.kurz-auf summary::after{content:'+';font-size:22px;font-weight:400;letter-spacing:0;
  color:var(--rot);transition:transform .2s ease}
.kurz-auf[open] summary::after{transform:rotate(45deg)}
.kurz-auf summary:hover{color:var(--tinte)}
.kurz-auf summary:focus-visible{outline:3px solid var(--tinte);outline-offset:3px}
.kurz-auf .kurz-text{margin:0 0 18px;padding:0;border:0;font-size:15.5px;line-height:1.7;
  color:var(--text);text-align:left}
.bf-dunkel .kurz-auf summary{color:#A9A7BF}

/* Lange deutsche Wörter in Überschriften dürfen getrennt werden —
   „Kraftfahrzeughilfe" passt auf schmalen Handys sonst nicht in die Zeile. */
#inhalt h1,#inhalt h2,#inhalt h3,#inhalt .d1,#inhalt .d2,#inhalt .d3,.tafel-kopf h1,.drei-satz h1{
  overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4}