/* Saxo Schlüsseldienst — Komponenten. Neubau N1.
   Reihenfolge: Header, CallBar, Hero, Overlay, MediaCard, Svc, Belt, DoorPick,
   MapPicker, Readout, Steps, Split, ReadRow, Quote, Faq, Breadcrumb, Stars, Footer. */

/* ====================================================== Header */
.hd{position:fixed;top:0;left:0;right:0;z-index:80;background:var(--ground);border-bottom:1px solid var(--line);
  transition:background-color .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease)}
/* Solange der Hero unter der Kopfzeile liegt, ist sie durchsichtig und schreibt in Creme */
.hd.is-clear{background:transparent;border-bottom-color:transparent}
.hd.is-clear .hd__nav > a,.hd.is-clear .hd__fachlink{color:rgba(245,239,221,.82)}
.hd.is-clear .hd__nav > a:hover,.hd.is-clear .hd__fachlink:hover{color:var(--on-deep);border-bottom-color:rgba(245,239,221,.5)}
.hd.is-clear .hd__nav > a[aria-current="page"]{color:var(--on-deep);border-bottom-color:var(--on-deep)}
.hd.is-clear .hd__tel{color:var(--on-deep)}
.hd.is-clear .hd__telwrap .mono{color:rgba(245,239,221,.66)}
.hd.is-clear .hd__burger{color:var(--on-deep);border-color:rgba(245,239,221,.42);background:rgba(20,18,12,.18)}

.hd__bar{display:flex;align-items:center;gap:var(--s5);min-height:var(--hd-h);
  max-width:none;padding-inline:var(--gut)}
.hd__brand{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none;flex:none}
.hd__brand img{width:auto;display:block;flex:none}
.hd__brand .hd__mark{height:34px}
.hd__brand .hd__word{height:26px}
.hd__brand .mono{color:var(--ink-3)}
.hd__nav{display:none}
.hd__call{display:none;flex:none;white-space:nowrap}
@media (min-width:900px){
  .hd__bar{min-height:72px}
  :root{--hd-h:78px}
  .hd__brand .hd__mark{height:44px}
  .hd__brand .hd__word{height:34px}
}
/* Drei Stufen, eine Grenze je Stufe — dazwischen läuft nichts ineinander.
   Unter 900 px: Klappmenü oben, Anrufleiste am unteren Bildrand.
   900 bis 1279,98 px: Kopfzeile trägt genau Wortmarke, Rufnummer und die drei
   Striche. Keine Leiste, kein Fach — die neun Leistungen stehen im Klappmenü.
   Ab 1280 px steht die ganze Leiste ganz in der Zeile, ab 1480 px auch die
   Rufnummer daneben. */
@media (min-width:1280px){
  .hd__call{display:inline-flex}
  .hd__nav > a,.hd__fachlink{font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none;padding-block:6px;
    white-space:nowrap;border-bottom:2px solid transparent;
    transition:color .2s var(--ease),border-color .2s var(--ease)}
  .hd__nav > a:hover,.hd__fachlink:hover{color:var(--ink);border-bottom-color:var(--line-2)}
  .hd__nav > a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
  .hd__nav{display:flex;align-items:center;gap:var(--s5);min-width:0;flex:0 1 auto}
}
@media (min-width:1520px){
  .hd__nav{gap:var(--s6)}
}
.hd__burger{width:46px;height:46px;display:grid;place-items:center;background:transparent;
  border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer}

/* Leistungsfach — das Klappfeld unter „Leistungen“: neun Kacheln mit Symbol,
   zweispaltig, jede einzeln anklickbar. Öffnet beim Überfahren und beim
   Durchtabben (focus-within) — ohne Skript, und ohne Skript ebenso bedienbar. */
.hd__fach{position:relative;display:none;align-items:center;flex:none;align-self:stretch}
@media (min-width:1280px){.hd__fach{display:flex}}
.hd__fachlink{display:inline-flex;align-items:center;gap:7px}
.hd__fachlink .chev{width:11px;height:11px;flex:none;transition:transform .3s var(--ease)}
.hd__fach:hover .chev,.hd__fach:focus-within .chev,.hd__fach.is-open .chev{transform:rotate(90deg)}
.hd__fach__pnl{position:absolute;top:100%;left:calc(var(--s5) * -1);z-index:2;
  width:min(560px,calc(100vw - 2 * var(--gut)));
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line-2);box-shadow:var(--shadow-lift);
  opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .34s var(--ease)}
.hd__fach:hover .hd__fach__pnl,.hd__fach:focus-within .hd__fach__pnl,
.hd__fach.is-open .hd__fach__pnl{opacity:1;pointer-events:auto;transform:none}
/* Sobald das Skript läuft, entscheidet allein is-open — mit Nachlauf beim Verlassen,
   damit der Weg von der Beschriftung in die rechte Spalte nichts abreißt. */
.js-fach .hd__fach:hover .hd__fach__pnl,.js-fach .hd__fach:focus-within .hd__fach__pnl{opacity:0;pointer-events:none;transform:translateY(-8px)}
.js-fach .hd__fach.is-open .hd__fach__pnl{opacity:1;pointer-events:auto;transform:none}
.js-fach .hd__fach:hover .chev,.js-fach .hd__fach:focus-within .chev{transform:none}
.js-fach .hd__fach.is-open .chev{transform:rotate(90deg)}
.hd__fach__pnl a{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:center;
  min-height:58px;padding:13px var(--s5);background:var(--surface);box-shadow:var(--edge);
  font-size:14.5px;font-weight:500;line-height:1.3;color:var(--ink);text-decoration:none;
  border-bottom:0;transition:background-color .2s var(--ease),color .2s var(--ease)}
.hd__fach__pnl a:hover{background:var(--sunk)}
.hd__fach__pnl a svg{width:21px;height:21px;flex:none;color:var(--ink-2);
  transition:color .2s var(--ease),transform .3s var(--ease)}
.hd__fach__pnl a:hover svg{color:var(--orange)}
/* Die Leistung, auf der man gerade steht, leuchtet im Akzent */
.hd__fach__pnl a[aria-current="page"]{background:var(--sunk)}
.hd__fach__pnl a[aria-current="page"] svg{color:var(--orange)}
.hd__fach__pnl a[aria-current="page"] span{font-weight:600}
.hd__fach__pnl .fach__all{background:var(--ground);font-weight:600}
/* Das Ratgeberfach hat zehn Einträge — der Abschluss läuft über beide Spalten */
.hd__fach__pnl--rg .fach__all{grid-column:1 / -1}
.hd__fach__pnl .fach__all svg{width:16px;height:16px}
.hd__fach__pnl .fach__all:hover svg{transform:translateX(5px)}
/* Das Ratgeberfach steht weit rechts in der Leiste und hängt darum an seiner
   rechten Kante — links angeschlagen liefe es über den rechten Bildrand. */
