/* ══════════════════════════════════════════════════════════════════
   MD CARE · Seitenstil (mdc-seite.css)

   Wortgleich aus dem <style>-Block der Startseite ausgelagert — kein
   Zeichen geaendert. Grund: Kopf, Fuss und Sektionen sollen auf
   /angebot.html und /buchen.html genauso aussehen wie auf der
   Startseite. Eine Kopie in jede neue Seite waere genau die Art
   Wartungsschuld, die spaeter niemand mehr auseinanderhaelt.

   Reihenfolge im <head>: nl-buchung.css (System) · mdc-seite.css
   (Seitenstil) · theme.css (Marke, gewinnt zuletzt).
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   MD CARE — Design-System v4 · "Werkstatt-Protokoll"
   · 12-Spalten-Raster, Sektionen belegen unterschiedliche Spans
   · Typografie skaliert über Container Queries, nie über vw
   · Kapitelköpfe laufen mit (sticky) — die Seite liest sich
     als durchnummeriertes Dokument, nicht als Kachelstapel
   ══════════════════════════════════════════════════════════ */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
html,body{overflow-x:clip}
body{min-width:320px;background:var(--s0);color:var(--text);
  font-family:var(--font-body),system-ui,sans-serif;font-weight:300;font-size:var(--t-md);
  line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

h1,h2,h3,h4{font-family:var(--font-headline);font-weight:800;letter-spacing:-0.032em;line-height:0.98;
  text-wrap:balance;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
p,li,dd,dt,span,a,summary,figcaption{overflow-wrap:break-word}
p{text-wrap:pretty}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--blue);color:var(--s0)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.tnum{font-variant-numeric:tabular-nums}

/* ── Raster ──────────────────────────────────────────────── */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);width:100%}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:2.5rem}
.sec{padding-block:clamp(1.9rem,3vw,2.9rem) var(--sec-y);position:relative}
.sec-alt{background:var(--s2)}

/* Sektions-Spans: jede Sektion belegt das Raster anders */
.col-head{grid-column:1 / 6}
.col-body{grid-column:6 / 13}
.col-head-w{grid-column:1 / 6}
.col-body-n{grid-column:7 / 13}
.col-full{grid-column:1 / -1}
.col-1-7{grid-column:1 / 8}
.col-8-13{grid-column:8 / 13}

.frame{position:fixed;inset:0;z-index:1;pointer-events:none;display:none}
.frame-in{position:relative;height:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.frame-in::before,.frame-in::after{content:'';position:absolute;top:0;bottom:0;width:1px;background:rgba(var(--text-rgb),0.045)}
.frame-in::before{left:var(--pad)}
.frame-in::after{right:var(--pad)}
@media(min-width:1200px){.frame{display:block}}

.grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0.032;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── Kapitelkopf ─────────────────────────────────────────── */
.hd{container-type:inline-size;min-width:0}
.chap{display:block;font-family:var(--font-headline);font-weight:800;font-size:2.35rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--blue-30);letter-spacing:-0.02em;margin-bottom:1.4rem}
.tag{display:inline-flex;align-items:center;gap:0.7rem;color:var(--blue);font-family:var(--mono);
  font-size:var(--t-xs);letter-spacing:0.26em;text-transform:uppercase;line-height:1.6}
.tag::before{content:'';width:26px;height:1px;background:var(--blue-50);flex:none}
.h-sec{font-size:clamp(1.85rem,10.2cqi,3.4rem);line-height:1.04;margin:1.1rem 0 1.4rem}
.h-sec em{font-style:italic;font-weight:700;color:var(--blue)}
.col-head-w .h-sec,.col-full .h-sec,.col-1-7 .h-sec{font-size:clamp(1.85rem,7.4cqi,3.6rem);max-width:20ch}
.tag + .h-sec{margin-top:1.15rem}
.h-sec + .lead{margin-top:0}
.lead{color:var(--muted);font-size:var(--t-lg);line-height:1.85;max-width:60ch;font-weight:300}
.lead + .lead{margin-top:1.05rem}

@media(min-width:1025px){
  .is-sticky{position:sticky;top:calc(var(--nav-h) + 2.75rem);align-self:start}
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;
  min-height:48px;padding:0.8rem 1.65rem;font-family:var(--font-headline);font-weight:700;
  font-size:var(--t-sm);border:1px solid var(--blue-30);color:var(--text);overflow:hidden;
  isolation:isolate;text-align:center;transition:color .35s ease,border-color .35s ease}
.btn::before{content:'';position:absolute;inset:0;background:var(--blue);z-index:-1;
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease)}
.btn:hover{color:var(--s0);border-color:var(--blue)}
.btn:hover::before{transform:scaleX(1)}
.btn-solid{background:var(--blue);color:var(--s0);border-color:var(--blue)}
.btn-solid::before{background:var(--text)}
.btn-solid:hover{color:var(--s0)}
.btn svg{flex:none}
.act{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:2rem}

/* ── NAV ─────────────────────────────────────────────────── */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(var(--ink-rgb),0.74);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
#nav.stuck{border-bottom-color:var(--line);background:rgba(var(--ink-rgb),0.95)}
#prog{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--blue);
  box-shadow:0 0 8px var(--blue-50)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--nav-h)}
.logo{font-family:var(--font-headline);font-weight:800;font-size:1.02rem;letter-spacing:-0.01em;white-space:nowrap}
.logo span{color:var(--blue)}
.nav-links{display:flex;align-items:center;gap:1.6rem}
.nav-links a{font-size:var(--t-sm);color:var(--muted);transition:color .25s;position:relative;
  padding:0.35rem 0;white-space:nowrap}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--blue);
  transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a.on{color:var(--text)}
.nav-links a.on::after{transform:scaleX(1);transform-origin:left;background:var(--blue-50)}
.nav-side{display:flex;align-items:center;gap:1rem}
.nav-tel{font-family:var(--mono);font-size:0.72rem;color:var(--blue);white-space:nowrap}
.nav-cta{min-height:40px;padding:0.5rem 1.1rem;font-size:0.73rem}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px}
.burger span{display:block;width:22px;height:1.5px;background:var(--text);transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
#mob{overflow:hidden;max-height:0;transition:max-height .45s var(--ease);
  background:var(--s2);border-bottom:1px solid var(--line)}
#mob.open{max-height:560px}
.mob-in{display:flex;flex-direction:column;padding:0.4rem 0 1.6rem}
.mob-in > a{padding:0.95rem 0;border-bottom:1px solid var(--hair);font-size:0.95rem;
  color:var(--muted);min-height:44px;display:flex;align-items:center}
.mob-in .btn{margin-top:1.1rem}

/* ══ HERO ══════════════════════════════════════════════════ */
#hero{position:relative;z-index:2;padding-top:calc(var(--nav-h) + 5rem)}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero-bg .rake{position:absolute;inset:0;
  background:repeating-linear-gradient(114deg,rgba(var(--akzent-rgb),0.05) 0 1px,transparent 1px 52px);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 78% 18%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 80% 70% at 78% 18%,#000 0%,transparent 72%)}
