/* ==========================================================================
   Szenen (03.11.2026): schematische Plan-Illustrationen für Fachschalen ohne Bildschirmfoto,
   Beratung und Daten. Grammatik wie bewegung.css: Linien werden gezogen, Daten fallen an ihre
   Lage, Lagen registrieren sich, die aktive Lage leuchtet als Acryl.
   - Grundzustand = Endzustand (ohne JS, Druck, „Bewegung reduzieren“).
   - Einmalig (.szene): szenen.js setzt .wartet, beim Eintritt .laeuft; Dauer gesamt < 3 s, keine Schleife.
   - Scroll-gekoppelt (.szene.scroll): benannte View-Timeline --szene, nur unter @supports; sonst einmalig.
   - Nur transform, opacity, stroke-dashoffset. Zeitstufe je Element über .t0 … .t11.
   ========================================================================== */

.szene .t0{--t:0}.szene .t1{--t:1}.szene .t2{--t:2}.szene .t3{--t:3}.szene .t4{--t:4}.szene .t5{--t:5}.szene .t6{--t:6}.szene .t7{--t:7}.szene .t8{--t:8}.szene .t9{--t:9}.szene .t10{--t:10}.szene .t11{--t:11}

/* ---- Platte und Zeichenstil ---- */
.szene{position:relative;margin:0}
.szene-platte{background:var(--platte);padding:10px;border-bottom:6px solid var(--kante);box-shadow:var(--plattenschatten)}
.dunkel .szene-platte{background:#16212b;border-bottom-color:#0a1016;box-shadow:0 40px 70px -30px #000,0 0 0 1px rgba(255,255,255,.06)}
.szene svg{display:block;width:100%;height:auto;overflow:visible}
.szene figcaption{margin-top:.7rem}
.szene .grund{fill:#f4f6f8}
.szene .block{fill:#eaeef2;stroke:#c5cdd5;stroke-width:1}
.szene .flst{fill:none;stroke:#c5cdd5;stroke-width:1}
.szene .haus{fill:#dce2e8;stroke:#aab5c0;stroke-width:1}
.szene .strasse{fill:#fff}
.szene .rand{fill:none;stroke:#9aa6b2;stroke-width:1.2}
.szene .achse{fill:none;stroke:#c5cdd5;stroke-width:1;stroke-dasharray:8 7}
.szene .acryl{fill:var(--acryl)}
.szene .acryl-linie{fill:none;stroke:var(--acryl);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.szene .hauch{fill:var(--acryl);fill-opacity:.14}
.szene .tusche{fill:var(--tusche)}
.szene .tusche-linie{fill:none;stroke:var(--tusche);stroke-width:1.2}
.szene .grau-linie{fill:none;stroke:var(--tusche-2);stroke-width:1.2}
.szene .weiss{fill:#fff}
.szene .weiss-rand{fill:#fff;stroke:var(--tusche);stroke-width:1}
.szene .balken{fill:#d5dce3}
.szene text{font:600 13px var(--plan);font-stretch:85%;letter-spacing:.02em;fill:var(--tusche)}
.szene text.klein{font-size:11px;letter-spacing:.06em;text-transform:uppercase;fill:var(--tusche-2)}
.szene text.gross{font-size:17px;font-stretch:96%}
.szene text.blau{fill:var(--acryl)}
.dunkel .szene text{fill:var(--licht)}
.dunkel .szene text.klein{fill:var(--licht-2)}
.dunkel .szene text.blau{fill:var(--acryl-licht)}
.szene .legende-feld{fill:rgba(255,255,255,.94);stroke:var(--tusche);stroke-width:.8}

/* Animierbare Elemente: Grundzustand fertig */
.szene .s-strich{stroke-dasharray:1;stroke-dashoffset:0}
.szene :is(.s-fall,.s-wachs,.s-heben,.s-schieben,.s-ein,.s-saeule){transform-box:fill-box;transform-origin:50% 50%}
.szene .s-saeule{transform-origin:50% 100%}
.szene .s-linie{transform-origin:0 50%}
.szene .s-fall{transform-origin:50% 100%}

@keyframes sz-strich{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sz-fall{from{opacity:0;transform:translateY(-28px) scale(.7)}to{opacity:1;transform:none}}
@keyframes sz-wachs{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes sz-heben{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes sz-ein{from{opacity:0}to{opacity:1}}
@keyframes sz-saeule{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:none}}
@keyframes sz-linie{from{transform:scaleX(0)}to{transform:none}}
@keyframes sz-schieben{from{transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--rot,0deg))}to{transform:none}}

@media (prefers-reduced-motion:no-preference){
  /* Einmalig beim Eintritt */
  .szene.wartet :is(.s-fall,.s-wachs,.s-heben,.s-ein,.s-saeule,.s-linie){opacity:0}
  .szene.wartet .s-strich{stroke-dashoffset:1}
  .szene.wartet .s-schieben{transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--rot,0deg))}
  .szene.laeuft :is(.s-strich,.s-fall,.s-wachs,.s-heben,.s-ein,.s-schieben,.s-saeule,.s-linie){animation-duration:.9s;animation-timing-function:var(--ease);animation-fill-mode:both;animation-delay:calc(var(--t,0) * 160ms)}
  .szene.laeuft .s-strich{animation-name:sz-strich;animation-duration:1s;animation-timing-function:cubic-bezier(.45,0,.25,1)}
  .szene.laeuft .s-fall{animation-name:sz-fall}
  .szene.laeuft .s-wachs{animation-name:sz-wachs}
  .szene.laeuft .s-heben{animation-name:sz-heben}
  .szene.laeuft .s-ein{animation-name:sz-ein;animation-timing-function:linear;animation-duration:.6s}
  .szene.laeuft .s-schieben{animation-name:sz-schieben;animation-duration:1.4s}
  .szene.laeuft .s-saeule{animation-name:sz-saeule}
  .szene.laeuft .s-linie{animation-name:sz-linie}

  /* Scroll-gekoppelt (umkehrbar) */
  @supports (animation-timeline:view()){
    .szene.scroll{view-timeline-name:--szene}
    .szene.scroll :is(.s-strich,.s-fall,.s-wachs,.s-heben,.s-ein,.s-schieben,.s-saeule,.s-linie){animation-fill-mode:both;animation-timing-function:var(--ease);animation-timeline:--szene;animation-range:entry calc(20% + var(--t,0) * 5%) cover calc(18% + var(--t,0) * 3%)}
    .szene.scroll .s-strich{animation-name:sz-strich;animation-timing-function:linear}
    .szene.scroll .s-fall{animation-name:sz-fall}
    .szene.scroll .s-wachs{animation-name:sz-wachs}
    .szene.scroll .s-heben{animation-name:sz-heben}
    .szene.scroll .s-ein{animation-name:sz-ein;animation-timing-function:linear}
    .szene.scroll .s-schieben{animation-name:sz-schieben}
    .szene.scroll .s-saeule{animation-name:sz-saeule}
    .szene.scroll .s-linie{animation-name:sz-linie}
    /* Fokussierte Inhalte immer im Endzustand */
    .szene.scroll:focus-within *{animation:none!important}
  }
}

/* ---- Fachschalen ohne Bildschirmfoto ---- */
.fach-szene .szene-platte svg{aspect-ratio:1.6}
.legende-szene{margin-top:1rem}

/* Harmonisierung (Beratung, dunkel) */
.harmonie-raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.harmonie .platte-a{fill:#23384a;stroke:#5a7a94;stroke-width:1.2}
.harmonie .platte-kante{fill:#0d151c}
.harmonie .muster-linie{stroke:#5a7a94;stroke-width:1}
.harmonie .passkreuz{fill:none;stroke:var(--acryl-licht);stroke-width:1.6}
.harmonie .acryl-platte{fill:rgba(0,111,183,.32);stroke:var(--acryl-licht);stroke-width:1.6}
.harmonie .acryl-kante{fill:#004a80}
.harmonie .leit{fill:none;stroke:#4d6274;stroke-width:1}
.v1{--dx:-120px;--dy:-34px;--rot:-9deg}.v2{--dx:110px;--dy:-10px;--rot:7deg}.v3{--dx:-60px;--dy:46px;--rot:4deg}
@media (max-width:900px){.harmonie-raster{grid-template-columns:minmax(0,1fr)}}

/* Beratung: Abbildungen unter dem Text */
.beratung-abb{margin-top:2.2rem;max-width:var(--text)}

/* Daten: Formate registrieren sich, Datenbestand wächst */
.praxis-ort{display:grid;grid-template-columns:minmax(0,1fr) 11rem;gap:clamp(1.2rem,3vw,2.5rem);align-items:end;margin-top:2.2rem}
.praxis-ort h3{margin-top:0}
.stapel-klein svg{width:100%;height:auto;overflow:visible}
.stapel-klein .lage-k{fill:#fff;stroke:#aab5c0;stroke-width:1}
.stapel-klein .lage-k-kante{fill:#c5cdd5}
.stapel-klein .lage-k.oben{fill:rgba(0,111,183,.2);stroke:var(--acryl)}
.stapel-klein .lage-k-kante.oben{fill:var(--acryl)}
.stapel-klein figcaption{font-size:.8rem;color:var(--tusche-2);margin-top:.4rem;text-align:center}
@media (max-width:560px){.praxis-ort{grid-template-columns:minmax(0,1fr) 6.5rem}}

@media print{.szene *{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}}

/* Legende unter einer Szene (HTML, damit sie mobil lesbar bleibt) */
.szene-legende{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;list-style:none;padding:0!important;margin-top:.75rem;font-size:.86rem;color:var(--tusche-2)}
.szene-legende li{display:flex;align-items:center;gap:.45rem;margin:0!important}
.szene-legende svg{width:18px;height:12px;flex:none}
.dunkel .szene-legende{color:var(--licht-2)}

/* Einbettung: Fachschalen-Karte (die Szene bringt ihre eigene Platte mit) und Legenden-Detail (liegt schon auf einer Platte) */
.fach-karte figure.szene,.fach-karte figure.szene:hover{background:none;padding:0;border:0;box-shadow:none;transform:none}
.fach-detail .szene{margin-top:0}
.fach-detail .szene-platte{padding:0;border-bottom:0;box-shadow:none;outline:1px solid var(--linie)}

/* Beratung: Kosten */
.szene .hauch-voll{fill:var(--acryl);fill-opacity:.3}
/* Beratung: Workshops */
.ws-band{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,13rem);gap:1rem 1.2rem;align-items:center;background:var(--platte);padding:1.4rem 1.4rem 1.2rem;border-bottom:6px solid var(--kante);box-shadow:var(--plattenschatten)}
.ws-titel{display:block;font:600 .8rem/1.2 var(--plan);font-stretch:78%;letter-spacing:.08em;text-transform:uppercase;color:var(--tusche-2);margin-bottom:.6rem}
.ws-reihe{list-style:none;padding:0!important;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;margin:0!important}
.ws-platte{display:grid;gap:.15rem;padding:.6rem .55rem .55rem;background:var(--acryl-hauch);border-bottom:3px solid var(--acryl);margin:0!important;font-size:.8rem;line-height:1.2;color:var(--tusche-2)}
.ws-platte b{font:640 1.25rem/1 var(--plan);color:var(--acryl-tief)}
.ws-platte.optional{background:transparent;border:1.5px dashed var(--feld-rand);border-bottom-width:3px}
.ws-platte.optional b{color:var(--tusche-2)}
.ws-mass{position:relative;display:block;margin-top:.7rem;height:1px;background:var(--tusche)}
.ws-mass::before,.ws-mass::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--tusche)}
.ws-mass::before{left:0}.ws-mass::after{right:0}
.ws-mass span{position:absolute;left:50%;top:.35rem;translate:-50% 0;font-size:.78rem;color:var(--tusche-2);white-space:nowrap;background:var(--platte);padding:0 .4rem}
.szene .ws-pfeil{width:40px;height:16px;color:var(--tusche-2)}
.ws-folge{list-style:none;padding:0!important;display:grid;gap:.4rem;margin:0!important}
.ws-folge li{margin:0!important;font-size:.88rem;line-height:1.3;padding:.5rem .7rem;background:#fff;box-shadow:inset 0 0 0 1px var(--linie)}
.ws-folge .ws-ergebnis{background:var(--acryl);color:#fff;box-shadow:none;font-weight:600}
.abb-workshops{padding-bottom:.6rem}
@media (max-width:700px){
  .ws-band{grid-template-columns:minmax(0,1fr)}
  .szene .ws-pfeil{rotate:90deg;justify-self:center;margin-top:1.8rem}
}
@media (max-width:400px){.ws-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Beratung: Projekt */
.pj-reihe{list-style:none;padding:0!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:0!important;counter-reset:pj}
.pj-teil{position:relative;margin:0!important;background:var(--platte);padding:.8rem .8rem .9rem;border-bottom:6px solid var(--kante);box-shadow:var(--plattenschatten)}
.pj-teil + .pj-teil::before{content:"";position:absolute;left:-.8rem;top:50%;width:.8rem;height:1px;background:var(--tusche-2)}
.pj-teil svg{width:100%;height:auto;aspect-ratio:160/110}
.pj-name{display:flex;gap:.5rem;align-items:baseline;margin-top:.5rem;font:640 .98rem/1.2 var(--plan);font-stretch:96%}
.pj-name b{font-size:.8rem;color:var(--acryl)}
.szene .zelle{fill:#eef1f4;stroke:#c5cdd5;stroke-width:1}
.szene .zelle.voll{fill:var(--acryl);fill-opacity:.55;stroke:var(--acryl)}
.szene .acryl-karte{fill:var(--acryl)}
.szene .weiss-linie{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.pj-reihe{grid-template-columns:minmax(0,1fr)}.pj-teil + .pj-teil::before{left:50%;top:-.8rem;width:1px;height:.8rem}.pj-teil svg{max-width:16rem}}
.text .formate.szene{margin-top:1rem}
.text .praxis-ort{margin-top:2.2rem}
.text .praxis-ort h3{margin-top:0}
.text .beratung-abb{margin-top:2.2rem}