.hd__fach__pnl--rg{left:auto;right:calc(var(--s5) * -1)}
@media (prefers-reduced-motion:reduce){
  .hd__fach__pnl{transition:none;transform:none}
  .hd__fachlink .chev{transition:none}
}
.hd__burger svg{width:18px;height:18px}
@media (min-width:1280px){.hd__burger{display:none}}
.hd__tel{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--head);
  font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.hd__tel:hover{color:var(--orange-dark)}
.hd__tel svg{width:16px;height:16px}
.hd__telwrap .mono{display:block;white-space:nowrap}
.hd__telwrap{display:none}
/* Ab 900 px steht die Rufnummer im Kopf — das ist der Anrufweg, solange die
   Anrufleiste am unteren Rand weg ist. Der Zusatz kommt erst, wenn Platz ist. */
.hd__telwrap{flex-direction:column;align-items:flex-end;gap:2px;line-height:1.1}
@media (min-width:900px) and (max-width:1279.98px){.hd__telwrap{display:flex}}
@media (min-width:1480px){.hd__telwrap{display:flex}}
@media (max-width:1479.98px){.hd__telwrap .mono{display:none}}

/* Klappmenü am Telefon: flache Liste, Haarlinien, keine Kisten */
.hd__panel{display:none;border-top:1px solid var(--line);background:var(--ground);padding-inline:var(--gut);
  padding-bottom:calc(56px + var(--s8));max-height:calc(100dvh - var(--hd-h));overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.hd__panel[data-open="true"]{display:block}
@media (min-width:900px){.hd__panel{padding-bottom:var(--s8)}}
@media (min-width:1280px){.hd__panel{display:none !important}}
.hd__panel a{display:flex;align-items:center;justify-content:space-between;min-height:52px;
  font-size:17px;font-weight:500;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.hd__panel a[aria-current="page"]{font-weight:700;padding-left:var(--s3);
  box-shadow:inset 3px 0 0 var(--ink)}
.hd__panel .mono{padding-top:var(--s6);padding-bottom:var(--s2);display:block}
.hd__panel .btn{width:100%;justify-content:center;margin-top:var(--s5)}
.hd__panel .btn + .btn{margin-top:var(--s3)}

.page-top{padding-top:var(--hd-h)}

/* ====================================================== CallBar (Telefon) */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:1px;
  background:var(--line-2);border-top:1px solid var(--line-2);padding-top:0}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;min-height:56px;
  font-weight:600;font-size:15.5px;text-decoration:none}
.callbar__call{background:var(--orange-dark);color:#fff}
.callbar__wa{background:var(--surface);color:var(--ink);flex:0 0 30%}
.callbar__alt{background:var(--surface);color:var(--ink);flex:0 0 26%}
.callbar__call{flex:1 1 auto;min-width:44%}
@media (max-width:399.98px){
  .callbar a{font-size:14px;gap:6px}
  .callbar__wa,.callbar__alt{flex-basis:28%}
}
.callbar svg{width:17px;height:17px}
.callbar.is-pulse .callbar__call{animation:pulse 1.2s var(--ease) 1}
@keyframes pulse{0%,100%{transform:none}50%{transform:scale(1.035)}}
@media (min-width:900px){.callbar{display:none}}
@media (max-width:899.98px){body{padding-bottom:56px}}
@media (prefers-reduced-motion:reduce){.callbar.is-pulse .callbar__call{animation:none}}

/* ====================================================== Hero */
.hero{position:sticky;top:0;z-index:0;min-height:min(680px,86vh);display:flex;align-items:flex-end;overflow:hidden}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:var(--veil-side),var(--scrim),var(--veil)}
.hero__in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:calc(var(--hd-h) + var(--s10)) var(--gut) clamp(56px,7vw,92px)}
.hero h1{color:var(--on-deep);max-width:15ch}
.hero .mono{color:var(--on-deep-2);margin-bottom:var(--s5)}
.hero__sub{color:var(--on-deep);opacity:.88;font-size:clamp(1.0625rem,1.6vw,1.3rem);line-height:1.45;
  max-width:46ch;margin-top:var(--s6)}
.hero__acts{margin-top:var(--s8)}
.hero__meta{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s7);margin-top:var(--s8);
  padding-top:var(--s5);border-top:1px solid rgba(245,239,221,.22)}
.hero__meta span{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--on-deep)}
.hero a{color:var(--on-deep);text-decoration-color:rgba(245,239,221,.5)}
.hero a:hover{text-decoration-color:var(--on-deep)}
.hero__meta b{color:var(--on-deep);font-family:var(--body);font-size:13px;letter-spacing:0;text-transform:none;font-weight:600}

/* Notdienst-Plakette — zweite erlaubte Orange-Stelle */
.badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;color:#fff;background:var(--orange-dark);
  padding:7px 11px;border-radius:var(--r)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}

/* Wortweiser Aufbau der Überschrift */
.js-hero .hero h1 .w{display:inline-block;opacity:0;transform:translateY(.32em);
  transition:opacity .62s var(--slow),transform .62s var(--slow)}
.js-hero .hero h1.is-in .w{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-hero .hero h1 .w{opacity:1 !important;transform:none !important}}

/* ====================================================== Overlay — Schicht über dem Hero */
.overlay{position:relative;z-index:4;background:var(--ground);margin-top:-36px;
  border-radius:32px 32px 0 0;padding-top:60px;box-shadow:0 -30px 60px -34px rgba(20,18,12,.5)}
@media (max-width:759.98px){.overlay{margin-top:-24px;border-radius:22px 22px 0 0;padding-top:44px}}

/* ====================================================== MediaCard — Foto trägt die Fläche */
.mc{position:relative;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;isolation:isolate;
  background:var(--deep-2);min-height:260px}
.mc > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform 1.1s var(--slow)}
.mc::after{content:"";position:absolute;inset:0;z-index:1;background:var(--veil)}
.mc__txt{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);
  padding:var(--s6);flex:1 1 auto;min-height:0;justify-content:flex-end}
