/* ============================================================
   Orbit · Am Zehnhoff-Söns – App Styles
   Custom Design System, kein Build-Tool erforderlich.
   ============================================================ */

/* CSS Reset */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote {
  margin: 0; padding: 0;
}
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
/* Tailwind v4: .text-white liegt im @layer utilities und wird sonst vom (unlayered)
   `a { color: inherit }` überschrieben → <a>-Buttons mit text-white würden dunkel rendern.
   Diese gezielte Regel stellt die weiße Schrift für solche Link-Buttons wieder her. */
a.text-white { color: #fff; }

/* ---- `hidden` schlägt die später ausgegebenen Display-Utilities ------------
   Tailwind gibt .inline-*, .table-* und .list-item im Stylesheet NACH .hidden
   aus. Bei gleichem Gewicht gewinnt die spätere Regel — `class="hidden
   inline-flex …"` bleibt also sichtbar, obwohl `hidden` gesetzt ist (traf
   u. a. den Button „Alle gelesen" im Benachrichtigungs-Modal, der nach dem
   Markieren stehen blieb). Zwei Klassen im Selektor geben das nötige Gewicht —
   ohne !important und ohne die responsiven Muster (`hidden lg:inline-flex`)
   zu stören, denn dort heißt die Klasse `lg:inline-flex`. */
.hidden.inline, .hidden.inline-block, .hidden.inline-flex, .hidden.inline-grid,
.hidden.inline-table, .hidden.list-item, .hidden.table, .hidden.table-caption,
.hidden.table-cell, .hidden.table-column, .hidden.table-column-group,
.hidden.table-footer-group, .hidden.table-header-group, .hidden.table-row,
.hidden.table-row-group { display: none; }

/* ---- Nachgereichte Utility: .pl-3 ----------------------------------------
   tailwind.css ist ein vorgebautes Artefakt (im Repo liegt kein Build-Tool).
   Der letzte Build hat `pl-3` nicht erfasst — die Klasse fehlt im Stylesheet,
   während .pl-2/.pl-4 vorhanden sind. Folge: Buttons mit `pl-3 pr-2.5`
   (Mehrfachauswahl in der Mitarbeiter-Detailansicht, Filter in „Termine")
   hatten links gar keinen Innenabstand, das Symbol klebte am Rahmen.
   Beim nächsten Tailwind-Build kann dieser Block entfallen. */
.pl-3 { padding-left: calc(var(--spacing) * 3); }

/* ============================================================
   Design Tokens (aus React-UI-Demo übernommen)
   ============================================================ */
:root {
  /* ── Mobile Navigationsleiste ──────────────────────────────────────────────
     --extr-bottomnav-pb: unterer Innenabstand der Leiste. Von der Safe Area
       (Home-Indikator) wird der größere Teil des 0.75rem-Innenabstands der
       Einträge abgezogen, damit die Symbolzeile nicht zu hoch schwebt.
       Ohne Safe Area (Browser/Desktop) ist env() = 0. */
  --extr-bottomnav-pb: max(env(safe-area-inset-bottom, 0px) - 1.25rem, 0.25rem);

  /* ── Orbit / Am Zehnhoff-Söns – Markenfarben (HSL-Channels für hsl(var(--x)) Syntax) ── */
  /* #048072 */ --primary:            173 94% 26%;
  /* #048072 */ --primary-hsl:        hsl(173, 94%, 26%);
                --primary-foreground: 0 0% 100%;
  /* #f6f9f8 */ --background:         168 16% 97%;
  /* #f6f9f8 */ --background-hsl:     hsl(168, 16%, 97%);
  /* #1d2a2e */ --foreground:         190 22% 14%;
  /* #ffffff */ --card:               0 0% 100%;
  /* #1d2a2e */ --card-foreground:    190 22% 14%;
  /* #1e3834 */ --secondary:          170 30% 17%;
  /* #1e3834 */ --secondary-hsl:      hsl(170, 30%, 17%);
                --secondary-foreground: 0 0% 100%;
  /* #eef4f1 */ --muted:              160 18% 95%;
  /* #5f6b6e */ --muted-foreground:   190 8% 40%;
  /* cool   */ --border:             168 18% 90%;
  /* #048072 */ --accent:             173 94% 26%;
  /* #d4183d */ --destructive:        350 73% 46%;

  /* #ffffff */ --sidebar-bg:         0 0% 100%;
                --sidebar-border:     168 18% 90%;

  --radius:   1rem;
  /* Elevations-System (teal-getönt; im Dark-Scope gedämpft überschrieben) */
  --extr-shadow-sm: 0 1px 2px hsl(190 22% 14% / 0.05), 0 1px 3px hsl(190 22% 14% / 0.07);
  --extr-shadow-md: 0 2px 6px hsl(173 40% 18% / 0.08), 0 8px 20px hsl(173 40% 18% / 0.10);
  --extr-shadow-lg: 0 12px 32px hsl(173 40% 18% / 0.16);
  --font-sans: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   Base
   ============================================================ */
body.extr-body {
  font-family: var(--font-sans);
  background-color: hsl(var(--background));   /* near-white, faint teal */
  color: hsl(var(--foreground));               /* dark slate */
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Shell Layout
   ============================================================ */
.extr-shell {
  display: flex;
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.extr-sidebar {
  display: none; /* Mobile: hidden */
  width: 256px;
  flex-shrink: 0;
  background: hsl(var(--sidebar-bg));
  border-right: 1px solid hsl(var(--sidebar-border));
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 40;
  overflow-y: auto;
}

@media (min-width: 1024px) {
  .extr-sidebar { display: flex; }
  .extr-main { padding-left: 256px; padding-bottom: 0; }
}

.extr-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  border-bottom: 1px solid hsl(var(--sidebar-border));
}

.extr-logo-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: hsl(var(--primary) / 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-hsl);
  flex-shrink: 0;
}

.extr-logo-icon svg { width: 1.25rem; height: 1.25rem; }

.extr-logo-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: hsl(var(--foreground));
}
.extr-logo-sub {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

/* Sidebar User */
.extr-sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid hsl(var(--sidebar-border));
}

.extr-sidebar-user-info { flex: 1; min-width: 0; }
.extr-sidebar-user-name {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.extr-sidebar-user-role {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

/* Sidebar Nav */
.extr-sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
/* Dezente Zwischenüberschriften in der Seitenleisten-Navigation */
.extr-nav-heading {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
  opacity: 0.65;
  padding: 0.75rem 0.75rem 0.2rem;
}

.extr-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: hsl(var(--muted-foreground));
  transition: background 0.15s, color 0.15s;
}

.extr-nav-item:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.extr-nav-item--active {
  background: hsl(var(--primary) / 0.1);
  color: var(--primary-hsl);
}

.extr-nav-item--logout {
  color: hsl(var(--muted-foreground));
}
.extr-nav-item--logout:hover {
  background: hsl(0 84% 60% / 0.1);
  color: hsl(0, 84%, 60%);
}

.extr-nav-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* Indikator-Badge (Sidebar) */
.extr-nav-badge {
  margin-left: auto;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: hsl(0 84% 60%);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px hsl(var(--sidebar-background, var(--background)));
}
.extr-nav-badge.hidden { display: none; }

/* Sidebar Footer */
.extr-sidebar-footer {
  padding: 1rem;
  border-top: 1px solid hsl(var(--sidebar-border));
}
/* Profil-Block sitzt jetzt im Footer (über Abmelden): kompakt, ohne eigene Trennlinie */
.extr-sidebar-footer .extr-sidebar-user {
  padding: 0.5rem;
  border-bottom: none;
  margin-bottom: 0.5rem;
}
.extr-sidebar-version {
  font-size: 0.7rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
  margin-top: 0.5rem;
}

/* ---- Main ---- */
.extr-main {
  flex: 1;
  min-height: 100vh;
  /* Platz für die fixierte Bottom-Nav. Die feste Reserve von 5rem war zu knapp:
     die Leiste ist im Browser bereits ~87px hoch und in der PWA mit Safe Area
     ~97px – bei zweizeiligen Beschriftungen noch mehr. Dadurch lag das letzte
     Element einer Seite (z. B. die Kachel „Weitere") unter der Navigation.
     app.js misst die Leiste und schreibt --extr-bottomnav-h (Höhe + 1rem Luft);
     der Fallback greift, solange das Skript noch nicht gelaufen ist. */
  padding-bottom: var(--extr-bottomnav-h, calc(6.5rem + env(safe-area-inset-bottom, 0px)));
  overflow-x: clip; /* clip statt hidden: bricht position:sticky der Header nicht */
  width: 100%;
  min-width: 0;
}

/* Desktop: keine Bottom-Nav → keine Reserve. Muss hier stehen (nach der
   Basisregel) und die Variable setzen, weil die frühere Media-Query weiter
   oben im Stylesheet bei gleicher Spezifität von der Basisregel überstimmt
   wurde und deshalb wirkungslos blieb. */
@media (min-width: 1024px) {
  .extr-main { --extr-bottomnav-h: 0px; padding-bottom: 0; }
}

/* Inhalts-Container (max. 1845px, linksbündig) */
.extr-content,
.extr-container {
  width: 100%;
  max-width: 1845px;
  margin-left: 0;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1024px) {
  .extr-content,
  .extr-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Vollbreiter Header-Hintergrund; Inhalt in .extr-content */
/* ---- PWA: Statusleiste (Uhrzeit, Batterie) nicht aussparen ----
   Mit viewport-fit=cover und status-bar-style „black-translucent" reicht das
   App-Fenster bis unter die Statusleiste. Ohne Ausgleich läge der Inhalt unter
   der Uhr. Die obersten Elemente ziehen den Hintergrund deshalb bis an den
   Bildschirmrand und rücken ihren Inhalt um die Safe-Area ein. Im Browser und
   auf dem Desktop ist env(safe-area-inset-top) = 0 — dort ändert sich nichts. */
.extr-body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.extr-bottom-nav {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.extr-header-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--border));
  width: 100%;
}

/* Fallback: ohne Blur-Unterstützung deckend weiß, damit es lesbar bleibt */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .extr-header-bar {
    background-color: #fff;
  }
}

