/* =====================================================================
   DUKA · Startseite
   Alle Werte kommen aus tokens.css.
   Ausgangszustände für Animationen stehen hier unter .js (kein Aufblitzen),
   noscript.css und „Bewegung reduzieren“ heben sie wieder auf.
   ===================================================================== */

/* ---------- Grundlage ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--text);font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,picture{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,dl,dd{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:fixed;left:var(--gutter);top:-80px;z-index:200;background:var(--accent);color:var(--accent-text);padding:12px 16px;font-weight:var(--fw-bold);text-decoration:none;transition:top var(--t-short) var(--ease-out)}
.skip:focus{top:12px}

/* ---------- Logo ---------- */
.logo{display:inline-flex;flex-direction:column;align-items:stretch;gap:3px;text-decoration:none;color:var(--text)}
.logo b{font-size:22px;letter-spacing:.06em;font-weight:var(--fw-bold);line-height:1}
.logo i{height:7px;border-left:var(--stroke-line) solid;border-right:var(--stroke-line) solid;position:relative;transform-origin:left}
.logo i::after{content:"";position:absolute;left:0;right:0;top:2.75px;border-top:var(--stroke-line) solid}

/* ---------- Knopf „Maßkette“ ----------
   Fläche mit weichen Ecken, darunter eine Maßkette. Beim Überfahren (Klasse .is-hot, gesetzt in main.js):
   Knopf zieht sich zur Maus, Graphit schiebt sich von links herein, Text rollt, Pfeil fliegt durch,
   die Maßkette zieht sich über die ganze Breite, setzt den Endstrich und darüber zählt ein Maß hoch. */
.btn{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:18px;text-decoration:none;color:var(--text);transition:transform .6s var(--ease-out);-webkit-tap-highlight-color:transparent}
.btn-t{position:relative;display:inline-flex;align-items:center;gap:14px;min-height:var(--btn-h);padding:0 20px;border-radius:var(--radius-btn);background:var(--btn-bg);color:var(--btn-fg);font:var(--fw-bold) 15px/1 var(--font);overflow:hidden;isolation:isolate}
.btn-t::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c-graphite);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.btn .roll{display:inline-grid;overflow:hidden;height:1.25em;line-height:1.25}
.btn .roll>span{grid-area:1/1;white-space:nowrap;transition:transform var(--t-base) var(--ease-out)}
.btn .roll>span+span{transform:translateY(140%)}
.btn .fly{display:grid;overflow:hidden;width:18px;height:18px;flex:none}
.btn .fly svg{grid-area:1/1;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;transition:transform var(--t-base) var(--ease-out)}
.btn .fly svg+svg{transform:translateX(-160%)}
.btn-m{position:relative;align-self:stretch;height:11px;color:var(--text-muted)}
.btn-m::before{content:"";position:absolute;left:0;right:0;top:5px;border-top:1px solid currentColor;transform-origin:left;transform:scaleX(.3);transition:transform .6s var(--ease-out)}
.btn-m::after{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1px solid currentColor}
.btn-m i{position:absolute;right:0;top:0;bottom:0;border-left:1px solid currentColor;transform:scaleY(0);transition:transform var(--t-short) var(--ease-out)}
.btn-v{position:absolute;left:0;top:0;font-size:11px;font-weight:var(--fw-bold);color:var(--accent);opacity:0;transform:translateY(4px);transition:opacity var(--t-short),transform var(--t-base) var(--ease-out)}
.btn.is-hot .btn-t::before,.btn:focus-visible .btn-t::before{transform:scaleX(1)}
.btn.is-hot .roll>span,.btn:focus-visible .roll>span{transform:translateY(-105%)}
.btn.is-hot .roll>span+span,.btn:focus-visible .roll>span+span{transform:translateY(0)}
.btn.is-hot .fly svg,.btn:focus-visible .fly svg{transform:translateX(160%)}
.btn.is-hot .fly svg+svg,.btn:focus-visible .fly svg+svg{transform:translateX(0)}
.btn.is-hot .btn-m,.btn:focus-visible .btn-m{color:var(--accent)}
.btn.is-hot .btn-m::before,.btn:focus-visible .btn-m::before{transform:scaleX(1)}
.btn.is-hot .btn-m i,.btn:focus-visible .btn-m i{transform:scaleY(1);transition-delay:.45s}
.btn.is-hot .btn-v,.btn:focus-visible .btn-v{opacity:1;transform:none}
.btn:active .btn-t{transform:scale(.97)}
.btn:focus-visible{outline:none}
.btn:focus-visible .btn-t{outline:2px solid var(--accent);outline-offset:3px}
/* ruhige Variante: nur Text, Pfeil in Blau */
.btn--quiet .btn-t{background:none;color:var(--text);padding:0;min-height:var(--tap);font-size:17px;border-radius:0;overflow:visible}
.btn--quiet .btn-t::before{display:none}
.btn--quiet .fly{color:var(--accent)}
/* kleine Variante für die Navigation */
.btn--sm{padding-top:0;gap:5px}
.btn--sm .btn-t{min-height:40px;padding:0 14px;font-size:14px;border-radius:6px}
.btn--sm .btn-v{display:none}
.btn--sm .btn-m{height:8px}
.btn--sm .btn-m::before{top:3.5px}

.tlink{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:var(--fw-medium);min-height:var(--tap)}
.tlink i{width:18px;height:1.5px;background:currentColor;position:relative;transition:width var(--t-base) var(--ease-out)}
.tlink i::after{content:"";position:absolute;right:0;top:-3.5px;width:7px;height:7px;border-top:1.5px solid;border-right:1.5px solid;transform:rotate(45deg)}
.tlink:hover i{width:32px}

/* ---------- Maßkette ---------- */
.dim{position:relative;height:12px;color:var(--text-muted)}
.dim::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:var(--stroke-dim) solid currentColor;transform-origin:left}
.dim::after{content:"";position:absolute;inset:0;border-left:var(--stroke-dim) solid currentColor;border-right:var(--stroke-dim) solid currentColor}
.dim span{position:absolute;left:50%;top:-15px;transform:translateX(-50%);background:var(--bg);padding:0 8px;font-size:var(--fs-note);white-space:nowrap}

/* =====================================================================
   Navigation
   ===================================================================== */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-5);padding:0 var(--gutter);transition:transform var(--t-base) var(--ease-out),background var(--t-base) var(--ease-out)}
.nav.is-scrolled{background:var(--bg)}
.nav .logo{justify-self:start}
.nav.is-hidden{transform:translateY(-100%)}
.nav-menu{display:flex;gap:6px;font-size:14px;font-weight:var(--fw-medium)}
.nav-menu a{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px 8px;border-radius:6px;text-decoration:none;transition:opacity var(--t-base) var(--ease-out),background var(--t-base) var(--ease-out)}
.nm-roll{display:inline-grid;overflow:hidden;height:1.3em;line-height:1.3}
.nm-roll>span{grid-area:1/1;transition:transform var(--t-base) var(--ease-out)}
.nm-roll>span+span{transform:translateY(140%);color:var(--accent)}
.nm-dim{position:relative;align-self:stretch;height:7px;color:var(--accent)}
.nm-dim::before{content:"";position:absolute;left:0;right:0;top:3px;border-top:1px solid currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.nm-dim::after{content:"";position:absolute;inset:0;border-left:1px solid currentColor;border-right:1px solid currentColor;transform:scaleY(0);transition:transform var(--t-short) var(--ease-out)}
.nav-menu:has(a:hover) a:not(:hover){opacity:.45}
.nav-menu a:hover,.nav-menu a:focus-visible{background:var(--bg-raised)}
.nav-menu a:hover .nm-roll>span,.nav-menu a:focus-visible .nm-roll>span{transform:translateY(-105%)}
.nav-menu a:hover .nm-roll>span+span,.nav-menu a:focus-visible .nm-roll>span+span{transform:translateY(0)}
.nav-menu a:hover .nm-dim::before,.nav-menu a:focus-visible .nm-dim::before{transform:scaleX(1)}
.nav-menu a:hover .nm-dim::after,.nav-menu a:focus-visible .nm-dim::after{transform:scaleY(1);transition-delay:.35s}
.nav-menu a[aria-current="page"] .nm-dim::before{transform:scaleX(1)}
.nav-menu a[aria-current="page"] .nm-dim::after{transform:scaleY(1)}
.nav-end{justify-self:end;display:flex;align-items:flex-start;gap:10px;margin-top:8px}
.nav-call{margin:0}
.nav-phone{display:inline-flex;align-items:center;height:40px;border-radius:6px;box-shadow:inset 0 0 0 var(--stroke-line) var(--text);color:var(--text);text-decoration:none;overflow:hidden;transition:background var(--t-base) var(--ease-out),color var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.np-ic{width:40px;height:40px;display:grid;place-items:center;flex:none}
.ic-phone{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;overflow:visible}
.ic-phone .ic-wave{stroke:var(--accent);transition:stroke var(--t-base)}
.np-num{max-width:0;white-space:nowrap;font-size:14px;font-weight:var(--fw-bold);opacity:0;transition:max-width .5s var(--ease-out),opacity var(--t-short) var(--ease-out),padding .5s var(--ease-out)}
.nav-phone:hover,.nav-phone:focus-visible{background:var(--accent);color:var(--accent-text);box-shadow:none}
.nav-phone:hover .ic-wave,.nav-phone:focus-visible .ic-wave{stroke:var(--accent-text)}
.nav-phone:hover .ic-phone,.nav-phone:focus-visible .ic-phone{animation:ring .6s var(--ease-out)}
.nav-phone:hover .np-num,.nav-phone:focus-visible .np-num{max-width:12em;opacity:1;padding-right:14px}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}}
.nav-toggle{display:none}