.mc__txt > *{transition:transform .45s var(--slow)}
.mc h3,.mc h4{color:var(--on-deep)}
.mc p{color:var(--on-deep);opacity:.86;font-size:15px;line-height:1.5;max-width:40ch}
.mc .mono{color:var(--on-deep-2)}
.mc .arrow{color:var(--on-deep);margin-top:var(--s1)}
.mc:hover > img{transform:scale(1.05)}
.mc:hover .arrow svg{transform:translateX(6px)}
/* Kennung, solange das Foto fehlt */
.mc__id,.ph__id{position:absolute;z-index:3;top:10px;left:10px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;color:rgba(245,239,221,.62)}
.ph{position:absolute;inset:0;z-index:0;background:
  linear-gradient(145deg,var(--deep-2) 0%,var(--deep) 58%,#2C2718 100%)}

/* ====================================================== Svc — drei Hauptleistungen, Auswahl */
.svc{display:grid;gap:0}
.svc .big{min-height:clamp(360px,46vw,560px)}
.svc .sm{min-height:clamp(220px,23vw,280px)}
.svc__col{display:grid;gap:0;align-content:stretch}
@media (min-width:900px){
  .svc{grid-template-columns:1.38fr 1fr}
  /* Zwei genau gleiche Zeilen — die rechte Spalte endet damit auf derselben
     Kante wie das große Bild, oben und unten. */
  .svc__col{grid-template-rows:1fr 1fr}
}
/* Auswahl ohne Layoutbewegung: Nachbarn treten zurück, das Bild wächst im festen Rahmen */
.svc .mc{transition:filter .4s var(--slow)}
.svc:has(.mc:hover) .mc:not(:hover){filter:brightness(.62) saturate(.7)}
.svc .mc:hover .mc__txt > *{transform:translateY(-6px)}
.svc .mc::before{content:"";position:absolute;left:24px;right:24px;bottom:18px;height:1px;z-index:3;
  background:var(--on-deep);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--slow)}
.svc .mc:hover::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .svc:has(.mc:hover) .mc:not(:hover){filter:none}
  .svc .mc::before{display:none}
}

/* ====================================================== Belt — Fließband, randlos, ohne Lücken */
.belt{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;touch-action:pan-y;overscroll-behavior-x:contain;
  -webkit-user-select:none;user-select:none}
.belt img{-webkit-user-drag:none;user-drag:none}
.belt::-webkit-scrollbar{display:none}
.belt.is-drag{cursor:grabbing}
.belt:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.belt__track{display:flex;width:max-content;gap:0}
.belt .mc{flex:0 0 clamp(240px,26vw,330px);min-height:clamp(260px,26vw,320px);
  transition:transform .4s var(--slow),filter .4s var(--slow),box-shadow .4s var(--slow)}
.belt:hover .mc{filter:brightness(.8)}
.belt .mc:hover,.belt .mc:focus-visible{filter:none;transform:scale(1.03);box-shadow:var(--edge);z-index:2}
@media (prefers-reduced-motion:reduce){
  .belt{scroll-snap-type:x mandatory}
  .belt .mc{scroll-snap-align:start}
}

/* Halten-Knopf — mono, Haarlinie, kein Kästchen. Aus den zwei Balken wird
   im gehaltenen Zustand ein Dreieck. */
.belt__hold{display:inline-flex;align-items:center;gap:11px;min-height:44px;padding:0 2px;
  background:transparent;border:0;border-bottom:1px solid var(--line-2);cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  line-height:1.3;color:var(--ink-2);
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.belt__hold:hover{color:var(--ink);border-bottom-color:var(--ink)}
.belt__hold__ic{position:relative;width:9px;height:11px;flex:none}
.belt__hold__ic::before,.belt__hold__ic::after{content:"";position:absolute;top:0;width:3px;height:11px;
  background:currentColor;transition:opacity .2s var(--ease)}
.belt__hold__ic::before{left:0}
.belt__hold__ic::after{right:0}
.belt__hold[aria-pressed="true"] .belt__hold__ic::before{width:0;height:0;background:transparent;
  border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;border-left:9px solid currentColor}
.belt__hold[aria-pressed="true"] .belt__hold__ic::after{opacity:0}

/* ====================================================== DoorPick — vier Türtypen, Scheinwerfer */
.doors{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:560px){.doors{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.doors{grid-template-columns:repeat(4,1fr)}}
.doors .mc{min-height:clamp(300px,34vw,420px);transition:filter .45s var(--slow)}
.doors:has(.mc:hover) .mc:not(:hover),.doors:has(.mc:focus-visible) .mc:not(:focus-visible){filter:brightness(.6) saturate(.6)}
.doors .mc h4{position:relative;padding-bottom:9px}
.doors .mc h4::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.doors .mc:hover h4::after,.doors .mc:focus-visible h4::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .doors:has(.mc:hover) .mc:not(:hover){filter:none}
  .doors .mc h4::after{transition:none}
}

/* ====================================================== MapPicker
   Der Abschnitt ist ein Foto. Die Karte wird direkt hineingezeichnet:
   keine eigene Fläche, kein Kasten, kein Rahmen. */
.geo{position:relative;isolation:isolate;overflow:hidden;background:var(--deep)}
.geo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.66}
.geo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,9,6,.82) 0%,rgba(10,9,6,.62) 42%,rgba(10,9,6,.86) 100%)}
.geo__in{position:relative;z-index:2;display:grid;gap:var(--s8);
  max-width:var(--wrap);margin-inline:auto;padding:var(--sec) var(--gut)}
@media (min-width:900px){.geo__in{grid-template-columns:1.3fr 1fr;gap:var(--s9)}}
.geo__in > *{min-width:0}

/* Aufziehen beim Scrollen — der Abschnitt steht zuerst als eingerückte Fläche
   mit hineingezoomtem Foto und fährt auf die ganze Breite aus. Beides geht
   in beide Richtungen. Nur Clip und Transform, das Layout bleibt unberührt. */
.js-geo .geo{--gp:0;--gc:0;
  clip-path:inset(calc((1 - var(--gp)) * 7vh) calc((1 - var(--gp)) * 10vw))}
.js-geo .geo > img{transform-origin:50% 44%;
  transform:scale(calc(1 + (1 - var(--gp)) * .26))}
.js-geo .geo__in{opacity:var(--gc);
  transform:translate3d(0,calc((1 - var(--gc)) * 32px),0)}
@media (prefers-reduced-motion:reduce){
  .js-geo .geo{clip-path:none}
  .js-geo .geo > img{transform:none}
  .js-geo .geo__in{opacity:1;transform:none}
}

