/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../../../../../../Users/max/Documents/MAEX_OS/maex-os/apps/dashboard/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../../../../../../../../Users/max/Documents/MAEX_OS/maex-os/apps/dashboard/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/dashboard/liquid-glass.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* =====================================================================
   RAUMRISS · Liquid-Glass Design-Skin  (Home + Räume)
   App-weit über .rr-skin (Dashboard). REIN VISUELL — hebt die schon
   vorhandenen Glas-Flächen auf Mockup-Niveau: Float-Schatten, rundere
   Radien, Hover-Lift, Kobalt-Akzent. Keine Backgrounds/Struktur/Logik
   ersetzt. Toggle-off: Import + .rr-skin in (dashboard)/layout.tsx weg.
   ===================================================================== */


/* ══════════════════════════════════════════════════════════════════════
   0 — DER UNTERGRUND (Neubau 05.08.)
   ══════════════════════════════════════════════════════════════════════
   Max: „mach einen geilen Hintergrund, kann sich auch gerne etwas
   bewegen, aber nicht so viele Farben." Und vorher, auf das Raster
   zeigend: „diese rechteckigen Sachen hinter den Widgets, wieso ist das
   da?"

   WAS VORHER FALSCH WAR — drei Sachen, jede einzeln benennbar:

   1. DAS RASTER. `::after` legte ein festes 54-px-Gitter aus 1-px-Linien
      über die ganze Seite. Millimeterpapier sagt „Entwurf", nicht
      „fertig" — und es blitzt genau dort durch, wo eine Karte halb
      durchsichtig ist. Ersatzlos raus.

   2. FÜNF FLECKEN, EINE BEWEGUNG. Alle Farbfelder lagen auf EINEM
      Element mit EINER Animation. Damit verschiebt sich nicht Licht,
      sondern eine Textur — starr in sich, und nach 26 s exakt wieder am
      Anfang. Das Auge erkennt die Schleife, und ab da wirkt es billig.
      Jetzt zwei Körper auf getrennten Ebenen, 96 s und 143 s. Weil die
      Perioden teilerfremd sind, wiederholt sich das Gesamtbild erst
      nach Stunden — es gibt keinen Moment, den man als „Anfang"
      wiedererkennt.

   3. KEIN KORN. Große weiche Verläufe reißen auf 8-bit-Displays in
      sichtbare Streifen (Banding). Das ist DER Grund, warum ein
      Verlauf billig aussieht, ohne dass man sagen könnte warum. Ein
      Hauch Rauschen bricht die Stufenkanten auf. Es ist derselbe
      Trick, aus dem Film seine Tiefe zieht.

   FARBDISZIPLIN: genau ZWEI getönte Lichter — Champagner (warmes
   Grundlicht) und das Burnt Orange des Hauses. Der alte Umbra-Ton
   (139,110,82) ist raus: ein dritter Ton in derselben Ecke des
   Farbkreises macht nicht reicher, er macht trüb.

   LEISTUNG: bewegt wird ausschließlich `transform` — das läuft auf der
   Grafikkarte und löst kein Neuzeichnen aus. Das alte `filter: blur(10px)`
   auf einer bildschirmfüllenden festen Ebene ist raus; es kostete jeden
   Frame und war neben dem Korn ohnehin überflüssig.        */

.rr-skin { position: relative; z-index: 0; }

/* Korn + Vignette liegen auf html — sie dürfen sich NICHT mitbewegen.
   Wanderndes Korn sieht aus wie Bildrauschen, stehendes wie Papier. */
/* ⚠ `!important` ist hier PFLICHT, nicht Bequemlichkeit: im Browser
   nachgezählt setzen SIEBEN Regeln aus den Pass-Dateien
   `background-image: none !important` auf `html.raumriss-os`. Ohne
   `!important` verliert diese Regel, obwohl sie zuletzt kommt — genau das
   ist beim ersten Versuch passiert (gemessen: `backgroundImage: "none"`,
   das Korn war unsichtbar). */
html.raumriss-os {
  background-image: none !important;
}

/* ── DER UNTERGRUND IST EIN BILD ────────────────────────────────────────
   Max: „schau dir mal an wie Apple das macht … oder bau einen Hintergrund
   ein der generiert ist" — plus ein Ausschnitt eines macOS-Schreibtischs:
   „am Ende sollte das so wirken."

   Er hat den Kern getroffen. **Apple malt so etwas nicht mit CSS-Verläufen.**
   Die Untergründe in macOS und visionOS sind gerenderte Bilder. Genau
   deshalb haben sie weder Streifen noch sichtbares Korn: das Brechen der
   Farbstufen passiert EINMAL beim Rendern in hoher Bittiefe — nicht live
   im Browser auf 8 bit, wo jeder Verlauf zwangsläufig rastert.

   `publicraumriss-untergrund-d2f5538d.webp` (2560×1600, 19 KB) ist mit
   `bg/gen.py` erzeugt: sieben weiche Glockenfelder in linearem Licht
   gemischt, danach grosse Unschärfe-Struktur und eine leise Vignette.
   Farben wie verabredet nur zwei — Champagner und Burnt Orange, dazu ein
   kühler Gegenpol für Tiefe.

   ⚠ Gelernt beim Bauen: Dithering INS BILD zu backen ist der falsche Weg.
   Es macht die Datei unkomprimierbar — verlustfrei 2,1 MB statt 19 KB,
   und verlustbehaftet frisst die Kompression genau das Dithering wieder
   auf (sichtbare Konturen). Deshalb: Bild glatt und klein, das Brechen
   der Stufen übernimmt die Kornlage unten — aber sehr viel leiser als
   vorher. Max: „kannst du diese Körnung runter nehmen, das sieht super
   unwertig aus." Richtig: ich hatte auf die Kontrast-Lupe hin optimiert
   statt aufs Auge. Korn, das man SIEHT, ist zu stark; es soll nur
   verhindern, dass man Stufen sieht. */
.rr-skin::before {
  content: "";
  position: fixed;
  inset: -14%;
  z-index: -2;
  pointer-events: none;
  background-image: -webkit-image-set(
    url("raumriss-untergrund-d2f5538d.webp") type("image/webp"));
  background-image: image-set(
    url("raumriss-untergrund-d2f5538d.webp") type("image/webp"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  animation: lg-licht-a 96s ease-in-out infinite alternate;
}

/* Lichtkörper B — der eine warme Akzent. Zieht gegenläufig und
   langsamer, damit sich A und B nie im selben Rhythmus treffen.
   TRÄGT AUSSERDEM DAS KORN, als oberste Lage.

   ⚠ Warum hier und nicht auf `html`: Korn kann nur brechen, was UNTER ihm
   liegt. Auf `html` lag es unter beiden Lichtkörpern — es hat also den
   leeren Grund gedithert und ausgerechnet die Verläufe verschont, die man
   tatsächlich sieht. Mit einer Kontrast-Lupe (`grayscale(1)
   brightness(0.53) contrast(26)`) traten die Streifen in den Verläufen
   klar hervor, obwohl das Korn „da" war. Genau die hat Max gesehen.

   `::after` malt nach `::before`, deshalb deckt das Korn hier BEIDE
   Lichtkörper ab. Dass es mit B mitdriftet, ist unkritisch: 143 s für
   3,5 % Weg und 6 % Skalierung liegt weit unter der Wahrnehmungsschwelle.

   Der Filter hat eine explizit gesetzte Region (`filterUnits=
   'userSpaceOnUse'`, 0/0/160/160). Ohne sie rechnet der Browser mit einem
   um 10 % vergrößerten Bereich, `stitchTiles` stimmt dann nicht mehr mit
   der Kachel überein — und man bekommt ein feines Raster aus Kachelnähten
   geschenkt. Also genau das, was hier gerade weggeräumt wurde. */
/* Die Kornlage — steht still und ist bewusst kaum messbar.
   Vorher 0,42 Deckung: das SIEHT man, und sichtbares Korn liest sich billig.
   Jetzt 0,08. Es hat genau eine Aufgabe: die Quantisierungsstufen brechen,
   die entstehen, wenn ein glatter Verlauf auf 8 bit landet. Dafür reicht
   ungefähr ein LSB Rauschen — alles darüber ist Dekoration.
   Kein `animation`: wanderndes Korn sieht aus wie Bildrauschen. */
.rr-skin::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='160' height='160' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  background-repeat: repeat;
}

/* ══════════════════════════════════════════════════════════════════════
   0b — DIE STREIFEN IM GLAS
   ══════════════════════════════════════════════════════════════════════
   Max: „da sind immer noch so komische Striche … schau genau hin."
   Mit einer Kontrast-Lupe (`grayscale(1) brightness(0.53) contrast(26)`)
   waren sie eindeutig: keine Linien im Hintergrund, sondern Bänder INNEN
   in den Glasflächen. Der Hintergrund war zu dem Zeitpunkt schon sauber.

   Wie das Glas sie selbst erzeugt — zwei Schritte:
   1. `blur(32px)` mittelt den Untergrund. Genau dabei verschwindet das
      Korn, das die Verlaufsstufen brechen sollte: gemittelt ist es weg.
      Zurück bleibt ein mathematisch glatter Verlauf — und der wird auf
      8 bit zwangsläufig in Stufen gerastert.
   2. `saturate(1.9)` multipliziert danach genau diese Stufen. Aus einem
      Unterschied von 1/255, den niemand sieht, wird ein sichtbares Band.
      Die Sättigung ist nicht die Quelle, sie ist der Verstärker.

   Deshalb zwei Eingriffe, in dieser Reihenfolge:
   · Verstärker zurückdrehen. 1,9 bzw. 1,65 hatte ohnehin wenig zu holen —
     der Untergrund ist fast monochrom warm, es gibt kaum Farbe zu heben.
     Was 1,9 wirklich verstärkt hat, waren die Stufen.
   · Korn NOCH EINMAL auflegen, diesmal auf der Fläche selbst. Der eigene
     Hintergrund einer Fläche malt ÜBER dem Ergebnis ihres backdrop-filter
     — das Korn kommt also nach dem Blur und überlebt ihn.

   Nur Flächen ohne eigenes Hintergrundbild (im Browser nachgesehen):
   `background-image` würde ein vorhandenes sonst ersetzen. Die zwei mit
   Verlauf (`rr-clock-dark`, `home-capture-panel`) bleiben unangetastet. */

html.raumriss-os .rr-skin :is(
  .environment-hero,
  .lg-ave-card,
  .zeitanker-aurel-tageslage,
  .home-capture-layer
) {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='160' height='160' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E") !important;
  background-size: 160px 160px !important;
  background-repeat: repeat !important;
  /* Nicht mitscrollen: das Korn gehört zur Fläche, nicht zum Inhalt. */
  background-attachment: fixed !important;
}

/* Die grosse PULSE-Flaeche traegt einen eigenen mehrlagigen Verlauf aus
   globals.css (188deg + mehrere color-mix-Radialen). `background-image` ist
   EINE Eigenschaft — ich koennte das Korn dort nur anfuegen, indem ich den
   ganzen Verlauf dupliziere. Das waere derselbe Fehler wie eine 67. Pass-
   Datei: eine Kopie, die beim naechsten Mal auseinanderlaeuft.
   Stattdessen eine eigene Lage darueber. Im Browser geprueft: `::before`
   und `::after` sind an dieser Flaeche beide frei (`content: none`), und
   sie ist bereits `position: relative` mit `isolation: isolate`. */
html.raumriss-os .rr-skin .home-capture-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p' x='0' y='0' width='160' height='160' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)' opacity='0.07'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  background-attachment: fixed;
}

/* ══════════════════════════════════════════════════════════════════════
   0c — TIEFE: DREI RÄNGE STATT EINER SCHATTENSORTE
   ══════════════════════════════════════════════════════════════════════
   Max: „da geht noch Hochwertigkeit — bei den Schatten von den Widgets
   und Modulen, bei den Modulen selbst. Du sollst das high end machen."

   Im Browser nachgemessen, zwei konkrete Gründe:

   1. ZWEI SCHATTENFARBEN IM SELBEN BILD. `.environment-hero` warf
      `rgba(15,15,20,…)` — kühl —, `.lg-ave-card` `rgba(30,25,15,…)` —
      warm. Nebeneinander liest man das als „aus verschiedenen Quellen
      zusammengesetzt". Jetzt ein einziger Ton fürs ganze Haus:
      `rgba(74,58,42,…)`, warm wie der Untergrund. Ein Schatten hat nie
      die Farbe von Schwarz, sondern die des Lichts, das ihm fehlt.

   2. DER RAND WAR RUNDUM WEISS (`rgba(255,255,255,0.55)` auf allen vier
      Seiten). Das ist der eigentliche Billig-Verräter: ein Körper im Licht
      hat oben eine helle Kante und unten eine dunkle. Eine weiße Linie
      ringsum gibt es nur bei einem Aufkleber. Jetzt gerichtet — oben 0,95
      Weiß, seitlich 0,5, unten eine warme Schattenlinie.

   3. ALLES HATTE DENSELBEN RANG. Wertigkeit entsteht nicht dadurch, dass
      jede Fläche einen schönen Schatten hat, sondern dadurch, dass die
      Flächen VERSCHIEDEN hoch liegen. Drei Stufen:
        Rang 1  Grundfläche (`.home-capture-panel`) — liegt AUF der Seite
        Rang 2  Karten — liegen DARAUF, mit Lichtkante und Körper
        Rang 3  schwebend (`.rr-clock-dark`) — liegt über allem

   Die Schattenleitern selbst sind physikalisch gestaffelt: mit wachsender
   Weichzeichnung SINKT die Deckung. Gleich starke Schatten in wachsender
   Größe sehen aus wie ein Effekt; abfallende sehen aus wie Licht. */

/* ⚠ DIESER BLOCK LIEGT IN `@layer rr-kit` — und das ist zwingend.
   Erster Versuch war ungeschichtet mit `!important`: nur `.environment-hero`
   hat ihn angenommen. Die anderen drei wurden von Alt-Regeln geschlagen, die
   ebenfalls `!important` tragen, aber HÖHERE Spezifität haben (z. B.
   `html.raumriss-os .rr-skin .rr-ave-hero .ave-presence-line.rr-ave-row`
   = 0,5,1 gegen meine 0,3,1). Gemessen: Karte behielt weißen Rand und den
   alten Vier-Lagen-Schatten.
   In der ZUERST deklarierten Schicht gewinnt `!important` gegen jedes
   ungeschichtete `!important` — unabhängig von der Spezifität. Genau dafür
   gibt es das Kit (siehe DESIGN-KIT.md). */
@layer rr-kit {

html.raumriss-os .rr-skin :is(
  .environment-hero, .lg-ave-card, .zeitanker-aurel-tageslage,
  .home-capture-panel:not(.rr-system-lage-panel)
) {
  border-style: solid !important;
  border-width: 1px !important;
  border-top-color: rgba(255, 255, 255, 0.95) !important;
  border-left-color: rgba(255, 255, 255, 0.5) !important;
  border-right-color: rgba(255, 255, 255, 0.5) !important;
  border-bottom-color: rgba(74, 58, 42, 0.08) !important;
}

/* Rang 1 — die Grundfläche hebt nicht ab, sie trägt.
   `:not(.rr-system-lage-panel)`: das AVE-Feld benutzt dieselbe Klasse, ist
   dort aber bewusst unsichtbar gemacht (Block 31). Ihm einen Schatten
   aufzuzwingen würde einen Kasten zurückholen, der absichtlich weg ist. */
html.raumriss-os .rr-skin .home-capture-panel:not(.rr-system-lage-panel) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(74, 58, 42, 0.02),
    0 0.5px 1px rgba(74, 58, 42, 0.04),
    0 2px 6px -2px rgba(74, 58, 42, 0.04),
    0 10px 24px -12px rgba(74, 58, 42, 0.05) !important;
}

/* Rang 2 — Karten. Der Verlauf oben gibt der Fläche einen Körper: ohne ihn
   ist sie eine gleichmäßig eingefärbte Fläche, mit ihm eine, auf die Licht
   fällt. Das Korn bleibt als zweite Lage darunter erhalten. */
html.raumriss-os .rr-skin :is(
  .environment-hero, .lg-ave-card, .zeitanker-aurel-tageslage
) {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='160' height='160' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E") !important;
  background-size: 100% 100%, 160px 160px !important;
  background-repeat: no-repeat, repeat !important;
  background-attachment: scroll, fixed !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(74, 58, 42, 0.026),
    0 0.5px 1px rgba(74, 58, 42, 0.055),
    0 2px 4px -1px rgba(74, 58, 42, 0.05),
    0 8px 16px -4px rgba(74, 58, 42, 0.06),
    0 24px 48px -16px rgba(74, 58, 42, 0.08),
    0 56px 92px -40px rgba(74, 58, 42, 0.1) !important;
}

/* Rang 3 — schwebt. Dunkle Körper brauchen mehr Deckung, sonst verschwindet
   der Schatten unter ihnen: der Kontrast zum Untergrund ist geringer. */
html.raumriss-os .rr-skin .rr-clock-dark {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(30, 22, 14, 0.16),
    0 6px 14px -3px rgba(30, 22, 14, 0.2),
    0 22px 44px -14px rgba(30, 22, 14, 0.28),
    0 48px 88px -34px rgba(30, 22, 14, 0.3) !important;
}

} /* Ende @layer rr-kit — Tiefe */

/* Verstärker runter — überall dort, wo Glas gerechnet wird. */
html.raumriss-os .rr-skin :is(
  .environment-hero,
  .environment-entrance__system,
  .lg-ave-card,
  .zeitanker-aurel-tageslage,
  .home-capture-layer,
  .home-capture-panel
) {
  backdrop-filter: saturate(1.24) blur(26px) !important;
}

@keyframes lg-licht-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2.5%, -3%, 0) scale(1.09); }
}

/* (lg-licht-b entfällt: der zweite CSS-Lichtkörper ist im Bild aufgegangen.
 * Die Bewegung trägt jetzt allein das Bild über lg-licht-a.) */

/* Max arbeitet stundenlang davor. Wer Bewegung abbestellt hat, bekommt
   dasselbe Bild — nur stehend, in der Mitte der Wanderung eingefroren. */
@media (prefers-reduced-motion: reduce) {
  .rr-skin::before { animation: none; transform: translate3d(1.2%, -1.5%, 0) scale(1.045); }
  .rr-skin::after  { animation: none; transform: translate3d(-1.7%, 1%, 0) scale(1.03); }
}

.rr-skin {
  --os-radius-xs: 0.5rem;
  --os-radius-sm: 0.6875rem;
  --os-radius-md: 0.9375rem;
  --os-radius-lg: 1.1875rem;

  --lg-blue: #2f5bff;
  --lg-blue-soft: rgba(47, 91, 255, 0.12);
  --lg-blue-line: rgba(47, 91, 255, 0.34);

  --atmo-base: #edece7;

  --lg-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  /* Premium Float — Widgets „fliegen" */
  --lg-float:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 1px 1px rgba(30,25,15,0.04),
    0 5px 10px -2px rgba(30,25,15,0.055),
    0 14px 26px -6px rgba(30,25,15,0.10),
    0 30px 54px -14px rgba(30,25,15,0.15),
    0 64px 96px -34px rgba(30,25,15,0.22);
  --lg-float-hi:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 3px rgba(30,25,15,0.05),
    0 10px 18px -4px rgba(30,25,15,0.085),
    0 24px 44px -10px rgba(30,25,15,0.14),
    0 50px 82px -22px rgba(30,25,15,0.2),
    0 96px 140px -54px rgba(30,25,15,0.3);
}

/* 1 — Große Karten: rundere Radien + Float (Glas der App bleibt) */
.rr-skin .environment-hero,
.rr-skin .environment-entrance__system,
.rr-skin .home-capture-panel,
.rr-skin .home-room-band-panel,
.rr-skin .environment-room-field-panel {
  border-radius: var(--os-radius-lg);
  box-shadow: var(--lg-float);
}

/* 2 — Raum-Kacheln: Float + Lift + Kobalt-Kante bei Hover */
.rr-skin .home-room-strip-cell {
  border-radius: var(--os-radius-md);
  box-shadow: var(--lg-float);
  outline: 1.5px solid transparent;
  outline-offset: -1.5px;
  transition:
    transform 0.45s var(--lg-spring),
    box-shadow 0.45s ease,
    outline-color 0.3s ease;
}
.rr-skin .home-room-strip-cell:hover {
  transform: translateY(-5px);
  box-shadow: var(--lg-float-hi);
  outline-color: var(--lg-blue-line);
}

/* 3 — Offene Risse / Vorgänge: sanfter Lift */
.rr-skin .home-open-risse__item {
  border-radius: var(--os-radius-md);
  transition:
    transform 0.35s var(--lg-spring),
    box-shadow 0.35s ease;
}
.rr-skin .home-open-risse__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--lg-float);
}

/* 4 — AVE-Präsenz als dezente Liquid-Glass-Karte */
.rr-skin .ave-presence-line.lg-ave-card {
  position: relative;
  padding: 16px 18px;
  border-radius: var(--os-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.32));
  backdrop-filter: none;
  box-shadow: var(--lg-float);
}

