@font-face{font-family:'Wix Madefor Display';font-style:normal;font-weight:400 800;font-display:swap;src:url(../schriften/wix-madefor-display.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 900;font-display:swap;src:url(../schriften/geist.woff2) format('woff2')}
:root{color-scheme:only light;
  --rot:#E30612; --rot-hell:#C4050F; --rot-tief:#A20410;
  --grund:#FFFFFF; --grund-2:#F5F7FA; --ton:#F1F4F8; --ton-kante:rgba(16,24,40,.08); --flaeche:#FFFFFF; --flaeche-2:#FAFBFD; --flaeche-3:#EEF2F7;
  --kante:rgba(16,24,40,.10); --kante-stark:rgba(16,24,40,.17);
  --stark:#0F1722; --text:#2B3441; --leise:#5C6879; --still:#616D7E;
  --gruen:#12924A;--gruen-tief:#0E7A3E;--wa:#25D366; --bernstein:#A9720B;
  --schatten-1:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --schatten-2:0 2px 4px rgba(16,24,40,.04),0 12px 28px -14px rgba(16,24,40,.22);
  --schatten-3:0 4px 10px rgba(16,24,40,.05),0 28px 56px -26px rgba(16,24,40,.3);
  --e:cubic-bezier(.23,1,.32,1); --e-w:cubic-bezier(.32,.72,0,1);
  --max:1560px;
  /* alt, zeigen auf die Skala */ --r:var(--r-1); --r-g:var(--r-2); --r-k:var(--r-2);
  --f-d:'Wix Madefor Display'; --f-t:'Geist'; --f-a:'Geist';--f-k:'Geist'; --f-n:'Geist';

  /* ---- Dunkle Seite: Rollen statt Einzelwerte -------------------------
     Der Bestand hatte neun Grautöne für Text auf Dunkel (#FFF, #E6EAF0,
     #C3CAD4, #C8D2DF, #AEB7C4, #A9B7CB, #98A2AE, #8E9AAB, #7C8695),
     sechs Rottöne und dreizehn Weiß-Transparenzen für dieselbe Haarlinie.
     Hier sind es fünf Textstufen, zwei Rot und vier Flächenwerte. */
  --d-grund:#0D0E12; --d-grund-2:#0A0A0B;
  --d-1:#FFFFFF; --d-2:#E6EAF0; --d-3:#C3CAD4; --d-4:#98A2AE; --d-5:#7C8695;
  --d-rot:#FF3B45; --d-rot-warm:#FF4A3C;
  --d-flaeche:rgba(255,255,255,.045); --d-flaeche-2:rgba(255,255,255,.035);
  --d-kante:rgba(255,255,255,.09); --d-kante-2:rgba(255,255,255,.16);
  --d-glanz:rgba(255,255,255,.07);

  /* ---- Abstandsskala --------------------------------------------------
     Vorgefunden: 45 verschiedene px-Werte, 26 davon auf keiner Skala. */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px; --s-12:96px;

  /* ---- Schriftgrößen ---------------------------------------------------
     Vorgefunden: 21 feste Größen plus 11 clamp-Rampen. */
  --fs-1:11px; --fs-2:12px; --fs-3:13px; --fs-4:14px; --fs-5:16px;
  --fs-6:19px; --fs-7:24px; --fs-8:30px;

  /* ---- Radien: vorgefunden 2,3,4,8,9,10,11,12,13,20 ------------------- */
  --r-1:3px; --r-2:6px; --r-3:9px; --r-4:12px;

  /* ---- Dauern: vorgefunden 18 verschiedene zwischen 110 und 800 ms ---- */
  --t-1:140ms; --t-2:200ms; --t-3:300ms; --t-4:420ms; --t-5:700ms;

  /* ---- Antippgröße und Ebenen ---------------------------------------- */
  --tipp:44px;
  --uhr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7.4V12l3.2 2'/%3E%3C/svg%3E");
  --z-band:1; --z-kopf:40; --z-menue:60; --z-modal:100;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--f-t),system-ui,sans-serif;
  font-size:var(--fs-5);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;font-family:var(--f-t),sans-serif;border:0}
input,textarea,select,button{-webkit-appearance:none;appearance:none;background-image:none;
  -webkit-border-radius:var(--r-1);border-radius:var(--r-1);font-family:inherit}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{-webkit-appearance:none;display:none}
:focus-visible{outline:2px solid var(--rot);outline-offset:3px;border-radius:var(--r-1)}
.mitte{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,3.4vw,44px)}
h1,h2,h3,h4{margin:0;font-family:var(--f-d),sans-serif;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
.eti{font-size:var(--fs-1);letter-spacing:.15em;text-transform:uppercase;font-weight:700}
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ===== Servicezeile ===== */
.serv{background:var(--grund-2);box-shadow:inset 0 -1px 0 var(--kante);font-size:var(--fs-3)}
.serv .mitte{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;flex-wrap:wrap}
.serv-l{display:flex;gap:26px;flex-wrap:wrap;color:var(--leise)}
.serv-l span{display:inline-flex;align-items:center;gap:9px}
.serv-l .ico{color:var(--rot);width:16px;height:16px}
.serv-r{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.serv-r a{display:inline-flex;align-items:center;gap:8px;font-weight:650;color:var(--stark);transition:color .35s var(--e)}
@media (hover:hover) and (pointer:fine){.serv-r a:hover{color:var(--rot-hell)}}
.serv-r .ico{color:var(--rot);width:16px;height:16px}

/* ===== Kopf ===== */
.kopf{background:var(--grund);position:sticky;top:0;z-index:60;box-shadow:inset 0 -1px 0 var(--kante)}
.kopf-h{display:flex;align-items:center;gap:clamp(24px,3vw,48px);padding:0 clamp(18px,3.4vw,44px)}
.kopf-h .logo{flex:none;padding:14px 0}
.kopf-h nav.hn{flex:1;min-width:0;box-shadow:none;background:transparent}
.logo img{height:36px;width:auto}

/* ===== Navigation mit Aufklappmenüs ===== */
nav.hn ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;align-items:center}
nav.hn li{display:flex}
nav.hn a,nav.hn .nav-b{display:flex;align-items:center;gap:7px;padding:14px 15px;white-space:nowrap;
  color:var(--leise);position:relative;background:none;border:0;cursor:pointer;
  font-family:var(--f-t),sans-serif;font-weight:700;
  font-size:var(--fs-2);letter-spacing:.12em;text-transform:uppercase;transition:color .3s var(--e)}
nav.hn a::after,nav.hn .nav-b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--rot);transform:scaleY(0);transform-origin:bottom;transition:transform .35s var(--e-w)}
@media (hover:hover) and (pointer:fine){nav.hn a:hover,nav.hn .nav-b:hover{color:var(--stark)}}
@media (hover:hover) and (pointer:fine){nav.hn a:hover::after,nav.hn .nav-b:hover::after{transform:scaleY(.45)}}
nav.hn a.an,nav.hn .nav-b[aria-expanded="true"]{color:var(--stark)}
nav.hn a.an::after,nav.hn .nav-b[aria-expanded="true"]::after{transform:scaleY(1)}
nav.hn .nav-b .pf{width:9px;height:9px;opacity:.6;transition:transform .3s var(--e)}
nav.hn .nav-b[aria-expanded="true"] .pf{transform:rotate(180deg)}
nav.hn li.nav-w{margin-left:auto}
nav.hn a.nav-gew{color:var(--text)}
nav.hn a.nav-gew .ico{width:17px;height:17px;color:var(--rot)}

.menue{position:absolute;left:0;right:0;top:100%;z-index:70;background:var(--flaeche);
  box-shadow:inset 0 1px 0 var(--kante),0 28px 50px -26px rgba(16,24,40,.4);
  padding:26px 0 20px;visibility:hidden;opacity:0;transform:translateY(-7px);
  transition:opacity .18s var(--e),transform .18s var(--e),visibility 0s .18s}
.menue.auf{visibility:visible;opacity:1;transform:none;
  transition:opacity .18s var(--e),transform .18s var(--e),visibility 0s}
.mn-r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,54px)}
.menue h3{font-family:var(--f-t),sans-serif;font-weight:700;
  font-size:var(--fs-1);letter-spacing:.18em;text-transform:uppercase;color:var(--still);
  margin-bottom:10px;padding-bottom:8px;box-shadow:inset 0 -1px 0 var(--kante)}
nav.hn .menue ul{display:flex;flex-direction:column;gap:0;align-items:stretch}
nav.hn .menue li{display:block}
nav.hn .menue .mn-r a,nav.hn .menue .mn-m a{display:block;text-align:left;padding:6px 0;font-family:var(--f-t),sans-serif;
  font-variation-settings:normal;font-size:var(--fs-4);font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--text);white-space:normal}
nav.hn .menue a::after{display:none}
@media (hover:hover) and (pointer:fine){nav.hn .menue .mn-r a:hover,nav.hn .menue .mn-m a:hover{color:var(--rot-hell)}}
nav.hn .menue .mn-m ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.6vw,44px)}
.mn-f{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:20px;padding-top:15px;
  box-shadow:inset 0 1px 0 var(--kante)}
nav.hn .menue .mn-f a{padding:0;font-family:var(--f-t),sans-serif;font-variation-settings:normal;
  font-size:var(--fs-3);font-weight:600;letter-spacing:0;text-transform:none;color:var(--stark)}
@media (hover:hover) and (pointer:fine){nav.hn .menue .mn-f a:hover{color:var(--rot-hell)}}
.mn-h{font-size:var(--fs-3);color:var(--leise);max-width:52ch}
nav.hn .menue .mn-mehr{margin-left:auto;display:inline-flex;align-items:center;gap:10px;color:var(--rot-hell)}
nav.hn .menue .mn-mehr .kr{width:24px;height:24px;display:grid;place-items:center;background:var(--rot);
  color:var(--d-1);transition:transform .3s var(--e)}
nav.hn .menue .mn-mehr .kr .ico{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){nav.hn .menue .mn-mehr:hover .kr{transform:translateX(3px)}}

.mn-r.mn-r2{grid-template-columns:repeat(2,minmax(0,1fr))}
nav.hn .menue .mn-zu{display:inline-block;margin-left:9px;font-size:var(--fs-1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--still);vertical-align:middle}
.tgs-sym{margin-bottom:14px}
.tgs-sym .tg-i{width:38px;height:38px;color:var(--stark)}
.tgs-sym .fk{fill:var(--rot);stroke:none}
.tgs-sym .fs{stroke:var(--rot)}
/* ===== Dunkles Band ===== */
.dunkel{position:relative;isolation:isolate;overflow:hidden;color:var(--d-2);
  background:var(--d-grund);
  box-shadow:inset 0 1px 0 var(--d-kante),inset 0 -1px 0 var(--d-kante)}
/* Punktraster entfernt: bei 22px Abstand und .05 Deckkraft liest es sich als
   Rauschen, nicht als Material. Die Flaeche traegt jetzt allein der Verlauf. */
/* Kein Muster, kein Verlauf: das dunkle Band ist eine Flaeche in einer Farbe. */
.dunkel::before{content:none}
.dunkel .ab-kopf h2{color:var(--d-1)}
.dunkel .ab-kopf p{color:var(--d-4)}
.dunkel .ab-z{color:var(--d-5)}
.dunkel .mehr{color:var(--d-2)}
.dunkel .mehr .kr{background:var(--d-glanz);box-shadow:inset 0 0 0 1px var(--d-kante-2)}
@media (hover:hover) and (pointer:fine){.dunkel .mehr:hover .kr{background:var(--rot);box-shadow:none}}
.dunkel .abl li b{color:var(--d-1)}
.dunkel .abl li span{color:var(--d-4)}
.dunkel .abl li::before{color:var(--d-rot)}
.dunkel .ort-txt p{color:var(--d-3)}
.dunkel .ort-txt b{color:var(--d-1)}
.dunkel .ort-n a{color:var(--d-2);background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
@media (hover:hover) and (pointer:fine){.dunkel .ort-n a:hover{color:var(--d-1);box-shadow:inset 0 0 0 2px var(--rot)}}

/* ===== Karte ===== */

/* Ablauf beim Sichtbarwerden */
@keyframes k-halo{0%{opacity:.9;transform:scale(.55)}70%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
@keyframes k-ring{0%{opacity:.85;transform:scale(.6)}70%{opacity:0;transform:scale(1.6)}100%{opacity:0}}
@keyframes k-fluss{to{stroke-dashoffset:-1300}}
@media (prefers-reduced-motion:reduce){
.k-o{opacity:1}.k-fahrt{opacity:0}}

/* ===== Markenseiten ===== */
.m-kopf{position:relative;isolation:isolate;overflow:hidden;background:#0A0A0B;
  min-height:clamp(360px,42vw,520px);display:flex;align-items:flex-end}
.m-kopf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.04);transition:transform 1.4s cubic-bezier(.32,.72,0,1)}
.m-kopf.an img{transform:none}
.m-kopf::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,7,9,.94) 0%,rgba(6,7,9,.78) 34%,rgba(6,7,9,.25) 68%,rgba(6,7,9,.5) 100%),
             linear-gradient(0deg,rgba(6,7,9,.85),transparent 55%)}
.m-kopf .mitte{position:relative;z-index:2;padding:clamp(38px,5vw,74px) clamp(18px,3.4vw,44px) clamp(26px,3vw,44px)}
.m-kopf .s-weg{color:var(--d-4)}
.m-kopf .s-weg a{color:var(--d-3)}
.m-kopf h1{font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;text-transform:none;color:var(--d-1);
  font-size:clamp(30px,4.6vw,60px);line-height:1.08;letter-spacing:-.004em;margin:12px 0 14px;max-width:16ch}
.m-kopf h1 em{font-style:normal;display:block;color:var(--d-rot)}
.m-kopf>.mitte>p{color:var(--d-3);font-size:var(--fs-5);line-height:1.62;max-width:52ch}
.m-quelle{margin-top:18px;font-size:var(--fs-1);color:rgba(255,255,255,.5);line-height:1.5;max-width:62ch}
.m-quelle a{color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:2px}
@media (hover:hover) and (pointer:fine){.m-quelle a:hover{color:var(--d-1)}}
.m-mod{display:flex;flex-wrap:wrap;gap:9px}
.m-mod button{display:inline-flex;align-items:center;gap:9px;min-height:44px;cursor:pointer;
  font-family:var(--f-t),sans-serif;font-weight:650;font-size:var(--fs-4);
  color:var(--d-2);background:rgba(255,255,255,.05);padding:10px 16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
  transition:background .22s var(--e),box-shadow .22s var(--e),color .22s var(--e)}
.m-mod button::before{content:"";width:7px;height:7px;background:var(--rot);flex:none;
  transition:transform .22s var(--e)}
@media (hover:hover) and (pointer:fine){.m-mod button:hover{color:var(--d-1);background:rgba(227,6,18,.14);box-shadow:inset 0 0 0 1px var(--rot)}}
@media (hover:hover) and (pointer:fine){.m-mod button:hover::before{transform:scale(1.4)}}
.m-mod button:active{background:rgba(227,6,18,.24)}
.m-mod button:focus-visible{outline:3px solid var(--rot);outline-offset:2px}
.m-and{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--kante);
  box-shadow:0 0 0 1px var(--kante)}
.m-and a{display:flex;align-items:center;min-height:56px;background:var(--flaeche);padding:12px 16px;
  font-family:var(--f-t),sans-serif;font-weight:650;font-size:var(--fs-4);
  color:var(--stark);position:relative;transition:background .2s var(--e)}
.m-and a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rot);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--e-w)}
@media (hover:hover) and (pointer:fine){.m-and a:hover{background:var(--flaeche-2)}}
@media (hover:hover) and (pointer:fine){.m-and a:hover::after{transform:scaleX(1)}}
@media (max-width:1180px){.m-and{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.m-and{grid-template-columns:minmax(0,1fr)}}
/* Top-Automarken-Liste */
.m-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 26px}
@media (max-width:900px){.m-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.m-top{grid-template-columns:minmax(0,1fr)}}
.m-top a{display:block;padding:9px 0;font-size:var(--fs-5);color:var(--d-3);
  transition:color .2s var(--e),transform .2s var(--e)}
@media (hover:hover) and (pointer:fine){.m-top a:hover{color:var(--d-1);transform:translateX(4px)}}
.m-top a b{font-weight:650;color:var(--d-1)}
.m-mehr{margin-top:20px;padding-top:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  font-size:var(--fs-4);color:var(--d-4)}
.m-mehr b{color:var(--d-1);font-weight:650}

/* ===== Teilegruppen-Kacheln ===== */
.tk-r{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--kante);
  box-shadow:0 0 0 1px var(--kante)}
.tk{position:relative;display:flex;align-items:center;gap:14px;min-height:66px;
  background:var(--flaeche);padding:14px 16px;color:var(--text);
  transition:background .2s var(--e),color .2s var(--e)}
.tk .tg-i{width:30px;height:30px;flex:none;color:var(--stark);
  transition:color .2s var(--e),transform .2s var(--e)}
.tk .fk{fill:var(--rot);stroke:none}
.tk .fs{stroke:var(--rot)}
.tk b{font-family:var(--f-t),sans-serif;font-weight:650;
  font-size:var(--fs-4);letter-spacing:-.008em;color:var(--stark);line-height:1.25}
