/* Kfz-Service Geier v5A — Video als fixer Seiten-Hintergrund (Scroll-Scrub),
   alle Inhalte scrollen in Frosted-Cards darüber. LIGHT locked. */

:root{
  color-scheme:light;
  --kabine:#F1F2F3;
  --ink:#16181C;
  --ink-soft:#4E555E;
  --lack:#9A1B29;
  --lack-tief:#761321;
  --offen:#177245;
  --hell:#F7F8F9;
  --card:rgba(249,250,251,.9);
  --font-display:'Archivo',sans-serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-width:thin}
body{
  font-family:var(--font-body);
  background:var(--kabine);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--lack);outline-offset:3px;border-radius:4px}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  height:68px;padding:0 clamp(16px,3vw,40px);
}
.marke{
  font-family:var(--font-display);font-weight:900;font-size:1.05rem;text-decoration:none;
  letter-spacing:-.01em;text-transform:uppercase;
  background:rgba(247,248,249,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:.35em .7em;border-radius:999px;
}
.marke span{color:var(--lack)}
.hauptnav{display:flex;align-items:center;gap:clamp(6px,1.2vw,18px)}
.hauptnav a:not(.tel-pill){
  font-weight:700;font-size:.92rem;text-decoration:none;color:var(--ink);
  background:rgba(247,248,249,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:.45em .95em;border-radius:999px;
  transition:color .2s,transform .25s var(--ease);
}
.hauptnav a:not(.tel-pill):hover{color:var(--lack);transform:translateY(-2px)}
.hauptnav a:not(.tel-pill):active{transform:scale(.97)}
.tel-pill{
  font-weight:700;font-size:.92rem;text-decoration:none;color:#fff;
  background:var(--lack);border-radius:999px;padding:.55em 1.25em;
  box-shadow:0 3px 10px rgba(154,27,41,.28);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s;
  display:inline-block;font-variant-numeric:tabular-nums;
}
.tel-pill:hover{background:var(--lack-tief);transform:translateY(-2px);box-shadow:0 8px 22px rgba(154,27,41,.35)}
.tel-pill:active{transform:scale(.97)}

/* ---------- Video-Hintergrund ---------- */
.film-bg{position:fixed;inset:0;z-index:1;background:var(--kabine)}
.film-bg canvas{width:100%;height:100%;display:block}
.film-statisch{display:none;width:100%;height:100%;object-fit:cover}
.film-bg.statisch canvas{display:none}
.film-bg.statisch .film-statisch{display:block}

/* ---------- Inhalts-Fluss ueber dem Video ---------- */
.fluss{
  position:relative;z-index:10;
  max-width:1200px;margin:0 auto;
  padding:calc(68px + clamp(28px,6vh,72px)) clamp(18px,4vw,56px) clamp(56px,8vh,110px);
  display:grid;gap:52vh 0; /* grosse Luecken = Video atmet zwischen den Cards */
}
.card{
  width:min(560px,100%);
  background:var(--card);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:18px;border-top:3px solid var(--lack);
  box-shadow:0 24px 60px -24px rgba(23,24,26,.30),0 4px 16px -8px rgba(23,24,26,.15);
  padding:clamp(26px,3vw,40px);
  justify-self:start;
}
.card.rechts{justify-self:end}
.card.breit{width:min(980px,100%);justify-self:center}

.card h2{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.7rem,2.8vw,2.4rem);letter-spacing:-.02em;line-height:1.05;
  margin-bottom:clamp(16px,2.4vw,26px);
}

/* Intro */
.eyebrow{
  font-size:.85rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lack-tief);margin-bottom:16px;
}
.intro h1{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.2rem,4vw,3.6rem);line-height:.98;letter-spacing:-.02em;
  margin-bottom:18px;
}
.intro h1 .rot{color:var(--lack)}
.intro-text{font-size:clamp(1rem,1.2vw,1.12rem);color:var(--ink-soft);margin-bottom:24px}
.cta-btn{
  display:inline-block;font-weight:700;text-decoration:none;color:#fff;
  background:var(--lack);border-radius:999px;padding:.85em 1.8em;
  box-shadow:0 3px 10px rgba(154,27,41,.28);font-variant-numeric:tabular-nums;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s;
}
.cta-btn:hover{background:var(--lack-tief);transform:translateY(-2px);box-shadow:0 8px 22px rgba(154,27,41,.35)}
.cta-btn:active{transform:scale(.97)}

