/* =====================================================================
   GMS Auto Detailing Großräschen — stil.css (Besitzer kleim-bau)
   Grundlage: Farben, Schrift, Raster, Bausteine, Bewegung. KEINE Breiten-
   abfragen: Handy steht in handy.css (kleim-mobile), Desktop ab 1200 in
   desktop.css (kleim-desktop). Ohne Abfrage ist jede Regel hier zugleich
   die schmale Fassung, deshalb brechen Raster per auto-fit/flex-wrap um.

   Palette (Quellen in inhalt/auftrag.json -> markenfarben):
   Carbon #171725 = Grund hinter dem Logo (Facebook-Profilbild);
   Rot #B11F22 und Grafit #444446 = Paketflyer 2024; Lack/Silber kühl
   abgeleitet aus den weißen Studiowänden der Referenzfotos.
   Kontrast gerechnet: Weiß auf Rot 6,8:1 · Rot auf Lack 6,2:1 / auf Silber
   5,4:1 · Carbon auf Lack 16,1:1 · Grafit auf Lack 8,8:1 / Silber 7,7:1 ·
   Weiß auf Carbon 17,7:1 · Nebel #C9CED6 auf Carbon 11,2:1 · Stahl #B7C4D6
   auf Carbon 10,3:1; Kleintext auf Rot #FFD9D6 5,2:1.
   Schrift: Anybody variabel (wdth 125) Überschriften, Instrument Sans Text.
   ===================================================================== */

@font-face{font-family:'Anybody';src:url(/assets/fonts/anybody-var.woff2) format('woff2');
  font-weight:100 900;font-stretch:50% 150%;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(/assets/fonts/instrument-sans-var.woff2) format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}

:root{
  color-scheme:only light;
  --lack:#F3F4F6;          /* Seitengrund, kühles Lackweiß */
  --weiss:#FFFFFF;
  --silber:#E2E5EA;        /* getönte Sektionsfläche */
  --silber-linie:#CDD2D9;
  --carbon:#171725;        /* Logo-Grund: Schrift, dunkle Bänder, Fuß */
  --carbon-2:#262636;      /* Kacheln/Linien auf Carbon */
  --rot:#B11F22;           /* Flyerrot: Handlung, ein Band */
  --rot-tief:#761316;      /* gedrückt/überfahren (abgeleitet) */
  --grafit:#444446;        /* Nebentext auf Hell */
  --nebel:#C9CED6;         /* Nebentext auf Carbon */
  --stahl:#B7C4D6;         /* Kicker/Akzent auf Carbon (abgeleitet, kühl) */
  --rose-hell:#FFD9D6;     /* Kleintext auf Rot */
  --linie:rgba(23,23,37,.13);
  --linie-hell:rgba(255,255,255,.16);
  --kopf:'Anybody','Arial Narrow',Arial,sans-serif;
  --text:'Instrument Sans','Segoe UI',Arial,sans-serif;
  --wrapw:1200px;
  --sp:clamp(20px,4.6vw,56px);
  --kopfh:73px;            /* .kopf-in 72 + 1 Rand; kleim-mobile/-desktop messen nach */
  --abst:clamp(64px,8vw,120px);
  --rad:6px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--kopfh)}
body{margin:0;background:var(--lack);color:var(--carbon);font-family:var(--text);
  font-size:17px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
body.ist-starr{overflow:hidden}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:var(--rot);text-underline-offset:.2em}
a:hover{color:var(--rot-tief)}
h1,h2,h3{font-family:var(--kopf);font-stretch:125%;font-weight:530;line-height:1.08;
  letter-spacing:-.015em;margin:0;color:inherit;text-wrap:balance}
h1{font-size:clamp(36px,5.4vw,76px)}
h2{font-size:clamp(28px,3.8vw,50px)}
h3{font-size:clamp(19px,1.7vw,22px);font-weight:600;font-stretch:115%}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
figure,blockquote{margin:0}
:focus-visible{outline:2px solid var(--rot);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:9000;
  background:var(--weiss);padding:10px 14px}
/* Kurzfassung: Grundregel VOR jeder Breitenabfrage (handy.css/desktop.css) */
.m-only.m-only{display:none}   /* doppelt: einfach verliert gegen Bausteinregeln */

.wrap{width:min(var(--wrapw),100% - 2*var(--sp));margin-inline:auto}
.sek{padding-block:var(--abst);position:relative}
.kicker{display:flex;align-items:center;gap:12px;font-family:var(--kopf);font-stretch:112%;
  font-weight:560;font-size:15px;letter-spacing:.01em;color:var(--rot);margin-bottom:16px}
.kicker::before{content:"";flex:0 0 auto;width:28px;height:2px;background:currentColor}
.dunkel{background:var(--carbon);color:var(--weiss)}
.dunkel .kicker{color:var(--stahl)}
.marke-flaeche{background:var(--rot);color:var(--weiss)}
.marke-flaeche .kicker{color:var(--rose-hell)}
.dunkel a:not(.knopf),.marke-flaeche a:not(.knopf){color:var(--weiss)}

/* ---------------- Knöpfe ----------------
   Eine Familie für Kopf, Held, Pakete, Bodenleiste, Kontakt und Modale.
   Rahmen ist immer 1.5px (auch bei knopf-voll, dort in Knopffarbe), damit
   alle Varianten einer Reihe gleich hoch sind und beim Hover nichts springt.
   Hover ändert nur Farben plus Lichtkante (::before), nie Rahmen/Padding.
   ::after bleibt frei für die Druckwelle in desktop.css. */
.knopf{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 22px;border-radius:var(--rad);border:1.5px solid transparent;font-family:var(--text);
  font-size:16px;font-weight:600;line-height:1.2;letter-spacing:.005em;text-decoration:none;cursor:pointer;white-space:nowrap;
  --glanz:rgba(255,255,255,.34)}
.knopf svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.knopf::before{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,var(--glanz) 50%,transparent 68%) no-repeat;
  background-size:260% 100%;background-position:130% 0;transition:background-position .75s var(--zug,ease)}