@media (max-width:860px){
  .nav-menu,.nav-call{display:none}
  .nav-end{margin:0;order:2}
  .nav{grid-template-columns:1fr auto auto}
  .nav-toggle{order:3}
  .nav-toggle{display:inline-flex;align-items:center;gap:12px;justify-self:end;height:var(--tap);padding:0 0 0 12px;border:0;background:none;font:var(--fw-medium) 14px var(--font);color:var(--text);cursor:pointer}
  .nt-icon{position:relative;width:44px;height:44px;background:var(--accent);border-radius:6px}
  .nt-icon i{position:absolute;left:13px;right:13px;height:1.5px;background:var(--accent-text);transition:transform var(--t-base) var(--ease-out)}
  .nt-icon i:first-child{top:18px}
  .nt-icon i:last-child{top:25px}
  .nav-toggle[aria-expanded="true"] .nt-icon i:first-child{transform:translateY(3.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nt-icon i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
}

/* Handy-Menü: Grundriss */
.planmenu{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;padding:calc(var(--nav-h) + var(--sp-4)) var(--gutter) var(--sp-6);overflow-y:auto}
.pm-plan{position:relative;flex:1;min-height:420px;display:grid;grid-template-columns:58fr 42fr;grid-template-rows:47fr 53fr}
.pm-walls{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;overflow:visible}
.pm-walls path{fill:none;stroke:var(--wall);stroke-width:8;stroke-linecap:square;stroke-dasharray:1;stroke-dashoffset:0}
.pm-room{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;margin:4px;padding:var(--sp-5) var(--sp-4);text-decoration:none;min-width:0;transition:background var(--t-base) var(--ease-out)}
.pm-room span{font-size:clamp(1.05rem,5vw,2rem);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-head);line-height:1}
.pm-room small{font-size:var(--fs-note);color:var(--text-muted)}
.pm-room::after{content:"";position:absolute;left:var(--sp-4);top:var(--sp-5);width:12px;height:12px;background:var(--marker);transform:scale(0);transition:transform var(--t-short) var(--ease-snap)}
.pm-room:focus-visible{outline-offset:-6px}
.pm-room:hover,.pm-room:focus-visible{background:var(--bg-raised)}
.pm-room:hover::after,.pm-room:focus-visible::after{transform:scale(1)}
.pm-plan{grid-template-areas:"a b" "c d"}
.r1{grid-area:a}.r2{grid-area:b}.r3{grid-area:c}.r4{grid-area:d}
.pm-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);padding-top:var(--sp-5)}

/* =====================================================================
   Vorhang beim Laden
   ===================================================================== */
.curtain{display:none}
/* Sechs Platten wie Gipskarton nebeneinander; beim Laden zeichnet sich ein Haus, dann heben die Platten nacheinander ab */
.js .curtain{position:fixed;inset:0;z-index:100;display:grid;place-items:center;pointer-events:none}
.c-plates{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr)}
.c-plates i{background:var(--bg-raised);box-shadow:inset -1px 0 0 var(--line),0 18px 30px -18px rgba(38,37,34,.35);will-change:transform}
.c-plates i:last-child{box-shadow:none}
.c-draw{position:relative;width:min(520px,78vw);display:grid;gap:14px}
.c-house{width:100%;height:auto}
.c-meta{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-note);color:var(--text-muted)}
.c-pct{font-weight:var(--fw-bold);color:var(--text);font-variant-numeric:tabular-nums;font-size:1.15rem}
.c-bar{height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.c-bar i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.curtain.is-done{display:none}

/* =====================================================================
   1 · Kopf: Die Wand entsteht
   Ständerwerk zeichnet sich beim Laden, beim Scrollen kommen Platten,
   Spachtel, dann werden die Platten abgezogen und der fertige Raum erscheint.
   ===================================================================== */
.kopf{position:relative;height:100vh;height:100svh;display:grid;grid-template-rows:minmax(0,1fr) auto;padding-top:var(--nav-h);overflow:hidden}
.kopf-stage{position:relative;margin:0 var(--gutter);overflow:hidden;background:var(--bg);border-radius:var(--radius-img)}
.kopf-draw{position:absolute;inset:0;width:100%;height:100%}
.kopf-draw .ln{fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:square}
.kopf-draw .uw{stroke-width:3}
.kopf-draw .dimp{fill:none;stroke:var(--text-muted);stroke-width:1.2}
.kopf-draw .dimt{fill:var(--text-muted);font:500 15px var(--font)}
.kopf-draw .board{fill:var(--c-karton);stroke:var(--text);stroke-width:1.5}
.kopf-draw .plaster{fill:var(--c-plaster)}
.kopf-draw .trowel{fill:var(--accent)}
.kopf-sun{position:absolute;left:70%;top:34%;width:28vmin;aspect-ratio:1;border-radius:var(--radius-round);background:var(--accent);translate:-50% -50%}
.kopf-photo{position:absolute;inset:0;visibility:hidden}
.kopf-photo picture,.kopf-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Platte = verspachtelte Wand mit zwei sichtbaren Ständern (links und Mitte), wie in der Zeichnung */
.kopf-plate{position:absolute;background:var(--c-plaster) linear-gradient(90deg,transparent calc(50% - 1px),var(--text) calc(50% - 1px),var(--text) calc(50% + 1px),transparent calc(50% + 1px));box-shadow:inset 2px 0 0 var(--text)}
.kopf-plate:last-child{box-shadow:inset 2px 0 0 var(--text),inset -2px 0 0 var(--text)}
.kopf-band{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-6);align-items:end;padding:var(--sp-5) var(--gutter) var(--sp-6)}
.kopf-title{font-size:clamp(2.6rem,6.4vw,8.4rem);line-height:1.02;white-space:nowrap;letter-spacing:var(--ls-display);text-transform:uppercase;font-weight:var(--fw-bold)}
.kopf-title .ln2{display:block;overflow:hidden;padding:.16em 0 .08em;margin:-.16em 0 -.08em}
.kopf-title .ln2>span{display:block}
.kopf-side{display:grid;gap:var(--sp-4);justify-items:start;justify-self:end;max-width:30rem}
.kopf-side p{color:var(--text-muted);max-width:38ch}
.kopf-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:stretch}

/* Bauphasen-Anzeige */
.phase{display:grid;gap:6px;min-width:220px;padding:10px 12px;box-shadow:inset 0 0 0 var(--stroke-dim) var(--text)}
.phase dt{font-size:11px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.02em}
.phase dd{position:relative;height:1.7em;overflow:hidden;font-size:var(--fs-note);line-height:1.7;color:var(--text-muted)}
.phase dd span{position:absolute;inset:0;transition:transform var(--t-base) var(--ease-out),opacity var(--t-base) var(--ease-out)}
.phase dd span:not(.on){transform:translateY(100%);opacity:0}
.phase dd span.gone{transform:translateY(-100%)}
.phase .meter{height:3px;background:var(--rule);position:relative;overflow:hidden}
.phase .meter i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0)}

