/* Motion Graphic Startseite: von der leeren Seite bis zum vollen Kalender.
   Das SVG ist im Ruhezustand das fertige Bild. Ohne JS und bei
   prefers-reduced-motion bleibt es einfach stehen. */
.wm{--wm-line:rgba(255,255,255,.16);--wm-dim:rgba(255,255,255,.08);--wm-panel:#131820;position:relative;overflow:hidden;background:var(--bh-spot-b),var(--bh-bg)!important;padding:clamp(64px,4vw + 4vh,112px) 0 clamp(40px,3vw + 2vh,72px)!important}
.wm-head{position:relative;z-index:2;padding-left:var(--bh-inline);padding-right:var(--bh-inline);pointer-events:none}
.wm-head h2{margin:0 0 16px;max-width:22ch;font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--ac-text,#fff);text-wrap:balance}
.wm-head p{margin:0;max-width:56ch;font-size:1.0625rem;line-height:1.7;color:var(--ac-muted,#9aa7b5)}
.wm-stage{position:relative;margin-top:clamp(24px,3vw,48px)}
.wm-svg{display:block;width:100%;height:min(38.26vw,84vh);height:min(38.26vw,84svh);overflow:visible;font-family:var(--font-sans,Montserrat,system-ui,sans-serif)}

/* Bühne */
.wm-col{stroke:var(--wm-dim);stroke-width:1}
.wm-thread-base{fill:none;stroke:var(--wm-line);stroke-width:2}
.wm-thread{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.wm-head-dot{fill:var(--accent)}
.wm-dot{fill:var(--accent)}
.wm-panel{fill:var(--wm-panel);stroke:var(--wm-line);stroke-width:1.5}
.wm-rule{stroke:var(--wm-line);stroke-width:1.5}
.wm-glyph{fill:none;stroke:var(--text-muted);stroke-width:1.5}
.wm-lime{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.wm-limefill{fill:var(--accent)}
.wm-tint{fill:var(--accent-dim);stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.wm-l1{stroke:var(--text);stroke-width:8;stroke-linecap:round}
.wm-l2{stroke:var(--text-subtle);stroke-width:3;stroke-linecap:round}
.wm-box{fill:none;stroke:var(--wm-line);stroke-width:1.5}
.wm-fillbox{fill:rgba(255,255,255,.05)}
.wm-caret{fill:var(--accent)}

/* Beschriftung */
.wm-word{font-size:44px;font-weight:700;letter-spacing:-.02em;fill:var(--text)}
.wm-word-end{fill:var(--accent)}
.wm-sub{font-size:19px;font-weight:500;fill:var(--text-muted)}
.wm-tag rect{fill:#0a0d12;stroke:var(--accent);stroke-width:1.5}
.wm-tag text{font:600 14px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;fill:var(--accent);text-anchor:middle;dominant-baseline:central}
.wm-query{font-size:18px;font-weight:500;fill:var(--text)}
.wm-rowtitle{font-size:17px;font-weight:700;fill:#0a0d12}
.wm-rowdark{stroke:#0a0d12;stroke-width:3;stroke-linecap:round;opacity:.55}
.wm-toast-t{font-size:16px;font-weight:700;fill:#0a0d12}
.wm-hand{fill:none;stroke:#0a0d12;stroke-width:3;stroke-linecap:round}
.wm-endstrong{font-size:22px;font-weight:700;fill:var(--accent)}
.wm-check{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* Pause */
.wm-toggle{position:absolute;right:var(--bh-inline);bottom:clamp(16px,2vw,28px);z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--wm-line);border-radius:50%;background:rgba(10,13,18,.7);color:var(--text-muted);cursor:pointer;transition:color .15s ease,border-color .15s ease}
.wm-toggle[hidden]{display:none}
.wm-toggle:hover{color:var(--accent);border-color:var(--border-accent)}
.wm-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wm-toggle svg{width:16px;height:16px;fill:currentColor}
.wm-toggle .wm-i-play{display:none}
.wm-toggle[data-paused=true] .wm-i-play{display:block}
.wm-toggle[data-paused=true] .wm-i-pause{display:none}

/* Ab hier ragt die Treppe rechts neben die Überschrift. */
@media(min-width:1280px){
  .wm-stage{margin-top:calc(-1 * min(10vw - 28px,20vh));margin-bottom:-3vw}
}

/* Schmal: Ohne Animation lässt sich das Panorama wischen, mit Animation fährt die Kamera. */
@media(max-width:899px){
  .wm-stage{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .wm-svg{width:1500px;height:582px;overflow:hidden}
  .wm.is-cam .wm-stage{overflow:hidden}
  .wm.is-cam .wm-svg{width:100%;height:min(92.31vw,70vh);aspect-ratio:auto}
  .wm-toggle{right:auto;left:var(--bh-inline);bottom:12px}
}