.knopf:hover::before{background-position:-30% 0}
.knopf .pfeil{width:16px;height:16px;margin-right:-2px;transition:translate .45s cubic-bezier(.16,1,.3,1) .04s}
.knopf:hover .pfeil,.knopf:focus-visible .pfeil{translate:4px 0}
.knopf-voll{background:var(--rot);color:var(--weiss);border-color:var(--rot)}
.knopf-voll:hover{background:var(--rot-tief);border-color:var(--rot-tief);color:var(--weiss)}
.knopf-rand{background:transparent;color:var(--carbon);border-color:var(--carbon);--glanz:rgba(255,255,255,.22)}
.knopf-rand:hover{background:var(--carbon);color:var(--weiss)}
.knopf-hell{background:var(--weiss);color:var(--carbon);border-color:var(--weiss);--glanz:rgba(23,23,37,.09)}
.knopf-hell:hover{background:var(--silber);border-color:var(--silber);color:var(--carbon)}
.knopf,.kachel,.weg,.wegkarte,.modal-zu,[data-modal]{-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;transition:transform .12s ease,background-color .18s ease,border-color .18s ease,color .18s ease}
.knopf:active,.kachel:active,.weg:active,.wegkarte:active,.modal-zu:active,[data-modal]:active{
  transform:translateY(1px) scale(.97)}
.knopf-voll:active{background:var(--rot-tief);border-color:var(--rot-tief)}
.knopf-rand:active,.knopf-hell:active{background:var(--silber);border-color:var(--silber);color:var(--carbon)}
/* Beim Einblenden streicht die Lichtkante einmal über den Knopf */
html.js .knopf.rv.in::before,html.js .rv.in .knopf::before{animation:glanzzug 1.1s var(--zug,ease) calc(var(--d,0ms) + .5s) backwards}
@keyframes glanzzug{from{background-position:130% 0}to{background-position:-30% 0}}

/* ---------------- Kopfleiste ---------------- */
.kopf{position:sticky;top:0;z-index:50;background:var(--lack);border-bottom:1px solid var(--linie)}
.kopf-in{min-height:72px;display:flex;align-items:center;gap:clamp(16px,3.6vw,60px)}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--carbon);flex:0 0 auto}
.marke:hover{color:var(--carbon)}
.marke-gms{font-family:var(--kopf);font-stretch:150%;font-weight:700;font-size:28px;letter-spacing:-.02em;line-height:1}
.marke-zeile{font-size:12.5px;line-height:1.2;color:var(--grafit);border-left:2px solid var(--rot);padding-left:10px}
.marke-logo,.marke-logo img{height:40px;width:auto}
.nav{display:flex;gap:clamp(14px,2vw,30px);margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--carbon);text-decoration:none;font-weight:500;font-size:16px;padding-block:6px;
  border-bottom:2px solid transparent}
.nav a:hover,.nav a.hier{border-bottom-color:var(--rot)}
.kopf-akt{display:flex;gap:10px;flex:0 0 auto}
.menue-striche{width:16px;height:10px;border-block:2px solid currentColor;position:relative}
.menue-striche::after{content:"";position:absolute;left:0;right:0;top:2px;height:2px;background:currentColor}

/* ---------------- Held ---------------- */
.held{position:relative;min-height:calc(100svh - var(--kopfh));display:flex;flex-direction:column;
  justify-content:flex-end;background:var(--carbon);color:var(--weiss);overflow:hidden;isolation:isolate}
.held-foto{position:absolute;inset:0;z-index:-2}
.held-foto picture,.held-foto img{width:100%;height:100%;object-fit:cover}
.held::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(23,23,37,.88) 0%,rgba(23,23,37,.62) 48%,rgba(23,23,37,.25) 100%),
             linear-gradient(0deg,rgba(23,23,37,.75) 0%,rgba(23,23,37,0) 45%)}
.held-licht{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);
  transform:translateX(-110%)}
.held-in{padding-block:clamp(40px,7vw,96px) 28px;max-width:1000px}
.held .kicker{color:#DCE4EE;text-shadow:0 1px 14px rgba(23,23,37,.55)}
.held h1{margin-bottom:22px}
.held-satz{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:#E7E9EE;max-width:46ch;margin-bottom:28px}
.held-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.held-anker{display:flex;flex-wrap:wrap;gap:10px clamp(18px,3vw,44px);padding-block:20px 26px;
  border-top:1px solid var(--linie-hell);font-size:15.5px;color:var(--nebel);margin-top:clamp(28px,5vw,56px)}
.held-anker b{font-family:var(--kopf);font-stretch:125%;font-weight:640;color:var(--weiss);font-size:19px;margin-right:4px}
.offen-zeile{display:inline-flex;align-items:center;gap:8px}
.offen-zeichen{width:14px;height:14px;flex:0 0 auto;border-radius:50%;border:2px solid currentColor;border-top-color:transparent}
.ist-offen .offen-zeichen{color:var(--weiss);animation:polierkreis 2.6s linear infinite}
@keyframes polierkreis{to{transform:rotate(360deg)}}

/* ---------------- Pakete: Glanzstufen-Leiter ---------------- */
.pakete{background:var(--silber)}
.pakete-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 48px;margin-bottom:40px}
.pakete-kopf .kicker{flex:1 0 100%;margin-bottom:0}
.pakete-kopf h2{flex:1 1 520px}
.pakete-satz{flex:0 1 360px;color:var(--grafit)}
.stufen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px;align-items:stretch;margin-bottom:34px}   /* stretch + Stufenabstand oben = saubere Leiter, unten buendig */
.stufe{position:relative;overflow:hidden;background:var(--weiss);border-radius:var(--rad);padding:20px 18px 22px;
  border-top:4px solid var(--carbon)}
.stufe.s1{margin-top:96px}.stufe.s2{margin-top:72px}.stufe.s3{margin-top:48px}.stufe.s4{margin-top:24px}
.stufe.s5{background:var(--carbon);color:var(--weiss);border-top-color:var(--rot)}
.stufe::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%)}
.stufe.s5::after{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%)}
.stufe-name{font-family:var(--kopf);font-stretch:125%;font-weight:620;font-size:22px}
.stufe-preis{font-family:var(--kopf);font-stretch:110%;font-weight:600;font-size:clamp(24px,2.2vw,30px);color:var(--rot);margin-top:6px;
  font-variant-numeric:tabular-nums}
.stufe.s5 .stufe-preis{color:var(--stahl)}
.stufe-dauer{font-size:14.5px;color:var(--grafit);margin-bottom:14px}
.stufe.s5 .stufe-dauer{color:var(--nebel)}
.stufe ul{border-top:1px solid var(--linie);padding-top:12px;display:grid;gap:7px;font-size:15px;line-height:1.4}
.stufe.s5 ul{border-top-color:var(--linie-hell)}
.stufe li li,.stufe ul li{padding-left:16px;position:relative}
.stufe ul li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:2px;background:var(--rot)}
.stufen-kurz{margin-bottom:26px}
.stufen-kurz li{display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:12px 0;border-bottom:1px solid var(--silber-linie)}
.stufen-kurz b{font-family:var(--kopf);font-stretch:125%;font-weight:620;font-size:19px}
.stufen-kurz span{grid-column:1;font-size:14.5px;color:var(--grafit)}
.stufen-kurz em{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-weight:600;color:var(--rot);font-size:18px;text-align:right}