.tk span{display:block;font-size:var(--fs-2);color:var(--still);margin-top:2px;line-height:1.35}
.tk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rot);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--e-w)}
@media (hover:hover) and (pointer:fine){.tk:hover{background:var(--flaeche-2)}}
@media (hover:hover) and (pointer:fine){.tk:hover .tg-i{color:var(--rot)}}
@media (hover:hover) and (pointer:fine){.tk:hover::after{transform:scaleX(1)}}
.tk:focus-visible{outline:3px solid var(--rot);outline-offset:-3px}
.tk:active{background:var(--flaeche-3)}
@media (max-width:1180px){.tk-r{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.tk-r{grid-template-columns:minmax(0,1fr)}}

/* ===== Ortsseiten: Karte neben Text ===== */
.ort-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:0 clamp(28px,3.6vw,56px);align-items:start}
@media (max-width:900px){.ort-g{grid-template-columns:minmax(0,1fr);gap:32px}}
.ort-txt p{font-size:var(--fs-5);line-height:1.68;color:var(--text);margin-bottom:14px;max-width:60ch}
.ort-txt p:last-child{margin-bottom:0}
.ort-txt b{color:var(--stark);font-weight:650}

/* ===== Ortsseiten ===== */
.ort-l{margin-bottom:0}
.ort-l li{padding:0}
.ort-l a{display:block;font-size:var(--fs-2);font-weight:600;color:var(--text);
  background:var(--flaeche-3);padding:var(--s-3) var(--s-4);box-shadow:inset 0 0 0 1px var(--kante);
  transition:color .3s var(--e),background .3s var(--e)}
@media (hover:hover) and (pointer:fine){.ort-l a:hover{color:var(--stark);background:#E2E8F0}}
.ort-n{display:flex;flex-wrap:wrap;gap:10px}
.ort-n a{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-4);font-weight:600;
  color:var(--stark);background:var(--flaeche);padding:var(--s-3) var(--s-4);
  box-shadow:inset 0 0 0 1px var(--kante-stark);transition:box-shadow .3s var(--e),color .3s var(--e)}
.ort-n a::before{content:"";width:7px;height:7px;background:var(--rot);flex:none}
@media (hover:hover) and (pointer:fine){.ort-n a:hover{color:var(--rot-hell);box-shadow:inset 0 0 0 2px var(--rot)}}
.geb-l a{color:inherit}
@media (hover:hover) and (pointer:fine){.geb-l a:hover{color:var(--rot-hell)}}

/* ===== Ratgeber ===== */
.bt-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--kante);
  box-shadow:0 0 0 1px var(--kante)}
.bt-k{display:block;background:var(--flaeche);padding:24px 24px 22px;transition:background .3s var(--e)}
@media (hover:hover) and (pointer:fine){.bt-k:hover{background:var(--flaeche-2)}}
.bt-m{display:flex;align-items:center;gap:10px;margin-bottom:10px;
  font-family:var(--f-t),sans-serif;font-weight:700;
  font-size:var(--fs-1);letter-spacing:.16em;text-transform:uppercase;color:var(--still)}
.bt-m b{color:var(--rot);font-weight:inherit}
.bt-k h3{font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;text-transform:none;
  font-size:var(--fs-7);line-height:1.1;letter-spacing:-.022em;color:var(--stark);margin-bottom:9px}
.bt-k p{font-size:var(--fs-4);line-height:1.6;color:var(--leise);max-width:48ch}
.bt-w{max-width:none}
.bt-in{display:grid;grid-template-columns:minmax(0,1fr) 412px;gap:0 clamp(30px,4vw,64px);align-items:start}
@media (max-width:1180px){.bt-in{grid-template-columns:minmax(0,1fr);gap:40px}.bt-r{grid-template-columns:minmax(0,1fr)}}
.bt-t{max-width:66ch}
.bt-t h2{font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;
  font-size:var(--fs-6);letter-spacing:-.016em;color:var(--stark);margin:34px 0 12px;line-height:1.2}
.bt-t h2:first-child{margin-top:0}
.bt-t p{font-size:var(--fs-5);line-height:1.68;color:var(--text);margin-bottom:14px}
.bt-t b{color:var(--stark);font-weight:650}
.bt-t ul,.bt-t ol.bt-ol{margin:0 0 18px;padding-left:0;list-style:none}
.bt-t ul li,.bt-t ol.bt-ol li{position:relative;padding-left:26px;margin-bottom:9px;
  font-size:var(--fs-5);line-height:1.62;color:var(--text)}
.bt-t ul li::before{content:"";position:absolute;left:2px;top:10px;width:7px;height:7px;background:var(--rot)}
.bt-t ol.bt-ol{counter-reset:bt}
.bt-t ol.bt-ol li{counter-increment:bt;padding-left:32px}
.bt-t ol.bt-ol li::before{content:counter(bt);position:absolute;left:0;top:0;
  font-family:var(--f-t),sans-serif;font-weight:700;font-size:var(--fs-3);color:var(--rot)}
.bt-hin{font-size:var(--fs-4);color:var(--leise);background:var(--flaeche-3);padding:13px 16px;
  box-shadow:inset 0 0 0 1px var(--kante);margin-bottom:14px}
.bt-lead{font-size:var(--fs-6);line-height:1.6;color:var(--leise);margin-bottom:8px;max-width:60ch}
.bt-seite{position:sticky;top:96px}
@media (max-width:1180px){.bt-seite{position:static}}

/* ===== Teilegruppen-Raster ===== */
.tg-r{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--kante);
  box-shadow:0 0 0 1px var(--kante)}
.tg{position:relative;display:block;background:var(--flaeche);padding:20px 20px 22px;
  transition:background .3s var(--e)}
.tg h3{font-family:var(--f-t),sans-serif;font-weight:700;
  font-size:var(--fs-5);letter-spacing:-.012em;color:var(--stark);margin-bottom:6px}
.tg>span{display:block;font-size:var(--fs-3);line-height:1.5;color:var(--leise);max-width:26ch}
.tg-pf{position:absolute;right:16px;top:18px;width:24px;height:24px;display:grid;place-items:center;
  color:var(--still);opacity:0;transform:translateX(-4px);
  transition:opacity .3s var(--e),transform .3s var(--e),color .3s var(--e)}
.tg-pf .ico{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.tg:hover{background:var(--flaeche-2)}}
@media (hover:hover) and (pointer:fine){.tg:hover .tg-pf{opacity:1;transform:none;color:var(--rot)}}
.tg:active{background:var(--flaeche-3)}
@media (max-width:1180px){.tg-r{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.tg-r{grid-template-columns:minmax(0,1fr)}}

/* ===== Teilegruppen-Seite ===== */
.tgs-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--kante);
  box-shadow:0 0 0 1px var(--kante)}
.tgs{background:var(--flaeche);padding:26px 26px 24px;scroll-margin-top:120px;
  display:flex;flex-direction:column}
.tgs-k{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:9px}
.tgs h2{font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;text-transform:none;
  font-size:var(--fs-7);line-height:1.1;letter-spacing:-.022em;color:var(--stark)}
.tgs-gr{font-family:var(--f-t),sans-serif;font-weight:700;
  font-size:var(--fs-1);letter-spacing:.16em;text-transform:uppercase;color:var(--still)}
.tgs>p{font-size:var(--fs-4);line-height:1.6;color:var(--leise);margin-bottom:14px;max-width:52ch}
.tgs-l{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.tgs-l li{font-size:var(--fs-2);font-weight:600;color:var(--text);background:var(--flaeche-3);
  padding:var(--s-2) var(--s-3);box-shadow:inset 0 0 0 1px var(--kante)}
.tgs-b{margin-top:auto;align-self:flex-start}
@media (max-width:900px){.tgs-r{grid-template-columns:minmax(0,1fr)}.tgs{padding:22px 20px}}

/* ===== Aufmacher: randloses Bild, Karte darueber =====
   Bild 1774x887 (2:1). Die Ware endet bei 66,9% der Breite, die unteren
   Siegel bei 91,1% der Hoehe. Die Karte sitzt rechts daneben im leeren
   Hallenteil. min-height bleibt unter 1180/2, damit bis zum Umbruch nichts
   seitlich beschnitten wird; die Bildlage 70% schuetzt unten die Siegel.
   Kein aspect-ratio, sondern min-height: so waechst der Aufmacher mit,
   falls die Karte einmal hoeher wird, statt sie abzuschneiden. */
.hero{position:relative;display:grid;align-content:center;background:#131315;
  overflow:hidden;isolation:isolate;
  width:100%;min-height:clamp(580px,50vw,900px)}
.hero-voll{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:left 70%;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(272deg,rgba(7,9,12,.6) 0%,rgba(7,9,12,.26) 30%,transparent 52%)}
.hero>.mitte{position:relative;z-index:2;width:100%}
.hero-r{display:grid;grid-template-columns:minmax(0,1fr) 412px;gap:0 44px;
  align-items:center;padding:clamp(26px,2.6vw,44px) 0}
.wa-k{grid-column:2}

.nur-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}


/* Schaltflaechen */
.btn{display:inline-flex;align-items:center;gap:14px;padding:15px 22px;border-radius:var(--r-1);
  font-family:var(--f-t),sans-serif;font-weight:650;font-size:var(--fs-4);letter-spacing:.004em;
  transition:background .3s var(--e),box-shadow .3s var(--e),color .3s var(--e),transform 140ms var(--e)}
.btn>span:first-child{display:flex;align-items:center;flex:1}
.btn .kr{display:grid;place-items:center;flex:none;
  transition:transform .42s var(--e-w),opacity .3s var(--e)}
.btn .kr .ico{width:17px;height:17px;stroke-width:2}
.btn:active{transform:scale(.982)}
.btn-rot{background:var(--rot);color:var(--d-1);box-shadow:0 1px 2px rgba(120,4,10,.24),0 8px 20px -10px rgba(227,6,18,.5)}
.btn-rot .kr{opacity:.72}
@media (hover:hover) and (pointer:fine){.btn-rot:hover{background:var(--rot-tief);box-shadow:0 1px 2px rgba(120,4,10,.3),0 12px 26px -10px rgba(227,6,18,.6)}}
@media (hover:hover) and (pointer:fine){.btn-rot:hover .kr{transform:translateX(3px);opacity:1}}
.btn-geist{background:var(--flaeche);color:var(--stark);box-shadow:inset 0 0 0 1px var(--kante-stark)}
.btn-geist .kr{color:var(--still)}
@media (hover:hover) and (pointer:fine){.btn-geist:hover{box-shadow:inset 0 0 0 1px rgba(16,24,40,.3)}}
@media (hover:hover) and (pointer:fine){.btn-geist:hover .kr{transform:translateX(3px);color:var(--rot)}}
.btn-voll{width:100%}

/* Rot bedeutet auf dieser Seite: hier nimmst du Kontakt auf.
   „Liefergebiet ansehen" im Bildband ist Navigation und trug bisher dasselbe
   Rot wie „Zugang anfragen". Auf dem Foto reicht eine helle Umrandung. */