/* Dashboard-Willkommensbereich */
.extr-dashboard-hero {
  --extr-hero-grad: linear-gradient(120deg, #035e52 0%, #048072 55%, #06a890 100%);
  position: relative;
  background: var(--extr-hero-grad);
  /* Hero füllt in der PWA auch den Bereich hinter der Statusleiste (s. o.);
     der Inhalt rückt entsprechend nach unten (Basis: Tailwind pt-6 = 1.5rem). */
  padding-top: calc(1.5rem + env(safe-area-inset-top, 0px));
}
@media (min-width: 1024px) {
  /* Desktop: Hero liegt mit Abstand im Layout, kein Safe-Area-Ausgleich nötig. */
  .extr-dashboard-hero { padding-top: 1.5rem; }
}
/* Standort-Hintergrundbild als echtes <img class="extr-hero-photo"> (erstes Kind), NICHT
   als CSS-Hintergrund: ein dynamisch gesetztes Hintergrundbild (CSS-Variable ODER direkt,
   per JS-setProperty / innerHTML-Injektion) malt Chromium teils erst nach einem Reload.
   Ein echtes <img> malt zuverlässig. Darüber die 15%-Gradient-Maske via ::after. */
.extr-hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit; z-index: 0;
}
.extr-dashboard-hero.has-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--extr-hero-grad);
  opacity: 0.85;
  border-radius: inherit;
}
.extr-dashboard-hero.has-photo > *:not(.extr-hero-photo) { position: relative; z-index: 2; }

/* Der Inhaltsbereich kann mobil per negativem Rand unter den Hero gezogen
   werden. Ohne eigene Ebene malt der positionierte Hero (bzw. seine
   Foto-Maske ::after) über die erste Karte. Der Hero bekommt darum eine
   eigene Stacking-Ebene, der Inhalt liegt darüber. */
.extr-dashboard-hero { z-index: 0; }
.extr-dashboard-body { position: relative; z-index: 1; }

/* ============================================================
   News-Artikel Detailansicht – Fließtext-Typografie
   ============================================================ */
.nd-article-body h1,
.nd-article-body h2,
.nd-article-body h3,
.nd-article-body h4 {
  color: hsl(var(--foreground));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.nd-article-body h1 { font-size: 2rem;    margin-top: 2.5rem; margin-bottom: 0.875rem; }
.nd-article-body h2 { font-size: 1.5rem;  margin-top: 2.25rem; margin-bottom: 0.75rem;
                      padding-bottom: 0.4rem;
                      border-bottom: 2px solid hsl(var(--border)); }
.nd-article-body h3 { font-size: 1.125rem; margin-top: 1.75rem; margin-bottom: 0.5rem; font-weight: 600; }
.nd-article-body h4 { font-size: 1rem;    margin-top: 1.5rem;  margin-bottom: 0.375rem; font-weight: 600; }

/* Erstes Element braucht keinen Abstand nach oben */
.nd-article-body > *:first-child { margin-top: 0; }

/* Eingebettete Bildergalerie im Beitrag (Summernote-Button „Bildergalerie einfügen").
   Der HTML-Sanitizer lässt nur eine Property-Allowlist im style-Attribut durch —
   das Layout darf deshalb nicht an Inline-Styles hängen, sondern kommt über die Klasse.
   Gilt in News-/Wissen-Detail UND im Editor (Summernote rendert im selben Dokument). */
.news-embed-gallery {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0;
  margin: 16px 0;
}
.news-embed-gallery img,
.nd-article-body .news-embed-gallery img,
.wd-prose .news-embed-gallery img {
  flex: 0 0 auto;
  width: min(85%, 520px);
  max-height: 360px;
  object-fit: cover;
  scroll-snap-align: center;
  border-radius: 12px;
  margin: 0;
}

.extr-page {
  max-width: 1845px;
  margin-left: 0;
  margin-right: auto;
  padding: 1.5rem 1rem;
}

@media (min-width: 1024px) {
  .extr-page { padding: 2rem 2rem; }
}

/* ---- Bottom Nav (Mobile) ---- */
.extr-bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: hsl(var(--background));
  border-top: 1px solid hsl(var(--border));
  /* Unter den Overlays (z-index ab 50): sonst deckt die Leiste die Fußzeile
     eines Modals ab, weil sie im DOM nach dem Seiteninhalt steht. So legt
     sich das Modal samt Abdunklung sauber über die Navigation. */
  z-index: 45;
  /* Mindestabstand unten, damit Touch-Ziele nicht direkt am Rand /
     unter dem Home-Indikator liegen (PWA / iOS). Die Einträge bringen selbst
     schon 0.75rem Innenabstand mit — davon wird der größere Teil abgezogen,
     sonst schwebt die Symbolzeile in der PWA sichtbar zu weit über dem
     Bildschirmrand. Der Home-Indikator bleibt frei: unter dem Text liegen
     weiterhin dieser Abstand plus die 0.75rem des Eintrags. */
  padding-bottom: var(--extr-bottomnav-pb);
}

@media (min-width: 1024px) {
  .extr-bottom-nav { display: none; }
}

.extr-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.25rem;
  text-decoration: none;
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  gap: 0.3rem;
  transition: color 0.15s;
}

.extr-bottom-nav-item--active {
  color: var(--primary-hsl);
}

.extr-bottom-nav-icon { width: 1.25rem; height: 1.25rem; }

/* Indikator-Badge (Mobile-Nav, über dem Icon) */
.extr-bottom-nav-icon-wrap {
  position: relative;
  display: inline-flex;
}
.extr-bottom-nav-badge {
  position: absolute;
  top: -0.4rem;
  left: 60%;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: hsl(0 84% 60%);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px #fff;
}
.extr-bottom-nav-badge.hidden { display: none; }

/* Indikator-Badge (Dashboard-Schnellaktionen) */
.extr-quick-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: hsl(0 84% 60%);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px #fff;
}
.extr-quick-badge.hidden { display: none; }

/* ── Mobiles „Weitere"-Overlay (Schnellaktionen-Überlauf) ── */
.extr-more-overlay {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-end;
  background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(2px);
}
.extr-more-overlay.hidden { display: none; }
.extr-more-sheet {
  width: 100%;
  max-height: 75vh;
  background: #fff;
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: 0 -8px 30px -8px rgb(0 0 0 / 0.25);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: extr-more-up 0.18s ease-out;
}
@keyframes extr-more-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.extr-more-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid hsl(var(--border));
  flex-shrink: 0;
}
.extr-more-list { overflow-y: auto; padding: 0.5rem; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); }
.extr-more-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 0.75rem;
  border-radius: 0.75rem;
  color: hsl(var(--foreground));
  transition: background 0.15s;
}
.extr-more-item:hover, .extr-more-item:active { background: hsl(var(--muted)); }
.extr-more-ic {
  width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  border-radius: 0.625rem;
  background: hsl(var(--primary) / 0.1);
  display: inline-flex; align-items: center; justify-content: center;
}
.extr-more-badge {
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  background: hsl(0 84% 60%); color: #fff;
  font-size: 0.6875rem; font-weight: 700; line-height: 1;
}
.extr-more-badge.hidden { display: none; }
body.extr-more-open { overflow: hidden; }

/* Das Sheet steht im Markup innerhalb von .extr-dashboard-body — und die spannt
   mit position:relative + z-index:1 einen eigenen Stapelkontext auf. Darin ist
   das z-index:70 des Overlays gegenüber der Bottom-Nav (z-index:45) wirkungslos,
   weil verglichen wird, was der Kontext insgesamt wiegt (1 gegen 45): die Leiste
   lag über dem geöffneten Sheet und schnitt die untersten Einträge ab. Solange
   das Sheet offen ist, hebt sich der Kontext deshalb über die Leiste. */
body.extr-more-open .extr-dashboard-body { z-index: 60; }

/* ============================================================
   Avatar
   ============================================================ */
.extr-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
  text-transform: uppercase;
}

.extr-avatar--lg {
  width: 4rem;
  height: 4rem;
  font-size: 1.25rem;
}

.extr-avatar--xl {
  width: 5rem;
  height: 5rem;
  font-size: 1.5rem;
}

