/* Siechhaus — Titelbild, Bühne, Räume, Köpfe, Kopfleiste */

:root {
  --grund: #1a1510; --grund2: #221c14; --grund3: #2a2218;
  --rand: #3a3020; --gold: #dea726; --gold-dunkel: #b8891e;
  --text: #e4d6b8; --text-mitte: #b8a888; --hell: #f5eddc;
  --rot: #b03a2e; --gruen: #3f8a4a;
  --schrift: 'Nunito', system-ui, 'Segoe UI', Roboto, sans-serif;
  --zier: 'Fredoka', 'Nunito', system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { background: var(--grund); color: var(--text); font-family: var(--schrift); font-weight: 600; font-size: 17px; line-height: 1.4; }
/* der Verlauf des Klinikzeichens (index.html, A.0.73.0): da, aber ohne Platz — NIE display:none, sonst malt ihn niemand */
.svg-vorrat { position: absolute; width: 0; height: 0; overflow: hidden; }
button { font: inherit; color: inherit; }

/* ── Titelbild ─────────────────────────────────────────────────────── */
/* Die Startseite steht seit A.0.63.0 in css/titel.css (Firmenschild, Chefbüro als Bühne, Pergament-Tafel …). */
.ohne-skript { padding: 2rem; text-align: center; }

/* ── Bühne: 16:9, skaliert mit dem Fenster ───────────────────────────── */
.spiel { position: fixed; inset: 0; display: grid; place-items: center; background: #0d0a07; overflow: hidden; }
.buehne { position: relative; width: min(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9; container-type: inline-size;
  overflow: hidden; background: var(--grund); user-select: none; -webkit-user-select: none; }
.raumbild-platz, .raumbild-platz svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.raumebene { position: absolute; inset: 0; }

/* Klickflächen */
.fleck { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25em;
  border: 2px solid rgba(222, 167, 38, .18); border-radius: .7em; background: rgba(15, 10, 5, .28); cursor: pointer;
  transition: border-color .12s, background .12s, transform .12s; padding: .2em; }
.fleck:hover:not(:disabled), .fleck:focus-visible { border-color: var(--gold); background: rgba(222, 167, 38, .14); outline: none; }
.fleck:active:not(:disabled) { transform: scale(.98); }
.fleck-bild { font-size: 3.1cqw; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.fleck-text { font-size: clamp(10px, 1.05cqw, 17px); line-height: 1.15; color: var(--hell); background: rgba(0, 0, 0, .62);
  padding: .12em .5em; border-radius: .35em; text-align: center; max-width: 100%; }
.fleck-marke { position: absolute; top: -.55em; right: -.55em; min-width: 1.7em; height: 1.7em; padding: 0 .35em; border-radius: 999px;
  display: grid; place-items: center; background: var(--rot); color: #fff; font-size: clamp(10px, .95cqw, 15px); font-family: var(--zier); font-weight: 700; }
.fleck:disabled { opacity: .42; filter: grayscale(.9); cursor: default; }
.fleck.blass { opacity: .5; filter: grayscale(.85); }
.fleck.blass:hover { opacity: .7; }
.fleck.an { border-color: var(--gold); background: rgba(222, 167, 38, .22); }
.fleck.rote-augen .fleck-bild { filter: drop-shadow(0 0 .35em #ff2a1a) drop-shadow(0 0 .15em #ff2a1a); }

/* Dinge im Raum (A.0.18.0): durchsichtige Klickfläche über dem Bild, kleines Namensschild darunter; das Bild leuchtet
   beim Überfahren (.stueck.glanz, steuerung.js). Fenster, Tür und Regal sind ins Raumbild gemalt: dort leuchtet die Fläche. */
.ding { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; border-radius: .6cqw; color: inherit; font: inherit; }
.ding:focus-visible { outline: .2cqw solid var(--gold); outline-offset: .2cqw; }
.ding:disabled { cursor: default; }
.ding:disabled .ding-name { opacity: .55; }
.ding.an .ding-name { background: var(--gold); color: #2a1a08; }
/* Kleine Dinge liegen über den Figuren (Laptop vor dem Chef, Karton vor den Füßen) — Gemaltes (Fenster, Tür) darunter */
.raumebene .ding:not(.gemalt) { z-index: 4; }
/* hinten: die Wagen der Garage (A.0.30.0) — anklickbar, aber die Leute davor bleiben es auch */
.raumebene .ding.hinten { z-index: 2; }
.ding-name { position: absolute; left: 50%; top: calc(100% + .3cqw); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-size: clamp(10px, .95cqw, 15px); line-height: 1.2; color: var(--hell); background: rgba(0, 0, 0, .62); padding: .08em .5em; border-radius: .35em; }
.ding.name-oben .ding-name { top: auto; bottom: calc(100% + .3cqw); }
.ding.gemalt .ding-name { top: 52%; }   /* in der Mitte von Fenster und Tür (oben lag bis A.0.32.0 das Klemmbrett), unten stehen die Wartenden */
.ding.gemalt.tuer-hinten .ding-name { top: 20%; }   /* Krankenzimmer: in der Mitte der Tür steht das Namensschild der Pflege (bedienung.js ausgang) */
.ding.gemalt:hover:not(:disabled), .ding.gemalt:focus-visible { box-shadow: inset 0 0 1.4cqw rgba(255, 226, 140, .9); background: rgba(255, 236, 170, .14); }
/* Chefbüro in EINEM Bild (A.0.24.0): kleine gemalte Dinge tragen ihr Schild darunter (bzw. darüber); auf der
   Milchglasscheibe steht, wohin die Tür führt (deine Ansage: „eine typische Scheibenbeschriftung“) — dunkle
   Folienbuchstaben, gesperrt, zwischen zwei feinen Linien */
.ding.gemalt.klein .ding-name { top: calc(100% + .3cqw); }
.ding.gemalt.klein.name-oben .ding-name { top: auto; bottom: calc(100% + .3cqw); }
/* die rufende Gegensprechanlage (A.0.32.0): das Schild beginnt an der Anlage und läuft nach rechts (eingeführt, als links
   das Klemmbrett lag — seit A.0.33.0 das Smartphone oben rechts; die Richtung blieb) */
.ding.gemalt.klein.ruft .ding-name { left: 0; transform: none; }
.ding.gemalt.klein { border-radius: 1cqw; }
/* Gegensprechanlage seit A.0.54.0 nur noch 0,6× so groß gemalt (sprech-kleiner.py): die Tippfläche bleibt etwa so groß wie vorher */
.ding[data-stueck="bed:sprech"]::before { content: ''; position: absolute; inset: -20% -35%; }
.scheibe { position: absolute; display: grid; place-items: center; pointer-events: none; }
.scheibe span { font: 800 .78cqw / 1 var(--schrift); letter-spacing: .12em; margin-right: -.12em; color: rgba(34, 44, 56, .86);
  padding: .35cqw 0; border-top: .08cqw solid rgba(34, 44, 56, .6); border-bottom: .08cqw solid rgba(34, 44, 56, .6);
  text-shadow: 0 .05cqw 0 rgba(255, 255, 255, .45); white-space: nowrap; }
/* Personaltafel im Personalbüro (A.0.26.0): die Überschrift steht auf dem farbigen Kopfstreifen der Spalte (gedruckte
   Magnetstreifen), die Zahl unten in der Spalte */
.tafel-kopf-text { position: absolute; left: 0; right: 0; display: grid; place-items: center; pointer-events: none;
  font: 800 .72cqw / 1 var(--schrift); letter-spacing: .08em; color: rgba(24, 34, 46, .88); white-space: nowrap; }
.ding.spalte .ding-zahl, .ding.zahl-unten .ding-zahl { top: auto; bottom: .45cqw; right: .45cqw; }
/* Aushangtafeln beim Makler (A.0.29.0): auf dem dunkelblauen Titelstreifen „FLÄCHE“ (bis A.0.60.0 „GRUNDSTÜCKE“) bzw. „RÄUME“
   — gedruckt wie im Schaufenster */
.aushang-titel { position: absolute; display: grid; place-items: center; pointer-events: none; z-index: 1;
  font: 800 .98cqw / 1 var(--schrift); letter-spacing: .14em; margin-right: -.14em; color: #fff; white-space: nowrap; }
/* Die Aushänge darauf (A.0.75.0, raeume/aushang.js; deine Ansage 04.10.: „3 mal das gleiche untereinander ist wenig hilfreich
   und realistisch“): je Spalte ein gedruckter Kopfstreifen (blau zur Miete, orange zum Kauf) und drei Exposés — Foto mit
   der Größe, Name (bei der Fläche: wofür sie reicht), Preis; der Name hat immer Platz für zwei Zeilen, damit die Fotos gleich
   hoch sind. Alles in cqw wie die übrigen Schilder der Räume. */
.aushang-flaeche { position: absolute; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .5cqw; padding: .45cqw .45cqw .7cqw; box-sizing: border-box; }
.aushang-spalte { display: grid; grid-template-rows: auto repeat(3, minmax(0, 1fr)); gap: .45cqw; min-height: 0; min-width: 0; }
.aushang-kopf { padding: .3cqw 0 .26cqw; border: 0; border-radius: .12cqw; cursor: pointer; color: #fff; white-space: nowrap;
  font: 800 .6cqw / 1 var(--schrift); letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 -.08cqw 0 rgba(0, 0, 0, .18); }
.miete > .aushang-kopf { background: #4a8fd4; }
.kauf > .aushang-kopf { background: #e8742a; }
.expose { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 0; overflow: hidden; cursor: pointer; text-align: left;
  font: inherit; color: #1f2a37; background: #fff; border: .08cqw solid rgba(28, 38, 52, .5); border-radius: .16cqw;
  box-shadow: 0 .14cqw .32cqw rgba(20, 32, 48, .22); transition: transform .12s, box-shadow .12s; }
.expose-foto { position: relative; flex: 1 1 0; min-height: 0; background: #dfe6ec; border-bottom: .08cqw solid rgba(28, 38, 52, .35); }
.expose-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.expose.plan .expose-foto img { object-fit: contain; background: #fbfaf6; }   /* der Grundriss ganz, auf Papier */
.expose-qm { position: absolute; left: .2cqw; bottom: .2cqw; padding: .14cqw .26cqw .12cqw; border-radius: .12cqw;
  background: rgba(255, 255, 255, .94); color: #1f2a37; font: 800 .52cqw / 1 var(--schrift); box-shadow: 0 .04cqw .12cqw rgba(0, 0, 0, .25); }
.expose-marke { position: absolute; right: .16cqw; top: .16cqw; padding: .13cqw .26cqw .1cqw; border-radius: .1cqw; transform: rotate(-3deg);
  background: #ffd447; color: #3b2a00; font: 800 .48cqw / 1 var(--schrift); font-style: normal; box-shadow: 0 .05cqw .14cqw rgba(0, 0, 0, .3); }
.expose-marke.gemietet { background: #dbeafb; color: #173a63; }
.expose-name { flex: none; box-sizing: content-box; height: 2.24em; margin-top: .26cqw; padding: 0 .3cqw; font: 800 .64cqw / 1.12 var(--schrift);
  hyphens: manual; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.expose-preis { flex: none; padding: .06cqw .3cqw .26cqw; font: 600 .72cqw / 1.05 var(--zier); color: #1d4f86; white-space: nowrap; }
.expose.kauf .expose-preis { color: #b4501b; }
.expose:hover, .expose:focus-visible { transform: translateY(-.1cqw); outline: .14cqw solid var(--gold); outline-offset: .05cqw;
  box-shadow: 0 .3cqw .7cqw rgba(20, 32, 48, .3), 0 0 .9cqw rgba(255, 214, 110, .75); }
.aushang-kopf:hover, .aushang-kopf:focus-visible { filter: brightness(1.12); outline: .14cqw solid var(--gold); outline-offset: .05cqw; }
/* ein Zettel der Maklerin, wo kein Angebot hängt */
.aushang-zettel { align-self: center; justify-self: center; max-width: 92%; padding: .55cqw .5cqw; transform: rotate(-2deg);
  background: #fff4a8; color: #4f4214; font: 600 .6cqw / 1.25 var(--zier); text-align: center; box-shadow: 0 .14cqw .3cqw rgba(0, 0, 0, .22); }
.nacht .aushang-flaeche { filter: brightness(.82) saturate(.9); }
.expose-preis .kurz { display: none; }
/* Handy-Modus der Aushänge (A.0.81.0, Audit 05.10.: am Handy quer waren die Schriften 3,6 bis 5 px — unlesbar): eine Karte ist
   dort nur gut 40 px breit, also Foto, Größe und Preis (kurz „20 €/Tag“) groß genug, der Name entfällt — er steht in der Tafel,
   die ein Tippen öffnet. Gilt für Bühnen bis 1000 px Breite. */
@container (max-width: 1000px) {
  .aushang-titel { font-size: max(8px, .98cqw); letter-spacing: .08em; margin-right: -.08em; }
  .aushang-kopf { font-size: max(6px, .6cqw); letter-spacing: .02em; }
  .expose-name { display: none; }
  .expose-qm { font-size: max(7px, .52cqw); }
  .expose-marke { font-size: max(6px, .48cqw); }
  .expose-preis { padding: .3cqw .25cqw .35cqw; font-size: max(8px, .72cqw); text-align: center; }
  .expose-preis .lang { display: none; }
  .expose-preis .kurz { display: inline; }
  .aushang-zettel { font-size: max(7px, .6cqw); }
}
@media (prefers-reduced-motion: reduce) { .expose { transition: none; } .expose:hover, .expose:focus-visible { transform: none; } }
/* dein Zeichen auf dem petrolfarbenen Ordner im Regal (A.0.75.0) — der Ordner mit deinen Verträgen */
.ordner-zeichen { position: absolute; z-index: 1; pointer-events: none; }
.ordner-zeichen .logo { display: block; width: 100%; height: 100%; }
.nacht .ordner-zeichen { filter: brightness(.82); }
/* stumm: ohne Schild — das Ding erklärt sich selbst (A.0.24.1, Chefbüro); es leuchtet beim Überfahren weiter */
.ding.stumm .ding-name, .kopf.figur.stumm .kopf-name { display: none; }
/* zeigt: das Schild nur beim Überfahren (A.0.70.0, die Dinge auf dem Schreibtisch der Verwaltung — wie im Vorbild, wo die
   Funktion erscheint, „wenn der Mauszeiger auf einem Symbol ist“; deine Ansage zu A.0.24.0: „nur bei Mouseover anzeigen“) */
.ding.zeigt:not(:hover):not(:focus-visible) .ding-name { display: none; }
.ding-zahl { position: absolute; top: -.7cqw; right: -.7cqw; min-width: 1.7em; height: 1.7em; padding: 0 .35em; border-radius: 999px; display: grid; place-items: center;
  background: var(--rot); color: #fff; font-size: clamp(10px, .95cqw, 15px); font-family: var(--zier); font-weight: 700; pointer-events: none; }
/* Luxus im Angebot (A.0.72.0): Paket und Sesselchen der Verwaltung tragen einen goldenen Stern */
.ding.luxus-da .ding-zahl { background: linear-gradient(#fbe7a1, #d9a93a); color: #4a3206; border: 1px solid #8a6414; }
.ding-zettel { position: absolute; left: 6%; top: 34%; transform: rotate(-6deg); background: #fff4a8; color: #a01d10; font-weight: 800; pointer-events: none;
  font-size: clamp(9px, .9cqw, 14px); padding: .1em .45em; border: 1px solid #c9a93a; box-shadow: 0 .1cqw .3cqw rgba(0, 0, 0, .35); }
/* Die übrigen Knöpfe als Dinge (A.0.30.0): auf der Kreidetafel der Küche steht das Gericht des Tages; am Funkgerät der
   Garage blinkt bei einem Unfall die Lampe */
.kreide { position: absolute; left: 10%; right: 10%; top: 22%; bottom: 8%; display: flex; flex-direction: column; align-items: center;
  gap: .3cqw; pointer-events: none; text-align: center; font: 600 .78cqw / 1.15 var(--zier); color: rgba(248, 248, 240, .92);
  text-shadow: 0 0 .12cqw rgba(255, 255, 255, .45); hyphens: auto; overflow-wrap: break-word; }
.kreide small { font-size: .6cqw; opacity: .75; letter-spacing: .08em; text-transform: uppercase; }
.rotlicht { position: absolute; border-radius: 50%; pointer-events: none; animation: rotlicht .6s ease-in-out infinite alternate;
  background: radial-gradient(closest-side, rgba(255, 140, 120, .95), rgba(255, 40, 30, .75) 45%, rgba(255, 0, 0, 0)); }
@keyframes rotlicht { from { opacity: .3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rotlicht { animation: none; } }
/* Die gemalte Gegensprechanlage (A.0.31.0): ruft sie, leuchtet ihr Lämpchen rot — unten in der Mitte der Anlage */
.lampe-an { position: absolute; left: 50%; top: 74%; width: 85%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  pointer-events: none; animation: rotlicht .8s ease-in-out infinite alternate;
  background: radial-gradient(closest-side, rgba(255, 170, 150, 1), rgba(255, 40, 30, .85) 40%, rgba(255, 0, 0, 0)); }
@media (prefers-reduced-motion: reduce) { .lampe-an { animation: none; } }
.stueck.glanz img { filter: drop-shadow(0 0 .3cqw #ffe28c) drop-shadow(0 0 .7cqw rgba(255, 210, 90, .8)) brightness(1.05); }
/* Lageplan (A.0.22.0): die Klinik als EIN Gebäude wie im Vorbild — Mauern mit Türlücke, Türblatt und Schwenkbogen als SVG
   (viewBox 1600 × 900 = die Bühne), weicher Schatten auf der Wiese, Flure mit hellen Fliesen, Zebrastreifen zum Haupteingang;
   jeder Raum füllt seine Fläche (Boden und Möbel, Tür oben = gedreht), freie Räume weiß, im Rohbau Estrich, im Bebauungsplan
   gestrichelt; mehrere Räume einer Art = ein Raum mit Zahl. Überfahren: der Raum leuchtet. Gekauft: ein goldener Punkt.
   Wege wie die Gehwege im Bild: helle Platten, dunkle Kante. */
.plan-schatten { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.plan-schatten path { fill: rgba(25, 40, 10, .4); }
.plan-mauern { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.plan-mauern .mauer { fill: none; stroke: #454a51; stroke-width: 5; stroke-linecap: square; }
.plan-mauern .mauer.aussen { stroke: #3a3e44; stroke-width: 9; }
.plan-mauern .blatt { fill: none; stroke: #454a51; stroke-width: 2.2; }
.plan-mauern .bogen { fill: none; stroke: #7e848c; stroke-width: 1.3; stroke-dasharray: 3 3; }
.plan-mauern .glas { fill: none; stroke: #7cc4ea; stroke-width: 3.5; }
.plan-mauern .licht { fill: none; stroke: #9aa1aa; stroke-width: 1.6; stroke-linecap: square; }
.plan-mauern .licht.aussen { stroke: #8d949c; stroke-width: 3; }
.plan-mauern .roh .mauer { stroke: #7d838b; stroke-dasharray: 9 5; stroke-linecap: butt; }   /* im Bau: Mauersteine mit Lücken (eckige Enden deckten die Lücken zu) */
.plan-mauern .roh .mauer.aussen { stroke-width: 6.5; stroke-dasharray: 11 5; }
.plan-flur { position: absolute; z-index: 1; background-color: #e8e3d5;
  background-image: linear-gradient(90deg, rgba(110, 100, 80, .14) .07cqw, transparent .07cqw), linear-gradient(rgba(110, 100, 80, .14) .07cqw, transparent .07cqw);
  background-size: 1.1cqw 1.1cqw; box-shadow: inset 0 0 .6cqw rgba(90, 80, 60, .2); }
.plan-flur.roh { background: #b9b7b1 url(../bild/karte/bau/estrich.webp) 0 0 / 7cqw 7cqw; box-shadow: inset 0 0 .6cqw rgba(60, 55, 45, .3); }
/* Tür unten: Name oben, Zahl und Schilder unten in den Ecken — Tür oben: umgekehrt (wie bisher) */
.plan-raum.tuer-u .plan-name { bottom: auto; top: 7%; }
.plan-raum.tuer-u .plan-zahl, .plan-raum.tuer-u .plan-bau { top: auto; bottom: 7%; }
.plan-raum.tuer-u .plan-gold { top: auto; bottom: 7%; }
.plan-zebra { position: absolute; z-index: 1; pointer-events: none; background: repeating-linear-gradient(90deg, #f2f2ee 0 .42cqw, transparent .42cqw .84cqw); }
.plan-kran { position: absolute; z-index: 5; pointer-events: none; filter: drop-shadow(.5cqw .8cqw .4cqw rgba(0, 0, 0, .35)); }
.plan-weg { position: absolute; z-index: 1; pointer-events: none; background-color: #c9cabf;
  background-image: linear-gradient(90deg, rgba(64, 68, 62, .22) .09cqw, transparent .09cqw); background-size: 1.24cqw 100%;
  border-block: .11cqw solid rgba(66, 70, 64, .6); }
.plan-weg.ende { border-right: .11cqw solid rgba(66, 70, 64, .6); border-radius: 0 .7cqw .7cqw 0; }
.plan-zufahrt { position: absolute; z-index: 1; pointer-events: none; background: #676f78; border-inline: .11cqw solid rgba(50, 54, 58, .7); }
.plan-raum { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; z-index: 2; }
.plan-haus { position: absolute; inset: 0; overflow: hidden; }
.plan-haus img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; }
.plan-raum.dreh-180 .plan-haus img { transform: rotate(180deg); }
.plan-raum:hover, .plan-raum:focus-visible { outline: none; }
.plan-raum:not(.baustelle):hover .plan-haus img, .plan-raum:not(.baustelle):focus-visible .plan-haus img { filter: drop-shadow(0 0 .3cqw #ffe28c) drop-shadow(0 0 .7cqw rgba(255, 210, 90, .8)) brightness(1.06); }
/* Baustelle (A.0.76.0): Estrich als Kachel im selben Maßstab überall, darauf das Baumaterial einzeln (lageplan.js materialVon) */
.plan-estrich { position: absolute; inset: 0; background: #b9b7b1 url(../bild/karte/bau/estrich.webp) 0 0 / 7cqw 7cqw; }
.plan-haus img.plan-material { inset: auto; object-fit: contain; filter: drop-shadow(.06cqw .12cqw .08cqw rgba(30, 25, 15, .45)); }
.plan-raum.baustelle:hover .plan-haus, .plan-raum.baustelle:focus-visible .plan-haus { filter: drop-shadow(0 0 .3cqw #ffe28c) drop-shadow(0 0 .7cqw rgba(255, 210, 90, .8)) brightness(1.06); }
.plan-name { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); width: max-content; max-width: 94%; text-align: center; pointer-events: none;
  font-size: clamp(8px, .74cqw, 13px); line-height: 1.1; color: var(--hell); background: rgba(0, 0, 0, .66); padding: .06em .35em; border-radius: .3em;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.plan-raum.haupthaus .plan-name { bottom: auto; top: 5%; font-family: var(--zier); }   /* unten stößt die Küchenwand an */
.plan-gold { position: absolute; top: 7%; right: 7%; width: .8cqw; height: .8cqw; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 .12cqw #2a1a08; pointer-events: none; }
/* Schatten an den Wänden innen (wie Licht von oben in einem Raum ohne Decke) */
.plan-haus::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 1.1cqw rgba(35, 25, 10, .38); }
.plan-zahl { position: absolute; top: 7%; left: 5%; min-width: 1.7em; height: 1.7em; padding: 0 .3em; border-radius: 999px; display: grid; place-items: center;
  background: #fff; color: #1f2b38; border: .12cqw solid #1f2b38; font: 700 clamp(9px, .85cqw, 14px) / 1 var(--zier); pointer-events: none;
  box-shadow: 0 .1cqw .25cqw rgba(0, 0, 0, .45); }
.plan-platz { position: absolute; z-index: 2; padding: 0 .4cqw; border: .13cqw dashed rgba(255, 255, 255, .7); border-radius: .3cqw; background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .9); font: 600 clamp(8px, .72cqw, 12px) / 1.15 var(--schrift); text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
  display: grid; place-items: center; text-align: center; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.plan-platz.haupthaus { font: 600 clamp(9px, .9cqw, 15px) / 1.15 var(--zier); }
/* seit A.0.90.0 kein Knopf mehr (gemietet wird nur beim Makler) — also auch kein Aufleuchten beim Überfahren */
/* im fertigen Gebäude: ein leerer weißer Raum; im Rohbau des Gebäudes: Estrich */
img.plan-wagen { position: absolute; pointer-events: none; }
.plan-wagen-knopf, .plan-wagen-platz { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; z-index: 4; }
.plan-wagen-platz { cursor: default; pointer-events: none; }
.plan-wagen-knopf img, .plan-wagen-platz img { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan-wagen-knopf img.gedreht, .plan-wagen-platz img.gedreht { inset: auto; transform: rotate(-90deg); filter: drop-shadow(.15cqw .25cqw .2cqw rgba(0, 0, 0, .35)); }
.plan-deko { position: absolute; z-index: 1; pointer-events: none; filter: drop-shadow(.25cqw .4cqw .3cqw rgba(20, 40, 10, .35)); }
.plan-wagen-knopf:hover img, .plan-wagen-knopf:focus-visible img { filter: drop-shadow(0 0 .3cqw #ffe28c) brightness(1.06); }
/* Raumnummern-Anzeige (A.0.20.0): Tastenfeld wie im Aufzug rechts neben dem Wandschild, die Taste des Raums leuchtet */
.nummern-feld { position: absolute; left: 60.5%; top: 9.5%; z-index: 4; display: grid; grid-template-columns: repeat(var(--spalten, 5), auto); gap: .35cqw;
  padding: .45cqw .55cqw; border-radius: .5cqw; background: linear-gradient(#eef0f2, #b7bec6); border: .12cqw solid #69727b;
  box-shadow: 0 .2cqw .5cqw rgba(0, 0, 0, .35), inset 0 .1cqw 0 rgba(255, 255, 255, .8); }
.nummer-taste { width: clamp(22px, 2.3cqw, 40px); height: clamp(22px, 2.3cqw, 40px); padding: 0; border-radius: 50%; display: grid; place-items: center;
  font: 700 clamp(11px, 1.15cqw, 19px) / 1 var(--zier); color: #2b3540; background: radial-gradient(circle at 40% 35%, #fff, #d3d9df 70%);
  border: .12cqw solid #7b858f; box-shadow: 0 .1cqw .2cqw rgba(0, 0, 0, .35); }
button.nummer-taste { cursor: pointer; }
button.nummer-taste:hover, button.nummer-taste:focus-visible { outline: none; box-shadow: 0 0 .55cqw #ffe28c, 0 .1cqw .2cqw rgba(0, 0, 0, .35); }
.nummer-taste.an { color: #4a2a00; background: radial-gradient(circle at 40% 35%, #fff4c8, #ffb340 75%); border-color: #b06a00; box-shadow: 0 0 .7cqw rgba(255, 180, 60, .95); }
/* Baustelle (A.0.21.0): Taste eines Raums im Bau gestreift wie eine Absperrung; auf der Karte zweite Zeile „Baustelle bis …“ und
   am fertigen Haus ein rundes Schild mit der Baustelle, wenn ein weiterer Raum der Art gebaut wird; im Rohbau das Bauschild */
.nummer-taste.bau { color: #fff; background: repeating-linear-gradient(45deg, #ffcf33 0 .35cqw, #2b2b2b .35cqw .7cqw); text-shadow: 0 0 2px #000, 0 0 3px #000; }
.plan-name small { display: block; font-size: .88em; font-weight: 700; color: #ffd23f; }
.plan-bau { position: absolute; top: 7%; right: 5%; width: 2.4cqw; height: 2.4cqw; min-width: 18px; min-height: 18px; border-radius: 50%; pointer-events: none;
  background-size: cover; background-position: center; border: .15cqw solid #fff; box-shadow: 0 0 0 .12cqw #d4161c, 0 .1cqw .3cqw rgba(0, 0, 0, .45); }
.bauschild { position: absolute; left: 50%; top: 27%; transform: translateX(-50%); width: 44%; z-index: 4; text-align: center; pointer-events: none;
  background: #fff; color: #222; border: .55cqw solid transparent; border-image: repeating-linear-gradient(45deg, #d4161c 0 .9cqw, #fff .9cqw 1.8cqw) 12;
  box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .4); padding: 1cqw 1.4cqw; font: 600 clamp(12px, 1.25cqw, 20px) / 1.3 var(--schrift); }
.bauschild b { display: block; margin-bottom: .25em; font: 700 clamp(16px, 2.2cqw, 36px) / 1.1 var(--zier); color: #d4161c; letter-spacing: .05em; text-transform: uppercase; }
.bauschild span { display: block; }
/* Fotos am Dienstplan: je Stelle eine Karte */
.plan-karten { position: absolute; inset: 15% 11% 17%; display: flex; align-items: center; justify-content: center; gap: 6%; pointer-events: none; }
/* auf dem gemalten Kork (A.0.31.0): der Kasten ist die Korkfläche plus Rand */
.plan-karten.auf-kork { inset: 24% 12% 20%; }   /* A.0.54.0: Fotos gut 30 cm hoch statt 40 (Korkwand im Maßstab der Wand) */
.plan-karte { position: relative; height: 100%; aspect-ratio: 3 / 4; background: #fff; padding: 3%; box-shadow: 0 .1cqw .3cqw rgba(0, 0, 0, .4);
  display: grid; place-items: center; font-size: 1.3cqw; transform: rotate(-4deg); }
.plan-karte:nth-child(even) { transform: rotate(3deg); }
.plan-karte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plan-karte.leer { background: rgba(255, 255, 255, .55); outline: .12cqw dashed #8a6a3a; outline-offset: -.3cqw; }
.plan-karte.fort img { filter: grayscale(.9); opacity: .6; }
.plan-karte i { position: absolute; right: -30%; bottom: -14%; font-style: normal; font-size: 1.1cqw; filter: drop-shadow(0 1px 1px #000); }
.raum-schild { position: absolute; font-family: var(--zier); font-size: clamp(10px, 1.05cqw, 17px); color: var(--hell);
  background: rgba(40, 26, 12, .8); border: 1px solid #6b4a22; border-radius: .3em; padding: .1em .6em; }
.stuhl { position: absolute; transform: translate(-50%, 0); font-size: 3cqw; opacity: .55; }
.stuben-status { position: absolute; left: 16%; right: 16%; bottom: 3.5%; text-align: center; font-size: clamp(11px, 1.15cqw, 18px);
  color: var(--hell); background: rgba(0, 0, 0, .6); border-radius: .4em; padding: .25em .6em; }

/* Köpfe */
.kopf { position: absolute; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; gap: .15em;
  background: none; border: 0; cursor: pointer; }
.kopf-bild { width: 5.4cqw; height: 5.4cqw; border-radius: 50%; display: grid; place-items: center; font-size: 3.4cqw; line-height: 1;
  background: radial-gradient(circle at 40% 35%, #f3e6c4, #b89a5e); border: .25cqw solid #6b4a22; box-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .5); }
.kopf-name { font-size: clamp(10px, .95cqw, 15px); color: var(--hell); background: rgba(0, 0, 0, .65); padding: .05em .45em; border-radius: .3em; white-space: nowrap; }
.kopf-marke { position: absolute; top: -.4cqw; right: -.8cqw; font-size: 1.8cqw; filter: drop-shadow(0 1px 1px #000); }
.kopf:hover .kopf-bild, .kopf:focus-visible .kopf-bild { border-color: var(--gold); outline: none; }
.kopf.leer .kopf-bild { opacity: .5; border-style: dashed; filter: grayscale(.6); }
.kopf.fort .kopf-bild { filter: grayscale(1); opacity: .65; }

/* Kopfleiste und Koffer — seit A.0.32.0 keine Zeile über die ganze Breite mehr; seit A.0.33.0 oben rechts nur noch Pause
   (bei einem Unfall/Rennen dessen Knopf) und daneben das Smartphone (deine Ansage 02.10. statt des Klemmbretts oben links) */
.hud { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: flex-end; align-items: flex-start; gap: .6em;
  padding: .5cqw .7cqw; font-size: clamp(11px, 1.15cqw, 18px); pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-rechts { display: flex; align-items: flex-start; gap: .6em; }
.hud-knopf { background: #fff7e4; border: 1px solid #c9a96a; border-radius: .4em; padding: .3em .75em; cursor: pointer; color: #2a1a08;
  box-shadow: 0 .15cqw .4cqw rgba(0, 0, 0, .45); }
.hud-knopf:hover { border-color: var(--gold); }
.hud-knopf.an { background: var(--gold); color: #2a1a08; }
.hud-knopf.warnung { background: #b3261e; border-color: #7a140f; color: #fff; }   /* „⚠ Nicht gespeichert“ (A.0.42.0) */
/* Der Pager klein (A.0.59.0, deine Ansage 03.10.: „Das Handy oben rechts in der Ecke sieht nicht gut aus. Machen wir
   lieber nen Pager draus.“; bis A.0.58.x ein Smartphone hochkant): quer liegendes Gehäuse, grünes LCD mit Tag, Uhrzeit und
   Kontostand — größer als auf dem Sperrbildschirm (deine Ansage A.0.33.0: „gerade noch Geld und Zeit erkennen“). Schrift in
   cqi des Geräts (LCD-Schrift VT323, feste Breite), der Betrag so groß, wie er passt (steuerung.js). Angetippt kommt er groß
   ins Bild (tafel.css .pager-gross) — solange ist der kleine weg. Er ist niedriger als das Telefon (7,6 × 3,9 cqw statt
   3,5 × 7,6): unter ihm liegt weniger vom Raum (blick-buero-leute.mjs misst das). Seit A.0.68.0 sieht der große genauso
   aus, nur größer (deine Ansage 04.10.: „Es ist ein Pager!“). */
.handy { position: relative; display: block; flex: none; width: clamp(72px, 7.6cqw, 150px); aspect-ratio: 2 / 1.02; padding: 0; border: 0;
  border-radius: 13% / 23%; cursor: pointer; container-type: inline-size; background: linear-gradient(170deg, #4a4f57, #26292e 45%, #131518);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), 0 0 0 1px rgba(0, 0, 0, .6), 0 .25cqw .6cqw rgba(0, 0, 0, .5);
  transition: transform .15s ease-out, box-shadow .15s ease-out; }
.handy::after { content: ''; position: absolute; left: 32%; right: 32%; bottom: 5%; height: 9%; border-radius: 99px;
  background: linear-gradient(#4b5058, #1d1f23); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 1px rgba(0, 0, 0, .6); }
.handy:hover, .handy:focus-visible { transform: translateY(-2px) rotate(-2deg); outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 0 0 2px var(--gold), 0 .5cqw .9cqw rgba(0, 0, 0, .5); }
.handy.offen { visibility: hidden; }
.handy-sperr { position: absolute; left: 7%; right: 7%; top: 8%; bottom: 19%; border-radius: 4cqi; overflow: hidden; display: flex; flex-direction: column;
  justify-content: center; gap: 1cqi; padding: 0 5cqi; color: #16200f; font-family: 'VT323', ui-monospace, monospace;
  background: radial-gradient(ellipse at 40% 30%, #bccc9f, #a0b284 80%); box-shadow: inset 0 .8cqi 1.6cqi rgba(0, 0, 0, .5), 0 0 0 1px #0c0d0f; }
.handy .hud-zeile { display: flex; justify-content: space-between; align-items: baseline; }
.handy .hud-tag { font-size: 11cqi; line-height: .9; }
.handy .hud-uhr { font-size: 20cqi; line-height: .8; font-variant-numeric: tabular-nums; }
.handy .hud-geld { align-self: flex-end; line-height: .9; white-space: nowrap; }
.handy .hud-geld.knapp { background: #16200f; color: #bccc9f; padding: 0 1.5cqi; }
.koffer-platz { position: absolute; right: 1%; top: calc(100cqw * 9 / 16 - 7cqw); }
.koffer { position: relative; font-size: 3cqw; line-height: 1; background: rgba(245, 237, 220, .9); border: .25cqw solid #6b4a22; border-radius: .5em;
  padding: .25em .3em; cursor: pointer; box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .6); }
.koffer:hover { border-color: var(--gold); }
.koffer-zahl { position: absolute; top: -.45em; right: -.45em; min-width: 1.5em; height: 1.5em; border-radius: 999px; display: grid; place-items: center;
  background: var(--rot); color: #fff; font: 700 clamp(10px, .95cqw, 15px) var(--zier); }
.koffer-zahl.leer { display: none; }
/* Arbeitshilfe als gemalte Arzttasche (A.0.25.0): ohne Kasten, steht mit Schatten unten rechts, hebt sich beim Zeigen */
.koffer.gemalt { display: block; width: 5.6cqw; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 .3cqw .25cqw rgba(0, 0, 0, .55)); transition: transform .15s ease-out, filter .15s ease-out; }
.koffer.gemalt img { display: block; width: 100%; height: auto; pointer-events: none; }
/* :not(:disabled) wie bei .knopf:hover (tafel.css), sonst malt dessen heller Grund beim Überfahren einen Kasten hinter die
   Tasche (dein Bild zu A.0.27.0: „Der weiße Hintergrund beim mouseover muss weg“) */
.koffer.gemalt:hover:not(:disabled), .koffer.gemalt:focus-visible { background: none; border-color: transparent; outline: none; transform: translateY(-.3cqw) rotate(-3deg);
  filter: drop-shadow(0 0 .35cqw rgba(255, 214, 120, .95)) drop-shadow(0 .45cqw .35cqw rgba(0, 0, 0, .5)); }
.koffer.gemalt .koffer-zahl { top: -.25em; right: -.3em; border: max(1.5px, .14cqw) solid #fff; box-shadow: 0 .1cqw .3cqw rgba(0, 0, 0, .5); }
@media (prefers-reduced-motion: reduce) { .koffer.gemalt { transition: none; } }
.raumtitel { position: absolute; left: 1%; bottom: 1.2%; font-family: var(--zier); font-size: clamp(10px, 1.1cqw, 17px); color: var(--gold);
  background: rgba(0, 0, 0, .6); padding: .15em .6em; border-radius: .3em; pointer-events: none; }
/* Seit A.0.64.0 ein Knopf: öffnet das Patchlog */
.typenschild-klein { position: absolute; right: 8.5%; bottom: 1.2%; font-family: var(--zier); font-size: clamp(8px, .7cqw, 11px); letter-spacing: .12em;
  color: rgba(245, 237, 220, .45); background: none; border: 0; padding: .2em .3em; cursor: pointer; }
.typenschild-klein:hover, .typenschild-klein:focus-visible { color: rgba(245, 237, 220, .9); text-decoration: underline; }
.tafelebene { position: absolute; inset: 0; pointer-events: none; }
.tafelebene > * { pointer-events: auto; }

/* Hochkant am Handy: bitte drehen */
.drehen { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  .drehen { display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 50;
    background: #0d0a07; color: var(--text); font-size: 1.2rem; text-align: center; padding: 16px; }
  .drehen span { font-size: 3rem; }
}

/* Einrichtung eines Raums (A.0.2.0): was dasteht, und blass, was fehlt */
.einrichtung-leiste { position: absolute; left: 14%; right: 18%; top: 89%; display: flex; flex-wrap: wrap; align-items: center; gap: .35em;
  padding: .2em .5em; border-radius: .4em; border: 1px solid rgba(222, 167, 38, .25); background: rgba(10, 6, 2, .55); cursor: pointer;
  font-size: clamp(11px, 1.2cqw, 19px); color: var(--hell); }
.raum-fuss { position: absolute; left: 14%; right: 18%; bottom: 1%; display: flex; flex-direction: column; align-items: stretch; gap: .3cqw; pointer-events: none; }
.raum-fuss > * { pointer-events: auto; }
.raum-fuss > .einrichtung-leiste { position: static; }
.raum-fuss > .stuben-status { position: static; margin: 0 10%; }   /* frei vom Raumtitel links und vom Koffer rechts */
.einrichtung-leiste:hover, .einrichtung-leiste:focus-visible { border-color: var(--gold); outline: none; }
.leiste-stueck { display: inline-flex; align-items: baseline; gap: .1em; line-height: 1; }
.leiste-stueck small { font-size: .7em; color: var(--text-mitte); }
.leiste-stueck.fehlt { opacity: .4; filter: grayscale(1); }
.leiste-fehlt { font-size: .75em; color: #ff9a8a; margin-left: .4em; }
.stuhl.frei { opacity: .3; }

/* ── Phase 4: Szene aus dem Bildbestand ─────────────────────────────── */
.raumbild-platz img.raumbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.raumszene { position: absolute; inset: 0; pointer-events: none; }
.stueck { position: absolute; }
.stueck img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stueck.gespiegelt img { transform: scaleX(-1); }
/* Krankheitszeichen (A.0.16.0): weißer Kreis mit dunklem Rand, das Sinnbild darin */
.stueck.zeichen { border-radius: 50%; background: rgba(255, 255, 255, .94); border: .18cqw solid #2a3a4a; box-shadow: 0 .15cqw .4cqw rgba(0, 0, 0, .35); }
.stueck.zeichen img { box-sizing: border-box; padding: 16%; object-fit: contain; }
.stueck-schatten { display: none; position: absolute; left: 4%; right: 4%; bottom: -1.2cqw; height: 2.4cqw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 40, 55, .32), transparent); }
.stueck.mit-schatten .stueck-schatten { display: block; }
/* Person als Klickfläche über ihrer Figur */
.kopf.figur { transform: none; justify-content: flex-start; border-radius: .6cqw; }
.kopf.figur .kopf-name { position: absolute; top: -1.9cqw; left: 50%; transform: translateX(-50%); opacity: .92; }
/* Vor- und Nachname (A.0.34.0, deine Ansage: „immer vor und zunahmen … da es sonst zu schnell zu verwechslungen kommt“):
   bei allen, die stehen oder sitzen, untereinander wie auf einem Namensschild — einzeilig stießen in Aufnahme, Wartezimmer
   und Kantine die Schilder der Nachbarn zusammen. Das Schild wächst vom Kopf aus nach oben (das Krankheitszeichen sitzt
   darüber, haus.js namensschild). Wer liegt (Betten in Reihen hintereinander), behält eine Zeile: dort ist quer Platz,
   aber nicht nach oben. */
.kopf.figur:not(.liegt) .kopf-name { top: auto; bottom: calc(100% + .3cqw); width: min-content; white-space: normal; text-align: center; line-height: 1.12; padding: .1em .45em; }
.kopf.figur .kopf-marke { top: -2.4cqw; right: -.4cqw; }
/* Liegende (A.0.56.0): das Schild setzt neben dem Krankheitszeichen über dem Kopf an (haus.js liegeSchild), nicht über
   der Bettmitte — Zeichen, Name und Marke sind ein Block */
.kopf.figur.liegt .kopf-name { left: var(--schild-x, 50%); transform: translateX(var(--schild-zum, -50%)); }
.kopf.figur.gespiegelt .kopf-marke { right: auto; left: -.4cqw; }
/* die Marke am Ende des Namensschilds (A.0.34.0, html.js kopf) */
.kopf-zeile { white-space: nowrap; }
.kopf.figur .kopf-name .kopf-marke { position: static; display: inline-block; margin-left: .3em; font-size: 1.15em; line-height: 1; vertical-align: -.1em; }
/* Namensschild ausgewichen (A.0.43.0, schilder.js): ein Strich vom Schild hinunter zum Kopf, wo es ohne Ausweichen säße */
.kopf.figur .kopf-name.gerueckt::after { content: ''; position: absolute; top: 100%; left: calc(50% - var(--sx, 0px)); width: max(1px, .16cqw);
  height: calc(var(--sy, 0px) + .3cqw); transform: translateX(-50%); background: rgba(0, 0, 0, .55); pointer-events: none; }
.kopf.figur:hover, .kopf.figur:focus-visible { outline: .2cqw solid var(--gold); outline-offset: .2cqw; background: rgba(222, 167, 38, .08); }
.kopf.figur.fort { opacity: .55; }
/* Funktionen als Leiste am rechten Rand */
.aktionen { position: absolute; right: 1%; top: 12%; width: 11.5%; display: flex; flex-direction: column; gap: .45cqw; z-index: 5; }
.aktionen .fleck { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important;
  min-height: 4.1cqw; flex-direction: row; justify-content: flex-start; gap: .5cqw; padding: .25cqw .5cqw; background: rgba(15, 10, 5, .66); }
.aktionen .fleck-bild { font-size: 1.7cqw; }
.aktionen .fleck-text { font-size: clamp(9px, .92cqw, 15px); }
.aktionen .fleck-text { background: none; padding: 0; text-align: left; }
.raumebene .kopf, .raumebene .fleck { z-index: 3; }
.bett-zeichen { position: absolute; transform: translate(-50%, -110%); font-size: 1.9cqw; filter: drop-shadow(0 1px 1px #000); z-index: 3; }
/* Stapelebenen: Szene unter den Klickflächen, Kopfleiste und Tafeln darüber */
.raumszene { z-index: 1; }
/* Nacht (A.0.57.0, steuerung.js): das Raumbild ist die Nachtfassung — Figuren und Dinge davor etwas gedämpft und kühler,
   damit sie nicht wie tagsüber beleuchtet herausstechen; die Krankheitszeichen bleiben hell (sie sind Hinweise) */
.nacht .raumszene .stueck:not(.zeichen) img { filter: brightness(.84) saturate(.9); }
.nacht .raumszene .stueck.glanz img { filter: drop-shadow(0 0 .3cqw #ffe28c) drop-shadow(0 0 .7cqw rgba(255, 210, 90, .8)) brightness(.95); }
.raumebene { z-index: 2; }
.hud, .raumtitel, .typenschild-klein, .koffer-platz { z-index: 6; }
.tafelebene { z-index: 10; }
/* Nicht im Spiel (A.0.57.2, ui/schleife.js): die Uhr steht, also auch jede Bewegung; über der Bühne steht „Angehalten“ */
.abwesend *, .abwesend *::before, .abwesend *::after { animation-play-state: paused !important; }
.abwesend .buehne::after { content: '⏸ Angehalten — klick ins Spiel, dann läuft die Zeit weiter'; position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center; background: rgba(8, 5, 2, .45); color: #fff7e4; font-size: max(15px, 2.2cqw); text-align: center;
  padding: 0 1em; pointer-events: none; text-shadow: 0 1px 3px #000; }
/* Sprechblasen (A.0.17.0): eigene Ebene über den Klickflächen, durchlässig für Klicks; höchstens eine Blase.
   Lage setzt ui/sprechblasen.js (links der Aktionsleiste, unter der Kopfleiste, nie über der Tür); der Zipfel ist ein
   SVG vom Fuß an der Unterkante (--fuss) bis zum Kopf, auch schräg; seine Füllung deckt den Rand unter dem Fuß zu */
.raumblasen { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.sprechblase { position: absolute; width: max-content; max-width: 24cqw; padding: .35em .7em; border-radius: .9em;
  background: #fffdf6; color: #1d2a36; border: max(1px, .15cqw) solid #2a3a4a; box-shadow: 0 .2cqw .5cqw rgba(0, 0, 0, .3);
  font: 700 clamp(11px, 1.2cqw, 20px) / 1.25 var(--schrift); text-align: center;
  transform-origin: var(--fuss, 50%) 100%; animation: blase-auf .2s ease-out both; }
.sprechblase .zipfel { position: absolute; top: 100%; overflow: visible; }
.sprechblase .zipfel path { fill: #fffdf6; stroke: #2a3a4a; stroke-width: max(1px, .15cqw); stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@keyframes blase-auf { from { opacity: 0; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .sprechblase { animation: none; } }
/* Der Raumname auf dem Schild an der Wand (alle Raumbilder haben das Schild an derselben Stelle) */
.schild-text { position: absolute; left: 38.7%; width: 20.3%; top: 9.3%; height: 8%; display: flex; align-items: center; justify-content: center;
  font: 800 clamp(10px, 2cqw, 34px) / 1 var(--schrift); color: #1d3a4f; letter-spacing: .01em;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
/* Eigenes Schild (A.0.23.0, Krankenzimmer in der Tiefe): das gemalte über der Tür ist zu klein — darüber eine Tafel */
.schild-text.eigen { background: linear-gradient(#ffffff, #eef1f4); border: .12cqw solid #8a96a3; border-radius: .3cqw;
  box-shadow: 0 .15cqw .35cqw rgba(0, 0, 0, .3); padding: 0 .5cqw; }
/* Firmenschild (A.0.24.0, deine Ansage: „in keinem Chefbüro dieser Welt steht ‚Chefbüro‘“; seit A.0.28.0: „Das ist noch
   nicht ansprechend und es fehlt noch eine Art Symbol wie jedes Krankenhaus es hat“): eine weiße Acrylplatte auf vier
   Abstandhaltern über dem gemalten Schild, links das Zeichen der Klinik (logo.js), daneben „Hilfenah“ zweifarbig und
   klein „KLINIK“ — im Chefbüro (Personalbüro und Verwaltung haben seit A.0.69.0/A.0.70.0 ihr eigenes, siehe unten) */
.schild-text.firmenschild { --punkt: radial-gradient(circle, #e9eef2 0 .13cqw, #8d98a2 .14cqw .2cqw, transparent .21cqw);
  gap: .9cqw; padding: 0 1.1cqw; text-shadow: none; overflow: visible; border-radius: .4cqw;
  background: var(--punkt) .25cqw .25cqw / .5cqw .5cqw no-repeat, var(--punkt) calc(100% - .25cqw) .25cqw / .5cqw .5cqw no-repeat,
    var(--punkt) .25cqw calc(100% - .25cqw) / .5cqw .5cqw no-repeat, var(--punkt) calc(100% - .25cqw) calc(100% - .25cqw) / .5cqw .5cqw no-repeat,
    linear-gradient(172deg, #ffffff 0%, #f3f7f8 55%, #e4ebee 100%);
  box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .38), 0 0 0 .07cqw rgba(120, 132, 142, .55), inset 0 .08cqw 0 rgba(255, 255, 255, .95); }
.schild-text.firmenschild .logo { position: static; inset: auto; height: 76%; width: auto; flex: none; overflow: visible;   /* nicht wie .raumbild-platz svg */ filter: drop-shadow(0 .08cqw .1cqw rgba(0, 40, 50, .25)); }
.schild-text.firmenschild .firma { display: flex; flex-direction: column; align-items: flex-start; gap: .28cqw; }
/* seit A.0.78.0 der Name deiner Wahl: --gross (logo.js firmenschild) nach der längsten Zeile, lange Namen auf zwei Zeilen */
.schild-text.firmenschild .firma b { font: 700 var(--gross, 2.15cqw) / .95 var(--zier); color: #0e5b6a; letter-spacing: .01em; }
.schild-text.firmenschild .firma.zwei b { line-height: 1.02; }
.schild-text.firmenschild .firma small.eng { letter-spacing: .18em; margin-right: -.18em; }   /* „GESUNDHEITSZENTRUM“ passt sonst nicht */
.schild-text.firmenschild .firma b i { font-style: normal; color: #1fa595; }
.schild-text.firmenschild .firma small { font: 800 .6cqw / 1 var(--schrift); letter-spacing: .55em; margin-right: -.55em; padding-left: .12cqw; color: #5b7380; }
/* das Schild der Maklerei (A.0.29.0): ihr eigenes Zeichen und ihre Farben — es ist ihr Laden, nicht die Klinik. Seit A.0.75.0
   „Lage, Lage, Lage“ (länger als „Lage & Lage“: etwas kleiner) und darunter „Betongold Immobilienhandel“ */
.schild-text.firmenschild.maklerei { gap: .7cqw; padding: 0 .9cqw; }
.schild-text.firmenschild.maklerei .firma b { font-size: 1.6cqw; color: #1d3f6e; }
.schild-text.firmenschild.maklerei .firma b i { color: #e8742a; }
.schild-text.firmenschild.maklerei .firma small { font-size: .52cqw; letter-spacing: .16em; margin-right: -.16em; text-transform: uppercase; color: #8a6a1c; }
/* das Schild des Personalbüros (A.0.69.0, deine Ansage 04.10.: „nicht auf das Personalbüro ausgerichtet sondern standard
   Klinikname“): die Farben der Klinik, „Personalbüro“ ist länger als „Hilfenah“ — etwas kleiner, der Satz darunter enger */
.schild-text.firmenschild.personalschild { gap: .75cqw; }
.schild-text.firmenschild.personalschild .firma b { font-size: 1.85cqw; }
.schild-text.firmenschild.personalschild .firma small { letter-spacing: .3em; margin-right: -.3em; }
/* das Schild der Verwaltung (A.0.70.0, deine Ansage 04.10.: „Auch hier wieder Standardschild statt speziell für die
   Abteilung“): Stempel mit Abdruck, „Verwaltung“ in einer Farbe, darunter der Behördensatz — eng wie im Personalbüro */
.schild-text.firmenschild.verwaltungsschild { gap: .75cqw; }
.schild-text.firmenschild.verwaltungsschild .firma b { font-size: 1.95cqw; }
.schild-text.firmenschild.verwaltungsschild .firma small { letter-spacing: .26em; margin-right: -.26em; }
/* Das Raumdisplay (A.0.31.0, die Räume in EINEM Bild): oben der Name in hellem Weiß, darunter die Lage des Raums —
   wie die Türdisplays neuer Kliniken. Vorher stand die Lage in dunklen Kästen über dem Bild und in der Zeile unten. */
.schild-text.display { color: #f2f7fb; letter-spacing: .02em; padding: 0 .6cqw; align-items: flex-end;
  text-shadow: 0 0 .5cqw rgba(140, 200, 255, .55); }
.display-lage { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: .25cqw .7cqw 0; box-sizing: border-box; overflow: hidden; pointer-events: auto; cursor: default;
  font-weight: 600; line-height: 1.15; font-family: var(--schrift); color: #a6e0ff; text-align: center; }   /* Größe: bedienung.js displaySchrift */
/* lange Lagen brechen um (höchstens zwei Zeilen je Text), statt mitten im Wort abzubrechen */
.display-lage span { max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.display-lage.warnung { color: #ff9c8a; }
/* Anruf des Tages (A.0.28.0): das Telefon im Chefbüro klingelt — Schallbögen links und rechts, solange niemand rangeht */
.klingeln { position: absolute; inset: -35% -28%; pointer-events: none; }
.klingeln::before, .klingeln::after { content: ''; position: absolute; top: 12%; bottom: 12%; width: 34%; border: .22cqw solid #ffd257;
  border-radius: 50%; filter: drop-shadow(0 0 .2cqw rgba(0, 0, 0, .55)); animation: klingeln .55s ease-in-out infinite alternate; }
.klingeln::before { left: 0; border-color: transparent transparent transparent #ffd257; }
.klingeln::after { right: 0; border-color: transparent #ffd257 transparent transparent; }
@keyframes klingeln { from { opacity: .25; transform: scale(.88); } to { opacity: 1; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .klingeln::before, .klingeln::after { animation: none; } }
/* Wanduhr der Krankenzimmer und des Chefbüros: eigene Zeiger auf dem gemalten Zifferblatt (A.0.23.0) */
.wanduhr { position: absolute; pointer-events: none; overflow: visible; }
.wanduhr line { stroke: #30353d; stroke-linecap: round; }
.wanduhr .std { stroke-width: .1; }
.wanduhr .min { stroke-width: .065; }
.wanduhr circle { fill: #30353d; }
.bett-zeichen { background: rgba(10, 6, 2, .6); border-radius: 999px; padding: .1em .35em; white-space: nowrap; font-size: 1.35cqw; }
/* wessen Bett freigehalten wird (A.0.56.0): der Name neben dem 🔪 */
.bett-zeichen small { font-size: clamp(10px, .95cqw, 15px); color: var(--hell); vertical-align: .25em; }
/* Computer als Bildschirm (A.0.25.0, deine Frage: „Warum in Gottes Namen ist der Computer ein Raum? statt ein desktop
   screen?“): der aufgeklappte Laptop vor dem verschwommenen Chefbüro; auf der Anzeige das Hintergrundbild, die
   Programme und die Taskleiste. Geöffnete Programme sind Fenster (tafel.css: .tafel.fenster) */
.schirm-buero { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; filter: blur(.5cqw) brightness(.48) saturate(.8); }
.laptop { position: absolute; border-radius: 1.3cqw; background: linear-gradient(#25292f, #121418);
  box-shadow: 0 0 0 .22cqw #b9bfc6, 0 0 0 .3cqw #6d747c, 0 1.6cqw 3.5cqw rgba(0, 0, 0, .65); }
.laptop::before { content: ''; position: absolute; left: 50%; top: .55cqw; width: .42cqw; height: .42cqw; margin-left: -.21cqw; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4b5560, #0b0d10 70%); }
.schirm { position: absolute; overflow: hidden; border-radius: .25cqw; background: linear-gradient(160deg, #8cc4ef, #3d7fb8); }
.schirm > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.schirm::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 38%); }
.schirm-leiste { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: flex-end; padding: 0 1.2cqw;
  background: rgba(18, 26, 38, .72); backdrop-filter: blur(.5cqw); border-top: 1px solid rgba(255, 255, 255, .14); }
.schirm-uhr { display: flex; flex-direction: column; align-items: flex-end; color: #f2f6fa; }
.schirm-uhr b { font: 700 clamp(9px, 1cqw, 16px) / 1.1 var(--schrift); font-variant-numeric: tabular-nums; }
.schirm-uhr small { font: 600 clamp(8px, .78cqw, 13px) / 1.1 var(--schrift); color: #c5d0dc; }
/* Das Statistik-Programm im Computer: seit A.0.79.0 in css/pc.css */
.zuklappen { position: absolute; z-index: 3; display: flex; align-items: center; gap: .45cqw; padding: 0 .9cqw 0 .6cqw; border: 1px solid transparent;
  border-radius: .4cqw; background: none; color: #f2f6fa; cursor: pointer; font: 700 clamp(9px, .92cqw, 15px) / 1 var(--schrift); }
.zuklappen svg { width: 60%; height: 60%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zuklappen svg { width: 1.5cqw; height: 1.5cqw; }
.zuklappen:hover, .zuklappen:focus-visible { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); outline: none; }
/* Aufdrucke auf gemalten Dingen (A.0.93.0): der Shoppital-Aufdruck auf dem Paket, das Preisschild von Sitzfleisch am Sesselchen der
   Verwaltung (raeume/feste.js) — Teil des Bilds, nicht der Klickfläche */
.ding .aufdruck { position: absolute; pointer-events: none; overflow: visible; }