/*
 * ms.css – gemeinsame Design-Basis für alle Daysi-Tools.
 *
 * Dies ist die Design-Sprache des gesamten Ökosystems: Daysi, Login und
 * (nach und nach) alle weiteren Tools. Neue Tools binden entweder diese
 * Datei direkt ein (verlinkt von Daysi unter /_daysi/ms.css) oder
 * kopieren sie als Startpunkt. Bewusst generisch gehalten, keine
 * Daysi-spezifischen Annahmen in den Komponentenklassen.
 *
 * Aufbau dieser Datei:
 *   1. @font-face (selbst gehostet, siehe public/fonts/)
 *   2. Design-Tokens (hell/dunkel) als CSS-Variablen auf :root
 *   3. Reset & Basiselemente
 *   4. Layout-Bausteine (Container, Topbar, Dropdowns)
 *   5. Komponenten (Karten, KPIs, Kacheln, Formulare, Buttons, Tabellen, …)
 *   6. Seiten-spezifische Bausteine (Login, Lesemodus für Rechtstexte)
 *   7. Responsive Anpassungen & prefers-reduced-motion
 */

/* ==========================================================================
   1. Schriften (selbst gehostet, CSP erlaubt keine externen Fonts)
   ========================================================================== */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/playfair-display-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
}

/* ==========================================================================
   2. Design-Tokens
   ========================================================================== */

:root {
  /* -- Schrift ------------------------------------------------------- */
  --ms-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ms-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* -- Radius / Abstände / Maße ---------------------------------------- */
  --ms-radius-lg: 12px;
  --ms-radius: 8px;
  --ms-radius-pill: 999px;

  --ms-space-1: 4px;
  --ms-space-2: 8px;
  --ms-space-3: 12px;
  --ms-space-4: 16px;
  --ms-space-6: 24px;
  --ms-space-8: 32px;
  --ms-space-12: 48px;
  --ms-space-16: 64px;

  --ms-bar-height: 64px;
  /* „Vorschau als Benutzer" (Admin, siehe lib/preview.js, views/bar.js):
     Höhe des Banner-Streifens direkt unter der Bar. */
  --ms-preview-banner-height: 40px;
  /* Standardbreite der Sidebar (Phase W-A, siehe public/js/sidebar.js) -
     eingeklappt setzt das Skript denselben Token clientseitig auf 64px.
     Dieselben Maße wie die Tool-Sidebar (public/css/sidebar.css) gelten
     auch für die Daysi-eigene Sidebar (siehe Abschnitt "Daysi-Sidebar"
     unten, public/js/daysi-sidebar.js). */
  --ms-sidebar-width-expanded: 248px;
  --ms-sidebar-width-collapsed: 64px;
  /* Zweite, schmalere Spalte (Konto-/Verwaltungs-Unternavigation, siehe
     Abschnitt "Daysi-Sidebar: zweite Spalte" unten, Patrick: "wäre es
     schöner, wenn einfach eine zweite Spalte von der Sidebar aufgeht") -
     bleibt bei eingeklappter Hauptleiste in voller Breite lesbar. */
  --ms-sidebar2-width: 236px;
  --ms-container-max: 1320px;
  --ms-gutter: 16px;

  --ms-shadow-dropdown: 0 12px 32px rgba(0, 0, 0, 0.28);
  /* Karten-Schatten „Ebenen & Schatten" (Patrick, 2026-09-27, helles
     Theme): weich und zweistufig - Tiefe durch Höhe statt Muster, siehe
     Abschnitt „Seitenhintergrund mit Tiefe" weiter unten bei den Farben und
     public/css/ui.css Abschnitt 14. Im dunklen Theme `none` (dort trägt
     der Lichtschein + das Punktraster die Tiefe). */
  --ms-shadow-card: 0 1px 2px rgba(30, 25, 15, 0.06), 0 10px 28px rgba(30, 25, 15, 0.07);

  --ms-transition-fast: 0.12s ease;
  --ms-transition: 0.18s ease;

  /* -- Farben: Helles Theme (Standard) ----------------------------------
     Standard-Akzent "Gold" (#f9cf6d, OKLCH L=0.871 C=0.126 H=86.5) – aus
     Patricks eigenem Torbogen-Foto gemessen (goldgelber Himmel neben der
     Sonne im Bogen, siehe design/login-hero-standard-torbogen.webp, NICHT
     die Sonnenscheibe selbst), löst den kurzzeitigen Kupfer-Standard wieder
     ab (siehe design/login-hero-standard-kupfer-archiv.*, weiterhin als
     Archiv erhalten). Alle Akzent-Token unten mit derselben Logik wie
     public/js/palette.js#generatePalette/buildTheme aus dieser einen
     Eingabefarbe hergeleitet (siehe DEFAULT_BRAND_COLOR dort), die
     Neutraltöne per Hand mit identischem Farbton (H=86,5) leicht
     gold-getönt. Gelb ist hell UND kontrastarm gegen einen hellen
     Hintergrund (Akzent vs. --ms-bg nur 1,39:1) – deshalb hier zusätzlich
     ein sichtbarer --ms-accent-border (statt "transparent") und DUNKLER
     Text auf dem Akzent (--ms-on-accent), beides automatisch vom Generator
     erzwungen (siehe Kommentare unten). */
  --ms-bg: #f5f3ee;
  --ms-elevated: #ffffff;
  --ms-surface: #ffffff;
  --ms-surface-2: #f8f6f2;
  /* Hover-Fläche der Sekundär-Knöpfe (.ms-btn--secondary): etwas heller als --ms-surface-2. */
  --ms-surface-hover: #ffffff;
  --ms-border: #dfdcd4;
  --ms-border-strong: #cac7bf;
  /* Bar bleibt IMMER dunkel, in BEIDEN Themes (Nutzeranfrage: "Bei dem
     hellen Modus bitte oben die Navigationsbar trotzdem dunkel lassen") –
     eigene, bar-spezifische Vordergrund-Token statt der Seiten-Text-Token
     (--ms-text/-muted wären im hellen Theme dunkel, auf der dunklen Bar
     also unlesbar). --ms-bar-hover ist die Hover-/Aktiv-Fläche für den
     „Übersicht"-Button und den User-Chip, --ms-bar-control-border deren
     Rahmen, --ms-bar-accent der Akzent INNERHALB der Bar (Fokus-Ring, siehe
     .ms-topbar unten). Werte identisch zu den Dunkel-Theme-Werten weiter
     unten (siehe dortigen Kommentar) – hier bewusst noch einmal als Literal
     hinterlegt, weil :root sie unabhängig vom data-theme-Zustand braucht;
     die Dunkel-Theme-Blöcke unten setzen sie NICHT erneut (ändern sich
     nicht). Kontrastgarantien (siehe test/palette.test.mjs, eigene
     Farbpaletten siehe public/js/palette.js#buildTheme): --ms-bar-fg auf
     --ms-bar-bg ≥ 7:1, --ms-bar-fg-muted ≥ 4.5:1, --ms-bar-accent ≥ 3:1. */
  --ms-bar-bg: #0c0a07;
  --ms-bar-border: #373530;
  --ms-bar-fg: #f2f0eb;
  --ms-bar-fg-muted: #a19d97;
  --ms-bar-hover: #2c2a25;
  --ms-bar-control-border: #413e37;
  --ms-bar-accent: #e1b855;
  --ms-text: #1f1d1a;
  --ms-text-muted: #64615a;
  /* Barrierefreiheit 2026-09-30: vorher #88847d (3,36:1 auf --ms-bg, 3,04:1
     auf --ms-page-bg) - jetzt >= 4,5:1 auf bg/surface/surface-2/page-bg
     (WCAG AA für Fließtext), siehe public/js/palette.js#verifyNeutrals. */
  --ms-text-subtle: #6b6761;
  --ms-accent: #f5cb69;
  --ms-accent-hover: #e4bb58;
  /* Erscheinungsbild-Feature (lib/appearance.js, public/js/palette.js):
     --ms-accent-border ist der "1px Rahmen statt Fallback"-Ausweg für sehr
     helle/leuchtende Akzentfarben, deren Kontrast gegen --ms-bg unter 3:1
     liegt (z. B. Gelb) – Standard "transparent" heißt: kein sichtbarer
     Unterschied zu vorher (border-box-Clipping lässt die Hintergrundfarbe
     durch einen transparenten Rahmen ohnehin identisch durchscheinen).
     GENAU DIESER Fall liegt beim Standard-Gold vor (Akzent vs. --ms-bg nur
     1,39:1) – hier daher ein sichtbarer dunkler Goldton statt transparent,
     automatisch von generatePalette() erzwungen (siehe
     public/js/palette.js#finalizeAccentLight). */
  --ms-accent-border: #ae8615;
  --ms-on-accent: #1c1505;
  /* Text-sicherer Akzentton für Links/aktive Labels (Kontrast >= 4.5:1
     gegen --ms-bg UND --ms-surface) – der normale --ms-accent ist dafür
     nicht garantiert kontraststark genug (siehe public/js/palette.js). */
  --ms-accent-text: #6c5100;
  /* Dezente Fläche + dazu passender Text (>= 4.5:1) für Badges/markierte
     Zustände in der eigenen Farbe. */
  --ms-accent-soft: #faedd2;
  --ms-accent-soft-text: #5b4400;
  /* Fokus-Markierung (Barrierefreiheit 2026-09-30): --ms-accent (Gold) hat
     auf hellem Grund nur ~1,5:1 und wäre als Fokusring kaum sichtbar - der
     text-sichere Akzentton ist in beiden Themes und für jede eigene Palette
     >= 4,5:1 (public/js/palette.js). Zieht über var() automatisch mit. */
  --ms-focus-outline: var(--ms-accent-text);
  --ms-warn: #b8842f;
  --ms-danger: #a8392f;
  --ms-success: #4c7a49;
  /* Text-sichere Statusfarben (Barrierefreiheit 2026-09-30): --ms-warn/
     -success/-danger selbst sind für Rahmen, Punkte und Flächen gedacht und
     erreichen als SCHRIFT (Badges, Hinweise, Fehlertexte) nicht überall
     4,5:1 (z. B. hell --ms-warn auf --ms-bg nur 2,97:1). Die -text-Varianten
     mischen den Statuston mit der Textfarbe des Themes - bleiben erkennbar
     farbig, erreichen aber >= 4,5:1 auf bg/surface/surface-2 und auf der
     getönten Badge-Fläche, hell UND dunkel (Dunkel-Blöcke setzen nur die
     Grundtöne neu, die Mischung zieht automatisch mit). */
  --ms-warn-text: color-mix(in srgb, var(--ms-warn) 60%, var(--ms-text));
  --ms-success-text: color-mix(in srgb, var(--ms-success) 75%, var(--ms-text));
  --ms-danger-text: color-mix(in srgb, var(--ms-danger) 70%, var(--ms-text));
  /* Schrift auf gefüllter --ms-success-Fläche (hell weiß 5,0:1, dunkel
     dunkel 6,3:1 - weiß auf dem hellen Dunkel-Grün wären nur 3,1:1). */
  --ms-on-success: #ffffff;
  --ms-focus-ring: rgba(245, 203, 105, 0.4);
  /* Markengelb (Patrick, 2026-09-27: „‚Willkommen XYZ' ... in gelb
     hervorgehoben") - FESTER Farbwert unabhängig von Theme und eigener
     Palette (wird in den Dunkel-Blöcken bewusst NICHT überschrieben, siehe
     public/js/palette.js - erzeugt nur die --ms-accent*-Token). Nur als
     FLÄCHE mit dunkler Schrift verwenden (#1a1a1a auf #f9cf6d ≈ 12:1) -
     gelbe Schrift auf hellem Grund wäre unlesbar. Aktuell in Daysi
     ungenutzt (der Namens-Marker im Willkommen-Widget ist seit Runde 2
     entfallen, dort gilt die Kachel-Farbe „Gelb"); bleibt für die Tools
     über /_daysi/tokens.css erhalten. */
  --ms-brand-yellow: #f9cf6d;
  --ms-on-brand-yellow: #1a1a1a;
  /* Seitenhintergrund mit Tiefe (Patrick, 2026-09-27 - Ebene selbst in
     public/css/ui.css Abschnitt 14, gilt in Daysi UND in allen Tools).
     Alle Werte NUR aus --ms-bg/--ms-text/--ms-accent abgeleitet, damit
     eigene Paletten (lib/appearance.js, /theme/me.css bzw. der Anhang in
     /_daysi/tokens.css) ohne eigene Einträge mitziehen:
     - --ms-page-bg: Seitengrund auf <html>. Hell eine Spur dunkler/wärmer
       als --ms-bg (5 % Richtung Textfarbe, „Ebenen & Schatten"), dunkel
       unverändert --ms-bg.
     - --ms-depth-glow / --ms-depth-dots: Farbe des Lichtscheins (Akzent)
       bzw. des Punktrasters (Textfarbe) - nur im dunklen Theme sichtbar.
     - --ms-card-border-depth: zarterer Kartenrand im hellen Theme (die
       Kante kommt dort vom Schatten), dunkel --ms-border. */
  --ms-page-bg: color-mix(in srgb, var(--ms-bg) 95%, var(--ms-text));
  --ms-depth-glow: var(--ms-accent);
  --ms-depth-dots: var(--ms-text);
  --ms-card-border-depth: rgba(0, 0, 0, 0.05);

  color-scheme: light;
  font-family: var(--ms-font-ui);
}

/* Dunkles Theme: automatisch nach Systemeinstellung ("automatisch" in den
   Kontoeinstellungen), außer der Benutzer hat explizit Hell gewählt
   (data-theme="light" auf <html>, siehe views/layout.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ms-bg: #181715;
    --ms-elevated: #201e1a;
    --ms-surface: #24221e;
    --ms-surface-2: #2c2a25;
    --ms-surface-hover: #35322c;
    --ms-border: #322f2a;
    --ms-border-strong: #413e37;
    /* --ms-bar-* NICHT erneut gesetzt: die Bar ist bereits oben in :root
       (helles Theme) auf genau diese Dunkel-Werte festgelegt (siehe
       Kommentar dort) – im dunklen Theme bleibt sie unverändert. */
    --ms-text: #f2f0eb;
    --ms-text-muted: #a19d97;
    --ms-text-subtle: #94918a;
    --ms-accent: #e1b855;
    --ms-accent-hover: #f2c866;
    --ms-accent-border: transparent;
    --ms-on-accent: #1c1505;
    --ms-accent-text: #b38c1f;
    --ms-accent-soft: #32270d;
    --ms-accent-soft-text: #b28a1c;
    --ms-warn: #e0b04b;
    --ms-danger: #c05248;
    --ms-success: #6f9d6a;
    --ms-on-success: #1c1505;
    --ms-focus-ring: rgba(225, 184, 85, 0.4);
    /* Seitenhintergrund mit Tiefe, dunkel (siehe Kommentar im :root-Block). */
    --ms-page-bg: var(--ms-bg);
    --ms-shadow-card: none;
    --ms-card-border-depth: var(--ms-border);
    color-scheme: dark;
  }
}

/* Dunkles Theme: explizit vom Benutzer gewählt (data-theme="dark"). */
:root[data-theme='dark'] {
  --ms-bg: #181715;
  --ms-elevated: #201e1a;
  --ms-surface: #24221e;
  --ms-surface-2: #2c2a25;
  --ms-surface-hover: #35322c;
  --ms-border: #322f2a;
  --ms-border-strong: #413e37;
  /* --ms-bar-* NICHT erneut gesetzt, siehe Kommentar im
     @media(prefers-color-scheme: dark)-Block oben. */
  --ms-text: #f2f0eb;
  --ms-text-muted: #a19d97;
  --ms-text-subtle: #94918a;
  --ms-accent: #e1b855;
  --ms-accent-hover: #f2c866;
  --ms-accent-border: transparent;
  --ms-on-accent: #1c1505;
  --ms-accent-text: #b38c1f;
  --ms-accent-soft: #32270d;
  --ms-accent-soft-text: #b28a1c;
  --ms-warn: #e0b04b;
  --ms-danger: #c05248;
  --ms-success: #6f9d6a;
  --ms-on-success: #1c1505;
  --ms-focus-ring: rgba(225, 184, 85, 0.4);
  /* Seitenhintergrund mit Tiefe, dunkel (siehe Kommentar im :root-Block). */
  --ms-page-bg: var(--ms-bg);
  --ms-shadow-card: none;
  --ms-card-border-depth: var(--ms-border);
  color-scheme: dark;
}

/* ==========================================================================
   3. Reset & Basiselemente
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ms-bg);
  color: var(--ms-text);
  font-family: var(--ms-font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--ms-font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  color: var(--ms-text);
}

p {
  margin: 0 0 var(--ms-space-3);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  color: inherit;
}

svg {
  display: block;
}

/* Sichtbarer, konsistenter Fokus-Ring überall (Tastaturbedienung). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ms-focus-outline, var(--ms-accent));
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.text-muted,
.ms-text-muted {
  color: var(--ms-text-muted);
}

.ms-text-subtle {
  color: var(--ms-text-subtle);
}

/* Kleine Abstands-/Breiten-Utilities (ersetzen Inline-Styles, die die CSP
   nicht erlaubt). */
.ms-mt-3 {
  margin-top: var(--ms-space-3);
}

.ms-mt-4 {
  margin-top: var(--ms-space-4);
}

.ms-mt-6 {
  margin-top: var(--ms-space-6);
}

.ms-card--narrow {
  max-width: 480px;
}

.ms-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   4. Layout-Bausteine
   ========================================================================== */

.ms-container {
  max-width: var(--ms-container-max);
  margin: 0 auto;
  padding: var(--ms-space-8) var(--ms-gutter);
  width: 100%;
}