/* 5 — Kobalt-„Atem" hinter dem Orb */
.lg-orb-halo { position: relative; display: grid; place-items: center; flex: none; }
.lg-orb-halo > * { position: relative; z-index: 1; }
.lg-orb-halo::before {
  content: "";
  position: absolute;
  width: 150%; height: 150%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lg-blue-soft), transparent 68%);
  animation: lg-breath 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lg-breath {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* 6 — Chips: premium Micro-Interaktion */
.rr-skin .zeitanker-handoff-card__chip {
  transition:
    transform 0.3s var(--lg-spring),
    color 0.2s ease,
    box-shadow 0.3s ease;
}
.rr-skin .zeitanker-handoff-card__chip:hover {
  transform: translateY(-1px);
  color: var(--lg-blue);
  box-shadow: 0 6px 16px -8px var(--lg-blue-line);
}


/* 7 — RÄUME (Detailseite): Zonen/Sektionen konsequent als Liquid Glass */
.rr-skin .zone-material-surface__tile,
.rr-skin .room-zone-overview__card,
.rr-skin .hf-operating-card,
.rr-skin .aurel-briefing-review__card {
  border-radius: var(--os-radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.36));
  backdrop-filter: none;
  box-shadow: var(--lg-float);
  transition: transform 0.4s var(--lg-spring), box-shadow 0.4s ease;
}
.rr-skin .zone-material-surface__tile:hover,
.rr-skin .room-zone-overview__card:hover,
.rr-skin .hf-operating-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--lg-float-hi);
}
.rr-skin .workspace-section {
  border-radius: var(--os-radius-lg);
  box-shadow: var(--lg-float);
}

@media (prefers-reduced-motion: reduce) {
  .lg-orb-halo::before,
  .rr-skin::before { animation: none; }
  .rr-skin .home-room-strip-cell,
  .rr-skin .home-open-risse__item,
  .rr-skin .zone-material-surface__tile,
  .rr-skin .room-zone-overview__card,
  .rr-skin .hf-operating-card { transition: none; }
}

/* 8 — RÄUME-Band transparent: Kacheln schweben frei auf dem Lichtfeld (1:1 Mockup) */
html.raumriss-os .rr-skin .home-room-band,
html.raumriss-os .rr-skin .home-room-band-panel,
html.raumriss-os .rr-skin .environment-room-field-panel {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
}
html.raumriss-os .rr-skin .home-room-band::before,
html.raumriss-os .rr-skin .home-room-band-panel::before {
  background: transparent !important;
}

/* 9 — SITE EFFECT / LAGE etc. als echte Glas-Karten auf dem Lichtfeld */
.rr-skin .home-capture-layer {
  border-radius: var(--os-radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.34));
  backdrop-filter: none;
  box-shadow: var(--lg-float);
}