.hero-bg .sweep{position:absolute;top:-30%;right:-8%;width:52%;height:150%;
  background:linear-gradient(200deg,rgba(var(--akzent-rgb),0.09),transparent 58%);
  transform:skewX(-12deg);filter:blur(40px)}

.hero-g{position:relative;z-index:2;align-items:end;row-gap:3rem}
.hero-left{grid-column:1 / 8;position:relative;container-type:inline-size;padding-bottom:6rem;min-width:0}
.hero-right{grid-column:8 / 13;min-width:0}
.rail{position:absolute;left:-1.6rem;top:0.15rem;pointer-events:none}
.rail-txt{writing-mode:vertical-rl;font-family:var(--mono);font-size:0.575rem;letter-spacing:0.4em;
  text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:1rem;white-space:nowrap}
.rail-txt::after{content:'';width:1px;height:78px;background:linear-gradient(var(--blue-50),transparent)}

h1.hero-h1{font-size:clamp(2.2rem,10.4cqi,5.6rem);line-height:0.94;margin:1.3rem 0 0}
.ln{display:block;overflow:hidden;padding-bottom:0.07em}
.ln > i{display:block;font-style:normal;transform:translateY(105%);
  animation:rise 1s var(--ease) forwards}
.ln:nth-child(2) > i{animation-delay:.1s}
.ln:nth-child(3) > i{animation-delay:.2s}
.ln-alt > i{font-style:italic;font-weight:700;color:var(--blue);padding-left:clamp(0.9rem,7cqi,4.5rem)}
@keyframes rise{to{transform:translateY(0)}}

/* Geo-Signatur: verankert die Marke physisch, nicht dekorativ */
.geo-sig{display:flex;align-items:center;gap:0.9rem;margin-top:1.6rem;
  font-family:var(--mono);font-size:0.58rem;letter-spacing:0.19em;text-transform:uppercase;
  color:var(--dim);opacity:0;animation:fadeIn .9s var(--ease) .55s forwards}
.geo-sig::before{content:'';height:1px;width:clamp(28px,5cqi,64px);background:var(--blue-30);flex:none}
@keyframes fadeIn{to{opacity:1}}

.hero-sub{margin-top:1.7rem;max-width:48ch;color:var(--muted);font-size:var(--t-lg);line-height:1.85}
.hero-sub strong{color:var(--text);font-weight:500}
.facts{margin-top:2.05rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  column-gap:2.2rem;border-top:1px solid var(--hair);max-width:660px}
.facts li{display:grid;grid-template-columns:1.7rem 1fr;align-items:baseline;padding:0.72rem 0;
  border-bottom:1px solid var(--hair);font-size:var(--t-sm);color:var(--muted);min-width:0}
.facts b{font-family:var(--mono);font-size:var(--t-xs);color:var(--blue);font-weight:400}
.hero-geo{margin-top:1.45rem;font-family:var(--mono);font-size:0.615rem;letter-spacing:0.07em;
  color:var(--dim);line-height:2.05;text-transform:uppercase;max-width:62ch}
.hero-geo a{color:var(--blue);border-bottom:1px solid var(--blue-30)}
.hero-geo a:hover{border-color:var(--blue)}

.plate{position:relative;z-index:1;margin-bottom:-6rem;background:var(--s3);
  border:1px solid var(--line);aspect-ratio:8/7;overflow:hidden;min-width:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:0 40px 90px -40px rgba(var(--fg-rgb),0.92);
  clip-path:inset(0 0 100% 0);animation:unveil 1.15s var(--ease) .3s forwards}
@keyframes unveil{to{clip-path:inset(0 0 0 0)}}
.plate::before{content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(var(--akzent-rgb),0.07),transparent 45%),
             repeating-linear-gradient(114deg,rgba(var(--text-rgb),0.022) 0 1px,transparent 1px 26px)}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 50%;filter:contrast(1.06) saturate(0.92)}
.plate-cap{position:relative;z-index:2;padding:1.05rem 1.2rem;
  background:linear-gradient(transparent,rgba(var(--ink-rgb),0.94) 42%);
  display:flex;justify-content:space-between;align-items:flex-end;gap:0.9rem}
.plate-cap span{font-family:var(--mono);font-size:0.605rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--dim);min-width:0}
.plate-cap span b{display:block;color:var(--text);font-weight:400;margin-bottom:0.28rem}

/* ══ WASSER — Messinstrument (Signature) ═══════════════════
   Kalibrierte gemeinsame Achse: die Behauptung "gleiche Skala"
   wird nachprüfbar, statt nur behauptet zu werden. */
#wasser{position:relative;z-index:1;padding-block:clamp(2.4rem,3.6vw,3.6rem) var(--sec-y)}

.gauge{--tube:clamp(210px,26vw,320px);--div:4}
.gauge-plot{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(0.85rem,1.6vw,1.4rem);padding-right:clamp(3.2rem,6vw,5.25rem)}

/* Achse links — Beschriftung und Rasterlinien teilen dieselben Teiler */
.axis{height:var(--tube);display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-end;position:relative}
.axis span{font-family:var(--mono);font-size:0.575rem;letter-spacing:0.1em;color:var(--dim);
  line-height:1;display:flex;align-items:center;gap:0.42rem;transform:translateY(-0.32em)}
.axis span::after{content:'';width:7px;height:1px;background:rgba(var(--text-rgb),0.22)}
.axis-unit{position:absolute;bottom:-1.6rem;right:0;font-family:var(--mono);font-size:0.53rem;
  letter-spacing:0.19em;text-transform:uppercase;color:var(--dim)}

.tubes{display:flex;gap:clamp(1rem,2.6vw,2.4rem);align-items:flex-end}
.tcol{flex:1;min-width:0;max-width:132px;container-type:inline-size}
.tube-wrap{position:relative;height:var(--tube)}
.tube{position:absolute;inset:0;border:1px solid var(--line);border-top:0;
  background:rgba(var(--text-rgb),0.018);overflow:hidden}
.tube::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to top,rgba(var(--text-rgb),0.10) 0 1px,transparent 1px 25%)}
.fill{position:absolute;left:0;right:0;bottom:0;height:0}
.tcol-ref .fill{background:linear-gradient(rgba(var(--text-rgb),0.17),rgba(var(--text-rgb),0.05))}
.tcol-mdc .fill{background:linear-gradient(var(--blue),rgba(var(--akzent-rgb),0.4));
  box-shadow:0 -1px 20px rgba(var(--akzent-rgb),0.45)}

/* Der 5-%-Balken wäre sonst unlesbar — die Fahne macht ihn zum Beleg */
.flag{position:absolute;left:100%;bottom:5%;display:flex;align-items:center;
  pointer-events:none;opacity:0;transition:opacity .55s ease .9s;transform:translateY(50%)}
.is-in .flag{opacity:1}
.flag::before{content:'';width:clamp(1.5rem,3vw,2.5rem);height:1px;background:var(--blue-50)}
.flag b{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.11em;color:var(--blue);
  white-space:nowrap;padding-left:0.45rem;font-weight:400}

.tval{font-family:var(--font-headline);font-weight:800;font-size:clamp(1.15rem,13cqi,1.75rem);
  margin-top:0.9rem;line-height:1.1;letter-spacing:-0.035em;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.tcol-mdc .tval{color:var(--blue)}
.tcap{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--dim);margin-top:0.4rem;line-height:1.65}