/* Tailwind bg-* Klassen für Avatar-Farben */
.bg-blue-500   { background-color: #3b82f6; }
.bg-violet-500 { background-color: #8b5cf6; }
.bg-emerald-500{ background-color: #10b981; }
.bg-rose-500   { background-color: #f43f5e; }
.bg-amber-500  { background-color: #f59e0b; }
.bg-teal-500   { background-color: #14b8a6; }
.bg-indigo-500 { background-color: #6366f1; }
.bg-pink-500   { background-color: #ec4899; }

/* ============================================================
   Page Header
   ============================================================ */
.extr-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.extr-page-header-left { display: flex; align-items: center; gap: 0.75rem; }
.extr-page-title { font-size: 1.375rem; font-weight: 700; color: hsl(var(--foreground)); margin: 0; }
.extr-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}
.extr-breadcrumb a { color: hsl(var(--muted-foreground)); text-decoration: none; }
.extr-breadcrumb a:hover { color: hsl(var(--foreground)); }

/* ============================================================
   Cards
   ============================================================ */
.extr-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 1.5);
  overflow: hidden;
}

.extr-card-header {
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
}

.extr-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.extr-card-body { padding: 1.25rem; }

/* ============================================================
   Buttons
   ============================================================ */
.extr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.12s, box-shadow 0.15s;
  white-space: nowrap;
}
.extr-btn svg, .extr-btn i { width: 1rem; height: 1rem; }
.extr-btn:active { transform: scale(0.97); }
.extr-btn--primary:hover, .extr-btn--danger:hover { box-shadow: var(--extr-shadow-md); }

.extr-btn--primary {
  background: var(--primary-hsl);
  color: #fff;
}
.extr-btn--primary:hover { opacity: 0.9; }

.extr-btn--outline {
  background: transparent;
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}
.extr-btn--outline:hover { background: hsl(var(--muted)); }

.extr-btn--ghost {
  background: transparent;
  color: hsl(var(--muted-foreground));
}
.extr-btn--ghost:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }

.extr-btn--danger {
  background: hsl(0 84% 60%);
  color: #fff;
}
.extr-btn--danger:hover { opacity: 0.9; }

.extr-btn--sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.extr-btn--icon { padding: 0.5rem; }

/* ============================================================
   Form Elements
   ============================================================ */
.extr-form-group { margin-bottom: 1rem; }
.extr-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: hsl(var(--foreground));
}
.extr-label--required::after { content: ' *'; color: hsl(0 84% 60%); }

.extr-input,
.extr-select,
.extr-textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  background: hsl(var(--muted) / 0.5);
  transition: border-color 0.15s;
  font-family: inherit;
}

.extr-input:focus,
.extr-select:focus,
.extr-textarea:focus {
  outline: none;
  border-color: var(--primary-hsl);
  background: hsl(var(--background));
}

.extr-input--error { border-color: hsl(0 84% 60%); }
.extr-error-text { color: hsl(0 84% 60%); font-size: 0.8rem; margin-top: 0.25rem; }

.extr-textarea { resize: vertical; min-height: 80px; }
.extr-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; }

/* ============================================================
   Badges
   ============================================================ */
.extr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.extr-badge--green  { background: hsl(142 71% 45% / 0.15); color: hsl(142 71% 35%); }
.extr-badge--red    { background: hsl(0 84% 60% / 0.15);   color: hsl(0 84% 45%);   }
.extr-badge--yellow { background: hsl(38 92% 50% / 0.15);  color: hsl(38 92% 35%);  }
.extr-badge--blue   { background: hsl(221 83% 53% / 0.15); color: hsl(221 83% 43%); }
.extr-badge--gray   { background: hsl(var(--muted));        color: hsl(var(--muted-foreground)); }

/* ============================================================
   Tabs
   ============================================================ */
.extr-tabs {
  border-bottom: 1px solid hsl(var(--border));
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  overflow-x: auto;
}

.extr-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  text-decoration: none;
  display: block;
}

.extr-tab:hover { color: hsl(var(--foreground)); }
.extr-tab--active { color: var(--primary-hsl); border-bottom-color: var(--primary-hsl); }

.extr-tab-panel { display: none; }
.extr-tab-panel--active { display: block; }

/* ============================================================
   Grid Utilities
   ============================================================ */
.extr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.extr-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.extr-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

@media (max-width: 767px) {
  .extr-grid-2, .extr-grid-3, .extr-grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .extr-grid-3, .extr-grid-4 { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Employee Cards
   ============================================================ */
.extr-employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.extr-employee-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 1.5);
  padding: 1.25rem;
  text-decoration: none;
  color: hsl(var(--foreground));
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s cubic-bezier(.22,.61,.36,1);
  cursor: pointer;
}

.extr-employee-card:hover {
  border-color: var(--primary-hsl);
  box-shadow: var(--extr-shadow-md);
  transform: translateY(-2px);
}
.extr-employee-card:active { transform: translateY(0) scale(0.995); }

.extr-employee-card-body { flex: 1; min-width: 0; }
.extr-employee-card-name { font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.125rem; }
.extr-employee-card-role { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; }
.extr-employee-card-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); flex-wrap: wrap; }
.extr-employee-card-meta i { width: 0.875rem; height: 0.875rem; }

/* ============================================================
   Search & Filters
   ============================================================ */
.extr-search-bar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.extr-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.extr-search-wrap i {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: hsl(var(--muted-foreground));
}

.extr-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  font-size: 0.875rem;
  background: hsl(var(--muted) / 0.5);
  color: hsl(var(--foreground));
  transition: border-color 0.15s;
}
.extr-search-input:focus { outline: none; border-color: var(--primary-hsl); background: hsl(var(--background)); }

/* ============================================================
   Detail: Profile Header
   ============================================================ */
.extr-profile-header {
  background: linear-gradient(135deg, hsl(var(--primary) / 0.08), hsl(var(--background)));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 1.5);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.extr-profile-header-inner {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.extr-profile-info { flex: 1; min-width: 0; }
.extr-profile-name { font-size: 1.375rem; font-weight: 700; margin: 0 0 0.25rem; }
.extr-profile-role { font-size: 0.9375rem; color: hsl(var(--muted-foreground)); margin: 0 0 0.5rem; }
.extr-profile-meta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}
.extr-profile-meta-item { display: flex; align-items: center; gap: 0.25rem; }
.extr-profile-meta-item i { width: 0.875rem; height: 0.875rem; }

.extr-profile-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ============================================================
   Detail Info Grid
   ============================================================ */
.extr-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  .extr-detail-grid { grid-template-columns: 1fr; }
}

.extr-detail-field { }
.extr-detail-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.extr-detail-value { font-size: 0.9375rem; color: hsl(var(--foreground)); }
.extr-detail-value--empty { color: hsl(var(--muted-foreground)); font-style: italic; }

/* ============================================================
   Modal
   ============================================================ */
.extr-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  /* Safe-Area (PWA): Die Abdunklung bleibt vollflächig, das Modal selbst rückt
     um Dynamic Island bzw. Home-Indikator ein (s. Block „Safe-Area" unten). */
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.extr-modal-backdrop--open { display: flex; }

/* ---- Safe-Area: Modale nicht unter Insel / Home-Indikator ------------------
   Mit viewport-fit=cover reicht das App-Fenster bis an die Bildschirmkanten.
   Overlays liegen als `fixed inset-0` über dem gesamten Bildschirm — Kopf- und
   Fußzeile eines Modals lägen damit unter der Kamera-Insel bzw. der Leiste am
   unteren Rand. Die Overlay-Wurzel wird deshalb oben und unten um die
   Safe-Area eingerückt: absolut positionierte Kinder (das Panel) beziehen sich
   auf deren Padding-Box und rücken automatisch mit. Nur die Abdunklung wird
   wieder auf volle Höhe gezogen, damit kein heller Streifen entsteht.
   Ausgenommen ist .extr-modal-backdrop – dort ist die Wurzel selbst die
   Abdunklung und rückt per Innenabstand ein (s. o.).
   Ohne Safe-Area (Browser, Desktop) ist env() = 0 → alles unverändert. */
[class~="fixed"][class~="inset-0"]:not(.extr-modal-backdrop) {
  top: env(safe-area-inset-top, 0px);
  bottom: env(safe-area-inset-bottom, 0px);
}
[class~="fixed"][class~="inset-0"]:not(.extr-modal-backdrop) > [class*="bg-black/"] {
  top: calc(-1 * env(safe-area-inset-top, 0px));
  bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
}
/* Panels, die ihre Höhe inline an der Viewport-Höhe festmachen
   (style="max-height: calc(100vh - 2rem)"), kennen die Safe-Area nicht:
   ohne Korrektur ragen sie über den eingerückten Bereich hinaus. */
[class~="fixed"][class~="inset-0"] [style*="100vh"] {
  max-height: calc(100vh - 2rem
                   - env(safe-area-inset-top, 0px)
                   - env(safe-area-inset-bottom, 0px)) !important;
}

.extr-modal {
  background: hsl(var(--background));
  border-radius: calc(var(--radius) * 2);
  padding: 1.5rem;
  width: 100%;
  max-width: 540px;
  /* 100% = Höhe abzüglich der Safe-Area-Abstände des Backdrops */
  max-height: min(90vh, 100%);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.extr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.extr-modal-title { font-size: 1.125rem; font-weight: 700; }
.extr-modal-close { background: none; border: none; cursor: pointer; color: hsl(var(--muted-foreground)); padding: 0.25rem; border-radius: var(--radius); }
.extr-modal-close:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.extr-modal-close svg, .extr-modal-close i { width: 1.25rem; height: 1.25rem; }

.extr-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--border));
}

/* ============================================================
   Toast Notifications
   ============================================================ */
.extr-toasts {
  position: fixed;
  bottom: 5rem;
  right: 1rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .extr-toasts { bottom: 1.5rem; }
}