.map{position:relative;min-height:clamp(320px,38vw,480px)}
.map__svg{width:100%;height:auto;display:block;overflow:visible}
.map-elbe{fill:none;stroke:#7E97AA;stroke-width:6;opacity:.5;stroke-linecap:round}
.map-city{fill:rgba(245,239,221,.05);stroke:rgba(245,239,221,.34);stroke-width:1.2;stroke-dasharray:5 6}
.map__svg .route{fill:none;stroke:var(--on-deep);stroke-width:2;stroke-linecap:round;opacity:0;
  transition:opacity .3s var(--ease)}
.map__svg .route.is-hint{opacity:.35}
.map__svg .route.is-set{opacity:1;stroke:var(--orange);stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:draw .75s var(--slow) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.map__pt{cursor:pointer}
.map__pt circle{fill:rgba(245,239,221,.82);transition:fill .25s var(--ease),r .25s var(--ease)}
.map__pt text{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  fill:rgba(245,239,221,.72);transition:fill .25s var(--ease)}
.map__pt:hover circle,.map__pt:focus-visible circle{fill:var(--on-deep)}
.map__pt:hover text,.map__pt:focus-visible text{fill:var(--on-deep)}
.map__pt[aria-pressed="true"] circle{fill:var(--orange);r:6}
.map__pt[aria-pressed="true"] text{fill:var(--on-deep)}
.map__home rect{fill:var(--on-deep)}
.map__home text{font-family:var(--mono);font-size:9px;letter-spacing:.16em;fill:var(--on-deep)}
.map__note{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-deep-2);margin-top:var(--s5)}

/* Ausleser — ohne Kasten, Schrift steht direkt auf dem Foto */
.readout{padding-top:var(--s5);border-top:1px solid rgba(245,239,221,.26)}
.readout .mono{color:var(--on-deep-2)}
.readout__name{font-family:var(--head);font-weight:600;font-size:clamp(1.5rem,2.6vw,2rem);
  letter-spacing:-.02em;color:var(--on-deep);margin-top:var(--s3)}
.readout .num{margin-top:var(--s4);color:var(--on-deep);line-height:.86}
.readout .num small{font-family:var(--body);font-size:.24em;font-weight:600;letter-spacing:0;
  margin-left:10px;color:var(--on-deep-2)}
.readout__meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s5);
  padding-top:var(--s4);border-top:1px solid rgba(245,239,221,.14);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-deep-2)}
.readout__fine{font-size:14px;line-height:1.6;color:var(--on-deep-2);margin-top:var(--s4);max-width:40ch}
.readout__txt{font-family:var(--head);font-weight:600;font-size:clamp(1.05rem,1.8vw,1.35rem);
  line-height:1.25;letter-spacing:-.01em;color:var(--on-deep);margin-top:var(--s4);max-width:22ch}

/* Ortsliste — nach Fahrzeit sortiert, ohne Zwischenüberschriften.
   Zwei Spuren nur, wenn sie auch tragen: die Leiste steht in der schmalen
   rechten Spalte des Abschnitts, deshalb auto-fit statt starrer 1fr 1fr. */
.orte{margin-top:var(--s7);display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  column-gap:var(--s7);border-top:1px solid rgba(245,239,221,.22)}
.orte button{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);width:100%;min-width:0;
  min-height:48px;padding:0 0 0 12px;background:transparent;border:0;
  border-bottom:1px solid rgba(245,239,221,.14);border-left:2px solid transparent;
  color:var(--on-deep-2);font-size:16px;font-weight:500;text-align:left;cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease)}
.orte button:hover{color:var(--on-deep);background:rgba(245,239,221,.06)}
.orte button span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:rgba(245,239,221,.55);
  flex:none;white-space:nowrap}
.orte button[aria-pressed="true"]{color:var(--on-deep);font-weight:600;
  border-left-color:var(--orange);background:rgba(245,239,221,.08)}
.orte button[aria-pressed="true"] span{color:var(--orange)}
.geo__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);margin-top:var(--s6)}
.geo__foot p{font-size:14px;color:var(--on-deep-2)}
.geo__attrib{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--on-deep-2);
  margin-top:var(--s5);opacity:.8}
@media (prefers-reduced-motion:reduce){
  .map__svg .route.is-set{animation:none;stroke-dashoffset:0}
  .orte button:hover{transform:none}
}

/* ====================================================== Steps */
.steps{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(245,239,221,.18);
  border-block:1px solid rgba(245,239,221,.18)}
@media (min-width:560px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps__item{background:var(--deep);padding:var(--s7) var(--s6) var(--s8);display:flex;flex-direction:column;gap:var(--s3)}
.steps__no{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;color:var(--on-deep-2)}
.steps__item h4{color:var(--on-deep)}
.steps__item p{color:var(--on-deep-2);font-size:15px;line-height:1.5}

/* ====================================================== Split — halbe Fläche Foto, halbe Text */
.split{display:grid;grid-template-columns:1fr;align-items:stretch}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}.split--rev .split__media{order:2}}
.split__media{position:relative;min-height:clamp(280px,42vw,520px);overflow:hidden;background:var(--deep-2)}
.split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split__body{display:flex;flex-direction:column;justify-content:center;gap:var(--s5);
  padding:var(--sec) var(--gut)}
@media (min-width:900px){.split__body{padding-inline:clamp(32px,5vw,72px)}}
.split__body.on-deep{background:var(--deep)}

/* ====================================================== ReadRow — Ratgeber als Zeilen */
.readrow{display:grid;grid-template-columns:1fr;border-top:2px solid var(--ink)}
.readrow a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s5);
  padding:var(--s6) 0;border-bottom:1px solid var(--line);text-decoration:none}
.readrow a{transition:transform .3s var(--ease),background-color .3s var(--ease)}
.readrow a:hover{transform:translateX(12px);background:var(--surface)}
.readrow .mono{color:var(--ink-3)}
.readrow h4{font-size:clamp(1.0625rem,1.8vw,1.4rem);font-weight:600}
.readrow svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.readrow a:hover svg{transform:translateX(5px)}
@media (max-width:559.98px){
  .readrow a{grid-template-columns:1fr auto;gap:var(--s2)}
  .readrow .mono{grid-column:1/-1}
}

/* Erklärkasten ohne Bildfläche — bis die Zeichnungen vorliegen steht hier
   nur Überschrift und Text, mit der Haarlinie darüber. Kein leerer Rahmen. */
.erkl{display:grid;gap:var(--s7)}
@media (min-width:760px){.erkl{grid-template-columns:repeat(2,1fr);gap:var(--s8)}}
.erkl > div{border-top:1px solid var(--line);padding-top:var(--s5);min-width:0}
.erkl h3{margin-bottom:var(--s4)}
.erkl p{color:var(--ink-2);max-width:52ch}