.delta{display:flex;align-items:baseline;gap:0.85rem;flex-wrap:wrap;
  margin-top:2.6rem;padding-top:1.15rem;border-top:1px solid var(--hair)}
.delta b{font-family:var(--font-headline);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.15rem);
  color:var(--blue);letter-spacing:-0.035em;line-height:1;font-variant-numeric:tabular-nums}
.delta span{font-family:var(--mono);font-size:0.575rem;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--dim);line-height:1.8}

@media(max-width:520px){
  .gauge-plot{padding-right:0}
  .flag{left:auto;right:calc(100% + 0.4rem);flex-direction:row-reverse}
  .flag::before{width:1rem}
  .flag b{padding-left:0;padding-right:0.4rem}
  .tcol{max-width:none}
}

/* ══ SCHARNIERE ZWISCHEN DEN KAPITELN ══════════════════════
   Ersetzen die harten 1px-Kanten. Der Hintergrund läuft als
   Verlauf von der einen Sektionsfläche in die nächste, die
   Haarlinie fährt beim Scrollen von links ein. */
.seam{position:relative;background:linear-gradient(to bottom,var(--from),var(--to));
  padding-block:clamp(3.2rem,6vw,5.5rem) clamp(1.4rem,2.4vw,2.2rem)}
/* Aufblenden zur getönten Sektion darunter */
.seam::after{content:'';position:absolute;inset:0;pointer-events:none}
.seam-glow::after{background:linear-gradient(to bottom,transparent,rgba(var(--akzent-rgb),0.045))}
.seam-glow-strong::after{background:linear-gradient(to bottom,transparent,rgba(var(--akzent-rgb),0.075))}
.seam-in{position:relative;z-index:1}
.seam-in{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:clamp(44px,7vw,116px) minmax(0,1fr);
  column-gap:clamp(0.85rem,1.9vw,1.5rem);align-items:center}
.seam-rule{height:1px;background:linear-gradient(to right,transparent,var(--blue-50));
  transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.seam.is-in .seam-rule{transform:scaleX(1)}
.seam-txt{font-family:var(--mono);font-size:0.625rem;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--dim);line-height:1.95;max-width:56ch;
  opacity:0;transform:translateX(-10px);
  transition:opacity .85s var(--ease) .18s,transform .85s var(--ease) .18s}
.seam.is-in .seam-txt{opacity:1;transform:none}
.seam-txt b{color:var(--blue);font-weight:400;margin-right:0.6rem}
.seam-txt em{font-style:normal;color:var(--text)}

/* ── Flächen-Rhythmus ────────────────────────────────────
   Kapitel wechseln streng zwischen ruhig und blau getönt.
   Die zwei Handlungszonen tragen dieselbe Tönung, nur stärker —
   der Wechsel bleibt Rhythmus, das Blau behält Bedeutung. */

#hero{background:var(--s0)}
/* ruhig */
#wasser,#leistungen,#ergebnis,#orte,#faq{background:var(--s1)}
/* getönt */
#einsatzort,#ablauf,#geschaeftskunden,#bereiche{background:var(--tint),var(--s2)}
/* Handlungszonen */
#buchen,#kontakt{background:var(--tint-strong),var(--s3)}
#buchen .chap,#kontakt .chap{color:var(--blue);-webkit-text-stroke:0}
/* Getönte Kapitel: Kopfziffer und Kapitelmarke ziehen mit */
#einsatzort .chap,#ablauf .chap,#geschaeftskunden .chap,#bereiche .chap{
  -webkit-text-stroke-color:var(--blue-50)}

@media(max-width:560px){
  .seam-in{grid-template-columns:2rem minmax(0,1fr);column-gap:0.75rem}
  .seam-txt{font-size:0.585rem;letter-spacing:0.12em}
}
/* ══ EINSATZORT — Schnitt A–A, reines CSS ══════════════════
   Keine Icons, keine Tabelle. Bauteile entstehen aus Gradients,
   clip-path und rotierten 1px-Balken (Architektenschrägen). */
#einsatzort{position:relative;padding-block:clamp(1.9rem,3vw,2.9rem) clamp(4.5rem,8.5vw,8rem)}
.eo-grid{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  column-gap:var(--gutter);row-gap:2.75rem;align-items:end}
.eo-head{min-width:0;position:relative;padding-bottom:0.5rem}
.eo-head .h-sec{max-width:17ch}

/* Leistungsverzeichnis mit Führungspunkten */
.lv{margin-top:2.5rem}
.lv-cap{display:flex;align-items:baseline;gap:0.75rem;font-family:var(--mono);font-size:0.575rem;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--dim);margin-bottom:0.35rem}
.lv-cap b{color:var(--blue);font-weight:400}
.lv + .lv{margin-top:2rem}
.lv li{display:grid;grid-template-columns:auto minmax(1.5rem,1fr) auto;align-items:baseline;
  gap:0.55rem;padding-block:0.66rem;border-bottom:1px solid var(--hair);cursor:default;
  transition:color .3s ease,padding-left .35s var(--ease)}
.lv li:first-of-type{border-top:1px solid var(--hair)}
.lv li:hover{padding-left:0.45rem}
.lv-pos{font-size:0.855rem;color:var(--muted);transition:color .3s ease}
.lv li:hover .lv-pos{color:var(--text)}
.lv-dots{border-bottom:1px dotted rgba(var(--text-rgb),0.20);transform:translateY(-0.28em);
  transition:border-color .3s ease}
.lv li:hover .lv-dots{border-bottom-color:var(--blue-50)}
.lv-val{font-family:var(--mono);font-size:0.655rem;letter-spacing:0.09em;color:var(--blue);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.lv-out .lv-pos{position:relative;display:inline-block}
.lv-out .lv-pos::after{content:'';position:absolute;left:0;top:52%;height:1px;width:100%;
  background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease)}
.lv-out li:hover .lv-pos::after{transform:scaleX(1)}
.lv-out .lv-val{color:var(--dim)}
.lv-out li:hover .lv-val{color:var(--blue)}
.lv-note{margin-top:0.9rem;font-family:var(--mono);font-size:0.575rem;letter-spacing:0.11em;
  text-transform:uppercase;color:var(--dim);line-height:1.95}

/* Der Schnitt */
.plan-wrap{min-width:0;position:relative}
.plan{position:relative;height:clamp(320px,40vw,480px);background:var(--s1);
  border:1px solid var(--line);overflow:hidden}
.plan-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(var(--text-rgb),0.035) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(var(--text-rgb),0.035) 1px,transparent 1px);
  background-size:34px 34px}
.plan-id{position:absolute;top:0;left:0;z-index:6;display:flex;
  font-family:var(--mono);font-size:0.545rem;letter-spacing:0.17em;text-transform:uppercase}
.plan-id span{padding:0.45rem 0.75rem;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);color:var(--dim);background:rgba(var(--ink-rgb),0.55)}
.plan-id span:first-child{color:var(--blue)}
.plan-scale{position:absolute;right:0.85rem;bottom:0.7rem;z-index:6;font-family:var(--mono);
  font-size:0.53rem;letter-spacing:0.17em;text-transform:uppercase;color:var(--dim)}