/* Leistungen (in der Card gestapelt) */
.leistungen-liste{display:grid;gap:14px}
.leistung{
  background:#fff;border-radius:12px;padding:18px 20px;
  box-shadow:0 8px 24px -16px rgba(23,24,26,.25);
}
.leistung h3{
  font-family:var(--font-display);font-weight:900;font-size:1.08rem;
  letter-spacing:-.01em;margin-bottom:6px;
}
.leistung p{color:var(--ink-soft);font-size:.95rem;line-height:1.6}
.leistung.akzent{background:var(--lack)}
.leistung.akzent h3{color:#fff}
.leistung.akzent p{color:rgba(255,255,255,.87)}
.mehr-link{margin-top:16px;font-weight:700}
.mehr-link a{color:var(--lack);text-decoration:none}
.mehr-link a:hover{text-decoration:underline}

/* Ablauf — Zeitleiste mit verbundenen Schritt-Badges */
.ablauf{list-style:none;display:grid;gap:0}
.ablauf li{
  position:relative;
  display:grid;grid-template-columns:46px 1fr;gap:0 18px;
  padding-bottom:22px;
}
.ablauf li:last-child{padding-bottom:0}
/* Verbindungslinie zwischen den Badges */
.ablauf li:not(:last-child)::before{
  content:"";position:absolute;left:22px;top:48px;bottom:-2px;
  width:2px;background:linear-gradient(var(--lack),rgba(154,27,41,.14));
}
.ablauf-num{
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:900;font-size:1.3rem;line-height:1;
  color:#fff;background:var(--lack);border-radius:50%;
  box-shadow:0 8px 18px -8px rgba(154,27,41,.55);
  position:relative;z-index:1;
}
.ablauf-inhalt{padding-top:3px}
.ablauf-inhalt b{
  display:block;font-family:var(--font-display);font-size:1.12rem;
  letter-spacing:-.01em;margin-bottom:3px;
}
.ablauf-inhalt span{font-size:.95rem;color:var(--ink-soft);line-height:1.6}

/* Bewertungen */
.beispiel-hinweis{
  font-size:.82rem;color:var(--ink-soft);
  background:rgba(154,27,41,.07);border-left:3px solid var(--lack);
  border-radius:8px;padding:8px 12px;margin-bottom:16px;
}
.bewertungen-liste{display:grid;gap:12px}
.bewertung{
  background:#fff;border-radius:12px;padding:16px 18px;
  box-shadow:0 8px 24px -16px rgba(23,24,26,.25);
}
.sterne{color:#E8A517;font-size:1.05rem;letter-spacing:.1em;margin-bottom:6px}
.bewertung p:not(.sterne){font-size:.97rem;line-height:1.55}
.bewertung footer{font-size:.8rem;color:var(--ink-soft);margin-top:8px}

/* Warum / Stats */
.warum-stats{display:flex;gap:clamp(26px,4vw,52px);margin-bottom:18px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;max-width:24ch}
.stat-zahl{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;color:var(--lack);
  font-variant-numeric:tabular-nums;
}
.stat-label{font-size:.92rem;color:var(--ink-soft);margin-top:6px}
.warum-text{color:var(--ink-soft)}

/* Kontakt (breite Card) */
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.5vw,44px);align-items:start}
#kontakt-formular{display:grid;gap:16px}
.feld{display:grid;gap:6px}
.feld label{font-weight:700;font-size:.95rem}
.feld input,.feld textarea{
  font:inherit;color:var(--ink);
  background:#fff;border:1px solid rgba(22,24,28,.22);border-radius:10px;
  padding:.7em .9em;width:100%;
}
.feld input:focus-visible,.feld textarea:focus-visible{outline:3px solid var(--lack);outline-offset:1px;border-color:var(--lack)}
.feld-hilfe{font-size:.85rem;color:var(--ink-soft)}
#formular-hinweis{font-size:.95rem;background:rgba(154,27,41,.08);border-left:3px solid var(--lack);border-radius:8px;padding:12px 14px}
#formular-hinweis a{color:var(--lack);font-weight:700}
.form-absenden{
  font:inherit;font-weight:700;color:#fff;background:var(--lack);
  border:0;border-radius:999px;padding:.8em 1.9em;cursor:pointer;justify-self:start;
  box-shadow:0 3px 10px rgba(154,27,41,.28);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s;
}
.form-absenden:hover{background:var(--lack-tief);transform:translateY(-2px);box-shadow:0 8px 22px rgba(154,27,41,.35)}
.form-absenden:active{transform:scale(.97)}
.form-absenden:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.karte-rahmen{border-radius:12px;overflow:hidden;box-shadow:0 8px 24px -16px rgba(23,24,26,.3)}
.karte-rahmen iframe{width:100%;height:300px;border:0;display:block}
.anfahrt-fakten{margin-top:16px;display:grid;gap:7px;color:var(--ink-soft);font-size:.95rem}
.anfahrt-fakten a{color:var(--lack);text-decoration:none;font-weight:700}
.anfahrt-fakten a:hover{text-decoration:underline}