/* Ausgangszustände (nur mit JavaScript) */
.js .kopf-draw [pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
.js .kopf-draw .dimt{opacity:0}
.js .kopf-sun{transform:scale(0)}
.js .kopf-title .ln2>span{transform:translateY(140%)}
.js .kopf-side{opacity:0}

@media (max-width:860px){
  .kopf-title{white-space:normal;font-size:clamp(2.2rem,10vw,3.4rem)}
  .kopf-band{grid-template-columns:1fr;gap:var(--sp-4)}
  .kopf-side p{display:none}
  .kopf-sun{width:34vmin;left:66%}
}

/* =====================================================================
   Strichzeichnungen (Bauplan-Stil wie bei Heron), überall gleich
   ===================================================================== */
.sketch{display:block;overflow:visible}
.sketch .ln{fill:none;stroke:var(--text);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sketch .ac{stroke:var(--accent);stroke-width:2.2}
.sketch .dm{stroke:var(--text-muted);stroke-width:1}
.sketch .thin{stroke-width:1;stroke:var(--text-muted)}
.sketch .lbl{fill:var(--text-muted);font:500 13px var(--font)}
.js .sketch [pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
.js .sketch .lbl{opacity:0}

/* =====================================================================
   2 · Haltung: ein großer Satz färbt sich beim Lesen ein
   ===================================================================== */
.haltung{max-width:var(--maxw);margin:0 auto;padding:var(--section) var(--gutter);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--sp-7);align-items:end}
.haltung-art{grid-column:2;grid-row:1 / span 2;width:100%;height:auto;align-self:center}
.haltung-text,.haltung-sign{grid-column:1}
@media (max-width:860px){.haltung{grid-template-columns:1fr}.haltung-art{grid-column:1;grid-row:auto;max-width:420px;margin-bottom:var(--sp-6)}}
.haltung-text{font-size:clamp(2rem,4.6vw,4.75rem);line-height:1.06;letter-spacing:var(--ls-head);text-transform:uppercase;font-weight:var(--fw-bold);max-width:24ch;text-wrap:balance}
.haltung-text .w{transition:none}
.js .haltung-text .w{color:var(--c-line)}
.haltung-sign{margin-top:var(--sp-8);max-width:min(100%,60rem)}
.dim::before{transform:scaleX(var(--draw))}
.dim::after{opacity:var(--draw)}
.js .haltung-dim{--draw:0}
.js .haltung-dim span{opacity:0}

/* =====================================================================
   3 · Leistungen als Grundriss
   ===================================================================== */
.plan{position:relative;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(1rem,3vw,3rem);align-items:center;padding:calc(var(--nav-h) + var(--sp-4)) var(--gutter) var(--sp-6);max-width:var(--maxw);margin:0 auto}
.plan-draw{--ar:1000/600;position:relative;aspect-ratio:var(--ar);width:min(100%,calc(76vh * 1000 / 600));justify-self:center}
.plan-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plan-svg .wall{fill:none;stroke:var(--wall);stroke-width:12;stroke-linecap:square}
.plan-svg .dimp{fill:none;stroke:var(--text-muted);stroke-width:1.2}
.plan-svg .dimt{fill:var(--text-muted);font:500 14px var(--font)}
.plan-rooms{position:absolute;inset:0}
.plan-room{position:absolute;display:flex;flex-direction:column;gap:4px;padding:clamp(8px,1.4vw,18px);text-decoration:none;color:var(--text);transition:background var(--t-base) var(--ease-out)}
.plan-room b{font-size:clamp(.95rem,1.55vw,1.4rem);line-height:1.05;text-transform:uppercase;letter-spacing:-.01em}
.plan-room small{font-size:clamp(.72rem,.95vw,.875rem);line-height:1.35;color:var(--text-muted);max-width:22ch}
.plan-room .mk{position:absolute;left:clamp(8px,1.4vw,18px);bottom:clamp(8px,1.4vw,18px);width:12px;height:12px;background:var(--marker)}
.plan-room .go{position:absolute;right:clamp(8px,1.4vw,18px);bottom:clamp(6px,1.2vw,14px);font-size:var(--fs-note);font-weight:var(--fw-medium);color:var(--accent);opacity:0;transform:translateX(-8px);transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
.plan-room .go{display:inline-flex;align-items:center;gap:8px}
.plan-room .go i{width:16px;height:1.5px;background:currentColor;position:relative}
.plan-room .go i::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1.5px solid;border-right:1.5px solid;transform:rotate(45deg)}
.plan-room:hover,.plan-room:focus-visible{background:var(--bg-raised)}
.plan-room:hover .go,.plan-room:focus-visible .go{opacity:1;transform:none}
.plan-room:focus-visible{outline-offset:-4px}
.plan-side{display:grid;gap:var(--sp-4);justify-items:start}
.plan-title{font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:var(--ls-head);text-transform:uppercase;font-weight:var(--fw-bold)}
.plan-side p{color:var(--text-muted);max-width:34ch}
.plan-count{font-size:var(--fs-note)}
.plan-count b{color:var(--accent);font-size:1rem}
/* Liste nur ohne JavaScript sichtbar (siehe noscript.css); mit JavaScript sind die Räume die Links */
.js .plan-list{display:none}
.plan-list{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.js .plan-svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
.js .plan-svg .dimt,.js .plan-room{opacity:0}
.js .plan-side{opacity:0;transform:translateY(20px)}

@media (max-width:860px){
  .plan{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-items:start;gap:var(--sp-4)}
  .plan-side{order:-1;gap:var(--sp-2)}
  .plan-side p:not(.plan-count),.plan-side .btn{display:none}
  .plan-title{font-size:clamp(1.6rem,7vw,2.2rem)}
  .plan-draw{--ar:600/900;width:min(100%,calc(64svh * 600 / 900))}
  .plan-room small{font-size:.7rem;max-width:16ch}
  .plan-room .go{display:none}
}

/* =====================================================================
   4 · Zwischenstück: ein Satz, das letzte Wort wechselt beim Scrollen
   ===================================================================== */
.zwischen{min-height:80vh;min-height:80svh;display:grid;place-items:center;padding:var(--section) var(--gutter);text-align:center}
.zw-room{width:min(100%,520px);height:auto;margin:0 auto var(--sp-6)}
.zw-room g .ln{transition:stroke var(--t-base) var(--ease-out),fill var(--t-base) var(--ease-out)}
.zw-room .fillable{fill:transparent}
.zw-room g.on .ln{stroke:var(--accent)}
.zw-room g.on .fillable{fill:rgb(31 61 120 / .1)}
.zw-room g.on .thin{stroke:var(--accent)}
.zwischen{align-content:center}
.zw-text{font-size:clamp(2rem,5.6vw,6rem);line-height:1.08;letter-spacing:var(--ls-display);text-transform:uppercase;font-weight:var(--fw-bold);max-width:16ch;text-wrap:balance}
.zw-word{display:inline-flex;flex-direction:column;align-items:center;vertical-align:top}
.zw-roll{display:inline-grid;overflow:hidden;padding-top:.16em;margin-top:-.16em;height:1.24em;color:var(--accent)}
.zw-roll>span{grid-area:1/1;justify-self:center;transition:transform var(--t-long) var(--ease-out)}
.zw-dim{--draw:1;width:var(--zw,100%);margin-top:.12em;transition:width var(--t-long) var(--ease-out)}
.js .zw-roll>span+span{transform:translateY(140%)}

/* =====================================================================
   5 · So arbeiten wir: Leitungsplan, Schritte im Wechsel links und rechts
   ===================================================================== */
.weg{max-width:var(--maxw);margin:0 auto;padding:var(--section) var(--gutter)}
.weg-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-6);align-items:end;margin-bottom:var(--sp-9)}
.weg-title{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-display);text-transform:uppercase;font-weight:var(--fw-bold)}
.weg-head p{color:var(--text-muted);font-size:var(--fs-lead);max-width:34ch}
.weg-body{position:relative}
.weg-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.weg-path{fill:none;stroke:var(--rule);stroke-width:2;stroke-linejoin:round}
.weg-path--on{stroke:var(--accent);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1}
.weg-dot{fill:var(--accent)}
.weg-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(5rem,12vw,10rem)}
.weg-step{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,6vw,6rem);align-items:center}
.weg-step:nth-child(even) .weg-art{order:2}
.weg-art{margin:0;padding:clamp(1rem,3vw,2.5rem);background:var(--bg-raised);border-radius:var(--radius-img);position:relative;z-index:1}
.weg-art .sketch{width:100%;height:auto}
.weg-text{display:grid;gap:var(--sp-3);justify-items:start;max-width:30rem;position:relative;z-index:1}
.weg-phase{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.02em}
.weg-phase::before{content:"";width:9px;height:9px;background:var(--marker)}
.weg-text h3{font-size:clamp(1.8rem,3.4vw,3.2rem);line-height:1;letter-spacing:var(--ls-head);text-transform:uppercase}
.weg-text p{color:var(--text-muted);font-size:var(--fs-lead);line-height:1.5}
.weg-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:var(--sp-3) 0 0;width:100%;box-shadow:inset 0 0 0 var(--stroke-dim) var(--text);border-radius:6px}
.weg-facts div{padding:10px 12px}
.weg-facts div+div{box-shadow:inset 1px 0 0 0 var(--text)}
.weg-facts dt{font-size:11px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.02em}
.weg-facts dd{margin:2px 0 0;font-size:var(--fs-note);color:var(--text-muted)}
.js .weg-text>*{opacity:0;transform:translateY(20px)}
@media (max-width:860px){
  .weg-head{grid-template-columns:1fr}
  .weg-list{gap:var(--sp-9);padding-left:36px}
  .weg-step{grid-template-columns:1fr;gap:var(--sp-5)}
  .weg-step:nth-child(even) .weg-art{order:0}
}