.ms-container--narrow {
  max-width: 640px;
}

.ms-container--reading {
  max-width: 720px;
}

/* Seiten, die die Bar einbinden, brauchen Platz oberhalb des Inhalts. */
body.has-topbar {
  padding-top: var(--ms-bar-height);
}

/* „Vorschau als Benutzer" (siehe lib/preview.js, views/bar.js): der Banner
   direkt unter der Bar braucht zusätzlichen Platz, sonst würde er den
   Seitenanfang verdecken (Aufgabenstellung §5 "adjust padding so nothing
   is covered"). Nur für Daysi-eigene Seiten (Light DOM, views/layout.js
   setzt die Klasse) – auf fremden Tool-Hosts löst public/js/bar.js
   dasselbe rein über --ms-bar-height (siehe dortigen Kommentar). */
body.has-topbar.ms-has-preview {
  padding-top: calc(var(--ms-bar-height) + var(--ms-preview-banner-height));
}

/* -- Topbar ------------------------------------------------------------ */

/* Sprunglink „Zum Inhalt springen" (Barrierefreiheit, WCAG 2.4.1) - erstes
   Element der Bar (views/bar.js), nur bei Tastaturfokus sichtbar. */
.ms-skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 8px 14px;
  border-radius: var(--ms-radius, 8px);
  background: var(--ms-bar-accent, #e1b855);
  color: #1c1505;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.ms-skip-link:focus,
.ms-skip-link:focus-visible {
  transform: none;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.ms-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--ms-bar-height);
  /* Bleibt in BEIDEN Themes dunkel (Nutzeranfrage, siehe Token-Kommentar bei
     --ms-bar-bg oben) – dadurch auch klar von der Sidebar abgesetzt (die
     --ms-elevated behält, siehe public/css/sidebar.css). */
  background: var(--ms-bar-bg);
  border-bottom: 1px solid var(--ms-bar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-4);
  padding: 0 var(--ms-space-6);
}

/* Fokus-Ring innerhalb der Bar: --ms-bar-accent statt der globalen
   --ms-accent (siehe Regel oben in Abschnitt 3) – die Bar ist jetzt IMMER
   dunkel, --ms-accent könnte im hellen Theme dagegen zu kontrastarm sein. */
.ms-topbar a:focus-visible,
.ms-topbar button:focus-visible {
  outline-color: var(--ms-bar-accent);
}

/* „Vorschau als Benutzer" (Admin, read-only, siehe lib/preview.js) – der
   Banner-Streifen direkt unter der Bar (Aufgabenstellung §5), auf JEDEM
   Host (Daysi + Tools, siehe views/bar.js#renderPreviewBanner). Warnton
   aus den Design-Tokens (--ms-warn), keine eigene Farbe. */
.ms-preview-banner {
  position: fixed;
  top: var(--ms-bar-height);
  left: 0;
  right: 0;
  z-index: 99;
  height: var(--ms-preview-banner-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-3);
  padding: 0 var(--ms-space-4);
  background: color-mix(in srgb, var(--ms-warn) 16%, var(--ms-bar-bg));
  border-bottom: 1px solid var(--ms-warn);
  /* --ms-bar-fg statt --ms-text: die Bar (und damit dieser direkt darunter
     liegende Banner) ist jetzt IMMER dunkel – --ms-text wäre im hellen
     Theme dunkel und auf dem dunklen Banner-Hintergrund unlesbar. */
  color: var(--ms-bar-fg);
  font-size: 13px;
  text-align: center;
}

.ms-preview-banner__icon {
  color: var(--ms-warn);
  display: inline-flex;
}

.ms-preview-banner__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-preview-banner__end {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--ms-warn);
  border-radius: var(--ms-radius);
  padding: 4px 10px;
  font: inherit;
  font-weight: 600;
  color: var(--ms-bar-fg);
  cursor: pointer;
}

.ms-preview-banner__end:hover {
  background: color-mix(in srgb, var(--ms-warn) 22%, transparent);
}

@media (max-width: 640px) {
  .ms-preview-banner {
    padding: 0 var(--ms-space-2);
    gap: var(--ms-space-2);
  }

  .ms-preview-banner__end span {
    display: none;
  }
}

.ms-topbar__left,
.ms-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--ms-space-4);
  min-width: 0;
}

.ms-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  color: var(--ms-bar-fg);
  flex-shrink: 0;
}

.ms-topbar__logo {
  width: 24px;
  height: 24px;
  color: var(--ms-bar-fg);
  flex-shrink: 0;
}

.ms-topbar__wordmark {
  font-family: var(--ms-font-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ms-topbar__divider {
  width: 1px;
  height: 24px;
  background: var(--ms-bar-control-border);
  flex-shrink: 0;
}

.ms-topbar__page {
  font-size: 14px;
  font-weight: 500;
  color: var(--ms-bar-fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -- Übersicht-Button + User-Chip (öffnen Dropdowns) -------------------- */

.ms-topbar__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  background: transparent;
  border: 1px solid var(--ms-bar-control-border);
  border-radius: var(--ms-radius);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ms-bar-fg);
  transition: border-color var(--ms-transition-fast), background var(--ms-transition-fast);
}

.ms-topbar__btn:hover,
.ms-topbar__btn[aria-expanded='true'] {
  border-color: var(--ms-bar-accent);
  background: var(--ms-bar-hover);
}

.ms-topbar__btn .ms-icon {
  width: 16px;
  height: 16px;
}

.ms-topbar__chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--ms-transition-fast);
}

.ms-topbar__btn[aria-expanded='true'] .ms-topbar__chevron {
  transform: rotate(180deg);
}

/* „Übersicht" nur als Icon, ohne Rahmen und Beschriftung (Patrick,
   2026-09-27) - eigene Klasse OHNE .ms-topbar__btn, damit keine Rahmen-/
   Hover-Regel des Standard-Buttons durchschlägt. War hier bislang NICHT
   definiert (nur in public/css/bar.css für den Shadow-DOM-Fall auf fremden
   Tool-Hosts) - auf den Daysi-eigenen Seiten (dieses Stylesheet, direkt
   über views/layout.js geladen) blieb der Button dadurch ungestylt und
   zeigte je nach Browser dessen native Standard-Fläche (grauer Hintergrund) -
   Ursache für den „fehlerhaften Hintergrund" beim Übersicht-Icon (Patrick,
   2026-09-28). Hover zusätzlich nur @media (hover: hover): auf Touch-Geräten
   bleibt :hover nach dem Antippen sonst bis zum nächsten Tap "hängen" und
   sähe genauso aus wie der jetzt behobene Fehler. */
.ms-topbar__iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: var(--ms-radius);
  color: var(--ms-bar-fg);
  cursor: pointer;
  transition: background var(--ms-transition-fast);
}

.ms-topbar__iconbtn[aria-expanded='true'] {
  background: var(--ms-bar-hover);
}

@media (hover: hover) {
  .ms-topbar__iconbtn:hover {
    background: var(--ms-bar-hover);
  }
}

.ms-topbar__iconbtn .ms-icon {
  width: 18px;
  height: 18px;
}

.ms-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--ms-bar-control-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ms-bar-fg);
  flex-shrink: 0;
}

.ms-topbar__user-name {
  white-space: nowrap;
}

/* -- Dropdown-Menüs ------------------------------------------------------ */

.ms-dropdown-wrap {
  position: relative;
}

.ms-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--ms-elevated);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-dropdown);
  padding: var(--ms-space-2);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 200;
}

.ms-dropdown[data-open='true'] {
  display: flex;
}

.ms-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  min-height: 40px;
  padding: 0 var(--ms-space-3);
  border-radius: 6px;
  font-size: 14px;
  color: var(--ms-text);
  background: transparent;
  border: none;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

.ms-dropdown__item:hover,
.ms-dropdown__item:focus-visible {
  background: var(--ms-surface-2);
  outline: none;
}

/* Barrierefreiheit: Tastaturfokus nicht nur über die kaum abgesetzte
   Hover-Fläche, sondern mit kontraststarkem Innenring. */
.ms-dropdown__item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ms-focus-outline, var(--ms-accent));
}

.ms-dropdown__item[aria-current='true'] {
  color: var(--ms-accent-text);
  font-weight: 600;
}

.ms-dropdown__item .ms-icon {
  color: var(--ms-text-muted);
  width: 17px;
  height: 17px;
}

.ms-dropdown__divider {
  height: 1px;
  background: var(--ms-border);
  margin: var(--ms-space-2) var(--ms-space-1);
}

.ms-dropdown__label {
  padding: var(--ms-space-2) var(--ms-space-3) var(--ms-space-1);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ms-text-subtle);
}

/* „Ansicht wechseln" (Admin -> Testuser_-Konten, lib/testSwitch.js,
   views/bar.js#renderViewSwitch) - oben in der Mitte der Bar. Identischer
   Block in public/ms.css (Daysi-Seiten) und public/css/bar.css (Shadow DOM
   fremder Tool-Hosts). Während der Test-Ansicht warnfarben hinterlegt. */
.ms-topbar__center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 520px);
  min-width: 0;
  display: flex;
  justify-content: center;
}

.ms-viewswitch {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-width: 0;
  padding: 3px 4px 3px 10px;
  border: 1px solid var(--ms-bar-control-border);
  border-radius: 999px;
  color: var(--ms-bar-fg);
  font-size: 13px;
}

.ms-viewswitch--active {
  border-color: var(--ms-warn);
  background: color-mix(in srgb, var(--ms-warn) 18%, var(--ms-bar-bg));
}

.ms-viewswitch .ms-icon {
  width: 16px;
  height: 16px;
}

.ms-viewswitch__notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-viewswitch__notice .ms-icon {
  color: var(--ms-warn);
}

.ms-viewswitch__form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.ms-viewswitch__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ms-bar-fg-muted);
  white-space: nowrap;
}

.ms-viewswitch__select {
  min-width: 0;
  max-width: 14rem;
  padding: 4px 10px;
  font: inherit;
  color: var(--ms-bar-fg);
  background: var(--ms-bar-hover);
  border: 1px solid var(--ms-bar-control-border);
  border-radius: 999px;
  color-scheme: dark;
  cursor: pointer;
}

.ms-viewswitch__select:focus-visible,
.ms-viewswitch__go:focus-visible,
.ms-viewswitch__back:focus-visible {
  outline: 2px solid var(--ms-bar-accent);
  outline-offset: 1px;
}

.ms-viewswitch__go,
.ms-viewswitch__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 4px 10px;
  font: inherit;
  font-weight: 600;
  color: var(--ms-bar-fg);
  background: transparent;
  border: 1px solid var(--ms-bar-control-border);
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
}

.ms-viewswitch__back {
  border-color: var(--ms-warn);
}

.ms-viewswitch__go:hover,
.ms-viewswitch__back:hover {
  background: color-mix(in srgb, var(--ms-warn) 22%, transparent);
}

.ms-viewswitch__go[hidden] {
  display: none;
}

/* Mittlere Breiten: nicht mehr absolut zentriert (würde links/rechts
   überdecken), sondern im normalen Fluss zwischen beiden Seiten; der
   Hinweistext weicht, das Warn-Symbol + die Farbe bleiben. */
@media (max-width: 1100px) {
  .ms-topbar__center {
    position: static;
    transform: none;
    max-width: none;
    flex: 0 1 auto;
  }

  .ms-viewswitch__notice > span {
    display: none;
  }
}

@media (max-width: 640px) {
  .ms-viewswitch {
    gap: 4px;
    padding: 2px;
  }

  .ms-viewswitch__label {
    display: none;
  }

  .ms-viewswitch__notice {
    padding-left: 6px;
  }

  .ms-viewswitch__select {
    max-width: 7.5rem;
    padding: 4px 6px;
  }

  .ms-viewswitch__go,
  .ms-viewswitch__back {
    padding: 4px 6px;
  }
}

/* Schmale Bildschirme: Seitenlabel + Vorname ausblenden, Dropdowns werden
   volle Panels statt kleiner Popover. */
@media (max-width: 640px) {
  .ms-topbar {
    padding: 0 var(--ms-space-3);
  }

  [data-ms-hide-narrow] {
    display: none;
  }

  /* Seit dem „Verwalten"-Dropdown (nur für Administratoren, siehe
     views/bar.js#renderTopbar) stehen rechts bis zu drei Buttons
     nebeneinander statt zwei - engerer Abstand/Innenabstand hier hält das
     auch auf schmalen Bildschirmen ohne horizontales Scrollen beisammen
     (siehe zweite Stufe unten für die schmalsten Geräte, z. B. iPhone SE
     mit 320px; identischer Block in public/css/bar.css für den Shadow-DOM-
     Kontext auf fremden Tool-Hosts). */
  .ms-topbar__right {
    gap: var(--ms-space-2);
  }

  .ms-topbar__btn {
    padding: 8px;
  }

  .ms-dropdown {
    position: fixed;
    top: calc(var(--ms-bar-height) + 8px);
    left: var(--ms-space-3);
    right: var(--ms-space-3);
    min-width: 0;
  }
}

/* Schmalste gängige Geräte (z. B. iPhone SE, 320px): mit drei möglichen
   Buttons rechts (Übersicht/Verwalten/Benutzer) reicht der Platz selbst mit
   den Verkleinerungen oben nicht mehr für die Wortmarke links - die bleibt
   deshalb hier aus, das Logo allein reicht als Marke. */
@media (max-width: 400px) {
  .ms-topbar__wordmark {
    display: none;
  }
}

/* ==========================================================================
   5. Komponenten
   ========================================================================== */

/* -- Karten -----------------------------------------------------------------
   .ms-card/.ms-card__title/-__subtitle/-__grid: ausgelagert nach
   public/css/ui.css (UI-Baukasten, siehe dortigen Kommentar) - EINE Quelle
   für Daysi UND Tools statt einer zweiten Kopie hier. -------------------- */

/* -- KPI-Anzeigen ---------------------------------------------------------- */

.ms-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ms-kpi__label {
  font-size: 12.5px;
  color: var(--ms-text-muted);
}

.ms-kpi__value {
  font-size: 20px;
  font-weight: 600;
}

.ms-kpi--hero {
  padding-bottom: var(--ms-space-3);
  margin-bottom: var(--ms-space-1);
  border-bottom: 1px solid var(--ms-border);
}

.ms-kpi--hero .ms-kpi__value {
  font-family: var(--ms-font-display);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.1;
}

/* -- Zeilen (Label links, Wert rechts, mit Trennlinien) -------------------- */

.ms-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ms-space-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--ms-border);
  font-size: 14px;
}

.ms-row:last-of-type {
  border-bottom: none;
}

.ms-row__label {
  color: var(--ms-text);
}

.ms-row__meta {
  display: block;
  font-size: 12px;
  color: var(--ms-text-subtle);
}

.ms-row__value {
  font-weight: 600;
  white-space: nowrap;
}

/* -- Link mit Pfeil -------------------------------------------------------- */

.ms-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--ms-space-4);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ms-text);
}

.ms-link-arrow .ms-icon {
  width: 15px;
  height: 15px;
  transition: transform var(--ms-transition-fast);
}

.ms-link-arrow:hover {
  text-decoration: underline;
}

.ms-link-arrow:hover .ms-icon {
  transform: translateX(3px);
}

/* „Im Tool öffnen" am Ende eines Dashboard-Bausteins (Patrick 2026-10-01:
   „als schönen dezenten Button"): kompakter Sekundär-Knopf (.ms-btn--secondary
   aus dem UI-Kit), unten rechts - gleiche Maße wie die Knöpfe in der Fußzeile
   der KI-Checkliste (.ms-aicheck__actions .ms-btn). Im (zentrierten)
   Leerzustand eines Bausteins steht er mittig unter dem Hinweistext. */
