/* =======================================================================
   Tätigkeitsbereiche als Straße — Variante A „Isometrische Allee"
   Vorlage: NN Brain/MDs/Webseiten/Bausteine/taetigkeitsbereiche-strasse
   (Blenk, Senftenberg). Farben auf das Blau von Notar Bauer umgestellt,
   Einrasten per Mausrad bewusst entfernt (gehört nur zur Vorführseite).
   ======================================================================= */
.tb-strasse{
  --navy:#225E80; --navy-d:#194A66; --navy-25:#58809B; --navy-50:#8FA9BD; --navy-75:#C4D2DD; --navy-90:#E3E8ED; --navy-96:#F4F6F8;
  --grau:#5E6E80; --grau-35:#96A1AC; --grau-60:#BFC5CC; --grau-80:#DFE2E6; --grau-92:#F2F3F5; --grau-97:#FAFBFB;
  --linie:#B9C8D4; --flaeche:#F1F3F5;
  position:relative;width:100%;height:100vh;height:100svh;min-height:640px;max-height:1100px;overflow:hidden;
  background:var(--flaeche);isolation:isolate;
}
.tb-buehne{position:absolute;inset:0}
.tb-svg{width:100%;height:100%;display:block;overflow:visible}
.tb-kopf{position:absolute;z-index:3;left:var(--pad);top:clamp(24px,6vh,64px);max-width:min(440px,40vw)}
.tb-kopf h2{font-size:clamp(40px,4.6vw,64px);line-height:1.02}
.tb-kopf h2::after{content:"";display:block;width:56px;height:2px;background:var(--navy);margin-top:16px}
.tb-kopf p{margin-top:18px;font-size:15px;line-height:1.7;color:var(--text)}
.tb-kopf .tb-kontakt{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;pointer-events:auto}
.tb-kopf .tb-kontakt a,.tb-kopf .tb-kontakt button{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--linie);padding:9px 14px;border-radius:999px;transition:background .2s,color .2s}
.tb-kopf .tb-kontakt a:hover,.tb-kopf .tb-kontakt button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.tb-kopf .tb-kontakt svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tb-tipp{position:absolute;z-index:3;right:var(--pad);bottom:22px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--grau);display:flex;align-items:center;gap:10px}
.tb-tipp::before{content:"";width:26px;height:1.5px;background:currentColor}