/* ====================================================== Quote */
.quote{display:grid;gap:var(--s6);max-width:62ch}
.quote blockquote{margin:0;font-family:var(--head);font-weight:600;letter-spacing:-.02em;line-height:1.24;
  font-size:clamp(1.3rem,2.6vw,2rem)}
.quote figcaption{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3)}
.on-deep .quote figcaption{color:var(--on-deep-2)}
.quotes{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:760px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quotes .quote{background:var(--ground);padding:var(--s7) var(--s6);gap:var(--s5);align-content:start}
.quotes blockquote{font-size:clamp(1.0625rem,1.5vw,1.25rem);font-family:var(--body);font-weight:400;
  letter-spacing:0;line-height:1.55;color:var(--ink-2)}

/* Stars */
.stars{display:inline-flex;gap:3px;align-items:center}
.stars svg{width:14px;height:14px;fill:var(--ink)}
.stars svg.is-leer{fill:var(--ink-3);opacity:.3}
.on-deep .stars svg.is-leer,.mc .stars svg.is-leer,.hero .stars svg.is-leer{fill:var(--on-deep);opacity:.28}
/* Antwort des Inhabers unter einer Bewertung */
.quote__antwort{border-left:2px solid var(--line);padding-left:var(--s5)}
.quote__antwort p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0}
.quote__antwort .mono{display:block;color:var(--ink-3);margin-bottom:var(--s2)}
.on-deep .stars svg,.mc .stars svg,.hero .stars svg{fill:var(--on-deep)}

/* ====================================================== Statusleiste */
.status{display:grid;grid-template-columns:1fr;gap:var(--s4);align-items:baseline;
  padding-bottom:var(--s6);border-bottom:1px solid var(--line)}
@media (min-width:760px){.status{grid-template-columns:auto 1fr auto;gap:var(--s7)}}
.status__state{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink)}
.status__state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--led);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--led) 22%,transparent);
  animation:blink 2.6s var(--ease) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.status__state::before{animation:none}}
.status__say{color:var(--ink-2);font-size:15.5px;max-width:62ch}
.status__say b{color:var(--ink);font-weight:600}
.status__time{font-family:var(--head);font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1;justify-self:start}
@media (min-width:760px){.status__time{justify-self:end}}

/* ====================================================== Faq */
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);cursor:pointer;
  list-style:none;padding:var(--s6) 0;font-family:var(--head);font-weight:600;font-size:clamp(1.0625rem,1.6vw,1.25rem);
  letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;border-right:1.5px solid var(--ink-3);
  border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-1px)}
.faq__body{padding-bottom:var(--s6)}
.faq__body p{max-width:66ch;color:var(--ink-2)}

/* ====================================================== Breadcrumb */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding-block:var(--s5);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb [aria-current]{color:var(--ink)}
.crumb li{display:flex;align-items:center;gap:var(--s2)}
.crumb li + li::before{content:"/";color:var(--line-2)}

/* ====================================================== Zahlenreihe */
.figs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s7) var(--s5)}
@media (min-width:760px){.figs{grid-template-columns:repeat(4,1fr)}}
.figs > div{display:flex;flex-direction:column;gap:var(--s3);border-top:1px solid var(--line);padding-top:var(--s4)}
.on-deep .figs > div{border-top-color:rgba(245,239,221,.22)}
.figs .num{color:inherit}
.figs p{font-size:14px;line-height:1.45}
.figs p.num,.figs p.num-sm{font-size:clamp(1.8rem,3vw,2.4rem);line-height:.9}

/* Sprachumschalter — am Schreibtisch neben dem Anruf-Knopf, darunter im Menu */
.hd__lang{display:none;flex:none;align-items:center;gap:2px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;border:1px solid var(--line-2);padding:2px}
@media (min-width:900px){.hd__lang{display:flex}}
.hd__lang > span,.hd__lang > a{display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:26px;text-decoration:none}
.hd__lang > span{background:var(--ink);color:var(--ground)}
.hd__lang > a{color:var(--ink-2)}
.hd__lang > a:hover{color:var(--ink);background:var(--sunk)}
.hd.is-clear .hd__lang{border-color:rgba(245,239,221,.34)}
.hd.is-clear .hd__lang > span{background:var(--on-deep);color:var(--ink)}
.hd.is-clear .hd__lang > a{color:var(--on-deep-2)}
.hd.is-clear .hd__lang > a:hover{color:var(--on-deep);background:rgba(245,239,221,.14)}

/* ====================================================== Footer */
.ft{background:var(--deep);color:var(--on-deep-2)}
.ft__cols{display:grid;grid-template-columns:1fr;gap:var(--s8);padding-block:var(--s10) var(--s8)}
@media (min-width:620px){.ft__cols{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.ft__cols{grid-template-columns:1.35fr 1fr 1fr 1fr 1fr 1fr}
  .ft__cols > .ft__orte-col{grid-column:span 2}}
.ft__orte{columns:2;column-gap:var(--s5)}
.ft__orte li{break-inside:avoid}
.ft h4{color:var(--on-deep);font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.17em;
  text-transform:uppercase;margin-bottom:var(--s5)}
.ft ul{display:flex;flex-direction:column;gap:2px}
.ft a{color:var(--on-deep-2);text-decoration:none;font-size:14.5px;display:inline-flex;align-items:center;min-height:36px}
.ft a:hover{color:var(--on-deep)}
.ft a[aria-current="page"]{color:var(--on-deep);font-weight:600}
.ft__bar{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);justify-content:space-between;
  padding-block:var(--s5);border-top:1px solid rgba(245,239,221,.18);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.ft__tel{font-family:var(--head);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.03em;
  color:var(--on-deep);text-decoration:none;display:inline-block;margin-bottom:var(--s3)}
.ft__tel:hover{color:var(--orange)}
.ft__rechte{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);justify-content:space-between;
  padding-bottom:var(--s7);font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:rgba(245,239,221,.62)}
.ft__rechte a{font-family:var(--mono);font-size:10px;letter-spacing:.12em;min-height:0}

/* ====================================================== Leistungsseiten */
/* Platzhalterfläche, solange das Foto fehlt: tonaler Verlauf, Kennung, alt-Text */
.phbox{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--deep-2) 0%,var(--deep) 58%,#2C2718 100%);
  min-height:clamp(240px,30vw,360px);display:flex;align-items:flex-end}