.ms-block-open {
  display: flex;
  width: fit-content;
  height: 30px;
  margin: var(--ms-space-4) 0 0 auto;
  padding: 0 10px;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.ms-block-open:hover {
  text-decoration: none;
}

.ms-block-open .ms-icon,
.ms-block-open ms-icon {
  width: 14px;
  height: 14px;
  transition: transform var(--ms-transition-fast);
}

.ms-block-open:hover .ms-icon {
  transform: translateX(2px);
}

.ms-empty__text .ms-block-open {
  margin: var(--ms-space-3) auto 0;
}

/* -- Dashboard-Grid (Tool-Kacheln + Übersicht-Karten, .ms-block) ----------- */
/* Selbst gestaltbares Daysi-Dashboard: EIN gemeinsames Grid für Kacheln
   UND Übersicht-Karten, jeder Baustein eine .ms-block-Hülle mit Breite
   1-4 Spalten (.ms-block--w1 … --w4, siehe Abschnitt "Dashboard
   anpassen" am Dateiende). Mobil 1, Tablet 2, Desktop (ab ~1100px) 4
   Spalten - `grid-column: span N` wird vom Browser automatisch auf die
   tatsächlich vorhandene Spaltenzahl gekappt, eigene Breakpoint-
   Overrides je Baustein sind dafür nicht nötig (CSS-Grid-Spezifikation:
   ein zu großer Span wird auf die explizite Spaltenzahl begrenzt). */

.ms-tiles {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row dense;
  gap: var(--ms-space-4);
}

@media (min-width: 700px) {
  .ms-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .ms-tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Die Sidebar (Aufgabenstellung "einheitliche Sidebar auf ALLEN
   Daysi-Seiten") frisst ab 768px dauerhaft --ms-sidebar-width-expanded Breite vom
   Fenster - ohne Anpassung würde das Grid schon bei deutlich weniger
   tatsächlich verbleibender Inhaltsbreite auf 2/4 Spalten springen als in
   den Tools ohne Sidebar. Die Schwellen wandern deshalb um ungefähr die
   Sidebar-Breite nach hinten (768px als Basis, ab dort ist die Sidebar
   fest/nicht mehr der Mobil-Drawer, siehe @media (max-width: 767px) oben).
   Eingeklappt (--ms-sidebar-width-collapsed) bleibt es bei denselben,
   etwas später als nötig ausgelösten Schwellen - besser ein Baustein zu
   viel wartet als eine zu schmale Spalte. */
@media (min-width: 768px) and (max-width: 947px) {
  body.ms-has-sidebar .ms-tiles {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 948px) and (max-width: 1347px) {
  body.ms-has-sidebar .ms-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1348px) {
  body.ms-has-sidebar .ms-tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Ein Baustein mit grid-column:span 2/3/4 (z. B. eine Übersicht-Karte)
   erzeugt sonst eine IMPLIZITE zweite Spur, sobald das Grid nur EINE
   explizite Spalte hat (schmales Fenster, oder mit Sidebar entsprechend
   reduzierte Inhaltsbreite) - die fällt dann viel schmaler aus als die
   Kachel daneben, statt sauber untereinander zu stehen (CSS-Grid füllt die
   fehlenden Spalten sonst mit auto-Breite). In JEDEM 1-Spalten-Zustand
   deshalb alle Bausteine bewusst auf volle Breite zurücksetzen - unabhängig
   davon, ob dieser Zustand durch die reine Fensterbreite oder durch die
   Sidebar zustande kommt. */
@media (max-width: 699px) {
  .ms-block {
    grid-column: span 1 !important;
  }
}

@media (min-width: 768px) and (max-width: 947px) {
  body.ms-has-sidebar .ms-block {
    grid-column: span 1 !important;
  }
}

.ms-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-3);
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: var(--ms-space-6) var(--ms-space-3);
  text-align: center;
  color: var(--ms-text);
  transition: border-color var(--ms-transition-fast), transform var(--ms-transition-fast);
}

a.ms-tile:hover {
  border-color: var(--ms-border-strong);
  transform: translateY(-2px);
}

.ms-tile__icon {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
  color: var(--ms-text);
}

.ms-tile__label {
  font-size: 13.5px;
  font-weight: 500;
}

.ms-tile--disabled {
  opacity: 0.5;
  cursor: default;
}

.ms-tile__badge {
  margin-top: -4px;
}

/* -- Buttons / Formularfelder -------------------------------------------
   .ms-btn-*, .ms-form, .ms-field-* und .ms-checkbox: ausgelagert nach
   public/css/ui.css (UI-Baukasten) - EINE Quelle für Daysi UND Tools.
   Standardhöhe der Knöpfe seither einheitlich 40px/klein 32px (vorher
   44/48px) - siehe dortigen Kommentar. --------------------------------- */

.ms-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  font-size: 13.5px;
}

.ms-row-between a {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--ms-text-muted);
}

.ms-row-between a:hover {
  color: var(--ms-text);
}

/* fieldset.ms-fieldset: ausgelagert nach public/css/ui.css (UI-Baukasten). */

/* -- Segmented Control (Theme-Auswahl) --------------------------------------- */

.ms-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--ms-surface-2);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-pill);
  padding: 3px;
}

.ms-segmented__option {
  position: relative;
}

.ms-segmented__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ms-segmented__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--ms-radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ms-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ms-transition-fast), color var(--ms-transition-fast);
}

.ms-segmented__option input:checked + .ms-segmented__label,
button.ms-segmented__label[aria-pressed='true'] {
  background: var(--ms-elevated);
  color: var(--ms-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

button.ms-segmented__label {
  border: none;
  background: transparent;
  cursor: pointer;
}

.ms-segmented__option input:focus-visible + .ms-segmented__label {
  outline: 2px solid var(--ms-focus-outline, var(--ms-accent));
  outline-offset: 2px;
}

.ms-segmented__label .ms-icon {
  width: 15px;
  height: 15px;
}

/* -- Tabellen / Meldungen / Badges ----------------------------------------
   .ms-table*, .ms-table-actions, .ms-inline-form, .ms-alert*, .ms-badge/
   -__success: ausgelagert nach public/css/ui.css (UI-Baukasten) - EINE
   Quelle für Daysi UND Tools. Nur die workspace-spezifischen Rollen-
   Badges (nicht generisch genug für den Baukasten) bleiben hier. --------- */

/* Rollen-Badges für Workspaces (Phase W-A, siehe views/workspacesPage.js,
   public/js/sidebar.js) - Eigentümer betont in der Akzentfarbe, Freigaben
   neutral/gedämpft. */
.ms-badge--role-owner {
  background: var(--ms-accent-soft);
  border-color: transparent;
  color: var(--ms-accent-soft-text);
}

.ms-badge--role-viewer {
  color: var(--ms-text-subtle);
}

/* -- Workspaces (Phase W-A) ------------------------------------------------ */

.ms-workspace-list {
  display: grid;
  gap: var(--ms-space-4);
}

.ms-row-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ms-space-2);
  flex-wrap: wrap;
}

.ms-row-inline .ms-field {
  flex: 1 1 220px;
  gap: 0;
}

.ms-select-small {
  font: inherit;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: var(--ms-radius);
  border: 1px solid var(--ms-border);
  background: var(--ms-surface);
  color: var(--ms-text);
}

.ms-details {
  border-top: 1px solid var(--ms-border);
  padding-top: var(--ms-space-3);
  margin-top: var(--ms-space-3);
}

.ms-details > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ms-text);
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  list-style: none;
}

.ms-details > summary::-webkit-details-marker {
  display: none;
}

.ms-details > summary .ms-icon {
  width: 16px;
  height: 16px;
  color: var(--ms-text-muted);
}

.ms-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ms-dot--warn {
  background: var(--ms-warn);
}

.ms-dot--success {
  background: var(--ms-success);
}

/* -- MFA / Einmal-Links (Audit M7/M8) -------------------------------------------- */

.ms-mfa-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-6);
}

.ms-mfa-steps > li {
  padding-top: var(--ms-space-4);
  border-top: 1px solid var(--ms-border);
}

.ms-mfa-steps > li:first-child {
  padding-top: 0;
  border-top: none;
}

.ms-mfa-qr {
  display: inline-block;
  padding: var(--ms-space-3);
  background: #fff;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  margin: var(--ms-space-2) 0;
}

.ms-mfa-qr img {
  display: block;
  width: 220px;
  height: 220px;
}

.ms-copy-row {
  display: flex;
  align-items: stretch;
  gap: var(--ms-space-2);
}

.ms-copy-row__value {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  padding: var(--ms-space-2) var(--ms-space-3);
  background: var(--ms-surface-2);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  color: var(--ms-text);
  overflow-x: auto;
  white-space: nowrap;
}

input.ms-copy-row__value {
  height: 38px;
}

.ms-recovery-codes {
  list-style: none;
  margin: var(--ms-space-4) 0 0;
  padding: var(--ms-space-4);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--ms-space-2) var(--ms-space-4);
  background: var(--ms-surface-2);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
}

.ms-recovery-codes__item {
  letter-spacing: 0.02em;
}

/* -- Checkbox-Grid (Tool-Berechtigungen in der Verwaltung) ---------------------- */

.ms-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--ms-space-2);
}

.ms-tool-grid__item {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  padding: 10px 12px;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  font-size: 13.5px;
}

.ms-tool-grid__item .ms-icon {
  width: 17px;
  height: 17px;
  color: var(--ms-text-muted);
}

/* -- Erscheinungsbild (persönliche Login-Seite, Bild, Farbe) --------------------
   Karte "Mein Erscheinungsbild" auf /account und /admin/users/:id, siehe
   views/appearance.js + public/js/appearance.js. */

.ms-appearance__section {
  padding-top: var(--ms-space-6);
  margin-top: var(--ms-space-6);
  border-top: 1px solid var(--ms-border);
}

.ms-appearance__section:first-of-type {
  padding-top: 0;
  margin-top: var(--ms-space-4);
  border-top: none;
}

.ms-appearance__section-title {
  font-family: var(--ms-font-ui);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 var(--ms-space-3);
}

/* -- Bild / Bildausschnitt -------------------------------------------------- */

.ms-appearance-hero {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 10;
  border-radius: var(--ms-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ms-border);
  background: var(--ms-surface-2);
  cursor: crosshair;
  margin-bottom: var(--ms-space-3);
}

.ms-appearance-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-appearance-hero__empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-2);
  color: var(--ms-text-subtle);
  font-size: 13px;
  cursor: default;
}

.ms-appearance-hero__empty .ms-icon {
  width: 28px;
  height: 28px;
}

.ms-appearance-hero__crosshair {
  position: absolute;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  margin-top: -11px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* -- Farbauswahl -------------------------------------------------------------- */

.ms-appearance-color-row {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
}

.ms-appearance-color-row input[type='color'] {
  width: 44px;
  height: 44px;
  padding: 2px;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  background: var(--ms-surface);
  flex-shrink: 0;
  cursor: pointer;
}

/* Das Hex-Feld steht nicht in einem .ms-field (siehe ui.css) - deshalb hier
   die vollständigen Feld-Stile, schmal statt über die ganze Breite. */
.ms-appearance-color-row input[type='text'] {
  width: 140px;
  height: 44px;
  padding: 0 var(--ms-space-3);
  background: var(--ms-surface);
  color: var(--ms-text);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
}

.ms-appearance-color-row input[type='text']:focus {
  outline: none;
  border-color: var(--ms-focus-outline, var(--ms-accent));
  box-shadow: 0 0 0 3px var(--ms-focus-ring);
}

.ms-appearance-swatches {
  margin-top: var(--ms-space-3);
}

.ms-appearance-swatches__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  margin-top: 6px;
}

.ms-appearance-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--ms-surface);
  box-shadow: 0 0 0 1px var(--ms-border);
  background: var(--ms-swatch-color, #ccc);
  cursor: pointer;
  padding: 0;
}

.ms-appearance-swatch:hover,
.ms-appearance-swatch:focus-visible {
  box-shadow: 0 0 0 2px var(--ms-border-strong);
}

/* -- Live-Vorschau (public/js/appearance.js baut den Inhalt zur Laufzeit,
   setzt die --ms-*-Token je Vorschau-Kachel per element.style.setProperty –
   das ist CSSOM, keine Inline-style-Attribute im HTML, daher CSP-konform:
   script-src 'self' erlaubt das externe Skript, style-src 'self' betrifft
   nur <style>/style=""-Attribute im MARKUP, nicht Eigenschaften, die JS zur
   Laufzeit auf existierenden Elementen setzt) ------------------------------- */

.ms-appearance-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ms-space-4);
  margin-top: var(--ms-space-4);
}

.ms-appearance-preview:empty {
  display: none;
}

.ms-appearance-preview__theme {
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  overflow: hidden;
}

.ms-appearance-preview__label {
  padding: 6px var(--ms-space-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ms-text-subtle);
  background: var(--ms-surface-2);
  border-bottom: 1px solid var(--ms-border);
}

.ms-appearance-preview__mock {
  padding: var(--ms-space-4);
  background: var(--ms-bg);
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-3);
}

.ms-appearance-preview__mock-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: var(--ms-space-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ms-space-2);
}

.ms-appearance-preview__mock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 var(--ms-space-3);
  border-radius: var(--ms-radius);
  border: 1px solid var(--ms-accent-border);
  background: var(--ms-accent);
  color: var(--ms-on-accent);
  font-size: 13px;
  font-weight: 600;
}

.ms-appearance-preview__mock-link {
  color: var(--ms-accent-text);
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ms-appearance-preview__mock-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-accent-soft);
  color: var(--ms-accent-soft-text);
  font-size: 11px;
  font-weight: 600;
}

.ms-appearance-preview__mock-text {
  color: var(--ms-text-muted);
  font-size: 12px;
}

.ms-appearance-preview__contrasts {
  list-style: none;
  margin: 0;
  padding: var(--ms-space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ms-text-muted);
  background: var(--ms-surface);
  border-top: 1px solid var(--ms-border);
}

.ms-appearance-preview__contrasts strong {
  color: var(--ms-text);
}

.ms-appearance-preview__contrasts .ms-appearance-preview__fail {
  color: var(--ms-danger-text, var(--ms-danger));
}

/* -- Daysi-Sidebar: Hauptleiste (Start/Tools/Konto) -------------------------
   Aufgabenstellung "Bei der Verwaltung auch schon die Sidebar mit anzeigen,
   damit alles überall einheitlich ist. Immer die Sidebar einblenden.", dann
   Patrick (Ausrollen auf alle Tools): "Lass uns diese Art von Sidebar auch
   für alle Tools so ausrollen." Die eigentlichen .ms-sidebar*-Regeln (Breite,
   --ms-elevated, Eintrags-/Hover-/Aktiv-Stile, Mobil-Drawer-Grundform) stehen
   NICHT mehr hier, sondern in public/css/sidebar-main.css - EINE Datei, die
   sowohl Daysi (Link unten, siehe views/layout.js) als auch der Shadow
   Root von <ms-sidebar> in jedem Tool laden (GET /_daysi/sidebar-main.css,
   siehe routes/daysi.js). Hier bleiben nur die paar Regeln, die den
   Einklapp-/Mobil-ZUSTAND ans Daysi-eigene Light-DOM-Markup binden
   (Klassen auf <html>/<body>, siehe public/js/daysi-sidebar.js) - im
   Shadow DOM der Tools übernimmt public/css/sidebar.css dieselbe Aufgabe
   über ":host([data-collapsed])"/":host([data-mobile-open])" (siehe dortigen
   Kommentar), weil ein Shadow-Root-Stylesheet kein "html"/"body" außerhalb
   seiner eigenen Grenze sehen kann. */

body.ms-has-preview .ms-sidebar {
  top: calc(var(--ms-bar-height) + var(--ms-preview-banner-height));
}

body.ms-has-sidebar {
  padding-left: var(--ms-sidebar-width-expanded);
}

/* Eingeklappt (Desktop): Klasse auf <html>, siehe public/js/daysi-sidebar*.js
   (dieselbe Klasse setzt bereits ein blockierendes Skript VOR dem ersten
   Malen, damit die Sidebar nie erst breit aufblitzt und danach
   zusammenklappt). */
html.ms-sidebar-collapsed .ms-sidebar {
  width: var(--ms-sidebar-width-collapsed);
}

html.ms-sidebar-collapsed body.ms-has-sidebar {
  padding-left: var(--ms-sidebar-width-collapsed);
}

/* Nur die HAUPTLEISTE (<aside class="ms-sidebar">) verliert beim Einklappen
   ihre Beschriftungen. Die zweite Spalte (.ms-sidebar2, ein Geschwister-
   Element, nutzt dieselben .ms-sidebar__item/-__label-Bausteine) bleibt
   voll beschriftet - vorher griffen diese Regeln auch dort und die
   Verwaltungs-/Konto-Unternavigation zeigte nur Icons, sobald die
   Hauptleiste eingeklappt war (Standard unter 1440px; Patrick, 2026-09-27). */
html.ms-sidebar-collapsed .ms-sidebar .ms-sidebar__label,
html.ms-sidebar-collapsed .ms-sidebar .ms-sidebar__heading,
html.ms-sidebar-collapsed .ms-sidebar .ms-sidebar__badge,
html.ms-sidebar-collapsed .ms-sidebar .ms-sidebar__hint,
html.ms-sidebar-collapsed .ms-sidebar .ms-sidebar__collapse-label {
  display: none;
}

html.ms-sidebar-collapsed .ms-sidebar .ms-sidebar__item,
html.ms-sidebar-collapsed .ms-sidebar .ms-sidebar__collapse-btn {
  justify-content: center;
}

/* Rechtliches (Impressum/Datenschutz/Nutzungsbedingungen) über dem
   Einklapp-Schalter der Daysi-Hauptleiste - Gegenstück zu .ms-sb__legal der
   Tool-Sidebar (public/css/sidebar.css). Eingeklappt nur ein Icon-Link. */
.ms-sidebar__legal {
  flex-shrink: 0;
  padding: 0 var(--ms-space-2);
}

.ms-sidebar__legal-links {
  margin: 0;
  padding: var(--ms-space-2) var(--ms-space-3);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ms-text-subtle);
  text-align: center;
}

.ms-sidebar__legal-links a {
  color: inherit;
  text-decoration: none;
}

.ms-sidebar__legal-links a:hover,
.ms-sidebar__legal-links a:focus-visible {
  color: var(--ms-text-muted);
  text-decoration: underline;
}

.ms-sidebar__legal-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border-radius: var(--ms-radius);
  color: var(--ms-text-subtle);
}

.ms-sidebar__legal-icon:hover {
  background: var(--ms-surface-2);
  color: var(--ms-text-muted);
}

.ms-sidebar__legal-icon svg {
  width: 16px;
  height: 16px;
}

html.ms-sidebar-collapsed .ms-sidebar .ms-sidebar__legal-links {
  display: none;
}

html.ms-sidebar-collapsed .ms-sidebar .ms-sidebar__legal-icon {
  display: flex;
}

