/* observed reality · Synthese S1
   Grundlage aus V4: ein heller, neutraler Grund, die Farbe kommt nur aus den Bildern.
   Dazu der Fernseher mit dem Sender aus V2 und eine Rechtsseite. */
@font-face {
  font-family: "Atkinson Next";
  src: url("fonts/atkinson-next.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  ascent-override: 98.4%; descent-override: 31.6%;   /* wie hhea, damit jeder Browser dieselbe Zeilenbox baut (s. Durchstreichen) */
}
:root {
  --grund: #e9e7e2;
  --tinte: #1d1d1b;
  --matt: #6b6a66;
  --linie: rgba(29, 29, 27, .18);
  --flaeche-schrift: "Atkinson Next", system-ui, sans-serif;
  --fuge: clamp(14px, 2.4vw, 28px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--grund); color: var(--tinte);
  font: 400 15px/1.5 var(--flaeche-schrift);
  overflow: hidden; overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
/* Durchstreichen selbst gezeichnet: Safari setzt line-through nach eigener Rechnung zu hoch.
   Zeilenbox 1,3em (Ober- + Unterlänge), Strich 0,258em über der Grundlinie wie in der Schrift angegeben. */
s { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 .726em / 100% .056em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }

#flaeche { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#flaeche.zieht { cursor: grabbing; }

.kopf { position: fixed; left: calc(var(--fuge) - 8px); top: calc(var(--fuge) - 6px); margin: 0; pointer-events: none; max-width: min(520px, 60vw); padding: 6px 8px; border-radius: 10px; background: rgba(233, 231, 226, .82); backdrop-filter: blur(6px); }
.marke { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .01em; line-height: 1.2; }
.marke .name { display: block; font-weight: 400; color: var(--matt); }
.ort { margin: .7em 0 0; font-size: 15px; max-width: 34em; }
.ort[hidden] { display: none; }
.ort .ort-text { display: block; color: var(--matt); font-size: 14px; margin-top: .2em; }
body[data-welt="notizbuch"] { --grund: #dcd9d1; }
body[data-welt="kiste"] { --grund: #d8d1c4; }
body:not([data-welt="tafel"]) .kopf { background: rgba(250, 249, 245, .9); pointer-events: auto; }
body:not([data-welt="tafel"]) .regel { display: none; }
.regel { margin: .7em 0 0; font-size: 15px; color: var(--matt); max-height: 5em; overflow: hidden; transition: opacity .6s, max-height .6s .3s, margin .6s .3s; }
.regel.weg { opacity: 0; max-height: 0; margin: 0; }

.werkzeug { position: fixed; right: var(--fuge); top: var(--fuge); display: flex; gap: 8px; }
.knopf {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  background: rgba(233, 231, 226, .86); color: var(--tinte);
  border: 1px solid var(--tinte); border-radius: 999px; padding: 6px 14px;
  backdrop-filter: blur(6px);
}
.knopf:hover { background: var(--tinte); color: var(--grund); }
.knopf.voll { background: var(--tinte); color: var(--grund); }
.knopf.voll:hover { background: #000; }

.fuss { position: fixed; left: var(--fuge); right: var(--fuge); bottom: calc(var(--fuge) - 4px); display: flex; justify-content: space-between; align-items: end; gap: 12px; pointer-events: none; }
.fuss p { margin: 0; pointer-events: auto; }
.massstab { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--matt); }
.massstab:not(:empty) { background: rgba(233, 231, 226, .88); padding: 2px 8px; border-radius: 999px; }
.massstab b { color: var(--tinte); font-weight: 700; }
.recht { display: flex; gap: 14px; font-size: 13px; }
.recht a { background: rgba(233, 231, 226, .8); padding: 2px 4px; border-radius: 3px; }

/* Übersicht: die ganze Tafel klein, rot der Ausschnitt */
.uebersicht { position: fixed; right: var(--fuge); bottom: calc(var(--fuge) + 26px); border-radius: 4px; box-shadow: 0 0 0 1px var(--linie), 0 6px 18px rgba(0, 0, 0, .12); cursor: pointer; }
.uebersicht[hidden] { display: none; }

/* Ankommen: was man ganz nah vor sich hat */
.ankunft {
  position: fixed; left: 50%; bottom: calc(var(--fuge) + 30px); transform: translateX(-50%);
  width: max-content; max-width: min(620px, calc(100vw - 2 * var(--fuge)));
  background: rgba(233, 231, 226, .92); backdrop-filter: blur(8px);
  border: 1px solid var(--linie); border-radius: 12px; padding: 10px 14px;
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 14px;
}
.ankunft[hidden] { display: none; }
.ankunft .gang { font-weight: 700; }
.ankunft .klein { color: var(--matt); }
.ankunft .knopf { padding: 4px 12px; }

/* Felder als HTML: unsichtbar, bis eins den Fokus hat */
.felder { position: fixed; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.felder button { all: unset; }

dialog {
  border: 0; padding: 0; color: var(--tinte); background: #f4f2ee;
  width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
}
dialog::backdrop { background: rgba(233, 231, 226, .7); backdrop-filter: blur(3px); }
.dlg-innen { padding: clamp(18px, 4vw, 40px); }
.dlg-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.dlg-kopf h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.dlg-text { margin: 0 0 18px; color: var(--matt); }

.verzeichnis { width: min(980px, calc(100vw - 24px)); }
.vz-gruppe { margin: 22px 0 0; }
.vz-gruppe h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.vz-gruppe h3 span { font-weight: 400; color: var(--matt); }
.vz-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.vz-liste button {
  all: unset; cursor: pointer; display: block; border-radius: 3px;
  width: 34px; height: 34px; background: var(--f); position: relative;
}
.vz-liste.gross button { width: 64px; height: 44px; }
.vz-liste.text button { width: auto; height: auto; background: none; padding: 4px 8px; border: 1px solid var(--linie); border-radius: 999px; font-size: 14px; }
.vz-liste button:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }
.vz-liste button.beob::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--bild) center / cover; }
.vz-liste.text button.beob { border-color: var(--tinte); }
.sichern-zeile { margin: 26px 0 0; }

/* Blättern in Tagebuch und Notizbuch */
.blaettern { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.blaettern:last-child { margin: 28px 0 0; }
.blaettern .klein { color: var(--matt); font-size: 14px; }
.knopf:disabled { opacity: .35; cursor: default; background: transparent; color: var(--tinte); }
.eintrag-bilder { display: grid; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.eintrag-bilder figure { margin: 0; background: #fbfaf6; padding: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .1); }
.eintrag-bilder figcaption { font-size: 14px; line-height: 1.35; color: var(--matt); padding: 8px 2px 0; }
.eintrag-bilder figure.karte { padding: 16px 18px; font-size: 15px; line-height: 1.45; align-self: center; }
.eintrag-bilder figure.karte p { margin: 0 0 .6em; } .eintrag-bilder figure.karte p:last-child { margin: 0; }
h3.abschnitt { margin: 22px 0 6px; font-size: 18px; }
.eintrag-bilder img { display: block; width: 100%; height: auto; }

/* Blatt: lesen und hören, wenn man ganz angekommen ist */
.blatt-ueber { margin: 0; font-size: 13px; color: var(--matt); }
.blatt h2 { margin: 0 0 .3em; font-size: clamp(26px, 4.4vw, 40px); line-height: 1.08; font-weight: 700; letter-spacing: -.015em; }
.blatt .datum { margin: 0 0 1.2em; color: var(--matt); }
.blatt .lauftext p { font-size: 18px; line-height: 1.6; margin: 0 0 1em; max-width: 36em; }
.blatt figure { margin: 1.4em 0; }
.blatt figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
.mix-kopf { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: start; }
.mix-kopf img { width: 160px; height: 160px; object-fit: cover; border-radius: 4px; display: block; }
.mix-kopf .tags { color: var(--matt); font-size: 14px; }
.hoeren { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hoeren p { margin: 0; font-size: 14px; color: var(--matt); flex-basis: 100%; }
.tracks { list-style: none; margin: 24px 0 0; padding: 0; }
.tracks li { display: grid; grid-template-columns: 4.8em 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--linie); font-size: 15px; }
.tracks time { font-variant-numeric: tabular-nums; color: var(--matt); }

/* Der Mix-Player: oben rechts unter den Knöpfen (dort ist in der Tafel und in allen Räumen frei), über allen Räumen (.raum-rahmen),
   damit er beim Raumwechsel weiterläuft. Schmal (Telefon): unten über die ganze Breite, weil die Knöpfe dort untereinander stehen. */
.empfang {
  position: fixed; z-index: 30; right: var(--fuge); top: calc(var(--fuge) + 46px);
  width: min(380px, calc(100vw - 2 * var(--fuge))); display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
  background: #f4f2ee; border: 1px solid var(--linie); border-radius: 12px; padding: 6px 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.empfang[hidden] { display: none; }
.empfang iframe { width: 100%; height: 60px; border: 0; }
.empfang iframe.soundcloud { height: 166px; }

.ohne-js { position: fixed; inset: auto 20px 20px; background: #fff; padding: 12px; }

@media (max-width: 640px) {
  body { font-size: 14px; }
  .kopf { max-width: calc(100vw - 2 * var(--fuge) - 120px); }
  .marke, .regel { font-size: 13px; }
  .werkzeug { flex-direction: column; align-items: end; gap: 6px; }
  .empfang { top: auto; bottom: calc(var(--fuge) + env(safe-area-inset-bottom, 0px)); }
  .knopf { font-size: 13px; padding: 5px 11px; }
  .ankunft { bottom: calc(var(--fuge) + 46px); font-size: 13px; left: var(--fuge); transform: none; max-width: calc(100vw - 2 * var(--fuge) - 110px); }
  .uebersicht { bottom: calc(var(--fuge) + 46px); }
  .fuss { flex-direction: column-reverse; align-items: start; gap: 4px; }
  .mix-kopf { grid-template-columns: 96px 1fr; gap: 14px; }
  .mix-kopf img { width: 96px; height: 96px; }
  .blatt .lauftext p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .regel { transition: none; }
}

/* Impressum, Datenschutz, 404 */
body.blatt-seite { overflow: auto; }
.lesen { max-width: 680px; margin: 0 auto; padding: 48px 20px 80px; }
.lesen h1 { font-size: 40px; line-height: 1.1; margin: .4em 0 .8em; }
.lesen h2 { font-size: 18px; margin: 1.6em 0 .3em; }
.lesen p { margin: 0 0 1em; }
.lesen .zurueck { font-size: 14px; }
.leer-feld { width: 180px; height: 120px; background: #d9d6cf; margin: 0 0 24px; }

@media print {
  #flaeche, .werkzeug, .ankunft, .empfang { display: none !important; }
  body { overflow: visible; }
}

/* ---------------------------------------------------------------- Der Fernseher: Sender aus V2 auf der Scheibe */
.dom-schicht { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.tv-schirm { position: absolute; left: 0; top: 0; width: 960px; height: 720px; transform-origin: 0 0; overflow: hidden; background: #050506; opacity: 0; transition: opacity .15s; }
.tv-schirm.sichtbar { opacity: 1; }
.tv-schirm[hidden] { display: none; }
.tv-schirm iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.synth-schirm { position: absolute; left: 0; top: 0; width: 1168px; height: 504px; transform-origin: 0 0; overflow: hidden; opacity: 0; transition: opacity .15s; pointer-events: none; }
.synth-schirm[hidden] { display: none; }
.synth-schirm iframe { width: 1168px; height: 100%; border: 0; display: block; pointer-events: none; background: transparent; }
/* Einsaugen: Fläche und Röhre stürzen gemeinsam auf die Scheibe zu, alles andere weicht */
#flaeche.sog, .dom-schicht.sog { transition: transform .72s cubic-bezier(.7, 0, .84, 0), filter .72s ease-in; filter: brightness(1.35) saturate(1.2); will-change: transform; }
body.eingesogen { background: #050506; overflow: hidden; }
body.eingesogen .werkzeug, body.eingesogen .ankunft, body.eingesogen .kopf, body.eingesogen .fuss, body.eingesogen .uebersicht, body.eingesogen .ort, body.eingesogen .regel { opacity: 0; transition: opacity .25s; pointer-events: none; }
/* Ein Raum im Rahmen über der Tafel (welt.js, raum.js): füllt den Schirm, die Tafel ruht darunter */
.raum-rahmen { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; display: block; z-index: 20; background: transparent; }
/* Tiefe der Scheibe im Gehäuse. Zeilen, Maske, Wölbung und Glanz rechnet der Sender selbst (sender/roehre.js). Lässt Klicks durch. */
.crt { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 70px 12px rgba(0,0,0,.45), inset 0 0 10px rgba(0,0,0,.7);
  mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) { .tv-schirm, .synth-schirm { transition: none; } }

/* ---------------------------------------------------------------- Rechtsseiten */
body.statisch { overflow: auto; height: auto; }
.recht-seite { max-width: 40em; margin: 0 auto; padding: 32px 20px 64px; }
.recht-seite h1 { font-size: 28px; margin: .6em 0; }
.recht-seite h2 { font-size: 17px; margin: 1.6em 0 .3em; }
.recht-seite p { margin: 0 0 .8em; }
/* dieselben Texte als Dialog über der Tafel (index.php) */
.recht-dlg .recht-text { max-width: 40em; }
.recht-dlg .recht-text h2 { font-size: 17px; margin: 1.6em 0 .3em; letter-spacing: 0; }
.recht-dlg .recht-text p { margin: 0 0 .8em; }

/* Die Platte auf dem Tisch (Geste aus V0): Hülle schräg, Vinyl halb heraus, daneben Text und Tracklist */
.platte-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(20, 18, 15, .78); overflow: auto; color: var(--tinte); border-radius: 0; box-shadow: none; }
.platte-dlg::backdrop { background: transparent; backdrop-filter: none; }
.platte-buehne { box-sizing: border-box; width: min(1120px, 94vw); min-height: 100%; margin: auto; padding: 72px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.platte-kunst { position: relative; width: 62%; aspect-ratio: 1; transform: rotate(-7deg); transform-origin: 0 0; will-change: transform; }
.platte-kunst .huelle { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; display: block; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 8px 16px 34px rgba(0, 0, 0, .5); background: #555; }
.platte-kunst .vinyl { position: absolute; inset: 2%; border-radius: 50%; z-index: 1; transform: translateX(58%);
  background: radial-gradient(circle, #1b1b1c 0 35%, transparent 35.5%), repeating-radial-gradient(circle, #121213 0 1px, #1c1c1d 1px 3px);
  box-shadow: 6px 12px 28px rgba(0, 0, 0, .55), inset 0 0 0 2px #2a2a2b; }
.platte-kunst .vinyl::before { content: ""; position: absolute; inset: 1%; border-radius: 50%;
  background: conic-gradient(from -30deg, transparent, rgba(255, 255, 255, .14) 7%, transparent 15%, transparent 50%, rgba(255, 255, 255, .1) 57%, transparent 65%); }
.platte-kunst .etikett { position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; transform: translate(-50%, -50%); border-radius: 50%; background: #666 center / cover; box-shadow: 0 0 0 2px rgba(0, 0, 0, .45); }
.platte-kunst .etikett::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 50%; background: #e9e7e2; }
.platte-info { background: #f7f6f2; border-radius: 10px; padding: 26px 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); max-height: calc(100dvh - 144px); overflow: auto; position: relative; z-index: 3; }
.platte-info .blatt-ueber { margin: 0 0 6px; }
.platte-zu { position: fixed; right: 20px; top: 18px; z-index: 4; }
.mix-kopf.ohne-bild { grid-template-columns: 1fr; }
@media (max-width: 760px) {
  .platte-buehne { display: flex; flex-direction: column; align-items: stretch; gap: 36px; padding: 76px 18px 28px; }
  .platte-kunst { width: 54vw; margin: 20px 0 0 6vw; }
  .platte-info { max-height: none; }
}
@media (prefers-reduced-motion: reduce) { .platte-kunst { will-change: auto; } }

/* Klang: drei kleine Balken, die sich bewegen, solange er läuft */
.knopf.klang { display: inline-flex; align-items: center; gap: 7px; }
.knopf.klang i { position: relative; width: 11px; height: 10px; display: inline-block;
  background: linear-gradient(currentColor, currentColor) 0 100% / 3px 40% no-repeat, linear-gradient(currentColor, currentColor) 4px 100% / 3px 70% no-repeat, linear-gradient(currentColor, currentColor) 8px 100% / 3px 30% no-repeat; opacity: .45; }
.knopf.klang[aria-pressed="true"] i { opacity: 1; animation: klang-balken 1.6s ease-in-out infinite alternate; }
@keyframes klang-balken {
  0% { background-size: 3px 40%, 3px 70%, 3px 30%; }
  50% { background-size: 3px 80%, 3px 35%, 3px 65%; }
  100% { background-size: 3px 55%, 3px 90%, 3px 45%; }
}
@media (prefers-reduced-motion: reduce) { .knopf.klang[aria-pressed="true"] i { animation: none; } }

/* Begrüßung im Kopf: immer da, ruhig, eine Spur kleiner als der Name */
.gruss { margin: .6em 0 0; font-size: 15px; line-height: 1.45; max-width: 30em; }
.gruss[hidden] { display: none; }
/* herangezoomt (welt.js: kopfPruefen): der Gruß tritt zurück, „Mehr über mich →“ bleibt */
body.nah #gruss-text { display: none; }
.gruss .mehr { all: unset; pointer-events: auto; cursor: pointer; font-weight: 600; white-space: nowrap; border-bottom: 1px solid currentColor; }
.gruss .mehr:hover { color: var(--matt); }
.gruss .mehr:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; border-radius: 2px; }
.gruss .mehr[hidden] { display: none; }
@media (max-width: 640px) { .gruss { font-size: 14px; } }

/* Telefon und Tablet unterwegs (welt.js: kopfPruefen): der Kopf schrumpft auf eine Zeile, die Knöpfe werden zu Zeichen nebeneinander.
   Ihr Text bleibt im Knopf (Schriftgröße 0), damit sie ihren Namen behalten. */
@media (max-width: 640px), (pointer: coarse) and (max-width: 1366px) {
  body.unterwegs .kopf { max-width: calc(100vw - 2 * var(--fuge) - 160px); }
  body.unterwegs .gruss, body.unterwegs .regel, body.unterwegs .marke .name, body.unterwegs .ort .ort-text { display: none; }
  body.unterwegs .marke, body.unterwegs .ort { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.unterwegs .ort { margin: .15em 0 0; font-size: 13px; }
  body.unterwegs .werkzeug { flex-direction: row; gap: 6px; }
  body.unterwegs .werkzeug .knopf { font-size: 0; width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; gap: 0; }
  body.unterwegs .werkzeug .knopf[hidden] { display: none; }
  body.unterwegs .werkzeug .knopf::before { font-size: 17px; line-height: 1; font-variant-emoji: text; }
  body.unterwegs #hinaus::before { content: "←"; }
  body.unterwegs #zurueck::before { content: "▦"; }
  body.unterwegs #verzeichnis-auf::before { content: "☰"; }
}

/* ---------------------------------------------------------------- Fototagebuch als Raum: die Zeitleiste links */
.zeitleiste { position: fixed; z-index: 6; left: 12px; top: 120px; max-height: calc(100vh - 190px); width: 124px; overflow-y: auto; scrollbar-width: none;
  padding: 8px 2px; border-radius: 10px; background: rgba(250, 249, 245, .88); backdrop-filter: blur(6px);
  animation: leiste-ein .5s ease-out; }
.zeitleiste::-webkit-scrollbar { display: none; }
@keyframes leiste-ein { from { opacity: 0; transform: translateX(-8px); } }
.zeitleiste ol { list-style: none; margin: 0; padding: 0; }
.zeitleiste li.jahr + li.jahr { margin-top: 12px; }
.zeitleiste button { all: unset; cursor: pointer; display: block; padding: 2px 8px; border-left: 2px solid transparent; color: var(--matt); font-size: 14px; line-height: 1.35; }
.zeitleiste button.jahr { font-size: 20px; font-weight: 700; color: var(--tinte); padding-bottom: 4px; }
.zeitleiste button:hover { color: var(--tinte); }
.zeitleiste button.monat[aria-current] { color: var(--tinte); font-weight: 700; border-left-color: var(--tinte); }
.zeitleiste button:focus-visible { outline: 2px solid var(--tinte); outline-offset: 1px; }
@media (max-width: 640px) {
  .zeitleiste { left: 4px; width: 50px; }
  .zeitleiste button { padding: 2px 4px; font-size: 12px; }
  .zeitleiste button.jahr { font-size: 14px; }
}
body.im-raum .uebersicht { display: none; }
.raum-titel { position: fixed; z-index: 7; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(.96); margin: 0; text-align: center; pointer-events: none;
  opacity: 0; transition: opacity .7s ease-out, transform 1.6s cubic-bezier(.2, .7, .2, 1); color: var(--tinte);
  padding: 18px 34px 20px; border-radius: 16px; background: rgba(250, 249, 245, .9); backdrop-filter: blur(8px); box-shadow: 0 10px 40px rgba(40, 32, 24, .12); }
.raum-titel b { display: block; font-size: clamp(30px, 6vw, 64px); font-weight: 700; letter-spacing: -.01em; }
.raum-titel span { display: block; font-size: clamp(14px, 1.6vw, 19px); color: var(--matt); margin-top: 4px; }
.raum-titel.da { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.raum-titel.weg { opacity: 0; transition-duration: .9s; }

/* Türschwelle (welt.js): an der Schwelle eines Raums hält der Zoom an; der Hinweis zeigt, wie weit man schon drückt */
.schwelle-hinweis { position: fixed; z-index: 15; transform: translateX(-50%); pointer-events: none; padding: 6px 10px 8px; border-radius: 8px;
  background: rgba(29,29,27,.86); color: #f7f6f2; font: 13px/1.3 "Atkinson Next", system-ui, sans-serif; white-space: nowrap; overflow: hidden; }
.schwelle-hinweis[hidden] { display: none; }
.schwelle-hinweis span { opacity: .75; }
.schwelle-hinweis i { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--druck, 0) * 100%); background: #f7f6f2; transition: width .12s; }
#flaeche.schwelle, .dom-schicht.schwelle { transition: transform .18s ease-out; }