/* 11 — RAUM-KACHELN 1:1-Detail: glühende Punkte, Mono-Labels, Kobalt-aktiv */
html.raumriss-os .rr-skin .home-room-alive-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--copper) !important;
  box-shadow: 0 0 0 3px var(--copper-soft), 0 0 10px 1px var(--copper-line) !important;
}
html.raumriss-os .rr-skin .home-room-alive-dot[data-room-warmth="active"] {
  background: var(--lg-blue) !important;
  box-shadow: 0 0 0 3px var(--lg-blue-soft), 0 0 12px 2px var(--lg-blue-line) !important;
}
html.raumriss-os .rr-skin .home-room-alive-dot[data-room-warmth="quiet"] {
  background: #a8a599 !important;
  box-shadow: 0 0 0 3px rgba(20, 18, 10, 0.05) !important;
}
html.raumriss-os .rr-skin .home-room-chamber__name {
  font-family: var(--font-mono), ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
html.raumriss-os .rr-skin .home-room-chamber__signal {
  font-family: var(--font-mono), ui-monospace, monospace !important;
  font-size: 8.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
html.raumriss-os .rr-skin .home-room-strip-cell[data-room-active="true"] .home-room-chamber__signal {
  color: var(--lg-blue) !important;
  font-weight: 600 !important;
}

/* 12 — Clock/System-Widget DUNKEL (Mockup) — eigene Klasse rr-clock-dark */
html.raumriss-os .rr-skin .environment-entrance__system.rr-clock-dark {
  background: linear-gradient(165deg, rgba(28, 26, 20, 0.95), rgba(15, 14, 11, 0.97)) !important;
  border-radius: var(--os-radius-lg) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 44px -18px rgba(0, 0, 0, 0.5),
    0 64px 96px -50px rgba(0, 0, 0, 0.55) !important;
  overflow: hidden;
  position: relative;
}
html.raumriss-os .rr-skin .rr-clock-dark::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  /* 70s-HiFi: warmer Schein statt Blau. */
  background: radial-gradient(70% 55% at 85% -5%, rgba(224, 122, 28, 0.30), transparent 60%);
}
html.raumriss-os .rr-skin .rr-clock-dark .home-atmosphere-clock,
html.raumriss-os .rr-skin .rr-clock-dark .home-runtime-anchor,
html.raumriss-os .rr-skin .rr-clock-dark [class*="card"],
html.raumriss-os .rr-skin .rr-clock-dark [class*="panel"] {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
}
html.raumriss-os .rr-skin .rr-clock-dark,
html.raumriss-os .rr-skin .rr-clock-dark p,
html.raumriss-os .rr-skin .rr-clock-dark li,
html.raumriss-os .rr-skin .rr-clock-dark span:not([aria-hidden="true"]) {
  color: #e5e1d7 !important;
}
html.raumriss-os .rr-skin .rr-clock-dark .presence-clock-time { color: #ffffff !important; }

/* 13 — NACHRICHTEN-CENTER oben rechts (Mockup) + alte Toast unten aus */
html.raumriss-os .aurel-nervous-presence--floating { display: none !important; }
.rr-notif { position: fixed; top: 22px; right: 22px; z-index: 60; }
.rr-notif__bell {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; position: relative; border: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.5)); backdrop-filter: none;
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.95), inset 0 0 0 1px rgba(255,255,255,0.5), 0 10px 24px -10px rgba(30,25,15,0.34);
  transition: transform .3s cubic-bezier(.34,1.4,.5,1);
}
.rr-notif__bell:hover { transform: scale(1.07); }
.rr-notif__bell:active { transform: scale(.94); }
.rr-notif__bell svg { width: 20px; height: 20px; fill: none; stroke: #43423b; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rr-notif__badge {
  position: absolute; top: -2px; right: -2px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: linear-gradient(180deg,#f0902f,#d9781f); color: #fff;
  font-family: var(--font-mono), ui-monospace, monospace; font-size: 10px; font-weight: 600;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2.5px var(--bg,#eceae4), 0 0 12px 1px rgba(224,122,28,.4);
}
.rr-notif__panel {
  position: absolute; top: 56px; right: 0; width: 340px; max-width: calc(100vw - 28px);
  border-radius: 20px; padding: 10px;
  /* 28.10.: 0,82/0,64 → 0,94/0,86 — die Nachrichtenliste hängt über dem
   * Raumfoto; am unteren Rand lief der Grund vorher durch die Meldungen. */
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.86)); backdrop-filter: none;
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,0.55), 0 24px 54px -18px rgba(30,25,15,0.42);
  animation: rr-notif-in .32s cubic-bezier(.34,1.4,.5,1);
}
@keyframes rr-notif-in { from { opacity:0; transform: scale(.94) translateY(-8px);} to { opacity:1; transform:none; } }
.rr-notif__head { display:flex; align-items:center; justify-content:space-between; padding: 8px 10px 12px; }
.rr-notif__head b { font-size: 14px; font-weight: 700; letter-spacing:-.01em; color:#16150f; }
.rr-notif__head span { font-family: var(--font-mono), ui-monospace, monospace; font-size: 9px; letter-spacing:.12em; text-transform: uppercase; color:#7d7a6e; }
.rr-notif__msg { display:flex; gap: 12px; padding: 12px; border-radius: 14px; }
.rr-notif__msg + .rr-notif__msg { margin-top: 2px; }
.rr-notif__dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.rr-notif__dot--copper { background: var(--copper,#e07a1c); box-shadow: 0 0 0 3px rgba(224,122,28,.14), 0 0 9px 1px rgba(224,122,28,.4); }
.rr-notif__dot--blue { background: var(--lg-blue,#2f5bff); box-shadow: 0 0 0 3px rgba(47,91,255,.12), 0 0 9px 1px rgba(47,91,255,.34); }
.rr-notif__title { font-size: 13px; font-weight: 600; color:#16150f; letter-spacing:-.005em; }
.rr-notif__body { font-size: 12px; color:#55534a; margin-top: 3px; line-height:1.4; }
.rr-notif__meta { font-family: var(--font-mono), ui-monospace, monospace; font-size: 9px; letter-spacing:.06em; text-transform: uppercase; color:#7d7a6e; margin-top: 6px; }
@media (max-width: 680px){ .rr-notif { top: 16px; right: 14px; } .rr-notif__bell { width:42px; height:42px; } .rr-notif__panel { right:0; width: calc(100vw - 28px); } }

/* 14 — Inhalts-Container transparent: Content schwebt auf dem Lichtfeld (kein weisses Feld) */
html.raumriss-os .rr-skin .home-runtime-shell,
html.raumriss-os .rr-skin .operating-environment,
html.raumriss-os .rr-skin .home-composition,
html.raumriss-os .rr-skin .runtime-instrument-deck,
html.raumriss-os .rr-skin .home-main-stage,
html.raumriss-os .rr-skin .home-living-house {
  background: transparent !important;
  box-shadow: none !important;
}

/* 15 — Eingabe-Felder als dezentes Glas-Inset (iOS-kohärent, lesbar) */
html.raumriss-os .rr-skin .ideas-draft,
html.raumriss-os .rr-skin .continuity-note-capture__draft,
html.raumriss-os .rr-skin .current-field__reentry-link {
  background: linear-gradient(180deg, rgba(255,255,255,0.66), rgba(255,255,255,0.48)) !important; backdrop-filter: none;
  border-radius: var(--os-radius-md) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 0 0 1px rgba(255,255,255,0.5), 0 8px 20px -12px rgba(30,25,15,0.2) !important;
}
/* AVE-Orb-Karte prominenter zentrieren */
html.raumriss-os .rr-skin .ave-presence-line.lg-ave-card .flex.items-start { align-items: center !important; }

/* 16 — OBERE BAR dunkel (Mockup) */
html.raumriss-os .runtime-session-header {
  background: linear-gradient(180deg, rgba(34,32,26,0.88), rgba(20,18,14,0.92)) !important; backdrop-filter: none;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 14px 34px -12px rgba(0,0,0,0.5) !important;
}
html.raumriss-os .runtime-session-header,
html.raumriss-os .runtime-session-header span:not([aria-hidden="true"]),
html.raumriss-os .runtime-session-header p,
html.raumriss-os .runtime-session-header time { color: #e9e5db !important; }
/* ABMELDEN als helle Pill auf der dunklen Bar */
html.raumriss-os .runtime-session-header a[href*="logout"],
html.raumriss-os .runtime-session-header button {
  background: linear-gradient(180deg,#fbf8f0,#e9e4d7) !important;
  color: #14130f !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(0,0,0,0.3) !important;
}

/* 17 — Uhr-Connectoren als EINZELNE Pills (nicht ein Balken) */
html.raumriss-os .rr-clock-dark .operational-field__sources {
  display: flex !important; flex-wrap: wrap !important; gap: 7px !important;
}
html.raumriss-os .rr-clock-dark .operational-field__source {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  padding: 5px 10px !important; border-radius: 999px !important;
  background: rgba(255,255,255,0.09) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09) !important;
  white-space: nowrap !important;
}

/* 18 — OBERE BAR dunkel (höhere Spezifität, gewinnt gegen App-System) */
html.raumriss-os .runtime-presence-layer.runtime-session-header {
  background: linear-gradient(180deg, rgba(34,32,26,0.9), rgba(20,18,14,0.94)) !important; backdrop-filter: none!important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 14px 34px -12px rgba(0,0,0,0.5) !important;
}
html.raumriss-os .runtime-presence-layer.runtime-session-header,
html.raumriss-os .runtime-presence-layer.runtime-session-header span:not([aria-hidden="true"]),
html.raumriss-os .runtime-presence-layer.runtime-session-header p,
html.raumriss-os .runtime-presence-layer.runtime-session-header time {
  color: #e9e5db !important;
}
html.raumriss-os .runtime-presence-layer.runtime-session-header .presence-clock-time { color:#fff !important; }
/* ABMELDEN als helle Pill */
html.raumriss-os .runtime-presence-layer.runtime-session-header .runtime-session-header__logout {
  background: linear-gradient(180deg,#fbf8f0,#e9e4d7) !important;
  color: #14130f !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(0,0,0,0.28) !important;
}
html.raumriss-os .runtime-presence-layer.runtime-session-header .runtime-session-header__logout,
html.raumriss-os .runtime-presence-layer.runtime-session-header .runtime-session-header__logout span { color:#14130f !important; }

/* 19 — OBERE BAR dunkel — body-Boost schlägt layout.css (spätere gleiche Spezifität) */
html.raumriss-os body .runtime-presence-layer.runtime-session-header {
  background: linear-gradient(180deg, rgba(34,32,26,0.92), rgba(18,16,12,0.95)) !important; backdrop-filter: none!important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 16px 36px -12px rgba(0,0,0,0.55) !important;
}
html.raumriss-os body .runtime-presence-layer.runtime-session-header,
html.raumriss-os body .runtime-presence-layer.runtime-session-header span:not([aria-hidden="true"]),
html.raumriss-os body .runtime-presence-layer.runtime-session-header p,
html.raumriss-os body .runtime-presence-layer.runtime-session-header time { color:#e9e5db !important; }
html.raumriss-os body .runtime-presence-layer.runtime-session-header .presence-clock-time { color:#fff !important; }
html.raumriss-os body .runtime-presence-layer.runtime-session-header .runtime-session-header__logout {
  background: linear-gradient(180deg,#fbf8f0,#e9e4d7) !important; color:#14130f !important;
  border-radius: 999px !important; box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(0,0,0,0.28) !important;
}
html.raumriss-os body .runtime-presence-layer.runtime-session-header .runtime-session-header__logout span { color:#14130f !important; }

/* 20 — AVE als prominente Hero-Sektion (oben, Mockup-Anordnung) */
html.raumriss-os .rr-skin .rr-ave-hero { margin: 8px 0 4px; }
html.raumriss-os .rr-skin .rr-ave-hero .home-capture-layer--system-lage { background: transparent !important; box-shadow: none !important; }
html.raumriss-os .rr-skin .rr-ave-hero .rr-system-lage-panel {
  border-radius: var(--os-radius-lg) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0.38)) !important; backdrop-filter: none!important;
  box-shadow: var(--lg-float) !important;
  padding: 26px 28px !important;
}
/* AVE-Präsenz mittig & luftig, Orb prominent */
html.raumriss-os .rr-skin .rr-ave-hero .ave-presence-line.lg-ave-card {
  background: transparent !important; box-shadow: none !important; backdrop-filter:none !important;
  padding: 4px 0 0 !important;
}
html.raumriss-os .rr-skin .rr-ave-hero .ave-presence-line .flex.items-start { gap: 20px !important; align-items: center !important; }
html.raumriss-os .rr-skin .rr-ave-hero .ave-presence-line__headline { font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.01em; color: var(--ink,#16150f) !important; }

/* 21 — TOP-FOLD aufs Mockup-Niveau (Greeting-Akzent, Vorgänge-Zeilen, Fokus-Karte, Eyebrows) */

/* Greeting: Akzent-Kante links wie Mockup */
html.raumriss-os .rr-skin .environment-hero { position: relative; }
html.raumriss-os .rr-skin .environment-hero::before {
  content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px;
  border-radius: 3px; background: linear-gradient(180deg, var(--lg-blue), var(--copper)); opacity: .9;
}

/* Aktuelle Vorgänge: Zeilen als Hover-Glas-Karten mit Thumbnail */
html.raumriss-os .rr-skin .home-alive-events__link {
  display: flex !important; align-items: center !important; gap: 14px !important;
  padding: 12px 16px !important; border-radius: var(--os-radius-md) !important;
  transition: transform .35s var(--lg-spring), box-shadow .35s ease, background .3s ease !important;
}
html.raumriss-os .rr-skin .home-alive-events__link:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.4)) !important; backdrop-filter: none;
  box-shadow: var(--lg-float) !important;
}
html.raumriss-os .rr-skin .home-alive-events__thumb {
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 4px 10px -4px rgba(0,0,0,.4) !important;
}

/* Fokus + Fortsetzen als Glas-Karten */
html.raumriss-os .rr-skin .home-current-focus,
html.raumriss-os .rr-skin .home-re-entry {
  padding: 20px 24px !important; border-radius: var(--os-radius-lg) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.34)) !important; backdrop-filter: none;
  box-shadow: var(--lg-float) !important;
}

/* Eyebrows — OHNE Hairline (05.08.)
 *
 * Hier hing an jeder Eyebrow-Zeile ein `::after` mit `flex: 1 1 auto` und
 * 1 px Höhe: eine Linie, die den Rest der Zeile bis zum Kartenrand ausfüllt.
 * Max, auf „ZEIT & OFFENE SCHLEIFEN" zeigend: „da sind immer noch so
 * komische Striche am Rand der Widgets."
 *
 * Er hat recht, und zwar aus einem konkreten Grund: die Linie trennt nichts.
 * Sie läuft von der Beschriftung ins Leere und endet an der Kartenkante —
 * dort liegt aber schon eine Kante. Zwei Linien im Abstand von wenigen
 * Pixeln, von denen eine keine Aufgabe hat, liest man als Fehler, nicht als
 * Gestaltung. Eine Beschriftung, die in GROSSBUCHSTABEN, kleiner und leiser
 * gesetzt ist, ist bereits als Beschriftung erkennbar; sie braucht keinen
 * Balken, der das nochmal behauptet.
 *
 * Das war ohnehin schon absehbar: weiter unten stand bereits ein Block
 * „die zwei restlichen Striche im Lage-Bereich weg" — dieselbe Linie war
 * für EINEN Bereich einzeln abgeschaltet worden. Jetzt gilt es überall,
 * und der Einzelfall-Ausschalter unten kann entfallen.
 *
 * Das Flex-Layout bleibt: `gap` hält den Abstand zu Zählern und Symbolen,
 * die neben der Beschriftung stehen. Nur die Linie fällt weg. */
html.raumriss-os .rr-skin .home-stage-kicker,
html.raumriss-os .rr-skin .home-capture-lane__label {
  display: flex !important; align-items: center !important; gap: 12px !important;
}
html.raumriss-os .rr-skin .home-stage-kicker::after,
html.raumriss-os .rr-skin .home-capture-lane__label::after {
  content: none !important;
}

/* 22 — TYPO GROSS & FETT + AVE-Akzente wie Mockup */
html.raumriss-os .rr-skin .environment-hero .rr-page-title,
html.raumriss-os .rr-skin .environment-hero .os-title {
  font-size: clamp(34px, 4.2vw, 48px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.02 !important;
}
html.raumriss-os .rr-skin .ave-presence-line__headline {
  font-size: 26px !important; font-weight: 700 !important;
  letter-spacing: -0.015em !important; line-height: 1.2 !important;
  color: var(--ink, #16150f) !important;
}
html.raumriss-os .rr-skin .ave-presence-line__label {
  color: var(--lg-blue, #2f5bff) !important; font-weight: 600 !important;
}
/* Primaer-Knopf "Mit AVE sprechen".
 * War ein fest verdrahtetes iOS-Blau (#3b64ff → #2445e6) mit blauem Glow —
 * ein Fremdkoerper: das Haus fuehrt Burnt Orange (--rr-accent 216,108,42).
 * Ein einzelnes gesaettigtes Blau zwischen warmen Grautoenen ist der
 * sichtbarste Bruch auf der ganzen Seite. Jetzt der Hausakzent, flach
 * statt Verlauf, und der Schein ersetzt durch eine Kante + Kontaktschatten. */
html.raumriss-os .rr-skin .ave-presence-line [data-ave-intent="open_ave"],
html.raumriss-os .rr-skin .ave-presence-line [data-ave-intent="open_room"] {
  background: rgb(var(--rr-accent, 216, 108, 42)) !important;
  color: #fffaf4 !important;
  border-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(70, 34, 10, 0.16),
    0 4px 10px -4px rgba(70, 34, 10, 0.28) !important;
}
/* Uhr im dunklen Widget grösser (hero variant) */
html.raumriss-os .rr-skin .rr-clock-dark .presence-clock--hero .presence-clock-time {
  font-size: 46px !important; font-weight: 600 !important; letter-spacing: 0.01em !important;
}

/* 23 — AVE-Präsenz als Mockup-Reihe (Orb links, Inhalt rechts, luftig) */
html.raumriss-os .rr-skin .ave-presence-line.rr-ave-row {
  display: flex !important; align-items: center !important; gap: 28px !important;
  padding: 8px 6px !important;
}
html.raumriss-os .rr-skin .rr-ave-row .rr-ave-orb { display: grid; place-items: center; }
html.raumriss-os .rr-skin .rr-ave-row .rr-ave-content { display: flex; flex-direction: column; }
html.raumriss-os .rr-skin .rr-ave-row .ave-presence-line__headline {
  font-size: 27px !important; font-weight: 700 !important; letter-spacing: -0.015em !important;
  line-height: 1.18 !important; color: var(--ink, #16150f) !important;
}
html.raumriss-os .rr-skin .rr-ave-row .ave-presence-line__summary { font-size: 14px !important; }
@media (max-width: 680px){
  html.raumriss-os .rr-skin .ave-presence-line.rr-ave-row { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  html.raumriss-os .rr-skin .rr-ave-row .ave-presence-line__headline { font-size: 22px !important; }
}

/* 24 — AVE-Orb als lebendige Intelligenz (größerer Glow, weniger Widget) */
/* (Frueher: blauer Orb-Glow bei 190 %. Die spaetere Regel weiter unten
 * setzt ihn ohnehin auf 150 % zurueck — hier bleibt nur die Groesse, die
 * Farbe kommt aus dem Block „Orb-Schein".) */
html.raumriss-os .rr-skin .rr-ave-row .rr-ave-orb::before {
  width: 190% !important; height: 190% !important;
}
html.raumriss-os .rr-skin .rr-ave-row { gap: 22px !important; padding: 10px 8px !important; }

/* 25 — AVE als Teil der Seite integrieren (kein Widget-Kasten) */
html.raumriss-os .rr-skin .rr-ave-hero .rr-system-lage-panel {
  background: transparent !important;
  box-shadow: none !important; backdrop-filter: none !important;
  border: none !important;
  padding: 0 !important;
}
html.raumriss-os .rr-skin .rr-ave-hero .home-capture-header { margin-bottom: 10px !important; }
/* Orb-Glow dezenter (Ruhe) */
/* Orb-Schein — war Kobaltblau (47,91,255) und lag als sichtbarer heller
 * Kasten links in der AVE-Karte: ein kalter Fleck in einem warmen Haus,
 * der zweite Blau-Fremdkörper nach dem Primär-Knopf. Jetzt der Hausakzent,
 * und weicher auslaufend (82 % statt 68 %), damit keine Kante entsteht —
 * ein Schein mit erkennbarem Rand ist kein Schein, sondern eine Scheibe. */
html.raumriss-os .rr-skin .rr-ave-row .rr-ave-orb::before {
  width: 150% !important; height: 150% !important;
  background: radial-gradient(circle,
    rgba(216, 108, 42, 0.13),
    rgba(216, 108, 42, 0.05) 46%,
    transparent 82%) !important;
}

/* 26 — RAUMRISS-Brand hell + grüner Live-Punkt in der oberen Leiste (Mockup) */
html.raumriss-os body .runtime-session-header .session-header-locus__mark {
  color: #e9e5db !important;
  display: inline-flex !important; align-items: center !important; gap: 9px !important;
  font-family: var(--font-mono), ui-monospace, monospace !important;
  letter-spacing: 0.18em !important; font-weight: 600 !important;
}
html.raumriss-os body .runtime-session-header .session-header-locus__mark::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #17a35a; box-shadow: 0 0 0 3px rgba(23,163,90,0.2), 0 0 10px 1px rgba(23,163,90,0.7);
}

/* 27 — AVE-Orb im Dock sauber einpassen */
html.raumriss-os .rr-skin .riss-ave-point__mark { display:grid !important; place-items:center !important; overflow:visible !important; }
html.raumriss-os .riss-ave-point__mark { display:grid; place-items:center; }

/* 28 — AVE-Orb im Dock sichtbar (Mark vergrößern) */
html.raumriss-os .rr-skin .riss-ave-point__mark,
html.raumriss-os .riss-ave-point__mark {
  width: 26px !important; height: 26px !important;
  min-width: 26px !important; overflow: visible !important;
  display: grid !important; place-items: center !important;
}
html.raumriss-os .riss-ave-point__mark canvas { width: 26px !important; height: 26px !important; display: block !important; }

/* 29 — AVE-Sektion: EINE volle, hochwertige Glas-Karte (kein Clipping, kein Nested-Kasten) */
html.raumriss-os .rr-skin .rr-ave-hero { overflow: visible !important; margin: 4px 0 8px !important; }
html.raumriss-os .rr-skin .rr-ave-hero .home-capture-layer--system-lage {
  background: transparent !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important;
}
html.raumriss-os .rr-skin .rr-ave-hero .rr-system-lage-panel {
  padding: 30px 34px !important;
  border-radius: var(--os-radius-lg) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.40)) !important; backdrop-filter: none!important;
  box-shadow: var(--lg-float) !important;
  overflow: visible !important;
}
/* AVE-Zeile volle Breite, transparent (kein zweiter Kasten) */
html.raumriss-os .rr-skin .rr-ave-hero .ave-presence-line.lg-ave-card {
  background: transparent !important; box-shadow: none !important; backdrop-filter: none !important;
  padding: 6px 0 0 !important; width: 100% !important; max-width: none !important;
}
html.raumriss-os .rr-skin .rr-ave-hero .rr-ave-row { width: 100% !important; }
html.raumriss-os .rr-skin .rr-ave-hero .rr-ave-content { flex: 1 1 auto !important; }
/* AUREL Tageslage luftig in der Karte, mit Trennlinie */
html.raumriss-os .rr-skin .rr-ave-hero .zeitanker-aurel-tageslage {
  margin-top: 20px !important; padding-top: 18px !important;
  border-top: 1px solid rgba(20,18,10,0.08) !important;
}

/* 30 — DOCK (DER RISS) wie Mockup: Premium-Glas + blauer AVE-Button */
html.raumriss-os body .riss-core-form.riss-core-module {
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.52)) !important; backdrop-filter: none!important;
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,0.5),
    0 8px 16px -6px rgba(0,0,0,0.16), 0 40px 70px -26px rgba(0,0,0,0.42) !important;
}
html.raumriss-os body .riss-ave-point {
  background: linear-gradient(180deg, #3b64ff, #2445e6) !important;
  border-color: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 8px 18px -6px rgba(47,91,255,0.7) !important;
}
html.raumriss-os body .riss-ave-point .riss-ave-point__name { color: #ffffff !important; }

/* 31 — AVE-Button im Dock blau (höhere Spezifität) */
html.raumriss-os body .raumriss-runtime-dock .riss-ave-point,
html.raumriss-os body .bottom-console .riss-ave-point {
  background: linear-gradient(180deg, #3b64ff, #2445e6) !important;
  border: 1px solid transparent !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 8px 18px -6px rgba(47,91,255,0.7) !important;
}
html.raumriss-os body .raumriss-runtime-dock .riss-ave-point .riss-ave-point__name,
html.raumriss-os body .bottom-console .riss-ave-point .riss-ave-point__name {
  color: #ffffff !important;
}

/* 32 — AVE-Button blau (schlägt ID-Regel der App) */
html.raumriss-os #raumriss-runtime-dock [aria-label="Riss Core"] .riss-ave-point.riss-ave-point {
  background: linear-gradient(180deg, #3b64ff, #2445e6) !important;
  border: 1px solid transparent !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 8px 18px -6px rgba(47,91,255,0.7) !important;
}
html.raumriss-os #raumriss-runtime-dock [aria-label="Riss Core"] .riss-ave-point.riss-ave-point .riss-ave-point__name {
  color: #ffffff !important;
}

/* 33 — Vorgänge-Hover bleibt Liquid Glass (nicht weiß) */
html.raumriss-os body .rr-skin .home-alive-events__link:hover,
html.raumriss-os body .rr-skin .home-alive-events__item:hover .home-alive-events__link {
  background: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.22)) !important;
  backdrop-filter: none!important;
  box-shadow: var(--lg-float) !important;
}

/* 34 — home-main-stage transparent (schlägt die :has()-Weiß-Regel der App) */
html.raumriss-os .rr-skin .home-runtime-shell .home-main-stage.home-main-stage {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
}

/* 35 — Raum-Titel gross & fett (wie Home-Greeting) + Dock innen glätten */
html.raumriss-os .rr-skin .room-identity-strip__title.rr-page-title,
html.raumriss-os .rr-skin .room-identity-strip__title.os-title {
  font-size: clamp(34px, 4.2vw, 48px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.02 !important;
}
html.raumriss-os body #raumriss-runtime-dock .riss-core-room-context {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* 17b — Uhr-Connectoren: KEIN Außenrahmen + echte grüne LEDs */
html.raumriss-os .rr-skin .rr-clock-dark .operational-field__strip {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
}
html.raumriss-os .rr-skin .rr-clock-dark .operational-field__channel { display: none !important; }
/* Grün leuchtend für gesunde Phasen */
html.raumriss-os .rr-skin .rr-clock-dark .operational-field__source[data-system-phase="connected"] .operational-field__led,
html.raumriss-os .rr-skin .rr-clock-dark .operational-field__source[data-system-phase="alive"] .operational-field__led,
html.raumriss-os .rr-skin .rr-clock-dark .operational-field__source[data-system-phase="carrying"] .operational-field__led,
html.raumriss-os .rr-skin .rr-clock-dark .operational-field__source[data-system-phase="stable"] .operational-field__led {
  background: #34d17a !important;
  box-shadow: 0 0 6px rgba(52,209,122,0.9), 0 0 12px rgba(52,209,122,0.55) !important;
  opacity: 1 !important;
}

/* =====================================================================
   RÄUME · Liquid-Glass Roll-out — Inhalte fliegen frei, keine Kastenrahmen
   ===================================================================== */

/* R1 — Große Seiten-Rahmen transparent (das „weiße Widget" das alles einsperrt) */
html.raumriss-os .rr-skin .room-runtime-deck.room-composition,
html.raumriss-os .rr-skin .rr-room-shell .room-runtime-deck,
html.raumriss-os .rr-skin .room-composition__stage.rr-room-surface,
html.raumriss-os .rr-skin .rr-room-shell .room-composition__stage,
html.raumriss-os .rr-skin .rr-room-shell .surface-panel {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
}
/* Raum-eigenes Ambient dämpfen, globales Lichtfeld trägt */
html.raumriss-os .rr-skin .room-shell[data-room-slug]::before { opacity: 0.3 !important; }

/* R2 — Inhalts-Karten als Premium-Liquid-Glass (ohne Blur → Performance) */
html.raumriss-os .rr-skin .rr-room-shell .project-reality,
html.raumriss-os .rr-skin .rr-room-shell .project-reality__reentry,
html.raumriss-os .rr-skin .rr-room-shell .agent-presence-strip,
html.raumriss-os .rr-skin .rr-room-shell .workspace-section.room-chamber,
html.raumriss-os .rr-skin .rr-room-shell .room-operational-slot,
html.raumriss-os .rr-skin .rr-room-shell .alivemaex-website-entry__link {
  background: linear-gradient(180deg, rgba(255,255,255,0.66), rgba(255,255,255,0.46)) !important;
  border: 1px solid rgba(255,255,255,0.62) !important;
  border-radius: var(--os-radius-lg) !important;
  box-shadow: var(--lg-float) !important;
}

/* Website-Karte: gleichmaessige Flaeche — die kurze Karte zeigte den warmen
   Raum-Ambient ungleich durch ("komische Ecke"); hoehere Deckkraft = ruhig. */
html.raumriss-os .rr-skin .rr-room-shell .alivemaex-website-entry__link {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.82)) !important;
}

/* R3 — Website-Karte: ruhiger, geerdeter Schatten statt tiefem Flug-Schatten
   (die kurze Karte wirkte damit "falsch") + sanfter Hover ohne Feder-Overshoot. */
html.raumriss-os .rr-skin .rr-room-shell .alivemaex-website-entry__link {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 1px 2px rgba(30,25,15,0.05),
    0 10px 22px -12px rgba(30,25,15,0.16) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
html.raumriss-os .rr-skin .rr-room-shell .alivemaex-website-entry__link:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 2px 4px rgba(30,25,15,0.06),
    0 16px 30px -14px rgba(30,25,15,0.2) !important;
}

/* R4 — Tab-Rail als schwebende Glas-Fläche */
html.raumriss-os .rr-skin .rr-room-shell .room-nav-rail__shell {
  background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.42)) !important;
  border: 1px solid rgba(255,255,255,0.58) !important;
  border-radius: var(--os-radius-lg) !important;
  box-shadow: var(--lg-float) !important;
}

/* R5 — ABMELDEN: vertikal mittig zu den Wörtern + reines Weiß, hochwertig */
html.raumriss-os .runtime-presence-layer.runtime-session-header { align-items: center !important; }
html.raumriss-os body .runtime-presence-layer.runtime-session-header .runtime-session-header__logout {
  align-self: center !important;
  background: #ffffff !important;
  color: #14130f !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 3px 10px -2px rgba(0,0,0,0.35) !important;
}

/* R1b — Frames transparent, höhere Spezifität als [data-room-slug="…"]-Regeln */
html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-runtime-deck.room-composition,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-composition__stage.rr-room-surface,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .surface-panel {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* R2b — Modul-Karten sicher als Glas (schlägt slug-Regeln) */
html.raumriss-os .rr-skin .room-shell[data-room-slug] .workspace-section.room-chamber,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .project-reality,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .agent-presence-strip {
  background: linear-gradient(180deg, rgba(255,255,255,0.66), rgba(255,255,255,0.46)) !important;
  border: 1px solid rgba(255,255,255,0.62) !important;
  border-radius: var(--os-radius-lg) !important;
  box-shadow: var(--lg-float) !important;
}

/* =====================================================================
   ALLE ZONEN / ALLE RÄUME — generische schwebende Glas-Karten
   (deckt Unterseiten wie Schreiben, Website, Veröffentlichungen … ab)
   ===================================================================== */
html.raumriss-os .rr-skin .room-shell[data-room-slug] .workspace-section,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-chamber,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-worksurface,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-operational-slot,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .semantic-surface {
  background: linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.44)) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  border-radius: var(--os-radius-lg) !important;
  box-shadow: var(--lg-float) !important;
}
/* Verschachtelte gleiche Container => transparent (keine Doppelrahmen) */
html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-worksurface .workspace-section,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-worksurface .room-chamber,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-chamber .room-chamber,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .workspace-section .workspace-section,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-chamber .surface-panel,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .workspace-section .surface-panel {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* =====================================================================
   INNERE SUB-CARDS normalisieren — keine grauen Kästen-in-Kästen.
   Einheitliche, leichte Fläche auf der Glas-Karte (klare Hierarchie).
   ===================================================================== */
html.raumriss-os .rr-skin .room-shell[data-room-slug] .atmo-deck__primary,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .atmo-deck__secondary,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .atmo-composer,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .chamber-panel,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-field-panel,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-band-panel,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .anchors-panel,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .ablage-panel,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .risse-panel,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .lage-panel,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .intake-panel,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .instrument-panel,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .focus-panel,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .calendar-panel,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-threads-panel,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .semantic-surface,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .continuity-surface,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .zone-material-surface,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .affiliate-zone-surface,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .shopify-operational-surface,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .alivemaex-release-surface,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .ads-control-surface {
  background: rgba(255,255,255,0.42) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  border-radius: var(--os-radius-md) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* =====================================================================
   DOCK (DER RISS) — iOS-Feinschliff (nur visuell, kein Layout)
   ===================================================================== */
/* Kontinuierlichere Rundung, schwebender */
html.raumriss-os body #raumriss-runtime-dock .riss-core-form.riss-core-module {
  border-radius: 26px !important;
}
/* Eingabe-Feld: transluzentes iOS-Inset statt opak-beige */
html.raumriss-os body #raumriss-runtime-dock .riss-core-form__riss {
  background: rgba(255,255,255,0.5) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px 2px rgba(20,18,10,0.07),
    inset 0 0 0 1px rgba(255,255,255,0.6) !important;
}
/* RAUM-Kontext als dezentes Glas-Segment */
html.raumriss-os body #raumriss-runtime-dock .riss-core-room-context {
  background: rgba(255,255,255,0.4) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5) !important;
}
/* SENDEN dezent, AVE bleibt der einzige starke (blaue) Akzent */
html.raumriss-os body #raumriss-runtime-dock button[aria-label="AUREL — vorbereitete Kontinuität"] {
  border-radius: 13px !important;
}

/* =====================================================================
   EINGÄNGE (Material) + WERKZEUGE (Tool-Briefings) — aufgeräumt
   Geordnetes Glas-Karten-Raster, einheitliche Sub-Cards.
   ===================================================================== */
/* Roots: klarer Container ohne eigenen Kasten */
html.raumriss-os .rr-skin .room-shell[data-room-slug] .material-intake,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .alivemaex-briefings {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Geordnetes, gleichmäßiges Raster */
html.raumriss-os .rr-skin .room-shell[data-room-slug] .alivemaex-briefings__cards,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .material-intake__list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}
/* Einheitliche, schwebende Glas-Sub-Cards */
html.raumriss-os .rr-skin .room-shell[data-room-slug] .alivemaex-briefings__card,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .material-intake__card {
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.44)) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  border-radius: var(--os-radius-md) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 8px 20px -14px rgba(30,25,15,0.28) !important;
  padding: 14px 15px !important;
  margin: 0 !important;
}
/* Kicker/Labels ruhig und konsistent */
html.raumriss-os .rr-skin .room-shell[data-room-slug] .alivemaex-briefings__kicker,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .material-intake__section-label {
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  opacity: 0.6 !important;
}

/* =====================================================================
   OPERATIONAL-OVERVIEW — blanke Text-Blöcke in klare Karten fassen
   (Heute · Diese Woche · Braucht eine Entscheidung · Wartet auf Material …)
   ===================================================================== */
html.raumriss-os .rr-skin .room-shell[data-room-slug] .alivemaex-ops {
  display: grid !important;
  gap: 10px !important;
}
html.raumriss-os .rr-skin .room-shell[data-room-slug] .alivemaex-ops__band {
  background: rgba(255,255,255,0.44) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  border-radius: var(--os-radius-md) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65) !important;
  padding: 14px 16px !important;
  margin: 0 !important;
}
/* Briefings-Block transparent — Inhalt sind schon Karten */
html.raumriss-os .rr-skin .room-shell[data-room-slug] .alivemaex-ops__band[data-band="briefings"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* „Der Raum hält…" als ruhige Lead-Zeile, keine Karte */
html.raumriss-os .rr-skin .room-shell[data-room-slug] .alivemaex-ops__holding {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 2px !important;
  opacity: 0.8 !important;
  margin: 0 0 2px !important;
}
/* Kicker konsistent ruhig */
html.raumriss-os .rr-skin .room-shell[data-room-slug] .alivemaex-ops__band-kicker {
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  opacity: 0.6 !important;
}

/* =====================================================================
   PERFORMANCE — echtes Glas nur noch beim Dock (Hero), Rest Gradient-Glas.
   Offscreen-Module überspringen (content-visibility) => flüssigeres Scrollen.
   ===================================================================== */
/* Dock behält echten Backdrop-Blur (kleines, wichtiges Element) */
html.raumriss-os body #raumriss-runtime-dock .riss-core-form.riss-core-module {
  backdrop-filter: blur(22px) saturate(180%) !important;
}
/* Große Raum-Module offscreen nicht rendern (kein Funktionsverlust) */
html.raumriss-os .rr-skin .room-shell[data-room-slug] .workspace-section,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-chamber,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .project-reality,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .agent-presence-strip {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

/* =====================================================================
   iOS-CONTROLS — Buttons, Chips, Selects vereinheitlichen,
   damit das alte System nicht mehr durchscheint.
   ===================================================================== */
html.raumriss-os .rr-skin .atmo-action,
html.raumriss-os .rr-skin .aurel-btn,
html.raumriss-os .rr-skin .room-thread-action,
html.raumriss-os .rr-skin .operational-button,
html.raumriss-os .rr-skin .material-intake__btn,
html.raumriss-os .rr-skin .alivemaex-briefings__handoff,
html.raumriss-os .rr-skin .view-btn,
html.raumriss-os .rr-skin .zone-btn,
html.raumriss-os .rr-skin .room-btn,
html.raumriss-os .rr-skin .subroom-switch-button,
html.raumriss-os .rr-skin .suggestion-btn,
html.raumriss-os .rr-skin .state-action,
html.raumriss-os .rr-skin .kind-action {
  border-radius: 999px !important;
  border: 1px solid rgba(20,18,10,0.08) !important;
  background: rgba(255,255,255,0.6) !important;
  padding: 7px 15px !important;
  font-weight: 510 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-primary, #14130f) !important;
  transition: transform .18s var(--lg-spring), background .18s ease, box-shadow .18s ease !important;
}
html.raumriss-os .rr-skin .atmo-action:hover,
html.raumriss-os .rr-skin .aurel-btn:hover,
html.raumriss-os .rr-skin .room-thread-action:hover,
html.raumriss-os .rr-skin .operational-button:hover,
html.raumriss-os .rr-skin .material-intake__btn:hover,
html.raumriss-os .rr-skin .alivemaex-briefings__handoff:hover,
html.raumriss-os .rr-skin .view-btn:hover,
html.raumriss-os .rr-skin .subroom-switch-button:hover {
  background: rgba(255,255,255,0.85) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px -8px rgba(30,25,15,0.32) !important;
}
html.raumriss-os .rr-skin .atmo-action--primary,
html.raumriss-os .rr-skin .operational-button--primary,
html.raumriss-os .rr-skin .room-thread-action--submit,
html.raumriss-os .rr-skin .room-thread-action--complete {
  background: linear-gradient(180deg, #3b64ff, #2445e6) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px -7px rgba(47,91,255,0.6) !important;
}
html.raumriss-os .rr-skin .atmo-action--quiet {
  background: rgba(255,255,255,0.4) !important;
  color: var(--text-secondary, #55514a) !important;
}
html.raumriss-os .rr-skin .room-workbench-context-chip,
html.raumriss-os .rr-skin .format-primary-chip,
html.raumriss-os .rr-skin .metric-chip,
html.raumriss-os .rr-skin .actions-chip {
  border-radius: 999px !important;
  background: rgba(20,18,10,0.045) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  padding: 3px 11px !important;
}
html.raumriss-os .rr-skin .atmo-select-label,
html.raumriss-os .rr-skin .thread-select,
html.raumriss-os .rr-skin .tool-select,
html.raumriss-os .rr-skin .phase-select,
html.raumriss-os .rr-skin .fold-summary,
html.raumriss-os .rr-skin .view-fold-summary {
  border-radius: 12px !important;
  background: rgba(255,255,255,0.5) !important;
  border: 1px solid rgba(20,18,10,0.08) !important;
  padding: 8px 12px !important;
}
html.raumriss-os .rr-skin { --os-radius-lg: 1.3rem; --os-radius-md: 1rem; }

/* =====================================================================
   KLICKBARE KARTEN — Unterräume + Haupträume klar erkennbar & abhebend
   ===================================================================== */
html.raumriss-os .rr-skin .room-zone-overview__card {
  position: relative !important;
  cursor: pointer !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.52)) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  border-radius: var(--os-radius-lg) !important;
  box-shadow: var(--lg-float) !important;
  padding: 16px 17px !important;
  transition: transform .4s var(--lg-spring), box-shadow .4s ease, border-color .3s ease !important;
}
html.raumriss-os .rr-skin .room-zone-overview__card::after {
  content: "→";
  position: absolute; top: 14px; right: 16px;
  color: var(--lg-blue); opacity: 0.32;
  font-size: 15px; font-weight: 600;
  transition: transform .3s var(--lg-spring), opacity .3s ease;
  pointer-events: none;
}
html.raumriss-os .rr-skin .room-zone-overview__card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--lg-float-hi) !important;
  border-color: var(--lg-blue-line) !important;
}
html.raumriss-os .rr-skin .room-zone-overview__card:hover::after {
  opacity: 0.95; transform: translateX(3px);
}
html.raumriss-os .rr-skin .room-zone-overview__card:active {
  transform: translateY(-2px) scale(0.994) !important;
}

