/* ===========================================================================
   schleifer.css — Design-System "ZWEI WELTEN" für spezialwerkstaette.fplie.com
   Übernommen aus dem freigegebenen Prototyp (assets/b.css + assets/sub.css,
   Variante B der Konzept-Präsentation).

   WARUM EIGENE DATEI und nicht input.css:
   Am fplie-base-Master lässt sich dist/style.css nachweislich nicht aus
   input.css reproduzieren — jeder npm run build löscht Regeln still weg
   (siehe memory/fplie-base-klon-fallen.md, Falle 1). Deshalb liegt das
   Schleifer-System als eigene Datei daneben und wird NACH dist/style.css
   geladen. Tailwind bleibt unangetastet.

   Schriften liegen in theme/fonts/ — die url(fonts/…) unten lösen relativ
   zu dieser Datei im Theme-Root korrekt auf.
   =========================================================================== */

/* ===========================================================================
   B · ZWEI WELTEN — KFZ Technik & Gartentechnik Robert Schleifer, Ligist
   Zwei Spuren: AUTO (gelb) und GARTEN (grün), getrennt durch die Diagonale.
   =========================================================================== */

@font-face{font-family:'Saira Condensed';src:url(fonts/saira-condensed-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Saira Condensed';src:url(fonts/saira-condensed-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Saira Condensed';src:url(fonts/saira-condensed-800.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-600.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --coal:#101418; --coal2:#181E24; --steel:#1F2C36; --steel2:#26343F;
  --line:#2B353E; --line2:#3A4854;
  --yellow:#FFC400; --yellow-hi:#FFD640; --yellow-dk:#8A6A00;
  --gruen:#3C7A32; --gruen-hi:#3A7F31; --gruen-dk:#2A5A24; --gruen-tx:#8FD07F;
  --paper:#F3F1EA; --paper2:#E4E0D3; --ink:#161B20;
  --white:#fff; --grey:#98A4AE; --grey2:#CBD4DB;
  --disp:'Saira Condensed',system-ui,-apple-system,sans-serif;
  --body:Barlow,system-ui,-apple-system,sans-serif;
  --wrap:1320px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--coal);color:var(--white);
  font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0}
/* Deutsche Komposita wie "Versicherungsdirektabwicklung" sprengen sonst den Viewport */
h1,h2,h3,h4{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
p{margin:0}
ul,ol{margin:0}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- Typo ---------- */
.kick{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow)}
.kick::before{content:"";width:34px;height:3px;background:currentColor;flex:none}
.kick.g{color:var(--gruen-tx)}
h2{font-family:var(--disp);font-weight:800;font-size:clamp(32px,4.2vw,56px);line-height:.98;
  letter-spacing:.005em;text-transform:uppercase;margin-top:14px;text-wrap:balance}
h2 em{font-style:normal;color:var(--yellow)}
h2 em.g{color:var(--gruen-tx)}
.sect-lead{margin-top:18px;max-width:58ch;color:var(--grey2);font-size:18px}
.sect{padding:112px 0}
.sect-head{max-width:780px;margin-bottom:56px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 24px;
  font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn svg{width:17px;height:17px;flex:none}
.btn-solid{background:var(--yellow);color:#14181C}
.btn-solid:hover{background:var(--yellow-hi)}
.btn-green{background:var(--gruen-hi);color:#fff}
.btn-green:hover{background:var(--gruen-dk)}
.btn-ghost{border-color:var(--line2);color:#fff}
.btn-ghost:hover{border-color:var(--yellow);color:var(--yellow)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-lg{padding:18px 28px;font-size:16px}

/* ---------- Servicezeile ---------- */
.service{background:#0A0D10;border-bottom:1px solid var(--line);font-size:13.5px}
.service .wrap{display:flex;align-items:center;gap:26px;min-height:42px;flex-wrap:wrap}
.service span{display:inline-flex;align-items:center;gap:7px;color:var(--grey2)}
.service svg{width:15px;height:15px}
.dot{width:8px;height:8px;border-radius:50%;background:#4ECB6A;box-shadow:0 0 0 3px rgba(78,203,106,.18);flex:none}
.service .tel{margin-left:auto;color:var(--yellow);font-weight:700;font-family:var(--disp);font-size:17px;
  letter-spacing:.04em;display:inline-flex;align-items:center;min-height:26px;padding:2px 0}
.service .tel:hover{color:var(--yellow-hi)}

/* ---------- Navigation ---------- */
.nav{background:var(--coal2);position:relative;z-index:60}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line2)}
.nav .wrap{display:flex;align-items:center;gap:20px;min-height:76px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.mark{width:44px;height:44px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;flex:none}
.mark i{display:block}
.mark i:nth-child(1){background:var(--steel)}
.mark i:nth-child(2){background:var(--gruen)}
.mark i:nth-child(3){background:var(--gruen)}
.mark i:nth-child(4){background:var(--yellow)}
.brand b{display:block;font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:.03em;
  line-height:1;text-transform:uppercase}
.brand i.bsub{display:block;font-style:normal;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);margin-top:4px}
.menu{display:flex;align-items:center;gap:16px;margin-left:4px;padding:0;font-family:var(--disp);
  font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase}
.menu>li{list-style:none;position:relative}
.menu a{position:relative;display:inline-flex;align-items:center;gap:6px;padding:27px 2px;
  color:#D7DFE5;white-space:nowrap;transition:color .16s ease-out}
/* Die Bereichsmarke sitzt AUF der 2px-Zierlinie und ist das einzige Farbige darin:
   Gelb = KFZ, Gruen = Garten und Shop, Weiss = Betrieb. */
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:#fff;
  transform:scaleX(0);transform-origin:left center;transition:transform .24s cubic-bezier(.2,.7,.3,1)}
.menu li.auto>a::after{background:var(--yellow)}
.menu li.garten>a::after,.menu li.shop>a::after{background:var(--gruen-tx)}
.menu li:hover>a::after,.menu li:focus-within>a::after,.menu li.demo>a::after,
.menu a.hot::after{transform:scaleX(1)}
.menu li:hover>a,.menu li:focus-within>a,.menu li.demo>a{color:#fff}
.menu a.hot{color:#fff}
.menu li.auto>a.hot,.menu li.auto>a.area{color:var(--yellow)}
.menu li.garten>a.hot,.menu li.shop>a.hot,
.menu li.garten>a.area,.menu li.shop>a.area{color:var(--gruen-tx)}
.menu li.haus>a.area{color:#fff}
.menu a:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.menu .car{width:11px;height:11px;stroke-width:2.6;transition:transform .22s ease-out;opacity:.7}
.menu li:hover>a .car,.menu li:focus-within>a .car,.menu li.demo>a .car{transform:rotate(180deg);opacity:1}
ul.sub{position:absolute;top:100%;left:-14px;min-width:288px;background:#12171C;
  border:1px solid var(--line2);padding:6px 0;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s ease-out,transform .18s ease-out,visibility .18s;
  list-style:none;box-shadow:0 26px 52px rgba(0,0,0,.62);z-index:5}
.menu li.auto>ul.sub{border-top:3px solid var(--yellow)}
.menu li.garten>ul.sub,.menu li.shop>ul.sub{border-top:3px solid var(--gruen-hi)}
.menu li:hover>ul.sub,.menu li:focus-within>ul.sub,.menu li.demo>ul.sub{opacity:1;visibility:visible;transform:none}
ul.sub a{position:relative;display:block;padding:11px 18px 11px 20px;border-bottom:0;margin:0;
  font-size:14px;letter-spacing:.04em;color:#CBD5DC;
  transition:background .14s ease-out,color .14s ease-out,padding-left .18s ease-out}
ul.sub a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:currentColor;
  transform:scaleY(0);transform-origin:center;transition:transform .18s ease-out}
.menu li.auto ul.sub a:hover{color:var(--yellow)}
.menu li.garten ul.sub a:hover,.menu li.shop ul.sub a:hover{color:var(--gruen-tx)}
ul.sub a:hover,ul.sub a:focus-visible{background:#1B2229;padding-left:26px;border-bottom:0}
ul.sub a:hover::before,ul.sub a:focus-visible::before{transform:scaleY(1)}
ul.sub a[aria-current]{color:#fff;background:#1B2229}
ul.sub li.grp a{font-family:var(--disp);font-weight:800;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;padding-top:14px;padding-bottom:14px}
.menu li.auto ul.sub li.grp a{color:var(--yellow)}
.menu li.garten ul.sub li.grp a,.menu li.shop ul.sub li.grp a{color:var(--gruen-tx)}
ul.sub li.grp{border-bottom:1px solid var(--line)}
.nav-cta{margin-left:auto;display:flex;gap:9px;flex:none}
.burger{display:none;margin-left:auto;background:none;border:2px solid var(--line2);color:#fff;
  width:46px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.burger svg{width:22px;height:22px}
.mnav{display:none;background:var(--coal2);border-bottom:1px solid var(--line2)}
.mnav.on{display:block}
.mnav ul{list-style:none;padding:8px 0;margin:0}
.mnav a{display:block;padding:14px 24px;font-family:var(--disp);font-weight:700;font-size:16px;
  letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--line)}

/* ---------- HERO: harte Diagonale ---------- */
.hero{position:relative;overflow:hidden;min-height:620px;display:flex}
.side{position:absolute;inset:0}
.side img{width:100%;height:100%;object-fit:cover}
/* Scrim der Auto-Seite zurückgenommen (Fabian, 31.08.2026: "weniger dunkler
   Overlay auf der Werkstatt-Seite"). Vorher lag die Werkstatt unter .96/.93
   Deckung plus brightness(.86) — vom Foto war praktisch nichts mehr zu sehen,
   die Fläche wirkte wie eine schwarze Platte mit Text drauf.
   Der Verlauf bleibt am linken Rand kräftig, weil dort H1 und Lead stehen;
   ab der Diagonale gibt er das Bild frei. Kontrast danach im Browser gemessen,
   nicht geschätzt — Werte im Craft-Protokoll. */
.side.auto img{object-position:52% 50%;filter:contrast(1.08) saturate(.86) brightness(.98)}
.side.garten{clip-path:polygon(60% 0,100% 0,100% 100%,36% 100%)}
.side.garten img{object-position:50% 60%;filter:contrast(1.05) saturate(1.05)}
.side.auto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(12,16,20,.92) 0%,rgba(12,16,20,.84) 40%,rgba(12,16,20,.38) 66%,rgba(12,16,20,.08) 100%)}
.side.garten::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,22,8,.44) 0%,rgba(8,22,8,.14) 45%,rgba(8,22,8,.58) 100%)}
.edge{position:absolute;inset:0;pointer-events:none;background:var(--yellow);
  clip-path:polygon(60% 0,60.55% 0,36.55% 100%,36% 100%)}
.hero .wrap{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;
  padding-top:76px;padding-bottom:76px}
.pair{display:inline-flex;margin-bottom:24px}
.pair span{font-family:var(--disp);font-weight:800;font-size:13.5px;letter-spacing:.18em;
  text-transform:uppercase;padding:9px 16px}
.pair span:first-child{background:var(--yellow);color:#14181C}
.pair span:last-child{background:var(--gruen);color:#fff}
/* Die H1 der Startseite traegt jetzt beide Hauptkeywords und den Ort statt eines
   Slogans — der Slogan steht im Lead. Dafuer etwas kleiner und breiter als vorher
   (war clamp(42,5.9vw,84) bei max-width:12ch), sonst stuenden vier Zeilen da. */
h1{font-family:var(--disp);font-weight:800;font-size:clamp(31px,4.05vw,56px);line-height:1.0;
  letter-spacing:.005em;text-transform:uppercase;margin:0;max-width:20ch}
.hero-kick{display:block;margin-top:24px;font-family:var(--disp);font-weight:700;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey2)}
h1 em{font-style:normal;color:var(--yellow);display:block}
.hero-lead{margin-top:26px;max-width:40ch;color:var(--grey2);font-size:18px}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}

/* Kennzahlen ---------- */
.figures{background:#0D1114;border-top:1px solid var(--line)}
.figures .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);padding:0}
.fig{background:#0D1114;padding:30px 26px}
.fig b{display:block;font-family:var(--disp);font-weight:800;font-size:38px;line-height:1;letter-spacing:.01em}
.fig b.y{color:var(--yellow)} .fig b.g{color:var(--gruen-tx)}
.fig span{display:block;font-size:14px;color:var(--grey);margin-top:7px}

/* ---------- Weiche AUTO | GARTEN ---------- */
.weiche{display:grid;grid-template-columns:1fr 1fr}
.weiche .wside{min-height:470px}
/* Die zwei uebrigen Bereiche als Leiste — vier Bereiche, ein Block. */
.wbar{display:flex;align-items:center;gap:22px;padding:34px 44px;background:var(--coal2);
  border-top:1px solid var(--line)}
.wbar + .wbar{border-left:1px solid var(--line)}
.wbar i{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;
  border:2px solid var(--line2);color:var(--grey2);transition:.2s}
.wbar i svg{width:24px;height:24px}
.wbar b{display:block;font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:.03em;
  text-transform:uppercase;line-height:1}
.wbar em{display:block;font-style:normal;margin-top:7px;font-size:15px;color:var(--grey2);max-width:44ch}
.wbar .go{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.wbar .go svg{width:16px;height:16px;transition:transform .2s}
.wbar:hover .go svg{transform:translateX(4px)}
.wbar.s .go{color:var(--gruen-tx)} .wbar.h .go{color:#fff}
.wbar.s:hover i{border-color:var(--gruen);color:var(--gruen-tx)}
.wbar.h:hover i{border-color:var(--yellow);color:var(--yellow)}
.wbar:hover{background:var(--steel)}
.wside{position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:52px;isolation:isolate}
.wside img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .55s ease}
.wside:hover img{transform:scale(1.045)}
.wside::before{content:"";position:absolute;inset:0;z-index:-1}
.wside.a::before{background:linear-gradient(to top,rgba(10,13,16,.97) 20%,rgba(10,13,16,.84) 58%,rgba(10,13,16,.52) 100%)}
.wside.g::before{background:linear-gradient(to top,rgba(8,26,12,.97) 20%,rgba(8,26,12,.84) 58%,rgba(8,26,12,.5) 100%)}
.wside .lbl{position:absolute;top:0;left:44px;font-family:var(--disp);font-weight:800;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;padding:10px 16px}
.wside.a .lbl{background:var(--yellow);color:#14181C}
.wside.g .lbl{background:var(--gruen);color:#fff}
.wside h2{margin:0;font-size:clamp(28px,3.2vw,42px)}
.wside p{margin-top:18px;max-width:42ch;color:var(--grey2);font-size:17px;line-height:1.6}
.wtags{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.wtags span{border:1px solid rgba(255,255,255,.3);padding:8px 13px;font-size:14px;color:#E3E9ED}
.wside .go{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-family:var(--disp);
  font-weight:800;font-size:15px;letter-spacing:.07em;text-transform:uppercase}
.wside.a .go{color:var(--yellow)} .wside.g .go{color:var(--gruen-tx)}
.wside .go svg{width:18px;height:18px}

/* ---------- Leistungs-Index (typografisch) ---------- */
.idx{border-top:1px solid var(--line)}
.idx-row{display:grid;grid-template-columns:64px 1fr 300px 190px;gap:24px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line);transition:padding-left .2s ease,background .2s ease}
.idx-row:hover{padding-left:16px;background:var(--coal2)}
.idx-row .n{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--yellow);letter-spacing:.08em}
.idx-row h3{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.3vw,30px);text-transform:uppercase;
  letter-spacing:.02em}
.idx-row p{font-size:15.5px;color:var(--grey)}
.idx-row .meta{font-size:14px;color:var(--grey2);display:flex;align-items:center;gap:9px;justify-content:flex-end;
  text-align:right}
.idx-row .meta svg{width:16px;height:16px;color:var(--yellow);flex:none}

/* ---------- §57a Zeitstrahl ---------- */
.p57{background:var(--steel);position:relative;overflow:hidden}
.p57 .wrap{position:relative}
/* Der Strahl endet am letzten Punkt, nicht irgendwo dahinter: jeder Knoten zieht
   sein eigenes Stueck bis zum naechsten. Die feste Breite von 66 % war willkuerlich
   und liess einen grauen Rest ueber ein Viertel der Breite stehen.
   „Toleranz" ist kein vierter Schritt der 3-2-1-Regel — sie steht als Randnotiz daneben. */
.rail{margin-top:56px;display:grid;grid-template-columns:1fr 320px;gap:52px;align-items:start}
.rail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-top:60px}
.rnode{position:relative}
.rnode::before{content:"";position:absolute;top:-58px;left:0;width:22px;height:22px;
  box-sizing:border-box;background:var(--yellow);border:4px solid var(--steel);border-radius:50%;z-index:2}
.rnode::after{content:"";position:absolute;top:-49px;left:11px;right:-39px;height:4px;
  background:var(--yellow)}
.rnode:last-child::after{display:none}
.rtol{margin-top:60px;border-left:3px solid var(--line2);padding:2px 0 2px 22px}
.rtol-k{display:block;font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey)}
.rtol b{display:block;margin-top:9px;font-family:var(--disp);font-weight:800;font-size:22px;
  letter-spacing:.02em;text-transform:uppercase;line-height:1.05}
.rtol span{display:block;margin-top:9px;font-size:15.5px;color:var(--grey2);line-height:1.55}
.rnode b{display:block;font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:.02em;
  text-transform:uppercase;line-height:1.05}
.rnode span{display:block;font-size:15.5px;color:var(--grey2);margin-top:8px}
.p57-cta{display:grid;grid-template-columns:1fr auto auto;gap:32px;align-items:center;margin-top:64px;
  background:var(--coal2);border-left:4px solid var(--yellow);padding:34px 36px}
.p57-cta p{font-size:17px;color:var(--grey2);max-width:64ch}
.p57-cta b{color:#fff;font-family:var(--disp);font-weight:700;font-size:20px;display:block;margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.02em}

/* ---------- Vollbild-Statement Hochvolt ---------- */
.stmt{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden}
.stmt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:contrast(1.1) saturate(.72) brightness(.5)}
.stmt::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,13,16,.9),rgba(10,13,16,.5))}
.stmt .wrap{position:relative;z-index:2;padding-top:100px;padding-bottom:100px}
.stmt .big{font-family:var(--disp);font-weight:800;font-size:clamp(38px,5.4vw,74px);line-height:.96;
  text-transform:uppercase;letter-spacing:.005em;max-width:17ch;margin-top:18px}
.stmt .big em{font-style:normal;color:var(--yellow)}
.stmt-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.stmt-list span{background:rgba(16,20,24,.72);border:1px solid var(--line2);padding:10px 15px;font-size:15px}

/* ---------- GARTEN-Strecke ---------- */
.gz{background:#0C1A10;position:relative;overflow:hidden}
.gz::before{content:"";position:absolute;inset:0;
  background:radial-gradient(1000px 440px at 84% 6%,rgba(60,122,50,.4),transparent 68%)}
.gz .wrap{position:relative}
.gz .kick{color:var(--gruen-tx)}
.gz h2 em{color:var(--gruen-tx)}
.gstage{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:46px;background:#0F2415;
  border:1px solid #204A2A}
.gstage-img{position:relative;min-height:460px}
.gstage-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gstage-img .cap{position:absolute;left:0;bottom:0;background:var(--gruen);color:#fff;padding:9px 15px;
  font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.gstage-txt{padding:44px 46px}
.tl{list-style:none;padding:0;margin:26px 0 0;counter-reset:s;position:relative}
.tl li{counter-increment:s;position:relative;padding:0 0 22px 46px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:0;top:0;width:30px;height:30px;
  background:var(--gruen-hi);transform:rotate(45deg)}
.tl li span.n{position:absolute;left:0;top:0;width:30px;height:30px;display:grid;place-items:center;
  font-family:var(--disp);font-weight:800;font-size:14px;color:#fff;z-index:2}
.tl li::after{content:"";position:absolute;left:14px;top:34px;bottom:6px;width:2px;background:#2C6135}
.tl li:last-child::after{display:none}
.tl b{display:block;font-family:var(--disp);font-weight:700;font-size:19px;text-transform:uppercase;
  letter-spacing:.02em}
.tl p{font-size:15.5px;color:#B7D3C2;margin-top:3px}

/* Geräte-Streifen */
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-top:56px}
.strip figure{position:relative;margin:0;overflow:hidden;aspect-ratio:3/4}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.strip figure:hover img{transform:scale(1.06)}
.strip figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 14px;font-family:var(--disp);
  font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.04em;
  background:linear-gradient(to top,rgba(6,18,9,.94),transparent)}

/* ---------- Markenwand geteilt ---------- */
.brands{background:var(--coal2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Auto hat drei Logos, Garten sechs — gleich breite Spalten liessen links eine
   Leerflaeche und drueckten rechts alles zusammen. */
/* Beide Spalten als 3er-Raster: drei Logos links = eine Reihe, sechs rechts = zwei.
   Vorher standen fuenf Logos in einer Reihe und eines allein darunter, und die
   linke Spalte war mittig gesetzt, waehrend die rechte oben begann. */
.brands .wrap{display:grid;grid-template-columns:1fr 1px 1fr;gap:60px;padding-top:68px;padding-bottom:68px;
  align-items:start}
.bsplit{background:var(--line);width:1px;height:100%}
.bcol h3{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:20px}
.bcol.a h3{color:var(--yellow)} .bcol.g h3{color:var(--gruen-tx)}
.brow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.brow img{width:100%;height:68px;background:#fff;padding:11px 16px;object-fit:contain}
.stiga{margin-top:14px;font-size:15px;color:var(--grey2)}
.stiga b{color:#fff;font-family:var(--disp);font-weight:800;letter-spacing:.05em;font-size:17px}

/* ---------- Bewertungen + Team (hell) ---------- */
.light{background:var(--paper);color:var(--ink)}
.light .kick{color:var(--gruen)}
.light h2 em{color:var(--gruen)}
.light .sect-lead{color:#4A5560}
.lg{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;margin-top:44px}
.rvs{display:grid;gap:14px}
.rc{background:#fff;border:1px solid var(--paper2);border-left:4px solid var(--yellow-dk);padding:22px 24px}
.rc .st5{color:#8A5D00;font-size:15px;letter-spacing:.08em}
.rc p{margin-top:10px;font-size:16.5px;color:#28323B}
.rc footer{margin-top:12px;font-size:13.5px;color:#4F5C69}
.scorebar{display:flex;align-items:center;gap:20px;background:var(--ink);color:#fff;padding:22px 26px;
  margin-bottom:14px}
.scorebar b{font-family:var(--disp);font-weight:800;font-size:52px;line-height:1;color:var(--yellow)}
.scorebar span{font-size:15px;color:#C3CCD4}
.scorebar a{margin-left:auto;font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;border-bottom:2px solid var(--yellow);padding:4px 0;white-space:nowrap}
.crew{background:#fff;border:1px solid var(--paper2);padding:28px}
.crew h3{font-family:var(--disp);font-weight:800;font-size:24px;text-transform:uppercase;letter-spacing:.02em}
.crew>p{font-size:15.5px;color:#4A5560;margin-top:10px}
/* Drei Spalten: der Betrieb hat sechs Menschen, bei vier Spalten bleiben
   rechts zwei Lücken stehen (19.09.2026). */
.faces{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 12px;margin-top:22px}
.faces figure{margin:0;text-align:center}
/* 92 statt 66 px: in der dreispaltigen Karte war das Gesicht kaum zu
   erkennen, und die Spalte war 156 px kürzer als die Stimmen daneben
   (gemessen 19.09.2026). */
.faces img{width:92px;height:92px;object-fit:cover;object-position:50% 20%;border-radius:50%;
  border:2px solid var(--paper2);margin:0 auto}
.faces b{display:block;font-family:var(--disp);font-weight:700;font-size:14px;margin-top:9px;line-height:1.2}
.faces span{display:block;font-size:11.5px;color:#5C6873;margin-top:3px;line-height:1.35}
.lehr{margin-top:20px;border-top:1px solid var(--paper2);padding-top:18px;font-size:15px;color:#4A5560;
  display:flex;gap:12px}
.lehr svg{width:22px;height:22px;color:var(--gruen);flex:none}
.lehr b{color:var(--ink)}
.revnote{margin-top:24px;font-size:13px;color:#4F5C69}

/* ---------- Standort ---------- */
.loc .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;margin-top:0}
.locwrap{padding-top:104px;padding-bottom:104px}
.mapbox{border:1px solid var(--line2)}
.mapbox iframe{display:block;width:100%;height:440px;border:0;filter:grayscale(.1) contrast(1.03)}
.kc{background:var(--coal2);border:1px solid var(--line);padding:24px;margin-bottom:14px}
.kc h3{font-family:var(--disp);font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:.03em;
  display:flex;align-items:center;gap:10px}
.kc h3 svg{width:19px;height:19px;color:var(--yellow)}
.kc p{margin-top:12px;font-size:16px;color:var(--grey2)}
.kc a.big{display:block;font-family:var(--disp);font-weight:800;font-size:28px;color:var(--yellow);margin-top:8px;
  letter-spacing:.02em}
.kc a.big:hover{color:var(--yellow-hi)}
.kc p a{display:inline-block;padding:3px 0;border-bottom:1px solid var(--line2)}
.kc p a:hover{color:var(--yellow);border-bottom-color:var(--yellow)}
.oz{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin-top:12px;font-size:16px}
.oz dt{color:var(--grey)}
.oz dd{margin:0;color:#fff;font-variant-numeric:tabular-nums}
.form{background:var(--coal2);border:1px solid var(--line);border-top:3px solid var(--yellow);padding:28px;
  margin-top:36px}
.form h3{font-family:var(--disp);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.03em}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.fields label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);
  font-family:var(--disp);font-weight:700;margin-bottom:6px}
input,select,textarea{width:100%;background:#0D1114;border:1px solid var(--line2);color:#fff;
  padding:12px 13px;font-family:var(--body);font-size:16px;border-radius:0}
input:focus,select:focus,textarea:focus{outline:3px solid var(--yellow);outline-offset:1px;border-color:var(--yellow)}
select option{background:#0D1114;color:#fff}
.f-full{grid-column:1/-1}
.dsgvo{display:flex;gap:11px;align-items:flex-start;margin-top:16px;font-size:13.5px;color:var(--grey)}
.dsgvo input{width:24px;height:24px;flex:none;margin-top:1px;accent-color:var(--yellow)}

/* Formular-Hausformat: Pflicht/optional-Marker + Anfrage-Hinweis */
.fields label .req,.fields label .opt{margin-left:7px;font-size:10px;letter-spacing:.1em;padding:2px 6px}
.fields label .req{background:var(--yellow);color:#14181C}
.fields label .opt{border:1px solid var(--line2);color:var(--grey)}
.fnote{margin-top:14px;font-size:14.5px;color:var(--grey2);border-left:3px solid var(--yellow);padding-left:14px}

/* ---------- Footer ---------- */
.foot{background:#0A0D10;padding:64px 0 0;position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(to right,var(--yellow) 0 58%,var(--gruen) 58% 100%)}
.f-grid{display:grid;grid-template-columns:1.15fr .95fr .95fr .8fr .8fr;gap:34px}
.f-brand b{display:block;font-family:var(--disp);font-weight:800;font-size:21px;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.15}
.f-brand p{font-size:15px;color:var(--grey);margin-top:12px;max-width:34ch}
.f-brand .tel{display:inline-block;font-family:var(--disp);font-weight:800;font-size:24px;color:var(--yellow);
  margin-top:16px;letter-spacing:.02em}
.foot h3{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:14px}
.foot .c-a h3{color:var(--yellow)} .foot .c-g h3{color:var(--gruen-tx)}
.foot .c-s h3{color:var(--gruen-tx)} .foot .c-s h3+ul+h3{color:#fff} .foot .c-o h3{color:#fff}
.foot ul{list-style:none;padding:0;display:grid;gap:2px}
.foot ul a{display:inline-block;padding:7px 0;font-size:14.5px;color:var(--grey2)}
.foot ul a:hover{color:#fff}
.f-bar{margin-top:52px;border-top:1px solid var(--line);padding:22px 0;display:flex;gap:20px;flex-wrap:wrap;
  font-size:13.5px;color:var(--grey)}
.f-bar .r{margin-left:auto;display:flex;gap:18px}
.f-bar a{display:inline-block;padding:3px 0}
.f-bar a:hover{color:var(--yellow)}

.sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--coal2);
  border-top:2px solid var(--yellow);padding:9px 12px;gap:9px}
.sticky .btn{flex:1;padding:14px 10px}

/* =================== RESPONSIVE =================== */
/* 22.09.2026: der Anrufen-Knopf bleibt immer sichtbar, die Nummer steht nicht mehr in der Servicezeile. */
@media(max-width:1240px){
  .menu{gap:13px;font-size:14px}
  .idx-row{grid-template-columns:52px 1fr 220px;gap:18px}
  .idx-row .meta{display:none}
}
@media(max-width:1040px){
  .menu,.nav-cta{display:none}
  .burger{display:flex}
  .hero{min-height:540px}
  /* 29.09.2026 (Fabian: „der Strich geht mitten durch die Schrift“): Die Diagonale lief von 64 %
     auf 42 % der Höhe quer durch Lead und Knöpfe. Jetzt liegt sie in einem eigenen Streifen UNTER
     dem Text: unten 150 px Innenabstand statt 76, die Kante von 34 px (links) auf 110 px (rechts)
     über dem Rand. Zum letzten Knopf bleiben mindestens 40 px. Oben Werkstatt, unten Garten. */
  /* 29.09.2026 abends (Fabian: „dem Rasenmäher mehr Platz“): Das Gartenbild füllt nicht mehr den
     ganzen Kopf und zeigt davon nur die unterste Ecke (nur Gras), sondern hat unten einen eigenen
     Kasten von 250 px und wird darin ganz eingepasst, der Mäher ist im Bild. Die Schräge liegt an
     der Oberkante des Kastens (links 64 px tiefer). Text endet 36 px über dem Kasten. */
  .hero .wrap{padding-bottom:286px}
  .side.garten{top:auto;height:250px;clip-path:polygon(0 64px,100% 0,100% 100%,0 100%)}
  .side.garten img{object-position:40% 45%}
  .edge{top:auto;height:250px;clip-path:polygon(0 64px,100% 0,100% 5px,0 69px)}
  /* Am Handy läuft der Text über die volle Breite, der Scrim trägt hier mehr
     als am Desktop. Trotzdem zurückgenommen (.92/.86/.80 → .84/.76/.66), sonst
     ist die Werkstatt am Handy weiterhin eine schwarze Fläche. Gemessen. */
  .side.auto::after{background:linear-gradient(180deg,rgba(12,16,20,.84) 0%,rgba(12,16,20,.76) 62%,rgba(12,16,20,.66) 100%)}
  .side.garten::after{background:linear-gradient(180deg,rgba(8,22,8,.22),rgba(8,22,8,.12))}

  /* Textschutz am Handy.
     Die Diagonale läuft am Handy quer durch die Textspalte — der Lead sitzt mit
     seiner rechten Hälfte auf der hellen Wiese. Gemessen: 2,57:1 gegen den
     hellsten Grashalm, verlangt sind 4,5:1. Das war schon im Prototyp so und
     fällt erst auf, seit der Werkstatt-Scrim zurückgenommen ist.
     Statt beide Fotos wieder flächig abzudunkeln, liegt der Schutz nur dort,
     wo Text steht: ein weicher Verlauf über der Bildebene.

     REIHENFOLGE DER EBENEN (der erste Versuch lag falsch):
       .side  Fotos            — ohne z-index
       ::after Textschutz      z-index 2
       .edge  gelbe Diagonale  z-index 3   ← muss ÜBER den Schutz, sonst wird das
                                             Signature-Element olivgrau gedämpft
       .wrap  Text             z-index 4
     Der Schutz liegt zwischen Foto und Diagonale — die Kante bleibt voll gelb,
     die Schrift bekommt trotzdem ihren dunklen Grund. */
  .hero::after{content:"";position:absolute;left:0;right:0;top:26%;bottom:250px;z-index:2;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(10,14,18,0) 0%,rgba(10,14,18,.62) 16%,rgba(10,14,18,.76) 45%,rgba(10,14,18,.68) 80%,rgba(10,14,18,0) 100%)}
  .edge{z-index:3}
  .hero .wrap{z-index:4}
  .figures .wrap{grid-template-columns:repeat(2,1fr)}
  .weiche{grid-template-columns:1fr}
  .wbar + .wbar{border-left:0}
  .wside{min-height:340px;padding-top:76px}
  .idx-row{grid-template-columns:44px 1fr;gap:14px}
  .idx-row p{grid-column:2}
  .rail-grid{grid-template-columns:repeat(2,1fr);gap:44px 22px}
  .rail::before,.rail::after{display:none}
  .rnode{padding-left:30px}
  .rnode::before{top:2px;left:0}
  .p57-cta{grid-template-columns:1fr;gap:20px}
  .rail{grid-template-columns:1fr;gap:38px}
  .rail-grid{grid-template-columns:1fr;gap:0;padding-top:0;padding-left:40px}
  .rnode{padding:15px 0}
  .rnode::before{top:15px;left:-40px}
  /* Auch senkrecht endet der Strahl am letzten Punkt: jeder Knoten zieht sein Stueck
     bis zur Mitte des naechsten Punktes, der letzte zieht keines. */
  .rnode::after{top:26px;bottom:-26px;left:-31px;right:auto;width:4px;height:auto}
  .rtol{margin-top:0}
  .gstage{grid-template-columns:1fr}
  .gstage-img{min-height:300px}
  .gstage-txt{padding:32px 26px}
  .strip{grid-template-columns:repeat(3,1fr)}
  .brands .wrap{grid-template-columns:1fr;gap:32px}
  .bsplit{display:none}
  .lg{grid-template-columns:1fr;gap:34px}
  .loc .wrap{grid-template-columns:1fr;gap:32px}
  .f-grid{grid-template-columns:1fr 1fr}
  .sticky{display:flex}
  body{padding-bottom:74px}
}
@media(max-width:620px){
  .service .wrap > span:not(:first-child):not(.fplie-ank){display:none}
  .sect{padding:72px 0}
  .locwrap{padding-top:60px;padding-bottom:60px}
  h1{font-size:clamp(28px,8.2vw,38px);max-width:none}
  h2{font-size:clamp(27px,7.6vw,36px)}
  .figures .wrap{grid-template-columns:1fr}
  .rail-grid{grid-template-columns:1fr}
  .strip{grid-template-columns:repeat(2,1fr)}
  .faces{grid-template-columns:repeat(3,1fr)}
  .fields{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .f-bar .r{margin-left:0;width:100%}
  .scorebar{flex-wrap:wrap;gap:12px}
  .scorebar a{margin-left:0}
  .mapbox iframe{height:320px}
  .wbar{flex-wrap:wrap;padding:22px 24px;gap:14px}
  .wbar .go{margin-left:0;width:100%}
  .wside{padding:32px 24px}
  .wside .lbl{left:24px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}


/* ---------- Mobilmenue: die vier Bereiche mit Zwischenzeile ---------- */
.mnav li.mgrp{padding:18px 24px 8px;font-family:var(--disp);font-weight:800;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--grey);border-bottom:1px solid var(--line)}
.mnav li.mgrp.auto{color:var(--yellow)}
.mnav li.mgrp.garten{color:var(--gruen-tx)}
.mnav a[aria-current]{color:#fff;background:var(--steel)}

/* ---------- Ausbaustand im Menue ---------- */
.menu .wip,.mnav .wip{display:inline-block;margin-left:8px;font-style:normal;font-family:var(--body);
  font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);
  border:1px solid var(--line2);padding:2px 6px;vertical-align:middle;white-space:nowrap}
ul.sub a:hover .wip{border-color:currentColor}


/* ==== sub.css — Unterseiten-System ==== */

/* ============================================================================
   sub.css — Unterseiten von Variante B (ZWEI WELTEN)
   Erweitert b.css, ohne es anzufassen.

   Stand 20.08.2026: die Unterseiten sind keine Textspalte mit Randspalte mehr,
   sondern eine Folge unterschiedlicher Baender. Jedes Band hat einen eigenen
   visuellen Anker — Foto, Zeitstrahl, Bildstrecke, Logo-Reihe, Kartenraster.

   Spurfarbe ueber Body-Klasse: t-auto = Gelb, t-garten = Gruen.
   Bereich ueber Body-Klasse: a-auto | a-garten | a-shop | a-haus.
   Alle Bausteine benutzen ausschliesslich --akz / --akz-tx / --akz-dk / --akz-on,
   damit keine Seite halb gelb und halb gruen werden kann.
   ============================================================================ */

body{--akz:var(--yellow);--akz-hi:var(--yellow-hi);--akz-tx:var(--yellow);--akz-on:#14181C;
     --akz-dk:#8A5D00}                       /* Akzent fuer Text auf hellem Grund — 5,8:1 auf Weiss */
body.t-garten{--akz:var(--gruen-hi);--akz-hi:var(--gruen);--akz-tx:var(--gruen-tx);--akz-on:#fff;
              --akz-dk:#2A5A24}              /* 6,3:1 auf Weiss */

.btn-akz{background:var(--akz);color:var(--akz-on)}
.btn-akz:hover{background:var(--akz-hi);color:var(--akz-on)}
.btn-ghost:hover{border-color:var(--akz-tx);color:var(--akz-tx)}
.kick.akz{color:var(--akz-tx)}

/* ---------- Bereichsmarke + Brotkrumen ---------- */
.brd-line{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.brd-area{display:inline-flex;align-items:center;gap:8px;background:var(--akz);color:var(--akz-on);
  font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 13px;white-space:nowrap}
.brd-area svg{width:15px;height:15px;flex:none}
.brd{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--grey)}
.brd a{color:var(--grey2)}
.brd a:hover{color:var(--akz-tx)}
.brd svg{width:14px;height:14px;opacity:.6}
.brd [aria-current]{color:#fff}

/* ---------- Seiten-Hero ---------- */
.phero{position:relative;background:var(--coal2);border-bottom:1px solid var(--line);overflow:hidden}
.phero .wrap{display:grid;grid-template-columns:1fr 47%;gap:52px;align-items:center;
  padding-top:52px;padding-bottom:52px;min-height:440px}
/* Kleiner als vorher (war clamp(36,5.4vw,72)), damit mehr in eine Zeile geht.
   Und: b.css setzt global hyphens:auto auf h1–h4 — daher „BEGUTACH-TUNG".
   Die Ueberschriften der Baender trennen hier nicht mehr. */
.phero h1{font-family:var(--disp);font-weight:800;font-size:clamp(29px,3.75vw,50px);line-height:1.0;
  letter-spacing:.01em;text-transform:uppercase;margin-top:14px;overflow-wrap:normal;
  /* b.css deckelt h1 global auf 12ch — das war der eigentliche Grund fuer die
     Ein-Wort-Zeilen (gemessen: 287 px Ueberschrift in einer 622 px breiten Spalte). */
  max-width:none}
.phero h1,.bl-h,.blk h2,.sp-txt h2,.wside h2{hyphens:manual;-webkit-hyphens:manual}
.phero h1 em{display:block;font-style:normal;color:var(--akz-tx)}
.phero .lead{margin-top:18px;max-width:44ch;color:var(--grey2);font-size:18px;line-height:1.55}
.phero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* Signature B1 — die Diagonale mit Akzent-Fuge an der linken Bildkante */
.pfig{position:relative;align-self:stretch;min-height:360px;margin:26px 0;
  clip-path:polygon(8% 0,100% 0,100% 100%,0 100%)}
.pfig img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  filter:contrast(1.06) saturate(.92)}
.pfig::before{content:"";position:absolute;inset:0;z-index:2;background:var(--akz);
  clip-path:polygon(8% 0,calc(8% + 8px) 0,8px 100%,0 100%)}
.pfig figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(to top,rgba(10,13,16,.9),rgba(10,13,16,0));
  color:var(--grey2);font-size:13px;padding:34px 18px 12px 12%}

/* ---------- Faktenleiste ---------- */
/* auto-fit statt 4 feste Spalten: seit der Kostenvoranschlag raus ist (BETRIEBSPROFIL §9), haben drei Leistungsseiten nur drei Fakten. Mit 4 Spalten bliebe ein Loch. */
.pfacts{border-top:1px solid var(--line);background:#0D1116}
.pfacts .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;
  padding-top:24px;padding-bottom:24px}
.pfacts div{position:relative;padding-left:16px}
.pfacts div::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;
  background:var(--akz);opacity:.75}
.pfacts b{display:block;font-family:var(--disp);font-weight:800;font-size:25px;letter-spacing:.02em;
  color:#fff;font-variant-numeric:tabular-nums}
.pfacts span{display:block;font-size:13px;color:var(--grey);margin-top:3px}

/* ============================================================================
   Baender — Grundraster
   ============================================================================ */
.band{padding:84px 0;position:relative}
.band-two{padding-top:76px}
.band-steel{background:var(--steel);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.band-paper{background:var(--paper);color:var(--ink)}
.bl-h{font-family:var(--disp);font-weight:800;font-size:clamp(26px,2.9vw,38px);line-height:1.04;
  letter-spacing:.01em;text-transform:uppercase;margin-top:14px;max-width:27ch}
.bl-lead{margin-top:16px;max-width:60ch;color:var(--grey2);font-size:17.5px;line-height:1.55}
.band-paper .bl-h{color:var(--ink)}
.band-paper .bl-lead{color:#4A5560}
.band-paper .kick{color:var(--akz-dk)}
.band-paper .kick::before{background:var(--akz-dk)}

/* ---------- Band 1: Text mit Randspalte ---------- */
.two{display:grid;grid-template-columns:1fr 344px;gap:60px;align-items:start}
.two > aside{position:sticky;top:20px}
.blk + .blk{margin-top:46px}
.blk h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,2.6vw,34px);line-height:1.06;
  letter-spacing:.01em;text-transform:uppercase;margin-top:0}
.blk p{margin-top:16px;color:var(--grey2);max-width:54ch;line-height:1.6}
.blk p strong{color:#fff;font-weight:600}

.chk{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:11px}
.chk li{position:relative;padding-left:32px;color:var(--grey2);line-height:1.5}
.chk li::before{content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;
  border:2px solid var(--akz)}
.chk li::after{content:"";position:absolute;left:5px;top:.75em;width:8px;height:4px;
  border-left:2px solid var(--akz);border-bottom:2px solid var(--akz);transform:rotate(-45deg)}
.chk li b{color:#fff;font-weight:600}

.hint{margin-top:28px;border-left:3px solid var(--akz);background:var(--coal2);padding:18px 22px}
.hint b{color:#fff}
.hint p{color:var(--grey2);max-width:70ch;margin-top:6px}
.band-steel .hint,.band-split .hint{background:#12171C}

/* ---------- Randspalte: EINE Karte statt vier ---------- */
.side-card{background:var(--steel);border:1px solid var(--line2);padding:24px 22px}
.side-card + .side-card{margin-top:16px}
.side-main{border-top:3px solid var(--akz)}
.sc-kick{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--grey)}
.sc-kick svg{width:16px;height:16px;flex:none;color:var(--akz-tx)}
.side-card .tel{display:block;font-family:var(--disp);font-weight:800;font-size:28px;letter-spacing:.02em;
  color:var(--akz-tx);margin-top:9px;font-variant-numeric:tabular-nums}
.sc-alt{margin-top:9px;font-size:14.5px;color:var(--grey2);line-height:1.6}
.sc-alt a{color:var(--grey2);border-bottom:1px solid var(--line2);
  display:inline-flex;align-items:center;min-height:24px}
.sc-alt a:hover{color:#fff;border-bottom-color:var(--akz)}
.side-card .btn{width:100%;margin-top:16px}
.side-card .btn-akz{background:transparent;color:var(--akz-tx);border-color:var(--akz)}
.side-card .btn-akz:hover{background:var(--akz);color:var(--akz-on)}
.sc-sep{height:1px;background:var(--line2);margin:22px -22px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin-top:12px;font-size:15px}
.dl dt{color:var(--grey)}
.dl dd{margin:0;text-align:right;color:#fff;font-weight:500;font-variant-numeric:tabular-nums}
.sc-adr{margin-top:11px;font-size:14.5px;color:var(--grey2);line-height:1.6}
.sc-map{display:inline-flex;align-items:center;gap:8px;margin-top:13px;font-family:var(--disp);
  font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--akz-tx);
  min-height:28px}
.sc-map svg{width:15px;height:15px}
.sc-map:hover{gap:12px}
.side-fig{padding:0;border-top:0}
.side-fig figure{margin:0}
.side-fig img{width:100%;height:196px;object-fit:cover;display:block;filter:contrast(1.06) saturate(.92)}
.side-fig figcaption{font-size:12.5px;color:var(--grey);padding:11px 22px 14px}

/* ---------- Band 2: Ablauf als Zeitstrahl ---------- */
.steps{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.steps li{position:relative;padding:0 28px 0 0}
.steps li::after{content:"";position:absolute;left:0;right:0;top:26px;height:2px;background:var(--line2)}
.steps li:last-child::after{right:28px}
.st-n{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;background:var(--akz);color:var(--akz-on);
  font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.steps b{display:block;font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.03em;
  text-transform:uppercase;color:#fff;margin-top:22px}
.steps p{margin-top:9px;color:var(--grey2);font-size:15.5px;line-height:1.55}

/* ---------- Band 3: Foto-Split ---------- */
.band-split .wrap{display:grid;grid-template-columns:52% 1fr;gap:0;align-items:center}
.sp-fig{margin:0;position:relative;align-self:stretch;min-height:470px}
.sp-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:contrast(1.06) saturate(.92)}
.sp-txt{position:relative;z-index:2;background:var(--steel);border-left:3px solid var(--akz);
  padding:44px 46px 48px;margin-left:-72px;box-shadow:-22px 24px 50px rgba(0,0,0,.45)}
.band-split.flip .wrap{grid-template-columns:1fr 52%}
.band-split.flip .sp-fig{order:2}
.band-split.flip .sp-txt{order:1;margin-left:0;margin-right:-72px;
  border-left:0;border-right:3px solid var(--akz);box-shadow:22px 24px 50px rgba(0,0,0,.45)}
.sp-txt h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,2.7vw,36px);line-height:1.04;
  letter-spacing:.01em;text-transform:uppercase}
.sp-txt p{margin-top:16px;color:var(--grey2);max-width:52ch;line-height:1.6}
.sp-txt p strong{color:#fff;font-weight:600}

/* ---------- Band 4: randlose Bildstrecke ---------- */
.band-strip{padding-bottom:0}
.fstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:38px}
.fstrip figure{margin:0;position:relative;overflow:hidden}
.fstrip img{width:100%;height:clamp(240px,25vw,360px);object-fit:cover;display:block;
  filter:contrast(1.06) saturate(.92);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.fstrip figure:hover img{transform:scale(1.05)}
.fstrip figure:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:var(--akz);z-index:2}
.fstrip figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(to top,rgba(10,13,16,.92),rgba(10,13,16,0));
  color:#E3E9ED;font-size:13.5px;padding:38px 16px 14px}

/* ---------- Band 5: Marken ---------- */
.band-marks{padding:56px 0;background:#0D1116;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.band-marks .wrap{display:grid;grid-template-columns:236px 1fr;gap:48px;align-items:center}
.mk-h{position:relative;font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--akz-tx);line-height:1.5;padding-top:18px}
.mk-h::before{content:"";position:absolute;left:0;top:0;width:44px;height:3px;background:var(--akz)}
.mk-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:14px;align-items:stretch}
.mk-row img{width:100%;height:78px;background:#fff;padding:14px 18px;object-fit:contain;
  transition:transform .2s ease-out}
.mk-row img:hover{transform:translateY(-3px)}

/* ---------- Band 6: FAQ zweispaltig ---------- */
.band-faq{background:var(--coal2)}
.faq2{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:34px}
.faq{border-top:1px solid var(--line2)}
.faq details{border-bottom:1px solid var(--line2)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.02em;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--akz-tx)}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--akz);border-bottom:2px solid var(--akz);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 0 20px;color:var(--grey2);max-width:56ch;line-height:1.6}
.faq details p + p{padding-top:0;margin-top:-8px}

/* ---------- Band 7: Kartenraster mit Foto ---------- */
.rel{display:grid;gap:16px;margin-top:34px}
.rel-3{grid-template-columns:repeat(3,1fr)}
.rel a{display:flex;flex-direction:column;background:#fff;border:1px solid var(--paper2);
  border-top:3px solid var(--paper2);transition:border-color .2s,box-shadow .2s,transform .2s}
.rel a:hover{border-top-color:var(--akz-dk);box-shadow:0 14px 30px rgba(16,20,24,.13);transform:translateY(-3px)}
.rel figure{margin:0;overflow:hidden;background:#E4E1D8}
.rel figure img{width:100%;height:172px;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.rel a:hover figure img{transform:scale(1.06)}
.rc-t{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.rel b{display:block;font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink)}
.rel span{display:block;margin-top:7px;font-size:15px;color:#4A5560;line-height:1.5}
.rel i{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:14px;font-style:normal;
  font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--akz-dk)}
.rel i svg{width:15px;height:15px;transition:transform .2s}
.rel a:hover i svg{transform:translateX(4px)}
/* Das Kartenraster der Bereichs-Uebersicht steht auf dunklem Grund */
.band-grid .rel a{background:var(--steel);border-color:var(--line2);border-top-color:var(--line2)}
.band-grid .rel a:hover{border-top-color:var(--akz);box-shadow:0 18px 34px rgba(0,0,0,.45)}
.band-grid .rel b{color:#fff}
.band-grid .rel span{color:var(--grey2)}
.band-grid .rel i{color:var(--akz-tx)}
.band-grid .rel figure{background:var(--coal2)}

/* ---------- Band 8: Team und Bewertungen (hell) ---------- */
.pe-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;margin-top:36px}
.band-people .crew{background:#fff;border:1px solid var(--paper2);padding:28px}
.band-people .faces b{color:var(--ink)}
.band-people .faces span{color:#5C6873}
.band-people .lehr{color:#4A5560}
.band-people .lehr b{color:var(--ink)}
.band-people .scorebar span{color:#C3CCD4}
.band-people .rvs{margin-top:16px}
.band-people .revnote{color:#4F5C69}

/* ---------- Band 9: Formular + Karte ---------- */
.fm-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:start;margin-top:8px}
.fm-txt .mapbox{margin-top:28px}
.fm-txt .mapbox iframe{height:470px}
.band-form .form{margin-top:0}

/* ---------- Handlungsband ---------- */
.ctab{background:var(--coal2);color:#fff;border-top:3px solid var(--akz)}
.ctab .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding-top:44px;padding-bottom:44px}
.ctab-t{font-family:var(--disp);font-weight:800;font-size:clamp(24px,2.6vw,34px);letter-spacing:.02em;
  text-transform:uppercase}
.ctab p{margin-top:8px;max-width:52ch;color:var(--grey2)}
.ctab .cta{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Preisliste (Onlineshop) ----------
   Typografische Liste statt Produktkacheln: die Bilder liegen im Jimdo-Shop
   und sind Herstellerfotos — die holen wir nicht her. Preise stehen mit
   Stand-Angabe und fuehren in den Shop. */
.band-paper .plist{background:#DCD8CC}
.plist{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:1px;background:var(--line)}
.plist li{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  background:#fff;padding:15px 20px;flex-wrap:wrap}
.plist .pn{font-weight:500;color:var(--ink);flex:1 1 62%}
/* nowrap gehoert an die einzelnen Angaben, NICHT an die Gruppe: sonst steht
   "2.999,00 € 3.348,00 € derzeit nicht verfuegbar" in einer Zeile und traegt
   die Spalte bei 390 px auf 620 px auf (gemessen 20.08.2026). */
.plist .pp{display:inline-flex;align-items:baseline;gap:10px;flex:0 1 auto;flex-wrap:wrap;
  font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:.02em;
  color:var(--akz-dk);font-variant-numeric:tabular-nums}
.plist .pv,.plist s,.plist .rab,.plist .nv{white-space:nowrap}
.plist s{font-family:var(--body);font-weight:400;font-size:14px;color:#6B7681}
.plist .rab{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.06em;
  color:#fff;background:var(--akz-dk);padding:3px 7px}
.plist .nv{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:#5C6873;border:1px solid #C9C4B7;padding:3px 7px}
.pnote{margin-top:16px;font-size:13.5px;color:#4A5560}
.pnote a{color:var(--akz-dk);text-decoration:underline;display:inline-flex;align-items:center;min-height:24px}

/* ============================================================================
   Breiten
   ============================================================================ */
@media(max-width:1180px){
  .two{grid-template-columns:1fr 320px;gap:40px}
  .band-split .wrap{gap:40px}
  .band-marks .wrap{grid-template-columns:1fr;gap:24px}
  .mk-row{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
}
@media(max-width:1040px){
  .phero .wrap{grid-template-columns:1fr;gap:32px;padding-top:38px;padding-bottom:0;min-height:0}
  .pfig{min-height:300px;margin:0 -24px;clip-path:none}
  .pfig::before{display:none}
  .pfig figcaption{padding-left:18px}
  .pfacts .wrap{grid-template-columns:repeat(2,1fr);gap:18px}
  .two{grid-template-columns:1fr;gap:40px}
  .two > aside{position:static}
  .side-main{max-width:none}
  .steps{grid-template-columns:repeat(2,1fr);gap:34px 0}
  .steps li:nth-child(2)::after{right:28px}
  .band-split .wrap,.band-split.flip .wrap{grid-template-columns:1fr;gap:0}
  .sp-fig,.band-split.flip .sp-fig{min-height:280px;margin:0 -24px;order:1}
  .sp-txt,.band-split.flip .sp-txt{order:2;margin:-40px 0 0;padding:32px 26px 34px;
    border-left:3px solid var(--akz);border-right:0;box-shadow:none}
  .faq2{grid-template-columns:1fr;gap:0}
  .faq2 .faq + .faq{border-top:0}
  .pe-grid{grid-template-columns:1fr;gap:32px}
  .fm-grid{grid-template-columns:1fr;gap:32px}
  .rel-3{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .fstrip{grid-template-columns:1fr;gap:2px}
  .fstrip img{height:240px}
}
@media(max-width:620px){
  .band{padding:56px 0}
  .band-marks{padding:40px 0}
  .brd-line{gap:11px;margin-bottom:16px}
  .phero h1{font-size:clamp(26px,7.4vw,36px);line-height:1.06;text-wrap:wrap;overflow-wrap:break-word}
  .phero .lead{font-size:16.5px}
  .phero .cta .btn,.ctab .cta .btn{width:100%;justify-content:center}
  .pfacts .wrap{grid-template-columns:1fr;gap:14px}
  .pfacts b{font-size:22px}
  .steps{grid-template-columns:1fr;gap:26px}
  .steps li{padding-right:0}
  .steps li::after{display:none}
  .steps b{margin-top:16px}
  .rel-3{grid-template-columns:1fr}
  .bl-h{font-size:clamp(23px,6.6vw,29px)}
  .plist li{flex-direction:column;align-items:flex-start;gap:6px}
  .plist .pn,.plist .pp{flex:0 0 auto;width:100%}
  .plist .pp{font-size:19px}
  .mk-row img{height:40px;min-width:82px}
}

/* Tap-Ziele */
.brd a,.brd span{display:inline-flex;align-items:center;min-height:24px}

/* ============================================================================
   Sortiments-Band der Shop-Seite (20.08.2026)
   Alle 28 Artikel des eigenen Shops als Kacheln. Bewusst ohne Warenkorb —
   der Shop selbst bittet um Kontakt vor der Bestellung.
   ============================================================================ */
.shopband .bl-lead{max-width:70ch}

/* ---------- Filterleiste ---------- */
.shopbar{margin-top:34px;background:#fff;border:1px solid var(--paper2);padding:24px 26px 20px;
  display:grid;gap:20px}
.fgrp{display:grid;gap:10px}
.flab{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:#6B7681}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--body);font-size:14.5px;font-weight:500;color:var(--ink);
  background:#fff;border:1px solid #C9C4B7;padding:9px 14px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;min-height:40px;
  transition:background .14s ease-out,border-color .14s ease-out,color .14s ease-out}
.chip i{font-style:normal;font-size:12.5px;font-weight:700;color:#6B7681;
  font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--akz-dk);color:var(--akz-dk)}
.chip.on{background:var(--akz-dk);border-color:var(--akz-dk);color:#fff}
.chip.on i{color:rgba(255,255,255,.78)}
.chip:focus-visible{outline:2px solid var(--akz-dk);outline-offset:2px}
.fnote-s{font-size:13px;color:#6B7681;margin-top:2px}

.fbot{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;
  border-top:1px solid var(--paper2);padding-top:18px}
.tog{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--ink);
  cursor:pointer;min-height:40px}
.tog input{width:24px;height:24px;accent-color:var(--akz-dk);cursor:pointer}
.sortl{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:#4A5560}
.sortl select{font-family:var(--body);font-size:14.5px;color:var(--ink);background:#fff;
  border:1px solid #C9C4B7;padding:9px 12px;min-height:40px;cursor:pointer}
.sortl select:focus-visible{outline:2px solid var(--akz-dk);outline-offset:2px}
.scount{margin-left:auto;font-family:var(--disp);font-weight:800;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--akz-dk);
  font-variant-numeric:tabular-nums}
.sreset{font-family:var(--body);font-size:14px;color:#4A5560;background:none;border:0;
  border-bottom:1px solid #A9A296;padding:4px 0;cursor:pointer;min-height:32px}
.sreset:hover{color:var(--akz-dk);border-bottom-color:var(--akz-dk)}

/* ---------- Produktkacheln ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px;margin-top:22px}
.pcard{position:relative;background:#fff;border:1px solid var(--paper2);display:flex;
  transition:box-shadow .2s ease-out,transform .2s ease-out,border-color .2s ease-out}
.pcard:hover{box-shadow:0 16px 32px rgba(16,20,24,.13);transform:translateY(-3px);
  border-color:#C9C4B7}
.pcard[hidden]{display:none}
.pcard > a{display:flex;flex-direction:column;width:100%}
.pcard figure{margin:0;background:#fff;border-bottom:1px solid var(--paper2)}
.pcard figure img{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:contain;padding:14px}
.pc-t{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.pc-brand{font-family:var(--disp);font-weight:800;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--akz-dk)}
/* zwei Zeilen Platz fuer den Namen, damit die Preise einer Reihe auf einer Hoehe stehen */
.pcard b{display:block;margin-top:7px;font-size:15.5px;font-weight:600;line-height:1.35;
  color:var(--ink);min-height:2.7em}
.pc-p{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;margin-top:12px}
.pc-p .pv{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:.02em;
  color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.pc-p s{font-size:14px;color:#6B7681;white-space:nowrap}
.pc-go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:14px;
  font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--akz-dk)}
.pc-go svg{width:14px;height:14px;transition:transform .2s}
.pcard:hover .pc-go svg{transform:translateX(4px)}
.pc-rab,.pc-nv{position:absolute;top:10px;z-index:2;font-family:var(--body);font-weight:700;
  font-size:12px;letter-spacing:.05em;padding:5px 9px;white-space:nowrap}
.pc-rab{left:10px;background:var(--akz-dk);color:#fff}
.pc-nv{right:10px;background:#3A424B;color:#fff;text-transform:uppercase;font-size:11px;letter-spacing:.08em}
.pcard.aus figure img{opacity:.62}
.pcard.aus b{color:#4A5560}
.pcard.aus .pc-p .pv{color:#4A5560}

.pempty{margin-top:26px;font-size:16.5px;color:#4A5560}
.linklike{background:none;border:0;border-bottom:1px solid var(--akz-dk);color:var(--akz-dk);
  font:inherit;padding:0;cursor:pointer}

.shopfoot{margin-top:28px;display:grid;gap:20px}
.shopfoot .cta{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Was beim Kauf gilt ---------- */
.ki-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line2)}
.ki-grid > div{background:var(--steel);padding:26px 24px}
.ki-grid b{display:block;font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.03em;
  text-transform:uppercase;color:#fff;line-height:1.2}
.ki-grid p{margin-top:10px;font-size:15px;color:var(--grey2);line-height:1.55}
.kaufinfo{padding:56px 0}

@media(max-width:1040px){
  .ki-grid{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
@media(max-width:620px){
  .shopbar{padding:20px 18px 16px}
  .pgrid{grid-template-columns:1fr 1fr;gap:10px}
  .pcard figure img{padding:10px}
  .pc-t{padding:12px 13px 14px}
  .pcard b{font-size:14px}
  .pc-p .pv{font-size:19px}
  .ki-grid{grid-template-columns:1fr}
  .scount{margin-left:0;width:100%}
  .sortl{width:100%}
  .sortl select{flex:1}
}

/* ============================================================================
   Produktfoto im Split-Band (freigestelltes Herstellerfoto statt Stockbild)
   ============================================================================ */
/* Das Herstellerfoto hat selbst einen schwarzen Grund (gemessen: 0,0,0 an allen Ecken) —
   die Flaeche bekommt denselben, sonst steht ein sichtbares Rechteck im Rechteck. */
.sp-fig.produkt{background:#000;display:flex;align-items:center;justify-content:center}
.sp-fig.produkt img{position:relative;width:100%;height:100%;object-fit:contain;padding:18px;
  filter:none}

/* Vier Modelle nebeneinander auf einer Leistungsseite */
.pgrid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1040px){ .pgrid-4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .pgrid-4{grid-template-columns:1fr 1fr} }

/* ============================================================================
   Seiten, die noch nicht ausgearbeitet sind
   Sie sollen wie ein bewusster Zwischenstand aussehen, nicht wie ein Fehler:
   Kopf, Hero und Fuss wie ueberall, dazu die geplante Gliederung.
   ============================================================================ */
.wipband{padding-top:70px}
.wipbox{background:var(--steel);border:1px solid var(--line2);border-top:3px solid var(--akz);
  padding:34px 36px 38px}
.wiptag{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--akz-tx)}
.wiptag::before{content:"";width:9px;height:9px;background:var(--akz);flex:none}
.wipbox h2{margin-top:14px;font-family:var(--disp);font-weight:800;
  font-size:clamp(24px,2.6vw,34px);line-height:1.06;letter-spacing:.01em;text-transform:uppercase}
.wipbox p{margin-top:16px;color:var(--grey2);max-width:56ch;line-height:1.6}
.wiplead{font-weight:600;color:#fff !important;margin-top:26px !important}
.wiplist{list-style:none;padding:0;margin:14px 0 0;counter-reset:w;display:grid;gap:1px;
  background:var(--line2)}
.wiplist li{counter-increment:w;background:var(--coal2);padding:14px 18px 14px 52px;position:relative;
  color:var(--grey2);font-size:16px}
.wiplist li::before{content:counter(w,decimal-leading-zero);position:absolute;left:18px;top:14px;
  font-family:var(--disp);font-weight:800;font-size:14px;color:var(--akz-tx);
  font-variant-numeric:tabular-nums}
.wipbox .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
/* Der Hero der unfertigen Seite bleibt, wird aber ruhiger gestellt. */
body.wip .phero .cta{display:none}
body.wip .pfacts{display:none}
@media(max-width:620px){
  .wipbox{padding:26px 20px 30px}
  .wipbox .cta .btn{width:100%;justify-content:center}
}

/* ============================================================================
   Über uns — die einzige Seite mit beiden Spurfarben
   Auf jeder anderen Seite gilt genau EIN Akzent. Der Betrieb ist der Ort, an dem
   die zwei Werkstätten zusammenkommen — deshalb stehen hier Gelb und Grün
   nebeneinander. Das ist die Signatur dieser Seite und kommt sonst nirgends vor.
   ============================================================================ */

/* ---------- Randloser Hero mit dem echten Betriebsfoto ---------- */
.uhero{position:relative;isolation:isolate;display:flex;align-items:flex-end;
  min-height:min(640px,78vh);overflow:hidden;background:var(--coal2)}
.uhero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  object-position:50% 46%;filter:contrast(1.04) saturate(.94)}
.uh-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(10,13,16,.96) 0 34%,rgba(10,13,16,.86) 52%,
    rgba(10,13,16,.52) 78%,rgba(10,13,16,.42) 100%),
    linear-gradient(to top,rgba(10,13,16,.9),rgba(10,13,16,0) 46%)}
.uhero .wrap{position:relative;padding-top:64px;padding-bottom:68px}
.uhero h1{font-family:var(--disp);font-weight:800;font-size:clamp(29px,3.75vw,50px);
  line-height:1.0;letter-spacing:.01em;text-transform:uppercase;margin-top:14px;
  max-width:none;overflow-wrap:normal;hyphens:manual;-webkit-hyphens:manual}
.uhero h1 em{display:block;font-style:normal;color:var(--akz-tx)}
.uhero .lead{margin-top:18px;max-width:48ch;color:#DBE2E8;font-size:18px;line-height:1.55}
.uhero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.uh-cap{position:absolute;right:24px;bottom:14px;font-size:12.5px;color:var(--grey);
  z-index:1;max-width:46ch;text-align:right}
/* Die gelb-grüne Naht schließt den Hero ab — beide Spuren, ein Haus. */
.uhero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:1;
  background:linear-gradient(to right,var(--yellow) 0 50%,var(--gruen-hi) 50% 100%)}

/* ---------- Zwei Werkstätten, eine Telefonnummer ---------- */
.zwei{background:var(--coal2)}
.zw-grid{display:grid;grid-template-columns:1fr 30px 1fr;margin-top:38px}
.zw{background:var(--steel);padding:32px 32px 34px;border-top:4px solid var(--line2)}
.zw.a{border-top-color:var(--yellow)}
.zw.g{border-top-color:var(--gruen-hi)}
.zw-lbl{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px}
.zw-lbl svg{width:15px;height:15px}
.zw.a .zw-lbl{background:var(--yellow);color:#14181C}
.zw.g .zw-lbl{background:var(--gruen);color:#fff}
.zw b{display:block;margin-top:18px;font-family:var(--disp);font-weight:800;font-size:22px;
  letter-spacing:.02em;text-transform:uppercase;line-height:1.1}
.zw p{margin-top:13px;color:var(--grey2);line-height:1.6;max-width:44ch}
.zw-go{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:var(--disp);
  font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;min-height:28px}
.zw-go svg{width:15px;height:15px;transition:transform .2s}
.zw-go:hover svg{transform:translateX(4px)}
.zw.a .zw-go{color:var(--yellow)} .zw.g .zw-go{color:var(--gruen-tx)}
/* Die Fuge: oben gelb, unten grün, schräg — die Diagonale aus dem Hero der Startseite */
.zw-fuge{position:relative;overflow:hidden;background:var(--coal2)}
/* clip-path statt skewX: eine geneigte Flaeche haengt sonst an der Kartenhoehe —
   bei 250 px Karte war von der Naht nur noch die Mitte zu sehen (gemessen). */
.zw-fuge::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--yellow) 0 50%,var(--gruen-hi) 50% 100%);
  clip-path:polygon(62% 0,96% 0,38% 100%,4% 100%)}
.zw-note{margin-top:24px;color:var(--grey2);max-width:74ch;line-height:1.6}
.zw-note + .zw-note{margin-top:12px}

/* ---------- Werte und USPs ---------- */
.werte{background:var(--coal)}
.we-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:38px;background:var(--line2)}
.we{position:relative;background:var(--coal2);padding:30px 32px 32px 34px}
.we::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.we.a::before{background:var(--yellow)}
.we.g::before{background:var(--gruen-hi)}
.we-n{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.14em;
  color:var(--grey);font-variant-numeric:tabular-nums}
.we b{display:block;margin-top:10px;font-family:var(--disp);font-weight:800;
  font-size:clamp(20px,2.1vw,26px);letter-spacing:.02em;text-transform:uppercase;line-height:1.12}
.we.a b{color:var(--yellow)} .we.g b{color:var(--gruen-tx)}
.we p{margin-top:13px;color:var(--grey2);line-height:1.6;max-width:46ch}
.we-q{margin:20px 0 0;border-left:2px solid var(--line2);padding:4px 0 4px 16px}
.we-q{color:#DDE4EA;font-size:15.5px;line-height:1.55}
.we-q cite{display:block;margin-top:8px;font-style:normal;font-size:13px;color:var(--grey)}

/* ---------- Chronik ---------- */
.chron{list-style:none;padding:0;margin:38px 0 0;position:relative}
.chron::before{content:"";position:absolute;left:225px;top:0;bottom:0;width:2px;
  background:var(--line2)}
.chron li{position:relative;display:grid;grid-template-columns:208px 1fr;gap:36px;
  padding:26px 0;border-top:1px solid var(--line2)}
.chron li:last-child{border-bottom:1px solid var(--line2)}
.chron li::before{content:"";position:absolute;left:220px;top:36px;width:12px;height:12px;
  background:var(--yellow);z-index:1}
.chron li:nth-child(even)::before{background:var(--gruen-hi)}
.ch-j{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3vw,42px);line-height:1.05;
  letter-spacing:.01em;color:#fff;font-variant-numeric:tabular-nums;text-transform:uppercase}
.chron li:nth-child(odd) .ch-j{color:var(--yellow)}
.chron li:nth-child(even) .ch-j{color:var(--gruen-tx)}
.ch-t b{display:block;font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.03em;
  text-transform:uppercase;color:#fff}
.ch-t p{margin-top:9px;color:var(--grey2);line-height:1.6;max-width:60ch}

@media(max-width:1040px){
  .zw-grid{grid-template-columns:1fr;gap:2px}
  .zw-fuge{height:16px}
  .zw-fuge::before{inset:4px 0;
    background:linear-gradient(to right,var(--yellow) 0 50%,var(--gruen-hi) 50% 100%);
    clip-path:polygon(0 62%,0 4%,100% 38%,100% 96%)}
  .we-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .chron::before{left:9px}
  .chron li{grid-template-columns:1fr;gap:10px;padding-left:34px}
  .chron li::before{left:4px;top:32px}
}
@media(max-width:620px){
  /* Spalte statt Zeile: sonst wird .uh-cap (hier position:static) ein zweites Flex-Kind neben .wrap und bricht nach jedem Wort um. Fehler aus dem Prototyp, 11.09.2026. */
  .uhero{min-height:0;flex-direction:column;justify-content:flex-end;align-items:stretch}
  .uhero .wrap{padding-top:40px;padding-bottom:56px}
  .uhero h1{font-size:clamp(26px,7.4vw,36px);line-height:1.06;text-wrap:wrap;
    overflow-wrap:break-word}
  .uhero .lead{font-size:16.5px}
  .uhero .cta .btn{width:100%;justify-content:center}
  .uh-cap{position:static;text-align:left;padding:0 24px 16px;max-width:none}
  .zw{padding:24px 22px 26px}
  .we{padding:24px 22px 26px 26px}
}

/* ============================================================================
   Produktseite (Beispiel: solo by AL-KO Rasentraktor T 22-105.4)
   Galerie links, Kaufblock rechts. Kein Warenkorb — der Shop bittet selbst um
   Kontakt vor der Bestellung; die Seite bildet diesen Vorgang ab.
   ============================================================================ */
.pdp-band{padding-top:34px}
.pdp{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:start;margin-top:8px}

/* ---------- Galerie ---------- */
.pgal-main{position:relative;margin:0;background:#fff;border:1px solid var(--line2)}
.pgal-main img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;padding:22px}
.pgal-rab{position:absolute;top:14px;left:14px;background:var(--akz-dk);color:#fff;
  font-weight:700;font-size:13px;letter-spacing:.05em;padding:7px 11px}
.pgal-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.pt{padding:0;background:#fff;border:1px solid var(--line2);cursor:pointer;
  transition:border-color .16s ease-out,transform .16s ease-out}
.pt img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;padding:6px}
.pt:hover{transform:translateY(-2px)}
.pt.on{border-color:var(--akz);border-width:2px}
.pt:focus-visible{outline:2px solid var(--akz);outline-offset:2px}
.pgal-note{margin-top:14px;font-size:13px;color:var(--grey)}

/* ---------- Kaufblock ---------- */
.pbuy{background:var(--steel);border:1px solid var(--line2);border-top:3px solid var(--akz);
  padding:32px 34px 34px}
.pb-marke{display:block;font-family:var(--disp);font-weight:800;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--akz-tx)}
.pbuy h1{margin-top:12px;font-family:var(--disp);font-weight:800;
  font-size:clamp(26px,2.7vw,38px);line-height:1.06;letter-spacing:.01em;text-transform:uppercase;
  max-width:none;hyphens:manual;-webkit-hyphens:manual}
.pb-claim{margin-top:14px;color:var(--grey2);font-size:17px;line-height:1.55;max-width:46ch}
.pb-preis{display:flex;align-items:baseline;flex-wrap:wrap;gap:14px;margin-top:26px}
.pb-preis .pv{font-family:var(--disp);font-weight:800;font-size:clamp(32px,3.4vw,44px);
  line-height:1;letter-spacing:.02em;color:#fff;font-variant-numeric:tabular-nums}
.pb-preis s{font-size:18px;color:var(--grey)}
.pb-rab{background:var(--akz);color:var(--akz-on);font-weight:700;font-size:13px;
  letter-spacing:.05em;padding:6px 10px}
.pb-ust{margin-top:10px;font-size:14.5px;color:var(--grey)}
.pb-da{display:inline-flex;align-items:center;gap:7px;color:var(--akz-tx);font-weight:600}
.pb-da svg{width:16px;height:16px}
.pb-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.pb-cta .btn{flex:1 1 auto;justify-content:center}
.pb-lief{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px}
.pb-lief li{position:relative;padding-left:30px;color:var(--grey2);font-size:15.5px;line-height:1.5}
.pb-lief li::before{content:"";position:absolute;left:0;top:.34em;width:16px;height:16px;
  border:2px solid var(--akz)}
.pb-lief li::after{content:"";position:absolute;left:4px;top:.62em;width:8px;height:4px;
  border-left:2px solid var(--akz);border-bottom:2px solid var(--akz);transform:rotate(-45deg)}
.pb-gar{margin-top:26px;background:var(--coal2);border-left:3px solid var(--akz);padding:18px 22px}
.pb-gar b{display:block;font-family:var(--disp);font-weight:800;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--akz-tx)}
.pb-gar p{margin-top:8px;color:var(--grey2);font-size:15px;line-height:1.55}
.pb-gar strong{color:#fff;font-weight:600}
.pb-shop{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-family:var(--disp);
  font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--akz-tx);min-height:32px}
.pb-shop svg{width:15px;height:15px;transition:transform .2s}
.pb-shop:hover svg{transform:translateX(4px)}

/* ---------- Produktdetails + Technik ---------- */
.pdet{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start;margin-top:34px}
.pdet-list{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.pdet-list li{position:relative;padding-left:30px;color:#3A444E;font-size:16.5px;line-height:1.55}
.pdet-list li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:2px;
  background:var(--akz-dk)}
.pdet-tech{background:#fff;border:1px solid var(--paper2);padding:26px 28px 28px}
.pdet-tech h3{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink)}
.ptech{margin:18px 0 0;display:grid;gap:1px;background:var(--paper2)}
.ptech div{display:flex;justify-content:space-between;gap:16px;background:#fff;padding:11px 2px}
.ptech dt{color:#4A5560;font-size:15px}
.ptech dd{margin:0;color:var(--ink);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.pdet-tech .pnote{margin-top:16px}

@media(max-width:1040px){
  .pdp{grid-template-columns:1fr;gap:34px}
  .pdet{grid-template-columns:1fr;gap:34px}
}
@media(max-width:620px){
  .pbuy{padding:24px 22px 26px}
  .pgal-thumbs{grid-template-columns:repeat(5,1fr);gap:6px}
  .pb-cta .btn{width:100%}
}

/* ============================================================================
   Produkt-Anfrageformular mit Beratungstermin
   Eigenes Formular, nicht das Werkstatt-Terminformular: andere Fragen, andere
   Zielgruppe. Rechts laeuft die Zusammenfassung mit dem gewaehlten Artikel mit.
   ============================================================================ */
.band-anfrage{padding-top:64px}
.an-grid{display:grid;grid-template-columns:1fr 348px;gap:56px;align-items:start}

.an-schritt{display:grid;grid-template-columns:56px 1fr;gap:22px;padding:30px 0;
  border-top:1px solid var(--line2)}
.an-schritt:first-child{border-top:0;padding-top:0}
.an-nr{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:var(--akz);color:var(--akz-on);font-family:var(--disp);font-weight:800;
  font-size:17px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.an-schritt h2{font-family:var(--disp);font-weight:800;font-size:clamp(20px,2.1vw,26px);
  line-height:1.1;letter-spacing:.02em;text-transform:uppercase}
.an-schritt > div > p{margin-top:11px;color:var(--grey2);font-size:15.5px;line-height:1.55;
  max-width:56ch}
.an-schritt .fields{margin-top:20px}
.an-form optgroup{background:var(--coal2);color:var(--grey);font-style:normal}
.an-form option{background:var(--coal2);color:#fff}

/* ---------- Auswahlkarten ---------- */
.an-wahl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.an-wahl.zwei{grid-template-columns:1fr 1fr}
.an-wahl.drei{grid-template-columns:repeat(3,1fr)}
.an-wahl label{display:flex;align-items:flex-start;gap:12px;background:var(--steel);
  border:1px solid var(--line2);padding:16px 18px;cursor:pointer;
  transition:border-color .15s ease-out,background .15s ease-out}
.an-wahl label:hover{border-color:var(--akz)}
.an-wahl input{width:24px;height:24px;flex:none;margin-top:1px;accent-color:var(--akz)}
.an-wahl b{display:block;font-size:15.5px;font-weight:600;color:#fff;line-height:1.3}
.an-wahl em{display:block;font-style:normal;margin-top:6px;font-size:14px;color:var(--grey2);
  line-height:1.45}
.an-wahl label:has(input:checked){border-color:var(--akz);background:#1D262E}
.an-hinweis{display:flex;align-items:flex-start;gap:10px;margin-top:16px;font-size:14.5px;
  color:var(--grey2)}
.an-hinweis svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--akz-tx)}

/* ---------- Zusammenfassung ---------- */
.an-side{position:sticky;top:20px}
.an-karte{background:var(--steel);border:1px solid var(--line2);border-top:3px solid var(--akz);
  padding:24px 22px}
.an-k-kick{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--grey)}
.an-k-kick svg{width:16px;height:16px;flex:none;color:var(--akz-tx)}
.an-k-fig{margin:16px 0 0;background:#fff;border:1px solid var(--line2)}
.an-k-fig img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;padding:12px}
.an-karte > b{display:block;margin-top:16px;font-family:var(--disp);font-weight:800;
  font-size:19px;line-height:1.2;letter-spacing:.02em;color:#fff}
.an-k-kat{margin-top:8px;font-size:14.5px;color:var(--grey2);line-height:1.5}
.an-k-preis{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-top:14px}
.an-k-preis .pv{font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:.02em;
  color:var(--akz-tx);font-variant-numeric:tabular-nums}
.an-k-preis s{font-size:14px;color:var(--grey)}
.an-k-rab{background:var(--akz);color:var(--akz-on);font-weight:700;font-size:12px;
  letter-spacing:.05em;padding:3px 7px}
.an-k-da{margin-top:11px;font-size:14px;line-height:1.45}
.an-k-da.ja{color:var(--akz-tx)}
.an-k-da.nein{color:var(--grey2)}
.an-k-shop{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--disp);
  font-weight:700;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--grey2);min-height:28px}
.an-k-shop svg{width:14px;height:14px}
.an-k-shop:hover{color:var(--akz-tx)}
.an-k-sep{height:1px;background:var(--line2);margin:24px -22px}
.an-k-tel{display:block;margin-top:14px;font-family:var(--disp);font-weight:800;font-size:26px;
  letter-spacing:.02em;color:var(--akz-tx);font-variant-numeric:tabular-nums}
.an-k-adr{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:14.5px;
  color:var(--grey2)}
.an-k-adr svg{width:16px;height:16px;flex:none;color:var(--akz-tx)}

@media(max-width:1040px){
  .an-wahl.drei{grid-template-columns:1fr 1fr}
  .an-grid{grid-template-columns:1fr;gap:34px}
  .an-side{position:static;order:-1}
}
@media(max-width:620px){
  .an-schritt{grid-template-columns:1fr;gap:14px;padding:24px 0}
  .an-wahl,.an-wahl.zwei,.an-wahl.drei{grid-template-columns:1fr}
  .an-form .hero-cta .btn{width:100%;justify-content:center}
}

/* Verweis im Kaufinfo-Band: als Link erkennbar und gross genug zum Antippen */
.ki-grid p a{display:inline-flex;align-items:center;min-height:24px;color:var(--akz-tx);
  border-bottom:1px solid var(--akz)}
.ki-grid p a:hover{color:#fff;border-bottom-color:#fff}

/* Die Pflicht-Marke lief fest auf Gelb — auf der gruenen Spur ist das ein Spurbruch. */
.fields label .req{background:var(--akz);color:var(--akz-on)}

/* ---------- Ergänzungen für die WordPress-Fassung (31.08.2026) ---------- */

/* Geschlossen-Punkt in der Servicezeile: derselbe Punkt, nur grau statt grün.
   Farbe allein trägt die Aussage nicht — daneben steht "Heute geschlossen". */
.dot-off{background:var(--grey);box-shadow:0 0 0 3px rgba(152,164,174,.18)}

/* Aktionen am Fuß der mobilen Navigation. Im Prototyp gab es sie nicht,
   weil dort der Termin-Knopf immer sichtbar war. */
.mnav-cta{display:flex;flex-direction:column;gap:10px;padding:16px 24px 22px;border-top:1px solid var(--line)}
.mnav-cta .btn{justify-content:center}


/* ---------- Quer-Logo im Kopf (11.09.2026) ---------- */
.brand-logo{display:block;height:56px;width:auto}

/* ---------- §57a Jahresleiste: alte und neue Fristen (11.09.2026) ----------
   Quelle WKO, Bundesinnung der Fahrzeugtechniker, Stand 07/2026: ab 19.05.2027 gilt
   fuer PKW und Anhaenger bis 3,5 t 4-2-2-2-1 statt 3-2-1, Toleranz -4/+0.
   Beide Regeln auf derselben Jahresachse, damit man den Unterschied sieht statt liest. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.p57 .rtol{margin-top:4px}
.p57 .rtol span strong{color:#fff;font-weight:600}
.yr-h{margin:0;font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:.02em;
  text-transform:uppercase;line-height:1.05}
.yr-sub{margin-top:8px;font-size:15.5px;color:var(--grey2);max-width:62ch}
.yr-rows{margin-top:34px;display:grid;grid-template-columns:150px repeat(12,minmax(0,1fr));
  row-gap:26px;align-items:center}
.yr-lab{grid-column:1;margin:0}
.yr-lab b{display:block;font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:.03em;line-height:1}
.yr-lab span{display:block;margin-top:4px;font-size:13.5px;color:var(--grey)}
.yr-lab-neu b{color:var(--yellow)}
.yr-track{grid-column:2 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  list-style:none;margin:0;padding:0;position:relative;height:22px}
.yr-track::before{content:"";position:absolute;left:0;right:0;top:9px;height:4px;background:var(--line2)}
.yr-neu::before{background:var(--yellow-dk)}
.yr-track li{grid-row:1;grid-column:var(--j);justify-self:center;position:relative;z-index:1;
  width:22px;height:22px;box-sizing:border-box;border-radius:50%}
.yr-alt li{background:var(--steel);border:4px solid var(--grey)}
.yr-neu li{background:var(--yellow);border:4px solid var(--steel)}
.yr-axis-k{grid-column:1;font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey)}
.yr-axis{grid-column:2 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  border-top:1px solid var(--line2);padding-top:10px;text-align:center;
  font-family:var(--disp);font-weight:700;font-size:15px;color:var(--grey2)}
.yr-note{margin-top:24px;font-size:17px;color:#fff;max-width:62ch}
.p57-src{display:block;margin-top:12px;font-size:13.5px;color:var(--grey);text-decoration:underline;
  text-underline-offset:3px}
.p57-src:hover{color:#fff}
@media(max-width:1240px){ .brand-logo{height:50px} }
@media(max-width:1180px){ .p57 .rail{grid-template-columns:1fr;gap:40px} }
@media(max-width:620px){
  .brand-logo{height:44px}
  .yr-rows{grid-template-columns:repeat(12,minmax(0,1fr));row-gap:10px}
  .yr-lab,.yr-track,.yr-axis{grid-column:1 / -1}
  .yr-track + .yr-lab{margin-top:14px}
  .yr-lab b{display:inline;font-size:21px}
  .yr-lab span{display:inline;margin-left:8px}
  .yr-track{height:16px}
  .yr-track::before{top:6px}
  .yr-track li{width:16px;height:16px;border-width:3px}
  .yr-axis-k{display:none}
  .yr-axis{font-size:13px;margin-top:6px}
}

/* ============================================================
   Startseite, Umbau 14.09.2026 (Fabian): Band Onlineshop und Betrieb
   hinter dem §57a, Plakette, Termin-Knöpfe, Garten-Zeitleiste,
   klickbare Gartengeräte, Terminformular mit gleich hoher Karte.
   Animationen nur mit Klasse .js (header.php) und nur im Bild.
   ============================================================ */
.nw{white-space:nowrap}
.vh{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;white-space:nowrap!important}

.wbars{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}

.p57-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:center}
.p57-kopf .sect-head{margin-bottom:0}
.plakette{margin:0 12px 0 0;width:230px;text-align:center}
/* Seit 29.09.2026 das Foto der echten Plakette (Kundenwunsch) statt der gelben SVG-Grafik.
   Freigestellt mit _src/plakette_freistellen.py, zwei Größen in assets/img/plakette-57a-*.webp. */
.plakette .pk-bild{display:block;width:100%;height:auto;transform:rotate(-7deg);
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.5));transition:transform .8s cubic-bezier(.2,.9,.3,1.15),opacity .5s ease}
.plakette figcaption{margin:22px auto 0;max-width:24ch;font-size:14px;line-height:1.5;color:var(--grey2)}
.js .plakette:not(.an) .pk-bild{opacity:0;transform:rotate(-20deg) scale(.85)}
/* ShortPixel legt am Server <picture> um das Bild. Ohne eigene Box rechnen Höhe in % und
   absolute Lage wieder gegen die figure, sonst fällt das Bild in der Karte auf 172 px Eigenhöhe. */
.plakette picture{display:contents}

.idx-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}

.gz-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:64px;align-items:end}
.gz-kopf .sect-head{margin-bottom:0}
.gz-bild{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border:1px solid #1E3A25;background:#0F2415}
.gz-bild img{display:block;width:100%;height:100%;object-fit:cover}
.gz-bild figcaption{position:absolute;left:0;bottom:0;background:var(--gruen);color:#fff;padding:9px 15px;
  font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.gtl{margin-top:72px;background:#0F2415;border:1px solid #1E3A25;padding:48px 48px 44px}
.gtl-h{font-family:var(--disp);font-weight:800;font-size:clamp(24px,2.4vw,32px);text-transform:uppercase;
  letter-spacing:.02em;line-height:1.05}
.gtl-leiste{position:relative;margin-top:48px}
.gtl-bahn{position:absolute;top:21px;left:calc((100% - 120px) / 12);right:calc((100% - 120px) / 12);height:4px;background:#23452C}
.gtl-fuell{position:absolute;inset:0;background:var(--gruen-tx);transform-origin:left center;
  transition:transform 1.2s cubic-bezier(.45,.05,.3,1) .1s}
.gtl-robo{position:absolute;top:-13px;left:100%;width:40px;height:30px;margin-left:-20px;color:var(--gruen-tx);
  transition:left 1.2s cubic-bezier(.45,.05,.3,1) .1s}
.gtl-robo svg{display:block;width:100%;height:100%;fill:#0F2415;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.gtl-schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.gtl-schritte li{position:relative;text-align:center;transition:opacity .5s ease,transform .5s ease;
  transition-delay:calc(var(--i) * .14s + .1s)}
.gtl-schritte .n{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;margin:0 auto 18px;
  border-radius:50%;background:var(--gruen);border:3px solid var(--gruen-tx);color:#fff;
  font-family:var(--disp);font-weight:800;font-size:18px;transition:background .3s ease;transition-delay:inherit}
.gtl-schritte b{display:block;font-family:var(--disp);font-weight:700;font-size:18px;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.1}
.gtl-schritte p{margin-top:8px;font-size:15px;line-height:1.5;color:#B7D3C2}
.gtl-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px}
.js .gtl:not(.an) .gtl-fuell{transform:scaleX(0)}
.js .gtl:not(.an) .gtl-robo{left:0}
.js .gtl:not(.an) .gtl-schritte li{opacity:0;transform:translateY(14px)}
.js .gtl:not(.an) .gtl-schritte .n{background:#0F2415}

.strip a{display:block;position:relative;color:#fff}
.strip a figure{margin:0}
.strip figcaption b{display:block;font:inherit}
.strip figcaption span{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-family:var(--body);
  font-weight:600;font-size:13px;letter-spacing:.02em;text-transform:none;color:var(--gruen-tx)}
.strip figcaption span::after{content:"";width:14px;height:2px;background:currentColor;transition:width .2s ease}
.strip a:hover figcaption span::after,.strip a:focus-visible figcaption span::after{width:24px}
.strip a:focus-visible{outline:3px solid var(--gruen-tx);outline-offset:3px}

.loc .wrap.locwrap{display:block}
.loc-kopf{margin-bottom:0}
.fm-grid{align-items:stretch}
.loc .fm-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:40px;margin-top:44px}
.fm-karte,.band-form .fm-txt{display:flex;flex-direction:column;min-width:0}
.mapbox.fuellt{position:relative;flex:1 1 auto;min-height:340px;background:var(--coal2)}
.mapbox.fuellt iframe{position:absolute;inset:0;width:100%;height:100%!important;border:0}
.mapbox .cmplz-placeholder-element{background-image:none!important;background-color:transparent!important}
.map-aus{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:24px;text-align:center;font-size:15px;color:var(--grey2)}
.map-aus b{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:.03em;text-transform:uppercase;color:#fff}
.map-link{display:inline-flex;align-items:center;gap:8px;margin-top:12px;align-self:flex-start;min-height:44px;
  font-family:var(--disp);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:14px;color:var(--yellow)}
.map-link svg{width:16px;height:16px}
.loc .form,.band-form .form{margin-top:0}
.loc-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.loc-info .kc{margin-bottom:0}

/* JetFormBuilder im Kleid des Prototyp-Formulars */
.form .jet-form-builder{display:grid!important;gap:14px!important}
.form .jet-form-builder-row{margin:0!important}
.form .wp-block-columns{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px!important;margin:0!important}
.form .wp-block-column{margin:0!important;min-width:0}
.form .jet-form-builder__label{display:block;margin-bottom:6px;font-family:var(--disp);font-weight:700;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.form .jet-form-builder__label-text{font:inherit;color:inherit}
.form .jet-form-builder__required{margin-left:7px;padding:2px 6px;font-size:10px;letter-spacing:.1em;
  background:var(--akz);color:var(--akz-on)}
.form .jet-form-builder__field.text-field,.form .jet-form-builder__field.select-field,
.form .jet-form-builder__field.textarea-field,.form .jet-form-builder__field.date-field{width:100%!important;
  background:#0D1114!important;border:1px solid var(--line2)!important;color:#fff!important;padding:12px 13px!important;
  font-family:var(--body)!important;font-size:16px!important;border-radius:0!important;min-height:48px}
.form .jet-form-builder__field.textarea-field{min-height:112px;resize:vertical}
.form input[type=date]{color-scheme:dark}
.form .jet-form-builder__field-label.for-checkbox{display:flex;gap:11px;align-items:flex-start;font-family:var(--body);
  font-size:13.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--grey2)}
.form .jet-form-builder__field-label.for-checkbox input{width:24px;height:24px;flex:none;margin-top:1px;padding:0;
  accent-color:var(--akz)}
.form .jet-form-builder__desc{margin-top:6px;font-size:13px;color:var(--grey)}
.form .jet-form-builder__desc a{display:inline-block;padding:4px 0;margin-right:14px;color:var(--grey2);
  border-bottom:1px solid var(--line2)}
.form .jet-form-builder__submit{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:18px 28px;border:0;cursor:pointer;background:var(--akz);color:var(--akz-on);font-family:var(--disp);
  font-weight:800;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.form .jet-form-builder__submit:hover{background:var(--akz-hi)}
.form .jet-form-builder-messages-wrap{font-size:15px;color:#fff}

@media(max-width:1040px){
  .gz-kopf{grid-template-columns:1fr;gap:32px}
  .gz-bild{max-width:420px;aspect-ratio:4/3}
  .gtl{padding:32px 24px}
  .gtl-schritte{grid-template-columns:1fr;gap:0}
  .gtl-schritte li{text-align:left;padding:0 0 26px 66px;min-height:46px}
  .gtl-schritte li:last-child{padding-bottom:0}
  .gtl-schritte .n{position:absolute;left:0;top:0;margin:0}
  .gtl-schritte b{padding-top:12px}
  .gtl-bahn{left:21px;right:auto;width:4px;top:23px;bottom:23px;height:auto}
  .gtl-fuell{transform-origin:center top}
  .js .gtl:not(.an) .gtl-fuell{transform:scaleY(0)}
  .gtl-robo{display:none}
  .loc .fm-grid{grid-template-columns:1fr}
  .fm-karte{order:2}
  .loc-info{grid-template-columns:1fr}
  .mapbox.fuellt{min-height:300px}
}
@media(max-width:760px){
  .p57-kopf{grid-template-columns:1fr;gap:36px}
  .plakette{width:160px;margin:0}
  .wbars{grid-template-columns:1fr}
  .wbars .wbar + .wbar{border-left:0;border-top:1px solid var(--line)}
  .form .wp-block-columns{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .plakette .pk-bild,.gtl-fuell,.gtl-robo,.gtl-schritte li,.gtl-schritte .n{transition:none!important}
}

/* Karte genau so hoch wie das Formular: der Link „In Google Maps öffnen" liegt als Knopf
   auf der Karte statt darunter, sonst endet die Karte 56 px über dem Formular (14.09.2026) */
.fm-karte,.band-form .fm-txt{position:relative}
.fm-karte .map-link,.band-form .fm-txt .map-link{position:absolute;left:14px;bottom:14px;z-index:3;margin:0;
  padding:0 14px;background:rgba(16,20,24,.92);border:1px solid var(--line2)}

/* Nachkontrolle 14.09.2026: Roboter fährt über der Kreisreihe (am Ende lag er hinter Kreis 6),
   Hinweis in den Gerätekacheln mit Pfeil statt Strich (las sich als Gedankenstrich),
   am Handy keine leere Kachel bei fünf Geräten */
.gtl-leiste{margin-top:78px}
.gtl-robo{top:-58px}
.strip figcaption span::after{width:16px;height:16px;background:currentColor;transition:transform .2s ease;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.strip a:hover figcaption span::after,.strip a:focus-visible figcaption span::after{width:16px;transform:translateX(4px)}
@media(max-width:760px){
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip > a:last-child{grid-column:1/-1}
  .strip > a:last-child figure{aspect-ratio:3/2}
}

/* JetFormBuilder-Zeilen sind Flex-Spalten mit Umbruch. Im Raster des Formulars bekommen sie
   keine eigene Höhe, Chrome bricht Feld und Beschriftung dann in eine zweite Spalte um, eine
   Feldbreite rechts neben dem Formular (gemessen 14.09.2026: bis 1916 px bei 1440). */
.form .jet-form-builder-row{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;min-width:0}
.form .jet-form-builder__field-wrap,.form .jet-form-builder__fields-group{width:100%;min-width:0}

/* Complianz packt das iframe in einen eigenen Behälter mit Platzhalterbild und rechnet dessen
   Höhe aus dem Bildformat. Der Behälter füllt jetzt den ganzen Kartenkasten, ohne Bild; der
   Freischalt-Knopf steht unter der Adresse im Hausstil. Unser Satz „Die Karte erscheint …"
   entfällt, solange der Knopf da ist, sonst stünde es doppelt (14.09.2026). */
.mapbox.fuellt .cmplz-placeholder-parent{position:absolute!important;inset:0!important;height:auto!important;
  background-image:none!important;background-color:transparent!important}
.mapbox.fuellt .cmplz-placeholder-parent iframe{position:absolute;inset:0;width:100%;height:100%!important}
.mapbox.fuellt .map-aus{padding-bottom:110px}
.mapbox.fuellt:has(.cmplz-blocked-content-notice) .map-aus span{display:none}
.mapbox.fuellt .cmplz-blocked-content-notice{top:calc(50% - 10px)!important;left:50%!important;right:auto!important;
  bottom:auto!important;transform:translateX(-50%)!important;width:auto!important;max-width:calc(100% - 48px)!important;
  margin:0!important;padding:12px 16px!important;border:1px solid var(--line2)!important;border-radius:0!important;
  background:var(--coal)!important;color:#fff!important;font-family:var(--body)!important;font-size:14px!important;
  line-height:1.45!important;text-align:center!important;cursor:pointer}
.mapbox.fuellt .cmplz-blocked-content-notice:hover{border-color:var(--yellow)!important}

/* Freischalt-Knopf: mit left:50% bekam er nur die halbe Kastenbreite (170 px, 127 px hoch am Handy).
   Jetzt links und rechts 24 px, Breite nach Inhalt, mittig. Am Handy mehr Kartenhöhe, damit Knopf
   und Maps-Link nicht ineinanderlaufen (14.09.2026). */
.mapbox.fuellt .cmplz-blocked-content-notice{left:24px!important;right:24px!important;transform:none!important;
  margin-left:auto!important;margin-right:auto!important;width:fit-content!important}
@media(max-width:1040px){ .mapbox.fuellt{min-height:360px} }

/* Karte kam nach „Akzeptieren" nicht (14.09.2026, derselbe Fehler wie JR am 07.09.2026).
   Complianz hängt dem iframe cmplz-activated an, lässt aber cmplz-blocked-content-container am
   Elternteil stehen, und dessen Regel visibility:hidden bleibt in Kraft: Karte geladen, aber
   unsichtbar, bis der Besucher selbst neu lädt. Steht eine echte Kartenadresse im src, ist die
   Einwilligung erteilt, sonst hätte Complianz sie nicht hineingeschrieben. Dazu gehört am Server
   wp_rocket_settings.lazyload_iframes = 0, sonst schreibt Complianz die Adresse nach data-lazy-src. */
.mapbox .cmplz-blocked-content-container iframe.cmplz-activated,
.mapbox iframe[src^="https://maps."],
.mapbox iframe[src^="https://www.google.com/maps"]{visibility:visible!important}
.mapbox.fuellt iframe{z-index:2}

/* Fragen als Überschrift (14.09.2026): <summary><h3>…</h3></summary>, damit jede Frage ein H3 ist.
   Die H3 übernimmt Schrift und Farbe der Zeile, sonst greifen die globalen Überschriftenregeln. */
.faq summary h3{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;margin:0;hyphens:manual;-webkit-hyphens:manual}

/* ============================================================================
   Leistungsseiten und Pickerl: Redesign 15.09.2026
   Fabian: „jede Section ein bisschen mehr Platz, generell schöner formatiert, Conversion und
   SEO Best Practices". Gilt nur unter <main class="lseite"> (CCT-Vorlagen leistung-kfz/-garten
   und die Pickerl-Seite), damit Hubs, Shop und Über uns unverändert bleiben.
   Richtung bleibt das Band-System aus DESIGN.md; neu sind Luft, das Themenband (Index-Liste
   statt Textwand), Umfang als Kacheln und zwei Handlungspunkte (nach dem Ablauf, nach den Fragen).
   ============================================================================ */
.lseite .band{padding:clamp(76px,8.6vw,124px) 0}
.lseite .band-two{padding-top:clamp(68px,7.8vw,112px)}
.lseite .band-marks{padding:64px 0}
.lseite .bl-lead{margin-top:20px;font-size:18px}
.lseite .steps{margin-top:60px}
.lseite .faq2{margin-top:48px;gap:0 72px}
.lseite .rel{margin-top:44px}
.lseite .two{gap:80px}

/* Leistungsumfang: erster Absatz als Sofort-Antwort, Blöcke mit Haarlinie, Haken als Kacheln */
.lseite .two .blk:first-child > h2 + p{font-size:21px;line-height:1.5;color:#fff;max-width:46ch;margin-top:20px}
.lseite .blk + .blk{margin-top:64px;padding-top:56px;border-top:1px solid var(--line2)}
.lseite .blk .chk{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px}
.lseite .blk .chk li:last-child:nth-child(odd){grid-column:1/-1}
.lseite .blk .chk li{background:var(--coal2);border:1px solid var(--line2);border-top:2px solid var(--akz);
  padding:16px 18px 17px 50px;line-height:1.45}
.lseite .blk .chk li::before{left:18px;top:17px}
.lseite .blk .chk li::after{left:23px;top:22px}

/* Themenband: Überschrift links mit Akzentstrich, Text rechts, Haarlinie zwischen den Themen */
.lseite .band-index{background:var(--coal2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ix-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);
  padding:56px 0;border-top:1px solid var(--line2)}
.ix-row:first-child{padding-top:0;border-top:0}
.ix-row:last-child{padding-bottom:0}
.ix-kopf{position:relative;padding-top:24px}
.ix-kopf::before{content:"";position:absolute;left:0;top:0;width:44px;height:3px;background:var(--akz)}
.ix-kopf:has(.kick){padding-top:0}
.ix-kopf:has(.kick)::before{display:none}
.ix-kopf .kick{margin-bottom:14px}
.ix-kopf h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,2.5vw,34px);line-height:1.06;
  letter-spacing:.01em;text-transform:uppercase;hyphens:manual;-webkit-hyphens:manual;margin:0}
.ix-text > :first-child{margin-top:0}
.ix-text p{margin-top:16px;color:var(--grey2);line-height:1.65;max-width:62ch}
.ix-text p strong,.ix-text p b{color:#fff;font-weight:600}
.ix-text .hint{margin-top:26px;background:var(--coal)}
.ix-text .chk{margin-top:22px}

/* Handlungspunkte: im Themenband, unter dem Ablauf, unter den Fragen */
.lseite .ix-cta,.lseite .steps-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.lseite .ix-cta{margin-top:28px}
.lseite .steps-cta{margin-top:56px;padding-top:34px;border-top:1px solid var(--line2)}
.lseite .steps-cta p{margin:0 auto 0 0;color:var(--grey2);font-size:16px;max-width:52ch}
.lseite .faq-mehr{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;color:var(--grey2);font-size:16px}
.lseite .faq-mehr a{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:.02em;color:var(--akz-tx);
  font-variant-numeric:tabular-nums;min-height:44px;display:inline-flex;align-items:center}

@media(max-width:1040px){
  .lseite .two{gap:48px}
  .ix-row{grid-template-columns:1fr;gap:20px;padding:44px 0}
  .lseite .faq2{gap:0}
}
@media(max-width:620px){
  .lseite .band{padding:64px 0}
  .lseite .band-marks{padding:44px 0}
  .lseite .blk .chk{grid-template-columns:1fr}
  .lseite .two .blk:first-child > h2 + p{font-size:18px}
  .lseite .steps-cta p{margin-bottom:6px}
  .lseite .steps-cta .btn,.lseite .ix-cta .btn{width:100%;justify-content:center}
}

/* ============================================================================
   Cookie-Banner (Complianz) im Schleifer-CI, Aufbau wie Hochl. Ergänzt 15.09.2026.
   Fabian: „gleich aussieht wie bei Hochl, nur mit dem CI von KFZ Schleifer".
   Übernommen von Hochl: mittiger Dialog (Einstellung position=center), Titel sichtbar,
   Knöpfe gestapelt in voller Breite, Rechtstext-Links mittig darunter, Einwilligung-
   verwalten als ruhender runder Cookie-Knopf unten links (Einstellung show-everywhere,
   also auch am Handy). Schleifer-CI: dunkle Karte coal2, gelbe Kante wie die Handyleiste,
   eckige Knöpfe wie .btn, Saira Condensed für Titel und Knöpfe, Barlow im Text.
   Complianz steuert die Optik über Variablen auf :root. html:root (0,1,1) schlägt das
   :root (0,1,0) der erzeugten Datei, ohne !important. Nur Optik: Klassen, Reihenfolge
   und Verhalten der Knöpfe bleiben unangetastet, daran hängt die Einwilligung.
   ============================================================================ */
html:root{
  --cmplz_banner_width:540px;
  --cmplz_banner_background_color:#181E24;
  --cmplz_banner_border_color:#3A4854;
  --cmplz_banner_border_radius:0;
  --cmplz_banner_margin:20px;
  --cmplz_text_color:#CBD4DB;
  --cmplz_hyperlink_color:#FFC400;
  --cmplz_text_font_size:15px;
  --cmplz_link_font_size:14px;
  --cmplz_title_font_size:26px;
  --cmplz_category_body_font_size:14px;
  --cmplz_category_header_title_font_size:15px;
  --cmplz_category_header_active_font_size:13px;
  --cmplz_category_header_always_active_color:#8FD07F;
  --cmplz_button_font_size:15px;
  --cmplz_button_border_radius:0;
  --cmplz_button_accept_background_color:#FFC400;
  --cmplz_button_accept_border_color:#FFC400;
  --cmplz_button_accept_text_color:#14181C;
  --cmplz_button_deny_background_color:transparent;
  --cmplz_button_deny_border_color:#3A4854;
  --cmplz_button_deny_text_color:#FFFFFF;
  --cmplz_button_settings_background_color:transparent;
  --cmplz_button_settings_border_color:#3A4854;
  --cmplz_button_settings_text_color:#FFFFFF;
  --cmplz_slider_active_color:#FFC400;
  --cmplz_slider_inactive_color:#4A5864;
  --cmplz_slider_bullet_color:#FFFFFF;
}

/* Karte */
body #cmplz-cookiebanner-container .cmplz-cookiebanner{
  padding:34px 34px 28px;border:1px solid var(--line2);border-top:3px solid var(--yellow);
  box-shadow:0 40px 90px -28px rgba(0,0,0,.85);font-family:var(--body)
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  color:#fff;line-height:1.05;margin-bottom:4px
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body{padding:0}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message{color:var(--grey2);line-height:1.6;margin-top:14px}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider{border-color:var(--line)}

/* Knöpfe: gestapelt, volle Breite, Touch-tauglich, Schrift wie .btn */
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{
  display:flex;flex-direction:column;gap:10px;margin-top:24px
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn{
  width:100%;min-height:50px;padding:13px 20px;
  font-family:var(--disp);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  border-width:2px;border-style:solid;transition:background .15s,border-color .15s,color .15s
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover{
  background:var(--yellow-hi);border-color:var(--yellow-hi);color:#14181C
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover{
  border-color:var(--yellow);color:var(--yellow)
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:focus-visible,
body #cmplz-cookiebanner-container .cmplz-cookiebanner a:focus-visible,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:focus-visible{
  outline:2px solid var(--yellow);outline-offset:3px
}

/* Rechtstext-Links unter den Knöpfen */
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links{margin-top:20px;display:flex;justify-content:center}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links ul{
  display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:0;padding:0;list-style:none
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links a{
  color:var(--yellow);font-weight:600;text-decoration:underline;text-underline-offset:3px
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links a:hover{color:var(--yellow-hi)}

/* Kategorien-Ansicht: Zeilen als Stahlflächen statt Hellgrau */
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category{
  background:var(--steel);border:1px solid var(--line2);border-radius:0
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-description{color:var(--grey2)}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-icon svg,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close svg{fill:var(--grey2)}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close{color:var(--grey2);
  width:44px;height:44px;margin:-12px -12px -12px 0;display:flex;align-items:center;justify-content:center}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:hover svg{fill:var(--yellow)}
/* Complianz schreibt den Kategorienamen neben dem Schieberegler in <span class="screen-reader-text">
   und verlässt sich darauf, dass das Theme die Klasse versteckt. fplie-base tut das nicht, der Name
   stand doppelt und groß neben dem Regler. Nur im Banner, sonst ändert sich nichts. */
body #cmplz-cookiebanner-container .cmplz-cookiebanner .screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-banner-checkbox .cmplz-label:before{
  box-shadow:0 1px 3px rgba(0,0,0,.5)
}

/* Schieberegler: „aus" #7A8894 hält 3,9:1 auf der Stahlzeile, der dunkle Knopf steht auf
   Grau (4,9:1) und auf Gelb (11:1). Complianz-Standard #4A5864 lag bei 1,9:1. */
html:root{--cmplz_slider_inactive_color:#7A8894;--cmplz_slider_bullet_color:#14181C}

/* Mittig halten und nie höher als das Fenster. Complianz legt die erste Rasterzeile als
   minmax(0,1fr) an: wird der Dialog am Handy hoch, drückt sie den Kopf auf 0 px und der
   Titel läuft in den Text (gemessen 15.09.2026, Kopf 0 px, Titel 46 px). */
body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center{
  max-width:calc(100vw - 36px);max-height:calc(100vh - 60px);overflow-y:auto;grid-template-rows:auto
}
/* Innenblöcke an die Karte binden statt an --cmplz_banner_width (bei Hochl gemessen:
   8 px Überstand, sobald das Padding vom Plugin abweicht) */
body #cmplz-cookiebanner-container .cmplz-cookiebanner :is(
  .cmplz-header,.cmplz-body,.cmplz-message,.cmplz-buttons,.cmplz-links,
  .cmplz-divider,.cmplz-categories,.cmplz-category,.cmplz-btn,.cmplz-title
){width:100%;max-width:100%;box-sizing:border-box;min-width:0}

/* Einwilligung verwalten: ruhender runder Knopf unten links, gelb mit Cookie-Symbol.
   Der Text bleibt im Markup (Screenreader), nur visuell ersetzt das Symbol ihn.
   display und animation mitsetzen, sonst greift der eingeklappte Tab des Plugins. */
body #cmplz-manage-consent .cmplz-manage-consent.cmplz-show{
  position:fixed;left:24px;right:auto;bottom:30px;z-index:99998;display:block;animation:none;
  width:56px;height:56px;min-width:0;padding:0;border-radius:50%;
  background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%2314181C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/%3E%3Cpath d='M8.5 8.5v.01'/%3E%3Cpath d='M16 15.5v.01'/%3E%3Cpath d='M12 12v.01'/%3E%3Cpath d='M11 17v.01'/%3E%3Cpath d='M7 14v.01'/%3E%3C/svg%3E") center/26px no-repeat;
  border:3px solid var(--coal);font-size:0;line-height:0;cursor:pointer;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.8);transition:background-color .15s,transform .15s
}
body #cmplz-manage-consent .cmplz-manage-consent.cmplz-show:hover{background-color:var(--yellow-hi);transform:translateY(-2px)}
body #cmplz-manage-consent .cmplz-manage-consent.cmplz-show:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Unter 1040 px klebt die Anruf-/Termin-Leiste unten (74 px). Der runde Knopf saß darüber und
   verdeckte am Handy Knöpfe im Inhalt (Startseite: „Zur Gartentechnik“, Fabian 29.09.2026).
   Dort übernimmt der Link „Cookie-Einstellungen“ im Fuß (footer.php, Klasse cmplz-show-banner). */
@media(max-width:1040px){
  body #cmplz-manage-consent .cmplz-manage-consent.cmplz-show{display:none}
}
/* Complianz blendet den Titel am Handy aus; auf einem Einwilligungsdialog gehört er hin */
@media(max-width:620px){
  html:root{--cmplz_banner_width:calc(100vw - 36px)}
  body #cmplz-cookiebanner-container .cmplz-cookiebanner{padding:26px 22px 22px}
  body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header{grid-template-columns:32px 1fr 32px}
  body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title{display:block;font-size:22px;text-align:center}
}

/* ============================================================================
   Pickerl-Seite, 15.09.2026: Plakette im Hero statt Foto, Fristen-Block wie auf der Startseite.
   Plakette und Zeitleiste nutzen die Regeln der Startseite (.plakette, .rail, .yr-*, .rtol, .p57-cta).
   Hier nur Lage im Hero und Grund des Blocks: nach dem Ablauf-Band (Stahl) steht er auf Kohle,
   sonst liefen zwei Stahlflächen ineinander.
   ============================================================================ */
.phero .ph-plakette{justify-self:center;align-self:center;width:min(290px,64%);margin:48px 0}
.phero .ph-plakette figcaption{margin-top:26px}
.lseite .p57{background:var(--coal);border-bottom:1px solid var(--line)}
.lseite .p57 .sect-head{margin-bottom:0}
@media(max-width:1040px){
  .phero .ph-plakette{justify-self:start;width:170px;margin:0 0 44px}
  .phero .ph-plakette figcaption{text-align:left;margin-left:0}
}

/* ============================================================================
   Hubs KFZ-Werkstatt und Gartentechnik, 15.09.2026 (Fabian: „schöne Hubs, die auf die einzelnen
   Leistungen verteilen", KFZ-Hub mit dem Standort-Banner randlos im Hintergrund).
   Hero: Aufbau der Über-uns-Seite (.uhero), Naht in der Bereichsfarbe statt gelb-grün.
   Raster: vier Spalten, Flaggschiff über zwei mal zwei Felder, CCT-Karten füllen den Rest.
   main trägt zusätzlich .lseite: Abstände und Themenband wie auf den Leistungsseiten.
   ============================================================================ */
.hhero{min-height:min(700px,84vh)}
.hhero > img{object-position:50% 58%}
.hhero::after{background:var(--akz)}
.hub .band-grid .rel{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:18px;margin-top:44px}
.hub .band-grid .rel a{min-width:0}
.hub .band-grid .rel .hub-flag{grid-column:span 2;grid-row:span 2;border-top:3px solid var(--akz)}
.hub .band-grid .rel .hub-flag figure{flex:1;position:relative;min-height:280px}
.hub .band-grid .rel .hub-flag figure img{position:absolute;inset:0;height:100%}
.hub .band-grid .rel .hub-flag .rc-t{padding:26px 28px 28px;flex:none}
.hub .band-grid .rel .hub-flag b{font-size:clamp(24px,2.3vw,32px);line-height:1.05}
.hub .band-grid .rel .hub-flag span{font-size:16.5px;max-width:46ch}
@media(max-width:1180px){
  .hub .band-grid .rel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub .band-grid .rel .hub-flag{grid-row:auto}
  .hub .band-grid .rel .hub-flag figure{min-height:260px}
}
@media(max-width:620px){
  .hub .band-grid .rel{grid-template-columns:1fr}
  .hub .band-grid .rel .hub-flag{grid-column:auto}
  .hub .band-grid .rel .hub-flag figure{min-height:220px}
}

/* Hubs, Critic-Nachzug 15.09.2026: Link-Knöpfe je Themenzeile (visueller Anker und kürzester Weg
   zur Leistung). Eckig wie .btn, Umriss auf Kohle, Hover in der Bereichsfarbe. */
.ix-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.ix-links a{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:11px 16px;
  border:1px solid var(--line2);border-left:3px solid var(--akz);background:var(--coal);color:#fff;
  font-family:var(--disp);font-weight:700;font-size:14.5px;letter-spacing:.05em;text-transform:uppercase;
  transition:border-color .15s,color .15s,background .15s}
.ix-links a svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;transition:transform .15s}
.ix-links a:hover{border-color:var(--akz);color:var(--akz-tx);background:var(--steel)}
.ix-links a:hover svg{transform:translateX(3px)}
@media(max-width:620px){ .ix-links a{width:100%;justify-content:space-between} }

/* Randloser Hero (Über uns, Hubs): Das Bild-Plugin am Server (ShortPixel) legt ein <picture> um das
   Bild. Dann greift .uhero > img nicht, und das Bild stand im Fluss statt im Hintergrund
   (gesehen an den Hubs 15.09.2026). Deshalb auch das picture aufspannen. */
.uhero > picture{position:absolute;inset:0;z-index:-2;display:block}
.uhero > picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 46%;filter:contrast(1.04) saturate(.94)}
.hhero > picture img{object-position:50% 58%}

/* Hero am Handy, Kontrast gemessen 15.09.2026: Seit das Bild wieder im Hintergrund liegt (picture-Fix),
   stehen Lead und Bildunterschrift am Handy auf dem Foto. Gemessen: Lead Gartentechnik 3,9:1,
   Bildunterschrift 1,59:1. Verlauf von unten kräftiger, Bildunterschrift auf eigenem dunklem Streifen. */
@media(max-width:620px){
  .uh-scrim{background:linear-gradient(to top,rgba(10,13,16,.95) 0 62%,rgba(10,13,16,.8) 84%,rgba(10,13,16,.62) 100%)}
  .uh-cap{background:rgba(10,13,16,.96);color:var(--grey2);padding:10px 24px 14px}
}

/* Hub-Hero am Handy: Foto als eigener Streifen oben (15.09.2026). Mit dem kräftigen Verlauf über dem
   ganzen Hero war das Standort-Banner am Handy nur noch dunkler Himmel. Jetzt oben 300 px Foto,
   darunter der Text auf festem Grund. */
@media(max-width:620px){
  .hhero{padding-top:260px}
  .hhero > picture,.hhero > img{bottom:auto;height:300px}
  .hhero > picture img{object-position:50% 50%}
  .hhero .uh-scrim{background:linear-gradient(to bottom,rgba(10,13,16,.1) 0,rgba(10,13,16,.35) 170px,var(--coal2) 300px)}
}

/* Pickerl-Karten mit Plakette statt Foto (15.09.2026). Die Plakette der Startseite auf Stahl,
   gedreht wie im §57a-Band. Klasse .plakette.an bringt Farben und Lochung ohne Einlauf-Animation. */
.rel figure.rc-pk{margin:0;position:relative;display:flex;align-items:center;justify-content:center;
  height:172px;width:auto;background:radial-gradient(120% 95% at 50% 42%,#2C3D4A 0%,var(--coal2) 72%)}
.rel figure.rc-pk .pk-bild{width:auto;height:80%;transform:rotate(-7deg);filter:drop-shadow(0 14px 18px rgba(0,0,0,.5));
  transition:transform .25s}
.rel a:hover figure.rc-pk .pk-bild{transform:rotate(-3deg) scale(1.04)}
.hub .band-grid .rel .hub-flag figure.rc-pk{height:auto}
.hub .band-grid .rel .hub-flag figure.rc-pk .pk-bild{position:absolute;top:12%;left:50%;right:auto;bottom:auto;height:76%;
  transform:translateX(-50%) rotate(-7deg)}
.hub .band-grid .rel a.hub-flag:hover figure.rc-pk .pk-bild{transform:translateX(-50%) rotate(-3deg) scale(1.03)}

/* ============================================================================
   Gartentechnik, 15.09.2026: Geräte-Wahl (.strip), Mähroboter-Zeitleiste (.gtl), Shop-Auswahl (.pcard)
   aus den Bausteinen der Startseite und des Shops; STIGA-Zeile in der Markenleiste.
   ============================================================================ */
.band-geraete .strip{margin-top:40px}
.band-gtl .gtl{margin-top:40px}
.gshop .pgrid{margin-top:36px}
.gshop-fuss{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 22px;
  color:#4A5560;font-size:15px}
.band-marks .wrap{row-gap:20px}
.mk-stiga{grid-column:-2 / -1;margin-top:2px;text-align:center;color:var(--grey2);font-size:16px}
.mk-stiga b{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:.1em;color:#fff;margin-right:8px}
@media(max-width:620px){ .gshop-fuss .btn{width:100%;justify-content:center} }

/* Critic-Nachzug Garten 15.09.2026: Hub-Raster am Handy kompakt (Flaggschiff breit, Rest zu zweit),
   Geräte-Wahl ohne einzelne Kachel in der letzten Zeile. */
@media(max-width:620px){
  .hub .band-grid .rel{grid-template-columns:1fr 1fr;gap:10px}
  .hub .band-grid .rel .hub-flag{grid-column:1 / -1}
  .hub .band-grid .rel a:not(.hub-flag) figure img{height:118px}
  .hub .band-grid .rel a:not(.hub-flag) .rc-t{padding:14px 14px 16px}
  .hub .band-grid .rel a:not(.hub-flag) b{font-size:16px;line-height:1.15;overflow-wrap:anywhere}
  .hub .band-grid .rel a:not(.hub-flag) span{display:none}
  .band-geraete .strip a:last-child:nth-child(odd){grid-column:1 / -1}
  .band-geraete .strip a:last-child:nth-child(odd) figure{aspect-ratio:2 / 1}
}

/* Produktseiten aus dem Shop, 17.09.2026: Fließtext im Detailband, quadratischer Bildkasten
   für Geräte ohne Galerie, Hinweis bei nicht lagernden Geräten. */
.pdet-text{margin:0 0 16px;color:#3A444E;font-size:16.5px;line-height:1.62}
.pdet-text:last-of-type{margin-bottom:26px}
.pgal-main.quadrat img{aspect-ratio:1 / 1}
.pb-nd{color:var(--grey2)}

/* ---------- Zeitleisten laufen an (19.09.2026) ----------
   Dieselbe Handschrift wie die Mähroboter-Zeitleiste (.gtl in b.css): die Linie
   wächst von links beziehungsweise von oben, die Nummer schnappt ein, Titel und
   Text ziehen nach. Gestaffelt über --d, gesetzt je nth-child.
   Alle Ruhezustände hängen an .js. Ohne JavaScript steht die Leiste sofort da. */
.steps li::after{transform-origin:left center;
  transition:transform .46s cubic-bezier(.4,.05,.3,1) var(--d,0s)}
.steps .st-n{transition:opacity .34s ease calc(var(--d,0s) + .1s),
  transform .34s cubic-bezier(.2,1.3,.4,1) calc(var(--d,0s) + .1s)}
.steps b{transition:opacity .38s ease calc(var(--d,0s) + .18s),
  transform .38s ease calc(var(--d,0s) + .18s)}
.steps p{transition:opacity .38s ease calc(var(--d,0s) + .24s),
  transform .38s ease calc(var(--d,0s) + .24s)}
.js .steps:not(.an) li::after{transform:scaleX(0)}
.js .steps:not(.an) .st-n{opacity:0;transform:scale(.72)}
.js .steps:not(.an) b,
.js .steps:not(.an) p{opacity:0;transform:translateY(12px)}
.steps li:nth-child(1){--d:0s}
.steps li:nth-child(2){--d:.16s}
.steps li:nth-child(3){--d:.32s}
.steps li:nth-child(4){--d:.48s}
.steps li:nth-child(5){--d:.64s}
.steps li:nth-child(6){--d:.8s}

.chron::before{transform-origin:center top;
  transition:transform 1.15s cubic-bezier(.4,.05,.3,1)}
/* Jeder Eintrag beobachtet sich selbst: bei einer langen senkrechten Liste
   ist eine Staffelung über das Ganze sinnlos, der letzte Eintrag ist beim
   Anlauf noch nicht im Bild. */
.chron li::before{transition:opacity .3s ease,transform .3s cubic-bezier(.2,1.3,.4,1)}
.chron .ch-j{transition:opacity .4s ease,transform .4s ease}
.chron .ch-t{transition:opacity .4s ease .07s,transform .4s ease .07s}
.js .chron:not(.an)::before{transform:scaleY(0)}
.js .chron li:not(.an)::before{opacity:0;transform:scale(.4)}
.js .chron li:not(.an) .ch-j{opacity:0;transform:translateX(-14px)}
.js .chron li:not(.an) .ch-t{opacity:0;transform:translateY(12px)}

@media (prefers-reduced-motion:reduce){
  .steps li::after,.steps .st-n,.steps b,.steps p,
  .chron::before,.chron li::before,
  .chron .ch-j,.chron .ch-t{transition:none!important}
  .js .steps:not(.an) li::after,.js .steps:not(.an) .st-n,
  .js .steps:not(.an) b,.js .steps:not(.an) p,
  .js .chron:not(.an)::before,.js .chron:not(.an) li::before,
  .js .chron:not(.an) .ch-j,.js .chron:not(.an) .ch-t{
    opacity:1;transform:none}
}

/* ---------- Fristen-Grafik läuft an (19.09.2026) ----------
   Der Versatz hängt am Jahr (--j), damit beide Achsen im selben Takt laufen. */
.yr-rows .yr-track::before{transform-origin:left center;
  transition:transform .9s cubic-bezier(.4,.05,.3,1)}
.yr-rows .yr-track li{transition:opacity .28s ease calc(var(--j) * .06s),
  transform .28s cubic-bezier(.2,1.4,.4,1) calc(var(--j) * .06s)}
.js .yr-rows:not(.an) .yr-track::before{transform:scaleX(0)}
.js .yr-rows:not(.an) .yr-track li{opacity:0;transform:scale(.3)}

@media (prefers-reduced-motion:reduce){
  .yr-rows .yr-track::before,.yr-rows .yr-track li{transition:none!important}
  .js .yr-rows:not(.an) .yr-track::before,
  .js .yr-rows:not(.an) .yr-track li{opacity:1;transform:none}
}

/* Beim Drucken steht alles da. Wer druckt, scrollt nicht. */
@media print{
  .js .steps:not(.an) li::after,.js .steps:not(.an) .st-n,
  .js .steps:not(.an) b,.js .steps:not(.an) p,
  .js .chron:not(.an)::before,.js .chron li:not(.an)::before,
  .js .chron li:not(.an) .ch-j,.js .chron li:not(.an) .ch-t,
  .js .yr-rows:not(.an) .yr-track::before,.js .yr-rows:not(.an) .yr-track li,
  .js .gtl:not(.an) .gtl-schritte li,.js .gtl:not(.an) .gtl-fuell{
    opacity:1!important;transform:none!important}
}

/* ---------- Stimmen aus dem Google-Profil (19.09.2026) ----------
   Neben dem Team auf hellem Grund. Akzentkante links wie bei .rc und .hint:
   eine Linie, keine Fläche. */
.stimmen{margin-top:26px}
.stimmen h3{font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:.09em;
  text-transform:uppercase;color:#5C6873;margin:0}
.stimme{margin:14px 0 0;background:#fff;border:1px solid var(--paper2);
  border-left:4px solid var(--yellow-dk);padding:18px 20px}
.stimme p{margin:0;font-size:15.5px;line-height:1.6;color:#3A444E}
.stimme cite{display:block;margin-top:11px;font-style:normal;font-size:13px;
  letter-spacing:.02em;color:#5C6873}
.stimmen-note{margin-top:14px;font-size:13px;line-height:1.5;color:#6B7680}
@media (max-width:640px){
  .stimme{padding:16px 17px}
  .stimme p{font-size:15px}
}

/* ---------- Abbild der Seite: .reveal wird .in (19.09.2026) ----------
   Werkzeuge, die eine Seite abbilden (shot.py, Druckvorschauen), schalten vor
   dem Scrollen jedes `.reveal` auf `.in`. Sie scrollen nicht wie ein Mensch,
   also feuert kein Beobachter und ohne diesen Block bliebe jede Leiste leer.
   Steht bewusst NACH den Ruhezuständen: eine Regel, die aufhebt, muss später
   kommen als die, die setzt. */
.js .steps.in li::after,.js .yr-rows.in .yr-track::before{transform:none}
.js .steps.in .st-n,.js .steps.in b,.js .steps.in p,
.js .chron.in li::before,.js .chron.in .ch-j,.js .chron.in .ch-t,
.js .chron li.in::before,.js .chron li.in .ch-j,.js .chron li.in .ch-t,
.js .yr-rows.in .yr-track li{opacity:1;transform:none}
.js .chron.in::before{transform:scaleY(1)}

/* ---------- Anfrage-Zeitleiste läuft an (19.09.2026) ----------
   Fünf Schritte untereinander, jeder beobachtet sich selbst. Bewusst nur
   Nummer und Überschrift: ein Eingabefeld, das unsichtbar hängen bleibt,
   kostet eine Anfrage. */
.an-schritt .an-nr{transition:opacity .34s ease,transform .34s cubic-bezier(.2,1.3,.4,1)}
.an-schritt h2{transition:opacity .4s ease .06s,transform .4s ease .06s}
.js .an-schritt:not(.an) .an-nr{opacity:0;transform:scale(.72)}
.js .an-schritt:not(.an) h2{opacity:0;transform:translateY(10px)}
.js .an-schritt.in .an-nr,.js .an-schritt.in h2{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .an-schritt .an-nr,.an-schritt h2{transition:none!important}
  .js .an-schritt:not(.an) .an-nr,.js .an-schritt:not(.an) h2{opacity:1;transform:none}
}
@media print{
  .js .an-schritt:not(.an) .an-nr,.js .an-schritt:not(.an) h2{opacity:1!important;transform:none!important}
}

/* Team und Stimmen: gleich hohe Spalten (19.09.2026).
   Gemessen waren 521 gegen 625 px. Statt eine Stimme zu streichen, streckt
   sich die Teamkarte auf die volle Hoehe, und der Lehrbetrieb-Hinweis sitzt
   am Kartenboden. Zwei ungleich lange Spalten wirken unfertig, eine Karte mit
   Luft unten wirkt ruhig. */
.pe-grid{align-items:stretch}
.band-people .crew{display:flex;flex-direction:column}
.band-people .crew .lehr{margin-top:auto}

/* ---------- Ankündigung und Popup (19.09.2026) ----------
   Struktur übernommen von licht-und-salz/ops/fplie-ank-popup.css, Farben und
   Kanten auf die Schleifer-CI gesetzt. Streifen hell, Popup dunkel: so
   konkurrieren sie nicht, wenn beide gleichzeitig eingeschaltet sind. */
.fplie-ank,.fplie-popup{
  --fp-dunkel:var(--coal2);
  --fp-akzent:var(--yellow);
  --fp-akzent-hell:var(--yellow-hi);
  --fp-flaeche:var(--paper);
  --fp-linie:var(--paper2);
  --fp-tinte:var(--ink);
}

/* ── Streifen unter dem Kopf ─────────────────────────────────────── */
.fplie-ank{background:var(--fp-flaeche);border-bottom:1px solid var(--fp-linie);
  box-shadow:inset 0 3px 0 var(--fp-akzent)}
.fplie-ank__in{max-width:var(--wrap);margin-inline:auto;padding:13px 24px;
  display:flex;align-items:center;gap:14px}
/* Quadrat statt Kreis: auf dieser Seite ist nichts rund. */
.fplie-ank__siegel{flex:none;width:14px;height:14px;background:var(--fp-akzent);
  position:relative}
.fplie-ank__siegel::after{content:none}
.fplie-ank__text{margin:0;font-family:var(--body);font-size:15.5px;line-height:1.55;
  color:var(--fp-tinte)}
.fplie-ank__link{display:inline-flex;align-items:center;gap:6px;margin-left:10px;
  white-space:nowrap;font-family:var(--disp);font-weight:700;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;color:#6B5200;
  border-bottom:2px solid var(--fp-akzent)}
.fplie-ank__pfeil{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease-out}
.fplie-ank__link:hover{color:var(--fp-tinte)}
.fplie-ank__link:hover .fplie-ank__pfeil{transform:translateX(3px)}

@media(max-width:640px){
  .fplie-ank__in{padding:11px 20px;gap:10px;align-items:flex-start}
  .fplie-ank__siegel{margin-top:6px}
  .fplie-ank__text{font-size:14.5px}
  .fplie-ank__link{margin-left:0;margin-top:6px}
}

/* ── Popup ───────────────────────────────────────────────────────── */
.fplie-popup[hidden]{display:none}
.fplie-popup{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;
  justify-content:center;padding:24px}
body.fplie-popup-offen{overflow:hidden}
.fplie-popup__hg{position:absolute;inset:0;background:rgba(6,9,12,.68)}
.fplie-popup__karte{position:relative;z-index:1;width:min(100%,470px);
  background:var(--fp-dunkel);color:#fff;overflow:hidden;
  border:1px solid var(--line2);border-top:4px solid var(--fp-akzent);
  padding:36px;text-align:center;box-shadow:0 28px 70px rgba(0,0,0,.5);
  animation:fplie-popup-auf .28s ease-out both}
.fplie-popup__karte::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 0%,rgba(255,196,0,.08),transparent 68%)}
.fplie-popup__karte > *{position:relative;z-index:1}

@keyframes fplie-popup-auf{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.fplie-popup__karte{animation:none}}

.fplie-popup__zu{position:absolute;top:8px;right:8px;z-index:2;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;background:none;border:0;
  cursor:pointer;color:var(--grey)}
.fplie-popup__zu:hover{color:#fff;background:rgba(255,255,255,.08)}

.fplie-popup__siegel{display:block;width:64px;height:64px;margin:2px auto 18px;
  object-fit:contain}
.fplie-popup__eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;
  margin:0 0 10px;font-family:var(--disp);font-weight:700;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fp-akzent)}
.fplie-popup__eyebrow span{width:28px;height:3px;background:currentColor}
.fplie-popup__titel{font-family:var(--disp);font-weight:800;font-size:27px;line-height:1.14;
  text-transform:uppercase;letter-spacing:.01em;color:#fff;margin:0 0 12px}
.fplie-popup__text{margin:0 auto;font-size:16px;line-height:1.62;color:var(--grey2);
  max-width:34ch}
.fplie-popup__cta{display:inline-block;margin-top:24px;background:var(--fp-akzent);
  color:var(--ink);font-family:var(--disp);font-weight:800;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;padding:14px 30px;
  transition:background .18s ease-out}
.fplie-popup__cta:hover{background:var(--fp-akzent-hell)}

@media(max-width:560px){
  .fplie-popup{padding:16px}
  .fplie-popup__karte{padding:30px 22px 28px}
  .fplie-popup__titel{font-size:23px}
  .fplie-popup__siegel{width:54px;height:54px}
  .fplie-popup__cta{display:block}
}

/* Das Master-CSS (dist/style.css) bringt eine eigene Fassung dieser Bausteine
   mit, unter anderem mit runden Ecken. Bei Schleifer ist nichts rund. Diese
   Regeln stehen deshalb mit hoeherer Spezifitaet hier (19.09.2026). */
.fplie-popup .fplie-popup__zu,
.fplie-popup .fplie-popup__karte,
.fplie-popup .fplie-popup__cta,
.fplie-ank .fplie-ank__siegel{border-radius:0}
.fplie-popup .fplie-popup__siegel{border-radius:0;box-shadow:none}

/* ---------- Aktionsband der Startseite (20.09.2026) ----------
   Zwei Spalten, Foto links, Text rechts. Dunkler Grund mit gelber Oberkante:
   das Band soll auffallen, ohne die Seite in eine Werbefläche zu verwandeln.
   Die Farbe folgt dem Bereich, Gelb für Auto, Grün für Garten. */
.akt{background:var(--coal);padding:clamp(56px,7vw,96px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Die Karte: Warnstreifen oben wie an einer Hebebühne. Er sagt „hier ist etwas
   Besonderes", ohne dass die Seite zur Werbefläche wird. */
.akt-karte{position:relative;background:var(--steel);border:1px solid var(--line2);
  border-top:0}
.akt-karte::before{content:"";display:block;height:10px;
  background:repeating-linear-gradient(135deg,var(--akz, var(--yellow)) 0 16px,var(--coal) 16px 32px)}
.akt-grid{display:grid;grid-template-columns:42% 1fr;gap:0;align-items:stretch}
.akt-fig{margin:0;position:relative;min-height:400px;overflow:hidden}
.akt-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:40% 50%}
/* Der Stempel: schräg gesetzt wie ein Aufkleber, eckig wie alles hier. */
.akt-stempel{position:absolute;left:22px;top:24px;z-index:1;
  background:var(--akz, var(--yellow));color:var(--coal);
  font-family:var(--disp);font-weight:800;font-size:22px;line-height:1;
  letter-spacing:.08em;text-transform:uppercase;padding:11px 16px 10px;
  transform:rotate(-4deg);box-shadow:0 6px 0 rgba(0,0,0,.35)}
.akt-txt{padding:52px 56px 56px;min-width:0}
.akt-h{margin-top:14px;font-family:var(--disp);font-weight:800;
  font-size:clamp(28px,3.2vw,44px);line-height:1.06;text-transform:uppercase;
  letter-spacing:.01em;color:#fff}
.akt-lead{margin-top:14px;font-size:17.5px;line-height:1.6;color:var(--grey2);max-width:52ch}
.akt-liste{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:11px}
.akt-liste li{position:relative;padding-left:30px;font-size:16.5px;line-height:1.5;color:#fff}
/* Haken als Quadrat: auf dieser Seite ist nichts rund. */
.akt-liste li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:13px;
  background:var(--akz, var(--yellow))}
.akt-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

@media (max-width:1000px){
  .akt-grid{grid-template-columns:1fr}
  .akt-fig{min-height:280px}
  .akt-txt{padding:40px 36px 44px}
}
@media (max-width:640px){
  .akt{padding:44px 0}
  .akt-fig{min-height:220px}
  .akt-stempel{font-size:18px;left:16px;top:18px}
  .akt-txt{padding:30px 22px 34px}
  .akt-lead{font-size:16.5px}
  .akt-cta .btn{width:100%;justify-content:center}
}

/* ═══ Servicezeile mit Ankündigung (22.09.2026) ═══════════════════════════
   Vorher drei Zeilen übereinander: Ankündigungsstreifen, Servicezeile, Kopf.
   Jetzt eine: links die Öffnungszeiten, rechts die Ankündigung. Die Klassen
   fplie-ank* bleiben, weil die Backend-Vorschau sie sucht; die alte
   Streifen-Optik wird hier für die Zeile zurückgesetzt. */
.service .fplie-ank{margin-left:auto;align-self:stretch;position:relative;
  display:flex;align-items:center;min-width:0;border:0;
  background:var(--yellow);color:var(--coal);padding:0 5px 0 30px}
.service .fplie-ank[hidden]{display:none}
/* Warnstreifen-Kante links, dasselbe Muster wie oben an der Aktionskarte. */
.service .fplie-ank::before{content:"";position:absolute;left:0;top:0;bottom:0;width:18px;
  background:repeating-linear-gradient(135deg,var(--coal) 0 5px,var(--yellow) 5px 10px)}
.service .fplie-ank__siegel{display:none}
.service .fplie-ank__satz{display:inline-flex;align-items:center;gap:10px;min-width:0;
  color:var(--coal);font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;
  padding-right:16px}
.service .sv-ank-marke{flex:none;background:var(--coal);color:var(--yellow);
  font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 8px 3px;line-height:1}
.service .sv-ank-rest{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--coal)}
.service .sv-ank-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.service .fplie-ank__link{flex:none;display:inline-flex;align-items:center;gap:7px;margin:0;
  min-height:32px;padding:0 14px;background:var(--coal);color:var(--yellow);
  font-family:var(--disp);font-weight:700;font-size:13.5px;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .15s}
.service .fplie-ank__link:hover{background:#000;color:var(--yellow-hi)}
.service .fplie-ank__link:focus-visible{outline:2px solid var(--coal);outline-offset:2px}
.service .fplie-ank__pfeil{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  transition:transform .15s}
.service .fplie-ank__link:hover .fplie-ank__pfeil{transform:translateX(3px)}
/* Knopf im Kopf: breit genug zeigt er die Nummer, schmal das Wort. */
.nav-cta .btn .wort{display:none}
@media (max-width:1300px){
  .nav-cta .btn .nr{display:none}
  .nav-cta .btn .wort{display:inline}
}
@media (max-width:1150px){
  /* Zwischen 1041 und 1150 passt neben dem Menü nur das Symbol. Das Wort bleibt
     für Screenreader lesbar, es wird nur unsichtbar. */
  .nav-cta .btn .wort{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-cta .btn-ghost{padding-left:14px;padding-right:14px}
}
@media (max-width:900px){
  /* Am Handy ist nur Platz für eines. Läuft eine Ankündigung, hat sie Vorrang,
     die Öffnungszeiten stehen im Fuß und auf der Kontaktseite. */
  .service .wrap:has(.fplie-ank:not([hidden])) > span:first-child{display:none}
  /* Das Band läuft am Handy von Rand zu Rand. */
  .service .fplie-ank{margin:0 -24px;flex:1 1 100%;min-height:46px;padding-left:26px}
  .service .fplie-ank::before{width:14px}
  .service .fplie-ank__satz{flex:1;font-size:13.5px;padding-right:10px}
  .service .fplie-ank__link{min-height:36px;padding:0 12px}
}
@media (max-width:520px){
  /* Schmal ist nur Platz für Etikett und Knopf; der ganze Satz steht im Popup
     und im Aktionsband der Startseite. */
  .service .sv-ank-rest{display:none}
  .service .fplie-ank__satz:not(:has(.sv-ank-marke)) .sv-ank-rest{display:inline}
  .service .fplie-ank__satz{justify-content:flex-start}
}

/* ═══ Hero: das KFZ-Foto nur links (22.09.2026) ══════════════════════════════
   Das Foto lief über die ganze Breite, die rechte Hälfte lag unter dem Rasen.
   Sichtbar war nur die linke obere Ecke, vom Auto kaum etwas. Jetzt füllt es
   nur den linken Teil, das ganze Fahrzeug mit dem Mitarbeiter liegt im Bild. */
@media (min-width:901px){
  .side.auto img{width:66%;object-position:50% 62%}
}

/* ═══ Formulare: Geräte-Anfrage und Bestätigungsseite (22.09.2026) ══════════ */
.an-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.an-meldung{margin:0 0 22px;padding:14px 18px;border:1px solid #FFB4A9;
  background:rgba(179,38,30,.16);color:#fff;font-size:15.5px;line-height:1.5;font-weight:600}
.dsgvo a{color:var(--yellow);text-decoration:underline;text-underline-offset:2px}
.dsgvo .req{margin-left:4px}
.ok-seite{background:var(--coal);padding:clamp(48px,7vw,96px) 0}
.ok-karte{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);background:var(--steel);
  border:1px solid var(--line2);border-top:0;position:relative}
.ok-karte::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;z-index:1;
  background:repeating-linear-gradient(135deg,var(--yellow) 0 16px,var(--coal) 16px 32px)}
.ok-txt{padding:64px 56px 56px;min-width:0}
.ok-marke{display:grid;place-items:center;width:56px;height:56px;background:var(--yellow);margin-bottom:22px}
.ok-marke svg{width:30px;height:30px;fill:none;stroke:var(--coal);stroke-width:2.6;stroke-linecap:square}
.ok-h{margin-top:12px;font-family:var(--disp);font-weight:800;font-size:clamp(32px,3.6vw,50px);
  line-height:1.04;text-transform:uppercase;color:#fff}
.ok-lead{margin-top:16px;font-size:18px;line-height:1.6;color:var(--grey2);max-width:50ch}
.ok-liste{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px}
.ok-liste li{position:relative;padding-left:28px;font-size:16.5px;line-height:1.5;color:#fff}
.ok-liste li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;background:var(--yellow)}
.ok-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.ok-cta .btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.ok-weiter{margin-top:22px;font-size:15px;color:var(--grey2)}
.ok-weiter a{color:var(--yellow);text-decoration:underline;text-underline-offset:2px}
.ok-fig{margin:0;position:relative;min-height:420px}
.ok-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .ok-karte{grid-template-columns:1fr}
  .ok-fig{min-height:240px;order:-1}
  .ok-txt{padding:36px 22px 40px}
  .ok-cta .btn{width:100%;justify-content:center}
}

/* ═══ Reifengarantie der Hersteller (23.09.2026) ═══════════════════════════
   Zwei Karten unter dem Aktionsband. Keine Herstellerlogos: die Marke steht
   als Schrift, damit die Seite keine Partnerschaft behauptet. */
.hgar .bl-lead{max-width:74ch}
.hgar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--paper2);margin-top:34px}
.hgar-karte{background:#fff;padding:32px 34px 34px;min-width:0}
.hgar-marke{display:inline-block;font-family:var(--disp);font-weight:800;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--yellow);
  padding:6px 10px 5px}
.hgar-karte h3{margin:16px 0 0;font-family:var(--disp);font-weight:800;font-size:clamp(20px,2vw,25px);
  line-height:1.1;color:var(--ink)}
.hgar-lead{margin:10px 0 0;font-size:16.5px;line-height:1.55;color:#4A5560}
.hgar-tab{width:100%;border-collapse:collapse;margin-top:20px;font-size:15.5px}
.hgar-tab caption{text-align:left;font-size:13.5px;line-height:1.4;color:#5A6673;padding-bottom:8px}
.hgar-tab th,.hgar-tab td{border-top:1px solid var(--paper2);padding:9px 0;text-align:left;vertical-align:top}
.hgar-tab th{font-weight:600;color:var(--ink);padding-right:14px}
.hgar-tab td{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.hgar-liste{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.hgar-liste li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.5;color:#3C4753}
.hgar-liste li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;background:var(--yellow)}
.hgar-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:26px}
.hgar-note{margin:0;flex:1 1 380px;min-width:0;font-size:14.5px;line-height:1.55;color:#5A6673}
@media (max-width:900px){
  .hgar-grid{grid-template-columns:1fr}
  .hgar-karte{padding:26px 22px 28px}
  .hgar-fuss .btn{width:100%;justify-content:center}
}

/* ═══ Aktuelles: Beiträge-Hub und Beitrag (23.09.2026) ═════════════════════
   Hub und Beitrag teilen den Kopf der Unterseiten (.uhero), nur flacher.
   Die Karten sind dieselbe Bauart wie die Querverweise, damit die Seite
   nicht nach fremdem Blog aussieht. */
.uhero-klein{min-height:min(440px,60vh)}
.uhero-klein .wrap{padding-top:52px;padding-bottom:54px}
.uhero-ohne{background:var(--coal2)}
.uhero-klein .kick time{font:inherit;color:inherit}

.btl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}
.btl-karte{min-width:0}
.btl-karte > a{display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--paper2);border-top:3px solid var(--paper2);text-decoration:none;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.btl-karte > a:hover{border-top-color:var(--akz-dk);box-shadow:0 14px 30px rgba(16,20,24,.13);transform:translateY(-3px)}
.btl-fig{margin:0;overflow:hidden;background:#E4E1D8}
.btl-fig img{width:100%;height:190px;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.btl-karte > a:hover .btl-fig img{transform:scale(1.06)}
.btl-txt{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.btl-datum{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--akz-dk)}
.btl-txt h3{margin:9px 0 0;font-family:var(--disp);font-weight:800;font-size:21px;line-height:1.14;
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.btl-txt p{margin:9px 0 0;font-size:15.5px;line-height:1.55;color:#4A5560}
.btl-go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:14px;
  font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--akz-dk)}
.btl-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.btl-karte > a:hover .btl-go svg{transform:translateX(3px)}
.btl-blaettern{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btl-blaettern a{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;
  background:var(--ink);color:#fff;font-family:var(--disp);font-weight:700;font-size:13.5px;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.btl-blaettern a:hover{background:#000}

/* Beitragstext: eine Spalte, Fließtext wie im Editor gesetzt. */
.btx-inhalt{max-width:72ch;font-size:17.5px;line-height:1.72;color:#333E4A}
.btx-inhalt > :first-child{margin-top:0}
.btx-inhalt p{margin:0 0 18px}
.btx-inhalt h2{margin:34px 0 12px;font-family:var(--disp);font-weight:800;
  font-size:clamp(23px,2.4vw,30px);line-height:1.12;text-transform:uppercase;color:var(--ink)}
.btx-inhalt h3{margin:26px 0 10px;font-family:var(--disp);font-weight:800;font-size:20px;
  line-height:1.16;color:var(--ink)}
.btx-inhalt ul,.btx-inhalt ol{margin:0 0 18px;padding-left:22px}
.btx-inhalt li{margin:0 0 8px}
.btx-inhalt ul{list-style:none;padding-left:0}
.btx-inhalt ul li{position:relative;padding-left:26px}
.btx-inhalt ul li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;background:var(--yellow)}
.btx-inhalt a{color:var(--akz-dk);text-decoration:underline;text-underline-offset:2px}
.btx-inhalt img{max-width:100%;height:auto;display:block}
.btx-inhalt figure{margin:24px 0}
.btx-inhalt figcaption{margin-top:8px;font-size:14px;color:#5A6673}
.btx-inhalt blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:3px solid var(--yellow);
  font-size:19px;line-height:1.55;color:var(--ink)}
.btx-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;
  margin-top:36px;padding-top:24px;border-top:1px solid var(--paper2)}
.btx-zurueck{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--akz-dk);text-decoration:none}
.btx-zurueck svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.btx-zurueck:hover svg{transform:translateX(-3px)}
.btx-fuss .cta{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:1000px){
  .btl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .btl-grid{grid-template-columns:1fr}
  .uhero-klein{min-height:auto}
  .btx-inhalt{font-size:16.5px}
  .btx-fuss .cta{width:100%}
  .btx-fuss .cta .btn{flex:1 1 100%;justify-content:center}
}

/* ══════ Terminbuchung mit Kalender (23.09.2026) ══════
   Seite /termin-buchen/: Vorlage page-termin.php, Formular aus JetFormBuilder mit
   dem Kalender von JetAppointment. Der Kalender kommt hell aus dem Plugin, im
   dunklen Formularkasten bekommt er deshalb eigene Farben. */
.tbu-karte{margin-top:26px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--coal2);
  padding:20px 22px}
.tbu-karte h3{font-family:var(--disp);font-weight:800;font-size:17px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--ink)}
.tbu-karte p{margin-top:9px;font-size:15.5px;line-height:1.55;color:#4A5560}
.tbu-karte-akz{border-left-color:var(--akz)}
.tbu-liste{list-style:none;padding:0;margin:11px 0 0;display:grid;gap:7px}
.tbu-liste li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.5;color:#4A5560}
.tbu-liste li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;background:var(--akz)}
/* Der Formularblock ist dunkel: der Hinweis daneben braucht helle Schrift, sonst
   steht er mit 1,07:1 auf dem Kohlegrund (craft.py, 23.09.2026). */
.tbu-ruf{margin-top:24px;font-size:15px;color:var(--grey2)}
.tbu-ruf a{color:#fff;border-bottom:1px solid var(--line2)}
.tbu-ruf a:hover{border-bottom-color:var(--akz)}
.tbu-andere{max-width:62ch}
.tbu-andere .cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}

/* Kalender im dunklen Formularkasten */
.tbu .form .jet-apb-calendar-wrapper{background:#0D1114;border:1px solid #5F6B75;padding:14px}
.tbu .form .jet-apb-calendar{--vc-color-primary:var(--akz);color:#fff}
.tbu .form .vanilla-calendar-day__btn{color:#fff}
.tbu .form .vanilla-calendar-day__btn_disabled{color:#5A6570}
.tbu .form .vanilla-calendar-day__btn_selected{background:var(--akz);color:var(--akz-on)}
.tbu .form .jet-apb-slot{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:9px 14px;margin:0 8px 8px 0;background:#141A1F;border:1px solid var(--line2);color:#fff;
  font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.04em;cursor:pointer}
.tbu .form .jet-apb-slot:hover{border-color:var(--akz)}
.tbu .form .jet-apb-slot.jet-apb-slot--selected,.tbu .form .jet-apb-slot[aria-pressed="true"]{
  background:var(--akz);border-color:var(--akz);color:var(--akz-on)}
.tbu .form .jet-apb-slot[disabled]{opacity:.42;cursor:not-allowed}

@media(max-width:1040px){
  .tbu .fm-grid{grid-template-columns:1fr;gap:34px}
}

/* Kalender am Handy: das Plugin setzt den Inhalt auf feste 350 px plus min-width. Im
   Formularkasten bei 390 px ragt er dadurch 28 px über den Rand (craft.py, 23.09.2026).
   Deshalb Breite frei geben und die Pfeile auf Fingergröße bringen. */
.tbu .form .jet-apb-calendar .jet-apb-calendar-content{width:100%;min-width:0;max-width:100%}
.tbu .form .jet-apb-calendar{max-width:100%}
.tbu .form .jet-apb-calendar-btn{min-width:44px;min-height:44px;display:inline-flex;
  align-items:center;justify-content:center}
.tbu .form .jet-apb-calendar-date-body{min-height:40px;display:flex;align-items:center;justify-content:center}

/* Rahmen der Formularfelder: --line2 erreicht auf dem fast schwarzen Feldgrund nur
   2,0:1, WCAG verlangt für Bedienelemente 3:1 (craft.py, 23.09.2026). */
.form .jet-form-builder__field.text-field,.form .jet-form-builder__field.select-field,
.form .jet-form-builder__field.textarea-field,.form .jet-form-builder__field.date-field{
  border-color:#5F6B75!important}
.form .jet-form-builder__field:focus{outline:2px solid var(--akz);outline-offset:1px}

/* ══════ Reifengarantie: Kopf mit Bild (23.09.2026) ══════
   Fabian: „Redesigne die Sektion, sodass sie auch was mit Reifen zu tun hat."
   Vorher zwei Tabellen ohne Bild. Jetzt Text und Zahlen links, ein Stapel
   Winterreifen rechts, der bis an den Rand der Karte läuft. */
.hgar-kopf{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:44px;align-items:center;margin-bottom:8px}
.hgar-txt{min-width:0}
.hgar-zahlen{list-style:none;padding:0;margin:26px 0 0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.hgar-zahlen li{background:#fff;padding:16px 18px;min-width:0}
.hgar-zahlen b{display:block;font-family:var(--disp);font-weight:800;
  font-size:clamp(28px,3vw,38px);line-height:1;color:var(--ink);letter-spacing:.01em}
.hgar-zahlen span{display:block;margin-top:7px;font-size:13.5px;line-height:1.4;color:#4A5560}
.band-paper .hgar-zahlen{background:#DCD8CC}

@media(max-width:1040px){
  .hgar-kopf{grid-template-columns:1fr;gap:26px}
}
@media(max-width:560px){
  .hgar-zahlen{grid-template-columns:1fr}
}

/* Das Raster der Pickerl-Sektion stand auf „1fr auto", passend zur 230 px schmalen
   Plakette. Das Foto ist breiter, und `auto` hat die Textspalte auf ein Wort je Zeile
   zusammengedrückt (gemessen 23.09.2026). Feste Anteile statt auto. */
.p57-kopf{grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:center}
@media(max-width:1040px){
  .p57-kopf{grid-template-columns:1fr;gap:28px}
}


/* ══════ Reifengarantie: Bild und Markenlogos (Fabian, 23.09.2026) ══════
   Fabian: „Nur die Logos sind korrekt, der Rest passt nicht zur Seite."
   Also zurueck in die Sprache der Seite: heller Papierband, Kicker mit Strich,
   schmale Versalien, gelbe Kante am Bild, weisse Karten mit duennen Linien.
   Das Bild ist ein eigenes Foto des Betriebs, kein Stockmotiv. */
.hgar-bild{margin:0;position:relative;border-left:4px solid var(--yellow);overflow:hidden;min-width:0}
.hgar-bild img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;max-height:460px}
.hgar-logo{display:flex;align-items:center;min-height:34px;padding-bottom:16px;
  border-bottom:1px solid var(--paper2);margin-bottom:18px}
.hgar-logo img{display:block;width:auto;height:26px;max-width:none}
@media(max-width:1040px){
  .hgar-bild{border-left:0;border-top:4px solid var(--yellow)}
  .hgar-bild img{aspect-ratio:16/9;max-height:320px}
}

/* ══════ Pickerl-Aktionszeile: drei Knoepfe statt zwei (24.09.2026) ══════
   Fabian: „Der Haupt-CTA sollte Termin buchen sein, nicht mehr lesen."
   Das Raster stand auf 1fr auto auto und war fuer genau zwei Knoepfe gebaut.
   Mit dem dritten rutschte einer in eine zweite Zeile und wurde auf die
   Spaltenbreite gedehnt (gemessen: 631 px statt 226). Jetzt Flex mit Umbruch:
   der Text nimmt den Rest, die Knoepfe behalten ihre Breite. */
.p57-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.p57-cta p{flex:1 1 400px;min-width:0;margin:0;max-width:64ch}
.p57-cta .btn{flex:0 0 auto}
@media(max-width:860px){
  .p57-cta{flex-direction:column;align-items:stretch}
  .p57-cta .btn{width:100%;justify-content:center}
}

/* ══════ Terminkalender von JetAppointment (Fabian, 24.09.2026) ══════
   Fabian: „Formatiere den Terminkalender schöner."
   Der Kalender kommt roh aus dem Plugin: gewählter Tag ohne Merkmal, gesperrte Tage
   durchgestrichen, die Zeitliste rutschte in schmalen Spalten zwischen die Tagesreihen
   und das Schließkreuz stand nackt daneben. Hier bekommt er die Sprache der Seite:
   Gelb als Akzent, klare Zustände, Zeiten als eigene Knopfreihe unter dem Raster. */

.jet-apb-calendar-wrapper{--kal-linie:#2B353E;--kal-grund:#161C22}
.jet-apb-calendar{background:var(--kal-grund);border:1px solid var(--kal-linie);
  border-radius:0;padding:4px 6px 10px}

/* Kopf: Monat und die zwei Pfeile */
.jet-apb-calendar-header{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 10px 10px}
.jet-apb-calendar-header > *:not(.jet-apb-calendar-btn){font-family:var(--disp);
  font-weight:700;font-size:19px;letter-spacing:.01em;color:#fff;text-transform:uppercase}
.jet-apb-calendar-btn{width:40px;height:40px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--kal-linie);background:transparent;
  color:#fff;cursor:pointer;transition:background .15s,border-color .15s}
.jet-apb-calendar-btn:hover{background:var(--yellow);border-color:var(--yellow);color:var(--coal)}
.jet-apb-calendar-btn svg{width:18px;height:18px}

/* Wochentage */
.jet-apb-calendar-week{font-family:var(--disp);font-weight:700;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}

/* Tage */
.jet-apb-calendar-date{font-family:var(--disp);font-weight:700;font-size:16px;
  min-height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;color:#fff;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.jet-apb-calendar-date:not(.jet-apb-calendar-date--disabled):hover{
  border-color:var(--yellow);color:var(--yellow)}
.jet-apb-calendar-date--disabled{color:#55606A;text-decoration:none;cursor:default}
.jet-apb-calendar-date--selected,.jet-apb-calendar-date--active{
  background:var(--yellow);border-color:var(--yellow);color:var(--coal)}

/* Zeitliste: immer unter das Raster, nie zwischen die Tagesreihen */
.jet-apb-calendar-appointments-list-wrapper{order:99;flex-basis:100%;width:100%;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--kal-linie);position:relative}
.jet-apb-calendar-appointments-list-wrapper .jet-form-builder__heading,
.jet-apb-calendar-appointments-list-wrapper .jet-form-builder__label-text{
  font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);margin-bottom:10px;display:block}
.jet-apb-calendar-appointments-list{display:flex;flex-wrap:wrap;gap:8px}
.jet-apb-calendar-appointments-list > *{font-family:var(--disp);font-weight:700;
  font-size:14.5px;letter-spacing:.02em;padding:11px 14px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--kal-linie);background:#1B222A;color:#fff;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.jet-apb-calendar-appointments-list > *:hover{border-color:var(--yellow);color:var(--yellow)}
.jet-apb-calendar-appointments-list > *[class*="selected"],
.jet-apb-calendar-appointments-list > *[class*="active"]{
  background:var(--yellow);border-color:var(--yellow);color:var(--coal)}

/* Das Schließkreuz der Zeitliste */
.jet-apb-calendar-appointments-list-wrapper [class*="close"],
.jet-apb-calendar-close{position:absolute;top:14px;right:0;width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--grey);
  background:transparent;border:0;cursor:pointer}
.jet-apb-calendar-appointments-list-wrapper [class*="close"]:hover,
.jet-apb-calendar-close:hover{color:var(--yellow)}

/* Meldung „keine freien Zeiten" */
.jet-apb-calendar-notification{font-size:14.5px;line-height:1.5;color:var(--grey2);
  background:#1B222A;border:1px solid var(--kal-linie);padding:12px 14px}

/* Wunschtermin statt Kalender */
.tbu-wunsch{margin:0 0 18px;padding:14px 16px;background:#1B222A;
  border-left:3px solid var(--yellow);font-size:15.5px;line-height:1.55;color:var(--grey2)}

@media(max-width:560px){
  .jet-apb-calendar-date{min-height:40px;font-size:15px}
  .jet-apb-calendar-appointments-list > *{flex:1 1 calc(50% - 4px);padding:11px 8px}
}

/* Der Tagestext steckt in einem eigenen Kind (.jet-apb-calendar-date-body). Das Plugin
   faerbt es mit hoeherer Spezifitaet, deshalb stand am gewaehlten Tag Gelb auf Gelb und
   die Zahl war unsichtbar. Gemessen am 24.09.2026: color und background beide
   rgb(255,196,0). Hier wird das Kind mitgefaerbt. */
.jet-apb-calendar .jet-apb-calendar-date-body{color:inherit}
.jet-apb-calendar .jet-apb-calendar-date--selected,
.jet-apb-calendar .jet-apb-calendar-date--selected .jet-apb-calendar-date-body{color:var(--coal)}
.jet-apb-calendar .jet-apb-calendar-date--disabled,
.jet-apb-calendar .jet-apb-calendar-date--disabled .jet-apb-calendar-date-body{color:#55606A}
.jet-apb-calendar .jet-apb-calendar-date:not(.jet-apb-calendar-date--disabled):not(.jet-apb-calendar-date--selected):hover,
.jet-apb-calendar .jet-apb-calendar-date:not(.jet-apb-calendar-date--disabled):not(.jet-apb-calendar-date--selected):hover .jet-apb-calendar-date-body{color:var(--yellow)}

/* Die Zeitfenster heissen in Wahrheit .jet-apb-slot und stecken IM Tagesraster
   (.jet-apb-calendar-body > .jet-apb-calendar-slots > .jet-apb-calendar-slots-container).
   Deshalb schoben sie sich in schmalen Spalten zwischen die Tagesreihen. Gemessen am
   24.09.2026. Die Liste .jet-apb-calendar-appointments-list ist leer und wird nicht
   verwendet. */
.jet-apb-calendar-body{display:flex;flex-wrap:wrap}
.jet-apb-calendar-slots{order:99;flex:0 0 100%;width:100%;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--line)}
.jet-apb-calendar-slots-container{display:flex;flex-wrap:wrap;gap:8px}
.jet-apb-slot{font-family:var(--disp);font-weight:700;font-size:14.5px;letter-spacing:.02em;
  padding:11px 14px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line)!important;background:#1B222A!important;color:#fff!important;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.jet-apb-slot:hover{border-color:var(--yellow)!important;color:var(--yellow)!important}
.jet-apb-slot--selected,.jet-apb-slot.selected,.jet-apb-slot[class*="active"]{
  background:var(--yellow)!important;border-color:var(--yellow)!important;color:var(--coal)!important}
.jet-apb-slot--disabled,.jet-apb-slot[class*="disabled"]{
  opacity:.45;cursor:default;border-style:dashed!important}
@media(max-width:620px){
  .jet-apb-slot{flex:1 1 calc(50% - 4px);padding:11px 6px;font-size:14px}
}

/* Das Plugin legt fuer JEDEN Tag einen eigenen Slot-Kasten an, auch fuer die Tage ohne
   gewaehlte Zeiten. Mit der Linie oben ergab das fuenf leere Striche unter dem Raster.
   Sichtbar bleibt nur der Kasten, in dem wirklich Zeitfenster stehen. */
.jet-apb-calendar-slots:not(:has(.jet-apb-slot)){display:none!important}

/* ══════ Hinweis unter der Leistungsauswahl (Fabian, 25.09.2026) ══════
   Fabian: „Schreib für Pickerl den Hinweis, hier haben wir reservierte Slots.
   Das Gleiche beim Reifenservice, dass wir die letzte Oktoberwoche reserviert haben."
   Der Text kommt aus fplie-22, gerechnet aus dem echten Zeitplan der Terminart.
   Gleiche Sprache wie .tbu-wunsch, aber mit eigener Kopfzeile, weil hier eine
   Zusage steht und keine Einschränkung. */

.tbu-hinweis{margin:0 0 18px;padding:15px 17px;background:#1B222A;
  border-left:3px solid var(--yellow);font-size:15.5px;line-height:1.55;color:var(--grey2)}
.tbu-hinweis[hidden]{display:none}
.tbu-hinweis p{margin:0}
.tbu-hinweis p + p{margin-top:7px}
.tbu-hinweis b{display:block;font-family:var(--disp);font-weight:700;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}

/* ── EU-Hinweis „Gesetzliche Gewährleistung“ (VO 2025/1960), 28.09.2026 ──
   partials/gewaehrleistung.twig. Aufklappbar nach den Leitlinien der Kommission
   (Kapitel 2.3): Satz sichtbar, voller Hinweis beim ersten Klick, Link immer da.
   Das Bild ist die Originaldatei und wird nie beschnitten oder eingefärbt. */
.gwl{margin-top:22px}
.gwl summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;
  font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.gwl summary::-webkit-details-marker{display:none}
.gwl summary span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.gwl summary svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gwl summary .gwl-auf{width:16px;height:16px;transition:transform .2s}
.gwl[open] summary .gwl-auf{transform:rotate(180deg)}
.gwl summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.gwl-in{margin-top:12px;max-width:640px}
.gwl-in img{display:block;width:100%;height:auto;background:#fff;border:1px solid rgba(0,0,0,.12)}
.gwl-in a.gwl-bild{display:block;min-height:0;cursor:zoom-in}
.gwl-in p{margin-top:10px;font-size:14px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.gwl-in a{text-decoration:underline;display:inline-flex;align-items:center;min-height:44px}
.gwl--dunkel summary,.gwl--dunkel .gwl-in a{color:var(--akz-tx)}
.gwl--dunkel .gwl-in p{color:var(--grey2)}
.gwl--hell summary,.gwl--hell .gwl-in a{color:var(--akz-dk)}
.gwl--hell .gwl-in p{color:#4A5560}