/* ---------------- Leistungen (Start) ---------------- */
.leistungen{background:var(--weiss)}
.leistungen-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(28px,5vw,72px);align-items:stretch}
.leistungen-foto{min-height:320px;border-radius:var(--rad);overflow:hidden;background:var(--silber)}
.leistungen-foto picture,.leistungen-foto img{width:100%;height:100%;object-fit:cover}
.leistungen-text h2{margin-bottom:28px}
.leist-drei{display:grid;grid-template-columns:min-content minmax(0,1fr);column-gap:24px;row-gap:0;margin-bottom:24px}
.leist{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:4px;padding:18px 0;border-top:1px solid var(--linie)}
.leist:last-child{border-bottom:1px solid var(--linie)}
.leist p{color:var(--grafit)}
.leist h3{hyphens:manual;-webkit-hyphens:manual;min-width:0}
.marken-zeile{font-size:15px;color:var(--grafit);margin-bottom:22px}

/* ---------------- Referenzen (Start) ---------------- */
.ref-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 48px;margin-bottom:36px}
.ref-kopf .kicker{flex:1 0 100%;margin-bottom:0}
.ref-satz{flex:0 1 380px;color:var(--nebel)}
.ref-raster{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:34px}
.ref{flex:1 1 300px;min-width:0}
.ref.r1{flex:2 1 560px}
.ref.r2,.ref.r4{margin-top:clamp(0px,3vw,44px)}
.ref picture,.ref img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rad);background:var(--carbon-2)}
.ref.r1 picture,.ref.r1 img{aspect-ratio:16/10}
.ref-name{margin-top:10px;font-family:var(--kopf);font-stretch:118%;font-weight:600;font-size:17px}
.ref-name span{display:block;font-family:var(--text);font-weight:400;font-size:14.5px;color:var(--nebel)}
.ref a{color:inherit;text-decoration:none;display:block}

/* ---------------- Vorteile (Rot-Band) ---------------- */
.vorteile-in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,5vw,80px)}
.vorteile-zahl{font-family:var(--kopf);font-stretch:150%;font-weight:300;font-size:clamp(140px,19vw,280px);line-height:.8;
  color:rgba(255,255,255,.9);letter-spacing:-.04em;flex:0 0 auto}
.vorteile-text{flex:1 1 460px}
.vorteile-text h2{margin-bottom:28px}
.vorteile-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 28px}
.vorteile-liste li{padding:14px 0;border-top:1px solid rgba(255,255,255,.28)}
.vorteile-liste b{display:block;font-family:var(--kopf);font-stretch:118%;font-weight:600;font-size:19px}
.vorteile-liste span{color:var(--rose-hell);font-size:15.5px}

/* ---------------- Stimmen ---------------- */
.ref-insta{margin-top:20px;font-size:15.5px}
.stimmen{background:var(--silber)}
.stimmen-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px;margin-bottom:36px}
.stimmen-kopf .kicker{flex:1 0 100%;margin-bottom:0}
.stimmen-note{display:flex;align-items:baseline;gap:10px;font-size:15.5px;color:var(--grafit)}
.stimmen-note b{font-family:var(--kopf);font-stretch:125%;font-weight:620;font-size:44px;color:var(--carbon);line-height:1}
.sterne{color:var(--rot);letter-spacing:2px;font-size:18px}
.stimmen-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;align-items:start}
.stimme{background:var(--weiss);border-radius:var(--rad);padding:26px 24px 22px;position:relative}
.stimme::before{content:"";position:absolute;right:20px;top:22px;width:28px;height:22px;opacity:.9;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath fill='%23B11F22' d='M0 24V13.6C0 5.9 3.9 1.4 11.6 0l1.3 3.2C8.9 4.4 7 6.9 6.8 10.6H12V24zm17 0V13.6C17 5.9 20.9 1.4 28.6 0l1.3 3.2c-4 1.2-5.9 3.7-6.1 7.4H29V24z'/%3E%3C/svg%3E") no-repeat center/contain}
.stimme blockquote{font-size:17.5px;line-height:1.5;padding-right:30px}
.stimme figcaption{margin-top:14px;font-size:14.5px;color:var(--grafit);font-weight:600}

/* ---------------- Besuch ---------------- */
.besuch{background:var(--weiss)}
.besuch-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(28px,5vw,72px);align-items:stretch}
.besuch-text h2{margin-bottom:26px}
.zeiten-tafel{display:grid;margin-bottom:18px;max-width:460px}
.zeiten-tafel div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--linie)}
.zeiten-tafel dt{font-weight:500}
.zeiten-tafel dd{font-variant-numeric:tabular-nums}
.zeiten-tafel .ist-heute{font-weight:700}
.zeiten-tafel .ist-heute dt::after{content:" · heute";color:var(--rot);font-weight:600}
.dunkel .zeiten-tafel div{border-bottom-color:var(--linie-hell)}
.dunkel .zeiten-tafel .ist-heute dt::after{color:var(--stahl)}
.besuch-satz{color:var(--grafit);margin-bottom:22px}
.besuch-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.besuch-lage,.lage-skizze{background:var(--silber);border-radius:var(--rad);overflow:hidden;align-self:center}
.besuch-lage img,.lage-skizze img{width:100%;height:auto}

/* ---------------- Unterseiten ---------------- */
.seitenkopf{padding-block:clamp(48px,7vw,104px);background:var(--lack)}
.seitenkopf-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(28px,5vw,72px);align-items:center}
.seitenkopf h1{margin-bottom:20px}
.seitenkopf-satz{font-size:clamp(17px,1.4vw,19px);color:var(--grafit);max-width:52ch;margin-bottom:26px}
.dunkel .seitenkopf-satz{color:var(--nebel)}
.seitenkopf.dunkel{background:var(--carbon)}
.kopf-foto{border-radius:var(--rad);overflow:hidden;background:var(--silber);min-height:280px}
.kopf-foto picture,.kopf-foto img{width:100%;height:100%;object-fit:cover}
.seitenkopf .offen-zeile{color:var(--grafit);font-size:15.5px}
.seitenkopf .ist-offen .offen-zeichen{color:var(--rot)}