.soil{position:absolute;left:0;right:0;top:0;height:23%;
  background:repeating-linear-gradient(45deg,rgba(var(--text-rgb),0.075) 0 1px,transparent 1px 7px)}
.soil::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--s3);
  border-top:1px solid rgba(var(--text-rgb),0.22);border-bottom:1px solid rgba(var(--text-rgb),0.22)}
.lvl{position:absolute;font-family:var(--mono);font-size:0.545rem;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--dim);z-index:5}
.lvl-eg{top:0.6rem;right:0.9rem}
.lvl-ug{top:26%;left:0.9rem;color:rgba(var(--text-rgb),0.5)}
.slab{position:absolute;left:0;right:0;bottom:0;height:9%;
  background:repeating-linear-gradient(45deg,rgba(var(--text-rgb),0.06) 0 1px,transparent 1px 7px);
  border-top:1px solid rgba(var(--text-rgb),0.22)}
.bay{position:absolute;left:12%;right:26%;top:36%;bottom:15%;transition:background .45s ease}
.bay::before,.bay::after{content:'';position:absolute;width:22px;height:22px;
  border-color:var(--blue-50);border-style:solid;transition:border-color .4s ease}
.bay::before{top:0;left:0;border-width:1px 0 0 1px}
.bay::after{bottom:0;right:0;border-width:0 1px 1px 0}
.bay-tr,.bay-bl{position:absolute;width:22px;height:22px;border-color:var(--blue-50);
  border-style:solid;transition:border-color .4s ease}
.bay-tr{top:0;right:0;border-width:1px 1px 0 0}
.bay-bl{bottom:0;left:0;border-width:0 0 1px 1px}
.car{position:absolute;left:8%;right:8%;top:22%;bottom:22%;
  --clip:polygon(11% 0,89% 0,100% 17%,100% 83%,89% 100%,11% 100%,0 83%,0 17%);
  clip-path:var(--clip);background:var(--blue-50);transition:background .4s ease}
.car::after{content:'';position:absolute;inset:1px;clip-path:var(--clip);background:var(--s1)}
.car-axis{position:absolute;left:-6%;right:-6%;top:50%;height:1px;
  background:repeating-linear-gradient(to right,rgba(var(--text-rgb),0.34) 0 9px,transparent 9px 13px,
    rgba(var(--text-rgb),0.34) 13px 16px,transparent 16px 20px)}
.dim{position:absolute;font-family:var(--mono);font-size:0.545rem;letter-spacing:0.12em;
  color:var(--dim);font-variant-numeric:tabular-nums;transition:color .4s ease}
.dim-line{position:absolute;background:rgba(var(--text-rgb),0.26);transition:background .4s ease}
.dim-w{left:12%;right:26%;bottom:9.5%;height:1px}
.dim-w::before,.dim-w::after{content:'';position:absolute;top:-4px;width:1px;height:9px;
  background:inherit;transform:rotate(45deg)}
.dim-w::before{left:0}.dim-w::after{right:0}
.dim-w-t{left:12%;right:26%;bottom:11.5%;text-align:center}
.dim-h{left:8.5%;top:36%;bottom:15%;width:1px}
.dim-h::before,.dim-h::after{content:'';position:absolute;left:-4px;width:9px;height:1px;
  background:inherit;transform:rotate(45deg)}
.dim-h::before{top:0}.dim-h::after{bottom:0}
.dim-h-t{left:1.2%;top:52%;writing-mode:vertical-rl;transform:rotate(180deg)}
.socket{position:absolute;right:9%;top:44%;width:13px;height:13px;border:1px solid var(--blue);
  background:var(--s1);z-index:4;transition:box-shadow .4s ease}
.socket::after{content:'';position:absolute;inset:3px;border-left:1px solid var(--blue);
  border-right:1px solid var(--blue)}
.socket-t{position:absolute;right:9%;top:34%;font-family:var(--mono);font-size:0.545rem;
  letter-spacing:0.15em;color:var(--blue);white-space:nowrap;transform:translateX(30%)}
.reach{position:absolute;right:9.5%;top:44.5%;width:46%;height:46%;border:1px dashed var(--blue-30);
  border-radius:50%;transform:translate(50%,-50%);opacity:0.75;
  transition:border-color .45s ease,opacity .45s ease}
.reach-t{position:absolute;right:30%;top:70%;font-family:var(--mono);font-size:0.545rem;
  letter-spacing:0.15em;color:var(--dim);white-space:nowrap;transition:color .4s ease}
.void{position:absolute;left:12%;top:26%;display:flex;align-items:center;gap:0.5rem;
  font-family:var(--mono);font-size:0.545rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--dim)}
.void::before{content:'';width:11px;height:11px;border:1px solid rgba(var(--text-rgb),0.28);
  background:linear-gradient(45deg,transparent 44%,rgba(var(--text-rgb),0.45) 44% 56%,transparent 56%),
             linear-gradient(-45deg,transparent 44%,rgba(var(--text-rgb),0.45) 44% 56%,transparent 56%)}

/* Verzeichnis ↔ Zeichnung, ohne Skript */
.eo-grid:has(.hl-bay:hover) .bay{background:rgba(var(--akzent-rgb),0.055)}
.eo-grid:has(.hl-bay:hover) .bay::before,
.eo-grid:has(.hl-bay:hover) .bay::after,
.eo-grid:has(.hl-bay:hover) .bay-tr,
.eo-grid:has(.hl-bay:hover) .bay-bl{border-color:var(--blue)}
.eo-grid:has(.hl-bay:hover) .car{background:var(--blue)}
.eo-grid:has(.hl-bay:hover) .dim-w-t{color:var(--blue)}
.eo-grid:has(.hl-bay:hover) .dim-w{background:var(--blue)}
.eo-grid:has(.hl-height:hover) .dim-h{background:var(--blue)}
.eo-grid:has(.hl-height:hover) .dim-h-t{color:var(--blue)}
.eo-grid:has(.hl-height:hover) .soil::after{border-color:var(--blue)}
.eo-grid:has(.hl-power:hover) .reach{border-color:var(--blue-50);opacity:1}
.eo-grid:has(.hl-power:hover) .reach-t{color:var(--blue)}
.eo-grid:has(.hl-power:hover) .socket{box-shadow:0 0 0 4px rgba(var(--akzent-rgb),0.16)}

/* Fusszeile: Referenzen links, Handlungsschritt rechts */
.eo-foot{grid-column:1 / -1;margin-top:0.5rem;padding-top:1.2rem;border-top:1px solid var(--hair);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem var(--gutter);align-items:start}
.eo-refs{font-family:var(--mono);font-size:0.575rem;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--dim);display:flex;flex-wrap:wrap;align-items:baseline;gap:0.5rem 1.4rem}
.eo-refs b{color:var(--blue);font-weight:400}
.eo-refs ul{display:flex;flex-wrap:wrap;gap:0.5rem 1.4rem}
.eo-refs li{position:relative;transition:color .28s ease}
.eo-refs li:hover{color:var(--text)}
.eo-refs ul li + li::before{content:'';position:absolute;left:-0.75rem;top:0.42em;width:3px;height:3px;
  background:var(--blue-30)}