.bahn-in .btn-rot{background:rgba(255,255,255,.12);color:var(--d-1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 8px 24px -14px rgba(0,0,0,.7)}
.bahn-in .btn-rot .kr{background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.btn-voll>span:first-child{flex:1}

/* Dunkles Vorteilsband unter dem Aufmacher */
/* ===== Servicezeile — der Hallenboden läuft aus dem Aufmacher weiter ===== */
.vor-band{position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(130% 240% at 50% -95%,rgba(255,255,255,.06),transparent 60%),
    linear-gradient(272deg,rgba(7,9,12,.55) 0%,rgba(7,9,12,.22) 32%,transparent 54%),
    linear-gradient(180deg,#0B0B0B 0%,#0E0E11 58%,#131318 100%)}
/* Scheinwerfer: läuft beim Sichtbarwerden genau einmal durch */
.vor-band::before{content:"";position:absolute;z-index:0;pointer-events:none;
  top:-70%;bottom:-70%;left:0;width:34%;opacity:0;transform:translateX(-130%);
  background:
    radial-gradient(26% 46% at 50% 50%,rgba(255,238,240,.15),transparent 70%),
    radial-gradient(50% 52% at 50% 50%,rgba(227,6,18,.34),rgba(227,6,18,.10) 45%,transparent 72%)}
.vor-band.an::before{animation:scheinwerfer 1.6s cubic-bezier(.4,.05,.2,1) .1s 1 both}
@keyframes scheinwerfer{
  0%{opacity:0;transform:translateX(-130%)}
  14%{opacity:1}
  86%{opacity:1}
  100%{opacity:0;transform:translateX(350%)}}
.vor-band .mitte{position:relative;z-index:1}
.vor-band ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(18px,2.4vw,42px)}
.vor-band li{display:flex;gap:16px;align-items:center;padding:33px 0;
  transform:translateY(10px);
  transition:opacity .6s var(--e),transform .6s var(--e)}
.js .vor-band li{opacity:0}
.vor-band.an li{opacity:1;transform:none}
.vor-band.an li:nth-child(2){transition-delay:.11s}
.vor-band.an li:nth-child(3){transition-delay:.22s}
.vor-band.an li:nth-child(4){transition-delay:.33s}
.vor-band .ico{width:34px;height:34px;flex:none;color:#D2D8E0}
.vor-band .fk{fill:var(--d-rot);stroke:none}
.vor-band .fs{stroke:var(--d-rot)}
.vor-band b{display:block;font-family:var(--f-t),sans-serif;font-weight:700;
  font-size:var(--fs-5);letter-spacing:-.014em;color:var(--d-1);margin-bottom:3px}
.vor-band span span{display:block;font-size:var(--fs-3);color:#99A0AA;line-height:1.4}
@media (prefers-reduced-motion:reduce){
  .vor-band::before,.vor-band.an::before{animation:none;opacity:0}
  .vor-band li{opacity:1;transform:none;transition:none}}

/* Anfragekarte */
.karte{background:var(--flaeche);border-radius:var(--r-2);
  backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px var(--kante),var(--schatten-3)}
.k-kopf{padding:28px 28px 20px}
.k-kopf h2,.k-kopf h3{font-size:var(--fs-8);color:var(--stark);margin-bottom:11px}
.fo-r .k-kopf h3{font-size:var(--fs-7)}
.k-kopf h2 em{font-style:normal;display:block;color:var(--rot)}
.k-kopf p{font-size:var(--fs-4);color:var(--leise);line-height:1.65}
.reiter{display:flex;gap:2px;padding:0 28px;box-shadow:inset 0 -1px 0 var(--kante);overflow-x:auto;scrollbar-width:none}
.reiter::-webkit-scrollbar{display:none}
.reiter button{background:transparent;color:var(--still);padding:12px 2px 14px;margin-right:20px;font-size:var(--fs-2);font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;position:relative;transition:color .35s var(--e)}
.reiter button .ico{width:15px;height:15px}
.reiter button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;background:var(--rot);
  transform:scaleX(0);transition:transform .45s var(--e)}
@media (hover:hover) and (pointer:fine){.reiter button:hover{color:var(--text)}}
.reiter button[aria-selected="true"]{color:var(--rot-hell)}
.reiter button[aria-selected="true"]::after{transform:scaleX(1)}
.k-body{padding:24px 28px 28px}
.feld{display:block;font-size:var(--fs-3);font-weight:600;color:var(--leise);margin-bottom:9px}
.feld i{font-style:normal;color:var(--still);font-weight:500}
.eing,select.eing,textarea.eing{width:100%;background:var(--grund-2);color:var(--text);border:0;padding:14px 16px;
  font:inherit;font-size:var(--fs-4);border-radius:var(--r-2);box-shadow:inset 0 0 0 1px var(--kante);
  transition:box-shadow .4s var(--e),background .4s var(--e)}
textarea.eing{min-height:76px;resize:vertical;line-height:1.55}
.eing::placeholder{color:var(--still)}
@media (hover:hover) and (pointer:fine){.eing:hover{box-shadow:inset 0 0 0 1px var(--kante-stark)}}
.eing:focus{outline:0;background:var(--flaeche);box-shadow:inset 0 0 0 1.5px var(--rot),0 0 0 4px rgba(227,6,18,.14)}
select.eing{appearance:none;-webkit-appearance:none;cursor:pointer}
.sel{position:relative}
.sel .s-pf{right:16px;top:50%;transform:translateY(-50%);color:var(--still)}
.gr{display:flex;flex-direction:column;gap:15px;margin-bottom:18px}

/* Dateiauswahl nach Vorlage */
.datei{display:flex;align-items:center;gap:14px;padding:12px 12px 12px 16px;cursor:pointer;
  background:var(--grund-2);border-radius:var(--r-2);box-shadow:inset 0 0 0 1px var(--kante);
  transition:box-shadow .4s var(--e),background .4s var(--e)}
@media (hover:hover) and (pointer:fine){.datei:hover{box-shadow:inset 0 0 0 1px var(--kante-stark)}}
.datei:focus-within{box-shadow:inset 0 0 0 1.5px var(--rot),0 0 0 4px rgba(227,6,18,.14)}
.datei input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.datei .ring{width:26px;height:26px;flex:none;color:var(--still)}
.datei .txt{flex:1;min-width:0}
.datei .txt b{display:block;font-size:var(--fs-2);font-weight:800;letter-spacing:.075em;text-transform:uppercase;color:var(--stark);margin-bottom:3px}
.datei .txt span{display:block;font-size:var(--fs-2);color:var(--still);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.datei .lad{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:var(--r-2);color:var(--rot-hell);
  background:rgba(227,6,18,.13);box-shadow:inset 0 0 0 1px rgba(227,6,18,.3);transition:background .35s var(--e)}
@media (hover:hover) and (pointer:fine){.datei:hover .lad{background:rgba(227,6,18,.22)}}
.datei .lad .ico{width:17px;height:17px}

/* Formular-Rückfalloption */
.fo-r{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:52px;align-items:start}
.fo-t h3{font-size:var(--fs-6);font-weight:800;letter-spacing:-.02em;color:var(--stark);margin-bottom:10px}
.fo-t p{color:var(--leise);font-size:var(--fs-5);line-height:1.65;max-width:46ch;margin-bottom:24px}
.fo-d{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px 26px;font-size:var(--fs-4);align-items:baseline}
.fo-d dt{color:var(--still);font-size:var(--fs-3)}
.fo-d dd{color:var(--text)}
.fo-d a{color:var(--stark);font-weight:700}
@media (hover:hover) and (pointer:fine){.fo-d a:hover{color:var(--rot-hell)}}

/* ===== Anfragekarte — weiss, Chat in eingelassener Nut ===== */
.chat{--pap:#FFFFFF;--nut:#E9EDF3;--tin:#0B0F14;--txt:#1E2733;--lei:#5A6674;--gr-d:#0E7A3E;
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  background:var(--pap);color:var(--txt);border-radius:var(--r-2);overflow:hidden;border-top:3px solid var(--rot);
  box-shadow:
    0 0 0 1px rgba(11,15,20,.12),
    0 0 0 2px rgba(255,255,255,.55),
    0 0 0 5px rgba(232,241,251,.22),
    0 0 0 9px rgba(198,216,238,.14),
    0 -1px 0 10px rgba(255,255,255,.40),
    0 0 0 10px rgba(255,255,255,.18),
    0 0 0 11px rgba(11,15,20,.10),
    0 1px 2px rgba(4,7,12,.16),
    0 12px 26px -10px rgba(4,7,12,.30),
    0 46px 84px -34px rgba(4,7,12,.62)}
/* dezente Spiegelung auf der Glasflaeche — auf Weiss kaum sichtbar,
   auf der getoenten Nut und dem dunklen WhatsApp-Knopf schon */
.chat::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    linear-gradient(126deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.13) 41%,
      rgba(255,255,255,.22) 45%,rgba(255,255,255,.07) 50%,rgba(255,255,255,0) 56%),
    radial-gradient(96% 62% at 100% 0%,rgba(198,216,238,.26),transparent 52%);
  /* Maske: der Reflex verlaeuft nach unten aus, bevor er Eingabefeld,
     WhatsApp-Knopf oder die Fusszeile der Karte erreicht */
  -webkit-mask:linear-gradient(180deg,#000 0,#000 26%,rgba(0,0,0,.35) 48%,transparent 66%);
  mask:linear-gradient(180deg,#000 0,#000 26%,rgba(0,0,0,.35) 48%,transparent 66%)}

.chat-k{padding:12px 21px 11px}
.eti-c{display:inline-flex;align-items:center;gap:7px;margin-bottom:9px;
  font-family:var(--f-t),sans-serif;font-weight:700;
  font-size:var(--fs-1);letter-spacing:.2em;text-transform:uppercase;color:var(--d-1);background:var(--rot);
  padding:var(--s-2) var(--s-3);border-radius:var(--r-1)}
.eti-c i{width:4px;height:4px;background:var(--flaeche);flex:none}
.akz,.chat-k h2{font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;text-transform:none;
  line-height:1.08;letter-spacing:-.022em}
.chat-k h2{font-size:36px;font-variation-settings:'wght' 800;color:var(--tin)}
.chat-k h2 em{font-style:normal;display:block;color:var(--rot)}

/* Die Nut: ein Band quer durch die Karte, in die Fläche eingelassen */
.verlauf{padding:12px 21px 13px;display:flex;flex-direction:column;gap:9px;
  background:radial-gradient(rgba(11,15,20,.06) .9px,transparent .9px) 0 0/20px 20px,var(--nut);
  box-shadow:inset 0 1px 0 rgba(11,15,20,.07),inset 0 -1px 0 rgba(11,15,20,.07),
    inset 0 3px 7px -4px rgba(11,15,20,.22),inset 0 -3px 7px -4px rgba(11,15,20,.14)}
.bl-ein{position:relative;align-self:flex-start;max-width:91%;background:var(--flaeche);
  padding:10px 14px 9px;font-size:var(--fs-4);line-height:1.5;color:var(--txt);
  box-shadow:0 1px 2px rgba(16,24,40,.14),0 8px 18px -10px rgba(16,24,40,.5)}
.bl-ein::after{content:"";position:absolute;left:-7px;bottom:0;width:7px;height:10px;background:var(--flaeche);
  clip-path:polygon(100% 0,100% 100%,0 100%)}
.bl-ein time{display:block;margin-top:5px;font-size:var(--fs-1);color:#6E7885}

.wa-feld{display:block;cursor:text;background:var(--flaeche);padding:9px 14px 10px 13px;
  border-left:3px solid var(--gr-d);
  box-shadow:0 1px 2px rgba(16,24,40,.14),0 10px 22px -12px rgba(16,24,40,.55);
  transition:box-shadow .3s var(--e)}
.wa-feld>span{display:block;font-family:var(--f-t),sans-serif;font-weight:700;
  font-size:var(--fs-1);letter-spacing:.17em;text-transform:uppercase;color:var(--gr-d);margin-bottom:6px}
.wa-feld textarea{width:100%;display:block;background:none;border:0;font:inherit;
  font-size:var(--fs-5);line-height:1.5;color:var(--tin);resize:none;overflow:auto;min-height:44px;max-height:88px;
  transition:height .3s var(--e-w)}
.wa-feld textarea::placeholder{color:#98A2B0}
.wa-feld textarea:focus{outline:0}
.wa-feld:focus-within{box-shadow:inset 0 0 0 1px rgba(14,122,62,.45),0 0 0 3px rgba(14,122,62,.16),
  0 1px 2px rgba(16,24,40,.14),0 12px 26px -12px rgba(16,24,40,.6)}

.wa-hin{display:flex;gap:11px;align-items:center;padding-top:2px}
.wa-hin .schein{display:block;width:92px;flex:none;height:auto;
  box-shadow:0 2px 7px -3px rgba(11,15,20,.5),0 0 0 1px rgba(11,15,20,.12)}
.wa-hin p{font-size:var(--fs-2);line-height:1.5;color:var(--lei)}
.wa-hin b{color:var(--tin);font-weight:650}

.chat-f{padding:12px 21px 13px;flex:none}
.wa-st{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:var(--fs-2);color:var(--lei);line-height:1.45}
.wa-st i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--gruen);
  box-shadow:0 0 0 0 rgba(18,146,74,.45);animation:puls 2.6s var(--e-w) infinite}
.wa-st i.zu{background:#98A2B0;animation:none;box-shadow:none}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(18,146,74,.45)}70%,100%{box-shadow:0 0 0 7px rgba(18,146,74,0)}}
.wa-alt{margin-top:9px;font-size:var(--fs-2);color:var(--lei);line-height:1.5}
.wa-alt a{color:var(--tin);font-weight:700}
@media (hover:hover) and (pointer:fine){.wa-alt a:hover{color:var(--rot-hell)}}

.wa-b{display:flex;align-items:center;gap:15px;padding:13px 16px 13px 15px;border-radius:var(--r-1);
  position:relative;isolation:isolate;overflow:hidden;color:var(--d-1);
  background:linear-gradient(104deg,#12291C 0%,#0A140E 46%,#070C09 100%);
  box-shadow:inset 0 0 0 1px rgba(37,211,102,.3),inset 0 1px 0 rgba(140,255,190,.14),
    0 12px 26px -14px rgba(4,7,12,.7);
  transition:box-shadow .5s var(--e),transform .16s var(--e)}
.wa-b::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 150% at 6% 50%,rgba(37,211,102,.24),transparent 70%)}
.wa-b::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:32%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(140,255,190,.16),transparent);
  transform:translateX(0);transition:transform 0s}
@media (hover:hover) and (pointer:fine){.wa-b:hover::after{transform:translateX(460%);transition:transform 1.1s var(--e-w)}}
@media (hover:hover) and (pointer:fine){.wa-b:hover{box-shadow:inset 0 0 0 1px rgba(37,211,102,.55),inset 0 1px 0 rgba(140,255,190,.2),
  0 16px 34px -14px rgba(4,7,12,.8),0 0 34px -16px rgba(37,211,102,.6)}}
.wa-b:active{transform:scale(.986)}
.wa-r{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;color:#EAFFF2;
  box-shadow:inset 0 0 0 1.4px rgba(198,255,220,.55);
  transition:box-shadow .5s var(--e),color .5s var(--e)}
.wa-r svg{width:19px;height:19px}
@media (hover:hover) and (pointer:fine){.wa-b:hover .wa-r{color:#7DFFB0;box-shadow:inset 0 0 0 1.4px rgba(125,255,176,.9),0 0 18px -6px rgba(37,211,102,.8)}}
.wa-t{flex:1;min-width:0;line-height:1.25}
.wa-t b{display:block;font-family:var(--f-t),sans-serif;font-weight:700;
  font-size:var(--fs-3);letter-spacing:.085em;text-transform:uppercase;color:var(--d-1);margin-bottom:3px}
.wa-t>span{display:block;font-size:var(--fs-2);color:#7FB894;letter-spacing:.005em}
.wa-pf{width:29px;height:34px;flex:none;color:var(--wa);
  transition:transform .55s var(--e-w),color .5s var(--e)}
@media (hover:hover) and (pointer:fine){.wa-b:hover .wa-pf{transform:translateX(4px);color:#59F49A}}

@media (prefers-reduced-motion:reduce){
@media (hover:hover) and (pointer:fine){.wa-b::after,.wa-b:hover::after{transition:none;transform:none;opacity:0}}
  .wa-st i{animation:none}}
@media (max-width:560px){
  .chat-k h2{font-size:var(--fs-8);font-variation-settings:'wght' 800}
  .wa-b{gap:12px;padding:12px 14px}
  .wa-pf{display:none}
  .wa-t b{font-size:var(--fs-2);letter-spacing:.05em}
  .wa-hin .schein{width:80px}
}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.chip{background:var(--flaeche-3);color:var(--text);padding:var(--s-2) var(--s-3);font-size:var(--fs-2);font-weight:600;border-radius:var(--r-1);
  box-shadow:inset 0 0 0 1px var(--kante);transition:color .35s var(--e),background .35s var(--e),transform 150ms var(--e)}
@media (hover:hover) and (pointer:fine){.chip:hover{color:var(--stark);background:#E2E8F0}}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--rot);color:var(--d-1);box-shadow:none}

/* ===== Bildbahn ===== */
.bahn{position:relative;width:100vw;margin-left:calc(50% - 50vw);background:#0A0D12;overflow:hidden}
.bahn img{width:100%;height:clamp(260px,34vw,440px);object-fit:cover;object-position:52% 56%;opacity:.94}
.bahn-l{position:absolute;left:0;right:0;bottom:0;padding:clamp(26px,3.4vw,52px) 0 clamp(24px,3vw,44px);
  background:linear-gradient(180deg,transparent,rgba(6,9,13,.88) 64%)}
.bahn-in{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,3.4vw,44px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.bahn h2{font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;font-size:clamp(24px,3.4vw,46px);line-height:1.1;
  text-transform:none;color:var(--d-1);letter-spacing:-.006em}
.bahn h2 em{font-style:normal;display:block;color:var(--d-rot)}

/* ===== Abschnitte ===== */
section{padding:64px 0}
.ab-kopf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 clamp(18px,2.2vw,30px);
  align-items:start;margin-bottom:34px;border-top:3px solid var(--rot);padding-top:20px}
.ab-nr{font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;font-size:clamp(36px,4.4vw,64px);line-height:.9;
  color:var(--rot);letter-spacing:-.03em;margin-top:4px;-webkit-user-select:none;user-select:none}
.ab-kopf h2{font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;font-size:clamp(24px,3vw,40px);line-height:1.1;
  letter-spacing:-.006em;text-transform:none;color:var(--stark)}
.ab-kopf p{margin-top:11px;color:var(--leise);font-size:var(--fs-5);max-width:56ch}
.ab-z{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:var(--fs-2);letter-spacing:.11em;
  text-transform:uppercase;color:var(--still);white-space:nowrap;align-self:end;padding-bottom:3px}
@media (max-width:900px){
  .ab-kopf{grid-template-columns:auto minmax(0,1fr);gap:0 16px}
  .ab-z{display:none}
  .mehr{grid-column:1 / -1;margin-top:16px}
}
.mehr{display:inline-flex;align-items:center;gap:11px;font-weight:650;font-size:var(--fs-4);color:var(--text);
  white-space:nowrap;align-self:end;padding-bottom:3px}
.mehr .kr{width:34px;height:34px;border-radius:var(--r-1);background:var(--flaeche);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--kante);transition:background .4s var(--e),transform .45s var(--e)}
.mehr .kr .ico{width:15px;height:15px}
@media (hover:hover) and (pointer:fine){.mehr:hover .kr{background:var(--rot);transform:translate(3px,-2px)}}

/* Marken-Slider */
.slider{position:relative}
.sl-f{overflow:hidden;border-radius:var(--r-1);box-shadow:inset 0 0 0 1px var(--kante)}
.sl-s{display:flex;align-items:flex-start;transition:transform .8s var(--e-w)}
.sl{flex:0 0 100%;display:block;background:var(--grund-2)}
.sl img{width:100%;height:auto}
.sl-i{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:13px 18px;background:var(--flaeche);
  font-size:var(--fs-3);color:var(--leise);box-shadow:inset 0 1px 0 var(--kante)}
.sl-i i{font-style:normal;font-weight:700;color:var(--rot-hell)}
.sl-st{margin-top:12px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.sl-p{display:flex;gap:6px}
/* Antippziel: der sichtbare Strich ist 3 px, der Knopf 28×39 px.
   Galt bis 03.09. nur unter 760 px — am Zeigergerät war das Ziel 28×3 px. */
.sl-p button{width:28px;height:auto;padding:18px 0;background:none;border-radius:0;
  transition:background .4s var(--e)}
.sl-p button::before{content:"";display:block;height:3px;border-radius:var(--r-1);
  background:var(--flaeche-3);transition:background .4s var(--e)}
.sl-p button.an{background:none}
.sl-p button.an::before{background:var(--rot)}
.sl-p button.an{background:var(--rot)}
.sl-n{display:flex;gap:6px}
.sl-n button{width:34px;height:28px;border-radius:var(--r-1);background:var(--flaeche);color:var(--text);font-size:var(--fs-5);
  box-shadow:inset 0 0 0 1px var(--kante);transition:background .4s var(--e),transform 150ms var(--e)}
@media (hover:hover) and (pointer:fine){.sl-n button:hover{background:var(--rot);color:var(--d-1)}}
.sl-n button:active{transform:scale(.95)}

/* Gewerbe */
.gew{background:var(--d-grund);color:var(--d-1);position:relative;overflow:hidden}
.gew::before{content:none}
.gew .mitte{position:relative;z-index:1}
.gew-r{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:center}
.gew h2{font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;font-size:clamp(24px,3.6vw,50px);font-weight:400;
  letter-spacing:-.006em;line-height:1.1;text-transform:none;color:var(--d-1);margin-bottom:20px}
.gew h2 em{font-style:normal;color:var(--d-rot)}
.gew .ein{font-size:var(--fs-5);color:rgba(255,255,255,.92);max-width:48ch;line-height:1.62;margin-bottom:30px}
.g-li{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px 28px}
.g-li li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-4);color:rgba(255,255,255,.86);line-height:1.45}
.g-li .ico{color:var(--d-rot);width:19px;height:19px;margin-top:2px;stroke-width:3}
.g-li b{color:var(--d-1);font-weight:700}
.g-k{background:var(--flaeche);border-radius:var(--r-3);padding:var(--s-7);
  box-shadow:0 0 0 1px rgba(0,0,0,.09),0 30px 62px -28px rgba(0,0,0,.62)}
.g-k h3{font-size:var(--fs-6);font-weight:750;letter-spacing:-.02em;color:var(--stark);margin-bottom:9px}
.g-k p{font-size:var(--fs-4);color:var(--leise);line-height:1.55;margin-bottom:24px}
.g-kt{margin-top:22px;padding-top:20px;box-shadow:inset 0 1px 0 var(--kante);font-size:var(--fs-4);color:var(--still);line-height:1.65}
.g-kt a{color:var(--stark);font-weight:650}
@media (hover:hover) and (pointer:fine){.g-kt a:hover{color:var(--rot-hell)}}
.gew-eti{display:block;margin-bottom:16px;color:rgba(255,255,255,.8)}
.gew-nr{font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;font-size:clamp(36px,4.2vw,60px);line-height:.9;
  color:var(--d-rot);letter-spacing:-.03em;display:block;margin-bottom:14px}

/* Verbund */
.str{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.str-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.haus{background:var(--flaeche);border-radius:var(--r-2);padding:var(--s-6);display:flex;flex-direction:column;
  box-shadow:inset 0 0 0 1px var(--kante);transition:background .45s var(--e),box-shadow .45s var(--e),transform 150ms var(--e)}
@media (hover:hover) and (pointer:fine){.haus:hover{background:var(--flaeche-2);box-shadow:inset 0 0 0 1px var(--kante-stark)}}
.haus:active{transform:scale(.99)}
.haus.eigen{background:linear-gradient(160deg,#FFF6F6,#FFFFFF);box-shadow:inset 0 0 0 1.5px rgba(227,6,18,.35),var(--schatten-1)}
.haus .nr{color:var(--still);margin-bottom:16px;padding-bottom:14px;box-shadow:inset 0 -1px 0 var(--kante)}
.haus.eigen .nr{color:var(--rot-hell)}
.haus h3{font-size:var(--fs-5);font-weight:750;letter-spacing:-.018em;color:var(--stark);margin-bottom:8px}
.haus p{font-size:var(--fs-3);color:var(--leise);line-height:1.5}
.haus .hin{margin-top:auto;padding-top:18px;font-size:var(--fs-3);font-weight:650;color:var(--rot-hell);
  display:inline-flex;align-items:center;gap:8px;transition:gap .4s var(--e)}
@media (hover:hover) and (pointer:fine){.haus:hover .hin{gap:13px}}

/* Standort */
.st-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.karte-p{aspect-ratio:16/11;background:var(--flaeche);border-radius:var(--r-2);display:grid;place-items:center;
  text-align:center;padding:var(--s-6);box-shadow:inset 0 0 0 1px var(--kante)}
.karte-p p{font-size:var(--fs-4);color:var(--still);max-width:32ch;line-height:1.5}
.dl{margin:0}
.dz{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:15px 0;box-shadow:inset 0 -1px 0 var(--kante);font-size:var(--fs-4)}
.dz dt{color:var(--still);font-weight:600}
.dz dd{margin:0;color:var(--text)}
.dz dd a{font-weight:650;border-bottom:2px solid var(--rot)}
.dz .kl{display:block;margin-top:3px;color:var(--still);font-size:var(--fs-3)}

/* Öffnungszeiten und Kontaktdaten stehen auf kontakt.html in einem
   .dunkel-Band, waren aber mit Hell-Tokens gebaut. Gemessen vor der Korrektur:
   Wochentage 1,07:1 · Anschrift und Telefon 1,53:1 — praktisch unlesbar. */
.dunkel .ko-t li{box-shadow:inset 0 -1px 0 var(--d-kante)}
.dunkel .ko-t b{color:var(--d-1)}
.dunkel .ko-t span{color:var(--d-3)}
.dunkel .ko-t li.zu b{color:var(--d-4)}
.dunkel .ko-t li.zu span{color:var(--d-5)}
.dunkel .dz{box-shadow:inset 0 -1px 0 var(--d-kante)}
.dunkel .dz dt{color:var(--d-4)}
.dunkel .dz dd{color:var(--d-2)}
.dunkel .dz dd a{color:var(--d-1);border-bottom-color:var(--d-rot)}
.dunkel .dz .kl{color:var(--d-4)}
.abl{list-style:none;margin:30px 0 0;padding:0;counter-reset:s;display:flex;flex-direction:column;gap:16px}
.abl li{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:start}
.abl li::before{counter-increment:s;content:counter(s);grid-column:1;grid-row:1 / span 2;width:36px;height:36px;border-radius:var(--r-1);
  background:var(--flaeche);color:var(--rot-hell);display:grid;place-items:center;font-size:var(--fs-4);font-weight:750;
  box-shadow:inset 0 0 0 1px var(--kante)}
.abl b{grid-column:2;display:block;font-size:var(--fs-5);font-weight:650;color:var(--stark);margin-bottom:2px}
.abl span{grid-column:2;font-size:var(--fs-4);color:var(--leise);line-height:1.5}

/* Ratgeber */
.rat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rat-a{background:var(--flaeche);border-radius:var(--r-2);padding:var(--s-6);display:flex;flex-direction:column;
  box-shadow:inset 0 0 0 1px var(--kante);transition:background .45s var(--e),box-shadow .45s var(--e)}
@media (hover:hover) and (pointer:fine){.rat-a:hover{background:var(--flaeche-2);box-shadow:inset 0 0 0 1px var(--kante-stark)}}
.rat-a .th{color:var(--rot-hell);margin-bottom:14px;display:block}
.rat-a h3{font-size:var(--fs-6);line-height:1.3;font-weight:750;letter-spacing:-.018em;color:var(--stark);margin-bottom:10px}
.rat-a p{font-size:var(--fs-4);color:var(--leise);line-height:1.5;margin-bottom:18px}
.rat-a .std{margin-top:auto;padding-top:16px;box-shadow:inset 0 1px 0 var(--kante);font-size:var(--fs-2);color:var(--still)}
/* Anmerkungen: die einzige Stelle, an der Beige vorkam. Die Seite kennt
   Rot, Graphit und Weiss — ein Sandton gehoert nicht dazu. Jetzt ein ruhiger
   Kasten in den eigenen Toenen, mit grauer Kante links als Anmerkungszeichen. */
.notiz{margin-top:var(--s-5);padding:var(--s-4) var(--s-5);
  background:var(--flaeche-3);border-radius:var(--r-2);
  box-shadow:inset 0 0 0 1px var(--kante),inset 3px 0 0 var(--kante-stark);
  font-size:var(--fs-4);color:var(--leise);line-height:1.6}
.dunkel .notiz{background:var(--d-flaeche-2);color:var(--d-3);
  box-shadow:inset 0 0 0 1px var(--d-kante),inset 3px 0 0 var(--d-kante-2)}
.dunkel .notiz b{color:var(--d-1)}
.notiz b{color:var(--text)}

/* Fuß */
footer{background:var(--grund-2);box-shadow:inset 0 1px 0 var(--kante);padding:56px 0 0;font-size:var(--fs-4);color:var(--leise)}
.f-r{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);
  gap:var(--s-8);padding-bottom:var(--s-8)}
footer h3{position:relative;color:var(--stark);font-size:var(--fs-2);margin-bottom:18px;padding-top:17px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;font-family:var(--f-t),sans-serif}
footer h3::before{content:"";position:absolute;top:0;left:0;width:22px;height:2px;border-radius:1px;background:var(--rot)}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
/* footer a:hover entfernt — die Verweisregel unten deckt es genauer ab. */
.f-m img{height:36px;width:auto;align-self:flex-start;margin-bottom:18px}
.f-m p{margin-bottom:10px;line-height:1.7}
.f-m .tel{font-family:var(--f-t),sans-serif;font-variant-numeric:tabular-nums;font-size:var(--fs-6);font-weight:750;color:var(--stark);letter-spacing:-.02em}
@media (hover:hover) and (pointer:fine){.f-m .tel:hover{color:var(--rot-hell)}}
.f-bald{color:var(--still);font-size:var(--fs-2);line-height:1.5;display:block;padding-top:2px}
.f-u{box-shadow:inset 0 1px 0 var(--kante);padding:20px 0;display:flex;justify-content:space-between;gap:16px;
  flex-wrap:wrap;font-size:var(--fs-3);color:var(--leise)}
.f-u>span:first-child{color:var(--text);font-weight:600}
/* Haarlinien in der Mitte der Spaltenfugen — macht aus vier Listen ein Raster */
.f-r>div{position:relative}
.f-r>div+div::before{content:"";position:absolute;top:0;bottom:0;
  left:calc(var(--s-8) / -2);width:1px;background:var(--kante)}

/* ===== Fusszeile lebendiger =========================================
   Vorher: vier gleich aussehende Textspalten, der Kontaktblock lief unten
   in 400px Leere aus, und die Service-Spalte war mit 12 Eintraegen doppelt
   so lang wie die Autoteile-Spalte. */

/* Ein roter Faden schliesst die Seite ab, statt sie auslaufen zu lassen. */
footer{position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--rot) 0%,rgba(227,6,18,.35) 34%,transparent 72%)}

/* Der Kontaktblock wird ein Objekt, kein loser Text. */
.f-m{background:var(--flaeche);border-radius:var(--r-3);
  padding:var(--s-6) var(--s-6) var(--s-5);align-self:start;
  box-shadow:inset 0 0 0 1px var(--kante),0 0 0 7px var(--flaeche-3),
    0 0 0 8px var(--kante),var(--schatten-1)}
.f-m img{margin-bottom:var(--s-4)}
.f-m .tel{min-height:auto;margin-bottom:2px}

/* Kontaktwege als Zeilen mit Symbol — der wichtigste Weg steht mit dabei. */
.f-wa{display:inline-flex;align-items:center;gap:9px;min-height:var(--tipp);
  font-weight:600;color:var(--gruen-tief);
  transition:color var(--t-1) var(--e),transform var(--t-1) var(--e)}
.f-wa:active,.f-m .tel:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.f-wa:hover{color:#0E7A3C}}
.f-m .tel{transition:color var(--t-1) var(--e),transform var(--t-1) var(--e);display:inline-block}
.f-wa svg{width:17px;height:17px;flex:none}
.f-m>p:last-of-type{display:flex;align-items:center;gap:9px;margin:0;
  font-size:var(--fs-3);color:var(--leise)}
/* Ausschilderung: Lieferung ist Gewerbekunden vorbehalten */
.f-hinweis{display:block;margin-top:14px;padding-top:13px;
  box-shadow:inset 0 1px 0 var(--kante);
  font-size:var(--fs-3);line-height:1.5;color:var(--leise)}
.f-hinweis b{color:var(--stark);font-weight:650}
.f-m>p:last-of-type::before{content:"";width:17px;height:17px;flex:none;
  background:currentColor;-webkit-mask:var(--uhr) center/contain no-repeat;
  mask:var(--uhr) center/contain no-repeat}

/* Die lange Service-Spalte laeuft ab 1180px zweispaltig — damit endet der
   ausgefranste Rand, ohne dass ein einziger Verweis umzieht. */
/* Zweispaltig war der falsche Griff: bei 1fr Spaltenbreite brechen
   „Volkswagen Ersatzteile" und „Autoteile Dresden-Mickten" mitten im Namen.
   Stattdessen bekommt die lange Spalte mehr Breite und bleibt einspaltig. */

/* Verweise bekommen eine Bewegung statt nur einer Farbe. */
footer ul li a{position:relative;display:inline-block;
  transition:color var(--t-1) var(--e)}
footer ul li a .mn-t{display:inline-block;
  transition:transform var(--t-1) var(--e-w)}
footer ul li a::before{content:"";position:absolute;left:-18px;top:50%;margin-top:-1px;
  width:12px;height:2px;border-radius:1px;background:var(--rot);
  transform:scaleX(0);transform-origin:left center;opacity:0;
  transition:transform var(--t-1) var(--e-w),opacity var(--t-1) var(--e)}
@media (hover:hover) and (pointer:fine){
  footer ul li a:hover{color:var(--stark);transition-duration:var(--t-2)}
  footer ul li a:hover .mn-t{transform:translateX(18px);transition-duration:var(--t-2)}
  footer ul li a:hover::before{transform:none;opacity:1;transition-duration:var(--t-2)}
}
footer ul li a:focus-visible{color:var(--stark)}
footer ul li a:focus-visible .mn-t{transform:translateX(18px)}
footer ul li a:focus-visible::before{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  footer ul li a,footer ul li a .mn-t,footer ul li a::before{transition:none}
  footer ul li a:hover .mn-t{transform:none}
}

@media (max-width:760px){
  .f-m{padding:var(--s-5) var(--s-5) var(--s-4)}
}


/* Verstecken nur mit JavaScript — greift der Beobachter nicht, steht der Inhalt einfach da */
.js .rein{opacity:0;transform:translateY(20px);transition:opacity .8s var(--e),transform .8s var(--e)}
.rein.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rein{opacity:1;transform:none;transition:none}}

@media (max-width:1180px){
  .kopf-h{flex-wrap:wrap;gap:0}
  .kopf-h .logo{padding:12px 0}
  .kopf-h nav.hn{flex:1 0 100%;box-shadow:inset 0 1px 0 var(--kante)}
  nav.hn ul{flex-direction:column;align-items:stretch;gap:0}
  nav.hn li,nav.hn li.hat-menue{display:block}
  nav.hn a,nav.hn .nav-b{width:100%;justify-content:space-between;padding:13px 0}
  nav.hn a::after,nav.hn .nav-b::after{height:2px}
  nav.hn li.nav-w{margin-left:0}
  .menue{position:static;box-shadow:inset 0 1px 0 var(--kante),inset 0 -1px 0 var(--kante);
    padding:14px 0 13px;visibility:visible;opacity:1;transform:none;display:none;
    background:var(--flaeche-2)}
  .menue.auf{display:block}
  .menue>.mitte{padding-left:0;padding-right:0}
  .mn-r{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 20px}
  nav.hn .menue .mn-m ul{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  nav.hn .menue .mn-r a,nav.hn .menue .mn-m a{padding:7px 0}
  .mn-f{flex-direction:column;align-items:flex-start;gap:9px}
  nav.hn .menue .mn-mehr{margin-left:0}
  .hero{background:#131315;aspect-ratio:auto;min-height:0}
  .hero-voll{position:static;height:auto;object-fit:contain}
  .hero::after{display:none}
  .hero-r{grid-template-columns:minmax(0,1fr);padding:0 0 26px}
  .wa-k{grid-column:1}
  .wa-k{margin-top:26px}
  .vor-band ul{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 26px}
  .vor-band li{padding:20px 0;gap:13px}
  .vor-band .ico{width:30px;height:30px}
  .fo-r{grid-template-columns:minmax(0,1fr);gap:34px}
  .gew-r{grid-template-columns:minmax(0,1fr);gap:36px}
  .rat{grid-template-columns:minmax(0,1fr)}
  .st-r{grid-template-columns:minmax(0,1fr);gap:34px}
  section{padding:48px 0}
}
@media (max-width:760px){
  .vor-band ul{grid-template-columns:minmax(0,1fr);gap:0}
  .vor-band li{padding:12px 0}
  .kopf-h{flex-wrap:wrap;gap:6px;padding:10px clamp(18px,3.4vw,44px)}
  .kopf-h .logo{padding:6px 0}
  .btn{width:100%}
  .btn>span:first-child{flex:1}
  .f-r{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}
  .dz{grid-template-columns:minmax(0,1fr);gap:3px}
  .serv-l{display:none}
  .serv .mitte{justify-content:center}
}

/* ===== Unterseiten ===== */
.s-kopf{background:linear-gradient(180deg,#0F1319,#161C25);color:var(--d-1);position:relative;overflow:hidden}
.s-kopf::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 92% at 10% -4%,rgba(227,6,18,.24),transparent 62%)}
.s-kopf .mitte{position:relative;z-index:1;padding:clamp(40px,5vw,78px) clamp(18px,3.4vw,44px) clamp(36px,4.4vw,64px)}
.s-weg{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:var(--fs-2);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:20px;font-family:var(--f-n),sans-serif;font-variation-settings:'wght' 800}
@media (hover:hover) and (pointer:fine){.s-weg a:hover{color:var(--d-1)}}
.s-kopf h1{font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;font-size:clamp(30px,4.2vw,52px);line-height:1.1;
  text-transform:none;letter-spacing:-.006em;color:var(--d-1);margin-bottom:20px;max-width:19ch}
.s-kopf h1 em{font-style:normal;color:var(--d-rot);display:block}
.s-kopf>.mitte>p{font-size:var(--fs-6);line-height:1.66;color:rgba(255,255,255,.82);max-width:58ch}
.s-zahlen{display:grid;grid-template-columns:repeat(3,auto);margin-top:32px;width:fit-content}
.s-zahlen div{padding:0 28px;box-shadow:inset -1px 0 0 rgba(255,255,255,.18)}
.s-zahlen div:first-child{padding-left:0}
.s-zahlen div:last-child{box-shadow:none;padding-right:0}
.s-zahlen b{display:block;font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;font-size:clamp(20px,2.4vw,30px);color:var(--d-1);line-height:1.1;margin-bottom:6px}
.s-zahlen span{font-size:var(--fs-2);color:rgba(255,255,255,.6);letter-spacing:.02em}
.z-spalt{display:grid;grid-template-columns:minmax(0,1fr) 424px;gap:clamp(30px,3.6vw,58px);align-items:start}

.marken-r{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:12px}
.marke{background:var(--flaeche);border-radius:var(--r-2);padding:20px;text-align:left;width:100%;font:inherit;
  box-shadow:inset 0 0 0 1px var(--kante);cursor:pointer;
  transition:box-shadow .35s var(--e),transform 150ms var(--e)}
@media (hover:hover) and (pointer:fine){.marke:hover{box-shadow:inset 0 0 0 1px rgba(227,6,18,.42),var(--schatten-2);transform:translateY(-2px)}}
.marke:active{transform:translateY(0) scale(.99)}
.marke b{display:block;font-family:var(--f-t),sans-serif;font-weight:700;
  font-size:var(--fs-5);letter-spacing:-.018em;color:var(--stark);margin-bottom:5px}
.marke span{display:block;font-size:var(--fs-2);color:var(--still);line-height:1.45}
.marke .pf{display:block;margin-top:12px;font-size:var(--fs-2);font-weight:650;color:var(--rot)}

.geb-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:0 26px}
.geb-l li{padding:11px 0;font-size:var(--fs-4);color:var(--text);box-shadow:inset 0 -1px 0 var(--kante);
  display:flex;align-items:center;gap:10px}
/* Punkt vor jedem Ortsnamen entfernt: die Haarlinie je Zeile markiert die
   Liste bereits. Punkt UND Linie ist doppelt, und der Punkt trug keine
   Bedeutung — er war nur Farbe. */
.geb-l li::before{content:none}
.geb-l li.offen{color:var(--still)}

@media (max-width:1180px){
  .z-spalt{grid-template-columns:minmax(0,1fr)}
  .s-zahlen{grid-template-columns:minmax(0,1fr);width:auto}
  .s-zahlen div{padding:0 0 14px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.18)}
  .s-zahlen div:last-child{box-shadow:none;padding-bottom:0}
}

p{text-wrap:pretty}
.sprung{position:absolute;left:-9999px;top:0;z-index:90;background:var(--stark);color:var(--d-1);font-family:var(--f-t),sans-serif;font-weight:700;font-size:var(--fs-3);line-height:1.1;padding:13px 18px;text-decoration:none;box-shadow:0 0 0 2px var(--rot)}
.sprung:focus{left:10px;top:10px}

.m-kopf>.mitte>p.s-weg,.s-kopf>.mitte>p.s-weg{font-size:var(--fs-2);line-height:1.5;max-width:none}

/* ===== Grund-Rhythmus: die Seite darf nicht durchgehend weiss sein ===== */
.g-ton{position:relative;isolation:isolate;background:var(--ton);
  box-shadow:inset 0 1px 0 var(--ton-kante),inset 0 -1px 0 var(--ton-kante)}
.g-ton::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.028;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)' opacity='.5'/%3E%3C/svg%3E");background-size:160px 160px}
.g-ton .karte,.g-ton .tk,.g-ton .tg,.g-ton .rat-a,.g-ton .bt-k,.g-ton .haus{background:var(--flaeche)}

/* ===== Formularabschnitt auf dunklem Grund: die weisse Karte wird zum Objekt ===== */
#formular.dunkel{color:#D7DDE6}
#formular.dunkel .ab-kopf h2{color:var(--d-1)}
#formular.dunkel .ab-kopf p{color:var(--d-3)}
#formular.dunkel .ab-z{color:rgba(255,255,255,.42)}
#formular.dunkel .fo-b{background:var(--d-flaeche);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 var(--d-glanz)}
#formular.dunkel .fo-b h3{color:var(--d-1)}
#formular.dunkel .fo-b p{color:var(--d-3)}
#formular.dunkel .fo-d dt{color:rgba(255,255,255,.48)}
#formular.dunkel .fo-d dd{color:var(--d-2)}
#formular.dunkel .fo-d a{color:var(--d-1)}
@media (hover:hover) and (pointer:fine){#formular.dunkel .fo-d a:hover{color:#FF6B73}}
#formular.dunkel .fo-s li{color:var(--d-3);
  box-shadow:inset 0 0 0 1px var(--d-kante)}
#formular.dunkel .fo-s b{color:var(--d-1)}
#formular.dunkel .fo-s li::before{background:var(--rot);color:var(--d-1)}

/* ===== Zwei gleich schwere Spalten statt Karte links und Leere rechts ===== */
.fo-r{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.6vw,40px);
  align-items:stretch;max-width:1180px}
.fo-t{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,24px)}
.fo-b{padding:clamp(22px,2.2vw,30px)}
.fo-t h3{margin-bottom:8px}
.fo-t p{margin-bottom:20px;max-width:42ch}
.fo-s{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fo-s li{position:relative;padding:15px 18px 15px 52px;font-size:var(--fs-4);line-height:1.55}
.fo-s li::before{content:counter(fs);counter-increment:fs;position:absolute;left:16px;top:15px;
  width:22px;height:22px;display:grid;place-items:center;
  font-family:var(--f-t),sans-serif;font-weight:700;font-size:var(--fs-1)}
.fo-s{counter-reset:fs}
.fo-s b{display:block;font-weight:700;margin-bottom:2px}
@media (max-width:900px){.fo-r{grid-template-columns:minmax(0,1fr)}}

.st-karte{position:relative}

@media (max-width:900px){.str{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.str{grid-template-columns:minmax(0,1fr)}}

.str .haus,.tk,.tg,.rat-a,.bt-k,.fo-s li{overflow-wrap:break-word;hyphens:auto}

@media (max-width:560px){
  .reiter{padding:0 16px}
  .reiter button{margin-right:12px;font-size:var(--fs-1);letter-spacing:.04em;gap:6px}
  .reiter button .ico{width:14px;height:14px}
  .reiter::after{display:none}
}
.reiter{position:relative}
.reiter::after{content:"";position:sticky;right:0;flex:none;width:24px;align-self:stretch;
  background:linear-gradient(90deg,transparent,var(--flaeche));pointer-events:none}

/* Die Karte war in der breitesten Spalte 992 px breit und damit 718 px hoch —
   daneben endete die Ortsliste schon nach 254 px. Deckel bei 620 px:
   Karte 620 × 450, in allen vier Kartenlayouts derselbe Maßstab. */
.m-fig{margin:0 auto;width:100%;max-width:620px;position:relative;padding:7px;overflow:hidden;border-radius:var(--r-3);
  background:linear-gradient(180deg,#161C27 0%,#0E1118 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.11),
             0 26px 64px -34px rgba(0,0,0,.9)}
.m-svg{width:100%;height:auto;display:block;border-radius:var(--r-1);
  background:radial-gradient(128% 104% at 72% 4%,#33405480 0%,#243044 38%,#1A2434 72%,#151D2B 100%),
             linear-gradient(180deg,#243044,#161E2C);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.m-grund{fill:none}
.m-dd{fill:rgba(255,82,50,.44);stroke:rgba(255,197,172,.7);stroke-width:1.4;stroke-linejoin:round}
.m-wasser{fill:none;stroke:#4FA3E0;stroke-width:3.4;stroke-linejoin:round;stroke-linecap:round}
.m-b-stadt{font-size:var(--fs-6);fill:var(--d-2);letter-spacing:.17em;font-weight:700}
.m-str{fill:none;stroke:rgba(214,228,246,.20);stroke-width:.9;stroke-linecap:round}
.m-gem{fill:rgba(255,82,50,.44);stroke:rgba(255,192,166,.9);stroke-width:1.4;stroke-linejoin:round}
.m-teil{fill:none;stroke:rgba(255,205,182,.26);stroke-width:1;stroke-linejoin:round}
.m-gem.m-ziel,.m-teil.m-ziel{fill:rgba(255,110,72,.74);stroke:#FFCBB0;stroke-width:2.6}
.m-b-ziel{fill:var(--d-1);font-weight:800}
.m-b-teil.m-b-ziel{font-size:var(--fs-4)}
.m-b{font-family:var(--f-t),system-ui,sans-serif;font-weight:600;
  paint-order:stroke;stroke:rgba(16,23,34,.9);stroke-width:3.6px;stroke-linejoin:round;text-anchor:middle}
.m-b-gem{font-size:var(--fs-4);fill:var(--d-1);letter-spacing:.01em}
.m-b-teil{font-size:var(--fs-2);fill:var(--d-3)}
.m-laden-b{font-family:var(--f-t),system-ui,sans-serif;font-weight:700;font-size:var(--fs-3);fill:var(--d-1);
  paint-order:stroke;stroke:rgba(16,23,34,.92);stroke-width:4.4px;stroke-linejoin:round}
.m-halo{fill:rgba(255,104,72,.38)}
.m-ring{fill:none;stroke:#FF7B57;stroke-width:1.6}
.m-kern{fill:var(--d-rot-warm)}

/* Aufbau beim Hereinscrollen */
/* Sichtbar ist der Standard. Der Aufbau laeuft ueber die Animation mit
   "both" — bleibt die Klasse .an aus, steht die Karte trotzdem da. */
.m-fig .m-dd,.m-fig .m-wasser,.m-fig .m-str,.m-fig .m-gem,.m-fig .m-teil{opacity:1}
.m-fig .m-b,.m-fig .m-laden,.m-fig .m-laden-b{opacity:1}
.m-fig.an .m-dd{animation:m-auf .5s ease-out .05s both}
.m-fig.an .m-wasser{animation:m-auf .6s ease-out .18s both}
.m-fig.an .m-str{animation:m-auf .6s ease-out .3s both}
.m-fig.an .m-gem{animation:m-auf .55s cubic-bezier(.23,1,.32,1) .38s both}
.m-fig.an .m-teil{animation:m-auf .55s cubic-bezier(.23,1,.32,1) .5s both}
.m-fig.an .m-b{animation:m-auf .45s ease-out .66s both}
.m-fig.an .m-laden{animation:m-punkt .6s cubic-bezier(.23,1,.32,1) .76s both}
.m-fig.an .m-laden-b{animation:m-auf .45s ease-out .9s both}
.m-fig.an .m-halo{animation:m-puls 2.8s ease-in-out 1.5s infinite}
@keyframes m-auf{from{opacity:0}to{opacity:1}}
@keyframes m-punkt{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
.m-laden{transform-box:fill-box;transform-origin:center}
@keyframes m-puls{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.9;transform:scale(1.35)}}
.m-halo{transform-box:fill-box;transform-origin:center}
.m-osm{font-family:var(--f-t),system-ui,sans-serif;font-size:var(--fs-2);font-weight:500;
  fill:rgba(255,255,255,.48);text-anchor:end;letter-spacing:.01em}

/* --- Karte: Einlauf mit Gewicht statt reinem Aufblenden.
   Die Flaechen setzen sich einzeln, jede um ihre eigene Mitte. --- */
@keyframes m-zone{from{opacity:0;transform:scale(.986)}to{opacity:1;transform:none}}
.m-fig .m-gem,.m-fig .m-teil{opacity:1;transform-box:fill-box;transform-origin:center}
.m-fig.an .m-gem{animation:m-zone .72s var(--e) .34s both}
.m-fig.an .m-teil{animation:m-zone .72s var(--e) .46s both}
@media (prefers-reduced-motion:reduce){
  .m-fig.an .m-gem,.m-fig.an .m-teil,.m-fig.an .m-dd,.m-fig.an .m-wasser,
  .m-fig.an .m-str,.m-fig.an .m-b,.m-fig.an .m-laden,.m-fig.an .m-laden-b,
  .m-fig.an .m-halo{animation:none}
}

/* --- Ortsliste und Hinweiskasten auf dunklem Grund.
   Beide waren fuer helle Abschnitte gebaut: var(--text) #2B3441 auf var(--ton)
   #F1F4F8. Auf .dunkel stand damit dunkelgrauer Text auf Schwarz und der
   Kasten war eine weisse Platte im dunklen Band. --- */
.dunkel .geb-l li{color:var(--d-2);box-shadow:inset 0 -1px 0 rgba(255,255,255,.10)}
.dunkel .geb-l li.offen{color:var(--d-4)}
@media (hover:hover) and (pointer:fine){.dunkel .geb-l a:hover{color:#FF9E72}}
.dunkel .geb-mehr{color:var(--d-3);background:var(--d-flaeche);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 2px 0 0 #FF4534}
.dunkel .geb-mehr b{color:var(--d-1)}
.geb-l li::before{transition:transform .42s var(--e-w),box-shadow .42s var(--e-w)}
@media (hover:hover) and (pointer:fine){.geb-l li:hover::before{transform:scale(1.55);box-shadow:0 0 0 4px rgba(255,69,52,.18)}}
@media (prefers-reduced-motion:reduce){
  .m-fig .m-dd,.m-fig .m-wasser,.m-fig .m-str,.m-fig .m-gem,.m-fig .m-teil,
  .m-fig .m-b,.m-fig .m-laden,.m-fig .m-laden-b{opacity:1;animation:none}
}

/* ===== Bildfeld der Ratgeberkarten ===== */
.bt-b{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0E1218;
  box-shadow:inset 0 -1px 0 var(--kante)}
.bt-b::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:13px 13px;opacity:.6}
.bt-b::after{content:"";position:absolute;inset:0;
  background:radial-gradient(88% 120% at 78% 8%,rgba(227,6,18,.30),transparent 62%)}
.bt-b.t-a::after{background:radial-gradient(88% 120% at 78% 8%,rgba(227,6,18,.30),transparent 62%)}
.bt-b.t-b::after{background:radial-gradient(90% 130% at 20% 100%,rgba(227,6,18,.34),transparent 60%)}
.bt-b.t-c::after{background:radial-gradient(100% 130% at 92% 88%,rgba(169,114,11,.34),transparent 62%)}
.bt-b.t-d::after{background:radial-gradient(90% 120% at 14% 12%,rgba(18,146,74,.30),transparent 60%)}
.bt-b.t-e::after{background:radial-gradient(100% 140% at 84% 96%,rgba(227,6,18,.26),transparent 64%)}
.bt-b.t-f::after{background:radial-gradient(92% 130% at 22% 16%,rgba(169,114,11,.36),transparent 60%)}
.bt-b.t-g::after{background:radial-gradient(96% 130% at 86% 20%,rgba(92,104,121,.44),transparent 62%)}
.bt-b svg{position:absolute;right:4%;bottom:-9%;width:54%;height:auto;z-index:2;
  color:rgba(255,255,255,.9);stroke-width:1.1;
  transition:transform .7s cubic-bezier(.23,1,.32,1)}
.bt-b svg .fk{fill:var(--rot)}
.bt-b svg .fs{stroke:var(--rot)}
@media (hover:hover) and (pointer:fine){.bt-k:hover .bt-b svg,.rat-a:hover .bt-b svg{transform:translate(-4px,-6px) rotate(-3deg)}}
.bt-k{overflow:hidden}
@media (prefers-reduced-motion:reduce){.bt-b svg{transition:none}}

/* ===== Aufklappmenue ===== */
nav.hn .menue{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFE 62%,#F4F7FB 100%);
  backdrop-filter:saturate(1.15) blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 2px 0 var(--kante),
             inset 0 -1px 0 var(--kante-stark),
             0 36px 64px -30px rgba(16,24,40,.42),0 8px 20px -14px rgba(16,24,40,.22);
  padding:30px 0 22px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .46s var(--e-w),visibility 0s .46s;
  opacity:1;transform:none}
nav.hn .menue.auf{clip-path:inset(0 0 0 0);visibility:visible;
  transition:clip-path .5s var(--e-w),visibility 0s}
/* feines Punktraster, wie auf den Ratgeberkarten */
nav.hn .menue>.mitte{position:relative}
nav.hn .menue>.mitte::before{content:"";position:absolute;inset:-30px 0 -22px;pointer-events:none;
  background-image:radial-gradient(rgba(16,24,40,.055) 1px,transparent 1px);
  background-size:15px 15px;opacity:.5}
nav.hn .menue .mn-r,nav.hn .menue .mn-f{position:relative;z-index:1}

/* Spalten laufen gestaffelt ein */
nav.hn .menue .mn-r>div,nav.hn .menue .mn-m>div,nav.hn .menue .mn-f{
  opacity:0;transform:translateY(12px);
  transition:opacity .01s,transform .01s}
nav.hn .menue.auf .mn-r>div,nav.hn .menue.auf .mn-m>div,nav.hn .menue.auf .mn-f{
  opacity:1;transform:none;
  transition:opacity .42s var(--e) var(--vz,.08s),transform .52s var(--e-w) var(--vz,.08s)}
nav.hn .menue .mn-r>div:nth-child(1){--vz:.06s}
nav.hn .menue .mn-r>div:nth-child(2){--vz:.12s}
nav.hn .menue .mn-r>div:nth-child(3){--vz:.18s}
nav.hn .menue .mn-r>div:nth-child(4){--vz:.24s}
nav.hn .menue .mn-f{--vz:.26s}

/* Ueberschrift: Haarlinie zieht sich auf */
nav.hn .menue h3{position:relative;box-shadow:none;padding-bottom:10px;margin-bottom:12px;
  color:var(--still)}
nav.hn .menue h3::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--kante-stark);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--e-w) .2s}
nav.hn .menue.auf h3::after{transform:scaleX(1)}

/* Zeilen: Strich waechst, Wort rueckt, Pfeil kommt nach */
nav.hn .menue .mn-r a,nav.hn .menue .mn-m a{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px 8px 0;isolation:isolate;
  transition:color .28s var(--e)}
nav.hn .menue .mn-r a::before,nav.hn .menue .mn-m a::before{
  content:"";position:absolute;inset:-1px -8px -1px -12px;z-index:-1;display:block;
  background:linear-gradient(90deg,rgba(227,6,18,.10),rgba(227,6,18,.02) 62%,transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--e-w)}
@media (hover:hover) and (pointer:fine){nav.hn .menue .mn-r a:hover::before,nav.hn .menue .mn-m a:hover::before,
nav.hn .menue .mn-r a:focus-visible::before,nav.hn .menue .mn-m a:focus-visible::before{transform:scaleX(1)}}
nav.hn .menue .mn-t{display:inline-flex;align-items:center;gap:9px;
  transition:transform .34s var(--e-w)}
nav.hn .menue .mn-t::before{content:"";width:0;height:2px;background:var(--rot);flex:none;
  transition:width .34s var(--e-w)}
@media (hover:hover) and (pointer:fine){nav.hn .menue .mn-r a:hover .mn-t,nav.hn .menue .mn-m a:hover .mn-t,
nav.hn .menue .mn-r a:focus-visible .mn-t,nav.hn .menue .mn-m a:focus-visible .mn-t{transform:translateX(4px)}}
@media (hover:hover) and (pointer:fine){nav.hn .menue .mn-r a:hover .mn-t::before,nav.hn .menue .mn-m a:hover .mn-t::before,
nav.hn .menue .mn-r a:focus-visible .mn-t::before,nav.hn .menue .mn-m a:focus-visible .mn-t::before{width:14px}}
nav.hn .menue .mn-r a::after,nav.hn .menue .mn-m a::after{
  content:"";display:block;position:static;left:auto;right:auto;bottom:auto;
  width:5px;height:5px;flex:none;background:none;
  border-right:1.6px solid var(--rot);border-bottom:1.6px solid var(--rot);
  transform:rotate(-45deg) translate(-7px,-7px);opacity:0;
  transition:transform .34s var(--e-w),opacity .26s var(--e)}
@media (hover:hover) and (pointer:fine){nav.hn .menue .mn-r a:hover::after,nav.hn .menue .mn-m a:hover::after,
nav.hn .menue .mn-r a:focus-visible::after,nav.hn .menue .mn-m a:focus-visible::after{
  opacity:1;transform:rotate(-45deg) translate(0,0)}}
nav.hn .menue .mn-r a:active,nav.hn .menue .mn-m a:active{transform:scale(.985)}

/* Fusszeile: der Knopf reagiert magnetisch */
nav.hn .menue .mn-mehr{transition:color .26s var(--e)}
nav.hn .menue .mn-mehr .kr{transition:transform .34s var(--e-w),background .26s var(--e)}
@media (hover:hover) and (pointer:fine){nav.hn .menue .mn-mehr:hover .kr{transform:translate(4px,-2px) scale(1.06);background:var(--rot-hell)}}
nav.hn .menue .mn-mehr:active{transform:scale(.98)}
nav.hn .menue .mn-f a:not(.mn-mehr){position:relative}
nav.hn .menue .mn-f a:not(.mn-mehr)::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;
  background:var(--rot);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--e-w)}
@media (hover:hover) and (pointer:fine){nav.hn .menue .mn-f a:not(.mn-mehr):hover::after{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  nav.hn .menue,nav.hn .menue.auf{clip-path:none;transition:none}
  nav.hn .menue .mn-r>div,nav.hn .menue .mn-m>div,nav.hn .menue .mn-f{opacity:1;transform:none;transition:none}
  nav.hn .menue h3::after{transform:scaleX(1);transition:none}
  nav.hn .menue .mn-t,nav.hn .menue .mn-r a::before,nav.hn .menue .mn-r a::after{transition:none}
}
@media (max-width:1000px){
  nav.hn .menue{clip-path:none;backdrop-filter:none;padding:14px 0 13px;
    background:var(--flaeche-2);box-shadow:inset 0 1px 0 var(--kante),inset 0 -1px 0 var(--kante)}
  nav.hn .menue>.mitte::before{display:none}
  nav.hn .menue .mn-r a::after,nav.hn .menue .mn-m a::after{display:none}
}

nav.hn .menue .mn-zu{margin-left:auto;margin-right:12px;flex:none;
  padding:2px 7px;background:rgba(16,24,40,.05);color:var(--still);
  box-shadow:inset 0 0 0 1px var(--kante);transition:color .28s var(--e),background .28s var(--e)}
@media (hover:hover) and (pointer:fine){nav.hn .menue .mn-r a:hover .mn-zu,nav.hn .menue .mn-r a:focus-visible .mn-zu{
  color:var(--rot-hell);background:rgba(227,6,18,.08);box-shadow:inset 0 0 0 1px rgba(227,6,18,.28)}}

/* ===== Leichte Rundung ===== */
/* .m-fig hier entfernt: die Kartenflaeche bringt ihren eigenen Radius (9px) mit.
   Auf index.html stand diese Gruppenregel HINTER der Kartenregel und hat sie auf
   6px zurueckgesetzt, auf drei anderen Seiten davor. Gleiche Komponente, zwei
   Radien je nach Seite. */
.bt-k,.fo-b,.sl,.sl-i,.fo-s li,.ort-k,.geb-k,.s-karte{border-radius:var(--r-2)}
/* Kachelraster: Fugen von 1px vertragen keine Rundung je Kachel */
.tk,.tg,.tgs-k{border-radius:0}
.bt-k{overflow:hidden}
.eti,.mn-zu,.kr,.m-mod button,.m-and a,.th,.std,.lg,.hin,.nr,.bt-m,.tgs-gr,.ab-z,
.fo-s li::before,.chip,.wa-feld>span{border-radius:var(--r-1)}
.m-fig{overflow:hidden}
.bt-b{border-radius:var(--r-1)}
/* Volle Baender bleiben eckig */
section,.dunkel,.g-ton,.bahn,.gew,.hero,.vor-band,.menue,.serv,.kopf,footer,
.m-kopf,.s-kopf,.bahn-l,.slider{border-radius:0}

/* ===== Bildband der Teilegruppen-Karten ===== */
.tgs{--pad-x:26px;--pad-y:26px}
.tgs-sym{position:relative;display:block;overflow:hidden;
  margin:calc(var(--pad-y) * -1) calc(var(--pad-x) * -1) 20px;
  height:132px;background:#0E1218;border-radius:0}
.tgs-sym::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:13px 13px;opacity:.55}
.tgs-sym::after{content:"";position:absolute;inset:0}
.tgs-sym.t-a::after{background:radial-gradient(80% 150% at 76% 10%,rgba(227,6,18,.30),transparent 62%)}
.tgs-sym.t-b::after{background:radial-gradient(85% 160% at 22% 100%,rgba(227,6,18,.34),transparent 60%)}
.tgs-sym.t-c::after{background:radial-gradient(95% 160% at 90% 88%,rgba(169,114,11,.34),transparent 62%)}
.tgs-sym.t-d::after{background:radial-gradient(85% 150% at 14% 14%,rgba(18,146,74,.30),transparent 60%)}
.tgs-sym.t-e::after{background:radial-gradient(95% 170% at 84% 94%,rgba(227,6,18,.26),transparent 64%)}
.tgs-sym.t-f::after{background:radial-gradient(88% 160% at 24% 18%,rgba(169,114,11,.36),transparent 60%)}
.tgs-sym.t-g::after{background:radial-gradient(92% 160% at 86% 22%,rgba(92,104,121,.44),transparent 62%)}
.tgs-sym .tg-i{position:absolute;right:6%;bottom:-8%;width:auto;height:118%;z-index:2;
  color:rgba(255,255,255,.9);stroke-width:1.05;
  transition:transform .7s cubic-bezier(.23,1,.32,1)}
.tgs-sym .tg-i .fk{fill:var(--rot)}
.tgs-sym .tg-i .fs{stroke:var(--rot)}
@media (hover:hover) and (pointer:fine){.tgs:hover .tgs-sym .tg-i{transform:translate(-5px,-7px) rotate(-3deg)}}
@media (max-width:760px){.tgs{--pad-x:20px;--pad-y:22px}.tgs-sym{height:112px}}
@media (prefers-reduced-motion:reduce){.tgs-sym .tg-i{transition:none}}

/* ===== Anfrage-Abschnitt: Karte links, Ablauf rechts ===== */
.z-spalt{grid-template-columns:424px minmax(0,1fr);align-items:stretch}

/* ===== Abschnitt 06: Zugang zum Online-Katalog =====================
   Zwei dunkle Flaechen gleicher Hoehe. Links das Formular auf eigenem Grund
   (die weisse Karte ist raus), rechts der Ablauf als vier eingelassene Karten
   mit Symbol, Ziffer und Richtungspfeil. */

/* Kopf: kleine Marke ueber der Ziffer */
.zg-augen{grid-column:1 / -1;display:block;margin:0 0 10px;
  font-family:var(--f-t),sans-serif;font-size:var(--fs-1);font-weight:650;
  letter-spacing:.24em;text-transform:uppercase;color:var(--d-rot)}
/* Die Lieferantenmarke ist ein breites, flaches Feld und steht auf halber
   Hoehe des Kopfes — nicht als hochkant Marke in der Ecke. */
#zugang .ab-kopf{align-items:center;grid-template-columns:auto minmax(0,1fr) minmax(0,404px)}

/* Lieferantenmarke in der freien Flaeche rechts im Kopf.
   Das Logo ist aus dem APCAT-Werbemotiv freigestellt (schwarzer Grund als
   Alphakanal), steht also nur auf dunklem Untergrund sauber. */
.zg-marke{display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;justify-items:start;gap:3px clamp(16px,1.6vw,24px);
  align-self:center;width:100%;max-width:none;
  padding:clamp(14px,1.3vw,18px) clamp(18px,1.8vw,26px);border-radius:var(--r-3);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px var(--d-kante),inset 0 1px 0 var(--d-glanz)}
.zg-marke img{grid-row:1 / span 2;display:block;width:clamp(138px,10.6vw,168px);height:auto}
.zg-marke>span:not(.ab-z){font-size:var(--fs-2);line-height:1.45;color:#A6B0BD;text-align:left}
.zg-marke .ab-z{align-self:auto;padding:0;font-size:var(--fs-1);color:var(--d-rot)}
@media (max-width:1000px){
  #zugang .ab-kopf{grid-template-columns:auto minmax(0,1fr)}
  .zg-marke{max-width:none;justify-self:start;margin-top:18px;grid-column:1 / -1;
    grid-template-columns:auto minmax(0,1fr);justify-items:start;gap:2px 16px;
    align-items:center;padding:14px 18px}
  .zg-marke img{grid-row:1 / span 2;width:152px}
  .zg-marke>span:not(.ab-z){text-align:left}
}
@media (max-width:900px){
  .zg-marke .ab-z{display:block}
}

/* Raster: Formular schmaler, Ablauf breiter */
.zg-r{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  gap:clamp(18px,2vw,28px);align-items:stretch}
.zg-r>*{min-width:0}

/* Die beiden Flaechen */
/* Flaechenstufen auf dunklem Grund:
   Grund #0D0E12 · Rahmen ohne Fuellung · Karte .075 · Eingabe dunkler als alles.
   Vorher hatten die rechte Flaeche und die Karten darin fast denselben Wert —
   deshalb sah beides gleich aus. */
.zg-p{display:flex;flex-direction:column;border-radius:var(--r-3);
  padding:clamp(20px,2.2vw,30px);
  background:transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
/* Links steht die Handlung: eigene Flaeche, oben eine feine rote Kante. */
.zg-p:first-child{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  box-shadow:inset 0 0 0 1px var(--d-kante),inset 0 1px 0 rgba(255,74,60,.4)}

/* Kopfzeile im Formular */
.zg-p-kopf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;
  align-items:center;margin-bottom:clamp(18px,1.8vw,24px)}
.zg-sym{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-3);
  color:var(--d-rot-warm);background:rgba(255,59,69,.09);
  box-shadow:inset 0 0 0 1.4px rgba(255,74,60,.42)}
.zg-sym svg{width:24px;height:24px}
.zg-p-t b{display:block;font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;
  font-size:var(--fs-6);line-height:1.2;letter-spacing:-.012em;color:var(--d-1);margin-bottom:4px}
.zg-p-t>span{display:block;font-size:var(--fs-3);line-height:1.5;color:var(--d-4);max-width:34ch}

.zg-p-h{font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;
  font-size:var(--fs-6);line-height:1.2;letter-spacing:-.012em;color:var(--d-1);
  margin:0 0 clamp(16px,1.6vw,20px)}

/* Formularfelder auf dunklem Grund — nur hier, .eing bleibt sonst hell */
#zugang .fm{gap:15px 16px}
#zugang .feld{color:var(--d-3);font-size:var(--fs-2);margin-bottom:7px}
#zugang .eing{background:rgba(6,8,12,.72);color:#F2F5F9;border-radius:var(--r-2);
  padding:13px 15px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)}
#zugang .eing::placeholder{color:rgba(226,233,242,.55)}
@media (hover:hover) and (pointer:fine){#zugang .eing:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}}
#zugang .eing:focus{background:rgba(6,8,12,.9);
  box-shadow:inset 0 0 0 1.5px #FF4534,0 0 0 4px rgba(255,69,52,.18)}
#zugang .btn-voll{margin-top:2px;border-radius:var(--r-3);padding:16px 20px;font-size:var(--fs-4)}
#zugang .fm-hin{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;
  align-items:start;margin-top:2px;font-size:var(--fs-2);line-height:1.6;color:#8D97A4}
#zugang .fm-hin b{color:var(--d-3);font-weight:600}
.fm-schloss{display:block;color:var(--d-rot-warm);margin-top:1px}
.fm-schloss svg{width:15px;height:15px;display:block}

/* Ablauf: vier eingelassene Karten */
.zs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:clamp(11px,1.1vw,15px);flex:1;counter-reset:none}
.zs-e{display:grid;grid-template-columns:auto auto minmax(0,1fr);
  gap:0 clamp(14px,1.4vw,20px);align-items:center;flex:1;
  padding:clamp(16px,1.6vw,21px) clamp(16px,1.6vw,22px);
  border-radius:var(--r-3);background:rgba(255,255,255,.075);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.085)}
.zs-sym{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  flex:none;color:var(--d-rot-warm);box-shadow:inset 0 0 0 1.4px rgba(255,74,60,.45)}
.zs-sym svg{width:22px;height:22px}
.zs-nr{font-family:var(--f-t),sans-serif;font-weight:700;font-size:var(--fs-4);
  letter-spacing:.06em;color:var(--d-rot);align-self:center}
.zs-t b{display:block;font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;
  font-size:var(--fs-5);line-height:1.25;letter-spacing:-.008em;color:var(--d-1);margin-bottom:4px}
.zs-t>span{display:block;font-size:var(--fs-3);line-height:1.55;color:var(--d-4);max-width:44ch}
/* Der Pfeil ist eine Richtungsmarke, kein Knopf: kein Zeiger, kein Hover. */

@media (max-width:1180px){
  .zg-r{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .zg-p{padding:20px 17px 22px;border-radius:var(--r-3)}
  .zs-e{grid-template-columns:auto minmax(0,1fr);gap:4px 13px;align-items:start;padding:15px 15px 16px}
  .zs-sym{width:40px;height:40px;grid-row:1 / span 2}
  .zs-sym svg{width:19px;height:19px}
  .zs-nr{grid-column:2;font-size:var(--fs-2)}
  .zs-t{grid-column:2}
  .zg-sym{width:46px;height:46px}
}
.z-spalt>*{min-width:0}
.z-spalt>*:last-child{display:flex;flex-direction:column;justify-content:center}

/* ===== Ablauf: Nummer als Marke, kein Kasten ===== */
.abl{list-style:none;margin:26px 0 0;padding:0;counter-reset:s;
  display:flex;flex-direction:column;gap:0}
.z-spalt .abl{margin:0}
.abl li{position:relative;display:block;padding:20px 0 22px;
  box-shadow:inset 0 1px 0 var(--kante);grid-template-columns:none}
.abl li:first-child{box-shadow:none;padding-top:0}
.abl li:last-child{padding-bottom:0}
.abl li::before{counter-increment:s;content:"0" counter(s);
  display:block;position:static;width:auto;height:auto;margin:0 0 10px;
  background:none;box-shadow:none;border-radius:0;
  font-family:var(--f-t),sans-serif;font-weight:700;font-size:var(--fs-2);
  letter-spacing:.18em;line-height:1;color:var(--rot)}
.abl b{display:block;font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;
  font-size:var(--fs-6);line-height:1.2;letter-spacing:-.02em;color:var(--stark);margin-bottom:6px}
.abl span{display:block;font-size:var(--fs-4);line-height:1.6;color:var(--leise);max-width:52ch}
.dunkel .abl li{box-shadow:inset 0 1px 0 rgba(255,255,255,.11)}
.dunkel .abl li:first-child{box-shadow:none}
.dunkel .abl li::before{color:var(--d-rot)}
.dunkel .abl b{color:var(--d-1)}
.dunkel .abl span{color:var(--d-3)}
@media (max-width:1000px){
  .z-spalt{grid-template-columns:minmax(0,1fr)}
  .z-spalt>*:last-child{justify-content:flex-start}
  .abl li{padding:16px 0 17px}
}

/* Foto im Bildfeld: Symbol weicht dem echten Bild */
.bt-b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  transform:scale(1.03);transition:transform .8s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.bt-k:hover .bt-b img,.rat-a:hover .bt-b img{transform:scale(1.08)}}
.bt-b.hat-foto::before{opacity:.22}
.bt-b.hat-foto::after{z-index:2;
  background:linear-gradient(180deg,rgba(10,13,18,.10),rgba(10,13,18,.48))}
.bt-b.hat-foto svg{display:none}
@media (prefers-reduced-motion:reduce){.bt-b img{transition:none}}

/* ===== Servicezeile — schwarz =====
   Auf dunklem Grund traegt #E30612 nicht mehr: fuer Symbole und Kanten
   steht deshalb ein aufgehelltes Rot, das Markenrot bleibt in den Flaechen. */
.serv{
  background:
    radial-gradient(88% 240% at 7% 50%, rgba(227,6,18,.2), transparent 60%),
    linear-gradient(180deg,#181B20 0%,#0B0D10 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  font-size:var(--fs-3);position:relative}
.serv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--rot) 0%,rgba(227,6,18,.5) 28%,rgba(227,6,18,.14) 64%,transparent 100%)}
.serv .mitte{min-height:50px}
.serv-l{display:flex;gap:24px;flex-wrap:wrap;color:rgba(255,255,255,.74)}
.serv-l>span{display:inline-flex;align-items:center;gap:10px;font-weight:500}
.serv-r{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.serv-r a{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--d-1);
  padding:5px 11px 5px 5px;border-radius:var(--r-1);
  transition:background .32s var(--e),color .32s var(--e),box-shadow .32s var(--e)}
@media (hover:hover) and (pointer:fine){.serv-r a:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}}
.serv-r a:active{transform:scale(.985)}

/* Plaettchen unter den Symbolen */
.s-p{flex:none;display:grid;place-items:center;width:27px;height:27px;border-radius:var(--r-1);
  background:linear-gradient(180deg,rgba(227,6,18,.3),rgba(227,6,18,.12));
  box-shadow:inset 0 0 0 1px rgba(255,90,98,.32),inset 0 1px 0 rgba(255,255,255,.1);
  color:var(--d-rot);
  transition:background .32s var(--e),box-shadow .32s var(--e),transform .4s var(--e-w)}
.s-p .ico{width:16px;height:16px}
.s-p .fk{fill:currentColor}
.s-p .fs{stroke:currentColor}
@media (hover:hover) and (pointer:fine){.serv-r a:hover .s-p{transform:translateY(-1px);
  background:linear-gradient(180deg,rgba(227,6,18,.46),rgba(227,6,18,.19));
  box-shadow:inset 0 0 0 1px rgba(255,90,98,.54),inset 0 1px 0 var(--d-kante-2),
             0 0 14px -4px rgba(227,6,18,.65)}}
.s-p-gruen{color:var(--wa);
  background:linear-gradient(180deg,rgba(37,211,102,.24),rgba(37,211,102,.09));
  box-shadow:inset 0 0 0 1px rgba(37,211,102,.34),inset 0 1px 0 rgba(255,255,255,.1)}
@media (hover:hover) and (pointer:fine){.serv-r a:hover .s-p-gruen{
  background:linear-gradient(180deg,rgba(37,211,102,.38),rgba(37,211,102,.15));
  box-shadow:inset 0 0 0 1px rgba(37,211,102,.55),inset 0 1px 0 var(--d-kante-2),
             0 0 14px -4px rgba(37,211,102,.6)}}

/* ===== Werkstatt-Knopf in der Kopfzeile ===== */
nav.hn a.nav-gew{
  color:var(--d-1);padding:9px 15px 9px 12px;margin-left:6px;border-radius:var(--r-1);
  background:linear-gradient(180deg,var(--rot) 0%,var(--rot-hell) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 6px 16px -8px rgba(227,6,18,.7);
  transition:box-shadow .34s var(--e),transform .34s var(--e-w),filter .3s var(--e)}
@media (hover:hover) and (pointer:fine){nav.hn a.nav-gew:hover{color:var(--d-1);filter:saturate(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 10px 24px -9px rgba(227,6,18,.85);
  transform:translateY(-1px)}}
nav.hn a.nav-gew:active{transform:translateY(0) scale(.985)}
nav.hn a.nav-gew .ico{width:16px;height:16px;color:var(--d-1)}
nav.hn a.nav-gew::after{display:none}

@media (max-width:1000px){
  nav.hn a.nav-gew{margin-left:0;justify-content:center}
  .serv .mitte{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .s-p,.serv-r a,nav.hn a.nav-gew{transition:none}
}

/* ===== Chatfeld ===== */
.verlauf{padding:15px 21px 16px;gap:11px;
  background:
    radial-gradient(rgba(11,15,20,.055) .9px,transparent .9px) 0 0/20px 20px,
    linear-gradient(180deg,#EDF1F7 0%,var(--nut) 46%,#E4EAF2 100%);
  box-shadow:inset 0 1px 0 rgba(11,15,20,.08),inset 0 -1px 0 rgba(11,15,20,.06),
             inset 0 8px 18px -14px rgba(11,15,20,.35)}

/* Eingehende Blase */
.bl-ein{position:relative;align-self:flex-start;max-width:91%;
  padding:11px 15px 10px;font-size:var(--fs-4);line-height:1.52;color:var(--txt);
  border-radius:var(--r-4) var(--r-4) var(--r-4) var(--r-1);
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFE 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 1px 2px rgba(16,24,40,.12),
             0 10px 22px -12px rgba(16,24,40,.5),
             0 0 0 1px rgba(11,15,20,.055)}
.bl-ein::before{content:"";position:absolute;left:-6px;bottom:0;width:8px;height:12px;
  background:#FBFCFE;clip-path:polygon(100% 0,100% 100%,0 100%);
  box-shadow:-1px 0 0 rgba(11,15,20,.055)}
.bl-ein time{display:block;margin-top:6px;font-size:var(--fs-1);letter-spacing:.02em;color:#78828F}

/* Eingabe: Kompositionsfeld statt Kasten mit Balken */
.wa-feld{position:relative;display:block;cursor:text;isolation:isolate;
  padding:11px 15px 12px 16px;border-left:0;border-radius:var(--r-4) var(--r-4) var(--r-1) var(--r-4);
  background:linear-gradient(180deg,#FFFFFF 0%,#FAFCFB 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 1px 2px rgba(16,24,40,.12),
             0 12px 26px -14px rgba(16,24,40,.55),
             0 0 0 1px rgba(11,15,20,.06);
  transition:box-shadow .38s var(--e),transform .38s var(--e-w)}
.wa-feld::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;z-index:1;
  border-radius:var(--r-1);background:linear-gradient(180deg,var(--wa) 0%,var(--gr-d) 100%);
  transform:scaleY(.55);transform-origin:center;
  transition:transform .44s var(--e-w),filter .38s var(--e)}
.wa-feld:focus-within::before{transform:scaleY(1);filter:drop-shadow(0 0 6px rgba(37,211,102,.6))}
.wa-feld>span{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-t),sans-serif;font-weight:700;
  font-size:var(--fs-1);letter-spacing:.16em;text-transform:uppercase;color:var(--gr-d);
  margin-bottom:7px;padding:3px 8px;border-radius:var(--r-4);
  background:rgba(18,146,74,.09);box-shadow:inset 0 0 0 1px rgba(18,146,74,.2)}
.wa-feld>span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gruen);
  box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:wa-puls 2.4s var(--e-w) infinite}
@keyframes wa-puls{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 6px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.wa-feld:focus-within{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 0 0 1px rgba(18,146,74,.34),
             0 0 0 4px rgba(18,146,74,.13),
             0 16px 32px -14px rgba(16,24,40,.6)}

/* Hinweis mit Fahrzeugschein */
.wa-hin{gap:12px;padding:9px 11px;margin-top:2px;border-radius:var(--r-4);
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.42));
  box-shadow:inset 0 0 0 1px rgba(11,15,20,.06)}
.wa-hin .schein{border-radius:var(--r-1);
  box-shadow:0 2px 8px -3px rgba(11,15,20,.55),0 0 0 1px rgba(11,15,20,.14)}

/* Einlauf: Blase, Feld, Hinweis nacheinander.
   Sichtbar ist der Standard — eine fehlende Klasse darf nie Inhalt verstecken. */
.chat .verlauf>*{opacity:1;transform:none}
.rein.an .verlauf>*{animation:chat-auf .52s var(--e-w) both}
.rein.an .verlauf>*:nth-child(1){animation-delay:.10s}
.rein.an .verlauf>*:nth-child(2){animation-delay:.20s}
.rein.an .verlauf>*:nth-child(3){animation-delay:.30s}
@keyframes chat-auf{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rein.an .verlauf>*{animation:none}
  .wa-feld,.wa-feld::before{transition:none}
  .wa-feld>span::before{animation:none}
}


/* ===== Handy: Kopf zusammenklappen, Servicezeile auf eine Zeile =====
   Vorher standen auf 375px 515px Chrome ueber dem ersten Inhalt:
   Servicezeile 178px + aufgeklappte Navigation 337px. */
.kopf-b{display:none}
.s-kurz{display:none}
@media (max-width:1180px){
  .kopf-h{flex-wrap:wrap;gap:0;align-items:center}
  .kopf-h .logo{padding:11px 0}
  .kopf-b{display:grid;place-items:center;gap:5px;margin-left:auto;
    width:44px;height:44px;background:none;border:0;cursor:pointer;
    border-radius:var(--r-1);transition:background .3s var(--e)}
  .kopf-b span{display:block;width:21px;height:2px;background:var(--stark);border-radius:var(--r-1);
    transition:transform .42s var(--e-w)}
  .kopf-b[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .kopf-b[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .kopf-b:active{background:var(--grund-2)}
  .kopf-h nav.hn{flex:1 0 100%;display:none;padding-bottom:10px}
  .kopf-h nav.hn.auf{display:block}
}
@media (max-width:760px){
  .serv .mitte{padding:0;min-height:0}
  .serv-l{display:none}
  .serv-r{width:100%;gap:0;flex-wrap:nowrap}
  .serv-r a{flex:1 1 0;min-width:0;justify-content:center;gap:9px;
    padding:10px 6px;border-radius:0;font-size:var(--fs-3)}
  .serv-r a+a{box-shadow:inset 1px 0 0 rgba(255,255,255,.1)}
@media (hover:hover) and (pointer:fine){.serv-r a:hover{background:none}}
@media (hover:hover) and (pointer:fine){.serv-r a+a:hover{box-shadow:inset 1px 0 0 rgba(255,255,255,.1)}}
  .s-p{width:25px;height:25px}
  .s-p .ico{width:15px;height:15px}
  .s-lang{display:none}
  .s-kurz{display:inline}
}

/* ===== Handy: Feinschliff ===== */
@media (max-width:760px){
  /* Unter 16px zoomt iOS beim Antippen ins Formular hinein.
     textarea.eing/select.eing sind spezifischer als .eing — muessen hier mit rein,
     sonst gewinnt die Grundregel mit 14px weiter (so war der Textarea-Fehler). */
  .eing,select.eing,textarea.eing{font-size:var(--fs-5)}
  /* Tippziele auf mindestens 38px bringen */
  .f-r ul a{display:inline-flex;align-items:center;min-height:38px}
  .f-m a.tel{display:inline-flex;align-items:center;min-height:40px}
  .chips .chip,.m-mod button{min-height:40px}
  .sl-n button{width:44px;height:40px}
  .sl-p button{height:auto;padding:18px 0;background:none;border-radius:0}
  .sl-p button::before{content:"";display:block;height:3px;border-radius:var(--r-1);
    background:var(--flaeche-3);transition:background .4s var(--e)}
  .sl-p button.an{background:none}
  .sl-p button.an::before{background:var(--rot)}
  .sl-st{margin-top:2px}
}
@media (max-width:760px){
  /* Zweispaltig wird der Firmenname mitten im Namen umgebrochen. */
  .f-r{grid-template-columns:minmax(0,1fr);gap:28px}
.chat{box-shadow:
    0 0 0 1px rgba(11,15,20,.12),
    0 0 0 2px rgba(255,255,255,.55),
    0 0 0 4px rgba(232,241,251,.22),
    0 0 0 6px rgba(198,216,238,.14),
    0 -1px 0 7px rgba(255,255,255,.40),
    0 0 0 7px rgba(255,255,255,.18),
    0 0 0 8px rgba(11,15,20,.10),
    0 1px 2px rgba(4,7,12,.16),
    0 10px 20px -8px rgba(4,7,12,.28),
    0 34px 64px -30px rgba(4,7,12,.58)}
  .f-r>div>ul{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0 18px;align-items:start}
  .f-u{flex-direction:column;align-items:flex-start;gap:9px}
.f-r>div+div::before{content:none}
  .g-li{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:760px){
  /* Die Karte laeuft auf dem Handy auf rund ein Drittel zusammen. Schrift und
     Linien sind in viewBox-Einheiten angegeben und schrumpfen mit — deshalb
     hier gegensteuern, sonst ist nichts mehr zu lesen. */
  .m-b-gem{font-size:var(--fs-8)}
  .m-b-teil,.m-b-teil.m-b-ziel{font-size:var(--fs-7)}
  .m-b{stroke-width:6px}
  .m-laden-b{font-size:var(--fs-8);stroke-width:7px}
  .m-osm{font-size:var(--fs-6)}
  .m-dd{stroke-width:2}
  .m-str{stroke-width:1.9}
  .m-gem{stroke-width:2}
  .m-teil{stroke-width:1.7}
  .m-gem.m-ziel,.m-teil.m-ziel{stroke-width:3.2}
  .m-ring{stroke-width:3}
}

@media (max-width:760px){
  /* Der Aufmacher der Markenseiten dunkelt von links nach rechts ab. Auf dem
     Handy laeuft der Text ueber die volle Breite — dort muss der Schleier
     von unten kommen, sonst steht Schrift auf hellem Blech. */
  .m-kopf::after{background:linear-gradient(0deg,rgba(6,7,9,.95) 0%,rgba(6,7,9,.88) 40%,
    rgba(6,7,9,.66) 76%,rgba(6,7,9,.52) 100%)}
  .m-kopf>.mitte>p{font-size:var(--fs-4)}
}

/* Der Gewerbeabschnitt traegt die Abgrenzung zum Privatkunden — er darf
   mehr Platz und mehr Schriftgroesse haben als die uebrigen Abschnitte. */
.gew{padding:clamp(64px,7vw,104px) 0}
.gew h2{font-size:clamp(30px,4.4vw,62px);margin-bottom:24px}
.gew .ein{font-size:clamp(16px,1.3vw,19px);max-width:52ch;margin-bottom:34px}
.gew-r{gap:clamp(40px,4.4vw,72px);grid-template-columns:minmax(0,1fr) 430px}
.g-li{gap:18px 32px}
.g-li li{font-size:var(--fs-4)}
.g-k{padding:var(--s-7)}
.g-k h3{font-size:var(--fs-7)}
.gew .g-k .mehr{color:var(--stark)}
.gew .g-k .mehr .kr{background:var(--grund-2);box-shadow:inset 0 0 0 1px var(--kante)}
@media (hover:hover) and (pointer:fine){.gew .g-k .mehr:hover .kr{background:var(--rot);color:var(--d-1)}}
@media (max-width:1180px){.gew-r{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.g-li{grid-template-columns:minmax(0,1fr)}}
/* Ablauf steht jetzt neben der Karte, nicht mehr darunter */
.st-r>div>.abl{margin-top:0}

.fm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 18px}
.fm .voll{grid-column:1 / -1}
.fm label.feld{display:block;margin-bottom:7px}
.fm .eing{width:100%}
.fm-hin{grid-column:1 / -1;font-size:var(--fs-3);color:var(--still);line-height:1.6}
.fm-hin b{color:var(--text)}
@media (max-width:760px){.fm{grid-template-columns:minmax(0,1fr)}}

.hs-band{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;margin-top:6px;
  background:var(--d-kante);border-radius:var(--r-3);overflow:hidden;
  box-shadow:0 0 0 1px var(--d-kante),inset 0 1px 0 var(--d-glanz)}
.hs-band span{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:clamp(62px,5.2vw,84px);padding:var(--s-3) var(--s-2);
  background:var(--d-flaeche);color:var(--d-1);
  font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;font-weight:400;
  font-size:clamp(15px,1.22vw,20px);letter-spacing:-.012em;line-height:1.16;
  overflow-wrap:break-word;hyphens:auto}
@keyframes hs-auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hs-band.da span{animation:hs-auf var(--t-4) var(--e) both}
.hs-band.da span:nth-child(7n+1){animation-delay:0ms}
.hs-band.da span:nth-child(7n+2){animation-delay:45ms}
.hs-band.da span:nth-child(7n+3){animation-delay:90ms}
.hs-band.da span:nth-child(7n+4){animation-delay:135ms}
.hs-band.da span:nth-child(7n+5){animation-delay:180ms}
.hs-band.da span:nth-child(7n+6){animation-delay:225ms}
.hs-band.da span:nth-child(7n){animation-delay:270ms}
@media (prefers-reduced-motion:reduce){.hs-band.da span{animation:none}}
@media (max-width:1000px){.hs-band{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.hs-band span{font-size:14px;padding:var(--s-3) var(--s-1);letter-spacing:-.022em}}
.dunkel .ab-nr{color:var(--d-rot)}
@media (hover:hover) and (pointer:fine){.hs-band span:hover{box-shadow:inset 0 0 0 1px var(--kante-stark)}}


/* ===== aus agb.html ===== */

.hero .mitte{position:relative;z-index:2}

.geb-mehr{margin-top:22px;padding:16px 18px;border-radius:var(--r-2);background:var(--ton);
  box-shadow:inset 0 0 0 1px var(--ton-kante);font-size:var(--fs-4);line-height:1.6;color:var(--text)}
.geb-mehr b{color:var(--stark);font-weight:750}

/* ===== Rechtstexte ===== */
.rt{max-width:74ch}
.rt h2{font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;font-size:clamp(20px,2vw,26px);
  letter-spacing:-.02em;text-transform:none;color:var(--stark);margin:44px 0 14px;scroll-margin-top:90px}
.rt h2:first-child{margin-top:0}
.rt h3{font-size:var(--fs-5);font-weight:750;color:var(--stark);margin:26px 0 9px}
.rt p{font-size:var(--fs-5);line-height:1.7;color:var(--text);margin:0 0 14px}
.rt p:last-child{margin-bottom:0}
.rt ul{margin:0 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.rt li{font-size:var(--fs-5);line-height:1.66;color:var(--text)}
.rt a{color:var(--rot-hell);text-decoration:underline;text-underline-offset:2px}
@media (hover:hover) and (pointer:fine){.rt a:hover{color:var(--rot)}}
.rt dl{margin:0 0 18px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 26px}
.rt dt{font-size:var(--fs-3);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--still);padding-top:2px}
.rt dd{margin:0;font-size:var(--fs-5);line-height:1.6;color:var(--text)}
.rt-inhalt{margin:0 0 40px;padding:20px 22px;border-radius:var(--r-2);background:var(--ton);
  box-shadow:inset 0 0 0 1px var(--ton-kante)}
.rt-inhalt p{font-size:var(--fs-2);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--still);margin:0 0 11px}
.rt-inhalt ol{list-style:none;margin:0;padding:0;columns:2;column-gap:30px}
.rt-inhalt li{font-size:var(--fs-4);padding:3px 0;break-inside:avoid}
.rt-inhalt a{color:var(--text);text-decoration:none}
@media (hover:hover) and (pointer:fine){.rt-inhalt a:hover{color:var(--rot)}}
.rt-st{margin-top:40px;padding-top:20px;box-shadow:inset 0 1px 0 var(--kante);font-size:var(--fs-3);color:var(--still)}
@media (max-width:760px){.rt dl{grid-template-columns:minmax(0,1fr);gap:2px 0}.rt-inhalt ol{columns:1}}

/* ===== aus autoteile-dresden.html ===== */


/* ===== Stadtteile ===== */
.st-l{display:flex;flex-direction:column;gap:1px;background:var(--kante);
  border-radius:var(--r-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--kante)}
.st-e{background:var(--grund);padding:30px clamp(22px,2.4vw,34px);
  display:grid;grid-template-columns:220px minmax(0,1fr);gap:0 clamp(24px,2.6vw,44px);align-items:start}
.st-e h3{font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;font-size:var(--fs-7);
  letter-spacing:-.02em;text-transform:none;color:var(--stark);margin:0 0 6px}
.st-plz{font-size:var(--fs-2);font-weight:700;letter-spacing:.09em;color:var(--rot);display:block;margin-bottom:12px}
.st-kurz{font-size:var(--fs-4);line-height:1.55;color:var(--still)}
.st-e p.txt{font-size:var(--fs-4);line-height:1.72;color:var(--text);margin:0 0 13px}
.st-e p.txt:last-child{margin-bottom:0}
@media (max-width:900px){.st-e{grid-template-columns:minmax(0,1fr);gap:14px}}

/* ===== aus autoteile.html ===== */


/* Aufmacher mit Bildpaar — nur diese Seite.
   Die rechte Haelfte war leer; zwei Fotos fuellen sie, versetzt gestapelt.
   Schale und Kern wie bei der Karte, damit es eine Sprache bleibt. */
.s-kopf.hat-paar>.mitte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(26px,3.6vw,64px);align-items:center}
.s-kopf.hat-paar>.mitte>*{min-width:0}
.k-paar{position:relative;isolation:isolate}
.k-paar::before{content:"";position:absolute;inset:-16% -12% -20% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(56% 50% at 64% 28%,rgba(255,82,50,.22),transparent 72%)}
.k-b{margin:0;position:relative;padding:6px;border-radius:var(--r-3);
  background:linear-gradient(180deg,#1C2331 0%,#0E1118 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),inset 0 1px 0 rgba(255,255,255,.12),
             0 30px 68px -34px rgba(0,0,0,.95);
  transform:translateY(16px);transition:transform 1.1s var(--e-w)}
.k-b img{display:block;width:100%;height:auto;border-radius:var(--r-1)}
.k-b-2{width:64%;margin:-14% auto 0 -7%;z-index:1;transition-delay:.14s}
.s-kopf.an .k-b{transform:none}
@media (prefers-reduced-motion:reduce){.k-b{transition:none;transform:none}}
@media (max-width:1000px){
  .s-kopf.hat-paar>.mitte{grid-template-columns:minmax(0,1fr)}
  .k-paar{display:grid;grid-template-columns:1fr 1fr;gap:11px;align-items:start;margin-top:4px}
  .k-paar::before{inset:-8% -6%}
  .k-b{transform:none}
  .k-b-2{width:auto;margin:0}
  .k-b img{aspect-ratio:4/3;object-fit:cover}
}

/* ===== aus bildnachweise.html ===== */


/* ===== Bildnachweise ===== */
.nw-l-kopf{display:grid;grid-template-columns:1.1fr 2fr 1fr .9fr 1.2fr;gap:0 18px;
  padding:0 0 9px;font-size:var(--fs-1);letter-spacing:.09em;text-transform:uppercase;
  font-weight:650;color:var(--still);box-shadow:inset 0 -1px 0 var(--kante)}
.nw{list-style:none;margin:0;padding:0}
.nw-e{display:grid;grid-template-columns:1.1fr 2fr 1fr .9fr 1.2fr;gap:0 18px;align-items:baseline;
  padding:13px 0;font-size:var(--fs-3);line-height:1.5;box-shadow:inset 0 -1px 0 var(--kante)}
.nw-e:last-child{box-shadow:none}
.nw-was{font-weight:700;color:var(--stark)}
.nw-t{color:var(--text);min-width:0;overflow-wrap:anywhere}
.nw-t a{text-decoration:underline;text-decoration-color:var(--kante-stark);text-underline-offset:2px;
  transition:text-decoration-color .3s var(--e),color .3s var(--e)}
@media (hover:hover) and (pointer:fine){.nw-t a:hover{color:var(--rot);text-decoration-color:var(--rot)}}
.nw-a{color:var(--leise)}
.nw-l a{color:var(--leise);text-decoration:underline;text-underline-offset:2px}
@media (hover:hover) and (pointer:fine){.nw-l a:hover{color:var(--rot)}}
.nw-b{color:var(--still);font-size:var(--fs-2)}
.nw-vor{max-width:62ch;color:var(--leise);font-size:var(--fs-4);line-height:1.66;margin-bottom:22px}
@media (max-width:900px){
  .nw-l-kopf{display:none}
  .nw-e{grid-template-columns:minmax(0,1fr);gap:3px;padding:15px 0}
  .nw-a::before{content:"Urheber: "}
  .nw-b::before{content:"Bearbeitung: "}
}

/* ===== aus fuer-werkstaetten.html ===== */


/* Aufmacher mit Foto — nur diese Seite */
.s-kopf.hat-bild{isolation:isolate;min-height:clamp(400px,44vw,560px);display:flex;align-items:flex-end}
.s-kopf.hat-bild>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 56%;z-index:0;transform:scale(1.05);
  transition:transform 1.6s cubic-bezier(.32,.72,0,1)}
.s-kopf.hat-bild.an>img{transform:none}
.s-kopf.hat-bild::before{z-index:1;
  background:linear-gradient(90deg,rgba(8,10,13,.95) 0%,rgba(8,10,13,.83) 36%,rgba(8,10,13,.36) 70%,rgba(8,10,13,.6) 100%),
             linear-gradient(0deg,rgba(8,10,13,.9),transparent 58%),
             radial-gradient(72% 92% at 10% -4%,rgba(227,6,18,.26),transparent 62%)}
.s-kopf.hat-bild>.mitte{z-index:2;width:100%}
@media (prefers-reduced-motion:reduce){.s-kopf.hat-bild>img{transition:none;transform:none}}
@media (max-width:1000px){
  /* Auf schmalen Schirmen wird das Band so hoch, dass vom Foto nur ein
     senkrechter Streifen uebrig bliebe. Deshalb steht es dort als eigenes
     Bildband oben — wie der Aufmacher der Startseite. */
  .s-kopf.hat-bild{min-height:0;display:block}
  .s-kopf.hat-bild>img{position:static;width:100%;height:auto;aspect-ratio:16/9;
    object-fit:cover;object-position:center 56%;transform:none}
  .s-kopf.hat-bild::before{
    background:radial-gradient(72% 92% at 10% -4%,rgba(227,6,18,.24),transparent 62%)}
  .s-kopf.hat-bild>.mitte{background:linear-gradient(180deg,#0F1319,#161C25)}
}

/* ===== Für Werkstätten ===== */
.gw-r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--kante);
  border-radius:var(--r-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--kante)}
.gw{background:var(--grund);padding:26px 24px 28px;display:flex;flex-direction:column;gap:9px}
.gw .ico{width:26px;height:26px;color:var(--rot);stroke-width:1.7;margin-bottom:5px}
.gw b{font-size:var(--fs-5);font-weight:750;letter-spacing:-.015em;color:var(--stark)}
.gw p{font-size:var(--fs-4);line-height:1.6;color:var(--leise)}
.gw-geg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 1px;background:var(--kante);
  border-radius:var(--r-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--kante);margin-top:8px}
.gw-geg>div{background:var(--grund);padding:26px 24px}
.gw-geg h3{font-size:var(--fs-2);letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin:0 0 14px}
.gw-geg .a{color:var(--still)}
.gw-geg .b{color:var(--rot)}
.gw-geg ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.gw-geg li{font-size:var(--fs-4);line-height:1.55;color:var(--text);padding-left:22px;position:relative}
.gw-geg li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:var(--r-1);
  background:var(--flaeche-3)}
.gw-geg .b li::before{background:var(--rot)}
@media (max-width:900px){.gw-r{grid-template-columns:minmax(0,1fr)}.gw-geg{grid-template-columns:minmax(0,1fr)}.fm{grid-template-columns:minmax(0,1fr)}}

/* ===== aus hersteller.html ===== */


/* ===== Hersteller ===== */
.hs-r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--kante);
  border-radius:var(--r-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--kante)}
.hs{background:var(--grund);padding:26px 24px 28px}
.hs h3{font-size:var(--fs-3);letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--rot);margin:0 0 14px}
.hs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.hs li{font-size:var(--fs-4);font-weight:600;color:var(--stark);background:var(--ton);border-radius:var(--r-1);
  padding:var(--s-2) var(--s-3);box-shadow:inset 0 0 0 1px var(--ton-kante)}
@media (max-width:900px){.hs-r{grid-template-columns:minmax(0,1fr)}}

/* ===== aus kontakt.html ===== */


/* ===== Kontakt ===== */
.ko-r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--kante);
  border-radius:var(--r-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--kante)}
.ko{background:var(--grund);padding:30px 26px 32px;display:flex;flex-direction:column;gap:8px}
.ko .ico{width:28px;height:28px;color:var(--rot);stroke-width:1.6;margin-bottom:8px}
.ko b{font-size:var(--fs-6);font-weight:750;letter-spacing:-.015em;color:var(--stark)}
.ko .gross{font-family:var(--f-d),sans-serif;font-variation-settings:'wght' 800;font-size:var(--fs-7);
  letter-spacing:-.02em;color:var(--stark);margin:2px 0 4px}
.ko .gross a{color:inherit}
@media (hover:hover) and (pointer:fine){.ko .gross a:hover{color:var(--rot)}}
.ko p{font-size:var(--fs-4);line-height:1.6;color:var(--leise)}
.ko-z{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px;max-width:760px}
.ko-z dl{margin:0}
.ko-t{list-style:none;margin:0;padding:0}
.ko-t li{display:flex;justify-content:space-between;gap:20px;padding:13px 0;font-size:var(--fs-4);
  box-shadow:inset 0 -1px 0 var(--kante)}
.ko-t li:last-child{box-shadow:none}
.ko-t b{font-weight:650;color:var(--stark)}
.ko-t span{color:var(--leise);font-variant-numeric:tabular-nums}
.ko-t li.zu span{color:var(--still)}
@media (max-width:900px){.ko-r{grid-template-columns:minmax(0,1fr)}.ko-z{grid-template-columns:minmax(0,1fr);gap:30px}}

/* ===== aus liefergebiet-coswig.html ===== */


/* ===== Ortsseiten: Bedarf und Fragen ===== */
.o-bed{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.o-bed li{font-size:var(--fs-4);font-weight:600;color:var(--text);background:var(--ton);border-radius:var(--r-1);
  padding:var(--s-2) var(--s-3);box-shadow:inset 0 0 0 1px var(--ton-kante)}
.o-frag{margin-top:34px;display:flex;flex-direction:column;gap:1px;background:var(--kante);
  border-radius:var(--r-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--kante)}
.o-frag>div{background:var(--grund);padding:22px 24px}
.o-frag h3{font-size:var(--fs-5);font-weight:750;color:var(--stark);margin:0 0 7px}
.o-frag p{font-size:var(--fs-4);line-height:1.66;color:var(--leise);margin:0}

/* Bei reduzierter Bewegung wechseln die Banner weiter, nur ohne Fahrt */
@media (prefers-reduced-motion:reduce){
  .sl-s{transition:none}
}


/* ===== Tippziele: unsichtbar vergroesserte Trefferflaechen (QA 14.09.2026) =====
   Polster vergroessert die Flaeche, der negative Rand gibt den Platz zurueck —
   optisch aendert sich nichts, der Finger trifft trotzdem. WCAG 2.5.8. */
.geb-l a{display:inline-block;padding:8px 0;margin:-8px 0}
.s-weg a{display:inline-block;padding:8px 2px;margin:-8px -2px}
.rt-inhalt a{display:inline-block;padding:5px 0;margin:-5px 0}
.rt dd a{display:inline-block;padding:5px 0;margin:-5px 0}
.dz dd a{display:inline-block;padding:6px 0;margin:-6px 0}
.haus h3 a{display:inline-block;padding:4px 0;margin:-4px 0}


/* ===== Formular-Rueckmeldung (Direktversand, 14.09.2026) ===== */
.fm-status{grid-column:1/-1;margin:0;padding:13px 16px;border-radius:var(--r-2);
  font-size:var(--fs-4);line-height:1.5;display:none}
.fm-status.an{display:block}
.fm-status.ok{background:#E7F4EC;color:#0B5B2E;box-shadow:inset 0 0 0 1px #B8DEC7}
.fm-status.fehler{background:#FDECEC;color:#8A1119;box-shadow:inset 0 0 0 1px #F3C2C5}
.dunkel .fm-status.ok{background:rgba(22,163,74,.16);color:#8BE9AE;box-shadow:inset 0 0 0 1px rgba(139,233,174,.3)}
.dunkel .fm-status.fehler{background:rgba(227,6,18,.16);color:#FFB4B8;box-shadow:inset 0 0 0 1px rgba(255,180,184,.3)}
.fm-topf{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* Technische Bezeichner in den Rechtstexten (Audit-Nachlauf 17.09.2026) */
.rt .mono,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.94em;background:var(--flaeche-3);padding:1px 5px;border-radius:var(--r-1)}


/* Hinweis auf die Übergabe an WhatsApp, direkt am Knopf (Audit 17.09.2026) */
.wa-uebergabe{margin:10px 0 0;font-size:var(--fs-2);line-height:1.45;color:var(--still);
  text-align:center;padding:0 6px}
.dunkel .wa-uebergabe{color:var(--d-4)}
/* nur die Trefferfläche vergrößern — Farbe und Gewicht kommen aus der Regel oben */
.wa-alt a{display:inline-block;padding:5px 2px;margin:-5px -2px}


/* Pause-Schalter am Banner-Karussell — WCAG 2.2.2 (Audit 17.09.2026) */
.sl-n button.sl-pause{width:auto;height:auto;display:inline-flex;align-items:center;gap:7px;min-height:var(--tipp);
  padding:0 13px;border:0;border-radius:var(--r-1);cursor:pointer;
  background:var(--flaeche-3);color:var(--text);
  font:inherit;font-size:var(--fs-2);font-weight:650;letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px var(--kante);transition:background .3s var(--e)}
.sl-n button.sl-pause .sl-sym{width:9px;height:11px;flex:none;background:currentColor;
  /* zwei Balken = Pause */
  -webkit-mask:linear-gradient(#000 0 0) 0/3px 100% no-repeat,linear-gradient(#000 0 0) 100%/3px 100% no-repeat;
  mask:linear-gradient(#000 0 0) 0/3px 100% no-repeat,linear-gradient(#000 0 0) 100%/3px 100% no-repeat}
.sl-n button.sl-pause[aria-pressed="true"] .sl-sym{
  /* Dreieck = Weiter */
  -webkit-mask:none;mask:none;background:none;
  border-left:9px solid currentColor;border-top:5.5px solid transparent;
  border-bottom:5.5px solid transparent;width:0;height:0}
@media (hover:hover) and (pointer:fine){.sl-n button.sl-pause:hover{background:var(--flaeche-2);color:var(--text)}}
.sl-n button.sl-pause:active{transform:scale(.97)}
.dunkel .sl-n button.sl-pause{background:var(--d-flaeche);color:var(--d-2);
  box-shadow:inset 0 0 0 1px var(--d-kante)}
@media (max-width:560px){.sl-n button.sl-pause .sl-txt{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sl-n button.sl-pause{padding:0 11px}}


/* Feldbezogene Fehlermeldung und E-Mail-Rückfallebene (Audit 17.09.2026) */
.fm-feldfehler{display:block;margin-top:7px;font-size:var(--fs-3);line-height:1.45;
  color:#A4141C;font-weight:600}
.dunkel .fm-feldfehler{color:#FFB4B8}
.eing[aria-invalid="true"]{box-shadow:inset 0 0 0 2px #C9202A}
.fm-mailweg{display:inline-block;margin-top:10px;min-height:var(--tipp);
  padding:0 15px;border:0;border-radius:var(--r-1);cursor:pointer;
  background:var(--flaeche);color:var(--stark);font:inherit;font-size:var(--fs-3);font-weight:650;
  box-shadow:inset 0 0 0 1px var(--kante)}
@media (hover:hover) and (pointer:fine){.fm-mailweg:hover{background:var(--flaeche-2)}}
.fm-mailweg:active{transform:scale(.98)}
.dunkel .fm-mailweg{background:var(--d-flaeche);color:var(--d-1);box-shadow:inset 0 0 0 1px var(--d-kante)}