.leist-gruppen{background:var(--weiss)}
.leist-gruppen-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:18px}
.lgruppe{background:var(--lack);border-radius:var(--rad);padding:clamp(24px,3vw,40px);position:relative}
.lgruppe-nr{font-family:var(--kopf);font-stretch:150%;font-weight:300;font-size:56px;line-height:1;color:var(--rot);margin-bottom:12px}
.lgruppe h2{font-size:clamp(24px,2.4vw,32px);margin-bottom:14px}
.lgruppe>p{color:var(--grafit);margin-bottom:18px}
.lliste{display:grid;gap:8px}
.lliste li{padding-left:18px;position:relative}
.lliste li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--rot)}
.lgruppe-anlass{background:var(--carbon);color:var(--weiss)}
.lgruppe-anlass>p{color:var(--nebel)}
.lgruppe-anlass .lgruppe-nr{color:var(--stahl)}
.lgruppe-anlass .lliste li::before{background:var(--stahl)}

.marken-in h2{margin-bottom:28px}
.marken-liste{display:flex;flex-wrap:wrap;gap:12px 14px;margin-bottom:32px}
.marken-liste li{font-family:var(--kopf);font-stretch:130%;font-weight:560;font-size:clamp(20px,2.4vw,30px);
  padding:14px 22px;border:1px solid var(--linie-hell);border-radius:var(--rad);background:var(--carbon-2)}

.paket-karten{background:var(--weiss)}
.paketliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.paket{background:var(--lack);border-radius:var(--rad);padding:24px 22px;border-top:4px solid var(--carbon);position:relative;overflow:hidden}
.paket.p5{background:var(--carbon);color:var(--weiss);border-top-color:var(--rot)}
.paket-kopf{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--linie)}
.paket.p5 .paket-kopf{border-bottom-color:var(--linie-hell)}
.paket h2{font-size:26px}
.paket-preis{font-family:var(--kopf);font-stretch:110%;font-weight:600;font-size:30px;color:var(--rot);margin-top:6px}
.paket.p5 .paket-preis{color:var(--stahl)}
.paket-dauer{font-size:14.5px;color:var(--grafit)}
.paket.p5 .paket-dauer{color:var(--nebel)}
.paket ul{display:grid;gap:8px;font-size:15.5px;line-height:1.45}
.paket ul li{padding-left:16px;position:relative}
.paket ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;background:var(--rot)}
.paket.p5 ul li::before{background:var(--stahl)}
.vergleich h2{margin-bottom:28px}
.vergleich-tafel{overflow-x:auto}
.vergleich table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:720px}
.vergleich th,.vergleich td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--linie-hell);vertical-align:top}
.vergleich thead th{font-family:var(--kopf);font-stretch:125%;font-weight:600;font-size:18px;color:var(--weiss)}
.vergleich tbody th{color:var(--nebel);font-weight:500}
.vergleich-preis td{font-family:var(--kopf);font-stretch:110%;font-weight:600;font-size:19px;color:var(--stahl)}
.paket-schluss-in{display:flex;flex-wrap:wrap;align-items:center;gap:20px 48px}
.paket-schluss-in h2{flex:1 1 520px}
.paket-schluss-in p{flex:1 1 320px;color:var(--rose-hell)}

.projekte{background:var(--weiss)}
.projekt-raster{display:flex;flex-wrap:wrap;gap:22px 16px}
.projekt{flex:1 1 320px;min-width:0}
.projekt.pr-gross{flex:2 1 600px}
.projekt picture,.projekt img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rad);background:var(--silber)}
.projekt.pr-gross picture,.projekt.pr-gross img{aspect-ratio:16/10}
.projekt a{display:block;color:inherit;text-decoration:none}
.projekt-text{padding-top:12px}
.projekt-text h2{font-size:20px;font-stretch:118%;margin-bottom:4px}
.projekt-text p{font-size:15.5px;color:var(--grafit);line-height:1.5}
.weitere{background:var(--silber)}
.weitere-in h2{margin-bottom:24px}
.weitere-liste{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.weitere-liste li{padding:9px 14px;border-radius:var(--rad);background:var(--weiss);font-size:15.5px;font-weight:500}

.wege{background:var(--weiss)}
.wege-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.wegkarte{display:flex;flex-direction:column;gap:4px;padding:24px 22px;border-radius:var(--rad);background:var(--lack);
  color:var(--carbon);text-decoration:none;min-height:150px;justify-content:flex-end}
.wegkarte:hover{background:var(--silber);color:var(--carbon)}
.wegkarte b{font-family:var(--kopf);font-stretch:112%;font-weight:600;font-size:19px;overflow-wrap:anywhere}
.wegkarte small{color:var(--grafit);font-size:14.5px}
.wk-art{font-size:14px;font-weight:600;color:var(--rot);margin-bottom:auto}
.wk-tel{background:var(--rot);color:var(--weiss)}
.wk-tel:hover{background:var(--rot-tief);color:var(--weiss)}
.wk-tel small,.wk-tel .wk-art{color:var(--rose-hell)}
.lage-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(28px,5vw,72px);align-items:stretch}
.lage-text h2{margin-bottom:24px}
.lage .lage-skizze{background:var(--carbon-2)}

/* ---------------- Grafik-Beiwerk ---------------- */
.pakete,.referenzen{overflow:hidden}
.pakete>.wrap,.referenzen>.wrap{position:relative;z-index:1}
/* Polierspur (kleim-bilder) als Flächenmotiv, Hintergrund statt <img>: kein Inhaltsbild am Fensterrand */
.pakete::before,.referenzen::before{content:"";position:absolute;width:min(620px,70vw);aspect-ratio:1;pointer-events:none;z-index:0;
  background:url(/assets/bilder/grafiken/polierspur-dunkel.svg) center/contain no-repeat;opacity:.14;right:-6%;top:-10%}
.referenzen::before{background-image:url(/assets/bilder/grafiken/polierspur-hell.svg);opacity:.1;right:auto;left:-8%;top:auto;bottom:-14%}
.lgruppe-bild,.lgruppe-bild img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:var(--rad)}
.lgruppe-bild{margin-bottom:20px}
.stimmen-herkunft{flex:1 0 100%;order:3;font-size:14.5px;color:var(--grafit)}
.stimmen-note{order:2}

