/* ═══════════════════════════════════════════════════════════════════════
   AUFENTHALTSRAUM — Zusatz-Schicht für legal-smati-master.html
   Korabs Entwurf 18.08.2026. Baut NICHTS um: im Ruhezustand ist diese
   Datei wirkungslos. Erst body.raum-* schaltet die Bewegung frei.
   Rückbau = die zwei Zeilen vor </body> entfernen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- 1. Das Rad wandert nach links und dreht weiter ---------- */
/* Das Rad ist SVG mit viewBox — Größe ändern skaliert den Inhalt uniform.
   Keine Kachel wird neu berechnet, das Patent bleibt unberührt. */
#rad-stage {
  transition: left .75s cubic-bezier(.4,0,.2,1),
              width .75s cubic-bezier(.4,0,.2,1),
              height .75s cubic-bezier(.4,0,.2,1),
              opacity .45s ease;
}
/* Korab 18.08.: "erscheint das app rad ohne den hintergrund ... auf der linken
   seite, das nur etwas weiter runter wie es jetzt steht, am ende der weltkarte,
   so dass die weltkarte nicht verdeckt wird".
   Die Weltkarte sitzt bei left 7,5vw / top 28vh, 27,7vw breit, 27vh hoch — sie
   endet also bei 55vh. Das Rad setzt sich darunter ab, auf derselben senkrechten
   Achse (7,5 + 27,7/2 = 21,35vw), von unten her verankert. */
/* Korab 19.08.: "wenn der kreis der apps eine app-auswahl ist und die
   kreissteuerung zur seite unten links in derselben groesse verschiebt". */
body.raum-arbeit #rad-stage,
body.raum-cowork #rad-stage {
  left: 25vw !important;
  top: auto !important;
  bottom: 104px !important;
  transform: translateX(-50%) !important;
  width:  min(560px, 42vw, calc(74vh - 90px)) !important;
  height: min(560px, 42vw, calc(74vh - 90px)) !important;
}
/* Die Karte bleibt jetzt unangetastet — das Rad liegt darunter, nicht darauf. */
/* "ohne den Hintergrund": Felgenmantel, Mittel-Glow und Pfeilspitze treten
   zurueck — nur die Programme auf ihrer Kreisbahn bleiben stehen. */
body.raum-arbeit #rad-svg .rad-mantel,
body.raum-arbeit #rad-svg .dms-bg-glow,
body.raum-arbeit #rad-svg .rad-top-pointer { opacity: 0 !important; transition: opacity .5s ease; }
body.raum-arbeit .center-label { opacity: 0 !important; }
/* Titel über dem Rad wandert mit — er ist an die Rad-Geometrie gekoppelt */
.breadcrumb { transition: left .75s cubic-bezier(.4,0,.2,1), top .75s cubic-bezier(.4,0,.2,1); }
body.raum-arbeit .breadcrumb {
  left: 25vw !important;
  top: auto !important;
  bottom: calc(104px + min(560px, 42vw, calc(74vh - 90px)) + 16px) !important;
}
/* Rotation drosseln, solange eine App läuft (sonst frisst sie Bildrate) */
body.raum-arbeit.rad-mechanical-on[data-rad-idx="0"] #cases-group { animation-duration: 420s !important; }

/* ---------- 2. Das Rad tritt zurück, wenn Cowork kommt ---------- */
/* !important, weil der Master das Rad an mehreren Stellen mit !important sichtbar haelt */
body.raum-cowork #rad-stage,
body.raum-cowork .breadcrumb,
body.raum-vollbild #rad-stage,
body.raum-vollbild .breadcrumb { opacity: 0 !important; pointer-events: none !important; }

/* Fokus-Akte weicht der App-Fläche */
#answer-panel { transition: opacity .4s ease; }
body.raum-arbeit #answer-panel,
body.raum-cowork #answer-panel,
body.raum-vollbild #answer-panel { opacity: 0 !important; pointer-events: none !important; }
/* Weltkarte gehört dem Ruhezustand */
body.raum-arbeit .worldmap,
body.raum-cowork .worldmap { opacity: 0 !important; transition: opacity .4s ease; }