/* Haupträume auf der Startseite — gleiche klare Klickbarkeit, stärkere Präsenz */
html.raumriss-os .rr-skin .home-room-strip-cell {
  cursor: pointer !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.52)) !important;
  box-shadow: var(--lg-float) !important;
}
html.raumriss-os .rr-skin .home-room-strip-cell:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--lg-float-hi) !important;
  outline: 1.5px solid var(--lg-blue-line) !important;
  outline-offset: -1.5px !important;
}
html.raumriss-os .rr-skin .home-room-strip-cell:active {
  transform: translateY(-2px) scale(0.994) !important;
}

/* „Offener Faden": Dropdown als kompakte Pille statt leerer Vollbreiten-Leiste */
html.raumriss-os .rr-skin .alivemaex-room-state__fold-summary {
  display: inline-flex !important;
  width: auto !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7) !important;
  padding: 7px 14px !important;
}

/* =====================================================================
   SCHRIFT-KONSISTENZ + GRÖSSEN + Nachrichten-Spur weg
   ===================================================================== */
/* Raum-Titel (ALIVEMAEX …) = exakt die schöne Home-Hero-Schrift */
html.raumriss-os .rr-skin .room-identity-strip__title.rr-page-title,
html.raumriss-os .rr-skin .room-identity-strip__title.os-title.rr-page-title {
  font-size: clamp(2rem, 4.6vw, 2.85rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.032em !important;
  line-height: 1.08 !important;
  color: var(--text-primary, #14130f) !important;
}
/* Raum-Untertitel etwas größer/luftiger */
html.raumriss-os .rr-skin .room-identity-strip__presence {
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
}
/* Raum-Inhaltstext wirkte zu klein — moderat anheben */
html.raumriss-os .rr-skin .room-shell[data-room-slug] .type-body,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-zone-overview__title {
  font-size: 0.98rem !important;
}
html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-zone-overview__title {
  font-weight: 560 !important;
  letter-spacing: -0.015em !important;
}
/* Nachrichten-Spur über dem Dock ausblenden (Debug-/Agent-Trace, wirkt störend) */
html.raumriss-os .der-riss-marginalia { display: none !important; }

/* =====================================================================
   EINGÄNGE & WERKZEUGE (home-capture-tools) — entrümpeln & beruhigen
   Breiteres, luftiges Raster statt gedrängter 6-Spalten-Wand.
   ===================================================================== */
html.raumriss-os .rr-skin .home-capture-tools {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
}
/* Jedes Shelf = ruhige, klar abgesetzte Glas-Karte */
html.raumriss-os .rr-skin .home-capture-tools > .home-capture-layer,
html.raumriss-os .rr-skin .home-capture-tools .home-capture-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.44)) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  border-radius: var(--os-radius-lg) !important;
  box-shadow: var(--lg-float) !important;
  padding: 18px !important;
}
/* Mehr Luft zwischen Einträgen */
html.raumriss-os .rr-skin .home-capture-tools .home-open-risse__list > * + * {
  margin-top: 12px !important;
}
/* Sekundär-Schicht (Zusatz-Aktionen) ruhiger — reduziert den „voll"-Eindruck */
html.raumriss-os .rr-skin .home-capture-tools [data-secondary-layer] {
  opacity: 0.5 !important;
  transition: opacity .25s ease !important;
}
html.raumriss-os .rr-skin .home-capture-tools .home-capture-layer:hover [data-secondary-layer] {
  opacity: 0.95 !important;
}
/* Sektions-Überschrift klarer setzen */
html.raumriss-os .rr-skin .home-capture-lane--secondary > .home-capture-lane__label {
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  opacity: 0.55 !important;
  margin-bottom: 6px !important;
}

/* =====================================================================
   KI-Berührungen-Log (agent-presence-strip) ausblenden — wirkt wie
   Debug/Fehler (rohe Agent-Telemetrie, „get room context" ×6).
   Reversibel: diesen Block entfernen holt es zurück.
   ===================================================================== */
html.raumriss-os .rr-skin .agent-presence-strip,
html.raumriss-os .rr-skin .room-agent-presence {
  display: none !important;
}

/* Spur ausblenden — schlägt die ID-Regel #raumriss-runtime-dock */
html.raumriss-os #raumriss-runtime-dock .der-riss-marginalia,
html.raumriss-os body #raumriss-runtime-dock .der-riss-marginalia,
html.raumriss-os .bottom-console .der-riss-marginalia {
  display: none !important;
}

/* =====================================================================
   RESPONSIVE — iPhone / iPad. Kein horizontaler Überlauf, einspaltige
   Raster, kompaktere Karten, leichtere Schatten. Desktop unberührt.
   ===================================================================== */
@media (max-width: 900px) {
  /* Raster auf Tablet: max 2 Spalten */
  html.raumriss-os .rr-skin .home-capture-tools,
  html.raumriss-os .rr-skin .room-shell[data-room-slug] .alivemaex-briefings__cards,
  html.raumriss-os .rr-skin .room-shell[data-room-slug] .material-intake__list,
  html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-zone-overview__grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  /* Nie horizontal scrollen */
  html.raumriss-os, html.raumriss-os body, html.raumriss-os .rr-skin { overflow-x: hidden !important; max-width: 100% !important; }

  /* Alle Karten-Raster einspaltig */
  html.raumriss-os .rr-skin .home-capture-tools,
  html.raumriss-os .rr-skin .room-shell[data-room-slug] .alivemaex-briefings__cards,
  html.raumriss-os .rr-skin .room-shell[data-room-slug] .material-intake__list,
  html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-zone-overview__grid,
  html.raumriss-os .rr-skin .alivemaex-ops {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Karten kompakter + leichtere Schatten (Perf & kein Rand-Überlauf) */
  html.raumriss-os .rr-skin .room-shell[data-room-slug] .workspace-section,
  html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-chamber,
  html.raumriss-os .rr-skin .room-shell[data-room-slug] .project-reality,
  html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-zone-overview__card,
  html.raumriss-os .rr-skin .home-capture-tools .home-capture-panel {
    padding: 14px !important;
    box-shadow: 0 2px 6px rgba(30,25,15,0.06), 0 14px 28px -14px rgba(30,25,15,0.2) !important;
  }

  /* Titel skaliert mobil */
  html.raumriss-os .rr-skin .room-identity-strip__title.rr-page-title,
  html.raumriss-os .rr-skin .room-identity-strip__title.os-title.rr-page-title {
    font-size: clamp(1.55rem, 8.5vw, 2.05rem) !important;
  }

  /* Dunkle Uhr: volle Breite, Innenabstand kleiner, Connector-Pills umbrechen */
  html.raumriss-os .rr-skin .rr-clock-dark { padding: 16px 16px 14px !important; }
  html.raumriss-os .rr-clock-dark .operational-field__sources {
    flex-wrap: wrap !important; gap: 6px !important; row-gap: 6px !important;
  }
  html.raumriss-os .rr-skin .rr-clock-dark .presence-clock-time { font-size: clamp(2.4rem, 14vw, 3.2rem) !important; }

}

/* =====================================================================
   iPhone Top-Bar — BULLETPROOF: harter Höhen-Deckel, single-row, clippt.
   Höchste Spezifität, schlägt alle widersprüchlichen App-Pässe.
   Kann physisch nicht mehr explodieren.
   ===================================================================== */
@media (max-width: 760px) {
  html.raumriss-os body .runtime-presence-layer.runtime-session-header {
    display: block !important;
    height: auto !important;
    max-height: 2.55rem !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    width: -moz-max-content !important;
    width: max-content !important;
    max-width: calc(100vw - 0.9rem) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    padding: 0 !important;
  }
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .runtime-session-header__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 0.7rem !important;
    gap: 0.55rem !important;
  }
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .runtime-session-header__clock,
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .runtime-session-header__aurel {
    display: none !important;
  }
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .runtime-session-header__center {
    flex: 0 1 auto !important; min-width: 0 !important; overflow: hidden !important;
    grid-area: auto !important; max-width: 60vw !important;
  }
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .runtime-session-header__trailing {
    flex: 0 0 auto !important; grid-area: auto !important; max-width: none !important;
    min-width: 0 !important; overflow: visible !important;
  }
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .runtime-session-header__logout,
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .system-presence-end__action {
    padding: 5px 11px !important; font-size: 0.66rem !important; white-space: nowrap !important;
  }
}

/* ── 31 — AVE FREI: Orb schwebt frei oben, Lage im Glas-Kasten drunter, kein Rahmen/Strich ── */
html.raumriss-os .rr-skin .rr-ave-hero .home-capture-layer.home-capture-layer--system-lage {
  border: 0 !important;
  box-shadow: none !important;
}
html.raumriss-os .rr-skin .rr-ave-hero .rr-system-lage-panel {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}
/* (Der frühere Einzelfall-Ausschalter für die Lage-Striche stand hier.
 * Er ist entfallen: die Eyebrow-Hairline ist oben bei ihrer Quelle
 * hausweit abgeschaltet, siehe „Eyebrows — OHNE Hairline".) */
/* 31a — AVE ALS REIHE (05.08., ersetzt „AVE FREI")
 *
 * Vorher stand der Orb frei zentriert OBEN und die Lage in einem eigenen
 * Glaskasten DARUNTER. Am lebenden Haus gemessen: die Fläche war 389 px hoch,
 * davon rund 170 px Orb-Zone, in der fast nichts steht — der Text begann erst
 * bei y 561. Gleichzeitig lag er zentriert in 1322 px Breite, also ein
 * schmaler Satz mitten in einem weiten leeren Feld.
 *
 * Die Reihe ist das, wofür das Markup ohnehin gebaut ist: `rr-ave-row`,
 * `shrink-0` am Orb, `flex-1` am Inhalt. Orb links, Satz rechts, beides auf
 * einer Höhe. Gemessen danach: 228 px statt 389 — 161 px zurückgewonnen,
 * ohne dass ein einziges Element verschwindet.
 *
 * Der Glaskasten um den Text fällt weg: in der Reihe sitzt der Text bereits
 * auf der Karte. Ein Kasten im Kasten ist der zweite Rahmen, der nichts
 * trennt — er hat die Fläche nur kleinteiliger gemacht.
 *
 * Zurück zur alten Fassung: diesen Block durch den Stand vor dem 05.08.
 * ersetzen (Spalte, zentriert, Glaskasten am Inhalt). */
html.raumriss-os .rr-skin .rr-ave-hero .ave-presence-line.rr-ave-row {
  flex-direction: row !important;
  align-items: center !important;
  /* Max: „kannst du das mal ‚RAUMRISS ist wach' mit dem AVE-Orb in die
   * Mitte machen." Orb und Satz bleiben eine Reihe, wandern aber als PAAR
   * in die Kartenmitte. Dafür muss der Inhalt aufhören zu wachsen
   * (`flex: 0 1 auto` weiter unten) — mit `1 1 auto` füllt er die Karte
   * und drückt das Paar zwangsläufig nach links. */
  justify-content: center !important;
  gap: 28px !important;
  padding: 4px 0 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
html.raumriss-os .rr-skin .rr-ave-hero .lg-orb-halo {
  transform: scale(1.3);
  /* In der Spalte trugen 16/22 px den Abstand nach oben und unten. In der
   * Reihe kommt der Abstand aus `gap` — hier bleibt nur die Luft, die der
   * skalierte Halo seitlich braucht. */
  margin: 0 10px !important;
}
html.raumriss-os .rr-skin .rr-ave-hero .rr-ave-content {
  width: auto !important;
  flex: 0 1 auto !important;
  text-align: left !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
/* Zeilenlänge deckeln: ohne das läuft der Satz über die volle Kartenbreite
 * und wird unlesbar. 68 Zeichen ist die Spanne, in der das Auge den
 * Zeilenanfang noch sicher wiederfindet. */
html.raumriss-os .rr-skin .rr-ave-hero .rr-ave-content > * {
  text-align: left !important;
  max-width: 68ch !important;
}
html.raumriss-os .rr-skin .rr-ave-hero .ave-presence-line__actions { justify-content: flex-start !important; }
html.raumriss-os .rr-skin .rr-ave-hero .zeitanker-aurel-tageslage {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.36)) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 34px -22px rgba(20, 18, 10, 0.3) !important;
  padding: 16px 22px !important;
  border-top: none !important;
}

/* 31c — AVE und AUREL nebeneinander statt untereinander (05.08.)
 *
 * AUREL TAGESLAGE ist ein Geschwister der AVE-Reihe im selben Feld und war
 * auf `max-width: 42rem` gedeckelt: 672 px in einem 1384 px breiten Feld.
 * Ergebnis: zwei Bloecke uebereinander, beide mit leerer rechter Haelfte —
 * eine halbbreite Karte, die allein steht, liest sich wie ein Fehler.
 *
 * Als Raster fuellt die Lage genau das Loch, das die AVE-Reihe rechts laesst.
 * Aus zwei angefangenen Zeilen wird EIN Block. Gemessen: Feldhoehe 319 → 204,
 * also nochmal 115 px, ohne dass etwas wegfaellt.
 *
 * `grid-template-areas` statt Reihenfolge: die Kopfzeile spannt ueber beide
 * Spalten, und die Zuordnung bleibt lesbar, falls jemand die DOM-Reihenfolge
 * aendert. Unter 900 px faellt alles zurueck in eine Spalte — auf dem Handy
 * ist Nebeneinander keine Hilfe. */
@media (min-width: 900px) {
  html.raumriss-os .rr-skin .rr-ave-hero .rr-system-lage-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px) !important;
    grid-template-areas:
      "kopf kopf"
      "ave  lage" !important;
    align-items: center !important;
    -moz-column-gap: 32px !important;
         column-gap: 32px !important;
  }
  html.raumriss-os .rr-skin .rr-ave-hero .rr-system-lage-panel > .home-capture-header {
    grid-area: kopf !important;
  }
  html.raumriss-os .rr-skin .rr-ave-hero .ave-presence-line.rr-ave-row {
    grid-area: ave !important;
  }
  html.raumriss-os .rr-skin .rr-ave-hero .zeitanker-aurel-tageslage {
    grid-area: lage !important;
    max-width: none !important;
    margin-top: 0 !important;
  }
}
/* 31b — die zwei restlichen Striche im Lage-Bereich weg */
html.raumriss-os .rr-skin .rr-ave-hero .home-capture-layer--system-lage .home-capture-header {
  border-bottom: 0 !important;
}
html.raumriss-os .rr-skin .rr-ave-hero .ave-presence-line.rr-ave-row::before {
  display: none !important;
  content: none !important;
}
/* 31c — „LAGE"-Überschrift ausblenden */
html.raumriss-os .rr-skin .rr-ave-hero .home-capture-layer--system-lage .home-capture-header {
  display: none !important;
}

/* 35 — AVE-Knopf in der Bar zeigt den ANIMIERTEN ORB statt blauem Button (schlägt 30/31/32) */
html.raumriss-os body #raumriss-runtime-dock [aria-label="Riss Core"] .riss-ave-point.riss-ave-point {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  border-color: transparent !important;
}
html.raumriss-os body #raumriss-runtime-dock [aria-label="Riss Core"] .riss-ave-point.riss-ave-point .riss-ave-point__mark canvas {
  transform: scale(1.5) !important;
  transform-origin: center !important;
}
html.raumriss-os body #raumriss-runtime-dock [aria-label="Riss Core"] .riss-ave-point .riss-ave-point__name {
  display: none !important;
}

/* =====================================================================
   iPhone ABMELDEN-Fix — App deckelt den Logout-Button bei ≤640px auf
   max-width:50% (schneidet Text ab). Deckel hier entfernen.
   ===================================================================== */