/* =====================================================================
   6 · Projekt Bad Endorf: Bild öffnet sich wie ein Fenster, Zitat steigt auf
   ===================================================================== */
.projekt{max-width:var(--maxw);margin:0 auto;padding:var(--section) var(--gutter)}
.pj-title{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-5);font-size:clamp(2.6rem,9vw,9.5rem);line-height:.95;letter-spacing:var(--ls-display);text-transform:uppercase;font-weight:var(--fw-bold)}
.pj-title span{display:block}
.pj-meta{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sp-4);margin:var(--sp-5) 0 var(--sp-4);font-size:15px;font-weight:var(--fw-medium)}
.pj-meta span:nth-child(2){color:var(--text-muted)}
.pj-meta span:last-child{text-align:right}
.pj-pic{position:relative;display:block;aspect-ratio:16/8;overflow:hidden;border-radius:var(--radius-img);background:var(--bg-raised);color:var(--c-white);text-decoration:none}
.pj-pic picture,.pj-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-pic picture{clip-path:inset(0% 0% 0% 0% round var(--radius-img));transition:clip-path .8s var(--ease-in-out)}
.pj-loc{position:absolute;left:0;right:0;bottom:2.4%;text-align:center;font-size:15px;font-weight:var(--fw-medium);color:var(--text);opacity:0;transform:translateY(10px);transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
.pj-note{position:absolute;right:12px;top:12px;font-size:11px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.02em;padding:5px 8px;background:var(--bg);color:var(--text-muted);border-radius:4px}
@media (hover:hover){
  .pj-pic:hover picture{clip-path:inset(4% 4% 12% 4% round var(--radius-img))}
  .pj-pic:hover .pj-loc{opacity:1;transform:none}
}
.pj-pic:focus-visible picture{clip-path:inset(4% 4% 12% 4% round var(--radius-img))}
.pj-pic:focus-visible .pj-loc{opacity:1;transform:none}
.pj-body{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--sp-8);margin-top:var(--sp-8);align-items:start}
.pj-text{display:grid;gap:var(--sp-5);justify-items:start}
.pj-sketch{width:min(100%,260px);height:auto}
.pj-text p{color:var(--text-muted);font-size:var(--fs-lead);line-height:1.45;max-width:34ch}
.pj-quote{margin:0}
.pj-quote blockquote{margin:0}
.pj-quote p{font-size:clamp(1.35rem,2.3vw,2.25rem);line-height:1.25;letter-spacing:-.01em;font-weight:var(--fw-medium);text-wrap:pretty}
.pj-quote mark{background:none;color:var(--accent);font-weight:var(--fw-bold)}
.pj-quote figcaption{margin-top:var(--sp-7);max-width:28rem}
.pj-dim{display:block}
.js .pj-quote .w{opacity:.15}
.js .pj-dim{--draw:0}
.js .pj-dim span{opacity:0}

@media (max-width:860px){
  .pj-meta{grid-template-columns:1fr 1fr;font-size:13px}
  .pj-meta span:nth-child(2){display:none}
  .pj-pic{aspect-ratio:4/3.4}
  .pj-body{grid-template-columns:1fr;gap:var(--sp-7)}
  .pj-loc{display:none}
}

/* =====================================================================
   7 · Was wir mitkoordinieren: vier Karten, Strichzeichnungen zeichnen sich selbst
   ===================================================================== */
.koord{max-width:var(--maxw);margin:0 auto;padding:var(--section) var(--gutter)}
.ko-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-6);align-items:end;margin-bottom:var(--sp-8)}
.ko-title{font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:var(--ls-head);text-transform:uppercase;font-weight:var(--fw-bold);max-width:14ch}
.ko-head p{color:var(--text-muted);font-size:var(--fs-lead);line-height:1.45;max-width:38ch}
.ko-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3)}
.ko-card{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);background:var(--bg-raised);border-radius:var(--radius-img);transition:transform var(--t-base) var(--ease-out)}
.ko-draw{width:100%;height:auto;aspect-ratio:340/240;margin-bottom:var(--sp-3);background:var(--bg);border-radius:calc(var(--radius-img) - 2px);overflow:visible}
.ko-draw .ln{fill:none;stroke:var(--text);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ko-draw .ac{stroke:var(--accent);stroke-width:2.4}
.ko-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.02em}
.ko-tag::before{content:"";width:8px;height:8px;background:var(--marker)}
.ko-card h3{font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.1;text-transform:uppercase;letter-spacing:-.01em}
.ko-card p{color:var(--text-muted);font-size:15px;line-height:1.5}
.ko-draw{transition:transform var(--t-base) var(--ease-out)}
@media (hover:hover){.ko-card:hover .ko-draw{transform:translateY(-6px)}}
.js .ko-draw [pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
.js .ko-card{opacity:0;transform:translateY(30px)}

@media (max-width:1100px){.ko-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.ko-head{grid-template-columns:1fr;gap:var(--sp-3);margin-bottom:var(--sp-6)}}
@media (max-width:560px){.ko-grid{grid-template-columns:1fr}}

.ko-draw .hole{fill:var(--bg);stroke:none}
.js .ko-draw .hole{opacity:0}

/* =====================================================================
   8 · Häufige Fragen: Antworten gleiten auf, ein blaues Maßband zieht sich
   ===================================================================== */
.faq{max-width:var(--maxw);margin:0 auto;padding:var(--section) var(--gutter);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--sp-8);align-items:start}
.faq-side{position:sticky;top:calc(var(--nav-h) + var(--sp-5));display:grid;gap:var(--sp-4);justify-items:start}
.faq-sketch{width:min(100%,280px);height:auto;margin-bottom:var(--sp-3)}
.faq-title{font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:var(--ls-head);text-transform:uppercase;font-weight:var(--fw-bold)}
.faq-side p{color:var(--text-muted);max-width:28ch}
.faq-item{position:relative;border-top:var(--stroke-dim) solid var(--rule);border-radius:var(--radius-img);transition:background var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out),opacity var(--t-base) var(--ease-out)}
.faq-item:last-child{border-bottom:var(--stroke-dim) solid var(--rule)}
.faq-item h3{margin:0;font-size:inherit}
.faq-item button{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-5);padding:var(--sp-5) 0;cursor:pointer;font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:var(--fw-bold);line-height:1.2;min-height:var(--tap);transition:padding .5s var(--ease-out),color var(--t-short) var(--ease-out)}
.faq-item button>span:first-child{position:relative;transition:transform .5s var(--ease-out)}
.faq-item button>span:first-child::before{content:"";position:absolute;left:-22px;top:50%;width:10px;height:10px;background:var(--marker);transform:translateY(-50%) scale(0);transition:transform var(--t-base) var(--ease-snap)}
.faq-item button:hover{color:var(--accent)}
.faq-item button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* Plus aus zwei Linien in einem Kreis, wird zum Kreuz */
.faq-item .pm{position:relative;width:40px;height:40px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 var(--stroke-line) currentColor;transition:transform .5s var(--ease-out),background var(--t-base),color var(--t-base)}
.faq-item .pm::before,.faq-item .pm::after{content:"";position:absolute;left:12px;right:12px;top:19px;height:2px;background:currentColor}
.faq-item .pm::after{transform:rotate(90deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-out)}
.faq-a>div{overflow:hidden}
.faq-a p{margin:0;padding:0 var(--sp-5) var(--sp-4) 0;color:var(--text-muted);font-size:var(--fs-lead);line-height:1.5;max-width:58ch;opacity:0;transform:translateY(16px);transition:opacity .4s var(--ease-out),transform .55s var(--ease-out)}
.faq-meter{display:block;position:relative;height:12px;margin:0 0 var(--sp-6);color:var(--accent);max-width:58ch}
.faq-meter::before{content:"";position:absolute;left:0;right:0;top:5.5px;border-top:1px solid currentColor;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out) .15s}
.faq-meter::after{content:"";position:absolute;inset:0;border-left:1px solid currentColor;border-right:1px solid currentColor;transform:scaleY(0);transition:transform var(--t-short) var(--ease-out)}
.faq-list:has(.open) .faq-item:not(.open){opacity:.55}
.faq-item.open{background:var(--bg-raised);border-color:transparent;padding:0 var(--sp-5)}
.faq-item.open+.faq-item{border-top-color:transparent}
.faq-item.open button{color:var(--text);padding-left:22px}
.faq-item.open button>span:first-child::before{transform:translateY(-50%) scale(1)}
.faq-item.open .pm{transform:rotate(135deg);background:var(--accent);color:var(--accent-text);box-shadow:none}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-item.open .faq-a p{opacity:1;transform:none;transition-delay:.15s}
.faq-item.open .faq-meter::before{transform:scaleX(1)}
.faq-item.open .faq-meter::after{transform:scaleY(1);transition-delay:.85s}
.js .faq-item{opacity:0;transform:translateY(24px)}
@media (max-width:860px){.faq{grid-template-columns:1fr;gap:var(--sp-6)}.faq-side{position:static}}