/* ---------------- Fuß ---------------- */
.fuss{background:var(--carbon);color:var(--nebel);font-size:15.5px;position:relative}
.fuss-kante{height:4px;background:linear-gradient(90deg,var(--rot) 0 22%,var(--carbon-2) 22% 100%)}
.fuss-in{display:flex;flex-wrap:wrap;gap:28px clamp(28px,6vw,96px);padding-block:48px 28px}
.fuss-marke{flex:1 1 300px;display:grid;gap:4px;align-content:start}
.fuss-logo,.fuss-logo img{width:220px;height:auto;margin-bottom:12px}
.fuss-name{font-family:var(--kopf);font-stretch:150%;font-weight:700;font-size:24px;color:var(--weiss)}
.fuss-name span{font-stretch:115%;font-weight:500;font-size:18px}
.fuss-slogan{color:var(--stahl);margin-bottom:8px}
.fuss a{color:var(--weiss)}
.fuss-zeiten{flex:0 1 auto;min-width:240px;display:grid;gap:6px;align-content:start}
.fuss-zeiten dd,.fuss-nav a{white-space:nowrap}
.fuss-zeiten div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--linie-hell);padding-bottom:6px}
.fuss-zeiten .ist-heute{color:var(--weiss);font-weight:600}
.fuss-nav{flex:0 1 auto;display:grid;gap:6px;align-content:start}
.fuss-nav a{text-decoration:none}
.fuss-nav a:hover{text-decoration:underline}
.fuss-unten{display:flex;flex-wrap:wrap;gap:8px 22px;padding-block:18px 26px;border-top:1px solid var(--linie-hell);font-size:14px}
.fuss-recht{color:var(--weiss)}
.credit{margin-left:auto}
.credit a{color:var(--nebel)}

/* ---------------- Modale ---------------- */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(23,23,37,.66);visibility:hidden;pointer-events:none;
  opacity:0;transition:opacity .28s ease,visibility 0s linear .28s}
.modal.ist-offen{visibility:visible;pointer-events:auto;opacity:1;transition:opacity .28s ease}
.modal .modal-karte{position:relative;width:min(520px,100%);max-height:calc(100svh - 32px);overflow:auto;
  background:var(--weiss);border-radius:8px;padding:30px 26px 26px;transform:translateY(22px) scale(.97);
  transition:transform .28s cubic-bezier(.22,.68,.34,1);outline:0;border-top:4px solid var(--rot)}
.modal.ist-offen .modal-karte{transform:none}
/* ohne Skript: Rechtstexte per #anker erreichbar */
.modal:target{visibility:visible;pointer-events:auto;opacity:1}
.modal:target .modal-karte{transform:none}
.modal-karte.breit{width:min(760px,100%)}
.modal-zu{position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;border-radius:var(--rad);
  background:var(--lack);color:var(--carbon);font-size:26px;line-height:1;cursor:pointer}
.modal-vor{font-family:var(--kopf);font-stretch:112%;font-weight:560;color:var(--rot);font-size:15px}
.modal h2{font-size:clamp(22px,2.6vw,28px);margin:8px 50px 10px 0}
.modal-text{color:var(--grafit);margin-bottom:12px}
.modal-lang h2,.modal-lang h3{font-size:20px;margin:18px 0 6px}
.modal-lang p{margin-top:8px}
.weg{display:flex;gap:14px;align-items:center;width:100%;margin-top:10px;padding:14px 16px;border-radius:var(--rad);
  background:var(--rot);color:var(--weiss);text-decoration:none;border:0;font:inherit;text-align:left;cursor:pointer}
.weg:hover{background:var(--rot-tief);color:var(--weiss)}
.weg svg{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7}
.weg b{display:block;font-weight:600;overflow-wrap:anywhere}
.weg small{display:block;font-size:14px;opacity:.9}
.weg.zweit{background:var(--lack);color:var(--carbon)}
.weg.zweit:hover{background:var(--silber);color:var(--carbon)}
.weg.zweit svg{stroke:var(--rot)}
.weg.zweit small{color:var(--grafit);opacity:1}
.menue-rubrik{font-family:var(--kopf);font-stretch:112%;font-weight:560;color:var(--rot);font-size:14px;margin:6px 0 10px}
.menue-liste{display:grid;margin-bottom:22px}
.menue-liste a{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--linie);text-decoration:none;color:var(--carbon)}
.menue-liste span{font-variant-numeric:tabular-nums;color:var(--rot);font-weight:600;font-size:14px}
.menue-liste b{font-family:var(--kopf);font-stretch:120%;font-weight:600;font-size:20px}
.menue-liste small{display:block;font-family:var(--text);font-weight:400;font-size:14px;color:var(--grafit)}
.menue-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kachel{display:flex;gap:10px;align-items:center;padding:14px;border-radius:var(--rad);background:var(--lack);
  color:var(--carbon);text-decoration:none;border:0;font:inherit;text-align:left;cursor:pointer;min-height:56px;min-width:0}
.kachel svg{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:var(--rot);stroke-width:1.7}
.kachel b{display:block;font-weight:600}
.kachel small{display:block;font-size:13px;color:var(--grafit);overflow-wrap:anywhere}
.bildblatt{width:min(1100px,100%);padding:52px 14px 14px}
.bildblatt img{width:100%;height:auto;max-height:78svh;object-fit:contain}
.bild-titel{margin-top:10px;color:var(--grafit);font-size:14.5px}
@media (prefers-reduced-motion:reduce){.knopf,.kachel,.weg,.wegkarte,.modal,.modal .modal-karte{transition:none}}

/* ---------------- Bewegung (Überarbeitung 12.11.2026) ----------------
   Eigene Sprache der Werkstatt statt Einblenden/Hochschieben:
   - Polierstrich: Text wischt mit weicher Maskenkante von links ins Bild,
     der Kicker-Strich zieht vorneweg.
   - Zeilenmaske: Überschriften fahren zeilenweise hinter der Kante hoch.
   - Aufpolieren: Bildflächen öffnen sich mit diagonalem Zug, das Foto
     kommt dabei matt und dunkel an und wird unter der Lichtkante satt.
   - Stufen wachsen von unten, danach streicht die Lichtkante darüber.
   Alles per @keyframes mit fill "backwards", nie "forwards": der Endzustand
   ist die ruhende Regel, kein Maskenrest, kein Clip, und transform bleibt
   frei für Hover/Druck (Reveal nutzt nur translate/opacity/mask/clip-path/
   filter). Fallback: ohne html.js steht alles sofort da. */