/* -- Daysi-Sidebar: zweite Spalte (Konto- bzw. Verwaltungs-Unternavigation) -
   Patrick: "In der Sidebar-Navigation kannst du Verwaltung komplett
   rausnehmen. Es reicht, wenn sie über das Dropdown erreichbar ist. Wenn ich
   Konto öffne, wäre es schöner, wenn einfach eine zweite Spalte von der
   Sidebar aufgeht." Erscheint NUR auf Seiten mit einer zweiten Spalte
   (views/sidebar.js#buildSidebar liefert dafür `second`, sonst null) -
   rechts neben der Hauptleiste, volle Höhe unter der Bar (inkl.
   Vorschau-Banner). Wiederverwendet dieselben .ms-sidebar__item-Bausteine
   wie die Hauptleiste ("aus derselben Familie"), aber mit einer leicht
   helleren/dunkleren Fläche (--ms-surface-2 statt --ms-elevated) und einer
   Trennlinie - macOS-artig von der Hauptleiste abgesetzt. Bleibt bei
   eingeklappter Hauptleiste in voller Breite/Beschriftung stehen, rückt nur
   ihren linken Rand nach (Aufgabenstellung "Funktioniert auch bei
   eingeklappter Hauptleiste"). */

.ms-sidebar2 {
  /* Feste Zeilenhöhe: Daysi-Seiten erben sonst 1.55 vom Body (ms.css),
     Tools die Browser-Vorgabe "normal" - dadurch waren die Einträge im
     Daysi höher als in den Tools (Patrick, 2026-09-25). */
  line-height: normal;
  position: fixed;
  top: var(--ms-bar-height);
  left: var(--ms-sidebar-width-expanded);
  bottom: 0;
  width: var(--ms-sidebar2-width);
  background: var(--ms-surface-2);
  border-right: 1px solid var(--ms-border);
  overflow-y: auto;
  z-index: 39;
  padding: var(--ms-space-3) var(--ms-space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: left var(--ms-transition);
}

@media (prefers-reduced-motion: reduce) {
  .ms-sidebar2 {
    transition: none;
  }
}

body.ms-has-preview .ms-sidebar2 {
  top: calc(var(--ms-bar-height) + var(--ms-preview-banner-height));
}

html.ms-sidebar-collapsed .ms-sidebar2 {
  left: var(--ms-sidebar-width-collapsed);
}

/* Reihenfolge wichtig: NACH den .ms-has-sidebar-Regeln oben, damit bei
   gleicher Spezifität (je ein Klassen-Selektor auf body) die zweite Spalte
   den Inhalt zusätzlich um ihre eigene Breite einrückt. */
body.ms-has-sidebar2 {
  padding-left: calc(var(--ms-sidebar-width-expanded) + var(--ms-sidebar2-width));
}

html.ms-sidebar-collapsed body.ms-has-sidebar2 {
  padding-left: calc(var(--ms-sidebar-width-collapsed) + var(--ms-sidebar2-width));
}

.ms-sidebar2__back {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  padding: 7px var(--ms-space-3);
  margin-bottom: var(--ms-space-2);
  border-radius: var(--ms-radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--ms-text-muted);
  text-decoration: none;
  flex-shrink: 0;
}

.ms-sidebar2__back:hover {
  background: var(--ms-surface);
  color: var(--ms-text);
}

.ms-sidebar2__back-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ms-sidebar2__title {
  margin: var(--ms-space-1) 0 var(--ms-space-2);
  padding: 0 var(--ms-space-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ms-text-subtle);
  flex-shrink: 0;
}

.ms-sidebar2__user {
  flex-shrink: 0;
  padding: var(--ms-space-2) var(--ms-space-3) var(--ms-space-3);
  margin-bottom: var(--ms-space-1);
  border-bottom: 1px solid var(--ms-border);
}

.ms-sidebar2__user-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ms-text);
  overflow-wrap: anywhere;
}

.ms-sidebar2__user-meta {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ms-text-subtle);
  overflow-wrap: anywhere;
}

.ms-sidebar2__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Markierung der aktuellen SEITE (z. B. "Darstellung"): gefüllte Fläche -
   Patrick, verbindlich: "NUR die aktuelle SEITE bekommt die gefüllte
   Fläche (z. B. 'Projekte' in der zweiten Spalte, 'Darstellung' im
   Konto)." Lebt HIER (nicht in der gemeinsamen public/css/sidebar-main.css)
   scoped auf ".ms-sidebar2__list", weil ".ms-sidebar2" ein reines
   Daysi-Konzept ist - das Pendant im Tool ist ".ms-sb__nav-item
   [aria-current='true']" (siehe public/css/sidebar.css), unverändert schon
   immer gefüllt. Siehe dortigen Kommentar in sidebar-main.css für die
   Hauptleisten-Gegenseite (Icon + Strich, keine Fläche). */
.ms-sidebar2__list .ms-sidebar__item[aria-current='page'] {
  background: var(--ms-accent-soft);
  color: var(--ms-accent-soft-text);
}

/* .ms-breadcrumb*: ausgelagert nach public/css/ui.css (UI-Baukasten). */

/* Seitenbreite (.ms-page--narrow) und Seitenkopf (.ms-page-head, mit
   <ms-info> statt eigener Einleitung): siehe public/css/ui.css
   (UI-Baukasten) - views/settingsLayout.js#renderSettingsPage nutzt seither
   dieselben Bausteine wie Dashboard/Verwaltung/Rollen/MCP-Protokoll, statt
   einer eigenen .ms-settings__head/-__title/-__intro-Kopie. */
.ms-page--narrow > .ms-alert {
  margin-bottom: var(--ms-space-4);
}

.ms-settings__stack {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-4);
}

.ms-settings-card__title {
  font-family: var(--ms-font-display);
  font-size: 22px;
  margin: 0 0 4px;
}

.ms-settings-card__subtitle {
  color: var(--ms-text-muted);
  font-size: 13.5px;
  margin: 0 0 var(--ms-space-4);
  max-width: 64ch;
}

.ms-settings-card--danger {
  border-color: color-mix(in srgb, var(--ms-danger) 45%, var(--ms-border));
  background: color-mix(in srgb, var(--ms-danger) 4%, var(--ms-surface));
}

.ms-settings-card--danger .ms-settings-card__title {
  color: var(--ms-danger-text, var(--ms-danger));
}

.ms-settings-card--highlight,
.ms-card--highlight {
  border-color: color-mix(in srgb, var(--ms-accent) 45%, var(--ms-border));
}

.ms-settings-subtitle {
  font-family: var(--ms-font-ui);
  font-size: 14px;
  font-weight: 600;
  margin: var(--ms-space-6) 0 var(--ms-space-2);
}

.ms-settings-card > .ms-settings-subtitle:first-of-type,
.ms-settings-card > .ms-alert + .ms-settings-subtitle {
  margin-top: 0;
}

.ms-settings-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-2);
  font-size: 13.5px;
}

/* Formulare in Einstellungskarten nicht über die ganze Kartenbreite ziehen. */
.ms-settings-form,
.ms-settings-narrow {
  max-width: 480px;
}

.ms-settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-2);
}

.ms-settings-danger {
  padding-top: var(--ms-space-4);
  border-top: 1px solid var(--ms-border);
}

.ms-settings-highlight {
  padding: var(--ms-space-4);
  margin-bottom: var(--ms-space-4);
  border: 1px solid color-mix(in srgb, var(--ms-accent) 45%, var(--ms-border));
  border-radius: var(--ms-radius);
  background: var(--ms-accent-soft);
  color: var(--ms-accent-soft-text);
  font-size: 13.5px;
}

.ms-settings-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ms-settings-links a,
.ms-settings-links__static {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  padding: 12px 4px;
  border-bottom: 1px solid var(--ms-border);
  font-size: 14px;
}

.ms-settings-links li:last-child a,
.ms-settings-links li:last-child .ms-settings-links__static {
  border-bottom: none;
}

.ms-settings-links a > span:first-of-type,
.ms-settings-links__static > span:first-of-type {
  flex: 1;
}

.ms-settings-links a:hover {
  color: var(--ms-accent-text);
}

.ms-settings-links .ms-icon {
  color: var(--ms-text-muted);
}

.ms-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.ms-fieldset > legend {
  font-size: 13px;
  font-weight: 500;
  color: var(--ms-text-muted);
  margin-bottom: 6px;
}

/* Workspaces innerhalb einer Tool-Karte (/account/workspaces). */
.ms-workspace-card {
  padding: var(--ms-space-4);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  background: var(--ms-bg);
}

.ms-workspace-card__title {
  font-family: var(--ms-font-ui);
  font-size: 15px;
  font-weight: 600;
}

/* Eingehende Einladungen (Dashboard-Karte + /account/workspaces). */
.ms-invite-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-2);
}

.ms-invite {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  flex-wrap: wrap;
  padding: var(--ms-space-3) var(--ms-space-4);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  background: var(--ms-bg);
}

.ms-invite__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--ms-radius);
  background: var(--ms-accent-soft);
  color: var(--ms-accent-soft-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ms-invite__text {
  flex: 1 1 240px;
  min-width: 0;
}

.ms-invite__title {
  margin: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.ms-invite__title strong {
  font-weight: 600;
}

.ms-invite__meta {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ms-text-muted);
}

.ms-invite__actions {
  display: flex;
  gap: var(--ms-space-2);
  flex-wrap: wrap;
}

.ms-dashboard-invites .ms-row-between {
  align-items: baseline;
}

/* Aktive Sitzungen (/account/sitzungen). */
.ms-session-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ms-session {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-space-3);
  padding: var(--ms-space-3) 0;
  border-bottom: 1px solid var(--ms-border);
}

.ms-session:last-child {
  border-bottom: none;
}

.ms-session__icon {
  color: var(--ms-text-muted);
  padding-top: 2px;
}

.ms-session__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-2);
}

.ms-session__meta {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ms-text-muted);
  overflow-wrap: anywhere;
}

/* Inline-Bestätigung (public/js/confirm.js) statt window.confirm(). */
.ms-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-2);
  padding: var(--ms-space-2) var(--ms-space-3);
  border: 1px solid color-mix(in srgb, var(--ms-danger) 45%, var(--ms-border));
  border-radius: var(--ms-radius);
  background: color-mix(in srgb, var(--ms-danger) 6%, var(--ms-surface));
  white-space: normal;
}

.ms-confirm__text {
  margin: 0;
  font-size: 13px;
  color: var(--ms-text);
  flex: 1 1 200px;
}

.ms-confirm__actions {
  display: flex;
  gap: var(--ms-space-2);
}

@media (max-width: 767px) {
  body.ms-has-sidebar {
    padding-left: 0;
  }

  /* Sidebar wird zum Overlay-Drawer - Grundform (geschlossen, Menü-Knopf)
     kommt aus public/css/sidebar-main.css (siehe dortiger Kommentar), hier
     nur noch die Daysi-eigene "auf"-Umschaltung, verkabelt über
     public/js/daysi-sidebar.js (Klassen body.ms-sidebar-mobile-open). */

  /* Dieselbe (hohe) Spezifität wie die Einklapp-Regel weiter oben
     (html.ms-sidebar-collapsed .ms-sidebar) - ohne diese Wiederholung würde
     ein auf dem Desktop eingeklappter Zustand den Mobil-Drawer fälschlich
     auf 64px zusammenschrumpfen lassen, sobald das Fenster schmaler als
     768px wird (Handy/Größenänderung). Später in der Kaskade = gewinnt bei
     gleicher Spezifität. */
  html.ms-sidebar-collapsed .ms-sidebar {
    width: min(84vw, 300px);
  }

  body.ms-sidebar-mobile-open .ms-sidebar {
    transform: translateX(0);
  }

  body.ms-sidebar-mobile-open .ms-sidebar__backdrop {
    display: block;
  }

  /* Zweite Spalte passt mobil nicht neben die Hauptleiste (Aufgabenstellung
     "Eine zweite Spalte passt nicht") - wird stattdessen zu einer
     horizontal scrollbaren Reiterleiste ÜBER dem Inhalt (dasselbe Muster
     wie früher bei den Einstellungsseiten) - kein horizontales Scrollen
     der SEITE, nur diese Leiste scrollt in sich selbst. Bleibt unabhängig
     vom Hauptleisten-Drawer immer sichtbar. */
  body.ms-has-sidebar2 {
    padding-left: 0;
  }

  html.ms-sidebar-collapsed body.ms-has-sidebar2 {
    padding-left: 0;
  }

  .ms-sidebar2 {
    position: static;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
    max-width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid var(--ms-border);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: var(--ms-space-2) var(--ms-gutter);
    gap: var(--ms-space-2);
  }

  .ms-sidebar2__title {
    /* Der Kontext steht mobil bereits in der Pfadleiste - Platz sparen. */
    display: none;
  }

  .ms-sidebar2__back {
    margin-bottom: 0;
    padding-right: var(--ms-space-3);
    border-right: 1px solid var(--ms-border);
    border-radius: 0;
    white-space: nowrap;
  }

  .ms-sidebar2__user {
    flex-shrink: 0;
    border-bottom: none;
    border-right: 1px solid var(--ms-border);
    margin: 0;
    padding: 0 var(--ms-space-3) 0 0;
  }

  .ms-sidebar2__user-name {
    font-size: 14px;
    white-space: nowrap;
  }

  .ms-sidebar2__user-meta {
    display: none;
  }

  .ms-sidebar2__list {
    flex-direction: row;
  }

  .ms-sidebar2 .ms-sidebar__item {
    white-space: nowrap;
  }

  .ms-page--narrow {
    padding-top: var(--ms-space-6);
  }
}

/* ==========================================================================
   6. Seiten-spezifische Bausteine
   ========================================================================== */

/* -- Login --------------------------------------------------------------------- */

.ms-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 62%) minmax(420px, 38%);
}

@media (max-width: 900px) {
  .ms-login {
    grid-template-columns: 1fr;
  }
}

.ms-login__hero {
  position: relative;
  min-height: 100vh;
  background-image: url('img/login-hero-standard.webp?v=ee256a580f');
  background-size: cover;
  /* Standard-Hero (kein persönliches Profil, siehe views/login.js): Patricks
     eigenes Foto – spitzbogiger Steintorbogen rechts im Bild auf einem
     Felsgrat, tiefstehende goldene Sonne scheint hindurch, links Meer und
     Inseln in blauer Stunde, Steinweg führt zum Tor (Quelle:
     design/natur-portal-3840px.png, 3840×2161 ≈16:9; Web-JPEG hier per
     cwebp als WebP 2400px/Qualität 70 erzeugt, ~320 KB statt ~920 KB als
     JPEG, siehe public/img/login-hero-standard.webp). Bildausschnitt an mehreren Container-Seitenverhältnissen
     geprüft (headless Chrome, background-size:cover): Tor+Sonne bei 76% 42%
     in JEDER getesteten Desktop-Form komplett sichtbar (breit, schmal/hoch,
     quadratisch), Meer/Inseln bleiben als Kontext links im Bild. Kupfer-
     Vorgänger (prozedural) bleibt als Archiv erhalten, siehe design/login-
     hero-standard-kupfer-archiv.*. */
  background-position: 76% 42%;
  display: flex;
  flex-direction: column;
  /* Kopfzeile oben, Überschrift+Subline direkt darunter (siehe
     .ms-login__intro), die Tool-Liste wird per margin-top: auto ans
     untere Ende gedrückt (siehe .ms-login__hero-foot) – kein
     space-between mehr, das hätte die Überschrift optisch mittig
     "schweben" lassen statt sie an den Bogen zu binden. */
  padding: var(--ms-space-8);
  color: #ffffff;
}

@media (max-width: 900px) {
  .ms-login__hero {
    min-height: 240px;
    padding: var(--ms-space-4);
    /* Im flachen Mobil-Banner höher ausschnitten, damit Torbogen + Sonne im
       Bild bleiben statt nur Himmel/Meer zu zeigen (an 420×240/375×220/
       640×240 geprüft, siehe Kommentar bei background-position oben). */
    background-position: 76% 26%;
    /* Leichtere Fassung für den flachen Mobil-Banner (WebP 1100px, ~110 KB),
       erzeugt per cwebp aus design/natur-portal-3840px.png. */
    background-image: url('img/login-hero-standard-mobil.webp?v=ee256a580f');
  }

  /* Im flachen Banner ist weniger Platz: Überschrift kleiner, damit sie
     nicht an den unteren Rand stößt. */
  .ms-login__headline {
    font-size: 26px;
    margin-bottom: 6px;
  }

  .ms-login__sub {
    font-size: 13px;
  }
}

.ms-login__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(10, 12, 10, 0.82) 0%, rgba(10, 12, 10, 0.35) 55%, rgba(10, 12, 10, 0.15) 100%);
}

.ms-login__hero > * {
  position: relative;
  z-index: 2;
}

/* Persönliches Hero-Foto (Erscheinungsbild-Feature, siehe views/login.js) –
   ersetzt das statische background-image der Standard-Login-Seite durch ein
   echtes <img> (srcset 800w/1600w). Liegt UNTER dem abdunkelnden Verlauf
   (::before, z-index 1) und dem restlichen Inhalt (> *, z-index 2), daher
   hier absichtlich eine eigene, niedrigere Ebene (z-index 0) statt der
   generischen ".ms-login__hero > *"-Regel (gleiche Spezifität, gewinnt aber
   durch spätere Definition in der Kaskade). object-position kommt aus dem
   personenbezogenen Stylesheet (/theme/p/:slug.css, siehe
   lib/appearance.js#heroFocusCss) – ohne eigenen Fokuspunkt bleibt es bei
   der Bildmitte (Default 50% 50%). */
/* Persönliche Login-Seite: das Standard-Hintergrundbild gar nicht erst laden
   (es läge ohnehin unsichtbar unter dem <img>). Höhere Spezifität als
   .ms-login__hero, gewinnt daher auch gegen die Mobil-Regel oben. */
.ms-login__hero:has(.ms-login__hero-img) {
  background-image: none;
}

.ms-login__hero-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.ms-login__hero .ms-topbar__wordmark,
.ms-login__hero .ms-topbar__logo {
  color: #ffffff;
}