.extr-toast {
  position: relative;
  overflow: hidden;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  padding: 0.7rem 1rem 0.7rem 0.85rem;
  border-left: 3px solid hsl(var(--primary));
  border-radius: var(--radius);
  font-size: 0.875rem;
  max-width: 340px;
  pointer-events: all;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--extr-shadow-lg);
  animation: extrToastIn 0.26s cubic-bezier(.22,.61,.36,1);
}
.extr-toast-icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.extr-toast-msg  { flex: 1; min-width: 0; }
.extr-toast-bar  {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: rgba(255,255,255,0.5); transform-origin: left;
  animation: extrToastBar 3.5s linear forwards;
}
.extr-toast--success { background: hsl(152 56% 30%); border-left-color: hsl(142 71% 58%); }
.extr-toast--error   { background: hsl(0 55% 38%);  border-left-color: hsl(0 84% 66%); }
.extr-toast--info    { background: hsl(var(--foreground)); border-left-color: hsl(var(--primary)); }
.extr-toast--out     { animation: extrToastOut 0.26s ease forwards; }

@keyframes extrToastIn  { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes extrToastOut { to { opacity: 0; transform: translateX(18px); } }
@keyframes extrToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ============================================================
   Loading Overlay
   ============================================================ */
.extr-loading {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.6);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}

.extr-loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid hsl(var(--border));
  border-top-color: var(--primary-hsl);
  border-radius: 9999px;
  animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Utilities
   ============================================================ */
.extr-divider { border: none; border-top: 1px solid hsl(var(--border)); margin: 1.25rem 0; }
.extr-text-muted { color: hsl(var(--muted-foreground)); }
.extr-text-sm { font-size: 0.875rem; }
.extr-flex { display: flex; align-items: center; }
.extr-flex-between { display: flex; align-items: center; justify-content: space-between; }
.extr-gap-2 { gap: 0.5rem; }
.extr-gap-3 { gap: 0.75rem; }
.extr-mt-1 { margin-top: 0.25rem; }
.extr-mt-2 { margin-top: 0.5rem; }
.extr-mt-4 { margin-top: 1rem; }
.extr-mb-4 { margin-bottom: 1rem; }
.extr-mb-6 { margin-bottom: 1.5rem; }
.extr-p-4 { padding: 1rem; }
.extr-w-full { width: 100%; }
.extr-hidden { display: none; }

/* Back Button */
.extr-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  text-decoration: none;
  padding: 0.375rem 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}
.extr-back-btn:hover { color: hsl(var(--foreground)); }
.extr-back-btn i { width: 1rem; height: 1rem; }

/* Permissions Table */
.extr-perm-table { width: 100%; border-collapse: collapse; }
.extr-perm-table th, .extr-perm-table td { padding: 0.625rem 0.75rem; text-align: left; border-bottom: 1px solid hsl(var(--border)); font-size: 0.875rem; }
.extr-perm-table th { font-weight: 500; color: hsl(var(--muted-foreground)); }
.extr-toggle { position: relative; display: inline-block; width: 2.5rem; height: 1.375rem; }
.extr-toggle input { opacity: 0; width: 0; height: 0; }
.extr-toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: hsl(var(--border)); border-radius: 9999px; transition: background 0.2s;
}
.extr-toggle-slider::before {
  content: ''; position: absolute;
  width: 1rem; height: 1rem;
  left: 0.1875rem; top: 0.1875rem;
  background: #fff; border-radius: 9999px; transition: transform 0.2s;
}
.extr-toggle input:checked + .extr-toggle-slider { background: var(--primary-hsl); }
.extr-toggle input:checked + .extr-toggle-slider::before { transform: translateX(1.125rem); }

/* Custom Checkbox */
.extr-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  vertical-align: middle;
}

.extr-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.extr-check-box {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid hsl(var(--border));
  border-radius: 0.375rem;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.extr-check-box svg {
  width: 0.875rem;
  height: 0.875rem;
  color: #fff;
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.15s, transform 0.15s;
}

.extr-check input:checked + .extr-check-box {
  background: var(--primary-hsl);
  border-color: var(--primary-hsl);
}

.extr-check input:checked + .extr-check-box svg {
  opacity: 1;
  transform: scale(1);
}

.extr-check input:focus-visible + .extr-check-box {
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.25);
}

.extr-check input:disabled + .extr-check-box {
  opacity: 0.45;
  cursor: not-allowed;
}

.extr-check:has(input:disabled) {
  cursor: not-allowed;
}

/* Team-Chats Zugriffstabelle */
.chat-access-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat-access-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem;
  gap: 0.75rem;
  align-items: center;
}

.chat-access-row--head {
  padding: 0 0.5rem 0.625rem;
  border-bottom: 1px solid hsl(var(--border));
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}

.chat-access-row--data {
  padding: 0.5rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
}

.chat-access-col-check {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ============================================================
   Summernote – Design-Anpassungen (Lite-Version)
   ============================================================ */
.note-editor.note-frame {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.5rem !important;
  overflow: hidden;
  box-shadow: none !important;
}
.note-editor.note-frame .note-toolbar {
  background: hsl(var(--muted)) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  padding: 4px 6px !important;
}
.note-editor.note-frame .note-editable {
  background: #fff !important;
  color: hsl(var(--foreground)) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  padding: 1rem !important;
}
/* Formatierung IM Editor sichtbar machen – Tailwind-Preflight entfernt sonst
   Listenpunkte, Überschriftengrößen, Einrückungen etc. im Bearbeitungsbereich. */
.note-editor.note-frame .note-editable h1 { font-size: 1.6rem !important; font-weight: 700 !important; line-height: 1.3 !important; margin: 1.2rem 0 .6rem !important; }
.note-editor.note-frame .note-editable h2 { font-size: 1.35rem !important; font-weight: 700 !important; line-height: 1.3 !important; margin: 1.1rem 0 .5rem !important; }
.note-editor.note-frame .note-editable h3 { font-size: 1.1rem !important; font-weight: 600 !important; margin: 1rem 0 .4rem !important; }
.note-editor.note-frame .note-editable h4 { font-size: 1rem !important; font-weight: 600 !important; margin: .9rem 0 .35rem !important; }
.note-editor.note-frame .note-editable p { margin: 0 0 .75rem !important; }
.note-editor.note-frame .note-editable ul { list-style: disc !important; padding-left: 1.5rem !important; margin: .5rem 0 !important; }
.note-editor.note-frame .note-editable ol { list-style: decimal !important; padding-left: 1.5rem !important; margin: .5rem 0 !important; }
.note-editor.note-frame .note-editable li { margin: .25rem 0 !important; display: list-item !important; }
.note-editor.note-frame .note-editable strong, .note-editor.note-frame .note-editable b { font-weight: 700 !important; }
.note-editor.note-frame .note-editable em, .note-editor.note-frame .note-editable i { font-style: italic !important; }
.note-editor.note-frame .note-editable u { text-decoration: underline !important; }
.note-editor.note-frame .note-editable a { color: var(--primary-hsl) !important; text-decoration: underline !important; }
.note-editor.note-frame .note-editable blockquote { border-left: 3px solid hsl(var(--border)) !important; padding-left: 1rem !important; margin: .75rem 0 !important; color: hsl(var(--muted-foreground)) !important; }
/* Ergänzung: im Editor bislang ungestylte Elemente (h5/h6, Tabellen, Code, Trenner, Bilder) */
.note-editor.note-frame .note-editable h5,
.note-editor.note-frame .note-editable h6 { font-size: .95rem !important; font-weight: 600 !important; margin: .85rem 0 .3rem !important; }
.note-editor.note-frame .note-editable > :first-child { margin-top: 0 !important; }
.note-editor.note-frame .note-editable hr { margin: 1.2rem 0 !important; border: 0 !important; border-top: 1px solid hsl(var(--border)) !important; }
.note-editor.note-frame .note-editable img { display: inline-block !important; max-width: 100% !important; height: auto !important; border-radius: 8px !important; }
.note-editor.note-frame .note-editable table { border-collapse: collapse !important; margin: 0 0 .75rem !important; width: 100% !important; }
.note-editor.note-frame .note-editable th,
.note-editor.note-frame .note-editable td { border: 1px solid hsl(var(--border)) !important; padding: .4rem .6rem !important; }
.note-editor.note-frame .note-editable th { background: hsl(var(--muted)) !important; font-weight: 600 !important; }
.note-editor.note-frame .note-editable code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: .875em !important; background: hsl(var(--muted)) !important; padding: .1em .35em !important; border-radius: 4px !important; }
.note-editor.note-frame .note-codable { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: .8125rem !important; }
.note-editor.note-frame .note-statusbar {
  background: hsl(var(--muted)) !important;
  border-top: 1px solid hsl(var(--border)) !important;
}
/* Toolbar-Buttons */
.note-btn {
  border-radius: 0.375rem !important;
  border: 1px solid transparent !important;
  padding: 2px 6px !important;
  font-size: 0.8125rem !important;
  background: transparent !important;
  color: hsl(var(--foreground)) !important;
  transition: background 0.15s, color 0.15s !important;
}
.note-btn:hover, .note-btn:focus {
  background: hsl(var(--border)) !important;
  border-color: transparent !important;
}
.note-btn.active, .note-btn.active:hover {
  background: var(--primary-hsl) !important;
  color: #fff !important;
}
.note-dropdown-menu {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 16px -4px rgb(0 0 0 / 0.12) !important;
  padding: 4px !important;
}
.note-dropdown-item {
  border-radius: 0.375rem !important;
  padding: 4px 10px !important;
  font-size: 0.875rem !important;
}
.note-dropdown-item:hover {
  background: hsl(var(--muted)) !important;
}
/* Toolbar-Gruppen */
.note-btn-group { gap: 2px !important; }
/* Fullscreen / Codeview z-Index */
.note-editor.note-fullscreen { z-index: 9999 !important; }
/* Überschriften-Dropdown sauber */
.note-style .dropdown-style blockquote,
.note-style .dropdown-style h1,
.note-style .dropdown-style h2,
.note-style .dropdown-style h3,
.note-style .dropdown-style h4,
.note-style .dropdown-style p {
  font-size: 0.875rem !important;
  margin: 0 !important;
}