.phbox__id{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  color:rgba(245,239,221,.55)}
.phbox__txt{position:relative;z-index:2;padding:var(--s7) var(--s6);display:flex;flex-direction:column;gap:var(--s3);width:100%}
.phbox h3,.phbox h4{color:var(--on-deep)}
.phbox p{color:var(--on-deep-2);font-size:15px;line-height:1.55;max-width:46ch}
.phbox__alt{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:rgba(245,239,221,.4);max-width:44ch}

/* Antwort zuerst — der Absatz, der zitiert wird */
.answer{font-family:var(--head);font-weight:600;letter-spacing:-.02em;line-height:1.3;
  font-size:clamp(1.3rem,2.2vw,1.8rem);max-width:46ch;color:var(--ink);hyphens:none}
.answer + .answer-sub{margin-top:var(--s6);max-width:62ch;color:var(--ink-2)}

/* Zwei randlose Flächen nebeneinander */
.pair{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:760px){.pair{grid-template-columns:1fr 1fr}}

/* Zeilen mit Haarlinien und Mono-Ziffern */
.rows{border-top:2px solid var(--ink)}
.rows > *{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:baseline;
  padding:var(--s5) 0;border-bottom:1px solid var(--line)}
@media (min-width:760px){.rows > *{grid-template-columns:auto 15rem 1fr;gap:var(--s6)}}
.rows .mono{color:var(--ink-3)}
.rows h4{font-weight:600}
.rows h3{font-family:var(--head);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.3rem);
  letter-spacing:-.01em;scroll-margin-top:96px}
.rows p{color:var(--ink-2);font-size:15.5px}

/* Übersicht /leistungen/ — neun randlose Zeilen */
.lrows{display:grid;gap:0}
.lrow{position:relative;display:flex;align-items:flex-end;overflow:hidden;text-decoration:none;
  min-height:clamp(120px,14vw,190px);background:var(--deep-2);
  transition:min-height .45s var(--slow),filter .45s var(--slow)}
.lrow > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.lrow::after{content:"";position:absolute;inset:0;z-index:1;background:var(--veil-side)}
.lrow__txt{position:relative;z-index:2;display:flex;align-items:baseline;gap:var(--s5);width:100%;
  padding:var(--s6);flex-wrap:wrap}
.lrow h3{color:var(--on-deep)}
.lrow p{color:var(--on-deep-2);font-size:15px}
.lrow svg{width:18px;height:18px;color:var(--on-deep);margin-left:auto;align-self:center;
  transition:transform .3s var(--ease)}
.lrows:has(.lrow:hover) .lrow:not(:hover){filter:brightness(.72)}
.lrow:hover{min-height:clamp(150px,18vw,240px)}
.lrow:hover svg{transform:translateX(6px)}
@media (prefers-reduced-motion:reduce){
  .lrow{transition:none}.lrow:hover{min-height:clamp(120px,14vw,190px)}
  .lrows:has(.lrow:hover) .lrow:not(:hover){filter:none}
}

/* Schmales dunkles Band mit einem Satz */
.strip{background:var(--deep);color:var(--on-deep)}
.strip__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s5);
  padding-block:var(--s8)}
.strip p{color:var(--on-deep);font-family:var(--head);font-weight:600;font-size:clamp(1.15rem,2.2vw,1.6rem);
  letter-spacing:-.015em;max-width:44ch}

/* ====================================================== Ortsseiten */
/* Kennzahlen: vier Felder, senkrechte Haarlinien, kein Kasten */
.kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6) 0;border-top:2px solid var(--ink)}
@media (min-width:760px){.kpi{grid-template-columns:repeat(4,1fr)}}
.kpi > div{padding:var(--s6) var(--s5);border-left:1px solid var(--line)}
.kpi > div:first-child{border-left:0;padding-left:0}
@media (min-width:760px){.kpi > div:first-child{padding-left:0}}
.kpi .mono{color:var(--ink-3)}
.kpi .num-sm{margin-top:var(--s3)}
.kpi p{font-size:13px;color:var(--ink-3);margin-top:var(--s3)}
.kpi .kpi__txt{font-family:var(--head);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.3rem);
  line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin-top:var(--s3)}

/* Nachbarorte: eine Zeile, kein Linkteppich */
.nachbarn{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;
  padding-block:var(--s5);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nachbarn a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-2);min-height:44px;display:inline-flex;align-items:center}
.nachbarn a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2)}
.nachbarn span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);min-height:44px;display:inline-flex;align-items:center}

/* Tabelle Einsatzgebiet */
.tbl{width:100%;border-collapse:collapse;font-size:15.5px}
.tbl caption{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3);padding-bottom:var(--s4)}
.tbl th{text-align:left;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);padding:var(--s3) var(--s4) var(--s3) 0;
  border-bottom:2px solid var(--ink)}