@media (max-width: 760px) {
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .runtime-session-header__logout,
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .system-presence,
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .system-presence-end,
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .system-presence-end__face,
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .system-presence-end__action {
    max-width: none !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .runtime-session-header__actions {
    overflow: visible !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
}

/* =====================================================================
   iPhone ABMELDEN kompakter (war zu groß nach Deckel-Entfernung).
   Grüner Schalter + Text kleiner skaliert.
   ===================================================================== */
@media (max-width: 760px) {
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .system-presence-end {
    padding: 3px 9px !important;
    gap: 0.3rem !important;
    transform: scale(0.9) !important;
    transform-origin: right center !important;
  }
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .system-presence-end__action {
    font-size: 0.6rem !important;
    letter-spacing: 0.06em !important;
  }
  /* falls der grüne Switch ein eigenes Element ist: kleiner */
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .system-presence-end__face,
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .system-presence-end [class*="switch"],
  html.raumriss-os body .runtime-presence-layer.runtime-session-header .system-presence-end [class*="toggle"] {
    transform: scale(0.85) !important;
  }
}

/* 35b — Bar-Orb: harte Außenringe wegmaskieren (kein App-Rahmen), nur Kern + weicher Glow */
html.raumriss-os body #raumriss-runtime-dock [aria-label="Riss Core"] .riss-ave-point.riss-ave-point .riss-ave-point__mark canvas {
  transform: scale(1.7) !important;
  transform-origin: center !important;
  -webkit-mask-image: radial-gradient(circle, #000 26%, rgba(0, 0, 0, 0.55) 40%, transparent 52%) !important;
  mask-image: radial-gradient(circle, #000 26%, rgba(0, 0, 0, 0.55) 40%, transparent 52%) !important;
}

/* =====================================================================
   Text-Schärfe — alte Dunkel-Flächen-Text-Schatten auf hellen Karten
   entfernen (erzeugten Ghosting/Unschärfe).
   ===================================================================== */
html.raumriss-os .rr-skin .room-shell[data-room-slug] [class*="werkbank-surface"],
html.raumriss-os .rr-skin .room-shell[data-room-slug] [class*="werkbank-surface"] *,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .alivemaex-ops,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .alivemaex-ops *,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .workspace-section *,
html.raumriss-os .rr-skin .room-shell[data-room-slug] .room-chamber *,
html.raumriss-os .rr-skin .room-shell[data-room-slug] [class*="-surface"] * {
  text-shadow: none !important;
}

/* =====================================================================
   Operational-Overview: sparse Vollbreit-Karten → 2-spaltig auf Desktop
   (wirken sonst leer / „passen nicht").
   ===================================================================== */
@media (min-width: 760px) {
  html.raumriss-os .rr-skin .room-shell[data-room-slug] .alivemaex-ops {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 12px !important;
  }
  /* Lead-Zeile + Briefings über volle Breite */
  html.raumriss-os .rr-skin .room-shell[data-room-slug] .alivemaex-ops__holding,
  html.raumriss-os .rr-skin .room-shell[data-room-slug] .alivemaex-ops__band[data-band="briefings"] {
    grid-column: 1 / -1 !important;
  }
}

/* 31d — grosser Orb: quadratische Canvas-Ecken kreisförmig wegmaskieren (nur Mitte sichtbar) */
html.raumriss-os .rr-skin .rr-ave-hero .lg-orb-halo canvas {
  -webkit-mask-image: radial-gradient(circle closest-side, #000 86%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 86%, transparent 100%);
}

/* =====================================================================
   SYSTEM iOS-POLITUR — cross-cutting Feinschliff über die ganze App.
   Rein visuell, .rr-skin-scoped.
   ===================================================================== */
/* Schriftglättung + optische Feinheiten */
.rr-skin {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* iOS-Textauswahl (kobalt) */
.rr-skin ::-moz-selection { background: rgba(47,91,255,0.20); color: inherit; }
.rr-skin ::selection { background: rgba(47,91,255,0.20); color: inherit; }
/* iOS-Fokus-Ring statt kastigem Default */
.rr-skin a:focus-visible,
.rr-skin button:focus-visible,
.rr-skin [role="button"]:focus-visible,
.rr-skin input:focus-visible,
.rr-skin textarea:focus-visible,
.rr-skin select:focus-visible {
  outline: 2px solid var(--lg-blue, #2f5bff) !important;
  outline-offset: 2px !important;
  border-radius: 12px;
}
/* Kein grauer Tap-Blitz auf iPhone/iPad */
.rr-skin, .rr-skin * { -webkit-tap-highlight-color: transparent; }
/* Dünne, dezente iOS-Scrollbalken */
.rr-skin *::-webkit-scrollbar { width: 8px; height: 8px; }
.rr-skin *::-webkit-scrollbar-thumb {
  background: rgba(20,18,10,0.16);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.rr-skin *::-webkit-scrollbar-thumb:hover { background: rgba(20,18,10,0.28); background-clip: padding-box; }
.rr-skin *::-webkit-scrollbar-track { background: transparent; }
/* Weiche Feder-Übergänge auf allen interaktiven Flächen */
.rr-skin a,
.rr-skin button,
.rr-skin [role="button"],
.rr-skin summary,
.rr-skin [tabindex] {
  transition: transform .2s var(--lg-spring, cubic-bezier(0.34,1.4,0.5,1)),
              background-color .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
/* Eingabefelder überall iOS-gerundet */
.rr-skin input:not([type="checkbox"]):not([type="radio"]),
.rr-skin textarea,
.rr-skin select {
  border-radius: 12px;
}
/* Bilder/Thumbnails konsistent iOS-gerundet */
.rr-skin .home-alive-events__thumb,
.rr-skin [class*="thumbnail"],
.rr-skin [class*="__thumb"] {
  border-radius: 14px !important;
}

/* ── Glocke = „Was dich braucht" (Max, 31.10.): dieselbe Zahl und Liste wie
   Heute. Ruhiges Lila statt Kupfer — Rot/Orange macht Panik. ── */
.rr-notif__badge {
  background: linear-gradient(180deg, #8d74ea, #6f55d6);
  box-shadow: 0 0 0 2.5px var(--bg, #eceae4), 0 0 12px 1px rgba(124, 98, 224, 0.45);
}
.rr-notif__panel--heute { width: 360px; padding: 8px; }
.rr-notif__kopf { display: grid; gap: 3px; padding: 10px 12px 12px; }
.rr-notif__kopf b { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: #16150f; line-height: 1.2; }
.rr-notif__kopf span { font-size: 11.5px; color: #7d7a6e; }
.rr-notif__dinge { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rr-notif__dinge button,
.rr-notif__fuss {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 13px;
  font-size: 13px; line-height: 1.35; color: #2d2b25; transition: background 0.15s ease;
}
.rr-notif__dinge button:hover, .rr-notif__fuss:hover { background: rgba(20, 20, 30, 0.05); }
.rr-notif__dinge i {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #7c62e0; box-shadow: 0 0 0 3px rgba(124, 98, 224, 0.14), 0 0 9px 1px rgba(124, 98, 224, 0.35);
}
.rr-notif__dinge li:first-child i { background: #4f7bea; box-shadow: 0 0 0 3px rgba(79, 123, 234, 0.14), 0 0 9px 1px rgba(79, 123, 234, 0.35); }
.rr-notif__dinge span { flex: 1; min-width: 0; }
.rr-notif__dinge span b { font-weight: 650; color: #16150f; }
.rr-notif__dinge svg { flex: none; opacity: 0.35; }
.rr-notif__fuss { justify-content: center; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: #55534a; border-top: 1px solid rgba(20, 20, 30, 0.06); border-radius: 0 0 13px 13px; }

/* Glocke im selben hellen Glas wie Heute · Räume (Max, 31.10.). */
.rr-notif__bell {
  background: rgba(250, 249, 246, 0.94);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 14px 34px -12px rgba(20, 22, 40, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.rr-notif__bell svg { stroke: #1c1a17; }

/* Warnungen in der Glocke (lib/raum/warnungen): warm = bald ansehen (Bernstein),
   rot nur, wenn wirklich etwas kaputt ist — dann auch die Zahl. */
.rr-notif__dinge li[data-ton="warm"] i { background: #e0a23c; box-shadow: 0 0 0 3px rgba(224, 162, 60, 0.16), 0 0 9px 1px rgba(224, 162, 60, 0.35); }
.rr-notif__dinge li[data-ton="rot"] i { background: #d9483b; box-shadow: 0 0 0 3px rgba(217, 72, 59, 0.14), 0 0 9px 1px rgba(217, 72, 59, 0.4); }
.rr-notif__badge[data-rot] { background: linear-gradient(180deg, #e8604f, #cf3f31); box-shadow: 0 0 0 2.5px var(--bg, #eceae4), 0 0 12px 1px rgba(217, 72, 59, 0.45); }

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../../../../../../Users/max/Documents/MAEX_OS/maex-os/apps/dashboard/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../../../../../../../../Users/max/Documents/MAEX_OS/maex-os/apps/dashboard/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/dashboard/home-heute.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * RAUMRISS · Home — Sprache des SITE-FX-Cockpits (Max, 29.10.: „direkte Vorlage").
 * Schriften wie dort (Anton für Versal-Überschriften, Archivo für Text),
 * Schwarz + Hellgelb als Signal, nummerierte Kacheln mit großer Zahl.
 * Material wie die SITE-FX-Mac-App und Putzi: Milchglas mit heller Kante
 * (Werte aus apps/site-effect-mac/Sources/Glass.swift). Alles unter `.rh`.
 */
.rh {
  --rh-ink: #0a0a0a;
  --rh-ink2: #3d3d3d;
  --rh-mut: #6b6b6b;
  --rh-signal: #e9f5a0;
  --rh-panel: rgba(255, 255, 255, 0.12);
  --rh-card: rgba(255, 255, 255, 0.56);
  --rh-card2: rgba(255, 255, 255, 0.78);
  --rh-edge: rgba(255, 255, 255, 0.72);
  --rh-line: rgba(20, 20, 30, 0.08);
  --rh-sel: rgba(20, 20, 30, 0.06);
  --rh-veil: rgba(244, 244, 247, 0.04);
  --rh-shadow: 0 22px 60px rgba(20, 22, 40, 0.16), 0 2px 8px rgba(20, 22, 40, 0.06);
  --rh-card-shadow: 0 8px 28px rgba(20, 22, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --rh-glass: blur(36px) saturate(175%);
  --rh-accent: #d9582b;
  --rh-accent-tint: rgba(217, 88, 43, 0.12);
  --rh-warn: #9a6200;
  --rh-warn-tint: rgba(237, 161, 0, 0.16);
  --rh-bad: #c2402f;
  --rh-bad-tint: rgba(194, 64, 47, 0.1);
  --rh-good: #1d8a5c;
  --rh-good-tint: rgba(27, 175, 122, 0.12);
  --rh-display: var(--font-se-display), "Anton", Impact, sans-serif;
  --rh-sans: var(--font-se-sans), "Archivo", -apple-system, system-ui, sans-serif;
  /* rr-kit färbt body, Knöpfe und Felder mit `var(--ink) !important`. */
  --ink: var(--rh-ink);

  position: relative;
  z-index: 1;
  min-height: 100dvh;
  color: var(--rh-ink);
  font: 14px/1.45 var(--rh-sans);
  -webkit-font-smoothing: antialiased;
}
.rh::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--rh-veil);
  pointer-events: none;
}

/* Mac-App (html.rr-native): echtes macOS-Glas hinter der Seite — klarer, der Schreibtisch scheint durch. */
html.rr-native .rh {
  --rh-veil: transparent;
  --rh-panel: rgba(255, 255, 255, 0.1);
  --rh-card: rgba(255, 255, 255, 0.52);
}

.rh *, .rh *::before, .rh *::after { box-sizing: border-box; }
.rh h1, .rh h2, .rh h3, .rh p { margin: 0; }
.rh a { color: inherit; text-decoration: none; }
.rh :is(a, button, summary, input):focus-visible { outline: 2px solid var(--rh-ink); outline-offset: 2px; }
.rh-mut { color: var(--rh-mut); }

/* ── Rahmen: eine Glasbühne, oben die Kopfleiste (keine linke Liste) ───── */
.rh-stage {
  position: relative;
  isolation: isolate;
  max-width: 1240px;
  min-height: calc(100dvh - 30px);
  margin: 18px auto 12px;
  border-radius: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-content: start;
  /* oben Platz für Statusleiste und Glocke, unten für den Riss */
  padding: 60px 32px 130px;
}
@media (min-width: 901px) {
  .rh-stage { width: calc(100% - 24px); }
}
/* Glasbühne auf ::before: unter Home steckt ein AVE-Orb, und der Glas-Rahmen
   (@layer rr-v5) nimmt jeder Fläche mit Orb den Hintergrund. */
.rh-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--rh-panel);
  border: 1px solid var(--rh-edge);
  box-shadow: var(--rh-shadow), inset 0 1px 0 var(--rh-edge);
  backdrop-filter: var(--rh-glass);
}

/* ── Kopfleiste: Marke, wenige Pillen, „Mehr" ───────────────────────── */
.rh-leiste {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 8px 6px 18px; border-radius: 999px; justify-self: start;
  background: var(--rh-card); border: 1px solid var(--rh-edge);
  box-shadow: var(--rh-card-shadow); backdrop-filter: var(--rh-glass);
}
.rh-marke { font: 400 18px/1 var(--rh-display); letter-spacing: 0.02em; margin-right: 10px; }
.rh-tab {
  padding: 8px 16px; border-radius: 999px; font-size: 13.5px; color: var(--rh-ink2);
  cursor: pointer; list-style: none; transition: background 0.15s;
}
.rh-tab::-webkit-details-marker { display: none; }
.rh-tab:hover { background: rgba(255, 255, 255, 0.6); }
.rh-tab[data-on="true"] { background: #0a0a0a; color: var(--rh-signal); box-shadow: 0 6px 18px rgba(10, 10, 10, 0.22); }
.rh-mehr { position: relative; }
.rh-mehr[open] > .rh-tab { background: rgba(255, 255, 255, 0.7); }
.rh-mehr-liste {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 220px;
  display: grid; padding: 6px; border-radius: 18px;
  background: var(--rh-card2); border: 1px solid var(--rh-edge); box-shadow: var(--rh-shadow); backdrop-filter: var(--rh-glass);
}
.rh-mehr-liste a { padding: 9px 14px; border-radius: 12px; font-size: 13.5px; }
.rh-mehr-liste a:hover { background: rgba(10, 10, 10, 0.06); }

/* ── Kopfleiste wie Putzi: Hallo · Reiter · Riss ───────────────────────── */
.rh-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rh-hallo { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.rh-hallo b { display: block; font-size: 14px; }
.rh-hallo span { display: block; font-size: 12px; color: var(--rh-mut); }
.rh-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.1) 36%, transparent 54%),
    radial-gradient(circle at 50% 60%, #f39a63, #e8743b 72%);
  box-shadow: 0 6px 16px rgba(232, 116, 59, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.rh-kopf .rh-leiste { padding: 5px; }
.rh-riss {
  position: relative; flex: 1 1 320px; max-width: 480px; margin-left: auto;
  display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px;
  background: var(--rh-card); border: 1px solid var(--rh-edge); box-shadow: var(--rh-card-shadow); backdrop-filter: var(--rh-glass);
}
.rh-riss input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--rh-ink); font: inherit; font-size: 14px; }
.rh-riss input::-moz-placeholder { color: var(--rh-mut); }
.rh-riss input::placeholder { color: var(--rh-mut); }
.rh-riss-treffer {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  display: grid; padding: 6px; border-radius: 18px;
  background: var(--rh-card2); border: 1px solid var(--rh-edge); box-shadow: var(--rh-shadow); backdrop-filter: var(--rh-glass);
}
.rh-riss-treffer button {
  display: flex; gap: 10px; align-items: baseline; border: 0; background: transparent; text-align: left;
  padding: 9px 12px; border-radius: 12px; font: inherit; font-size: 13.5px; color: var(--rh-ink); cursor: pointer;
}
.rh-riss-treffer button:hover, .rh-riss-treffer button:first-child { background: rgba(10, 10, 10, 0.06); }
.rh-riss-treffer small { margin-left: auto; font-size: 11.5px; color: var(--rh-mut); }
.rh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Kopf ──────────────────────────────────────────────────────────────── */
.rh-top { display: grid; gap: 6px; }
.rh-kick { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rh-mut); }
.rh-top h1 { font: 400 46px/1 var(--rh-display); text-transform: uppercase; letter-spacing: 0.005em; }
.rh-sub { color: var(--rh-mut); font-size: 14px; }
.rh-ask {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; border-radius: 999px;
  background: var(--rh-card); border: 1px solid var(--rh-edge);
  box-shadow: var(--rh-card-shadow);
  color: var(--rh-ink2); font-size: 13.5px;
  transition: background 0.15s;
}
.rh-ask:hover { background: var(--rh-card2); }
.rh-orb { width: 16px; height: 16px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff, #b79cff 45%, #6a5cff); }

/* ── Abschnitte ────────────────────────────────────────────────────────── */
.rh-abschnitt { display: grid; gap: 14px; }
.rh-sec { display: flex; align-items: baseline; gap: 10px; }
.rh-sec h2 {
  font: 400 15px/1 var(--rh-display); letter-spacing: 0.04em; text-transform: uppercase;
  padding-left: 12px; border-left: 3px solid var(--rh-ink);
}
.rh-sec .rh-hint { margin-left: auto; font-size: 12px; color: var(--rh-mut); }

/* ── Bausteine ─────────────────────────────────────────────────────────── */
.rh-badge {
  font: 500 12px/1 var(--rh-sans); padding: 4px 6px; flex: none;
  background: #0a0a0a; color: #fff;
}
.rh-label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rh-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-pill {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600; line-height: 1.3;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--rh-sel); color: var(--rh-ink2);
}
.rh-pill[data-ton="jetzt"] { background: var(--rh-accent-tint); color: var(--rh-accent); }
.rh-pill[data-ton="laeuft"], .rh-pill[data-ton="wartet"] { background: var(--rh-warn-tint); color: var(--rh-warn); }
.rh-pill[data-ton="unbekannt"] { background: var(--rh-bad-tint); color: var(--rh-bad); }
.rh-pill[data-ton="gut"] { background: var(--rh-good-tint); color: var(--rh-good); }
.rh-btn {
  border: 1px solid #0a0a0a; border-radius: 999px; padding: 9px 18px;
  font: 600 13px var(--rh-sans); background: #0a0a0a; color: var(--rh-signal);
  cursor: pointer; white-space: nowrap; transition: transform 0.1s, opacity 0.15s;
  box-shadow: 0 6px 18px rgba(10, 10, 10, 0.22);
  --ink: var(--rh-signal);
}
.rh-btn:active { transform: scale(0.97); }
.rh-btn:disabled { opacity: 0.45; cursor: default; }
.rh-btn--q { background: var(--rh-card); color: var(--rh-ink); border-color: var(--rh-edge); box-shadow: var(--rh-card-shadow); --ink: var(--rh-ink); }
.rh-btn--q:hover { background: var(--rh-card2); }
.rh-btn--s { padding: 5px 12px; font-size: 12px; }

/* ── Fokus heute: die eine schwarze Kachel ─────────────────────────────── */
.rh-fokus {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  border-radius: 20px;
  background: #0a0a0a;
  color: #fff;
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.22);
  overflow: hidden;
  min-height: 220px;
  --ink: #fff;
}
.rh-fokus .rh-badge { background: var(--rh-signal); color: #0a0a0a; }
.rh-fokus .rh-label { color: rgba(255, 255, 255, 0.72); }
.rh-fokus-main { padding: 22px 24px; display: grid; gap: 14px; align-content: start; }
.rh-fokus-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rh-fokus-kopf .rh-pill { margin-left: auto; background: rgba(233, 245, 160, 0.14); color: var(--rh-signal); }
.rh-fokus h2 { font: 400 30px/1.08 var(--rh-display); text-transform: uppercase; color: var(--rh-signal); text-wrap: balance; max-width: 26ch; }
.rh-einstieg { font-size: 14px; color: rgba(255, 255, 255, 0.82); max-width: 60ch; }
.rh-einstieg b { font-weight: 600; color: #fff; margin-right: 6px; }
.rh-leer { font-size: 15px; color: rgba(255, 255, 255, 0.72); max-width: 46ch; }
.rh-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rh-fokus .rh-btn { background: var(--rh-signal); color: #0a0a0a; border-color: var(--rh-signal); --ink: #0a0a0a; box-shadow: none; }
.rh-fokus .rh-btn--q { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.28); --ink: #fff; }
.rh-fokus .rh-btn--q:hover { background: rgba(255, 255, 255, 0.1); }
.rh-fokus-danach { padding: 22px 22px 18px; display: grid; gap: 4px; align-content: start; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.rh-fokus-danach .rh-label { padding: 0 6px 8px; }
.rh-todo-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px; border-radius: 10px; cursor: pointer; }
.rh-todo-row:hover { background: rgba(255, 255, 255, 0.07); }
.rh-todo-row input { margin-top: 2px; width: 15px; height: 15px; flex: none; accent-color: var(--rh-signal); cursor: pointer; }
.rh-todo-row .rh-tx { min-width: 0; font-size: 13.5px; }
.rh-todo-row .rh-tx span { display: block; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-top: 2px; }

/* ── Hero wie Smart Care: Hauptknopf links, Kacheln daneben ─────────────── */
.rh-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 14px; }
.rh-hero > .rh-kachel { order: 1; }
.rh-haupt {
  order: 0; grid-row: span 2; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  min-height: 340px; padding: 22px; border-radius: 24px;
  background: #0a0a0a; color: #fff; box-shadow: 0 12px 32px rgba(10, 10, 10, 0.25);
  --ink: #fff;
}
.rh-haupt .rh-badge { background: var(--rh-signal); color: #0a0a0a; }
.rh-haupt .rh-label { color: rgba(255, 255, 255, 0.72); }
.rh-haupt-kopf { align-self: stretch; display: flex; align-items: center; gap: 10px; }
.rh-haupt-link { margin-left: auto; border: 0; background: transparent; color: rgba(255, 255, 255, 0.6); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rh-haupt-titel { font: 400 26px/1.05 var(--rh-display); text-transform: uppercase; color: var(--rh-signal); max-width: 22ch; text-wrap: balance; }
.rh-haupt-sub { font-size: 13px; color: rgba(255, 255, 255, 0.7); max-width: 40ch; }
.rh-orb-knopf {
  width: 150px; height: 150px; border-radius: 50%; border: 0; margin: 10px 0; cursor: pointer;
  font: 400 22px var(--rh-display); text-transform: uppercase; color: #0a0a0a; --ink: #0a0a0a;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.12) 34%, transparent 52%),
    radial-gradient(circle at 50% 60%, #f4fbc4, #e9f5a0 62%, #c9d97a);
  box-shadow: 0 18px 44px rgba(233, 245, 160, 0.28), inset 0 -12px 26px rgba(80, 90, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.rh-orb-knopf:hover { transform: scale(1.04); }
.rh-orb-knopf[data-laeuft="true"] { animation: rh-puls 1.4s ease-in-out infinite; }
@keyframes rh-puls { 50% { transform: scale(0.95); } }
.rh-befunde { align-self: stretch; display: grid; gap: 6px; text-align: left; }
.rh-befund { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); font-size: 13.5px; }
.rh-befund > span { min-width: 0; }
.rh-befund b { font-weight: 600; color: var(--rh-signal); margin-right: 4px; }
.rh-befund-knopf {
  margin-left: auto; flex: none; border: 0; border-radius: 999px; padding: 6px 13px; cursor: pointer;
  font: 600 12px var(--rh-sans); background: var(--rh-signal); color: #0a0a0a; --ink: #0a0a0a;
}
.rh-befund-knopf:disabled { opacity: 0.5; }
.rh-haupt.rh-geruest .rh-bar { background: rgba(255, 255, 255, 0.1); width: 70%; }

/* Danach + Aktionsleiste wie bei Putzi */
.rh-danach { order: 2; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 8px; min-width: 0; }
.rh-danach-liste { padding: 6px 12px; }
.rh-danach .rh-todo-row:hover { background: var(--rh-sel); }
.rh-danach .rh-todo-row input { accent-color: #0a0a0a; }
.rh-danach .rh-todo-row .rh-tx span { color: var(--rh-mut); }
.rh-dock {
  position: fixed; z-index: 40; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(16px); opacity: 0; pointer-events: none; transition: 0.25s;
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 18px; border-radius: 999px; white-space: nowrap;
  background: var(--rh-card2); border: 1px solid var(--rh-edge); box-shadow: var(--rh-shadow); backdrop-filter: var(--rh-glass); font-size: 13.5px;
}
.rh-dock[data-zeigen="true"] { opacity: 1; pointer-events: auto; transform: translateX(-50%); }

/* ── Kacheln (auf einen Blick, Projekte) ───────────────────────────────── */
.rh-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rh-kacheln--raeume { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Raum: ein Ort mit Namen, nicht ein Listeneintrag */
.rh-raum { min-height: 230px; gap: 12px; }
.rh-raum-name { font: 400 28px/1.02 var(--rh-display); text-transform: uppercase; letter-spacing: 0.01em; }
.rh-raum .rh-wert { font-size: 34px; }
.rh-tuer {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 16px; border-radius: 16px;
  background: var(--rh-card); border: 1px solid var(--rh-edge); box-shadow: var(--rh-card-shadow);
  font: 400 15px/1 var(--rh-display); text-transform: uppercase; letter-spacing: 0.02em;
  transition: background 0.15s;
}
.rh-tuer small { font: 400 11.5px var(--rh-sans); text-transform: none; color: var(--rh-mut); }
.rh-tuer:hover { background: var(--rh-card2); }
.rh-kachel {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start;
  padding: 18px 18px 14px; border-radius: 20px;
  background: var(--rh-card); border: 1px solid var(--rh-edge);
  box-shadow: var(--rh-card-shadow);
  backdrop-filter: blur(24px) saturate(160%);
  transition: transform 0.15s, background 0.15s;
  min-width: 0;
}
a.rh-kachel:hover { background: var(--rh-card2); transform: translateY(-2px); }
.rh-kachel-kopf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rh-kachel-kopf .rh-pill { margin-left: auto; }
.rh-wert { font: 400 46px/1 var(--rh-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rh-wert-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rh-wert-zeile .rh-pill { margin-left: auto; }
.rh-wert small { font-size: 15px; letter-spacing: 0; color: var(--rh-mut); }
.rh-kachel-fuss {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.5); border: 1px solid var(--rh-line);
  font-size: 12.5px; color: var(--rh-ink2); min-width: 0;
}
.rh-kachel-fuss span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-kachel-fuss span:last-child { margin-left: auto; flex: none; }
.rh-ruhig { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Aufträge-Liste ────────────────────────────────────────────────────── */
.rh-card {
  background: var(--rh-card); border: 1px solid var(--rh-edge); border-radius: 20px;
  box-shadow: var(--rh-card-shadow);
  backdrop-filter: blur(24px) saturate(160%);
}
.rh-list { padding: 4px 0; min-width: 0; }
.rh-list-hd { display: flex; align-items: center; gap: 8px; padding: 12px 18px 8px; }
.rh-list-hd h2 { font: 400 15px/1 var(--rh-display); letter-spacing: 0.04em; text-transform: uppercase; padding-left: 12px; border-left: 3px solid var(--rh-ink); }
.rh-list-hd .rh-pill { margin-left: auto; }
.rh-li { border-top: 1px solid var(--rh-line); }
.rh-li-row { display: flex; gap: 10px; align-items: center; padding: 10px 18px; }
.rh-li-tx { min-width: 0; flex: 1; }
.rh-li-tx p { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-li-tx span { font-size: 12px; color: var(--rh-mut); }
.rh-li details > summary { list-style: none; cursor: pointer; }
.rh-li details > summary::-webkit-details-marker { display: none; }
.rh-li-body { padding: 0 18px 12px; font-size: 13px; color: var(--rh-ink2); display: grid; gap: 8px; }
.rh-li-body pre { white-space: pre-wrap; font: 12px/1.5 ui-monospace, Menlo, monospace; max-height: 260px; overflow: auto; margin: 0; color: var(--rh-mut); }
.rh-more { border-top: 1px solid var(--rh-line); }
.rh-more > summary { padding: 10px 18px; font-size: 12.5px; color: var(--rh-mut); cursor: pointer; }
.rh-leerzeile { padding: 10px 18px 14px; font-size: 13px; color: var(--rh-mut); }

/* ── Mehr: die bisherigen Flächen, eingeklappt ─────────────────────────── */
.rh-fold { border-top: 1px solid var(--rh-line); padding-top: 4px; }
.rh-fold > summary { cursor: pointer; padding: 10px 2px; font-size: 13px; color: var(--rh-mut); }
.rh-fold > summary:hover { color: var(--rh-ink); }
.rh-fold-body { display: grid; gap: 16px; padding-top: 8px; }

/* ── Platzhalter beim Laden — dieselbe Form wie die echten Flächen ─────── */
.rh-geruest .rh-bar { display: block; height: 12px; border-radius: 999px; background: var(--rh-sel); animation: rh-atmen 1.6s ease-in-out infinite; }
.rh-fokus.rh-geruest .rh-bar { background: rgba(255, 255, 255, 0.1); }
.rh-geruest .rh-bar--gross { height: 30px; width: 80%; }
.rh-geruest .rh-bar--zahl { height: 46px; width: 40%; }
@keyframes rh-atmen { 50% { opacity: 0.45; } }

@media (max-width: 1180px) {
  .rh-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-haupt { grid-column: 1 / -1; grid-row: auto; }
  .rh-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-kacheln--raeume { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rh-stage { margin: 0; border-radius: 0; padding: 64px 16px 130px; }
  .rh-fokus { grid-template-columns: minmax(0, 1fr); }
  .rh-fokus-danach { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .rh-ask { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  .rh-hero { grid-template-columns: minmax(0, 1fr); }
  .rh-riss { max-width: none; margin-left: 0; }
  .rh-kacheln, .rh-kacheln--raeume { grid-template-columns: minmax(0, 1fr); }
  .rh-top h1 { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .rh * { transition: none !important; animation: none !important; }
}

/* ── Uhr rechts in der Kopfleiste ─────────────────────────────────────── */
.rh-uhr { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; min-width: 64px; margin-right: 46px; /* Platz für die Glocke */ }
.rh-uhr b { font: 400 22px/1 var(--rh-display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.rh-uhr span { font-size: 11.5px; color: var(--rh-mut); }
.rh-hallo:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ── Dieselbe Leiste auf allen anderen Seiten, oben angeheftet ─────────── */
.rh.rh--leiste-oben { min-height: 0; position: sticky; top: 0; z-index: 40; padding: 10px 12px 0; }
.rh-kopf-oben {
  max-width: 1240px; margin: 0 auto; padding: 10px 16px; border-radius: 24px;
  background: var(--rh-panel); border: 1px solid var(--rh-edge); box-shadow: var(--rh-shadow), inset 0 1px 0 var(--rh-edge); backdrop-filter: var(--rh-glass);
}
/* Im schmalen AUREL-Panel der Menüleiste (460 px) keine Leiste — dort zählt nur AUREL. */
@media (max-width: 620px) {
  .rh.rh--leiste-oben { display: none; }
  .rh-uhr { display: none; }
}

/* ── AUREL als lebende Kugel im Herzen von Heute ──────────────────────── */
.rh-aurel-kugel {
  border: 0; padding: 0; margin: 4px 0; background: transparent; cursor: pointer; line-height: 0;
  border-radius: 50%; transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.rh-aurel-kugel:hover:not(:disabled) { transform: scale(1.05); }
.rh-aurel-kugel:disabled { cursor: progress; }
.rh-aurel-kugel { position: relative; }
.rh-aurel-meldung {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; font: 600 12px/1 var(--rh-sans); letter-spacing: 0.01em;
  color: var(--rh-ink); background: var(--rh-card2); border: 1px solid var(--rh-edge); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18); backdrop-filter: var(--rh-glass);
}
.rh-haupt-status { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.rh-haupt-status::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle;
  background: var(--rh-signal); box-shadow: 0 0 0 3px rgba(233, 245, 160, 0.18); animation: rh-wach 2.4s ease-in-out infinite;
}
@keyframes rh-wach { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .rh-haupt-status::before { animation: none; } }

/* ── Glasbühne für alle Unterseiten — dasselbe Material wie Home ──────── */
.rr-seiten-buehne {
  position: relative;
  isolation: isolate;
  max-width: 1240px;
  width: calc(100% - 24px);
  margin: 12px auto 18px;
  padding: 18px 20px 120px;
  border-radius: 30px;
  min-height: calc(100dvh - 120px);
}
.rr-seiten-buehne::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 22px 60px rgba(20, 22, 40, 0.16), 0 2px 8px rgba(20, 22, 40, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(36px) saturate(175%);
}
@media (max-width: 620px) {
  .rr-seiten-buehne { width: 100%; margin: 0; border-radius: 0; padding: 12px 12px 120px; }
}

/* ══════════════════════════════════════════════════════════════════════
   PUTZI-MATERIAL (29.10., Max: „neben Putzi sieht RAUMRISS aus wie ein
   Kindertool"). Werte 1:1 aus 05_PERSONAL_OS/mac-aufraeumer/ui.html:
   System-Schrift, 40 px Glas, Hell/Dunkel folgt dem Mac, in der Mac-App
   neutrales, sehr durchsichtiges Glas. Keine Plakatschrift, keine
   Versalien, kein Schwarz-Gelb — Akzent ist Putzis warmes Orange.
   Steht bewusst am Ende: überschreibt die SITE-FX-Werte darüber.
   ══════════════════════════════════════════════════════════════════════ */
.rh {
  --rh-ink: #1d1914;
  --rh-ink2: rgba(40, 30, 20, 0.78);
  --rh-mut: rgba(40, 30, 20, 0.56);
  --rh-line: rgba(60, 40, 20, 0.1);
  --rh-sel: rgba(60, 40, 20, 0.07);
  --rh-card: rgba(255, 251, 246, 0.42);
  --rh-card2: rgba(255, 253, 250, 0.74);
  --rh-panel: rgba(236, 228, 218, 0.34);
  --rh-edge: rgba(255, 255, 255, 0.62);
  --rh-shadow: 0 24px 70px rgba(60, 40, 20, 0.2), 0 2px 8px rgba(60, 40, 20, 0.08);
  --rh-card-shadow: 0 8px 30px rgba(60, 40, 20, 0.1), inset 0 1px 0 var(--rh-edge);
  --rh-glass: blur(40px) saturate(170%);
  --rh-accent: #e8743b;
  --rh-dunkel: #26221e;
  --rh-signal: var(--rh-accent);
  --rh-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --rh-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font: 13.5px/1.45 var(--rh-sans);
  -webkit-font-smoothing: antialiased;
}
@media (min-width:0px) {
  .rh {
    --rh-ink: #f4eee8;
    --rh-ink2: rgba(244, 238, 232, 0.82);
    --rh-mut: rgba(240, 228, 214, 0.58);
    --rh-line: rgba(255, 240, 220, 0.1);
    --rh-sel: rgba(255, 240, 220, 0.09);
    --rh-card: rgba(40, 32, 26, 0.46);
    --rh-card2: rgba(80, 66, 56, 0.62);
    --rh-panel: rgba(30, 24, 20, 0.4);
    --rh-edge: rgba(255, 240, 225, 0.14);
    --rh-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
    --rh-card-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 var(--rh-edge);
    --rh-accent: #f08a52;
    --rh-dunkel: #f4eee8;
  }
}
/* In der Mac-App: neutrales, sehr durchsichtiges Glas — der Schreibtisch bestimmt die Farbe. */
html.rr-native .rh {
  --rh-card: rgba(255, 255, 255, 0.3);
  --rh-card2: rgba(255, 255, 255, 0.58);
  --rh-panel: rgba(255, 255, 255, 0.16);
  --rh-edge: rgba(255, 255, 255, 0.55);
  --rh-shadow: 0 14px 40px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  --rh-ink: #151515;
  --rh-mut: rgba(20, 20, 25, 0.62);
  --rh-line: rgba(0, 0, 0, 0.08);
  --rh-sel: rgba(0, 0, 0, 0.06);
}
@media (min-width:0px) {
  html.rr-native .rh {
    --rh-card: rgba(30, 30, 34, 0.34);
    --rh-card2: rgba(60, 60, 68, 0.55);
    --rh-panel: rgba(20, 20, 24, 0.2);
    --rh-edge: rgba(255, 255, 255, 0.14);
    --rh-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    --rh-ink: #f3f3f5;
    --rh-mut: rgba(235, 235, 245, 0.62);
    --rh-line: rgba(255, 255, 255, 0.1);
    --rh-sel: rgba(255, 255, 255, 0.08);
  }
}
.rh { --ink: var(--rh-ink); color: var(--rh-ink); }

/* Schrift: wie Putzi — normal geschrieben, fett statt Plakat. */
.rh :is(.rh-top h1, .rh-haupt-titel, .rh-fokus h2, .rh-raum-name, .rh-list-hd h2, .rh-marke, .rh-uhr b) {
  font-family: var(--rh-display); text-transform: none; letter-spacing: -0.02em;
}
.rh .rh-top h1 { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.8px; }
.rh .rh-kick { letter-spacing: 0; text-transform: none; font-weight: 600; }
.rh :is(.rh-label, .rh-todo-row .rh-tx span) { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12.5px; color: var(--rh-mut); }
.rh .rh-raum-name { font-size: 19px; font-weight: 700; }
.rh .rh-list-hd h2 { font-size: 15px; font-weight: 700; border-left: 0; padding-left: 0; }
.rh .rh-uhr b { font-size: 17px; font-weight: 600; }

/* Pillen: aktiver Reiter dunkel wie Putzis Knöpfe, nicht schwarz-gelb. */
.rh .rh-tab[data-on="true"] { background: var(--rh-dunkel); color: var(--rh-card2); box-shadow: none; }
.rh .rh-tab { color: var(--rh-ink2); font-weight: 500; }
.rh .rh-tab:hover { background: var(--rh-sel); }
.rh .rh-avatar { background: radial-gradient(circle at 35% 30%, #4a423a, #1f1a15); box-shadow: 0 3px 10px rgba(40, 25, 10, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18); }

/* Herz von Heute: Glas statt Schwarz — wie Putzis Hero. */
.rh .rh-haupt {
  background: var(--rh-card); color: var(--rh-ink); --ink: var(--rh-ink);
  border: 1px solid var(--rh-edge); box-shadow: var(--rh-card-shadow); border-radius: 26px; backdrop-filter: var(--rh-glass);
}
.rh .rh-haupt :is(.rh-label, .rh-haupt-sub, .rh-haupt-status, .rh-haupt-link) { color: var(--rh-mut); }
.rh .rh-haupt-titel { color: var(--rh-ink); font-size: 22px; font-weight: 700; }
.rh .rh-haupt-status::before { background: var(--rh-accent); box-shadow: 0 0 0 3px var(--rh-sel); }
.rh .rh-befund { background: var(--rh-sel); }
.rh .rh-befund b { color: var(--rh-accent); }
.rh .rh-befund-knopf { background: var(--rh-dunkel); color: var(--rh-card2); --ink: var(--rh-card2); border: 0; }
.rh .rh-badge { display: none; }

/* Fokus-Kachel und Listen: Glas, kein Schwarz. */
.rh .rh-fokus { background: var(--rh-card); color: var(--rh-ink); --ink: var(--rh-ink); border: 1px solid var(--rh-edge); box-shadow: var(--rh-card-shadow); }
.rh .rh-fokus h2 { color: var(--rh-ink); font-size: 20px; font-weight: 700; }
.rh .rh-fokus .rh-btn { background: var(--rh-dunkel); color: var(--rh-card2); border-color: transparent; --ink: var(--rh-card2); }
.rh .rh-fokus-kopf .rh-pill { background: var(--rh-sel); color: var(--rh-ink2); }
.rh :is(.rh-todo-row input, .rh-danach .rh-todo-row input) { accent-color: var(--rh-accent); }

/* Kacheln: Putzi-Maße — kleine graue Überschrift, Zahl 23–30 px, fett. */
.rh .rh-kachel { border-radius: 22px; background: var(--rh-card); border: 1px solid var(--rh-edge); box-shadow: var(--rh-card-shadow); }
.rh .rh-wert { font: 700 30px/1.1 var(--rh-display); letter-spacing: -1px; }
.rh .rh-raum .rh-wert { font-size: 26px; }
.rh .rh-kachel-fuss { color: var(--rh-mut); font-size: 11.5px; }
.rh .rh-kachel:hover { transform: translateY(-2px); }

/* Bühnen: Putzis Panel. */
.rh .rh-stage::before { border-radius: 34px; }
.rr-seiten-buehne::before, .rh-kopf-oben {
  background: var(--rh-panel, rgba(236, 228, 218, 0.34));
}

/* ── Feedback 29.10. abends: lesbar im Dunkeln, Kopf neu geordnet ─────── */
.rh { --rh-auf-dunkel: #ffffff; }
@media (min-width:0px) { .rh { --rh-auf-dunkel: #1d1914; } }
/* Text auf den dunklen/hellen Knöpfen deckend statt halbdurchsichtig. */
.rh .rh-tab[data-on="true"],
.rh .rh-befund-knopf,
.rh .rh-fokus .rh-btn { color: var(--rh-auf-dunkel); --ink: var(--rh-auf-dunkel); }
/* Kachel-Fuß: getöntes Glas statt heller Pille mit grauer Schrift. */
.rh .rh-kachel-fuss { background: var(--rh-sel); border-color: var(--rh-line); color: var(--rh-ink2); }
.rh .rh-haupt-sub, .rh .rh-sub { color: var(--rh-ink2); }

/* Kopf: links AUREL + Max, Reiter in der Mitte, Uhr rechts. */
.rh .rh-kopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.rh .rh-kopf .rh-leiste { justify-self: center; }
.rh .rh-uhr { justify-self: end; }
.rh-kopf-kugel { display: flex; width: 36px; height: 36px; flex: none; }
@media (max-width: 900px) {
  .rh .rh-kopf { grid-template-columns: 1fr auto; }
  .rh .rh-kopf .rh-leiste { grid-column: 1 / -1; grid-row: 2; }
}

/* Eigene Seiten im Home-Material (z. B. /raeume) — liegen schon auf der Glasbühne. */
.rh.rh--seite { min-height: 0; display: grid; gap: 26px; padding: 8px 12px 0; }

/* ══════════════════════════════════════════════════════════════════════
   PUTZI-MATERIAL FÜR ALLE UNTERSEITEN (29.10., „weiter")
   Eingang, die Räume, Lage, Werkstatt … laufen noch auf den alten,
   hellen Farb-Variablen. Statt jede Seite umzubauen, setzt die Glasbühne
   diese Variablen für alles in ihr auf Putzis Werte — hell, dunkel und in
   der Mac-App. Die Seiten selbst bleiben unverändert.
   ══════════════════════════════════════════════════════════════════════ */
.rr-seiten-buehne {
  --pz-fg: #1d1914; --pz-fg2: rgba(40, 30, 20, 0.78); --pz-mut: rgba(40, 30, 20, 0.56);
  --pz-line: rgba(60, 40, 20, 0.1); --pz-sel: rgba(60, 40, 20, 0.07);
  --pz-card: rgba(255, 251, 246, 0.42); --pz-card2: rgba(255, 253, 250, 0.74);
  --pz-panel: rgba(236, 228, 218, 0.34); --pz-edge: rgba(255, 255, 255, 0.62);
  --pz-accent: #e8743b;
}
@media (min-width:0px) {
  .rr-seiten-buehne {
    --pz-fg: #f4eee8; --pz-fg2: rgba(244, 238, 232, 0.82); --pz-mut: rgba(240, 228, 214, 0.6);
    --pz-line: rgba(255, 240, 220, 0.1); --pz-sel: rgba(255, 240, 220, 0.09);
    --pz-card: rgba(40, 32, 26, 0.46); --pz-card2: rgba(80, 66, 56, 0.62);
    --pz-panel: rgba(30, 24, 20, 0.4); --pz-edge: rgba(255, 240, 225, 0.14);
    --pz-accent: #f08a52;
  }
}
html.rr-native .rr-seiten-buehne {
  --pz-fg: #151515; --pz-mut: rgba(20, 20, 25, 0.62); --pz-line: rgba(0, 0, 0, 0.08); --pz-sel: rgba(0, 0, 0, 0.06);
  --pz-card: rgba(255, 255, 255, 0.3); --pz-card2: rgba(255, 255, 255, 0.58); --pz-panel: rgba(255, 255, 255, 0.16); --pz-edge: rgba(255, 255, 255, 0.55);
}
@media (min-width:0px) {
  html.rr-native .rr-seiten-buehne {
    --pz-fg: #f3f3f5; --pz-fg2: rgba(243, 243, 245, 0.82); --pz-mut: rgba(235, 235, 245, 0.62);
    --pz-line: rgba(255, 255, 255, 0.1); --pz-sel: rgba(255, 255, 255, 0.08);
    --pz-card: rgba(30, 30, 34, 0.34); --pz-card2: rgba(60, 60, 68, 0.55); --pz-panel: rgba(20, 20, 24, 0.2); --pz-edge: rgba(255, 255, 255, 0.14);
  }
}
/* Die alten Namen zeigen jetzt auf Putzis Werte. */
.rr-seiten-buehne {
  --ink: var(--pz-fg);
  --ds-ink: var(--pz-fg); --ds-ink-soft: var(--pz-fg2);
  --text-primary: var(--pz-fg); --text-secondary: var(--pz-fg2); --text-muted: var(--pz-mut);
  --rr-text: var(--pz-fg); --rr-text-title: var(--pz-fg); --rr-text-body: var(--pz-fg2); --rr-text-soft: var(--pz-fg2); --rr-text-muted: var(--pz-mut);
  --surface-divider: var(--pz-line); --surface-border: var(--pz-edge); --surface-highlight: var(--pz-sel);
  --sf-edge: var(--pz-edge); --sf-surface: var(--pz-card); --sf-surface-lift: var(--pz-card2);
  --rr-line: var(--pz-line); --rr-line-soft: var(--pz-line); --rr-border: var(--pz-line); --rr-glass-border: var(--pz-edge);
  --rr-operative-divider: var(--pz-line); --os-divider: var(--pz-line);
  --rr-room-surface: var(--pz-card); --rr-surface: var(--pz-card); --rr-surface-raised: var(--pz-card); --rr-surface-elevated: var(--pz-card2);
  --rr-work-elevated: var(--pz-card); --rr-paper-aged: var(--pz-card); --rr-chamber-recess: var(--pz-sel);
  --os-material-chamber-embedded: var(--pz-sel);
  --rr5-glas: var(--pz-card); --rr5-kachel: var(--pz-card);
  --rr-orange: var(--pz-accent);
  color: var(--pz-fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}
.rr-seiten-buehne::before { background: var(--pz-panel); border-color: var(--pz-edge); }
.rr-seiten-buehne :is(h1, h2, h3) { color: var(--pz-fg); }
.rr-seiten-buehne { --text-faint: var(--pz-mut); }
/* Die häufigsten alten Flächen und Felder direkt ins Glas — Eingang,
   Raum-Panels, Kacheln. */
.rr-seiten-buehne :is(.home-capture-panel, .environment-capture-panel, .rr-panel, .rr-tile, .rr-card) {
  background: var(--pz-card) !important;
  border-color: var(--pz-edge) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), inset 0 1px 0 var(--pz-edge) !important;
  color: var(--pz-fg);
}
.rr-seiten-buehne :is(textarea, input[type="text"], .ideas-draft) {
  background: var(--pz-sel) !important;
  border-color: var(--pz-line) !important;
  color: var(--pz-fg) !important;
}
.rr-seiten-buehne :is(textarea, input)::-moz-placeholder { color: var(--pz-mut) !important; }
.rr-seiten-buehne :is(textarea, input)::placeholder { color: var(--pz-mut) !important; }

.rh-mehr-abmelden {
  margin-top: 4px; padding: 9px 14px; border: 0; border-top: 1px solid var(--rh-line); border-radius: 0 0 12px 12px;
  background: transparent; color: var(--rh-mut); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.rh-mehr-abmelden:hover { color: var(--rh-ink); background: var(--rh-sel); }
/* Aufklapp-Menüs liegen über Inhalt — ohne Weichzeichner (Mac-App) brauchen sie Deckkraft. */
.rh .rh-mehr-liste { background: rgba(255, 253, 250, 0.94); }
@media (min-width:0px) { .rh .rh-mehr-liste { background: rgba(38, 36, 40, 0.94); } }

/* ── Echtzeit-Gespräch mit AUREL ─────────────────────────────────────── */
.rh .rh-gespraech { align-self: stretch; display: grid; gap: 6px; text-align: center; }
.rh .rh-gespraech-status { font-size: 12.5px; color: var(--rh-mut); }
.rh .rh-gespraech-zeile { font-size: 15px; line-height: 1.45; color: var(--rh-ink); }
.rh .rh-gespraech-zeile[data-wer="max"] { color: var(--rh-mut); font-style: italic; }
.rh .rh-aurel-kugel[data-gespraech="hoert"],
.rh .rh-aurel-kugel[data-gespraech="spricht"] { transform: scale(1.06); }
.rh .rh-stimme { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rh-mut); }
.rh .rh-stimme select {
  font: inherit; font-size: 12px; color: var(--rh-ink); background: var(--rh-sel);
  border: 1px solid var(--rh-line); border-radius: 999px; padding: 4px 10px;
}

/* AUREL auf Heute: die Sphäre schwebt frei auf dem Liquid Glass — keine
   Karte, kein Grund dahinter (Max, 29.10.). Texte im Glas-Ton der Seite. */
.rh .rh-haupt { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; color: var(--rh-ink); --ink: var(--rh-ink); }
.rh .rh-haupt :is(.rh-label, .rh-haupt-sub, .rh-haupt-status, .rh-haupt-link) { color: var(--rh-mut); }
.rh .rh-haupt-titel { color: var(--rh-ink); }
.rh .rh-haupt-status::before { background: var(--rh-ink); box-shadow: 0 0 0 3px var(--rh-sel); }
.rh .rh-befund { background: var(--rh-card); border: 1px solid var(--rh-edge); color: var(--rh-ink); }
.rh .rh-befund b { color: var(--rh-ink); font-weight: 700; }
.rh .rh-befund-knopf { background: var(--rh-dunkel); color: var(--rh-auf-dunkel); --ink: var(--rh-auf-dunkel); }
.rh .rh-aurel-kugel { line-height: 0; border-radius: 50%; }
.rh .rh-gespraech { align-self: stretch; display: grid; gap: 8px; text-align: left; }
.rh .rh-gespraech-status { text-align: center; font-size: 13px; color: #c9a8ff; }
.rh .rh-gespraech-status span { color: var(--rh-mut); }
.rh .rh-aurel-karte { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--rh-card); border: 1px solid var(--rh-edge); animation: rh-karte-ein 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.rh .rh-aurel-karte b { font: 600 11px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rh-mut); }
.rh .rh-aurel-karte span { font-size: 13.5px; color: var(--rh-ink); }
.rh .rh-aurel-karte-zahl { font-size: 22px !important; font-weight: 600; }
.rh .rh-aurel-karte-zahl small { font-size: 12px; font-weight: 400; color: var(--rh-mut); }
@keyframes rh-karte-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rh .rh-protokoll { max-height: 220px; overflow-y: auto; display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--rh-card); border: 1px solid var(--rh-edge); font-size: 13px; }
.rh .rh-protokoll p { margin: 0; color: var(--rh-ink); }
.rh .rh-protokoll p[data-wer="max"] { color: var(--rh-mut); }
.rh .rh-protokoll b { font: 500 10.5px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rh-mut); margin-right: 6px; }

/* ── Prioritäten (Räume-Seite) ─────────────────────────────────────────
   Max, 29.10.: „öffnet sich so ein ganz komisches Feld … sieht falsch aus".
   Neutrale, durchscheinende Flächen statt weißer Formularfelder — lesbar
   hell wie dunkel. Wochenfokus als Raum-Chips statt Auswahlliste. */
.rp {
  --rp-fl: rgba(127, 127, 127, 0.12); --rp-fl2: rgba(127, 127, 127, 0.22); --rp-kante: rgba(127, 127, 127, 0.22);
  display: grid; gap: 18px; padding: 22px 24px; margin-bottom: 26px; border-radius: 26px; color: var(--rh-ink);
  background: var(--rh-card); border: 1px solid var(--rh-edge); box-shadow: var(--rh-card-shadow);
}
.rp-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rp-kopf--liste { padding-top: 14px; border-top: 1px solid var(--rp-kante); }
.rp-kick { font: 700 15px/1.1 var(--rh-sans); letter-spacing: -0.01em; }
.rp-hinweis { font-size: 12.5px; color: var(--rh-mut); }
.rp-woche { display: grid; gap: 12px; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chips button {
  font: 600 12px/1 var(--rh-sans); letter-spacing: 0.03em; padding: 9px 13px; border-radius: 999px; cursor: pointer;
  color: var(--rh-ink2); background: var(--rp-fl); border: 1px solid var(--rp-kante); transition: background 0.15s, transform 0.15s;
}
.rp-chips button:hover { background: var(--rp-fl2); }
.rp-chips button[data-on="true"] { background: var(--rh-ink); color: var(--rh-card2); border-color: transparent; transform: translateY(-1px); }
.rp-ziel {
  font: inherit; font-size: 13.5px; color: var(--rh-ink); padding: 9px 13px; border-radius: 12px; outline: none; min-width: 0;
  background: var(--rp-fl); border: 1px solid transparent; transition: border-color 0.15s, background 0.15s;
}
.rp-ziel::-moz-placeholder { color: var(--rh-mut); }
.rp-ziel::placeholder { color: var(--rh-mut); }
.rp-ziel:hover { background: var(--rp-fl2); }
.rp-ziel:focus { border-color: var(--rp-kante); background: var(--rp-fl2); }
.rp-liste { display: grid; gap: 2px; }
.rp-zeile {
  display: grid; grid-template-columns: minmax(130px, 170px) auto minmax(0, 1fr); align-items: center; gap: 14px;
  padding: 7px 8px; border-radius: 14px; transition: background 0.15s;
}
.rp-zeile:hover { background: var(--rp-fl); }
.rp-zeile[data-stufe="pause"] .rp-name { opacity: 0.45; }
.rp-zeile[data-stufe="fokus"] .rp-name::after { content: " ●"; color: var(--rh-ink); font-size: 9px; vertical-align: 2px; }
.rp-name { font: 600 12.5px/1.2 var(--rh-sans); letter-spacing: 0.04em; }
.rp-stufen { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--rp-fl); border: 1px solid var(--rp-kante); }
.rp-stufen button {
  font: 500 12px/1 var(--rh-sans); padding: 7px 11px; border: 0; border-radius: 999px;
  background: transparent; color: var(--rh-ink2); cursor: pointer; opacity: 0.75; transition: background 0.15s, opacity 0.15s;
}
.rp-stufen button:hover { opacity: 1; }
.rp-stufen button[data-on="true"] { opacity: 1; background: var(--rp-fl2); color: var(--rh-ink); font-weight: 600; }
/* Fokus und Wichtig sollen ins Auge springen, Nebenbei bleibt leise. */
.rp-zeile[data-stufe="fokus"] .rp-stufen button[data-on="true"] { background: var(--rh-ink); color: var(--rh-card2); }
.rp-zeile[data-stufe="wichtig"] .rp-stufen button[data-on="true"] { background: var(--rh-ink2); color: var(--rh-card2); }
.rp-zeile .rp-ziel { background: transparent; }
.rp-zeile .rp-ziel:hover, .rp-zeile .rp-ziel:focus { background: var(--rp-fl2); }
@media (max-width: 760px) {
  .rp-zeile { grid-template-columns: 1fr; gap: 6px; }
}

/* ══════════════════════════════════════════════════════════════════════
   HEUTE · UPGRADE (Max, 29.10. nachts: „das ganze Interface hier könnte
   auf jeden Fall ein mieses Upgrade bekommen")
   - AUREL links frei auf dem Glas, rechts vier Blick-Kacheln im 2×2-Raster,
     die so hoch sind wie ihr Inhalt — keine leeren Glasflächen mehr.
   - Jede Kachel: kleines Label, große Zahl, drei Zeilen Inhalt.
   - Unten Luft für die Riss-Leiste, damit sie nichts verdeckt.
   ══════════════════════════════════════════════════════════════════════ */
.rh .rh-hero {
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.4fr);
  align-items: start; gap: 22px;
}
.rh .rh-hero > .rh-haupt { grid-row: auto; }
.rh-blicke { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; min-width: 0; }
.rh .rh-blick {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px 16px; border-radius: 22px; min-height: 196px; min-width: 0;
  color: var(--rh-ink); text-decoration: none;
}
.rh .rh-blick[data-ton="wartet"] { border-color: var(--rh-ink2); box-shadow: var(--rh-card-shadow), 0 0 0 1px var(--rh-sel); }
.rh-blick-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--rh-mut); }
.rh-blick-wert {
  font: 700 40px/1.05 var(--rh-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.rh-blick-wert small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--rh-mut); }
.rh-blick-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.rh-blick-liste li {
  display: flex; align-items: baseline; gap: 10px; min-width: 0;
  padding: 7px 0; border-top: 1px solid var(--rh-line); font-size: 13px; color: var(--rh-ink2);
}
.rh-blick-liste li span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-blick-liste li em {
  flex: none; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 999px; background: var(--rh-sel); color: var(--rh-ink2);
}
.rh-blick-leer { margin: 0; padding-top: 7px; border-top: 1px solid var(--rh-line); font-size: 13px; color: var(--rh-mut); }
.rh-blick-pfeil {
  position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; color: var(--rh-ink2);
  background: var(--rh-sel); transition: transform 0.2s, background 0.2s;
}
.rh .rh-blick:hover .rh-blick-pfeil { transform: translateX(2px); background: var(--rh-card2); }
.rh .rh-blick.rh-geruest { gap: 12px; }

/* „Dinge brauchen dich": ruhiger, Zeilen statt dicker Kästen. */
.rh .rh-haupt { min-height: 0; padding-top: 6px; }
.rh .rh-haupt-titel { font: 700 22px/1.15 var(--rh-sans); letter-spacing: -0.01em; text-transform: none; }
.rh .rh-befund { padding: 11px 12px 11px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.35; }

/* Luft unten — die Riss-Leiste und PULSE liegen fest über dem Inhalt. */
.rh:not(.rh--seite) { padding-bottom: 150px; }

@media (max-width: 1100px) {
  .rh .rh-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .rh-blicke { grid-template-columns: minmax(0, 1fr); }
  .rh .rh-blick { min-height: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   HELLE BÜHNE FÜR DIE RÄUME (Max, 29.10.: „guck dir alle Unterräume an,
   man kann kein einziges Ding lesen … bei Putzi geht jede Unterseite").
   Die Raumseiten sind fürs helle Design gebaut. Im Dunkelmodus der Mac-App
   standen dunkle Schrift und weiße Knöpfe auf dunklem Glas. Diese Seiten
   bekommen deshalb immer helles, fast deckendes Glas und helle Werte —
   egal ob Mac hell oder dunkel ist. Spezifität über :root, damit die
   Dunkel- und Mac-Regeln oben nicht gewinnen.
   ══════════════════════════════════════════════════════════════════════ */
:root .rr-seiten-buehne[data-hell="true"] {
  color-scheme: light;
  --pz-fg: #1b1a1f; --pz-fg2: rgba(27, 26, 31, 0.8); --pz-mut: rgba(27, 26, 31, 0.58);
  --pz-line: rgba(20, 20, 30, 0.1); --pz-sel: rgba(20, 20, 30, 0.06);
  --pz-card: rgba(255, 255, 255, 0.72); --pz-card2: rgba(255, 255, 255, 0.92);
  --pz-panel: rgba(246, 245, 243, 0.94); --pz-edge: rgba(255, 255, 255, 0.85);
  --pz-accent: #d9582b;
  color: var(--pz-fg);
}
:root .rr-seiten-buehne[data-hell="true"]::before {
  background: var(--pz-panel);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.rp-klappe { margin-top: 8px; }
.rp-klappe > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 10px 16px; border-radius: 999px; font: 600 13px/1 var(--rh-sans); color: var(--rh-ink2);
  background: var(--rh-card); border: 1px solid var(--rh-edge);
}
.rp-klappe > summary::-webkit-details-marker { display: none; }
.rp-klappe > summary::after { content: "›"; transition: transform 0.2s; }
.rp-klappe[open] > summary::after { transform: rotate(90deg); }
.rp-klappe[open] > .rp { margin-top: 12px; }

/* Sechs Blick-Kacheln (29.10. nachts): drei nebeneinander, wo Platz ist. */
.rh-blicke { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rh .rh-blick { min-height: 178px; }
.rh-blick-wert { font-size: 34px; }
@media (max-width: 1320px) { .rh-blicke { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rh-blicke { grid-template-columns: minmax(0, 1fr); } }

/* Wärme der Räume (Max, 30.10., zweite Runde: „zu viel Farbe, wenn zwei
 * nebeneinander leuchten — eher dezent, nur die Umrandung"). Kalt bleibt
 * neutral, warm bekommt eine warme Kante, heiß eine rote, die langsam atmet. */
.rh .rh-raum[data-waerme], .rh .rh-tuer[data-waerme] { transition: border-color 0.6s ease, box-shadow 0.6s ease; }
.rh .rh-raum[data-waerme="warm"] { border-color: rgba(255, 150, 60, 0.45) !important; box-shadow: var(--rh-card-shadow), 0 0 0 1px rgba(255, 150, 60, 0.18); }
.rh .rh-raum[data-waerme="heiss"] { border-color: rgba(255, 80, 60, 0.55) !important; box-shadow: var(--rh-card-shadow), 0 0 0 1px rgba(255, 80, 60, 0.22); animation: rh-glut 6s ease-in-out infinite; }
.rh .rh-tuer[data-waerme="warm"] { border-color: rgba(255, 150, 60, 0.45) !important; }
.rh .rh-tuer[data-waerme="heiss"] { border-color: rgba(255, 80, 60, 0.55) !important; }
@keyframes rh-glut {
  0%, 100% { box-shadow: var(--rh-card-shadow), 0 0 0 1px rgba(255, 80, 60, 0.18); }
  50% { box-shadow: var(--rh-card-shadow), 0 0 0 2px rgba(255, 80, 60, 0.32), 0 0 18px -6px rgba(255, 80, 60, 0.35); }
}
@media (prefers-reduced-motion: reduce) { .rh .rh-raum[data-waerme="heiss"] { animation: none; } }
.rh-raum-warum { font-size: 12.5px; line-height: 1.35; color: var(--rh-ink2); margin-top: -4px; }
.rh .rh-raum[data-waerme="warm"] .rh-raum-warum { color: #c46a00; }
.rh .rh-raum[data-waerme="heiss"] .rh-raum-warum { color: #d4362a; }
@media (min-width:0px) {
  .rh .rh-raum[data-waerme="warm"] .rh-raum-warum { color: #ffb35c; }
  .rh .rh-raum[data-waerme="heiss"] .rh-raum-warum { color: #ff7a6b; }
}

/* Kalender auf Heute (Max, 30.10.) — ruhig, Zeitleiste + nächste Tage. */
.rh-kal { margin-top: 26px; }
.rh-kal--laedt { min-height: 180px; }
.rh-kal-flaeche { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
.rh .rh-kal-heute { display: grid; gap: 14px; align-content: start; padding: 18px 20px; border-radius: 22px; background: var(--rh-card); border: 1px solid var(--rh-edge); box-shadow: var(--rh-card-shadow); color: inherit; text-decoration: none; }
.rh-kal-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rh-kal-kopf b { font-size: 15px; color: var(--rh-ink); margin-right: 4px; }
.rh-kal-ganztags { font-size: 12px; padding: 3px 9px; border-radius: 999px; color: var(--rh-ink); background: color-mix(in srgb, var(--f) 18%, transparent); }
.rh-kal-leiste { position: relative; height: 46px; margin: 4px 0 14px; border-radius: 12px; background: var(--rh-sel); }
.rh-kal-stunde { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--rh-ink) 8%, transparent); }
.rh-kal-stunde span { position: absolute; top: calc(100% + 4px); left: 0; transform: translateX(-50%); font-size: 10.5px; color: var(--rh-mut); font-variant-numeric: tabular-nums; }
.rh-kal-block { position: absolute; top: 6px; bottom: 6px; border-radius: 8px; background: color-mix(in srgb, var(--f) 28%, var(--rh-card)); border-left: 3px solid var(--f); overflow: hidden; display: flex; align-items: center; padding: 0 7px; }
.rh-kal-block span { font-size: 11.5px; font-weight: 600; color: var(--rh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-kal-block[data-vorbei="true"] { opacity: 0.45; }
.rh-kal-jetzt { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: #ff453a; box-shadow: 0 0 0 3px color-mix(in srgb, #ff453a 18%, transparent); }
.rh-kal-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rh-kal-liste li { display: grid; grid-template-columns: 8px 44px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 13.5px; color: var(--rh-ink); }
.rh-kal-liste li i { width: 8px; height: 8px; border-radius: 50%; }
.rh-kal-liste li em { font-style: normal; color: var(--rh-mut); font-variant-numeric: tabular-nums; }
.rh-kal-liste li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-kal-liste .rh-kal-frei { display: block; color: var(--rh-mut); }
.rh-kal-tage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rh-kal-tage li { display: grid; gap: 4px; align-content: start; padding: 12px 12px 14px; border-radius: 18px; background: var(--rh-card); border: 1px solid var(--rh-edge); min-width: 0; }
.rh-kal-tage li b { font-size: 12.5px; color: var(--rh-ink2); margin-bottom: 2px; }
.rh-kal-tage li span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--rh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-kal-tage li span i { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.rh-kal-tage li small { font-size: 11.5px; color: var(--rh-mut); }
.rh-kal-tage li[data-leer="true"] { opacity: 0.6; }
@media (max-width: 900px) { .rh-kal-flaeche { grid-template-columns: minmax(0, 1fr); } }

/* ── Kopf ohne Kasten (Max, 30.10.: „sieht noch unfertig aus") ─────────────
   Die Leiste steht frei in der Mitte, rechts die Uhr; kein Rahmen, kein
   zweiter Kasten um Räume. Der Kopf scrollt mit, statt als Glasband zu kleben. */
.rh.rh--leiste-oben { position: relative; padding-top: 6px; }
.rh-kopf-oben { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; padding: 8px 16px 0; }
.rr-seiten-buehne:has(.rr-raum)::before { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; }
.rr-seiten-buehne:has(.rr-raum) { padding-top: 4px; }
/* Glocke leise: nur das Zeichen neben der Uhr, kein weißer Ball. */
.rr-notif__bell { width: 36px !important; height: 36px !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }
.rr-notif__bell svg { stroke: var(--rh-ink2, #43423b) !important; }
.rr-notif { top: 24px !important; }
.rh-uhr { margin-right: 40px; }
@media (min-width:0px) { .rr-notif__bell svg { stroke: rgba(244, 238, 232, 0.82) !important; } }

/* Raum-Wechsler in der Kopfleiste (30.10.) */
.rw { display: flex; align-items: center; gap: 2px; min-width: 0; justify-self: start; }
.rw-pfeil { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--rh-mut); text-decoration: none; }
.rw-pfeil:hover { background: var(--rh-sel); color: var(--rh-ink); }
.rw-name { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--rh-ink); white-space: nowrap; padding: 0 2px; }
.rw-punkte { display: flex; align-items: center; gap: 1px; margin-left: 10px; }
.rw-punkt { position: relative; display: grid; place-items: center; width: 18px; height: 22px; text-decoration: none; }
.rw-punkt i { width: 6px; height: 6px; border-radius: 50%; background: var(--rh-line); transition: transform 0.15s ease, background 0.15s ease; }
.rw-punkt[data-waerme="warm"] i { background: #f0973f; }
.rw-punkt[data-waerme="heiss"] i { background: #f0533f; }
.rw-punkt[data-aktiv="true"] i { width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--rh-ink); background: var(--rh-ink); }
.rw-punkt[data-aktiv="true"][data-waerme="warm"] i { background: #f0973f; }
.rw-punkt[data-aktiv="true"][data-waerme="heiss"] i { background: #f0533f; }
.rw-punkt:hover i { transform: scale(1.4); }
.rw-karte {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px); z-index: 70;
  display: grid; gap: 3px; min-width: 170px; max-width: 260px; padding: 10px 12px; border-radius: 14px;
  background: var(--rh-card2, var(--rh-card)); border: 1px solid var(--rh-edge); box-shadow: 0 14px 36px -12px rgba(0, 0, 0, 0.35); backdrop-filter: blur(20px) saturate(160%);
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease;
}
.rw-punkt:hover .rw-karte, .rw-punkt:focus-visible .rw-karte { opacity: 1; transform: translate(-50%, 0); }
.rw-karte b { font-size: 12px; letter-spacing: 0.05em; color: var(--rh-ink); white-space: nowrap; }
.rw-karte small { font-size: 12px; line-height: 1.35; color: var(--rh-ink2); }
@media (max-width: 900px) { .rw-punkte { display: none; } }
/* Kopf etwas tiefer — in der Mac-App liegen links die Fensterknöpfe (Max, 30.10.: „zu sehr gequetscht an oben"). */
.rh.rh--leiste-oben { padding-top: 20px; }
html.rr-native .rh.rh--leiste-oben { padding-top: 34px; }
.rw { padding-left: 6px; }
.rh .rh-fold--link { display: block; padding: 14px 18px; border-radius: 18px; color: var(--rh-ink2); text-decoration: none; font-size: 13.5px; }
.rh .rh-fold--link:hover { background: var(--rh-sel); color: var(--rh-ink); }

/* Uhr (Max, 30.10.: „größer, Zeit und Datum nicht so gedrückt — und sie
 * springt, wenn ich auf Räume gehe"). Steht jetzt fest am Fenster, neben der
 * Glocke (.rr-notif: top 22, right 22) — auf jeder Seite an derselben Stelle. */
.rh .rh-uhr, .rh-uhr {
  position: fixed; top: 22px; right: 92px; z-index: 59; margin: 0;
  height: 56px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px;
  pointer-events: none;
}
.rh .rh-uhr b, .rh-uhr b { font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.rh .rh-uhr span, .rh-uhr span { font-size: 13px; line-height: 1; color: var(--rh-mut); }
@media (max-width: 700px) { .rh .rh-uhr, .rh-uhr { display: none; } }

/* Heute und Räume wie die Räume selbst (Max, 30.10.: „Hallo Max steht oben,
 * keine Umrandung drum — auch wie die Räume und nicht so eingerundet"):
 * kein großer Glasrahmen mehr um die ganze Seite, Inhalt steht frei. */
.rh .rh-stage::before,
.rr-seiten-buehne:has(.rh--seite)::before {
  background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none;
}
.rr-seiten-buehne:has(.rh--seite) { padding-top: 4px; }

/* Zählwerk beim Laden (components/raum/rattern.tsx, 31.10.): Walzen drehen
 * weich, jede Stelle im eigenen Tempo, oben und unten ausgeblendet. */
.rr-rattern { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; opacity: 0.5; }
.rr-walze {
  display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: baseline;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.rr-walze-band { display: flex; flex-direction: column; animation: rr-drehen var(--rr-dauer, 2s) cubic-bezier(0.45, 0.05, 0.55, 0.95) var(--rr-start, 0s) infinite; }
.rr-walze-band > span { display: block; height: 1em; line-height: 1; }
@keyframes rr-drehen { from { transform: translateY(0); } to { transform: translateY(-10em); } }
.rr-rattern-ruhig { display: none; }
@media (prefers-reduced-motion: reduce) {
  .rr-walze { display: none; }
  .rr-rattern-ruhig { display: inline; }
}

/* Ruhige Wärme (Max, 31.10.: „Rot gibt mir direkt Panik — lieber Blau oder
 * Lila, etwas Beruhigendes"). Warm = sanftes Blau, heiß = Lavendel, beide
 * still, ohne Pulsieren. Gilt auch für die Status-Pillen der Raum-Kacheln. */
.rh { --rh-ruhig-blau: #4f7bea; --rh-ruhig-lila: #7c62e0; }
@media (min-width:0px) { .rh { --rh-ruhig-blau: #8eaaff; --rh-ruhig-lila: #b6a2ff; } }
/* Zweite Runde (31.10.: „gern wieder etwas intensiver leuchten"): kräftige
 * Kante plus weicher Schein nach außen, heiß atmet ganz langsam. */
.rh .rh-raum[data-waerme="warm"] { border-color: color-mix(in srgb, var(--rh-ruhig-blau) 75%, transparent) !important; box-shadow: var(--rh-card-shadow), 0 0 0 1px color-mix(in srgb, var(--rh-ruhig-blau) 35%, transparent), 0 0 28px -4px color-mix(in srgb, var(--rh-ruhig-blau) 45%, transparent); }
.rh .rh-raum[data-waerme="heiss"] { border-color: color-mix(in srgb, var(--rh-ruhig-lila) 85%, transparent) !important; box-shadow: var(--rh-card-shadow), 0 0 0 2px color-mix(in srgb, var(--rh-ruhig-lila) 40%, transparent), 0 0 38px -2px color-mix(in srgb, var(--rh-ruhig-lila) 55%, transparent); animation: rh-schein 7s ease-in-out infinite; }
@keyframes rh-schein { 50% { box-shadow: var(--rh-card-shadow), 0 0 0 2px color-mix(in srgb, var(--rh-ruhig-lila) 50%, transparent), 0 0 52px 2px color-mix(in srgb, var(--rh-ruhig-lila) 65%, transparent); } }
@media (prefers-reduced-motion: reduce) { .rh .rh-raum[data-waerme="heiss"] { animation: none; } }
.rh .rh-tuer[data-waerme="warm"] { border-color: color-mix(in srgb, var(--rh-ruhig-blau) 75%, transparent) !important; box-shadow: 0 0 18px -4px color-mix(in srgb, var(--rh-ruhig-blau) 45%, transparent); }
.rh .rh-tuer[data-waerme="heiss"] { border-color: color-mix(in srgb, var(--rh-ruhig-lila) 85%, transparent) !important; box-shadow: 0 0 22px -4px color-mix(in srgb, var(--rh-ruhig-lila) 55%, transparent); }
.rh .rh-raum[data-waerme="warm"] .rh-raum-warum, .rh .rh-raum[data-waerme="heiss"] .rh-raum-warum { color: var(--rh-ink2); }
.rh .rh-raum .rh-pill[data-ton="jetzt"] { background: color-mix(in srgb, var(--rh-ruhig-lila) 14%, transparent); color: var(--rh-ruhig-lila); }
.rh .rh-raum .rh-pill[data-ton="laeuft"], .rh .rh-raum .rh-pill[data-ton="wartet"] { background: color-mix(in srgb, var(--rh-ruhig-blau) 13%, transparent); color: var(--rh-ruhig-blau); }
.rh .rh-raum .rh-pill[data-ton="unbekannt"] { background: var(--rh-sel); color: var(--rh-ink2); }
.rw-punkt[data-waerme="warm"] i, .rw-punkt[data-aktiv="true"][data-waerme="warm"] i { background: var(--rh-ruhig-blau, #4f7bea); box-shadow: 0 0 8px var(--rh-ruhig-blau, #4f7bea); }
.rw-punkt[data-waerme="heiss"] i, .rw-punkt[data-aktiv="true"][data-waerme="heiss"] i { background: var(--rh-ruhig-lila, #7c62e0); box-shadow: 0 0 10px var(--rh-ruhig-lila, #7c62e0); }

/* Heute-Kopf (Max, 31.10.): „Hallo Max." und direkt darunter, was dich braucht —
   keine Erklärung mehr. Links steht danach nur noch AVE. */
.rh .rh-top .rh-heute-zeile {
  font: 600 clamp(20px, 2.2vw, 28px)/1.2 var(--rh-sans);
  letter-spacing: -0.015em;
  color: var(--rh-ink);
  transition: opacity 0.4s ease;
}
.rh .rh-top .rh-heute-zeile[data-da="false"] { opacity: 0.45; }
.rh .rh-haupt-kopf button.rh-haupt-status {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--rh-mut);
}
.rh .rh-haupt-kopf button.rh-haupt-status:hover { color: var(--rh-ink2); }

/* ── Schwebende Pille beim Scrollen (Max, 31.10.) ───────────────────────────
   Sobald die Kopfleiste oben rausläuft, steht Heute · Räume als Glas-Pille
   oben in der Mitte. Darunter ein weicher Rand, damit Inhalt oben nicht hart
   abgeschnitten wird. Die Glocke rechts bleibt darüber. */
.rh.rh-schwebe {
  position: fixed; inset: 0 0 auto 0; z-index: 55; min-height: 0; height: 0;
  pointer-events: none;
}
.rh.rh-schwebe::before { display: none; }
.rh-schwebe-rand {
  position: fixed; inset: 0 0 auto 0; height: 92px; pointer-events: none;
  background: linear-gradient(180deg, rgba(244, 243, 240, 0.92) 0%, rgba(244, 243, 240, 0.7) 45%, rgba(244, 243, 240, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.25s ease;
}
.rh .rh-schwebe-leiste {
  position: fixed; top: 16px; left: 50%; padding: 5px;
  transform: translate(-50%, -14px) scale(0.96); opacity: 0; visibility: hidden;
  background: rgba(250, 249, 246, 0.94); border: 0.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 14px 34px -12px rgba(20, 22, 40, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.2s ease, visibility 0s linear 0.32s;
}
.rh-schwebe[data-zeigen="true"] .rh-schwebe-rand { opacity: 1; }
.rh-schwebe[data-zeigen="true"] .rh-schwebe-leiste {
  pointer-events: auto; transform: translate(-50%, 0) scale(1); opacity: 1; visibility: visible;
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.2s ease, visibility 0s;
}
@media (min-width:0px) {
  .rh-schwebe-rand { background: linear-gradient(180deg, rgba(22, 20, 18, 0.9) 0%, rgba(22, 20, 18, 0.6) 45%, rgba(22, 20, 18, 0) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .rh .rh-schwebe-leiste, .rh-schwebe[data-zeigen="true"] .rh-schwebe-leiste { transition: opacity 0.15s ease, visibility 0s; transform: translate(-50%, 0); }
}

/* ── Heute ruhiger (Max, 31.10.: „too much"): drei Kacheln + ein Feld „Auf einen Blick". ── */
.rh .rh-blicke--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .rh .rh-blicke--vier { grid-template-columns: minmax(0, 1fr); } }
.rh .rh-blick--summe { cursor: default; gap: 6px; }
.rh .rh-blick--summe:hover { transform: none; }
.rh-blick--summe ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.rh-blick--summe li + li { border-top: 1px solid var(--rh-line); }
.rh .rh-blick--summe a {
  display: flex; align-items: center; gap: 12px; padding: 8px 6px; margin: 0 -6px; border-radius: 10px;
  color: var(--rh-ink); text-decoration: none; transition: background 0.15s ease;
}
.rh .rh-blick--summe a:hover { background: var(--rh-sel); }
.rh-blick--summe a > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.rh-blick--summe b { font-size: 13px; font-weight: 650; }
.rh-blick--summe small { font-size: 11.5px; color: var(--rh-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-blick--summe em { font-style: normal; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rh-blick--summe li[data-ton="wartet"] em { color: #6f55d6; }
.rh-blick--summe li[data-ton="wartet"] b::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; vertical-align: middle; border-radius: 50%;
  background: #7c62e0; box-shadow: 0 0 8px rgba(124, 98, 224, 0.7);
}
/* RAM-Balken in „Auf einen Blick" (Max, 31.10.: „RAM frei mit so einem Live-Ding"). */
.rh-blick--summe .rh-ram { display: block; height: 4px; margin-top: 5px; border-radius: 2px; background: var(--rh-sel); overflow: hidden; max-width: 220px; }
.rh-blick--summe .rh-ram > i {
  display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #4f7bea, #7c62e0);
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rh-blick--summe .rh-ram[data-hoch] > i { background: #7c62e0; box-shadow: 0 0 8px rgba(124, 98, 224, 0.7); }

/* Schwebende Kopfzeile, Runde 2 (Max, 31.10.): Raum-Wechsler und Uhr schweben mit, im selben hellen Glas. */
.rh-schwebe-links {
  position: fixed; top: 16px; display: flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: 999px;
  background: rgba(250, 249, 246, 0.94); border: 0.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 14px 34px -12px rgba(20, 22, 40, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  opacity: 0; visibility: hidden; transform: translateY(-14px) scale(0.96);
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.2s ease, visibility 0s linear 0.32s; left: 20px;
}
.rh-schwebe-links:has(> span:empty), .rh-schwebe-links:not(:has(.rw)) { display: none; }
.rh-schwebe[data-zeigen="true"] .rh-schwebe-links {
  pointer-events: auto; opacity: 1; visibility: visible; transform: none;
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.2s ease, visibility 0s;
}
@media (max-width: 700px) { .rh-schwebe-links .rw-punkte { display: none; } }
/* Sekunden an der Uhr (Max, 31.10.): kleiner und leiser, feste Breite, damit nichts zuckt. */
.rh-uhr b { font-variant-numeric: tabular-nums; }
.rh-uhr .rh-uhr-sek { font-size: 0.55em; font-weight: 500; color: var(--rh-mut); margin-left: 1px; letter-spacing: 0; }

/* Die feste Uhr bekommt beim Scrollen dasselbe helle Glas wie Heute · Räume (statt einer zweiten Uhr). */
.rh-uhr { transition: background 0.2s ease, box-shadow 0.2s ease, padding 0.2s ease; border-radius: 999px; }
html[data-rr-schwebt] .rh-uhr {
  top: 16px; height: 56px; padding: 0 18px; flex-direction: row; align-items: baseline; justify-content: center; gap: 9px;
  background: rgba(250, 249, 246, 0.94);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 14px 34px -12px rgba(20, 22, 40, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html[data-rr-schwebt] .rh-uhr b { font-size: 20px; }
html[data-rr-schwebt] .rh-uhr { align-items: center; }

/* AVE schlägt vor (home-vorschlaege.tsx) — rot ist kaputt, sonst wie die Aufträge. */
.rh-vorschlaege .rh-li[data-ton="rot"] .rh-li-tx p::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rh-bad); margin-right: 8px; vertical-align: 1px; }
.rh-vorschlaege a.rh-btn { text-decoration: none; }
@media (max-width: 640px) {
  .rh-vorschlaege .rh-li-row { flex-wrap: wrap; }
  .rh-vorschlaege .rh-li-tx { flex-basis: 100%; }
}

/* Noch aktuell? (Aufräumer, 03.11.) */
.rh-aufraeumen a.rh-li-tx { text-decoration: none; color: inherit; min-width: 0; flex: 1; }

/* Diese Woche zeigen (Raumplan, 03.11.) */
.rh-zeigen-li { text-decoration: none; color: inherit; display: block; }
.rh-zeigen-li[data-draussen] .rh-li-tx p { text-decoration: line-through; text-decoration-color: var(--rh-mut); color: var(--rh-ink2); }
.rh-zeigen-li[data-draussen] .rh-li-tx p::before { content: "✓ "; color: #34c759; }

/* Schwebende Leiste im Dunkeln (Max, 03.11.: „wenn ich runtergehe, kommt oben
   dieser weiße Schnitt" — helles Glas mit heller Schrift). Im Dunkelmodus
   dunkles Glas für Leiste, Raum-Wechsler und Uhr. */
@media (min-width:0px) {
  .rh .rh-schwebe-leiste, .rh-schwebe-links, html[data-rr-schwebt] .rh-uhr {
    background: rgba(28, 25, 34, 0.86);
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08); backdrop-filter: blur(24px) saturate(160%);
  }
  .rh-schwebe-rand { background: linear-gradient(180deg, rgba(14, 12, 24, 0.82) 0%, rgba(14, 12, 24, 0.5) 45%, rgba(14, 12, 24, 0) 100%); }
}

/* Leerraum oben (Max, 03.11.: „oben ist viel Leerraum, als würde was fehlen"):
   `.rh:not(.rh--seite) { padding-bottom: 150px }` ist für Home gedacht und traf
   auch die Kopfleiste über allen anderen Seiten — 150 px Luft unter den Reitern. */
.rh.rh--leiste-oben { padding-bottom: 0; }

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../../../../../../Users/max/Documents/MAEX_OS/maex-os/apps/dashboard/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../../../../../../../../Users/max/Documents/MAEX_OS/maex-os/apps/dashboard/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../../../../../../../../Users/max/Documents/MAEX_OS/maex-os/apps/dashboard/node_modules/next/font/google/target.css?{"path":"src/lib/site-effect-fork/site-effect-se26-fonts.ts","import":"Anton","arguments":[{"subsets":["latin"],"weight":"400","display":"swap","variable":"--font-se-display"}],"variableName":"seDisplay"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(6ced06489fd81a3f-s-d935374b.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(aa5f74293546f6d0-s-930b6513.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(62c97acc3aa63787-sp-e57915c8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Anton Fallback';src: local("Arial");ascent-override: 129.70%;descent-override: 36.29%;line-gap-override: 0.00%;size-adjust: 90.69%
}.__className_c8e612 {font-family: 'Anton', 'Anton Fallback';font-weight: 400;font-style: normal
}.__variable_c8e612 {--font-se-display: 'Anton', 'Anton Fallback'
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../../../../../../Users/max/Documents/MAEX_OS/maex-os/apps/dashboard/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../../../../../../../../Users/max/Documents/MAEX_OS/maex-os/apps/dashboard/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../../../../../../../../Users/max/Documents/MAEX_OS/maex-os/apps/dashboard/node_modules/next/font/google/target.css?{"path":"src/lib/site-effect-fork/site-effect-se26-fonts.ts","import":"Archivo","arguments":[{"subsets":["latin"],"display":"swap","variable":"--font-se-sans"}],"variableName":"seSans"} ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(b06b356f834173cc-s-dbc5c2f3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(23d669af23d19c95-s-288d2a1c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(1a4aa50920b5315c-sp-92895aba.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Archivo Fallback';src: local("Arial");ascent-override: 88.96%;descent-override: 21.28%;line-gap-override: 0.00%;size-adjust: 98.70%
}.__className_fab2aa {font-family: 'Archivo', 'Archivo Fallback';font-style: normal
}.__variable_fab2aa {--font-se-sans: 'Archivo', 'Archivo Fallback'
}