:root{--gleit:cubic-bezier(.16,1,.3,1);--zug:cubic-bezier(.65,0,.25,1)}
html.js .vz1{--d:80ms} html.js .vz2{--d:180ms} html.js .vz3{--d:280ms}
html.js .vz4{--d:380ms} html.js .vz5{--d:480ms} html.js .vz6{--d:580ms}

html.js .rv:not(.in){opacity:0}
html.js .rv.in{animation:polierstrich .95s var(--gleit) var(--d,0ms) backwards}
@keyframes polierstrich{
  from{opacity:0;translate:-12px 0;
    -webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 58%);mask-image:linear-gradient(90deg,#000 42%,transparent 58%);
    -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:100% 0;mask-position:100% 0}
  35%{opacity:1}
  to{opacity:1;translate:0 0;
    -webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 58%);mask-image:linear-gradient(90deg,#000 42%,transparent 58%);
    -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:0 0;mask-position:0 0}}
/* Kicker: der Strich zieht vor dem Wort */
.kicker::before{transform-origin:0 50%}
html.js .kicker.rv.in::before{animation:strich .7s var(--gleit) var(--d,0ms) backwards}
@keyframes strich{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Zeilenmaske */
html.js .ln{display:block;overflow:hidden;padding:.14em .06em .22em;margin:-.14em -.06em -.22em}
html.js .ln>span{display:block;translate:0 112%}
html.js .ln.in>span{translate:0 0;animation:zeile 1.1s var(--gleit) var(--d,0ms) backwards}
@keyframes zeile{from{translate:0 112%}to{translate:0 0}}

/* Aufpolieren: diagonaler Zug wie ein Polierstrich, Bild matt -> satt */
html.js .aufzug.rv.in{animation:polierzug 1.2s var(--zug) var(--d,0ms) backwards}
@keyframes polierzug{
  from{opacity:1;clip-path:polygon(0 0,0 0,-24% 100%,-24% 100%)}
  to{opacity:1;clip-path:polygon(0 0,124% 0,100% 100%,-24% 100%)}}
html.js .aufzug.rv.in img,html.js .aufzug.rv.in video{
  animation:aufpolieren 1.7s var(--gleit) calc(var(--d,0ms) + .3s) backwards}
@keyframes aufpolieren{from{filter:brightness(.5) saturate(.3) contrast(1.15)}to{filter:none}}

/* Listen gestaffelt: der Kasten steht, die Einträge ziehen nacheinander */
html.js .staffel.rv.in{animation:none}
html.js .staffel.in>*{animation:polierstrich .8s var(--gleit) backwards}
html.js .staffel.in>*:nth-child(2){animation-delay:.09s} html.js .staffel.in>*:nth-child(3){animation-delay:.18s}
html.js .staffel.in>*:nth-child(4){animation-delay:.27s} html.js .staffel.in>*:nth-child(5){animation-delay:.36s}
html.js .staffel.in>*:nth-child(n+6){animation-delay:.45s}
/* Glanzstufen wachsen von unten wie eine Leiter */
html.js .stufen.in>.stufe{animation:stufe-waechst 1s var(--gleit) backwards}
@keyframes stufe-waechst{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
html.js .stufen.in>.stufe:nth-child(2){animation-delay:.1s} html.js .stufen.in>.stufe:nth-child(3){animation-delay:.2s}
html.js .stufen.in>.stufe:nth-child(4){animation-delay:.3s} html.js .stufen.in>.stufe:nth-child(5){animation-delay:.4s}
html.js .stufen.in .stufe::after{transform:translateX(120%);transition:transform 1.1s var(--zug) .55s}
html.js .stufen.in .stufe:nth-child(2)::after{transition-delay:.67s}
html.js .stufen.in .stufe:nth-child(3)::after{transition-delay:.79s}
html.js .stufen.in .stufe:nth-child(4)::after{transition-delay:.91s}
html.js .stufen.in .stufe:nth-child(5)::after{transition-delay:1.03s}

/* Held und Seitenkopf: Foto kommt matt an und wird satt, die Lichtkante poliert
   einmal darüber. Parallaxe nur im Held (seite.js setzt --parallax). */
.held-foto img{translate:0 var(--parallax,0px)}
.kopf-foto{position:relative}
.kopf-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);transform:translateX(-110%)}
html.js .held-foto img,html.js .kopf-foto img{opacity:0;scale:1.07;filter:brightness(.45) saturate(.35)}
html.js.on .held-foto img,html.js.on .kopf-foto img{opacity:1;scale:1;filter:none;
  transition:scale 2.2s var(--gleit),opacity .9s ease,filter 1.9s var(--gleit) .15s}
html.js.on .held-licht{transform:translateX(110%);transition:transform 1.7s var(--zug) .55s}
html.js.on .kopf-foto::after{transform:translateX(110%);transition:transform 1.5s var(--zug) .6s}

/* Dunkle Bänder: eine Lichtkante läuft einmal an der Oberkante entlang */
.dunkel.sek,.marke-flaeche.sek{background-image:linear-gradient(90deg,transparent,rgba(214,222,233,.6),transparent);
  background-size:36% 1px;background-repeat:no-repeat;background-position:-70% 0}
html.js .dunkel.sek.in,html.js .marke-flaeche.sek.in{animation:kantenlicht 2s var(--zug) .15s both}
@keyframes kantenlicht{from{background-position:-70% 0}to{background-position:170% 0}}

@media (prefers-reduced-motion:reduce){
  html.js .rv:not(.in),html.js .rv,html.js .staffel>*{opacity:1}
  html.js .rv,html.js .rv.in,html.js .staffel.in>*,html.js .stufen.in>.stufe,html.js .aufzug.rv.in,
  html.js .aufzug.rv.in img,html.js .aufzug.rv.in video,html.js .kicker.rv.in::before,
  html.js .dunkel.sek.in,html.js .marke-flaeche.sek.in{animation:none}
  html.js .ln>span,html.js .ln.in>span{translate:none;animation:none}
  html.js .held-foto img,html.js .kopf-foto img{opacity:1;scale:none;filter:none;transition:none}
  .held-foto img{translate:none}
  html.js .held-licht,html.js .stufe::after,.kopf-foto::after,.knopf::before{display:none}
  .ist-offen .offen-zeichen{animation:none;transition:none}
}

