/* Interaktive Szenen (Modul szene). Nur Tokens aus design.css, alles unter .m-szene, damit nichts außerhalb des Moduls greift. */
/* ===== Szenen: neue Bausteine, nur mit Tokens aus design.css ===== */
/* Fläche wie das Glas der Prompt-Bibliothek, je Untergrund passend */
.m-szene .sz{--sz-bg:var(--white);--sz-line:var(--line);--sz-sk:var(--cream-2);--sz-soft:var(--cream);--sz-hl:var(--petrol);--sz-on-hl:var(--auf-petrol);--sz-text:var(--ink);--sz-muted:var(--muted);--sz-tief:var(--petrol-tief);
  position:relative;border-radius:var(--r-lg);padding:clamp(18px,2.2vw,26px);background:var(--sz-bg);border:1px solid var(--sz-line);color:var(--sz-text);box-shadow:0 30px 80px -40px rgba(23,19,26,.35);overflow:hidden;font-size:15.5px;line-height:1.45}
.m-szene.bg-grey .sz{--sz-bg:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.035));--sz-line:rgba(255,255,255,.14);--sz-sk:rgba(255,255,255,.12);--sz-soft:rgba(255,255,255,.07);--sz-text:var(--on-dark);--sz-muted:var(--on-dark-soft);--sz-tief:var(--petrol);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 80px -30px rgba(0,0,0,.45)}
.m-szene.bg-petrol .sz{--sz-bg:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.14));--sz-line:rgba(255,255,255,.34);--sz-sk:rgba(8,20,19,.13);--sz-soft:rgba(255,255,255,.26);--sz-hl:var(--auf-petrol);--sz-on-hl:#fff;--sz-text:var(--auf-petrol);--sz-muted:rgba(8,20,19,.62);--sz-tief:var(--auf-petrol);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 80px -34px rgba(8,20,19,.45)}
.m-szene .sz-k{font-size:13.5px;font-weight:600;color:var(--sz-muted)}
.m-szene .sz-t{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.015em;line-height:1.2;font-size:21px}
.m-szene .sz-sk{display:block;height:9px;border-radius:6px;background:var(--sz-sk);width:var(--w,100%)}
.m-szene .sz-sk + .sz-sk{margin-top:9px}
.m-szene .sz-chip{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;padding:5px 12px;border-radius:999px;background:var(--sz-soft);color:var(--sz-text);white-space:nowrap}
.m-szene .sz-chip.hl{background:var(--sz-hl);color:var(--sz-on-hl)}
.m-szene .sz-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;background:var(--sz-soft);border:1px solid var(--sz-line);font-size:15.5px;font-weight:500;min-height:48px}
.m-szene .sz-bar svg{flex:none;color:var(--sz-muted)}
.m-szene .sz-q{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-szene .sz-caret{width:2px;height:19px;background:var(--sz-hl);margin-left:-8px;animation:szBlink 1s steps(1) infinite}
@keyframes szBlink{50%{opacity:0}}
.m-szene .sz-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.m-szene .sz-punkt{width:8px;height:8px;border-radius:50%;background:var(--sz-hl);box-shadow:0 0 0 4px color-mix(in srgb,var(--sz-hl) 25%,transparent);animation:szPuls 1.6s infinite}
@keyframes szPuls{50%{box-shadow:0 0 0 7px transparent}}
.m-szene .sz .mk{background:var(--sz-hl);color:var(--sz-on-hl)}
.m-szene .sz-auf{opacity:0;translate:0 10px;transition:opacity .5s var(--ease),translate .5s var(--ease)}
.m-szene .sz-auf.da{opacity:1;translate:0 0}
/* Feature neben Text: so breit wie das heutige Foto */
.m-szene .split > .sz,.m-szene .split > .sz-wrap{width:100%;max-width:560px;justify-self:end}
.m-szene .split--links > .sz,.m-szene .split--links > .sz-wrap{justify-self:start}

/* S-1: Wo hakt es */
.m-szene .hakt{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start}
.m-szene .hakt-liste{display:grid;gap:8px}
.m-szene .hakt-liste button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 20px;border-radius:var(--r);background:var(--cream);font-size:16.5px;font-weight:600;color:var(--ink);position:relative;overflow:hidden;transition:background .3s,color .3s}
.m-szene .hakt-liste button::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--petrol);transform-origin:left;transform:scaleX(0)}
.m-szene .hakt-liste button[aria-pressed="true"]{background:var(--grey);color:#fff}
.m-szene .hakt-liste button[aria-pressed="true"]::after{animation:szLauf var(--dauer,9s) linear forwards}
.m-szene .hakt-liste button.fest::after{animation:none;transform:scaleX(1)}
.m-szene .hakt-liste svg{opacity:.5}
@keyframes szLauf{to{transform:scaleX(1)}}
.m-szene .chat{display:grid;gap:14px;min-height:390px;align-content:start}
.m-szene .blase{max-width:86%;padding:14px 18px;border-radius:18px 18px 18px 6px;background:var(--sz-soft);font-size:16px}
.m-szene .blase.du{justify-self:end;border-radius:18px 18px 6px 18px;background:var(--grey);color:#fff}
.m-szene .antwort-kopf{display:flex;gap:12px;align-items:center}
.m-szene .ava{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 30%;flex:none}
.m-szene .tipp{display:inline-flex;gap:4px}
.m-szene .tipp i{width:6px;height:6px;border-radius:50%;background:var(--sz-muted);animation:szTipp 1s infinite}
.m-szene .tipp i:nth-child(2){animation-delay:.15s}.m-szene .tipp i:nth-child(3){animation-delay:.3s}
@keyframes szTipp{50%{transform:translateY(-4px);opacity:.4}}
.m-szene .schritte{display:grid;gap:10px}
.m-szene .schritte > div{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-sm);background:var(--sz-soft)}
.m-szene .schritte .no{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sz-hl);color:var(--sz-on-hl);font-size:13.5px;font-weight:700}
.m-szene .thema-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--petrol-tief);text-decoration:none;font-size:15.5px}