/* Footer (solide, ueber dem Video) */
.seiten-footer{
  position:relative;z-index:10;
  background:var(--hell);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:22px clamp(18px,4vw,56px) 28px;
  border-top:1px solid rgba(22,24,28,.12);
  font-size:.88rem;color:var(--ink-soft);
}
.seiten-footer a{color:var(--ink);text-decoration:none}
.seiten-footer a:hover{color:var(--lack)}

/* ---------- Galerie (arbeiten.html) ---------- */
.galerie-seite{
  position:relative;z-index:10;
  max-width:1100px;margin:0 auto;
  padding:calc(68px + 40px) clamp(18px,4vw,56px) 60px;
}
.galerie-seite h1{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.02em;margin-bottom:14px;
}
.galerie-intro{color:var(--ink-soft);max-width:62ch;margin-bottom:12px}
.galerie-gruppe{margin-top:44px}
.galerie-gruppe h2{
  font-family:var(--font-display);font-weight:900;font-size:1.4rem;
  letter-spacing:-.01em;margin-bottom:16px;
}
.galerie-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.galerie-grid.viertel{grid-template-columns:repeat(4,1fr)}
.galerie-grid figure{
  background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 14px 40px -22px rgba(23,24,26,.25);
}
.galerie-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.galerie-grid figcaption{padding:10px 14px;font-size:.88rem;color:var(--ink-soft)}
.foto-slot{
  border:2px dashed rgba(22,24,28,.25);border-radius:14px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:16/10;color:var(--ink-soft);font-size:.92rem;padding:16px;
  background:rgba(255,255,255,.6);
}

/* ---------- Rechtsseiten ---------- */
.legal{position:relative;z-index:10;max-width:720px;margin:0 auto;padding:120px 24px 80px}

/* ---------- Mobile ---------- */
/* Tablet-Band: Desktop-Header greift noch, wird aber eng -> Marke/Nav straffen, kein Umbruch */
@media(min-width:768px) and (max-width:900px){
  .site-header{padding:0 16px}
  .hauptnav{gap:6px}
  .hauptnav a:not(.tel-pill){font-size:.84rem;padding:.4em .7em}
  .tel-pill{font-size:.84rem;padding:.5em 1em}
  .marke{white-space:nowrap;font-size:.98rem}
  .hauptnav a{white-space:nowrap}
}

@media(max-width:767px){
  .site-header{height:60px;padding:0 10px}
  .marke{font-size:.78rem;padding:.35em .5em}
  .hauptnav{gap:4px}
  .hauptnav a:not(.tel-pill){font-size:.72rem;padding:.4em .55em}
  .tel-pill{font-size:.74rem;padding:.5em .8em}
  .fluss{gap:46vh 0;padding-top:calc(60px + 24px)}
  .card,.card.rechts,.card.breit{width:100%;justify-self:stretch}
  .kontakt-grid{grid-template-columns:1fr}
  .galerie-grid,.galerie-grid.viertel{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
  .hauptnav a[data-nav]:not([href="#kontakt"]){display:none}
  .hauptnav a[href="arbeiten.html"]{display:none}
  /* Unterseiten-Nav (index.html#… ) genauso ausduennen, nur Kontakt + Telefon bleiben */
  .hauptnav a[href$="#leistungen"],.hauptnav a[href$="#bewertungen"]{display:none}
  .galerie-grid,.galerie-grid.viertel{grid-template-columns:1fr}
}

/* ---------- Reduced Motion ---------- */
@media(prefers-reduced-motion:reduce){
  .film-bg canvas{display:none}
  .film-statisch{display:block}
}

/* ---------- Galerie-Teaser — Bento mit Overlay-Bildunterschriften ---------- */
.teaser-grid{
  display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:1fr 1fr;
  gap:10px;min-height:clamp(300px,44vw,430px);
}
.teaser-item{
  position:relative;display:block;border-radius:12px;overflow:hidden;
  box-shadow:0 12px 32px -20px rgba(23,24,26,.5);
  transition:box-shadow .3s var(--ease);
}
.teaser-item.gross{grid-row:1 / span 2}
.teaser-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--ease);
}
.teaser-item::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(12,13,16,.74),rgba(12,13,16,0) 58%);
}
.teaser-cap{
  position:absolute;left:12px;bottom:11px;right:12px;z-index:1;
  font-size:.82rem;font-weight:700;color:#fff;
  display:inline-flex;align-items:center;gap:7px;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
.teaser-cap::before{
  content:"";width:7px;height:7px;border-radius:2px;background:var(--lack);
  flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.4);
}
.teaser-item:hover{box-shadow:0 20px 44px -20px rgba(23,24,26,.6)}
.teaser-item:hover img{transform:scale(1.06)}
.teaser-item:focus-visible{outline:3px solid var(--lack);outline-offset:3px}
@media(max-width:600px){
  .teaser-grid{grid-template-columns:1fr 1fr;grid-template-rows:none;min-height:0}
  .teaser-item{aspect-ratio:1/1}
  .teaser-item.gross{grid-column:1 / span 2;aspect-ratio:16/10;grid-row:auto}
}

/* ---------- Werkstatt — Intro + Feature-Kacheln mit Icon ---------- */
.werkstatt-text{color:var(--ink-soft);margin-bottom:18px}
.werkstatt-punkte{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.werkstatt-punkte li{
  display:flex;align-items:center;gap:12px;
  background:#fff;border-radius:12px;padding:14px 15px;
  box-shadow:0 8px 24px -16px rgba(23,24,26,.25);
  font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.4;
}
.wk-icon{
  flex:none;width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(154,27,41,.09);color:var(--lack);
}
.wk-icon svg{width:20px;height:20px}
@media(max-width:520px){
  .werkstatt-punkte{grid-template-columns:1fr}
}

/* ---------- FAQ ---------- */
.faq-liste{display:grid;gap:10px}
.faq-liste details{
  background:#fff;border-radius:12px;
  box-shadow:0 8px 24px -16px rgba(23,24,26,.25);
  overflow:hidden;
}
.faq-liste summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-weight:700;font-size:1rem;padding:14px 18px;
}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary::after{
  content:"+";font-family:var(--font-display);font-weight:900;font-size:1.3rem;color:var(--lack);
  transition:transform .3s var(--ease);flex:none;
}
.faq-liste details[open] summary::after{transform:rotate(45deg)}
.faq-liste details p{padding:0 18px 16px;color:var(--ink-soft);font-size:.95rem}
.faq-liste details a{color:var(--lack);font-weight:700}
.faq-liste summary:focus-visible{outline:3px solid var(--lack);outline-offset:-3px;border-radius:12px}

