/* RegieRaum – Marke v1.3 (regieraum-brand, BRAND.md §11, §15–17). Gilt für alle RegieRaum-Seiten.
   Die Werte kommen ausschließlich aus /brand/css/regieraum-tokens.css (unverändert aus dem Brand-Repo, Stand in /brand/QUELLE).
   Hier werden nur die bisherigen App-Variablen auf die Marken-Tokens abgebildet – keine eigenen Farbwerte.
   Dunkel ist Standard; Hell schaltet rr-look.js über <html data-rr-theme="hell"> (gleichzeitig data-mode="light"). */
@import url('/brand/css/regieraum-tokens.css?v=aa1dcd2');
@import url('/brand/css/regieraum-brand.css?v=aa1dcd2');

html:root, html:root[data-mode="dark"], html:root[data-rr-theme="hell"] {
  --bg: var(--rr-grund); --surface: var(--rr-flaeche); --surface-2: var(--rr-zweit); --border: var(--rr-linie);
  --text: var(--rr-text); --text-dim: var(--rr-text-2); --text-faint: var(--rr-text-2); --dim: var(--rr-text-2); --faint: var(--rr-text-2);
  --accent: var(--rr-app-akzent); --on-accent: var(--rr-app-on-akzent); --accent-dim: var(--rr-app-akzent-flaeche); --link: var(--rr-app-akzent-text);
  --navy: var(--rr-text); --bar: var(--rr-flaeche); --on-bar: var(--rr-text);
  --ok: var(--rr-erfolg-text); --ok-bg: var(--rr-erfolg-flaeche);
  --warn: var(--rr-warnung-text); --warn-bg: var(--rr-warnung-flaeche);
  --bad: var(--rr-fehler-text); --danger: var(--rr-fehler-text);
  --info: var(--rr-info-text); --info-bg: var(--rr-info-flaeche);
  --neutral: var(--rr-text-2); --neutral-bg: var(--rr-zweit);
  --violet: var(--rr-kat-2); --violet-bg: color-mix(in srgb, var(--rr-kat-2) 16%, transparent);
  --pink: var(--rr-kat-4); --pink-bg: color-mix(in srgb, var(--rr-kat-4) 16%, transparent);
  --shadow: var(--rr-glas-schatten);
  /* frühere „feste“ Flächen einzelner Module: massiv wie Karten */
  --rrm-solid: var(--rr-flaeche); --rp-solid: var(--rr-flaeche);
}
html body { font-family: var(--rr-font-text); background: var(--rr-grund-schein), var(--rr-grund); background-attachment: fixed; color: var(--rr-text); }
html body h1, html body h2, html body h3, html body header b, html body .rr-back-title, html body .rr-mtitle {
  font-family: var(--rr-font-display); letter-spacing: -0.01em;
}
html body h1, html body h2 { color: var(--rr-text); }
html body .nav button, html body .stat-tile .label, html body .kunde-group-head { letter-spacing: 0; }
/* Mac-Web-App: Platz unter der Titelleiste (siehe rr-look.js) */
html.rr-tb body { padding-top: var(--rr-tb, 0px) !important; }
html.rr-tb body::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: var(--rr-tb, 0px); z-index: 9999; background: var(--rr-grund); -webkit-app-region: drag; }

/* Design-Architektur (docs/30): Dichte als Faktor für Abstände und Zeilenhöhen. Standard = 1;
   Komponenten übernehmen den Faktor schrittweise über calc(… * var(--rr-dichte)). Breite der Seitenleiste. */
:root { --rr-dichte: 1; --rr-rail-w: 14.5rem; --rr-rail-w-mini: 68px; }   /* Seitenleiste wächst mit der Systemschrift (Brand Erg. 8), Tasten bleiben gleich */
html[data-dichte="kompakt"] { --rr-dichte: .85; }
html[data-dichte="grosszuegig"] { --rr-dichte: 1.18; }

/* Lockup/Zeichen je Modus: beide Dateien im Markup, sichtbar ist die zum Grund passende (BRAND.md §2: nie umfärben) */
html:not([data-rr-theme="hell"]) .rr-nur-hell, html[data-rr-theme="hell"] .rr-nur-dunkel { display: none !important; }

/* === Runde 02.11. – D: gemeinsamer Dialog statt confirm/alert/prompt (RR.frage/hinweis/eingabe/wahl in rr-common.js, LIVE: ask() in rr-live.js) ===
   Schwebende Ebene über abgedunkeltem Grund; Titel als Frage, ein Satz darunter, normale Knöpfe (Text mittig) rechts unten, am iPhone untereinander. */