/* =====================================================================
   9 · Besichtigung vereinbaren: Einladung, große Nummer, Collage setzt sich zusammen
   ===================================================================== */
.ende{max-width:var(--maxw);margin:0 auto;padding:var(--section) var(--gutter) var(--sp-9);text-align:center;display:grid;justify-items:center;gap:var(--sp-5)}
.ende-title{font-size:var(--fs-display);line-height:1;letter-spacing:var(--ls-display);text-transform:uppercase;font-weight:var(--fw-bold)}
.ende-title .ln2{display:block;overflow:hidden;padding:.16em 0 .06em;margin:-.16em 0 -.06em}
.ende-title .ln2>span{display:block}
.js .ende-title .ln2>span{transform:translateY(140%)}
.ende-lead{color:var(--text-muted);font-size:var(--fs-lead);max-width:40ch}
.ende-tel{font-size:clamp(2.4rem,7vw,6.5rem);font-weight:var(--fw-bold);letter-spacing:-.03em;line-height:1;color:var(--accent);text-decoration:none;margin-top:var(--sp-4)}
.ende-tel .d{display:inline-block}
.ende-tel:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:10px}
.ende-ways{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:var(--sp-4) var(--sp-7);margin-top:var(--sp-3)}
.ende-art{position:relative;width:min(100%,62rem);margin-top:var(--sp-9);display:grid;gap:var(--sp-4)}
.ea-week{width:100%;height:auto}
.ea-week .blk{fill:var(--accent);opacity:.9}
.ea-week .lbl{font-size:15px}
.js .ea-dim{--draw:0}
.js .ea-dim span{opacity:0}
@media (max-width:860px){.ea-week .lbl{font-size:22px}.ende-ways{flex-direction:column;align-items:center;gap:var(--sp-4)}}

/* =====================================================================
   10 · Fuß
   ===================================================================== */
.fuss{background:var(--bg-raised);padding:var(--sp-9) var(--gutter) var(--sp-6);overflow:hidden}
.fu-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(0,4fr) repeat(4,minmax(0,2fr));gap:var(--sp-6)}
.fu-brand{display:grid;gap:var(--sp-4);align-content:start}
.fu-brand .logo{justify-self:start}
.fu-brand p{color:var(--text-muted);max-width:30ch}
.fu-col{display:grid;gap:8px;align-content:start;font-size:15px}
.fu-col h2{font-size:11px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.02em;margin-bottom:6px}
.fu-col a{text-decoration:none;width:max-content;max-width:100%;overflow-wrap:anywhere;position:relative}
.fu-col a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease-out)}
.fu-col a:hover{color:var(--accent)}
.fu-col a:hover::after{transform:scaleX(1)}
.fu-col p{color:var(--text-muted)}
.fu-word{max-width:var(--maxw);margin:var(--sp-9) auto 0;position:relative}
.fu-big{display:block;font-size:clamp(5rem,27vw,26rem);line-height:.78;font-weight:var(--fw-bold);letter-spacing:-.04em;text-align:center;color:var(--text)}
.fu-dim{--draw:1;display:block;margin-top:var(--sp-4)}
.fu-legal{max-width:var(--maxw);margin:var(--sp-6) auto 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3) var(--sp-6);font-size:var(--fs-note);color:var(--text-muted)}
.fu-links{display:flex;gap:var(--sp-5)}
.fu-links a{text-decoration:none}
.fu-links a:hover{color:var(--accent)}
.js .fu-dim{--draw:0}
@media (max-width:1000px){.fu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fu-brand{grid-column:1/-1}}
@media (max-width:560px){.fu-grid{grid-template-columns:1fr}}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  .js .curtain{display:none}
  .js .kopf-draw [pathLength]{stroke-dashoffset:0}
  .js .kopf-draw .dimt,.js .kopf-side{opacity:1}
  .js .kopf-sun,.js .kopf-title .ln2>span{transform:none}
  .js .haltung-text .w{color:var(--text)}
  .js .haltung-dim{--draw:1}.js .haltung-dim span{opacity:1}
  .js .plan-svg [pathLength]{stroke-dashoffset:0}
  .js .plan-svg .dimt,.js .plan-room,.js .plan-side{opacity:1;transform:none}
  .js .sketch [pathLength]{stroke-dashoffset:0}.js .sketch .lbl{opacity:1}
  .js .weg-text>*{opacity:1;transform:none}
  .weg-path--on{stroke-dashoffset:0}
  .js .zw-roll>span+span{display:none}
  .js .pj-quote .w{opacity:1}
  .js .pj-dim{--draw:1}.js .pj-dim span{opacity:1}
  .js .ko-draw [pathLength]{stroke-dashoffset:0}
  .js .ko-card{opacity:1;transform:none}
  .js .ko-draw .hole{opacity:1}
  .js .faq-item{opacity:1;transform:none}
  .js .ende-title .ln2>span,.js .ea-week .blk{transform:none}
  .js .ea-dim,.js .fu-dim{--draw:1}.js .ea-dim span{opacity:1}
}

/* =====================================================================
   UNTERSEITEN
   ===================================================================== */
/* ---------- Seitenkopf mit Zeichnung ---------- */
.ph-head{max-width:var(--maxw);margin:0 auto;padding:calc(var(--nav-h) + var(--sp-9)) var(--gutter) var(--sp-9);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-7);align-items:end}
.ph-text{container-type:inline-size}
.ph-title{font-size:min(var(--fs-display),12cqi);line-height:1;letter-spacing:var(--ls-display);text-transform:uppercase;font-weight:var(--fw-bold)}
.ph-title .ln2{display:block;overflow:hidden;padding:.16em 0 .06em;margin:-.16em 0 -.06em}
.ph-title .ln2>span{display:block}
.ph-sub{margin-top:var(--sp-5);max-width:44ch;color:var(--text-muted);font-size:var(--fs-lead);line-height:1.45}
.ph-art{width:100%;height:auto;max-height:44vh}
.ph-jump{display:flex;flex-wrap:wrap;gap:8px;max-width:none}
.ph-jump a{font-size:14px;font-weight:var(--fw-medium);color:var(--text);text-decoration:none;padding:8px 12px;border-radius:6px;box-shadow:inset 0 0 0 var(--stroke-dim) var(--text);transition:background var(--t-base) var(--ease-out),color var(--t-base) var(--ease-out)}
.ph-jump a:hover{background:var(--accent);color:var(--accent-text);box-shadow:none}
.js .ph-title .ln2>span{transform:translateY(140%)}
.js .ph-sub{opacity:0;transform:translateY(16px)}
@media (max-width:860px){.ph-head{grid-template-columns:1fr;padding-top:calc(var(--nav-h) + var(--sp-6));padding-bottom:var(--sp-7)}.ph-art{max-width:360px;order:-1}}

mark.check{background:rgb(31 61 120 / .1);color:var(--accent);font-weight:var(--fw-medium);padding:1px 5px;border-radius:4px}