.tbl td{padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.tbl td:nth-child(2),.tbl td:nth-child(3),.tbl th:nth-child(2),.tbl th:nth-child(3){
  text-align:right;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl td:last-child,.tbl th:last-child{text-align:right;padding-right:0}
.tbl a{text-decoration:none;font-weight:500}
.tbl a:hover{text-decoration:underline;text-decoration-color:var(--line-2)}
.tbl tr:hover td{background:var(--surface)}

/* Feste Route auf den Ortsseiten — ohne Zeichenanimation */
.map__svg .route.is-fix{opacity:1;stroke:var(--orange)}

/* Filterreihe — Textschalter mit Unterstreichung, keine Pillen */
.fltr{display:flex;flex-wrap:wrap;gap:var(--s5);border-bottom:1px solid var(--line);padding-bottom:var(--s3)}
.fltr button{background:transparent;border:0;cursor:pointer;padding:6px 0;min-height:44px;
  font-size:15px;font-weight:500;color:var(--ink-3);border-bottom:2px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.fltr button:hover{color:var(--ink)}
.fltr button[aria-pressed="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.quote[hidden]{display:none}

/* Formular — Beschriftungen immer sichtbar, Fehler unter dem Feld */
.form{display:grid;gap:var(--s6);max-width:640px}
.field{display:grid;gap:6px}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field textarea,.field select{
  font:inherit;font-size:16px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);padding:12px 14px;min-height:48px;width:100%}
.field textarea{min-height:140px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.field__hint{font-size:13px;color:var(--ink-3)}
.field__err{font-size:13px;color:var(--orange-dark);font-weight:600;min-height:0}
.field__err:empty{display:none}
.form__note{font-size:13px;color:var(--ink-3);max-width:60ch}

/* NAP-Zeilen */
.nap{display:grid;gap:0;border-top:2px solid var(--ink)}
.nap > div{display:grid;grid-template-columns:1fr;gap:var(--s2);padding:var(--s5) 0;border-bottom:1px solid var(--line)}
@media (min-width:560px){.nap > div{grid-template-columns:11rem 1fr;gap:var(--s5)}}
.nap .mono{color:var(--ink-3)}
.nap p{font-size:15.5px;line-height:1.55}

/* Übernommene Textblöcke aus dem alten Stand: die wenigen Hilfsklassen,
   die in Aufklapp-Inhalten mitgekommen sind, bekommen hier ihre Form. */
.faq__body .grid,.prose .grid{display:grid;gap:var(--s6)}
@media (min-width:760px){
  .faq__body .grid-2,.prose .grid-2{grid-template-columns:1fr 1fr;align-items:start}
  .faq__body .grid-3,.prose .grid-3{grid-template-columns:repeat(3,1fr)}
}
.faq__body .stack-4,.prose .stack-4{display:grid;gap:var(--s4)}
.faq__body .stack-5,.prose .stack-5{display:grid;gap:var(--s5)}
.faq__body p + p,.prose .stack-4 p + p{margin-top:0}
.faq__body .fig,.prose .fig{margin:0}
.faq__body .fig img,.prose .fig img{width:100%;height:auto;display:block}
.faq__body .fig-ph,.prose .fig-ph{position:relative;display:flex;align-items:flex-end;min-height:clamp(180px,22vw,260px);
  background:linear-gradient(145deg,var(--deep-2) 0%,var(--deep) 58%,#2C2718 100%)}
.faq__body .ph-body,.prose .ph-body{display:grid;gap:var(--s3);padding:var(--s5);width:100%}
.faq__body .ph-id,.prose .ph-id{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:rgba(245,239,221,.55)}
.faq__body .ph-alt,.prose .ph-alt{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;line-height:1.5;
  color:rgba(245,239,221,.42);max-width:44ch}
.faq__body .btn-text,.prose .btn-text{display:inline-flex;align-items:center;gap:7px;font-weight:600;
  text-decoration:none;color:var(--ink);min-height:44px}
.faq__body .btn-text svg,.prose .btn-text svg{width:15px;height:15px}
.faq__body .row,.prose .row{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.faq__body .label,.prose .label{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3)}

/* ====================================================== Rechtstext: Verzeichnis
   Steht als Leiste neben dem Satzspiegel und läuft mit. Am Telefon steht es
   über dem Text. Ziffer in Tinte, Titel gedämpft, Haarlinie an der Kante. */
.lgl{display:grid;gap:var(--s8)}
.lgl__rail{display:grid;gap:var(--s4);align-content:start}
.lgl__rail .mono{color:var(--ink-3)}
.lgl__rail ol{display:grid;border-left:1px solid var(--line-2)}
.lgl__rail a{display:flex;align-items:center;min-height:44px;padding:8px var(--s5);
  font-size:15px;line-height:1.35;color:var(--ink-2);text-decoration:none;
  box-shadow:inset 2px 0 0 transparent;
  transition:color .2s var(--ease),box-shadow .25s var(--ease)}
.lgl__rail a span{color:var(--ink);font-weight:600}
.lgl__rail a:hover{color:var(--ink);box-shadow:inset 2px 0 0 var(--ink)}
@media (min-width:1000px){
  .lgl{grid-template-columns:minmax(0,65ch) minmax(210px,1fr);gap:var(--s9);align-items:start}
  .lgl__rail{position:sticky;top:calc(var(--hd-h) + 28px)}
}
@media (max-width:999.98px){
  .lgl__rail{order:-1;padding-bottom:var(--s5);border-bottom:1px solid var(--line)}
}

/* ====================================================== Rechtstext
   Eine Spalte, 65 Zeichen Zeilenlänge, kein Bild, keine Kachel.
   Nur hier ist Fließtext das richtige Format. */
.legal{display:grid;gap:var(--s9);max-width:65ch}
.legal > section{display:grid;gap:var(--s4);padding-top:var(--s5);
  border-top:2px solid var(--ink);scroll-margin-top:calc(var(--hd-h) + 28px)}
.legal h2{font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:600;letter-spacing:-.018em;line-height:1.16}
.legal h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin-top:var(--s3)}
.legal p{color:var(--ink-2)}
.legal code{font-family:var(--mono);font-size:.9em;letter-spacing:.02em}
.legal ul,.legal ol{display:grid;gap:var(--s3)}
.legal li{position:relative;padding-left:var(--s6);color:var(--ink-2)}
.legal ul > li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--line-2)}
.legal ol.legal__num{counter-reset:abs}
.legal ol.legal__num > li{counter-increment:abs;padding-left:2.6rem}
.legal ol.legal__num > li::before{content:"(" counter(abs) ")";position:absolute;left:0;top:0;
  font-family:var(--mono);font-size:11.5px;line-height:1.85;color:var(--ink-3)}
.legal dl{display:grid;gap:0;margin:0;border-top:1px solid var(--line)}
.legal dl > div{display:grid;gap:var(--s2);padding:var(--s5) 0;border-bottom:1px solid var(--line)}
@media (min-width:640px){.legal dl > div{grid-template-columns:14rem 1fr;gap:var(--s5);align-items:baseline}}
.legal dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.5;color:var(--ink-3)}
.legal dd{margin:0;color:var(--ink-2)}
.legal__form{margin:0;display:grid;gap:var(--s4);background:var(--sunk);box-shadow:var(--edge);
  padding:clamp(20px,3vw,30px);font-size:15.5px}
.legal__form p{color:var(--ink-2)}
.legal__stand{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:baseline;
  padding-top:var(--s5);border-top:1px solid var(--line);color:var(--ink-3)}

/* Noch zu füllende Angabe — bleibt sichtbar, bis sie ersetzt ist */
mark.todo{background:var(--sunk);color:var(--ink-2);padding:1px 4px 1px 5px;margin-right:-2px;
  box-shadow:inset 0 -1px 0 var(--line-2)}

/* ====================================================== Prüfliste (intern)
   Zustand, Punkt und Fußnote in den Haarlinien-Zeilen der Abnahmeseite. */
.check__state{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.5;color:var(--ink-3)}
.check__state[data-state="offen"]{color:var(--ink);font-weight:500}
.check__state[data-state="offen"]::before{content:"";display:inline-block;width:7px;height:7px;
  margin-right:8px;vertical-align:.08em;background:var(--ink)}
.check__text{display:grid;gap:var(--s2);font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.check__note{font-size:13.5px;line-height:1.6;color:var(--ink-3);max-width:58ch}


/* ====================================================== Foto — echtes Bild als Fläche, randlos */
.foto{position:relative;display:flex;align-items:flex-end;overflow:hidden;background:var(--deep-2);
  min-height:clamp(240px,30vw,360px)}
.foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.foto::after{content:"";position:absolute;inset:0;z-index:1;background:var(--veil)}
.foto__cap{position:relative;z-index:2;padding:var(--s6);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.55;color:var(--on-deep);max-width:46ch}

/* ====================================================== Fälle — belegte Einsätze, Foto auf der Fläche */
.faelle{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
  border-block:1px solid var(--line)}
@media (min-width:900px){.faelle{grid-template-columns:repeat(3,1fr)}}
.fall{display:flex;flex-direction:column;background:var(--surface)}
.fall > img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.fall__txt{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s6) var(--s6) var(--s7)}
.fall__kenn{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.6;color:var(--ink-2);hyphens:none}
.fall p{font-size:15px;line-height:1.6;color:var(--ink-2);max-width:46ch}
.fall__rech{font-family:var(--mono);font-size:11px;letter-spacing:.01em;line-height:1.6;
  color:var(--ink-2);border-top:1px solid var(--line);padding-top:var(--s3)}

/* ====================================================== Zylinder — Bildfolge am Scrollweg
   Links ein klebender Rahmen, rechts fünf Marken. Die aktive Marke bestimmt das Bild;
   getauscht wird die Quelle, nicht überblendet. Ohne Skript steht das letzte Bild da. */
.cyl__grid{display:grid;grid-template-columns:1fr;gap:var(--s7)}
@media (min-width:900px){
  .cyl__grid{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(32px,5vw,64px);align-items:start}
}
.cyl__stage{display:flex;flex-direction:column;align-items:center;gap:var(--s5);
  background:var(--surface);padding:var(--s7) var(--s6)}
@media (min-width:900px){.cyl__stage{position:sticky;top:calc(var(--hd-h) + 28px)}}
.cyl__film{position:relative;width:100%;max-width:300px;aspect-ratio:440 / 979}
.cyl__film img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.cyl__film img.is-on{opacity:1}
.cyl__no{align-self:flex-start}
.cyl__marks{list-style:none;padding-left:0;margin-inline:calc(var(--s5) * -1)}
/* Auslauf, damit der klebende Rahmen auch an der letzten Marke noch steht */
@media (min-width:900px){.cyl__marks{padding-bottom:clamp(24px,12vh,140px)}}
.cyl__marks > *{padding:var(--s6) var(--s5);transition:background-color .55s var(--slow)}
@media (min-width:760px){.cyl__marks > *{grid-template-columns:auto 1fr;gap:var(--s5)}}
@media (min-width:900px){.js-cyl .cyl__marks > *{min-height:clamp(190px,28vh,290px);align-content:center}}
.js-cyl .cyl__marks > *.is-now{background:var(--sunk)}
.cyl__marks h4{margin-bottom:var(--s2)}
.cyl__marks p{color:var(--ink-2);font-size:15px;line-height:1.6;max-width:54ch}
@media (prefers-reduced-motion:reduce){
  .cyl__stage{position:static}
  .cyl__marks > *{min-height:0}
}


/* ====================================================== Erklärgrafik — eine Zeichnung, eine
   Strichstärke, echter Text im Markup. Orange trägt nur das Detail, um das es geht. */
.zg{display:grid;gap:var(--s6);margin:0;background:var(--surface);padding:var(--s7) var(--s6)}
.zg__fig{overflow-x:auto;overscroll-behavior-x:contain}
.zg__fig svg{display:block;width:100%;min-width:560px;height:auto}
.zg svg .l{fill:none;stroke:var(--ink);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.zg svg .f{fill:var(--ground);stroke:var(--ink);stroke-width:1.75;stroke-linejoin:round}
.zg svg .k{fill:var(--sunk);stroke:var(--ink);stroke-width:1.75;stroke-linejoin:round}
.zg svg .o{fill:none;stroke:var(--orange);stroke-width:1.75}
.zg svg .no{font-family:var(--mono);font-size:17px;letter-spacing:.04em;fill:var(--ink)}
.zg svg .tx{font-family:var(--mono);font-size:15px;letter-spacing:.1em;fill:var(--ink-2)}
.zg svg .ol{font-family:var(--mono);font-size:16px;letter-spacing:.14em;fill:var(--orange-dark)}
.zg__leg{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
@media (min-width:760px){.zg__leg{grid-template-columns:1fr 1fr;gap:var(--s3) var(--s7)}}
.zg__leg li{display:grid;grid-template-columns:2.4em 1fr;gap:var(--s3);align-items:baseline;
  font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.zg__leg li b{color:var(--ink);font-weight:600}
.zg__leg li.is-o .mono,.zg__leg li.is-o b{color:var(--orange-dark)}


/* ====================================================== Artikelbild — begrenzt, nicht riesig */
.artfig{margin:var(--s8) 0 0}
.artfig img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover}

/* Nachgeladene Bilder blenden ein wie die Schrift, statt fertig aufzuspringen */
.js-reveal img.imgfade{opacity:0;transition:opacity 1s var(--slow),transform 1.1s var(--slow)}
.js-reveal img.imgfade.is-da{opacity:1}
@media (prefers-reduced-motion:reduce){.js-reveal img.imgfade{opacity:1 !important;transition:none}}


/* ====================================================== Satzspiegel für lange Texte
   Ein Textfeld mittig statt links mit großer Lücke rechts. */
.wrap.col{max-width:calc(72ch + var(--gut) * 2)}
.wrap.col .answer{max-width:none}


/* ====================================================== Platzhalter, die Platz sparen
   Zwei fehlende Bilder stehen nebeneinander und im Breitformat, nicht als zwei Blöcke. */
.phpair{display:grid;gap:1px;background:var(--line);margin-top:var(--s8)}
@media (min-width:640px){.phpair{grid-template-columns:1fr 1fr}}
.phbox--sm{min-height:0;aspect-ratio:16 / 9}
.phbox--sm .phbox__txt{padding:var(--s5)}


/* ====================================================== Anschauung bricht aus der Textspalte
   Der Text bleibt auf Leseweite, Bild, Zeichnung und Platzhalter gehen auf die volle
   Satzbreite — links und rechts bis an den Rand des Satzspiegels. */
.wrap.col > .artfig,
.wrap.col > .zg,
.wrap.col > .phpair{
  position:relative;left:50%;translate:-50% 0;
  width:min(calc(var(--wrap) - var(--gut) * 2), calc(100vw - var(--gut) * 2));
}