/* ============================================================
   Chat – Vollhöhen-Layout
   ============================================================ */

/* Wenn Chat-Detail aktiv ist, kein Padding unten im Main */
.extr-main--chat {
  /* Chat auf Viewport-Höhe fixieren: sonst wächst der Wrapper mit dem Inhalt,
     die ganze Seite scrollt und Mitglieder-Leiste + Eingabezeile scrollen weg. */
  height: 100vh;
  height: 100dvh;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}
.extr-main--chat #extr-main {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Desktop-Chat-Raster: Zeilenhöhe an den Container binden (minmax(0,1fr)), sonst
   sprengt die Nachrichtenspalte das Raster, der Feed scrollt nicht intern und
   die Mitglieder-Leiste rechts scrollt mit der Seite weg. */
.extr-chat-grid { grid-template-rows: minmax(0, 1fr); }

/* Chat-Wrapper füllt verfügbare Höhe */
#extr-chat-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Nachrichten-Feed */
#chat-messages-feed {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* Eingabeleiste: auf Mobile über der fixierten Bottom-Nav halten,
   damit Textfeld + Senden-Button sichtbar bleiben (PWA / iOS). */
@media (max-width: 1023px) {
  .extr-chat-composer {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Eigene Nachrichten-Blase */
.chat-bubble-own {
  background: hsl(var(--primary));
  color: #fff;
  border-radius: 1rem 1rem 0.25rem 1rem;
  padding: 0.625rem 1rem;
  min-width: 4rem;
  max-width: 75%;
  width: fit-content;
  word-break: break-word;
  line-height: 1.5;
  font-size: 0.875rem;
}

/* Fremde Nachrichten-Blase */
.chat-bubble-other {
  background: #fff;
  border: 1px solid hsl(var(--border));
  border-radius: 1rem 1rem 1rem 0.25rem;
  padding: 0.625rem 1rem;
  min-width: 4rem;
  max-width: 75%;
  width: fit-content;
  word-break: break-word;
  line-height: 1.5;
  font-size: 0.875rem;
}

/* Avatar Initialen */
.chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* Datum-Trennlinie */
.chat-date-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}
.chat-date-divider::before,
.chat-date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: hsl(var(--border));
}

/* Chat-Aktions-Icons & Reaktion-Hinzufügen: am Desktop nur bei Hover,
   auf Touch-Geräten (kein Hover → sonst unsichtbar) dauerhaft sichtbar. */
.chat-msg-actions {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.group:hover .chat-msg-actions,
.chat-msg-actions:focus-within {
  opacity: 1;
}
@media (hover: none), (pointer: coarse) {
  .chat-msg-actions { opacity: 1; }
}

/* Like-Icon in News-Übersicht: filled-Zustand über currentColor (Lucide-path-Override) */
.news-like-icon.filled path {
  fill: currentColor;
  stroke: currentColor;
}

/* ---------------------------------------------------------------------------
   PWA: Installations-Overlay & Willkommens-Modal
   --------------------------------------------------------------------------- */
.extr-pwa-locked { overflow: hidden; }

.extr-pwa-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  /* Safe-Area (PWA): Karte nicht unter Insel / Home-Indikator schieben */
  padding-top: calc(1.5rem + env(safe-area-inset-top, 0px));
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(160deg, hsl(173 94% 26% / 0.97), hsl(174 92% 18% / 0.98));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.extr-pwa-overlay.hidden { display: none; }

.extr-pwa-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 1.25rem;
  padding: 1.75rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
  /* 100% = Höhe abzüglich der Safe-Area-Abstände des Overlays */
  max-height: min(calc(100vh - 3rem), 100%);
  overflow-y: auto;
}
.extr-pwa-card--welcome { text-align: center; }