.eo-cta{display:block;border:1px solid var(--line);padding:0.95rem 1.25rem;min-width:0;
  transition:border-color .35s ease,background .35s ease}
.eo-cta:hover{border-color:var(--blue-30);background:rgba(var(--akzent-rgb),0.04)}
.eo-cta-k{display:block;font-family:var(--mono);font-size:0.555rem;letter-spacing:0.17em;
  text-transform:uppercase;color:var(--dim);margin-bottom:0.4rem}
.eo-cta-v{display:flex;align-items:center;gap:0.6rem;font-family:var(--font-headline);font-weight:700;
  font-size:0.86rem;color:var(--text)}
.eo-cta-v::after{content:'';width:16px;height:1px;background:var(--blue);
  transition:width .35s var(--ease)}
.eo-cta:hover .eo-cta-v::after{width:34px}

@media(min-width:1025px){
  .plan{margin-right:calc(var(--bleed) * -1);border-right:0}
}
@media(max-width:1024px){
  .eo-grid{grid-template-columns:1fr}
  .plan{height:clamp(300px,52vw,420px)}
}
@media(max-width:768px){
  .eo-foot{grid-template-columns:1fr}
}
@media(max-width:560px){
  .plan{height:290px}
  .bay,.dim-w,.dim-w-t{right:20%}
  .reach{width:58%;height:58%}
  .lvl-ug{top:27%}
  .void{font-size:0.5rem}
  .lv li{grid-template-columns:1fr auto;gap:0.35rem 0.8rem}
  .lv-dots{display:none}
}

/* ══ LEISTUNGEN — Spotlight-Grid ═══════════════════════════ */
.srv{display:grid;grid-template-columns:1.34fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.srv-item{position:relative;isolation:isolate;background:var(--s0);
  padding:clamp(1.6rem,2.4vw,2.35rem);display:flex;flex-direction:column;
  container-type:inline-size;min-width:0;transition:background .4s ease}
.srv-item::after{content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),
    rgba(var(--akzent-rgb),0.11),transparent 62%);
  transition:opacity .45s ease}
.srv:hover .srv-item::after{opacity:1}
.srv-item:hover{background:var(--s3)}
.srv-lg{grid-row:span 2}
.srv-time{font-family:var(--mono);font-size:0.615rem;letter-spacing:0.18em;color:var(--blue-50);transition:color .35s}
.srv-item:hover .srv-time{color:var(--blue)}
.srv-item h3{font-size:clamp(1.08rem,7.5cqi,1.48rem);margin:0.95rem 0 0.72rem}
.srv-lg h3{font-size:clamp(1.4rem,10cqi,2.2rem)}
.srv-item p{color:var(--muted);font-size:var(--t-sm);line-height:1.82;flex:1}
.srv-badge{display:inline-block;align-self:flex-start;margin-top:0.9rem;font-family:var(--mono);
  font-size:var(--t-xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--blue);
  border:1px solid var(--blue-20);padding:0.34rem 0.68rem}
.srv-foot{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--hair)}
.srv-price{font-family:var(--font-headline);font-weight:700;font-size:1.02rem}
.srv-more{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--blue);display:inline-flex;align-items:center;gap:0.45rem;transition:gap .3s;white-space:nowrap}
.srv-item:hover .srv-more{gap:0.85rem}

/* ══ KONFIGURATOR ══════════════════════════════════════════ */
.cfg-steps{grid-column:1 / 8;min-width:0}
.cfg-sum{grid-column:8 / 13;min-width:0}
.cfg-step{border-top:1px solid var(--line);padding-block:2.15rem}
.cfg-step:first-child{border-top:0;padding-top:0}
.cfg-hd{display:flex;align-items:baseline;gap:0.85rem;flex-wrap:wrap;margin-bottom:1.35rem}
.cfg-hd b{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.16em;color:var(--blue-50);font-weight:400}
.cfg-hd h3{font-size:1rem;letter-spacing:-0.02em}
.cfg-hd small{margin-left:auto;font-family:var(--mono);font-size:0.555rem;letter-spacing:0.11em;
  text-transform:uppercase;color:var(--dim)}
.opt-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:0.45rem}
.opt{position:relative;display:flex;flex-direction:column;justify-content:center;gap:0.28rem;
  min-height:62px;padding:0.85rem 1rem;border:1px solid var(--hair);background:var(--s1);
  text-align:left;min-width:0;transition:border-color .28s,background .28s}
.opt:hover{border-color:var(--blue-30)}
.opt[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-10)}
.opt[aria-pressed="true"]::after{content:'';position:absolute;top:-1px;left:-1px;width:3px;
  height:calc(100% + 2px);background:var(--blue)}
.opt-n{display:block;font-size:var(--t-sm);color:var(--text);font-weight:400;line-height:1.4}
.opt-m{display:block;font-family:var(--mono);font-size:0.555rem;letter-spacing:0.08em;color:var(--dim);
  text-transform:uppercase;line-height:1.6}
.opt-p{display:block;font-family:var(--mono);font-size:0.615rem;color:var(--blue);margin-top:0.25rem}

/* ── Zonen-Auswahl: Region zuerst, Orte als Beleg ─────────── */
.opt-row-zone{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.opt-zone{justify-content:flex-start;align-items:stretch;gap:0;padding:1rem 1.1rem 0.95rem}
.z-no{font-family:var(--mono);font-size:0.545rem;letter-spacing:0.19em;text-transform:uppercase;
  color:var(--blue-50);margin-bottom:0.42rem;transition:color .28s ease}
.opt-zone[aria-pressed="true"] .z-no{color:var(--blue)}
.opt-zone .opt-n{font-family:var(--font-headline);font-weight:700;font-size:0.925rem;
  line-height:1.3;letter-spacing:-0.015em;margin-bottom:0.45rem}
.z-orte{font-size:0.715rem;color:var(--dim);line-height:1.72;margin-bottom:0.8rem;
  padding-bottom:0.7rem;border-bottom:1px solid var(--hair);flex:1}
.opt-zone .opt-p{margin-top:0;font-size:0.66rem;letter-spacing:0.1em}
.cfg-note{margin-top:0.9rem;font-family:var(--mono);font-size:0.565rem;letter-spacing:0.11em;
  text-transform:uppercase;color:var(--dim);line-height:1.95}
.cfg-note b{color:var(--blue);font-weight:400}
@media(max-width:560px){
  .opt-row-zone{grid-template-columns:1fr}
  .z-orte{margin-bottom:0.65rem;padding-bottom:0.6rem}
}
.opt-list{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.opt-wide{position:relative;background:var(--s1);display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:0.9rem;align-items:center;min-height:64px;padding:1rem 1.1rem;text-align:left;transition:background .28s}
.opt-wide:hover{background:var(--s3)}
.opt-wide[aria-pressed="true"]{background:var(--blue-10);box-shadow:inset 3px 0 0 var(--blue)}
.opt-wide > span{min-width:0}
.opt-wide .opt-m{margin-top:0.34rem;text-transform:none;letter-spacing:0.01em;line-height:1.7;
  font-family:var(--font-body);font-size:0.755rem;color:var(--dim)}
.opt-wide .opt-p{font-size:0.72rem;white-space:nowrap;margin-top:0}

.sum{border:1px solid var(--line);background:var(--s1);min-width:0}
.sum-hd{padding:1rem 1.2rem;border-bottom:1px solid var(--line);font-family:var(--mono);
  font-size:0.575rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--dim)}
.sum-body{padding:1.2rem;max-height:270px;overflow-y:auto;overscroll-behavior:contain}
.sum-body li{display:flex;justify-content:space-between;gap:0.9rem;font-size:0.785rem;
  color:var(--muted);padding:0.52rem 0;line-height:1.55;border-bottom:1px solid var(--hair)}
.sum-body li:last-child{border-bottom:0}
.sum-body li span:first-child{min-width:0}
.sum-body li span:last-child{font-family:var(--mono);font-size:0.705rem;color:var(--text);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.sum-empty{font-size:0.785rem;color:var(--dim);line-height:1.8}
.sum-tot{padding:1.2rem;border-top:1px solid var(--line);background:var(--s3)}
.sum-tot dt{font-family:var(--mono);font-size:0.565rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--dim)}
.sum-price{font-family:var(--font-headline);font-weight:800;font-size:clamp(1.95rem,4.2vw,2.7rem);
  color:var(--blue);line-height:1.08;margin:0.55rem 0 0.5rem;font-variant-numeric:tabular-nums;letter-spacing:-0.03em}
.sum-dur{font-family:var(--mono);font-size:0.585rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--dim);line-height:1.7}
.sum-tot .btn{width:100%;margin-top:1.15rem}
.sum-fine{padding:0.9rem 1.2rem;border-top:1px solid var(--hair);font-family:var(--mono);
  font-size:0.535rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--dim);line-height:1.95}