/* ---------- Leistungen: Liste, Bild folgt der Maus ---------- */
.lst{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) var(--section)}
.lst-list{list-style:none;margin:0;padding:0}
/* Jede Leistung: Text und großes Bild, abwechselnd links und rechts */
.lst-row{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"name fig" "pts fig";gap:var(--sp-5) var(--sp-8);align-items:start;padding:var(--sp-9) 0;scroll-margin-top:calc(var(--nav-h) + 24px)}
.lst-row:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"fig name" "fig pts"}
.lst-row + .lst-row{border-top:var(--stroke-dim) solid var(--rule)}
.lst-name{grid-area:name;align-self:end}
.lst-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.02em}
.lst-tag::before{content:"";width:8px;height:8px;background:var(--marker)}
.lst-name h2{margin-top:var(--sp-3);font-size:clamp(1.8rem,3.6vw,3.4rem);line-height:1;letter-spacing:var(--ls-head);text-transform:uppercase}
.lst-points{grid-area:pts;list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start;color:var(--text-muted);font-size:var(--fs-lead);line-height:1.4}
.lst-points li{position:relative;padding-left:22px}
.lst-points li::before{content:"";position:absolute;left:0;top:.62em;width:12px;border-top:1.5px solid var(--accent)}
.lst-fig{grid-area:fig;margin:0;display:grid;gap:var(--sp-5)}
.lst-pic{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-img);background:var(--bg-raised)}
.lst-pic img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover}
.lst-row:target .lst-name h2{color:var(--accent)}
.js .lst-dim{--draw:0}
.js .lst-dim span{opacity:0}
@media (max-width:860px){.lst-row,.lst-row:nth-child(even){grid-template-columns:1fr;grid-template-areas:"fig" "name" "pts";gap:var(--sp-4);padding:var(--sp-7) 0}}

.koord--page{padding-top:0}
.ko-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.ko-grid--2{grid-template-columns:1fr}}

/* ---------- Abschluss-Band auf Unterseiten ---------- */
.cta-band{padding:0 var(--gutter) var(--section)}
.cta-in{max-width:var(--maxw);margin:0 auto;padding:clamp(2.5rem,6vw,5rem);border-radius:var(--radius-img);background:var(--bg-raised);display:grid;gap:var(--sp-4);justify-items:start}
.cta-in h2{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-display);text-transform:uppercase;max-width:16ch}
.cta-in p{color:var(--text-muted);font-size:var(--fs-lead);max-width:46ch}
.cta-ways{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-4) var(--sp-7);margin-top:var(--sp-3)}
.cta-tel{font-size:clamp(1.6rem,3vw,2.6rem);font-weight:var(--fw-bold);color:var(--accent);text-decoration:none;letter-spacing:-.02em;padding-bottom:20px}
.cta-tel:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

/* ---------- Projekte: Video und Instagram ---------- */
.video{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) var(--section);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-7);align-items:center}
.vd-frame{aspect-ratio:16/9;background:var(--bg-raised);border-radius:var(--radius-img);display:grid;place-items:center;padding:var(--sp-6)}
.vd-art{width:100%;height:auto}
.vd-text h2{font-size:var(--fs-h2);line-height:var(--lh-head);text-transform:uppercase;letter-spacing:var(--ls-head)}
.vd-text p{margin-top:var(--sp-4);color:var(--text-muted);font-size:var(--fs-lead);line-height:1.5}
.insta{padding:0 var(--gutter) var(--section)}
.in-in{max-width:var(--maxw);margin:0 auto;display:grid;gap:var(--sp-4);justify-items:start}
.in-in h2{font-size:var(--fs-h2);line-height:var(--lh-head);text-transform:uppercase;letter-spacing:var(--ls-head)}
.in-in p{color:var(--text-muted);font-size:var(--fs-lead);max-width:44ch}
.in-handle{display:inline-flex;align-items:center;gap:var(--sp-4);font-size:clamp(2rem,6vw,5.5rem);font-weight:var(--fw-bold);letter-spacing:-.03em;color:var(--accent);text-decoration:none;overflow-wrap:anywhere}
.in-handle i{width:.6em;height:3px;background:currentColor;position:relative;transition:width var(--t-base) var(--ease-out)}
.in-handle i::after{content:"";position:absolute;right:0;top:-.12em;width:.24em;height:.24em;border-top:3px solid;border-right:3px solid;transform:translateY(-1px) rotate(45deg)}
.in-handle:hover i{width:.9em}
@media (max-width:860px){.video{grid-template-columns:1fr}}

/* ---------- Über uns ---------- */
.person{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) var(--section);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-8);align-items:start}
.pe-portrait{margin:0;display:grid;gap:var(--sp-6)}
.pe-frame{position:relative;aspect-ratio:5/6;background:var(--bg-raised);border-radius:var(--radius-img);display:grid;place-items:center;padding:var(--sp-7)}
.pe-art{width:70%;height:auto}
.pe-note{position:absolute;left:var(--sp-4);bottom:var(--sp-4);font-size:11px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.02em;color:var(--accent);background:var(--bg);padding:5px 8px;border-radius:4px}
.pe-dim{display:block}
.js .pe-dim{--draw:0}.js .pe-dim span{opacity:0}
.pe-text{display:grid;gap:var(--sp-4);align-content:start}
.pe-text h2{font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:var(--ls-head);text-transform:uppercase}
.pe-text h3{margin-top:var(--sp-5);font-size:var(--fs-h3);text-transform:uppercase}
.pe-text p{color:var(--text-muted);font-size:var(--fs-lead);line-height:1.55;max-width:60ch}
.pe-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--text-muted)}
.pe-list li{position:relative;padding-left:22px}
.pe-list li::before{content:"";position:absolute;left:0;top:.7em;width:12px;border-top:1.5px solid var(--accent)}
.werte{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) var(--section)}
.werte-title{font-size:var(--fs-h2);line-height:var(--lh-head);text-transform:uppercase;letter-spacing:var(--ls-head);margin-bottom:var(--sp-7)}
.werte-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.werte-list li{background:var(--bg-raised);border-radius:var(--radius-img);padding:var(--sp-6) var(--sp-5);display:grid;gap:var(--sp-4);align-content:start}
.werte-list p{font-size:var(--fs-lead);line-height:1.45}
.stimme{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) var(--section)}
.pj-quote--solo{max-width:62rem}
@media (max-width:860px){.person{grid-template-columns:1fr}.werte-list{grid-template-columns:1fr}}