.extr-pwa-logo {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  border-radius: 1rem;
  background: hsl(var(--primary) / 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.extr-pwa-logo img { width: 2.75rem; height: 2.75rem; object-fit: contain; }

.extr-pwa-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: hsl(222 47% 11%);
  margin: 0 0 0.5rem;
  text-align: center;
}
.extr-pwa-sub {
  color: hsl(215 16% 47%);
  font-size: 0.925rem;
  line-height: 1.5;
  margin: 0 0 1.25rem;
  text-align: center;
}

.extr-pwa-list {
  list-style: none;
  counter-reset: pwa;
  margin: 0;
  padding: 0;
}
.extr-pwa-list li {
  position: relative;
  counter-increment: pwa;
  padding: 0.7rem 0 0.7rem 2.5rem;
  border-bottom: 1px solid hsl(214 32% 91%);
  font-size: 0.9rem;
  line-height: 1.45;
  color: hsl(222 47% 20%);
}
.extr-pwa-list li:last-child { border-bottom: none; }
.extr-pwa-list li::before {
  content: counter(pwa);
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: var(--primary-hsl);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.extr-pwa-ic {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  vertical-align: -0.18rem;
  color: var(--primary-hsl);
}
.extr-pwa-note {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: hsl(215 16% 47%);
  background: hsl(var(--primary) / 0.08);
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
}
.extr-pwa-dismiss {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  background: none;
  border: none;
  color: hsl(215 16% 47%);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.5rem;
}
.extr-pwa-dismiss:hover { color: hsl(222 47% 20%); text-decoration: underline; }

.extr-pwa-welcome-icon {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: hsl(var(--primary) / 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.extr-pwa-welcome-icon i { width: 2.25rem; height: 2.25rem; color: var(--primary-hsl); }

/* ── Trennlinien global dezenter ─────────────────────────────────────────────
   Listen-Trennstriche (divide-y) wirken mit voller/currentColor-Border zu hart.
   WICHTIG: Tailwind setzt die Linie als border-BOTTOM auf „> :not(:last-child)"
   (NICHT als border-top ab dem 2. Element). Der Selektor MUSS das treffen — sonst
   bleibt die Linie unter dem 1. Element auf currentColor (schwarz). Spezifität
   (0,2,0) schlägt Tailwinds :where(…)-Regel (0,0,0), daher kein !important nötig. */
.divide-y > :not(:last-child),
tbody.divide-y > tr:not(:last-child) {
  border-color: hsl(var(--border) / 0.45);
}

/* ============================================================
   UX-Überarbeitung 2026 — Dark Mode, Navigations-Feedback,
   Interaktions-Politur, A11y. Additiv, ohne Bestehendes zu ändern.
   ============================================================ */

/* ---- Dark Mode (über data-theme am <html>; gleiche Token-Namen) ------------ */
:root { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --primary:              173 70% 42%;
  --primary-hsl:          hsl(173, 70%, 42%);
  --primary-foreground:   0 0% 100%;
  --background:           195 26% 9%;
  --background-hsl:       hsl(195, 26%, 9%);
  --foreground:           168 16% 92%;
  --card:                 196 22% 13%;
  --card-foreground:      168 16% 92%;
  --secondary:            170 24% 24%;
  --secondary-hsl:        hsl(170, 24%, 24%);
  --secondary-foreground: 0 0% 100%;
  --muted:                196 16% 18%;
  --muted-foreground:     190 10% 64%;
  --border:               196 14% 24%;
  --accent:               173 70% 42%;
  --destructive:          350 75% 58%;
  --sidebar-bg:           196 24% 11%;
  --sidebar-border:       196 14% 24%;
  --extr-shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --extr-shadow-md: 0 4px 16px rgba(0,0,0,0.48);
  --extr-shadow-lg: 0 14px 36px rgba(0,0,0,0.58);
}

/* Literale Tailwind-Flächen-Utilities im Dark-Scope auf Tokens umlenken
   (die App nutzt vielerorts bg-white/bg-*-50 statt semantischer Klassen). */
html[data-theme="dark"] .bg-white { background-color: hsl(var(--card)); }
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-neutral-50 { background-color: hsl(var(--muted)); }
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-black { color: hsl(var(--foreground)); }
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-700 { color: hsl(var(--muted-foreground)); }
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-slate-200 { border-color: hsl(var(--border)); }
/* Pastell-Tints (Icon-Chips) auf dezente Transluzenz statt greller Pastelle */
html[data-theme="dark"] .bg-red-50     { background-color: rgba(248,113,113,0.14); }
html[data-theme="dark"] .bg-amber-50   { background-color: rgba(251,191,36,0.14); }
html[data-theme="dark"] .bg-yellow-50  { background-color: rgba(250,204,21,0.14); }
html[data-theme="dark"] .bg-green-50,
html[data-theme="dark"] .bg-emerald-50 { background-color: rgba(52,211,153,0.14); }
html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-sky-50     { background-color: rgba(96,165,250,0.14); }
html[data-theme="dark"] .bg-violet-50,
html[data-theme="dark"] .bg-purple-50  { background-color: rgba(167,139,250,0.14); }
/* Auf Dark dezentere Schlagschatten */
html[data-theme="dark"] .shadow-lg,
html[data-theme="dark"] .shadow-xl,
html[data-theme="dark"] .shadow-2xl { box-shadow: 0 10px 30px rgba(0,0,0,0.45); }

/* ---- Dark-Mode-Vervollständigung 2026 -------------------------------------
   App nutzt vielerorts slate-/zinc-/Pastell-Utilities statt semantischer
   Klassen. Im Dark-Scope auf Tokens bzw. Transluzenz umlenken, sonst bleiben
   Flächen hell und Texte dunkel-auf-dunkel. */
/* Flächen (helle Grautöne) → Muted */
html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] .bg-zinc-100 { background-color: hsl(var(--muted)); }
html[data-theme="dark"] .hover\:bg-white:hover,
html[data-theme="dark"] .hover\:bg-slate-100:hover,
html[data-theme="dark"] .hover\:bg-slate-50:hover,
html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: hsl(var(--muted)); }
/* Sekundärtext (mittlere Grautöne) → Muted-Foreground */
html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-zinc-500,
html[data-theme="dark"] .text-zinc-600 { color: hsl(var(--muted-foreground)); }
/* Primärtext (dunkle Grautöne) → Foreground */
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-zinc-700,
html[data-theme="dark"] .text-zinc-800,
html[data-theme="dark"] .text-gray-800 { color: hsl(var(--foreground)); }
/* Rahmen */
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-300,
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .border-zinc-200 { border-color: hsl(var(--border)); }
/* Pastell-Tints vollständig (-50 + -100, alle Familien) → dezente Transluzenz */
html[data-theme="dark"] .bg-red-50,     html[data-theme="dark"] .bg-red-100     { background-color: rgba(248,113,113,0.13); }
html[data-theme="dark"] .bg-orange-50,  html[data-theme="dark"] .bg-orange-100,
html[data-theme="dark"] .bg-amber-50,   html[data-theme="dark"] .bg-amber-100,
html[data-theme="dark"] .bg-yellow-50,  html[data-theme="dark"] .bg-yellow-100  { background-color: rgba(251,191,36,0.14); }
html[data-theme="dark"] .bg-lime-50,    html[data-theme="dark"] .bg-lime-100,
html[data-theme="dark"] .bg-green-50,   html[data-theme="dark"] .bg-green-100,
html[data-theme="dark"] .bg-emerald-50, html[data-theme="dark"] .bg-emerald-100,
html[data-theme="dark"] .bg-teal-50,    html[data-theme="dark"] .bg-teal-100    { background-color: rgba(52,211,153,0.13); }
html[data-theme="dark"] .bg-cyan-50,    html[data-theme="dark"] .bg-cyan-100,
html[data-theme="dark"] .bg-sky-50,     html[data-theme="dark"] .bg-sky-100,
html[data-theme="dark"] .bg-blue-50,    html[data-theme="dark"] .bg-blue-100    { background-color: rgba(96,165,250,0.14); }
html[data-theme="dark"] .bg-indigo-50,  html[data-theme="dark"] .bg-indigo-100,
html[data-theme="dark"] .bg-violet-50,  html[data-theme="dark"] .bg-violet-100,
html[data-theme="dark"] .bg-purple-50,  html[data-theme="dark"] .bg-purple-100  { background-color: rgba(167,139,250,0.14); }
html[data-theme="dark"] .bg-pink-50,    html[data-theme="dark"] .bg-pink-100,
html[data-theme="dark"] .bg-rose-50,    html[data-theme="dark"] .bg-rose-100,
html[data-theme="dark"] .bg-fuchsia-50, html[data-theme="dark"] .bg-fuchsia-100 { background-color: rgba(244,114,182,0.14); }
/* Custom-Komponenten mit hartkodiertem Weiß → im Dark-Scope auf Tokens */
html[data-theme="dark"] .extr-header-bar { background-color: hsl(var(--card) / 0.85); }
html[data-theme="dark"] .chat-bubble-other { background: hsl(var(--card)); color: hsl(var(--foreground)); }
html[data-theme="dark"] .extr-more-sheet,
html[data-theme="dark"] .extr-pwa-card,
html[data-theme="dark"] .extr-check-box { background: hsl(var(--card)); }
/* PWA-Install/Welcome-Texte im Dark Mode lesbar (Basisfarben sind hart auf Hell-Mode kodiert) */
html[data-theme="dark"] .extr-pwa-title { color: hsl(var(--foreground)); }
html[data-theme="dark"] .extr-pwa-sub,
html[data-theme="dark"] .extr-pwa-note,
html[data-theme="dark"] .extr-pwa-dismiss { color: hsl(var(--muted-foreground)); }
html[data-theme="dark"] .extr-pwa-note { background: hsl(var(--primary) / 0.12); }
html[data-theme="dark"] .extr-pwa-list li { color: hsl(var(--foreground)); border-bottom-color: hsl(var(--border)); }
html[data-theme="dark"] .extr-pwa-dismiss:hover { color: hsl(var(--foreground)); }
html[data-theme="dark"] .note-editor.note-frame .note-editable { background: hsl(var(--card)) !important; }
html[data-theme="dark"] .note-dropdown-menu { background: hsl(var(--card)) !important; }
/* Farbiger Text (Badges/Labels/Icons): dunkle -600/-700/-800-Töne auf Dunkel
   unlesbar → auf helle -400-Töne derselben Farbe umlenken (inkl. Hover). */
html[data-theme="dark"] .text-red-500,html[data-theme="dark"] .text-red-600,html[data-theme="dark"] .text-red-700,html[data-theme="dark"] .text-red-800,html[data-theme="dark"] .text-red-900,html[data-theme="dark"] .hover\:text-red-600:hover,html[data-theme="dark"] .hover\:text-red-700:hover{color:#f87171}
html[data-theme="dark"] .text-orange-500,html[data-theme="dark"] .text-orange-600,html[data-theme="dark"] .text-orange-700,html[data-theme="dark"] .text-orange-800,html[data-theme="dark"] .hover\:text-orange-600:hover{color:#fb923c}
html[data-theme="dark"] .text-amber-500,html[data-theme="dark"] .text-amber-600,html[data-theme="dark"] .text-amber-700,html[data-theme="dark"] .text-amber-800,html[data-theme="dark"] .text-amber-900,html[data-theme="dark"] .hover\:text-amber-600:hover{color:#fbbf24}
html[data-theme="dark"] .text-yellow-500,html[data-theme="dark"] .text-yellow-600,html[data-theme="dark"] .text-yellow-700,html[data-theme="dark"] .text-yellow-800{color:#facc15}
html[data-theme="dark"] .text-lime-500,html[data-theme="dark"] .text-lime-600,html[data-theme="dark"] .text-lime-700{color:#a3e635}
html[data-theme="dark"] .text-green-500,html[data-theme="dark"] .text-green-600,html[data-theme="dark"] .text-green-700,html[data-theme="dark"] .text-green-800,html[data-theme="dark"] .text-green-900,html[data-theme="dark"] .hover\:text-green-600:hover,html[data-theme="dark"] .hover\:text-green-700:hover{color:#4ade80}
html[data-theme="dark"] .text-emerald-500,html[data-theme="dark"] .text-emerald-600,html[data-theme="dark"] .text-emerald-700,html[data-theme="dark"] .text-emerald-800{color:#34d399}
html[data-theme="dark"] .text-teal-500,html[data-theme="dark"] .text-teal-600,html[data-theme="dark"] .text-teal-700{color:#2dd4bf}
html[data-theme="dark"] .text-cyan-500,html[data-theme="dark"] .text-cyan-600,html[data-theme="dark"] .text-cyan-700{color:#22d3ee}
html[data-theme="dark"] .text-sky-500,html[data-theme="dark"] .text-sky-600,html[data-theme="dark"] .text-sky-700{color:#38bdf8}
html[data-theme="dark"] .text-blue-500,html[data-theme="dark"] .text-blue-600,html[data-theme="dark"] .text-blue-700,html[data-theme="dark"] .text-blue-800,html[data-theme="dark"] .hover\:text-blue-600:hover,html[data-theme="dark"] .hover\:text-blue-700:hover{color:#60a5fa}
html[data-theme="dark"] .text-indigo-500,html[data-theme="dark"] .text-indigo-600,html[data-theme="dark"] .text-indigo-700{color:#818cf8}
html[data-theme="dark"] .text-violet-500,html[data-theme="dark"] .text-violet-600,html[data-theme="dark"] .text-violet-700,html[data-theme="dark"] .text-violet-800{color:#a78bfa}
html[data-theme="dark"] .text-purple-500,html[data-theme="dark"] .text-purple-600,html[data-theme="dark"] .text-purple-700,html[data-theme="dark"] .text-purple-800{color:#c084fc}
html[data-theme="dark"] .text-fuchsia-500,html[data-theme="dark"] .text-fuchsia-600,html[data-theme="dark"] .text-fuchsia-700{color:#e879f9}
html[data-theme="dark"] .text-pink-500,html[data-theme="dark"] .text-pink-600,html[data-theme="dark"] .text-pink-700,html[data-theme="dark"] .hover\:text-pink-600:hover{color:#f472b6}
html[data-theme="dark"] .text-rose-500,html[data-theme="dark"] .text-rose-600,html[data-theme="dark"] .text-rose-700{color:#fb7185}
/* ── KERNFIX: semantische Tailwind-Utilities sind im precompiled CSS mit
   HELL-Werten gebacken (reagieren NICHT auf data-theme). Im Dark-Scope auf die
   im Dark überschriebenen CSS-Variablen zurückführen — sonst hell-auf-dunkel
   (Flächen) bzw. dunkel-auf-dunkel (Text) in allen Modulen. */
html[data-theme="dark"] .bg-card,
html[data-theme="dark"] .bg-popover { background-color: hsl(var(--card)); }
html[data-theme="dark"] .bg-background { background-color: hsl(var(--background)); }
html[data-theme="dark"] .bg-muted { background-color: hsl(var(--muted)); }
html[data-theme="dark"] .bg-muted\/10 { background-color: hsl(var(--muted) / 0.1); }
html[data-theme="dark"] .bg-muted\/20 { background-color: hsl(var(--muted) / 0.2); }
html[data-theme="dark"] .bg-muted\/30 { background-color: hsl(var(--muted) / 0.3); }
html[data-theme="dark"] .bg-muted\/40 { background-color: hsl(var(--muted) / 0.4); }
html[data-theme="dark"] .bg-muted\/50 { background-color: hsl(var(--muted) / 0.5); }
html[data-theme="dark"] .bg-muted\/60 { background-color: hsl(var(--muted) / 0.6); }
html[data-theme="dark"] .bg-muted\/70 { background-color: hsl(var(--muted) / 0.7); }
html[data-theme="dark"] .hover\:bg-muted:hover { background-color: hsl(var(--muted)); }
html[data-theme="dark"] .hover\:bg-muted\/40:hover { background-color: hsl(var(--muted) / 0.4); }
html[data-theme="dark"] .hover\:bg-muted\/50:hover { background-color: hsl(var(--muted) / 0.5); }
html[data-theme="dark"] .hover\:bg-muted\/60:hover { background-color: hsl(var(--muted) / 0.6); }
html[data-theme="dark"] .text-foreground,
html[data-theme="dark"] .text-card-foreground,
html[data-theme="dark"] .text-popover-foreground { color: hsl(var(--foreground)); }
html[data-theme="dark"] .text-muted-foreground { color: hsl(var(--muted-foreground)); }
html[data-theme="dark"] .hover\:text-foreground:hover { color: hsl(var(--foreground)); }
html[data-theme="dark"] .placeholder\:text-muted-foreground::placeholder { color: hsl(var(--muted-foreground)); }
html[data-theme="dark"] .border-border,
html[data-theme="dark"] .border-input { border-color: hsl(var(--border)); }

/* ---- Navigations-Feedback: Top-Progressbar ------------------------------- */
.extr-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: hsl(var(--primary));
  z-index: 300; opacity: 0;
  transition: width .2s ease, opacity .3s ease;
  box-shadow: 0 0 8px hsl(var(--primary) / 0.6);
}
.extr-progress--active { opacity: 1; }

/* Sanftes Einblenden frisch geladener Inhalte */
@keyframes extrFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.extr-fade-in { animation: extrFadeIn .22s ease both; }

/* ---- Skeleton-Loader ------------------------------------------------------ */
.extr-skel { position: relative; overflow: hidden; background: hsl(var(--muted)); border-radius: .5rem; }
.extr-skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, hsl(var(--card) / 0.6), transparent);
  transform: translateX(-100%); animation: extrShimmer 1.3s infinite;
}
@keyframes extrShimmer { 100% { transform: translateX(100%); } }
.extr-skel-line { height: .8rem; border-radius: .375rem; margin: .5rem 0; }
.extr-skel-card { height: 5rem; border-radius: 1rem; margin: .75rem 0; }
.extr-skel-avatar { height: 2.5rem; width: 2.5rem; border-radius: 9999px; flex: 0 0 auto; }
.extr-skel-row { display: flex; gap: .75rem; align-items: center; padding: .5rem 0; }
.extr-skel-tile { height: 6.5rem; border-radius: 1rem; }

/* ---- Empty-State (Helfer extr_empty_state) -------------------------------- */
.extr-empty { text-align: center; padding: 2.5rem 1rem; }
.extr-empty-icon {
  height: 3rem; width: 3rem; margin: 0 auto .75rem;
  border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
}
.extr-empty-title { font-weight: 600; margin-bottom: .25rem; }
.extr-empty-text { font-size: .875rem; color: hsl(var(--muted-foreground)); max-width: 24rem; margin: 0 auto; }
.extr-empty-cta { margin-top: 1rem; }

/* ---- Command-Palette: aktiver (tastaturgewählter) Eintrag ----------------- */
.extr-cmd-item--active { background: hsl(var(--muted)); }

/* ---- Button-Spinner (extrBtnBusy) ----------------------------------------- */
.extr-btn-spin {
  display: inline-block; height: 1em; width: 1em; vertical-align: -0.15em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 9999px; animation: spin .6s linear infinite;
}

/* ---- A11y: sichtbarer Fokusring für Tastaturnutzer ------------------------ */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Pull-to-Refresh Indikator -------------------------------------------- */
.extr-ptr {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 250; height: 2.25rem; width: 2.25rem; border-radius: 9999px;
  background: hsl(var(--card)); color: hsl(var(--primary));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18); transition: transform .15s ease;
}

/* ---- Reduced Motion respektieren ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .extr-fade-in, .extr-skel::after, .extr-progress { animation: none !important; transition: none !important; }
}

/* ============================================================
   Motion & Delight 2026 — Mikro-Interaktionen (additiv)
   Richtungs-Übergänge, Stagger, Hover-Lift, Erfolgs-Häkchen,
   Konfetti, Skeleton-Dissolve. Dark- + reduced-motion-fest.
   ============================================================ */

/* ---- Richtungsabhängiger View-Übergang (vor/zurück) ---------------------- */
@keyframes extrSlideFwd  { from { opacity: 0; transform: translateX(16px); }  to { opacity: 1; transform: none; } }
@keyframes extrSlideBack { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.extr-view-fwd  { animation: extrSlideFwd  .26s cubic-bezier(.22,.61,.36,1) both; }
.extr-view-back { animation: extrSlideBack .26s cubic-bezier(.22,.61,.36,1) both; }

/* ---- Skeleton → Content Dissolve ----------------------------------------- */
.extr-fading-out { opacity: 0 !important; transition: opacity .13s ease; }

/* ---- Stagger-Reveal für Listen/Grids (Opt-in-Klasse .extr-stagger) ------- */
@keyframes extrRise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.extr-stagger > * { animation: extrRise .34s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--extr-i, 0) * 28ms); }

/* ---- Hover-Lift für klickbare Kacheln (Opt-in-Klasse .extr-lift) --------- */
.extr-lift { transition: transform .15s cubic-bezier(.22,.61,.36,1), box-shadow .15s; }
.extr-lift:hover  { transform: translateY(-2px); box-shadow: var(--extr-shadow-md); }
.extr-lift:active { transform: translateY(0) scale(.995); }

/* ---- Erfolgs-Häkchen-Morph (extrBtnSuccess) ------------------------------ */
.extr-btn-success { background: hsl(142 64% 38%) !important; color: #fff !important; border-color: transparent !important; opacity: 1 !important; }
.extr-btn-check { display: inline-block; width: 1.15em; height: 1.15em; position: relative; vertical-align: -0.2em; }
.extr-btn-check::after {
  content: ""; position: absolute; left: 0.42em; top: 0.1em;
  width: 0.3em; height: 0.62em; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transform-origin: center;
  animation: extrCheckPop .42s cubic-bezier(.2,1.25,.4,1) .05s forwards;
}
@keyframes extrCheckPop { to { transform: rotate(45deg) scale(1); } }

/* ---- Konfetti-Burst (extrBurst) ------------------------------------------ */
.extr-burst { position: fixed; inset: 0; pointer-events: none; z-index: 400; }
.extr-burst > span {
  position: absolute; width: 8px; height: 8px; border-radius: 2px; opacity: 0;
  animation: extrBurstFly .9s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes extrBurstFly {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.4) rotate(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(200deg); }
}

/* ---- Reduced Motion: alle neuen Bewegungen aus --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .extr-view-fwd, .extr-view-back, .extr-stagger > *,
  .extr-lift, .extr-lift:hover, .extr-lift:active,
  .extr-btn:active, .extr-employee-card:hover, .extr-employee-card:active,
  .extr-btn-check::after, .extr-toast, .extr-toast-bar, .extr-burst > span {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .extr-fading-out { transition: none !important; }
}

/* ── Signage-Layout ─────────────────────────────────────────────────────────
   Eigenständige responsive Klassen, da die vorgebaute tailwind.css keine
   responsiven Varianten (lg:*, sm:grid-cols-*, xl:*) enthält. */
.sg-ed-row{display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden;min-height:0}
.sg-ed-canvas{min-width:0}
.sg-ed-props{width:100%;border-top:1px solid hsl(var(--border))}
@media(min-width:1024px){
  .sg-ed-row{flex-direction:row}
  .sg-ed-canvas{flex:1 1 auto}
  .sg-ed-props{width:24rem;flex:0 0 24rem;overflow-y:auto;border-top:0;border-left:1px solid hsl(var(--border))}
}
.sg-cards-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.sg-cards-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.sg-cards-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1280px){.sg-cards-grid{grid-template-columns:repeat(4,1fr)}}
.sg-mon-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:768px){.sg-mon-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1280px){.sg-mon-grid{grid-template-columns:repeat(3,1fr)}}
.sg-pl-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:768px){.sg-pl-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1280px){.sg-pl-grid{grid-template-columns:repeat(3,1fr)}}
.sg-ple-grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:1024px){.sg-ple-grid{grid-template-columns:repeat(2,1fr)}}
.sg-stats-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:1024px){.sg-stats-grid{grid-template-columns:repeat(4,1fr)}}
.sg-lib-grid{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
.sg-2col{display:grid;gap:.75rem;grid-template-columns:1fr}
@media(min-width:640px){.sg-2col{grid-template-columns:1fr 1fr}}

/* ---- Schichtplanung: Status-Farben (Arbeitsplan-Farbkonvention) ----------
   Eigene Klassen statt Tailwind-Utilities: das vorkompilierte tailwind.css
   enthält nicht alle benötigten Farbstufen. Verwendung über den Statuskatalog
   extr_shift_statuses() (bg-Feld trägt die komplette Klasse). */
.shift-st-frueh        { background:#dbeafe; color:#1e40af; border-color:#93c5fd; } /* Frühschicht: blau */
.shift-st-spaet        { background:#ffffff; color:#334155; border-color:#94a3b8; } /* Spätschicht: weiß */
.shift-st-arbeitstag   { background:#e0f2fe; color:#0369a1; border-color:#7dd3fc; } /* Arbeitstag: hellblau */
.shift-st-frei         { background:#fef9c3; color:#854d0e; border-color:#fde047; } /* Freier Rolltag: gelb */
.shift-st-urlaub       { background:#dcfce7; color:#166534; border-color:#86efac; } /* Urlaub: grün */
.shift-st-blumenstrauss{ background:#ccfbf1; color:#115e59; border-color:#5eead4; } /* Blumenstraußtag: türkis */
.shift-st-krank        { background:#fee2e2; color:#b91c1c; border-color:#fca5a5; } /* Krank: rot */
.shift-st-schule       { background:#ede9fe; color:#6d28d9; border-color:#c4b5fd; } /* Schule/Studium: violett */
.shift-st-dienstreise  { background:#e0e7ff; color:#4338ca; border-color:#a5b4fc; } /* Dienstreise: indigo */
.shift-st-sonntag      { background:#e2e8f0; color:#64748b; border-color:#cbd5e1; } /* Sonntag (frei): grau, ≠ gelber Rolltag */

/* Zellmarker: Einsatz (TUDOR/GADORO), Schlüsseldienst, Bereitschaft */
.shift-badge { position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
  font-size:8px; line-height:1; font-weight:700; letter-spacing:.02em; padding:1px 3px;
  border-radius:4px; background:rgba(15,23,42,.78); color:#fff; white-space:nowrap; }
/* Split-Kürzel (logische Unterteilung des Plans) — unten rechts in der Zelle */
.shift-split { position:absolute; bottom:1px; right:2px;
  font-size:8px; line-height:1; font-weight:700; letter-spacing:.02em;
  color:currentColor; opacity:.75; white-space:nowrap; }
.shift-flag  { position:absolute; top:2px; left:2px; display:flex; gap:1px; }
.shift-flag i, .shift-flag svg { width:9px; height:9px; }
.shift-cell-time { position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
  font-size:8px; line-height:1; white-space:nowrap; opacity:.75; }

/* ---- Umschalter-Streifen (Reiter) ------------------------------------------
   Reiter wie „Dokumente / Lernstrecken / Assistent" passen auf schmalen
   Bildschirmen nicht nebeneinander. Ohne Scrollmöglichkeit ragen sie aus dem
   Bildschirm und die hinteren Reiter sind nicht erreichbar. Der Streifen
   scrollt deshalb seitlich; die Bildlaufleiste bleibt verborgen, die Reiter
   selbst schrumpfen nicht und brechen nicht um.
   min-width:0 ist nötig, weil Flex-Elemente sonst nicht unter ihre
   Inhaltsbreite schrumpfen und der Streifen die Seite breiter machen würde. */
.extr-tab-strip {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;          /* sonst brechen Streifen mit flex-wrap um, statt zu scrollen */
}
.extr-tab-strip::-webkit-scrollbar { display: none; }
.extr-tab-strip > * { flex: 0 0 auto; white-space: nowrap; }

/* ── Dashboard-Konfiguration ────────────────────────────────────────────────
   Platzhalter-Widgets: „Widget wechseln"-Knopf erscheint erst beim Überfahren
   der Karte. Der Raster-Editor (Einstellungen → Dashboard-Ansicht) nutzt
   HTML5-Drag&Drop; die Klassen markieren Zieh-Quellen und Einfüge-Position. */
.dash-ph-swap {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  width: 1.75rem;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.dash-ph-card:hover .dash-ph-swap { opacity: 1; }
.dash-ph-swap:hover { color: hsl(var(--primary)); }

.dashcfg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  align-content: start;
  min-height: 14rem;
  padding: 0.75rem;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--muted) / 0.3);
  /* Spalten-Hilfslinien: 1px-Linie je 25%-Kachel (kein repeating-gradient —
     das kippt bei %-Stops in WebKit in endlose Mini-Wiederholungen) */
  background-image: linear-gradient(to left, hsl(var(--border) / 0.35) 1px, transparent 1px);
  background-size: 25% 100%;
  background-repeat: repeat-x;
}
.dashcfg-item {
  position: relative;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background: #fff;
  padding: 0.6rem 0.6rem;
  min-height: 4.5rem;
  cursor: grab;
  user-select: none;
}
.dashcfg-item.is-ph { border-style: dashed; background: hsl(var(--muted) / 0.4); }
.dashcfg-item.drag-src { opacity: 0.35; }
.dashcfg-item .dashcfg-actions { display: flex; gap: 0.25rem; }
.dashcfg-drop-before::before,
.dashcfg-drop-after::after {
  content: '';
  position: absolute;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 3px;
  border-radius: 2px;
  background: hsl(var(--primary));
}
.dashcfg-drop-before::before { left: -0.35rem; }
.dashcfg-drop-after::after { right: -0.35rem; }
.dashcfg-grid.drag-over-empty { outline: 2px dashed hsl(var(--primary) / 0.5); outline-offset: -6px; }
.dashcfg-src { cursor: grab; user-select: none; }
.dashcfg-src.is-used { opacity: 0.45; cursor: not-allowed; }

/* Abstände der Beschreibungstexte im Dashboard-Editor: der globale Reset oben
   (p{margin:0}, ungelayert) sticht Tailwinds mb-*-Utilities auf <p> aus —
   deshalb eigene, ebenfalls ungelayerte Klassen. */
.dashcfg-h { margin-bottom: 0.4rem; }
.dashcfg-desc { margin-bottom: 1rem; }
.dashcfg-desc-lg { margin-bottom: 1.5rem; }
.dashcfg-item > p { margin-top: 0.4rem; }
.dash-ph-chooser h3 { margin-bottom: 0.3rem; }
.dash-ph-chooser > p { margin-bottom: 0.85rem; }

/* Safe-Area (Notch) additiv zum py-Utility der Seite: ohne diese Regeln ersetzt
   das padding-top oben ein gesetztes py-* (Header wäre oben bündig, unten gepolstert). */
.extr-header-bar.py-3 { padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)); }
.extr-header-bar.py-4 { padding-top: calc(1rem    + env(safe-area-inset-top, 0px)); }
.extr-header-bar.py-5 { padding-top: calc(1.25rem + env(safe-area-inset-top, 0px)); }
.extr-header-bar.py-6 { padding-top: calc(1.5rem  + env(safe-area-inset-top, 0px)); }

/* ============================================================
   Gesamtplan (Zeitkonto/Schichten): Datumszeile beim Scrollen
   anheften. Das Raster scrollt vertikal selbst (begrenzte Höhe) –
   nur so kann der Tabellenkopf im horizontal scrollbaren
   Container kleben bleiben; die Namensspalte bleibt sticky links.
   ============================================================ */
.shift-gesamt-scroll { max-height: max(420px, calc(100vh - 240px)); overflow: auto; }
.shift-gesamt-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Opak: durchscheinende Utility-Hintergründe ließen sonst die
     darunter scrollenden Zeilen durchschimmern */
  background: linear-gradient(hsl(var(--muted) / 0.4), hsl(var(--muted) / 0.4)) #fff;
  /* border-collapse-Rahmen wandern beim Kleben nicht mit → Linie als Schatten */
  box-shadow: inset 0 -1px 0 hsl(var(--border));
}
.shift-gesamt-scroll thead th:first-child { z-index: 30; }
.shift-gesamt-scroll thead th.bg-slate-100 { background: linear-gradient(#f1f5f9, #f1f5f9) #fff; }
.shift-gesamt-scroll thead th.bg-primary\/10 { background: linear-gradient(hsl(var(--primary) / 0.1), hsl(var(--primary) / 0.1)) #fff; }

/* ============================================================
   Chat: Nachrichten-Spalte auf volle Zeilenbreite ziehen.
   Ohne feste Breite ist die Spalte shrink-to-fit — die 75%-
   max-width der Bubbles bezog sich dann auf die eigene Inhalts-
   breite, wodurch schon kurze Nachrichten grundlos umbrachen
   („Hallo wie geht's" brach nach „wie" um). Volle Breite lässt
   die Prozent-Angabe auf die Zeile wirken; die Ausrichtung
   übernehmen items-end (eigene) bzw. items-start (fremde).
   ============================================================ */
#chat-messages-feed [data-msg-id] > .flex-col { flex: 1 1 auto; min-width: 0; }