/* ---------- 3. Die Bühne: App auf der Fläche, die dem Rad gehörte ---------- */
/* Korab 18.08.: "soll dieses dashboard das fenster ersetzen, das du ueber dem
   legal dashboard unschoen vorsteht". Kein aufgesetztes Fenster mehr, das an den
   Rand stoesst — ein eingefasster Bereich MIT Abstand und Rand auf allen vier
   Seiten. Er nimmt die rechte Haelfte samt dem Platz, wo die Fall-Uebersicht
   stand. Schatten nach unten statt seitlich: liegt IM Dashboard, nicht darauf. */
#raum-buehne {
  position: fixed;
  top: 74px; right: 20px; bottom: 20px; left: 50%;
  z-index: 9600;
  display: none;
  /* Korab 22.08.2026: "die Raender sollen transparent und in den Hintergrund des
     Dashboards eingebettet sein" — hoechste Ebene der Einigkeit. Vorher lagen ZWEI
     Flaechen uebereinander: diese Platte (eigener Grund + 12px Polster + Schatten)
     und darin die App mit eigenem Grund. Das Polster war der sichtbare Ring dazwischen.
     Jetzt traegt die Buehne keine eigene Flaeche mehr — sie ist nur noch der Ort. */
  background: transparent;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: none;
  padding: 0;
}
body.raum-arbeit #raum-buehne,
body.raum-cowork #raum-buehne,
body.raum-vollbild #raum-buehne { display: block; }
body.raum-cowork  #raum-buehne { left: 50%; }
body.raum-vollbild #raum-buehne {
  top: 0; bottom: 0; left: 0; z-index: 9700;
  border: 0; border-radius: 0;
}
/* Der Rahmen traegt die Flaeche, das Fenster fuellt ihn. !important, weil der
   Master eigene iframe-Regeln mitbringt (Browser-Panel) und sonst die Hoehe frisst. */
#raum-rahmen {
  position: absolute !important;
  top: 34px !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
}
/* Korab 18.08.: "es gibt immer noch ein fenster ... hierdrin muessen die apps
   erscheinen, nicht oberhalb der app".
   Der Fensterkopf mit Titel, Minus und Pfeil ist weg. Die App fuellt den
   Bereich vollstaendig — kein aufgesetztes Fenster mehr, nur der Bereich und
   was darin laeuft. Die Funktionen des Kopfes gibt es weiterhin, nur an ihrem
   natuerlichen Ort: welche App offen ist steht im Tab unten rechts, weglegen
   ist das Kreuz am Tab, zurueck fuehrt die Mitte des Rades. */
.raum-kopf { display: none !important; }
#raum-rahmen { top: 0 !important; }
.raum-hinweis { top: 0 !important; }
#raum-foto { top: 0 !important; height: 100% !important; }

#raum-rahmen, .raum-hinweis, #raum-foto {
  border-radius: 10px; overflow: hidden;
  top: 12px !important; left: 12px !important; right: 12px !important; bottom: 12px !important;
  height: auto !important; width: auto !important;
}
#raum-buehne iframe {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important;
  min-height: 0 !important; max-height: none !important;
  border: 0 !important; background: transparent; border-radius: 14px; display: none;
}
#raum-buehne iframe.raum-an { display: block !important; }

