body { display: flex; flex-direction: column; height: 100vh; }

.buehne {
  flex: 1; min-height: 0; display: grid;
  grid-template-rows: 1fr auto auto; padding: 10px 18px 12px; outline: none;
}
#szene { width: 100%; height: 100%; min-height: 0; }

.leitung { fill: none; stroke: #ccc; stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }

.fenster { fill: #fff; stroke: #c9c9c9; stroke-width: 2; }
.fensterkopf { fill: #eceff1; }
.adresszeile { fill: #fff; stroke: #d0d0d0; }
.adresse { font: 15px var(--mono); fill: #222; }
.beschriftung { font-size: 18px; fill: var(--grau); font-weight: 600; }

.quelltext { font: 17px var(--mono); fill: #333; }

.baumlinien path { fill: none; stroke: #9aa; stroke-width: 2; }
.dom { fill: var(--blau-hell); stroke: var(--blau); stroke-width: 2; }
.dom.wurzel { fill: var(--rot-hell); stroke: var(--rot); }
.domtext { font: 600 15px var(--mono); fill: var(--blau); text-anchor: middle; }
.randnotiz { font-size: 16px; fill: var(--grau); }
.randnotiz.rot { fill: var(--rot); font-weight: 600; }

.seite-kopf { fill: var(--rot); }
.seite-logo { font-size: 18px; font-weight: 700; fill: #fff; }
.seite-h1 { font-size: 30px; font-weight: 700; fill: #222; }
.zeile { fill: #d9d9d9; }
.knopftext { font-size: 15px; font-weight: 700; fill: #fff; text-anchor: middle; }

.geraet { fill: var(--blau-hell); stroke: var(--blau); stroke-width: 2.5; }
.geraettitel { font-size: 24px; font-weight: 700; fill: var(--blau); text-anchor: middle; }
.geraetsub { font-size: 16px; fill: #555; text-anchor: middle; }
.geraetsub.rot { fill: var(--rot); font-weight: 700; }

.dreht { animation: drehen 1.4s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }

.paket { opacity: 0; pointer-events: none; }
.paket rect { fill: var(--blau); }
.paket.antwort rect { fill: var(--rot); }
.paket text { font: 600 16px var(--mono); fill: #fff; text-anchor: middle; dominant-baseline: central; }
.paket.klein text { font-size: 14px; }

.phase { transition: opacity .45s; }
.phase.aus { opacity: 0; }
body.ohne-uebergang .phase { transition: none; }

.kettenglied rect { fill: #f3f3f3; stroke: #ddd; stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.kettenglied text { font-size: 13px; fill: #999; text-anchor: middle; dominant-baseline: central; font-weight: 600; }
.kettenglied.erledigt rect { fill: var(--blau-hell); stroke: var(--blau); }
.kettenglied.erledigt text { fill: var(--blau); }
.kettenglied.jetzt rect { fill: var(--rot); stroke: var(--rot); }
.kettenglied.jetzt text { fill: #fff; }

.erklaerung { margin: 6px 0 0; font-size: 1.15em; min-height: 2.6em; text-align: center; }
.erklaerung b { color: var(--rot); }

.steuerung { display: flex; justify-content: center; align-items: center; gap: 14px; }
.steuerung button { min-width: 56px; font-size: 1.1em; }
body.embed .steuerung { opacity: .35; transition: opacity .2s; }
body.embed .buehne:hover .steuerung { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dreht { animation: none; }
  .phase { transition: none; }
}