/* ---------------- Überarbeitung 11.11.2026 (Kundenmaterial 07.11.) ----------------
   Preise brutto + netto (Veto kleim-recht § 3 PAngV), Komplett-Reinigung,
   Film aus der Halle, Folierung/PPF, Loops. Kontrast: Grafit auf Silber 7,7:1,
   Nebel auf Carbon 11,2:1, Stahl auf Carbon 10,3:1, Weiß auf Carbon 17,7:1. */
.preis-netto{display:block;font-family:var(--text);font-stretch:100%;font-size:13.5px;font-weight:400;
  letter-spacing:0;line-height:1.35;color:var(--grafit);margin-top:3px}
.dunkel .preis-netto,.stufe.s5 .preis-netto,.paket.p5 .preis-netto,.vergleich .preis-netto{color:var(--nebel)}
.stufen-kurz em .preis-netto{font-size:12.5px;text-align:right}

.reinigung-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 18px;
  margin:0 0 26px;padding:16px 20px;border-radius:var(--rad);background:var(--weiss);color:var(--carbon);
  text-decoration:none;border-left:4px solid var(--rot);transition:transform .12s ease,background-color .12s ease}
.reinigung-zeile b{font-family:var(--kopf);font-stretch:125%;font-weight:620;font-size:19px}
.reinigung-zeile span{grid-column:1;font-size:14.5px;color:var(--grafit)}
.reinigung-zeile em{grid-column:2;grid-row:1/3;font-style:normal;font-weight:600;color:var(--rot);font-size:18px;text-align:right}
.reinigung-zeile:hover{color:var(--carbon);background:var(--lack)}
.reinigung-zeile:active{transform:translateY(1px) scale(.99)}

.film-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px 56px;align-items:center}
.film-text h2{margin-bottom:18px}
.film-satz{color:var(--nebel);margin-bottom:18px}
.film-insta{font-weight:600}
.film-rahmen{border-radius:var(--rad);overflow:hidden;background:var(--carbon-2);box-shadow:0 0 0 1px var(--linie-hell)}
.film-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--carbon-2)}
.film-rahmen{position:relative}
.film-rahmen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,23,37,0) 62%,rgba(23,23,37,.55))}
/* Videosteuerung: Pause links (Höhe 40px,
   gleicher Rahmen, Zeichen 16px auf Textmitte). Der Rahmen bleibt beim Hover. */
.film-pause{position:absolute;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:9px;
  height:40px;padding:0 14px 0 12px;border:1px solid var(--linie-hell);border-radius:var(--rad);
  background:rgba(23,23,37,.72);color:var(--weiss);font:600 14px/1 var(--text);letter-spacing:.01em;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .12s ease,background-color .18s ease,border-color .18s ease}
.film-pause{left:14px}
.film-pause:hover{background:var(--carbon);border-color:rgba(255,255,255,.4)}
.film-pause:active{transform:translateY(1px) scale(.97)}
.film-pause:focus-visible{outline:2px solid var(--weiss);outline-offset:2px}
.film-pause-zeichen{width:16px;height:16px;flex:0 0 auto;display:grid;place-items:center;position:relative}
.film-pause-zeichen::before,.film-pause-zeichen::after{content:"";position:absolute;top:2px;width:3.5px;height:12px;border-radius:1px;
  background:currentColor;transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .2s ease}
.film-pause-zeichen::before{left:3.5px}
.film-pause-zeichen::after{right:3.5px}
.film-pause.ist-aktiv .film-pause-zeichen::before{left:4px;width:0;height:0;top:2px;border-radius:0;background:none;
  border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.film-pause.ist-aktiv .film-pause-zeichen::after{opacity:0;transform:scaleY(.2)}
.film-pause-text{display:block;padding-top:1px}   /* Versal-Mitte auf Zeichenmitte */
[hidden]{display:none!important}

/* ---------------- Feinheiten 12.11.2026 ----------------
   Fokusring in Markenfarbe, auf dunklen Flächen Weiß; Textlinks mit ruhiger
   Unterstreichung, die beim Überfahren kräftiger wird; Preise tabellarisch. */
:focus-visible{outline:2px solid var(--rot);outline-offset:3px;border-radius:2px}
.held :focus-visible,.dunkel :focus-visible,.marke-flaeche :focus-visible,.fuss :focus-visible,.knopf-voll:focus-visible{outline-color:var(--weiss)}
.knopf-voll:focus-visible{box-shadow:0 0 0 5px var(--rot)}
main p a:not(.knopf),.modal-text a,.nf-links a{text-decoration-line:underline;text-decoration-thickness:1px;
  text-underline-offset:.24em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);
  transition:text-decoration-color .2s ease,text-decoration-thickness .2s ease,color .2s ease}
main p a:not(.knopf):hover,.modal-text a:hover,.nf-links a:hover{text-decoration-color:currentColor;text-decoration-thickness:2px}
.film-insta{display:inline-flex;align-items:center;gap:8px}
.stufe-preis,.paket-preis,.reinigung-preis b,.stufen-kurz em,.reinigung-zeile em,.vergleich-preis td,.preis-netto,
.lgruppe-preis,.held-anker b,.stimmen-note b,.vorteile-zahl{font-variant-numeric:tabular-nums lining-nums}
.reinigung-zeile em{transition:translate .45s cubic-bezier(.16,1,.3,1)}
.reinigung-zeile:hover em{translate:-4px 0}
.nav a{transition:border-color .2s ease,color .2s ease}

.leist-folie h3 a{color:inherit;text-decoration:none;background:linear-gradient(var(--rot),var(--rot)) 0 100%/100% 2px no-repeat;padding-bottom:2px}
.leist-folie h3 a:hover{color:var(--rot)}

.lgruppe-video{display:block;height:auto;background:var(--carbon-2)}   /* height-Attribut schlaegt sonst aspect-ratio */
.lgruppe-preis{display:inline-block;margin-top:18px;padding:10px 14px;border-radius:var(--rad);background:var(--weiss);
  color:var(--carbon);text-decoration:none;font-size:15.5px;border-left:3px solid var(--rot)}
.lgruppe-preis b{font-weight:600;margin-right:6px}
.lgruppe-preis:hover{color:var(--rot)}