.raum-kopf {
  position: absolute; top: 0; left: 0; right: 0; height: 34px; z-index: 3;
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  font-size: 11.5px; letter-spacing: .4px; color: #8a95b2;
  background: transparent; border-bottom: 0;   /* Korab 22.08.: keine Kante mehr */
}
.raum-kopf .raum-titel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raum-kopf button {
  background: none; border: 0; color: #8a95b2; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 3px 8px; border-radius: 5px;
}
.raum-kopf button:hover { color: #38d1ff; background: rgba(56,209,255,.12); }

/* Der Raum sagt die Wahrheit, wenn ein Fenster nicht aufgeht */
.raum-hinweis {
  position: absolute; top: 34px; left: 0; right: 0; bottom: 0; z-index: 2;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 13px; padding: 32px; text-align: center; background: #0c1230;
}
.raum-hinweis.raum-an { display: flex; }
.raum-hinweis h3 { font-size: 14.5px; font-weight: 600; color: #e6ecf5; margin: 0; }
.raum-hinweis p  { font-size: 12.5px; line-height: 1.62; color: #8a95b2; max-width: 420px; margin: 0; }
.raum-hinweis a {
  color: #38d1ff; text-decoration: none; border: 1px solid #38d1ff;
  padding: 7px 14px; border-radius: 8px; font-size: 12px;
}
.raum-hinweis a:hover { background: rgba(56,209,255,.12); }

/* ---------- 4. Cowork links — der Raum zwingt es aus dem Vollbild ---------- */
/* 19.08., Korabs Fund: "cowork hat noch das alte cowork fenster, das im
   vordergrund gestanden ist".
   Er hat recht — hier standen die alten Fenster-Werte: left 0 (klebt am
   Bildschirmrand), Radius nur rechts, harter Schatten SEITLICH 18px.
   Ich hatte die Panel-Werte nur auf die App-Flaeche angewandt und Cowork
   vergessen. Eine Verbesserung an einer von zwei Flaechen ist keine.
   Jetzt traegt Cowork dieselben Werte wie die App-Flaeche: eingerueckt,
   35% deckend, randlos, Radius rundum, weicher Schatten. */
body.raum-cowork #cowork-overlay.visible,
body.raum-cowork liri-cowork {
  position: fixed !important;
  top: 74px !important; left: 20px !important;
  width: calc(50% - 30px) !important; right: auto !important; bottom: 20px !important;
  background: rgba(15,22,50,.35) !important;
  border: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.2) !important;
  z-index: 9600 !important;
}

/* ---------- 5. Tab-Leiste: minimieren statt schließen ---------- */
/* 18.08.: Die Reiter lagen ueber dem App-Inhalt und verdeckten ihn — selbst
   gemessen, nicht gemeldet bekommen. Sie sitzen jetzt UNTER der Flaeche, im
   Streifen zwischen ihr und der Eingabezeile. */
#raum-tabs {
  /* 19.08.: Sie lagen ueber dem App-Inhalt. Jetzt sitzen sie INNEN am unteren
     Rand der Flaeche — als deren Streifen, nicht als Fremdkoerper darauf. */
  position: absolute; right: 12px; bottom: 10px; z-index: 3;
  display: flex; gap: 7px; max-width: 42vw; overflow-x: auto; padding: 2px;
}
#raum-tabs:empty { display: none; }
.raum-tab {
  display: flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer;
  background: rgba(22,29,58,.92); border: 1px solid rgba(120,140,200,.25);
  border-radius: 9px; padding: 6px 10px; font-size: 11.5px; color: #8a95b2;
  transition: color .2s, border-color .2s;
}
.raum-tab:hover { color: #e6ecf5; border-color: #38d1ff; }
.raum-tab.raum-aktiv { color: #38d1ff; border-color: #38d1ff; background: rgba(56,209,255,.1); }
.raum-tab.raum-kalt { opacity: .55; }
.raum-tab .raum-zu { opacity: .55; font-size: 13px; }

/* ---------- 6. Knöpfe: Vollbild unten links, Apps unten rechts ---------- */
.raum-knopf {
  position: fixed; z-index: 9650; cursor: pointer; white-space: nowrap;
  background: rgba(22,29,58,.92); border: 1px solid rgba(120,140,200,.25);
  color: #8a95b2; border-radius: 9px; padding: 8px 13px;
  font-size: 11px; letter-spacing: 1.1px; transition: color .2s, border-color .2s;
}
.raum-knopf:hover { color: #38d1ff; border-color: #38d1ff; }
.raum-knopf.raum-an { color: #38d1ff; border-color: #38d1ff; background: rgba(56,209,255,.1); }
#raum-vollbild-btn { left: 18px; bottom: 74px; display: none; }
body.raum-arbeit #raum-vollbild-btn,
body.raum-cowork #raum-vollbild-btn,
body.raum-vollbild #raum-vollbild-btn { display: block; }
#raum-apps-btn { right: 20px; bottom: 24px; }

/* App-Wähler — nur auf Klick, im Ruhezustand unsichtbar */
#raum-waehler {
  position: fixed; right: 20px; bottom: 66px; z-index: 9660;
  display: none; flex-wrap: wrap; gap: 8px; width: min(430px, 62vw);
  padding: 13px; border-radius: 12px;
  background: rgba(16,22,48,.97); border: 1px solid rgba(120,140,200,.25);
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
}
#raum-waehler.raum-an { display: flex; }
.raum-app {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 11px; border-radius: 9px; font-size: 12px; color: #8a95b2;
  background: rgba(78,104,168,.2); border: 1px solid rgba(140,165,225,.22);
  transition: color .18s, border-color .18s, background .18s;
}
.raum-app:hover { color: #e6ecf5; border-color: #38d1ff; background: rgba(56,209,255,.16); }
.raum-app .raum-auth { opacity: .5; font-size: 10px; }

/* ---------- 7. Schmal: Rad ODER App, nie beides ---------- */
@media (max-width: 760px) {
  body.raum-arbeit #rad-stage,
  body.raum-arbeit .breadcrumb { opacity: 0; pointer-events: none; }
  #raum-buehne { left: 0 !important; top: 56px; bottom: 62px; border-radius: 0; }
  body.raum-cowork #cowork-overlay.visible,
  body.raum-cowork liri-cowork { width: 100% !important; }
  #raum-tabs { max-width: 60vw; right: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PLUS · FOTO-VORSCHAU · ÜBERSICHT   (Korabs Zusatz, 18.08.2026)
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Das Plus an der Kachel ----------
   Die Plus-Sprache des Hauses (vom Kalender übernommen): im Ruhezustand fast
   unsichtbar, erscheint beim Überfahren der Kachel, leuchtet beim Berühren. */
/* Leise sichtbar statt unsichtbar: Wer es nicht braucht, sieht es kaum.
   Wer es sucht, findet es sofort — auch ohne Maus, auch beim ersten Mal.
   Vorher war es opacity 0 und damit auf Touch unerreichbar und sonst unauffindbar. */
.raum-plus { opacity: .26; transition: opacity .18s ease; cursor: pointer; }
.case-icon:hover .raum-plus { opacity: .95; }
.raum-plus:hover { opacity: 1 !important; }
.raum-plus:hover circle { fill-opacity: .85; stroke-opacity: 1; }
.raum-plus:hover path { stroke-width: 2; }
/* Auf Touchgeräten gibt es kein Überfahren — dort steht es dauerhaft, gedämpft */
@media (hover: none) { .raum-plus { opacity: .6; } }

/* ---------- Foto-Vorschau: da, bevor die App da ist ---------- */
#raum-foto {
  position: absolute; top: 34px; left: 0; right: 0; bottom: 0;
  width: 100%; height: calc(100% - 34px);
  object-fit: cover; object-position: top center;
  z-index: 1; opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
  filter: saturate(.9) brightness(.82);      /* erkennbar, aber nicht als "fertig" lesbar */
}
#raum-foto.raum-an { opacity: 1; }
/* ein ruhiger Puls sagt: es lädt noch, das hier ist ein Bild */
#raum-foto.raum-an { animation: raumAtem 2.4s ease-in-out infinite; }
@keyframes raumAtem { 0%,100% { filter: saturate(.9) brightness(.82); }
                      50%     { filter: saturate(.95) brightness(.92); } }

/* ---------- Übersicht: alle Apps als Bilder ---------- */
#raum-uebersicht {
  position: fixed; inset: 0; z-index: 9750;
  display: none; align-content: flex-start; flex-wrap: wrap;
  gap: 18px; padding: 82px 34px 34px;
  overflow-y: auto;
  background: rgba(10,14,39,.93); backdrop-filter: blur(14px);
}
#raum-uebersicht.raum-an { display: flex; animation: raumAuf .28s ease; }
@keyframes raumAuf { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }

.raum-ueb-app {
  width: clamp(190px, 22vw, 290px); cursor: pointer;
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(120,140,200,.25); background: rgba(22,29,58,.85);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.raum-ueb-app:hover {
  transform: translateY(-4px); border-color: #38d1ff;
  box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 20px rgba(56,209,255,.22);
}
.raum-ueb-app img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover;
                    object-position: top center; background: #0c1230; }
.raum-ueb-name { display: block; padding: 9px 12px; font-size: 12px; color: #e6ecf5; }
.raum-ueb-app.raum-ueb-leer { min-height: 84px; display: flex; align-items: center; }
.raum-ueb-app.raum-ueb-leer .raum-ueb-name { color: #8a95b2; }

@media (max-width: 760px) {
  #raum-uebersicht { padding: 62px 16px 16px; gap: 12px; }
  .raum-ueb-app { width: calc(50% - 6px); }
}

/* ---------- Die offene App leuchtet in ihrer Kachel ----------
   Gleiche Sprache wie der Fokus-Glow des Masters, nur in der Akzentfarbe. */
#cases-group .case-icon.raum-offen {
  filter: drop-shadow(0 0 9px rgba(56,209,255,.75)) brightness(1.12);
}
#cases-group .case-icon.raum-offen .icon-bg {
  stroke: #38d1ff; stroke-width: 2; stroke-opacity: .9;
}

/* ---------- Die Mitte des Rades führt zurück ----------
   Ein Ring UM Korabs COWORK-Knopf herum, nie darüber. Nur da, wenn wirklich
   etwas offen ist — im Ruhezustand existiert er nicht. */
#raum-rueckweg {
  position: absolute; top: 50%; left: 50%;
  width: 118px; height: 118px; margin: -59px 0 0 -59px;
  border-radius: 50%; z-index: 6;
  display: none; align-items: flex-end; justify-content: center;
  padding-bottom: 9px;
  border: 1px dashed rgba(56,209,255,.32);
  color: rgba(56,209,255,.62); font-size: 15px;
  cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease;
}
body.raum-arbeit #raum-rueckweg { display: flex; }
#raum-rueckweg:hover {
  border-color: #38d1ff; color: #38d1ff;
  background: radial-gradient(circle, rgba(56,209,255,.10), transparent 68%);
}

/* ---------- Das Apps-Symbol in der Seitenleiste ----------
   Erbt Form und Verhalten der vorhandenen Symbole; nur der aktive Zustand
   ist eigen, damit man sieht, dass das Rad gerade die Programme zeigt. */
nav.sidebar a.raum-apps-icon { font-size: 17px; }
nav.sidebar a.raum-apps-icon.raum-an { color: #38d1ff; }

/* ---------- Die Essenz-Tafel ----------
   Legt sich neben die App, nicht darüber: Du sollst beides sehen können —
   was dort steht, und was daraus wesentlich ist. */
#raum-essenz {
  position: fixed; right: 20px; top: 96px; z-index: 9680;
  width: clamp(300px, 32vw, 460px); max-height: calc(100vh - 190px);
  display: none; flex-direction: column;
  border-radius: 12px; overflow: hidden;
  background: rgba(16,22,48,.97); border: 1px solid rgba(120,140,200,.3);
  box-shadow: 0 18px 46px rgba(0,0,0,.55);
}
#raum-essenz.raum-an { display: flex; animation: raumEssenzAuf .3s ease; }
@keyframes raumEssenzAuf { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.raum-essenz-kopf {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid rgba(120,140,200,.25);
  font-size: 11.5px; letter-spacing: .3px; color: #8a95b2;
}
.raum-essenz-titel { flex: 1; color: #e6ecf5; }
.raum-essenz-zeit { font-variant-numeric: tabular-nums; opacity: .7; }
.raum-essenz-kopf button {
  background: none; border: 0; color: #8a95b2; font-size: 17px;
  line-height: 1; cursor: pointer; padding: 0 5px; border-radius: 5px;
}
.raum-essenz-kopf button:hover { color: #38d1ff; background: rgba(56,209,255,.12); }

.raum-essenz-leib {
  padding: 14px 16px; overflow-y: auto;
  font-size: 13px; line-height: 1.62; color: #e6ecf5;
  white-space: pre-wrap; word-break: break-word;
}
.raum-essenz-leib.raum-wartet { color: #8a95b2; font-style: italic; }
.raum-essenz-leib.raum-fehler { color: #ffb74d; }
.raum-essenz-warnung {
  margin-top: 12px; padding: 9px 11px; border-radius: 8px;
  background: rgba(229,57,53,.12); border: 1px solid rgba(229,57,53,.4);
  color: #ff8a80; font-size: 12px; font-style: normal; white-space: normal;
}
@media (max-width: 760px) {
  #raum-essenz { right: 10px; left: 10px; width: auto; top: 74px; max-height: 52vh; }
}

/* Die Mitte trägt APPS, sobald das Rad aktiv ist (Korabs Eingangstür) */
#liri-call-cowork.raum-mitte-apps::after { content: "APPS" !important; letter-spacing: 2px; }

/* ---------- Die Fall-Übersicht weicht dem Rad ----------
   Korab 18.08.: "kann weg, da es beim drehenden Radgebrauch nicht wirklich dem
   Nutzer nutzt" — und ihr Platz gehoert jetzt dem Dashboard-Bereich.
   Gebunden an das LAUFENDE Rad-System, nicht an die ganze Seite: ohne Rad steht
   die Uebersicht unveraendert da, wie immer.
   Umstellen: diesen einen Block entfernen. */
body.rad-mechanical-on #answer-panel {
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
}

/* Zeichen im Fensterkopf: kann ich hier handeln oder nur zusehen? */
#raum-bruecke-zeichen.raum-bruecke-an {
  color: #38d1ff; font-size: 10.5px; letter-spacing: .4px;
  padding: 2px 7px; border: 1px solid rgba(56,209,255,.45); border-radius: 6px;
}

/* ---------- Die Zeichen der Programme ----------
   Eine Linie, eine Farbe, runde Enden — dieselbe Sprache wie die Oberfläche.
   currentColor erbt die Farbe, damit sie im Fokus mitleuchten. */
#cases-group .raum-symbol { color: #cfe0f5; transition: color .2s ease; }
#cases-group .case-icon:hover .raum-symbol { color: #38d1ff; }
#cases-group .case-icon.raum-offen .raum-symbol { color: #38d1ff; }

/* ---------- Blättern, wenn mehr als 10 Programme da sind ----------
   Korab: "mach nicht mehr als 10 in einem rad". Leise Punkte unter dem Kreis. */
#raum-seiten {
  /* 19.08.: Sie lagen exakt auf der Eingabezeile (gemessen y610 vs y610).
     Jetzt im Streifen zwischen Rad-Unterkante und Zeile. */
  position: fixed; left: 25vw; transform: translateX(-50%);
  bottom: 74px; z-index: 9610;
  display: flex; gap: 7px;
}
body:not(.raum-arbeit):not(.raum-cowork) #raum-seiten { bottom: 24px; }
.raum-punkt {
  width: 7px; height: 7px; border-radius: 50%; cursor: pointer;
  background: rgba(140,165,225,.3); transition: background .2s, transform .2s;
}
.raum-punkt:hover { background: rgba(56,209,255,.6); transform: scale(1.25); }
.raum-punkt.raum-an { background: #38d1ff; }

/* ===== GLAS-TOKEN (Fenster-Strang, 22.08.2026) — eine Quelle der Wahrheit ===== */
:root{
  --glas-grund: rgba(10,16,40,0.55);
  --glas-blur: 22px;
  --glas-sat: 120%;
  --glas-radius: 14px;
  --glas-saum: 0 0 46px rgba(120,180,255,0.16), inset 0 0 0 1px rgba(150,190,255,0.10);
}
/* ===== GLAS gescopt auf Nachrichten (Verify-one-first, Weg B) =====
   Nur wenn die Nachrichten-App aktiv ist, webt die Buehne den Hintergrund ein.
   ::before liegt hinter dem transparenten iframe; App-Text bleibt scharf darueber.
   WERTE-TOR: --glas-grund dunkel genug fuer lesbaren hellen Text (WCAG AA). */
#raum-buehne[data-app="nachrichten"]::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: var(--glas-grund);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(var(--glas-sat));
  backdrop-filter: blur(var(--glas-blur)) saturate(var(--glas-sat));
  border-radius: var(--glas-radius);
  box-shadow: var(--glas-saum);
}
#raum-buehne[data-app="nachrichten"] iframe{ position: relative; z-index: 1; background: transparent !important; }