/* Direkt unter Logo/Wortmarke, mit definiertem Abstand (siehe Mockup:
   Überschrift sitzt oben links, nicht vertikal zentriert). */
.ms-login__intro {
  margin-top: var(--ms-space-6);
}

.ms-login__headline {
  font-family: var(--ms-font-ui);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 var(--ms-space-3);
  color: #ffffff;
}

.ms-login__sub {
  font-size: 15px;
  /* 0.92 statt 0.82: Kontrast auf dem Foto, siehe css/login.css. */
  color: rgba(255, 255, 255, 0.92);
  max-width: 30em;
}

.ms-login__hero-foot {
  display: none;
}

@media (min-width: 901px) {
  .ms-login__hero-foot {
    display: flex;
    gap: var(--ms-space-2);
    margin-top: auto;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
  }
}

.ms-login__form-col {
  display: flex;
  flex-direction: column;
  padding: var(--ms-space-8) var(--ms-space-8);
  background: var(--ms-bg);
}

@media (max-width: 900px) {
  .ms-login__form-col {
    padding: var(--ms-space-6) var(--ms-space-4) var(--ms-space-8);
  }
}

.ms-login__form-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--ms-space-8);
}

.ms-login__form-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 380px;
  margin: 0 auto;
  width: 100%;
}

.ms-login__title {
  font-family: var(--ms-font-ui);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 4px;
}

.ms-login__lead {
  color: var(--ms-text-muted);
  font-size: 14px;
  margin: 0 0 var(--ms-space-6);
}

.ms-login__note {
  text-align: center;
  color: var(--ms-text-subtle);
  font-size: 12.5px;
  margin: var(--ms-space-4) 0 0;
}

.ms-login__footer {
  text-align: center;
  font-size: 12.5px;
  color: var(--ms-text-subtle);
  margin-top: var(--ms-space-8);
  display: flex;
  gap: var(--ms-space-2);
  justify-content: center;
}

.ms-login__footer a {
  color: var(--ms-text-subtle);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ms-login__footer a:hover {
  color: var(--ms-text);
}

/* -- Lesemodus (Rechtstexte) ----------------------------------------------------- */

.ms-reading {
  font-size: 15px;
  line-height: 1.7;
}

.ms-reading h1 {
  font-size: clamp(28px, 4vw, 38px);
  margin-bottom: var(--ms-space-6);
}

.ms-reading h2 {
  font-family: var(--ms-font-display);
  font-size: 22px;
  font-weight: 400;
  margin: var(--ms-space-8) 0 var(--ms-space-3);
}

.ms-reading h3 {
  font-family: var(--ms-font-ui);
  font-size: 16px;
  font-weight: 600;
  margin: var(--ms-space-6) 0 var(--ms-space-2);
}

.ms-reading p,
.ms-reading ul,
.ms-reading ol {
  margin: 0 0 var(--ms-space-3);
  color: var(--ms-text);
  /* Rechtstexte enthalten lange, unveränderte URLs als Linktext (z. B.
     Datenschutzerklärungen von Drittanbietern) – ohne Umbruch würden sie
     auf schmalen Bildschirmen die Seite horizontal aufreißen. */
  overflow-wrap: break-word;
  word-break: break-word;
}

.ms-reading ul,
.ms-reading ol {
  padding-left: 1.3em;
}

.ms-reading li {
  margin-bottom: 4px;
}

.ms-reading a {
  color: var(--ms-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ms-reading table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--ms-space-4);
  font-size: 14px;
}

.ms-reading td,
.ms-reading th {
  border: 1px solid var(--ms-border);
  padding: 8px 10px;
  text-align: left;
}

.ms-reading__table {
  overflow-x: auto;
  margin: 0 0 var(--ms-space-4);
}

.ms-reading__table table {
  margin: 0;
}

.ms-reading-footer {
  margin-top: var(--ms-space-8);
  padding-top: var(--ms-space-4);
  border-top: 1px solid var(--ms-border);
  font-size: 13px;
  color: var(--ms-text-muted);
  text-align: center;
}

.ms-reading-footer a {
  color: inherit;
}

.ms-reading-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--ms-bar-height);
  padding: 0 var(--ms-space-6);
  border-bottom: 1px solid var(--ms-border);
  background: var(--ms-elevated);
}

.ms-reading-header .ms-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
}

/* -- Fehlerseiten (404, 403 "Kein Zugriff") --------------------------------------- */

.ms-error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--ms-space-3);
  padding: var(--ms-space-6);
}

.ms-error-page__code {
  font-family: var(--ms-font-display);
  font-size: 64px;
  color: var(--ms-text-subtle);
}

.ms-error-page__title {
  font-size: 22px;
  font-weight: 600;
}

.ms-error-page__desc {
  color: var(--ms-text-muted);
  max-width: 32em;
}

/* .ms-page-head/-__greeting/-__title/-__date: ausgelagert nach
   public/css/ui.css (UI-Baukasten) - EINE Quelle für Daysi UND Tools. */

.ms-section {
  margin-top: var(--ms-space-12);
}

.ms-section:first-of-type {
  margin-top: 0;
}

.ms-section__title {
  font-size: 22px;
  margin-bottom: var(--ms-space-4);
}

.ms-automations {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3);
  margin-top: var(--ms-space-6);
  padding-top: var(--ms-space-4);
  border-top: 1px solid var(--ms-border);
  font-size: 13.5px;
  color: var(--ms-text-muted);
}

.ms-automations__left {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
}

.ms-automations a {
  color: var(--ms-text);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ms-automations a:hover {
  text-decoration: underline;
}

/* -- Farbwähler: Live-Vorschau (Konto → Darstellung) -----------------------
   public/js/appearance.js#initLiveDocumentPreview setzt beim Ziehen im
   Farbwähler (input[type=color]) direkt --ms-*-Token auf document.
   documentElement – dieser Hinweis-Absatz erscheint nur, wenn die
   Kontrastgarantie des Generators (public/js/palette.js) die Eingabefarbe
   dafür spürbar anpassen musste (sehr helle/dunkle Farben). Sichtbarkeit
   über das `hidden`-Attribut (JS: element.hidden = …), kein Inline-Style. */

.ms-appearance-color-hint {
  margin-top: var(--ms-space-2);
  font-size: 12.5px;
}

/* ==========================================================================
   8. Daysi-Dashboard: "Anpassen"-Modus (public/js/dashboard-customize.js)
   ========================================================================== */
/* Eigener Abschnitt ans Dateiende angehängt (siehe COMMON-RULES.md zu
   gemeinsam genutzten Dateien) - ergänzt Abschnitt 5 (.ms-tiles/.ms-block)
   um alles, was NUR im "Anpassen"-Modus sichtbar ist. Außerhalb des Modus
   existieren diese Elemente gar nicht im DOM (das Skript baut sie erst bei
   Klick auf "Anpassen") - das Dashboard bleibt dadurch ohne JS/außerhalb
   des Modus exakt so ruhig wie vorher, ohne Griffe. */

/* .ms-page-head__meta: ausgelagert nach public/css/ui.css (UI-Baukasten). */

/* -- Baustein-Hülle (Grid-Item: Tool-Kachel ODER Übersicht-Karte) ---------- */

.ms-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ms-block[hidden] {
  /* Höhere Spezifität als die UA-Regel `[hidden]{display:none}` gegen die
     `.ms-block{display:flex}`-Regel oben (gleiche Spezifität, Kaskade
     würde sonst die spätere Autor-Regel gewinnen lassen). */
  display: none;
}

.ms-block > .ms-tile,
.ms-block > .ms-card {
  flex: 1;
  height: 100%;
}

.ms-block--w1 {
  grid-column: span 1;
}
.ms-block--w2 {
  grid-column: span 2;
}
.ms-block--w3 {
  grid-column: span 3;
}
.ms-block--w4 {
  grid-column: span 4;
}

.ms-block--editing {
  outline: 1px dashed var(--ms-border-strong);
  outline-offset: 6px;
  border-radius: var(--ms-radius-lg);
}

.ms-block--dragging {
  opacity: 0.45;
}

/* -- Werkzeugleiste je Baustein (Griff, Vor/Zurück, Breite, Ausblenden) ---- */

.ms-block__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  row-gap: 4px;
  min-height: 30px;
  padding: 4px;
  margin-bottom: var(--ms-space-2);
  background: var(--ms-surface-2);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  color: var(--ms-text-muted);
}

/* Eine schmale Breite-1-Kachel fasst Griff/Pfeile, Breite, Farbe UND
   Ausblenden oft nicht in einer Zeile - die Werkzeugleiste bricht dann um
   (flex-wrap oben); die Gruppierung hier hält zusammengehörige Knöpfe beim
   Umbruch zusammen, statt sie mittendrin zu trennen. */
.ms-block__toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.ms-block__handle,
.ms-block__move,
.ms-block__hide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--ms-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.ms-block__handle:hover,
.ms-block__move:hover:not(:disabled),
.ms-block__hide:hover {
  background: var(--ms-surface);
  color: var(--ms-text);
}

.ms-block__move:disabled {
  opacity: 0.35;
  cursor: default;
}

.ms-block__handle {
  cursor: grab;
  touch-action: none;
  font-size: 13px;
  letter-spacing: -1px;
}

.ms-block__handle:active {
  cursor: grabbing;
}

.ms-block__hide:hover {
  color: var(--ms-danger-text, var(--ms-danger));
}

.ms-block__toolbar .ms-icon {
  width: 14px;
  height: 14px;
}

.ms-block__widths {
  display: flex;
  gap: 2px;
}

.ms-block__width-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  background: var(--ms-surface);
  color: var(--ms-text-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.ms-block__width-btn:hover {
  border-color: var(--ms-border-strong);
  color: var(--ms-text);
}

.ms-block__width-btn[aria-pressed='true'] {
  background: var(--ms-accent);
  border-color: var(--ms-accent-border);
  color: var(--ms-on-accent);
}

/* -- Obere Werkzeugleiste (Fertig/Abbrechen/Zurücksetzen/Hinzufügen) ------- */

.ms-dash-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-4);
  margin-bottom: var(--ms-space-6);
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
}

.ms-dash-toolbar__hint {
  color: var(--ms-text-muted);
  font-size: 13px;
  margin-right: auto;
}

.ms-dash-toolbar__status {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--ms-text-muted);
}

.ms-dash-toolbar__status[data-kind='error'] {
  color: var(--ms-danger-text, var(--ms-danger));
}

.ms-dash-toolbar__status[data-kind='success'] {
  color: var(--ms-accent-text);
}

/* -- "+ Baustein hinzufügen" ------------------------------------------------ */

.ms-dash-add {
  position: relative;
}

.ms-dash-add__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--ms-space-2);
  background: var(--ms-elevated);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-dropdown);
}

.ms-dash-add__item {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  padding: 8px 10px;
  border: none;
  border-radius: var(--ms-radius);
  background: transparent;
  color: var(--ms-text);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.ms-dash-add__item:hover {
  background: var(--ms-surface-2);
}

.ms-dash-add__item .ms-icon {
  width: 16px;
  height: 16px;
  color: var(--ms-text-muted);
}

.ms-dash-add__empty {
  padding: 8px 10px;
  color: var(--ms-text-muted);
  font-size: 13px;
}

/* -- Ansichten (Patrick, 2026-10-01; lib/dashboardViews.js,
   views/dashboard.js#renderViewTabs, public/js/dashboard-views.js) --------
   Reiterzeile (.ms-tabs aus ui.css) ÜBER dem Widget-Grid, links bündig mit
   der ersten Karte; auf schmalen Bildschirmen seitlich wischbar (.ms-tabs
   scrollt selbst). Kleinerer Abstand zum Grid als bei Einstellungsseiten. */
.ms-tabs.ms-dash-views {
  margin-bottom: var(--ms-space-4);
}

/* „+ Neue Ansicht" (nur im „Anpassen"-Modus) als gedämpfter Reiter. */
.ms-dash-views__new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ms-accent-text);
}

.ms-dash-views__new .ms-icon {
  width: 14px;
  height: 14px;
}

/* Schalter „Tool-Spalte anzeigen" einer Ansicht: die Spalte (und, wenn sie
   sonst leer bliebe, ihr Container) entfällt. Der Feedback-Knopf der
   Administratoren (.ms-dash-fb) bleibt in jedem Fall stehen. */
.ms-dash-layout--no-tools .ms-dash-tools {
  display: none;
}

.ms-dash-layout--no-tools .ms-dash-side:not(:has(.ms-dash-fb)) {
  display: none;
}

/* Zeile „Ansicht verwalten" in der oberen Werkzeugleiste des
   „Anpassen"-Modus (Umbenennen, Löschen, Reihenfolge, Tool-Spalte). */
.ms-dash-viewtools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-2);
  flex-basis: 100%;
  padding-top: var(--ms-space-3);
  border-top: 1px solid var(--ms-border);
}

.ms-dash-viewtools__label {
  margin-right: auto;
  font-size: 13px;
  color: var(--ms-text-muted);
}

.ms-dash-viewtools__name {
  color: var(--ms-text);
  font-weight: 600;
}

.ms-dash-viewtools .ms-icon {
  width: 14px;
  height: 14px;
}

/* Pop-up „Neue Ansicht" / „Ansicht umbenennen" (UI-Kit .ms-modal):
   Formular mit Name + Startvariante. */
.ms-dash-viewdlg {
  margin: 0;
}

.ms-dash-viewdlg__starts {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-2);
}

.ms-dash-viewdlg__error {
  margin: 0;
  font-size: 13px;
  color: var(--ms-danger-text, var(--ms-danger));
}

.ms-dash-viewdlg__error[hidden] {
  display: none;
}

.ms-dash-viewdlg__note {
  margin: 0;
  font-size: 12.5px;
  color: var(--ms-text-subtle);
}

/* Patrick (2026-09-29): Datum + „Anpassen“ nie versetzt „im Nichts“.
   Der Titel bricht in SEINER Spalte um (flex-basis 0), Datum/Knopf bleiben
   oben rechts daneben – auch bei zweizeiligen Begrüßungen. Erst auf
   schmalen Bildschirmen stehen sie in EINER Zeile unter dem Titel. */
.ms-page-head:has(> .ms-page-head__meta) > :first-child {
  flex: 1 1 0;
  min-width: 0;
}
.ms-page-head:has(> .ms-page-head__meta) > .ms-page-head__meta {
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  .ms-page-head:has(> .ms-page-head__meta) > :first-child {
    flex-basis: 100%;
  }
  .ms-page-head__meta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .ms-page-head__meta {
    align-items: flex-start;
    width: 100%;
  }

  .ms-dash-toolbar {
    justify-content: flex-start;
  }
}

/* -- Kachel-Farben (Patrick: "Ich möchte, dass man ihnen eine Farbigkeit
   geben kann." - Nachschärfung: "Die Kacheln sind mir zu bunt. Das bitte
   dezenter gestalten.") ------------------------------------------------
   8 kuratierte, ENTSÄTTIGTE ("staubige") Farben + "Neutral" (= keine
   .ms-block--c-*-Klasse) - KEINE freie Farbwahl, Kontrast in hell UND
   dunkel garantiert (dieselbe Liste serverseitig: lib/dashboardLayout.js
   #TILE_COLORS - Farbnamen UND gespeicherte Werte unverändert, nur die
   Darstellung wurde zurückhaltender). Fläche, Rahmen UND Titel einer
   farbigen Kachel/Karte bleiben VOLLSTÄNDIG neutral (--ms-surface/
   --ms-border/--ms-text, identisch zu einem Baustein ohne Farbe) - die
   Farbe ist nur noch ein kleiner Akzent, grob <=10 % der sichtbaren
   Fläche:
     - Icon-Chip: zarte Tönung als Hintergrund (~13 % Farbanteil über
       --ms-surface gemischt) statt kräftiger Fläche, dazu ein farbiges
       statt weißes Icon.
     - eine feine 3px-Linie (oben bei Kacheln, die bereits über den
       Icon-Chip einen Farbträger haben; links bei Übersicht-Karten ohne
       Icon - "nur diese feine Linie", Patrick).
   Eine neutrale und eine farbige Kachel nebeneinander sollen wie
   dieselbe Familie wirken (siehe Vorschau-Screenshot, selbst per
   Headless Chrome kontrolliert). Je Farbe zwei Tokens - bewusst NICHT
   --ms-accent (das ist die persönliche Palette des Benutzers, siehe
   public/js/palette.js, hier geht es um eine Baustein-Eigenschaft):
     -icon     das eigentliche Farbmerkmal (Icon-Symbol + 3px-Linie),
               gegen die zugehörige -chip-bg mit >=3:1 geprüft
               (Grafik-Kontrast, WCAG 1.4.11 - Text bleibt in --ms-text,
               dafür ist nichts zu prüfen).
     -chip-bg  die zarte Icon-Chip-Tönung (~13 % -icon über --ms-surface
               gemischt, siehe Kommentar oben). */