/* S-2: Gesprächsnotiz */
.m-szene .sz.gesp{padding-bottom:128px}
.m-szene .gesp .uhr{font-variant-numeric:tabular-nums;font-weight:600;font-size:15px}
.m-szene .gesp .lauf{height:4px;border-radius:4px;background:var(--sz-sk);overflow:hidden;margin:-4px 0 18px}
.m-szene .gesp .lauf i{display:block;height:100%;width:0;background:var(--sz-hl)}
.m-szene .gesp .zitat{background:#fff;color:var(--ink);border-radius:var(--r-sm);padding:14px 16px;font-size:16px;min-height:72px;box-shadow:0 18px 40px -26px rgba(8,20,19,.5)}
.m-szene .gesp .zitat small{display:block;font-size:13px;font-weight:600;color:var(--petrol-tief);margin-bottom:4px}
.m-szene .stapel{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:34px;margin:16px 0 12px}
.m-szene .spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.m-szene .spalten > div{border-radius:var(--r-sm);background:var(--sz-soft);padding:10px;min-height:118px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.m-szene .spalten .sz-k{color:var(--sz-text);margin-bottom:2px}
.m-szene .gesp .sz-chip{background:#fff;color:var(--auf-petrol);font-size:13px;padding:5px 10px;white-space:normal;line-height:1.25}
.m-szene .spalten .weg .sz-chip{text-decoration:line-through;opacity:.55}
.m-szene .schritt-karte{position:absolute;left:clamp(18px,2.2vw,26px);right:clamp(18px,2.2vw,26px);bottom:clamp(18px,2.2vw,26px);background:var(--auf-petrol);color:#fff;border-radius:var(--r);padding:16px 18px;transform:translateY(calc(100% + 40px));transition:transform .7s var(--ease)}
.m-szene .schritt-karte.da{transform:none}
.m-szene .schritt-karte small{display:block;font-size:13px;font-weight:600;color:var(--petrol);margin-bottom:4px}

/* L-1: Themen-Werkbank */
.m-szene .werkbank{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:start}
.m-szene .wb-liste{display:grid;gap:6px}
.m-szene .wb-liste > div{border-radius:var(--r);background:var(--white);overflow:hidden;position:relative}
.m-szene .wb-liste button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;align-items:center;padding:14px 18px}
.m-szene .wb-liste .step-no b{width:38px;height:38px;font-size:13.5px}
.m-szene .wb-liste h3{font-size:clamp(19px,1.6vw,21px)}
.m-szene .wb-mehr{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.m-szene .wb-mehr > div{overflow:hidden;padding:0 18px 0 70px;font-size:16px;color:var(--ink-soft)}
.m-szene .wb-liste .offen .wb-mehr{grid-template-rows:1fr}
.m-szene .wb-liste .offen .wb-mehr > div{padding-bottom:18px}
.m-szene .wb-liste .wb-mehr .txt-chk{margin-top:10px}
.m-szene .wb-liste > div::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--petrol);transform-origin:left;transform:scaleX(0)}
.m-szene .wb-liste > div.offen::after{animation:szLauf var(--dauer,8s) linear forwards}
.m-szene .wb-liste > div.offen.fest::after{animation:none;transform:scaleX(0)}
.m-szene .wb-geraet{position:sticky;top:90px}
.m-szene .wb-buehne{position:relative;height:360px;margin-top:6px}
.m-szene .wb-buehne > *{position:absolute;inset:0}
/* Szene 1 */
.m-szene .p1-satz{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(22px,2.2vw,28px);line-height:1.6;letter-spacing:-.015em;inset:0 0 auto 0;position:absolute}
.m-szene .slot{display:inline-block;min-width:120px;border-bottom:2px dashed var(--line);vertical-align:baseline;min-height:1.3em}
.m-szene .slot .wort{font-family:'Inter',sans-serif;font-size:15px}
.m-szene .p1-pool{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;gap:8px}
.m-szene .wort{display:inline-flex;font-size:15px;font-weight:600;padding:7px 14px;border-radius:999px;background:var(--cream);transition:opacity .4s,background .4s,color .4s}
.m-szene .wort.weg{opacity:.35;text-decoration:line-through}
.m-szene .wort.sitzt{background:var(--petrol);color:var(--auf-petrol)}
/* Szene 2 */
.m-szene .k-gitter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-content:start}
.m-szene .k-kachel{border-radius:var(--r-sm);background:var(--cream);padding:12px 14px;transition:opacity .5s,background .5s,color .5s}
.m-szene .k-kachel b{display:block;font-size:15.5px}
.m-szene .k-kachel span{font-size:13px;color:var(--muted)}
.m-szene .k-kachel .bal{height:6px;border-radius:6px;background:var(--cream-2);margin-top:10px;overflow:hidden}
.m-szene .k-kachel .bal i{display:block;height:100%;width:0;background:var(--petrol-tief);transition:width .9s var(--ease)}
.m-szene .k-kachel.pause{opacity:.35}
.m-szene .k-kachel.bleibt{background:var(--petrol);color:var(--auf-petrol)}
.m-szene .k-kachel.bleibt span{color:var(--auf-petrol)}
.m-szene .k-kachel.bleibt .bal{background:rgba(8,20,19,.15)}.m-szene .k-kachel.bleibt .bal i{background:var(--auf-petrol)}
.m-szene .k-summe{position:absolute;left:0;right:0;bottom:0;inset:auto 0 0 0;display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;border-top:1px solid var(--line)}
.m-szene .k-summe .num{font-family:'Fraunces',Georgia,serif;font-size:40px;line-height:1;color:var(--petrol-tief)}
/* Szene 3 */
.m-szene .serp{display:grid;gap:12px;align-content:start}
.m-szene .serp-liste{position:relative;display:grid;gap:8px}
.m-szene .serp-z{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r-sm);background:var(--cream)}
.m-szene .serp-z .pl{font-size:13px;font-weight:700;color:var(--muted);text-align:center}
.m-szene .serp-z.du{background:var(--petrol);color:var(--auf-petrol)}
.m-szene .serp-z.du .pl{color:var(--auf-petrol)}
.m-szene .serp-z .u{font-size:13px;font-weight:600}
/* Szene 4 */
.m-szene .plan{display:grid;grid-template-columns:86px repeat(13,minmax(0,1fr));gap:5px;align-items:center;font-size:13px;font-weight:600;color:var(--muted)}
.m-szene .plan i{height:22px;border-radius:6px;background:var(--cream);transition:background .3s,transform .3s var(--ease)}
.m-szene .plan i.b{background:var(--petrol-tief)}.m-szene .plan i.n{background:var(--petrol)}.m-szene .plan i.r{background:var(--grey)}
.m-szene .plan i.an{transform:scale(1.12)}
.m-szene .plan-leg{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;font-size:13.5px;font-weight:600}
.m-szene .plan-leg span{display:flex;gap:6px;align-items:center}.m-szene .plan-leg i{width:12px;height:12px;border-radius:4px;display:inline-block}
.m-szene .plan-zahl{position:absolute;left:0;right:0;bottom:0;inset:auto 0 0 0;display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:14px}
.m-szene .plan-zahl .num{font-family:'Fraunces',Georgia,serif;font-size:40px;line-height:1;color:var(--petrol-tief)}
/* Szene 5 */
.m-szene .rechner{display:grid;gap:8px}
.m-szene .rechner > div{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px;border-radius:var(--r-sm);background:var(--cream);opacity:.4;transition:opacity .4s,background .4s}
.m-szene .rechner > div.da{opacity:1}
.m-szene .rechner > div.end{background:var(--petrol);color:var(--auf-petrol)}
.m-szene .rechner b{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:26px;font-variant-numeric:tabular-nums}
.m-szene .rechner-fazit{position:absolute;inset:auto 0 0 0;font-size:15.5px;font-weight:600;color:var(--petrol-tief)}
/* Szene 6 */
.m-szene .ki-aus{margin-top:14px;border-radius:var(--r-sm);background:var(--cream);padding:14px 16px;min-height:150px}
.m-szene .ki-aus .sz-sk{--sz-sk:var(--cream-2);clip-path:inset(0 100% 0 0);transition:clip-path .7s var(--ease)}
.m-szene .ki-aus .sz-sk.da{clip-path:inset(0 0 0 0)}
.m-szene .ki-aus .muster{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.m-szene .ki-zeit{position:absolute;inset:auto 0 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-szene .ki-zeit > div{border-radius:var(--r-sm);padding:12px 14px;background:var(--cream)}
.m-szene .ki-zeit > div + div{background:var(--petrol);color:var(--auf-petrol)}
.m-szene .ki-zeit b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:26px}
/* Szene 7 */
.m-szene .kurve{width:100%;height:210px;display:block}
.m-szene .kurve .gl{stroke:var(--line);stroke-width:1}
.m-szene .kurve .ln{fill:none;stroke:var(--petrol-tief);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.m-szene .kurve .fl{fill:var(--petrol);opacity:.14}
.m-szene .kurve circle{fill:#fff;stroke:var(--petrol-tief);stroke-width:2.5}
.m-szene .kurve-tip{position:absolute;top:0;right:0;background:var(--grey);color:#fff;border-radius:var(--r-sm);padding:8px 12px;font-size:14px;font-weight:600}
.m-szene .preis{position:absolute;inset:auto 0 0 0;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.m-szene .preis .alt{font-family:'Fraunces',Georgia,serif;font-size:28px;color:var(--muted);text-decoration:line-through;transition:opacity .4s}
.m-szene .preis .neu{font-family:'Fraunces',Georgia,serif;font-size:40px;line-height:1;color:var(--petrol-tief)}

/* Z-3: Karten-Stapel */
.m-szene .stapel-test{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.m-szene .kstapel{position:relative;height:300px;max-width:440px;width:100%;justify-self:center}
.m-szene .kk{position:absolute;inset:0;border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line);box-shadow:0 30px 60px -36px rgba(23,19,26,.45);padding:28px;display:flex;flex-direction:column;justify-content:space-between;touch-action:none;user-select:none;cursor:grab;transition:transform .5s var(--ease),opacity .4s}
.m-szene .kk p{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(23px,2.2vw,28px);line-height:1.25;letter-spacing:-.015em}
.m-szene .kk .sz-k{color:var(--muted)}
.m-szene .kk .marke{position:absolute;top:24px;right:24px;font-size:14px;font-weight:700;padding:6px 12px;border-radius:999px;opacity:0;transition:opacity .2s}
.m-szene .kk .marke.ja{background:var(--petrol);color:var(--auf-petrol)}
.m-szene .kk .marke.nein{background:var(--grey);color:#fff;left:24px;right:auto}
.m-szene .kk.zieht{transition:none;cursor:grabbing}
.m-szene .kk.wackel{animation:kkWackel 1.2s var(--ease)}
@keyframes kkWackel{30%{transform:translateX(26px) rotate(3deg)}60%{transform:translateX(-18px) rotate(-2deg)}}
.m-szene .k-knoepfe{display:flex;gap:10px;justify-content:center;margin-top:22px}
.m-szene .ergebnis-ring{width:140px;height:140px;display:block}
.m-szene .ergebnis-ring circle{fill:none;stroke-width:10}
.m-szene .ergebnis-ring .r0{stroke:var(--cream-2)}
.m-szene .ergebnis-ring .r1{stroke:var(--petrol);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1.2s var(--ease)}
.m-szene .erg-box{display:grid;gap:14px;justify-items:start}
.m-szene .erg-box .btn[hidden]{display:none}
.m-szene .ergebnis-ring .r1{stroke-dasharray:377;stroke-dashoffset:377}

/* U-1: Zeitstrahl */
.m-szene .zeit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start;margin-top:clamp(36px,4vw,56px)}
.m-szene .zeit-grid .prose{margin-top:0}
.m-szene .ihk-klein{display:flex;gap:14px;align-items:center;background:var(--white);border-radius:var(--r);padding:12px;margin-top:26px;max-width:420px}
.m-szene .ihk-klein img{width:64px;height:64px;border-radius:var(--r-sm);object-fit:cover;flex:none}
.m-szene .ihk-klein b{display:block;font-size:15.5px}.m-szene .ihk-klein span{font-size:14px;color:var(--muted)}
.m-szene .jahr{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:clamp(64px,7vw,104px);line-height:1;letter-spacing:-.03em;color:var(--petrol-tief);font-variant-numeric:tabular-nums}
.m-szene .strahl{position:relative;height:44px;margin:22px 8px 6px}
.m-szene .strahl::before{content:"";position:absolute;left:0;right:0;top:20px;height:3px;border-radius:3px;background:var(--cream-2)}
.m-szene .strahl .fuell{position:absolute;left:0;top:20px;height:3px;border-radius:3px;background:var(--petrol);width:var(--f,0%);transition:width .9s var(--ease)}
.m-szene .strahl button{all:unset;cursor:pointer;position:absolute;top:12px;left:var(--x);width:19px;height:19px;margin-left:-9.5px;border-radius:50%;background:#fff;border:3px solid var(--cream-2);transition:border-color .4s,transform .4s var(--ease)}
.m-szene .strahl button.vorbei{border-color:var(--petrol)}
.m-szene .strahl button.an{transform:scale(1.35);border-color:var(--petrol-tief);background:var(--petrol)}
.m-szene .strahl button span{position:absolute;top:26px;left:50%;translate:-50% 0;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.m-szene .station{margin-top:34px;min-height:118px;transition:opacity .4s,translate .4s var(--ease)}
.m-szene .station.raus{opacity:0;translate:0 10px}
.m-szene .station h3{font-size:24px;margin-bottom:8px}
.m-szene .station p{color:var(--ink-soft);font-size:16.5px}

/* U-2: Pressewand */
.m-szene .wand{display:grid;gap:12px;margin:8px calc(var(--gutter) * -1) 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.m-szene .wand-reihe{display:flex;gap:12px;width:max-content;animation:wandLauf 60s linear infinite}
.m-szene .wand-reihe.zwei{animation-direction:reverse;animation-duration:70s}
.m-szene .wand:hover .wand-reihe{animation-play-state:paused}
@keyframes wandLauf{to{transform:translateX(-50%)}}
.m-szene .medium{position:relative;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:var(--white);border:1px solid var(--line);font-size:15.5px;font-weight:600;white-space:nowrap;cursor:default;transition:background .3s,color .3s,border-color .3s}
.m-szene .medium i{width:8px;height:8px;border-radius:50%;background:var(--petrol)}
.m-szene .medium:hover{background:var(--grey);color:#fff;border-color:var(--grey)}
.m-szene .medium em{font-style:normal;font-weight:500;color:var(--on-dark-soft);max-width:0;overflow:hidden;transition:max-width .5s var(--ease)}
.m-szene .medium:hover em{max-width:420px}
.m-szene .art-filter{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 18px}
.m-szene .art-filter button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:9px 16px;border-radius:999px;background:var(--white);transition:background .3s,color .3s}
.m-szene .art-filter button[aria-pressed="true"]{background:var(--petrol);color:var(--auf-petrol)}
.m-szene .art-filter b{font-size:12.5px;opacity:.7}
.m-szene .art-zwei .ml27-artikel__liste{columns:2;column-gap:40px}
.m-szene .art-zwei .ml27-artikel__liste li{break-inside:avoid}

/* K-1: Terminbuchung */
.m-szene .buchung{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px}
.m-szene .kal-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.m-szene .kal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center;font-size:13.5px}
.m-szene .kal .wt{font-weight:600;color:var(--muted);padding-bottom:4px}
.m-szene .kal span{height:34px;display:grid;place-items:center;border-radius:10px;color:var(--muted);transition:background .3s,color .3s,transform .3s var(--ease)}
.m-szene .kal span.frei{background:var(--petrol-tint);color:var(--petrol-tief);font-weight:700}
.m-szene .kal span.gew{background:var(--grey);color:#fff;transform:scale(1.08)}
.m-szene .slots-b{display:grid;gap:6px}
.m-szene .slots-b span{height:38px;display:grid;place-items:center;border-radius:10px;border:1.5px solid var(--line);font-size:14.5px;font-weight:600;transition:background .3s,color .3s,border-color .3s}
.m-szene .slots-b span.gew{background:var(--grey);color:#fff;border-color:var(--grey)}
.m-szene .feld{margin-top:10px;border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;min-height:58px;font-size:14px;transition:border-color .3s}
.m-szene .feld small{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.m-szene .feld.fokus{border-color:var(--petrol)}
.m-szene .buchen-btn{margin-top:12px;height:44px;border-radius:999px;display:grid;place-items:center;background:var(--petrol);color:var(--auf-petrol);font-weight:600;font-size:15px;transition:transform .15s,background .3s}
.m-szene .buchen-btn.druck{transform:scale(.95);background:var(--grey);color:#fff}
.m-szene .cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:5;pointer-events:none;transition:transform .9s var(--ease);filter:drop-shadow(0 4px 6px rgba(23,19,26,.3))}
.m-szene .cursor::after{content:"";position:absolute;left:-12px;top:-12px;width:24px;height:24px;border-radius:50%;background:var(--petrol);opacity:0;transform:scale(.3)}
.m-szene .cursor.klick::after{animation:klick .5s var(--ease)}
@keyframes klick{0%{opacity:.6;transform:scale(.3)}100%{opacity:0;transform:scale(1.8)}}
.m-szene .bestaetigt{position:absolute;inset:0;z-index:4;background:var(--white);display:grid;place-content:center;justify-items:center;text-align:center;gap:10px;padding:24px;opacity:0;pointer-events:none;transition:opacity .5s}
.m-szene .bestaetigt.da{opacity:1}
.m-szene .bestaetigt .haken{width:64px;height:64px;border-radius:50%;background:var(--petrol);display:grid;place-items:center;color:var(--auf-petrol);transform:scale(.4);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.m-szene .bestaetigt.da .haken{transform:none}
.m-szene .einladung{margin-top:8px;display:flex;gap:12px;align-items:center;text-align:left;background:var(--cream);border-radius:var(--r-sm);padding:12px 14px;translate:0 20px;opacity:0;transition:translate .6s var(--ease) .5s,opacity .5s .5s}
.m-szene .bestaetigt.da .einladung{translate:0 0;opacity:1}
.m-szene .einladung .tag{width:46px;border-radius:8px;overflow:hidden;text-align:center;background:#fff;flex:none;font-weight:700}
.m-szene .einladung .tag small{display:block;background:var(--petrol);color:var(--auf-petrol);font-size:11px;padding:2px 0}
.m-szene .einladung .tag b{display:block;font-size:20px;padding:2px 0}

@media (max-width:960px){
  .m-szene .split > .sz,.m-szene .split > .sz-wrap,.m-szene .split--links > .sz{justify-self:start;max-width:620px}
  .m-szene .hakt,.m-szene .werkbank,.m-szene .stapel-test,.m-szene .zeit-grid,.m-szene .blog-suche{grid-template-columns:minmax(0,1fr)}
  .m-szene .wb-geraet{position:sticky;top:64px;z-index:3;order:-1}
  .m-szene .wb-buehne{height:300px}
  .m-szene .art-zwei .ml27-artikel__liste{columns:1}
}
@media (max-width:640px){
  .m-szene .buchung{grid-template-columns:minmax(0,1fr)}
  .m-szene .spalten{grid-template-columns:minmax(0,1fr)}
  .m-szene .spalten > div{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center}
  .m-szene .sz.gesp{padding-bottom:150px}
  .m-szene .k-gitter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-szene .plan{grid-template-columns:62px repeat(13,minmax(0,1fr));gap:3px}
  .m-szene .plan i{height:16px}
  .m-szene .wb-geraet{position:relative;top:0}
  .m-szene .bahnen{grid-template-columns:minmax(0,1fr)}
  .m-szene .bahnen > div{min-height:0}
  .m-szene .chat{min-height:440px}
}
@media (prefers-reduced-motion:reduce){.m-szene .wand-reihe{animation:none}.m-szene .sz *{transition:none!important;animation:none!important}}
/* L-1 neu: tieferes Panel */
.m-szene .wb-liste .beispiel{margin-top:12px;padding:12px 14px;border-radius:var(--r-sm);background:var(--cream);font-size:15px;color:var(--ink)}
.m-szene .wb-liste .beispiel b{display:block;font-size:13px;color:var(--petrol-tief);margin-bottom:2px}
/* Z-1b: Wochenplan */
.m-szene .woche{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:14px}
.m-szene .woche > div{border-radius:var(--r-sm);background:var(--cream);padding:8px 6px;min-height:150px;display:flex;flex-direction:column;gap:5px}
.m-szene .woche .tag{font-size:12.5px;font-weight:700;color:var(--muted);text-align:center;margin-bottom:2px}
.m-szene .block{border-radius:8px;padding:6px 8px;font-size:12.5px;font-weight:600;line-height:1.2;background:#fff;color:var(--ink)}
.m-szene .block.kunde{background:var(--grey);color:#fff}
.m-szene .block.mkt{background:var(--petrol);color:var(--auf-petrol)}
.m-szene .spur-maria{margin-top:12px;border-radius:var(--r);background:var(--petrol-tint);padding:12px;min-height:58px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.m-szene .spur-maria .sz-k{color:var(--petrol-tief);display:flex;align-items:center;gap:8px;width:100%}
.m-szene .spur-maria .ava{width:24px;height:24px}
.m-szene .stufen{display:flex;background:var(--cream);border-radius:999px;padding:4px;gap:4px;margin-top:14px}
.m-szene .stufen button{all:unset;cursor:pointer;flex:1;text-align:center;font-size:14px;font-weight:600;padding:9px 6px;border-radius:999px;transition:background .3s,color .3s}
.m-szene .stufen button[aria-pressed="true"]{background:var(--grey);color:#fff}
/* Z-3: weichere Ergebnisse */
.m-szene .erg-wege{display:flex;flex-wrap:wrap;gap:8px}
.m-szene .erg-wege a{font-size:15px;font-weight:600;color:var(--petrol-tief);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.m-szene .kk .hinweis{position:absolute;left:24px;right:24px;bottom:22px;font-size:14px;color:var(--petrol-tief);font-weight:600;opacity:0;transition:opacity .3s}
/* U-1: Zertifikat ohne Kasten */
.m-szene .ihk-frei{display:flex;gap:18px;align-items:center;margin-top:30px}
.m-szene .ihk-frei img{width:96px;border-radius:4px;transform:rotate(-4deg);box-shadow:0 18px 30px -16px rgba(23,19,26,.45),0 2px 4px rgba(23,19,26,.12);transition:transform .5s var(--ease)}
.m-szene .ihk-frei:hover img{transform:rotate(0) scale(1.06)}
.m-szene .ihk-frei b{display:block;font-size:15.5px}.m-szene .ihk-frei span{font-size:14px;color:var(--muted)}
/* U-2: drei Reihen */
.m-szene .wand-reihe.drei{animation-duration:80s}
.m-szene .medium a{color:inherit;text-decoration:none}
/* K-1: Felder wie im echten Buchungstool */
.m-szene .dauer{display:flex;gap:6px;margin-bottom:10px;align-items:center;font-size:13.5px;font-weight:600}
.m-szene .dauer span{padding:5px 12px;border-radius:999px;border:1.5px solid var(--line)}
.m-szene .dauer span.gew{background:var(--grey);color:#fff;border-color:var(--grey)}
.m-szene .weg-wahl{display:flex;gap:6px;margin-top:10px}
.m-szene .weg-wahl span{flex:1;text-align:center;padding:8px 6px;border-radius:10px;border:1.5px solid var(--line);font-size:13.5px;font-weight:600;transition:background .3s,color .3s,border-color .3s}
.m-szene .weg-wahl span.gew{background:var(--grey);color:#fff;border-color:var(--grey)}
.m-szene .buchung .feld{min-height:48px;margin-top:8px}
@media (max-width:640px){
  .m-szene .woche{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
  .m-szene .woche > div{padding:6px 3px;min-height:130px}
  .m-szene .block{font-size:10.5px;padding:5px 3px;overflow-wrap:anywhere;hyphens:auto}
  .m-szene .stufen button{font-size:12.5px}
}
/* Live: Kreise der Werkbank rund halten, Ziffer ohne Linie */
.m-szene .wb-liste .step-no{margin:0;gap:0}
.m-szene .wb-liste .step-no::after{display:none}
.m-szene .wb-liste .step-no b{flex:none;aspect-ratio:1/1;width:38px;height:38px}
/* Live: Kopie der Pressereihe für die Endlosschleife */
.m-szene .wand-reihe .kopie{display:contents}
.m-szene .sz-status{display:flex;gap:10px;align-items:center}
.m-szene .sz-status .sz-k{color:var(--sz-text)}
.m-szene .bestaetigt .sz-t{font-size:26px}
.m-szene .kal-monat{font-size:19px}
.m-szene .b-titel{font-size:15px}
.m-szene .erg-p{color:var(--ink-soft);max-width:44ch}
.m-szene .erg-t{font-size:26px}
.m-szene .wo-satz{margin-top:2px}
.m-szene .slots-b{margin-top:8px}
.m-szene.bg-petrol .erg-p{color:inherit}
.m-szene .zum-knopf{cursor:pointer}