/* ─── Karten (Bereich + Datenblätter) ───────────────────────────────── */
.tb-karten{list-style:none;margin:0;padding:0}
.tb-karte{
  position:absolute;z-index:5;left:0;top:0;width:min(370px,92vw);
  transform:translate(-50%,8px);opacity:0;pointer-events:none;
  transition:opacity .28s ease,transform .28s ease;
  background:#fff;padding:18px 20px 20px;border-radius:12px;box-shadow:0 18px 44px rgba(15,47,66,.2);border:1px solid var(--navy-90);
}
.tb-karte::before{content:"";position:absolute;left:50%;top:-8px;width:16px;height:16px;background:#fff;border-left:1px solid var(--navy-90);border-top:1px solid var(--navy-90);transform:translateX(-50%) rotate(45deg)}
.tb-karte.on,.tb-karte:focus-within{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.tb-karte.seite::before{display:none}
.tb-strasse{scroll-margin-top:-18px;height:calc(100svh - var(--kopf-h))}
.tb-name{font-size:28px;line-height:1.08;color:var(--navy);outline-offset:4px}
.tb-name small{display:block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--grau);margin-top:4px}
.tb-punkte{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.tb-punkte li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.5;color:var(--text)}
.tb-punkte li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--navy)}
.tb-hinweis{margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.tb-pdfs{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.tb-pdf{display:flex;align-items:center;gap:11px;background:var(--navy);color:#fff;padding:10px 14px;font-size:13.5px;font-weight:500;line-height:1.35;border-radius:6px;transition:background .2s,transform .2s}
.tb-pdf > svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tb-pdf span:not(.pfeil){flex:1}
.tb-pdf:hover,.tb-pdf:focus-visible{background:var(--navy-d);transform:translateX(2px)}

/* ─── Bauteile ──────────────────────────────────────────────────────── */
.bau{cursor:pointer}
.bau-k path,.med-bg,.ic,.med-schild rect,.med-schild text{transition:fill .45s ease,stroke .45s ease}
.bau-k,.med{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.ic{fill:none;stroke-linecap:round;stroke-linejoin:round}
.vA .raster{stroke:#E4E8EC;stroke-width:1;fill:none}
.vA .gehweg{fill:var(--navy-90)}
.vA .fahrbahn{fill:var(--navy-75)}
.vA .kante{fill:none;stroke:#fff;stroke-width:2.5}
.vA .mitte{fill:none;stroke:#fff;stroke-width:2.5;stroke-dasharray:16 14;stroke-linecap:round}
.vA .plot{fill:var(--grau-97);stroke:#E1E6EB;stroke-width:1}
.vA .baum .stamm{stroke:var(--grau-35);stroke-width:3;stroke-linecap:round}
.vA .baum .krone{fill:var(--navy-50)}
.vA .baum .krone-s{fill:#fff;opacity:.28}
.vA .bau-k .wl{fill:var(--grau-80)}
.vA .bau-k .wr{fill:var(--grau-60)}
.vA .bau-k .rt{fill:var(--grau-92)}
.vA .bau-k .rl{fill:var(--navy-50)}
.vA .bau-k .rr,.vA .bau-k .rb{fill:#7B8FA2}
.vA .bau-k .win{fill:var(--grau-35)}
.vA .bau-k .door{fill:var(--grau)}
.vA .bau-k .tr{fill:var(--grau-35)}
.vA .bau:nth-child(odd) .bau-k .rl{fill:var(--grau-35)}
.vA .stiel{stroke:var(--linie);stroke-width:1.5;stroke-dasharray:3 4}
.vA .med-bg{fill:#fff;stroke:var(--linie);stroke-width:1.5}
.vA .ic{stroke:var(--navy);stroke-width:1.7}
.vA .med-schild rect{fill:#fff;stroke:var(--linie);stroke-width:1.2}
.vA .med-schild text{font-family:var(--sans);font-size:21px;font-weight:600;fill:var(--navy);letter-spacing:.01em}
.vA .bau.invite .bau-k,.vA .bau.invite .med{transform:translateY(-10px)}
.vA .bau.invite .med-bg{stroke:var(--messing)}
.vA .bau.on .bau-k .wl{fill:var(--navy)}
.vA .bau.on .bau-k .wr{fill:var(--navy-d)}
.vA .bau.on .bau-k .rt,.vA .bau.on .bau-k .rl,.vA .bau.on .bau-k .tr{fill:var(--navy-25)}
.vA .bau.on .bau-k .rr,.vA .bau.on .bau-k .rb{fill:#3B6682}
.vA .bau.on .bau-k .win{fill:var(--licht)}
.vA .bau.on .bau-k .door{fill:var(--messing)}
.vA .bau.on .bau-k{transform:translateY(-6px)}
.vA .bau.on .med{transform:translateY(-14px)}
.vA .bau.on .med-bg{fill:var(--navy);stroke:#fff}
.vA .bau.on .ic{stroke:#fff}
.vA .bau.on .med-schild rect{fill:var(--navy);stroke:var(--navy)}
.vA .bau.on .med-schild text{fill:#fff}
.vA .car .t{fill:#C98A45}.vA .car .l{fill:var(--messing)}.vA .car .r{fill:#8C5922}
.vA .car.b .t{fill:var(--grau-35)}.vA .car.b .l{fill:var(--grau)}.vA .car.b .r{fill:#475464}
.vA .car .g{fill:var(--navy-90)}

@media (prefers-reduced-motion:reduce){.tb-strasse *{animation:none!important;transition:none!important}}
html[data-motion="off"] .tb-strasse *{animation:none!important;transition:none!important}

/* Mittlere Breiten: Kopftext kompakter */
@media (max-width:1180px){
  .tb-kopf p,.tb-kopf .tb-kontakt{display:none}
}
/* ─── Schmale Bildschirme: Zeichnung oben, Karten als Liste ─────────── */
@media (max-width:860px){
  .tb-strasse{height:auto;min-height:0;max-height:none;overflow:visible;padding:clamp(56px,10vw,80px) 0 40px}
  .tb-kopf{position:static;max-width:none;padding-inline:var(--pad)}
  .tb-kopf p,.tb-kopf .tb-kontakt{display:flex}
  .tb-kopf p{display:block}
  .tb-buehne{position:relative;inset:auto;overflow:hidden;height:78vw;min-height:280px;max-height:520px;margin-top:10px}
  .tb-tipp{display:none}
  .tb-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:6px var(--pad) 0}
  .tb-karte{position:static;opacity:1;transform:none;pointer-events:auto;width:auto;box-shadow:0 6px 18px rgba(15,47,66,.08)}
  .tb-karte::before{display:none}
  .tb-karte.on{outline:2px solid var(--navy)}
  .tb-name{font-size:25px}
}
@media (max-width:600px){
  .tb-karten{grid-template-columns:minmax(0,1fr)}
}

/* ═══ Überarbeitung 28.09.2026: drei Darstellungen, Karte neben dem Haus,
   Regler, großes Feld „Alle Datenblätter" mit Überzug ═════════════════ */
.tb-darstellung{position:absolute;inset:0;transition:filter .5s var(--ease)}
.tb-darstellung[hidden]{display:none}
.tb-karte{transform:translate(-50%,0) translateX(-8px)}
.tb-karte.on,.tb-karte:focus-within{transform:translate(-50%,0)}
.tb-karte::before{left:-8px;top:50%;transform:translateY(-50%) rotate(-45deg);border-left:1px solid var(--navy-90);border-top:1px solid var(--navy-90)}
.tb-karte.links::before{left:auto;right:-8px;transform:translateY(-50%) rotate(135deg)}
.tb-strasse{height:calc(100vh - var(--kopf-h));height:calc(100svh - var(--kopf-h));max-height:none}
/* =============================================================== Variante B */
.vB{background:linear-gradient(#fff 0%, var(--navy-96) 45%, var(--flaeche) 100%)}
.vB .huegel.h1{fill:var(--navy-90)}
.vB .huegel.h2{fill:#EDF0F3}
.vB .fahrbahn{fill:var(--grau-60)}
.vB .kante{fill:none;stroke:#fff;stroke-width:3}
.vB .mitte{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:22 18;stroke-linecap:round;animation:strich 3s linear infinite}
@keyframes strich{to{stroke-dashoffset:-80}}
.vB .schatten{fill:rgba(27,58,92,.08)}
.vB .baum .stamm{stroke:var(--grau-35);stroke-width:3;stroke-linecap:round}
.vB .baum .krone{fill:var(--navy-50)}
.vB .baum .krone-s{fill:#fff;opacity:.28}
.vB .bau-k .wl{fill:var(--navy-75)}
.vB .bau-k .wr{fill:var(--navy-50)}
.vB .bau-k .rt{fill:var(--navy-90)}
.vB .bau-k .rl,.vB .bau-k .rb{fill:var(--grau-35)}
.vB .bau-k .rr{fill:#8894A1}
.vB .bau-k .win{fill:var(--navy-96)}
.vB .bau-k .door{fill:var(--grau)}
.vB .bau-k .tr{fill:var(--navy-50)}
.vB .bau:nth-child(3n+1) .bau-k .wl{fill:var(--grau-80)}
.vB .bau:nth-child(3n+1) .bau-k .wr{fill:var(--grau-60)}
.vB .bau:nth-child(3n+2) .bau-k .wl{fill:#D3D9E0}
.vB .arm,.vB .kette{stroke:var(--grau);stroke-width:2;fill:none;stroke-linecap:round}
.vB .med-bg{fill:#fff;stroke:var(--navy);stroke-width:2}
.vB .ic{stroke:var(--navy);stroke-width:1.8}
.vB .schwing{animation:schwingen 4.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes schwingen{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.vB .bau.invite .schwing{animation-duration:1.1s}
.vB .bau.invite .med-bg{stroke:var(--messing);stroke-width:3}
.vB .bau.on .bau-k .wl{fill:var(--navy)}
.vB .bau.on .bau-k .wr{fill:var(--navy-d)}
.vB .bau.on .bau-k .rl,.vB .bau.on .bau-k .rb,.vB .bau.on .bau-k .rt{fill:var(--navy-25)}
.vB .bau.on .bau-k .rr{fill:#3E5774}
.vB .bau.on .bau-k .win{fill:var(--licht)}
.vB .bau.on .bau-k .door{fill:var(--messing)}
.vB .bau.on .med-bg{fill:var(--navy);stroke:var(--messing);stroke-width:3}
.vB .bau.on .ic{stroke:#fff}
.vB .bau.on .schwing{animation:none;transform:rotate(0)}
  box-shadow:inset 0 0 0 3px var(--navy),inset 0 0 0 4.5px rgba(255,255,255,.75);font-size:28px;display:inline-block}

/* =============================================================== Variante C */
.vC{background:#fff}
.vC path,.vC circle{vector-effect:non-scaling-stroke}
.vC .gehweg,.vC .fahrbahn{fill:#fff}
.vC .kante{fill:none;stroke:var(--grau);stroke-width:1.4}
.vC .kante.k2{stroke:var(--linie);stroke-width:1}
.vC .mitte{fill:none;stroke:var(--grau-35);stroke-width:1.2;stroke-dasharray:10 9}
.vC .plot{fill:none;stroke:var(--navy-90);stroke-width:1}
.vC .bau-k path,.vC .stele path{stroke:var(--grau);stroke-width:1.3;stroke-linejoin:round}
.vC .bau-k .wl{fill:#fff}
.vC .bau-k .wr{fill:url(#schraffur)}
.vC .bau-k .rt{fill:#fff}
.vC .bau-k .rl{fill:url(#schraffur2)}
.vC .bau-k .rr,.vC .bau-k .rb{fill:url(#schraffur)}
.vC .bau-k .win{fill:#fff;stroke-width:1}
.vC .bau-k .door{fill:var(--grau-80)}
.vC .bau-k .tr{fill:#fff}
.vC .stele .st-l{fill:#fff}.vC .stele .st-r{fill:url(#schraffur)}.vC .stele .st-t{fill:#fff}
.vC .ic{stroke:var(--navy);stroke-width:1.7}
.vC .baum .stamm{stroke:var(--grau);stroke-width:1.2;fill:none}
.vC .baum .krone{fill:#fff;stroke:var(--grau);stroke-width:1.2}
.vC .baum .krone-s{fill:url(#schraffur2);opacity:.8}
.vC .licht-h{fill:rgba(177,114,47,.18)}.vC .licht-k{fill:var(--messing)}
.vC .bau.invite .stele path{stroke:var(--messing)}
.vC .bau.invite .stele .st-l{fill:#FBF4EC}
.vC .bau.invite .ic{stroke:var(--messing)}
.vC .bau.on .bau-k path,.vC .bau.on .stele path{stroke:#fff}
.vC .bau.on .bau-k .wl,.vC .bau.on .stele .st-l{fill:var(--navy)}
.vC .bau.on .bau-k .wr,.vC .bau.on .stele .st-r{fill:var(--navy-d)}
.vC .bau.on .bau-k .rl,.vC .bau.on .bau-k .rt,.vC .bau.on .stele .st-t{fill:var(--navy-25)}
.vC .bau.on .bau-k .rr,.vC .bau.on .bau-k .rb{fill:#3E5774}
.vC .bau.on .bau-k .win{fill:var(--licht);stroke:var(--navy)}
.vC .bau.on .bau-k .door{fill:var(--messing)}
.vC .bau.on .bau-k .tr{fill:var(--navy-25)}
.vC .bau.on .ic{stroke:#fff}
/* Selbstzeichnen */
.vC.zeichnet [pathLength]{stroke-dasharray:1 1;stroke-dashoffset:1}
.vC.zeichnet .bau-k path,.vC.zeichnet .stele path,.vC.zeichnet .baum .krone{fill-opacity:0}
.vC.zeichnet .ic,.vC.zeichnet .baum .krone-s,.vC.zeichnet .mitte{opacity:0}
.vC.gezeichnet [pathLength]{stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dashoffset 2.2s cubic-bezier(.5,0,.3,1) var(--d,0s)}
.vC.gezeichnet .bau-k path,.vC.gezeichnet .stele path,.vC.gezeichnet .baum .krone{fill-opacity:1;transition:fill-opacity .8s ease calc(var(--d,0s) + 1.6s),fill .45s,stroke .45s}
.vC.gezeichnet .ic,.vC.gezeichnet .baum .krone-s,.vC.gezeichnet .mitte{opacity:1;transition:opacity .8s ease 2s}
.vC .bau{--d:0s}

/* Regler unten links */
.tb-regler{position:absolute;z-index:6;left:var(--pad);bottom:clamp(20px,4vh,40px);display:flex;align-items:center;gap:14px}
.tb-regler-wort{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--grau)}
.tb-regler-bahn{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:#fff;border:1px solid var(--navy-90);box-shadow:0 8px 22px rgba(15,47,66,.12)}
.tb-regler-knopf{position:absolute;top:4px;left:4px;width:44px;height:36px;border-radius:999px;background:var(--navy);transform:translateX(calc(var(--pos,0) * 44px));transition:transform .45s var(--ease-sanft)}
.tb-regler button{position:relative;z-index:1;width:44px;height:36px;border-radius:999px;font-weight:700;font-size:14px;color:var(--navy);transition:color .3s}
.tb-regler button[aria-checked="true"]{color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Großes Feld unten rechts */
.tb-alle{position:absolute;z-index:6;right:var(--pad);bottom:clamp(20px,4vh,40px);width:clamp(280px,24vw,370px);min-height:clamp(140px,18vh,190px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;text-align:left;padding:22px 26px;border-radius:10px;color:#fff;
  background:linear-gradient(135deg,var(--navy) 0%,var(--blau-dd) 100%);box-shadow:0 22px 50px rgba(15,47,66,.3);transition:transform .3s var(--ease),box-shadow .3s}
.tb-alle:hover,.tb-alle:focus-visible{transform:translateY(-4px);box-shadow:0 28px 60px rgba(15,47,66,.38)}
.tb-alle-klein{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-75)}
.tb-alle-gross{font-family:var(--serif);font-size:clamp(25px,2.1vw,32px);line-height:1.1;padding-right:40px}
.tb-alle .pfeil{position:absolute;right:24px;bottom:28px;color:var(--licht)}
/* Überzug: Straße läuft unscharf weiter, blau legt sich darüber */
.tb-strasse.fo-offen .tb-darstellung{filter:blur(8px) saturate(.75)}
.tb-strasse.fo-offen .tb-karten,.tb-strasse.fo-offen .tb-alle,.tb-strasse.fo-offen .tb-regler,.tb-strasse.fo-offen .tb-kopf p,.tb-strasse.fo-offen .tb-kontakt{opacity:0;pointer-events:none}
.tb-strasse .tb-kopf{transition:color .4s}
.tb-strasse.fo-offen .tb-kopf{z-index:9}
.tb-strasse.fo-offen .tb-kopf h2{color:#fff}
.tb-strasse.fo-offen .tb-kopf h2::after{background:var(--licht)}
.fo-overlay{position:absolute;inset:0;z-index:8;display:flex;align-items:flex-end;justify-content:flex-end;padding:clamp(150px,20vh,210px) var(--pad) clamp(28px,5vh,52px);
  background:radial-gradient(120% 100% at 20% 10%,rgba(34,94,128,.78) 0%,rgba(15,47,66,.9) 75%);backdrop-filter:blur(4px);
  opacity:0;clip-path:inset(0 0 0 100%);transition:opacity .45s var(--ease),clip-path .7s cubic-bezier(.65,0,.2,1)}
.fo-overlay[hidden]{display:none!important}
.fo-overlay.sichtbar{opacity:1;clip-path:inset(0 0 0 0)}
.fo-inhalt{width:100%;max-height:100%;overflow:auto;color:#fff}
.fo-kopf{position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(16px,2.4vh,26px)}
.fo-kopf h3{color:#fff;font-size:clamp(24px,2vw,30px)}
.fo-zu{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.4);color:#fff;flex:none}
.fo-zu:hover,.fo-zu:focus-visible{background:rgba(255,255,255,.14)}
.fo-zu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.fo-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.fo-kat{min-width:0;padding:16px 16px 18px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:calc(.25s + var(--k) * .07s)}
.fo-overlay.sichtbar .fo-kat{opacity:1;transform:none}
.fo-kat h3{color:#fff;font-size:clamp(19px,1.5vw,23px);line-height:1.15;margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.2)}
.fo-kat h3 small{display:block;font-family:var(--sans);font-size:11.5px;color:var(--navy-75);margin-top:3px}
.fo-kat ul{list-style:none;display:grid;gap:7px}
.fo-link{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:6px;color:#fff;background:rgba(255,255,255,.07);font-size:13.5px;line-height:1.3;transition:background .2s,color .2s}
.fo-link > svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fo-titel{flex:1;min-width:0;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.fo-pdf{font-size:10px;font-weight:700;letter-spacing:.12em;border:1px solid currentColor;border-radius:3px;padding:1px 5px;opacity:.7}
.fo-link:hover,.fo-link:focus-visible{background:#fff;color:var(--navy)}
@media (max-width:1180px){ .fo-raster{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){
  .tb-darstellung{position:absolute;inset:0}
  .tb-regler{position:static;margin:14px var(--pad) 0}
  .tb-alle{position:relative;right:auto;bottom:auto;margin:14px var(--pad) 0;width:auto}
  .tb-karte{transform:none}
  .tb-karte.on,.tb-karte:focus-within{transform:none}
  .fo-overlay{position:fixed;z-index:210;align-items:flex-start;overflow:auto;padding:24px var(--pad)}
  .fo-raster{grid-template-columns:minmax(0,1fr)}
  .tb-strasse.fo-offen .tb-kopf h2{color:var(--navy)}
}
html[data-motion="off"] .fo-overlay,html[data-motion="off"] .fo-kat{transition:none}
body.datenblaetter-offen .kontakt-fab,body.datenblaetter-offen .fassung-schalter{opacity:0;pointer-events:none}
/* Szene rechts neben der Überschrift und über Regler/Feld halten */
@media (min-width:861px){
  .tb-buehne{top:0;bottom:clamp(30px,5vh,60px);left:clamp(260px,24vw,420px);right:clamp(0px,4vw,80px)}
  .tb-darstellung.vB{inset:-4% 0 0 -6%}
}
@media (min-width:861px) and (max-width:1180px){ .tb-buehne{left:clamp(220px,26vw,320px)} }
.tb-kopf .tb-kontakt a[href$="faq/"]{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ═══ Überzug „Alle Datenblätter" nach Vorlage Bouché (28.09. (2)) ═══════ */
.tb-strasse.fo-offen .tb-kopf{opacity:0;pointer-events:none}
.fo-overlay{align-items:center;justify-content:center;padding:clamp(28px,6vh,72px) var(--pad);clip-path:none;
  background:radial-gradient(120% 90% at 30% 20%,rgba(34,94,128,.82) 0%,rgba(15,47,66,.92) 70%);backdrop-filter:blur(6px);transition:opacity .4s var(--ease)}
.fo-inhalt{width:min(1240px,100%)}
.fo-kopf{display:grid;gap:8px;padding-right:64px;margin-bottom:clamp(20px,3.6vh,36px)}
.fo-kopf h2{color:#fff;font-size:clamp(38px,4vw,56px)}
.fo-kopf h2::after{content:"";display:block;width:56px;height:1.5px;background:var(--licht);margin-top:14px}
.fo-kopf p{color:var(--navy-90);max-width:62ch;font-size:15.5px}
.fo-zu{position:absolute;right:0;top:0;width:52px;height:52px;border:1px solid rgba(255,255,255,.4)}
.fo-raster{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);align-items:stretch}
.fo-kat{padding:18px 14px 18px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.fo-kat h3{font-size:clamp(19px,1.45vw,23px);hyphens:auto;overflow-wrap:break-word;margin-bottom:12px;padding-bottom:10px}
.fo-kat ul{gap:8px}
.fo-link{display:grid;gap:2px;padding:10px 12px 11px;border-radius:6px;background:rgba(255,255,255,.07)}
.fo-titel{font-weight:600;font-size:14px;line-height:1.3}
.fo-unter{font-size:12px;color:var(--navy-75);line-height:1.35}
.fo-hinweis{margin-top:6px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--licht)}
.fo-link:hover,.fo-link:focus-visible{background:#fff;color:var(--navy)}
.fo-link:hover .fo-unter,.fo-link:focus-visible .fo-unter{color:var(--grau)}
.fo-link:hover .fo-hinweis,.fo-link:focus-visible .fo-hinweis{color:var(--messing)}
@media (max-width:1280px){ .fo-raster{grid-template-columns:repeat(3,minmax(0,1fr))} .fo-overlay{align-items:flex-start;overflow:auto} }
@media (max-width:860px){ .fo-raster{grid-template-columns:minmax(0,1fr)} .fo-kopf h2{color:#fff} }
/* Häuserzeile (B): Mittelstreifen steht still */
.vB .mitte{animation:none!important}
.vB .car-b rect,.vB .car-b path{transition:none}
.vB .car .t{fill:#C98A45}.vB .car .l{fill:var(--messing)}.vB .car .r{fill:#8C5922}
.vB .car.b .t{fill:var(--grau-35)}.vB .car.b .l{fill:var(--grau)}.vB .car.b .r{fill:#475464}
.vB .car .g{fill:var(--navy-90)}
.tb-darstellung.vB{background:none}
/* Überzug ruhig halten: kein doppelter Weichzeichner, eigene Ebenen */
.fo-overlay{backdrop-filter:none;-webkit-backdrop-filter:none;contain:paint;will-change:opacity}
.tb-darstellung{will-change:filter;transform:translateZ(0)}
.fo-link{transition:background .2s,color .2s;transform:none!important}
.fo-kat{will-change:auto}
.fo-overlay.sichtbar .fo-kat{transition-delay:0s}