:root {
  --ms-tile-blue-icon: #5b7a9c;
  --ms-tile-blue-chip-bg: #eaeef2;

  --ms-tile-yellow-icon: #a1783a;
  --ms-tile-yellow-chip-bg: #f3ede5;

  --ms-tile-green-icon: #5f8a63;
  --ms-tile-green-chip-bg: #eaf0eb;

  --ms-tile-turquoise-icon: #4f8f89;
  --ms-tile-turquoise-chip-bg: #e8f0f0;

  --ms-tile-violet-icon: #7c6a99;
  --ms-tile-violet-chip-bg: #eeecf2;

  --ms-tile-pink-icon: #ab7288;
  --ms-tile-pink-chip-bg: #f4edf0;

  --ms-tile-red-icon: #ab6152;
  --ms-tile-red-chip-bg: #f4eae9;

  --ms-tile-orange-icon: #ab7a49;
  --ms-tile-orange-chip-bg: #f4eee7;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ms-tile-blue-icon: #8fa9c4;
    --ms-tile-blue-chip-bg: #323434;

    --ms-tile-yellow-icon: #c9a35f;
    --ms-tile-yellow-chip-bg: #393326;

    --ms-tile-green-icon: #8fb591;
    --ms-tile-green-chip-bg: #32352d;

    --ms-tile-turquoise-icon: #7fb8b0;
    --ms-tile-turquoise-chip-bg: #303631;

    --ms-tile-violet-icon: #a99bc2;
    --ms-tile-violet-chip-bg: #353233;

    --ms-tile-pink-icon: #cf9fb1;
    --ms-tile-pink-chip-bg: #3a3231;

    --ms-tile-red-icon: #c68e7f;
    --ms-tile-red-chip-bg: #39302b;

    --ms-tile-orange-icon: #cf9f74;
    --ms-tile-orange-chip-bg: #3a3229;
  }
}

:root[data-theme='dark'] {
  --ms-tile-blue-icon: #8fa9c4;
  --ms-tile-blue-chip-bg: #323434;

  --ms-tile-yellow-icon: #c9a35f;
  --ms-tile-yellow-chip-bg: #393326;

  --ms-tile-green-icon: #8fb591;
  --ms-tile-green-chip-bg: #32352d;

  --ms-tile-turquoise-icon: #7fb8b0;
  --ms-tile-turquoise-chip-bg: #303631;

  --ms-tile-violet-icon: #a99bc2;
  --ms-tile-violet-chip-bg: #353233;

  --ms-tile-pink-icon: #cf9fb1;
  --ms-tile-pink-chip-bg: #3a3231;

  --ms-tile-red-icon: #c68e7f;
  --ms-tile-red-chip-bg: #39302b;

  --ms-tile-orange-icon: #cf9f74;
  --ms-tile-orange-chip-bg: #3a3229;
}

/* Farbname -> lokale Variablen (einmal je Farbe zugewiesen, siehe
   "Anwendung" darunter, die diese lokalen Variablen konsumiert - so
   müssen die eigentlichen Stil-Regeln nicht 8x wiederholt werden). */
.ms-block--c-blue {
  --ms-tile-c-icon: var(--ms-tile-blue-icon);
  --ms-tile-c-chip-bg: var(--ms-tile-blue-chip-bg);
}
.ms-block--c-yellow {
  --ms-tile-c-icon: var(--ms-tile-yellow-icon);
  --ms-tile-c-chip-bg: var(--ms-tile-yellow-chip-bg);
}
.ms-block--c-green {
  --ms-tile-c-icon: var(--ms-tile-green-icon);
  --ms-tile-c-chip-bg: var(--ms-tile-green-chip-bg);
}
.ms-block--c-turquoise {
  --ms-tile-c-icon: var(--ms-tile-turquoise-icon);
  --ms-tile-c-chip-bg: var(--ms-tile-turquoise-chip-bg);
}
.ms-block--c-violet {
  --ms-tile-c-icon: var(--ms-tile-violet-icon);
  --ms-tile-c-chip-bg: var(--ms-tile-violet-chip-bg);
}
.ms-block--c-pink {
  --ms-tile-c-icon: var(--ms-tile-pink-icon);
  --ms-tile-c-chip-bg: var(--ms-tile-pink-chip-bg);
}
.ms-block--c-red {
  --ms-tile-c-icon: var(--ms-tile-red-icon);
  --ms-tile-c-chip-bg: var(--ms-tile-red-chip-bg);
}
.ms-block--c-orange {
  --ms-tile-c-icon: var(--ms-tile-orange-icon);
  --ms-tile-c-chip-bg: var(--ms-tile-orange-chip-bg);
}

/* Anwendung - einmal für alle 8 Farben (per Attribut-Selektor, da die
   Farbe optional NEBEN evtl. weiteren Klassen an .ms-block steht). Fläche/
   Rahmen/Titel bleiben ABSICHTLICH unangetastet (neutral) - hier nur
   position:relative als Anker für die Akzent-Linie unten. */
.ms-block[class*='ms-block--c-'] > .ms-tile,
.ms-block[class*='ms-block--c-'] > .ms-card {
  position: relative;
  /* Patrick (2026-09-25): Rahmen farbig hervorheben + leichte, dezente
     Einfärbung der Fläche. Gemischt aus dem gedämpften Icon-Ton, damit es
     in hell/dunkel und mit jeder eigenen Palette ruhig bleibt; Titel/Text
     bleiben in --ms-text (Kontrast unverändert). */
  border-color: color-mix(in srgb, var(--ms-tile-c-icon) 45%, var(--ms-border));
  background: color-mix(in srgb, var(--ms-tile-c-icon) 6%, var(--ms-surface));
}

.ms-block[class*='ms-block--c-'] > a.ms-tile:hover {
  border-color: color-mix(in srgb, var(--ms-tile-c-icon) 75%, var(--ms-border));
}

/* Feine 3px-Akzent-Linie: oben bei Kacheln (der Icon-Chip trägt dort
   bereits die Farbe, die Linie ergänzt sie nur dezent), links bei
   Übersicht-Karten (kein Icon vorhanden - die Linie ist dort der EINZIGE
   Farbträger, siehe Kommentar oben). */
.ms-block[class*='ms-block--c-'] > .ms-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ms-tile-c-icon);
  border-radius: var(--ms-radius-lg) var(--ms-radius-lg) 0 0;
}

.ms-block[class*='ms-block--c-'] > .ms-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--ms-tile-c-icon);
  border-radius: var(--ms-radius-lg) 0 0 var(--ms-radius-lg);
}

/* Hülle um das Tool-Icon (views/dashboard.js#renderTile) - ohne Farbe
   unsichtbar/formlos (kein Unterschied zu vorher); mit Farbe eine zarte
   Tönung statt einer kräftigen Fläche, das Icon-Symbol selbst in der
   Farbe statt Weiß auf kräftigem Grund. */
.ms-tile__icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ms-radius);
}

.ms-block[class*='ms-block--c-'] > .ms-tile .ms-tile__icon-chip {
  padding: 7px;
  background: var(--ms-tile-c-chip-bg);
}

.ms-block[class*='ms-block--c-'] > .ms-tile .ms-tile__icon-chip .ms-tile__icon {
  color: var(--ms-tile-c-icon);
}

/* -- Farbwahl im "Anpassen"-Modus (Werkzeugleiste je Baustein, neben den
   Breiten-Segmenten) --------------------------------------------------- */

.ms-block__colors {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.ms-block__color-btn {
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ms-border-strong);
  background: var(--ms-surface-2);
  cursor: pointer;
}

.ms-block__color-btn:hover {
  border-color: var(--ms-text-muted);
}

.ms-block__color-btn[aria-pressed='true'] {
  outline: 2px solid var(--ms-text);
  outline-offset: 2px;
}

.ms-block__color-btn[data-color='blue'] {
  background: var(--ms-tile-blue-icon);
  border-color: var(--ms-tile-blue-icon);
}
.ms-block__color-btn[data-color='yellow'] {
  background: var(--ms-tile-yellow-icon);
  border-color: var(--ms-tile-yellow-icon);
}
.ms-block__color-btn[data-color='green'] {
  background: var(--ms-tile-green-icon);
  border-color: var(--ms-tile-green-icon);
}
.ms-block__color-btn[data-color='turquoise'] {
  background: var(--ms-tile-turquoise-icon);
  border-color: var(--ms-tile-turquoise-icon);
}
.ms-block__color-btn[data-color='violet'] {
  background: var(--ms-tile-violet-icon);
  border-color: var(--ms-tile-violet-icon);
}
.ms-block__color-btn[data-color='pink'] {
  background: var(--ms-tile-pink-icon);
  border-color: var(--ms-tile-pink-icon);
}
.ms-block__color-btn[data-color='red'] {
  background: var(--ms-tile-red-icon);
  border-color: var(--ms-tile-red-icon);
}
.ms-block__color-btn[data-color='orange'] {
  background: var(--ms-tile-orange-icon);
  border-color: var(--ms-tile-orange-icon);
}

/* =========================================================================
   Rollen-Auswahl (Zugriffsrollen, siehe views/admin.js#roleCheckboxes,
   Unterseite "Tool-Zugriff", sowie views/roles.js). Anders als .ms-tool-grid
   (einzeiliges Icon+Label im Grid) trägt hier jeder Eintrag eine zweite
   Zeile (Tools/Beschreibung) - eigenes, einspaltiges Listen-Layout statt
   des Grids.
   ========================================================================= */

.ms-role-picker {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-2);
}

.ms-role-picker__item {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-space-2);
  padding: 10px 12px;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  cursor: pointer;
}

.ms-role-picker__item input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--ms-accent);
  cursor: pointer;
  flex-shrink: 0;
}

.ms-role-picker__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
}

.ms-role-picker__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  font-weight: 500;
}

/* Lesbare Zusammenfassung "Effektiver Zugriff" (Tool -> Quelle(n): Rolle(n),
   Gruppe(n) und/oder Workspace-Freigabe), Unterseite "Tool-Zugriff". */
.ms-access-summary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-2);
}

.ms-access-summary li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ms-space-3);
  padding: 8px 4px;
  border-bottom: 1px solid var(--ms-border);
  font-size: 13.5px;
}

.ms-access-summary li:last-child {
  border-bottom: none;
}

.ms-access-summary__tool {
  font-weight: 500;
  white-space: nowrap;
}

.ms-access-summary__sources {
  color: var(--ms-text-muted);
  text-align: right;
}

/* ==========================================================================
   9. Daysi-Dashboard: Widget-Bausteine (widget:<id>, lib/dashboardWidgets.js,
   routes/dashboard.js, views/dashboard.js#renderWeeklyGoalWidget/
   renderCashflowExpensesWidget)
   ========================================================================== */
/* Eigener, klar abgegrenzter Abschnitt ans Dateiende angehängt (siehe
   COMMON-RULES.md zu gemeinsam genutzten Dateien) - ergänzt Abschnitt 8
   (.ms-block__toolbar & Co., "Anpassen"-Modus) um die Workspace-/Anzahl-
   Auswahl je Widget UND den Karteninhalt der beiden Widgets selbst
   ("Wochenziel" aus dem Planungstool, "Anstehende Ausgaben" aus dem
   Cashflow). Nutzt ausschließlich bestehende Bausteine/Tokens (.ms-card,
   .ms-empty, .ms-row, .ms-link-arrow, --ms-*) - hier nur, was für diese
   beiden Widgets neu dazukommt. */

/* -- Werkzeugleiste: Workspace-/Anzahl-Auswahl (neben Breite und Farbe) --- */

.ms-block__widget-options {
  gap: 4px;
}

.ms-block__select {
  height: 24px;
  max-width: 140px;
  padding: 0 4px;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  background: var(--ms-surface);
  color: var(--ms-text);
  font: inherit;
  font-size: 12px;
}

.ms-block__select:hover {
  border-color: var(--ms-border-strong);
}

/* -- Wochenziel-Widget ------------------------------------------------------ */

.ms-widget-goal__text {
  margin: var(--ms-space-2) 0 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  /* Groß & gut lesbar (Aufgabenstellung), aber lange Ziele sollen die
     Kachel nicht sprengen - Umbruch statt Überlauf. */
  overflow-wrap: break-word;
}

.ms-widget-goal__meta {
  margin: var(--ms-space-1) 0 0;
  color: var(--ms-text-subtle);
  font-size: 12.5px;
}

/* -- Ausgaben-Widget --------------------------------------------------------- */

.ms-widget-expenses {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-1);
  margin-top: var(--ms-space-2);
}

.ms-widget-expenses__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ms-space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--ms-border);
  font-size: 13.5px;
}

.ms-widget-expenses__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ms-widget-expenses__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ms-widget-expenses__date {
  color: var(--ms-text-subtle);
  font-size: 12px;
}

.ms-widget-expenses__name {
  font-weight: 500;
  overflow-wrap: break-word;
}

.ms-widget-expenses__category {
  color: var(--ms-text-subtle);
  font-size: 12px;
}

.ms-widget-expenses__amounts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  text-align: right;
}

.ms-widget-expenses__amount {
  font-weight: 600;
  white-space: nowrap;
}

/* Dezente Markierung bei bevorstehender Preisänderung ("ab TT.MM.JJJJ:
   Betrag", Pfeil je nach Richtung) - bewusst zurückhaltend (Fließtextfarbe
   statt Warnfarbe, eine anstehende Preisänderung ist kein Fehlerzustand). */
.ms-widget-expenses__change {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  color: var(--ms-text-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.ms-widget-expenses__change .ms-icon {
  width: 12px;
  height: 12px;
}

@media (max-width: 480px) {
  .ms-widget-expenses__row {
    flex-wrap: wrap;
  }

  .ms-widget-expenses__amounts {
    align-items: flex-start;
    text-align: left;
  }
}

/* -- Option "Alle Workspaces" (Patrick, verbatim: "Ich hätte gerne auch ein
   'Alle Workspaces' bei dieser Ansicht.", options.workspaceId === "all",
   siehe lib/dashboardWidgets.js#ALL_WORKSPACES_ID) - eigener, klar
   abgegrenzter Unterabschnitt, ans Ende dieses Abschnitts angehängt. Nutzt
   ebenfalls ausschließlich bestehende Bausteine/Tokens. -------------------- */

/* Wochenziel-Widget: EIN kompakter Block je Workspace (statt der Karte
   oben) - durch eine dünne Trennlinie voneinander abgesetzt. */
.ms-widget-goal__all {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-3);
  margin-top: var(--ms-space-2);
}

.ms-widget-goal__all-item {
  padding-top: var(--ms-space-3);
  border-top: 1px solid var(--ms-border);
}

.ms-widget-goal__all-item:first-child {
  padding-top: 0;
  border-top: none;
}

.ms-widget-goal__all-name {
  margin: 0 0 var(--ms-space-1);
  color: var(--ms-text-muted);
  font-size: 12.5px;
  font-weight: 600;
}

/* Kleinerer Zieltext je Block (mehrere Workspaces auf einer Karte statt
   eines einzigen, großen Ziels) - Abschnitt oben (.ms-widget-goal__text)
   bleibt für die Einzel-Workspace-Ansicht unverändert groß. */
.ms-widget-goal__text--compact {
  margin-top: 0;
  font-size: 14.5px;
}

/* "kein Wochenziel gesetzt" - bewusst dezent (Aufgabenstellung), kein
   Fehler- oder Warnzustand. */
.ms-widget-goal__empty {
  margin: 0;
  color: var(--ms-text-subtle);
  font-size: 13.5px;
  font-style: italic;
}

/* Ausgaben-Widget: dezentes Workspace-Etikett je Zeile (Aufgabenstellung:
   "Jede Zeile bekommt ein dezentes Workspace-Etikett") - kleiner als das
   Standard-.ms-badge, damit es neben dem Namen nicht dominiert. */
.ms-widget-expenses__workspace {
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--ms-text-subtle);
}

/* -- Job-Deadlines-Widget (widget:jobs-deadlines, views/dashboard.js
   #renderJobsDeadlinesWidget) - gleiche Zeilenoptik wie das Ausgaben-Widget
   oben, jede Zeile ein Link auf den Auftrag. Überfällig = Datum/Hinweis in
   der Gefahrenfarbe (Token --ms-danger-text, hell UND dunkel abgestimmt). --- */
.ms-widget-deadlines {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-1);
  margin-top: var(--ms-space-2);
}

.ms-widget-deadlines__row {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--ms-border);
  font-size: 13.5px;
  color: inherit;
  text-decoration: none;
}

.ms-widget-deadlines__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ms-widget-deadlines__row:hover .ms-widget-deadlines__item {
  text-decoration: underline;
}

.ms-widget-deadlines__date {
  flex-shrink: 0;
  min-width: 3.4em;
  color: var(--ms-text-subtle);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.ms-widget-deadlines__main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.ms-widget-deadlines__item {
  font-weight: 500;
  overflow-wrap: break-word;
}

.ms-widget-deadlines__job {
  color: var(--ms-text-subtle);
  font-size: 12px;
  overflow-wrap: break-word;
}

.ms-widget-deadlines__row--overdue .ms-widget-deadlines__date,
.ms-widget-deadlines__flag {
  color: var(--ms-danger-text, var(--ms-danger));
  font-weight: 600;
}

.ms-widget-deadlines__flag {
  margin-left: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ms-widget-deadlines__workspace {
  flex-shrink: 0;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--ms-text-subtle);
}

/* ==========================================================================
   Login-Zwischenschritt /login/mfa: „Auf diesem Gerät 30 Tage nicht mehr
   nach dem Code fragen" (views/mfa.js#renderLoginMfa, lib/mfa.js
   „Vertrauenswürdige Geräte") - Checkbox (.ms-checkbox aus ui.css) mit
   dezentem Hinweis darunter. Der Beschriftungstext bricht in der schmalen
   Login-Spalte um, daher Checkbox oben statt mittig ausgerichtet; der
   Hinweis rückt auf die Textkante der Beschriftung ein (17px Checkbox +
   Abstand, siehe ui.css .ms-checkbox).
   ========================================================================== */

.ms-login__trust {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-1);
}

.ms-login__trust .ms-checkbox {
  align-items: flex-start;
  line-height: 1.45;
}

.ms-login__trust .ms-checkbox input {
  flex-shrink: 0;
  margin: 1px 0 0;
}