/* ══ ERGEBNIS ══════════════════════════════════════════════ */
.ba-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1.4rem}
.ba{border:1px solid var(--line);background:var(--s3);overflow:hidden;min-width:0;transition:border-color .35s}
.ba:hover{border-color:var(--blue-30)}
.ba-view{position:relative;aspect-ratio:4/3;overflow:hidden;cursor:ew-resize;touch-action:pan-y;background:var(--s2)}
.ba-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.ba-top{clip-path:inset(0 50% 0 0)}
.ba-bar{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--blue);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);
  border:1px solid var(--blue);background:rgba(var(--ink-rgb),0.85);border-radius:50%;pointer-events:none;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:0.62rem;color:var(--blue)}
.ba-lab{position:absolute;bottom:0.65rem;font-family:var(--mono);font-size:0.55rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--text);background:rgba(var(--ink-rgb),0.72);padding:0.24rem 0.52rem;pointer-events:none}
.ba-lab.l{left:0.65rem}.ba-lab.r{right:0.65rem}
.ba-cap{padding:1.05rem 1.2rem 1.3rem}
.ba-cap strong{font-family:var(--font-headline);font-weight:700;font-size:0.95rem;display:block;margin-bottom:0.28rem}
.ba-cap span{font-size:var(--t-sm);color:var(--muted)}

/* ══ ABLAUF ════════════════════════════════════════════════ */
.steps{border-top:1px solid var(--hair)}
.step{display:grid;grid-template-columns:clamp(58px,6vw,92px) minmax(0,0.9fr) minmax(0,1.35fr);
  gap:var(--gutter);padding-block:1.8rem;border-bottom:1px solid var(--hair);align-items:baseline;
  transition:background .35s ease,padding-left .35s ease}
.step:hover{background:rgba(var(--akzent-rgb),0.026);padding-left:0.85rem}
.step-n{font-family:var(--font-headline);font-weight:800;font-size:clamp(1.6rem,3vw,2.6rem);
  color:transparent;-webkit-text-stroke:1px var(--blue-30);line-height:0.9;letter-spacing:-0.04em;
  transition:-webkit-text-stroke-color .35s}
.step:hover .step-n{-webkit-text-stroke-color:var(--blue)}
.step h3{font-size:clamp(1rem,1.6vw,1.2rem)}
.step p{color:var(--muted);font-size:var(--t-sm);line-height:1.85}

/* ══ ORTE ══════════════════════════════════════════════════ */
.orte{columns:3;column-gap:var(--gutter);border-top:1px solid var(--hair)}
.orte li{break-inside:avoid;display:flex;align-items:baseline;justify-content:space-between;gap:0.9rem;
  padding-block:0.7rem;border-bottom:1px solid var(--hair);font-size:var(--t-md);transition:color .25s}
.orte li:hover{color:var(--blue)}
.orte li em{font-family:var(--mono);font-size:0.55rem;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--dim);font-style:normal;white-space:nowrap;flex:none}
.orte-note{margin-top:1.6rem;font-family:var(--mono);font-size:0.585rem;letter-spacing:0.09em;
  text-transform:uppercase;color:var(--dim);line-height:1.9}
.orte-note a{color:var(--blue);border-bottom:1px solid var(--blue-30)}

/* ══ B2B ═══════════════════════════════════════════════════ */
.b2b{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.b2b-item{background:var(--s2);padding:1.65rem;min-width:0;transition:background .35s}
.b2b-item:hover{background:var(--s3)}
.b2b-item h3{font-size:1rem;margin-bottom:0.62rem}
.b2b-item p{font-size:var(--t-sm);color:var(--muted);line-height:1.82}
.branch-h{font-size:1.06rem;margin-bottom:1.25rem}
.branch li{display:grid;grid-template-columns:minmax(0,11ch) minmax(0,1fr);gap:1rem;
  padding-block:0.8rem;border-bottom:1px solid var(--hair);font-size:var(--t-sm);color:var(--muted)}
.branch li b{font-family:var(--font-headline);font-weight:700;color:var(--text);font-size:var(--t-sm)}
.b2b-card{border:1px solid var(--blue-20);background:var(--s1);padding:1.65rem;min-width:0}
.b2b-card h3{font-size:1.08rem;margin-bottom:0.95rem}
.b2b-card ul{margin-bottom:1.35rem}
.b2b-card li{font-size:0.815rem;color:var(--muted);padding-block:0.45rem;padding-left:1.25rem;position:relative}
.b2b-card li::before{content:'';position:absolute;left:0;top:1rem;width:6px;height:1px;background:var(--blue)}

/* ══ FAQ ═══════════════════════════════════════════════════ */
.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{display:grid;grid-template-columns:3.2rem minmax(0,1fr) 1.1rem;gap:0.75rem;
  align-items:baseline;padding-block:1.15rem;cursor:pointer;list-style:none;min-height:44px;transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:''}
.faq summary:hover{color:var(--blue)}
.faq summary b{font-family:var(--mono);font-size:0.555rem;letter-spacing:0.11em;color:var(--blue-50);font-weight:400}
.faq summary h3{font-size:clamp(0.925rem,1.5vw,1.03rem);font-weight:700;letter-spacing:-0.014em;line-height:1.5}
.faq-ic{position:relative;width:11px;height:11px;justify-self:end;align-self:center;flex:none}
.faq-ic::before,.faq-ic::after{content:'';position:absolute;background:var(--blue);transition:transform .3s}
.faq-ic::before{top:5px;left:0;width:11px;height:1px}
.faq-ic::after{left:5px;top:0;width:1px;height:11px}
.faq details[open] .faq-ic::after{transform:scaleY(0)}
.faq-a{padding:0 1.1rem 1.4rem calc(3.2rem + 0.75rem);font-size:var(--t-sm);color:var(--muted);
  line-height:1.9;max-width:80ch}

/* ══ BEREICHE ══════════════════════════════════════════════ */
.cl{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.cl-card{background:var(--s0);padding:1.65rem;display:block;min-width:0;transition:background .35s}
.cl-card:hover{background:var(--s3)}
.cl-lab{font-family:var(--mono);font-size:0.555rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--blue)}
.cl-card h3{font-size:1.04rem;margin:0.7rem 0 0.45rem;line-height:1.32}
.cl-card p{font-size:var(--t-sm);color:var(--muted);line-height:1.72}

/* ══ KONTAKT ═══════════════════════════════════════════════ */
#kontakt{overflow:hidden}
#kontakt .g{align-items:end}
.cta-side{border-left:1px solid var(--line);padding-left:var(--gutter);min-width:0}
.cta-side dl{display:grid;gap:1rem}
.cta-side dt{font-family:var(--mono);font-size:0.565rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--dim)}
.cta-side dd{font-size:0.9rem;line-height:1.7}
.cta-side dd a:hover{color:var(--blue)}