/* ---------- Kontakt: Schriftfeld-Formular in drei Blättern ---------- */
.kontakt{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) var(--section);display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--sp-8);align-items:start}
.form{border-radius:var(--radius-img);overflow:hidden;box-shadow:inset 0 0 0 var(--stroke-line) var(--text);background:var(--bg)}
.blatt{border:0;margin:0;padding:var(--sp-6) var(--sp-5) var(--sp-5)}
.blatt legend{float:left;width:100%;margin-bottom:var(--sp-5);font-size:var(--fs-h3);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:-.01em}
.blatt legend+*{clear:both}
.js .form .blatt{display:none}
.js .form[data-step="1"] .blatt[data-blatt="1"],.js .form[data-step="2"] .blatt[data-blatt="2"],.js .form[data-step="3"] .blatt[data-blatt="3"]{display:block;animation:blatt .55s var(--ease-out)}
@keyframes blatt{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2)}
.tile{position:relative;display:flex;align-items:flex-end;min-height:96px;padding:var(--sp-5) var(--sp-4) var(--sp-4);border-radius:6px;box-shadow:inset 0 0 0 var(--stroke-line) var(--rule);font-weight:var(--fw-medium);cursor:pointer;transition:box-shadow var(--t-base) var(--ease-out),background var(--t-base) var(--ease-out)}
.tile input{position:absolute;opacity:0;pointer-events:none}
.tile::after{content:"";position:absolute;right:12px;top:12px;width:12px;height:12px;border-radius:2px;box-shadow:inset 0 0 0 var(--stroke-line) var(--text);transition:background var(--t-short) var(--ease-out),transform var(--t-short) var(--ease-snap)}
.tile:hover{box-shadow:inset 0 0 0 var(--stroke-line) var(--text)}
.tile:has(input:checked){box-shadow:inset 0 0 0 2px var(--text);background:var(--bg-raised)}
.tile:has(input:checked)::after{background:var(--accent);box-shadow:none;transform:scale(1.15)}
.tile:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:6px;box-shadow:inset 0 0 0 var(--stroke-dim) var(--text);overflow:hidden}
.cells .cell{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 18px 12px;box-shadow:inset -1px -1px 0 0 var(--text);background:var(--bg);transition:background var(--t-base) var(--ease-out)}
.cells .cell.wide{grid-column:1/-1}
.cells .cell::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform var(--t-base) var(--ease-out)}
.cells .cell:focus-within{background:var(--c-white)}
.cells .cell:focus-within::before{transform:scaleY(1)}
.cells .cell label,.cells .cl{font-size:var(--fs-note);color:var(--text-muted)}
.cells .cell:focus-within label{color:var(--accent)}
.cells input,.cells textarea{all:unset;font:var(--fw-medium) clamp(1.05rem,1.4vw,1.2rem)/1.35 var(--font);color:var(--text);min-height:32px;width:100%;resize:vertical}
.cells input::placeholder{color:var(--text-muted);opacity:.7;font-weight:var(--fw-regular)}
.cells .cell.bad{box-shadow:inset 0 -3px 0 0 var(--c-error),inset -1px 0 0 0 var(--text)}
.err{font-size:var(--fs-note);color:var(--c-error);margin-top:var(--sp-3)}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.seg label{cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg span{display:inline-block;padding:6px 12px;border-radius:6px;box-shadow:inset 0 0 0 var(--stroke-dim) var(--text);font-size:14px;font-weight:var(--fw-medium);transition:background var(--t-short),color var(--t-short)}
.seg input:checked+span{background:var(--accent);color:var(--accent-text);box-shadow:none}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:var(--sp-5);font-size:15px;color:var(--text-muted);cursor:pointer}
.consent input{appearance:none;flex:none;width:22px;height:22px;margin:1px 0 0;border-radius:4px;box-shadow:inset 0 0 0 var(--stroke-line) var(--text);display:grid;place-items:center;cursor:pointer}
.consent input:checked{background:var(--accent);box-shadow:none}
.consent input:checked::after{content:"";width:6px;height:11px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(45deg)}
.consent input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sheet-foot{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-4) var(--sp-6);padding:var(--sp-4) var(--sp-5) var(--sp-5);background:var(--bg-raised)}
.sheet-foot .meta{font-size:var(--fs-note);color:var(--text-muted)}
.sheet-foot .meta b{display:block;color:var(--text);font-size:11px;text-transform:uppercase;letter-spacing:.02em}
.sheet-meter{flex:1 1 120px;height:3px;background:var(--rule);position:relative;align-self:center;border-radius:2px;overflow:hidden}
.sheet-meter i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--m,.333));transition:transform .5s var(--ease-out)}
.sheet-nav{display:flex;gap:var(--sp-5);align-items:flex-end;margin-left:auto}
button.btn{border:0;background:none;font:inherit;cursor:pointer;color:var(--text)}
.no-js .sheet-next,.no-js .sheet-back{display:none}
.no-js .sheet-send[hidden]{display:inline-flex!important}
.done{padding:var(--sp-7) var(--sp-5);background:var(--accent);color:var(--accent-text);display:grid;gap:var(--sp-3)}
.done h2{font-size:var(--fs-h2);text-transform:uppercase;line-height:1}
.done-sum{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:var(--sp-3) 0 0;font-size:15px}
.done-sum dt{font-weight:var(--fw-bold)}
.done-sum dd{margin:0;opacity:.9}
.k-side{display:grid;gap:var(--sp-4);align-content:start;position:sticky;top:calc(var(--nav-h) + var(--sp-5))}
.k-tel{font-size:clamp(1.8rem,2.8vw,2.6rem);font-weight:var(--fw-bold);color:var(--accent);text-decoration:none;letter-spacing:-.02em}
.k-side p{color:var(--text-muted)}
.k-ways{list-style:none;margin:0;padding:0;display:grid}
.k-addr{font-size:15px}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.kontakt{grid-template-columns:1fr}.k-side{position:static}.cells{grid-template-columns:1fr}.sheet-nav{margin-left:0}}

/* ---------- Rechtliches ---------- */
.is-legal .ph-head{padding-bottom:var(--sp-7)}
.is-legal .ph-art{max-height:30vh}
.legal{max-width:52rem;margin:0 auto;padding:0 var(--gutter) var(--section)}
.legal h2{margin:var(--sp-7) 0 var(--sp-3);font-size:var(--fs-h3);text-transform:uppercase}
.legal p{color:var(--text-muted);line-height:1.6}
.legal a{color:var(--accent)}
.legal-note{padding:var(--sp-4) var(--sp-5);background:var(--bg-raised);border-radius:var(--radius-img)}

/* ---------- Fehlerseite: Hier fehlt eine Wand ---------- */
.nf{min-height:100vh;min-height:100svh;max-width:var(--maxw);margin:0 auto;padding:calc(var(--nav-h) + var(--sp-7)) var(--gutter) var(--sp-8);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-7);align-items:center}
.nf-actions{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-6);align-items:flex-end}
.nf-auto{all:unset;cursor:pointer;font-size:15px;font-weight:var(--fw-medium);color:var(--accent);text-decoration:underline;text-underline-offset:4px;padding-bottom:20px}
.nf-auto:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.nf-game{background:var(--bg-raised);border-radius:var(--radius-img);padding:var(--sp-5)}
.nf-svg{width:100%;height:auto;touch-action:none;user-select:none}
.nf-wall{fill:none;stroke:var(--wall);stroke-width:14;stroke-linecap:square}
.nf-gap{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:6 6;animation:gap 1.2s linear infinite}
@keyframes gap{to{stroke-dashoffset:-24}}
.nf-hint{fill:var(--accent);font:600 15px var(--font)}
.nf-piece rect{fill:var(--accent);cursor:grab;transition:fill var(--t-short)}
.nf-piece:focus-visible rect{outline:none;stroke:var(--text);stroke-width:3}
.nf-piece.is-dragging rect{cursor:grabbing}
.nf-piece.is-set rect{fill:var(--wall)}
.nf-done{margin:var(--sp-4) 0 0;font-weight:var(--fw-bold);color:var(--accent)}
@media (max-width:860px){.nf{grid-template-columns:1fr;align-content:start}}

@media (prefers-reduced-motion:reduce){
  .js .ph-title .ln2>span{transform:none}.js .ph-sub{opacity:1;transform:none}
  .js .pe-dim{--draw:1}.js .pe-dim span{opacity:1}
  .nf-gap{animation:none}
}

.pen{fill:var(--accent);opacity:0;pointer-events:none}

/* Startseite im Handy-Menü */
.pm-home{align-self:flex-start;margin-bottom:var(--sp-4);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-head)}
.pm-home[aria-current="page"]{color:var(--accent)}

/* Anfrage direkt auf der Startseite */
.anfrage-home{padding-top:var(--sp-9)}
.ah-head{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) var(--sp-7);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--sp-4)}
.ah-title{font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:var(--ls-head);text-transform:uppercase;font-weight:var(--fw-bold);max-width:16ch}
.ah-sub{color:var(--text-muted);max-width:36ch}

/* =====================================================================
   Feinschliff (fx.js): Überschriften, Laufband, Zeiger, Maßband
   ===================================================================== */
.sw{display:inline-block;overflow:hidden;vertical-align:top;white-space:nowrap;padding:.16em .03em .08em;margin:-.16em -.03em -.08em}
.sc{display:inline-block;transform-origin:0 100%;will-change:transform}

.band{overflow:hidden;background:var(--accent);color:var(--c-plaster);padding:clamp(18px,2.4vw,30px) 0;margin:var(--sp-8) 0 0}
.band-track{display:flex;width:max-content;will-change:transform}
.band-set{display:flex;align-items:center;flex:none}
.band-set span{font-size:clamp(2.2rem,6.4vw,5.6rem);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-display);line-height:1;white-space:nowrap}
/* Trenner: kleines Haus, wippt mit dem Scrolltempo */
.band-set i{flex:none;display:grid;place-items:center;width:clamp(34px,4.4vw,68px);aspect-ratio:1;margin:0 clamp(18px,2.2vw,36px)}
.band-set svg{width:100%;height:100%;transform-origin:50% 100%;will-change:transform}
.band-set svg .h{fill:currentColor}
.band-set svg .d{fill:var(--accent)}

.nav-prog{position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none}
.nav-prog i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}

.cur{position:fixed;left:0;top:0;z-index:95;pointer-events:none;opacity:0;transition:opacity .3s var(--ease-out)}
.cur.on{opacity:1}
.cur-dot{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--accent);transition:transform .35s var(--ease-snap)}
.cur.is-hot .cur-dot{transform:scale(0)}
.cur.is-down .cur-dot{transform:scale(.6)}
.cur-lbl{position:absolute;left:16px;top:14px;padding:9px 13px;border-radius:var(--radius-btn);background:var(--accent);color:var(--c-plaster);font-size:13px;font-weight:var(--fw-medium);white-space:nowrap;transform:scale(0);transform-origin:0 0;transition:transform .4s var(--ease-snap)}
.cur.has-lbl .cur-lbl{transform:scale(1)}
.cur.has-lbl .cur-dot{transform:scale(1.4)}
.fl{display:inline-block}

/* Projektvideo: Vorschaubild mit Abspielknopf, YouTube erst nach Klick */
.pj-play{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:var(--sp-4);width:100%;border:0;background:linear-gradient(0deg,rgba(38,37,34,.35),rgba(38,37,34,0) 60%);color:var(--c-plaster);font:inherit;cursor:pointer;border-radius:var(--radius-img)}
.pp-ring{display:grid;place-items:center;width:clamp(64px,8vw,104px);aspect-ratio:1;border-radius:50%;background:var(--accent);transition:transform var(--t-base) var(--ease-snap)}
.pp-ring svg{width:42%;fill:currentColor;margin-left:6%}
.pp-t{display:grid;gap:4px;text-align:left;font-weight:var(--fw-bold);font-size:clamp(1rem,1.6vw,1.35rem);text-transform:uppercase;letter-spacing:var(--ls-head);text-shadow:0 1px 12px rgba(0,0,0,.25)}
.pp-t small{font-size:12px;font-weight:var(--fw-medium);text-transform:none;letter-spacing:0;opacity:.85}
.pj-play:hover .pp-ring,.pj-play:focus-visible .pp-ring{transform:scale(1.12)}
.pj-play:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.pj-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--radius-img)}
.pj-video.is-playing .pj-note{display:none}
@media (max-width:860px){.pj-play{flex-direction:column}.pp-t{text-align:center}}
.pj-video:hover picture,.pj-video:focus-within picture{clip-path:inset(0% 0% 0% 0% round var(--radius-img))}

.projekt{overflow-x:clip}

@media (prefers-reduced-motion:reduce){.js .lst-dim{--draw:1}.js .lst-dim span{opacity:1}}

/* Bewertungen: große Zahl, gezeichnete Sterne, Balken, drei Karten */
.bewertungen{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) var(--section);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--sp-9);align-items:start}
.bw-score{container-type:inline-size;display:grid;gap:var(--sp-4);justify-items:start;position:sticky;top:calc(var(--nav-h) + var(--sp-5))}
.bw-title{font-size:min(var(--fs-h2),11cqi);line-height:var(--lh-head);letter-spacing:var(--ls-head);text-transform:uppercase;font-weight:var(--fw-bold)}
.bw-num{font-size:clamp(5rem,11vw,10rem);font-weight:var(--fw-bold);line-height:.85;letter-spacing:-.04em;color:var(--accent)}
.bw-big{width:min(100%,300px);height:auto}
.bw-big .ln{stroke-width:1.3}
.bw-fill{fill:var(--accent)}
.bw-count{color:var(--text-muted)}
.bw-count b{color:var(--text)}
.bw-bars{list-style:none;margin:0;padding:0;display:grid;gap:6px;width:min(100%,300px);font-size:var(--fs-note);color:var(--text-muted)}
.bw-bars li{display:grid;grid-template-columns:14px 1fr 14px;align-items:center;gap:10px}
.bw-bars i{height:6px;border-radius:3px;background:var(--line);position:relative;overflow:hidden}
.bw-bars i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(calc(var(--v) * var(--bar,1)));transform-origin:left}
.bw-list{list-style:none;margin:0;padding:0;column-count:2;column-gap:var(--sp-4)}
.bw-card{display:grid;gap:var(--sp-4);align-content:start;padding:var(--sp-5);margin-bottom:var(--sp-4);background:var(--bg-raised);border-radius:var(--radius-img);break-inside:avoid}
.bw-card:first-child{background:var(--accent);color:var(--c-plaster)}
.bw-card:first-child .bw-av{background:var(--c-plaster);color:var(--accent)}
.bw-card:first-child small,.bw-card:first-child .bw-rate,.bw-card:first-child .bw-topic{color:rgba(247,246,242,.75)}
.bw-card:first-child .bw-stars svg{fill:var(--c-plaster)}
.bw-card:first-child .bw-text{font-size:1.2rem}
.bw-who{display:flex;align-items:center;gap:12px}
.bw-who b{display:block;font-weight:var(--fw-bold)}
.bw-who small{font-size:var(--fs-note);color:var(--text-muted)}
.bw-av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--c-plaster);font-weight:var(--fw-bold)}
.bw-rate{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-note);color:var(--text-muted)}
.bw-stars{display:inline-flex;gap:2px}
.bw-stars svg{width:16px;height:16px;fill:var(--accent)}
.bw-text{margin:0;line-height:1.5}
.bw-topic{font-size:var(--fs-note);color:var(--text-muted);display:flex;align-items:center;gap:8px}
.bw-topic::before{content:"";width:8px;height:8px;background:var(--marker)}
.bw-card:first-child .bw-topic::before{background:var(--c-plaster)}
.js .bw-fill{opacity:0}

@media (max-width:860px){.bewertungen{grid-template-columns:1fr}.bw-score{position:static}.bw-list{column-count:1}}
@media (prefers-reduced-motion:reduce){.js .bw-fill{opacity:1}}
.ea-week .lbl-closed{font-size:18px;font-weight:var(--fw-medium)}

/* Bildband: öffnet sich beim Scrollen, Foto gleitet langsamer als die Seite */
.bild{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) var(--section);display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
.bild-pic{position:relative;aspect-ratio:16/7;overflow:hidden;border-radius:var(--radius-img);background:var(--bg-raised)}
.bild-pic img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover}
.bild--duo{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
.bild--duo .bild-pic{aspect-ratio:4/3}
.bild--duo .bild-pic + .bild-pic{aspect-ratio:3/4;margin-top:18%}
.bild--duo .bild-dim{grid-column:1 / -1}
.js .bild-dim{--draw:0}
.js .bild-dim span{opacity:0}
@media (max-width:860px){.bild-pic{aspect-ratio:4/3}.bild--duo{grid-template-columns:1fr 1fr;gap:var(--sp-3)}.bild--duo .bild-pic,.bild--duo .bild-pic + .bild-pic{aspect-ratio:3/4}}
@media (prefers-reduced-motion:reduce){.js .bild-dim{--draw:1}.js .bild-dim span{opacity:1}}

/* Grundriss: beim Überfahren zeigt der Raum ein Foto der Leistung */
.plan-room{isolation:isolate}
.plan-room .pr-img{position:absolute;inset:0;z-index:-1;border-radius:4px;background-size:cover;background-position:center;opacity:0;clip-path:inset(50% 50% 50% 50%);transition:clip-path .6s var(--ease-in-out),opacity .3s}
.plan-room .pr-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(238,237,230,.92) 0%,rgba(238,237,230,.35) 50%,rgba(238,237,230,0) 80%)}
@media (hover:hover) and (pointer:fine){.plan-room:hover .pr-img,.plan-room:focus-visible .pr-img{opacity:1;clip-path:inset(0 0 0 0)}}

/* Plan wird Raum: Linien auf Papier, dann schiebt sich das Foto darunter und die Linien werden weiß */
.planfoto{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) var(--section);display:grid;gap:var(--sp-6)}
.pf-stage{position:relative;aspect-ratio:3/2;border-radius:var(--radius-img);overflow:hidden;background:var(--bg-raised)}
.pf-photo,.pf-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf-lines{position:absolute;inset:0;width:100%;height:100%}
.pf-lines .ln{stroke-width:2.4;transition:stroke .6s var(--ease-out)}
.pf-lines .lbl{font-size:17px;transition:fill .6s var(--ease-out)}
.planfoto.is-real .pf-lines .ln:not(.ac){stroke:var(--c-plaster)}
.planfoto.is-real .pf-lines .lbl{fill:var(--c-plaster)}
.planfoto.is-real .pf-lines .ac{stroke:var(--c-plaster)}
.pf-cap{font-size:clamp(1.6rem,3.6vw,3.2rem);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-head);line-height:1.05}
.pf-k{display:inline-block}
.pf-k + .pf-k{color:var(--accent)}
.js .pf-photo{clip-path:inset(100% 0% 0% 0%)}
@media (prefers-reduced-motion:reduce){.js .pf-photo{clip-path:none}.planfoto .pf-lines .ln:not(.ac){stroke:var(--c-plaster)}.planfoto .pf-lines .lbl{fill:var(--c-plaster)}}
.legal h2,.legal h3,.legal p{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}