.ms-login__trust-hint {
  margin: 0;
  padding-left: calc(17px + var(--ms-space-2));
  color: var(--ms-text-subtle);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ==========================================================================
   Rollen & Berechtigungen (/admin/rollen*, views/roles.js) sowie der
   lesende Abschnitt „Rollen & Gruppen" unter Benutzer → Tool-Zugriff
   (views/admin.js#zugriffContent). Nur Daysi-spezifische Abstände/Links -
   die Zwei-Spalten-Zuordnung selbst (.ms-board, .ms-board-picker) ist ein
   generischer Baustein in public/css/ui.css (Abschnitt 13).
   ========================================================================== */

.ms-roles-alert {
  margin-bottom: var(--ms-space-4);
}

.ms-roles-form {
  margin-bottom: var(--ms-space-6);
}

.ms-roles-link {
  color: var(--ms-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ms-roles-link:hover {
  color: var(--ms-text);
}

.ms-access-heading {
  margin: var(--ms-space-4) 0 var(--ms-space-1);
  font-family: var(--ms-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ms-text-muted);
}

.ms-access-heading:first-child {
  margin-top: 0;
}

.ms-access-effective {
  margin: var(--ms-space-4) 0;
  font-size: 13.5px;
  color: var(--ms-text-muted);
}

.ms-access-effective strong {
  color: var(--ms-text);
  font-weight: 600;
}

/* ==========================================================================
   Daysi-Startseite: Willkommen-Widget (widget:willkommen, lib/welcome.js,
   views/dashboard.js#renderWelcomeCard) und Verwaltung → Startansicht
   (views/adminStart.js)
   ========================================================================== */
/* Eigener, klar abgegrenzter Abschnitt ans Dateiende angehängt (siehe
   COMMON-RULES.md zu gemeinsam genutzten Dateien). Runde 2 (Patrick,
   2026-09-27, verbatim: „Soll das vordefinierte gelbe Highlighting
   bekommen, Länge nur auf 2 von 4 Boxen."): die gelbe Hervorhebung ist
   KEINE eigene Regel hier, sondern die Kachel-Farbe „Gelb" der Baustein-
   Hülle (.ms-block--c-yellow, Abschnitt „Kachel-Farben": farbiger Rand,
   leichte Tönung, 3px-Linie - hell und dunkel, auch mit eigener Palette),
   Breite 2 über .ms-block--w2. Der frühere gelbe Marker um den Namen ist
   entfallen (der Name steht jetzt im Seitentitel). Überschrift in der
   Größe des kompakten Seitentitels (.ms-page-head--compact
   .ms-page-head__title, ui.css). */

.ms-welcome {
  position: relative;
}

.ms-welcome__title {
  margin: 0;
  /* Platz für das "×" oben rechts (.ms-welcome__close) - nur wenn es
     tatsächlich gerendert ist (Startansicht-Vorlage/Vorschau haben keins,
     siehe views/dashboard.js#renderWidget), sonst bliebe rechts eine
     unnötige Lücke. */
  padding-right: 32px;
  font-family: var(--ms-font-display);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ms-text);
  overflow-wrap: anywhere;
}

.ms-welcome:not(:has(.ms-welcome__close-form)) .ms-welcome__title {
  padding-right: 0;
}

.ms-welcome__text {
  margin: var(--ms-space-3) 0 0;
  max-width: 62ch;
  color: var(--ms-text-muted);
  font-size: 15.5px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* "×" zum Ausblenden (Patrick, 2026-09-28) - dezent, oben rechts über der
   Karte, wie das Vorbild .ms-toast__close (ui.css). */
.ms-welcome__close-form {
  position: absolute;
  top: 14px;
  right: 14px;
}

.ms-welcome__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--ms-radius);
  background: transparent;
  color: var(--ms-text-subtle);
  cursor: pointer;
}

.ms-welcome__close:hover {
  background: color-mix(in srgb, var(--ms-text) 8%, transparent);
  color: var(--ms-text);
}

/* -- E-Mail-Pflicht: Hinweis „Bitte bestätige deine E-Mail-Adresse" -------
   (views/emailRequired.js#renderEmailPendingHint, Dashboard oben). */
.ms-email-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-2) var(--ms-space-3);
  margin-bottom: var(--ms-space-4);
}

.ms-email-hint__text {
  flex: 1 1 260px;
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
}

.ms-email-hint__close {
  margin-left: auto;
}

/* -- Verwaltung → Startansicht ------------------------------------------- */

.ms-startview__form {
  max-width: 640px;
}

.ms-startview__reset {
  margin-top: var(--ms-space-3);
}

.ms-startview__preview-label {
  margin: var(--ms-space-6) 0 var(--ms-space-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ms-text-muted);
}

/* Vorschau-Karte leicht vom umgebenden Formular absetzen (Karte in Karte);
   mit Kachel-Farbe (Hülle .ms-block--c-*, siehe views/adminStart.js) gilt
   deren Tönung. Breite ungefähr wie der Baustein auf der Startseite
   (2 von 4 Spalten). */
.ms-startview__preview {
  max-width: 640px;
}

.ms-startview__preview .ms-welcome {
  background: var(--ms-bg);
  box-shadow: none;
}

.ms-startview__layout-head {
  gap: var(--ms-space-3);
  flex-wrap: wrap;
}

.ms-startview__state {
  margin: var(--ms-space-1) 0 var(--ms-space-4);
  font-size: 13.5px;
}

/* Platzhalter statt echter Kennzahlen in der Vorlagen-Ansicht. */
.ms-startview-placeholder {
  border-style: dashed;
}

.ms-startview-placeholder__text {
  margin: var(--ms-space-2) 0 0;
  color: var(--ms-text-subtle);
  font-size: 13.5px;
}

/* -- Hintergrundbild der Startseite (views/dashboard.js
   #renderStartBackground, Patrick 2026-09-27) ---------------------------
   Das Login-Bild des Benutzers (sonst das Standardbild) halbtransparent
   HINTER den Bausteinen, nur auf der Startseite, pro Benutzer abschaltbar
   (Konto › Darstellung). Die Ebene ist ein direktes Kind von <body>,
   absolut zum Anfangs-Containing-Block (Seitenanfang, Fensterhöhe - erweitert
   die Seite daher nie) und ERBT die Innenabstände von <body>: oben Bar
   (+ Vorschau-Banner), links die Sidebar in ihrem jeweiligen Zustand
   (ausgeklappt/eingeklappt/mobil 0). So liegt das Bild genau im
   Inhaltsbereich, nie unter Bar oder Sidebar, ohne deren Maße hier zu
   wiederholen. z-index -1: unter dem gesamten Seiteninhalt, aber über dem
   Seitenhintergrund mit Tiefe (public/css/ui.css Abschnitt 14: <html> trägt
   --ms-page-bg, body::before Lichtschein/Punkte bzw. den hellen Verlauf -
   ebenfalls z-index -1, aber früher im Dokument, liegt also darunter).
   Karten bleiben deckend. Nach unten läuft das Bild per MASKE aus (seit
   2026-09-27 statt einer Überblendung mit --ms-bg): so scheint darunter der
   Seitengrund samt Tiefe-Ebene durch, statt dass ein zweiter, deckender
   Verlauf das Bild bzw. die Punkte „ausgraut" (hell wäre --ms-bg heller als
   --ms-page-bg, es entstünde eine sichtbare Kante). Keine Animation, kein
   Blur. */
.ms-start-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  box-sizing: border-box;
  padding-top: inherit;
  padding-left: inherit;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ms-start-bg__inner {
  position: relative;
  height: 100%;
  overflow: hidden;
  /* Gleicher Auslauf wie die frühere Überblendung (voll sichtbar oben,
     ab 85 % der Höhe ganz weg), siehe Abschnittskommentar oben. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}

.ms-start-bg__inner > picture {
  display: block;
  height: 100%;
}

.ms-start-bg__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.15;
}

/* ==========================================================================
   Seitenhintergrund mit Tiefe: Daysi-eigene Karten (Patrick, 2026-09-27)
   ========================================================================== */
/* Die Ebene selbst (html/body) steht im UI-Baukasten (public/css/ui.css
   Abschnitt 14), .ms-card bekommt Rand/Schatten dort. Hier nur die übrigen
   Daysi-Karten mit eigener Fläche: Tool-Kacheln der Startseite und die
   Werkzeugleiste im „Anpassen"-Modus - im hellen Theme derselbe weiche
   Karten-Schatten + zartere Rand, dunkel unverändert (Token-Werte, siehe
   Abschnitt 2). Farbige Kacheln (.ms-block--c-*) und der Hover-Rand
   (a.ms-tile:hover) behalten ihre Randfarbe (höhere Spezifität). */
.ms-tile,
.ms-dash-toolbar {
  border-color: var(--ms-card-border-depth, var(--ms-border));
  box-shadow: var(--ms-shadow-card, none);
}

/* -- Benutzerliste (Verwaltung): Name als Link zur Bearbeitung, Aktionen
   rechts als reine Icon-Buttons mit Tooltip (Patrick, 2026-09-27). -------- */
.ms-table-link {
  color: var(--ms-text);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.ms-table-link:hover,
.ms-table-link:focus-visible {
  color: var(--ms-accent-text);
  border-bottom-color: currentColor;
}

.ms-btn--icon {
  padding: 6px;
  min-width: 32px;
  justify-content: center;
}

.ms-btn--icon .ms-icon,
.ms-btn--icon svg {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* .ms-aicheck* (KI-Checkliste): ausgelagert nach public/css/ki-checkliste.css
   (geladen zwischen ms.css und ui.css, damit die Kaskade unverändert bleibt). */

/* -- Tool-Kacheln als „Öffnen“-Knöpfe (Patrick, 2026-09-29) ----------------
   Kompakt und waagerecht: Icon-Chip links (immer in der Kachel-/Akzentfarbe
   getönt), „<Tool> öffnen“, Pfeil rechts. Hover: anheben + Schatten, Rand
   in der Farbe, Pfeil rutscht nach rechts. Statt der 3px-Linie oben ein
   dezenter Farbverlauf aus der oberen linken Ecke. Steht bewusst am Ende,
   damit es die älteren .ms-tile-Regeln überschreibt. */
.ms-tile.ms-tile--launch {
  --ms-launch-c: var(--ms-tile-c-icon, var(--ms-accent));
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--ms-space-3);
  padding: var(--ms-space-4) 20px;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ms-launch-c) 16%, var(--ms-surface)) 0%, var(--ms-surface) 65%);
  transition: border-color var(--ms-transition-fast), transform var(--ms-transition-fast), box-shadow var(--ms-transition-fast);
}
.ms-block[class*='ms-block--c-'] > .ms-tile.ms-tile--launch {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ms-launch-c) 18%, var(--ms-surface)) 0%, var(--ms-surface) 65%);
}
.ms-block[class*='ms-block--c-'] > .ms-tile.ms-tile--launch::before { display: none; }
.ms-tile--launch .ms-tile__icon-chip {
  padding: 9px;
  background: color-mix(in srgb, var(--ms-launch-c) 20%, transparent);
  flex-shrink: 0;
}
.ms-tile--launch .ms-tile__icon-chip .ms-tile__icon {
  width: 24px;
  height: 24px;
  color: var(--ms-launch-c);
}
.ms-tile--launch .ms-tile__label {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
}
.ms-tile__arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--ms-launch-c);
  transition: transform var(--ms-transition-fast);
}
a.ms-tile.ms-tile--launch:hover,
.ms-block[class*='ms-block--c-'] > a.ms-tile.ms-tile--launch:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ms-launch-c) 70%, var(--ms-border));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
a.ms-tile.ms-tile--launch:hover .ms-tile__arrow { transform: translateX(4px); }
a.ms-tile.ms-tile--launch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ms-focus-outline, var(--ms-accent)), 0 0 0 5px var(--ms-focus-ring);
}
.ms-tile--launch.ms-tile--disabled { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  a.ms-tile.ms-tile--launch:hover,
  a.ms-tile.ms-tile--launch:hover .ms-tile__arrow { transform: none; }
}

/* -- Tool-Spalte der Startseite (Patrick, 2026-09-29) ----------------------
   „Wie wärs, wenn wir den Quickbuttons zum Tool eine feste Spalte geben,
   links neben den flexibel angeordneten Widgets?" - views/dashboard.js
   #renderToolColumn: ab 1024px eine feste, schmale Spalte (160px) mit den
   Knöpfen untereinander, rechts daneben das Grid; darunter eine
   umbrechende Zeile über dem Grid. Jeder Knopf trägt die Farbe seines
   Tools (--ms-launch-c aus GET /dashboard/tools.css, lib/toolColors.js).
   Das Grid bestimmt seine Spaltenzahl hier über Container-Queries (die
   verfügbare Breite neben der Spalte), nicht über die Fensterbreite. */
.ms-dash-layout {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-4);
}
.ms-dash-layout__main {
  flex: 1 1 auto;
  min-width: 0;
  container-type: inline-size;
}
.ms-dash-tools {
  flex: 0 0 auto;
  min-width: 0;
}
.ms-dash-tools__label {
  /* Nur für Screenreader (Spaltenname) - optisch bündig mit dem Grid. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ms-dash-tools__list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Schmale Ansicht: Raster mit gleich breiten Spalten – alle Knöpfe
     identisch groß, auch in der letzten Reihe (Patrick, 2026-09-29). */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  /* Alle Knöpfe gleich hoch - auch wenn ein Name auf zwei Zeilen umbricht. */
  grid-auto-rows: 1fr;
  gap: 10px;
}
.ms-dash-tools__item {
  position: relative;
  display: flex;
  min-width: 0;
  border-radius: var(--ms-radius-lg);
}
/* Linke Spalte = Feedback-Knopf (nur Admins, siehe unten) + Tool-Spalte. */
.ms-dash-side {
  flex: 0 0 auto;
  min-width: 0;
}
@media (min-width: 1024px) {
  .ms-dash-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
  }
  .ms-dash-tools,
  .ms-dash-side {
    flex: 0 0 160px;   /* Patrick 2026-09-29: ca. 2/3 der früheren 232px */
    width: 160px;
  }
  .ms-dash-side > .ms-dash-tools {
    width: 100%;
  }
  .ms-dash-tools__list {
    grid-template-columns: 1fr;
  }
}

/* Knopf in der Spalte: kompakt (~62px), Name + kleines „öffnen" darunter. */
.ms-tile.ms-tile--launch {
  --ms-launch-ink: var(--ms-launch-c);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ms-tile.ms-tile--launch {
    --ms-launch-ink: color-mix(in srgb, var(--ms-launch-c) 62%, #fff);
  }
}
:root[data-theme='dark'] .ms-tile.ms-tile--launch {
  --ms-launch-ink: color-mix(in srgb, var(--ms-launch-c) 62%, #fff);
}
.ms-dash-tools .ms-tile.ms-tile--launch,
.ms-dash-fb .ms-tile.ms-tile--launch {
  width: 100%;
  min-height: 56px;
  gap: 6px;
  padding: 8px 10px 8px 12px;
}
.ms-dash-tools[data-ms-tool-order] .ms-tile.ms-tile--launch {
  padding-left: 18px; /* Platz für den Griff */
  /* Ziehen mit der Maus soll keinen Text markieren (Knopf, kein Fließtext). */
  user-select: none;
  -webkit-user-select: none;
}
.ms-dash-tools .ms-tile--launch .ms-tile__icon-chip,
.ms-dash-fb .ms-tile--launch .ms-tile__icon-chip {
  padding: 6px;
}
.ms-dash-tools .ms-tile--launch .ms-tile__icon-chip .ms-tile__icon,
.ms-dash-fb .ms-tile--launch .ms-tile__icon-chip .ms-tile__icon {
  width: 20px;
  height: 20px;
}
/* 13.5px + kleinere Abstände/Pfeil: alle Namen (auch „Workshop",
   „Karussell") passen in die 160px-Spalte. Reicht es trotzdem nicht, bricht
   der Name auf höchstens zwei Zeilen um statt mit „…" zu enden. */
.ms-dash-tools .ms-tile--launch .ms-tile__label,
.ms-dash-fb .ms-tile--launch .ms-tile__label { font-size: 13.5px; }
.ms-dash-tools .ms-tile--launch .ms-tile__text .ms-tile__label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.2;
}
.ms-dash-tools .ms-tile__arrow { width: 14px; height: 14px; }

/* -- Feedback-Knopf über der Tool-Spalte (nur Administratoren) ------------
   views/dashboard.js#renderFeedbackAlert (Patrick, 2026-09-29): nur bei
   offenen Feedbacks, gleiche Knopf-Familie wie die Tool-Knöpfe, aber als
   Hinweis in Rot mit der Anzahl als Pill statt Pfeil. Darunter etwas mehr
   Abstand + eine Trennlinie zu den Tool-Knöpfen. Schmale Ansicht: volle
   Zeilenbreite über dem Tool-Raster. */
.ms-dash-fb:not(:last-child) {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--ms-border);
}
.ms-tile.ms-tile--launch.ms-tile--alert {
  --ms-launch-c: var(--ms-danger);
  border-color: color-mix(in srgb, var(--ms-danger) 45%, var(--ms-border));
}
.ms-tile--alert .ms-tile__sub {
  color: var(--ms-danger-text, var(--ms-danger));
  font-weight: 600;
}
.ms-dash-fb__count {
  flex-shrink: 0;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ms-danger);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ms-tile--launch .ms-tile__icon-chip .ms-tile__icon,