.reinigung{background:var(--silber)}
.reinigung-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:32px 64px;align-items:start}
.reinigung-kopf h2{margin-bottom:18px}
.reinigung-preis{margin-bottom:12px}
.reinigung-preis b{display:block;font-family:var(--kopf);font-stretch:110%;font-weight:600;font-size:clamp(28px,2.6vw,36px);color:var(--rot)}
.reinigung-preis>span{display:block;font-size:15px;color:var(--grafit);margin-top:4px}
.reinigung-hinweis{font-size:15px;color:var(--grafit);margin-bottom:22px;max-width:46ch}
.reinigung-ablauf{display:grid;gap:14px;min-width:0}
.reinigung-pdf{justify-self:start;display:inline-flex;align-items:center;gap:9px;min-height:44px;font-weight:600;font-size:15px;color:var(--carbon);
  text-decoration:none;transition:color .18s ease}
.reinigung-pdf span{text-decoration:underline;text-decoration-color:var(--rot);text-decoration-thickness:1.5px;text-underline-offset:4px}
.reinigung-pdf:hover,.reinigung-pdf:focus-visible{color:var(--rot)}
.reinigung-pdf svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--rot);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reinigung-pdf small{display:inline-block;font-weight:400;font-size:13px;color:var(--grafit)}
.reinigung-liste{width:100%;border-collapse:separate;border-spacing:0;background:var(--weiss);border-radius:var(--rad);padding:8px 22px}
.reinigung-liste th,.reinigung-liste td{padding:14px 0;border-bottom:1px solid var(--linie);vertical-align:baseline;text-align:left;font-weight:400}
.reinigung-liste tr:last-child>*{border-bottom:0}
.reinigung-liste .rl-nr{width:2.9em;font-family:var(--kopf);font-stretch:125%;font-weight:600;color:var(--rot);font-size:15px}
.reinigung-liste .rl-std{padding-left:12px;font-weight:600;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums lining-nums}
/* Video zur Reinigung: eigenes Band unter Preis und Stundenliste, in der Höhe gedeckelt */
.reinigung-in>.film-rahmen{grid-column:1/-1}
.reinigung-in>.film-rahmen .film-video{max-height:min(60svh,520px)}

/* ---- Häufige Fragen /kontakt/ + 404-Links (kleim-sichtbarkeit 11.11.2026, Inhalt aus
   sichtbarkeit.py FAQ = FAQPage im JSON-LD). Ohne Breitenabfrage: Liste ist einspaltig. */
.faq{background:var(--weiss)}
.faq-in{max-width:880px}
.faq h2{margin-bottom:clamp(22px,3vw,36px)}
.faq-liste{border-top:1px solid var(--linie)}
.faq-eintrag{border-bottom:1px solid var(--linie)}
.faq-eintrag summary{display:flex;justify-content:space-between;align-items:center;gap:18px;
  min-height:56px;padding:14px 0;cursor:pointer;list-style:none;font-family:var(--kopf);
  font-stretch:112%;font-weight:600;font-size:clamp(17px,1.5vw,20px);line-height:1.3}
.faq-eintrag summary::-webkit-details-marker{display:none}
.faq-eintrag summary::after{content:"+";flex:0 0 auto;font-size:1.4em;line-height:1;color:var(--rot);
  transition:transform .3s ease}
.faq-eintrag[open] summary::after{transform:rotate(45deg)}
.faq-eintrag p{padding:0 0 18px;max-width:68ch;color:var(--grafit)}
.nf-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:22px}
.nf-links a{font-weight:600}

/* ===================== KW VORSCHAU-GATE =====================
   Skill kleim-vorschau-disclaimer, Bauteil aus der erprobten Vorlage.
   Nur die --kw-* Töne an diese Seite gebunden: Grund Carbon-Verlauf (Logo-
   Grund), Knopf Flyerrot mit Weiß (6,8:1), Akzent Stahl (10,3:1 auf Carbon).
   Das CSS gehört zwingend zum Partial — ohne
   "#kw-gate-ok:checked ~ .kw-gate{display:none}" lässt sich das Gate
   nicht wegklicken. */
.kw-gate-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.kw-gate{
  --kw-g1:#2C2C40; --kw-g2:#171725;
  --kw-acc:#B11F22; --kw-acc-soft:#B7C4D6; --kw-logo:#FFFFFF;
  --kw-sans:'Instrument Sans','Segoe UI',Arial,sans-serif; --kw-disp:'Anybody','Arial Narrow',Arial,sans-serif;
  position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,4vw,40px);
  background:radial-gradient(120% 100% at 50% 0%, var(--kw-g1), var(--kw-g2) 72%);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
#kw-gate-ok:checked ~ .kw-gate{display:none}
.kw-card{width:min(560px,100%);text-align:center;color:var(--kw-logo);
  font-family:var(--kw-sans);animation:kwIn .8s cubic-bezier(.2,.9,.3,1) both;margin:auto}
@keyframes kwIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.kw-mark{width:104px;height:104px;margin:0 auto 26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(183,196,214,.34);
  background:radial-gradient(60% 60% at 50% 40%, rgba(177,31,34,.22), transparent 70%);
  box-shadow:0 0 60px -14px rgba(177,31,34,.5)}
.kw-mark img{width:54%;height:auto;opacity:.94}
.kw-eyebrow{font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--kw-acc-soft);font-family:var(--kw-sans)}
.kw-title{font-family:var(--kw-disp);font-stretch:125%;font-size:clamp(30px,5vw,46px);font-weight:500;
  margin:14px 0 0;line-height:1.08;color:var(--kw-logo);letter-spacing:-.01em}
.kw-card p{margin:16px auto 0;max-width:44ch;font-size:.95rem;line-height:1.72;color:rgba(246,247,250,.86)}
.kw-card p b{color:var(--kw-logo);font-weight:600}
.kw-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-top:28px;
  padding:15px 34px;border-radius:6px;border:0;cursor:pointer;
  background:var(--kw-acc);color:#FFFFFF;
  font-family:var(--kw-sans);font-size:1.05rem;font-weight:600;
  transition:filter .25s}
.kw-btn:hover{filter:brightness(1.08)}
.kw-btn:focus-visible{outline:2px solid var(--kw-logo);outline-offset:3px}
.kw-fine{margin:22px auto 0;max-width:48ch;font-size:.78rem;line-height:1.68;color:rgba(246,247,250,.74)}
.kw-sig{margin-top:26px;padding-top:18px;border-top:1px solid rgba(246,247,250,.16);
  font-family:var(--kw-sans);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(246,247,250,.74);font-weight:600}
.kw-sig b{color:var(--kw-acc-soft);font-weight:600}
.kw-sig .d{color:var(--kw-acc-soft);margin-right:8px}
@media (prefers-reduced-motion:reduce){.kw-card{animation:none}}
/* ===================== /KW VORSCHAU-GATE ===================== */