/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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'
}