/* ══ FOOTER ════════════════════════════════════════════════ */
footer{padding:3.8rem 0 2.1rem;border-top:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1.15fr;gap:var(--gutter)}
.f-grid h4{font-family:var(--mono);font-size:0.575rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--dim);font-weight:400;margin-bottom:1rem}
.f-grid li{margin-bottom:0.55rem}
.f-grid a{font-size:var(--t-sm);color:var(--muted);transition:color .25s}
.f-grid a:hover{color:var(--blue)}
.f-brand p{font-size:var(--t-sm);color:var(--muted);max-width:36ch;margin:0.85rem 0 1.3rem}
.f-soc{display:flex;gap:0.55rem;flex-wrap:wrap}
.f-soc a{width:42px;height:42px;border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;transition:border-color .3s,background .3s}
.f-soc a:hover{border-color:var(--blue);background:var(--blue-10)}
.f-soc svg{width:15px;height:15px;fill:currentColor}
.f-bot{margin-top:2.8rem;padding-top:1.35rem;border-top:1px solid var(--hair);font-family:var(--mono);
  font-size:0.575rem;letter-spacing:0.09em;color:var(--dim);text-transform:uppercase;line-height:2}

/* ── Reveal ──────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}
.rv-d2{transition-delay:.16s}

/* ══ BREAKPOINTS ═══════════════════════════════════════════ */
@media(max-width:1180px){
  .nav-links{gap:1.1rem}
  .nav-links a{font-size:0.775rem}
  .nav-tel{display:none}
  .col-head{grid-column:1 / 6}
  .col-body{grid-column:6 / 13}
}
@media(max-width:1024px){
  .nav-links{display:none}
  .burger{display:flex}
  .g > *{grid-column:1 / -1 !important}
  .g{row-gap:2rem}
  .hero-left{padding-bottom:0}
  .rail{display:none}
  .plate{aspect-ratio:8/7;margin-bottom:0;max-width:660px}
  .srv{grid-template-columns:1fr}
  .srv-lg{grid-row:auto}
  .srv-item::after{display:none}
  .cta-side{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:1.7rem}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-brand{grid-column:1 / -1}
  .chap{font-size:1.9rem;margin-bottom:1rem}
}
@media(max-width:768px){
  #hero{padding-top:calc(var(--nav-h) + 3rem)}
  .step{grid-template-columns:3.1rem minmax(0,1fr);row-gap:0.45rem;gap:1rem}
  .step p{grid-column:2}
  .orte{columns:2}
  .f-grid{grid-template-columns:1fr}
  .f-brand{grid-column:auto}
  .faq summary{grid-template-columns:2.5rem minmax(0,1fr) 1rem;gap:0.6rem}
  .faq-a{padding-left:calc(2.5rem + 0.6rem);padding-right:0}
  .branch li{grid-template-columns:1fr;gap:0.2rem}
}
@media(max-width:520px){
  .orte{columns:1}
  .act{flex-direction:column;align-items:stretch}
  .act .btn{width:100%}
  .facts{grid-template-columns:1fr}
  .plate{aspect-ratio:8/7}
  .opt-row{grid-template-columns:1fr}
  .opt-wide{grid-template-columns:1fr;align-items:start;row-gap:0.4rem}
  .opt-wide .opt-p{justify-self:start}
  .tubes{gap:0.85rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
  .ln > i{transform:none}
  .rv{opacity:1;transform:none}
  .plate{clip-path:none}
  .geo-sig{opacity:1}
}

/* ══════════════════════════════════════════════════════════
   BEWERTUNGEN — Slider ohne Bibliothek (CSS scroll-snap)
   Keine Sterne-Icons: die Bewertung ist eine Messgrösse und
   wird als Zahl plus Segmentbalken ausgegeben.
   ══════════════════════════════════════════════════════════ */
.score{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--hair)}
.score-num{font-family:var(--font-headline);font-weight:800;font-size:clamp(2.2rem,4vw,3rem);
  line-height:1;letter-spacing:-0.04em;color:var(--blue);font-variant-numeric:tabular-nums}
.score-num span{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.12em;color:var(--dim);
  margin-left:0.6rem;font-weight:400}
.score-bar{display:flex;gap:5px;margin:0.85rem 0 0.7rem}
.score-bar i{width:26px;height:4px;background:rgba(var(--text-rgb),0.10)}
.score-bar i.on{background:var(--blue)}
.score-bar i.part{background:linear-gradient(to right,var(--blue) 62%,rgba(var(--text-rgb),0.10) 62%)}
.score-meta{font-family:var(--mono);font-size:0.575rem;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--dim);line-height:1.8}