/* ---------- Einfahr-Animationen (nur transform/opacity) ---------- */
/* Anfangs-Verstecken nur wenn JS läuft (.js) — ohne JS bleibt alles sichtbar. */
.js [data-anim]{opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease);will-change:transform}
.js [data-anim="links"]{transform:translateX(-56px)}
.js [data-anim="rechts"]{transform:translateX(56px)}
.js [data-anim="hoch"]{transform:translateY(44px)}
[data-anim].sichtbar{opacity:1;transform:none}
/* Kinder staffeln sich nach */
.js [data-anim] :is(.leistung,.bewertung,.ablauf li,.faq-liste details,.teaser-grid a,.werkstatt-punkte li,.stat,.grund){
  opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
[data-anim].sichtbar :is(.leistung,.bewertung,.ablauf li,.faq-liste details,.teaser-grid a,.werkstatt-punkte li,.stat,.grund){
  opacity:1;transform:none;
}
[data-anim].sichtbar :is(.leistung,.bewertung,.ablauf li,.faq-liste details,.teaser-grid a,.werkstatt-punkte li,.stat,.grund):nth-child(2){transition-delay:.09s}
[data-anim].sichtbar :is(.leistung,.bewertung,.ablauf li,.faq-liste details,.teaser-grid a,.werkstatt-punkte li,.stat,.grund):nth-child(3){transition-delay:.18s}
[data-anim].sichtbar :is(.leistung,.bewertung,.ablauf li,.faq-liste details,.teaser-grid a,.werkstatt-punkte li,.stat,.grund):nth-child(4){transition-delay:.27s}
[data-anim].sichtbar :is(.leistung,.bewertung,.ablauf li,.faq-liste details,.teaser-grid a,.werkstatt-punkte li,.stat,.grund):nth-child(5){transition-delay:.36s}

@media(prefers-reduced-motion:reduce){
  [data-anim],[data-anim] *{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- Skip-Link ---------- */
.skip-link{
  position:fixed;top:8px;left:8px;z-index:100;
  background:var(--lack);color:#fff;font-weight:700;font-size:.92rem;
  padding:.6em 1em;border-radius:10px;text-decoration:none;
  box-shadow:0 8px 22px -8px rgba(154,27,41,.5);
  transform:translateY(-160%);transition:transform .25s var(--ease);
}
.skip-link:focus-visible{transform:none;outline:3px solid var(--ink);outline-offset:2px}

/* ---------- Hero: CTA-Gruppe, Ghost-CTA, Trust-Chips ---------- */
.cta-gruppe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-btn.ghost{
  background:transparent;color:var(--lack);
  box-shadow:inset 0 0 0 2px rgba(154,27,41,.35);
}
.cta-btn.ghost:hover{
  background:rgba(154,27,41,.06);color:var(--lack-tief);
  box-shadow:inset 0 0 0 2px var(--lack);transform:translateY(-2px);
}
.trust-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.trust-chips li{
  font-size:.82rem;font-weight:600;color:var(--ink-soft);
  background:rgba(22,24,28,.05);border:1px solid rgba(22,24,28,.08);
  border-radius:999px;padding:.42em .85em;display:flex;align-items:center;gap:.55em;
}
.trust-chips li::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--lack);flex:none}
/* Fokusring auf roten CTAs: dunkel statt rot → klar sichtbar gegen Button und Hintergrund */
.cta-btn:focus-visible,.tel-pill:focus-visible,.mobil-cta-btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* ---------- Mobile Schnellkontakt-Leiste ---------- */
.mobil-cta{display:none}
@media(max-width:767px){
  .mobil-cta{
    display:grid;grid-template-columns:1.15fr 1fr;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(247,248,249,.86);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid rgba(22,24,28,.1);
    box-shadow:0 -8px 24px -16px rgba(23,24,26,.4);
  }
  .mobil-cta-btn{
    display:flex;align-items:center;justify-content:center;gap:.5em;
    font-weight:700;font-size:.95rem;text-decoration:none;border-radius:12px;
    padding:.8em 1em;min-height:48px;transition:transform .2s var(--ease);
  }
  .mobil-cta-btn:active{transform:scale(.97)}
  .mobil-cta-btn.tel{background:var(--lack);color:#fff;box-shadow:0 3px 10px rgba(154,27,41,.28)}
  .mobil-cta-btn.anfrage{background:#fff;color:var(--lack);box-shadow:inset 0 0 0 2px rgba(154,27,41,.3)}
  /* Platz, damit die Leiste Footer-Inhalt nicht verdeckt */
  .seiten-footer{padding-bottom:calc(28px + 70px + env(safe-area-inset-bottom))}
}

/* ---------- Formular-Validierung ---------- */
.feld-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular-status{
  font-size:.95rem;font-weight:600;color:var(--lack-tief);
  background:rgba(154,27,41,.09);border:1px solid rgba(154,27,41,.25);
  border-radius:10px;padding:11px 14px;
}
.feld-fehler{
  display:flex;align-items:flex-start;gap:.4em;
  font-size:.85rem;font-weight:600;color:var(--lack-tief);margin-top:2px;
}
.feld-fehler::before{content:"\26A0";flex:none;line-height:1.5}
.feld-fehler[hidden]{display:none}
.feld--fehler input,.feld--fehler textarea{
  border-color:var(--lack);box-shadow:0 0 0 3px rgba(154,27,41,.12);
}

/* ---------- Karte: Klick-zum-Laden-Facade (Performance + Datenschutz) ---------- */
.karte-platzhalter{
  min-height:300px;display:flex;align-items:center;justify-content:center;padding:20px;
  background:
    radial-gradient(circle at 28% 26%, rgba(154,27,41,.07), transparent 58%),
    linear-gradient(180deg,#EDEFF1,#E2E5E9);
}
.karte-laden-btn{
  display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  font:inherit;color:var(--ink);cursor:pointer;max-width:90%;
  background:rgba(255,255,255,.92);border:1px solid rgba(22,24,28,.12);
  border-radius:14px;padding:20px 26px;
  box-shadow:0 12px 30px -18px rgba(23,24,26,.4);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.karte-laden-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -20px rgba(23,24,26,.5)}
.karte-laden-btn:active{transform:scale(.98)}
.karte-laden-btn:focus-visible{outline:3px solid var(--lack);outline-offset:3px}
.karte-laden-btn svg{color:var(--lack)}
.karte-laden-btn strong{font-family:var(--font-display);font-size:1.05rem;letter-spacing:-.01em}
.karte-laden-btn span{font-size:.88rem;color:var(--ink-soft);line-height:1.4}
.karte-laden-btn .karte-datenschutz{font-size:.76rem;opacity:.85;max-width:34ch}

/* ---------- Druck: sauberes Blatt (Kontakt/Anfahrt/Impressum werden oft gedruckt) ---------- */
@media print{
  html,body{background:#fff !important;color:#000 !important}
  /* Deko + Interaktives raus */
  .film-bg,.site-header,.skip-link,.mobil-cta,.karte-rahmen,
  .cta-gruppe,.mehr-link,#kontakt-formular,.teaser-grid{display:none !important}
  /* Fluss statt Riesenlücken */
  .fluss{display:block !important;max-width:none !important;margin:0 !important;padding:0 !important}
  .card,.card.rechts,.card.breit{
    width:100% !important;max-width:none !important;justify-self:stretch !important;
    background:#fff !important;box-shadow:none !important;
    border-top:2px solid #000;border-radius:0;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    padding:0 0 6px;margin:0 0 18px !important;page-break-inside:avoid;text-align:left;
  }
  /* Reveals im Druck immer sichtbar (IO könnte unten nicht gefeuert haben) */
  [data-anim],[data-anim] *{opacity:1 !important;transform:none !important}
  /* Farben auf Druck-Schwarz */
  .card h2,.intro h1,.intro h1 .rot,.eyebrow,.stat-zahl,.leistung h3,.marke{color:#000 !important}
  .leistung{box-shadow:none !important;border:1px solid #999}
  .leistung.akzent{background:#fff !important}
  .leistung.akzent h3,.leistung.akzent p{color:#000 !important}
  .beispiel-hinweis{background:#fff !important;border-left:2px solid #000;color:#000 !important}
  .trust-chips li{background:#fff !important;border:1px solid #999;color:#000 !important}
  a{color:#000 !important;text-decoration:underline}
  /* FAQ-Antworten aufklappen, Marker weg */
  details:not([open]) > :not(summary){display:block !important}
  .faq-liste summary::after{display:none}
  .faq-liste details{box-shadow:none !important;border:1px solid #999}
  /* Rechts-/Galerie-Seiten: kein Header-Platzhalter oben */
  .legal,.galerie-seite{padding-top:14px !important}
  .seiten-footer{background:#fff !important;color:#000 !important;border-top:1px solid #000}
  .seiten-footer a{color:#000 !important}
  @page{margin:1.6cm}
}

/* ---------- Reduced Motion (global): alle Transitions/Animationen neutralisieren ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ========== v5B Overrides: Ping-Pong-Loop, abgedunkelt (Dark-Look) ========== */
body{background:#141518}
.film-bg{background:#141518}
.film-bg video{width:100%;height:100%;object-fit:cover;display:block}
.film-abdunkler{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(12,13,16,.62) 0%,rgba(12,13,16,.42) 45%,rgba(12,13,16,.6) 100%),
    rgba(12,13,16,.18);
}
.film-bg.statisch .film-statisch{filter:brightness(.55)}

/* Header bekommt beim Scrollen eine dunkle Leiste — sonst kollidieren die Pills mit den hellen Cards */
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,17,20,.92),rgba(16,17,20,.72));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 28px -18px rgba(0,0,0,.6);
  opacity:0;transition:opacity .3s;
}
.site-header.gescrollt::before{opacity:1}

/* Header-Pills auf dunklem Grund */
.marke{background:rgba(20,21,24,.55);color:#F2F3F5}
.marke span{color:#E4535D}
.hauptnav a:not(.tel-pill){background:rgba(20,21,24,.55);color:#F2F3F5}
.hauptnav a:not(.tel-pill):hover{color:#E4535D}

/* Cards bleiben hell = starker Kontrast auf dunklem Video */
.card{background:rgba(249,250,251,.94)}

/* Footer dunkel */
.seiten-footer{background:#141518;color:#9AA0A8;border-top:1px solid rgba(255,255,255,.12)}
.seiten-footer a{color:#F2F3F5}
.seiten-footer a:hover{color:#E4535D}

/* Galerie-/Rechtsseiten auf dunklem Body: helle Flaeche unterlegen */
.galerie-seite,.legal{background:var(--hell);border-radius:0}

/* ========== Google-Bewertungs-Zusammenfassung (echt: 4,9 / 86) ========== */
.google-bewertung{
  display:flex;align-items:center;gap:clamp(14px,2.5vw,22px);
  text-decoration:none;color:var(--ink);
  background:#fff;border-radius:14px;padding:16px 20px;margin-bottom:16px;
  box-shadow:0 10px 30px -18px rgba(23,24,26,.35);
  border:1px solid rgba(22,24,28,.07);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.google-bewertung:hover{transform:translateY(-2px);box-shadow:0 18px 40px -20px rgba(23,24,26,.45)}
.google-bewertung .gb-note{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.gb-zahl{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.4rem,5vw,3.1rem);line-height:.9;color:var(--ink);
  font-variant-numeric:tabular-nums;flex:none;
}
.gb-rechts{display:flex;flex-direction:column;gap:3px;min-width:0}
.gb-sterne{color:#E8A517;font-size:1.15rem;letter-spacing:.14em;line-height:1}
.gb-quelle{
  display:flex;align-items:center;gap:6px;
  font-size:.9rem;font-weight:600;color:var(--ink-soft);
}
.gb-quelle svg{flex:none}
.google-bewertung::after{
  content:"→";margin-left:auto;flex:none;
  font-family:var(--font-display);font-weight:900;font-size:1.3rem;color:var(--lack);
  transition:transform .25s var(--ease);
}
.google-bewertung:hover::after{transform:translateX(4px)}

/* ========== Warum: Gründe-Raster statt abstrakter Zahlen ========== */
.warum-lead{color:var(--ink-soft);margin-bottom:20px;font-size:1.02rem}
.warum-gruende{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grund{
  background:#fff;border-radius:12px;padding:16px 18px;
  box-shadow:0 8px 24px -16px rgba(23,24,26,.25);
  border-left:3px solid var(--lack);
}
.grund h3{
  font-family:var(--font-display);font-weight:900;font-size:1.02rem;
  letter-spacing:-.01em;margin-bottom:5px;
}
.grund p{color:var(--ink-soft);font-size:.92rem;line-height:1.55}
.warum-beleg{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:18px;font-size:.98rem;color:var(--ink-soft);
}
.warum-beleg strong{color:var(--ink)}
.beleg-sterne{color:#E8A517;font-size:1.05rem;letter-spacing:.1em}

/* ========== Öffnungszeiten (mit Live-Status) ========== */
.oeffnungszeiten{
  background:#fff;border-radius:14px;padding:18px 20px;margin-top:16px;
  box-shadow:0 10px 30px -18px rgba(23,24,26,.35);
  border:1px solid rgba(22,24,28,.07);
}
.oz-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(22,24,28,.09);
}
.oz-kopf h3{font-family:var(--font-display);font-weight:900;font-size:1.15rem;letter-spacing:-.01em}
.oz-status{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.85rem;font-weight:700;border-radius:999px;padding:.32em .8em;
  background:rgba(22,24,28,.06);color:var(--ink-soft);
}
.oz-punkt{width:9px;height:9px;border-radius:50%;background:var(--ink-soft);flex:none}
.oz-status.ist-offen{background:rgba(23,114,69,.12);color:var(--offen)}
.oz-status.ist-offen .oz-punkt{background:var(--offen);box-shadow:0 0 0 0 rgba(23,114,69,.5);animation:oz-puls 2.4s var(--ease) infinite}
.oz-status.ist-zu{background:rgba(154,27,41,.09);color:var(--lack-tief)}
.oz-status.ist-zu .oz-punkt{background:var(--lack)}
@keyframes oz-puls{0%{box-shadow:0 0 0 0 rgba(23,114,69,.5)}70%{box-shadow:0 0 0 7px rgba(23,114,69,0)}100%{box-shadow:0 0 0 0 rgba(23,114,69,0)}}
.oz-tabelle{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.oz-tabelle th,.oz-tabelle td{padding:6px 0;text-align:left;font-size:.95rem;font-weight:500}
.oz-tabelle th{color:var(--ink);font-weight:600}
.oz-tabelle td{text-align:right;color:var(--ink-soft)}
.oz-tabelle tr.oz-zu td{color:rgba(78,85,94,.7)}
.oz-tabelle tr.oz-heute th,.oz-tabelle tr.oz-heute td{color:var(--lack);font-weight:800}
.oz-tabelle tr.oz-heute{position:relative}
.oz-tabelle tr.oz-heute th{position:relative;padding-left:16px}
.oz-tabelle tr.oz-heute th::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:2px;background:var(--lack);
}
.oz-hinweis{margin-top:12px;padding-top:12px;border-top:1px solid rgba(22,24,28,.09);font-size:.86rem;color:var(--ink-soft)}

@media(max-width:520px){
  .warum-gruende{grid-template-columns:1fr}
  .google-bewertung{gap:14px;padding:14px 16px}
}
@media(prefers-reduced-motion:reduce){
  .oz-status.ist-offen .oz-punkt{animation:none}
}

/* ---------- Vorher/Nachher-Regler (Smart Repair, arbeiten.html) ---------- */
.vergleich-figur{
  background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 14px 40px -22px rgba(23,24,26,.25);
}
.vergleich-figur figcaption{padding:10px 14px;font-size:.88rem;color:var(--ink-soft)}
.vergleich{--pos:50%;position:relative;aspect-ratio:16/10;overflow:hidden}
.vergleich img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vergleich-nachher{clip-path:inset(0 0 0 var(--pos))}
.vergleich-tag{
  position:absolute;top:12px;z-index:2;pointer-events:none;
  font-weight:700;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;background:rgba(22,24,28,.62);padding:.32em .8em;border-radius:999px;
}
.vergleich-tag.vorher{left:12px}
.vergleich-tag.nachher{right:12px}
.vergleich-regler{
  position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:pan-y;
}
.vergleich-griff{
  position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;
  background:#fff;z-index:2;pointer-events:none;
  box-shadow:0 0 14px rgba(0,0,0,.45);
}
.vergleich-griff::after{
  content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:var(--lack) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E") center/20px 20px no-repeat;
  border:2px solid #fff;box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.vergleich:has(.vergleich-regler:focus-visible){outline:3px solid #fff;outline-offset:-6px}

/* ---------- Galerie-Hover (arbeiten.html): dezenter Bild-Zoom, wie Kabinen-Bento ---------- */
.galerie-grid img{transition:transform .55s var(--ease)}
.galerie-grid figure:hover img{transform:scale(1.045)}
@media(prefers-reduced-motion:reduce){
  .galerie-grid img{transition:none}
  .galerie-grid figure:hover img{transform:none}
}

/* ---------- Kontakt-Subline (Parität Büttner/Lepp) ---------- */
.kontakt-sub{max-width:62ch;color:var(--ink-soft);font-size:1.02rem;margin:-4px 0 24px}