.ms-tile--launch .ms-tile__arrow {
  color: var(--ms-launch-ink);
}
.ms-tile--launch .ms-tile__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.25;
}
.ms-tile--launch .ms-tile__text .ms-tile__label {
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ms-tile--launch .ms-tile__sub {
  font-size: 12px;
  color: var(--ms-text-muted);
  transition: color var(--ms-transition-fast);
}
a.ms-tile.ms-tile--launch:hover .ms-tile__sub,
a.ms-tile.ms-tile--launch:focus-visible .ms-tile__sub {
  /* Barrierefreiheit 2026-09-30: reine Kachelfarbe erreicht als 12px-Schrift
     hell nur 3,7-4,8:1 - mit 25 % Textfarbe gemischt >= 4,97:1 (hell) bzw.
     >= 9,9:1 (dunkel), der Farbton bleibt erkennbar. */
  color: color-mix(in srgb, var(--ms-launch-ink) 75%, var(--ms-text));
}
.ms-tile--launch .ms-tile__text .ms-tile__badge {
  margin-top: 2px;
}

/* Umsortieren (public/js/dashboard-tools.js): dezenter Griff links, beim
   Ziehen folgt der Knopf dem Zeiger, sein Platz bleibt gestrichelt frei. */
.ms-dash-tools__grip {
  position: absolute;
  left: 2px;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 32px;
  margin-top: -16px;
  border-radius: 4px;
  color: var(--ms-text-muted);
  opacity: 0;
  cursor: grab;
  touch-action: none;
  transition: opacity var(--ms-transition-fast);
}
.ms-dash-tools__grip-icon {
  width: 14px;
  height: 14px;
}
.ms-dash-tools__item:hover .ms-dash-tools__grip,
.ms-dash-tools__item:focus-within .ms-dash-tools__grip {
  opacity: 0.75;
}
@media (hover: none) {
  .ms-dash-tools__grip {
    opacity: 0.5;
  }
}
.ms-dash-tools.is-sorting,
.ms-dash-tools.is-sorting * {
  cursor: grabbing !important;
  user-select: none;
  -webkit-user-select: none;
}
.ms-dash-tools__item.is-dragging {
  z-index: 5;
  outline: 2px dashed color-mix(in srgb, var(--ms-text-muted) 55%, transparent);
  outline-offset: -2px;
}
.ms-dash-tools__item.is-dragging .ms-dash-tools__grip {
  opacity: 0;
}
.ms-dash-tools__item.is-dragging .ms-tile.ms-tile--launch {
  position: relative;
  z-index: 6;
  transition: none;
  border-color: color-mix(in srgb, var(--ms-launch-c) 70%, var(--ms-border));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}
.ms-dash-tools__item.is-moved .ms-tile.ms-tile--launch {
  border-color: color-mix(in srgb, var(--ms-launch-c) 70%, var(--ms-border));
}

/* Grid neben der Spalte: Spaltenzahl nach verfügbarer Breite (Container)
   statt Fensterbreite - höhere Spezifität als die Fenster-Regeln oben. */
body .ms-dash-layout__main > .ms-tiles {
  grid-template-columns: 1fr;
}
@container (min-width: 440px) {
  body .ms-dash-layout__main > .ms-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}
@container (min-width: 800px) {
  body .ms-dash-layout__main > .ms-tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}
@container (max-width: 439px) {
  .ms-dash-layout__main .ms-block {
    grid-column: span 1 !important;
  }
}

/* Zwei-Faktor-Bestätigungsseite (views/stepUp.js) - Knopfzeile rechts,
   früher über .ms-confirm-dlg__actions (seit 2026-09-29 ersetzt durch den
   Modal-Baukasten .ms-modal in ui.css, der hier nicht passt: das ist eine
   Seite, kein Pop-up). */
.ms-stepup__actions {
  margin-top: var(--ms-space-4);
  display: flex;
  justify-content: flex-end;
  gap: var(--ms-space-2);
}

/* -- KI-Regeln (views/aiRules.js, /account/ki-regeln + Hinweis auf der
   Startseite). Der Hinweis nutzt .ms-email-hint (oben) mit. ------------- */

.ms-airules-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  margin: 0 0 var(--ms-space-3);
  font-size: 13px;
}

.ms-airules-counter--near {
  color: var(--ms-warn-text, var(--ms-warn));
}

.ms-airules-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-3);
}

.ms-airules-history__item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ms-space-2) var(--ms-space-3);
  padding: var(--ms-space-3);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
}

.ms-airules-history__item--new {
  border-color: var(--ms-warn);
}

.ms-airules-history__head {
  flex: 1 1 260px;
  min-width: 0;
}

.ms-airules-history__title,
.ms-airules-history__meta,
.ms-airules-history__reason {
  margin: 0;
}

.ms-airules-history__title {
  font-weight: 600;
}

.ms-airules-history__meta,
.ms-airules-history__reason {
  color: var(--ms-text-muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.ms-airules-history__action {
  margin-left: auto;
}

.ms-airules-history__details {
  flex: 1 1 100%;
  order: 3;
  font-size: 13px;
}

.ms-airules-history__details summary {
  cursor: pointer;
  color: var(--ms-text-muted);
}

.ms-airules-diff {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ms-space-3);
  margin-top: var(--ms-space-2);
}

.ms-airules-diff__label {
  margin: 0 0 var(--ms-space-1);
  font-weight: 600;
}

.ms-airules-pre {
  margin: 0;
  padding: var(--ms-space-2);
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  background: var(--ms-surface-2);
  border-radius: var(--ms-radius);
}

/* ==========================================================================
   KI-Connector: Zustimmungsseite + Bereichs-Karten (Patrick 2026-09-30)
   ========================================================================== */
/* Eigener Abschnitt am Dateiende (COMMON-RULES.md). Markup:
   views/oauth.js#renderConsent/renderAreaCard (die Karten auch unter
   Konto › Verbundene Apps, views/account.js), Verhalten:
   public/js/oauth-consent.js. Nur Tokens (hell/dunkel ziehen automatisch
   mit), schmale Seite .ms-page--narrow (880 px), ab 390 px einspaltig.
   „Ablehnen" und „Zulassen" bewusst gleich groß und gleich gewichtet
   (EDPB: keine Dominanz der Zustimmung). */

.ms-consent {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-6);
}

.ms-consent a:not(.ms-btn),
.ms-connected a:not(.ms-btn) {
  color: var(--ms-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ms-consent a:not(.ms-btn):focus-visible,
.ms-connected a:not(.ms-btn):focus-visible {
  outline: 2px solid var(--ms-focus-outline, var(--ms-accent));
  outline-offset: 2px;
  border-radius: 2px;
}

.ms-consent__head {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-3);
}

.ms-consent__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  margin: 0;
  font-size: 13.5px;
  color: var(--ms-text-muted);
}

.ms-consent__eyebrow .ms-icon {
  width: 16px;
  height: 16px;
}

.ms-consent__title {
  font-size: clamp(28px, 3.6vw, 40px);
  overflow-wrap: anywhere;
}

.ms-consent__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-2);
  font-size: 14px;
}

.ms-consent__facts li {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
}

.ms-consent__facts li > .ms-icon {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex-shrink: 0;
  color: var(--ms-text-muted);
}

.ms-consent__facts li > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ms-consent__facts .ms-badge .ms-icon {
  width: 12px;
  height: 12px;
}

.ms-consent__form {
  gap: var(--ms-space-6);
}

.ms-consent__section-title {
  font-family: var(--ms-font-ui);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 var(--ms-space-3);
}

.ms-consent__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-3);
  font-size: 14px;
}

.ms-consent__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-space-3);
}

.ms-consent__points .ms-icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--ms-accent-text);
}

fieldset.ms-fieldset.ms-consent__fieldset {
  padding: var(--ms-space-4);
  min-width: 0;
}

fieldset.ms-fieldset.ms-consent__fieldset > legend {
  font-size: 15px;
  font-weight: 600;
  color: var(--ms-text);
}

.ms-consent__hint {
  margin: 0 0 var(--ms-space-3);
  font-size: 13.5px;
  color: var(--ms-text-muted);
}

.ms-consent__fieldset > .ms-alert {
  margin-top: var(--ms-space-3);
}

.ms-consent__fieldset > .ms-alert > .ms-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.ms-consent__none {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  margin: var(--ms-space-3) 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ms-warn-text, var(--ms-warn));
}

.ms-consent__none[hidden] {
  display: none;
}

.ms-consent__none .ms-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* -- Bereichs-Karten -------------------------------------------------------- */

.ms-consent__areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-3);
}

.ms-consent-area {
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  background: var(--ms-surface);
  min-width: 0;
}

.ms-consent-area--selectable:has(.ms-consent-area__check:checked) {
  border-color: color-mix(in srgb, var(--ms-accent) 45%, var(--ms-border));
}

/* Abgewählt: Inhalt gedämpft, Checkbox selbst bleibt voll sichtbar. */
.ms-consent-area--selectable:has(.ms-consent-area__check:not(:checked)) .ms-consent-area__text,
.ms-consent-area--selectable:has(.ms-consent-area__check:not(:checked)) .ms-consent-area__icon,
.ms-consent-area--selectable:has(.ms-consent-area__check:not(:checked)) .ms-consent-area__details {
  opacity: 0.6;
}

.ms-consent-area__head {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-space-3);
  padding: 14px 16px;
}

label.ms-consent-area__head {
  cursor: pointer;
}

.ms-consent-area__check {
  width: 18px;
  height: 18px;
  margin: 7px 0 0;
  flex-shrink: 0;
  accent-color: var(--ms-accent);
  cursor: pointer;
}

.ms-consent-area__check:focus-visible {
  outline: 2px solid var(--ms-focus-outline, var(--ms-accent));
  outline-offset: 2px;
}

.ms-consent-area__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--ms-radius);
  background: var(--ms-accent-soft);
  color: var(--ms-accent-soft-text);
}

.ms-consent-area__icon .ms-icon {
  width: 18px;
  height: 18px;
}

.ms-consent-area__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ms-consent-area__title {
  font-size: 15px;
  font-weight: 600;
}

.ms-consent-area__summary {
  font-size: 13.5px;
  color: var(--ms-text-muted);
}

.ms-consent-area__meta {
  font-size: 12.5px;
  color: var(--ms-text-subtle);
  overflow-wrap: anywhere;
}

.ms-consent-area__details {
  border-top: 1px solid var(--ms-border);
}

.ms-consent-area__toggle {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  padding: 10px 16px;
  list-style: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ms-accent-text);
}

.ms-consent-area__toggle::-webkit-details-marker {
  display: none;
}

.ms-consent-area__toggle .ms-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--ms-transition-fast);
}

.ms-consent-area__details[open] > .ms-consent-area__toggle .ms-icon {
  transform: rotate(180deg);
}

.ms-consent-area__toggle:focus-visible {
  outline: 2px solid var(--ms-focus-outline, var(--ms-accent));
  outline-offset: -2px;
  border-radius: var(--ms-radius);
}

.ms-consent-area__body {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-4);
  padding: 0 16px 16px;
}

.ms-consent-caps__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  margin: 0 0 var(--ms-space-2);
  font-family: var(--ms-font-ui);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}

.ms-consent-caps__title .ms-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--ms-text-muted);
}

.ms-consent-caps__note {
  font-size: 12px;
  font-weight: 500;
  color: var(--ms-text-subtle);
}

.ms-consent-caps__list {
  margin: 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
}

.ms-consent-caps__label {
  font-weight: 600;
}

.ms-consent-caps__detail,
.ms-consent-caps--excluded .ms-consent-caps__list {
  color: var(--ms-text-muted);
}

/* „Nur lesen" gewählt bzw. Verbindung ohne Schreibrecht: Schreib-
   Fähigkeiten ausgegraut (Hinweistext daneben sagt es auch in Worten). */
.ms-consent--read .ms-consent-caps--write,
.ms-consent-caps--off {
  opacity: 0.55;
}

/* -- Datenschutz (aufklappbar) ---------------------------------------------- */

.ms-consent__privacy {
  border: 1px solid var(--ms-card-border-depth, var(--ms-border));
  border-radius: var(--ms-radius-lg);
  background: var(--ms-surface);
}

.ms-consent__privacy-toggle {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  padding: 16px 20px;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

.ms-consent__privacy-toggle::-webkit-details-marker {
  display: none;
}

.ms-consent__privacy-toggle > span {
  flex: 1;
  min-width: 0;
}

.ms-consent__privacy-toggle .ms-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ms-accent-text);
}

.ms-consent__privacy-toggle .ms-consent__chevron {
  color: var(--ms-text-muted);
  transition: transform var(--ms-transition-fast);
}

.ms-consent__privacy[open] .ms-consent__chevron {
  transform: rotate(180deg);
}

.ms-consent__privacy-toggle:focus-visible {
  outline: 2px solid var(--ms-focus-outline, var(--ms-accent));
  outline-offset: -2px;
  border-radius: var(--ms-radius-lg);
}

.ms-consent__privacy-body {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-4);
  padding: 0 20px 20px;
  font-size: 13.5px;
}

.ms-consent__privacy-title {
  margin: 0 0 4px;
  font-family: var(--ms-font-ui);
  font-size: 13.5px;
  font-weight: 600;
}

.ms-consent__privacy-item p,
.ms-consent__privacy-links {
  margin: 0;
  color: var(--ms-text-muted);
}

/* -- Entscheidung ------------------------------------------------------------ */

.ms-consent__redirect {
  margin: 0;
  font-size: 13.5px;
  color: var(--ms-text-muted);
}

.ms-consent__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ms-space-3);
}

.ms-consent__action {
  width: 100%;
  border-color: var(--ms-border-strong);
}

.ms-consent__action:focus-visible {
  outline: 2px solid var(--ms-focus-outline, var(--ms-accent));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ms-consent-area__toggle .ms-icon,
  .ms-consent__privacy-toggle .ms-consent__chevron {
    transition: none;
  }
}

@media (max-width: 480px) {
  .ms-consent__summary {
    padding: 18px;
  }

  fieldset.ms-fieldset.ms-consent__fieldset {
    padding: var(--ms-space-3);
  }

  .ms-consent-area__head {
    padding: 12px;
  }

  .ms-consent-area__toggle {
    padding: 10px 12px;
  }

  .ms-consent-area__body {
    padding: 0 12px 12px;
  }

  .ms-consent__privacy-toggle {
    padding: 14px 16px;
  }

  .ms-consent__privacy-body {
    padding: 0 16px 16px;
  }
}

/* -- Konto › Verbundene Apps: Bereiche je Verbindung + Detailansicht -------- */

.ms-connected__areas {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ms-text-muted);
}

.ms-connected__intro {
  margin: 0 0 var(--ms-space-4);
  font-size: 13.5px;
  color: var(--ms-text-muted);
}

.ms-connected__back {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  font-size: 13.5px;
}

/* ==========================================================================
   Dashboard: Zahnrad „Einstellungen" am Baustein + Bereich „Neuer Eintrag"
   der KI-Checkliste (2026-10-01)
   ========================================================================== */
/* Eigener Abschnitt am Dateiende (COMMON-RULES.md). Zahnrad: views/dashboard.js
   #widgetSettingsButton, Popup: public/js/dashboard-widget-settings.js.
   „Neuer Eintrag": views/dashboard.js#renderAiChecklistCard, Verhalten:
   public/js/ki-checkliste.js (Combobox). Nur Tokens (hell/dunkel automatisch). */

/* -- Zahnrad rechts oben in der Ecke des Bausteins -------------------------------
   Dezent (Patrick: „dezent, bei Hover/Fokus kräftiger, auf Touch immer
   sichtbar"); ohne JS bleibt es `hidden`. Im „Anpassen"-Modus gibt es nur
   Darstellungs-Einstellungen - das Zahnrad ist dort ausgeblendet. */

.ms-block {
  position: relative;
}

.ms-block__gear {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--ms-radius);
  background: transparent;
  color: var(--ms-text-subtle);
  cursor: pointer;
  opacity: 0.55;
  transition:
    opacity 0.12s ease,
    color 0.12s ease,
    background-color 0.12s ease;
}

.ms-block__gear[hidden] {
  display: none;
}

.ms-block__gear .ms-icon {
  width: 16px;
  height: 16px;
}

.ms-block:hover > .ms-block__gear,
.ms-block__gear:hover,
.ms-block__gear:focus-visible {
  opacity: 1;
  color: var(--ms-text);
}

.ms-block__gear:hover {
  background: color-mix(in srgb, var(--ms-text) 8%, transparent);
}

.ms-block__gear:focus-visible {
  outline: 2px solid var(--ms-focus-outline, var(--ms-accent));
  outline-offset: 1px;
}

@media (hover: none) {
  .ms-block__gear {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-block__gear {
    transition: none;
  }
}

.ms-block--editing > .ms-block__gear {
  display: none;
}

/* Platz fürs Zahnrad: Titel bzw. Kopf der Karte (mit Zählern) laufen nicht darunter. */
.ms-block--has-gear:not(.ms-block--editing) > .ms-card > .ms-card__title,
.ms-block--has-gear:not(.ms-block--editing) .ms-aicheck__head {
  padding-right: 16px;
}

/* -- Popup „<Baustein> – Einstellungen" (UI-Kit .ms-modal) ---------------------- */

.ms-widget-settings__form {
  margin: 0;
}

.ms-widget-settings__group {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-2);
}

.ms-widget-settings__hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--ms-text-subtle);
}

.ms-widget-settings__themes {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-2);
  max-height: 13rem;
  overflow-y: auto;
  padding: 2px;
}

.ms-widget-settings__nolabel {
  margin-top: var(--ms-space-1);
  padding-top: var(--ms-space-2);
  border-top: 1px solid var(--ms-border);
}

.ms-widget-settings__error {
  margin: 0;
  font-size: 13px;
  color: var(--ms-danger-text, var(--ms-danger));
}

.ms-widget-settings__error[hidden] {
  display: none;
}