.rev{position:relative}
.rev-track{display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(min(84%,340px),1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.rev-track::-webkit-scrollbar{display:none}
.rev-card{scroll-snap-align:start;background:var(--s0);padding:1.7rem 1.6rem 1.5rem;
  display:flex;flex-direction:column;min-width:0;transition:background .4s ease}
.rev-card:hover{background:var(--s3)}
.rev-no{font-family:var(--mono);font-size:0.615rem;letter-spacing:0.2em;color:var(--blue-50)}
.rev-txt{font-size:0.95rem;line-height:1.75;color:var(--text);margin:1.1rem 0 1.6rem;flex:1;
  font-weight:300;text-wrap:pretty}
.rev-txt::before{content:'';display:block;width:22px;height:1px;background:var(--blue);margin-bottom:1.1rem}
.rev-meta{padding-top:1.1rem;border-top:1px solid var(--hair)}
.rev-who{font-family:var(--font-headline);font-weight:700;font-size:0.9rem;margin-bottom:0.75rem}
.rev-facts{display:grid;gap:0.42rem}
.rev-facts > div{display:grid;grid-template-columns:minmax(0,4.6rem) minmax(0,1fr);gap:0.75rem;align-items:baseline}
.rev-facts dt{font-family:var(--mono);font-size:0.545rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--dim)}
.rev-facts dd{font-size:0.79rem;color:var(--muted)}

.rev-nav{display:flex;align-items:center;gap:0.55rem;margin-top:1.3rem}
.rev-rail{flex:1;height:1px;background:var(--hair);position:relative;overflow:hidden}
.rev-rail i{position:absolute;top:0;height:100%;width:33%;background:var(--blue);
  transition:transform .3s var(--ease),width .3s var(--ease)}
.rev-btn{width:44px;height:44px;border:1px solid var(--line);color:var(--muted);
  font-family:var(--mono);font-size:0.85rem;transition:border-color .3s,color .3s,background .3s}
.rev-btn:hover:not(:disabled){border-color:var(--blue);color:var(--blue);background:var(--blue-10)}
.rev-btn:disabled{opacity:0.3;cursor:default}

@media(max-width:560px){
  .rev-track{grid-auto-columns:minmax(min(88%,320px),1fr)}
  .rev-card{padding:1.4rem 1.3rem}
}

/* ── Quelle unter dem Bewertungs-Slider ──────────────────── */
.rev-src{margin-top:0.9rem;font-family:var(--mono);font-size:0.555rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--dim);line-height:1.9}

/* ── Firmenpaket-Banner ──────────────────────────────────── */
.fp-banner{margin-top:2.5rem;border:1px solid var(--blue-20);background:var(--s1);
  padding:clamp(1.5rem,3vw,2.2rem);display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(1.3rem,3vw,2.4rem);align-items:center}
.fp-k{font-family:var(--mono);font-size:0.565rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--blue);margin-bottom:0.7rem}
.fp-banner h3{font-size:clamp(1.05rem,2vw,1.4rem);margin-bottom:0.7rem}
.fp-banner p:last-child{font-size:var(--t-sm);color:var(--muted);line-height:1.82}
.fp-act{display:grid;gap:0.75rem;justify-items:start}
.fp-act .btn{width:100%}
.fp-fine{font-family:var(--mono);font-size:0.545rem;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--dim)}
@media(max-width:768px){.fp-banner{grid-template-columns:1fr}}

/* ── Abo-Querverweis in der Zusammenfassung ──────────────── */
.sum-abo{padding:0.95rem 1.2rem;border-top:1px solid var(--hair);background:rgba(var(--akzent-rgb),0.035);
  font-size:0.755rem;color:var(--muted);line-height:1.72}
.sum-abo b{font-family:var(--font-headline);font-weight:700;color:var(--text);font-size:0.79rem}
.sum-abo a{color:var(--blue);border-bottom:1px solid var(--blue-30);white-space:nowrap}
.sum-abo a:hover{border-color:var(--blue)}

/* ── Rückruf-Sektion (Rahmen für #fp-rueckruf, aus der Live-Seite) ── */
.rueckruf-section{padding:3.5rem 1.25rem;position:relative;background:var(--s1)}
.rueckruf-section::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 50% 50%,var(--blue-10),transparent 70%)}
@media(max-width:768px){.rueckruf-section{padding:2.5rem 1rem}}

/* M6:sticky */nav{position:sticky;top:0;z-index:100}

/* ══ TRUST-LEISTE ══════════════════════════════════════════
   Sitzt direkt unter dem Hero. Das Hero-Bild (.plate) haengt mit
   -6rem in diesen Bereich hinein — deshalb Platz oben freihalten,
   sonst deckt das Bild die Zahlen ab. Werte spiegeln die
   .plate-Breakpoints. ══ */
.trustbar{background:var(--s1);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding-top:1.6rem}
.trustbar-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem 2rem;padding:0 0 1.6rem}
.tb-item{display:flex;flex-direction:column;gap:.25rem}
.tb-num{font-family:var(--font-headline);font-weight:800;font-size:1.35rem;line-height:1;
  color:var(--text);letter-spacing:-.01em}
.tb-lab{font-size:.78rem;line-height:1.45;color:var(--soft)}
.tb-stars{display:block;color:var(--akzent);letter-spacing:.08em;font-size:.8rem}
@media(max-width:900px){.trustbar-in{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tb-num{font-size:1.15rem}.tb-lab{font-size:.72rem}}

/* ══ MOBILE CTA-LEISTE ══════════════════════════════════════
   Der staerkste mobile Hebel bei lokalen Dienstleistern: Anrufen
   und Buchen bleiben erreichbar, statt am Seitenende zu warten.
   Fallbackwerte in var(), weil aeltere theme.css-Fassungen die
   Handschrift-Tokens (--knopf-radius u.a.) noch nicht kennen. ══ */
.mobile-cta-bar{display:none}
@media(max-width:860px){
  .mobile-cta-bar{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--s0) 92%,transparent);
    backdrop-filter:blur(12px);border-top:1px solid var(--hair)}
  .mobile-cta-bar a{display:flex;align-items:center;justify-content:center;gap:.45rem;
    min-height:46px;border-radius:var(--knopf-radius,0px);
    font-weight:var(--knopf-weight,700);font-size:.86rem;
    letter-spacing:var(--laufweite,.02em);text-decoration:none}
  .mcb-call{border:1px solid var(--akzent-30);color:var(--text)}
  .mcb-book{background:var(--akzent);color:var(--ink)}
  .mobile-cta-bar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9}
  body{padding-bottom:64px}
}


/* Kurzes Aufleuchten, wenn der Konfigurator vorbelegt wurde */
#buchen{transition:box-shadow .5s var(--ease)}
#buchen.cfg-frisch{box-shadow:inset 0 0 0 1px var(--akzent-30),0 0 0 1px var(--akzent-20)}
@media(prefers-reduced-motion:reduce){#buchen{transition:none}}



/* ══ Konfigurator: zwei fixe Leisten wollen denselben Platz ═══════
   Die mobile CTA-Leiste (Anrufen · Paket berechnen) und die Preis-
   Leiste des Konfigurators klebten beide unten. Ergebnis: zwei
   Balken uebereinander, und "Paket berechnen" stand ueber dem
   Rechner, in dem man gerade steht.

   Loesung: solange der Konfigurator sichtbar ist, weicht die
   allgemeine Leiste. Sie fuehrt dorthin, wo der Besucher schon ist —
   und ein Knopf, der nichts bewirkt, kostet Vertrauen.
   Umgeschaltet wird ueber eine Klasse am <body>, gesetzt von
   konfigurator.js per IntersectionObserver.                        */
@media(max-width:860px){
  body.nl-kfg-sichtbar .mobile-cta-bar{
    transform:translateY(110%);
    pointer-events:none;
    transition:transform .18s ease;
  }
  .mobile-cta-bar{transition:transform .18s ease}

  /* Die Preis-Leiste sitzt dann allein unten — mit Abstand zur
     Systemleiste des Geraets. */
  body.nl-kfg-sichtbar .nl-kfg-summe-box{
    bottom:calc(env(safe-area-inset-bottom));
  }
}