dialog.rr-frage { width: min(28rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; box-sizing: border-box; margin: auto; padding: 1.5rem;
  border: 1px solid var(--rr-kante-zart); border-radius: var(--rr-radius-l); color: var(--rr-text);
  background: var(--rr-flaeche);   /* volle Fläche, nicht durchsichtig (Andy 01.11. beim Mail-Dialog) – Glas-Kante und Schatten bleiben */
  box-shadow: var(--rr-glas-schatten), 0 18px 48px rgba(0, 0, 0, 0.35), inset 0 1px 0 var(--rr-kante-hell); }
dialog.rr-frage[open] { display: block; position: fixed; inset: 0; }
dialog.rr-frage::backdrop { background: var(--rr-scrim); }
html body dialog.rr-frage h2 { margin: 0 0 0.5rem; font: 600 1.25rem/1.625rem var(--rr-font-display); letter-spacing: -.01em; color: var(--rr-text); text-align: left; }
dialog.rr-frage p { margin: 0; font: 400 0.9375rem/1.375rem var(--rr-font-text); color: var(--rr-text-2); overflow-wrap: anywhere; text-align: left; }
dialog.rr-frage .rr-eingabe { margin-top: 1rem; font-size: 1rem; }
dialog.rr-frage .rr-aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.5rem; margin-top: 1.5rem; }
dialog.rr-frage .rr-aktionen .rr-btn { justify-content: center; text-align: center; min-height: 2.75rem; min-width: 7rem; padding: 0 1.125rem; }
@media (max-width: 30rem) {
  dialog.rr-frage .rr-aktionen { flex-direction: column-reverse; align-items: stretch; }
  dialog.rr-frage .rr-aktionen .rr-btn { width: 100%; }
}

/* === Runde 02.11. – D: Reiter überall als Glas-Kapsel wie Tag · Woche · Monat (Brand-Rückmeldung Punkt 20) ===
   Markup: <div class="rr-reiter" role="tablist"><button class="on" aria-selected="true">…</button>…</div> – aktiv: .on, [aria-selected="true"] oder [aria-pressed="true"].
   Pillen (rr-pille) bleiben nur für Filter. !important, weil ältere Modulregeln die Knöpfe sonst als Pillen/Segmente zeichnen. */
html body .rr-reiter { display: inline-flex !important; align-items: center; flex-wrap: nowrap !important; gap: 0.125rem !important; height: 3rem; width: fit-content !important; max-width: 100%; align-self: flex-start; box-sizing: border-box;
  padding: 0.25rem !important; margin: 0 0 0.75rem; border: 0 !important; border-radius: var(--rr-g2-radius-kapsel, 24px) !important; position: relative; isolation: isolate;
  background: var(--rr-glas) !important; -webkit-backdrop-filter: blur(var(--rr-glas-blur)) saturate(var(--rr-glas-saettigung)); backdrop-filter: blur(var(--rr-glas-blur)) saturate(var(--rr-glas-saettigung));
  box-shadow: var(--rr-glas-schatten), inset 0 1px 0 var(--rr-kante-hell), inset 0 -1px 0 var(--rr-kante-zart) !important;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
html body .rr-reiter::-webkit-scrollbar { display: none; }
html body .rr-reiter > button, html body .rr-reiter > a { all: unset; box-sizing: border-box; flex: none; height: 2.5rem !important; padding: 0 1rem !important; border-radius: 1.25rem !important;
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; font: 500 0.875rem/1 var(--rr-font-text) !important;
  color: var(--rr-text-2) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body .rr-reiter > button:hover, html body .rr-reiter > a:hover { color: var(--rr-text) !important; background: var(--rr-hover) !important; }
html body .rr-reiter > :is(button, a):is(.on, [aria-selected="true"], [aria-pressed="true"], [aria-current="page"]) { background: var(--rr-g2-linse) !important; color: var(--rr-text) !important; font-weight: 600 !important;
  box-shadow: inset 0 1px 0 var(--rr-kante-hell), var(--rr-glas-schatten) !important; }
html body .rr-reiter > :is(button, a):focus-visible { outline: 2px solid var(--rr-app-akzent) !important; outline-offset: -2px; }
html body .rr-reiter > button[hidden] { display: none !important; }
html body .rr-reiter small { font-size: 0.75rem; color: var(--rr-text-2); font-weight: 500; }
@media (prefers-reduced-transparency: reduce) { html body .rr-reiter { background: var(--rr-flaeche) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } }