/* ============================================================
   Orbit · Verband Bildungsmedien – App Styles
   Custom Design System, kein Build-Tool erforderlich.
   ============================================================ */

/* === DESIGN-V2 · S1 · Schrift === */
/* Plus Jakarta Sans 200–800 (variabel), lokal ausgeliefert, SIL OFL 1.1 – Lizenz: ../fonts/OFL.txt.
   Dateinamen sind stabil (url() läuft nicht über extr_asset()); bei Austausch umbenennen (…-v2.woff2). */
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* === /DESIGN-V2 === */

/* 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; }
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---- Textfarb-Utilities auf <a> wiederherstellen --------------------------
   `a { color: inherit }` steht unlayered im Reset und schlägt damit ALLE
   Farb-Utilities aus Tailwinds `@layer utilities` — unlayered CSS gewinnt
   gegen jeden Layer, unabhängig von der Spezifität (gleiche Falle wie bei
   `mb-*` auf <p>, siehe CLAUDE-UI §2.2). Folge: `<a class="bg-primary
   text-white">` bekam geerbtes Dunkelbraun statt Weiß (Leerzustand-Buttons
   „Erstes Formular anlegen", „Ersten Test anlegen"), `<a class="text-primary">`
   blieb grau („5 weitere im Kalender" auf dem Dashboard).
   Element + Klasse (0,1,1) schlägt `a` (0,0,1) — ohne !important, und die
   Utilities bleiben für alle anderen Elemente unangetastet. */
a.text-white            { color: #fff; }
/* Gleiche Falle für die Knopf-Bausteine: .extr-btn--primary/--danger liegen
   in @layer components und verlieren deshalb gegen das ungeschichtete
   `a { color: inherit }`. Betraf u. a. „Erste Lernstrecke anlegen". */
a.extr-btn--primary     { color: hsl(var(--primary-foreground)); } /* UI-Audit DARK-02 */
a.extr-btn--danger      { color: hsl(var(--destructive-foreground)); } /* Redesign S4: dunkel dunkle Schrift auf hellem Rot */
a.extr-btn--success     { color: #fff; }
a.extr-btn--outline     { color: hsl(var(--foreground)); }
a.extr-btn--outline:hover,
a.extr-btn--outline.is-on { color: hsl(var(--primary-text)); }
a.extr-btn--ghost       { color: hsl(var(--primary-text)); }
a.extr-btn--light       { color: hsl(var(--brand-ink)); }
a.extr-btn--glass       { color: #fff; } /* feste Farbe: Weiß auf dunklem Markenverlauf */
a.extr-icon-btn         { color: hsl(var(--muted-foreground)); }
a.extr-icon-btn:hover   { color: hsl(var(--foreground)); }
a.extr-icon-btn--danger,
a.extr-icon-btn--danger:hover,
a.extr-icon-btn--danger-hover:hover { color: hsl(var(--destructive)); }
a.text-primary          { color: hsl(var(--primary-text)); }
/* VBM (wie Aurum N7): --primary (#2f7aa2) hat auf dem Seitengrund #f5f7fa nur 4,42:1. Schrift in Akzentfarbe läuft darum
   wie auf <a> über --primary-text (6,04:1 auf dem Grund, 6,48:1 auf Weiß), gefüllte Primärflächen über --primary-strong. */
.text-primary           { color: hsl(var(--primary-text)); }
.hover\:text-primary:hover { color: hsl(var(--primary-text)); }
.bg-primary.text-primary-foreground { background-color: hsl(var(--primary-strong)); color: hsl(var(--primary-foreground)); }
a.text-foreground       { color: hsl(var(--foreground)); }
a.text-muted-foreground { color: hsl(var(--muted-foreground)); }
a.hover\:text-foreground:hover       { color: hsl(var(--foreground)); }
a.hover\:text-primary:hover          { color: hsl(var(--primary-text)); }
a.hover\:text-muted-foreground:hover { color: hsl(var(--muted-foreground)); }
a.extr-card-link        { color: hsl(var(--primary-text)); } /* Redesign S5: Kartenkopf-Link (01 §3.2) */

/* ---- `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); }

/* ---- Nachgereichte Utilities (fehlen im vorgebauten tailwind.css) ---------
   tailwind.css ist ein andernorts gebautes Artefakt; im Repo liegt kein
   Build-Tool. Der letzte Build ist gegenüber den PHP-Quellen veraltet: die
   folgenden im Markup verwendeten Klassen sind NICHT einkompiliert und tun
   optisch nichts. Sichtbare Folgen u. a.:
     · `top-16 bottom-16` fehlt → das Statistik-Modal in news-detail.php hatte
       keine Höhenbegrenzung, wuchs über den Bildschirm hinaus und ließ sich
       nicht mehr schließen.
     · `pb-28` fehlt → die Inventur-Liste lief unter die fixierte Abschlussleiste.
     · `max-w-xl`, `max-w-[…]`, `max-h-…` fehlen → Panels und Spalten liefen
       auf volle Breite/Höhe.
   Ermittelt durch Abgleich aller class="…"-Tokens der Partials gegen
   tailwind.css + app.css. Beim nächsten Tailwind-Build kann der Block entfallen.
   Spacing-Skala wie Tailwind v4: calc(var(--spacing) * n), --spacing = .25rem. */

/* Abstände */
.mt-2\.5  { margin-top: calc(var(--spacing) * 2.5); }
.mb-2\.5  { margin-bottom: calc(var(--spacing) * 2.5); }
.mr-3    { margin-right: calc(var(--spacing) * 3); }
.pl-1    { padding-left: calc(var(--spacing) * 1); }
.pl-2\.5  { padding-left: calc(var(--spacing) * 2.5); }
.pl-6    { padding-left: calc(var(--spacing) * 6); }
.pb-1\.5  { padding-bottom: calc(var(--spacing) * 1.5); }
.pb-5    { padding-bottom: calc(var(--spacing) * 5); }
.pb-28   { padding-bottom: calc(var(--spacing) * 28); }
.py-3\.5  { padding-block: calc(var(--spacing) * 3.5); }
.gap-x-3   { column-gap: calc(var(--spacing) * 3); }
.gap-x-6   { column-gap: calc(var(--spacing) * 6); }
.gap-y-1\.5 { row-gap: calc(var(--spacing) * 1.5); }
.gap-y-2\.5 { row-gap: calc(var(--spacing) * 2.5); }

/* Vom Signage-Modul verwendet (Vollbildvorschau, Card-Editor, Zeitplan).
   Ohne sie ist die Vorschau-Auflage durchsichtig und die Bedienknöpfe darauf
   unsichtbar. Schreibweise bewusst wie im Build (Hex mit Alpha statt
   color-mix); der Alpha-Wert von .text-muted-foreground/70 folgt der
   Markenfarbe --muted-foreground. */
.bg-white\/15              { background-color: #ffffff26; }
.hover\:bg-white\/25:hover { background-color: #ffffff40; }
.text-muted-foreground\/70 { color: hsl(var(--muted-foreground) / .7); } /* folgt dem Dunkelmodus (UI-Audit DARK-01) */
.ring-border               { --tw-ring-color: var(--color-border); }
@media (min-width:40rem) { .sm\:items-end { align-items: flex-end; } }

/* Vom Social-Media-Modul verwendet: `hidden lg:table-cell` blendet Tabellen-
   spalten (Typ, Ziel) auf kleinen Bildschirmen aus. Ohne die Regel blieben die
   Spalten auch auf großen Bildschirmen verborgen — die Kopfzeile hätte dann
   mehr Spalten als die Zeilen. Reihenfolge beachtet: steht nach .hidden.table-cell
   oben, gewinnt also innerhalb desselben Media-Query. */
@media (min-width:64rem) { .lg\:table-cell, .hidden.lg\:table-cell { display: table-cell; } }

/* Größen */
.w-44     { width: calc(var(--spacing) * 44); }
.w-48     { width: calc(var(--spacing) * 48); }
.h-52     { height: calc(var(--spacing) * 52); }
.max-h-12 { max-height: calc(var(--spacing) * 12); }
.max-h-36 { max-height: calc(var(--spacing) * 36); }
.max-h-44 { max-height: calc(var(--spacing) * 44); }
.max-h-52 { max-height: calc(var(--spacing) * 52); }
.max-w-12 { max-width: calc(var(--spacing) * 12); }
.max-w-xl { max-width: 36rem; }
.max-w-\[8rem\]  { max-width: 8rem; }
.max-w-\[10rem\] { max-width: 10rem; }
.max-w-\[12rem\] { max-width: 12rem; }
.max-w-\[220px\] { max-width: 220px; }
.min-w-\[720px\] { min-width: 720px; }
.min-w-\[44rem\] { min-width: 44rem; }
.min-h-\[7rem\]  { min-height: 7rem; }

/* Position & Sonstiges */
.top-10    { top: calc(var(--spacing) * 10); }
.top-16    { top: calc(var(--spacing) * 16); }
.bottom-10 { bottom: calc(var(--spacing) * 10); }
.bottom-16 { bottom: calc(var(--spacing) * 16); }
.bottom-36 { bottom: calc(var(--spacing) * 36); }
.left-0\.5  { left: calc(var(--spacing) * 0.5); }
.right-0\.5 { right: calc(var(--spacing) * 0.5); }
.z-\[55\]   { z-index: 55; }
.opacity-30 { opacity: .3; }
.border-t-2 { border-top-width: 2px; }
.border-l-2 { border-left-width: 2px; }
.border-primary\/50 { border-color: hsl(var(--primary) / 0.5); }

@media (min-width: 640px) {
  .sm\:w-56 { width: calc(var(--spacing) * 56); }
}
@media (min-width: 1024px) {
  .lg\:top-12    { top: calc(var(--spacing) * 12); }
  .lg\:bottom-12 { bottom: calc(var(--spacing) * 12); }
  .lg\:bottom-24 { bottom: calc(var(--spacing) * 24); }
}


/* ============================================================
   Design Tokens (Werte nach Demo projekte/azs-orbit-redesign-demo, orbit.css 15–83 – Redesign Phase 3)
   ============================================================ */
: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);

  /* ── Rollen (HSL-Kanäle für hsl(var(--x)); Werte mit „/ a“ tragen ihr Alpha – ohne Alpha-Zusatz nutzen) ── */
  /* #2f7aa2 */ --primary:            201 55% 41%;
  /* #2f7aa2 */ --primary-hsl:        hsl(201, 55%, 41%);
                --primary-foreground: 0 0% 100%;
  /* #2f7aa2 */ --primary-strong:     201 55% 41%; /* Fläche unter weißer Schrift, 4,74:1 (VBM-Markenfarbe) */
  /* #1f5a7a */ --primary-emphasis:   201 60% 30%; /* Hover gefüllter Flächen, Weiß 7,50:1 */
  /* #206488 */ --primary-text:       201 62% 33%; /* Schrift/Symbol in Akzentfarbe, 6,48:1 auf Weiß, 6,04:1 auf --background */
                --primary-soft:       201 55% 41% / .11; /* Tonfläche (Demo --lightprimary) */
  /* #2f7aa2 */ --accent:             201 55% 41%;
  /* #f5f7fa */ --background:         216 33% 97%;
  /* #f5f7fa */ --background-hsl:     hsl(216, 33%, 97%);
  /* #1a1e2d */ --foreground:         227 26% 14%;
  /* #171c2c */ --heading:            224 32% 13%;
  /* #495465 */ --bodytext:           215 16% 34%;
  /* #ffffff */ --card:               0 0% 100%;
  /* #1a1e2d */ --card-foreground:    227 26% 14%;
  /* #ffffff */ --popover:            0 0% 100%;
  /* #f8fafc */ --surface:            210 33% 98%;
  /* #0d0a47 */ --secondary:          243 75% 16%;
  /* #0d0a47 */ --secondary-hsl:      hsl(243, 75%, 16%);
                --secondary-foreground: 0 0% 100%;
  /* #eef2f6 */ --muted:              210 31% 95%;
  /* #606c7b */ --muted-foreground:   213 12% 43%;
                --muted-bg:           213 40% 22% / .06;
  /* #dfe5ec */ --border:             212 26% 90%;
  /* #c7d0db */ --input:              212 22% 82%;
                --ring:               201 55% 41% / .42;
  /* #d4183d */ --destructive:        350 73% 46%;
                --destructive-foreground: 0 0% 100%;

  /* Status-Töne (UI-Audit CODE-08): Fläche mit eigenem Alpha, Schrift, Rahmen, Markierung (Punkt, Balken, Stern). */
  --tone-ok-bg:         147 56% 42% / .14;
  --tone-ok-fg:         142 72% 27%; /* Demo 29 % läge auf der Fläche bei 4,39:1 – 27 %: 4,92:1 */
  --tone-ok-border:     147 56% 42% / .4;
  --tone-ok-mark:       147 56% 42%;
  --tone-warn-bg:       31 87% 59% / .16;
  --tone-warn-fg:       23 83% 31%;
  --tone-warn-border:   31 87% 59% / .4;
  --tone-warn-mark:     31 87% 59%;
  --tone-bad-bg:        5 73% 63% / .14;
  --tone-bad-fg:        0 74% 42%;
  --tone-bad-border:    5 73% 63% / .4;
  --tone-bad-mark:      5 73% 63%;
  --tone-info-bg:       214 70% 59% / .14;
  --tone-info-fg:       224 76% 48%;
  --tone-info-border:   214 70% 59% / .4;
  --tone-info-mark:     214 70% 59%;
  --tone-gold-bg:       42 91% 57% / .20;
  --tone-gold-fg:       41 100% 24%;
  --tone-gold-border:   42 91% 57% / .4;
  --tone-gold-mark:     42 91% 57%;
  --tone-violet-bg:     259 43% 61% / .14;
  --tone-violet-fg:     259 42% 42%;
  --tone-violet-border: 259 43% 61% / .4;
  --tone-violet-mark:   259 43% 61%;

  /* Marke (Signet, Sidebar, Toast) */
  --brand-mint:   200 65% 72%;
  --brand-mint-l: 200 60% 85%;
  --brand-amber:  42 91% 57%;
  --brand-ink:    205 55% 13%;
  /* #ffffff */ --sidebar-bg:         0 0% 100%; /* Rückfall; die Sidebar nutzt --extr-nav-grad */
                --sidebar-border:     212 26% 90%;

  /* Formen */
  --radius:        1rem; /* Altbausteine (.extr-modal) */
  --radius-card:   1.125rem;
  --radius-btn:    .5rem;
  --radius-field:  .625rem;
  --radius-control: 999px;  /* R7: Eingabefelder und Filter-Selects als Pille wie in der Demo */
  --radius-pop:    .875rem;
  --radius-sheet:  1.5rem;
  /* Schatten (blau getönt nach VBM; im Dunkel-Scope eigene Werte) */
  --extr-shadow-sm: 0 1px 2px hsl(227 26% 14% / 0.05), 0 1px 3px hsl(227 26% 14% / 0.07);
  --extr-shadow-md: 0 2px 6px rgba(20, 45, 70, .09);
  --extr-shadow-lg: 0 12px 32px rgba(20, 45, 70, .16);
  --extr-shadow-xl: 0 1rem 3rem rgba(12, 28, 45, .18);
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Flächen der Hülle (CI-Verläufe sind bewusst fest, hell = dunkel; Branding überschreibt --extr-hero-grad am Hero) */
  --extr-hero-grad: linear-gradient(120deg, #123f58 0%, #1f5b7c 50%, #2f7aa2 100%);
  --extr-nav-grad: linear-gradient(170deg, #0d2433 0%, #163a52 58%, #1a4a68 100%);
  --extr-mhdr-grad: linear-gradient(170deg, rgba(13, 36, 51, .95), rgba(26, 74, 104, .9));
  --extr-glass: rgba(255, 255, 255, .66);
  --extr-glass-line: rgba(255, 255, 255, .6);
  --extr-glass-on: rgba(255, 255, 255, .88);
  --extr-glass-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 30px rgba(20, 45, 70, .18), 0 2px 8px rgba(20, 45, 70, .10);
  --extr-scrim: rgba(10, 24, 38, .38);
  --extr-scrim-nav: rgba(8, 20, 32, .45);

  /* Maße der Hülle */
  --extr-side-w: 270px;
  --extr-side-w-min: 75px;
  --extr-side-cur: var(--extr-side-w);
  --extr-gap: 20px;
  --extr-topbar-h: 68px;
  --extr-content-max: 1560px;
  --extr-content-px: 1rem;

  /* Tailwind-Farben aus den Rollen (ungeschichtet nach tailwind.css → schlägt @layer theme). Ein Token-Satz für
     beide Themen; Branding setzt --color-primary/--color-accent später im Kopf (branding-service.php). */
  --color-primary:                 hsl(var(--primary));
  --color-primary-foreground:      hsl(var(--primary-foreground));
  --color-accent:                  hsl(var(--accent));
  --color-accent-foreground:       hsl(var(--primary-foreground));
  --color-background:              hsl(var(--background));
  --color-foreground:              hsl(var(--foreground));
  --color-card:                    hsl(var(--card));
  --color-card-foreground:         hsl(var(--card-foreground));
  --color-secondary:               hsl(var(--secondary));
  --color-secondary-foreground:    hsl(var(--secondary-foreground));
  --color-muted:                   hsl(var(--muted));
  --color-muted-foreground:        hsl(var(--muted-foreground));
  --color-border:                  hsl(var(--border));
  --color-input:                   hsl(var(--card));
  --color-ring:                    hsl(var(--primary));
  --color-destructive:             hsl(var(--destructive));
  --color-destructive-foreground:  hsl(var(--destructive-foreground));
}
@media (max-width: 1023px) {
  :root { --extr-gap: 12px; --radius-card: 1rem; }
}
@media (min-width: 1024px) {
  :root { --extr-content-px: 1.25rem; } /* R7: rechter Rand der Kopfkarte 20 px wie in der Demo */
}
html[data-nav="collapsed"] { --extr-side-cur: var(--extr-side-w-min); }

/* ============================================================
   Base
   ============================================================ */
body.extr-body {
  font-family: var(--font-sans);
  font-size: .875rem;   /* R7: 14 px wie in der Demo; html bleibt 16 px, damit rem-Maße stimmen */
  background-color: hsl(var(--background));   /* fast weiß, leicht blau (VBM #f5f7fa) */
  color: hsl(var(--foreground));               /* dark slate */
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Shell Layout (Redesign S9, 01 §4.3 Teil A: Sidebar-Karte im Markenverlauf, Desktop)
   ============================================================ */
.extr-shell {
  display: block;
  min-height: 100vh;
}

/* ---- Sidebar-Karte im Markenverlauf (D10); mobil ausgeblendet (Schublade folgt mit S10) ---- */
.extr-sidebar { display: none; position: fixed; z-index: 55; flex-direction: column; overflow: hidden; color: #fff; /* feste Farbe: Schrift auf Markenverlauf */
  background: hsl(var(--secondary)); background: var(--extr-nav-grad); border: 0; border-radius: 12px; box-shadow: var(--extr-shadow-md); }

@media (min-width: 1024px) {
  .extr-sidebar { display: flex; top: var(--extr-gap); left: var(--extr-gap); bottom: var(--extr-gap); width: var(--extr-side-cur); height: auto; transition: width .18s ease, box-shadow .18s ease; }
  .extr-main { padding-left: calc(var(--extr-side-cur) + 2 * var(--extr-gap) - var(--extr-content-px)); padding-right: max(0px, calc(var(--extr-gap) - var(--extr-content-px))); padding-bottom: 0; transition: padding-left .18s ease; }
}
.extr-sidebar::after { content: ""; position: absolute; right: -70px; bottom: -60px; width: 280px; height: 280px; z-index: 0; background: #fff; /* feste Farbe: Wasserzeichen */ opacity: .04; pointer-events: none;
  -webkit-mask: url("../images/logo.png") center / contain no-repeat; mask: url("../images/logo.png") center / contain no-repeat; }
.extr-sidebar > * { position: relative; z-index: 1; }

.extr-sidebar-logo { display: flex; align-items: center; gap: .625rem; padding: 1.125rem 1.25rem .875rem; border-bottom: 0; }

/* Altname, ohne Verwendung in der Shell (Klassenmenge darf nur wachsen) */
.extr-logo-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: hsl(var(--primary-soft));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--primary-text));
  flex-shrink: 0;
}

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

.extr-logo-name { display: block; font-size: .9375rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: inherit; white-space: nowrap; }
.extr-logo-sub { display: block; font-size: .625rem; line-height: 1.35; /* Platz für die Ö-Punkte unter overflow: hidden, ersetzt 2 px Abstand */ font-weight: 500; letter-spacing: .02em; /* VBM: „Verband Bildungsmedien“ ist lang; in Versalien mit .1em schnitt die Zeile ab, darum normale Schreibung */ text-transform: none; color: hsl(var(--brand-mint-l)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sidebar User */
.extr-sidebar-user { display: flex; align-items: center; gap: .75rem; }

.extr-sidebar-user-info { flex: 1; min-width: 0; }
.extr-sidebar-user-name { font-size: .875rem; font-weight: 600; color: #fff; /* feste Farbe */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.extr-sidebar-user-role { font-size: .75rem; color: rgba(255,255,255,.62); /* feste Farbe */ }

/* Sidebar Nav */
.extr-sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0; padding: 0 0 1.75rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; /* feste Farbe */
  /* Gate-W1: unten ausblenden statt hart vor der Profilkarte abschneiden; Polster lässt den letzten Eintrag aus dem Verlauf scrollen */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.75rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 1.75rem), transparent); }
/* Gruppenüberschriften: Weiß .66 ≥ 4,52:1 auf dem Verlauf (Demo .48 nur 3,14:1, F12) */
.extr-nav-heading { flex: 0 0 auto; padding: .875rem 1.5rem .25rem; font-size: .71875rem; font-weight: 600; line-height: 1.5rem; letter-spacing: .06em; text-transform: uppercase; opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: rgba(255,255,255,.66); /* feste Farbe */ }

.extr-nav-item { position: relative; display: flex; flex-shrink: 0; align-items: center; gap: .6875rem; min-height: 2.5rem; padding: .5rem 1.5rem; border-radius: 0; font-size: .90625rem; font-weight: 500; text-decoration: none; background: none; transition: color .15s, background-color .15s;
  color: rgba(255,255,255,.84); /* feste Farbe */ }
.extr-nav-item::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 0 9999px 9999px 0; background: rgba(255,255,255,.09); /* feste Farbe */ transition: width .15s; }

.extr-nav-item:hover { color: #fff; /* feste Farbe */ background: none; }
.extr-nav-item:hover::before { width: calc(100% - 1.5rem); }
.extr-nav-item > * { position: relative; }

.extr-nav-item--active { margin-right: 1.5rem; border-radius: 0 9999px 9999px 0; background: rgba(255,255,255,.15); /* feste Farbe */ color: #fff; font-weight: 600; }
.extr-nav-item--active::before { display: none; }
.extr-nav-item--active .extr-nav-icon { color: hsl(var(--brand-mint)); }

.extr-nav-item--logout { color: rgba(255,255,255,.72); /* feste Farbe */ }
.extr-nav-item--logout:hover { color: #fff; /* feste Farbe */ background: none; }

.extr-nav-icon { width: 1.1875rem; height: 1.1875rem; flex: 0 0 auto; }
/* Menütext kürzt mit „…", damit Icon und Badge ihre Breite behalten. */
.extr-nav-label { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Indikator-Badge (Sidebar). flex-shrink:0 + nowrap: ein langer Menütext darf das
   Badge nicht auf seine Mindestbreite drücken — sonst ragt „99+" aus dem Kreis.
   Redesign S9: Mint auf dem Verlauf (Demo), auf dem aktiven Eintrag Weiß. */
.extr-nav-badge { margin-left: auto; flex-shrink: 0; white-space: nowrap; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; font-size: .6875rem; font-weight: 700; line-height: 1; box-shadow: none; font-variant-numeric: tabular-nums;
  background: hsl(var(--brand-mint)); color: hsl(var(--brand-ink)); }
.extr-nav-badge.hidden { display: none; }
.extr-nav-item--active .extr-nav-badge { background: #fff; /* feste Farbe */ color: hsl(var(--primary-emphasis)); }
/* Warn-Indikator (2026-09-21): ein offener Vorgang verlangt Handeln — Krankmeldung trifft
   Schichtplan, Wachdienst mit Vorkommnissen. Amber statt Rot, mit Warnzeichen vor der Zahl;
   gesetzt von layout-shell.php beim Rendern und von app.js beim Pollen (.is-warn). */
.extr-nav-badge.is-warn,
.extr-bottom-nav-badge.is-warn,
.extr-quick-badge.is-warn { background: hsl(var(--tone-warn-mark)); color: hsl(var(--brand-ink)); } /* Redesign S4: Ink auf Warn-Markierung (hell 6,33:1) */
.extr-nav-badge.is-warn::before,
.extr-bottom-nav-badge.is-warn::before { content: "!"; margin-right: 0.15rem; font-weight: 800; }

/* Gesperrte Einträge (Schloss), Chevron im Fuß: lesbar auf dem Verlauf; (0,3,1) schlägt den Dunkel-Remap .text-muted-foreground */
.extr-sidebar .text-muted-foreground, html[data-theme="dark"] .extr-sidebar .text-muted-foreground { color: rgba(255,255,255,.6); /* feste Farbe: 5,61:1 */ }

/* Sidebar Footer */
.extr-sidebar-footer { padding: .5rem 1rem 1rem; border-top: 0; }
/* Profil-Block sitzt im Footer (über Abmelden): kompakt, ohne eigene Trennlinie */
.extr-sidebar-footer .extr-sidebar-user { padding: .625rem .75rem; border: 0; border-radius: 12px; color: #fff; /* feste Farbe */ background: rgba(255,255,255,.09); /* feste Farbe */ }
.extr-sidebar-footer .extr-sidebar-user:hover { background: rgba(255,255,255,.14); /* feste Farbe */ }
.extr-sidebar-footer .extr-avatar { background: hsl(var(--primary-strong)); color: hsl(var(--primary-foreground)); }
/* Design umschalten / Abmelden: nur mobil in der Schublade (R7, Desktop: Menü der Personenkarte); Symbol bündig mit dem Avatar im Profil-Block */
.extr-sidebar-foot-mobil { margin-top: .25rem; }
@media (min-width: 1024px) { .extr-sidebar-foot-mobil { display: none; } }
@media (min-width: 1024px) { .extr-sidebar-footer { display: none; } } /* Am Desktop steht alles in der Personenkarte der Kopfleiste */
.extr-sidebar-footer .extr-nav-item { padding-inline: .75rem; }
.extr-sidebar-footer .extr-nav-item::before { border-radius: 12px; }
.extr-sidebar-footer .extr-nav-item:hover::before { width: 100%; }
.extr-sidebar-version { flex: 0 0 auto; margin: 0; padding: 2px 7px; border-radius: 9999px; background: hsl(var(--brand-mint) / .16); color: hsl(var(--brand-mint)); font-size: .625rem; font-weight: 700; letter-spacing: .04em; text-align: center; }

/* ---- 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.375rem;  /* R7: 22 px wie der Inhalt der Demo */
    padding-right: 1.375rem;
  }
}

/* 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-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 {
  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; }

/* Absätze, Listen, Links, Zitate, Bilder. Muss ungelayert hier stehen: `prose`
   liegt in Tailwinds `@layer utilities` und verliert gegen den Reset oben
   (p/ul/ol/li { margin:0; padding:0 }, ul/ol { list-style:none }) — Absätze
   klebten aneinander, Listen hatten keine Punkte. */
.nd-article-body p { margin: 0 0 1.25rem; font-size: .9375rem; line-height: 1.75; color: hsl(var(--bodytext)); }
.nd-article-body ul,
.nd-article-body ol { margin: 0 0 1.25rem; padding-left: 1.5rem; color: hsl(var(--bodytext)); }
.nd-article-body ul { list-style: disc; }
.nd-article-body ol { list-style: decimal; }
.nd-article-body li { line-height: 1.625; }
.nd-article-body li + li { margin-top: 0.375rem; }
.nd-article-body li > ul,
.nd-article-body li > ol { margin: 0.375rem 0 0; }
.nd-article-body li::marker { color: hsl(var(--muted-foreground)); }
.nd-article-body a { color: hsl(var(--primary-text)); text-decoration: underline; text-underline-offset: 2px; }
.nd-article-body strong,
.nd-article-body b { font-weight: 600; color: hsl(var(--foreground)); }
.nd-article-body blockquote { margin: 1.375rem 0; padding: .875rem 1.125rem; border-left: 3px solid hsl(var(--primary)); border-radius: 0 .75rem .75rem 0;
                              background: hsl(var(--surface)); font-style: normal; color: hsl(var(--foreground)); }
.nd-article-body img { border-radius: 0.75rem; margin: 1.5rem 0; }

/* Erstes Element braucht keinen Abstand nach oben, letztes keinen nach unten */
.nd-article-body > *:first-child { margin-top: 0; }
.nd-article-body > *:last-child { margin-bottom: 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) ---- */
/* Schwebende Navigation im Glas-Look.
   Die Leiste klebt nicht mehr am Rand, sondern schwebt als freistehende Pille
   über dem Inhalt: Weichzeichner plus kräftigere Farben lassen den Inhalt
   durchscheinen, eine helle Innenkante wirkt als Lichtreflex, zwei weiche
   Schattenlagen heben die Pille ab. Redesign S10 (01 §4.3 Teil B): Fläche, Kante
   und Schatten aus den Glas-Token (--extr-glass*), die hell und dunkel tragen. */
.extr-bottom-nav {
  display: flex;
  justify-content: center;
  position: fixed;
  left: 0;
  right: 0;
  /* Abstand zum unteren Rand; auf Geräten mit Home-Indikator entsprechend mehr. */
  bottom: max(env(safe-area-inset-bottom, 0px) - 0.75rem, 1rem);
  /* 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. */
  z-index: 45;
  /* Seitlicher Rand inkl. Sicherheitsbereich (Notch im Querformat). */
  padding: 0 max(0.875rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  pointer-events: none;   /* nur die Pille selbst nimmt Eingaben an */
}

.extr-bottom-nav-pill {
  position: relative;   /* Bezugsrahmen der gleitenden Kapsel */
  pointer-events: auto;
  display: flex;
  align-items: stretch;
  gap: 0.125rem;
  width: 100%;
  max-width: 27.5rem;
  padding: 6px;
  border-radius: 26px;
  background: var(--extr-glass);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--extr-glass-line);
  box-shadow: var(--extr-glass-shadow);
}

/* Ohne Weichzeichner (ältere Browser) und bei „Transparenz reduzieren“ wird die
   Fläche deckend – sonst wäre die Leiste über hellem Inhalt schlecht lesbar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .extr-bottom-nav-pill { background: hsl(var(--card)); }
}
@media (prefers-reduced-transparency: reduce) {
  .extr-bottom-nav-pill {
    background: hsl(var(--card));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

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

.extr-bottom-nav-item {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.25rem 0.4375rem;
  border-radius: 21px;
  text-decoration: none;
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  gap: 3px;
  transition: color 0.15s, background 0.25s ease;
}

/* Der aktive Eintrag trägt nur noch die Farbe – die Kapsel darunter ist ein
   eigenes Element (siehe .extr-bottom-nav-slider), damit sie beim Wechsel von
   einem Eintrag zum nächsten gleiten kann. */
.extr-bottom-nav-item--active { color: hsl(var(--primary-text)); }
.extr-bottom-nav-item--active .extr-bottom-nav-icon { stroke-width: 2.3; }
.extr-bottom-nav-item:active { transform: scale(0.97); }
.extr-bottom-nav-label { font-size: .65625rem; font-weight: 600; }

/* Gleitende Kapsel: Position und Breite setzt app.js an den echten Maßen des
   aktiven Eintrags – so passt sie auch bei unterschiedlich breiten Texten. */
.extr-bottom-nav-slider {
  position: absolute;
  top: 0.375rem;
  bottom: 0.375rem;
  left: 0;
  width: 0;
  border-radius: 21px;
  background: var(--extr-glass-on);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 2px 6px rgba(20,45,70,.10); /* feste Farbe: Glanz */
  transform: translateX(0);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.42s cubic-bezier(0.34, 1.28, 0.42, 1),
              width 0.42s cubic-bezier(0.34, 1.28, 0.42, 1),
              opacity 0.2s ease;
}
.extr-bottom-nav-slider.is-on { opacity: 1; }
/* Beim ersten Zeichnen ohne Bewegung an die richtige Stelle setzen. */
.extr-bottom-nav-slider.is-instant { transition: none; }
/* Symbol und Text liegen über der Kapsel. */
.extr-bottom-nav-item { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .extr-bottom-nav-slider { transition: opacity 0.2s ease; }
}

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

/* 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%;
  white-space: nowrap;
  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(var(--primary-strong));
  color: hsl(var(--primary-foreground));
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px hsl(var(--card));
}
.extr-bottom-nav-badge.hidden { display: none; }

/* Indikator-Badge (Dashboard-Schnellaktionen) */
.extr-quick-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  white-space: nowrap;
  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(var(--primary-strong));     /* Redesign S4: Zähler nach Demo (Primärfläche statt Rot) */
  color: hsl(var(--primary-foreground));
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px hsl(var(--card));    /* Ring in Kachelfarbe (vorher Weiß – auch im Dunkelmodus) */
}
.extr-quick-badge.hidden { display: none; }

/* ── Mobiles „Weitere"-Overlay (Schnellaktionen-Überlauf) ── */
/* In @layer components: das Blatt trägt im Markup `hidden lg:hidden` — beide
   Utilities müssen den Baustein schlagen können. Ungeschichtet gewänne
   `display:flex`, und ein am Handy geöffnetes Blatt bliebe beim Drehen aufs
   Querformat über der Schreibtisch-Ansicht liegen (samt Scroll-Sperre). */
@layer components {
  .extr-more-overlay {
    position: fixed; inset: 0; z-index: 70;
    display: flex; align-items: flex-end;
    background: var(--extr-scrim);
    backdrop-filter: blur(2px);
  }
}
.extr-more-overlay.hidden { display: none; }
.extr-more-sheet {
  width: 100%;
  max-height: 75vh;
  background: hsl(var(--popover));
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow: 0 -12px 50px rgba(0, 0, 0, .3); /* feste Farbe: Schatten */
  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-soft));
  color: hsl(var(--primary-text));
  display: inline-flex; align-items: center; justify-content: center;
}
.extr-more-badge {
  flex-shrink: 0; white-space: nowrap;
  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(var(--primary-strong)); color: hsl(var(--primary-foreground));   /* Redesign S4: Zähler nach Demo */
  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
   ============================================================ */
/* Redesign S4 (01 §3.19): Initialen auf Tonfläche, keine festen Farbpaare (D9). */
.extr-avatar {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--primary-soft));
  color: hsl(var(--primary-text));
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .02em;
  flex-shrink: 0;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.extr-avatar--sm { width: 2rem; height: 2rem; font-size: .71875rem; }
.extr-avatar--xs { width: 1.5rem; height: 1.5rem; font-size: .59375rem; }

.extr-avatar--lg {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.125rem;
}

.extr-avatar--xl {
  width: 5.5rem;
  height: 5.5rem;
  font-size: 1.75rem;
}
.extr-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* 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;
}

/* Kartenkopf (Redesign S5, 01 §3.2): umgewidmet, Demo-Form – Kopf ohne Linie, Titel mit Symbol, Link rechts.
   In @layer components, damit Utilities (hidden, mb-*) gewinnen. */
@layer components {
  .extr-card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; padding: 0; border-bottom: 0; }
  .extr-card > .extr-card-header { padding: 1.375rem 1.5rem 0; }
  .extr-card-body { padding: 1.375rem 1.5rem; }
  .extr-card-header + .extr-card-body { padding-top: 0; }
  .extr-card-title { display: flex; align-items: center; gap: .625rem; min-width: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; color: hsl(var(--heading)); }
  .extr-card-title > svg, .extr-card-title > i { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; color: hsl(var(--primary-text)); }
  .extr-card-link { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
  .extr-card-link > svg { width: .875rem; height: .875rem; transition: transform .15s; }
  .extr-card-link:hover > svg { transform: translateX(2px); }
  @media (max-width: 1023px) { .extr-card > .extr-card-header { padding: 1.125rem 1.125rem 0; } .extr-card-body { padding: 1.125rem; } }
}

/* ============================================================
   Buttons
   ============================================================ */
/* In @layer components: Utility-Klassen im selben class-Attribut
   (bg-muted/40, font-mono, pr-20 …) sollen die Vorgaben überschreiben
   können. tailwind.css meldet die Layer-Reihenfolge an. */
@layer components {
  /* Redesign S4 (01 §3.8): Form nach Demo .btn – 36 px hoch, Rahmen 1 px durchsichtig (alle Varianten gleich hoch),
     Schrift 13,5 px/600. Auf <button> wirken Größe und Gewicht erst über die D8-Zweitregeln unter diesem Block. */
  .extr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 2.25rem; padding: .4375rem .875rem;
    border-radius: var(--radius-lg, .5rem);   /* Wächter kopfzeile-komponente 245 – Text nicht ändern */
    font-size: .84375rem; font-weight: 600; line-height: 1.2;
    border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s, opacity .15s, transform .12s, box-shadow .15s;
  }
  .extr-btn svg, .extr-btn i { width: 1rem; height: 1rem; }
  .extr-btn:active { transform: scale(0.97); }
  .extr-btn--primary { background: hsl(var(--primary-strong)); color: hsl(var(--primary-foreground)); }
  .extr-btn--primary:hover { background: hsl(var(--primary-emphasis)); filter: none; }
  .extr-btn--outline { background: hsl(var(--card)); border-color: hsl(var(--input)); color: hsl(var(--foreground)); font-weight: 500; }
  .extr-btn--outline:hover, .extr-btn--outline.is-on { background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); border-color: hsl(var(--primary) / .45); }
  /* Deckend statt durchsichtig — für Leisten auf gemustertem Grund (im Bestand die Kette mit zusätzlichem bg-white). */
  .extr-btn--solid { background: hsl(var(--card)); }
  .extr-btn--ghost { background: transparent; color: hsl(var(--primary-text)); }
  .extr-btn--ghost:hover { background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
  .extr-btn--danger { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
  .extr-btn--danger:hover { background: hsl(var(--destructive) / .9); }
  /* Bestätigende Aktion (UI-Audit BTN-05) – unverändert: green-700, Weiß ≈ 5:1 in beiden Themen */
  .extr-btn--success { background: var(--color-green-700, hsl(142 72% 29%)); color: #fff; }
  .extr-btn--success:hover { opacity: 0.9; }
  .extr-btn--primary:hover, .extr-btn--danger:hover, .extr-btn--success:hover { box-shadow: var(--extr-shadow-md); }
  .extr-btn--sm { min-height: 1.875rem; padding: .25rem .625rem; font-size: .78125rem; gap: .375rem; border-radius: 7px; }
  .extr-btn--lg { min-height: 2.75rem; padding: .625rem 1.25rem; font-size: .90625rem; }
  .extr-btn--icon { padding: .4375rem; }
  /* Breite Knöpfe (Modal-Fuß, mobile Formulare). */
  .extr-btn--block { width: 100%; }
  .extr-btn--light { background: #fff; color: hsl(var(--brand-ink)); } /* feste Farbe: nur auf dunklem Markenverlauf */
  .extr-btn--light:hover { background: #e8f2f8; }                       /* feste Farbe */
  .extr-btn--glass { background: rgba(255,255,255,.13); color: #fff; border-color: rgba(255,255,255,.14); } /* feste Farbe */
  .extr-btn--glass:hover { background: rgba(255,255,255,.22); }          /* feste Farbe */
  /* Deckt die Kette „disabled:opacity-60 disabled:cursor-not-allowed" mit ab; extrBtnBusy setzt disabled + aria-busy. */
  .extr-btn:disabled, .extr-btn[disabled], .extr-btn.is-disabled { opacity: .5; cursor: not-allowed; }
  .extr-btn:disabled:active { transform: none; }
  .extr-btn[aria-busy="true"] { cursor: progress; }
}
/* D8: Zweitregeln außerhalb des Layers – der ungeschichtete Reset button { font: inherit } schlug die Größe bisher */
button.extr-btn { font-size: .84375rem; font-weight: 600; }
button.extr-btn--outline { font-weight: 500; }
button.extr-btn--sm { font-size: .78125rem; }
button.extr-btn--lg { font-size: .90625rem; }

/* ============================================================
   Form Elements
   ============================================================ */
/* In @layer components: Utility-Klassen im selben class-Attribut
   (bg-muted/40, font-mono, pr-20 …) sollen die Vorgaben überschreiben
   können. tailwind.css meldet die Layer-Reihenfolge an. */
@layer components {
  /* Redesign S4 (01 §3.9): Felder nach Demo – Fläche --card, Rahmen --input, Radius 10 px (D7), Fokus = Rahmen + 3-px-Ring.
     Schriftgröße auf <input>/<select>/<textarea> über die D8-Zweitregeln unter diesem Block. */
  .extr-form-group { margin-bottom: 1rem; }
  .extr-label { display: block; font-size: .8125rem; line-height: 1.4; font-weight: 600; margin-bottom: .3125rem; color: hsl(var(--foreground)); }
  /* Zweizeiliger Abstand, wo das Feld Luft braucht (mb-2 im Bestand). */
  .extr-label--roomy { margin-bottom: 0.5rem; }
  .extr-label--required::after { content: ' *'; color: hsl(var(--tone-bad-mark)); }
  .extr-input, .extr-select, .extr-textarea {
    width: 100%; min-height: 2.375rem; padding: .4375rem .875rem;
    border: 1px solid hsl(var(--input)); border-radius: var(--radius-control);
    font-size: .875rem; color: hsl(var(--foreground)); background: hsl(var(--card));
    transition: border-color .15s, box-shadow .15s; font-family: inherit;
  }
  .extr-textarea, select.extr-select[multiple], select.extr-select[size],
  select.extr-input[multiple], select.extr-input[size] { border-radius: var(--radius-field); }   /* mehrzeilig bleibt eckig */
  .extr-input:focus, .extr-select:focus, .extr-textarea:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--ring)); }
  .extr-input:disabled, .extr-select:disabled, .extr-textarea:disabled { background: hsl(var(--muted-bg)); color: hsl(var(--muted-foreground)); cursor: not-allowed; }
  .extr-input::placeholder, .extr-textarea::placeholder { color: hsl(var(--muted-foreground)); }
  .extr-input--error, .extr-input[aria-invalid="true"], .extr-select[aria-invalid="true"], .extr-textarea[aria-invalid="true"] { border-color: hsl(var(--tone-bad-mark)); background-color: hsl(var(--tone-bad-bg)); }
  .extr-error-text { color: hsl(var(--tone-bad-fg)); font-size: .75rem; margin-top: .25rem; }
  .extr-field-hint { color: hsl(var(--muted-foreground)); font-size: .75rem; margin-top: .25rem; }
  /* Mindesthöhe 5rem nur für mehrzeilige Felder: rows="1" sind einzeilige, mitwachsende Notizfelder (recruiting) */
  .extr-textarea { resize: vertical; }
  .extr-textarea:not([rows="1"]) { min-height: 5rem; }
  .extr-select { appearance: none; background-repeat: no-repeat; background-position: right .625rem center; padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23606c7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
}
/* D8 Zweitregeln (ungeschichtet): Felder erben die Schrift über den Reset; Größe hier. Mobil 16 px: iOS zoomt im Browser
   (nicht PWA – dort sperrt maximum-scale, layout-shell.php) beim Fokus auf Felder unter 16 px. */
input.extr-input, select.extr-select, textarea.extr-textarea { font-size: .875rem; }
select.extr-filter-select, input.extr-filter-select { font-size: .84375rem; }
@media (max-width: 1023px) { input.extr-input, select.extr-select, textarea.extr-textarea, select.extr-filter-select, input.extr-filter-select, input.extr-sf-input, input.extr-ms-search { font-size: 1rem; } }
/* R7: Seit body 14 px hat, bleiben Felder ohne Größenklasse mobil bei 16 px (iOS zoomt sonst beim Fokus). */
@media (max-width: 1023px) { input, select, textarea { font-size: 1rem; } :where([contenteditable="true"]) { font-size: 1rem; } }
/* <p>-Abstände: der Reset setzt margin 0 ungeschichtet */
p.extr-error-text, p.extr-field-hint { margin-top: .25rem; }
/* Pfeil des Selects im Dunkelmodus (Farbe = --muted-foreground dunkel; Data-URI kann keine Variable lesen) */
html[data-theme="dark"] .extr-select, html[data-theme="dark"] select.extr-filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa3ac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* NF-emails-05: .extr-select:disabled setzt im Layer die Kurzform background; das Bild der Dunkelregel kachelte sonst über das Feld */
html[data-theme="dark"] .extr-select:disabled { background-repeat: no-repeat; background-position: right .625rem center; }

/* ============================================================
   Badges
   ============================================================ */
/* Redesign S4 (01 §3.7, Demo .badge): Pille 22 px; ohne Ton gedämpft. */
.extr-badge { display: inline-flex; align-items: center; gap: .3125rem; height: 1.375rem; padding: 0 .5625rem; border-radius: 9999px; font-size: .75rem; font-weight: 500; white-space: nowrap; background: hsl(var(--muted-bg)); color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.extr-badge svg, .extr-badge i { width: .75rem; height: .75rem; stroke-width: 2.2; }
/* Status über die Ton-Token — folgen dem Dunkelmodus (UI-Audit DARK-03) */
.extr-badge--green  { background: hsl(var(--tone-ok-bg));   color: hsl(var(--tone-ok-fg)); }
.extr-badge--red    { background: hsl(var(--tone-bad-bg));  color: hsl(var(--tone-bad-fg)); }
.extr-badge--yellow { background: hsl(var(--tone-warn-bg)); color: hsl(var(--tone-warn-fg)); }
.extr-badge--blue   { background: hsl(var(--tone-info-bg)); color: hsl(var(--tone-info-fg)); }
.extr-badge--gray   { background: hsl(var(--muted-bg)); color: hsl(var(--muted-foreground)); }
.extr-badge--primary { background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
.extr-badge--gold    { background: hsl(var(--tone-gold-bg)); color: hsl(var(--tone-gold-fg)); }
.extr-badge--violet  { background: hsl(var(--tone-violet-bg)); color: hsl(var(--tone-violet-fg)); }
.extr-badge--solid   { background: hsl(var(--primary-strong)); color: hsl(var(--primary-foreground)); }
.extr-badge.hidden   { display: none; }   /* Begleitregel: .extr-badge setzt display ungeschichtet (01 §0.3 Nr. 8) */

/* ============================================================
   Tabs
   ============================================================ */
/* Reiter mit Unterstrich (Redesign S5, 01 §3.16): nur wo die Ansicht Reiter IST; Wechsler-Streifen bleiben
   extr_tab_strip. initTabs() (app.js) setzt --active und aria-selected. */
.extr-tabs { display: flex; gap: .25rem; margin: 0 0 1.25rem; border-bottom: 1px solid hsl(var(--border)); overflow-x: auto; scrollbar-width: none; }
.extr-tab { position: relative; display: block; padding: .625rem .875rem; border: 0; background: none; color: hsl(var(--muted-foreground)); font-size: .84375rem; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; }
.extr-tab:hover { color: hsl(var(--foreground)); }
.extr-tab--active { color: hsl(var(--primary-text)); }
.extr-tab--active::after { content: ""; position: absolute; left: .625rem; right: .625rem; bottom: -1px; height: 2px; border-radius: 2px; background: hsl(var(--primary)); }
.extr-tab-panel { display: none; } .extr-tab-panel--active { display: block; }
button.extr-tab { font-size: .84375rem; font-weight: 600; } /* D8 */
.extr-tabs.hidden, .extr-tab.hidden, .extr-tab-panel--active.hidden { display: none; } /* Begleitregel (01 §0.3 Nr. 8) */

/* ============================================================
   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
   ============================================================ */
/* Schlüssel-Wert-Liste (Redesign S5, 01 §3.22): umgewidmet, Demo-Form; Markup <dl>/<div>/<dt>/<dd>. */
.extr-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem 1.25rem; margin: 0; }
@media (max-width: 600px) { .extr-detail-grid { grid-template-columns: minmax(0, 1fr); } }
.extr-detail-grid.hidden { display: none; } /* Begleitregel (01 §0.3 Nr. 8) */
.extr-detail-field { }
.extr-detail-label { margin: 0 0 .125rem; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.extr-detail-value { margin: 0; font-size: .875rem; color: hsl(var(--foreground)); overflow-wrap: anywhere; }
.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),
.extr-dlg: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/"],
.extr-dlg:not(.extr-modal-backdrop) > .extr-dlg-backdrop {
  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"],
.extr-dlg [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));
}


/* ---- Modal-Panels: Höhe hart begrenzen, Scroll-Bereiche dürfen schrumpfen ---
   Zwei wiederkehrende Fehlerbilder in Overlays (`fixed inset-0` + absolut
   positioniertes Panel):
   1) Ein Flex-Kind mit `flex-1 overflow-y-auto` hat implizit `min-height:auto`
      und schrumpft deshalb NICHT unter seine Inhaltshöhe. Vor allem WebKit
      (iOS/PWA) zieht das Panel dadurch über den Bildschirmrand hinaus – der
      Inhalt scrollt nicht, Kopf-/Fußzeile samt Schließen-Knopf werden
      unerreichbar. `min-height: 0` ist der Standard-Gegengriff.
   2) Panels ohne top/bottom (oder mit einer Klasse, die im vorgebauten
      tailwind.css fehlt) wachsen mit ihrem Inhalt. `max-height: 100%` bezieht
      sich auf die bereits um die Safe-Area eingerückte Overlay-Wurzel und
      deckelt sie zuverlässig.
   Beides schränkt nur ein, was ohnehin passen sollte – Panels, die bereits
   korrekt begrenzt sind, ändern sich nicht. */
[class~="fixed"][class~="inset-0"] [class~="flex-col"] > [class~="flex-1"],
.extr-dlg [class~="flex-col"] > [class~="flex-1"],
.extr-dlg-panel > .extr-dlg-body { min-height: 0; }
[class~="fixed"][class~="inset-0"]:not(.extr-modal-backdrop) > [class~="absolute"]:not([class*="bg-black/"]) {
  max-height: 100%;
}

/* ============================================================
   Toast Notifications
   ============================================================ */
/* Redesign S4 (01 §3.13, Demo .toast): Pille unten Mitte, in beiden Themen dunkel (Ink); der Typ bleibt am Symbol
   erkennbar. --extr-bottomnav-h setzt syncBottomNavHeight (app.js) inkl. Luft.
   Abweichung von §3.13: Container über die volle Breite (left/right 1rem) statt left: 50% + translateX(-50%) – sonst
   bekäme der fixierte Container per shrink-to-fit nur 50vw (CSS 2.1 §10.3.7) und lange Meldungen brächen mobil in eine
   mehrzeilige Pille um. align-items: center hält die Pille mittig, sie wächst bis calc(100vw - 2rem). */
.extr-toasts {
  position: fixed;
  bottom: calc(var(--extr-bottomnav-h, 6.5rem) + .25rem);
  left: 1rem;
  right: 1rem;
  transform: none;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}

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

.extr-toast {
  position: relative;
  overflow: hidden;
  background: hsl(var(--brand-ink));
  color: #fff; /* feste Farbe: Weiß auf Ink 14,14:1 */
  padding: .6875rem 1.125rem;
  border-left: 0;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  max-width: calc(100vw - 2rem);
  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; color: hsl(var(--brand-mint)); }
.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, .35); /* feste Farbe */ transform-origin: left;
  animation: extrToastBar 3.5s linear forwards;
}
.extr-toast--success, .extr-toast--error, .extr-toast--info { background: hsl(var(--brand-ink)); }
.extr-toast--error .extr-toast-icon { color: hsl(0 94% 82%); }   /* feste Farbe: helles Rot auf Ink in beiden Themen */
.extr-toast--info  .extr-toast-icon { color: hsl(212 96% 78%); } /* feste Farbe: helles Blau auf Ink */
.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)); }
/* Schalter (Demo .swt, Redesign S4) – Markup bleibt <label class="extr-toggle"><input type="checkbox"><span class="extr-toggle-slider"></span></label> */
.extr-toggle { position: relative; display: inline-block; width: 2.75rem; height: 1.625rem; }
.extr-toggle input { opacity: 0; width: 0; height: 0; }
.extr-toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: hsl(var(--input)); border-radius: 9999px; transition: background 0.2s;
}
.extr-toggle-slider::before {
  content: ''; position: absolute;
  width: 1.25rem; height: 1.25rem;
  left: 3px; top: 3px;
  background: #fff; /* feste Farbe: Schalterknopf */ box-shadow: 0 1px 3px rgba(0,0,0,.25); /* feste Farbe: Schatten */
  border-radius: 9999px; transition: transform 0.2s;
}
.extr-toggle input:checked + .extr-toggle-slider { background: hsl(var(--primary-strong)); }
.extr-toggle input:checked + .extr-toggle-slider::before { transform: translateX(1.125rem); }
.extr-toggle input:focus-visible + .extr-toggle-slider { box-shadow: 0 0 0 3px hsl(var(--ring)); }

/* 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(--input));
  border-radius: 0.375rem;
  background: hsl(var(--card));
  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: hsl(var(--primary-foreground));
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.15s, transform 0.15s;
}

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

.extr-check input:checked + .extr-check-box svg {
  opacity: 1;
  transform: scale(1);
  color: hsl(var(--primary-foreground));
}

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

.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)
   ============================================================ */
/* Editor-Hülle (Redesign S13, 01 §3.23): Werte an Ort und Stelle; eigene Editoren ohne Summernote: .extr-editor (DESIGN-V2) */
.note-editor.note-frame {
  border: 1px solid hsl(var(--input)) !important;
  border-radius: .75rem !important;
  background: hsl(var(--card)) !important;
  overflow: hidden;
  box-shadow: none !important;
}
.note-editor.note-frame:focus-within {
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 3px hsl(var(--ring)) !important;
}
.note-editor.note-frame .note-toolbar {
  background: hsl(var(--muted-bg)) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  padding: .375rem !important;
}
.note-editor.note-frame .note-editable {
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  font-family: var(--font-sans) !important;
  font-size: .9375rem !important;
  line-height: 1.75 !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: hsl(var(--primary-text)) !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: var(--font-mono) !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: var(--font-mono) !important; font-size: .8125rem !important; }
.note-editor.note-frame .note-statusbar {
  background: hsl(var(--muted-bg)) !important;
  border-top: 1px solid hsl(var(--border)) !important;
}
/* Toolbar-Buttons — die Farbfelder der Farbknöpfe (.note-color-btn) ausgenommen: ihr Hintergrund
   ist die Farbe selbst (Inline-Stil) und wäre mit „transparent !important" unsichtbar. */
.note-btn:not(.note-color-btn) {
  border-radius: var(--radius-btn) !important;
  border: 1px solid transparent !important;
  padding: 2px 6px !important;
  font-size: 0.8125rem !important;
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  transition: background 0.15s, color 0.15s !important;
}
.note-btn:not(.note-color-btn):hover, .note-btn:not(.note-color-btn):focus {
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: transparent !important;
}
/* Popover (Link, Bild) liegt auf --card: Hover dort auf --muted, sonst unsichtbar */
.note-popover .note-btn:not(.note-color-btn):not(.active):hover, .note-popover .note-btn:not(.note-color-btn):not(.active):focus { background: hsl(var(--muted)) !important; }
.note-btn.active:not(.note-color-btn), .note-btn.active:not(.note-color-btn):hover {
  background: hsl(var(--primary-strong)) !important;
  color: hsl(var(--primary-foreground)) !important;
}
.note-color-palette .note-color-btn { width: 1.375rem !important; height: 1.375rem !important; padding: 0 !important; margin: 2px !important; border: 1px solid hsl(var(--border)) !important; border-radius: .3rem !important; }
.note-color-palette .note-color-btn:hover, .note-color-palette .note-color-btn:focus-visible { outline: 2px solid hsl(var(--primary) / .6) !important; outline-offset: 1px; }
.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;
}

/* ---- Summernote im Dunkelmodus (Feedback 02.11.2026) — azs/rp/aurum gleich ----
   summernote-lite.min.css lädt NACH app.css (layout-shell.php) und setzt hochspezifische
   Selektoren und Inline-Stile: deshalb !important. Nur App-Token, damit Hell und Dunkel
   aus denselben Regeln folgen. Kurzformen mit var() meiden (background: <farbe> <verlauf>
   wird bei einem ungültigen Token zur Berechnungszeit „unset“) — Langformen verwenden.
   Dialoge hängen mit dialogsInBody im <body>: .note-modal-Regeln nicht unter .note-editor. */
.note-editor.note-frame,
.note-editor.note-frame .note-toolbar { color: hsl(var(--foreground)); }

/* Aufklappmenüs (Absatzformat, Farbe, Absatz, Tabelle): Einträge sind <a>, Summernote setzt #000 */
.note-dropdown-menu { background-color: hsl(var(--card)) !important; color: hsl(var(--foreground)); }
html[data-theme="dark"] .note-dropdown-menu { box-shadow: var(--extr-shadow-md) !important; }
a.note-dropdown-item, a.note-dropdown-item:hover, a.note-dropdown-item:focus { color: hsl(var(--foreground)) !important; }
.note-dropdown-item:focus-visible { background-color: hsl(var(--muted)) !important; outline: 2px solid hsl(var(--primary) / .5); outline-offset: -2px; }
.note-dropdown-menu.note-check a i { color: hsl(var(--primary-text)) !important; }

/* Farbpalette: Titel, Trenner, „Transparenz“/„Auf Standard zurücksetzen“/„Eigene Farbe …“
   (<button class="btn …">, kein .note-btn — erbten sonst #333 von der Leiste) */
.note-palette .note-palette-title { color: hsl(var(--muted-foreground)) !important; border-bottom-color: hsl(var(--border)) !important; font-size: .75rem !important; font-weight: 600; padding-bottom: 3px; margin: 4px 7px 2px !important; }
.note-palette .note-color-reset,
.note-palette .note-color-select { color: hsl(var(--foreground)) !important; background-color: transparent !important; border: 1px solid hsl(var(--border)) !important; border-radius: .375rem !important; font-size: .75rem !important; padding: 2px 6px !important; }
.note-palette .note-color-reset:hover, .note-palette .note-color-reset:focus-visible,
.note-palette .note-color-select:hover, .note-palette .note-color-select:focus-visible { background-color: hsl(var(--muted)) !important; }
html[data-theme="dark"] .note-color-palette .note-color-btn { border-color: hsl(var(--muted-foreground) / .45) !important; }
/* Raster der Standardpalette: 8 Felder je Reihe in Summernotes 160 px (8 × 18 px + 2 × 1 px Rand).
   Mit den größeren Orbit-Feldern brachen die Reihen nach 6 Feldern um und überdeckten sich. Die
   Helpdesk-Paletten (.note-color-fore/-back, 4 bzw. 5 Felder) behalten 1.375rem. Hintergrund- und
   Schriftfarbe ab 640 px nebeneinander; schmaler untereinander, sonst schneidet der Editorrahmen
   (overflow: hidden) die Schriftfarbe seitlich ganz ab. */
.note-color .note-dropdown-menu .note-palette .note-color-row { display: flex; height: auto !important; }
.note-color-all .note-color-palette .note-color-btn { width: 18px !important; height: 18px !important; margin: 1px !important; }
.note-color-all .note-dropdown-menu { min-width: 0 !important; }
@media (min-width: 640px) { .note-color-all .note-dropdown-menu { min-width: 352px !important; } }

/* Tabellenraster: statt weißer PNG-Kacheln Linien aus Token (Langform, siehe oben) */
.note-dimension-display { color: hsl(var(--muted-foreground)); font-size: .75rem; text-align: center; padding-top: 2px; }
.note-editor .note-toolbar .note-table .note-dimension-picker .note-dimension-picker-unhighlighted {
  background-color: hsl(var(--card)) !important;
  background-image: linear-gradient(to right, hsl(var(--border)) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--border)) 1px, transparent 1px) !important;
  background-size: 1em 1em !important;
  box-shadow: inset -1px -1px 0 hsl(var(--border));
}
.note-editor .note-toolbar .note-table .note-dimension-picker .note-dimension-picker-highlighted {
  background-color: hsl(var(--primary) / .22) !important;
  background-image: linear-gradient(to right, hsl(var(--primary) / .6) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--primary) / .6) 1px, transparent 1px) !important;
  background-size: 1em 1em !important;
  box-shadow: inset -1px -1px 0 hsl(var(--primary) / .6);
}

/* Popover (Link, Bild, Tabelle) — hängt im Editor */
.note-editor .note-popover { background-color: hsl(var(--card)) !important; border: 1px solid hsl(var(--border)) !important; border-radius: .5rem; box-shadow: var(--extr-shadow-md); color: hsl(var(--foreground)); }
.note-editor .note-popover .popover-content { color: hsl(var(--foreground)); }
.note-editor .note-popover .popover-content a { color: hsl(var(--primary-strong)) !important; }
.note-editor .note-popover.bottom .note-popover-arrow { border-bottom-color: hsl(var(--border)) !important; }
.note-editor .note-popover.bottom .note-popover-arrow::after { border-bottom-color: hsl(var(--card)) !important; }
.note-editor .note-popover.top .note-popover-arrow { border-top-color: hsl(var(--border)) !important; }
.note-editor .note-popover.top .note-popover-arrow::after { border-top-color: hsl(var(--card)) !important; }

/* Dialoge (Link einfügen) */
.note-modal .note-modal-content { background-color: hsl(var(--card)) !important; color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)) !important; border-radius: .75rem !important; box-shadow: var(--extr-shadow-lg) !important; }
.note-modal .note-modal-header { border: 0 !important; border-bottom: 1px solid hsl(var(--border)) !important; }
.note-modal .note-modal-title { color: hsl(var(--foreground)) !important; font-size: 1.05rem !important; font-weight: 600; }
.note-modal .close { color: hsl(var(--foreground)) !important; opacity: .7 !important; }
.note-modal .close:hover, .note-modal .close:focus-visible { opacity: 1 !important; }
.note-modal .note-form-label { color: hsl(var(--foreground)) !important; font-size: .875rem !important; font-weight: 500 !important; margin-bottom: .35rem !important; }
.note-modal .note-input { background-color: hsl(var(--card)) !important; color: hsl(var(--foreground)) !important; border: 1px solid hsl(var(--border)) !important; border-radius: .5rem !important; padding: .5rem .75rem !important; }
.note-modal .note-input:focus-visible { border-color: hsl(var(--primary)) !important; box-shadow: 0 0 0 3px hsl(var(--primary) / .2) !important; }
.note-modal .note-input::placeholder { color: hsl(var(--muted-foreground)) !important; }
.note-modal .checkbox label, .note-modal .note-modal-body label { color: hsl(var(--foreground)); }
.note-modal .note-help-block, .note-modal .text-muted { color: hsl(var(--muted-foreground)) !important; }
.note-modal .note-modal-footer { height: auto !important; padding: .75rem 1.25rem 1rem !important; display: flex; justify-content: flex-end; }
.note-modal .note-btn.note-btn-primary { background-color: hsl(var(--primary-strong)) !important; color: hsl(var(--primary-foreground)) !important; border: 1px solid transparent !important; padding: .45rem 1rem !important; border-radius: .5rem !important; font-weight: 600; }
.note-modal .note-btn.note-btn-primary:hover:not(.disabled):not([disabled]) { background-color: hsl(var(--primary-strong)) !important; filter: brightness(.93); }
.note-modal .note-btn.note-btn-primary.disabled, .note-modal .note-btn.note-btn-primary[disabled] { opacity: .5; }

/* Kurzinfo (Tooltip) invertiert wie die übrigen Kurzinfos */
.note-tooltip-content { background-color: hsl(var(--foreground)) !important; color: hsl(var(--background)) !important; border-radius: .375rem; font-size: .75rem !important; }
.note-tooltip.top .note-tooltip-arrow { border-top-color: hsl(var(--foreground)) !important; }
.note-tooltip.bottom .note-tooltip-arrow { border-bottom-color: hsl(var(--foreground)) !important; }

/* Platzhalter, Statuszeile, Größenleiste; nur dunkel: Auswahlrahmen am Bild, Ablagefläche */
.note-editor .note-placeholder { color: hsl(var(--muted-foreground)) !important; }
.note-editor.note-frame .note-statusbar .note-resizebar .note-icon-bar { border-top-color: hsl(var(--muted-foreground) / .6) !important; }
.note-editor.note-frame .note-status-output { color: hsl(var(--foreground)) !important; border-top-color: hsl(var(--border)) !important; }
html[data-theme="dark"] .note-handle .note-control-selection,
html[data-theme="dark"] .note-handle .note-control-selection .note-control-handle,
html[data-theme="dark"] .note-handle .note-control-selection .note-control-holder { border-color: hsl(var(--foreground)) !important; }
html[data-theme="dark"] .note-handle .note-control-selection .note-control-sizing { background-color: hsl(var(--foreground)) !important; border-color: hsl(var(--foreground)) !important; }
html[data-theme="dark"] .note-editor .note-dropzone { background-color: hsl(var(--card)) !important; color: hsl(var(--primary-text)) !important; }

/* Freie Farben im Inhalt (Standardpalette, Einfügen aus Word/Outlook), nur dunkel, in Editor und
   Anzeige (VBM: Beschreibung von Veranstaltung und Ort, .extr-rich) — E-Mail-Ausgaben laden app.css nicht. Bewusst nur genaue Muster: „#fff“ als Teilstring
   träfe #ffff00, „; color: #000“ träfe #0000ff. Gespeicherte style-Werte schreibt
   extr_sanitize_style() als „eigenschaft: wert; …“, der Editor als „color: rgb(…)“.
   Helle Schrift nur, wo die Fläche dunkel ist oder dunkel wird: Schwarz/Dunkelgrau → Vordergrund,
   ebenso jede eigene Schriftfarbe auf einer weißen oder gelben Fläche (die hier transparent bzw.
   dunkelgelb wird). Steht Schrift auf einer eigenen, NICHT umgefärbten Fläche (etwa Hervorhebung
   der Standardpalette über den Farbknopf: <font color="#000000" style="background-color: …">,
   „color: black; background: lime“ aus Word), bleibt sie, wie sie ist — die Fläche bleibt hell.
   :where() hält die Spezifität klein. Andere dunkle Farben (etwa #0000ff) bleiben, wie sie sind. */
html[data-theme="dark"] :is(.note-editable, .nd-article-body, .wd-prose, .extr-rich) :is(
  font[color="#000000" i], font[color="#000" i], font[color="black" i], font[color="#333333" i], font[color="#333" i],
  font[color="#424242" i], font[color="#636363" i],
  [style*="color: rgb(0, 0, 0)"], [style*="color: #000000" i], [style$="color: #000" i], [style*="color: #000;" i],
  [style*="color: black" i], [style*="color: windowtext" i], [style*="color: rgb(51, 51, 51)"], [style*="color: #333333" i],
  [style$="color: #333" i], [style*="color: #333;" i], [style*="color: rgb(66, 66, 66)"], [style*="color: rgb(99, 99, 99)"],
  :is(
    [style*="background-color: rgb(255, 255, 255)"], [style*="background-color: #ffffff" i], [style$="background-color: #fff" i],
    [style*="background-color: #fff;" i], [style*="background-color: white" i], [style*="background: rgb(255, 255, 255)"],
    [style*="background: #ffffff" i], [style$="background: #fff" i], [style*="background: #fff;" i], [style*="background: white" i],
    [bgcolor="#ffffff" i], [bgcolor="#fff" i], [bgcolor="white" i],
    [style*="background-color: rgb(255, 255, 0)"], [style*="background-color: #ffff00" i], [style*="background-color: yellow" i],
    [style*="background: yellow" i], [style*="background: #ffff00" i]
  ) :is(font[color], [style^="color" i], [style*=" color:" i], [style*=";color:" i])
):not(:where(
  :is([style*="background-color:" i], [style*="background:" i], [bgcolor]):not(
    [style*="background-color: rgb(255, 255, 255)"], [style*="background-color: #ffffff" i], [style$="background-color: #fff" i],
    [style*="background-color: #fff;" i], [style*="background-color: white" i], [style*="background: rgb(255, 255, 255)"],
    [style*="background: #ffffff" i], [style$="background: #fff" i], [style*="background: #fff;" i], [style*="background: white" i],
    [bgcolor="#ffffff" i], [bgcolor="#fff" i], [bgcolor="white" i],
    [style*="background-color: rgb(255, 255, 0)"], [style*="background-color: #ffff00" i], [style*="background-color: yellow" i],
    [style*="background: yellow" i], [style*="background: #ffff00" i],
    [style*="transparent" i], [style*="rgba(0, 0, 0, 0)"], [style*="background: none" i],
    .note-editable :is([style*="background-color: rgb(254, 226, 226)"], [style*="background-color: rgb(255, 237, 213)"],
      [style*="background-color: rgb(220, 252, 231)"], [style*="background-color: rgb(219, 234, 254)"], [style*="background-color: rgb(254, 240, 138)"])
  ),
  :is(.note-editable, .nd-article-body, .wd-prose, .extr-rich) :is([style*="background-color:" i], [style*="background:" i], [bgcolor]):not(
    [style*="background-color: rgb(255, 255, 255)"], [style*="background-color: #ffffff" i], [style$="background-color: #fff" i],
    [style*="background-color: #fff;" i], [style*="background-color: white" i], [style*="background: rgb(255, 255, 255)"],
    [style*="background: #ffffff" i], [style$="background: #fff" i], [style*="background: #fff;" i], [style*="background: white" i],
    [bgcolor="#ffffff" i], [bgcolor="#fff" i], [bgcolor="white" i],
    [style*="background-color: rgb(255, 255, 0)"], [style*="background-color: #ffff00" i], [style*="background-color: yellow" i],
    [style*="background: yellow" i], [style*="background: #ffff00" i],
    [style*="transparent" i], [style*="rgba(0, 0, 0, 0)"], [style*="background: none" i],
    .note-editable :is([style*="background-color: rgb(254, 226, 226)"], [style*="background-color: rgb(255, 237, 213)"],
      [style*="background-color: rgb(220, 252, 231)"], [style*="background-color: rgb(219, 234, 254)"], [style*="background-color: rgb(254, 240, 138)"])
  ) *
)) { color: hsl(var(--foreground)) !important; }
html[data-theme="dark"] :is(.note-editable, .nd-article-body, .wd-prose, .extr-rich) :is(
  [style*="background-color: rgb(255, 255, 0)"], [style*="background-color: #ffff00" i], [style*="background-color: yellow" i],
  [style*="background: yellow" i], [style*="background: #ffff00" i]
) { background-color: hsl(var(--hd-hl-yellow)) !important; color: hsl(var(--foreground)) !important; }
html[data-theme="dark"] :is(.note-editable, .nd-article-body, .wd-prose, .extr-rich) :is(
  [style*="background-color: rgb(255, 255, 255)"], [style*="background-color: #ffffff" i], [style$="background-color: #fff" i],
  [style*="background-color: #fff;" i], [style*="background-color: white" i], [style*="background: rgb(255, 255, 255)"],
  [style*="background: #ffffff" i], [style$="background: #fff" i], [style*="background: #fff;" i], [style*="background: white" i],
  [bgcolor="#ffffff" i], [bgcolor="#fff" i], [bgcolor="white" i]
) { background-color: transparent !important; color: hsl(var(--foreground)) !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.
     Redesign S9 (01 §3.25): Flex-Spalte, damit Kopfkarte bzw. Glas-Kopf + #extr-main nicht über 100dvh wachsen
     (sonst schneidet overflow:hidden die Eingabezeile ab). */
  height: 100vh;
  height: 100dvh;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}
.extr-main--chat > #extr-main {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  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;
  /* Überziehen am Verlaufsanfang nicht an die Seite weiterreichen — sonst löst ein
     Browser-Tab (Android-Chrome) sein eigenes Neuladen aus (vgl. ptrBlocked in app.js). */
  overscroll-behavior-y: contain;
}

/* 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-strong));
  color: hsl(var(--primary-foreground));
  border-radius: 1rem 1rem 0.25rem 1rem;
  padding: 0.625rem 1rem;
  min-width: 0;
  max-width: 100%;
  width: fit-content;
  overflow-wrap: anywhere;
  line-height: 1.5;
  font-size: 0.875rem;
}

/* Fremde Nachrichten-Blase */
.chat-bubble-other {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem 1rem 1rem 0.25rem;
  padding: 0.625rem 1rem;
  min-width: 0;
  max-width: 100%;
  width: fit-content;
  overflow-wrap: anywhere;
  line-height: 1.5;
  font-size: 0.875rem;
}

/* Spalte einer Nachricht (Zitat, Blase, Zeit, Reaktionen). Die Breitengrenze sitzt
   hier, nicht an der Blase: mit width:fit-content bezog sich max-width:75 % der Blase
   auf die eigene Inhaltsbreite, deshalb brachen kurze Wörter wie „Hallo“ mitten im
   Wort um (Feedback CHAT-04). */
.chat-msg-col { max-width: min(75%, 32rem); min-width: 0; }

/* Avatar Initialen */
.chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: hsl(var(--primary-soft));
  color: hsl(var(--primary-text));
  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(203 58% 15% / 0.97), hsl(201 60% 30% / 0.98)); /* feste Farbe: VBM-Verlauf, Weiß ≥ 7,5:1 */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.extr-pwa-overlay.hidden { display: none; }

.extr-pwa-card {
  width: 100%;
  max-width: 420px;
  background: hsl(var(--popover));
  border-radius: var(--radius-sheet);
  padding: 1.75rem;
  box-shadow: var(--extr-shadow-xl);
  /* 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-soft));
  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(var(--heading));
  margin: 0 0 0.5rem;
  text-align: center;
}
.extr-pwa-sub {
  color: hsl(var(--muted-foreground));
  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(var(--border));
  font-size: 0.9rem;
  line-height: 1.45;
  color: hsl(var(--foreground));
}
.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: hsl(var(--primary-strong));
  color: hsl(var(--primary-foreground));
  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: hsl(var(--primary-text));
}
.extr-pwa-note {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--primary-soft));
  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(var(--muted-foreground));
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.5rem;
}
.extr-pwa-dismiss:hover { color: hsl(var(--foreground)); 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-soft));
  display: flex;
  align-items: center;
  justify-content: center;
}
.extr-pwa-welcome-icon i { width: 2.25rem; height: 2.25rem; color: hsl(var(--primary-text)); }

/* ── 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;
  /* Status-Töne: durchscheinende Fläche, helle Schrift */
  --tone-ok-bg:           147 56% 42% / .14;
  --tone-ok-fg:           142 77% 73%;
  --tone-ok-border:       147 56% 42% / .4;
  --tone-warn-bg:         31 87% 59% / .16;
  --tone-warn-fg:         34 90% 73%;
  --tone-warn-border:     31 87% 59% / .4;
  --tone-bad-bg:          5 73% 63% / .14;
  --tone-bad-fg:          0 94% 82%;
  --tone-bad-border:      5 73% 63% / .4;
  --tone-info-bg:         214 70% 59% / .14;
  --tone-info-fg:         212 96% 78%;
  --tone-info-border:     214 70% 59% / .4;
  --tone-gold-fg:         43 96% 73%;
  --tone-violet-fg:       259 68% 82%;
  --primary:              201 55% 46%;   /* D2: Akzent als Fläche/Markierung (4,32:1 auf --card), Schrift nur über --primary-text */
  --primary-hsl:          hsl(201, 55%, 46%);
  --primary-foreground:   210 30% 9%;    /* dunkle Schrift auf der Primärfläche (UI-Audit DARK-02) */
  --primary-strong:       201 58% 56%;   /* Fläche unter dunkler Schrift, 6,36:1 mit --primary-foreground */
  --primary-emphasis:     201 55% 50%;   /* Hover der Fläche, 5,41:1 mit --primary-foreground */
  --primary-text:         200 65% 68%;   /* Hellblau, 8,28:1 auf --card */
  --primary-soft:         200 65% 68% / .16;
  --accent:               201 55% 46%;
  --background:           213 28% 8%;
  --background-hsl:       hsl(213, 28%, 8%);
  --foreground:           210 20% 92%;
  --heading:              0 0% 100%;
  --bodytext:             212 14% 79%;
  --card:                 213 24% 12%;
  --card-foreground:      210 20% 92%;
  --popover:              213 22% 15%;
  --surface:              213 22% 14%;
  --secondary:            213 30% 24%;
  --secondary-hsl:        hsl(213, 30%, 24%);
  --secondary-foreground: 0 0% 100%;
  --muted:                213 20% 16%;
  --muted-foreground:     212 10% 64%;
  --muted-bg:             0 0% 100% / .07;
  --border:               213 14% 22%;
  --input:                213 10% 30%;
  --ring:                 200 65% 68% / .5;
  --destructive:          350 75% 68%; /* ≥ 4,5:1 auf Karte und Muted (UI-Audit DARK-02) */
  --destructive-foreground: 210 30% 9%;
  --brand-ink:            207 30% 19%;
  --sidebar-bg:           213 24% 11%;
  --sidebar-border:       213 14% 24%;
  --extr-shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --extr-shadow-md: 0 0 2px 0 rgba(130, 160, 190, .18), 0 12px 24px -6px rgba(0, 0, 0, .2);
  --extr-shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
  --extr-shadow-xl: 0 1rem 3rem rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .10);
  --extr-glass: rgba(16, 26, 38, .72);
  --extr-glass-line: rgba(255, 255, 255, .10);
  --extr-glass-on: rgba(255, 255, 255, .13);
  --extr-glass-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 10px 30px rgba(0, 0, 0, .45);

  /* Tailwind-Token (--color-*) aus den HSL-Token ableiten (UI-Audit DARK-01). Primär, Akzent und Ring kommen aus
     --primary-strong (= heutiger Dunkelwert, 6,38:1 auf --card): text-primary, bg-primary/10, ring-primary bleiben
     lesbar; Text in Akzentfarbe lenkt R1 zusätzlich auf --primary-text (F6). */
  --color-primary:                 hsl(var(--primary-strong));
  --color-primary-foreground:      hsl(var(--primary-foreground));
  --color-accent:                  hsl(var(--primary-strong));
  --color-accent-foreground:       hsl(var(--primary-foreground));
  --color-background:              hsl(var(--background));
  --color-foreground:              hsl(var(--foreground));
  --color-card:                    hsl(var(--card));
  --color-card-foreground:         hsl(var(--card-foreground));
  --color-secondary:               hsl(var(--secondary));
  --color-secondary-foreground:    hsl(var(--secondary-foreground));
  --color-muted:                   hsl(var(--muted));
  --color-muted-foreground:        hsl(var(--muted-foreground));
  --color-border:                  hsl(var(--border));
  --color-input:                   hsl(var(--card));
  --color-ring:                    hsl(var(--primary-strong));
  --color-destructive:             hsl(var(--destructive));
  --color-destructive-foreground:  hsl(var(--destructive-foreground));
}

/* 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-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-soft)); }
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:#a5b4fc}
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)); }
/* Der Ring-Ersatz oben nutzt das Tailwind-Token, das im Dunkel-Scope nicht
   umgesetzt wird — hier nachziehen. */
html[data-theme="dark"] .ring-border { --tw-ring-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-bg)); border-radius: var(--radius-btn); }
.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: var(--radius-card); 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: var(--radius-card); }

/* ---- Empty-State (Helfer extr_empty_state) -------------------------------- */
/* Redesign S4 (01 §3.14, Demo .empty): Symbol ohne Kreis, gedämpft; Titel und CTA bleiben (Orbit-Plus). */
.extr-empty { text-align: center; padding: 1.875rem .5rem; }
.extr-empty-icon {
  height: 2.5rem; width: 2.5rem; margin: 0 auto .75rem;
  border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  background: transparent; color: hsl(var(--muted-foreground)); opacity: .45;
}
.extr-empty-icon svg, .extr-empty-icon i { width: 1.875rem; height: 1.875rem; }
.extr-empty-title { font-size: .9375rem; font-weight: 600; margin-bottom: .25rem; color: hsl(var(--heading)); }
.extr-empty-text { font-size: .84375rem; 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;
}

/* ---- Auswahlkästchen und Radios: Markenfarbe (UI-Audit BTN-03) -------------
   Vorher trugen 337 Stellen `accent-primary` im Markup und 132 nicht — die
   erschienen im Browser-Standardblau neben den grünen. Eine Regel löst das
   für alle; `accent-primary` im Markup ist damit überflüssig (schadet aber
   nicht, es setzt denselben Wert). */
input[type="checkbox"],
input[type="radio"] { accent-color: hsl(var(--primary-strong)); }

/* ---- A11y: sichtbarer Fokusring für Tastaturnutzer (Redesign Phase 3) ---- */
/* Redesign S4 (01 §3.28, Lücke G2): ohne border-radius – der ungeschichtete Umriss schlug jede Fokusregel der Bausteine
   und machte runde Symbolknöpfe beim Fokus eckig. Der Umriss folgt jetzt der Form des Elements (hell 4,81:1, dunkel 3,75:1). */
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;
}
/* Felder mit eigenem Ring (Rahmen + 3-px-Schatten unter :focus) – kein zweiter Umriss */
input.extr-input:focus-visible, select.extr-select:focus-visible, textarea.extr-textarea:focus-visible,
select.extr-filter-select:focus-visible, input.extr-filter-select:focus-visible, input.extr-sf-input:focus-visible, .extr-cmdk-head input:focus-visible { outline: none; }
/* Umriss in --brand-mint auf dem dunklen Navigationsgrund (≥ 5,12:1): Sidebar-Karte (seit S9 im Markenverlauf) und Glas-Kopf. */
.extr-sidebar :focus-visible, .extr-mhdr :focus-visible { outline-color: hsl(var(--brand-mint)); }

/* ---- 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-text));
  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,minmax(0,1fr))}}
@media(min-width:1024px){.sg-cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1280px){.sg-cards-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sg-mon-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:768px){.sg-mon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.sg-mon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sg-pl-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:768px){.sg-pl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.sg-pl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Playlist-Editor: Reihenfolge schmal, Bibliothek breit. minmax(0,…) statt
   fester Breite, damit lange Card-Namen die Spalte nicht aufblähen (truncate
   greift nur in einer Spalte mit min-width 0). align-items:start verhindert,
   dass die kurze Reihenfolge-Spalte auf Bibliothekshöhe gestreckt wird. */
.sg-ple-grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:1024px){.sg-ple-grid{grid-template-columns:minmax(0,20rem) minmax(0,1fr);align-items:start}}
@media(min-width:1440px){.sg-ple-grid{grid-template-columns:minmax(0,22rem) minmax(0,1fr)}}
/* Card-Bibliothek: drei Cards nebeneinander ab 640px. repeat(3,minmax(0,17rem))
   statt 1fr — sonst werden die Kacheln auf sehr breiten Monitoren übergroß.
   justify-content:start hält sie linksbündig. */
.sg-lib-grid{display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:640px){.sg-lib-grid{grid-template-columns:repeat(3,minmax(0,17rem));justify-content:start}}
.sg-2col{display:grid;gap:.75rem;grid-template-columns:1fr}
@media(min-width:640px){.sg-2col{grid-template-columns:1fr 1fr}}

/* ---- Wissen: Dokumentansicht — Reihenfolge auf schmalen Bildschirmen --------
   Auf dem Desktop stehen Zusammenfassung, Inhaltsverzeichnis, Aktionen und
   verwandte Inhalte gesammelt in der rechten Spalte. In der PWA (eine Spalte)
   sollen Zusammenfassung und Inhaltsverzeichnis ÜBER dem Artikeltext stehen,
   Aktionen und verwandte Inhalte darunter — deshalb drei eigene Rasterbereiche
   statt eines Sidebar-Blocks. Eigene Klassen, weil das vorgebaute tailwind.css
   weder grid-template-areas noch `order-*` in den nötigen Stufen kennt. */
.wd-doc-grid{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"sidetop" "main" "sidebottom"}
.wd-doc-main      {grid-area:main;min-width:0}
.wd-doc-side-top  {grid-area:sidetop;min-width:0}
.wd-doc-side-bot  {grid-area:sidebottom;min-width:0}
/* Wrapper beider Nebenspalten-Teile: in der PWA unsichtbar, die Teile ordnen sich selbst ins Raster */
.wd-doc-side      {display:contents}
@media(min-width:1024px){
  .wd-doc-grid{grid-template-columns:minmax(0,3fr) minmax(0,1fr);
    grid-template-areas:"main side"}
  /* Die GANZE Nebenspalte klebt oben als ein Block. Früher klebte nur der obere
     Teil (Zusammenfassung + Inhalt) in einer eigenen Rasterzeile: die über beide
     Zeilen gespannte Artikelspalte riss eine große Lücke vor „Aktionen“ auf, und
     beim Scrollen schob sich die klebende Karte über Aktionen und verwandte
     Inhalte. Auf Fensterhöhe begrenzt und bei Bedarf INNEN scrollbar, damit auch
     bei langem Inhaltsverzeichnis der untere Teil erreichbar bleibt. */
  .wd-doc-side{
    grid-area:side;
    display:flex;flex-direction:column;gap:1rem;
    min-width:0;
    position:sticky;
    top:calc(var(--extr-sticky-top, 0px) + 1rem);
    align-self:start;
    max-height:calc(100vh - var(--extr-sticky-top, 0px) - 2rem);
    overflow-y:auto;
    overscroll-behavior:contain;
    /* eigene Compositing-Ebene: verhindert Restbilder beim Scrollen */
    transform:translateZ(0);
    /* Der Scroll-Schatten darf die abgerundeten Karten nicht abschneiden. */
    padding-right:.25rem;margin-right:-.25rem;
  }
}

/* ---- Dashboard: Schichtkarte überlappt die Hero-Kante ---------------------
   Nur die Schichtkarte schiebt sich unter die abgerundete Unterkante des
   Hero-Headers — das sieht dort gewollt aus. Früher trug der ganze
   .extr-dashboard-body diesen negativen Abstand; ohne Planzuweisung entfällt
   die Karte, und der nächste Block (Schnellaktionen) rutschte unter den Header.
   Der Nachbar-Selektor greift nur, solange der Favoriten-Block ausgeblendet ist:
   wird er sichtbar, steht er ganz oben und die Karte darf nicht mehr ziehen. */
@media (max-width: 1023px) {
  /* ~ statt +: zwischen beiden liegt das (mobil ausgeblendete) Desktop-Raster. */
  #dash-personal.hidden ~ .dash-shift-lead { margin-top: -2rem; }
}

/* ---- Signage: Bildschirm-Kacheln & Segment-Schalter -----------------------
   Eigene Klassen, weil die vorgebaute tailwind.css `focus-visible:ring-primary`
   und `focus-visible:outline-none` nicht enthält — ein Fokusring über Utilities
   wäre unsichtbar. Farben über Design-Token, damit der Dark Mode ohne
   Zusatzregel greift. */
.sg-mon-tile{display:block;width:100%;text-align:left;cursor:pointer}
.sg-mon-tile:hover{border-color:hsl(var(--primary) / .35)}
.sg-mon-tile:focus-visible{outline:2px solid hsl(var(--primary));outline-offset:2px}

.sg-seg{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem;border-radius:.75rem;
  background:hsl(var(--muted) / .6);max-width:100%;overflow-x:auto;scrollbar-width:none}
.sg-seg::-webkit-scrollbar{display:none}
.sg-seg-btn{flex:0 0 auto;padding:.35rem .85rem;border-radius:.5rem;border:0;background:transparent;
  font-size:.875rem;font-weight:500;color:hsl(var(--muted-foreground));cursor:pointer;white-space:nowrap}
.sg-seg-btn:hover{color:hsl(var(--foreground))}
.sg-seg-btn.is-active{background:hsl(var(--card));color:hsl(var(--foreground));
  box-shadow:0 1px 2px 0 rgb(0 0 0 / .05)}

/* ---- Signage: Zeitplan-Editor (Tagesleiste + Zeilen) -----------------------
   Löst die alte flex-wrap-Zeile (.sg-slot-row) ab. Eigene Klassen, weil die
   vorgebaute tailwind.css weder grid-template-areas noch die benötigten
   responsiven Varianten enthält (CLAUDE-UI §2.1).
   Die Balkenfarben stehen bewusst als feste Hex-Werte hier — gleiche Konvention
   wie .shift-st-* weiter unten: Pastellfläche + dunkle Schrift ist in beiden
   Themes lesbar, deshalb gibt es (wie dort) keinen data-theme="dark"-Zweig. */

/* Kopfzeile ---------------------------------------------------------------- */
.sg-sched-head{display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.sg-sched-head-act{display:flex;align-items:center;gap:.85rem}

/* Tagesleiste (24 h) ------------------------------------------------------- */
.sg-sched-bar{position:relative;padding-top:1rem;margin-bottom:.15rem}
.sg-sched-track{position:relative;height:2.25rem;overflow:hidden;
  border:1px solid hsl(var(--border));border-radius:.6rem;background:hsl(var(--muted))}
.sg-sched-seg{position:absolute;top:0;bottom:0;display:flex;align-items:center;
  padding:0 .35rem;overflow:hidden;white-space:nowrap;cursor:pointer;
  border-left:1px solid rgba(255,255,255,.6);
  background:var(--sg-c,hsl(var(--muted)));color:var(--sg-cs,hsl(var(--muted-foreground)));
  font-size:.66rem;font-weight:600;line-height:1}
.sg-sched-seg:first-child{border-left:0}
.sg-sched-seg:hover{filter:brightness(.95)}
.sg-sched-seg-lbl{overflow:hidden;text-overflow:ellipsis}
/* Lücke = Standard-Playlist: schraffiert, nicht anklickbar */
.sg-sched-seg.is-default{cursor:default;color:hsl(var(--muted-foreground));
  background:repeating-linear-gradient(135deg,
    hsl(var(--muted)) 0 6px, hsl(var(--border)) 6px 7px)}
.sg-sched-seg.is-default:hover{filter:none}
/* 3-Stunden-Raster über den Segmenten */
.sg-sched-ticks{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to right,
    transparent 0, transparent calc(100% / 8 - 1px),
    hsl(var(--foreground) / .11) calc(100% / 8 - 1px), hsl(var(--foreground) / .11) calc(100% / 8))}
/* „jetzt"-Marker */
.sg-sched-now{position:absolute;top:1rem;height:2.25rem;width:0;z-index:3;
  border-left:2px solid hsl(var(--destructive));pointer-events:none}
.sg-sched-now-lbl{position:absolute;bottom:100%;left:0;transform:translateX(-50%);
  margin-bottom:.15rem;padding:.05rem .28rem;border-radius:.25rem;
  background:hsl(var(--destructive));color:hsl(var(--destructive-foreground));
  font-size:.6rem;font-weight:700;line-height:1.35;white-space:nowrap}
.sg-sched-now.is-start .sg-sched-now-lbl{transform:none}
.sg-sched-now.is-end   .sg-sched-now-lbl{transform:translateX(-100%)}
/* Stundenachse */
.sg-sched-axis{position:relative;height:.95rem;margin-bottom:.55rem}
.sg-sched-axis span{position:absolute;top:0;transform:translateX(-50%);
  font-size:.6rem;line-height:1;color:hsl(var(--muted-foreground));
  font-variant-numeric:tabular-nums}
.sg-sched-axis span:first-child{transform:none}
.sg-sched-axis span:last-child{transform:translateX(-100%)}

/* Zeilen-Editor ------------------------------------------------------------ */
.sg-sched-rows{display:flex;flex-direction:column;gap:.5rem}
.sg-sched-row{display:grid;align-items:end;gap:.35rem .5rem;padding:.55rem .6rem;
  border:1px solid hsl(var(--border));border-radius:.75rem;background:hsl(var(--card));
  grid-template-columns:1fr 1fr 2rem;
  grid-template-areas:"from to act" "pl pl pl" "msg msg msg"}
@media(min-width:640px){
  .sg-sched-row{grid-template-columns:7.25rem 7.25rem minmax(0,1fr) 2rem;
    grid-template-areas:"from to pl act" "msg msg msg msg"}
}
.sg-sched-row.is-live {border-color:hsl(var(--primary) / .45);background:hsl(var(--primary) / .05)}
.sg-sched-row.is-error{border-color:hsl(var(--destructive) / .5);background:hsl(var(--destructive) / .05)}
.sg-sched-row.is-flash{animation:sgSchedFlash 1s ease-out 1}
@keyframes sgSchedFlash{0%{box-shadow:0 0 0 3px hsl(var(--primary) / .35)}100%{box-shadow:0 0 0 3px hsl(var(--primary) / 0)}}
.sg-sched-f-from{grid-area:from}
.sg-sched-f-to  {grid-area:to}
.sg-sched-f-pl  {grid-area:pl;min-width:0}
.sg-sched-f-act {grid-area:act;display:flex;align-items:center;justify-content:flex-end}
.sg-sched-msgs  {grid-area:msg;display:flex;flex-direction:column;gap:.15rem}
.sg-sched-msgs:empty{display:none}
.sg-sched-lbl{display:flex;align-items:center;justify-content:space-between;gap:.35rem;
  margin-bottom:.22rem;font-size:.66rem;font-weight:500;line-height:1;
  color:hsl(var(--muted-foreground))}
.sg-sched-lbl-txt{display:inline-flex;align-items:center;gap:.3rem;min-width:0}
.sg-sched-swatch{flex:0 0 auto;width:.6rem;height:.6rem;border-radius:.15rem;
  background:var(--sg-c,hsl(var(--muted)))}
.sg-sched-inp{width:100%;min-width:0;height:2.25rem;padding:0 .5rem;
  font-size:.875rem;color:hsl(var(--foreground));background:hsl(var(--card));
  border:1px solid hsl(var(--border));border-radius:.5rem}
.sg-sched-inp:focus{outline:none;border-color:var(--primary-hsl);
  box-shadow:0 0 0 3px hsl(var(--primary) / .18)}
.sg-sched-inp.is-bad{border-color:hsl(var(--destructive));
  box-shadow:0 0 0 3px hsl(var(--destructive) / .14)}
.sg-sched-del{display:flex;align-items:center;justify-content:center;
  height:2.25rem;width:2rem;border:0;border-radius:.5rem;background:transparent;
  color:hsl(var(--muted-foreground));cursor:pointer}
.sg-sched-del:hover{background:hsl(var(--destructive) / .12);color:hsl(var(--destructive))}
.sg-sched-msg{display:flex;align-items:flex-start;gap:.3rem;font-size:.68rem;line-height:1.3}
.sg-sched-msg.is-err {color:hsl(var(--destructive))}
.sg-sched-msg.is-warn{color:#b45309}      /* amber-700, wie .shift-st-*-Konvention */
.sg-sched-live{display:inline-flex;align-items:center;gap:.25rem;flex:0 0 auto;
  padding:.08rem .4rem;border-radius:9999px;
  font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  background:hsl(var(--primary-soft));color:hsl(var(--primary-text))}   /* NICHT hsl(var(--primary-hsl)) */
.sg-sched-live::before{content:"";width:.35rem;height:.35rem;border-radius:9999px;
  background:var(--primary-hsl)}
.sg-sched-empty{padding:.8rem;border:1px dashed hsl(var(--border));border-radius:.75rem;
  font-size:.75rem;line-height:1.4;color:hsl(var(--muted-foreground));text-align:center}
.sg-sched-foot{display:flex;align-items:flex-start;justify-content:space-between;
  gap:.75rem;flex-wrap:wrap;margin-top:.6rem}
.sg-sched-hint{margin:0;font-size:.68rem;line-height:1.4;color:hsl(var(--muted-foreground))}

/* Balkenpalette: deterministisch aus playlist_id (id % 8), siehe sgSchedColor().
   Fläche = Tailwind-*-100/200-Niveau, Schrift = *-800 → in Light wie Dark lesbar. */
.sg-sched-c0{--sg-c:#dbeafe;--sg-cs:#1e40af}  /* blau    */
.sg-sched-c1{--sg-c:#d1fae5;--sg-cs:#065f46}  /* emerald */
.sg-sched-c2{--sg-c:#fef3c7;--sg-cs:#92400e}  /* amber   */
.sg-sched-c3{--sg-c:#ede9fe;--sg-cs:#6d28d9}  /* violett */
.sg-sched-c4{--sg-c:#ffe4e6;--sg-cs:#9f1239}  /* rosé    */
.sg-sched-c5{--sg-c:#ccfbf1;--sg-cs:#115e59}  /* türkis  */
.sg-sched-c6{--sg-c:#e0e7ff;--sg-cs:#4338ca}  /* indigo  */
.sg-sched-c7{--sg-c:#ffedd5;--sg-cs:#9a3412}  /* orange  */

/* ---- Signage: Icon-Auswahl im Card-Editor ---------------------------------- */
.sg-ico-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.25rem;
  max-height:11rem;overflow-y:auto;padding:.25rem;border:1px solid hsl(var(--border));border-radius:.6rem}
.sg-ico-btn{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;
  border-radius:.4rem;border:1px solid transparent;color:hsl(var(--foreground));background:transparent;cursor:pointer}
.sg-ico-btn:hover{background:hsl(var(--muted))}
/* --primary-hsl ist bereits eine fertige hsl()-Funktion — hsl(var(--primary-hsl))
   ergäbe hsl(hsl(…)) und fiele ersatzlos aus. */
.sg-ico-btn.is-active{border-color:hsl(var(--primary));background:hsl(var(--primary-soft));color:hsl(var(--primary-text))}
.sg-ico-grp{grid-column:1/-1;font-size:.65rem;text-transform:uppercase;letter-spacing:.04em;
  color:hsl(var(--muted-foreground));padding:.35rem .15rem .1rem}

/* ---- Signage: Card-Vorschauflächen ----------------------------------------
   `bg-slate-900` fehlt im vorgebauten tailwind.css (nur bg-slate-900/55 ist
   kompiliert) — die Letterbox hinter den Thumbnails war deshalb transparent.
   Eigene Klasse statt Utility. */
.sg-thumb{background:#0f172a}

/* ---- Signage: Playlist-Reihenfolge (kompakte, sortierbare Liste) ----------- */
.sg-items-list{display:flex;flex-direction:column;gap:.5rem}
.sg-item-row{display:flex;align-items:center;gap:.5rem;background:hsl(var(--card));
  border:1px solid hsl(var(--border));border-radius:.75rem;padding:.5rem;
  -webkit-user-select:none;user-select:none}
.sg-item-grip{display:flex;align-items:center;justify-content:center;
  width:1.25rem;flex:0 0 1.25rem;align-self:stretch;border-radius:.3rem;border:0;
  color:hsl(var(--muted-foreground));cursor:grab;touch-action:none;background:transparent}
.sg-item-grip:hover{background:hsl(var(--muted))}
.sg-item-grip:focus-visible{outline:2px solid hsl(var(--primary));outline-offset:1px}
.sg-item-row.is-dragging{position:relative;z-index:30;cursor:grabbing;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.38);border-color:hsl(var(--primary))}
.sg-item-row.is-dragging .sg-item-grip{cursor:grabbing}
/* Platzhalter, der beim Ziehen die Ziellücke zeigt. */
.sg-item-ph{border:2px dashed hsl(var(--primary) / .5);border-radius:.75rem;
  background:hsl(var(--primary) / .06)}
/* Thumbnail-Box mit fester Höhe: der Renderer skaliert die Card hinein und
   letterboxt selbst (Math.min(cw/w, ch/h) in signage-render.js). */
.sg-item-th{position:relative;flex:0 0 auto;border-radius:.4rem;overflow:hidden;background:#0f172a}
.sg-item-th.is-land{width:5.25rem;height:2.95rem}
.sg-item-th.is-port{width:2.15rem;height:3.75rem}
.sg-item-idx{position:absolute;left:0;top:0;z-index:2;
  font-size:.6rem;font-weight:700;line-height:1;padding:.15rem .25rem;
  border-bottom-right-radius:.3rem;background:rgba(0,0,0,.55);color:#fff}
/* Bibliothekskachel: `hover:border-primary` fehlt im Build (nur /50 ist da). */
.sg-lib-tile:hover{border-color:hsl(var(--primary) / .5)}

/* ---- Signage: Meta-Zeilen der Card-Kacheln --------------------------------
   Eigene Klasse statt Utilities: Schriftgrad, Icon-Größe und Zeilenabstand in
   einem — und der ungelayerte Reset p{margin:0} greift hier sonst. */
.sg-card-meta{display:flex;align-items:center;gap:.3rem;min-width:0;
  margin-top:.25rem;font-size:11px;line-height:1.35;color:hsl(var(--muted-foreground))}
.sg-card-meta svg{height:.75rem;width:.75rem;flex:0 0 auto}
.sg-card-meta-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-card-dot{opacity:.5;flex:0 0 auto}

/* ---- Signage: Fanglinien beim Ziehen im Card-Editor ------------------------
   Feste Farben statt Design-Token: Die Linien liegen auf der Bühne, also über
   fremder Grafik — sie müssen sich gegen jeden Hintergrund behaupten (der weiße
   Halo macht das auf hellen wie dunklen Cards). */
.sg-guide{position:absolute;display:none;pointer-events:none;z-index:5;
  background:#f43f5e;box-shadow:0 0 0 1px rgba(255,255,255,.45)}
.sg-guide.is-on{display:block}
.sg-guide-v{top:0;height:100%;width:1px}
.sg-guide-h{left:0;width:100%;height:1px}

/* ---- Signage: Playlist-Kacheln (Übersicht) --------------------------------
   Die ganze Kachel ist klickbar — nicht über ein <a> um die Aktionsknöpfe herum
   (verschachtelte Klickziele), sondern über ein Pseudo-Element auf dem Titel-
   Link. Die Aktionen liegen per z-index darüber und bleiben erreichbar. */
.sg-pl-card{position:relative;display:flex;flex-direction:column;gap:.75rem}
.sg-pl-title{display:block;min-width:0;font-weight:600;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-pl-title::after{content:'';position:absolute;inset:0;border-radius:1rem;z-index:0}
.sg-pl-card:hover .sg-pl-title{color:hsl(var(--primary-text))}
.sg-pl-actions{position:relative;z-index:1;display:flex;align-items:center;gap:.25rem;flex:0 0 auto}
.sg-pl-desc{margin:.15rem 0 0;font-size:.875rem;color:hsl(var(--muted-foreground));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sg-pl-meta{display:flex;flex-direction:column;gap:.35rem;margin-top:auto;
  padding-top:.75rem;border-top:1px solid hsl(var(--border))}
.sg-pl-meta-row{margin:0;display:flex;align-items:center;gap:.5rem;min-width:0;
  font-size:.75rem;line-height:1.3;color:hsl(var(--muted-foreground))}
.sg-pl-meta-row > i, .sg-pl-meta-row > svg{flex:0 0 auto}
.sg-pl-meta-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Warnton (leere Playlist) — eigene Klasse, weil ein Utility gegen die
   ungelayerte .sg-pl-meta-row verlöre. */
.sg-pl-meta-row.is-warn{color:#b45309}
html[data-theme="dark"] .sg-pl-meta-row.is-warn{color:#fbbf24}
/* „läuft"-Pille. NICHT hsl(var(--primary-hsl)) — das ergäbe hsl(hsl(…)). */
.sg-pl-live{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .45rem;
  border-radius:9999px;font-size:.68rem;font-weight:600;flex:0 0 auto;
  background:hsl(var(--primary-soft));color:hsl(var(--primary-text))}
.sg-pl-dot{width:.4rem;height:.4rem;border-radius:9999px;background:hsl(var(--primary));flex:0 0 auto}
/* Feldfehler in den Signage-Modalen (kein Toast-Only) */
.sg-field-err{border-color:hsl(var(--destructive))}
.sg-field-msg{margin:.3rem 0 0;font-size:.75rem;color:hsl(var(--destructive))}

/* ---- Signage: System-Cards (fest eingebaut, Inhalt aus „Ereignisse") --------
   Kennzeichen „System" an Kacheln und im Kopf der Vorschau, dazu die Vorschauseite
   mit Bühne (Hoch/Quer) und Seitenleiste. Die Card selbst zeichnet der Renderer
   (assets/js/signage-render.js) mit festen Farben — sie läuft auf dem Kiosk ohne
   dieses Stylesheet. */
.sg-sys-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .5rem;border-radius:9999px;
  font-size:.68rem;font-weight:600;line-height:1.4;flex:0 0 auto;white-space:nowrap;
  background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.sg-sys-badge svg{height:.7rem;width:.7rem;flex:0 0 auto}
.sg-sys-grid{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){.sg-sys-grid{grid-template-columns:minmax(0,1fr) minmax(0,22rem);align-items:start}}
.sg-sys-preview{display:flex;align-items:center;justify-content:center;padding:1rem;border-radius:1rem;background:#0f172a}
.sg-sys-stage{position:relative;width:100%;border-radius:.5rem;overflow:hidden;background:#0f172a}
.sg-sys-stage.is-land{aspect-ratio:16/9}
.sg-sys-stage.is-port{width:auto;height:min(72vh,48rem);aspect-ratio:9/16}
.sg-sys-steps{display:flex;flex-direction:column;gap:.6rem;margin:0;padding:0;list-style:none}
.sg-sys-steps li{display:flex;gap:.6rem;align-items:flex-start;font-size:.875rem;line-height:1.45}
.sg-sys-steps svg{height:1rem;width:1rem;flex:0 0 auto;margin-top:.15rem;color:hsl(var(--primary-text))}
.sg-sys-mon{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem 0;font-size:.875rem}
.sg-sys-mon-meta{display:inline-flex;align-items:center;gap:.3rem;flex:0 0 auto;font-size:.75rem;color:hsl(var(--muted-foreground))}
.sg-sys-mon-meta svg{height:.8rem;width:.8rem}
.sg-sys-warn{color:#b45309}
html[data-theme="dark"] .sg-sys-warn{color:#fbbf24}

/* ---- 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-mittel       { background:#ffedd5; color:#9a3412; border-color:#fdba74; } /* Mittelschicht: orange (2026-09-21) */
.shift-st-spaet        { background:#ffffff; color:#334155; border-color:#94a3b8; } /* Spätschicht: weiß */
.shift-st-nacht        { background:#1e293b; color:#e2e8f0; border-color:#0f172a; } /* Nachtschicht: nachtblau (2026-09-21) */
.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-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 (Depot/Intermodal), 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; }
/* Eingereichter, noch nicht genehmigter Urlaub im Raster: gleiche Farbe wie genehmigt, gestrichelt (Feedback PLAN-07) */
.shift-abs-pending { border-style: dashed; opacity: .8; }
/* Summenzeile „Anwesend“ (Feedback PLAN-10) — klebt im scrollenden Gesamtplan am unteren Rand */
.shift-sum-row td { background: #f1f5f9; border-top: 2px solid hsl(var(--border)); }
.shift-gesamt-scroll tfoot td { position: sticky; bottom: 0; z-index: 20; }
.shift-gesamt-scroll tfoot td:first-child { z-index: 30; }
.shift-cell-time { position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
  font-size:8px; line-height:1; white-space:nowrap; opacity:.75; }

/* Mein Profil → „Kontakte aufs Handy“: QR-Code links, Anleitung rechts (vorher <style> im Partial).
   Feste Breite für die QR-Spalte: mit „auto“ dehnte die Bildunterschrift die Spalte und drückte die
   Anleitung auf wenige Zeichen zusammen. */
.cd-cols { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; align-items:start; }
@media (min-width:1024px) { .cd-cols { grid-template-columns:12.5rem minmax(0,1fr); gap:1.5rem; } }

/* ---- Schichtarten: Visualisierungshilfen (2026-09-21) ---------------------
   Kennbuchstabe (F/M/S/N) neben dem Symbol — Farbe allein trägt die Schichtart nicht
   (Farbfehlsichtigkeit, Ausdruck). */
.shift-code { font-size:10px; line-height:1; font-weight:800; letter-spacing:.02em; margin-left:2px; }
/* Zeitband: je Schichtart eine Spur über 24 Stunden — zeigt in der Planübersicht und in der
   Legende, wann die Schicht liegt (Nachtschicht läuft über Mitternacht: zwei Segmente). */
.shift-band { display:grid; gap:.3rem; }
.shift-band-row { display:grid; grid-template-columns:3.4rem minmax(0,1fr) 5.4rem; align-items:center; gap:.5rem; font-size:.75rem; }
.shift-band-label { display:inline-flex; align-items:center; gap:.3rem; font-weight:600; white-space:nowrap; }
.shift-band-label svg, .shift-band-label i { width:.8rem; height:.8rem; flex:0 0 auto; }
.shift-band-track { position:relative; height:.7rem; border-radius:9999px; background:hsl(var(--muted)); overflow:hidden;
  background-image:linear-gradient(to right, hsl(var(--border)) 1px, transparent 1px); background-size:25% 100%; }
.shift-band-seg { position:absolute; top:0; bottom:0; border:1px solid; border-radius:9999px; }
.shift-band-time { text-align:right; white-space:nowrap; color:hsl(var(--muted-foreground)); font-variant-numeric:tabular-nums; }
.shift-band-time.is-missing { font-style:italic; opacity:.7; }
.shift-band-scale { display:grid; grid-template-columns:3.4rem minmax(0,1fr) 5.4rem; gap:.5rem; font-size:.625rem; color:hsl(var(--muted-foreground)); }
.shift-band-scale > div { display:flex; justify-content:space-between; }
/* Wochenansicht: geräumige Zellen mit Symbol, Kennbuchstabe und Uhrzeit */
.shift-week-cell { min-height:3.6rem; height:auto; flex-direction:column; gap:.15rem; padding:.3rem .2rem; }
.shift-week-cell .shift-week-time { font-size:.6875rem; line-height:1.1; font-variant-numeric:tabular-nums; white-space:nowrap; opacity:.85; }
.shift-week-cell .shift-week-label { font-size:.6875rem; line-height:1.1; font-weight:600; white-space:nowrap; }
/* Zuständigkeiten unter dem Namen in den Plänen */
.shift-resp { font-size:.6875rem; line-height:1.2; color:hsl(var(--muted-foreground)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Dienstplan-Ansicht „Farben" (Einstellungen → Dienstplan-Ansicht, 2026-10-07) ---------
   Ohne Symbole: die Zelle trägt nur die Farbe des Status, die Legende erklärt sie. Schalter ist
   die Klasse .shift-view-colors auf #extr-main (app.js, aus der Marke extr_shift_view_marker());
   die Farben kommen als --shift-c-<status>-bg/-fg/-bd aus extr_shift_view_css() im Seitenkopf —
   hier stehen die Standardwerte (extr_shift_view_color_defaults(), Wächter: Test
   schichten-ansicht-farben.php). Schlüsseldienst/Bereitschaft erscheinen als Kürzel SD/BD
   (<b> neben dem Symbol in .shift-flag und .shift-mark) statt als Symbol. */
:root {
  --shift-c-frueh-bg:#8db4e8; --shift-c-frueh-fg:#0f172a; --shift-c-frueh-bd:#6e8db9;
  --shift-c-mittel-bg:#f2b47e; --shift-c-mittel-fg:#0f172a; --shift-c-mittel-bd:#b98d69;
  --shift-c-spaet-bg:#a3adbd; --shift-c-spaet-fg:#0f172a; --shift-c-spaet-bd:#7e8898;
  --shift-c-nacht-bg:#5d6494; --shift-c-nacht-fg:#ffffff; --shift-c-nacht-bd:#4a517a;
  --shift-c-frei-bg:#f0dd82; --shift-c-frei-fg:#0f172a; --shift-c-frei-bd:#b8ac6c;
  --shift-c-urlaub-bg:#9ad4a3; --shift-c-urlaub-fg:#0f172a; --shift-c-urlaub-bd:#77a585;
  --shift-c-krank-bg:#ec9c9c; --shift-c-krank-fg:#0f172a; --shift-c-krank-bd:#b57b80;
  --shift-c-schule-bg:#c0b0ea; --shift-c-schule-fg:#0f172a; --shift-c-schule-bd:#948aba;
  --shift-c-dienstreise-bg:#a9b4e6; --shift-c-dienstreise-fg:#0f172a; --shift-c-dienstreise-bd:#838db7;
  --shift-c-arbeitstag-bg:#8ed0e6; --shift-c-arbeitstag-fg:#0f172a; --shift-c-arbeitstag-bd:#6ea2b7;
  --shift-c-sonntag-bg:#e2e8f0; --shift-c-sonntag-fg:#0f172a; --shift-c-sonntag-bd:#adb4bf;
  --shift-c-termin-bg:#cfb3ea; --shift-c-termin-fg:#0f172a; --shift-c-termin-bd:#9f8cba;
}
.shift-st-termin { background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe; } /* Termin (Abwesenheit), wie bg-violet-50/text-violet-700/border-violet-200 */
.shift-view-colors [class*="shift-st-"] i, .shift-view-colors [class*="shift-st-"] svg,
.shift-view-colors [class*="shift-ak-"] i, .shift-view-colors [class*="shift-ak-"] svg,
.shift-view-colors .shift-mark i, .shift-view-colors .shift-mark svg { display:none; }
.shift-view-colors .shift-st-frueh { background:var(--shift-c-frueh-bg); color:var(--shift-c-frueh-fg); border-color:var(--shift-c-frueh-bd); }
.shift-view-colors .shift-st-mittel { background:var(--shift-c-mittel-bg); color:var(--shift-c-mittel-fg); border-color:var(--shift-c-mittel-bd); }
.shift-view-colors .shift-st-spaet { background:var(--shift-c-spaet-bg); color:var(--shift-c-spaet-fg); border-color:var(--shift-c-spaet-bd); }
.shift-view-colors .shift-st-nacht { background:var(--shift-c-nacht-bg); color:var(--shift-c-nacht-fg); border-color:var(--shift-c-nacht-bd); }
.shift-view-colors .shift-st-frei { background:var(--shift-c-frei-bg); color:var(--shift-c-frei-fg); border-color:var(--shift-c-frei-bd); }
.shift-view-colors .shift-st-urlaub, .shift-view-colors .shift-ak-urlaub { background:var(--shift-c-urlaub-bg); color:var(--shift-c-urlaub-fg); border-color:var(--shift-c-urlaub-bd); }
.shift-view-colors .shift-st-krank, .shift-view-colors .shift-ak-krankheit { background:var(--shift-c-krank-bg); color:var(--shift-c-krank-fg); border-color:var(--shift-c-krank-bd); }
.shift-view-colors .shift-st-schule { background:var(--shift-c-schule-bg); color:var(--shift-c-schule-fg); border-color:var(--shift-c-schule-bd); }
.shift-view-colors .shift-st-dienstreise { background:var(--shift-c-dienstreise-bg); color:var(--shift-c-dienstreise-fg); border-color:var(--shift-c-dienstreise-bd); }
.shift-view-colors .shift-st-arbeitstag { background:var(--shift-c-arbeitstag-bg); color:var(--shift-c-arbeitstag-fg); border-color:var(--shift-c-arbeitstag-bd); }
.shift-view-colors .shift-st-sonntag { background:var(--shift-c-sonntag-bg); color:var(--shift-c-sonntag-fg); border-color:var(--shift-c-sonntag-bd); }
.shift-view-colors .shift-st-termin, .shift-view-colors .shift-ak-termin { background:var(--shift-c-termin-bg); color:var(--shift-c-termin-fg); border-color:var(--shift-c-termin-bd); }
.shift-flag b, .shift-mark b { display:none; font-size:8px; line-height:1; font-weight:800; letter-spacing:.02em; }
.shift-view-colors .shift-flag b, .shift-view-colors .shift-mark b { display:inline; }
.shift-view-colors .shift-badge { background:rgba(255,255,255,.92); color:#0f172a; } /* Einsatz-Kürzel auch auf dunkler Fläche lesbar */
.shift-view-colors .shift-abs-pending { opacity:.7; }
/* ---- Legende der Plan-Raster (Plan-Editor, Gesamtplan, Wochenplan) ---------------------------
   Desktop (ab 1024 px): Leiste, die am unteren Fensterrand klebt und sich per Pfeil einklappen
   lässt (Zustand je Gerät in localStorage, app.js: shiftLegendInit). app.js bemisst dazu die Höhe
   des Rasters (data-shift-legend-fit = Id des Scrollbereichs) so, dass Raster und Legende
   zusammen in den Bildschirm passen — die Leiste überdeckt keine Zeile, und die Seite muss nicht
   nachscrollen (Feedback 2026-10-07; die fixe Leiste vom 29.09. überdeckte die letzten Zeilen,
   die Karte unter dem Raster war erst nach dessen Ende zu sehen).
   Mobil: mitlaufender Knopf (.shift-legend-mbtn) öffnet ein Modal (.shift-legend-modal). */
.shift-legend-stick { position: relative; }
.shift-legend-toggle { position: absolute; top: .4rem; right: .4rem; }
.shift-legend-toggle svg { transition: transform .15s ease; }
.shift-legend-mini { display: none; font-size: .75rem; font-weight: 600; line-height: 1.75rem; }
.shift-legend-stick.is-collapsed { padding-top: .3rem; padding-bottom: .3rem; }
.shift-legend-stick.is-collapsed .shift-legend-body { display: none; }
.shift-legend-stick.is-collapsed .shift-legend-mini { display: block; }
.shift-legend-stick.is-collapsed .shift-legend-toggle { top: .2rem; }
.shift-legend-stick.is-collapsed .shift-legend-toggle svg { transform: rotate(180deg); }
.shift-legend-body { padding-right: 2.25rem; }   /* Platz für den Pfeil */
@media (max-width: 1023px) {
  .shift-legend-desktop { display: none; }
}
@media (min-width: 1024px) {
  .shift-legend-mbtn, .shift-legend-modal-wrap { display: none !important; }
  /* z-index über den klebenden Kopf-/Summenzellen der Raster (30), unter Kopfleiste (40) und Modalen (60) */
  .shift-legend-stick { position: sticky; bottom: 0; z-index: 32; box-shadow: 0 -8px 18px -10px rgba(15, 23, 42, .3); }
}
/* Legende im Modal: je Kategorie ein Block mit Überschrift statt einer Zeile mit Beschriftung links */
.shift-legend-modal .flex.flex-wrap { display: block; margin-bottom: .85rem; }
.shift-legend-modal .flex.flex-wrap:last-child { margin-bottom: 0; }
.shift-legend-modal .flex.flex-wrap > span:first-child { display: block; min-width: 0 !important; margin-bottom: .45rem; font-weight: 600; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .03em; font-size: .68rem; }
.shift-legend-modal .flex.flex-wrap > *:not(:first-child) { display: inline-flex; margin: 0 .4rem .45rem 0; }

/* Raumbuchung: Überhang (Reinigung/Räumung) hinter einer Buchung — schraffiert in der Primärfarbe,
   damit er als „belegt, aber kein Termin“ lesbar bleibt (Tages- und Wochen-Zeitleiste). */
.rb-buffer {
  border-radius:.125rem;
  background-image:repeating-linear-gradient(135deg,
    color-mix(in oklab, var(--color-primary) 55%, transparent) 0 3px,
    color-mix(in oklab, var(--color-primary) 18%, transparent) 3px 6px);
}

/* ---- 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 */
  /* Redesign S4 (Demo .chips): schlägt p-1 / gap-1 / rounded-xl / bg-muted aus dem Markup (page-header.php) */
  padding: 3px; gap: 2px; border-radius: 11px; background: hsl(var(--muted-bg));
}
.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-text)); }

.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;
  /* Am Handy ist die Vorschau breiter als die Karte (vier Spalten, Kacheln mit Mindestbreite): sie
     scrollt in ihrem Rahmen, statt die Seite zu verbreitern; die Hilfslinien laufen mit (2026-10-05). */
  overflow-x: auto;
  background-attachment: local;
}
.dashcfg-item {
  position: relative;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card)); /* UI-Audit DARK-03 */
  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; }

/* Planraster der Schichtplanung (schichten-plan.php, Feedback GADORO 29.09.2026):
   - Am Rasterende scrollt die Seite weiter. Der Baustein hält das Scrollen sonst fest
     (overscroll-behavior: contain) — über dem Raster ließ sich die Seite nicht weiterschieben.
     Nur Desktop; mobil bleibt es beim Baustein.
   - Die Kopfzelle „Mitarbeiter“ liegt über den klebenden Namen (z-10) und den Tagesköpfen;
     mit z-index 3 aus .extr-table-sticky schoben sich beim Scrollen die Namen darüber. */
@media (min-width: 1024px) {
  .extr-table-sticky--scroll.shift-plan-scroll { overscroll-behavior-y: auto; }
}
.shift-plan-scroll thead th:first-child { z-index: 12; }
/* Gesamtplan: die klebende Planzelle der Trennzeile braucht einen deckenden Grund — seit die Zeile
   die Anwesenden je Plan zeigt, laufen beim waagerechten Scrollen Zahlen darunter durch
   (Muster Rechtematrix: Tönung als Verlaufsschicht über dem Kartengrund). */
.shift-gesamt-scroll .shift-group-row > td:first-child {
  background: linear-gradient(hsl(var(--muted) / .6), hsl(var(--muted) / .6)), hsl(var(--card));
}

/* ============================================================
   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; }

/* Schwebende Navigation im Dunkelmodus: Redesign S10 – die Glas-Token (--extr-glass*) tragen hell und dunkel;
   die früheren Dunkel-Regeln der Pille entfallen. */

/* ============================================================
   Header-Aktionen — EINHEITLICH FÜR ALLE MODULE (CLAUDE-UI §3.2)
   ------------------------------------------------------------
   Genau zwei Bedienelemente, immer oben rechts im Modul-Header:
     „+"  legt neuen Inhalt an (nur wenn der Nutzer das darf)
     „⋮"  öffnet das Kontextmenü mit allen weiteren Optionen
   Das Menü klappt auf Höhe des Buttons nach unten auf, wiederholt
   die Neu-Anlegen-Aktion und animiert die drei Punkte zu einem X.
   Markup ausschließlich über extr_page_actions() (page-header.php),
   Verhalten in app.js — NICHT je Modul nachbauen.
   ============================================================ */

.extr-page-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* Tap-Ziel 44 px — auf dem Handy waren die alten Icon-Buttons zu klein. */
.extr-action-primary,
.extr-action-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  /* Redesign S4 (D7): Symbolknöpfe rund; am Desktop (beschrifteter Knopf, unten) Radius wie .extr-btn. */
  border-radius: 9999px;
  /* Kein Rahmen in der Grundform: die Primärkette im Bestand hatte keinen,
     nur die Outline-Variante setzt einen (sonst wären alle Knöpfe 2 px höher). */
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.extr-action-primary {
  background: hsl(var(--primary-strong));
  color: hsl(var(--primary-foreground));
}
.extr-action-primary:hover { filter: none; background-color: hsl(var(--primary-emphasis)); }
.extr-action-primary svg   { height: 1.375rem; width: 1.375rem; }

.extr-action-more {
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  border-color: hsl(var(--input));
}
.extr-action-more:hover,
.extr-action-more[aria-expanded="true"] {
  background: hsl(var(--primary-soft));
  color: hsl(var(--primary-text));
}

.extr-action-primary:focus-visible,
.extr-action-more:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px hsl(var(--ring));
}

/* Drei Punkte → X. Die Punkte werden zu zwei gekreuzten Balken, der
   mittlere blendet aus; alles über transform/width/height animierbar. */
.extr-action-dots {
  position: relative;
  display: block;
  height: 1.25rem;
  width: 1.25rem;
}
.extr-action-dots span {
  position: absolute;
  left: 50%;
  top: 50%;
  height: .25rem;
  width: .25rem;
  border-radius: 999px;
  background: currentColor;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1),
              width .22s cubic-bezier(.4, 0, .2, 1),
              height .22s cubic-bezier(.4, 0, .2, 1),
              border-radius .22s cubic-bezier(.4, 0, .2, 1),
              opacity .14s linear;
}
.extr-action-dots span:nth-child(1) { transform: translate(-50%, -50%) translateY(-.4375rem); }
.extr-action-dots span:nth-child(2) { transform: translate(-50%, -50%); }
.extr-action-dots span:nth-child(3) { transform: translate(-50%, -50%) translateY(.4375rem); }

.extr-action-more[aria-expanded="true"] .extr-action-dots span:nth-child(1) {
  height: .125rem;
  width: 1.0625rem;
  border-radius: 1px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.extr-action-more[aria-expanded="true"] .extr-action-dots span:nth-child(2) {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.3);
}
.extr-action-more[aria-expanded="true"] .extr-action-dots span:nth-child(3) {
  height: .125rem;
  width: 1.0625rem;
  border-radius: 1px;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Kontextmenü — klappt auf Höhe des Buttons nach unten auf, rechtsbündig. */
.extr-action-menu-wrap { position: relative; }

.extr-action-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  min-width: 15rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: .5rem;
  z-index: 60;
  background: hsl(var(--popover));
  border: 0;
  border-radius: var(--radius-pop);
  box-shadow: var(--extr-shadow-lg), 0 0 0 1px hsl(var(--foreground) / .10);
}
.extr-action-menu-wrap.is-open .extr-action-menu {
  display: block;
  animation: extr-action-menu-in .16s cubic-bezier(.2, .7, .3, 1);
}
@keyframes extr-action-menu-in {
  from { opacity: 0; transform: translateY(-.375rem) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.extr-action-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: .5rem .625rem;
  border: 0;
  border-radius: var(--radius-btn);
  background: none;
  color: hsl(var(--foreground));
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.extr-action-item:hover  { background: hsl(var(--muted)); }
.extr-action-item svg    { height: 1rem; width: 1rem; flex-shrink: 0; opacity: .7; color: hsl(var(--primary-text)); }
.extr-action-item-label  { flex: 1 1 auto; min-width: 0; }

.extr-action-item--primary     { color: hsl(var(--primary-text)); font-weight: 600; }
.extr-action-item--primary svg { opacity: 1; }

.extr-action-item--danger        { color: hsl(var(--destructive)); }
.extr-action-item--danger:hover  { background: hsl(var(--destructive) / .1); }
.extr-action-item--danger svg    { opacity: 1; color: currentColor; }

.extr-action-sep {
  height: 1px;
  margin: .375rem .25rem;
  background: hsl(var(--border));
}

/* Live-Zaehler am „+"-Button (z. B. Warenkorb) */
.extr-action-primary { position: relative; }
.extr-action-count {
  position: absolute;
  top: -.25rem;
  right: -.25rem;
  white-space: nowrap;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .25rem;
  border-radius: 999px;
  border: 2px solid hsl(var(--background));
  background: hsl(var(--card));
  color: hsl(var(--primary-text));
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.extr-action-count.hidden { display: none; }

.extr-action-badge {
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 1.25rem;
  padding: 0 .3125rem;
  border-radius: 999px;
  background: hsl(var(--primary-soft));
  color: hsl(var(--primary-text));
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.extr-action-badge.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .extr-action-dots span,
  .extr-action-primary,
  .extr-action-more { transition: none; }
  .extr-action-menu-wrap.is-open .extr-action-menu { animation: none; }
}

/* ── Desktop ab 1024 px: dieselben Elemente als Button-Reihe ────────────────
   In der PWA/auf dem Handy bleibt es bei „+" und „⋮" mit Kontextmenü; am
   Desktop stehen die Aktionen wieder als beschriftete Buttons nebeneinander.
   Bewusst dasselbe DOM, nur anders layoutet — zwei getrennte Markup-Varianten
   würden IDs doppeln (Zähler-Badges, Modul-JS per getElementById). */
.extr-action-primary-label { display: none; }

@media (min-width: 1024px) {
  /* Sekundäre Aktionen links, Neu-Anlegen rechts — wie vor der Vereinheitlichung. */
  /* Die Reihe darf schrumpfen und umbrechen — sonst ragt sie über den Fensterrand
     (UI-Audit HDR-05: Recruiting 1339 px bei 1280 px Fenster). */
  .extr-page-actions { flex-shrink: 1; min-width: 0; max-width: 100%; }
  .extr-page-actions > .extr-action-menu-wrap { flex: 0 1 auto; }
  .extr-page-actions > .extr-action-menu-wrap { order: 1; min-width: 0; }
  .extr-page-actions > .extr-action-primary   { order: 2; }

  /* „⋮", Trenner und der wiederholte Neu-Eintrag sind hier überflüssig. */
  .extr-action-more,
  .extr-action-sep,
  .extr-action-item--primary { display: none; }

  /* Aus dem Popover wird eine Inline-Reihe. */
  .extr-action-menu-wrap { position: static; }
  .extr-page-actions .extr-action-menu-wrap .extr-action-menu {
    display: flex;
    position: static;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    min-width: 0;
    max-width: none;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }

  /* Aus jedem Menüeintrag wird ein Umriss-Button. */
  /* Redesign S4: Farben und Radius wie .extr-btn--outline */
  .extr-action-item {
    width: auto;
    height: 2.25rem;
    padding: 0 .875rem;
    gap: .5rem;
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius-btn);
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    white-space: nowrap;
  }
  .extr-action-item:hover {
    background: hsl(var(--primary-soft));
    color: hsl(var(--primary-text));
    border-color: hsl(var(--primary) / .45);
  }
  .extr-action-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px hsl(var(--ring));
  }
  .extr-action-item svg { opacity: 1; }
  .extr-action-item-label { flex: 0 0 auto; }
  .extr-action-item--danger {
    border-color: hsl(var(--destructive) / .35);
    color: hsl(var(--destructive));
  }
  .extr-action-item--danger:hover {
    background: hsl(var(--destructive) / .1);
    color: hsl(var(--destructive));
    border-color: hsl(var(--destructive) / .45);
  }

  /* Primärbutton mit Label statt reinem Icon. */
  .extr-action-primary {
    width: auto;
    height: 2.25rem;
    padding: 0 1rem;
    gap: .5rem;
    border-radius: var(--radius-btn);
  }
  .extr-action-primary svg { height: 1rem; width: 1rem; }
  .extr-action-primary-label {
    display: inline;
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
   Listen: Tabellenkopf bleibt beim Scrollen stehen (2026-08-28)

   Es scrollt die SEITE — die Tabelle bekommt bewusst KEINEN eigenen
   Scrollbereich: Das nutzte die Fensterhöhe nicht aus und erzeugte bei
   niedrigen Fenstern zwei Scrollleisten übereinander.

   Damit `position: sticky` gegenüber dem Fenster wirkt, darf zwischen Zelle
   und Fenster kein Scroll-Container liegen. Die Listen stecken aber in
   overflow-Containern (runde Kartenecken bzw. waagerechtes Scrollen). Lösung:
   `overflow: clip` statt `hidden`/`auto` — das schneidet genauso ab, ist aber
   KEIN Scroll-Container, `sticky` bezieht sich dadurch aufs Fenster.

   Der Kopf hält unterhalb der App-Kopfleiste (selbst sticky, variable Höhe);
   deren Höhe liefert syncStickyTop() in app.js als --extr-sticky-top.

   Der Kopf braucht eine DECKENDE Fläche — die übliche Tönung bg-muted/50 ist
   halbtransparent, darunter würden die Zeilen durchscheinen. Die Trennlinie
   kommt als inset-Schatten, weil echte Rahmen an sticky-Zellen bei
   border-collapse nicht mitgezeichnet werden.
--------------------------------------------------------------------------- */
/* Karte, die nur ihre runden Ecken beschneiden soll. `clip` statt `hidden`:
   clippt identisch, ist aber KEIN Scroll-Container — sonst rechnet ein
   position:sticky im Inneren gegen die Karte statt gegen das Fenster und der
   Tabellenkopf bleibt nicht stehen. */
.extr-clip {
    overflow: clip;
}

.extr-table-sticky {
    overflow: clip;
}
.extr-table-sticky thead th {
    position: sticky;
    top: var(--extr-sticky-top, 0px);
    z-index: 3;
    background-color: hsl(var(--card));   /* Redesign S4: Fläche Karte statt Muted (Kopf ohne Tönung, 01 §3.6) */
    box-shadow: inset 0 -1px 0 hsl(var(--border));
}

/* Schmale Schirme: Tabellen müssen waagerecht schiebbar bleiben. Dort ist der
   Container wieder ein Scroll-Container, der Kopf haftet folglich nicht —
   auf Mobilgeräten ist das verschmerzbar (viele Listen sind dort ohnehin
   durch Karten ersetzt). */
@media (max-width: 1023px) {
    /* Als Scroll-Container ist der Kasten selbst der Bezugsrahmen des Kopfes:
       der Fenster-Versatz (Höhe der Kopfleiste) schob den Kopf sonst mitten in
       die Tabelle (sichtbar seit den echten 390-px-Aufnahmen, 2026-09-16). */
    .extr-table-sticky { overflow-x: auto; --extr-sticky-top: 0px; }
}

/* ---- Fixierter Kopf im EIGENEN Scrollbereich (UI-Audit LST-03) -------------
   Für Raster, die selbst scrollen (Wochendetails, Monatsraster, Statistik-
   Tabellen). Sie setzen den Fenster-Versatz auf 0 zurück und begrenzen ihre
   Höhe — sonst hat `position: sticky` nichts, woran es kleben könnte.
   Anwenden zusammen mit .extr-table-sticky:
     <div class="extr-table-sticky extr-table-sticky--local"> … </div> */
/* Nur der Bezugsrahmen: der Kopf klebt am nächsten scrollenden Vorfahren
   (z. B. am Modalkörper) statt am Fenster. Kein eigener Scrollbereich. */
.extr-table-sticky--local { --extr-sticky-top: 0px; }

/* Eigener Scrollbereich in BEIDE Richtungen, mit begrenzter Höhe — sonst
   hat `position: sticky` nichts, woran es kleben könnte. Zusammen mit
   --local verwenden. Nicht mit .extr-table-scroll kombinieren: dessen
   `overflow: clip` steht ungeschichtet und würde hier gewinnen. */
.extr-table-sticky--scroll {
  overflow: auto;
  max-height: var(--extr-table-max, calc(100vh - 16rem));
  overscroll-behavior: contain;
}
/* Erste Spalte trägt die Bezeichnung der Zeile und bleibt stehen. */
.extr-table-sticky--scroll .extr-table th:first-child,
.extr-table-sticky--scroll .extr-table td:first-child {
  position: sticky; left: 0; z-index: 2;
  background: hsl(var(--card));
  box-shadow: 1px 0 0 hsl(var(--border));
}
.extr-table-sticky--scroll .extr-table thead th:first-child { z-index: 4; }
/* ---- Team: Rechtematrix ---------------------------------------------------
   Namensspalte klebt links, Kopfzeile oben (extr-table-sticky). Nur Desktop:
   das Markup ist hidden lg:block, die installierte App blendet zusätzlich per
   JS aus (display-mode: standalone). */
/* Das Raster scrollt in BEIDE Richtungen selbst (Höhe setzt das Partial-JS
   auf den sichtbaren Rest des Fensters, hier nur der Rückfall). Ein Container
   mit overflow wird zum Sticky-Bezugsrahmen — deshalb kleben Kopfzeile und
   Namensspalte hier bewusst am Container (top/left: 0) und NICHT über
   .extr-table-sticky am Fenster: der dort gesetzte App-Header-Versatz
   (--extr-sticky-top) würde den Kopf mitten ins Raster schieben. */
.emp-matrix-wrap { overflow: auto; max-height: calc(100vh - 16rem); overscroll-behavior: contain; }
.emp-matrix { border-collapse: separate; border-spacing: 0; }
.emp-matrix th, .emp-matrix td { white-space: nowrap; }
.emp-matrix thead th {
  position: sticky; top: 0; z-index: 3;
  background: hsl(var(--card));
  box-shadow: inset 0 -1px 0 hsl(var(--border));
}
.emp-matrix .emp-matrix-name {
  position: sticky; left: 0; z-index: 2;
  background: hsl(var(--card));
  box-shadow: inset -1px 0 0 hsl(var(--border));
  min-width: 15rem;
}
.emp-matrix thead .emp-matrix-name { z-index: 4; background: hsl(var(--card)); }
.emp-matrix th.emp-matrix-mod { min-width: 4.75rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.emp-matrix th.emp-matrix-mod > span { display: flex; flex-direction: column; align-items: center; gap: .25rem; font-size: .6875rem; line-height: 1.15; max-width: 5.5rem; white-space: normal; text-align: center; }
.emp-matrix td.emp-matrix-cell { text-align: center; }
.emp-matrix-mark { display: inline-flex; align-items: center; justify-content: center; height: 1.5rem; width: 1.5rem; border-radius: 7px; }
.emp-matrix-mark--manage { background: hsl(var(--tone-ok-bg)); color: hsl(var(--tone-ok-fg)); }
.emp-matrix-mark--access { background: hsl(var(--tone-info-bg)); color: hsl(var(--tone-info-fg)); }
.emp-matrix-mark--none   { color: hsl(var(--input)); }
.emp-matrix-mark svg { height: .95rem; width: .95rem; }
/* Die Namensspalte klebt links; die Modulzellen scrollen UNTER ihr durch. Ihr Hintergrund
   muss deshalb deckend sein — eine Tönung allein (6 % Primärfarbe) ließe die Symbole
   durchscheinen. Daher: Tönung als Verlaufsschicht ÜBER dem deckenden Kartenweiß. */
.emp-matrix tr.is-admin .emp-matrix-name {
  background: linear-gradient(hsl(var(--primary) / .06), hsl(var(--primary) / .06)), hsl(var(--card));
}
.emp-matrix tbody tr:hover .emp-matrix-name {
  background: linear-gradient(hsl(var(--muted) / .4), hsl(var(--muted) / .4)), hsl(var(--card));
}
.emp-matrix tbody tr.is-admin:hover .emp-matrix-name {
  background: linear-gradient(hsl(var(--muted) / .4), hsl(var(--muted) / .4)), linear-gradient(hsl(var(--primary) / .06), hsl(var(--primary) / .06)), hsl(var(--card));
}

/* ============================================================
   Suchfeld (extr_search_field, R5, CLAUDE-UI.md §3.4)
   Immer sichtbar, Pille, Höhe 38 px = Höhe der Filter-Selects; Desktop 320 px,
   mobil eine eigene volle Zeile. Breite pro Aufruf über --extr-sf-w.
   ============================================================ */
/* Altnamen (Klassenmenge bleibt bis zur Spiegelung D13 vollständig): R5 kennt kein Aufklappen mehr, R1 kein Überlauf-Sondermenü. */
.extr-sf-toggle, .extr-sf-chip, .extr-action-sep--mobile { display: none; }
.extr-sf--right, .extr-action-overflow { position: relative; }
.extr-sf { position: relative; flex: 0 1 var(--extr-sf-w, 20rem); width: var(--extr-sf-w, 20rem); min-width: 0; max-width: 100%; height: 2.375rem; }
.extr-sf-panel {
  position: relative; display: flex; align-items: center; width: 100%; height: 2.375rem;
  border: 1px solid hsl(var(--input)); border-radius: var(--radius-control); background: hsl(var(--card));
  transition: border-color .15s ease, box-shadow .15s ease;
}
.extr-sf-panel:focus-within { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--ring)); }
.extr-sf-icon { position: absolute; left: .75rem; height: 1rem; width: 1rem; color: hsl(var(--muted-foreground)); pointer-events: none; }
.extr-sf-input {
  flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  padding: 0 2.25rem 0 2.5rem; font-size: .875rem; color: hsl(var(--foreground));
}
.extr-sf-input::placeholder { color: hsl(var(--muted-foreground)); }
.extr-sf-input::-webkit-search-cancel-button,
.extr-sf-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.extr-sf-clear {
  position: absolute; right: .3rem; display: none; align-items: center; justify-content: center;
  height: 1.75rem; width: 1.75rem; border-radius: .375rem; color: hsl(var(--muted-foreground)); cursor: pointer;
}
.extr-sf-clear svg { height: 1rem; width: 1rem; }
.extr-sf-clear:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
/* Das Leeren-„x" folgt dem Feldinhalt selbst — auch wenn ein Modul den Wert per
   Skript zurücksetzt, ohne ein input-Ereignis auszulösen (UI-Audit CODE-03). */
.extr-sf-input:not(:placeholder-shown) ~ .extr-sf-clear { display: inline-flex; }
.extr-sf-spinner {
  position: absolute; left: .8rem; display: none; height: .9rem; width: .9rem; border-radius: 9999px;
  border: 2px solid hsl(var(--border)); border-top-color: hsl(var(--primary)); animation: extrSfSpin .7s linear infinite;
}
.extr-sf.is-loading .extr-sf-spinner { display: block; }
.extr-sf.is-loading .extr-sf-icon { visibility: hidden; }
@keyframes extrSfSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .extr-sf-panel { transition: none; } }
@media (max-width: 767.98px) { .extr-sf:not(.extr-sf--inline):not(.extr-sf--menu) { flex: 1 1 100%; width: 100%; } }

/* Suche im „⋮“-Menü (Detailköpfe am Handy, Feedback CHAT-05): unter 1024 px ist das
   Feld eingeklappt, ein Menüeintrag (extr-action-item--mobile) fokussiert es; solange es
   den Fokus hat oder ein Begriff gesetzt ist, steht es offen. Am Desktop steht das Feld
   wie überall im Kopf, der Menüeintrag entfällt. */
@media (max-width: 1023px) {
  .extr-sf--menu:not(:focus-within):not(.has-value) { flex: 0 0 0px; width: 0; margin-right: -.5rem; overflow: hidden; }
  .extr-sf--menu:focus-within, .extr-sf--menu.has-value { flex: 0 1 min(60vw, 20rem); width: min(60vw, 20rem); }
}
@media (min-width: 1024px) { .extr-action-item--mobile { display: none; } }

/* Filter-Pills mit Zähler (extr_filter_pill): Badge folgt dem Aktivzustand des Knopfs. */
.extr-pill-count {
  display: inline-flex; align-items: center; padding: .1rem .4rem; border-radius: 9999px;
  font-size: .75rem; font-weight: 500; line-height: 1.1;
  background: hsl(var(--foreground) / .09); color: inherit; font-variant-numeric: tabular-nums;
}
/* Filter-Pillen (extr_filter_pill) nach Demo .chip, Redesign S4 (01 §3.5): ungeschichtet, schlagen border-border /
   hover:bg-muted / bg-primary aus dem Markup; Aktivzustand wieder gefüllt (--primary-strong). */
.extr-pill { border-color: transparent; background: hsl(var(--muted-bg)); border-radius: var(--radius-btn); }
html[data-theme="dark"] .extr-pill { border-color: transparent; }   /* (0,2,1) nach dem Dunkel-Remap .border-border – sonst Rahmen nur im Dunkeln */
.extr-pill:not(.is-active):hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.extr-pill.is-active { background: hsl(var(--primary-strong)); color: hsl(var(--primary-foreground)); }
/* D8-Zweitregel: text-sm font-medium aus dem Markup verlieren gegen den ungeschichteten Reset button { font: inherit }
   (sonst 16 px/400) – Größe und Gewicht wie die Streifen-Knöpfe daneben */
button.extr-pill { font-size: .84375rem; font-weight: 500; }
/* Zähler auf aktiver Pille: heller Kreis, Schrift in der Flächenfarbe (UI-Audit DARK-02) */
.bg-primary .extr-pill-count, .extr-pill.is-active .extr-pill-count { background: hsl(var(--primary-foreground)); color: hsl(var(--primary-strong)); }

/* Leerzustand in Inhalts-Containern mit eigenen p-Regeln (z. B. .ut-output p { margin:0 })
   bleibt zentriert: die Automargins hier binden stärker als eine Element-Regel. */
.extr-empty .extr-empty-text { margin-left: auto; margin-right: auto; }
.extr-empty .extr-empty-icon { margin-left: auto; margin-right: auto; }

/* ============================================================
   Filterzeile & Wechsler — vereinheitlicht (UI-Audit 2026-09)
   FLT-01: eine Höhe für Suche, Selects und Sortierknopf (38 px).
   SW-02:  ein Markup für alle Segment-Wechsler (extr_tab_strip).
   FLT-04: immer offenes Suchfeld für Auswahl-Fenster (Picker).
   Alles hier, nicht in Tailwind: der Build ist gepurged.
   ============================================================ */

/* Selects der Filterzeile — bündig zur aufklappenden Suche (2.375rem = 38 px).
   Vorher standen 34-px-Selects (py-1.5) neben 38-px-Suchfeldern.
   Eigener Name: .extr-select gehört dem Formular-Baustein weiter oben (width:100%,
   gefüllter Hintergrund) — der würde die Filterzeile über die volle Breite ziehen. */
/* Mehrfachauswahl-Listen (multiple) behalten ihre Höhe — dort ist size="n" gewollt. */
select.extr-filter-select:not([multiple]) {
  height: 2.375rem;
  line-height: 1.25;
}
/* Form und Farbe des Filter-Selects stehen hier, nicht als Kette im Markup:
   die Kette stand 76-mal in vier Fassungen (px-2 / px-2.5 / px-3, teils ohne
   Fokusring), der Innenabstand driftete um 4 px. In @layer components, damit
   ein w-full oder eine Modulklasse daneben weiter greift. */
@layer components {
  /* Wie Demo .sel, Pille nach R7 (D7 aufgehoben); eigener Pfeil (Farbe = --muted-foreground hell). */
  .extr-filter-select {
    min-height: 2.375rem; border: 1px solid hsl(var(--input)); border-radius: var(--radius-control);
    padding: .375rem 2rem .375rem .875rem; font-size: .84375rem; background-color: hsl(var(--card)); color: hsl(var(--foreground)); flex-shrink: 0;
    appearance: none; -webkit-appearance: none; background-repeat: no-repeat; background-position: right .625rem center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23606c7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
  select.extr-filter-select[multiple] { border-radius: var(--radius-field); }
  .extr-filter-select:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--ring)); }
  /* Datumsfelder mit der Filter-Optik (raumbuchung, inventar-logbuch): ohne Auswahlpfeil, native Darstellung bleibt */
  input.extr-filter-select { padding-right: .75rem; background-image: none; appearance: auto; -webkit-appearance: auto; }
}

/* Richtungsknopf der Sortierung — quadratisch, gleiche Höhe wie Select+Suche. */
.extr-sort-dir {
  height: 2.375rem;
  width: 2.375rem;
}
.extr-sort-dir svg { height: 1rem; width: 1rem; }

/* „Filter zurücksetzen" erscheint nur bei aktivem Filter (extr_filter_reset). */
.extr-filter-reset svg { height: 1rem; width: 1rem; }

/* ---- Reiter im Streifen (extr_tab_strip) ---------------------------------
   Der Streifen selbst (.extr-tab-strip) scrollt bereits seitlich. Unter
   640 px zeigen die Reiter nur ihr Symbol — die Beschriftung steckt in
   title/aria-label. Streifen mit mehrdeutigen Symbolen setzen
   'labels' => 'always' und behalten den Text. */
/* Eigener Name: .extr-tab gehört dem Design-System-Tabsystem (§3.7, Unterstrich-
   Reiter mit display:block) — dessen Regeln würden den Streifen zerlegen. */
.extr-tab-strip-btn { cursor: pointer; }
.extr-tab-strip-btn svg { height: 1rem; width: 1rem; flex: 0 0 auto; }
.extr-tab-strip-label { min-width: 0; }
/* Ungelesen-Hinweis am Reiter (extr_tab_strip 'badge', z. B. Team-Chats Gruppen/Chats): gefüllt in Akzentfarbe wie
   die Zähler der Navigation; auf dem aktiven (gefüllten) Reiter umgekehrt, damit er sich von der Fläche abhebt. */
.extr-tab-strip-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; border-radius: 9999px; background: hsl(var(--primary-strong)); color: hsl(var(--primary-foreground)); font-size: .6875rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.extr-tab-strip .extr-tab-strip-btn.is-active:not(.text-muted-foreground) .extr-tab-strip-badge,
.extr-tab-strip .extr-tab-strip-btn.bg-white .extr-tab-strip-badge { background: hsl(var(--primary-foreground)); color: hsl(var(--primary-strong)); }
.extr-tab-strip.extr-tab-strip--seg .extr-tab-strip-btn.is-active:not(.text-muted-foreground) .extr-tab-strip-badge,
.extr-tab-strip.extr-tab-strip--seg .extr-tab-strip-btn.bg-white .extr-tab-strip-badge { background: hsl(var(--primary-strong)); color: hsl(var(--primary-foreground)); }
/* Redesign S4 (01 §3.5, Demo .chip): ungeschichtet – die Kette bg-white shadow-sm text-foreground am aktiven Knopf kommt
   aus page-header.php und app.js (tabActivate) */
.extr-tab-strip .extr-tab-strip-btn { padding: .375rem .75rem; border-radius: var(--radius-btn); font-size: .84375rem; font-weight: 500; color: hsl(var(--muted-foreground)); background: transparent; box-shadow: none; }
.extr-tab-strip .extr-tab-strip-btn:hover { color: hsl(var(--foreground)); }
/* (0,3,0)/(0,4,0) schlagen die Dunkel-Remaps .bg-white / .text-foreground (0,2,1) – Lücke G4.
   Aktiv = .is-active ODER .bg-white: Die Ansichts-Skripte in mitarbeiter.php und arbeitsanweisungen-kategorie.php
   (activeCls) schalten nur bg-white/shadow-sm/text-*, nicht is-active. :not(.text-muted-foreground) blendet ein vom Server
   gesetztes, dort nicht mehr nachgeführtes is-active aus (activeCls setzt text-muted-foreground am inaktiven Knopf). */
.extr-tab-strip .extr-tab-strip-btn.is-active:not(.text-muted-foreground),
.extr-tab-strip .extr-tab-strip-btn.bg-white { background: hsl(var(--primary-strong)); color: hsl(var(--primary-foreground)); box-shadow: none; }
.extr-tab-strip .extr-tab-strip-btn.is-active:not(.text-muted-foreground) .extr-pill-count,
.extr-tab-strip .extr-tab-strip-btn.bg-white .extr-pill-count { background: hsl(0 0% 100% / .22); color: inherit; } /* feste Farbe: Weiß-Tönung auf Fläche */
.extr-tab-strip.extr-tab-strip--seg .extr-tab-strip-btn.is-active:not(.text-muted-foreground),
.extr-tab-strip.extr-tab-strip--seg .extr-tab-strip-btn.bg-white { background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: 0 1px 3px rgba(12, 28, 45, .12); /* feste Farbe: Schatten */ }

@media (max-width: 639px) {
  .extr-tab-strip:not(.extr-tab-strip--labels) .extr-tab-strip-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  /* Ohne Text braucht der Reiter kein waagerechtes Polster mehr. */
  .extr-tab-strip:not(.extr-tab-strip--labels) .extr-tab-strip-btn {
    padding-left: .625rem;
    padding-right: .625rem;
  }
}

/* ---- Suchfeld für Auswahl-Fenster (Picker): füllt die Zeile. Damit
   verschwinden die letzten rohen <input type="search"> aus den Modalen. */
.extr-sf--inline { flex: 1 1 auto; min-width: 0; width: 100%; }

/* Ungespeicherte Änderungen am Speichern-Knopf einer Detailseite (UI-Audit HDR-03). */
.extr-action-primary.is-dirty::after {
  content: '';
  position: absolute;
  top: .45rem;
  right: .45rem;
  height: .5rem;
  width: .5rem;
  border-radius: 9999px;
  background: hsl(var(--primary-foreground));
}

/* Die Zwischenlösung .extr-modal-wide / .extr-modal-xwide (Ersatz für die
   im gepurgten Build fehlenden lg:max-w-3xl/4xl) ist entfallen: die Breiten
   stecken jetzt in .extr-dlg-panel--wide / --xwide (siehe MOD-02 unten). */

/* ============================================================
   UI-Audit Charge 2 (2026-09-09) — Tabellen, Kacheln, Zeilen-
   Aktionen, Modal-Ebenen. Alles handgeschrieben, also purge-fest.
   Namen bewusst neu: .extr-btn, .extr-input, .extr-modal*,
   .extr-empty*, .extr-table-sticky und .extr-card gibt es bereits
   weiter oben — die werden hier NICHT umdefiniert.
   ============================================================ */

/* ---- LST-01: Tabellen ------------------------------------------------------
   Der Bestand zählte 14 verschiedene th-Klassenketten. Eine Tabelle sieht
   jetzt überall gleich aus; die Dichtevariante --dense ist für Datenraster
   (Zeitkonto, Schichtplan), in denen p-4 die Zeilen zu hoch macht. */
/* Redesign S4 (01 §3.6, Demo .tbl): Kopf ohne Fläche in Versalien, Zellen 13,5 px, Rand innen 24 px (mobil 18 px). */
.extr-table { width: 100%; border-collapse: collapse; font-size: .84375rem; }
.extr-table thead { background: transparent; border-bottom: 1px solid hsl(var(--border)); }
.extr-table th { text-align: left; padding: .625rem 1rem; font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.extr-table td { padding: .6875rem 1rem; font-size: .84375rem; vertical-align: middle; }
/* Zellfarbe im Layer: ≈ 100 <td> tragen eigene Tailwind-Textfarben (Status rot/grün, gedämpft) – die müssen gewinnen. */
@layer components {
  .extr-table td { color: hsl(var(--bodytext)); }
  .extr-table td b, .extr-table td strong { color: hsl(var(--foreground)); font-weight: 600; }
}
.extr-table th:first-child, .extr-table td:first-child { padding-left: 1.5rem; }
.extr-table th:last-child,  .extr-table td:last-child  { padding-right: 1.5rem; }
.extr-table tbody tr { border-bottom: 1px solid hsl(var(--border)); }
.extr-table tbody tr:last-child { border-bottom: 0; }
.extr-table tbody tr:hover { background: hsl(var(--muted-bg)); }
.extr-table th.is-right, .extr-table td.is-right { text-align: right; }
.extr-table th.is-center, .extr-table td.is-center { text-align: center; }
@media (max-width: 1023px) { .extr-table th:first-child, .extr-table td:first-child { padding-left: 1.125rem; } .extr-table th:last-child, .extr-table td:last-child { padding-right: 1.125rem; } }

/* Dichter: halbe Polsterung, für Raster mit vielen Spalten – Rand 10 px, zwischen den Spalten 8 px.
   Kopf ohne Laufweite: Versalien + .03em machten die Mindestbreite der dichten Raster größer als die Karte;
   .extr-table-sticky clippt am Desktop (Sticky-Anker), die letzte Spalte war unsichtbar (S4-Prüfer, Helpdesk 1440). */
.extr-table--dense th,
.extr-table--dense td { padding: .5rem; }
.extr-table--dense th:first-child, .extr-table--dense td:first-child { padding-left: .625rem; }
.extr-table--dense th:last-child,  .extr-table--dense td:last-child  { padding-right: .625rem; }
.extr-table--dense th { font-size: .6875rem; letter-spacing: 0; }

/* ---- LST-04: Leerzustand INNERHALB einer Liste -----------------------------
   Nicht zu verwechseln mit .extr-empty (ganze Ansicht leer, extr_empty_state).
   Hier: „Filter/Suche liefert nichts" — eine Zeile, immer gleich formuliert. */
.extr-empty-inline {
  padding: 1.875rem 1rem;
  text-align: center;
  font-size: .84375rem;
  color: hsl(var(--muted-foreground));
}
/* Dichter: in Auswahl-Aufklappern (Personensuche, Ticketsuche) ist die Liste
   nur ein paar Zeilen hoch — gleicher Wortlaut, weniger Polsterung. */
.extr-empty-inline--sm { padding: .5rem .75rem; font-size: .75rem; text-align: left; }

/* ---- Dashboard-Widget (UI-Audit CON-03) ------------------------------------
   Das Dashboard folgt bewusst NICHT dem Listenmuster der Module: es ist ein
   Raster aus Kacheln. Damit die Ausnahme trotzdem eine feste Form hat, sind
   Hülle, Kopf und Leerzustand hier benannt — vorher stand die Kette 39-mal
   im Partial. Der leichte Schatten ist gewollt: die Kacheln schweben über
   dem Raster, anders als die Karten in den Listen (§3.3).
     <div class="extr-dash-widget">
       <div class="extr-dash-widget-head"><h3>…</h3><a …>Alle</a></div>
       <div class="extr-dash-empty">…</div>  ODER  <div class="extr-divided">…</div>
     </div> */
/* In @layer components: Utility-Klassen im selben class-Attribut — die
   Mobil-Kachel trägt lg:hidden und muss den Baustein schlagen können. */
@layer components {
  .extr-dash-widget {
    display: flex; flex-direction: column; height: 100%;
    background: hsl(var(--card));
    /* S11a (01 §3.27): Karte ohne Rand, Radius und Schatten wie .extr-card */
    border: 0;
    border-radius: var(--radius-card);
    box-shadow: var(--extr-shadow-md);
    padding: 1.25rem 1.375rem;
  }
  .extr-dash-widget-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem;
  }
  .extr-dash-widget-head h3 {
    display: flex; align-items: center; gap: .5rem;
    font-size: 1rem; font-weight: 600; color: hsl(var(--heading));
  }
  .extr-dash-widget-head h3 svg,
  .extr-dash-widget-head h3 i { height: 1.125rem; width: 1.125rem; color: hsl(var(--primary-text)); }
  .extr-dash-empty {
    flex: 1 1 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 1.5rem 0;
  }
  .extr-dash-empty svg, .extr-dash-empty i { height: 2rem; width: 2rem; margin-bottom: .5rem; opacity: .45; color: hsl(var(--muted-foreground)); }
  .extr-dash-empty p { font-size: .875rem; color: hsl(var(--muted-foreground)); }
}
/* ---- Getrennte Liste (UI-Audit CODE-01) ------------------------------------
   Eine feine Linie zwischen aufeinanderfolgenden Einträgen. Stand vorher
   53-mal als eigener <style>-Block in den Partials — jedes Dashboard-Widget,
   jede Auswahlliste brachte ihre eigene Kopie mit.
   Anwenden am Container, nicht an den Kindern:
     <div class="extr-divided"> <a …>…</a> <a …>…</a> </div> */
.extr-divided > * + * { border-top: 1px solid hsl(var(--border)); }
/* Kräftigere Linie, wo die Einträge Karten sind. */
.extr-divided--strong > * + * { border-top-color: hsl(var(--border)); }
/* ---- LST-06: Nachladen ----------------------------------------------------
   Vier Arten standen nebeneinander: Seitenzahlen, „Mehr laden“, Endlos-Scroll
   und alles auf einmal. Regel jetzt: Tabellen blättern (.extr-pager),
   Kartenraster laden nach (.extr-more, Endlos-Scroll hängt zentral in app.js). */
.extr-pager {
  display: flex; justify-content: center; align-items: center;
  gap: .5rem; flex-wrap: wrap; padding-top: .5rem;
}
.extr-pager-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.875rem; height: 1.875rem; padding: 0 .625rem;
  border: 1px solid hsl(var(--input));
  border-radius: 7px;   /* Redesign S4 (01 §3.15): Maß wie .extr-btn--sm */
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  font-size: .78125rem; font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.extr-pager-btn:hover { background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
.extr-pager-btn.is-active {
  background: hsl(var(--primary-strong));
  border-color: hsl(var(--primary-strong));
  color: hsl(var(--primary-foreground));
}
.extr-pager-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring)); }
.extr-pager-gap { color: hsl(var(--muted-foreground)); padding: 0 .125rem; }

.extr-more { display: flex; justify-content: center; margin-top: 1.5rem; }
/* `.hidden` kommt aus @layer utilities und verliert gegen diese ungeschichteten
   Regeln — deshalb ausdrücklich (Muster wie .extr-nav-badge weiter oben). */
.extr-row-btn.hidden,
.extr-more.hidden,
.extr-pager.hidden { display: none; }
/* ---- BTN-02: Symbolknöpfe --------------------------------------------------
   Der Bestand mischte h-9 w-9 rounded-md mit h-8 w-8 rounded-lg — zwei Größen
   und zwei Rundungen nebeneinander. Jetzt: eine Größe je Ort.
     .extr-icon-btn      36 px, ohne Rahmen — Kopfzeilen und Werkzeugleisten
     .extr-icon-btn--sm  32 px, ohne Rahmen — innerhalb von Karten
     .extr-icon-btn--outline  mit Rahmen, wo der Knopf allein steht
   In Listenzeilen gilt weiter .extr-row-btn (32 px mit Rahmen, LST-05) — die
   Rolle ist eine andere, deshalb bleibt es eine eigene Klasse. */
@layer components {
  .extr-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 2.25rem; width: 2.25rem; flex: 0 0 auto;
    border: 0;
    /* Redesign S4 (D7): rund wie die Symbolknöpfe der Demo-Kopfkarte (.iconbtn); der globale Fokus-Umriss folgt der Form. */
    border-radius: 9999px;
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }
  .extr-icon-btn svg, .extr-icon-btn i { height: 1.25rem; width: 1.25rem; }
  .extr-icon-btn:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
  .extr-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--primary) / .25); }
  .extr-icon-btn:disabled { opacity: .5; cursor: not-allowed; }
  .extr-icon-btn--sm { height: 2rem; width: 2rem; }
  .extr-icon-btn--sm svg, .extr-icon-btn--sm i { height: 1rem; width: 1rem; }
  .extr-icon-btn--outline {
    border: 1px solid hsl(var(--border));
  }
  /* Deckend weiß nur, wo der Knopf auf gemustertem Grund steht. */
  .extr-icon-btn--solid { background: hsl(var(--card)); }
  .extr-icon-btn--danger { color: hsl(var(--destructive)); }
  .extr-icon-btn--danger:hover { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); }
  /* Leise Gefahr: gedämpft, erst beim Überfahren rot — für das „x"/Papierkorb
     in Karten und Auswahllisten, wo ein dauerhaft rotes Symbol zu laut wäre
     (Gegenstück zu .extr-row-btn--danger, UI-Audit CODE-03). */
  .extr-icon-btn--danger-hover:hover { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); }
  /* Kompakt (24 px) für gestapelte Reihenfolge-Pfeile und dichte Zeilen, in denen
     32 px die Zeile aufblähen würden — WCAG 2.5.8 verlangt 24 px (UI-Audit CODE-03). */
  .extr-icon-btn--xs { height: 1.5rem; width: 1.5rem; border-radius: 9999px; }
  .extr-icon-btn--xs svg, .extr-icon-btn--xs i { height: .875rem; width: .875rem; }
  /* 40 px — neben Eingabefeldern der Höhe h-10 (Kopieren, Anhängen) (UI-Audit BTN-06). */
  .extr-icon-btn--lg { height: 2.5rem; width: 2.5rem; }
  .extr-icon-btn--lg svg, .extr-icon-btn--lg i { height: 1.25rem; width: 1.25rem; }
  /* Hell auf dunkler Vollbildfläche (Vorschau, Bildbetrachter). */
  .extr-icon-btn--overlay { background: rgb(255 255 255 / .15); color: #fff; border-radius: 9999px; }
  .extr-icon-btn--overlay:hover { background: rgb(255 255 255 / .25); color: #fff; }
  /* „x" in einem Chip (Personen, Filter): erbt die Chipfarbe, rund, 18 px. */
  .extr-chip-x {
    display: inline-flex; align-items: center; justify-content: center;
    height: 1.125rem; width: 1.125rem; flex: 0 0 auto;
    border: 0; border-radius: 9999px; background: transparent; color: inherit; cursor: pointer;
  }
  .extr-chip-x svg, .extr-chip-x i { height: .75rem; width: .75rem; }
  .extr-chip-x:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
  .extr-chip-x:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--primary) / .35); }
}
/* ---- UX-05: Tipp-Ziele bei Fingerbedienung ----------------------------------
   Symbolknöpfe messen 32–36 px; mit dem Finger sind 44 px das Maß (Apple/Material,
   WCAG 2.5.8 verlangt mindestens 24 px). Bei grobem Zeiger wachsen deshalb alle
   Symbol-Bausteine auf 2.75rem — ungeschichtet, damit auch h-8/w-8 im Markup
   sie nicht kleiner halten. Mit Maus und Trackpad bleibt alles wie gehabt. */
@media (pointer: coarse) {
  .extr-icon-btn:not(.extr-icon-btn--xs),
  .extr-row-btn,
  .extr-dlg-x { min-width: 2.75rem; min-height: 2.75rem; }
}
/* ---- LST-05: Aktionen in einer Listenzeile ---------------------------------
   Zwei Stile, mehr nicht: Symbolknopf (bis drei Aktionen) und „⋮"-Menü. */
.extr-row-actions { display: inline-flex; align-items: center; gap: .25rem; }
.extr-row-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2rem; width: 2rem; flex: 0 0 auto;
  border: 1px solid hsl(var(--border));
  /* Dieselbe Rundung wie .extr-btn, .extr-icon-btn, .extr-input und
     .extr-pager-btn — BTN-02 wollte genau eine, nicht zwei. */
  border-radius: var(--radius-lg, .75rem);
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.extr-row-btn svg, .extr-row-btn i { height: 1rem; width: 1rem; }
.extr-row-btn:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.extr-row-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--primary) / .25); }
.extr-row-btn--danger:hover {
  background: hsl(var(--destructive) / .1);
  border-color: hsl(var(--destructive) / .35);
  color: hsl(var(--destructive));
}
/* Die eine Hauptaktion einer Zeile darf beschriftet sein („Abruf", „Buchen"). */
.extr-row-btn--text { width: auto; padding: 0 .75rem; gap: .375rem; font-size: .8125rem; font-weight: 500; }

/* ---- MOD-01: Ebenen-Skala --------------------------------------------------
   Vorher: z-40, z-50, z-[55], z-[60], z-[70], z-[80], z-[200] querbeet — ein
   verschachtelter Dialog lag mal über, mal unter seinem Auslöser.
   Kopfzeile 40, Menüs 30 bleiben, wie in CLAUDE-UI.md §3.4 beschrieben. */
.extr-z-modal   { z-index: 60; }   /* Modal über der Ansicht          */
.extr-z-modal-2 { z-index: 70; }   /* Modal, das über einem Modal liegt */
.extr-z-preview { z-index: 80; }   /* Vollbild-Vorschau über den Modalen */
.extr-z-confirm { z-index: 250; }  /* Bestätigen/Verwerfen — MUSS über  */
                                   /* Ladeschleier (90), Lightbox (100)  */
                                   /* und Fotoeditor liegen: die Rück-   */
                                   /* frage kommt aus diesen heraus.     */
.extr-z-toast   { z-index: 400; }  /* Kurzmeldungen über allem        */

/* ---- MOD-02: Modal-Skelett (extr_modal_open/-close) ------------------------
   Eigene Namen: .extr-modal* gehört dem älteren, zentrierten Dialog des
   Design-Systems (max-width 540px, display:flex am Backdrop). Das hier ist
   das Skelett aus §3.4, das die Partials tatsächlich verwenden. */
.extr-dlg { position: fixed; inset: 0; }
.extr-dlg-backdrop { position: absolute; inset: 0; background: var(--extr-scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: extrFade .15s ease-out both; }
.extr-dlg-panel {
  position: absolute;
  left: 1rem; right: 1rem; top: 2rem; bottom: 2rem;
  /* Deckel wie im Altbestand: bezieht sich auf die bereits um die Safe-Area
     eingerückte Wurzel .extr-dlg. */
  max-height: 100%;
  display: flex; flex-direction: column;
  background: hsl(var(--popover));
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--extr-shadow-xl);
  animation: extrZoom .18s cubic-bezier(.16, 1, .3, 1) both;
}
/* Kompaktes Dialogfenster: Höhe nach Inhalt statt fester Rahmen — für
   Rückfragen und kurze Formulare. `--auto` sitzt mittig, `--top` oben.
   Beide begrenzen die Höhe und scrollen selbst; enthält das Panel den
   Baustein .extr-dlg-body, übernimmt der das Scrollen und die eigene
   Scrollleiste erscheint gar nicht erst. */
.extr-dlg-panel--auto,
.extr-dlg-panel--top {
  bottom: auto;
  /* 100 % der Wurzel .extr-dlg — die ist bereits um die Safe-Area eingerückt.
     100vh wüsste davon nichts und ließe das Panel unter die Insel ragen. */
  max-height: 100%;
  overflow-y: auto;
}
.extr-dlg-panel--auto {
  top: 50%;
  transform: translateY(-50%);
}
/* --top beginnt 2rem unter der Oberkante: ohne Abzug ragte ein hoher Dialog samt Fußzeile unten aus dem Bild. */
.extr-dlg-panel--top { max-height: calc(100% - 4rem); }
/* Dialoge, die auch UNTER 1024 px schmal bleiben. Im Altbestand stand dort
   `max-w-*` ohne lg:-Präfix — ohne diesen Zusatz füllt der Dialog auf dem
   Tablet fast die ganze Breite. */
.extr-dlg-panel--compact { margin-left: auto; margin-right: auto; }
/* Dialog mit Luft nach oben und unten: das mittige --auto-Panel darf sonst die ganze
   Höhe füllen und klebt an den Rändern (Zuweisungsdialog der Schichtplanung). */
.extr-dlg-panel--inset { max-height: calc(100% - 2rem); }
/* Zuweisungsdialog: zwei Ansichten als Flex-Spalten, damit ihr Körper (.extr-dlg-body)
   scrollt; umgeschaltet wird per style.display — nicht .hidden, das verlöre display:flex. */
.sm-view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* Über dem Körper steht je Ansicht eine Kopfzeile (Hinweis bzw. Suche + Filter) — der Körper
   beginnt deshalb knapper als die üblichen 1.25rem, sonst klafft eine Lücke (2026-09-18). */
.sm-view > .extr-dlg-body { padding-top: .75rem; }
.sm-grip { cursor: grab; touch-action: none; }
.sm-row.is-dragging { opacity: .45; }
@media (max-width: 1023px) {
  .extr-dlg-panel--compact                        { max-width: 32rem; }
  .extr-dlg-panel--compact.extr-dlg-panel--narrow { max-width: 24rem; }
  .extr-dlg-panel--compact.extr-dlg-panel--md     { max-width: 28rem; }
  .extr-dlg-panel--compact.extr-dlg-panel--xl     { max-width: 36rem; }
  .extr-dlg-panel--compact.extr-dlg-panel--2xl    { max-width: 42rem; }
}

/* Unten angeschlagenes Blatt (Legende, mobile Auswahl). */
.extr-dlg-panel--sheet {
  top: auto;
  bottom: 1rem;
  max-height: calc(100% - 4.5rem);
  overflow-y: auto;
}
@media (min-width: 1024px) {
  .extr-dlg-panel { left: 50%; right: auto; transform: translateX(-50%); width: 100%; max-width: 32rem; }
  .extr-dlg-panel--narrow { max-width: 24rem; }   /* sm  */
  .extr-dlg-panel--md     { max-width: 28rem; }   /* md  */
  .extr-dlg-panel--xl     { max-width: 36rem; }   /* xl  */
  .extr-dlg-panel--2xl    { max-width: 42rem; }   /* 2xl */
  .extr-dlg-panel--wide   { max-width: 48rem; }   /* 3xl */
  .extr-dlg-panel--xwide  { max-width: 56rem; }   /* 4xl */
  .extr-dlg-panel--full   { max-width: 72rem; }   /* Verwaltungsraster */
  .extr-dlg-panel--auto   { transform: translate(-50%, -50%); }
}
.extr-dlg-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1.25rem 1.5rem .75rem;
  border-bottom: 0;
  flex: 0 0 auto;
}
.extr-dlg-head-title { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.extr-dlg-head-title h2 { font-size: 1.125rem; font-weight: 700; color: hsl(var(--heading)); }
.extr-dlg-head-title svg, .extr-dlg-head-title i { height: 1.25rem; width: 1.25rem; color: hsl(var(--primary-text)); flex: 0 0 auto; }
.extr-dlg-sub { font-size: .8125rem; color: hsl(var(--bodytext)); }
.extr-dlg-x {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.25rem; width: 2.25rem; flex: 0 0 auto;
  border-radius: 9999px; color: hsl(var(--muted-foreground)); cursor: pointer;
}
.extr-dlg-x:hover { background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
.extr-dlg-body { flex: 1 1 auto; overflow-y: auto; padding: .75rem 1.5rem 1.25rem; }
.extr-dlg-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: .625rem; flex-wrap: wrap;
  padding: .875rem 1.5rem 1.25rem;
  border-top: 1px solid hsl(var(--border));
  flex: 0 0 auto;
}

/* ---- KPI-01: Kennzahl-Kachel ----------------------------------------------
   Redesign S4 (01 §3.3, Demo .kpi): Karte mit Schatten, Beschriftung oben, großer Wert darunter, Symbolkreis oben rechts.
   --compact für Reihen mit sechs bis acht Kacheln (Zeitkonto, Google Ads) – flach mit Rahmen. Markup unverändert
   (extr_stat_tile(), page-header.php). */
.extr-stat { position: relative; display: block; min-width: 0; background: hsl(var(--card)); border: 0; border-radius: var(--radius-card); padding: 1.125rem 1.25rem; box-shadow: var(--extr-shadow-md); }
a.extr-stat { color: inherit; text-decoration: none; }
a.extr-stat:hover { box-shadow: var(--extr-shadow-lg); transform: translateY(-1px); }
.extr-stat-icon { position: absolute; top: 1rem; right: 1.125rem; display: flex; align-items: center; justify-content: center; height: 2.625rem; width: 2.625rem; border-radius: 9999px; background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
.extr-stat-icon svg, .extr-stat-icon i { height: 1.25rem; width: 1.25rem; }
.extr-stat-body { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.extr-stat-label { order: 1; margin-top: 0; padding-right: 3.125rem; font-size: .84375rem; font-weight: 500; color: hsl(var(--bodytext)); }
.extr-stat-value { order: 2; margin-top: .375rem; font-size: 1.75rem; font-weight: 700; line-height: 1.15; color: hsl(var(--heading)); font-variant-numeric: tabular-nums; }
.extr-stat-hint  { order: 3; margin-top: 0; font-size: .75rem; color: hsl(var(--muted-foreground)); }
/* hint_html (Zusatzzeilen eines Modul-JS, z. B. Delta, geschaeftsprozesse.php) bleibt unter dem Wert */
.extr-stat-body > :not(.extr-stat-value):not(.extr-stat-label):not(.extr-stat-hint) { order: 4; }
.extr-stat--compact { padding: .75rem .875rem; background: hsl(var(--surface)); border: 1px solid hsl(var(--border)); border-radius: .75rem; box-shadow: none; }
.extr-stat--compact .extr-stat-icon { position: static; height: 2rem; width: 2rem; margin-bottom: .375rem; }
.extr-stat--compact .extr-stat-icon svg, .extr-stat--compact .extr-stat-icon i { height: 1rem; width: 1rem; }
.extr-stat--compact .extr-stat-label { padding-right: 0; }
.extr-stat--compact .extr-stat-value { margin-top: 0; font-size: 1.375rem; }
/* Töne: Bestand muted/good/warn/danger, neu gold/info/violet (D9). Der Wert behält --heading (Demo färbt nur das Symbol). */
.extr-stat--muted   .extr-stat-icon { background: hsl(var(--muted-bg));       color: hsl(var(--muted-foreground)); }
.extr-stat--good    .extr-stat-icon { background: hsl(var(--tone-ok-bg));     color: hsl(var(--tone-ok-fg)); }
.extr-stat--warn    .extr-stat-icon { background: hsl(var(--tone-warn-bg));   color: hsl(var(--tone-warn-fg)); }
.extr-stat--danger  .extr-stat-icon { background: hsl(var(--tone-bad-bg));    color: hsl(var(--tone-bad-fg)); }
.extr-stat--gold    .extr-stat-icon { background: hsl(var(--tone-gold-bg));   color: hsl(var(--tone-gold-fg)); }
.extr-stat--info    .extr-stat-icon { background: hsl(var(--tone-info-bg));   color: hsl(var(--tone-info-fg)); }
.extr-stat--violet  .extr-stat-icon { background: hsl(var(--tone-violet-bg)); color: hsl(var(--tone-violet-fg)); }
/* Reihe: 2 Spalten mobil, ab 1024 px auto-fit ≥ 200 px */
.extr-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 1024px) { .extr-stat-grid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1.25rem; } }
.extr-stat-grid.hidden { display: none; }
.extr-stat.hidden { display: none; }   /* Begleitregel: .extr-stat setzt display ungeschichtet (01 §0.3 Nr. 8) */
.extr-stat-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .extr-stat-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .extr-stat-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Dashboard-Leiste (Demo .kpis--6): Symbol oben, Wert vor der Beschriftung */
.extr-stat-grid--6 .extr-stat-icon { position: static; height: 2.375rem; width: 2.375rem; margin-bottom: .625rem; }
.extr-stat-grid--6 .extr-stat-value { order: 1; margin-top: 0; font-size: 1.625rem; }
.extr-stat-grid--6 .extr-stat-label { order: 2; padding-right: 0; font-size: .8125rem; font-weight: 600; color: hsl(var(--foreground)); }
@media (max-width: 1023px) {
  .extr-stat { padding: .875rem 1rem; } .extr-stat-value { font-size: 1.5rem; }
  .extr-stat-icon { height: 2.25rem; width: 2.25rem; top: .75rem; right: .75rem; } .extr-stat-label { padding-right: 2.5rem; font-size: .78125rem; }
}

/* ---- LST-02: breite Tabellen am Handy -------------------------------------
   Erste Wahl ist die Kartenliste (lg:hidden Karten + hidden lg:block Tabelle,
   Muster Inventar/Kundeninfo). Wo ein Raster keine Karte hergibt (Zeitkonto,
   Gesamtplan, Auswertungen), sorgt dieser Container dafür, dass die Tabelle
   seitlich scrollt, die erste Spalte stehen bleibt und ein Schatten am Rand
   zeigt, dass rechts noch etwas kommt. */
/* Waagerechter Rückfall für Raster, die als Karte keinen Sinn ergeben.
   Wichtig: `overflow: clip` erzeugt KEINEN Scroll-Container — der klebende
   Tabellenkopf aus .extr-table-sticky bezieht sich also weiter auf das
   Fenster. Erst unter 1024 px wird hier waagerecht gescrollt; dort haftet der
   Kopf ohnehin nicht (siehe .extr-table-sticky). */
.extr-table-scroll {
  overflow: clip;
}
@media (max-width: 1023px) {
  .extr-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Schatten nur, solange nicht ganz nach rechts gescrollt ist. */
    background:
      linear-gradient(to right, hsl(var(--card)) 30%, hsl(var(--card) / 0)) left / 2rem 100% no-repeat,
      linear-gradient(to left,  hsl(var(--card)) 30%, hsl(var(--card) / 0)) right / 2rem 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.14), rgba(15,23,42,0)) left / .75rem 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.14), rgba(15,23,42,0)) right / .75rem 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}
/* Erste Spalte bleibt stehen — sie trägt die Bezeichnung der Zeile. */
@media (max-width: 1023px) {
  .extr-table-scroll--sticky1 .extr-table th:first-child,
  .extr-table-scroll--sticky1 .extr-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: hsl(var(--card));
    box-shadow: 1px 0 0 hsl(var(--border));
  }
  .extr-table-scroll--sticky1 .extr-table thead th:first-child { z-index: 4; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Social Media (Modul aus RP Orbit übernommen). Lag dort in <style>-Blöcken
   der Partials; hier zentral, weil Partial-CSS an dieser Datei vorbei wächst
   und der Konventionswächter (workspace/tests/cases/kopfzeile-komponente.php,
   CSS-Haushalt CODE-01/CODE-02) es sonst zu Recht anzeigt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Social Media — Kalender/Listen-Ansicht (social-media.php) ── */
  .sm-cal-nav{display:flex;align-items:center;gap:.5rem}
  .sm-cal-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:.5rem;border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground));cursor:pointer}
  .sm-cal-btn:hover{background:hsl(var(--muted))}
  .sm-grid{display:none}
  .sm-agenda{display:block}
  @media(min-width:1024px){.sm-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:hsl(var(--border));border:1px solid hsl(var(--border));border-radius:1rem;overflow:hidden}.sm-agenda{display:none}}
  .sm-grid-head{background:hsl(var(--muted));padding:.5rem;font-size:.75rem;font-weight:600;color:hsl(var(--muted-foreground));text-align:center;text-transform:uppercase;letter-spacing:.04em}
  .sm-cell{background:hsl(var(--card));min-height:7.5rem;padding:.4rem;display:flex;flex-direction:column;gap:.25rem;position:relative}
  .sm-cell-off{background:hsl(var(--muted)/.35)}
  .sm-cell-day{font-size:.75rem;font-weight:600;color:hsl(var(--muted-foreground));display:flex;align-items:center;justify-content:space-between}
  .sm-cell-today .sm-cell-day span {background:hsl(var(--primary-strong));color:hsl(var(--primary-foreground));border-radius:999px;width:1.5rem;height:1.5rem;display:inline-flex;align-items:center;justify-content:center}
  .sm-cell-add{opacity:0;color:hsl(var(--muted-foreground));border-radius:.375rem;padding:.1rem}
  .sm-cell:hover .sm-cell-add{opacity:1}
  .sm-cell-add:hover{background:hsl(var(--muted))}
  .sm-chip{display:flex;align-items:center;gap:.35rem;font-size:.72rem;line-height:1.2;padding:.25rem .4rem;border-radius:.4rem;border-left:3px solid;background:hsl(var(--muted)/.6);color:hsl(var(--foreground));text-decoration:none;overflow:hidden}
  .sm-chip:hover{background:hsl(var(--muted))}
  .sm-chip-time{font-variant-numeric:tabular-nums;color:hsl(var(--muted-foreground));flex-shrink:0}
  .sm-chip-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .sm-chip-draft{border-color:#9ca3af}.sm-chip-review{border-color:#f59e0b}.sm-chip-scheduled{border-color:#3b82f6}.sm-chip-publishing{border-color:#3b82f6}
  .sm-chip-published{border-color:#16a34a}.sm-chip-partial{border-color:#f59e0b}.sm-chip-failed{border-color:#dc2626}
  .sm-ti{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:.3rem;background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
  .sm-ti-ok{background:hsl(var(--tone-ok-bg));color:hsl(var(--tone-ok-fg))}.sm-ti-bad{background:hsl(var(--tone-bad-bg));color:hsl(var(--tone-bad-fg))}
  .sm-thumb{width:2.75rem;height:2.75rem;border-radius:.5rem;background:hsl(var(--muted)) center/cover no-repeat;flex-shrink:0}
  .sm-thumb-empty{display:flex;align-items:center;justify-content:center;color:hsl(var(--muted-foreground))}
  .sm-agenda-day{display:flex;gap:.75rem;padding:.75rem 0;border-top:1px solid hsl(var(--border))}
  .sm-agenda-day:first-child{border-top:0}
  .sm-agenda-date{width:3.25rem;flex-shrink:0;text-align:center}
  .sm-agenda-date b{display:block;font-size:1.25rem;line-height:1.1}
  .sm-agenda-date span{font-size:.7rem;color:hsl(var(--muted-foreground));text-transform:uppercase}
  .sm-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  @media(min-width:768px){.sm-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
  .sm-bars{display:flex;align-items:flex-end;gap:2px;height:160px;border-bottom:1px solid hsl(var(--border));position:relative}
  .sm-bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0;cursor:default}
  .sm-bar-col:hover .sm-bar{opacity:.75}
  .sm-bar{width:100%;max-width:24px;background:hsl(var(--primary));border-radius:4px 4px 0 0}
  .sm-bar-lbl{font-size:.65rem;color:hsl(var(--muted-foreground));margin-top:.25rem;white-space:nowrap}
  .sm-hbar{height:.6rem;border-radius:.3rem;background:hsl(var(--primary))}
  .sm-two{display:grid;grid-template-columns:1fr;gap:1rem}
  @media(min-width:1024px){.sm-two{grid-template-columns:1fr 1fr}}
  .sm-idea{border:1px solid hsl(var(--border));border-radius:.75rem;padding:.75rem;display:flex;gap:.75rem;align-items:flex-start}
  .sm-idea-cap{white-space:pre-wrap;font-size:.8125rem;color:hsl(var(--muted-foreground));margin-top:.25rem;max-height:6.5rem;overflow:hidden}
  .sm-chip[draggable="true"]{cursor:grab}
  .sm-cell.is-over{outline:2px dashed hsl(var(--primary));outline-offset:-2px;background:hsl(var(--primary)/.06)}
  .sm-chip.is-dragging{opacity:.4}
  .sm-cmt{border:1px solid hsl(var(--border));border-radius:.75rem;padding:.75rem;background:hsl(var(--card))}
  .sm-cmt.is-open{border-left:3px solid hsl(var(--primary))}
  .sm-cmt-reply{margin-left:1.25rem;padding-left:.6rem;border-left:2px solid hsl(var(--border));margin-top:.4rem;font-size:.8125rem}
  .sm-cmt-act{display:inline-flex;align-items:center;gap:.25rem;border:1px solid hsl(var(--border));border-radius:.4rem;padding:.2rem .5rem;font-size:.72rem;font-weight:500;cursor:pointer;background:hsl(var(--card))}
  .sm-cmt-act:hover{background:hsl(var(--muted))}
  .sm-sugg{border:1px solid hsl(var(--primary)/.3);background:hsl(var(--primary)/.05);border-radius:.5rem;padding:.4rem .6rem;font-size:.8125rem;cursor:pointer;text-align:left}
  .sm-sugg:hover{background:hsl(var(--primary-soft))}
  .sm-heat{display:grid;grid-template-columns:2.2rem repeat(24,minmax(0,1fr));gap:2px;font-size:.6rem}
  .sm-heat-cell{aspect-ratio:1/1;border-radius:2px;background:hsl(var(--muted));position:relative}
  .sm-heat-lbl{color:hsl(var(--muted-foreground));display:flex;align-items:center;justify-content:center}
  .sm-line{width:100%;height:120px;display:block}
  .sm-series{border:1px solid hsl(var(--border));border-radius:.75rem;padding:.75rem}
  .sm-wd{display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;border:1px solid hsl(var(--border));border-radius:.5rem;font-size:.75rem;font-weight:500;cursor:pointer}
  .sm-wd.is-on {background:hsl(var(--primary-strong));color:hsl(var(--primary-foreground));border-color:hsl(var(--primary-strong))}

/* ── Social Media — Beitrags-Editor (social-media-editor.php) ── */
  .sme-cols{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start}
  @media(min-width:1024px){.sme-cols{grid-template-columns:minmax(0,1fr) 22rem}}
  @media(min-width:1280px){.sme-cols{grid-template-columns:minmax(0,1fr) 24rem}}
  .sme-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .sme-tile{border:1px solid hsl(var(--border));border-radius:.75rem;padding:.6rem .5rem;text-align:center;cursor:pointer;font-size:.8125rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;background:hsl(var(--card))}
  .sme-tile input{position:absolute;opacity:0;pointer-events:none}
  .sme-tile.is-on{border-color:hsl(var(--primary));background:hsl(var(--primary)/.08);color:hsl(var(--primary-text))}
  .sme-tile.is-off{opacity:.6;cursor:not-allowed}
  .sme-ch{display:flex;align-items:center;gap:.6rem;border:1px solid hsl(var(--border));border-radius:.75rem;padding:.5rem .75rem;cursor:pointer;background:hsl(var(--card))}
  .sme-ch.is-on{border-color:hsl(var(--primary));background:hsl(var(--primary)/.06)}
  .sme-ch input{accent-color:hsl(var(--primary))}
  .sme-avatar{width:2rem;height:2rem;border-radius:999px;background:hsl(var(--muted)) center/cover no-repeat;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:hsl(var(--muted-foreground))}
  .sme-ai-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
  .sme-ai-btn{display:inline-flex;align-items:center;gap:.35rem;border:1px solid hsl(var(--primary)/.35);background:hsl(var(--primary)/.06);color:hsl(var(--primary-text));border-radius:.5rem;padding:.35rem .6rem;font-size:.75rem;font-weight:500;cursor:pointer}
  .sme-ai-btn:hover{background:hsl(var(--primary-soft))}
  .sme-ai-btn:disabled{opacity:.5;cursor:not-allowed}
  .sme-counter{font-size:.7rem;color:hsl(var(--muted-foreground));display:flex;gap:.75rem;justify-content:flex-end;margin-top:.25rem}
  .sme-counter .over{color:hsl(var(--tone-bad-fg));font-weight:600}
  .sme-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.25rem,1fr));gap:.5rem}
  .sme-m{position:relative;border:1px solid hsl(var(--border));border-radius:.75rem;overflow:hidden;background:hsl(var(--muted))}
  .sme-m-img{aspect-ratio:1/1;background:center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:hsl(var(--muted-foreground))}
  .sme-m-acts{display:flex;justify-content:space-between;gap:.1rem;padding:.25rem;background:hsl(var(--card))}
  .sme-m-acts button{padding:.2rem;border-radius:.3rem;color:hsl(var(--muted-foreground))}
  .sme-m-acts button:hover{background:hsl(var(--muted))}
  /* Bild-Overlays und Plattform-Vorschau: bewusst feste Farben (über dem Foto bzw. wie auf
     Facebook/Instagram), in beiden Themen gleich — Marke „feste Farbe“ (UI-Audit CODE-08). */
  .sme-m-hint{/*feste Farbe*/position:absolute;top:.3rem;left:.3rem;background:#f59e0b;color:#fff;border-radius:999px;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}
  .sme-m-n{/*feste Farbe*/position:absolute;top:.3rem;right:.3rem;background:rgba(0,0,0,.55);color:#fff;border-radius:999px;font-size:.65rem;padding:.1rem .4rem}
  .sme-drop{border:2px dashed hsl(var(--border));border-radius:.75rem;padding:1rem;text-align:center;color:hsl(var(--muted-foreground));font-size:.8125rem;cursor:pointer}
  .sme-drop.is-over{border-color:hsl(var(--primary));background:hsl(var(--primary)/.05)}
  .sme-prev{/*feste Farbe*/border:1px solid hsl(var(--border));border-radius:1rem;overflow:hidden;background:#fff;color:#111;font-size:.8125rem}
  .sme-prev-head{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem}
  .sme-prev-img{/*feste Farbe*/aspect-ratio:1/1;background:#e5e7eb center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#9ca3af}
  .sme-prev-img.r45{aspect-ratio:4/5}.sme-prev-img.r916{aspect-ratio:9/16}
  .sme-prev-body{padding:.6rem .75rem;white-space:pre-wrap;word-break:break-word;line-height:1.35}
  .sme-prev-more{/*feste Farbe*/color:#6b7280}
  .sme-prev-icons{/*feste Farbe*/display:flex;gap:.75rem;padding:.4rem .75rem 0;color:#111}
  .sme-prev-link{/*feste Farbe*/border:1px solid #e5e7eb;background:#f3f4f6;padding:.5rem .75rem;font-size:.75rem;color:#6b7280;word-break:break-all}
  .sme-story{/*feste Farbe*/position:relative;aspect-ratio:9/16;border-radius:1rem;overflow:hidden;background:#111 center/cover no-repeat;max-width:16rem;margin:0 auto}
  .sme-story-bar{/*feste Farbe*/position:absolute;top:.5rem;left:.5rem;right:.5rem;height:3px;background:rgba(255,255,255,.5);border-radius:2px}
  .sme-story-head{/*feste Farbe*/position:absolute;top:1rem;left:.6rem;display:flex;align-items:center;gap:.4rem;color:#fff;font-size:.75rem;text-shadow:0 1px 2px rgba(0,0,0,.6)}
  .sme-tabs{display:inline-flex;gap:.25rem;background:hsl(var(--muted)/.6);padding:.2rem;border-radius:.6rem}
  .sme-tabs button{padding:.25rem .6rem;border-radius:.45rem;font-size:.75rem;font-weight:500;color:hsl(var(--muted-foreground))}
  .sme-tabs button.is-on{background:hsl(var(--card));color:hsl(var(--foreground));box-shadow:0 1px 2px rgba(0,0,0,.08)}
  .sme-res{border:1px solid hsl(var(--border));border-radius:.75rem;padding:.75rem}
  .sme-stat{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;color:hsl(var(--muted-foreground))}
  .sme-cmt{border-top:1px solid hsl(var(--border));padding:.5rem 0}
  .sme-cmt-reply{margin-left:1.25rem;padding-left:.5rem;border-left:2px solid hsl(var(--border));margin-top:.35rem}
  .sme-chip{display:inline-flex;align-items:center;gap:.25rem;border:1px solid hsl(var(--border));border-radius:999px;padding:.2rem .6rem;font-size:.75rem;cursor:pointer;background:hsl(var(--card))}
  .sme-chip.is-on{border-color:hsl(var(--primary));background:hsl(var(--primary-soft));color:hsl(var(--primary-text))}
  .sme-warn{border:1px solid hsl(var(--tone-warn-border));background:hsl(var(--tone-warn-bg));color:hsl(var(--tone-warn-fg));border-radius:.75rem;padding:.6rem .75rem;font-size:.8125rem}
  .sme-warn ul{padding-left:1.1rem;list-style:disc}
  .sme-promo{border:1px dashed hsl(var(--primary)/.4);background:hsl(var(--primary)/.04);border-radius:.6rem;padding:.5rem .6rem}
  .sme-note{border-top:1px solid hsl(var(--border));padding:.5rem 0}
  .sme-note:first-child{border-top:0;padding-top:0}
  .sme-hist{font-size:.75rem;color:hsl(var(--muted-foreground));padding:.25rem 0;border-top:1px solid hsl(var(--border)/.5)}
  .sme-m-alt{/*feste Farbe*/position:absolute;bottom:2.4rem;left:.3rem;background:rgba(0,0,0,.55);color:#fff;border-radius:.3rem;font-size:.6rem;padding:.05rem .3rem}

/* ── Social Media — Meta-Anleitung (Modal) (_meta-anleitung-modal.php) ── */
  .mg-body{font-size:.875rem;line-height:1.55}
  .mg-body h3{font-size:1rem;font-weight:600;margin:1.75rem 0 .5rem;padding-top:.25rem;display:flex;align-items:center;gap:.5rem;scroll-margin-top:.5rem}
  .mg-body h3:first-child{margin-top:0}
  .mg-body h3 .mg-num{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;background:hsl(var(--primary-soft));color:hsl(var(--primary-text));font-size:.75rem;font-weight:600;flex-shrink:0}
  .mg-body p{margin:0 0 .6rem}
  .mg-body ol,.mg-body ul{margin:0 0 .75rem;padding-left:1.35rem}
  .mg-body ol{list-style:decimal}.mg-body ul{list-style:disc}
  .mg-body li{margin:0 0 .35rem}
  .mg-body code{font-size:.8rem;background:hsl(var(--muted));padding:.05rem .35rem;border-radius:.3rem;word-break:break-all}
  .mg-body .mg-path{font-weight:500;color:hsl(var(--foreground))}
  .mg-note{border-left:3px solid hsl(var(--primary));background:hsl(var(--primary)/.06);padding:.6rem .75rem;border-radius:.5rem;margin:0 0 .75rem}
  .mg-warn{border-left:3px solid #f59e0b;background:hsl(var(--tone-warn-bg));color:hsl(var(--tone-warn-fg));padding:.6rem .75rem;border-radius:.5rem;margin:0 0 .75rem}
  .mg-toc{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
  .mg-toc button{border:1px solid hsl(var(--border));border-radius:999px;padding:.25rem .7rem;font-size:.75rem;font-weight:500;color:hsl(var(--muted-foreground));background:hsl(var(--card));cursor:pointer}
  .mg-toc button:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
  .mg-table{width:100%;border-collapse:collapse;font-size:.8125rem;margin:0 0 .75rem}
  .mg-table th,.mg-table td{text-align:left;padding:.45rem .6rem;border-top:1px solid hsl(var(--border));vertical-align:top}
  .mg-table th{background:hsl(var(--muted)/.5);font-weight:500;border-top:0}
  .mg-check li{list-style:none;position:relative;padding-left:1.5rem}
  .mg-check li::before{content:'';position:absolute;left:0;top:.2rem;width:.9rem;height:.9rem;border:1.5px solid hsl(var(--border));border-radius:.25rem}

/* ============================================================================
   Aufgaben — Listenansicht, Abschnitte, Pins, Einzelstatus, Erinnern
   (Überarbeitung 2026-10-20). Liste und Karten teilen sich die Datenattribute
   der Filter (.task-item); hier stehen nur Form und Abstände.
   ============================================================================ */
.extr-task-section + .extr-task-section { margin-top: 1.5rem; }
/* Avatar-Stapel der Zuständigen (in rp_orbit ein Bestandsbaustein) */
.extr-avatar-stack > * + * { margin-left: -0.5rem; }
.extr-task-section-head {
  display: flex; align-items: center; gap: .5rem;
  padding: 0 .25rem .625rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.extr-task-section-head svg { height: .875rem; width: .875rem; flex: 0 0 auto; }
.extr-task-section-head .extr-pill-count { margin-left: .125rem; }
.extr-section-head > .extr-task-section-head { padding-bottom: 0; }

/* Liste: eine Karte, Zeilen mit Trennlinie */
.extr-task-list, .extr-rowlist {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  overflow: hidden;
}
.extr-task-row, .extr-rowlist-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "check main actions" "check meta actions";
  column-gap: .875rem; row-gap: .375rem;
  align-items: center;
  padding: .875rem 1rem;
  border-top: 1px solid hsl(var(--border) / .6);
  cursor: pointer;
  transition: background-color .15s;
}
.extr-task-row:first-child, .extr-rowlist-row:first-child { border-top: 0; }
.extr-task-row:hover, .extr-rowlist-row:hover { background: hsl(var(--muted) / .45); }
.extr-task-check { grid-area: check; align-self: start; margin-top: .2rem; }
.extr-task-main  { grid-area: main; min-width: 0; }
.extr-task-title { font-weight: 500; font-size: .9375rem; line-height: 1.35; }
.extr-task-title a:hover { text-decoration: underline; }
.extr-task-from  { font-weight: 400; font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.extr-task-from strong { font-weight: 500; color: hsl(var(--foreground)); }
.extr-task-sub {
  font-size: .8125rem; color: hsl(var(--muted-foreground));
  margin-top: .15rem;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.extr-task-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .45rem; }
.extr-task-counts { display: inline-flex; align-items: center; gap: .75rem; margin-left: .25rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.extr-task-counts > * { display: inline-flex; align-items: center; gap: .3rem; }
.extr-task-counts svg { height: .8rem; width: .8rem; }
.extr-task-meta {
  grid-area: meta;
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1rem;
  min-width: 0; font-size: .8125rem; color: hsl(var(--muted-foreground));
}
.extr-task-meta > * { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.extr-task-meta svg { height: .875rem; width: .875rem; flex: 0 0 auto; }
.extr-task-due.is-overdue { color: hsl(var(--destructive)); font-weight: 500; }
.extr-task-status > * { white-space: nowrap; }
.extr-task-actions { grid-area: actions; display: inline-flex; align-items: center; gap: .125rem; align-self: start; }
/* Spalten erst ab 1280 px: daneben steht die Seitenleiste, darunter bliebe dem
   Titel sonst kaum Platz und die Zeile bräche in Zweizeiler. */
@media (min-width: 1280px) {
  .extr-task-row {
    grid-template-columns: auto minmax(0, 1fr) 11rem 7rem 10rem auto;
    grid-template-areas: "check main people due status actions";
    row-gap: 0;
  }
  .extr-task-meta   { display: contents; }
  .extr-task-people { grid-area: people; }
  .extr-task-due    { grid-area: due; }
  .extr-task-status { grid-area: status; }
  .extr-task-check, .extr-task-actions { align-self: center; margin-top: 0; }
}
.extr-task-row.is-done, .extr-task-card.is-done { opacity: .68; }
.extr-task-row.is-done .extr-task-title, .extr-task-card.is-done .extr-task-title {
  text-decoration: line-through; color: hsl(var(--muted-foreground)); font-weight: 400;
}
.extr-task-row.is-pinned { box-shadow: inset 3px 0 0 hsl(var(--primary)); }
.extr-task-pin { color: hsl(var(--muted-foreground)); }
.extr-task-pin.is-on { color: hsl(var(--primary-text)); }
.extr-task-pin.is-on svg { fill: hsl(var(--primary) / .18); }

/* Karten: Kopf mit Häkchen + Pin, Titel, Beschreibung, Chips, Fußzeile */
.extr-task-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  padding: 1.125rem 1.125rem 1rem;
  display: flex; flex-direction: column; gap: .75rem;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.extr-task-card:hover { box-shadow: var(--extr-shadow-md); }
.extr-task-card.is-pinned { border-color: hsl(var(--primary) / .5); }
.extr-task-card-head { display: flex; align-items: flex-start; gap: .75rem; }
.extr-task-card-head .extr-task-main { flex: 1 1 auto; }
.extr-task-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: auto; padding-top: .75rem;
  border-top: 1px solid hsl(var(--border) / .6);
  font-size: .8125rem; color: hsl(var(--muted-foreground));
}
.extr-task-card-foot > * { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.extr-task-card-foot > :last-child { flex: 0 0 auto; white-space: nowrap; gap: .75rem; }
.extr-task-card-foot .extr-task-due { display: inline-flex; align-items: center; gap: .3rem; }
.extr-task-card-foot svg { height: .875rem; width: .875rem; flex: 0 0 auto; }

/* Chip „eigener Status je Teilnehmer" (2/3 erledigt) */
.extr-task-split {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  padding: .15rem .55rem; border-radius: 9999px;
  font-size: .6875rem; font-weight: 500;
  background: hsl(var(--tone-info-bg)); color: hsl(var(--tone-info-fg));
}
.extr-task-split svg { height: .75rem; width: .75rem; }

/* Beteiligten-Stati im Detail */
.extr-task-states { display: flex; flex-direction: column; gap: .5rem; }
.extr-task-state {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .75rem; border: 1px solid hsl(var(--border)); border-radius: .75rem;
}
.extr-task-state.is-me { border-color: hsl(var(--primary) / .45); background: hsl(var(--primary) / .04); }
.extr-task-state-name { flex: 1 1 auto; min-width: 0; font-size: .875rem; font-weight: 500; }
.extr-task-state-btns { display: inline-flex; gap: .375rem; flex-wrap: wrap; }

/* Wahlfelder (Erinnern-Fenster) */
.extr-task-recipients { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 640px) { .extr-task-recipients { grid-template-columns: 1fr 1fr; } }
.extr-task-choice {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border: 1px solid hsl(var(--border)); border-radius: .75rem;
  font-size: .875rem; cursor: pointer; background: hsl(var(--card));
}
.extr-task-choice:hover { background: hsl(var(--muted) / .5); }
.extr-task-choice input { accent-color: hsl(var(--primary)); flex: 0 0 auto; }
.extr-task-choice--person { display: flex; }

/* Infosymbol mit Erklärtext (Tooltip) — Text liegt zusätzlich im aria-label */
.extr-tip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 1.125rem; width: 1.125rem; border-radius: 9999px;
  color: hsl(var(--muted-foreground)); cursor: help; vertical-align: middle;
}
.extr-tip svg { height: .9rem; width: .9rem; }
.extr-tip::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + .5rem); transform: translateX(-50%);
  width: 18rem; max-width: 80vw;
  padding: .625rem .75rem; border-radius: .625rem;
  background: hsl(var(--foreground)); color: hsl(var(--background));
  font-size: .75rem; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal;
  box-shadow: var(--extr-shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 40;
}
.extr-tip:hover::after, .extr-tip:focus-visible::after { opacity: 1; }
.extr-tip:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--primary) / .25); }
.extr-tip--left::after { left: auto; right: 0; transform: none; }

/* ── Aufgaben-Detail: zweispaltig ab 1024 px (Inhalt | Status + Details), Karten mit Kopfzeile ── */
.extr-task-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; max-width: 72rem; }
.extr-task-detail-main, .extr-task-detail-side { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
@media (min-width: 1024px) {
  .extr-task-detail { grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; }
}
/* Unter 1024 px eine Spalte in Lesereihenfolge: Aufgabe, Status, Unteraufgaben/Anlagen/Kommentare, Details —
   der Status soll am Handy nicht erst hinter den Kommentaren kommen. */
@media (max-width: 1023px) {
  .extr-task-detail-main, .extr-task-detail-side { display: contents; }
  .extr-task-detail > * > * { order: 2; }
  .extr-task-detail-main > :first-child { order: 0; }
  .extr-task-detail-side > :first-child { order: 1; }
  .extr-task-detail-side > :last-child { order: 3; }
}
.extr-task-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .875rem 1.25rem; border-bottom: 1px solid hsl(var(--border));
}
.extr-task-panel-head h2 { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 600; }
.extr-task-panel-head h2 svg { height: 1rem; width: 1rem; color: hsl(var(--muted-foreground)); flex: 0 0 auto; }
.extr-task-panel-body { padding: 1.25rem; }
.extr-task-headline { font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.extr-task-desc { margin-top: .75rem; font-size: .9375rem; line-height: 1.65; white-space: pre-line; color: hsl(var(--foreground) / .85); }
.extr-task-byline { margin-top: 1rem; display: flex; align-items: center; gap: .4rem; font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.extr-task-byline svg { height: .875rem; width: .875rem; }
.extr-task-byline strong { font-weight: 500; color: hsl(var(--foreground)); }
.extr-task-progress { height: .5rem; border-radius: 9999px; background: hsl(var(--muted)); overflow: hidden; }
.extr-task-progress > div { height: 100%; border-radius: 9999px; background: hsl(var(--primary)); transition: width .25s; }
.extr-task-progress.is-complete > div { background: hsl(var(--tone-ok-fg)); }
.extr-task-sub-list { display: flex; flex-direction: column; gap: .125rem; margin: 0 -.5rem; }
.extr-task-sub-row { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border-radius: .625rem; cursor: pointer; }
.extr-task-sub-row:hover { background: hsl(var(--muted) / .5); }
.extr-task-sub-row.is-done span { text-decoration: line-through; color: hsl(var(--muted-foreground)); }
.extr-task-status-choice { display: flex; flex-direction: column; gap: .5rem; }
.extr-task-status-choice .td-status-btn {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  padding: .625rem .875rem; border: 1px solid hsl(var(--border)); border-radius: .75rem;
  background: hsl(var(--card)); color: hsl(var(--muted-foreground));
  font-size: .875rem; font-weight: 500; text-align: left; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.extr-task-status-choice .td-status-btn svg { height: 1.1rem; width: 1.1rem; flex: 0 0 auto; }
.extr-task-status-choice .td-status-btn:hover { background: hsl(var(--muted) / .5); }
.extr-task-status-choice .td-status-btn.is-on { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .08); color: hsl(var(--foreground)); }
.extr-task-status-choice .td-status-btn.is-on svg { color: hsl(var(--primary-text)); }
.extr-task-status-choice .td-status-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--primary) / .25); }
/* Unteraufgaben-Sperre (2026-11-02): gesperrter Statusknopf, Hinweiszeile mit Schloss, Schalter unter den
   Unteraufgaben, gesperrtes Listen-Häkchen. Nur Basis-Tokens (vbm kennt keine --tone-*). */
.extr-task-status-choice .td-status-btn:disabled { opacity: .5; cursor: not-allowed; }
.extr-task-status-choice .td-status-btn:disabled:hover { background: hsl(var(--card)); }
.extr-task-gate-note {
  display: flex; align-items: flex-start; gap: .4rem; margin-top: .625rem;
  font-size: .75rem; line-height: 1.45; color: hsl(var(--muted-foreground));
}
.extr-task-gate-note svg { height: .875rem; width: .875rem; flex: 0 0 auto; margin-top: .1rem; }
.extr-task-gate-choice { margin-top: .5rem; }
.extr-task-check:disabled { cursor: not-allowed; opacity: .45; }
.extr-task-facts { display: flex; flex-direction: column; }
.extr-task-fact { display: flex; flex-direction: column; gap: .35rem; padding: .75rem 0; border-top: 1px solid hsl(var(--border) / .6); }
.extr-task-fact:first-child { border-top: 0; padding-top: 0; }
.extr-task-fact:last-child { padding-bottom: 0; }
.extr-task-fact dt, .extr-task-fact-label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: hsl(var(--muted-foreground));
}
.extr-task-fact dd { font-size: .875rem; font-weight: 500; margin: 0; }
.extr-task-person { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .15rem 0; }
.extr-task-fact-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; font-size: .8125rem; font-weight: 500; color: hsl(var(--primary-text)); background: none; border: 0; padding: 0; cursor: pointer; }
.extr-task-fact-link svg { height: .875rem; width: .875rem; }
.extr-task-fact-link:hover { text-decoration: underline; }
.extr-task-comments { display: flex; flex-direction: column; gap: .875rem; margin-bottom: 1rem; }
.extr-task-comment { display: flex; align-items: flex-start; gap: .75rem; }
.extr-task-comment-bubble { flex: 1 1 auto; min-width: 0; background: hsl(var(--muted) / .45); border-radius: .875rem; padding: .625rem .875rem; }
.extr-task-comment-meta { display: flex; align-items: baseline; gap: .5rem; font-size: .8125rem; }
.extr-task-comment-meta strong { font-weight: 600; }
.extr-task-comment-meta time { color: hsl(var(--muted-foreground)); font-size: .75rem; }
.extr-task-comment-text { font-size: .875rem; line-height: 1.55; white-space: pre-line; margin-top: .15rem; }
.extr-task-composer { display: flex; align-items: flex-start; gap: .5rem; }

/* ============================================================================
   Build-Nachtrag (UI-Audit CODE-06, 2026-09-16)
   Tailwind ist vorkompiliert und gepurged (CLAUDE-UI.md §2.1): Klassen, die beim
   letzten Build nicht im Quelltext standen, hatten keine Regel — Hover-Töne,
   Fokusringe und Dateiknopf-Stile passierten im Browser still nicht. Hier stehen
   genau diese Utilities, so wie Tailwind v4 sie erzeugen würde, in derselben
   Ebene (@layer utilities), damit Varianten und Reihenfolge stimmen.
   Neue Utility, die im Build fehlt? HIER ergänzen (in allen drei Installationen
   gleich) — der Wächter „Utilities ohne Regel im Build" steht auf 0.
   Farben der Schema-Tokens über hsl(var(--…)), damit der Dunkelmodus folgt (§2.5).
   ============================================================================ */
@layer utilities {
  /* Maße und Abstände */
  .h-0\.5 { height: calc(var(--spacing) * .5); }
  .w-28 { width: calc(var(--spacing) * 28); }
  .w-56 { width: calc(var(--spacing) * 56); }
  .max-h-60 { max-height: calc(var(--spacing) * 60); }
  .left-6 { left: calc(var(--spacing) * 6); }
  .right-6 { right: calc(var(--spacing) * 6); }
  .mt-px { margin-top: 1px; }
  .pb-2\.5 { padding-bottom: calc(var(--spacing) * 2.5); }
  .bottom-4 { bottom: calc(var(--spacing) * 4); }
  .mr-auto { margin-right: auto; }
  .pl-1\.5 { padding-left: calc(var(--spacing) * 1.5); }
  .pr-0\.5 { padding-right: calc(var(--spacing) * .5); }
  .py-7 { padding-block: calc(var(--spacing) * 7); }
  .gap-x-5 { column-gap: calc(var(--spacing) * 5); }
  .gap-y-3 { row-gap: calc(var(--spacing) * 3); }
  .rounded-l-lg { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); }
  .rounded-r-lg { border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
  .first\:mt-0:first-child { margin-top: 0; }
  .focus-visible\:underline:focus-visible { text-decoration-line: underline; }
  .last\:mb-0:last-child { margin-bottom: 0; }
  .font-sans { font-family: var(--font-sans); }
  .cursor-grab { cursor: grab; }
  .active\:cursor-grabbing:active { cursor: grabbing; }

  /* Flächen- und Schrifttöne */
  .bg-amber-50\/50 { background-color: color-mix(in oklab, var(--color-amber-50) 50%, transparent); }
  .bg-amber-50\/60 { background-color: color-mix(in oklab, var(--color-amber-50) 60%, transparent); }
  .bg-amber-50\/70 { background-color: color-mix(in oklab, var(--color-amber-50) 70%, transparent); }
  .bg-green-50\/50 { background-color: color-mix(in oklab, var(--color-green-50) 50%, transparent); }
  .bg-green-50\/60 { background-color: color-mix(in oklab, var(--color-green-50) 60%, transparent); }
  .bg-blue-400\/60 { background-color: color-mix(in oklab, var(--color-blue-400) 60%, transparent); }
  .bg-primary\/70 { background-color: color-mix(in oklab, var(--color-primary) 70%, transparent); }
  .bg-white\/95 { background-color: color-mix(in oklab, var(--color-white) 95%, transparent); }
  .bg-white\/70 { background-color: color-mix(in oklab, var(--color-white) 70%, transparent); }
  .bg-amber-50\/40 { background-color: color-mix(in oklab, var(--color-amber-50) 40%, transparent); }
  .border-cyan-200 { border-color: var(--color-cyan-200); }
  .text-muted-foreground\/30 { color: hsl(var(--muted-foreground) / .3); }
  .disabled\:opacity-30:disabled { opacity: .3; }
  .text-muted-foreground\/40 { color: hsl(var(--muted-foreground) / .4); }
  .text-muted-foreground\/50 { color: hsl(var(--muted-foreground) / .5); }
  .text-muted-foreground\/60 { color: hsl(var(--muted-foreground) / .6); }
  .text-muted-foreground\/70 { color: hsl(var(--muted-foreground) / .7); }
  .text-red-600\/90 { color: color-mix(in oklab, var(--color-red-600) 90%, transparent); }
  .active\:bg-primary\/10:active { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); }
  /* Trennlinien: Farbe der divide-y-Linien (Ausgleich siehe .divide-y weiter oben) */
  :where(.divide-border > :not(:last-child)) { border-color: hsl(var(--border)); }
  :where(.divide-border\/60 > :not(:last-child)) { border-color: hsl(var(--border) / .6); }


  /* Ringe */
  .ring-amber-200 { --tw-ring-color: var(--color-amber-200); }
  .ring-primary\/15 { --tw-ring-color: color-mix(in oklab, var(--color-primary) 15%, transparent); }
  .ring-primary\/20 { --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent); }
  .focus\:ring-amber-400\/40:focus { --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 40%, transparent); }
  .focus\:ring-primary\/30:focus { --tw-ring-color: color-mix(in oklab, var(--color-primary) 30%, transparent); }

  /* Dateiauswahl-Knopf (input type=file) */
  .file\:mr-3::file-selector-button { margin-right: calc(var(--spacing) * 3); }
  .file\:px-3::file-selector-button { padding-inline: calc(var(--spacing) * 3); }
  .file\:py-1\.5::file-selector-button { padding-block: calc(var(--spacing) * 1.5); }
  .file\:rounded-lg::file-selector-button { border-radius: var(--radius-lg); }
  .file\:border-border::file-selector-button { border-color: hsl(var(--border)); }
  .file\:bg-white::file-selector-button { background-color: var(--color-white); }
  .file\:bg-muted::file-selector-button { background-color: hsl(var(--muted)); }

  /* Hover-Rückmeldungen (nur bei Zeigegeräten, wie Tailwind v4) */
  @media (hover: hover) {
    .hover\:bg-primary\/5:hover { background-color: color-mix(in oklab, var(--color-primary) 5%, transparent); }
    .hover\:bg-primary\/20:hover { background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); }
    .hover\:bg-amber-700:hover { background-color: var(--color-amber-700); }
    .hover\:bg-violet-100:hover { background-color: var(--color-violet-100); }
    .hover\:bg-violet-700:hover { background-color: var(--color-violet-700); }
    .hover\:border-primary\/40:hover { border-color: color-mix(in oklab, var(--color-primary) 40%, transparent); }
    .hover\:border-primary\/60:hover { border-color: color-mix(in oklab, var(--color-primary) 60%, transparent); }
    .hover\:border-red-200:hover { border-color: var(--color-red-200); }
    .disabled\:hover\:bg-white:disabled:hover { background-color: var(--color-white); }
    .hover\:file\:bg-muted:hover::file-selector-button { background-color: hsl(var(--muted)); }
    .hover\:file\:bg-muted\/70:hover::file-selector-button { background-color: hsl(var(--muted) / .7); }
    .group-hover\:text-primary:is(:where(.group):hover *) { color: var(--color-primary); }
  }

  /* Bruchstellen: sm = 40rem, lg = 64rem (wie im Build) */
  @media (min-width: 40rem) {
    .sm\:w-8 { width: calc(var(--spacing) * 8); }
    .sm\:w-48 { width: calc(var(--spacing) * 48); } /* 2026-10-20: Einstellungen (einstellungen.php) */
    .sm\:col-span-3 { grid-column: span 3 / span 3; }
  }
  @media (min-width: 64rem) {
    .lg\:p-5 { padding: calc(var(--spacing) * 5); }
    .lg\:w-56 { width: calc(var(--spacing) * 56); }
    .lg\:table-cell { display: table-cell; }
    .lg\:max-w-4xl { max-width: var(--container-4xl); }
  }
}


/* ---- Mein Profil → Benachrichtigungen: Raster Modul × Kanal ------------------
   Eine Zeile je Modul, drei Schalter (Mitteilung, Badge, Push). Auf dem Handy
   bleiben die Schalter als Symbole mit 44-px-Trefferfläche neben dem Modulnamen,
   statt wie früher in umbrechenden Pillen. Die Spaltenköpfe schalten die ganze
   Spalte um. Bewusst ohne .extr-Präfix (Klassenmenge der Bausteine bleibt gleich). */
.notif-grid { display:flex; flex-direction:column; }
.notif-head, .notif-row { display:grid; grid-template-columns:minmax(0,1fr) repeat(3, 3.25rem); align-items:center; column-gap:.25rem; }
.notif-head { padding-bottom:.375rem; border-bottom:1px solid hsl(var(--border)); color:hsl(var(--muted-foreground)); }
.notif-head-mod { font-size:.6875rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.notif-col { display:flex; flex-direction:column; align-items:center; gap:.125rem; padding:.25rem 0; border:0; border-radius:.5rem; background:none; color:inherit; font:inherit; font-size:.625rem; line-height:1.15; cursor:pointer; }
.notif-col:hover, .notif-col:focus-visible { background:hsl(var(--muted) / .6); color:hsl(var(--foreground)); }
.notif-col svg, .notif-col i { width:1rem; height:1rem; }
.notif-row { padding:.25rem 0; }
.notif-row + .notif-row { border-top:1px solid hsl(var(--border)); }
.notif-mod { display:flex; align-items:center; gap:.5rem; min-width:0; font-size:.875rem; font-weight:500; }
.notif-mod > svg, .notif-mod > i { width:1rem; height:1rem; flex-shrink:0; color:hsl(var(--primary-text)); }
.notif-mod > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notif-tog { position:relative; display:flex; align-items:center; justify-content:center; height:2.75rem; cursor:pointer; }
.notif-tog input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.notif-tog > span { display:flex; align-items:center; justify-content:center; width:2.5rem; height:2.25rem; border-radius:.625rem; border:1px solid hsl(var(--border)); color:hsl(var(--muted-foreground)); opacity:.55; transition:background-color .15s, border-color .15s, color .15s, opacity .15s; }
.notif-tog > span svg, .notif-tog > span i { width:1rem; height:1rem; }
.notif-tog:hover > span { opacity:.85; }
.notif-tog input:checked + span { background:hsl(var(--primary-soft)); border-color:hsl(var(--primary) / .4); color:hsl(var(--primary-text)); opacity:1; }
.notif-tog input:focus-visible + span { outline:2px solid hsl(var(--primary) / .5); outline-offset:2px; }
.notif-legend { list-style:none; margin:.875rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; font-size:.75rem; color:hsl(var(--muted-foreground)); }
.notif-legend li { display:flex; align-items:center; gap:.375rem; margin:0; }
.notif-legend svg, .notif-legend i { width:.875rem; height:.875rem; flex-shrink:0; }
.notif-actions { display:flex; justify-content:flex-end; margin-top:1rem; }
@media (max-width:639px) {
  .notif-actions > .extr-btn { width:100%; justify-content:center; }
}
@media (min-width:640px) {
  .notif-head, .notif-row { grid-template-columns:minmax(0,1fr) repeat(3, 5.5rem); }
  .notif-col { font-size:.6875rem; }
}

/* ---- Helpdesk-Ausbau 2026-09 (Feedback AZS) ---------------------------------
   In allen Installationen gleich (azs, rp, aurum, vbm).
   .hd-rich: Ticket-Text und Kommentare aus dem Editor (HD-01) — bereinigtes HTML
   mit Bildern; .hd-rich--plain: Altbestand als Text mit Zeilenumbrüchen. */
.hd-rich { font-size:.875rem; line-height:1.6; overflow-wrap:anywhere; }
.hd-rich > :first-child { margin-top:0; }
.hd-rich > :last-child { margin-bottom:0; }
.hd-rich p { margin:0 0 .5rem; }
.hd-rich h2 { font-size:1.05rem; font-weight:650; margin:1rem 0 .4rem; }
.hd-rich h3, .hd-rich h4 { font-size:.95rem; font-weight:600; margin:.85rem 0 .35rem; }
.hd-rich ul { list-style:disc; padding-left:1.25rem; margin:.25rem 0 .6rem; }
.hd-rich ol { list-style:decimal; padding-left:1.25rem; margin:.25rem 0 .6rem; }
.hd-rich li { margin:.125rem 0; }
.hd-rich a { color:hsl(var(--primary-text)); text-decoration:underline; text-underline-offset:2px; }
.hd-rich strong, .hd-rich b { font-weight:600; }
.hd-rich blockquote { border-left:3px solid hsl(var(--border)); padding-left:.75rem; color:hsl(var(--muted-foreground)); margin:.5rem 0; }
.hd-rich pre, .hd-rich code { font-family: var(--font-mono); font-size:.8125rem; background:hsl(var(--muted)); border-radius:.375rem; }
.hd-rich pre { padding:.5rem .75rem; overflow-x:auto; white-space:pre-wrap; }
.hd-rich code { padding:0 .25rem; }
.hd-rich table { border-collapse:collapse; margin:.5rem 0; font-size:.8125rem; }
.hd-rich th, .hd-rich td { border:1px solid hsl(var(--border)); padding:.3rem .5rem; text-align:left; vertical-align:top; }
.hd-rich img { display:inline-block; max-width:100%; height:auto !important; border-radius:.625rem; border:1px solid hsl(var(--border)); margin:.25rem 0; cursor:zoom-in; }
.hd-rich a:has(> img) { text-decoration:none; }
.hd-rich--plain { white-space:normal; }
/* HD-03: Unterkategorie in der Kategorieverwaltung eingerückt */
.hd-cat-row--sub { margin-left:1.5rem; }
/* HD-07: Auswahlliste zum Tippen (window.extrSelectSearch in app.js) — das Eingabefeld
   trägt die Klassen des versteckten Selects (.extr-select bzw. .extr-filter-select). */
.extr-combo { position:relative; }
.extr-combo--inline { display:inline-block; flex-shrink:0; }
.extr-combo--inline .extr-combo-input { width:13rem; }
.extr-combo-input.extr-filter-select { height:2.375rem; padding-right:2rem; 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 .75rem center; }
.extr-combo-input { text-overflow:ellipsis; }
.extr-combo-list { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:70; min-width:14rem; max-height:16rem; overflow-y:auto; padding:.25rem; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:.75rem; box-shadow:0 12px 32px -12px rgb(0 0 0 / .25); }
.extr-combo-group { padding:.45rem .6rem .2rem; font-size:.6875rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:hsl(var(--muted-foreground)); }
.extr-combo-opt { padding:.45rem .6rem; border-radius:.5rem; font-size:.875rem; cursor:pointer; color:hsl(var(--foreground)); }
.extr-combo-opt--in-group { padding-left:1.1rem; }
.extr-combo-opt.is-current { font-weight:600; }
.extr-combo-opt.is-active, .extr-combo-opt:hover { background:hsl(var(--primary) / .08); color:hsl(var(--primary-text)); }
.extr-combo-empty { padding:.5rem .6rem; font-size:.8125rem; color:hsl(var(--muted-foreground)); }
/* HD-05: Ticket-Suche (Verwaltung) — Treffer und KI-Antwort */
.hd-ks-hit { border:1px solid hsl(var(--border)); border-radius:.75rem; padding:.625rem .75rem; background:hsl(var(--card)); }
.hd-ks-hit-head { display:flex; align-items:baseline; gap:.5rem; min-width:0; }
.hd-ks-ref { font-family: var(--font-mono); font-size:.75rem; color:hsl(var(--primary-text)); text-decoration:none; white-space:nowrap; }
.hd-ks-ref:hover { text-decoration:underline; }
.hd-ks-hit-title { font-size:.875rem; font-weight:600; color:hsl(var(--foreground)); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.hd-ks-hit-title:hover { text-decoration:underline; }
.hd-ks-hit-meta { font-size:.75rem; color:hsl(var(--muted-foreground)); margin-top:.125rem; }
.hd-ks-sol { display:inline-block; padding:0 .4rem; border-radius:999px; background:hsl(var(--tone-ok-bg, 141 84% 93%)); color:hsl(var(--tone-ok-fg, 142 72% 29%)); font-weight:600; }
.hd-ks-snip { font-size:.8125rem; color:hsl(var(--muted-foreground)); margin:.35rem 0 0; overflow-wrap:anywhere; }
.hd-ks-ai { border:1px solid hsl(var(--primary) / .25); background:hsl(var(--primary) / .05); border-radius:.75rem; padding:.75rem .875rem; font-size:.875rem; }
.hd-ks-ai-head { font-size:.6875rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:hsl(var(--primary-text)); margin:0 0 .35rem; }
.hd-ks-ai-text { margin:0; line-height:1.6; white-space:pre-line; }
.hd-ks-ai-note { margin:.5rem 0 0; font-size:.75rem; color:hsl(var(--muted-foreground)); }
/* HD-10: Tabellenansicht des Helpdesks */
.hd-list-row.is-done .hd-list-title a { color:hsl(var(--muted-foreground)); }
.hd-list-title { min-width:14rem; }
.hd-sla { display:inline-block; padding:.05rem .45rem; border-radius:999px; font-size:.75rem; font-weight:500; border:1px solid transparent; }
.hd-sla--ok { background:hsl(var(--tone-ok-bg, 141 84% 93%)); color:hsl(var(--tone-ok-fg, 142 72% 29%)); }
.hd-sla--warning { background:hsl(var(--tone-warn-bg, 48 100% 96%)); color:hsl(var(--tone-warn-fg, 23 83% 31%)); border-color:hsl(var(--tone-warn-border, 46 97% 65%)); }
.hd-sla--breached { background:hsl(var(--tone-bad-bg, 0 93% 94%)); color:hsl(var(--tone-bad-fg, 0 74% 42%)); }
/* HD-11: Helpdesk-Statistik — Säulen und Balken nach CLAUDE-UI §3.15 (wie KI-Verbrauch) */
.hd-st-plot { position:relative; height:220px; margin:1rem 0 0 2.5rem; }
.hd-st-grid { position:absolute; left:0; right:0; border-top:1px solid hsl(var(--border)); }
.hd-st-grid span { position:absolute; right:100%; margin-right:.5rem; transform:translateY(-50%); font-size:11px; color:hsl(var(--muted-foreground)); white-space:nowrap; }
.hd-st-cols { position:absolute; inset:0; display:flex; align-items:flex-end; gap:2px; }
.hd-st-col { flex:1 1 0; min-width:0; height:100%; display:flex; align-items:flex-end; justify-content:center; position:relative; cursor:default; }
.hd-st-colbar { width:100%; max-width:24px; border-radius:4px 4px 0 0; background:hsl(var(--primary)); transition:opacity .12s; }
.hd-st-col:hover .hd-st-colbar, .hd-st-col:focus .hd-st-colbar { opacity:.75; }
.hd-st-peak { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); font-size:11px; color:hsl(var(--foreground)); white-space:nowrap; margin-bottom:2px; }
.hd-st-xaxis { display:flex; gap:2px; margin:.4rem 0 0 2.5rem; }
.hd-st-xaxis span { flex:1 1 0; min-width:0; font-size:11px; color:hsl(var(--muted-foreground)); text-align:center; white-space:nowrap; overflow:visible; }
.hd-st-bar { height:18px; border-radius:0 4px 4px 0; background:hsl(var(--primary)); transition:opacity .12s; }
.hd-st-brow:hover .hd-st-bar, .hd-st-brow:focus .hd-st-bar { opacity:.75; }
.hd-st-blabel { width:11rem; }
.hd-st-bval { width:3.5rem; }
#hd-st-tip { position:absolute; z-index:50; pointer-events:none; transform:translate(-50%, calc(-100% - 8px)); background:hsl(var(--foreground)); color:hsl(var(--background)); font-size:12px; line-height:1.3; padding:.35rem .6rem; border-radius:.4rem; white-space:nowrap; box-shadow:0 6px 20px -8px rgba(0,0,0,.4); }
@media (max-width:639px) { .hd-st-blabel { width:7.5rem; } }
/* HD-12: Antwortvorlagen im Kommentarfeld */
.hd-tpl-pop { position:absolute; left:0; bottom:calc(100% + 6px); z-index:60; width:min(22rem, 80vw); padding:.5rem; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:.75rem; box-shadow:0 12px 32px -12px rgb(0 0 0 / .25); }
.hd-tpl-list { max-height:16rem; overflow-y:auto; margin-top:.4rem; display:flex; flex-direction:column; gap:2px; }
.hd-tpl-item { display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:.45rem .55rem; border-radius:.5rem; border:0; background:none; cursor:pointer; color:hsl(var(--foreground)); }
.hd-tpl-item:hover, .hd-tpl-item:focus-visible { background:hsl(var(--primary) / .08); }
.hd-tpl-item-title { font-size:.875rem; font-weight:600; }
.hd-tpl-item-text { font-size:.75rem; color:hsl(var(--muted-foreground)); }
/* HD-02: Personensuche „Ticket für dritte Person anlegen" */
.hd-proxy-opt { display:flex; flex-direction:column; width:100%; text-align:left; padding:.5rem .75rem; font-size:.875rem; border:0; background:none; cursor:pointer; color:hsl(var(--foreground)); }
.hd-proxy-opt:hover, .hd-proxy-opt:focus-visible { background:hsl(var(--muted)); }
.hd-proxy-opt-name { font-weight:500; }
.hd-proxy-opt-meta { font-size:.75rem; color:hsl(var(--muted-foreground)); }
.hd-proxy-empty { padding:.5rem .75rem; font-size:.875rem; color:hsl(var(--muted-foreground)); }

/* ---- Helpdesk Runde 2 (Feedback AZS 28.09.2026) — in allen Installationen gleich ----
   HD-27 Textfarben und Hervorhebungen aus einer festen Palette (im Editor gewählt, gespeichert als
   Klasse, im Dunkelmodus eigene Töne), HD-28 angehaltene SLA-Frist, Systemeinträge im Verlauf,
   HD-23 Beteiligte als Chips, HD-21 Sammelleiste der Tabellenansicht. */
:root {
  --hd-c-red: 0 74% 45%; --hd-c-orange: 21 90% 40%; --hd-c-green: 142 72% 29%; --hd-c-blue: 224 76% 48%;
  --hd-hl-red: 0 93% 94%; --hd-hl-orange: 34 100% 92%; --hd-hl-green: 141 84% 93%; --hd-hl-blue: 214 95% 93%; --hd-hl-yellow: 55 97% 77%;
}
html[data-theme="dark"] {
  --hd-c-red: 0 94% 78%; --hd-c-orange: 27 96% 67%; --hd-c-green: 142 70% 64%; --hd-c-blue: 213 94% 74%;
  --hd-hl-red: 0 91% 71% / .22; --hd-hl-orange: 27 96% 61% / .22; --hd-hl-green: 142 69% 58% / .2; --hd-hl-blue: 213 94% 68% / .22; --hd-hl-yellow: 50 98% 64% / .3;
}
.hd-tc-red { color:hsl(var(--hd-c-red)); }
.hd-tc-orange { color:hsl(var(--hd-c-orange)); }
.hd-tc-green { color:hsl(var(--hd-c-green)); }
.hd-tc-blue { color:hsl(var(--hd-c-blue)); }
.hd-hl-red, .hd-hl-orange, .hd-hl-green, .hd-hl-blue, .hd-hl-yellow { border-radius:.2rem; padding:0 .12em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.hd-hl-red { background:hsl(var(--hd-hl-red)); }
.hd-hl-orange { background:hsl(var(--hd-hl-orange)); }
.hd-hl-green { background:hsl(var(--hd-hl-green)); }
.hd-hl-blue { background:hsl(var(--hd-hl-blue)); }
.hd-hl-yellow { background:hsl(var(--hd-hl-yellow)); }
/* Editor im Helpdesk: nur die feste Palette, kein freier Farbwähler */
.hd-editor .note-color-select, .hd-editor .note-color-select-btn, .hd-editor .note-holder-custom { display:none !important; }
/* HD-27 schon beim Schreiben wie gespeichert (Feedback 02.11.2026): Der Editor schreibt <font color="#…">
   bzw. style="background-color: rgb(…)" mit den Hellwerten aus extr_helpdesk_palette(); erst beim
   Speichern wird daraus die Klasse. Im Dunkelmodus deshalb dieselben Töne wie die Klassen hd-tc-… und
   hd-hl-…, auch für die Farbfelder und die „letzte Farbe“ am Knopf. Wächter: tests/cases/editor-dunkelmodus.php. */
html[data-theme="dark"] .note-editable font[color="#c81e1e" i] { color:hsl(var(--hd-c-red)); }
html[data-theme="dark"] .note-editable font[color="#c2410c" i] { color:hsl(var(--hd-c-orange)); }
html[data-theme="dark"] .note-editable font[color="#15803d" i] { color:hsl(var(--hd-c-green)); }
html[data-theme="dark"] .note-editable font[color="#1d4ed8" i] { color:hsl(var(--hd-c-blue)); }
html[data-theme="dark"] .note-editable [style*="background-color: rgb(254, 226, 226)"] { background-color:hsl(var(--hd-hl-red)) !important; }
html[data-theme="dark"] .note-editable [style*="background-color: rgb(255, 237, 213)"] { background-color:hsl(var(--hd-hl-orange)) !important; }
html[data-theme="dark"] .note-editable [style*="background-color: rgb(220, 252, 231)"] { background-color:hsl(var(--hd-hl-green)) !important; }
html[data-theme="dark"] .note-editable [style*="background-color: rgb(219, 234, 254)"] { background-color:hsl(var(--hd-hl-blue)) !important; }
html[data-theme="dark"] .note-editable [style*="background-color: rgb(254, 240, 138)"] { background-color:hsl(var(--hd-hl-yellow)) !important; }
html[data-theme="dark"] .hd-editor .note-color-btn[data-value="#c81e1e" i] { background-color:hsl(var(--hd-c-red)) !important; }
html[data-theme="dark"] .hd-editor .note-color-btn[data-value="#c2410c" i] { background-color:hsl(var(--hd-c-orange)) !important; }
html[data-theme="dark"] .hd-editor .note-color-btn[data-value="#15803d" i] { background-color:hsl(var(--hd-c-green)) !important; }
html[data-theme="dark"] .hd-editor .note-color-btn[data-value="#1d4ed8" i] { background-color:hsl(var(--hd-c-blue)) !important; }
html[data-theme="dark"] .hd-editor .note-color-btn[data-value="#fee2e2" i] { background-color:hsl(var(--hd-hl-red)) !important; }
html[data-theme="dark"] .hd-editor .note-color-btn[data-value="#ffedd5" i] { background-color:hsl(var(--hd-hl-orange)) !important; }
html[data-theme="dark"] .hd-editor .note-color-btn[data-value="#dcfce7" i] { background-color:hsl(var(--hd-hl-green)) !important; }
html[data-theme="dark"] .hd-editor .note-color-btn[data-value="#dbeafe" i] { background-color:hsl(var(--hd-hl-blue)) !important; }
html[data-theme="dark"] .hd-editor .note-color-btn[data-value="#fef08a" i] { background-color:hsl(var(--hd-hl-yellow)) !important; }
html[data-theme="dark"] .hd-editor .note-current-color-button[data-forecolor="#c81e1e" i] .note-recent-color { color:hsl(var(--hd-c-red)) !important; }
html[data-theme="dark"] .hd-editor .note-current-color-button[data-forecolor="#c2410c" i] .note-recent-color { color:hsl(var(--hd-c-orange)) !important; }
html[data-theme="dark"] .hd-editor .note-current-color-button[data-forecolor="#15803d" i] .note-recent-color { color:hsl(var(--hd-c-green)) !important; }
html[data-theme="dark"] .hd-editor .note-current-color-button[data-forecolor="#1d4ed8" i] .note-recent-color { color:hsl(var(--hd-c-blue)) !important; }
html[data-theme="dark"] .hd-editor .note-current-color-button[data-backcolor="#fee2e2" i] .note-recent-color { background-color:hsl(var(--hd-hl-red)) !important; }
html[data-theme="dark"] .hd-editor .note-current-color-button[data-backcolor="#ffedd5" i] .note-recent-color { background-color:hsl(var(--hd-hl-orange)) !important; }
html[data-theme="dark"] .hd-editor .note-current-color-button[data-backcolor="#dcfce7" i] .note-recent-color { background-color:hsl(var(--hd-hl-green)) !important; }
html[data-theme="dark"] .hd-editor .note-current-color-button[data-backcolor="#dbeafe" i] .note-recent-color { background-color:hsl(var(--hd-hl-blue)) !important; }
html[data-theme="dark"] .hd-editor .note-current-color-button[data-backcolor="#fef08a" i] .note-recent-color { background-color:hsl(var(--hd-hl-yellow)) !important; }
.hd-sla--paused { background:hsl(var(--muted)); color:hsl(var(--muted-foreground)); }
/* Systemeintrag im Verlauf (Weitergabe, Zurückstellung, Beteiligte, KI-Zuordnung …) */
.hd-event { display:flex; align-items:flex-start; gap:.5rem; padding:.55rem 1.25rem; font-size:.8125rem; line-height:1.5; color:hsl(var(--muted-foreground)); background:hsl(var(--muted) / .35); }
.hd-event svg, .hd-event i { width:.875rem; height:.875rem; flex-shrink:0; margin-top:.2rem; }
.hd-event-text { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.hd-event-time { flex-shrink:0; white-space:nowrap; font-size:.75rem; }
/* HD-23: Beteiligte */
.hd-chip { display:inline-flex; align-items:center; gap:.35rem; max-width:100%; padding:.2rem .3rem .2rem .65rem; border-radius:999px; border:1px solid hsl(var(--border)); background:hsl(var(--card)); font-size:.8125rem; }
.hd-chip-meta { font-size:.75rem; color:hsl(var(--muted-foreground)); }
.hd-chip-x { display:inline-flex; align-items:center; justify-content:center; width:1.35rem; height:1.35rem; border-radius:999px; border:0; background:none; color:hsl(var(--muted-foreground)); cursor:pointer; }
.hd-chip-x:hover, .hd-chip-x:focus-visible { background:hsl(var(--muted)); color:hsl(var(--foreground)); }
.hd-chip-x svg, .hd-chip-x i { width:.8rem; height:.8rem; }
/* HD-21: Sammelleiste (Auswahl in der Tabellenansicht) und Zielwahl im Dialog */
.hd-bulk { position:sticky; bottom:1rem; z-index:20; }
.hd-pick-row { display:flex; align-items:center; gap:.75rem; padding:.625rem; border-radius:.5rem; border:1px solid hsl(var(--border)); cursor:pointer; }
.hd-pick-row:hover { background:hsl(var(--muted) / .5); }
.hd-pick-ref { flex-shrink:0; font-family: var(--font-mono); font-size:.75rem; color:hsl(var(--muted-foreground)); }
.hd-pick-title { flex:1 1 auto; min-width:0; font-size:.875rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* HD-02/HD-23: Vorschlagsliste der Personensuche (Höhe begrenzt) */
.hd-people-list { max-height:15rem; overflow-y:auto; }

/* Herkunft einer Aufgabe aus dem Helpdesk (aufgaben.php, aufgaben-detail.php). Der Rest des Orbit-Blocks
   „Helpdesk: Aufgaben am Ticket + Checklisten“ und der Signage-Zustand entfallen (K3, Funktion fehlt in VBM). */
.hd-origin { display:inline-flex; align-items:center; gap:.25rem; padding:.1rem .5rem; border-radius:999px; font-size:.7rem; font-weight:600; white-space:nowrap; background:hsl(var(--primary-soft)); color:hsl(var(--primary-text)); }
.hd-origin svg, .hd-origin i { width:.75rem; height:.75rem; }
.hd-origin--muted { background:hsl(var(--muted)); color:hsl(var(--muted-foreground)); }
a.hd-origin:hover, a.hd-origin:focus-visible { text-decoration:underline; }

/* ── Einstellungen: Karten in einer Spalte (2026-10-05) ─────────────────────
   Die Einstellungsseite zeigt ihre Karten in einer Spalte statt im Raster – eine
   Kante, keine Lücken. Kategorie, Gruppe und Reihenfolge legt $settingsOrdnung in
   partials/einstellungen.php fest; die Zwischenüberschriften (.settings-gruppe)
   setzt das Skript der Seite – nur in Kategorien ab fünf Karten. */
.settings-liste { display: flex; flex-direction: column; gap: 1rem; max-width: 64rem; }
@media (min-width: 1024px) { .settings-liste { gap: 1.25rem; } }
.settings-liste > * { min-width: 0; }
.settings-liste > .settings-gruppe {
  margin: .75rem 0 -.25rem;
  font-size: .8125rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.settings-liste > .settings-gruppe.is-erste { margin-top: 0; }

/* ── Veranstaltungen: Zeitleiste (Programm) und Formular-Editor (2026-10, Event Manager) ─────────
   Bausteine statt <style>-Blöcken im Partial (CODE-02). Desktop: Slots als Spalten, Programmpunkte
   absolut nach Zeit positioniert (2,4 px je Minute); unter 1024 px eine gestapelte Liste. */
/* Programm (Verwaltung): Zeitschienen untereinander, Zeit waagerecht, parallele Punkte in Spuren untereinander */
.extr-timeline{display:flex;flex-direction:column;gap:1rem}
.extr-timeline-slot{border:1px solid hsl(var(--border));border-radius:1rem;background:hsl(var(--card));min-width:0}
.extr-timeline-slot-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem .9rem;border-bottom:1px solid hsl(var(--border))}
.extr-timeline-body{position:relative;margin:.6rem .9rem .9rem;border-radius:.75rem;background:hsl(var(--muted) / .45)}
.extr-timeline-empty{position:absolute;left:0;right:0;top:50%;transform:translateY(-30%);margin:0;text-align:center;font-size:.8rem;color:hsl(var(--muted-foreground));pointer-events:none}
.extr-timeline-body.is-over{outline:2px dashed hsl(var(--primary));outline-offset:-2px}
.extr-timeline-tick{position:absolute;top:0;bottom:0;border-left:1px solid hsl(var(--border) / .8);pointer-events:none}
.extr-timeline-tick.is-start{border-left-color:transparent}
.extr-timeline-tick span{position:absolute;top:.2rem;left:.3rem;font-size:.68rem;line-height:1;color:hsl(var(--muted-foreground));white-space:nowrap;font-variant-numeric:tabular-nums}
.extr-timeline-tick.is-end span{left:auto;right:.3rem}
.extr-timeline-item{position:absolute;padding:0 .15rem;box-sizing:border-box;z-index:1;min-height:2.2rem;min-width:4.5rem}
.extr-timeline-item-btn{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;width:100%;height:100%;text-align:left;border:1px solid hsl(var(--border));border-left:4px solid hsl(var(--primary));border-radius:.6rem;background:hsl(var(--card));padding:.35rem .5rem;overflow:hidden;cursor:pointer;box-shadow:var(--extr-shadow-sm);color:inherit;font:inherit}
.extr-timeline-item-btn:hover{box-shadow:var(--extr-shadow-md)}
.extr-timeline-item.is-parallel .extr-timeline-item-btn{border-left-color:hsl(var(--destructive))}
.extr-timeline-item.is-full .extr-timeline-item-btn{opacity:.7}
.extr-timeline-item.is-dragging{opacity:.4}
.extr-timeline-item.is-selected .extr-timeline-item-btn{background:hsl(var(--primary) / .1);border-color:hsl(var(--primary))}
.extr-timeline-item.is-blocked .extr-timeline-item-btn{opacity:.45;cursor:not-allowed;background:hsl(var(--muted))}
.extr-timeline-item-time{font-size:.68rem;color:hsl(var(--muted-foreground));white-space:nowrap}
.extr-timeline-item-title{font-size:.8rem;font-weight:600;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.extr-timeline-item-meta{font-size:.68rem;color:hsl(var(--muted-foreground));overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
.extr-timeline-item-hint{font-size:.68rem;color:hsl(var(--destructive));white-space:nowrap}
@media (max-width:1023px){
  .extr-timeline{display:block}
  .extr-timeline-slot{margin-bottom:1rem}
  .extr-timeline-body{height:auto!important;background:transparent;margin:.5rem}
  .extr-timeline-tick{display:none}
  .extr-timeline-item{position:static!important;width:auto!important;left:auto!important;top:auto!important;height:auto!important;min-width:0;padding:0;margin-bottom:.5rem}
  .extr-timeline-empty{position:static;transform:none;padding:.5rem 0}
}
.extr-fe-row{border:1px solid hsl(var(--border));border-radius:.75rem;background:hsl(var(--card));padding:.6rem .75rem}
.extr-fe-row.is-dragging{opacity:.4}
.extr-fe-row.is-over{outline:2px dashed hsl(var(--primary));outline-offset:-2px}
.extr-fe-grip{cursor:grab;color:hsl(var(--muted-foreground));display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:2rem;flex-shrink:0}
.extr-fe-row.is-locked{background:hsl(var(--muted) / .4)}
/* ── Ticketscanner (Event Manager): Kamerabühne und Ergebnis-Overlay ───────────────────── */
.extr-scan-stage{position:relative;width:100%;aspect-ratio:1/1;max-height:70vh;border-radius:1rem;overflow:hidden;background:#111}
.extr-scan-video{width:100%;height:100%;object-fit:cover;display:block}
.extr-scan-frame{position:absolute;inset:14%;border:3px solid rgba(255,255,255,.85);border-radius:1rem;pointer-events:none;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.extr-scan-hint{position:absolute;left:0;right:0;bottom:.75rem;text-align:center;color:#fff;font-size:.8rem;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.extr-scan-result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:1.25rem;text-align:center;color:#fff;background:rgba(17,17,17,.92);z-index:2}
.extr-scan-result.is-ok{background:rgba(22,163,74,.95)}
.extr-scan-result.is-warn{background:rgba(217,119,6,.95)}
.extr-scan-result.is-bad{background:rgba(220,38,38,.95)}
.extr-scan-result.is-wrong{background:rgba(234,88,12,.95)}
.extr-scan-result-label{font-size:1.5rem;font-weight:700;line-height:1.1}
.extr-scan-result-name{font-size:1.1rem;font-weight:600}
.extr-scan-result-meta{font-size:.85rem;opacity:.9}
.extr-scan-result.hidden{display:none}
/* ── Diagramme (Event Manager, dataviz-Regeln UI §3.15): Säulen je Tag, waagerechte Balken ─────── */
.extr-chart-cols{display:flex;align-items:flex-end;gap:2px;height:9rem;padding-top:1.1rem;border-bottom:1px solid hsl(var(--border));background:repeating-linear-gradient(to top,transparent,transparent calc(25% - 1px),hsl(var(--border)) calc(25% - 1px),hsl(var(--border)) 25%)}
.extr-chart-col{flex:1 1 0;min-width:0;max-width:24px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;position:relative;cursor:default;outline:none}
.extr-chart-col:hover .extr-chart-colbar,.extr-chart-col:focus-visible .extr-chart-colbar{opacity:.75}
.extr-chart-colbar{background:hsl(var(--primary));border-radius:4px 4px 0 0;width:100%}
.extr-chart-colval{position:absolute;top:-1.1rem;left:50%;transform:translateX(-50%);font-size:.65rem;color:hsl(var(--muted-foreground));white-space:nowrap}
.extr-chart-axis{display:flex;justify-content:space-between;font-size:.65rem;color:hsl(var(--muted-foreground));margin-top:.25rem}
.extr-chart-bars{display:flex;flex-direction:column;gap:.5rem}
.extr-chart-bar-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;gap:.6rem;align-items:center;outline:none}
.extr-chart-bar-row:hover .extr-chart-bar,.extr-chart-bar-row:focus-visible .extr-chart-bar{opacity:.75}
.extr-chart-bar-label{font-size:.8rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.extr-chart-bar-track{display:block;height:.6rem;border-radius:999px;background:hsl(var(--muted));overflow:hidden}
.extr-chart-bar{display:block;height:100%;background:hsl(var(--primary));border-radius:0 999px 999px 0}
.extr-chart-bar-val{font-size:.75rem;font-variant-numeric:tabular-nums;color:hsl(var(--muted-foreground));white-space:nowrap}
/* ── Veranstaltungs-Editor: Sprungnavigation mit Vollständigkeit (rechts klebend, mobil kompakt oben) ── */
.extr-ev-sec { scroll-margin-top: calc(var(--extr-sticky-top, 0px) + 1rem); }
.extr-ev-aside { min-width: 0; }
.extr-ev-nav { padding: 1rem; min-width: 0; }
.extr-ev-nav-head { margin-bottom: .75rem; }
.extr-ev-nav-bar { height: .375rem; border-radius: 999px; background: hsl(var(--muted)); overflow: hidden; margin-top: .5rem; }
.extr-ev-nav-bar > span { display: block; height: 100%; width: 0; background: hsl(var(--primary)); border-radius: 999px; transition: width .25s; }
.extr-ev-nav-list { list-style: none; margin: 0; padding: 0; }
.extr-ev-nav-item { display: flex; align-items: flex-start; gap: .625rem; width: 100%; text-align: left; padding: .5rem .625rem; border-radius: .625rem; background: transparent; border: 0; cursor: pointer; color: hsl(var(--foreground)); font: inherit; }
.extr-ev-nav-item:hover { background: hsl(var(--muted) / .6); }
.extr-ev-nav-item:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--primary) / .35); }
.extr-ev-nav-item[aria-current="true"] { background: hsl(var(--primary) / .08); }
.extr-ev-nav-item[aria-current="true"] .extr-ev-nav-label { color: hsl(var(--primary)); }
.extr-ev-nav-ico { display: inline-flex; flex-shrink: 0; width: 1.125rem; height: 1.25rem; align-items: center; }
.extr-ev-nav-ico svg { display: none; width: 1.125rem; height: 1.125rem; }
.extr-ev-nav-item[data-state="ok"] .is-ok,
.extr-ev-nav-item[data-state="error"] .is-error,
.extr-ev-nav-item[data-state="open"] .is-open,
.extr-ev-nav-item[data-state="muted"] .is-open { display: block; }
.extr-ev-nav-txt { display: flex; flex-direction: column; min-width: 0; }
.extr-ev-nav-label { font-size: .875rem; line-height: 1.25rem; font-weight: 500; }
.extr-ev-nav-hint { font-size: .75rem; line-height: 1rem; color: hsl(var(--muted-foreground)); }
.extr-ev-nav-item[data-state="error"] .extr-ev-nav-hint { color: hsl(var(--destructive, 0 72% 51%)); }
.extr-ev-nav-item[data-state="muted"] { opacity: .7; }
.extr-ev-nav-next { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid hsl(var(--border)); }
@media (min-width: 1024px) {
  .extr-ev-nav { position: sticky; top: calc(var(--extr-sticky-top, 0px) + 1.5rem); max-height: calc(100vh - var(--extr-sticky-top, 0px) - 3rem); overflow-y: auto; }
  .extr-ev-nav-list { display: flex; flex-direction: column; gap: .125rem; }
}
@media (max-width: 1023.98px) {
  .extr-ev-aside { order: -1; }
  .extr-ev-nav { padding: .75rem; }
  .extr-ev-nav-list { display: flex; gap: .375rem; overflow-x: auto; padding-bottom: .125rem; scrollbar-width: thin; }
  .extr-ev-nav-item { width: auto; white-space: nowrap; align-items: center; padding: .3rem .65rem; border: 1px solid hsl(var(--border)); border-radius: 999px; }
  .extr-ev-nav-hint { display: none; }
}
/* ── Formatierter Text aus dem Editor (Beschreibungen Veranstaltung/Ort; bereinigtes HTML) ─────────
   Tailwinds Reset nimmt Absatzabständen und Listen ihre Form — hier kommt sie zurück. */
.extr-rich { line-height: 1.6; overflow-wrap: anywhere; }
.extr-rich > :first-child { margin-top: 0; }
.extr-rich > :last-child { margin-bottom: 0; }
.extr-rich p { margin: 0 0 .75rem; }
.extr-rich h2 { font-size: 1.05rem; font-weight: 650; margin: 1.1rem 0 .4rem; }
.extr-rich h3, .extr-rich h4 { font-size: .95rem; font-weight: 600; margin: .9rem 0 .35rem; }
.extr-rich ul { list-style: disc; padding-left: 1.25rem; margin: .25rem 0 .75rem; }
.extr-rich ol { list-style: decimal; padding-left: 1.25rem; margin: .25rem 0 .75rem; }
.extr-rich li { margin: .2rem 0; padding-left: .15rem; }
.extr-rich li::marker { color: hsl(var(--primary)); }
.extr-rich li > p { margin: 0; }
.extr-rich a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
.extr-rich strong, .extr-rich b { font-weight: 600; }
.extr-rich blockquote { border-left: 3px solid hsl(var(--border)); padding-left: .75rem; color: hsl(var(--muted-foreground)); margin: .5rem 0 .75rem; }
.extr-rich img { max-width: 100%; height: auto; border-radius: .5rem; }
/* Titelbild einer Veranstaltung: immer vollständig (natürliches Seitenverhältnis), nie beschnitten */
.extr-ev-cover { display: block; width: 100%; height: auto; }
/* ── Anmeldung (Dialog in der Veranstaltung): Kennzahlen, Angaben, Programm, Verlauf ───────── */
.extr-ev-reg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; } /* <button> erbt die Schrift → alle Knöpfe gleich groß */
.extr-ev-reg-actions-gap { flex: 1 1 auto; }
.extr-ev-reg-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 640px) { .extr-ev-reg-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.extr-ev-reg-fact { border: 1px solid hsl(var(--border)); border-radius: .75rem; padding: .6rem .75rem; min-width: 0; background: hsl(var(--card)); }
.extr-ev-reg-fact.is-good { border-color: hsl(142 60% 40% / .35); background: hsl(142 70% 45% / .06); }
.extr-ev-reg-fact.is-warn { border-color: hsl(38 92% 45% / .4); background: hsl(38 92% 50% / .07); }
.extr-ev-reg-fact.is-bad { border-color: hsl(var(--destructive) / .3); background: hsl(var(--destructive) / .05); }
.extr-ev-reg-fact-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: hsl(var(--muted-foreground)); }
.extr-ev-reg-fact-value { font-size: .95rem; font-weight: 600; margin-top: .15rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.extr-ev-reg-fact-sub { font-size: .75rem; color: hsl(var(--muted-foreground)); margin-top: .1rem; overflow-wrap: anywhere; }
.extr-ev-reg-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .extr-ev-reg-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.extr-ev-reg-card { border: 1px solid hsl(var(--border)); border-radius: .75rem; padding: .9rem 1rem; min-width: 0; }
.extr-ev-reg-h { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: hsl(var(--muted-foreground)); margin: 0 0 .6rem; }
.extr-ev-dl { display: grid; grid-template-columns: minmax(6.5rem, 36%) minmax(0, 1fr); gap: .45rem 1rem; margin: 0; font-size: .875rem; }
.extr-ev-dl dt { color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.extr-ev-dl dd { margin: 0; overflow-wrap: anywhere; }
.extr-ev-dl dd.is-empty { color: hsl(var(--muted-foreground)); }
.extr-ev-reg-prog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.extr-ev-reg-prog li { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: .5rem; font-size: .875rem; line-height: 1.35; }
.extr-ev-reg-prog .t { color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; font-size: .8rem; padding-top: .05rem; }
.extr-ev-reg-prog .r { display: block; font-size: .75rem; color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.extr-ev-tl { list-style: none; padding: 0; }
.extr-ev-tl li { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .65rem; padding-bottom: .8rem; }
.extr-ev-tl li::before { content: ''; position: absolute; left: .875rem; top: 1.85rem; bottom: .1rem; width: 1px; background: hsl(var(--border)); }
.extr-ev-tl li:last-child { padding-bottom: 0; }
.extr-ev-tl li:last-child::before { display: none; }
.extr-ev-tl-ico { width: 1.75rem; height: 1.75rem; border-radius: 999px; background: hsl(var(--muted)); display: flex; align-items: center; justify-content: center; color: hsl(var(--muted-foreground)); }
.extr-ev-tl-ico svg { width: .875rem; height: .875rem; }
.extr-ev-tl li[data-tone="good"] .extr-ev-tl-ico { background: hsl(142 70% 45% / .14); color: hsl(142 71% 32%); }
.extr-ev-tl li[data-tone="warn"] .extr-ev-tl-ico { background: hsl(38 92% 50% / .16); color: hsl(32 90% 38%); }
.extr-ev-tl li[data-tone="bad"] .extr-ev-tl-ico { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); }
.extr-ev-tl-title { font-size: .875rem; font-weight: 500; line-height: 1.3; padding-top: .2rem; }
.extr-ev-tl-detail { font-size: .8rem; color: hsl(var(--foreground) / .8); overflow-wrap: anywhere; }
.extr-ev-tl-meta { font-size: .72rem; color: hsl(var(--muted-foreground)); }
/* ── Teilnehmer-Ticket (public/ticket): Ticketkarte mit Abreißkante, Programm, Ort ───────────── */
.extr-tk { position: relative; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1.25rem; overflow: hidden; box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px -12px rgb(13 10 70 / .18); margin-bottom: 1rem; }
.extr-tk-head { color: #fff; padding: 1.15rem 1.25rem 1.2rem; background-color: hsl(var(--primary)); background-image: linear-gradient(125deg, rgb(13 10 70 / .55) 0%, rgb(13 10 70 / .12) 60%, rgb(255 255 255 / .06) 100%); }
.extr-tk-kicker { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; margin: 0; }
.extr-tk-title { font-size: 1.3rem; font-weight: 700; line-height: 1.22; margin: .25rem 0 0; color: #fff; }
.extr-tk-sub { font-size: .875rem; opacity: .88; margin: .15rem 0 0; }
.extr-tk-when { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .84rem; font-weight: 500; margin-top: .8rem; }
.extr-tk-when span { display: inline-flex; align-items: center; gap: .35rem; }
.extr-tk-when svg { width: 1rem; height: 1rem; opacity: .85; }
.extr-tk-status { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem 1.25rem; font-size: .875rem; }
.extr-tk-section { padding: 1rem 1.25rem 0; }
.extr-tk-qr { padding: 1.25rem 1.25rem .5rem; text-align: center; }
.extr-tk-qr-box { display: inline-block; padding: .75rem; border-radius: 1rem; background: #fff; border: 1px solid hsl(var(--border)); }
.extr-tk-qr-box img, .extr-tk-qr-box canvas { display: block; max-width: 100%; height: auto; }
.extr-tk-no { font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; margin: .7rem 0 0; font-variant-numeric: tabular-nums; }
.extr-tk-name { font-size: .875rem; color: hsl(var(--muted-foreground)); margin: .1rem 0 0; }
.extr-tk-hint { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: hsl(var(--muted-foreground)); margin: .6rem 0 0; }
.extr-tk-hint svg { width: .95rem; height: .95rem; }
.extr-tk-perf { position: relative; height: 1.75rem; }
.extr-tk-perf::before { content: ''; position: absolute; left: 1.1rem; right: 1.1rem; top: 50%; border-top: 2px dashed hsl(var(--border)); }
.extr-tk-notch { position: absolute; top: 50%; width: 1.4rem; height: 1.4rem; border-radius: 999px; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); transform: translateY(-50%); }
.extr-tk-notch.is-l { left: -.75rem; }
.extr-tk-notch.is-r { right: -.75rem; }
.extr-tk-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; margin: 0; padding: .25rem 1.25rem 1.1rem; }
.extr-tk-facts dt { font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.extr-tk-facts dd { margin: .15rem 0 0; font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
.extr-tk-facts dd span { display: block; font-size: .78rem; font-weight: 400; color: hsl(var(--muted-foreground)); }
.extr-tk-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding: 0 1.25rem 1.25rem; font-size: .8125rem; }
.extr-tk-btnrow { font-size: .8125rem; } /* <button> erbt die Schrift → gleich groß wie Links */
.extr-tk-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1rem; padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.extr-tk-h { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 600; margin: 0; }
.extr-tk-h svg { width: 1.1rem; height: 1.1rem; color: hsl(var(--primary)); }
details > summary.extr-tk-h { list-style: none; }
details > summary.extr-tk-h::-webkit-details-marker { display: none; }
details > summary.extr-tk-h::after { content: '›'; margin-left: auto; font-size: 1.25rem; color: hsl(var(--muted-foreground)); transition: transform .15s; }
details[open] > summary.extr-tk-h::after { transform: rotate(90deg); }
.extr-tk-prog { list-style: none; margin: .75rem 0 0; padding: 0; }
.extr-tk-prog li { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: .6rem; padding: .65rem 0; border-top: 1px solid hsl(var(--border)); }
.extr-tk-prog li:first-child { border-top: 0; padding-top: .1rem; }
.extr-tk-prog .t { font-size: .82rem; font-weight: 600; color: hsl(var(--primary)); font-variant-numeric: tabular-nums; padding-top: .05rem; }
.extr-tk-prog .n { display: block; font-size: .9rem; font-weight: 500; line-height: 1.3; }
.extr-tk-prog .m { display: block; font-size: .78rem; color: hsl(var(--muted-foreground)); margin-top: .1rem; }
/* ── Programm-Assistent (KI-Chat im Reiter „Programm“) ─────────────────────────────────────────── */
.extr-asst-body { display: flex; flex-direction: column; gap: .75rem; min-height: min(62vh, 36rem); }
#ev-modal-asst.is-drop .extr-dlg-panel { outline: 3px dashed hsl(var(--primary)); outline-offset: -6px; }
.extr-asst-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding-bottom: .6rem; border-bottom: 1px solid hsl(var(--border)); font-size: .8125rem; }
.extr-asst-doc { font-size: .75rem; color: hsl(var(--muted-foreground)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extr-asst-bar-actions { display: flex; flex-wrap: wrap; gap: .25rem; margin-left: auto; }
.extr-asst-log { display: flex; flex-direction: column; gap: .9rem; }
.extr-asst-row { display: flex; align-items: flex-start; gap: .6rem; max-width: 100%; }
.extr-asst-row.is-user { justify-content: flex-end; }
.extr-asst-avatar { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }
.extr-asst-avatar svg { width: 1rem; height: 1rem; }
.extr-asst-bubble { max-width: min(46rem, 88%); min-width: 0; border-radius: 1rem; padding: .65rem .85rem; font-size: .875rem; line-height: 1.5; background: hsl(var(--muted) / .55); border: 1px solid hsl(var(--border)); }
.extr-asst-row.is-assistant .extr-asst-bubble { border-top-left-radius: .35rem; }
.extr-asst-row.is-user .extr-asst-bubble { background: hsl(var(--primary)); color: #fff; border-color: transparent; border-top-right-radius: .35rem; }
.extr-asst-row.is-error .extr-asst-bubble { background: hsl(var(--destructive) / .08); border-color: hsl(var(--destructive) / .3); }
.extr-asst-bubble p { margin: 0 0 .5rem; }
.extr-asst-bubble p:last-child { margin: 0; }
.extr-asst-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.extr-asst-note { font-size: .8rem; color: hsl(var(--muted-foreground)); }
.extr-asst-time { font-size: .68rem; opacity: .65; margin-top: .35rem; text-align: right; }
.extr-asst-file { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; overflow-wrap: anywhere; }
.extr-asst-file svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.extr-asst-checks { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.extr-asst-checks li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .45rem; font-size: .82rem; line-height: 1.4; }
.extr-asst-checks svg { width: 1rem; height: 1rem; margin-top: .1rem; }
.extr-asst-checks .is-ok svg { color: hsl(142 71% 36%); }
.extr-asst-checks .is-hinweis svg { color: hsl(32 90% 42%); }
.extr-asst-checks .is-problem svg { color: hsl(var(--destructive)); }
.extr-asst-questions { margin: .7rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .6rem; font-size: .86rem; list-style: decimal; }
.extr-asst-questions li::marker { font-weight: 600; color: hsl(var(--primary)); }
.extr-asst-opts { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.extr-asst-opt { font: inherit; font-size: .78rem; line-height: 1.3; padding: .3rem .7rem; border-radius: 999px; border: 1px solid hsl(var(--primary) / .45); background: hsl(var(--card)); color: hsl(var(--primary)); cursor: pointer; text-align: left; }
.extr-asst-opt:hover, .extr-asst-opt:focus-visible { background: hsl(var(--primary) / .08); outline: none; }
.extr-asst-system { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .78rem; color: hsl(var(--muted-foreground)); text-align: center; padding: 0 1rem; }
.extr-asst-system svg { width: .95rem; height: .95rem; color: hsl(142 71% 36%); flex-shrink: 0; }
.extr-asst-draft { margin-top: .75rem; border: 1px solid hsl(var(--border)); border-radius: .85rem; background: hsl(var(--card)); padding: .75rem .85rem; }
.extr-asst-draft-head { display: flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .875rem; }
.extr-asst-draft-head svg { width: 1rem; height: 1rem; color: hsl(var(--primary)); }
.extr-asst-draft details { margin-top: .6rem; }
.extr-asst-draft summary { cursor: pointer; font-size: .8rem; font-weight: 500; color: hsl(var(--primary)); }
.extr-asst-slot { margin-top: .6rem; padding-top: .5rem; border-top: 1px solid hsl(var(--border)); }
.extr-asst-slot-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; font-size: .82rem; }
.extr-asst-slot-h span { font-size: .75rem; color: hsl(var(--muted-foreground)); }
.extr-asst-slot ul { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.extr-asst-slot li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .5rem; font-size: .8rem; line-height: 1.35; }
.extr-asst-slot .t { color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.extr-asst-slot .m { display: block; font-size: .72rem; color: hsl(var(--muted-foreground)); }
.extr-asst-draft-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; font-size: .8125rem; }
.extr-asst-dots { display: inline-flex; gap: .25rem; margin-right: .5rem; vertical-align: middle; }
.extr-asst-dots i { width: .4rem; height: .4rem; border-radius: 999px; background: hsl(var(--muted-foreground)); animation: extr-asst-blink 1.2s infinite ease-in-out; }
.extr-asst-dots i:nth-child(2) { animation-delay: .15s; }
.extr-asst-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes extr-asst-blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .extr-asst-dots i { animation: none; opacity: .6; } }
.extr-asst-typing-text { font-size: .82rem; color: hsl(var(--muted-foreground)); }
.extr-asst-composer { display: flex; align-items: flex-end; gap: .5rem; width: 100%; font-size: .8125rem; }
.extr-asst-composer .extr-textarea { flex: 1 1 auto; min-height: 2.6rem; max-height: 10rem; resize: none; font-size: .875rem; line-height: 1.4; }
/* ── Programm-Reiter: Sprungnavigation der Zeitschienen (nutzt .extr-ev-aside/.extr-ev-nav des Editors) ── */
.extr-prog-layout { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .extr-prog-layout { grid-template-columns: minmax(0, 1fr) 16.5rem; } }
.extr-timeline-slot { scroll-margin-top: calc(var(--extr-sticky-top, 0px) + 1rem); transition: box-shadow .3s; }
.extr-timeline-slot.is-flash { box-shadow: 0 0 0 3px hsl(var(--primary) / .35); }
.extr-prog-nav-time { flex-shrink: 0; min-width: 2.75rem; font-size: .8rem; font-weight: 600; line-height: 1.25rem; color: hsl(var(--primary)); font-variant-numeric: tabular-nums; }
.extr-prog-nav-day { list-style: none; font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); padding: .7rem .625rem .2rem; }
.extr-prog-nav-day:first-child { padding-top: .1rem; }
@media (max-width: 1023.98px) {
  .extr-prog-nav-day { display: none; }
  .extr-prog-nav .extr-ev-nav-hint { display: none; }
}
.extr-timeline-slot-head { flex-wrap: wrap; }
.extr-timeline-slot-head > .min-w-0 { flex: 1 1 12rem; }   /* Titelzeile darf wachsen; Knöpfe rutschen auf schmalen Schirmen in die nächste Zeile */

/* ── Öffentliche Seiten für Externe (UI-Audit CODE-10) ─────────────────────────
   Bewerber-Einwilligung/-Termin/-Upload, Formular-Kurzlink f.php, Startcode,
   Freigabe: ein Gerüst statt je eines <style>-Blocks. In vbm_orbit (20.10.2026) für
   /seite/<slug> (public/seite.php) übernommen. Farben über Token, damit
   Marke und Akzent der jeweiligen Installation gelten (vorher fest hsl(173 …)). */
.extr-public-body { margin: 0; padding: 0; min-height: 100vh; background: radial-gradient(900px 520px at 75% 8%, hsl(var(--primary) / .10), transparent 62%), hsl(var(--background)); }
.extr-public-wrap { max-width: 600px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.extr-public-wrap--narrow { max-width: 460px; }
.extr-public-wrap--doc { max-width: 860px; }
.extr-public-logo { text-align: center; margin: 1.5rem 0 2rem; }
.extr-public-logo img { width: 3rem; height: 3rem; object-fit: contain; margin: 0 auto .5rem; display: block; }
/* Sammler w4 (NF-oeffentlich-09, Gate-Befund W1 Nr. 3): Logo (dunkles Petrol) auf dunklem Grund; hell unverändert. */
html[data-theme="dark"] .extr-public-logo img { background: #fff; /* feste Farbe: Logo ist dunkles Petrol, braucht hellen Grund */ border-radius: .75rem; padding: .3rem; }
.extr-public-name { font-size: 1.125rem; font-weight: 700; color: hsl(var(--foreground)); }
.extr-public-sub { color: hsl(var(--primary-text)); font-size: .8125rem; font-weight: 600; }
.extr-public-card { background: hsl(var(--card)); border: 0; border-radius: var(--radius-card); padding: 1.75rem; box-shadow: var(--extr-shadow-md); }
.extr-public-card + .extr-public-card { margin-top: 1rem; }
.extr-public-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.extr-public-slot input:checked + span { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / .2); }
@media print { .extr-public-body { background: #fff; } .extr-public-card { box-shadow: none; padding: 0; } }

/* Öffentliche Seiten: Der Reset (p, h1–h6 { margin: 0 }) steht ungeschichtet und schlägt die Abstands-Utilities aus @layer utilities.
   Die Margen dieser Seiten wieder gültig machen (nur die im Markup genutzten Stufen). */
.extr-public-wrap :is(p, h1, h2, h3).mb-1   { margin-bottom: calc(var(--spacing) * 1); }
.extr-public-wrap :is(p, h1, h2, h3).mb-1\.5 { margin-bottom: calc(var(--spacing) * 1.5); }
.extr-public-wrap :is(p, h1, h2, h3).mb-2   { margin-bottom: calc(var(--spacing) * 2); }
.extr-public-wrap :is(p, h1, h2, h3).mb-3   { margin-bottom: calc(var(--spacing) * 3); }
.extr-public-wrap :is(p, h1, h2, h3).mb-4   { margin-bottom: calc(var(--spacing) * 4); }
.extr-public-wrap :is(p, h1, h2, h3).mb-5   { margin-bottom: calc(var(--spacing) * 5); }
.extr-public-wrap :is(p, h1, h2, h3).mt-0\.5 { margin-top: calc(var(--spacing) * .5); }
.extr-public-wrap :is(p, h1, h2, h3).mt-1   { margin-top: calc(var(--spacing) * 1); }
.extr-public-wrap :is(p, h1, h2, h3).mt-2   { margin-top: calc(var(--spacing) * 2); }
.extr-public-wrap :is(p, h1, h2, h3).mt-4   { margin-top: calc(var(--spacing) * 4); }
.extr-public-wrap :is(p, h1, h2, h3).mt-6   { margin-top: calc(var(--spacing) * 6); }

/* ── Kopfaktionen nach R1: Einstellungen · Neu · ⋮ ─────────────────────────────
   extr_page_actions() legt Einstellungen und weitere Aktionen in eigene Blöcke
   (.extr-action-pop). Mobil gibt es nur ein Menü — die Blöcke lösen sich auf.
   Am Desktop löst sich das gemeinsame Menü auf, damit „Neu“ zwischen seinen Blöcken stehen kann. */
.extr-action-settings,
.extr-action-settings-face { display: none; }
@media (max-width: 1023.98px) {
  .extr-action-menu-wrap .extr-action-pop,
  .extr-action-menu-wrap .extr-action-pop > .extr-action-menu { display: contents; }
  .extr-action-menu-wrap .extr-action-pop > .extr-action-more { display: none; }
}
@media (min-width: 1024px) {
  .extr-page-actions { flex-wrap: wrap; justify-content: flex-end; }
  .extr-page-actions > .extr-action-menu-wrap:not(.extr-action-pop),
  .extr-page-actions > .extr-action-menu-wrap:not(.extr-action-pop) > .extr-action-menu { display: contents; }
  .extr-page-actions .extr-action-overflow { order: 3; }
  .extr-page-actions .extr-action-pop { position: relative; display: inline-flex; }
  .extr-page-actions .extr-action-pop--mobile { display: none; }
  .extr-page-actions .extr-action-pop > .extr-action-more,
  .extr-action-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 2.25rem;
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius-btn);
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }
  .extr-page-actions .extr-action-pop > .extr-action-more { width: 2.25rem; color: hsl(var(--muted-foreground)); }
  .extr-action-settings { padding: 0 .875rem; }
  .extr-action-settings svg { height: 1rem; width: 1rem; color: hsl(var(--primary-text)); }
  .extr-action-settings:hover,
  .extr-action-settings[aria-expanded="true"],
  .extr-page-actions .extr-action-pop > .extr-action-more:hover,
  .extr-page-actions .extr-action-pop > .extr-action-more[aria-expanded="true"] {
    background: hsl(var(--primary-soft));
    color: hsl(var(--primary-text));
    border-color: hsl(var(--primary) / .45);
  }
  .extr-action-settings:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring)); }
  /* Einziger Einstellungen-Eintrag: alter Name nur noch im Tooltip. */
  .extr-action-item--settings > .extr-action-item-label,
  .extr-action-item--settings > :is(svg, i):not(.extr-action-settings-face) { display: none; }
  .extr-action-item--settings > .extr-action-settings-face { display: inline; }
  .extr-page-actions .extr-action-pop > .extr-action-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    min-width: 15rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: .5rem;
    z-index: 60;
    background: hsl(var(--popover));
    border: 0;
    border-radius: var(--radius-pop);
    box-shadow: var(--extr-shadow-lg), 0 0 0 1px hsl(var(--foreground) / .10);
  }
  .extr-page-actions .extr-action-pop.is-open > .extr-action-menu { display: block; }
  .extr-page-actions .extr-action-pop .extr-action-item {
    width: 100%;
    height: auto;
    padding: .5rem .625rem;
    border: 0;
    border-radius: var(--radius-btn);
    background: none;
    color: hsl(var(--foreground));
    white-space: normal;
  }
  .extr-page-actions .extr-action-pop .extr-action-item:hover { background: hsl(var(--muted)); border-color: transparent; }
  .extr-page-actions .extr-action-pop .extr-action-item-label { flex: 1 1 auto; }
  .extr-page-actions .extr-action-pop .extr-action-item--danger { color: hsl(var(--destructive)); }
  .extr-page-actions .extr-action-pop .extr-action-item--danger:hover { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); }
  .extr-page-actions .extr-action-pop .extr-action-sep { display: block; }
}
/* ── UI-Audit DARK-04: Pastellrahmen und helle Hover-Flächen im Dunkelmodus ──────
   Status-Chips „bg-*-50 border-*-200 text-*-800“ bekommen im Dunkel-Scope schon
   getönte Fläche und helle Schrift; die Rahmen blieben pastellhell. Jetzt über die
   Ton-Rahmen (--tone-*-border). Neue Chips besser gleich mit --tone-* bauen. */
html[data-theme="dark"] .border-amber-200,
html[data-theme="dark"] .border-amber-300,
html[data-theme="dark"] .border-yellow-200,
html[data-theme="dark"] .border-yellow-300,
html[data-theme="dark"] .border-orange-200,
html[data-theme="dark"] .border-orange-300 { border-color: hsl(var(--tone-warn-border)); }
html[data-theme="dark"] .border-green-200,
html[data-theme="dark"] .border-green-300,
html[data-theme="dark"] .border-emerald-200,
html[data-theme="dark"] .border-emerald-300,
html[data-theme="dark"] .border-teal-200,
html[data-theme="dark"] .border-teal-300 { border-color: hsl(var(--tone-ok-border)); }
html[data-theme="dark"] .border-red-200,
html[data-theme="dark"] .border-red-300,
html[data-theme="dark"] .border-rose-200,
html[data-theme="dark"] .border-rose-300,
html[data-theme="dark"] .border-pink-200,
html[data-theme="dark"] .border-pink-300 { border-color: hsl(var(--tone-bad-border)); }
html[data-theme="dark"] .border-blue-200,
html[data-theme="dark"] .border-blue-300,
html[data-theme="dark"] .border-sky-200,
html[data-theme="dark"] .border-sky-300,
html[data-theme="dark"] .border-indigo-200,
html[data-theme="dark"] .border-indigo-300,
html[data-theme="dark"] .border-cyan-200,
html[data-theme="dark"] .border-cyan-300 { border-color: hsl(var(--tone-info-border)); }
html[data-theme="dark"] .border-violet-200,
html[data-theme="dark"] .border-violet-300,
html[data-theme="dark"] .border-purple-200,
html[data-theme="dark"] .border-purple-300,
html[data-theme="dark"] .border-fuchsia-200,
html[data-theme="dark"] .border-fuchsia-300 { border-color: rgba(167,139,250,.4); }
html[data-theme="dark"] .hover\:bg-red-50:hover,
html[data-theme="dark"] .hover\:bg-red-100:hover,
html[data-theme="dark"] .hover\:bg-rose-50:hover { background-color: rgba(248,113,113,.14); }
html[data-theme="dark"] .hover\:bg-amber-50:hover,
html[data-theme="dark"] .hover\:bg-amber-100:hover,
html[data-theme="dark"] .hover\:bg-yellow-50:hover { background-color: rgba(251,191,36,.14); }
html[data-theme="dark"] .hover\:bg-green-50:hover,
html[data-theme="dark"] .hover\:bg-green-100:hover,
html[data-theme="dark"] .hover\:bg-emerald-50:hover { background-color: rgba(52,211,153,.14); }
html[data-theme="dark"] .hover\:bg-blue-50:hover,
html[data-theme="dark"] .hover\:bg-blue-100:hover,
html[data-theme="dark"] .hover\:bg-sky-50:hover { background-color: rgba(96,165,250,.14); }
html[data-theme="dark"] .text-sky-800 { color: #38bdf8; }
html[data-theme="dark"] .text-purple-900 { color: #c084fc; }
html[data-theme="dark"] .bg-green-50\/40 { background-color: rgba(52,211,153,.08); }
html[data-theme="dark"] .bg-slate-200 { background-color: hsl(var(--border)); }

/* Getönte Pastellflächen (bg-*-50/NN) und Glasflächen auf Fotos (bg-white/NN) (UI-Audit DARK-04) */
html[data-theme="dark"] .bg-green-50\/50,
html[data-theme="dark"] .bg-green-50\/60 { background-color: rgba(52,211,153,.10); }
html[data-theme="dark"] .bg-amber-50\/40,
html[data-theme="dark"] .bg-amber-50\/50,
html[data-theme="dark"] .bg-amber-50\/60,
html[data-theme="dark"] .bg-amber-50\/70 { background-color: rgba(251,191,36,.10); }
html[data-theme="dark"] .bg-white\/70 { background-color: hsl(var(--card) / .7); }
html[data-theme="dark"] .bg-white\/90 { background-color: hsl(var(--card) / .9); }
html[data-theme="dark"] .bg-white\/95 { background-color: hsl(var(--card) / .95); }
html[data-theme="dark"] .text-red-600\/90 { color: rgba(248,113,113,.9); }
html[data-theme="dark"] .hover\:border-red-200:hover { border-color: hsl(var(--tone-bad-border)); }
html[data-theme="dark"] .hover\:bg-violet-100:hover { background-color: rgba(167,139,250,.14); }
/* Blasse Alpha-Stufen der Nebenschrift erreichen auf dunkler Karte nur 2–3:1 (UI-Audit DARK-01). */
html[data-theme="dark"] .text-muted-foreground\/50 { color: hsl(var(--muted-foreground) / .8); }
html[data-theme="dark"] .text-muted-foreground\/60,
html[data-theme="dark"] .text-muted-foreground\/70,
html[data-theme="dark"] .text-muted-foreground\/80 { color: hsl(var(--muted-foreground) / .92); }

/* ── UI-Audit DARK-02: Flächen in Primärfarbe mit Schrift ─────────────────────
   Weiße Schrift erreicht auf der Markenfarbe nicht überall 4,5:1 (rp, Aurum hell;
   alle drei dunkel). Flächen unter Schrift nutzen deshalb --primary-strong
   (hell: abgedunkelte Marke, dunkel: aufgehellte Primärfarbe) und
   --primary-foreground (hell: weiß, dunkel: dunkel). Reine Akzente (Balken,
   Punkte, Fortschritt) bleiben bei --primary. Ungeschichtet, damit es die
   Tailwind-Utilities bg-primary/text-white schlägt. */
.bg-primary.text-white { background-color: hsl(var(--primary-strong)); color: hsl(var(--primary-foreground)); }
.bg-primary.text-white:is(.hover\:bg-primary\/90, .hover\:opacity-90):hover:not(:disabled) { background-color: hsl(var(--primary-emphasis)); opacity: 1; filter: none; }
/* Rand aktiver Pillen/Flächen passend zur Fläche */
.bg-primary.text-white.border-primary { border-color: hsl(var(--primary-strong)); }

/* ── Schulungen: KI-Quellen im Test-Editor (_schulungen-ki.php, 2026-10-25) ─────────────
   Chips der gewählten Quellen, Trefferliste und Schrittliste des Ladebalkens entstehen im
   Skript — Klassen statt Utility-Ketten in Zeichenketten (UI-Audit CODE-04). Alle Farben aus
   den Design-Tokens, damit der Dunkelmodus mitkommt. Lucide ersetzt <i> durch <svg>: beide
   Selektoren. In allen drei Installationen identisch (Baustein-Abschnitt). */
.se-ai-chip { display:inline-flex; align-items:center; gap:.25rem; max-width:100%; padding:.125rem .25rem .125rem .625rem; border-radius:9999px; background:hsl(var(--primary-soft)); color:hsl(var(--primary-text)); font-size:.75rem; line-height:1rem; }
.se-ai-chip > svg, .se-ai-chip > i { width:.75rem; height:.75rem; flex-shrink:0; }
.se-ai-chip > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:16rem; }
.se-ai-results-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.375rem .75rem; background:hsl(var(--muted) / .4); font-size:.75rem; color:hsl(var(--muted-foreground)); }
.se-ai-link { color:hsl(var(--primary-text)); font-weight:500; }
.se-ai-link:hover { text-decoration:underline; }
.se-ai-item { display:flex; align-items:center; gap:.5rem; width:100%; padding:.5rem .75rem; text-align:left; font-size:.875rem; transition:background-color .15s ease; }
.se-ai-item:hover:not([disabled]) { background:hsl(var(--muted)); }
.se-ai-item[disabled] { opacity:.6; cursor:default; }
.se-ai-item > svg, .se-ai-item > i { width:1rem; height:1rem; flex-shrink:0; }
.se-ai-item > .is-cat { margin-left:auto; flex-shrink:0; font-size:.75rem; color:hsl(var(--muted-foreground)); }
.se-ai-step { display:flex; align-items:center; gap:.5rem; }
.se-ai-step.is-pending { color:hsl(var(--muted-foreground)); }
.se-ai-step > svg, .se-ai-step > i { width:.875rem; height:.875rem; flex-shrink:0; }
.se-ai-step > .is-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.se-ai-step > .is-note { flex-shrink:0; color:hsl(var(--muted-foreground)); }

/* ── Lernstrecken: Schritt-Leiste (extr_lp_step_bar, 2026-10-29) ───────────────────────
   Unter dem Kopf von Dokument-, Test- und Ergebnisansicht eines Schritts: Position in der
   Strecke, Fortschritt, „Vorheriger/Nächster Schritt" bzw. „Zur Lernstrecke" am Ende.
   Farben aus den Design-Tokens (Dunkelmodus); am Handy bricht die Knopfgruppe um. */
.lp-step-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem 1rem; border:1px solid hsl(var(--border)); border-radius:1rem; background:hsl(var(--card, 0 0% 100%)); }
.lp-step-bar-info { flex:1 1 14rem; min-width:0; }
.lp-step-bar-track { height:.375rem; margin-top:.5rem; border-radius:9999px; background:hsl(var(--muted)); overflow:hidden; }
.lp-step-bar-fill { height:100%; border-radius:9999px; background:hsl(var(--primary)); transition:width .3s ease; }
.lp-step-bar-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }

/* ── Abschnitte und Kachelraster (Wissen, Schulungen, Lernstrecken; 2026-10-29) ──────────
   Bewusst ungeschichtet (außerhalb jedes @layer): Der Reset oben setzt margin:0 auf h1–h6
   und p, die mb-/mt-Utilities aus Tailwinds @layer utilities greifen dort nicht (CLAUDE-UI §2.2).
   .extr-section-title  Abschnittsüberschrift über Karte oder Raster — das Wissen-Muster
                        „Kategorien“ (0.875rem/1.25rem, 500, 10 px Abstand nach unten).
   .extr-section-head   Zeile aus Überschrift und Aktion rechts; die Überschrift darin trägt
                        keinen eigenen Abstand, den Abstand zur Karte hält die Zeile.
   .extr-tile-grid      Kachelraster: 1 Spalte, ab 1024 px 2, ab 1280 px 3. minmax(0, 1fr)
                        lässt die Spur schrumpfen — sonst wächst sie auf die Mindestbreite der
                        Karte (Titel + Badge) und läuft am Handy seitlich aus dem Bild.
   Weil ungeschichtet, schlägt display: das `hidden` am selben Element — zum Ausblenden das
   umschließende Element verstecken. In allen drei Installationen identisch (Baustein-Abschnitt). */
.extr-section-title { font-size:.8125rem; line-height:1.25rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:hsl(var(--muted-foreground)); margin:0 0 .625rem; } /* Redesign S5 (01 §3.24): Demo-Form, Abstände unverändert */
.extr-section-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.625rem; }
.extr-section-head > .extr-section-title { margin-bottom:0; }
.extr-tile-grid { display:grid; gap:1rem; grid-template-columns:minmax(0, 1fr); }
@media (min-width: 1024px) { .extr-tile-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .extr-tile-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } }

/* ── Kennzahl-Kacheln am Handy wie das Dashboard (2026-10-29) ───────────────────────────────
   Maßgabe ist die mobile Numbercard-Reihe des Dashboards: zwei Spalten, eine ungerade letzte
   Kachel nimmt die volle Breite statt einer Lücke daneben. Gilt für jedes .extr-stat-grid
   (Module mit eigenem Raster wurden darauf umgestellt). --3: drei Kacheln am Desktop in einer
   Reihe (Lernstrecken), am Handy wie alle anderen zweispaltig. */
@media (min-width: 1024px) { .extr-stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .extr-stat-grid:not(.extr-stat-grid--6) > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 639px)  { .extr-stat-grid--6 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Lange Einzelwörter in der Beschriftung („Abgeschlossen“) brechen bei halber Handybreite
   mit Silbentrennung um, statt aus der Kachel zu laufen (html lang="de"). */
.extr-stat-label, .extr-stat-hint { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }

/* ════ DESIGN-V2 · Redesign 2026 (Phase 3) ════ */

/* === DESIGN-V2 · S2 · R1 Dunkel-Begleiter zu D2 === */
/* Dunkler Akzent (--primary dunkel) ist Fläche und Markierung, Schrift in Akzentfarbe nimmt --primary-text (VBM: 8,28:1 auf --card).
   Steht nach den Dunkel-Remaps → gleich spezifische Regeln gewinnen.
   bg-primary/5 und bg-primary/20 stehen im Build (tailwind.css) und werden wie bg-primary/10 behandelt (01 §1 S2 Nr. 6). */
html[data-theme="dark"] .text-primary,
html[data-theme="dark"] a.text-primary,
html[data-theme="dark"] .hover\:text-primary:hover,
html[data-theme="dark"] a.hover\:text-primary:hover,
html[data-theme="dark"] .group:hover .group-hover\:text-primary { color: hsl(var(--primary-text)); }
html[data-theme="dark"] .bg-primary\/5,
html[data-theme="dark"] .bg-primary\/10,
html[data-theme="dark"] .bg-primary\/20 { background-color: hsl(var(--primary-soft)); }
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S3 · Tailwind-Radien + Karte (Kill-Block A) === */
:root { --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1.125rem; }
@media (max-width: 1023px) { :root { --radius-2xl: 1rem; } }
/* Karte: Schatten statt Rahmen (D1); Rahmenbreite bleibt (transparent) → kein Layoutsprung. Ausgenommen (in :where, damit
   die Spezifität bei (0,3,0) bleibt): gestrichelte Platzhalter, schwebende Flächen mit eigenem Schatten (Shell-Suche
   shadow-2xl, Push-/Geo-Banner shadow-lg bis S12), ausgewählte Karten (border-primary, Ring – JS schaltet 43× border-primary,
   14× ring-2/ring-primary). */
.bg-white.rounded-2xl.border-border:where(:not(.border-dashed, .shadow-2xl, .shadow-lg, [class*=" border-primary"], [class*="ring-"])) {
  border-color: transparent;
  box-shadow: var(--extr-shadow-md);
}
/* Karte in Karte / im Dialog / im Widget: Kachel mit Rahmen, ohne Schatten (Demo .stat) */
:is(.bg-white.rounded-2xl.border-border, .extr-card, .extr-dash-widget, .extr-dlg-panel) .bg-white.rounded-2xl.border-border:where(:not(.border-dashed)) {
  border-color: hsl(var(--border));
  box-shadow: none;
}
/* Markierung „neu/ungelesen“ (border-l-4 border-l-primary: _news-card.php, arbeitsanweisungen.php, -kategorie.php) bleibt
   sichtbar – die Regeln oben setzen die Rahmenfarbe ungeschichtet und schlügen sonst die Tailwind-Utility. */
.bg-white.rounded-2xl.border-border.border-l-primary,
:is(.bg-white.rounded-2xl.border-border, .extr-card, .extr-dash-widget, .extr-dlg-panel) .bg-white.rounded-2xl.border-border.border-l-primary { border-left-color: hsl(var(--primary)); }
@media (hover: hover) {
  a.bg-white.rounded-2xl.border-border:where(:not(.border-dashed, [class*=" border-primary"], [class*="ring-"])):hover,
  .bg-white.rounded-2xl.border-border:where(:not(.border-dashed, [class*=" border-primary"], [class*="ring-"])):is([class*="hover:shadow"], [class*="hover:border-primary"]):hover {
    box-shadow: var(--extr-shadow-lg); transform: translateY(-1px);
  }
}
.extr-card { background: hsl(var(--card)); border: 1px solid transparent; border-radius: var(--radius-card); box-shadow: var(--extr-shadow-md); overflow: hidden; }
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S3 · R4b Kartenkopf-Linien (befristet) === */
/* 31 gleichlautende Inline-Linien unter Kartenköpfen (Demo: Kopf ohne Linie). Rückbau, sobald
   grep -c 'border-bottom:1px solid hsl(var(--border))"' über die Partials 0 ergibt (Nachforderung „Rückbau R4b“, §10). */
.bg-white.rounded-2xl.border-border > [style="border-bottom:1px solid hsl(var(--border))"] { border-bottom-color: transparent !important; }
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S3 · R5 Status-Pillen (Annäherung, befristet bis Modulumbau) === */
/* 180 Tailwind-Pillen in 56 Partials: nur rundes Element (Pille), nicht Hinweiskästen. „html “-Präfix gibt (0,2,1)+ und
   steht nach den Dunkel-Remaps → gilt hell wie dunkel. Schriftfarben text-*-700 bleiben (Dunkel-Remaps vorhanden).
   Ausgenommen: Pillen mit eigener Hover-Fläche (Links/Knöpfe, hover:bg-*) – sonst schlüge die ungeschichtete Regel den Hover. */
html .rounded-full:is(.bg-green-50, .bg-emerald-50):not([class*="hover:bg-"])                  { background-color: hsl(var(--tone-ok-bg)); }
html .rounded-full:is(.bg-red-50, .bg-rose-50):not([class*="hover:bg-"])                       { background-color: hsl(var(--tone-bad-bg)); }
html .rounded-full:is(.bg-amber-50, .bg-yellow-50, .bg-orange-50):not([class*="hover:bg-"])    { background-color: hsl(var(--tone-warn-bg)); }
html .rounded-full:is(.bg-blue-50, .bg-sky-50):not([class*="hover:bg-"])                       { background-color: hsl(var(--tone-info-bg)); }
html .rounded-full:is(.bg-violet-50, .bg-purple-50):not([class*="hover:bg-"])                  { background-color: hsl(var(--tone-violet-bg)); }
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S3 · R5b Hinweis-Ketten (Annäherung, befristet bis Modulumbau) === */
/* 89 Ketten in 42 Partials bekommen Tonfläche, keinen Rahmen, Radius 12. (0,3,0)+ schlägt den Dunkel-Remap .bg-amber-50 (0,2,1).
   Ausgenommen: Knöpfe mit eigener Hover-Fläche (hover:bg-*-100) – sie bleiben wie bisher, damit der Hover wirkt.
   Ausgenommen: Abwesenheits-Pillen der Dienstplan-Ansicht „Farben“ (shift-ak-*) – sonst schlüge (0,7,0) die Nutzerfarben
   .shift-view-colors .shift-ak-urlaub/-krankheit (0,2,0, Bestandsklausel schichten-ansicht-farben). */
.bg-amber-50.border-amber-200:not(.rounded-full):not(.border-dashed):not(.border-2):not([class*="hover:bg-"]):not([class*="shift-ak-"]) { background-color: hsl(var(--tone-warn-bg)); border-color: transparent; border-radius: .75rem; }
.bg-blue-50.border-blue-200:not(.rounded-full):not(.border-dashed):not(.border-2):not([class*="hover:bg-"]):not([class*="shift-ak-"])   { background-color: hsl(var(--tone-info-bg)); border-color: transparent; border-radius: .75rem; }
.bg-red-50.border-red-200:not(.rounded-full):not(.border-dashed):not(.border-2):not([class*="hover:bg-"]):not([class*="shift-ak-"])     { background-color: hsl(var(--tone-bad-bg));  border-color: transparent; border-radius: .75rem; }
.bg-green-50.border-green-200:not(.rounded-full):not(.border-dashed):not(.border-2):not([class*="hover:bg-"]):not([class*="shift-ak-"]) { background-color: hsl(var(--tone-ok-bg));   border-color: transparent; border-radius: .75rem; }
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S5 · Listenzeile === */
/* Listenzeile mit Symbol-Kachel (Ton-Familie ok/warn/bad/info/gold/violet/muted/brand wie bei Meter und Hinweis, keine Badge-Altnamen), Meter, Priorität,
   Datumschip (01 §3.4). Inline-width an .extr-meter > i ist eine Breite, keine Farbe. */
@layer components {
  .extr-lrow { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .6875rem 0; text-decoration: none; }
  .extr-divided > .extr-lrow:first-child { padding-top: 0; }
  .extr-divided > .extr-lrow:last-child { padding-bottom: 0; }
  /* Sammler w3 (NF-formulare-04, NF-kontaktlisten-01): auch <button class="extr-lrow"> */
  a.extr-lrow:hover .extr-lrow-t > b, button.extr-lrow:hover .extr-lrow-t > b { color: hsl(var(--primary-text)); }
  .extr-lrow-ico { display: flex; flex: 0 0 2.25rem; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .625rem; background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
  .extr-lrow-ico svg { width: 1.0625rem; height: 1.0625rem; }
  .extr-lrow-ico--ok     { background: hsl(var(--tone-ok-bg));     color: hsl(var(--tone-ok-fg)); }
  .extr-lrow-ico--warn   { background: hsl(var(--tone-warn-bg));   color: hsl(var(--tone-warn-fg)); }
  .extr-lrow-ico--bad    { background: hsl(var(--tone-bad-bg));    color: hsl(var(--tone-bad-fg)); }
  .extr-lrow-ico--info   { background: hsl(var(--tone-info-bg));   color: hsl(var(--tone-info-fg)); }
  .extr-lrow-ico--gold   { background: hsl(var(--tone-gold-bg));   color: hsl(var(--tone-gold-fg)); }
  .extr-lrow-ico--violet { background: hsl(var(--tone-violet-bg)); color: hsl(var(--tone-violet-fg)); }
  .extr-lrow-ico--muted  { background: hsl(var(--muted-bg));       color: hsl(var(--muted-foreground)); }
  .extr-lrow-ico--brand  { background: hsl(var(--primary-soft));   color: hsl(var(--primary-text)); }
  .extr-lrow-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .extr-lrow-t > b { font-weight: 600; color: hsl(var(--foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .12s; }
  .extr-lrow-t > small { font-size: .75rem; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .extr-lrow-t > small.is-err { color: hsl(var(--tone-bad-fg)); font-weight: 600; }
  .extr-lrow-end { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; font-size: .78125rem; color: hsl(var(--muted-foreground)); text-align: right; }
  .extr-lrow-more { display: inline-flex; align-items: center; gap: .25rem; margin-top: .75rem; font-size: .78125rem; font-weight: 600; }
  .extr-lrow-more > svg { width: .875rem; height: .875rem; }
  .extr-meter { display: block; height: 6px; margin-top: .375rem; border-radius: 9999px; background: hsl(var(--muted-bg)); overflow: hidden; }
  .extr-meter > i { display: block; height: 100%; border-radius: 9999px; background: hsl(var(--primary)); }
  .extr-meter--ok > i { background: hsl(var(--tone-ok-mark)); } .extr-meter--info > i { background: hsl(var(--tone-info-mark)); }
  .extr-meter--warn > i { background: hsl(var(--tone-warn-mark)); } .extr-meter--bad > i { background: hsl(var(--tone-bad-mark)); }
  .extr-prio { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: hsl(var(--tone-warn-mark)); }
  .extr-prio--hoch { background: hsl(var(--tone-bad-mark)); } .extr-prio--niedrig { background: hsl(var(--tone-info-mark)); }
  .extr-datechip { display: flex; flex: 0 0 2.5rem; flex-direction: column; align-items: center; justify-content: center; width: 2.5rem; height: 2.625rem; border-radius: .625rem; background: hsl(var(--tone-gold-bg)); color: hsl(var(--tone-gold-fg)); line-height: 1; }
  .extr-datechip > b { font-size: .9375rem; font-weight: 700; }
  .extr-datechip > small { margin-top: 3px; font-size: .59375rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
  .extr-datechip--today { background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
}
a.extr-lrow { color: inherit; }
a.extr-lrow-more { color: hsl(var(--primary-text)); }
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S5 · Hinweis === */
/* Hinweiskasten (01 §3.18): ohne Modifier = Info; --warn, --ok, --bad, --brand. */
@layer components {
  .extr-note { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: .75rem; margin-bottom: 1.25rem; font-size: .84375rem; line-height: 1.5; background: hsl(var(--tone-info-bg)); color: hsl(var(--tone-info-fg)); }
  .extr-note > svg, .extr-note > i { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }
  .extr-note b { font-weight: 700; }
  .extr-note > a, .extr-note > button { margin-left: auto; color: inherit; font-weight: 700; white-space: nowrap; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
  .extr-note--warn  { background: hsl(var(--tone-warn-bg));  color: hsl(var(--tone-warn-fg)); }
  .extr-note--ok    { background: hsl(var(--tone-ok-bg));    color: hsl(var(--tone-ok-fg)); }
  .extr-note--bad   { background: hsl(var(--tone-bad-bg));   color: hsl(var(--tone-bad-fg)); }
  .extr-note--brand { background: hsl(var(--primary-soft));  color: hsl(var(--primary-text)); }
}
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S5 · Upload === */
/* Upload-Zone (01 §3.22): is-over setzt das Modul in dragover/dragleave; Endungs-/Größenprüfung bleibt serverseitig. */
@layer components {
  .extr-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding: 1.5rem 1rem; border: 2px dashed hsl(var(--input)); border-radius: var(--radius-card); background: transparent; color: hsl(var(--muted-foreground)); text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
  .extr-upload > svg, .extr-upload > i { width: 1.75rem; height: 1.75rem; color: hsl(var(--primary-text)); }
  .extr-upload b { font-size: .875rem; color: hsl(var(--foreground)); }
  .extr-upload span { font-size: .8125rem; }
  .extr-upload:hover, .extr-upload.is-over { border-color: hsl(var(--primary)); background: hsl(var(--primary-soft)); }
  .extr-upload:focus-within { box-shadow: 0 0 0 3px hsl(var(--ring)); }
}
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S6 · Popover (01 §3.21; aus S5 hierher verschoben) === */
/* Optik für Dropdowns in Modulen; Öffnen/Schließen über das vorhandene Muster der Kopfaktionen, kein neuer JS-Helfer. */
@layer components {
  .extr-pop-wrap { position: relative; display: inline-block; }
  .extr-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 16.25rem; padding: .5rem; border-radius: var(--radius-pop); background: hsl(var(--popover)); box-shadow: var(--extr-shadow-lg), 0 0 0 1px hsl(var(--foreground) / .10); animation: extrPop .15s cubic-bezier(.16, 1, .3, 1) both; transform-origin: top right; }
  .extr-pop > a, .extr-pop > button { display: flex; align-items: center; gap: .5625rem; width: 100%; padding: .5rem; border: 0; border-radius: var(--radius-btn); background: none; font-size: .875rem; text-align: left; cursor: pointer; }
  .extr-pop > a:hover, .extr-pop > button:hover { background: hsl(var(--muted)); }
  .extr-pop > a svg, .extr-pop > button svg { width: 1rem; height: 1rem; color: hsl(var(--primary-text)); }
  .extr-pop hr { border: 0; border-top: 1px solid hsl(var(--border)); margin: .375rem 0; }
  .extr-pop-label { padding: .5rem .5rem .125rem; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
}
.extr-pop > a, .extr-pop > button { color: hsl(var(--foreground)); }
.extr-pop > .is-danger, .extr-pop > .is-danger svg { color: hsl(var(--destructive)); }
@keyframes extrPop { from { opacity: 0; scale: .96; translate: 0 -4px; } to { opacity: 1; scale: 1; translate: 0 0; } }
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S6 · Modal (01 §3.11, §3.12) === */
/* Animation über die Einzel-Eigenschaften scale/translate statt transform: die Panels positionieren sich am Desktop mit
   transform: translateX(-50%) bzw. translate(-50%, -50%) – eine transform-Keyframe mit fill-mode both überschriebe das
   (Sprung). Ältere Browser (Safari < 14.1) zeigen das Panel ohne Animation. */
html[data-theme="dark"] .extr-dlg-backdrop { background: rgba(6, 14, 24, .6); /* feste Farbe: Scrim dunkel */ }
@keyframes extrFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes extrZoom { from { opacity: 0; scale: .96; translate: 0 6px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes extrSheetUp { from { opacity: 0; translate: 0 16%; } to { opacity: 1; translate: 0 0; } }
/* Blatt am Desktop mittig wie ein Modal (Demo .sheet), mobil siehe Kill-Block B. */
@media (min-width: 1024px) { .extr-dlg-panel--sheet { top: 50%; bottom: auto; transform: translate(-50%, -50%); border-radius: var(--radius-sheet); max-height: 88dvh; } }
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S6 · Modal mobil als Blatt (Kill-Block B) === */
/* Ausgenommen: --compact (Rückfragen bleiben mittig), --inset/--full (Vollbild-Werkzeuge), --top (Auswahl am Feld,
   Bildschirmtastatur). Die Wurzel .extr-dlg ist um die Safe-Area eingerückt (unveränderte Safe-Area-Regeln oben);
   das Blatt reicht per negativem bottom bis zum Rand und polstert innen. Löschen dieses Blocks = Rückfall. */
@media (max-width: 1023px) {
  .extr-dlg-panel:not(.extr-dlg-panel--compact):not(.extr-dlg-panel--inset):not(.extr-dlg-panel--full):not(.extr-dlg-panel--top) {
    left: 0; right: 0; top: .75rem; bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    animation: extrSheetUp .28s cubic-bezier(.2, .8, .3, 1) both;
  }
  /* inhaltshohe Panels wachsen von unten; Standard-Panels (top+bottom) behalten ihre volle Höhe (Editoren).
     Doppelte Klasse: muss die Regel darüber (0,5,0) beim top schlagen, sonst würde das --auto-Panel vollhoch. */
  .extr-dlg-panel.extr-dlg-panel--auto:not(.extr-dlg-panel--compact):not(.extr-dlg-panel--inset):not(.extr-dlg-panel--full):not(.extr-dlg-panel--top),
  .extr-dlg-panel.extr-dlg-panel--sheet:not(.extr-dlg-panel--compact):not(.extr-dlg-panel--inset):not(.extr-dlg-panel--full):not(.extr-dlg-panel--top) { top: auto; transform: none; max-height: calc(100% - 1.5rem); }
  .extr-dlg-panel--sheet::before,
  .extr-dlg-panel--auto:not(.extr-dlg-panel--compact):not(.extr-dlg-panel--inset):not(.extr-dlg-panel--full)::before {
    content: ""; display: block; flex: 0 0 auto; width: 40px; height: 5px; margin: .625rem auto 0; border-radius: 9999px; background: hsl(var(--input));
  }
}
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S8 · Seitenkopf als Karte (Kill-Block C) === */
/* Bestandsregeln „.extr-header-bar“ (sticky Glas-Kopf, Reset-Teil) und deren Dunkel-Regel bleiben stehen und werden hier
   überstimmt – Löschen dieses Blocks = alter Kopf. Der Kopf klebt nicht mehr (D4); es klebt die Shell-Kopfleiste. */
.extr-header-bar { position: static; z-index: auto; width: auto; padding: var(--extr-gap) var(--extr-content-px) 0; background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="dark"] .extr-header-bar { background-color: transparent; }
.extr-header-bar > .extr-content { max-width: none; background: hsl(var(--card)); border-radius: var(--radius-card); box-shadow: var(--extr-shadow-md); }
/* R7: Kopfkarte bündig mit dem Inhalt (22 px), Innenabstand 16/20 wie .pagehead der Demo */
@media (min-width: 1024px) {
  .extr-header-bar { padding-left: 1.375rem; padding-right: 1.375rem; }
  .extr-header-bar > .extr-content { padding: 1rem 1.25rem; }
  .extr-header-bar + .lg\:p-6, .extr-header-bar + .extr-content, .dash-page > .extr-dashboard-body { padding-left: 1.375rem; padding-right: 1.375rem; }
}
@media (max-width: 1023px) { .extr-header-bar > .extr-content { padding-top: .875rem; padding-bottom: .875rem; } }
/* Titel (h1 oder <p class="text-xl"> bei title_tag 'p') und Untertitel */
.extr-header-bar :is(h1, p.text-xl) { font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: hsl(var(--heading)); }
@media (max-width: 1023px) { .extr-header-bar :is(h1, p.text-xl) { font-size: 1.0625rem; } }
.extr-header-bar :is(h1, p.text-xl) + p { font-size: .8125rem; color: hsl(var(--bodytext)); }
/* Symbolkachel (Helfer page-header.php und Hand-Köpfe: h-11 w-11 rounded-xl bg-primary/10) */
.extr-header-bar .h-11.w-11.rounded-xl { border-radius: .75rem; background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
.extr-header-bar .h-11.w-11.rounded-xl svg { width: 1.3125rem; height: 1.3125rem; color: hsl(var(--primary-text)); }
@media (max-width: 1023px) { .extr-header-bar .h-11.w-11.rounded-xl { width: 2.5rem; height: 2.5rem; } }
/* Brotkrumen auch mobil: nav als erstes Kind (Helfer: „hidden lg:flex“) – ungeschichtet schlägt .hidden */
.extr-header-bar > .extr-content > nav:first-child { display: flex; flex-wrap: wrap; font-size: .78125rem; margin-bottom: .125rem; color: hsl(var(--muted-foreground)); }
/* Zurück: rund mit Rahmen (Demo .backbtn); ohne :has() bleibt ein normaler runder Symbolknopf */
.extr-header-bar .extr-icon-btn:has(> [data-lucide="arrow-left"], > svg.lucide-arrow-left) { width: 2.5rem; height: 2.5rem; border: 1px solid hsl(var(--input)); color: hsl(var(--heading)); }
/* Ausdrücklich klebende Köpfe (Lücke G1: Test-Timer schulungen-run.php) – kleben unter der Shell-Kopfleiste;
   deckender Grund in beiden Themen (die Dunkel-Regel oben wiegt mehr als .extr-header-bar.sticky) */
.extr-header-bar.sticky { position: sticky; top: var(--extr-sticky-top, 0px); z-index: 30; background: hsl(var(--background)); }
html[data-theme="dark"] .extr-header-bar.sticky { background-color: hsl(var(--background)); }
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S8 · Übergang klebende Modul-Elemente (Lücke G1) – Rückbau per Nachforderung der Welle === */
html { scroll-padding-top: calc(var(--extr-sticky-top, 0px) + .5rem); }
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S9 · Inhaltsbreite D5 (Kill-Block D) === */
@media (min-width: 1024px) {
  #extr-main { width: 100%; max-width: calc(var(--extr-content-max) + 2 * var(--extr-content-px)); margin-inline: auto; }
  .extr-topbar-wrap { width: 100%; max-width: calc(var(--extr-content-max) + 2 * var(--extr-content-px)); margin-inline: auto; }
  /* Volle Breite (Modul markiert seine Wurzel). Der Übergang über data-view ist seit Sammler w4 leer und entfallen. */
  #extr-main:has(> .extr-page--wide) { max-width: none; }
  .extr-main:has(> #extr-main > .extr-page--wide) > .extr-topbar-wrap { max-width: none; }
}
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S9 · Shell Desktop: Markenblock, Einklappen, Kopfkarte (01 §4.3 Teil A, neue Regeln) === */
.extr-signet { display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: url("../images/logo.png") center / contain no-repeat; mask: url("../images/logo.png") center / contain no-repeat; }
.extr-sidebar-brand { display: flex; flex: 1 1 auto; align-items: center; gap: .6875rem; min-width: 0; color: inherit; text-decoration: none; }
a.extr-sidebar-brand { color: inherit; }
.extr-sidebar-brand .extr-signet { width: 34px; height: 34px; color: hsl(var(--brand-mint)); }
.extr-sidebar-wordmark { display: block; min-width: 0; line-height: 1.15; }
.extr-sidebar-close { display: none; margin-left: auto; padding: 4px 6px; border: 0; background: none; color: inherit; opacity: .8; cursor: pointer; line-height: 0; }

/* Eingeklappt (Desktop, html[data-nav="collapsed"]): 75 px; Hover/Tastaturfokus klappt als Überlagerung auf */
@media (min-width: 1024px) {
  html[data-nav="collapsed"] .extr-sidebar:hover, html[data-nav="collapsed"] .extr-sidebar:focus-within { width: var(--extr-side-w); box-shadow: var(--extr-shadow-lg); }
  html[data-nav="collapsed"] .extr-sidebar:not(:hover):not(:focus-within) :is(.extr-sidebar-wordmark, .extr-sidebar-version, .extr-nav-label, .extr-sidebar-user-info, .extr-sidebar-user > svg, .extr-nav-item > svg:not(.extr-nav-icon)) { display: none; }
  html[data-nav="collapsed"] .extr-sidebar:not(:hover):not(:focus-within) :is(.extr-sidebar-logo, .extr-sidebar-brand) { justify-content: center; padding-inline: 0; }
  html[data-nav="collapsed"] .extr-sidebar:not(:hover):not(:focus-within) .extr-sidebar-brand { flex: 0 0 auto; }
  html[data-nav="collapsed"] .extr-sidebar:not(:hover):not(:focus-within) .extr-nav-heading { height: 1px; margin: .5rem 1rem; padding: 0; font-size: 0; background: rgba(255,255,255,.16); /* feste Farbe */ }
  html[data-nav="collapsed"] .extr-sidebar:not(:hover):not(:focus-within) .extr-nav-item { justify-content: center; padding-inline: 0; margin-inline: .75rem; border-radius: var(--radius-btn); }
  html[data-nav="collapsed"] .extr-sidebar:not(:hover):not(:focus-within) .extr-nav-item::before { display: none; }
  /* Fuß: Avatar (38 px) passt nur ohne Innenabstand in die 75-px-Leiste */
  html[data-nav="collapsed"] .extr-sidebar:not(:hover):not(:focus-within) .extr-sidebar-footer { padding-inline: .5rem; }
  html[data-nav="collapsed"] .extr-sidebar:not(:hover):not(:focus-within) .extr-sidebar-footer .extr-sidebar-user { justify-content: center; padding-inline: 0; background: none; }
  /* Zähler bleibt als Punkt sichtbar */
  html[data-nav="collapsed"] .extr-sidebar:not(:hover):not(:focus-within) .extr-nav-badge:not(.hidden) { position: absolute; top: 5px; right: 12px; min-width: 9px; width: 9px; height: 9px; padding: 0; font-size: 0; }
  html[data-nav="collapsed"] .extr-sidebar:not(:hover):not(:focus-within) .extr-nav-badge:not(.hidden)::before { content: none; }
}

/* Kopfkarte im Deckstreifen (sticky, Fenster-Scroll D4). Der Streifen in Seitenfarbe deckt durchscrollenden Inhalt über
   der Karte ab und endet hart hinter der Karte, damit unter ihr kein Schleier über dem Inhalt liegt. Sein Abstand nach
   unten ragt per negativem Rand über den Inhalt, ohne Platz zu nehmen.
   syncStickyTop misst ihn ([data-extr-sticky-head]). */
.extr-topbar-wrap { display: none; }
@media (min-width: 1024px) {
  .extr-topbar-wrap { display: block; position: sticky; top: 0; z-index: 50; padding: var(--extr-gap) var(--extr-content-px) .5rem; margin-bottom: -.5rem; pointer-events: none;
    background: linear-gradient(hsl(var(--background)) calc(100% - .5rem - var(--extr-topbar-h) / 2), transparent 0); }
}
.extr-topbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; height: var(--extr-topbar-h); padding: 0 1rem 0 .875rem; border-radius: 16px; background: hsl(var(--card)); box-shadow: var(--extr-shadow-md); pointer-events: auto; }
.extr-topbar-lead, .extr-topbar-tools { display: flex; align-items: center; gap: .375rem; min-width: 0; }
.extr-topbar-lead { flex: 1 1 auto; }
.extr-topbar-tools { flex: 0 0 auto; } /* Werkzeuge behalten ihre Breite; schrumpfen darf nur die Suche */
.extr-topbar .extr-icon-btn { position: relative; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; color: hsl(var(--heading)); }
.extr-topbar .extr-icon-btn:hover { background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
/* Suche: Knopf, kein Feld (F14) */
.extr-qsearch { display: flex; flex: 0 1 380px; align-items: center; gap: .625rem; min-width: 0; height: 42px; padding: 0 .5rem 0 .875rem; border: 1px solid hsl(var(--input)); border-radius: 9999px; background: transparent; color: hsl(var(--muted-foreground)); font-size: .875rem; text-align: left; cursor: pointer; }
.extr-qsearch:hover { border-color: hsl(var(--primary)); color: hsl(var(--bodytext)); }
.extr-qsearch > svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.extr-qsearch > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extr-kbd { flex: 0 0 auto; padding: 2px 7px; border-radius: 6px; background: hsl(var(--muted-bg)); color: hsl(var(--muted-foreground)); font: 600 .6875rem/1.4 var(--font-sans); }
/* Glocken-Zähler: eigene Klasse, damit updateAppBadge (zählt .extr-nav-badge/.extr-bottom-nav-badge) sie nicht doppelt zählt */
.extr-icon-badge { position: absolute; right: 3px; top: 3px; display: flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9999px; background: hsl(var(--primary-strong)); color: hsl(var(--primary-foreground)); font-size: .625rem; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px hsl(var(--card)); }
.extr-icon-badge.hidden { display: none; }
html:not([data-theme="dark"]) .extr-theme-sun, html[data-theme="dark"] .extr-theme-moon { display: none; }
.extr-topchip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .375rem; height: 36px; padding: 0 .75rem 0 .625rem; margin-right: .25rem; border-radius: 9999px; background: hsl(var(--muted-bg)); font-size: .8125rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
.extr-topchip > svg { flex: 0 0 auto; width: 1rem; height: 1rem; color: hsl(var(--primary-text)); }
a.extr-topchip { color: hsl(var(--foreground)); }
.extr-topbar-profile { display: flex; flex: 0 0 auto; align-items: center; gap: .75rem; padding: 4px .75rem 4px 4px; border: 0; border-radius: 9999px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.extr-topbar-profile:hover, .extr-pmenu.is-open .extr-topbar-profile { background: hsl(var(--primary-soft)); }
.extr-topbar-profile-txt b { display: block; font-size: .875rem; font-weight: 600; line-height: 1.25; color: hsl(var(--heading)); white-space: nowrap; }
.extr-topbar-profile-txt small { display: block; font-size: .75rem; line-height: 1.25; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.extr-topbar-profile > svg { flex: 0 0 auto; width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); }
@media (max-width: 1279px) { .extr-topbar-profile-txt { display: none; } }
/* Menü der Personenkarte (R7, Demo .pmenu/.pop). Der Desktop-Block der Kopfaktionen setzt .extr-action-menu-wrap auf static. */
.extr-topbar .extr-pmenu { position: relative; flex: 0 0 auto; }
.extr-pmenu-panel { display: none; }
.extr-pmenu.is-open .extr-pmenu-panel { display: block; }
.extr-pmenu-who { padding: .25rem .5rem .625rem; margin-bottom: .25rem; border-bottom: 1px solid hsl(var(--border)); }
.extr-pmenu-who b { display: block; font-weight: 600; color: hsl(var(--heading)); }
.extr-pmenu-who span { display: block; font-size: .75rem; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extr-pop > a.extr-pmenu-out { justify-content: center; border: 1px solid hsl(var(--border)); font-weight: 500; }
/* Ungeschichtete display-Regeln: Begleitregel für .hidden (§0.3 Nr. 8) */
.extr-signet.hidden, .extr-sidebar-brand.hidden, .extr-sidebar-wordmark.hidden, .extr-topbar-wrap.hidden, .extr-topbar.hidden, .extr-topbar-lead.hidden, .extr-topbar-tools.hidden,
.extr-qsearch.hidden, .extr-topchip.hidden, .extr-topbar-profile.hidden, .extr-pmenu.hidden { display: none; }
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S10 · Shell mobil: Glas-Kopf, Schublade, Safe-Area (01 §4.3 Teil B) === */
.extr-mhdr, .extr-nav-scrim { display: none; }
@media (max-width: 1023px) {
  .extr-mhdr { display: block; position: sticky; top: 0; z-index: 40; color: #fff; /* feste Farbe: Schrift auf Markenverlauf */ padding: calc(env(safe-area-inset-top, 0px) + 10px) .75rem .75rem 1rem;
    border-radius: 0 0 20px 20px; background: var(--extr-nav-grad); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 24px rgba(12,28,45,.2); /* feste Farbe: Lichtkante, Schatten */ }
  /* Schublade = dieselbe <aside>; geschlossen unsichtbar (visibility) und damit nicht per Tab erreichbar */
  .extr-sidebar { display: flex; left: max(10px, env(safe-area-inset-left, 0px)); top: calc(env(safe-area-inset-top, 0px) + 10px); bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    width: min(var(--extr-side-w), calc(100vw - 48px)); box-shadow: var(--extr-shadow-lg);
    transform: translateX(calc(-100% - 24px)); visibility: hidden; transition: transform .24s ease, visibility 0s linear .24s; }
  .extr-shell.is-nav-open .extr-sidebar { transform: none; visibility: visible; transition: transform .24s ease, visibility 0s; }
  .extr-nav-scrim { display: block; position: fixed; inset: 0; z-index: 54; background: var(--extr-scrim-nav); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
  .extr-shell.is-nav-open .extr-nav-scrim { opacity: 1; pointer-events: auto; }
  .extr-sidebar-close { display: inline-flex; }
  .extr-sidebar-version { display: none; }
  .extr-nav-item { min-height: 2.75rem; }
  html.extr-nav-lock, html.extr-nav-lock body { overflow: hidden; }
  /* Safe-Area oben trägt jetzt der Glas-Kopf: Hero ohne env(); die S8-Übergangszeile in Kill-Block C ist gelöscht */
  .extr-dashboard-hero { padding-top: 1.5rem; }
}
.extr-sidebar-close > svg { width: 1.25rem; height: 1.25rem; }
.extr-mhdr-row { display: flex; align-items: center; gap: .625rem; }
.extr-mhdr-brand { display: flex; flex: 1 1 auto; align-items: center; gap: .625rem; min-width: 0; color: inherit; text-decoration: none; }
.extr-mhdr-brand .extr-signet { width: 28px; height: 28px; color: hsl(var(--brand-mint)); }
.extr-mhdr-brand > span { min-width: 0; }
.extr-mhdr-t { display: block; font-size: .84375rem; font-weight: 700; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; }
.extr-mhdr-sub { display: block; margin-top: 2px; font-size: .78125rem; font-weight: 500; color: hsl(var(--brand-mint-l)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extr-mhdr .extr-icon-btn { position: relative; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; color: #fff; /* feste Farbe */ }
.extr-mhdr .extr-icon-btn:hover, .extr-mhdr .extr-icon-btn:active { background: rgba(255,255,255,.16); color: #fff; /* feste Farbe */ }
.extr-mhdr .extr-icon-badge { box-shadow: 0 0 0 2px #163a52; /* feste Farbe: Ring auf Glas */ }
a.extr-mhdr-brand { color: #fff; } /* feste Farbe */
/* Ungeschichtete display-Regeln: Begleitregel für .hidden (§0.3 Nr. 8) */
.extr-mhdr.hidden, .extr-nav-scrim.hidden, .extr-mhdr-row.hidden, .extr-mhdr-brand.hidden, .extr-mhdr-t.hidden, .extr-mhdr-sub.hidden, .extr-sidebar-close.hidden { display: none; }
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S10 · Glas-Optik des mobilen Kopfs (Kill-Block E) === */
@media (max-width: 1023px) {
  .extr-mhdr { background: var(--extr-mhdr-grad); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .extr-mhdr { background: var(--extr-nav-grad); } }
@media (prefers-reduced-transparency: reduce) { .extr-mhdr { background: var(--extr-nav-grad); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S11 · Willkommens-Karte (nur dashboard.php, Klasse --welcome; 01 §3.27) === */
.extr-dashboard-hero--welcome { overflow: hidden; border-radius: var(--radius-card); box-shadow: var(--extr-shadow-md); }
.extr-dashboard-hero--welcome::before { content: ""; position: absolute; right: 20px; bottom: -70px; width: 270px; height: 270px; z-index: 1; background: hsl(var(--brand-mint)); opacity: .14; pointer-events: none;
  -webkit-mask: url("../images/logo.png") center / contain no-repeat; mask: url("../images/logo.png") center / contain no-repeat; }
.extr-dashboard-hero--welcome > :not(.extr-hero-photo) { position: relative; z-index: 2; }
/* Mit Standortfoto liegt das Wasserzeichen über der Fotomaske (::after, z 1), sonst verschwände es darunter */
.extr-dashboard-hero--welcome.has-photo::before { z-index: 2; }
@media (max-width: 1023px) {
  .extr-dashboard-hero--welcome { margin: var(--extr-gap) var(--extr-content-px) 0; }
  .extr-dashboard-hero--welcome::before { width: 180px; height: 180px; }
  /* Inhalt mobil auf derselben Flucht wie die Willkommens-Karte (statt px-6) */
  .extr-dashboard-hero--welcome ~ .extr-dashboard-body { padding-left: var(--extr-content-px); padding-right: var(--extr-content-px); }
}
.extr-hero-eyebrow { font-size: .71875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--brand-mint)); }
p.extr-hero-eyebrow { margin-bottom: .375rem; }
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S13 · Editor-Hülle für eigene Editoren ohne Summernote (01 §3.23) === */
/* Summernote selbst: Werte an Ort und Stelle im Summernote-Block. Muster: .extr-editor > .extr-editor-bar (Knöpfe
   extr-icon-btn--sm) + Inhaltsfläche. */
@layer components {
  .extr-editor { border: 1px solid hsl(var(--input)); border-radius: .75rem; background: hsl(var(--card)); overflow: hidden; }
  .extr-editor:focus-within { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--ring)); }
  .extr-editor-bar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .375rem; background: hsl(var(--muted-bg)); border-bottom: 1px solid hsl(var(--border)); }
}
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S13 · Kalender/Planer (01 §3.24) === */
/* Monatsraster .extr-cal (Kopf + 7er-Raster), Wochenstreifen .extr-week; Wochenstart Montag. Gesamtplan/Matrix bleibt
   .extr-table.extr-table--dense. Mobil: Einträge als Punkt statt Badge. */
@layer components {
  .extr-cal-head, .extr-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .extr-cal-head { margin-bottom: 4px; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); text-align: center; }
  .extr-cal-day { min-height: 5.5rem; padding: .375rem; border-radius: .625rem; background: hsl(var(--muted-bg)); display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
  .extr-cal-day > b { font-size: .8125rem; font-weight: 600; color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; }
  .extr-cal-day.is-today { box-shadow: inset 0 0 0 1.5px hsl(var(--primary)); }
  .extr-cal-day.is-off { background: transparent; }
  .extr-cal-day.is-other > b { color: hsl(var(--muted-foreground)); opacity: .6; }
  .extr-cal-day .extr-badge { height: auto; min-height: 1.25rem; white-space: normal; overflow: hidden; text-overflow: ellipsis; }
  .extr-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .extr-week-d { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .375rem 0; border-radius: .625rem; background: hsl(var(--muted-bg)); color: hsl(var(--muted-foreground)); font-size: .6875rem; }
  .extr-week-d > b { font-size: .8125rem; color: hsl(var(--foreground)); }
  .extr-week-d.is-work { background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
  .extr-week-d.is-today { box-shadow: inset 0 0 0 1.5px hsl(var(--primary)); }
  @media (max-width: 1023px) {
    .extr-cal-day { min-height: 3.25rem; }
    .extr-cal-day .extr-badge { display: none; }
    .extr-cal-day.has-items::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--primary)); align-self: center; }
  }
}
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S13 · Chat-Blasen (Zielform der Chat-Welle, 01 §3.25) === */
/* Bestand .chat-msg-col/.chat-bubble-own/.chat-bubble-other bleibt (Testanker); die Chat-Welle stellt auf diese Klassen um. */
@layer components {
  .extr-chat-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: min(80%, 36rem); }
  .extr-chat-msg--own { align-self: flex-end; align-items: flex-end; }
  .extr-chat-bubble { padding: .5625rem .875rem; border-radius: 1.125rem; background: hsl(var(--surface)); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
  .extr-chat-msg--own .extr-chat-bubble { background: hsl(var(--primary-soft)); border-color: transparent; }
  .extr-chat-meta { font-size: .6875rem; color: hsl(var(--muted-foreground)); }
}
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S13 · Kanban (01 §3.26) === */
/* Spalte = Karte mit .extr-card-header; Ziehen per Pointer-Events (Muster _links-shared.php), nicht HTML5-Drag allein. */
@layer components {
  .extr-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr); gap: 1.25rem; overflow-x: auto; padding-bottom: .5rem; }
  .extr-kanban-col { display: flex; flex-direction: column; min-width: 0; padding: 1rem; background: hsl(var(--card)); border-radius: var(--radius-card); box-shadow: var(--extr-shadow-md); }
  .extr-kanban-list { display: flex; flex-direction: column; gap: .625rem; min-height: 3rem; }
  .extr-kanban-card { padding: .75rem; background: hsl(var(--surface)); border: 1px solid hsl(var(--border)); border-radius: .75rem; cursor: grab; }
  .extr-kanban-card.is-dragging { opacity: .45; }
  .extr-kanban-list.is-over { outline: 2px dashed hsl(var(--primary) / .45); outline-offset: 4px; border-radius: .75rem; }
}
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S14 · Öffentliche Seiten: Zustand, Schrittliste === */
@layer components {
  .extr-public-state { text-align: center; }
  .extr-public-state-icon { width: 3.25rem; height: 3.25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
    margin: .25rem auto .875rem; background: hsl(var(--muted-bg)); color: hsl(var(--muted-foreground)); }
  .extr-public-state-icon svg, .extr-public-state-icon i { width: 1.5rem; height: 1.5rem; }
  .extr-public-state--ok    .extr-public-state-icon { background: hsl(var(--tone-ok-bg));   color: hsl(var(--tone-ok-fg)); }
  .extr-public-state--warn  .extr-public-state-icon { background: hsl(var(--tone-warn-bg)); color: hsl(var(--tone-warn-fg)); }
  .extr-public-state--bad   .extr-public-state-icon { background: hsl(var(--tone-bad-bg));  color: hsl(var(--tone-bad-fg)); }
  .extr-public-state--brand .extr-public-state-icon { background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
  .extr-public-steps { list-style: none; display: flex; flex-direction: column; gap: .625rem; counter-reset: extr-pstep; }
  .extr-public-steps > li { display: flex; gap: .625rem; align-items: flex-start; font-size: .875rem; line-height: 1.5; color: hsl(var(--bodytext)); counter-increment: extr-pstep; }
  .extr-public-steps > li::before { content: counter(extr-pstep); flex: none; width: 1.375rem; height: 1.375rem; margin-top: .0625rem; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700;
    background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
}
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S13 · Druck (D24, 01 §3.29) === */
/* SPA-Seiten drucken ohne Shell. Eigene Druckseiten (modules/<modul>/…print.php, public/freigabe.php …) behalten ihre Styles.
   .extr-noprint ersetzt künftig wd-noprint/fp-noprint in den Modulen (Nachforderung beim Modulumbau). */
@media print {
  .extr-sidebar, .extr-topbar-wrap, .extr-mhdr, .extr-bottom-nav, .extr-nav-scrim, .extr-toasts, .extr-page-actions,
  #extr-push-banner, #extr-geo-banner, .extr-noprint { display: none !important; }
  body.extr-body { background: #fff; color: #000; } /* feste Farbe: Papier */
  .extr-main { padding: 0 !important; }
  #extr-main { max-width: none !important; }
  .extr-header-bar { padding: 0 !important; }
  .bg-white.rounded-2xl.border-border, .extr-card, .extr-stat, .extr-header-bar > .extr-content, .extr-dash-widget { box-shadow: none !important; border: 1px solid #d9e2e0 !important; } /* feste Farbe: Papier */
  .extr-dashboard-hero { background: #1f5b7c !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* feste Farbe: CI */
  @page { margin: 1.4cm; }
}
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · S12 · Shell-Overlays (D22; 01 §4.3 Teil C) === */
/* Ungeschichtet (Shell, §0.3 Nr. 8): --pop muss das ungeschichtete Dialog-Skelett und das Blatt aus S6 schlagen, die
   ID-Regeln die Utilities der Inline-Skripte. Die Wurzel .extr-dlg ist bereits um die Safe-Area eingerückt (Bestand). */
/* Befehlspalette (Suche) */
.extr-cmdk { display: flex; align-items: flex-start; justify-content: center; padding: 12vh 1rem 1rem; }
.extr-cmdk-box { position: relative; width: 100%; max-width: 36.25rem; border-radius: 16px; background: hsl(var(--popover)); box-shadow: var(--extr-shadow-xl); overflow: visible; animation: extrZoom .18s cubic-bezier(.16, 1, .3, 1) both; }
.extr-cmdk-head { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; padding: .875rem 1rem; border-bottom: 1px solid hsl(var(--border)); border-radius: 16px 16px 0 0; }
.extr-cmdk-head > svg { width: 1.125rem; height: 1.125rem; color: hsl(var(--muted-foreground)); flex: 0 0 auto; }
.extr-cmdk-head input { flex: 1 1 9rem; min-width: 0; border: 0; background: none; outline: none; font-size: .96875rem; color: hsl(var(--foreground)); }
.extr-cmdk-head input::placeholder { color: hsl(var(--muted-foreground)); }
.extr-cmdk-head .extr-dlg-x { width: 2rem; height: 2rem; margin-right: -.375rem; }
.extr-cmdk-list { max-height: min(440px, 56vh); overflow-y: auto; padding: 6px; }
/* Treffer: Anzeige (flex/block) bleibt bei den Klassen der Inline-Skripte – Suchtreffer stapeln Titel und Untertitel. */
#extr-search-results [data-cmd-item] { padding: .5625rem .625rem; border-radius: 9px; color: hsl(var(--foreground)); }
#extr-search-results [data-cmd-item]:hover, #extr-search-results .extr-cmd-item--active { background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
#extr-search-results [data-cmd-item] svg { color: hsl(var(--primary-text)); }
/* Gruppenkopf (text-xs) vs. Zustandszeile (p-4: „Suche…“, „Keine Treffer.“) */
#extr-search-results > div.text-xs:not([data-cmd-item]) { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.extr-cmdk-empty { padding: 1.375rem .75rem; text-align: center; color: hsl(var(--muted-foreground)); font-size: .875rem; }
#extr-search-results > div.p-4 { padding: 1.375rem .75rem; text-align: center; }   /* Farbe bleibt bei den Klassen (Fehler rot) */
.extr-cmdk-foot { display: flex; flex-wrap: wrap; gap: .875rem; padding: .5625rem 1rem; border-top: 1px solid hsl(var(--border)); border-radius: 0 0 16px 16px; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.extr-cmdk-foot .extr-kbd { margin-right: .25rem; }
@media (max-width: 1023px) {
  .extr-cmdk { padding: .75rem .5rem .5rem; }   /* Safe-Area oben trägt schon die Wurzel .extr-dlg */
  .extr-cmdk-foot { display: none; }
  .extr-cmdk-head input { font-size: 1rem; }    /* iOS-Fokuszoom im Browser, vgl. §3.9 */
}
/* Benachrichtigungen: Desktop verankertes Panel rechts unter der Kopfkarte, mobil Blatt (--sheet über Kill-Block B) */
@media (min-width: 1024px) {
  .extr-dlg-panel--pop { left: auto; right: calc(var(--extr-gap) + var(--extr-content-px)); top: calc(var(--extr-gap) + var(--extr-topbar-h) + 8px); bottom: auto; transform: none; width: 23.75rem; max-width: calc(100vw - 2rem); max-height: min(560px, 70vh); border-radius: var(--radius-pop); overflow: hidden; }
  .extr-dlg-backdrop--light { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-theme="dark"] .extr-dlg-backdrop--light { background: transparent; }
}
#extr-notif-modal .extr-dlg-head { gap: .375rem; padding: 1rem .75rem .5rem 1rem; }
#extr-notif-modal .extr-dlg-head-title { flex: 1 1 auto; gap: .5rem; }
#extr-notif-modal .extr-dlg-head-title h2 { min-width: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#extr-notif-markall { flex: 0 0 auto; }
.extr-notif-list { padding: .25rem .5rem .5rem; }   /* nach .extr-dlg-body (Skelett) – gewinnt über die Reihenfolge */
.extr-notif-list > * + * { margin-top: 2px; }
#extr-notif-list .notif-item { border-radius: 10px; padding: .625rem .75rem; }
#extr-notif-list .notif-item:hover { background: hsl(var(--muted)); }
#extr-notif-list .notif-icon { width: 2.25rem; height: 2.25rem; }
#extr-notif-list .notif-dot { background: hsl(var(--primary)); }
#extr-notif-footer { padding: .625rem 1rem .875rem; }
#extr-notif-info .extr-dlg-head-title h2 { font-size: 1rem; }
/* Push-/Geo-Banner auf dem Hero-Verlauf; [hidden] (Tailwind-Preflight !important) schlägt display:flex */
.extr-pbanner { position: fixed; left: .75rem; right: .75rem; bottom: calc(var(--extr-bottomnav-h, 6.5rem) + .5rem); z-index: 46; display: flex; align-items: flex-start; gap: .75rem; padding: .875rem 1rem; border-radius: 16px; background: var(--extr-hero-grad); color: #fff; /* feste Farbe: Weiß auf Markenverlauf */ box-shadow: var(--extr-shadow-lg); }
/* Beide sichtbar: Geo-Banner (folgt im DOM) über dem Push-Banner (Höhe ~9,5 rem mobil, ~8,25 rem Desktop); allein unten */
#extr-push-banner:not([hidden]) ~ #extr-geo-banner.extr-pbanner { bottom: calc(var(--extr-bottomnav-h, 6.5rem) + 11rem); }
@media (min-width: 1024px) {
  .extr-pbanner { left: auto; right: 1.5rem; bottom: 1.5rem; max-width: 24rem; }
  #extr-push-banner:not([hidden]) ~ #extr-geo-banner.extr-pbanner { bottom: 10.5rem; }
}
.extr-pbanner h4 { color: #fff; font-size: .875rem; font-weight: 600; } /* feste Farbe: Weiß auf Markenverlauf */
.extr-pbanner p { margin-top: .125rem; color: rgba(255,255,255,.86); font-size: .84375rem; line-height: 1.45; } /* feste Farbe: Weiß auf Markenverlauf */
.extr-pbanner > svg { width: 22px; height: 22px; margin-top: 1px; color: hsl(var(--brand-mint)); flex: 0 0 auto; }
.extr-pbanner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }
/* Ungeschichtete display-Regeln: Begleitregel für .hidden (§0.3 Nr. 8); .extr-dlg-foot (Skelett, ungeschichtet) wird
   von der Glocke per .hidden umgeschaltet (#extr-notif-footer). */
.extr-cmdk.hidden, .extr-cmdk-head.hidden, .extr-cmdk-foot.hidden, .extr-pbanner.hidden, .extr-pbanner-actions.hidden, .extr-dlg-foot.hidden { display: none; }
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · Sammler w1 · Begleitregel Button-Spinner (NF-oeffentlich-07) === */
/* .extr-btn-spin setzt display ungeschichtet (inline-block); .hidden aus @layer utilities verlöre (§0.3 Nr. 8).
   Nutzer: modules/auth/twofactor.php (#tf-spin, setStatus()). */
.extr-btn-spin.hidden { display: none; }
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · Sammler w2 · Kanalbild in der Symbolkachel (NF-chats-01) === */
/* Foto füllt die Kachel und folgt ihrem Radius; ohne <img> ohne Wirkung. Nutzer: partials/chats.php, chat-detail.php (Kanalbild). */
@layer components {
  .extr-lrow-ico { overflow: hidden; }
  .extr-lrow-ico > img { width: 100%; height: 100%; object-fit: cover; }
}
/* === /DESIGN-V2 === */

/* === DESIGN-V2 · Bewegung reduzieren (am Ende des Abschnitts; S4, 01 §3.28) === */
/* Bleibt der letzte Block des DESIGN-V2-Abschnitts (danach nur der MODULE-Abschnitt, §0.10 Nr. 7): spätere Schritte setzen ihre Blöcke davor (§0.10). transform mit !important, weil
   die Hover-Hebung der Karten-Kette (Kill-Block A) (0,4,1)/(0,5,0) wiegt und sonst gewänne. */
@media (prefers-reduced-motion: reduce) {
  .extr-dlg-panel, .extr-dlg-backdrop, .extr-pop, .extr-more-sheet, .extr-sidebar, .extr-nav-scrim, .extr-cmdk-box { animation: none !important; transition: none !important; }
  .bg-white.rounded-2xl.border-border:hover, a.extr-stat:hover { transform: none !important; }
}
/* === /DESIGN-V2 === */

/* ════ MODULE · Redesign-Wellen ════ */
/* Nur der Kern-Sammler schreibt hier (01 §10). Je Modul ein Block, alphabetisch; Klassen mit Modulpräfix, Farben über
   Token (Ausnahmen mit „feste Farbe“). Quelle: workspace/redesign/nachforderungen/<welle>/<modul>.md. */

/* === MODUL arbeitsanweisungen · W2 === */
/* NF-01 Artikel-Typografie (vorher <style> arbeitsanweisungen-detail.php:466–488, pruefung.php:112–124; freigabe.php:194 ohne Regeln).
   Ungeschichtet: der Reset (app.css Z. 9–15) schlägt Layer-Regeln. DB-Inhaltsklassen nur unter .wd-prose / .wd-doc-editor. */
.wd-prose { color: hsl(var(--bodytext)); line-height: 1.8; overflow-wrap: anywhere; }
.wd-prose > :first-child { margin-top: 0; }
.wd-prose h2 { font-size: 1.375rem; font-weight: 700; line-height: 1.3; color: hsl(var(--heading)); margin: 2.5rem 0 1rem; scroll-margin-top: 4rem; }
.wd-prose h3 { font-size: 1.0625rem; font-weight: 600; color: hsl(var(--primary-text)); margin: 1.75rem 0 .75rem; scroll-margin-top: 4rem; }
.wd-prose p { margin: 0 0 1.25rem; }
.wd-prose ul { list-style: none; padding: 0; margin: 1.25rem 0; }
.wd-prose ul li { position: relative; padding-left: 1.5rem; margin-bottom: .5rem; line-height: 1.7; }
.wd-prose ul li::before { content: '▸'; position: absolute; left: 0; color: hsl(var(--primary-text)); font-weight: 700; }
.wd-prose ol { list-style: decimal; padding-left: 1.5rem; margin: 1.25rem 0; }
.wd-prose ol li { margin-bottom: .5rem; line-height: 1.7; }
.wd-prose :is(strong, b) { color: hsl(var(--foreground)); font-weight: 600; }
.wd-prose a { color: hsl(var(--primary-text)); text-decoration: underline; text-underline-offset: 2px; }
.wd-prose table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .875rem; }
.wd-prose :is(th, td) { border: 1px solid hsl(var(--border)); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.wd-prose img:not([src]) { display: none; } /* Importreste ohne Quelle nicht als leeren Rahmen zeigen */
.wd-prose img { max-width: 100%; height: auto; border-radius: .75rem; cursor: zoom-in; }
:is(.wd-prose, .wd-doc-editor) .anchor-link { position: relative; padding-left: 12px; border-left: 4px solid hsl(var(--primary)); }
:is(.wd-prose, .wd-doc-editor) .article-image-full { width: 100%; height: auto; border-radius: 1rem; margin: 3rem 0; box-shadow: var(--extr-shadow-lg); }
:is(.wd-prose, .wd-doc-editor) .article-image-float-right { float: right; width: 45%; max-width: 450px; height: auto; border-radius: .75rem; margin: 0 0 2rem 2.5rem; box-shadow: var(--extr-shadow-md); }
:is(.wd-prose, .wd-doc-editor) .article-image-float-left { float: left; width: 45%; max-width: 450px; height: auto; border-radius: .75rem; margin: 0 2.5rem 2rem 0; box-shadow: var(--extr-shadow-md); }
@media (max-width: 1024px) { :is(.wd-prose, .wd-doc-editor) :is(.article-image-float-right, .article-image-float-left) { float: none; width: 100%; max-width: 100%; margin: 2rem 0; } }
:is(.wd-prose, .wd-doc-editor) .clear { clear: both; height: 0; margin: 0; padding: 0; }
/* !important wie im Bestand: überstimmt Inline-Stile, die Summernote in Absätze schreibt */
:is(.wd-prose, .wd-doc-editor) .lead-paragraph { font-size: 1.15rem !important; line-height: 1.8 !important; font-weight: 500 !important; color: hsl(var(--foreground)) !important; margin-bottom: 1.5rem !important; }
/* NF-02 In-Artikel-Suche: klebt unter der Shell-Kopfleiste (F17) */
.wd-search-bar { position: sticky; top: var(--extr-sticky-top, 0px); z-index: 30; background-color: hsl(var(--background) / .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .wd-search-bar { background-color: hsl(var(--background)); } }
.wd-prose mark.wd-hit { background: #fef08a; color: #1f2937; border-radius: 2px; padding: 0 1px; scroll-margin-top: calc(var(--extr-sticky-top, 0px) + 5rem); } /* feste Farbe: Textmarker, dunkle Schrift in beiden Themen */
.wd-prose mark.wd-hit-current { background: #fb923c; color: #1f2937; box-shadow: 0 0 0 2px #fb923c; } /* feste Farbe: aktueller Treffer */
/* NF-03 Versionsvergleich */
.wd-diff ins { background: hsl(var(--tone-ok-bg)); color: hsl(var(--tone-ok-fg)); text-decoration: none; padding: 0 2px; border-radius: 3px; }
.wd-diff del { background: hsl(var(--tone-bad-bg)); color: hsl(var(--tone-bad-fg)); text-decoration: line-through; padding: 0 2px; border-radius: 3px; }
.wd-diff p { line-height: 1.8; margin: 0 0 1rem; color: hsl(var(--bodytext)); }
.wd-diff h2 { font-size: 1.25rem; font-weight: 700; color: hsl(var(--heading)); margin: 1.75rem 0 .75rem; }
.wd-diff h3 { font-size: 1.05rem; font-weight: 600; color: hsl(var(--primary-text)); margin: 1.25rem 0 .5rem; }
.wd-diff :is(h2, h3) span { display: inline; }
.wd-diff ul { list-style: disc; padding-left: 1.5rem; margin: 1rem 0; }
.wd-diff ol { list-style: decimal; padding-left: 1.5rem; margin: 1rem 0; }
.wd-diff li { margin-bottom: .4rem; color: hsl(var(--bodytext)); line-height: 1.7; }
.wd-diff strong { color: hsl(var(--foreground)); font-weight: 600; }
.wd-diff-swatch { display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; }
.wd-diff-swatch--ins { background: hsl(var(--tone-ok-bg)); border: 1px solid hsl(var(--tone-ok-border)); }
.wd-diff-swatch--del { background: hsl(var(--tone-bad-bg)); border: 1px solid hsl(var(--tone-bad-border)); }
/* NF-04 Lightbox und Galerie-Pfeile (Sichtbarkeit steuert das Skript per style.display) */
.wd-lb { position: fixed; inset: 0; align-items: center; justify-content: center; padding: 1rem; cursor: zoom-out; background: rgba(0, 0, 0, .9); } /* feste Farbe: Bild-Scrim */
.wd-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .5rem; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); } /* feste Farbe: Schatten */
.wd-lb-arrow { position: fixed; top: 50%; transform: translateY(-50%); z-index: 1; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 9999px; align-items: center; justify-content: center; cursor: pointer; background: rgba(255, 255, 255, .92); color: #1f2937; box-shadow: 0 2px 12px rgba(0, 0, 0, .35); } /* feste Farbe: heller Knopf auf Scrim */
.wd-lb-arrow--prev { left: 18px; }
.wd-lb-arrow--next { right: 18px; }
.wd-lb-counter { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1; padding: 3px 10px; border-radius: 9999px; font-size: .8rem; background: rgba(0, 0, 0, .55); color: #fff; } /* feste Farbe */
.wd-gal-wrap { position: relative; }
.wd-gal-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; cursor: pointer; background: rgba(255, 255, 255, .94); color: #1f2937; border: 1px solid hsl(var(--border)); box-shadow: 0 2px 12px rgba(0, 0, 0, .18); } /* feste Farbe: heller Knopf auf Bild */
.wd-gal-arrow--left { left: 8px; }
.wd-gal-arrow--right { right: 8px; }
@media (max-width: 1023px) { .wd-lb-arrow, .wd-gal-arrow { display: none !important; } }
/* NF-05 Kennzahl-Karten als Filter-Links (extr_stat_tile() rendert <div>; page-header bleibt unverändert, 01 §0.2) */
@layer components { .wd-kpi-link { display: block; color: inherit; text-decoration: none; border-radius: var(--radius-card); } }
.wd-kpi-link:hover .extr-stat { box-shadow: var(--extr-shadow-lg); transform: translateY(-1px); }
.wd-kpi-link[aria-current="true"] .extr-stat { box-shadow: 0 0 0 2px hsl(var(--primary)), var(--extr-shadow-md); }
@media (prefers-reduced-motion: reduce) { .wd-kpi-link:hover .extr-stat { transform: none; } }
/* NF-06 Kommentarliste der externen Freigabe (vorher <style> freigabe.php:113–117) */
.fp-comment { border-left: 3px solid hsl(var(--border)); padding: .25rem 0 .25rem .85rem; }
.fp-comment--freigabe { border-left-color: hsl(var(--tone-ok-fg)); }
/* === /MODUL === */

/* === MODUL arbeitsanweisungen · Regeln === */
/* Quelle: workspace/redesign/plan/04-regeln-bedienung.md (R2, R3) */

/* Übersicht: Die Werkzeugleiste steht über beiden Bereichen; der Abstand nach unten kommt vom Bereich selbst. */
.aa-toolbar-wrap.aa-toolbar-wrap { padding-bottom: 0; }
.aa-toolbar-wrap .extr-toolbar { margin-bottom: 0; }

/* Kategorie: Der Wechsler erscheint erst ab lg, darunter keine leere Spalte. */
@media (max-width: 1023.98px) { .extr-toolbar-views:has(> .wk-views) { display: none; } }

/* Verzeichnis: Drei Filter sind breit. Sie brechen in ihrer Spalte um, die Suche bleibt rechts in Zeile 1. */
/* === /MODUL === */

/* === MODUL aufgaben · Regeln === */
/* Quelle: workspace/redesign/plan/04-regeln-bedienung.md (R2, R4) */

/* Schalter „Erledigte Aufgaben anzeigen“: rechts in der Filterzeile (Muster .news-unread-switch) */
.aufgaben-done-switch { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; font-size: .8125rem; font-weight: 600; color: hsl(var(--foreground) / .8); cursor: pointer; user-select: none; white-space: nowrap; }

@media (max-width: 767px) {
  .aufgaben-done-switch { margin-left: 0; }
}
/* === /MODUL === */

/* === MODUL benachrichtigungen · Regeln === */
/* Quelle: workspace/redesign/plan/04-regeln-bedienung.md (R2, R4) */

/* Schalter „Nur ungelesene“: rechts in der Filtergruppe, direkt vor der Suche */
.notif-unread-switch { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; font-size: .8125rem; font-weight: 600; color: hsl(var(--foreground) / .8); cursor: pointer; user-select: none; white-space: nowrap; }
/* === /MODUL === */

/* === MODUL besucherausweis · W1 === */
/* NF-besucherausweis-01: Unterschrift (PNG, dunkle Striche, transparent) auf Papierweiß, damit sie im Dunkelmodus
   lesbar bleibt (der Dunkel-Remap von .bg-white gäbe --card). Nutzer: includes/partials/besucherausweis-detail-body.php. */
@layer components {
  .ba-sig { display: block; max-width: 320px; max-height: 160px; background: #fff; /* feste Farbe: Papier unter Unterschrift */
            border: 1px solid hsl(var(--border)); border-radius: .5rem; }
}
/* === /MODUL === */

/* === MODUL bewertungen · W4 === */
@layer components {
  /* Skala-Pillen: Ausfüllen (bewertungen-bewertung.php) und Bogen-Vorschau (bewertungen-bogen.php); Zustand per JS: .is-on */
  .bw-scale { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
  .bw-scale-opt { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 3.25rem; height: 2.5rem; padding: 0 .875rem;
    border: 1px solid hsl(var(--input)); border-radius: 9999px; background: hsl(var(--card)); color: hsl(var(--foreground));
    font-size: .875rem; font-weight: 500; transition: background-color .15s, border-color .15s, color .15s; }
  .bw-scale-opt.is-on { border-color: hsl(var(--primary)); background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
  .bw-scale--edit .bw-scale-opt { cursor: pointer; }
  .bw-scale--edit .bw-scale-opt:not(.is-on):hover { background: hsl(var(--muted)); }
  .bw-scale-opt:focus-within { box-shadow: 0 0 0 3px hsl(var(--ring)); }
  /* Abschnitt im Bogen und in der Vorschau */
  .bw-sec { border-top: 1px solid hsl(var(--border)); padding-top: 1rem; }
  /* Wert + Balken (Auswertung „Ø je Kriterium“, Tabellenzellen, Historie) */
  .bw-bar { display: flex; align-items: center; gap: .5rem; min-width: 0; }
  .bw-bar > .extr-meter { flex: 1 1 4rem; min-width: 4rem; margin-top: 0; }
  .bw-bar-val { flex: 0 0 3rem; text-align: right; font-size: .875rem; font-variant-numeric: tabular-nums; }
  .bw-bar-lbl { flex: 0 0 min(12rem, 40%); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
  /* Verteilung der Gesamtbewertung */
  .bw-dist { display: flex; align-items: center; gap: .75rem; }
  .bw-dist-lbl { flex: 0 0 4rem; white-space: nowrap; font-size: .875rem; font-variant-numeric: tabular-nums; }
  .bw-dist-bar { flex: 1 1 auto; min-width: 0; }
  .bw-dist-bar > i { display: block; height: 1rem; border-radius: 0 4px 4px 0; background: hsl(var(--primary)); }
  .bw-dist-val { flex: 0 0 5.5rem; text-align: right; font-size: .875rem; font-variant-numeric: tabular-nums; }
  /* Aufklapp-Karte: <details class="extr-card bw-fold"><summary class="extr-card-header">… <i class="bw-fold-chev"> */
  .bw-fold > summary { list-style: none; cursor: pointer; }
  .bw-fold > summary::-webkit-details-marker { display: none; }
  .bw-fold:not([open]) > summary.extr-card-header { margin-bottom: 0; padding-bottom: 1.375rem; }
  .bw-fold-chev { width: 1rem; height: 1rem; margin-left: auto; color: hsl(var(--muted-foreground)); transition: transform .15s; }
  .bw-fold[open] > summary .bw-fold-chev { transform: rotate(180deg); }
  /* Auswahlkarte (Radio mit Beschreibung): Einstellungen „Modus“, Dialog „Zuordnung“ */
  .bw-choice { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; cursor: pointer; }
  .bw-choice:has(input:checked) { border-color: hsl(var(--primary)); background: hsl(var(--primary-soft)); }
  /* Listenzeile mit umbrechenden Zeilen (Zyklen, Zuordnungen, Bögen, Verlauf) */
  .bw-lrow--multi { align-items: flex-start; flex-wrap: wrap; }
  .bw-lrow--multi .extr-lrow-t > small { white-space: normal; }
  .bw-lrow--off { opacity: .6; }
  .bw-col-main { flex: 1 1 14rem; min-width: 0; }
  .bw-col-progress { flex: 0 1 12rem; width: 12rem; max-width: 100%; }
  .bw-col-time { flex: 0 0 7.5rem; font-variant-numeric: tabular-nums; }
  /* Vorschau „Neuer Zyklus“ (per Skript gebaute Zeilen) */
  .bw-pv-line { margin-top: .35rem; font-size: .75rem; }
  .bw-pv-line--bad { color: hsl(var(--tone-bad-fg)); }
  .bw-pv-line--warn { color: hsl(var(--tone-warn-fg)); }
  /* Ergänzt beim Umbau (Build-Prüfung: sm:mt-7 fehlt; Fieldset-Reset; Vorschau-Textbox) */
  .bw-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  .bw-pv-area { min-height: 4.5rem; }
  @media (min-width: 640px) { .bw-check-offset { margin-top: 1.6rem; } }
}
/* ungeschichtet: .extr-combo-list steht ungeschichtet (position: absolute) – Trefferliste im Dialog „Bewertende Person ändern“ im Fluss */
.extr-combo-list.bw-combo-static { position: static; margin-top: 4px; }
/* === /MODUL === */

/* === MODUL bewertungen · Regeln === */
/* Quelle: workspace/redesign/plan/04-regeln-bedienung.md (R4) */

/* Schalter „Prämie empfohlen“ in der Filterleiste des Zyklus */
.bw-zy-switch { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; color: hsl(var(--foreground) / .8); cursor: pointer; user-select: none; white-space: nowrap; }
/* === /MODUL === */

/* === MODUL chats · W2 === */
/* NF-chats-02 (Kanalbild NF-chats-01 im Block „DESIGN-V2 · Sammler w2“). Nur Token, außer markierten festen Farben. */
@layer components {
  /* Übersicht: Zeile = Link + Endbereich (Knöpfe nicht im Link) */
  .chat-row-link { display: flex; flex: 1 1 auto; align-items: center; gap: .75rem; min-width: 0; color: inherit; text-decoration: none; }
  .chat-row-link:hover .extr-lrow-t > b { color: hsl(var(--primary-text)); }

  /* Kanal-Manager und -Formular */
  .chat-move { display: flex; flex: 0 0 auto; flex-direction: column; gap: 2px; }
  .ccf-icon-btn[aria-pressed="true"] { background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); border-color: hsl(var(--primary)); }
  .chat-swatch { width: .75rem; height: .75rem; flex: 0 0 auto; border-radius: 9999px; background: hsl(var(--primary)); }
  .chat-swatch--ok { background: hsl(var(--tone-ok-mark)); }     .chat-swatch--warn { background: hsl(var(--tone-warn-mark)); }
  .chat-swatch--bad { background: hsl(var(--tone-bad-mark)); }   .chat-swatch--info { background: hsl(var(--tone-info-mark)); }
  .chat-swatch--gold { background: hsl(var(--tone-gold-mark)); } .chat-swatch--violet { background: hsl(var(--tone-violet-mark)); }
  .chat-swatch--muted { background: hsl(var(--muted-foreground)); }
  .chat-form-note { margin: .5rem 0 0; }

  /* Detail: Leitbild im Kopf */
  .chat-lead { position: relative; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: .75rem; border: 0; }
  .chat-lead-content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
  .chat-lead-shade { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .4); /* feste Farbe: Abdunklung über Foto */ color: #fff; /* feste Farbe: Symbol auf Abdunklung */ opacity: 0; transition: opacity .15s; pointer-events: none; }
  .chat-lead:hover .chat-lead-shade, .chat-lead:focus-visible .chat-lead-shade { opacity: 1; }

  /* Detail: Karten in der Vollhöhe (S9 trägt .extr-main--chat und #extr-chat-page) */
  .chat-body { flex: 1 1 auto; min-height: 0; padding: var(--extr-gap) var(--extr-content-px); }
  @media (max-width: 1023px) { .chat-body { padding-bottom: var(--extr-bottomnav-h, 6.5rem); } }
  @media (min-width: 1024px) { .chat-grid { column-gap: var(--extr-gap); } }
  .chat-card { display: flex; flex-direction: column; min-height: 0; height: 100%; }
  .chat-side-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1.125rem .5rem; }
  .chat-side-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 1.125rem 1rem; }
  .chat-online { display: inline-block; width: .5rem; height: .5rem; margin-right: .25rem; border-radius: 9999px; background: hsl(var(--tone-ok-mark)); }
  .chat-pin-note { flex: 0 0 auto; margin: .75rem .75rem 0; }

  /* Nachricht */
  #chat-messages-feed .extr-chat-bubble, #chat-messages-feed .chat-att-img { -webkit-user-select: none; user-select: none; } /* ersetzt <style> in chat-detail.php */
  .chat-author { display: inline-flex; align-items: center; gap: .375rem; margin: 0 0 .125rem .25rem; }
  .chat-pending { display: inline-flex; align-items: center; gap: .25rem; }
  .chat-pending > svg { width: .75rem; height: .75rem; }
  .chat-bubble--deleted { font-style: italic; opacity: .7; }
  .chat-bubble--pinned { box-shadow: 0 0 0 2px hsl(var(--tone-warn-mark)); }
  .chat-quote { display: block; max-width: 16rem; margin-bottom: .25rem; padding: .25rem .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; border: 0; border-left: 2px solid hsl(var(--primary) / .5); border-radius: .375rem; background: hsl(var(--muted-bg)); color: hsl(var(--muted-foreground)); font-size: .75rem; cursor: pointer; }
  .chat-quote:hover { color: hsl(var(--foreground)); }
  .chat-quote > svg { display: inline; width: .75rem; height: .75rem; vertical-align: -1px; }
  .chat-att-img { max-width: 50%; max-height: 400px; height: auto; margin-top: .25rem; border: 1px solid hsl(var(--border)); border-radius: .5rem; cursor: pointer; }
  .chat-att-file { display: inline-flex; align-items: center; gap: .5rem; max-width: 240px; margin-top: .25rem; padding: .5rem .75rem; border: 1px solid hsl(var(--border)); border-radius: .5rem; background: hsl(var(--card)); font-size: .875rem; text-decoration: none; }
  .chat-att-file:hover { background: hsl(var(--muted)); }
  .chat-att-file > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-att-file > svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: hsl(var(--muted-foreground)); }
  .chat-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-top: .25rem; }
  .chat-reactions:empty { display: none; }
  .chat-react-pill { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .4375rem; border: 1px solid hsl(var(--border)); border-radius: 9999px; background: hsl(var(--card)); color: hsl(var(--muted-foreground)); font-size: .75rem; cursor: pointer; }
  .chat-react-pill:hover { background: hsl(var(--muted)); }
  .chat-react-pill.is-mine { border-color: hsl(var(--primary)); background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }

  /* Eingabe */
  .chat-composer { flex: 0 0 auto; padding: .75rem 1rem; border-top: 1px solid hsl(var(--border)); }
  .chat-composer-input { display: block; min-height: 2.5rem; height: 2.5rem; max-height: 120px; padding-top: .5rem; padding-bottom: .5rem; line-height: 1.5; resize: none; overflow-y: auto; }
  .chat-composer-input::placeholder { white-space: nowrap; }
  .chat-send { min-height: 2.5rem; }
  .chat-reply-banner { margin-bottom: .5rem; padding: .5rem .75rem; }
  .chat-reply-banner > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Skript-Overlays auf .extr-pop (S5); Lage per JS am <body>; z 58: über Kopfstreifen 50, Pille 45, Schublade 55, unter Modalen 60 */
  .chat-pop { right: auto; top: auto; z-index: 58; width: auto; min-width: 11.5rem; max-width: calc(100vw - 1rem); }
  .chat-emoji-pop { display: flex; flex-wrap: wrap; gap: .25rem; max-width: min(18rem, calc(100vw - 1rem)); }
  .chat-emoji-pop > button { width: auto; padding: .25rem; font-size: 1.25rem; line-height: 1; }
  .chat-reactor-row { display: flex; align-items: flex-start; gap: .5rem; padding: .25rem .5rem; font-size: .75rem; color: hsl(var(--foreground)); }
  .chat-reactor-row > span:first-child { font-size: 1.125rem; line-height: 1.3; }
  .chat-mention-pop { left: 0; right: 0; top: auto; bottom: calc(100% + 6px); width: auto; max-height: 13rem; overflow-y: auto; z-index: 5; transform-origin: bottom left; }
  .chat-mention-pop > .is-active { background: hsl(var(--muted)); }
  .chat-edit-input { width: 16rem; max-width: 100%; min-height: 4rem; }
  .chat-fwd-preview { max-height: 7rem; }
  .chat-fwd-row { width: 100%; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
  .chat-fwd-row:hover .extr-lrow-t > b { color: hsl(var(--primary-text)); }
  .chat-fwd-row .extr-lrow-end > svg { width: 1rem; height: 1rem; }
  .chat-seen-ok { color: hsl(var(--tone-ok-fg)); }
  .chat-seen-ok > svg { width: 1rem; height: 1rem; }

  /* Galerie, Bildbetrachter */
  .chat-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
  .chat-gallery-msg { grid-column: 1 / -1; margin-bottom: 0; }
  .chat-gallery-tile { padding: 0; border: 0; background: none; cursor: pointer; }
  .chat-gallery-tile > img { display: block; width: 100%; height: 120px; object-fit: cover; border: 1px solid hsl(var(--border)); border-radius: .5rem; }
  .chat-lightbox { display: flex; align-items: center; justify-content: center; padding: 1rem; }
  .chat-lightbox-img { position: relative; max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: .5rem; box-shadow: var(--extr-shadow-xl); }
  .chat-lightbox-x { position: absolute; top: 1rem; right: 1rem; z-index: 1; }
}
/* ungeschichtet: überstimmt .extr-dlg-backdrop und dessen Dunkelvariante (html[data-theme="dark"]) – setzt kein display */
#chat-lightbox > .extr-dlg-backdrop { background: rgba(0, 0, 0, .85); /* feste Farbe: Bildbetrachter */ -webkit-backdrop-filter: none; backdrop-filter: none; }
/* === /MODUL === */

/* === MODUL dashboard · W7 === */
@layer components {
  /* NF-dashboard-02: News-Aufmacher */
  .dash-news-cover { height: 140px; margin-bottom: .75rem; border-radius: .75rem; overflow: hidden; background: hsl(var(--muted-bg)); }
  .dash-news-cover > img { width: 100%; height: 100%; object-fit: cover; }
  .dash-news-teaser { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .875rem; color: hsl(var(--muted-foreground)); }
}
p.dash-news-teaser { margin-top: 0; }  /* <p>-Reset ungeschichtet */
/* NF-dashboard-04: Tausch-Knopf dunkel, Tastatur, Touch */
.dash-ph-swap { background: hsl(var(--card)); }
.dash-ph-swap:focus-visible { opacity: 1; }
@media (hover: none) { .dash-ph-swap { opacity: 1; } }
/* NF-dashboard-12: Kennzahl-Kacheln innerhalb einer Widget-Karte ohne zweiten Schatten */
.extr-dash-widget .extr-stat { background: hsl(var(--muted-bg)); box-shadow: none; }
/* NF-dashboard-13: Kopf-Link behält seine Breite, Chevron wird nicht gestaucht */
.extr-dash-widget-head > .extr-card-link { flex: 0 0 auto; }
/* === /MODUL === */

/* === MODUL dashboard · Regeln === */
/* Quelle: workspace/redesign/plan/04-regeln-bedienung.md (R7), Demo .dtop/.welcome/.kpis--6/.dsect/.dgrid/.wnews.
   Ungeschichtet: schlägt die Utilities im selben class-Attribut. */

/* Seitenaufbau: Willkommenskarte links, Nächste Schicht rechts, darunter der Inhalt über die volle Breite.
   Die Karte bleibt Geschwister von .extr-dashboard-body (mobiler Rand hängt daran). */
@media (min-width: 1024px) {
  .dash-page { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; }
  .dash-page--shift { grid-template-columns: minmax(0, 1fr) 342px; column-gap: 1.5rem; } /* Spalte = Karte + rechter Rand */
  .dash-page > .extr-dashboard-body { grid-column: 1 / -1; }
  .dash-welcome { margin: 1.25rem 1.375rem 0; min-height: 255px; }
  .dash-page--shift > .dash-welcome { margin-right: 0; }
  .dash-top-shift { min-width: 0; margin: 1.25rem 1.375rem 0 0; }
}
@media (min-width: 1440px) { .dash-page--shift { grid-template-columns: minmax(0, 1fr) 382px; } }

/* Schichtkarte oben: Inhalt unter dem Titel statt vertikal zentriert */
.dash-top-shift .extr-dash-widget > .flex { flex: 0 1 auto; }

/* Willkommenskarte · feste Farbe: Weiß auf dem dunklen Markenverlauf, in beiden Themen gleich (Muster a.extr-btn--glass) */
.dash-welcome-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
p.dash-welcome-kicker { margin-bottom: 0; }
h2.dash-welcome-title { margin: .375rem 0 0; font-size: 1.625rem; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: #fff; }
p.dash-welcome-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .375rem 0 0; color: rgba(255, 255, 255, .8); }
.dash-welcome-online { display: inline-flex; align-items: center; gap: .375rem; color: rgba(255, 255, 255, .86); }
.dash-welcome-online > i { width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--brand-mint)); box-shadow: 0 0 0 3px hsl(var(--brand-mint) / .25); }
.dash-welcome-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.75rem; }
.dash-welcome-facts { display: flex; flex-wrap: wrap; gap: .75rem 2rem; }
.dash-welcome-facts > a { color: #fff; text-decoration: none; }
.dash-welcome-facts b { display: block; font-size: 1.375rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dash-welcome-facts span { font-size: .75rem; color: rgba(255, 255, 255, .78); }
.dash-welcome-facts > a:hover span { color: #fff; }
.dash-welcome-actions { display: flex; flex-wrap: wrap; gap: .625rem; }
/* Glanz wie in der Demo; mit Standortbild trägt ::after den Verlauf über dem Foto */
.dash-welcome:not(.has-photo)::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 90% at 100% 0%, hsl(var(--brand-mint) / .22) 0%, transparent 55%); pointer-events: none; }
@media (min-width: 1024px) {
  .dash-welcome { display: flex; flex-direction: column; justify-content: space-between; gap: 1.375rem; min-height: 216px; padding: 1.5rem; }
}
/* Mobil wie .mhero der Demo: Bild links, keine Kennzahlen (die Kacheln folgen direkt darunter) */
@media (max-width: 1023px) {
  .dash-welcome-top { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: .75rem; }
  p.dash-welcome-kicker, .dash-welcome-row { display: none; }
  h2.dash-welcome-title { margin-top: 0; font-size: 1.3125rem; }
  p.dash-welcome-meta { font-size: .8125rem; }
}

/* Kennzahlenreihe: so viele Spalten wie Karten */
@media (min-width: 1024px) { .extr-stat-grid.dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1280px) { .extr-stat-grid.dash-kpis { grid-template-columns: repeat(var(--dash-kpi-n, 5), minmax(0, 1fr)); } }

/* Abschnitt „Deine Übersicht“ und Raster (4 Spalten, ab Demo-Breiten weniger; Breite aus der Dashboard-Ansicht) */
.dash-section-head { margin: 0 .125rem .875rem; }
.dash-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash-cell--1 { grid-column: span 1 / span 1; }
.dash-cell--2 { grid-column: span 2 / span 2; }
.dash-cell--3 { grid-column: span 3 / span 3; }
.dash-cell--4 { grid-column: span 4 / span 4; }
.dash-grid .extr-dash-widget { min-height: 220px; }
/* Breite Karten: Listen laufen zweispaltig, sonst zieht sich eine Zeile über die ganze Fläche */
.dash-cell--3 .extr-dash-widget > .extr-divided, .dash-cell--4 .extr-dash-widget > .extr-divided { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; align-content: start; }
.dash-cell--3 .extr-dash-widget > .extr-divided > :nth-child(2), .dash-cell--4 .extr-dash-widget > .extr-divided > :nth-child(2) { border-top: 0; }
/* Persönliches Anpassen (wie Demo .dgrid.is-editing): Bedienleiste am unteren Kartenrand, die Überschrift bleibt lesbar */
#dash-overview [hidden] { display: none; }
.dash-edit, .dash-grip, .dash-add { display: none; }
.dash-grid.is-editing [data-dash-item] { cursor: grab; outline: 2px dashed hsl(var(--primary) / .45); outline-offset: -2px; border-radius: var(--radius-card); }
.dash-grid.is-editing [data-dash-item] > :not(.dash-edit):not(.dash-grip) { opacity: .55; pointer-events: none; }
.dash-grid.is-editing [data-dash-item].is-drag { opacity: .4; }
.dash-grid.is-editing [data-dash-item].is-over { outline-style: solid; outline-color: hsl(var(--primary)); }
.dash-grid.is-editing .dash-edit { position: absolute; z-index: 3; left: .625rem; right: .625rem; bottom: .625rem; display: flex; align-items: center; justify-content: center; gap: .25rem; }
.dash-grid.is-editing .dash-grip { position: absolute; z-index: 3; top: .125rem; left: 50%; display: block; line-height: 0; color: hsl(var(--muted-foreground)); transform: translateX(-50%) rotate(90deg); }
.dash-grip svg { width: 1rem; height: 1rem; }
.dash-grid.is-editing .dash-add:has([data-dash-add]) { display: block; }
.dash-edit .extr-icon-btn { background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: var(--extr-shadow-md); }
.dash-edit .extr-icon-btn:disabled { opacity: .4; }
.dash-edit-widths { display: inline-flex; gap: 2px; padding: 3px; border-radius: .5rem; background: hsl(var(--card)); box-shadow: var(--extr-shadow-md); }
.dash-edit-widths button { display: flex; align-items: center; width: 1.375rem; height: 1.625rem; padding: 0 3px; border: 0; border-radius: .3125rem; background: none; cursor: pointer; }
.dash-edit-widths button > span { display: block; width: calc(var(--n) * 25%); height: .625rem; border-radius: 2px; background: hsl(var(--muted-foreground) / .55); }
.dash-edit-widths button:hover, .dash-edit-widths button[aria-pressed="true"] { background: hsl(var(--primary-soft)); }
.dash-edit-widths button[aria-pressed="true"] > span { background: hsl(var(--primary)); }
.dash-edit-widths button:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
@media (max-width: 1599px) {
  .dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-cell--4 { grid-column: span 3 / span 3; }
}
@media (max-width: 1279px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-cell--3, .dash-cell--4 { grid-column: span 2 / span 2; }
}

/* Breite News-Karte */
.dash-news-wide { display: grid; gap: 1.125rem; min-width: 0; }
.dash-news-wide--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.dash-news-lead { display: flex; flex-direction: column; gap: .5rem; min-width: 0; color: inherit; text-decoration: none; }
.dash-news-lead .dash-news-cover { flex: none; height: 150px; margin-bottom: 0; }
p.dash-news-lead-meta { display: flex; align-items: center; gap: .375rem; min-width: 0; font-size: .75rem; color: hsl(var(--muted-foreground)); }
h4.dash-news-lead-title { margin: 0; font-size: .96875rem; font-weight: 700; line-height: 1.35; color: hsl(var(--heading)); transition: color .12s; }
.dash-news-lead:hover .dash-news-lead-title { color: hsl(var(--primary-text)); }
.dash-news-rest { min-width: 0; }
.dash-news-rest .extr-lrow-ico { flex-basis: 2.875rem; width: 2.875rem; height: 2.875rem; }
.dash-news-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--primary)); }
/* === /MODUL === */

/* === MODUL einstellungen · W6 === */
@layer components {
  .settings-opt { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem .875rem; border: 1px solid hsl(var(--border)); border-radius: .625rem; font-size: .875rem; transition: background-color .15s; }
  label.settings-opt, .settings-opt > label { cursor: pointer; }
  .settings-opt:hover { background: hsl(var(--muted-bg)); }
  .settings-opt--plain { padding: 0; border: 0; }
  .settings-opt--plain:hover { background: transparent; }
  .settings-opt > input[type="checkbox"], .settings-opt > input[type="radio"] { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: .1875rem; }
  .settings-opt-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
  .settings-opt-t > b { font-weight: 600; color: hsl(var(--foreground)); }
  .settings-opt-t > small { font-size: .78125rem; line-height: 1.45; color: hsl(var(--muted-foreground)); }
  .settings-opt-t > small.is-warn { color: hsl(var(--tone-warn-fg)); }
  .settings-opt > .extr-toggle { flex: 0 0 auto; margin-left: auto; margin-top: .125rem; }
  .settings-color { flex: 0 0 auto; height: 2.25rem; width: 3rem; padding: 2px; border: 1px solid hsl(var(--input)); border-radius: var(--radius-field); background: hsl(var(--card)); cursor: pointer; }
  .settings-color--sm { height: 2rem; width: 2.25rem; }
  .settings-hex { flex: 1 1 13rem; min-width: 0; max-width: 18rem; }
  .settings-liste .extr-note { margin-bottom: 0; }
  .settings-liste .extr-lrow.flex-col { align-items: stretch; }
}
/* Absätze: Reset nimmt p die Layer-Abstände, daher ungeschichtet */
p.settings-intro { margin: 0 0 1rem; font-size: .75rem; line-height: 1.5; color: hsl(var(--muted-foreground)); }
p.settings-sub { margin: 0 0 .5rem; font-size: .8125rem; font-weight: 600; color: hsl(var(--foreground)); }
p.settings-sub--gap { margin-top: 1.25rem; }
/* === /MODUL === */

/* === MODUL formulare · W3 === */
/* NF-formulare-04 · ungeschichtet (Grund: .extr-detail-grid steht ungeschichtet; Spezifität (0,2,0) nötig; kein display gesetzt → keine .hidden-Begleitregel) */
/* Antworten im Detail-Dialog einspaltig (Muster .news-meta) */
.form-rec-dl.extr-detail-grid { grid-template-columns: minmax(0, 1fr); gap: .875rem; }
/* === /MODUL === */

/* === MODUL geraete · W6 === */
@layer components {
  /* NF-geraete-01 · Typ-Kacheln „Neues Gerät" (ersetzt den aufgelösten <style>-Block in geraete.php) */
  .gr-type-btn { display: flex; gap: .75rem; align-items: flex-start; width: 100%; text-align: left; padding: .875rem;
                 border: 1px solid hsl(var(--border)); border-radius: .75rem; background: hsl(var(--card)); cursor: pointer;
                 transition: border-color .15s, background-color .15s; }
  .gr-type-btn:hover { border-color: hsl(var(--primary)); background: hsl(var(--primary-soft)); }
  .gr-type-btn[disabled] { opacity: .5; cursor: not-allowed; }
}
/* NF-geraete-02 · Token-Nachzug Zeitplan/Gerätezustand (Bestandsregeln liegen außerhalb des Layers, daher ohne @layer) */
.sg-sched-inp { border-color: hsl(var(--input)); border-radius: var(--radius-field); }
.sg-sched-inp:not(.is-bad):focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--ring)); }
.sg-sched-msg.is-warn { color: hsl(var(--tone-warn-fg)); }
.sg-sched-row.is-live:not(.is-error) { background: hsl(var(--primary-soft)); }
.sg-sched-track { background: hsl(var(--muted-bg)); }
.smon-ds-line { background: hsl(var(--muted-bg)); }
/* === /MODUL === */

/* === MODUL helpdesk · W4 === */
@layer components {
  .hd-note { align-items: flex-start; flex-wrap: wrap; margin-bottom: 0; }
  .hd-note > svg, .hd-note > i { margin-top: .125rem; }
  .hd-note-body { flex: 1 1 14rem; min-width: 0; }
  .hd-note-body h2 { font-size: .875rem; font-weight: 600; color: inherit; }
  .hd-note-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
  .hd-note--hold { background: hsl(var(--tone-violet-bg)); color: hsl(var(--tone-violet-fg)); }
  .hd-c--internal { background: hsl(var(--tone-warn-bg)); }
  .hd-c--solution { background: hsl(var(--tone-ok-bg)); }
  .hd-c--auto { background: hsl(var(--primary-soft)); }
  .hd-newsince { display: block; padding: .375rem 1.25rem; font-size: .75rem; font-weight: 600; background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
}
/* ungeschichtet: überstimmt die ungeschichteten Bestandsregeln .hd-sla (display:inline-block) und .hd-chip (Polster für den X-Knopf) */
.hd-sla { display: inline-flex; align-items: center; gap: .25rem; }
.hd-sla.hidden { display: none; }
.hd-sla > svg, .hd-sla > i { width: .75rem; height: .75rem; }
a.hd-chip { padding-right: .65rem; font-size: .75rem; font-weight: 500; }
a.hd-chip:hover { background: hsl(var(--muted)); }
/* === /MODUL === */

/* === MODUL helpdesk · Regeln === */
/* Quelle: workspace/redesign/plan/04-regeln-bedienung.md (R2, R4, R5) */

/* Schalter „Gelöste Tickets anzeigen“ und „Nur ungelesene“ in der Filterzeile */
/* Beide Schalter brechen gemeinsam um */
.hd-flag-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .625rem 1rem; }
.hd-flag-switch { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; color: hsl(var(--foreground) / .8); cursor: pointer; user-select: none; white-space: nowrap; }

/* Suche mit Knopf „Ticket-Suche (KI)“: das Feld behält seine Mindestbreite von 320 px */
.hd-toolbar .extr-toolbar-search { gap: .5rem; }
@media (min-width: 768px) { .hd-toolbar .extr-toolbar-search { min-width: 23.5rem; } }
@media (min-width: 1024px) { .hd-toolbar .extr-toolbar-search { flex-basis: 33rem; min-width: 31rem; } }
/* === /MODUL === */

/* === MODUL inventar · W4 === */
/* NF-inventar-01 · Abschlussleiste Inventur (klebt im Fluss), Farbwahl Stammdaten (aria-pressed). */
@layer components {
  .inv-fixbar { position: sticky; bottom: max(.75rem, var(--extr-bottomnav-h, 0px)); z-index: 30; margin-top: 1rem;
                padding: .75rem 1rem; border-radius: var(--radius-card); background: hsl(var(--card)); box-shadow: var(--extr-shadow-lg); }
  .inv-ff-color[aria-pressed="true"] { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)); }
}
/* === /MODUL === */

/* === MODUL kalender · W4 === */
@layer components {
  .kal-day { cursor: pointer; transition: background-color .12s; }
  @media (hover: hover) { .kal-day:hover { background: hsl(var(--muted)); } }
  .kal-chip, .kal-span { max-width: 100%; }
  .kal-wk-col { display: flex; flex-direction: column; gap: .25rem; min-width: 0; min-height: 7rem; padding: .375rem; border-radius: .625rem; background: hsl(var(--muted-bg)); }
  .kal-wk-col.is-today { box-shadow: inset 0 0 0 1.5px hsl(var(--primary)); }
}
/* Ungeschichtet: schlaegt das ungeschichtete .extr-badge (display); Punkt kommt aus .extr-cal-day.has-items::after */
@media (max-width: 1023px) { .kal-day > .kal-chip, .kal-day > .kal-more { display: none; } }
/* === /MODUL === */

/* === MODUL kundeninfo · W3 === */
/* NF-kundeninfo-01 · ungeschichtet (Grund: flex-direction muss die Utility flex-col an .kin-wb-row überstimmen; ersetzt den Inline-<style> 1:1).
   display gesetzt → .hidden-Begleitregel. */
/* Werkbank: oben Betreff, darunter Vorschau links und Elemente rechts; Desktop-Höhe unter der klebenden Kopfleiste */
.kin-wb { display: flex; flex-direction: column; }
.kin-wb-main { height: 48vh; min-height: 48vh; }
.kin-wb-side { display: flex; width: 100%; min-height: 0; }
.kin-wb-card { width: 100%; max-height: 52vh; }
.kin-wb.hidden, .kin-wb-side.hidden { display: none; }
@media (min-width: 1024px) {
  .kin-wb { height: calc(100dvh - var(--extr-sticky-top, 0px)); }
  .kin-wb-row { flex-direction: row; align-items: stretch; }
  .kin-wb-main { flex: 1 1 auto; height: auto; min-width: 0; min-height: 0; }
  .kin-wb-side { flex: 0 0 340px; width: 340px; }
  .kin-wb-card { max-height: none; height: 100%; }
}
/* Drag & Drop der Elemente */
.kin-tree-row { cursor: grab; }
.kin-tree-row:active { cursor: grabbing; }
.kin-tree-row.kin-dragging { opacity: .45; }
.kin-tree-row.kin-drop-target { box-shadow: 0 -3px 0 0 hsl(var(--primary)); }
.kin-tree-row.is-hl { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)); }

/* NF-kundeninfo-02 · ungeschichtet (Grund: ersetzt den Inline-<style> aus _kundeninfo-bounces.php 1:1) */
.kib-bar { height: 18px; border-radius: 0 4px 4px 0; background: hsl(var(--primary)); transition: opacity .12s; }
.kib-brow:hover .kib-bar, .kib-brow:focus .kib-bar { opacity: .75; }
#kib-viz-tip { position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, calc(-100% - 8px)); background: hsl(var(--foreground)); color: hsl(var(--background)); font-size: 12px; line-height: 1.3; padding: .35rem .6rem; border-radius: .4rem; white-space: nowrap; box-shadow: 0 6px 20px -8px rgba(0,0,0,.4); /* feste Farbe: Schatten */ }
#kib-viz-tip.hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .kib-bar { transition: none; } }

/* === /MODUL === */

/* === MODUL lernstrecken · W1 === */
/* NF-lernstrecken-04: erledigte Schrittnummer (rund, h-8) in lernstrecken-run.php; ersetzt bg-green-100 an rounded-full
   (R5-Rückbau). Ungeschichtet, keine konkurrierende bg-*-Utility am Element; Dunkel über Token. */
.lp-step-no--done { background: hsl(var(--tone-ok-bg)); color: hsl(var(--tone-ok-fg)); }
/* === /MODUL === */

/* === MODUL mein-profil · W1 === */
/* NF-mein-profil-02: zweispaltiges Raster ab 1280 px (Kontakt/Stammdaten 1/3, Einstellungen 2/3). Ungeschichtet, weil
   max-w-2xl (@layer utilities) überstimmt werden muss; setzt kein display, daher keine .hidden-Begleitregel. */
@media (min-width: 1280px) {
  .pf-grid { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
}
/* === /MODUL === */

/* === MODUL mitarbeiter · W4 === */
/* (a) Filterzeile Teamübersicht – vorher <style> mitarbeiter.php:147–172, Werte unverändert, ungeschichtet wie bisher */
.emp-filter-row { display: flex; flex-direction: column; gap: .75rem; }
.emp-filter-main { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.emp-filter-search { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.emp-branch-scroll { overflow-x: auto; scrollbar-width: none; min-width: 0; }
.emp-branch-scroll::-webkit-scrollbar { display: none; }
.emp-extra-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.emp-extra-filters > select { flex: 1 1 10rem; min-width: 0; max-width: 100%; }
@media (min-width: 640px) { .emp-extra-filters > select { flex: 0 1 auto; } }
@media (min-width: 1024px) {
  .emp-filter-row { flex-direction: row; align-items: center; gap: 1rem; }
  .emp-filter-main { flex: 0 0 auto; gap: 1rem; }
  .emp-filter-search { flex: 0 0 auto; }
  .emp-branch-scroll { flex: 1 1 auto; }
}
.emp-filter-row.hidden, .emp-filter-main.hidden, .emp-filter-search.hidden, .emp-extra-filters.hidden { display: none; }
@layer components {
  /* (b) Personen-Kacheln (Demo .ptiles/.pcard); Hülle ist die Karten-Kette (Schatten zentral) */
  .emp-ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 1.25rem; }
  @media (max-width: 1023px) { .emp-ptiles { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: .75rem; } }
  .emp-pcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; padding: 1.375rem 1.125rem 1.125rem; text-align: center; text-decoration: none; cursor: pointer; }
  .emp-pcard > .extr-avatar { margin-bottom: .5rem; }
  .emp-pcard-name { display: flex; align-items: center; justify-content: center; gap: .375rem; max-width: 100%; font-size: .9375rem; font-weight: 600; color: hsl(var(--heading)); }
  .emp-pcard-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .emp-pcard-name svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
  .emp-pcard-pos { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; color: hsl(var(--bodytext)); }
  .emp-pcard-seen { font-size: .75rem; color: hsl(var(--muted-foreground)); }
  .emp-pcard-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; margin-top: .625rem; }
  .emp-pcard-corner { position: absolute; top: .75rem; right: .75rem; display: flex; gap: .25rem; }
  .emp-pcard-corner svg { width: 1rem; height: 1rem; }
  /* (c) Reiter der Personalakte seitlich scrollbar – vorher <style> mitarbeiter-detail.php:291–295 */
  .emp-tab-scroll { margin-bottom: 1.5rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .emp-tab-scroll::-webkit-scrollbar { display: none; }
}
/* Lange Standort- oder Abteilungsnamen brechen in der schmalen Personenkarte um, statt seitlich überzulaufen (Handy mit zwei Spalten, 09.11.2026).
   Außerhalb der Ebene, weil .extr-badge selbst ohne Ebene steht und sonst gewinnt. */
.emp-pcard-chips { max-width: 100%; }
.emp-pcard-chips > .extr-badge { max-width: 100%; height: auto; min-height: 1.375rem; padding-block: .1875rem; white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.2; }
/* (d) Masonry der Personalakte – vorher <style> mitarbeiter-detail.php:316–337; ungeschichtet wie bisher.
   Startzustand statisch über data-emp-active (vorher PHP im Selektor); JS setzt danach Inline-display wie heute. */
.emp-detail-masonry > div { margin-bottom: 1rem; }
@media (min-width: 1024px) {
  .emp-detail-masonry { columns: 3 320px; column-gap: 1.5rem; }
  .emp-detail-masonry > div { break-inside: avoid; margin-bottom: 1.5rem; }
}
.emp-detail-masonry[data-emp-active="profil"] > [data-emp-cat]:not([data-emp-cat="profil"]),
.emp-detail-masonry[data-emp-active="dienstplan"] > [data-emp-cat]:not([data-emp-cat="dienstplan"]),
.emp-detail-masonry[data-emp-active="aktivitaet"] > [data-emp-cat]:not([data-emp-cat="aktivitaet"]),
.emp-detail-masonry[data-emp-active="zugriff"] > [data-emp-cat]:not([data-emp-cat="zugriff"]),
.emp-detail-masonry[data-emp-active="arbeitszeiten"] > [data-emp-cat]:not([data-emp-cat="arbeitszeiten"]),
.emp-detail-masonry[data-emp-active="aktionen"] > [data-emp-cat]:not([data-emp-cat="aktionen"]) { display: none; }
/* Rettung der im Markup vorhandenen Abstands-Utilities auf <p>/<h3> (Reset margin:0 ist ungeschichtet) – unverändert übernommen */
.emp-detail-masonry h3.mb-1 { margin-bottom: .35rem; }
.emp-detail-masonry h3.mb-4 { margin-bottom: 1rem; }
.emp-detail-masonry p.mb-1 { margin-bottom: .25rem; }
.emp-detail-masonry p.mb-3 { margin-bottom: .75rem; }
.emp-detail-masonry p.mb-4 { margin-bottom: 1rem; }
.emp-detail-masonry p.mt-0\.5 { margin-top: .2rem; }
.emp-detail-masonry p.mt-1 { margin-top: .25rem; }
.emp-detail-masonry p.mt-2 { margin-top: .5rem; }
.emp-detail-masonry p.mt-3 { margin-top: .75rem; }
/* === /MODUL === */

/* === MODUL mitarbeiter · Regeln === */
/* Quelle: workspace/redesign/plan/04-regeln-bedienung.md (R2, R4, R7), Demo .pcard/.av-c* */

/* Sortierung und Richtungsknopf bleiben zusammen, auch wenn die Filterzeile umbricht */
.emp-sort { display: inline-flex; align-items: center; gap: .25rem; }

/* Rechtematrix gibt es nur am Desktop: mobil keine Suche und Filter ohne Wirkung */
@media (max-width: 1023px) {
  .emp-toolbar--matrix .extr-toolbar-search, .emp-toolbar--matrix .extr-toolbar-filters { display: none; }
}

/* Kacheln wie in der Demo */
.emp-pcard { color: inherit; transition: box-shadow .15s, transform .15s; }
.emp-pcard:hover { box-shadow: var(--shadow-float, 0 8px 24px hsl(var(--foreground) / .1)); transform: translateY(-1px); }
.emp-pcard-devices { position: absolute; top: .75rem; left: .75rem; display: flex; gap: .25rem; }
.emp-pcard-devices svg { width: .875rem; height: .875rem; }

/* Initialen-Avatare in sechs Tönen, nach Personen-ID · feste Farbe: Palette der Demo (.av-c1–6) mit Dunkel-Begleitern, dafür gibt es keine Token */
.extr-avatar.emp-av-c1 { background: #f6e3d3; color: #8a3f06; }
.extr-avatar.emp-av-c2 { background: #e7ecdf; color: #3f5a2a; }
.extr-avatar.emp-av-c3 { background: #e2e9f1; color: #2a4a6b; }
.extr-avatar.emp-av-c4 { background: #efe3f0; color: #6b2f6e; }
.extr-avatar.emp-av-c5 { background: #f3e9d2; color: #6e5212; }
.extr-avatar.emp-av-c6 { background: #e1efec; color: #1f5d55; }
html[data-theme="dark"] .extr-avatar.emp-av-c1 { background: #4a2d17; color: #f7c79e; }
html[data-theme="dark"] .extr-avatar.emp-av-c2 { background: #2f3a26; color: #c7dcb3; }
html[data-theme="dark"] .extr-avatar.emp-av-c3 { background: #243446; color: #b5cde8; }
html[data-theme="dark"] .extr-avatar.emp-av-c4 { background: #3d2a3e; color: #e3c3e5; }
html[data-theme="dark"] .extr-avatar.emp-av-c5 { background: #40331a; color: #ecd7a4; }
html[data-theme="dark"] .extr-avatar.emp-av-c6 { background: #203a36; color: #aee0d6; }
/* === /MODUL === */

/* === MODUL news · W2 === */
/* NF-news-01 · ungeschichtet (Grund: .extr-badge und .extr-detail-grid stehen ungeschichtet; kein display gesetzt → keine .hidden-Begleitregel) */
/* Chips auf dem Titelbild (Demo .ncard__chips): Glasfläche über Fotos */
.news-card-chips .extr-badge { background: hsl(var(--card) / .92); color: hsl(var(--foreground)); font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.news-card-chips .extr-badge--gold { background: hsl(var(--brand-amber)); color: hsl(var(--brand-ink)); }
/* „Gefällt mir“ aktiv in Rot (Demo .ncard__like.is-on / .likebtn.is-on) */
.news-like.is-on { color: hsl(var(--tone-bad-fg)); }
.extr-btn--outline.news-like.is-on { background: hsl(var(--tone-bad-bg)); border-color: hsl(var(--tone-bad-mark) / .5); color: hsl(var(--tone-bad-fg)); }
.news-liked-mark { color: hsl(var(--tone-bad-mark)); }
/* Meta-Liste im Aside einspaltig (Demo .dl) */
.news-meta.extr-detail-grid { grid-template-columns: minmax(0, 1fr); gap: .875rem; }
/* Galerie-Spur ohne Scrollbalken (ersetzt den entfernten <style>-Block in news-detail.php) */
.nd-gallery-track { scrollbar-width: none; -ms-overflow-style: none; }
.nd-gallery-track::-webkit-scrollbar { display: none; }
/* === /MODUL === */

/* === MODUL news · Regeln === */
/* Quelle: workspace/redesign/plan/04-regeln-bedienung.md (R2, R4, R7), Demo .toolbar/.ncard/.nlead */

/* Kopf: Zahl der ungelesenen Artikel */
.news-unread-count { font-weight: 600; color: hsl(var(--foreground)); }

/* Schalter „Nur ungelesene“: rechts in der Filtergruppe, direkt vor der Suche */
.news-unread-switch { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; font-size: .8125rem; font-weight: 600; color: hsl(var(--foreground) / .8); cursor: pointer; user-select: none; white-space: nowrap; }

/* Karten wie in der Demo: Spalte mit Fußzeile am unteren Rand */
#news-grid > .news-card { display: flex; flex-direction: column; color: inherit; transition: box-shadow .18s, transform .18s; }
#news-grid > .news-card:hover { box-shadow: var(--shadow-float, 0 8px 24px hsl(var(--foreground) / .1)); transform: translateY(-2px); }
/* Im Spaltenlayout gäbe min-height:auto dem hohen Originalbild nach; das Bild liegt deshalb absolut im 16:9-Rahmen */
.news-card-cover { flex: none; min-height: 0; overflow: hidden; }
.news-card-cover img { position: absolute; inset: 0; }
.news-card-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: .5rem; min-width: 0; padding: 1rem 1.125rem 1.125rem; }
.news-card-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.news-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.news-card-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.news-card-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.news-card:hover .news-card-title { color: hsl(var(--primary-text)); }
.news-card-teaser { display: -webkit-box; margin: 0; overflow: hidden; font-size: .84375rem; color: hsl(var(--muted-foreground)); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.news-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .625rem; margin-top: auto; padding-top: .625rem; border-top: 1px solid hsl(var(--border)); font-size: .75rem; color: hsl(var(--muted-foreground)); }
.news-card-byline { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.news-card-byline-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Breite Highlight-Karte (Demo .nlead) */
#news-grid > .news-lead { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
#news-grid > .news-lead:hover { transform: none; }
#news-grid > .news-lead.news-card--nocover { grid-template-columns: minmax(0, 1fr); }
.news-lead .news-card-cover { aspect-ratio: auto; min-height: 18.75rem; }
.news-lead .news-card-body { justify-content: center; gap: .75rem; padding: 1.875rem 2.125rem; }
.news-lead .news-card-title { font-size: 1.625rem; line-height: 1.25; letter-spacing: -.01em; }
.news-lead .news-card-teaser { font-size: .9375rem; line-height: 1.6; -webkit-line-clamp: 3; line-clamp: 3; color: hsl(var(--foreground) / .8); }
.news-lead .news-card-foot { margin-top: 0; padding-top: 0; border-top: 0; }
.news-lead .news-card-byline { gap: .625rem; }
.news-lead .news-card-byline-t { display: flex; flex-direction: column; font-size: .8125rem; }
.news-lead .news-card-byline-t b { font-weight: 600; color: hsl(var(--foreground)); }
.news-lead .news-card-byline-t small { font-size: .75rem; color: hsl(var(--muted-foreground)); }

@media (max-width: 767px) {
  #news-grid > .news-lead { grid-template-columns: minmax(0, 1fr); }
  .news-lead .news-card-cover { min-height: 0; aspect-ratio: 16 / 9; }
  .news-lead .news-card-body { padding: 1.25rem; }
  .news-lead .news-card-title { font-size: 1.3125rem; }
  /* Schalter unter das Kategorie-Select, Suche hat ihre eigene Zeile */
  .news-unread-switch { margin-left: 0; }
}
/* === /MODUL === */

/* === MODUL newsletter · W3 === */
/* === /MODUL === */

/* === MODUL raumbuchung · W4 === */
@layer components {
  .rb-choice { display: block; width: 100%; padding: .75rem 1rem; border: 1px solid hsl(var(--input)); border-radius: .75rem;
               background: hsl(var(--card)); color: hsl(var(--foreground)); text-align: left; cursor: pointer;
               transition: background-color .15s, border-color .15s; }
  .rb-choice:hover { background: hsl(var(--muted-bg)); }
  .rb-choice > span { display: block; }
  .rb-choice > span + span { margin-top: .125rem; font-size: .75rem; font-weight: 400; color: hsl(var(--muted-foreground)); }
  .rb-choice--danger { border-color: transparent; background: hsl(var(--tone-bad-bg)); color: hsl(var(--tone-bad-fg)); }
  .rb-choice--danger:hover { border-color: hsl(var(--tone-bad-mark)); background: hsl(var(--tone-bad-bg)); }
  .rb-choice--danger > span + span { color: hsl(var(--tone-bad-fg)); }
  .rb-avail-row { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; }
  .rb-avail-row--frei { border-color: hsl(var(--tone-ok-border)); background: hsl(var(--tone-ok-bg)); }
  .rb-avail-row--belegt { opacity: .7; }
}
/* D8: der ungeschichtete Reset button { font: inherit } schlägt die Schriftgröße im Layer */
button.rb-choice { font-size: .875rem; font-weight: 500; }
/* === /MODUL === */

/* === MODUL raumbuchung · Regeln === */
/* Quelle: workspace/redesign/plan/04-regeln-bedienung.md (R2, R4) */

/* Zeitraum „Von/Bis“ in der Filterzeile der Werkzeugleiste: Beschriftung neben dem Feld */
.rb-filter-date { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 600; color: hsl(var(--foreground) / .8); white-space: nowrap; }
.rb-filter-date .extr-filter-select { width: auto; }
/* === /MODUL === */

/* === MODUL recruiting · Regeln === */
/* Quelle: workspace/redesign/plan/04-regeln-bedienung.md (R2, R3) */

/* Bereich und Darstellung stehen zusammen links in Zeile 1. Damit die Suche daneben passt,
   zeigt der Wechsler Liste/Board bis 1599 px nur Symbole; Tooltip und aria-label nennen die Ansicht. */
@media (min-width: 768px) and (max-width: 1599px) {
  .rec-mode-strip .extr-tab-strip-label { display: none; }
  .rec-mode-strip .extr-tab-strip-btn { padding-left: .625rem; padding-right: .625rem; }
  /* Flex rechnet beim Umbruch mit der Grundbreite 24rem; 20rem ist die Mindestbreite aus R5. */
  .extr-toolbar-row:has(.rec-mode-strip) .extr-toolbar-search { flex-basis: 20rem; }
}
/* === /MODUL === */

/* === MODUL schichten · W5 === */
/* Status-Chip (Modulform): nur Form. Farbe, Fläche und Rahmenfarbe kommen aus den Katalogklassen (.shift-st-*,
   bg-/text-/border-* aus extr_shift_absence_kinds) – deshalb hier keine background/color/border-color.
   Genutzt: Legenden, Mindestbesetzung, Plan-Dialog; zeitkonto und wachdienst übernehmen die Form in ihrer Welle. */
.shift-chip { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .5rem; border-width: 1px; border-style: solid; border-radius: .5rem; font-size: .75rem; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.shift-chip > svg, .shift-chip > i { width: .875rem; height: .875rem; flex: 0 0 auto; }
.shift-chip.hidden { display: none; }
/* Plan-Dialog: Trennlinie nur zwischen sichtbaren Zuständigkeiten (ersetzt <style> in schichten.php) */
.shift-req-list > label:not(.hidden) ~ label:not(.hidden) { border-top: 1px solid hsl(var(--border) / .45); }
/* Dunkelmodus (01 §3.24, §6.3 Nr. 8). Jede Zeile beginnt mit „html[“ – plan-export.php übernimmt per Regex nur Zeilen, die mit
   „.shift-st-“ beginnen; die Druckseite bleibt hell. Die Ansicht „Farben“ (#extr-main.shift-view-colors) behält die Nutzerfarben. */
html[data-theme="dark"] #extr-main:not(.shift-view-colors) .shift-st-frueh       { background: #172554; color: #bfdbfe; border-color: #1e40af; } /* feste Farbe: Statusfarbe Dienstplan, 10,3:1 */
html[data-theme="dark"] #extr-main:not(.shift-view-colors) .shift-st-mittel      { background: #431407; color: #fed7aa; border-color: #9a3412; } /* feste Farbe: Statusfarbe Dienstplan, 11,6:1 */
html[data-theme="dark"] #extr-main:not(.shift-view-colors) .shift-st-spaet       { background: #334155; color: #f1f5f9; border-color: #64748b; } /* feste Farbe: Statusfarbe Dienstplan („weiß“ = hellste Fläche), 9,5:1 */
html[data-theme="dark"] #extr-main:not(.shift-view-colors) .shift-st-nacht       { background: #020617; color: #c7d2fe; border-color: #3730a3; } /* feste Farbe: Statusfarbe Dienstplan, 13,5:1 */
html[data-theme="dark"] #extr-main:not(.shift-view-colors) .shift-st-arbeitstag  { background: #082f49; color: #bae6fd; border-color: #0369a1; } /* feste Farbe: Statusfarbe Dienstplan, 10,5:1 */
html[data-theme="dark"] #extr-main:not(.shift-view-colors) .shift-st-frei        { background: #422006; color: #fef08a; border-color: #a16207; } /* feste Farbe: Statusfarbe Dienstplan, 12,5:1 */
html[data-theme="dark"] #extr-main:not(.shift-view-colors) .shift-st-urlaub      { background: #052e16; color: #bbf7d0; border-color: #15803d; } /* feste Farbe: Statusfarbe Dienstplan, 12,3:1 */
html[data-theme="dark"] #extr-main:not(.shift-view-colors) .shift-st-krank       { background: #450a0a; color: #fecaca; border-color: #b91c1c; } /* feste Farbe: Statusfarbe Dienstplan, 11,2:1 */
html[data-theme="dark"] #extr-main:not(.shift-view-colors) .shift-st-schule      { background: #2e1065; color: #ddd6fe; border-color: #6d28d9; } /* feste Farbe: Statusfarbe Dienstplan, 11,0:1 */
html[data-theme="dark"] #extr-main:not(.shift-view-colors) .shift-st-dienstreise { background: #1e1b4b; color: #c7d2fe; border-color: #4338ca; } /* feste Farbe: Statusfarbe Dienstplan, 10,7:1 */
html[data-theme="dark"] #extr-main:not(.shift-view-colors) .shift-st-termin      { background: #2e1065; color: #ddd6fe; border-color: #5b21b6; } /* feste Farbe: Statusfarbe Dienstplan, 11,0:1 */
html[data-theme="dark"] .shift-st-sonntag { background: hsl(var(--muted-bg)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); }
html[data-theme="dark"] .shift-view-colors .shift-st-sonntag { background: hsl(var(--muted-bg)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); }
html[data-theme="dark"] .shift-sum-row td { background: hsl(var(--muted)); }
html[data-theme="dark"] .shift-gesamt-scroll thead th { background: linear-gradient(hsl(var(--muted) / .4), hsl(var(--muted) / .4)) hsl(var(--card)); }
html[data-theme="dark"] .shift-gesamt-scroll thead th.bg-slate-100 { background: hsl(var(--muted)); }
html[data-theme="dark"] .shift-gesamt-scroll thead th.bg-primary\/10 { background: linear-gradient(hsl(var(--primary) / .18), hsl(var(--primary) / .18)) hsl(var(--card)); }
/* === /MODUL === */

/* === MODUL schulungen · W1 === */
/* NF-schulungen-03: Tonfläche der runden Ergebnissymbole (Ergebnis-Karte h-20, Auswertung je Frage h-7) in
   schulungen-result.php; ersetzt bg-green-50/bg-red-50 an rounded-full (R5-Rückbau). Symbolfarbe bleibt am Symbol. */
.sch-tone--ok  { background: hsl(var(--tone-ok-bg)); }
.sch-tone--bad { background: hsl(var(--tone-bad-bg)); }
/* === /MODUL === */

/* === MODUL shell · W1 === */
/* NF-shell-01: Zeilen der Seite Benachrichtigungen (#notif-list) wie im Glocken-Panel (#extr-notif-list, S12), ohne
   dessen Zeilen-Padding. Ungeschichtet, ID-Selektor schlägt die Utilities h-10/w-10. */
#notif-list .notif-icon { width: 2.25rem; height: 2.25rem; }
#notif-list .notif-dot { background: hsl(var(--primary)); }
/* === /MODUL === */

/* === MODUL signage · W1 === */
/* Ungeschichtet wie der Bestandsblock .sg-* (überstimmt dessen Altwerte gleicher Spezifität über die Reihenfolge);
   kein display betroffen. Der Testanker .sg-ed-page{height:100vh;height:100dvh im Bestandsblock bleibt. */
/* NF-signage-01: Card-Editor ab 1024 px in Fensterhöhe unter der klebenden Kopfkarte (--extr-sticky-top, 01 §5.4). */
@media (min-width: 1024px) {
  .sg-ed-page.extr-page--wide { height: calc(100vh - var(--extr-sticky-top, 0px)); height: calc(100dvh - var(--extr-sticky-top, 0px)); }
}
/* NF-signage-02: Segment-Schalter in Demo-Form (01 §3.5 „--seg“); wirkt auch in _geraete-signage-modal.php. */
.sg-seg { gap: 2px; padding: 3px; border-radius: 11px; background: hsl(var(--muted-bg)); }
.sg-seg-btn { border-radius: var(--radius-btn); font-size: .84375rem; }
.sg-seg--fill .sg-seg-btn { font-size: .8125rem; }
.sg-seg-btn.is-active { background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: 0 1px 3px rgba(12, 28, 45, .12); /* feste Farbe: Schatten wie .extr-tab-strip--seg */ }
.sg-seg--fill .sg-seg-btn.is-active { color: hsl(var(--primary-text)); }
/* NF-signage-03: Farbfeld als Feld (D7), Upload-Zone nach .extr-upload, Regler-Akzent wie Checkbox (K10). */
.sg-color { border-color: hsl(var(--input)); border-radius: var(--radius-field); }
.sg-color:focus-within { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--ring)); }
.sg-drop { border: 2px dashed hsl(var(--input)); border-radius: var(--radius-card); background: transparent; color: hsl(var(--muted-foreground)); }
.sg-drop svg { color: hsl(var(--primary-text)); }
.sg-drop:hover { border-color: hsl(var(--primary)); background: hsl(var(--primary-soft)); }
.sg-ed-props input[type=range] { accent-color: hsl(var(--primary-strong)); }
/* NF-signage-04: Auswahl- und Warntöne auf Token (ersetzt /.06-Tönungen und #b45309/#fbbf24); Kachel-Overlay im Kartenradius. */
.sg-layer.is-sel { border-color: hsl(var(--primary)); background: hsl(var(--primary-soft)); }
.sg-layer.is-sel .sg-layer-ico, .sg-ico-btn.is-active { background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
.sg-ico-btn.is-active { border-color: hsl(var(--primary)); }
.sg-pl-meta-row.is-warn, html[data-theme="dark"] .sg-pl-meta-row.is-warn { color: hsl(var(--tone-warn-fg)); }
.sg-pl-title::after { border-radius: var(--radius-card); }
/* === /MODUL === */

/* === MODUL social-media · W3 === */
/* NF-social-media-01 · ungeschichtet: die Altregeln mit den Präfixen sm-, sme- und mg- (Block „Social Media“) stehen ungeschichtet; kein display gesetzt → keine .hidden-Begleitregel.
   Überstimmt die gleichnamigen Altregeln des Blocks „Social Media“ über die Reihenfolge.
   .sm-view/.sm-grip/.sm-row gehören der Schichtplanung und bleiben unberührt. */

/* Statusstreifen der Kalender-Chips und Legende: Ton-Marken statt Hex */
.sm-chip-draft { border-color: hsl(var(--muted-foreground)); }
.sm-chip-review, .sm-chip-partial { border-color: hsl(var(--tone-warn-mark)); }
.sm-chip-scheduled, .sm-chip-publishing { border-color: hsl(var(--tone-info-mark)); }
.sm-chip-published { border-color: hsl(var(--tone-ok-mark)); }
.sm-chip-failed { border-color: hsl(var(--tone-bad-mark)); }

/* Monatsraster nach 01 §3.24: Tagesflächen statt Linienraster (Layout und DnD-Anker bleiben .sm-grid/.sm-cell) */
@media (min-width: 1024px) { .sm-grid { gap: 4px; background: transparent; border: 0; border-radius: 0; overflow: visible; } }
.sm-grid-head { background: transparent; padding: 0 0 .125rem; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; }
.sm-cell { background: hsl(var(--muted-bg)); border-radius: .625rem; }
.sm-cell-off { background: transparent; }
.sm-cell-today { box-shadow: inset 0 0 0 1.5px hsl(var(--primary)); }
.sm-cell-add:hover { background: hsl(var(--card)); }
.sm-cell.is-over { outline: 2px dashed hsl(var(--primary) / .45); background: hsl(var(--primary-soft)); }
.sm-chip { background: hsl(var(--card)); }
.sm-chip:hover { background: hsl(var(--primary-soft)); }
.sm-chip .sm-ti { flex-shrink: 0; }
/* Agenda: Datumschip darf in der Zeile nicht schrumpfen */
.sm-agenda-day { align-items: flex-start; }

/* Vorschaubild, Kommentar- und Vorschlagskarten */
.sm-thumb { background-color: hsl(var(--muted-bg)); border-radius: .625rem; }
.sm-cmt { padding: 1rem; background: hsl(var(--card)); border: 1px solid transparent; border-radius: var(--radius-card); box-shadow: var(--extr-shadow-sm); }
.sm-cmt.is-open { border-left: 1px solid transparent; box-shadow: inset 3px 0 0 hsl(var(--primary)), var(--extr-shadow-sm); }
.sm-sugg { border-color: hsl(var(--primary) / .25); background: hsl(var(--primary-soft)); color: hsl(var(--foreground)); }
.sm-sugg:hover { border-color: hsl(var(--primary) / .45); }
.sm-heat-cell { background: hsl(var(--muted-bg)); }

/* Editor: Kacheln, Kanal-Karten, Bewerbungsblock, Bild-Overlay */
.sme-tile.is-on { border-color: hsl(var(--primary)); background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
.sme-ch.is-on { border-color: hsl(var(--primary)); background: hsl(var(--primary-soft)); }
.sme-promo { background: hsl(var(--primary-soft)); border-color: hsl(var(--primary) / .4); }
.sme-m-hint { background: hsl(var(--tone-warn-mark)); } /* Weiß auf Ton-Marke: feste Farbe bleibt aus dem Bestand */
.sme-prev-fbbar { /*feste Farbe: Plattform-Nachbau bleibt auch dunkel hell*/ padding-bottom: .5rem; color: #6b7280; font-size: .75rem; }

/* Foto-Editor: Regler im Akzent wie Checkbox und Radio */
#extr-photo-editor input[type=range] { accent-color: hsl(var(--primary)); }

/* Anleitung */
.mg-table th { background: hsl(var(--muted-bg)); }
.mg-check li::before { border-color: hsl(var(--input)); }
.mg-body .extr-note { margin-bottom: .75rem; }
/* === /MODUL === */

/* === MODUL suche · Regeln === */
/* Quelle: workspace/redesign/plan/04-regeln-bedienung.md (R6). Overlay und Ergebnisseite; das Modul Suche führt das Präfix .extr-cmdk/.extr-suche. */

/* Overlay: Das Filter-Panel darf über die Box hinausragen (overflow, Radien und Umbruch an den Grundregeln von .extr-cmdk-box/-head/-foot) */
.extr-cmdk-tags { display: contents; }
.extr-cmdk-tag {
  display: inline-flex; align-items: center; gap: .3125rem; max-width: 12rem; padding: .1875rem .25rem .1875rem .5rem;
  border-radius: 999px; background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.extr-cmdk-tag > svg { width: .8125rem; height: .8125rem; flex: 0 0 auto; }
.extr-cmdk-tag > span { overflow: hidden; text-overflow: ellipsis; }
.extr-cmdk-tag button { display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; border-radius: 999px; }
.extr-cmdk-tag button:hover { background: hsl(var(--primary-text) / .14); }
.extr-cmdk-tag button svg { width: .75rem; height: .75rem; }

.extr-cmdk-filter .extr-ms-label { display: none; }
.extr-cmdk-filter .extr-ms-btn { height: 2rem; min-height: 2rem; padding: 0 .5rem; }
.extr-cmdk-filter .extr-ms-panel { right: 0; left: auto; }

.extr-cmdk-more { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; color: hsl(var(--primary-text)); cursor: pointer; }
.extr-cmdk-more:hover { text-decoration: underline; }
.extr-cmdk-sub { margin-left: auto; padding-left: .75rem; font-size: .6875rem; color: hsl(var(--muted-foreground)); white-space: nowrap; }
#extr-search-results [data-search-all] { margin-top: .375rem; border-top: 1px solid hsl(var(--border)); border-radius: 0 0 9px 9px; }

/* Ergebnisseite */
.extr-suche-toolbar .extr-tab-strip { flex-wrap: wrap; width: auto; max-width: 100%; }
.extr-tab-strip-btn[data-suche-mehr] .extr-pill-count::after { content: "+"; }

.extr-suche-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.extr-suche-grid--eine { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1023px) { .extr-suche-grid { grid-template-columns: minmax(0, 1fr); } }

.extr-suche-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1.25rem; border-bottom: 1px solid hsl(var(--border)); }
.extr-suche-kopf h2 { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 600; }
.extr-suche-kopf h2 svg { width: 1.125rem; height: 1.125rem; color: hsl(var(--primary-text)); }
.extr-suche-links { display: flex; gap: .875rem; font-size: .75rem; }
.extr-suche-links a { font-weight: 500; color: hsl(var(--primary-text)); }
.extr-suche-links a:hover { text-decoration: underline; }

.extr-suche-liste { list-style: none; margin: 0; padding: .375rem; }
.extr-suche-zeile { display: block; padding: .5625rem .875rem; border-radius: 9px; color: hsl(var(--foreground)); }
.extr-suche-zeile:hover, .extr-suche-zeile:focus-visible { background: hsl(var(--primary-soft)); }
.extr-suche-titel { display: block; font-size: .875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extr-suche-sub { display: block; font-size: .75rem; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* === /MODUL === */

/* === MODUL uebersetzer · W3 === */
/* NF-uebersetzer-01 · ungeschichtet (Grund: der Reset von p/ul/ol steht ungeschichtet; kein display gesetzt → keine .hidden-Begleitregel) */
/* Typografie für das sanitisierte KI-Ergebnis (p, h1–h6, ul/ol/li, table, blockquote, hr) */
.ut-output { font-size: .9375rem; line-height: 1.65; color: hsl(var(--bodytext)); overflow-wrap: anywhere; overflow-x: auto; }
.ut-output p { margin: 0 0 .75rem; }
.ut-output h1 { font-size: 1.25rem; font-weight: 700; margin: 1.1rem 0 .5rem; color: hsl(var(--heading)); }
.ut-output h2 { font-size: 1.125rem; font-weight: 700; margin: 1rem 0 .45rem; color: hsl(var(--heading)); }
.ut-output :is(h3, h4, h5, h6) { font-size: 1rem; font-weight: 600; margin: .9rem 0 .4rem; color: hsl(var(--heading)); }
.ut-output > :first-child { margin-top: 0; }
.ut-output > :last-child { margin-bottom: 0; }
.ut-output ul { list-style: disc; margin: 0 0 .75rem; padding-left: 1.35rem; }
.ut-output ol { list-style: decimal; margin: 0 0 .75rem; padding-left: 1.35rem; }
.ut-output li { margin: 0 0 .25rem; }
.ut-output li::marker { color: hsl(var(--muted-foreground)); }
.ut-output :is(strong, b) { font-weight: 600; color: hsl(var(--foreground)); }
.ut-output table { width: 100%; border-collapse: collapse; margin: 0 0 .75rem; font-size: .875rem; }
.ut-output :is(th, td) { border: 1px solid hsl(var(--border)); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.ut-output th { background: hsl(var(--muted-bg)); font-weight: 600; color: hsl(var(--foreground)); }
.ut-output blockquote { border-left: 3px solid hsl(var(--border)); padding-left: .75rem; color: hsl(var(--muted-foreground)); margin: 0 0 .75rem; }
.ut-output hr { border: 0; border-top: 1px solid hsl(var(--border)); margin: 1rem 0; }
/* === /MODUL === */

/* === MODUL wachdienst · Regeln === */
/* Quelle: workspace/redesign/plan/04-regeln-bedienung.md (R2, R4) */

/* Schalter „Meine Einsätze“: rechts in der Filtergruppe */
.wd-mine-switch { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; font-size: .8125rem; font-weight: 600; color: hsl(var(--foreground) / .8); cursor: pointer; user-select: none; white-space: nowrap; }

/* Archiv: Zeitraum in der Filterzeile */
.wd-arc-date { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; color: hsl(var(--foreground) / .8); }
.wd-arc-date .extr-input { width: 10.5rem; }
/* === /MODUL === */

/* === MODUL zeitkonto · Regeln === */
/* Quelle: workspace/redesign/plan/04-regeln-bedienung.md (R2) */
/* Filterzeile entfällt, wenn die aktive Ansicht keine Filter hat. */
#zk-toolbar .extr-toolbar-filters:not(:has(> [data-zk-pane]:not([style*="none"]))) { display: none; }
/* === /MODUL === */

/* ============================================================
   Werkzeugleiste (extr_toolbar, R2) und Filter-Select (extr_multi_select, R4)
   Markup ausschließlich aus page-header.php, Verhalten in app.js.
   ============================================================ */
.extr-toolbar { display: flex; flex-direction: column; gap: .75rem; margin: 0 0 1.25rem; }
/* Reihenfolge: Suche · Filter direkt daneben · Ansichtswechsler ganz rechts. */
.extr-toolbar-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .625rem .75rem; min-width: 0; }
.extr-toolbar-search { display: flex; flex: 0 1 24rem; min-width: 0; max-width: 100%; }
.extr-toolbar-search .extr-sf { flex: 1 1 auto; width: auto; }
.extr-toolbar-filters { display: flex; align-items: center; flex-wrap: wrap; gap: .625rem; flex: 1 1 0; min-width: 0; }
.extr-toolbar-sort { display: inline-flex; align-items: center; gap: .25rem; flex: 0 0 auto; max-width: 100%; margin-left: auto; } /* Sortierung getrennt von den Filtern, rechtsbündig */
.extr-toolbar-views { display: flex; flex: 0 0 auto; max-width: 100%; margin-left: auto; }
.extr-toolbar .extr-tab-strip { max-width: 100%; }
@media (min-width: 768px) { .extr-toolbar-search { min-width: 20rem; } }
@media (min-width: 1280px) {
  .extr-toolbar-row { flex-wrap: nowrap; }
  /* Gesetzt von fitToolbars() (app.js), wenn die Filter zwischen Suche und Wechsler nicht in eine Zeile passen. */
  .extr-toolbar-row.is-stacked { flex-wrap: wrap; }
  .extr-toolbar-row.is-stacked > .extr-toolbar-filters { order: 3; flex: 1 1 100%; }
}
/* Zu schmal für alles in einer Zeile: Suche und Wechsler bleiben oben, die Filter rutschen darunter. */
@media (min-width: 768px) and (max-width: 1279.98px) { .extr-toolbar-filters { order: 3; flex: 1 1 100%; } }
@media (max-width: 767.98px) {
  .extr-toolbar-search, .extr-toolbar-filters { flex: 1 1 100%; }
  .extr-toolbar-views { flex: 1 1 100%; margin-left: 0; }
  .extr-toolbar .extr-tab-strip { overflow-x: auto; scrollbar-width: none; }
  .extr-toolbar .extr-tab-strip::-webkit-scrollbar { display: none; }
}

.extr-ms { position: relative; display: inline-flex; flex: 0 0 auto; max-width: 100%; }
.extr-ms-btn {
  display: inline-flex; align-items: center; gap: .4375rem; height: 2.375rem; max-width: 100%; padding: 0 .625rem 0 .875rem;
  border: 1px solid hsl(var(--input)); border-radius: var(--radius-control); background: hsl(var(--card));
  color: hsl(var(--foreground)); font-size: .84375rem; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.extr-ms-btn:hover { background: hsl(var(--muted)); }
.extr-ms-btn:focus-visible, .extr-ms.is-open .extr-ms-btn { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--ring)); }
.extr-ms.has-value .extr-ms-btn { border-color: hsl(var(--primary) / .55); background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
.extr-ms.is-loading .extr-ms-btn { opacity: .65; }
.extr-ms-icon { height: .9375rem; width: .9375rem; flex: 0 0 auto; color: hsl(var(--muted-foreground)); }
.extr-ms.has-value .extr-ms-icon { color: currentColor; }
.extr-ms-current { overflow: hidden; text-overflow: ellipsis; font-weight: 600; max-width: 11rem; }
.extr-ms-label:has(+ .extr-ms-current:not(.hidden))::after { content: ':'; }
.extr-ms-count {
  min-width: 1.25rem; padding: 0 .3125rem; border-radius: 999px; background: hsl(var(--primary-strong)); color: hsl(var(--primary-foreground));
  font-size: .6875rem; font-weight: 700; line-height: 1.25rem; text-align: center; font-variant-numeric: tabular-nums;
}
.extr-ms-caret { height: 1rem; width: 1rem; flex: 0 0 auto; color: hsl(var(--muted-foreground)); transition: transform .15s ease; }
.extr-ms.is-open .extr-ms-caret { transform: rotate(180deg); }
.extr-ms-count.hidden, .extr-ms-current.hidden, .extr-ms-opt-count.hidden, .extr-ms-reset.hidden, .extr-ms-opt.hidden, .extr-ms-none.hidden { display: none; }

.extr-ms-panel {
  display: none; position: absolute; left: 0; top: calc(100% + .375rem); z-index: 70; flex-direction: column;
  width: 17.5rem; max-width: calc(100vw - 2rem); padding: .375rem;
  background: hsl(var(--popover)); color: hsl(var(--foreground)); border-radius: var(--radius-pop);
  box-shadow: var(--extr-shadow-lg), 0 0 0 1px hsl(var(--foreground) / .10);
}
.extr-ms.is-open > .extr-ms-panel { display: flex; }
.extr-ms-panel.is-flip { left: auto; right: 0; }
.extr-ms-panel.is-up { top: auto; bottom: calc(100% + .375rem); }
.extr-ms-head { display: none; align-items: center; justify-content: space-between; padding: .25rem .25rem .5rem .5rem; font-size: 1rem; font-weight: 600; }
.extr-ms-close { display: inline-flex; align-items: center; justify-content: center; height: 2.25rem; width: 2.25rem; border-radius: 999px; color: hsl(var(--muted-foreground)); cursor: pointer; }
.extr-ms-close:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.extr-ms-close svg { height: 1.125rem; width: 1.125rem; }
.extr-ms-find { position: relative; display: flex; align-items: center; margin-bottom: .375rem; }
.extr-ms-find svg { position: absolute; left: .625rem; height: .9375rem; width: .9375rem; color: hsl(var(--muted-foreground)); pointer-events: none; }
.extr-ms-search {
  width: 100%; height: 2.125rem; padding: 0 .75rem 0 2rem; border: 1px solid hsl(var(--input)); border-radius: var(--radius-control);
  background: hsl(var(--card)); color: hsl(var(--foreground)); font-size: .8125rem; outline: none; -webkit-appearance: none; appearance: none;
}
.extr-ms-search:focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--ring)); }
.extr-ms-search::-webkit-search-cancel-button { display: none; }
.extr-ms-list { display: flex; flex-direction: column; gap: 1px; max-height: 18rem; overflow-y: auto; overscroll-behavior: contain; }
.extr-ms-opt {
  display: flex; align-items: center; gap: .5625rem; width: 100%; min-height: 2.125rem; padding: .3125rem .5rem;
  border: 0; border-radius: var(--radius-btn); background: none; color: hsl(var(--foreground));
  font-size: .84375rem; line-height: 1.3; text-align: left; cursor: pointer;
}
.extr-ms-opt:hover, .extr-ms-opt:focus-visible { background: hsl(var(--muted)); outline: none; }
.extr-ms-opt:focus-visible { box-shadow: inset 0 0 0 2px hsl(var(--ring)); }
.extr-ms-check {
  display: inline-flex; align-items: center; justify-content: center; height: 1.0625rem; width: 1.0625rem; flex: 0 0 auto;
  border: 1px solid hsl(var(--input)); border-radius: .3125rem; background: hsl(var(--card)); color: transparent;
}
.extr-ms-check svg { height: .75rem; width: .75rem; stroke-width: 3; }
.extr-ms-opt.is-on .extr-ms-check { background: hsl(var(--primary-strong)); border-color: hsl(var(--primary-strong)); color: hsl(var(--primary-foreground)); }
.extr-ms-panel.is-single .extr-ms-check { border-radius: 999px; }
.extr-ms-opt-icon { height: .9375rem; width: .9375rem; flex: 0 0 auto; color: hsl(var(--muted-foreground)); }
.extr-ms-opt-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Einträge nie stauchen: in der höhenbegrenzten Liste (flex column) schrumpften lange, umbrechende Einträge sonst
   auf ihre Mindesthöhe und der Text lief in den nächsten Eintrag (Postfachwahl RP, 11.11.2026). */
.extr-ms-list > .extr-ms-opt { flex-shrink: 0; }
.extr-ms-opt-count { flex: 0 0 auto; color: hsl(var(--muted-foreground)); font-size: .75rem; font-variant-numeric: tabular-nums; }
.extr-ms-none { padding: .75rem .5rem; color: hsl(var(--muted-foreground)); font-size: .8125rem; text-align: center; }
.extr-ms-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .25rem; }
.extr-ms-foot:not(:has(.extr-ms-reset:not(.hidden))) { display: none; }
.extr-ms-reset {
  display: inline-flex; align-items: center; gap: .375rem; padding: .3125rem .5rem; border-radius: var(--radius-btn);
  color: hsl(var(--muted-foreground)); font-size: .8125rem; font-weight: 500; cursor: pointer;
}
.extr-ms-reset:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.extr-ms-reset svg { height: .875rem; width: .875rem; }
.extr-ms-apply { display: none; }

/* Mobil: Blatt von unten, am body (siehe msOpen in app.js) */
.extr-ms-scrim { display: none; position: fixed; inset: 0; z-index: 240; background: rgb(0 0 0 / .4); }
.extr-ms-scrim.is-on { display: block; }
.extr-ms-panel.is-sheet {
  display: flex; position: fixed; inset: auto 0 0 0; z-index: 241; width: auto; max-width: none; max-height: 80dvh; padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  border-radius: 1.25rem 1.25rem 0 0; animation: extr-ms-sheet .2s cubic-bezier(.2, .7, .3, 1);
}
.extr-ms-panel.is-sheet .extr-ms-head { display: flex; }
.extr-ms-panel.is-sheet .extr-ms-list { flex: 1 1 auto; min-height: 0; max-height: none; }
.extr-ms-panel.is-sheet .extr-ms-opt { min-height: 2.75rem; font-size: .9375rem; }
.extr-ms-panel.is-sheet .extr-ms-search { height: 2.75rem; font-size: 1rem; }
.extr-ms-panel.is-sheet .extr-ms-foot, .extr-ms-panel.is-sheet .extr-ms-foot:not(:has(.extr-ms-reset:not(.hidden))) { display: flex; justify-content: flex-end; margin-top: .5rem; }
.extr-ms-panel.is-sheet .extr-ms-reset { margin-right: auto; }
.extr-ms-panel.is-sheet .extr-ms-apply {
  display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; padding: 0 1.25rem; border-radius: 999px;
  background: hsl(var(--primary-strong)); color: hsl(var(--primary-foreground)); font-size: .875rem; font-weight: 600; cursor: pointer;
}
@keyframes extr-ms-sheet { from { transform: translateY(1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .extr-ms-panel.is-sheet { animation: none; } .extr-ms-caret { transition: none; } }
@media print { .extr-toolbar, .extr-ms-panel, .extr-ms-scrim { display: none; } }

/* Zeilenliste (Jan, 08.11.2026): gemeinsamer Aufbau der Listenansichten nach dem Vorbild Aufgaben.
   Aufbau: .extr-rowlist > .extr-rowlist-row > -lead, -main (-title, -sub, -tags), -meta, -actions.
   Spalten je Modul über --rowlist-cols (feste Breiten, damit sie über alle Zeilen fluchten),
   Mindestbreite der Aktionen über --rowlist-actions. Spalten erst ab 1280 px wie bei den Aufgaben. */
.extr-rowlist-row {
  grid-template-areas: "lead main actions" "lead meta actions";
  color: inherit;
}
.extr-rowlist-row:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: -2px; }
.extr-rowlist-lead    { grid-area: lead; display: inline-flex; align-self: start; }
.extr-rowlist-main    { grid-area: main; min-width: 0; }
.extr-rowlist-title   { font-weight: 500; font-size: .9375rem; line-height: 1.35; }
.extr-rowlist-title a:hover { text-decoration: underline; }
.extr-rowlist-sub {
  font-size: .8125rem; color: hsl(var(--muted-foreground)); margin-top: .15rem;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.extr-rowlist-tags    { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .45rem; }
.extr-rowlist-meta {
  grid-area: meta;
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1rem;
  min-width: 0; font-size: .8125rem; color: hsl(var(--muted-foreground));
}
.extr-rowlist-meta > * { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.extr-rowlist-meta svg { height: .875rem; width: .875rem; flex: 0 0 auto; }
.extr-rowlist-actions {
  grid-area: actions; display: inline-flex; align-items: center; justify-content: flex-end; gap: .125rem;
  align-self: start; min-width: var(--rowlist-actions, 0);
}
@media (min-width: 1280px) {
  .extr-rowlist-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "lead main meta actions";
    row-gap: 0;
  }
  .extr-rowlist-lead, .extr-rowlist-actions { align-self: center; }
  .extr-rowlist-meta {
    display: grid; grid-template-columns: var(--rowlist-cols, repeat(3, 9rem));
    column-gap: 1rem; flex-wrap: nowrap;
  }
}

/* Bausteine der Zeilenliste, ein Name je Zweck (Prüfung 08.11.2026). Nach der Basis und vor den Listen, damit Einzelregeln gewinnen. */
/* Filter über die Klasse hidden: display:grid der Zeile gewinnt sonst (app.css lädt nach tailwind.css). */
.extr-rowlist-row.hidden { display: none; }
/* Keine Führungsspalte, keine Aktionsspalte. */
.extr-rowlist--nolead .extr-rowlist-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main actions" "meta actions"; }
.extr-rowlist--noactions .extr-rowlist-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "lead main" "lead meta"; }
/* Abzeichen in einer festen Spalte: langer Text endet mit Auslassungspunkten, der volle Text steht im title. */
.extr-rowlist-meta .extr-badge { max-width: 100%; }
.extr-badge-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Zeilen ohne eigenes Ziel: ganze Liste oder einzelne Zeile. */
.extr-rowlist--static .extr-rowlist-row, .extr-rowlist-row.is-static { cursor: default; }
/* Leere Zelle: hält in den Spalten die Breite frei, gestapelt fällt sie weg. */
@media (max-width: 1279.98px) { .extr-rowlist-cell--empty { display: none; } }
@media (min-width: 1280px) {
  .extr-rowlist--nolead .extr-rowlist-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "main meta actions"; }
  .extr-rowlist--noactions .extr-rowlist-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead main meta"; }
}
/* Handy: mehrere Knöpfe bekommen eine eigene Zeile, rechtsbündig wie überall in der Liste. */
@media (max-width: 639.98px) {
  .extr-rowlist--actions-below .extr-rowlist-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "lead main" "lead meta" "actions actions"; }
  .extr-rowlist--actions-below.extr-rowlist--nolead .extr-rowlist-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "meta" "actions"; }
  .extr-rowlist--actions-below .extr-rowlist-actions { min-width: 0; }
}
/* Breite Listen: Neben der Seitenleiste bliebe dem Titel zu wenig Platz, die Angaben stehen darum unter dem Titel.
   --wide bis 1439 px, --wider bis 1535 px. Darüber gelten die Spalten. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .extr-rowlist--wide .extr-rowlist-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead main actions" "lead meta actions"; row-gap: .375rem; }
  .extr-rowlist--wide.extr-rowlist--nolead .extr-rowlist-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main actions" "meta actions"; }
  .extr-rowlist--wide.extr-rowlist--noactions .extr-rowlist-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "lead main" "lead meta"; }
  .extr-rowlist--wide .extr-rowlist-lead, .extr-rowlist--wide .extr-rowlist-actions { align-self: start; }
  .extr-rowlist--wide .extr-rowlist-meta { display: flex; flex-wrap: wrap; }
  .extr-rowlist--wide .hd-rowlist-head .extr-rowlist-meta { display: none; }
  .extr-rowlist--wide .extr-rowlist-cell--empty { display: none; }
}
@media (min-width: 1280px) and (max-width: 1535.98px) {
  .extr-rowlist--wider .extr-rowlist-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead main actions" "lead meta actions"; row-gap: .375rem; }
  .extr-rowlist--wider .extr-rowlist-lead, .extr-rowlist--wider .extr-rowlist-actions { align-self: start; }
  .extr-rowlist--wider .extr-rowlist-meta { display: flex; flex-wrap: wrap; }
  .extr-rowlist--wider .extr-rowlist-cell--empty { display: none; }
}

/* == Nachtrag Wissen == */
/* Bereiche verwalten: Name ist der Link in den Bereich, auch für archivierte. */
.wb-space-row a.extr-lrow-t:hover > b { color: hsl(var(--primary-text)); }
.wb-space-row .extr-lrow-t > small .extr-badge { height: 1.125rem; padding: 0 .4375rem; font-size: .6875rem; }
.wb-space-row .extr-lrow-end { gap: .125rem; }

/* == Nachtrag Arbeitsanweisungen und Formulare == */
/* Formulare, Zeilenliste: Felder, Einreichungen, Neu. Die Aktionen rücken am Handy in eine eigene Zeile. */
.form-rowlist { --rowlist-cols: 5.5rem 9.5rem 4.5rem; --rowlist-actions: 13.5rem; }
.form-rowlist .extr-row-btn.text-primary { color: hsl(var(--primary-text)); }
/* Kategorien: Wechsler Kacheln/Liste neben dem Bereichswechsler, Liste mit Spalten Dokumente und Neu. */
.aa-cat-rowlist { --rowlist-cols: 8.5rem 6rem; }
.aa-cat-rowlist .extr-rowlist-lead, .aa-cat-rowlist .extr-rowlist-actions { align-self: center; }
.aa-cat-rowlist .extr-rowlist-meta .extr-badge { justify-self: start; }

/* == Nachtrag Schulungen == */
/* Editor: Optionen unter dem Schalter „Darf wiederholt werden" */
.sch-retake-opts:not(.hidden) { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; margin:.5rem 0 0 1.5rem; }
.sch-retake-count { width:5rem; }
.sch-retake-opts .extr-field-hint { flex-basis:100%; margin:0; }
/* Ergebnisseite: Knopf unter den Kennzahlen */
.sch-retake-action { display:flex; justify-content:center; margin-top:1.25rem; }

/* == Nachtrag Team == */
/* Teamliste als Zeilenliste: Abteilung, Standort, letzte Aktivität, (Urlaub), Status; rechts Chat, E-Mail, Telefon, (Bearbeiten). */
.emp-rowlist { --rowlist-cols: 8.5rem 9rem 6.5rem 6.5rem; --rowlist-actions: 6.25rem; }
.emp-rowlist--vac { --rowlist-cols: 7.25rem 7.75rem 6.5rem 5.75rem 6rem; }
.emp-rowlist--manage { --rowlist-actions: 8.375rem; }
.emp-row.is-vacreq, .emp-row.is-vacreq:hover { background: hsl(var(--tone-warn-bg)); }
.emp-row-name { display: flex; align-items: center; gap: .375rem; min-width: 0; }
.emp-row-cell { max-width: 16rem; }
.emp-row-cell .truncate { min-width: 0; }
.emp-row-vac .text-xs { color: hsl(var(--muted-foreground)); }
/* Ohne Urlaubsanspruch steht nur ein Strich: Er hält die Spalte, ohne Spalten wäre er bloß Lärm. */
.emp-row-vac.is-empty { display: none; }
@media (min-width: 1280px) {
  .emp-row-cell { max-width: none; }
  .emp-row-vac { flex-direction: column; align-items: flex-start; gap: 0; }
}
@media (min-width: 1600px) {
  .emp-rowlist--vac { --rowlist-cols: 10rem 11rem 6.5rem 5.75rem 6rem; }
  .emp-rowlist--vac .extr-rowlist-meta { column-gap: .75rem; }
  .emp-row-vac.is-empty { display: inline-flex; }
}
/* Mit Urlaubsspalte reicht die Breite erst ab 1600 px für einzeilige Spalten, darunter würden Namen und Abteilungen gekürzt. */
@media (min-width: 1280px) and (max-width: 1599.98px) {
  .emp-rowlist--vac .extr-rowlist-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "lead main actions" "lead meta actions";
    row-gap: .375rem;
  }
  .emp-rowlist--vac .extr-rowlist-lead, .emp-rowlist--vac .extr-rowlist-actions { align-self: start; }
  .emp-rowlist--vac .extr-rowlist-meta { display: flex; }
  .emp-rowlist--vac .emp-row-vac { flex-direction: row; align-items: center; gap: .4rem; }
}
.emp-open { cursor: pointer; font: inherit; color: inherit; }
.emp-open:hover { text-decoration: underline; }
.emp-open:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; border-radius: .25rem; }
.emp-qa-off, .emp-qa-off:hover { background: transparent; color: hsl(var(--muted-foreground)); cursor: inherit; opacity: .3; }
/* Kontaktkarte: Knöpfe nach Inhalt, damit die Symbole bei drei Wegen nicht zusammengedrückt werden. */
.kk-actions .extr-btn { flex: 1 1 auto; }
.kk-actions svg { flex: 0 0 auto; }
/* Kachel: Bearbeiten-Symbol oben rechts, die Hinweise davor. */
.emp-pcard-corner--edit { top: .25rem; right: .25rem; align-items: center; }

/* == Nachtrag Recruiting == */
/* Board-Spalten haben ein eigenes display und gewinnen sonst gegen .hidden aus tailwind.css. */
.rec-col.hidden { display: none; }
/* Hinweiszeile über dem Board: gleicher Abstand wie über der Liste. */
p + .rec-board { margin-top: 1rem; }
/* Stellen, Profile und Bedarf ohne Verwaltungsrecht lassen sich nicht ziehen: kein Greif-Zeiger. */
.rec-card:not([draggable="true"]) { cursor: default; }
/* Bereich und Darstellung nebeneinander sind breiter als die Zeile bei 1024 px: Der Wechsler rückt dann darunter. */
.extr-toolbar-views:has(.rec-mode-strip) { flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
/* Zeile 1 Suche, Bereich und Darstellung, Zeile 2 die Filter: in allen Reitern mit Wechsler gleich.
   Ohne das bleibt ein einzelner Filter (Profile) in der Lücke zwischen Suche und Wechsler und überlappt. */
@media (min-width: 1280px) {
  .extr-toolbar-row:has(.rec-mode-strip) { flex-wrap: wrap; }
  .extr-toolbar-row:has(.rec-mode-strip) > .extr-toolbar-filters { order: 3; flex: 1 1 100%; }
}

/* == Nachtrag Termine == */
/* Terminplaner, Zeilenlisten. Kompakt: halbe Breite, ganze Zeile ist ein Link, Zustand steht rechts.
   Verwaltung: Zugewiesen, Belegung, Status. Tausch: Zeilen ohne eigenes Ziel. */
.tp-rowlist--kompakt .extr-rowlist-row { row-gap: 0; }
.tp-rowlist--kompakt .extr-rowlist-lead,
.tp-rowlist--kompakt .extr-rowlist-actions { align-self: center; }
.tp-rowlist--kompakt .extr-rowlist-actions { gap: .5rem; font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.tp-rowlist--verwaltung { --rowlist-cols: 7rem 7rem 6.5rem; --rowlist-actions: 16.75rem; }
.tp-rowlist--tausch { --rowlist-cols: 8rem; --rowlist-actions: 13rem; }
.tp-rowlist--tausch .extr-rowlist-sub { display: block; overflow: visible; } /* Ungekürzt: beide Termine entscheiden über die Antwort. */
@media (max-width: 639.98px) {
  .tp-rowlist .extr-row-actions { flex-wrap: wrap; justify-content: flex-end; }
  /* Sechs Aktionen passen nur ohne Wort in eine Zeile; Name bleibt in Tooltip und aria-label. */
  .tp-rowlist--verwaltung .extr-row-btn--text { width: 2rem; padding: 0; }
  .tp-rowlist--verwaltung .extr-row-btn--text > span { display: none; }
}

/* == Nachtrag Besucherausweis == */
/* Roter Kopfknopf (R1-Ausnahme, extr_page_actions(['alert' => …])). Mobil beschriftet: im Notfall kein Symbol zum Raten.
   Desktop: nach den Einstellungen (order 0), vor „Neu“ (order 2) und ⋮ (order 3). */
.extr-action-alert {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 2.75rem; padding: 0 1rem; flex-shrink: 0;
  border: 0; border-radius: 9999px;
  background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground));
  font-size: .875rem; font-weight: 500; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease;
}
.extr-action-alert:hover { background: hsl(var(--destructive) / .9); color: hsl(var(--destructive-foreground)); }
.extr-action-alert:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--destructive) / .35); }
.extr-action-alert svg { height: 1rem; width: 1rem; }
@media (min-width: 1024px) {
  .extr-page-actions > .extr-action-alert { order: 1; height: 2.25rem; border-radius: var(--radius-btn); }
}

/* == Nachtrag Helpdesk == */
/* Ticket-Liste als Zeilenliste (Jan, 08.11.2026). Keine Aktionsspalte; die Kopfzeile trägt „alle auswählen“ und ab 1280 px die
   Spaltentitel. Ohne Auswahlrecht entfällt die Führungsspalte. Erledigt wie bei den Aufgaben. */
.hd-rowlist { --rowlist-cols: 10.5rem 9.5rem 6.5rem 9.5rem; }
.hd-rowlist .extr-rowlist-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "lead main" "lead meta"; }
.hd-rowlist--nolead .extr-rowlist-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "meta"; }
.hd-rowlist .extr-rowlist-lead { min-width: 1rem; margin-top: .2rem; }
.hd-rowlist-head {
  padding-top: .625rem; padding-bottom: .625rem; cursor: default;
  font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: hsl(var(--muted-foreground)); white-space: nowrap;
}
.hd-rowlist-head:hover { background: transparent; }
.hd-rowlist-head .extr-rowlist-meta { display: none; font-size: inherit; }
.hd-list-row.is-done { opacity: .68; }
.hd-list-row.is-done .extr-rowlist-title a { text-decoration: line-through; font-weight: 400; }
@media (min-width: 1280px) {
  .hd-rowlist .extr-rowlist-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead main meta"; }
  .hd-rowlist--nolead .extr-rowlist-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main meta"; }
  .hd-rowlist .extr-rowlist-lead { margin-top: 0; }
  .hd-rowlist-head .extr-rowlist-meta { display: grid; }
}

/* == Nachtrag Werbemittel == */
/* Vier Spalten ab 1280 px. Menge und „Hinzufügen“ passen dann nicht mehr nebeneinander und stehen untereinander. */
@media (min-width: 1280px) {
  #wm-item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #wm-item-grid .wm-buy { flex-wrap: wrap; }
  #wm-item-grid .wm-buy > :first-child, #wm-item-grid .wm-buy > button { flex: 1 0 100%; }
  #wm-item-grid .wm-buy > :first-child > div { flex: 1 1 0; }
}

/* == Nachtrag Social Media == */
#sm-toolbar .extr-toolbar-views { gap: .5rem; }
/* Zeile 1 Suche und beide Wechsler, Zeile 2 die Werkzeuge der aktiven Ansicht (Monatsnavigation, Filter). */
@media (min-width: 1280px) {
  #sm-toolbar .extr-toolbar-row { flex-wrap: wrap; }
  #sm-toolbar .extr-toolbar-filters { order: 3; flex: 1 1 100%; }
}
.extr-tab-strip.sm-darstellung.is-off { display: none; }
/* Spalten der Beitragsliste: Kanäle, Typ, Termin, Status */
.sm-postlist { --rowlist-cols: 5.5rem 4.5rem 8.75rem 12rem; }

/* == Nachtrag Raumbuchung == */
/* Raumkarten: vier Spalten bei breitem Fenster, mobil eine; die Hülle nimmt rund 300 px für die Seitenleiste weg */
.rb-room-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .rb-room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .rb-room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .rb-room-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Zwei Wechsler nebeneinander; passen sie nicht in eine Zeile, rutscht der Zeitraum darunter */
#rb-toolbar .extr-toolbar-views { flex-wrap: wrap; gap: .5rem; }
/* Die breiten Wechsler lassen den Filtern bis 1919 px keinen Platz in Zeile 1: Filter in eine eigene Zeile (R2) */
@media (min-width: 1280px) and (max-width: 1919.98px) {
  #rb-toolbar .extr-toolbar-row { flex-wrap: wrap; }
  #rb-toolbar .extr-toolbar-search { flex-basis: 20rem; }
  #rb-toolbar .extr-toolbar-row > .extr-toolbar-filters { order: 3; flex: 1 1 100%; }
}

/* Buchungszeile auf der schmalen Karte: Zeit und Aktionen oben, Anlass und Person darunter in voller Breite */
.rb-room-grid .extr-lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .5rem; row-gap: .125rem; align-items: center; }
.rb-room-grid .extr-lrow-t { display: contents; }
.rb-room-grid .extr-lrow-t > b { grid-column: 1; grid-row: 1; white-space: normal; }
.rb-room-grid .extr-lrow-t > small { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
.rb-room-grid .extr-lrow-end { grid-column: 2; grid-row: 1; }

/* Zeilenlisten: Spalten je Sicht */
.rb-rowlist--mine      { --rowlist-cols: 9.5rem; --rowlist-actions: 6.5rem; }
.rb-rowlist--all       { --rowlist-cols: 8rem 9.5rem minmax(0, 11rem) 3.5rem; --rowlist-actions: 6.5rem; }
.rb-rowlist--invites   { --rowlist-cols: 7rem; }
.rb-rowlist--organized { --rowlist-actions: 2rem; }
.rb-rowlist .extr-rowlist-meta > .rb-person-cell { min-width: 0; }
.rb-rowlist--invites .extr-rowlist-actions { gap: .375rem; }
.rb-inv-note { font-size: .875rem; margin-top: .5rem; white-space: pre-line; }
.rb-inv-comment { font-size: .75rem; color: hsl(var(--muted-foreground)); margin-top: .5rem; }
.rb-inv-people { margin-top: .625rem; display: flex; flex-direction: column; gap: .375rem; }
.rb-inv-person { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .875rem; }
/* Ohne Spalten trägt der Strich für „keine Einladungen“ nichts bei */
@media (max-width: 1279.98px) { .rb-no-invites { display: none; } }
@media (max-width: 639.98px) {
  .rb-rowlist--mine .extr-rowlist-actions, .rb-rowlist--all .extr-rowlist-actions, .rb-rowlist--invites .extr-rowlist-actions { flex-wrap: wrap; }
}

/* == Nachtrag Signage == */
/* Darstellung Liste | Board steht rechts neben dem Bereichs-Wechsler. */
.extr-toolbar-views:has(.sg-mode-strip) { flex-wrap: wrap; gap: .5rem; }
/* Spalten der drei Listen; die Aktionen behalten ihre Breite, auch wenn eine Zeile nur das System-Kennzeichen trägt. */
.sg-rowlist--mon   { --rowlist-cols: 11rem 18rem 7rem; }
.sg-rowlist--pl    { --rowlist-cols: 5.5rem 5.5rem 17rem; --rowlist-actions: 4.25rem; }
.sg-rowlist--cards { --rowlist-cols: 10rem 4rem 9rem; --rowlist-actions: 6.5rem; }
.sg-row .extr-rowlist-title { overflow-wrap: anywhere; }
/* Feste Vorschaufläche: Hoch- und Querformat fluchten über alle Zeilen. */
.sg-row-thumbbox { display: inline-flex; align-items: center; justify-content: center; width: 5.5rem; height: 3.125rem; }
.sg-row-thumb { display: block; height: 100%; border-radius: .5rem; overflow: hidden; }
.sg-row-cell { display: flex; align-items: center; gap: .4rem; min-width: 0; max-width: 100%; margin: 0; }
.sg-row-cell.is-warn { color: hsl(var(--tone-warn-fg)); }
@media (min-width: 640px) and (max-width: 767.98px) {
  /* Drei Knöpfe neben der Vorschau ließen dem Namen zu wenig Platz: Aktionen rutschen schon hier in die eigene Zeile. */
  .sg-rowlist--cards .extr-rowlist-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "lead main" "lead meta" "actions actions"; }
  .sg-rowlist--cards .extr-rowlist-actions { min-width: 0; }
}

/* == Nachtrag AA-Assistent == */
/* Vollhöhe wie im Team-Chat (.extr-main--chat): nur der Verlauf scrollt, die Eingabe steht unten. */
.assist-page { display: flex; flex-direction: column; flex: 1 1 auto; height: 100%; min-height: 0; overflow: hidden; }
.assist-views { flex: 0 0 auto; padding: var(--extr-gap) var(--extr-content-px) 0; }
.assist-body { flex: 1 1 auto; min-height: 0; padding: var(--extr-gap) var(--extr-content-px); }
.assist-grid { display: flex; flex-direction: column; gap: var(--extr-gap); height: 100%; min-height: 0; }
.assist-chat { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.assist-feed { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: 1rem; }
.assist-empty { margin: auto; }
.assist-examples { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.assist-example { height: auto; white-space: normal; text-align: center; }
.assist-msgs { display: flex; flex-direction: column; gap: .875rem; }
.assist-msgs:empty { display: none; }
.assist-text { white-space: pre-wrap; }
.assist-row { display: flex; align-items: flex-start; gap: .5rem; max-width: min(92%, 46rem); }
.assist-row .extr-chat-msg { max-width: 100%; min-width: 0; }
.assist-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 9999px; background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
.assist-avatar svg { width: 1rem; height: 1rem; }
.assist-refs { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .375rem; max-width: 100%; }
.assist-ref { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.assist-ref:hover { text-decoration: underline; }
.assist-error { align-self: flex-end; align-items: center; margin: 0; max-width: min(92%, 36rem); }
.assist-typing { display: inline-flex; align-items: center; gap: .25rem; min-height: 2.375rem; }
.assist-dot { width: .4375rem; height: .4375rem; border-radius: 9999px; background: hsl(var(--muted-foreground)); animation: assistDot 1.2s ease-in-out infinite; }
.assist-dot:nth-of-type(3) { animation-delay: .15s; }
.assist-dot:nth-of-type(4) { animation-delay: .3s; }
@keyframes assistDot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .assist-dot { animation: none; opacity: .6; } }
.assist-composer { flex: 0 0 auto; padding: .75rem 1rem; border-top: 1px solid hsl(var(--border)); }
.assist-input { display: block; flex: 1 1 auto; min-width: 0; min-height: 2.5rem; height: 2.5rem; max-height: min(160px, 24dvh); padding-top: .5rem; padding-bottom: .5rem; line-height: 1.5; resize: none; overflow-y: auto; }
.assist-send { min-height: 2.5rem; }
.assist-send[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.assist-note { margin: .375rem 0 0; font-size: .6875rem; line-height: 1.35; color: hsl(var(--muted-foreground)); }

/* Empfohlene Dokumente */
.assist-docs { display: flex; flex-direction: column; flex: 0 0 auto; min-height: 0; }
.assist-docs-head { display: none; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1.125rem .75rem; }
.assist-docs-toggle { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .75rem 1rem; background: transparent; border: 0; text-align: left; cursor: pointer; }
.assist-docs-toggle .extr-card-title { flex: 1 1 auto; font-size: .9375rem; }
.assist-docs-toggle:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: -2px; }
.assist-docs-chevron { width: 1.125rem; height: 1.125rem; color: hsl(var(--muted-foreground)); transition: transform .15s; }
.assist-docs.is-open .assist-docs-chevron { transform: rotate(180deg); }
.assist-docs-body { display: none; min-height: 0; max-height: 34dvh; overflow-y: auto; overscroll-behavior-y: contain; }
.assist-docs.is-open .assist-docs-body { display: block; }
.assist-docs-hint { margin: 0; padding: 0 1rem 1rem; font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.assist-docs-list { background: transparent; border: 0; border-radius: 0; }
.assist-docs-list .extr-rowlist-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead main actions"; text-decoration: none; }
.assist-docs-list .extr-rowlist-title { display: block; overflow-wrap: anywhere; }
.assist-docs-list .extr-rowlist-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assist-doc-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .625rem; background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
.assist-doc-ico svg { width: 1.125rem; height: 1.125rem; }
.assist-docs-list .extr-rowlist-actions svg { width: .9375rem; height: .9375rem; color: hsl(var(--muted-foreground)); }

/* Reicht die Höhe nicht, rollt die Fläche, statt die Eingabe abzuschneiden: Das Raster ist direktes Kind, damit der Abstand zur unteren Navigation mitzählt. */
@media (max-width: 1023.98px) {
  .assist-body { display: flex; flex-direction: column; overflow-y: auto; padding-bottom: var(--extr-bottomnav-h, 6.5rem); }
  .assist-grid { flex: 1 0 14rem; height: auto; }
  .assist-chat { min-height: 9rem; }
  .assist-docs-body { max-height: min(34dvh, max(5rem, calc(100dvh - 32rem))); }
}
@media (min-width: 1024px) {
  .assist-body { overflow-y: auto; }
  .assist-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; grid-template-rows: minmax(0, 1fr); min-height: 13rem; }
  .assist-chat, .assist-docs { height: 100%; }
  .assist-docs-head { display: flex; }
  .assist-docs-toggle { display: none; }
  .assist-docs-body { display: block; flex: 1 1 auto; max-height: none; }
  .assist-docs-hint { padding: 0 1.125rem 1.125rem; }
}
@media (max-height: 600px) { .assist-note { display: none; } }
/* Wenig Höhe (Querformat, Bildschirmtastatur): Kopf knapper, Dokumente als Knopf links neben der Eingabe, geöffnet als Blatt über dem Verlauf. */
@media (max-width: 1023.98px) and (max-height: 600px) {
  .assist-page > .extr-header-bar > .extr-content { padding-top: .5rem; padding-bottom: .5rem; }
  .assist-page > .extr-header-bar nav, .assist-page > .extr-header-bar :is(h1, p.text-xl) + p { display: none; }
  .assist-body { padding-top: .5rem; }
  .assist-grid { position: relative; flex-basis: 6rem; }
  .assist-chat { min-height: 6rem; }
  .assist-feed { padding: .5rem .75rem; }
  .assist-composer { padding: .5rem .75rem .5rem 4.75rem; }
  .assist-input { max-height: 18dvh; }
  .assist-docs { position: absolute; left: .75rem; bottom: .5rem; z-index: 5; background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .assist-docs-toggle { width: auto; height: 2.5rem; padding: 0 .5rem; gap: .25rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: .75rem; }
  .assist-docs-toggle .extr-card-title { flex: 0 0 auto; gap: 0; font-size: 0; }
  .assist-docs-chevron { display: none; }
  .assist-docs.is-open { position: fixed; left: var(--extr-content-px, .75rem); right: var(--extr-content-px, .75rem); bottom: calc(var(--extr-bottomnav-h, 6.5rem) + var(--assist-composer-h, 3.5rem) + .25rem); max-height: calc(100dvh - 4.5rem - var(--extr-bottomnav-h, 6.5rem) - var(--assist-composer-h, 3.5rem) - .25rem); background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: .75rem; box-shadow: var(--extr-shadow-md); overflow: hidden; }
  .assist-docs.is-open .assist-docs-toggle { flex: 0 0 auto; width: 100%; height: auto; padding: .5rem .75rem; background: transparent; border: 0; border-radius: 0; }
  .assist-docs.is-open .assist-docs-toggle .extr-card-title { flex: 1 1 auto; gap: .5rem; font-size: .875rem; }
  .assist-docs.is-open .assist-docs-chevron { display: inline-block; }
  .assist-docs.is-open .assist-docs-body { flex: 1 1 auto; max-height: none; }
}

/* == Nachtrag Team-Status == */
/* Viertelbreite: Bezeichnung links, Zahl rechts. So passen die drei Zahlen untereinander in eine übliche Kartenhöhe. */
.dash-teamstatus--rows { gap: .5rem; }
.dash-teamstatus--rows .extr-stat { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; }
.dash-teamstatus--rows .extr-stat-icon { flex: 0 0 auto; margin-bottom: 0; }
.dash-teamstatus--rows .extr-stat-body { flex: 1 1 auto; flex-direction: row; align-items: center; justify-content: space-between; gap: .5rem; }

/* == Listen Gruppe 4 == */
@media (max-width: 639.98px) { .gr-rowlist .extr-row-actions { flex-wrap: wrap; justify-content: flex-end; } }

/* Ereignisse */
/* Abwesenheiten und Besucher nebeneinander (Jan, 09.11.2026): in halber Breite stehen die Angaben unter dem Namen. */
.erg-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.erg-board-col { min-width: 0; }
@media (min-width: 1280px) { .erg-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.erg-board .extr-section-title { display: inline-flex; align-items: center; gap: .5rem; }
.erg-board-sub { font-size: .75rem; color: hsl(var(--muted-foreground)); text-align: right; }
.erg-board .extr-rowlist .extr-rowlist-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead main actions" "lead meta meta"; row-gap: .375rem; }
.erg-board .extr-rowlist.erg-rowlist-vis .extr-rowlist-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "lead main" "lead meta" "actions actions"; }
.erg-board .extr-rowlist .extr-rowlist-meta { display: flex; flex-wrap: wrap; column-gap: .875rem; row-gap: .25rem; }
.erg-board .extr-rowlist .extr-rowlist-lead, .erg-board .extr-rowlist .extr-rowlist-actions { align-self: start; }
.erg-board .extr-rowlist .extr-rowlist-cell--empty { display: none; }
.erg-board .erg-rowlist-vis .extr-rowlist-actions { min-width: 0; }
.erg-cell-stack { flex-direction: column; align-items: flex-start; gap: .1rem; }
.erg-cell-stack > * { display: block; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erg-cell-strong { color: hsl(var(--foreground)); }
.erg-cell-small { font-size: .75rem; }
.erg-cell-small svg { display: inline-block; height: .75rem; width: .75rem; margin-right: .25rem; vertical-align: -.1em; }
.erg-cell-stack > .erg-cell-wrap { white-space: normal; }
/* Gestapelt ist Platz: Ziel, Zweck und Notiz stehen vollständig. */
.erg-board .erg-cell-stack > * { white-space: normal; overflow: visible; }
.erg-cell-badges { flex-wrap: wrap; gap: .25rem; }

/* Inventar */
.inv-rowlist { --rowlist-cols: 6.5rem 7rem 8.5rem 5rem 6.5rem; --rowlist-actions: 5.75rem; }
.inv-rowlist .extr-rowlist-meta > span { white-space: nowrap; }
.inv-cell-strong { font-weight: 500; color: hsl(var(--foreground)); }

/* Newsletter-Verteiler */
.nv-rowlist { --rowlist-cols: 8.5rem 8.5rem; --rowlist-actions: 4.25rem; }
.nv-row-mail { overflow-wrap: anywhere; }
.nv-status-cell { flex-direction: column; align-items: flex-start; gap: .1rem; }
.nv-status-cell > small { font-size: .75rem; }

/* Schulungen, Test-Verwaltung */
.st-rowlist { --rowlist-cols: 5.5rem 7rem 6rem 8rem; --rowlist-actions: 7rem; }

/* Lernstrecken: ganze Zeile ist der Link */
.lp-rowlist { --rowlist-cols: 7.5rem 12rem 10rem; }
.lp-rowlist a.extr-rowlist-row { text-decoration: none; }
.lp-due.is-overdue { color: hsl(var(--destructive)); font-weight: 500; }
.lp-progress { display: flex; align-items: center; gap: .5rem; }
.lp-progress .extr-meter { flex: 1 1 auto; min-width: 3rem; margin-top: 0; }
@media (max-width: 1279.98px) { .lp-progress { flex: 1 1 100%; } }

/* Wissen, Seiten eines Bereichs */
.wb-rowlist { --rowlist-cols: 9rem; }
.wb-rowlist .extr-rowlist-lead { padding-left: calc(var(--wb-depth, 0) * 1.5rem); }
@media (max-width: 639.98px) { .wb-rowlist .extr-rowlist-lead { padding-left: calc(min(var(--wb-depth, 0), 3) * .375rem); } }
.wb-rowlist--manage { --rowlist-actions: 7rem; }

/* Links */
.lk-rowlist { --rowlist-cols: 21rem 14rem; --rowlist-actions: 4.25rem; }
@media (min-width: 1280px) and (max-width: 1439.98px) { .lk-rowlist { --rowlist-cols: 15rem 11rem; } }
.lk-row { position: relative; }
.lk-row .lk-ico { height: 2.25rem; width: 2.25rem; border-radius: .625rem; }
.lk-row .lk-ico svg { height: 1.0625rem; width: 1.0625rem; }
.lk-row-sub { display: flex; align-items: center; gap: .375rem; min-width: 0; }
.lk-row-sub svg { height: .75rem; width: .75rem; }
.lk-row-desc { display: block; margin: 0; }
.lk-row-meta { flex-direction: column; align-items: flex-start; gap: .25rem; }
.lk-row-meta svg { height: .75rem; width: .75rem; }
@media (max-width: 1279.98px) {
  .lk-row-desc:empty, .lk-row-meta:empty,
  .lk-row .extr-rowlist-meta:has(> .lk-row-desc:empty + .lk-row-meta:empty) { display: none; }
}

/* Geräte: vier beschriftete Werte je Art (Beschriftung wechselt mit der Geräteart, darum je Zelle statt Kopfzeile) */
.gr-rowlist { --rowlist-cols: 5.5rem 6.5rem 9.5rem 9.5rem; --rowlist-actions: 13.25rem; }
.gr-rowlist .extr-rowlist-lead { min-width: .625rem; }
.gr-dot { display: inline-flex; height: .625rem; width: .625rem; border-radius: 999px; flex: 0 0 auto; margin-top: .4rem; }
@media (min-width: 1280px) { .gr-dot { margin-top: 0; } }
.gr-kv { flex-direction: column; align-items: flex-start; gap: 0; }
.gr-kv-l { font-size: .6875rem; line-height: 1rem; color: hsl(var(--muted-foreground)); }
.gr-kv-v { display: block; max-width: 100%; color: hsl(var(--foreground)); }
@media (max-width: 1439.98px) { .gr-rowlist .gr-kv { min-width: 7rem; } }

/* == Listen Gruppe 1 == */
/* Recruiting */
.rec-rowlist .extr-rowlist-lead { align-items: center; gap: .75rem; }
.rec-rowlist .extr-filter-select { max-width: 100%; }
.rec-rowlist--bewerber { --rowlist-cols: 8.5rem 9rem 6rem 9.5rem 2.75rem 5.75rem; }
.rec-rowlist--bewerber .extr-rowlist-lead { min-width: 2rem; }
.rec-rowlist--check .extr-rowlist-lead { min-width: 3.75rem; }
.rec-rowlist--stellen { --rowlist-cols: 8rem 7.5rem 8.5rem 5rem 3.5rem; --rowlist-actions: 8.5rem; }
.rec-rowlist--profile { --rowlist-cols: 9rem 12rem; --rowlist-actions: 4.25rem; }
.rec-rowlist--profile .extr-rowlist-sub { -webkit-line-clamp: 2; }
.rec-rowlist--bedarf { --rowlist-cols: 8rem 3rem 6.5rem 8.5rem 9rem; --rowlist-actions: 2rem; }
.rec-rowlist--bedarf .rec-need-note { display: block; overflow: visible; white-space: pre-line; }
.rec-rowlist--bewerber .extr-rowlist-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-rowlist--bewerber .rec-cell-job { display: -webkit-inline-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Die Kopfzeile benennt die Spalten, Symbole wären dort doppelt. */
@media (min-width: 1440px) {
  .rec-rowlist--bewerber .extr-rowlist-row:not(.hd-rowlist-head) .extr-rowlist-meta > span > svg { display: none; }
}

/* Besucherausweis */
.ba-rowlist { --rowlist-cols: 7rem 8rem 9rem 8.5rem; --rowlist-actions: 9.5rem; }
.ba-rowlist--archiv { --rowlist-actions: 1rem; }

/* Werbemittel */
.wm-rowlist { --rowlist-cols: 6rem 6rem 8.5rem; --rowlist-actions: 7.5rem; }
.wm-rowlist--verwaltung { --rowlist-cols: 11rem 6rem 6rem 8.5rem; --rowlist-actions: 1rem; }

/* Schulungen: Spalten fluchten über beide Abschnitte, Text und Pfeil wie in den kompakten Terminlisten. */
.sch-rowlist { --rowlist-cols: 6.5rem 5.5rem; --rowlist-actions: 6rem; }
.sch-rowlist--done { --rowlist-cols: 5rem; --rowlist-actions: 6rem; }
.sch-rowlist--retake { --rowlist-actions: 11.5rem; }
.sch-rowlist .extr-rowlist-lead, .sch-rowlist .extr-rowlist-actions { align-self: center; }
.sch-rowlist .extr-rowlist-actions { gap: .5rem; font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.sch-rowlist .extr-rowlist-sub.is-err { color: hsl(var(--tone-bad-fg)); font-weight: 600; }
/* Handy: Der Knopf steht in eigener Zeile, ein Pfeil allein bräuchte dort keine. Die Zeile bleibt klickbar. */
@media (max-width: 639.98px) { .sch-rowlist--retake .extr-rowlist-actions:not(:has(.extr-btn)) { display: none; } }

/* Arbeitsanweisungen: Dokumente einer Kategorie */
.aa-doc-rowlist { --rowlist-cols: 5.5rem; --rowlist-actions: 5.75rem; }
.aa-doc-rowlist .extr-rowlist-actions { align-self: center; }
.aa-doc-title { display: flex; align-items: center; gap: .375rem; min-width: 0; }
.aa-doc-title > a { min-width: 0; overflow-wrap: anywhere; }

/* Kontaktlisten: --rowlist-cols kommt aus den gewählten Spalten (Inline-Stil am Container). */
.kl-rowlist { --rowlist-actions: 4.25rem; }
.kl-rowlist .kl-move { flex-direction: column; align-items: center; gap: .125rem; }
.kl-rowlist .extr-rowlist-sub.kl-note { display: block; overflow: visible; }
.kl-rowlist .extr-rowlist-meta > span > a { min-width: 0; }
@media (min-width: 1280px) and (max-width: 1599.98px) {
  .kl-rowlist--eng .extr-rowlist-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead main actions" "lead meta actions"; row-gap: .375rem; }
  .kl-rowlist--eng.extr-rowlist--noactions .extr-rowlist-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "lead main" "lead meta"; }
  .kl-rowlist--eng .extr-rowlist-lead, .kl-rowlist--eng .extr-rowlist-actions { align-self: start; }
  .kl-rowlist--eng .extr-rowlist-meta { display: flex; flex-wrap: wrap; }
  .kl-rowlist--eng .extr-rowlist-cell--empty { display: none; }
}

/* Chats */
.chat-rowlist { --rowlist-cols: 8rem 6rem; --rowlist-actions: 2.25rem; }
.chat-rowlist--direct { --rowlist-cols: 6rem; --rowlist-actions: 4.75rem; }
.chat-rowlist .extr-rowlist-lead, .chat-rowlist .extr-rowlist-actions { align-self: center; }
.chat-rowlist .extr-rowlist-actions { gap: .5rem; }

/* Signage: Hinweis in der Kopfzeile des Abschnitts */
#sg-cards-hint { margin-top: 0; }

/* == Listen Gruppe 3 == */
/* Hauptlisten als Zeilenliste (Jan, 08.11.2026): Kontakte, Newsletter, Filesharing, Lernstrecken, Wissen, Benachrichtigungen, Einreichungen.
   Hier stehen nur Spaltenbreiten und was einzelne Listen zusätzlich brauchen; Maße der Zeilen kommen aus .extr-rowlist. */
.rowlist-title-flex { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .5rem; min-width: 0; }
.rowlist-title-flex > a, .rowlist-title-flex > span:first-child { min-width: 0; }

/* Kontakte */
.kt-rowlist--firmen { --rowlist-cols: 9.25rem 7.5rem 7.25rem 9rem 6.5rem; }
.kt-rowlist--personen { --rowlist-cols: 11rem 8rem 8rem 11rem; }
.kt-rowlist--kat { --rowlist-cols: 7rem 6rem; }
.kt-rowlist--kat > .extr-card-header { padding: 1rem 1rem 0; margin-bottom: .875rem; }
.kt-firma { min-width: 0; }
.kt-firma > a { min-width: 0; color: hsl(var(--foreground)); }
.kt-firma-kat { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; font-size: .75rem; }
.kt-firma-kat svg { height: .75rem; width: .75rem; }
.rowlist-stack { min-width: 0; }
.rowlist-line { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
@media (min-width: 1280px) { .rowlist-stack { flex-direction: column; align-items: flex-start; gap: 0; } }

/* Newsletter: Art, Status, Erstellt, Versendet, Empfänger */
.nl-rowlist { --rowlist-cols: 7.25rem 6.5rem 6.5rem 7.75rem 4rem; --rowlist-actions: 11rem; }

/* Filesharing: Kategorie, Format, Größe, Hochgeladen, Gültig bis, Zugriffe */
.fs-rowlist { --rowlist-cols: 9.25rem 3.25rem 4.5rem 6rem 7.5rem 3.25rem; --rowlist-actions: 11rem; }

/* Lernstrecken: Verwaltung Schritte, Zugewiesen, Erledigt, Status; Teilnehmende Fortschritt, Frist, Status */
.lpk-rowlist--verwalten { --rowlist-cols: 6.5rem 7.5rem 6.5rem 7rem; }
.lpk-rowlist--teilnehmen { --rowlist-cols: 9.5rem 11rem 7rem; --rowlist-actions: 5.5rem; }

/* Wissen, Bereiche: Seiten, Verantwortlich, (Sichtbar für), Aktualisiert */
.wbs-rowlist { --rowlist-cols: 5.5rem 10rem 8rem; }
.wbs-rowlist--manage { --rowlist-cols: 5.5rem 10rem 10rem 8rem; }

/* Benachrichtigungen: Zeitpunkt, rechts der Ungelesen-Punkt. Der Text bleibt ungekürzt, er ist die Nachricht selbst. */
.notif-rowlist { --rowlist-cols: 8rem; --rowlist-actions: .5rem; }
.notif-rowlist .extr-rowlist-sub { display: block; overflow: visible; }
.notif-rowlist .notif-item[data-read="0"] .extr-rowlist-title { font-weight: 600; }
.notif-rowlist .extr-rowlist-actions { align-self: center; }

/* Formular-Einreichungen: Kurzfassung, Datum, rechts der Status. Keine Spalten. */
.form-rec-rowlist .extr-rowlist-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead main actions"; align-items: center; }
.form-rec-rowlist .extr-rowlist-lead, .form-rec-rowlist .extr-rowlist-actions { align-self: center; }
/* == Ende Listen Gruppe 3 == */

/* == Listen Gruppe 2 == */
.extr-rowlist-sub--full { display: block; overflow: visible; }
.extr-rowlist-sub--2 { -webkit-line-clamp: 2; }
/* Kurzer Hinweis im Abschnittskopf, in normaler Schrift. */
.extr-section-note { font-weight: 400; font-size: .75rem; letter-spacing: 0; text-transform: none; }
.hd-rowlist-head button { text-transform: inherit; }
.bw-head-lead { width: 2.375rem; }
.aa-files-head-lead { width: 2.25rem; }

/* Bewertungen */
.bw-rowlist > .extr-card-header { padding-left: 1rem; padding-right: 1rem; margin-bottom: .875rem; }
.bw-rowlist .bw-col-progress { display: block; }
.bw-rowlist--mine { --rowlist-cols: 5.5rem 9.5rem; }
.bw-rowlist--cycles { --rowlist-cols: 12rem 4.5rem 6.75rem; }
.bw-rowlist--cycles-dec { --rowlist-cols: 12rem 4.5rem 6.75rem 8rem; }
.bw-rowlist--forms { --rowlist-actions: 10.5rem; }
.bw-rowlist--zyklus { --rowlist-cols: 8rem 8.5rem 7.75rem 3.5rem 6.5rem; --rowlist-actions: 4.125rem; }
.bw-rowlist--zyklus-dec { --rowlist-cols: 8rem 7.5rem 7.75rem 3.5rem 6.5rem 6.25rem; --rowlist-actions: 4.125rem; }
.bw-rowlist--zyklus .extr-rowlist-meta, .bw-rowlist--zyklus-dec .extr-rowlist-meta { column-gap: .75rem; }
@media (min-width: 1280px) {
  .bw-rowlist--mine .extr-rowlist-actions { min-width: 6.25rem; }
}
@media (max-width: 1279.98px) { .bw-rowlist--mine .extr-rowlist-actions:empty { display: none; } }
/* Gestapelt gibt es keine Spalten, die Kopfzeile hätte nichts zu benennen. */
@media (max-width: 1439.98px) {
  .bw-rowlist--zyklus .hd-rowlist-head, .bw-rowlist--zyklus-dec .hd-rowlist-head { display: none; }
  .bw-rowlist--zyklus .hd-rowlist-head + .extr-rowlist-row, .bw-rowlist--zyklus-dec .hd-rowlist-head + .extr-rowlist-row { border-top: 0; }
}

/* Kundeninfo */
.kin-rowlist { --rowlist-cols: 6rem 7rem 6rem 8.75rem 4rem; --rowlist-actions: 10.5rem; }
.kin-rowlist .extr-rowlist-meta { column-gap: .75rem; }

/* KI-Aufgaben */
.kia-rowlist { --rowlist-cols: 13rem 9.5rem 6.5rem; --rowlist-actions: 1rem; }

/* Schulungen: Ergebnisse */
.res-rowlist { --rowlist-cols: 8rem 3rem 3.25rem; --rowlist-actions: 3.75rem; }
.res-rowlist .extr-rowlist-actions { gap: .375rem; }

/* Arbeitsanweisungen: Dateien */
.aa-files-rowlist { --rowlist-cols: 10rem 3.5rem 4.5rem 8.25rem 7.25rem; --rowlist-actions: 6.25rem; }
.aa-files-name { overflow-wrap: anywhere; }
.aa-files-rowlist .hd-rowlist-head .extr-rowlist-meta { display: flex; }
@media (min-width: 1440px) { .aa-files-rowlist .hd-rowlist-head .extr-rowlist-meta { display: grid; } }
@media (max-width: 1439.98px) {
  .aa-files-head-plain, .aa-files-head-lead { display: none; }
  .aa-files-rowlist .hd-rowlist-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "meta"; }
}

/* Zeitkonto */
.zk-rowlist--abs { --rowlist-cols: 15rem 9.5rem; --rowlist-actions: 4.125rem; }
.zk-rowlist--termine { --rowlist-cols: 11.5rem; --rowlist-actions: 2rem; }
.zk-section-head .extr-card-link { margin-left: auto; text-transform: none; letter-spacing: 0; }
.zk-sub-err { color: hsl(var(--tone-bad-fg)); font-weight: 500; }
.zk-rowlist--termine .extr-rowlist-lead { min-width: 2.5rem; }

/* Wachdienst: Archiv */
.wd-rowlist { --rowlist-cols: 4.5rem 3.25rem 3.25rem; --rowlist-actions: 1rem; }
.wd-archiv-count { margin-bottom: 1rem; }

/* == Nachtrag Dashboard-Kennzahlen == */
/* Willkommenskarte: ohne Kennzahlen bleibt „Zeitkonto“ rechts, ohne jede Zeile steht die Begrüßung mittig. */
.dash-welcome-row > .dash-welcome-actions:only-child { margin-left: auto; }
/* Vier selbst gewählte Kennzahlen: engere Abstände, damit längere Bezeichnungen bei 1440 px neben „Zeitkonto“ passen. Der Standard bleibt unverändert. */
.dash-welcome-row--eng, .dash-welcome-row--eng .dash-welcome-facts { column-gap: 1rem; }
@media (min-width: 1024px) { .dash-welcome--ohne-zeile { justify-content: center; } }
/* Zahlenkarten zwischen 1024 und 1279 px: Spalten je Anzahl, fünf Karten als drei plus zwei breitere (sonst Lücke). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .extr-stat-grid.dash-kpis { grid-template-columns: repeat(var(--dash-kpi-lg, 3), minmax(0, 1fr)); }
  .dash-kpis--fuenf > * { grid-column: span 2; }
  .dash-kpis--fuenf > :nth-last-child(-n+2) { grid-column: span 3; }
}
/* Einstellungen · Dashboard-Ansicht: zwei Auswahlen nebeneinander, mobil untereinander. */
.dashcfg-metrics { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 1024px) { .dashcfg-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
.dashcfg-metrics-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .375rem .75rem; margin-bottom: .5rem; }
.dashcfg-metric-hint { margin-bottom: .5rem; padding: .5rem .75rem; border-radius: .5rem; font-size: .75rem; line-height: 1.4; background: hsl(var(--tone-warn-bg)); color: hsl(var(--tone-warn-fg)); }
.dashcfg-metric { display: flex; align-items: center; gap: .375rem; min-height: 3rem; padding: .25rem .5rem .25rem .625rem; border: 1px solid hsl(var(--border)); border-radius: .5rem; }
.dashcfg-metric:not(.is-on) { color: hsl(var(--muted-foreground)); }
.dashcfg-metric:hover { background: hsl(var(--muted) / .4); }
.dashcfg-metric-pick { display: flex; flex: 1 1 auto; align-items: center; gap: .75rem; min-width: 0; min-height: 2.5rem; cursor: pointer; }
.dashcfg-metric-ico { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.dashcfg-metric-pos { flex: 0 0 auto; min-width: 1.25rem; font-size: .75rem; font-weight: 600; text-align: center; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.dashcfg-metric .extr-icon-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 479.98px) { .dashcfg-metric-ico { display: none; } }

/* == Nachtrag Einstellungen == */
/* Rahmen der neugeordneten Einstellungen (05-einstellungen-neuordnung.md, Kapitel 5, 7, 10). Anleitung: 05-bausteine-kurz.md. Maßstab Demo „Mein Profil“ (.setrow, .seg, .swt). */
.extr-set .hidden { display: none; }
.extr-set-toolbar .extr-toolbar-search { flex: 0 1 26.25rem; }
@media (max-width: 767.98px) { .extr-set-toolbar .extr-toolbar-search { flex: 1 1 100%; } .extr-set-toolbar .extr-sf { flex: 1 1 100%; width: 100%; } }

/* Gerüst: ab 1200 px Rubrikenleiste links, darunter Bereichsliste als Startansicht */
.extr-set-layout { display: block; }
.extr-set-nav { display: none; }
.extr-set-back { display: inline-flex; align-items: center; gap: .375rem; margin-bottom: .875rem; font-size: .875rem; font-weight: 600; color: hsl(var(--primary-text)); }
.extr-set-back svg, .extr-set-back i { width: 1rem; height: 1rem; }
.extr-set-arealist { display: none; }
.extr-set-arealist-list { margin-bottom: 1rem; }
.extr-set-arealist-row { color: inherit; }
.extr-set-arealist-end { display: inline-flex; align-items: center; gap: .5rem; align-self: center; color: hsl(var(--muted-foreground)); }
.extr-set-arealist-end svg, .extr-set-arealist-end i { width: 1rem; height: 1rem; }
.extr-set-arealist-row .extr-set-dot { margin-left: 0; }
.extr-set-arealist-list .extr-set-arealist-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead main end"; }
.extr-set-arealist-end { grid-area: end; }
@media (max-width: 1199.98px) {
  .extr-set.is-list .extr-set-arealist { display: block; }
  .extr-set.is-list .extr-set-areas { display: none; }
  .extr-set.is-searching .extr-set-arealist { display: none; }
}
@media (min-width: 1200px) {
  .extr-set-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .extr-set-nav {
    display: block; position: sticky; top: calc(var(--extr-sticky-top, 0px) + 1rem);
    max-height: calc(100vh - var(--extr-sticky-top, 0px) - 2rem); overflow-y: auto; overscroll-behavior: contain; padding-right: .25rem;
  }
  .extr-set-back { display: none; }
}
.extr-set-nav-group {
  margin: 1.125rem .75rem .375rem; font-size: .71875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: hsl(var(--muted-foreground));
}
.extr-set-nav-group:first-child { margin-top: .25rem; }
.extr-set-arealist > .extr-set-nav-group { margin-left: .25rem; }
.extr-set-nav-item {
  display: flex; align-items: center; gap: .625rem; min-height: 2.5rem; padding: .375rem .75rem; border-radius: .75rem;
  font-size: .875rem; font-weight: 500; color: hsl(var(--bodytext)); transition: background-color .15s ease, color .15s ease;
}
.extr-set-nav-item svg, .extr-set-nav-item i { width: 1.0625rem; height: 1.0625rem; flex: 0 0 auto; color: hsl(var(--muted-foreground)); }
.extr-set-nav-item:hover { background: hsl(var(--muted) / .6); color: hsl(var(--foreground)); }
.extr-set-nav-item.is-active { background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); font-weight: 600; }
.extr-set-nav-item.is-active svg, .extr-set-nav-item.is-active i { color: hsl(var(--primary-text)); }
.extr-set-nav-text { min-width: 0; flex: 1 1 auto; }
.extr-set-jumps { margin: .125rem 0 .5rem 1.5625rem; padding-left: .625rem; border-left: 1px solid hsl(var(--border)); }
.extr-set-jump { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem; border-radius: .5rem; font-size: .8125rem; line-height: 1.3; color: hsl(var(--muted-foreground)); }
.extr-set-jump:hover { background: hsl(var(--muted) / .6); color: hsl(var(--foreground)); }
.extr-set-jump.is-current { color: hsl(var(--primary-text)); font-weight: 600; }

/* Punkt bei Änderungen */
.extr-set-dot { display: none; flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 9999px; background: hsl(var(--tone-warn-mark)); margin-left: auto; }
.has-changes > .extr-set-dot, .has-changes .extr-set-sec-titles > .extr-set-dot, .extr-set-arealist-row.has-changes .extr-set-dot { display: inline-block; }
.extr-set-sec.has-error .extr-set-sec-titles > .extr-set-dot { display: inline-block; background: hsl(var(--tone-bad-mark)); }

/* Bereich und Abschnitt (D1): Bereich, Abschnitt als eine Karte, Zeile */
.extr-set-area { display: none; }
.extr-set-area.is-active { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 1024px) { .extr-set-area.is-active { gap: 1.25rem; } }
.extr-set-area > * { min-width: 0; }
.extr-set-area-head { margin-bottom: .125rem; }
.extr-set-area-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: hsl(var(--heading)); }
.extr-set-area-desc { margin-top: .125rem; font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.extr-set-sec { padding: 1.25rem 1.5rem; overflow: visible; scroll-margin-top: calc(var(--extr-sticky-top, 0px) + 1rem); }
@media (max-width: 1023.98px) { .extr-set-sec { padding: 1rem 1.125rem; } }
.extr-set-sec--danger { box-shadow: inset 0 0 0 1px hsl(var(--tone-bad-mark) / .45); }
.extr-set-sec--danger > .extr-set-sec-head .extr-card-title, .extr-set-sec--danger > .extr-set-sec-head .extr-card-title > svg { color: hsl(var(--tone-bad-fg)); }
.extr-set-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem .75rem; }
.extr-set-sec-titles { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .625rem; flex: 1 1 auto; min-width: 0; }
.extr-set-sec-titles .extr-card-title { flex: 0 1 auto; }
.extr-set-sec-titles > .extr-set-dot { margin-left: 0; }
.extr-set-sec-desc, .extr-set-sec-status { flex: 1 1 100%; font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.extr-set-sec-tools { display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
@media (max-width: 639.98px) {
  /* Der Kopf ist schmal: Titel und Knöpfe teilen sich die erste Zeile, Beschreibung und Status nutzen darunter die volle Breite. */
  .extr-set-sec-head { flex-wrap: wrap; }
  .extr-set-sec-titles { display: contents; }
  .extr-set-sec-titles .extr-card-title { flex: 1 1 0; min-width: 0; }
  .extr-set-sec-tools { order: 1; margin-left: auto; }
  .extr-set-sec-desc, .extr-set-sec-status { order: 2; }
}
.extr-set-sec-chevron { display: none; transition: transform .15s ease; }
.extr-set-sec-body { margin-top: .875rem; }
.extr-set-sec-body > :first-child { margin-top: 0; }
@media (max-width: 1199.98px) {
  .extr-set-sec-head { cursor: pointer; }
  .extr-set-sec-chevron { display: inline-flex; }
  .extr-set-sec.is-open .extr-set-sec-chevron { transform: rotate(180deg); }
  .extr-set-sec:not(.is-open) .extr-set-sec-body { display: none; }
}
.extr-set-marks { display: inline-flex; flex-wrap: wrap; gap: .375rem; }
.extr-set-mark { display: inline-flex; align-items: center; gap: .25rem; height: 1.25rem; padding: 0 .5rem; border-radius: 9999px; font-size: .6875rem; font-weight: 600; background: hsl(var(--muted-bg)); color: hsl(var(--muted-foreground)); }
.extr-set-mark svg, .extr-set-mark i { width: .6875rem; height: .6875rem; }
.extr-set-mark--instant { background: hsl(var(--tone-info-bg)); color: hsl(var(--tone-info-fg)); }
.extr-set-mark--off { background: hsl(var(--tone-warn-bg)); color: hsl(var(--tone-warn-fg)); }
.extr-set-sub { margin: 1.125rem 0 .25rem; font-size: .8125rem; font-weight: 700; color: hsl(var(--heading)); }
.extr-set-sub.is-first { margin-top: 0; }
.extr-set-foot, .extr-set-danger { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .875rem; padding-top: .875rem; border-top: 1px solid hsl(var(--border)); }
.extr-set-link { color: hsl(var(--primary-text)); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* Einstellungszeile (D3, Demo .setrow) */
.extr-set-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; padding: .8125rem 0; border-bottom: 1px solid hsl(var(--border)); }
.extr-set-sec-body > .extr-set-row:first-child, .extr-set-more-body > .extr-set-row:first-child { padding-top: 0; }
.extr-set-sec-body > .extr-set-row:not(:has(~ :not(.hidden))), .extr-set-more-body > .extr-set-row:not(:has(~ :not(.hidden))) { padding-bottom: 0; border-bottom: 0; }
.extr-field-hint--warn { color: hsl(var(--tone-warn-fg)); }
.extr-set-row--stack { display: block; }
.extr-set-row--stack > .extr-label, .extr-set-row--stack > .extr-set-row-t { margin-bottom: .375rem; }
.extr-set-row--indent { margin-left: 1.5rem; padding-left: 1rem; border-left: 2px solid hsl(var(--border)); }
.extr-set-row.is-disabled, .extr-set-color.is-disabled { opacity: .55; }
.extr-set-row-t { display: flex; align-items: center; gap: .75rem; flex: 1 1 auto; min-width: 0; }
.extr-set-row-text { flex: 1 1 auto; min-width: 0; }
.extr-set-row-title { margin-bottom: 0; font-size: .875rem; }
.extr-set-row-text .extr-field-hint { margin-top: .125rem; }
.extr-set-row-ico { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; border-radius: .625rem; background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
.extr-set-row-ico svg, .extr-set-row-ico i { width: 1.125rem; height: 1.125rem; }
.extr-set-row-v { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; flex: 0 1 auto; min-width: 0; }
.extr-set-row--stack > .extr-set-row-v { justify-content: flex-start; }
.extr-set-row--stack .extr-field-hint { margin-top: .25rem; }
@media (max-width: 639.98px) {
  .extr-set-row { flex-wrap: wrap; }
  .extr-set-row-v { flex: 1 1 100%; justify-content: flex-start; }
  .extr-set-row:has(> .extr-set-row-v > .extr-set-toggle:only-child) { flex-wrap: nowrap; }
  .extr-set-row:has(> .extr-set-row-v > .extr-set-toggle:only-child) > .extr-set-row-v { flex: 0 0 auto; }
}

/* Feldbreiten nach Datentyp (D13) */
.extr-set-w-num { width: 7rem; }
.extr-set-w-time, .extr-set-w-hex { width: 8rem; }
.extr-set-w-date { width: 10rem; }
.extr-set-w-sel { width: 16rem; }
.extr-set-w-md { width: 24rem; }
.extr-set-w-lg { width: 40rem; }
.extr-set-w-full { width: 100%; }
.extr-set-w-sel, .extr-set-w-md, .extr-set-w-lg { max-width: 100%; }
@media (max-width: 639.98px) { .extr-set-w-date, .extr-set-w-sel, .extr-set-w-md, .extr-set-w-lg { width: 100%; } }
.extr-set-unit { display: inline-flex; align-items: center; gap: .5rem; }
.extr-set-unit-t { font-size: .8125rem; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.extr-set-count { display: block; margin-top: .25rem; font-size: .75rem; text-align: right; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.extr-set-pair { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.extr-set-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .875rem; }

/* Formular-Segment (D6, Demo .seg) */
.extr-set-seg { display: inline-flex; flex-wrap: wrap; gap: .125rem; padding: .1875rem; border-radius: .6875rem; background: hsl(var(--muted-bg)); max-width: 100%; }
.extr-set-seg-opt { display: inline-flex; cursor: pointer; }
.extr-set-seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.extr-set-seg-opt span { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 2rem; padding: .3125rem .75rem; border-radius: .5rem; font-size: .8125rem; font-weight: 600; color: hsl(var(--muted-foreground)); transition: background-color .15s ease, color .15s ease; }
.extr-set-seg-opt input:checked + span { background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: var(--extr-shadow-sm); }
.extr-set-seg-opt input:focus-visible + span { box-shadow: 0 0 0 3px hsl(var(--ring)); }
.extr-set-seg-opt input:disabled + span { opacity: .5; cursor: not-allowed; }

/* Radio-Karten (D7) */
.extr-set-opts { display: grid; grid-template-columns: repeat(var(--set-opt-cols, 2), minmax(0, 1fr)); gap: .625rem; }
@media (max-width: 639.98px) { .extr-set-opts { grid-template-columns: minmax(0, 1fr); } }
.extr-set-opt { display: flex; align-items: flex-start; gap: .625rem; padding: .75rem .875rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; cursor: pointer; }
.extr-set-opt input { flex: 0 0 auto; margin-top: .1875rem; accent-color: hsl(var(--primary-strong)); }
.extr-set-opt:has(input:checked) { border-color: hsl(var(--primary)); background: hsl(var(--primary-soft)); }
.extr-set-opt.is-danger:has(input:checked) { border-color: hsl(var(--tone-bad-mark)); background: hsl(var(--tone-bad-bg)); }
.extr-set-opt-t { display: block; min-width: 0; }
.extr-set-opt-t b { display: block; font-size: .875rem; font-weight: 600; color: hsl(var(--foreground)); }
.extr-set-opt-t small { display: block; margin-top: .125rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.extr-set-opt-body { display: none; margin-top: .5rem; padding: 0 .875rem; }
.extr-set-opt-wrap:has(input:checked) > .extr-set-opt-body { display: block; }

/* Farbzeile (D14) */
.extr-set-color { padding: .625rem 0; }
.extr-set-color-row { display: flex; align-items: center; gap: .5rem; }
.extr-set-color-pick { flex: 0 0 auto; width: 2.375rem; height: 2.375rem; padding: .1875rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-field); background: hsl(var(--card)); cursor: pointer; }
.extr-set-colors { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.5rem; }
@media (min-width: 1024px) { .extr-set-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Geheimnisfeld, Kopierzeile, IP-Liste, Häkchen (D15, D16) */
.extr-set-secret-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.extr-set-secret { position: relative; max-width: 100%; }
.extr-set-secret .extr-input { width: 100%; padding-right: 2.5rem; }
.extr-set-secret-eye { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); }
.extr-set-copy { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.375rem; padding: .25rem .375rem .25rem .75rem; border-radius: var(--radius-field); background: hsl(var(--muted-bg)); }
.extr-set-copy-v { min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; overflow-wrap: anywhere; }
.extr-set-copy-btns { display: inline-flex; flex: 0 0 auto; }
@media (max-width: 639.98px) { .extr-set-copy { flex-direction: column; align-items: stretch; padding: .5rem .75rem; } .extr-set-copy-btns { justify-content: flex-end; } }
.extr-set-iplist-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.extr-set-ip-err { color: hsl(var(--tone-bad-fg)); }
.extr-set-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; cursor: pointer; }

/* Statuszeile (D20): reine Anzeige ohne Rahmen */
.extr-set-status { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .375rem 0; font-size: .875rem; }
.extr-set-status-l { color: hsl(var(--muted-foreground)); }
.extr-set-status-v { display: inline-flex; align-items: center; gap: .5rem; color: hsl(var(--foreground)); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.extr-set-status-a { margin-left: auto; }
.extr-set-status .extr-field-hint { flex: 1 1 100%; margin-top: 0; }

/* Geordnete Auswahl (D10) */
.extr-set-ordered { padding: .25rem 0; }
.extr-set-ordered-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.extr-set-ordered-count { flex: 0 0 auto; }
.extr-set-ordered-list { display: flex; flex-direction: column; gap: .25rem; }
.extr-set-ordered-row { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .25rem .5rem .25rem .625rem; border: 1px solid hsl(var(--border)); border-radius: .625rem; background: hsl(var(--card)); }
.extr-set-ordered-row:not(.is-on):not(.is-fixed) { color: hsl(var(--muted-foreground)); }
.extr-set-ordered-row.is-fixed { background: hsl(var(--muted-bg)); }
.extr-set-ordered-row.is-dragging { opacity: .45; }
.extr-set-ordered-grip { display: inline-flex; color: hsl(var(--muted-foreground)); cursor: grab; }
.extr-set-ordered-grip svg, .extr-set-ordered-grip i, .extr-set-ordered-ico { width: 1rem; height: 1rem; flex: 0 0 auto; }
.extr-set-ordered-label { flex: 1 1 auto; min-width: 0; font-size: .875rem; }
.extr-set-ordered-label small { display: block; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.extr-set-ordered-pos { flex: 0 0 auto; min-width: 1.25rem; font-size: .75rem; font-weight: 600; text-align: center; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.extr-set-ordered-row .extr-icon-btn:disabled { opacity: .35; cursor: default; }
.extr-set-ordered-add { margin-top: .5rem; }
.extr-set-ordered-limit { margin-top: .375rem; }
.extr-ms-opt.extr-set-taken { display: none; }

/* Aufklapper „Mehr dazu“ und „Erweitert“ (D17) */
.extr-set-more { margin-top: .75rem; }
.extr-set-more-btn { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem 0; font-size: .8125rem; font-weight: 600; color: hsl(var(--primary-text)); cursor: pointer; }
.extr-set-more-btn svg, .extr-set-more-btn i { width: .9375rem; height: .9375rem; transition: transform .15s ease; }
.extr-set-more.is-open > .extr-set-more-btn svg { transform: rotate(90deg); }
.extr-set-more-body { margin-top: .5rem; font-size: .8125rem; color: hsl(var(--bodytext)); }

/* Gefahr-Knopf: rote Outline, gleiche Größe (D22) */
.extr-btn.extr-set-btn-danger { color: hsl(var(--tone-bad-fg)); border-color: hsl(var(--tone-bad-mark) / .6); }
.extr-btn.extr-set-btn-danger:hover { background: hsl(var(--tone-bad-bg)); color: hsl(var(--tone-bad-fg)); border-color: hsl(var(--tone-bad-mark)); }

/* Zeilenliste im Abschnitt: kein Rahmen im Rahmen (D1) */
.extr-set-sec .extr-rowlist { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.extr-set-sec .extr-rowlist-row { padding-left: 0; padding-right: 0; }
.extr-set-sec .extr-rowlist-row:first-child { padding-top: 0; }

/* Lange Listen (D11): gekürzt mit „Alle anzeigen“ */
.extr-set .extr-rowlist-row.extr-set-cut-row { display: none; }
.extr-set-cutmore { margin-top: .5rem; }

/* Kleine Kennzahlenreihe, Vorschau, Filterfeld über Listen */
.extr-set-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .75rem; margin-bottom: .875rem; }
.extr-set-stat { display: block; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.extr-set-stat b { display: block; font-size: 1.125rem; font-weight: 700; color: hsl(var(--heading)); font-variant-numeric: tabular-nums; }
.extr-set-preview { padding: .875rem 1rem; border-radius: .75rem; background: hsl(var(--muted-bg)); font-size: .8125rem; }
.extr-set-filter { max-width: 24rem; margin-bottom: .625rem; }

/* Verbindungsliste (D12) */
.extr-set-connlist { --rowlist-cols: 8rem minmax(0, 11rem); --rowlist-actions: 6.5rem; }
.extr-set-conn-ico { display: flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; border-radius: .625rem; background: hsl(var(--primary-soft)); color: hsl(var(--primary-text)); }
.extr-set-conn-ico svg, .extr-set-conn-ico i { width: 1.125rem; height: 1.125rem; }
.extr-set-conn-meta { color: hsl(var(--muted-foreground)); font-size: .8125rem; }

/* Trefferliste der Suche */
.extr-set-results { margin-bottom: 1rem; }
.extr-set.is-searching .extr-set-areas, .extr-set.is-searching .extr-set-savebar { display: none; }
.extr-set-hit { width: 100%; text-align: left; cursor: pointer; }
.extr-set-hit .extr-rowlist-title b { font-weight: 600; color: hsl(var(--heading)); }
.extr-set-hit-sep { color: hsl(var(--muted-foreground)); }

/* Sprungziel kurz hervorheben */
.extr-set-flash { animation: extr-set-flash 1.6s ease-out; }
@keyframes extr-set-flash { 0%, 40% { box-shadow: 0 0 0 3px hsl(var(--ring)); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .extr-set-flash { animation: none; } }

/* Einzelauswahl im Formular: gewählter Wert statt Bezeichnung */
.extr-set-choice { max-width: 100%; }
.extr-set-choice .extr-ms-btn { width: 100%; justify-content: space-between; }
.extr-set-choice:not(.extr-set-multi) .extr-ms-label:has(+ .extr-ms-current:not(.hidden)) { display: none; }
.extr-set-choice .extr-ms-current { flex: 1 1 auto; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }

/* Speicherleiste: Desktop klebend unten in der Inhaltsspalte, mobil über der Glas-Navigation */
.extr-set-savebar { position: sticky; bottom: 1rem; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-top: 1rem; padding: .75rem 1rem; border-radius: var(--radius-card); background: hsl(var(--card)); border: 1px solid hsl(var(--primary) / .35); box-shadow: var(--extr-shadow-lg); }
.extr-set-savebar-text { display: flex; flex-direction: column; gap: .125rem; flex: 1 1 14rem; min-width: 0; font-size: .875rem; font-weight: 600; }
.extr-set-savebar-err { font-size: .8125rem; font-weight: 500; color: hsl(var(--tone-bad-fg)); }
.extr-set-savebar-btns { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
@media (max-width: 1199.98px) {
  .extr-set-savebar { position: fixed; left: .75rem; right: .75rem; bottom: calc(var(--extr-bottomnav-h, 6.5rem) + .25rem); margin: 0; z-index: 45; }
  .extr-set.has-savebar .extr-set-main { padding-bottom: 7rem; }
}

/* Dialoge der Einstellungen: mobil als Blatt */
.extr-set-dlg-tools { display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
@media (max-width: 1199.98px) {
  .extr-set-dlg > .extr-dlg-panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; max-height: calc(100% - 3rem); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; transform: none; }
}
@media print { .extr-set-nav, .extr-set-savebar, .extr-set-toolbar { display: none; } }

/* Mindestgrößen am Handy (Audit 09.11.2026): Reiter, Rücksprünge, Löschen im Suchfeld, Gefällt-mir */
@media (max-width: 767.98px) {
  .extr-tab-strip .extr-tab-strip-btn { min-height: 2.5rem; }
  .extr-breadcrumb a, .extr-set-back { display: inline-flex; align-items: center; min-height: 2.5rem; }
  .extr-sf-clear { min-width: 2.25rem; min-height: 2.25rem; }
  .news-like { min-width: 2.5rem; min-height: 2.5rem; }
  .emp-open, .gp-legend-item, .extr-set-more-btn { min-height: 2.25rem; }
  .extr-card-link, .extr-set-link { display: inline-flex; align-items: center; min-height: 2.25rem; }
}
.extr-dlg:focus, .extr-modal-backdrop:focus { outline: none; }

/* Einstellungen: Menü-Editor (nav_layout) und Systemaufgaben (09.11.2026) */
.navcfg { display: grid; gap: .75rem; }
.navcfg-group { border: 1px solid hsl(var(--border)); border-radius: .875rem; padding: .625rem .75rem; background: hsl(var(--card)); }
.navcfg-head { display: flex; align-items: center; gap: .375rem; }
.navcfg-head .navcfg-heading { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.navcfg-items { margin-top: .375rem; }
.navcfg-item { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; min-width: 0; }
.navcfg-item .extr-lrow-ico { width: 1.875rem; height: 1.875rem; flex: 0 0 auto; }
.navcfg-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
.navcfg-leer { margin: .375rem 0 0; }
.navcfg-foot { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.sys-jobs .extr-rowlist-sub code { font-size: .75rem; }

/* ---- Smartphone-App installieren (partials/app-installieren.php, 10.11.2026) -------------------
   Menüpunkt nur in der Desktop-Kopfleiste; in der installierten App (display-mode: standalone) aus. */
@media (display-mode: standalone) { .appinst-menue { display: none !important; } }
.appinst-raster { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .appinst-raster { grid-template-columns: minmax(0, 1fr) 19rem; } }
.appinst-anleitung, .appinst-code { padding: 1.5rem; }
.appinst-anleitung h2, .appinst-code h2 { font-size: 1rem; font-weight: 600; color: hsl(var(--heading)); margin: 0 0 .75rem; }
.appinst-schritte { list-style: decimal; padding-left: 1.25rem; margin: 0; display: grid; gap: .375rem; font-size: .875rem; line-height: 1.5; color: hsl(var(--bodytext)); }
.appinst-geraete { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); margin-top: 1.25rem; }
.appinst-geraet { border: 1px solid hsl(var(--border)); border-radius: .75rem; padding: 1rem; }
.appinst-geraet h3 { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: hsl(var(--heading)); margin: 0 0 .5rem; }
.appinst-geraet h3 svg { width: 1rem; height: 1rem; }
.appinst-geraet ol { list-style: decimal; padding-left: 1.125rem; margin: 0; display: grid; gap: .25rem; font-size: .8125rem; line-height: 1.45; color: hsl(var(--bodytext)); }
.appinst-hinweis { display: flex; gap: .75rem; margin-top: 1.25rem; padding: 1rem; border-radius: .75rem; background: hsl(var(--tone-warn-bg)); border: 1px solid hsl(var(--tone-warn-border)); }
.appinst-hinweis > svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; color: hsl(var(--tone-warn-fg)); margin-top: .125rem; }
.appinst-hinweis b { display: block; font-size: .875rem; color: hsl(var(--heading)); }
.appinst-hinweis p { margin: .25rem 0 .75rem; font-size: .8125rem; line-height: 1.45; color: hsl(var(--bodytext)); }
.appinst-code { text-align: center; }
.appinst-qr { display: inline-flex; padding: .875rem; border-radius: .75rem; background: white; border: 1px solid hsl(var(--border)); }
.appinst-qr img, .appinst-qr canvas { display: block; }
.appinst-klein { margin: .75rem 0 0; font-size: .75rem; line-height: 1.45; color: hsl(var(--muted-foreground)); }
.appinst-dlg-h { font-size: .8125rem; font-weight: 600; color: hsl(var(--heading)); margin: 0 0 .375rem; }
.appinst-leer { padding: 2.5rem 1.5rem; text-align: center; }
.appinst-leer > svg { width: 2rem; height: 2rem; color: hsl(var(--muted-foreground)); margin: 0 auto .75rem; }
.appinst-leer h2 { font-size: 1rem; font-weight: 600; color: hsl(var(--heading)); margin: 0 0 .25rem; }
.appinst-leer p { font-size: .875rem; color: hsl(var(--muted-foreground)); margin: 0; }
/* Am Handy und in der installierten App ist der Code nutzlos: Hinweis statt Raster. */
.appinst-nur-desktop { display: none; padding: 1rem 1.25rem; font-size: .875rem; color: hsl(var(--bodytext)); }
@media (max-width: 1023px) { .appinst-nur-desktop { display: block; } .appinst-raster { display: none; } }
@media (display-mode: standalone) { .appinst-nur-desktop { display: block; } .appinst-raster { display: none; } }

/* ── Feedback IT 11.11.2026 (#7): lange Inhalte in Wissen, News und Arbeitsanweisungen ──────────────
   Lange Zeichenketten ohne Leerzeichen (URLs, UNC-Pfade, Registry-Schlüssel) brechen um, statt die
   Seite zu sprengen. Codeblöcke behalten ihre Zeilen und scrollen im Block, Tabellen in einem eigenen
   Rahmen (extrRichEnhance in app.js legt ihn an). Gilt auch im Editor. */
:is(.nd-article-body, .wd-prose, .extr-rich, .note-editable) { overflow-wrap: anywhere; word-break: normal; min-width: 0; max-width: 100%; }
:is(.nd-article-body, .wd-prose, .extr-rich) :is(p, li, td, th, a, span, div, h1, h2, h3, h4, blockquote) { overflow-wrap: anywhere; }
:is(.nd-article-body, .wd-prose, .extr-rich, .note-editable) img,
:is(.nd-article-body, .wd-prose, .extr-rich, .note-editable) video,
:is(.nd-article-body, .wd-prose, .extr-rich, .note-editable) iframe { max-width: 100%; height: auto; }
:is(.nd-article-body, .wd-prose, .extr-rich, .note-editable) pre {
  max-width: 100%; overflow-x: auto; white-space: pre; overflow-wrap: normal; word-break: normal;
  margin: 0 0 1.25rem; padding: .875rem 1rem; border-radius: .625rem; border: 1px solid hsl(var(--border));
  background: hsl(var(--muted-bg)); color: hsl(var(--foreground));
  font: .8125rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 4; -webkit-overflow-scrolling: touch;
}
:is(.nd-article-body, .wd-prose, .extr-rich, .note-editable) pre code { white-space: inherit; background: none; padding: 0; border: 0; font: inherit; }
:is(.nd-article-body, .wd-prose, .extr-rich) :not(pre) > code {
  padding: .05rem .3rem; border-radius: .3rem; background: hsl(var(--muted-bg)); font: .85em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere;
}
:is(.nd-article-body, .wd-prose, .extr-rich) table { max-width: 100%; }
:is(.nd-article-body, .wd-prose, .extr-rich) .extr-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.25rem; }
:is(.nd-article-body, .wd-prose, .extr-rich) .extr-table-scroll > table { margin: 0; }
:is(.nd-article-body, .wd-prose, .extr-rich) .extr-table-scroll :is(td, th) { overflow-wrap: normal; min-width: 6rem; }
.extr-code-wrap { position: relative; max-width: 100%; }
.extr-code-wrap > pre { padding-right: 3rem; }
.extr-code-copy {
  position: absolute; top: .4rem; right: .4rem; display: inline-flex; align-items: center; gap: .3rem;
  height: 1.875rem; padding: 0 .55rem; border-radius: .5rem; border: 1px solid hsl(var(--border));
  background: hsl(var(--surface)); color: hsl(var(--muted-foreground)); font-size: .75rem; font-weight: 500; cursor: pointer;
  opacity: .85; transition: opacity .15s, color .15s;
}
.extr-code-copy:hover, .extr-code-copy:focus-visible { opacity: 1; color: hsl(var(--foreground)); }
.extr-code-copy svg { width: .875rem; height: .875rem; }
.extr-code-copy.is-done { color: hsl(var(--success, 142 71% 35%)); }
@media (hover: hover) { .extr-code-wrap:not(:hover):not(:focus-within) .extr-code-copy:not(.is-done) { opacity: .55; } }
@media print { .extr-code-copy { display: none; } :is(.nd-article-body, .wd-prose, .extr-rich) pre { white-space: pre-wrap; overflow: visible; } }

/* #3/#6 (Feedback IT 11.11.2026): Kategoriebaum in der Kategorienverwaltung — Ebenen, Griff zum Sortieren (VBM: nur #6, eine Unterebene) */
.hd-cat-level-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 .35rem; }
.hd-cat-kids .hd-cat-kids { border-top: 1px solid hsl(var(--border) / .6); }
.hd-cat-tree .hd-cat-node + .hd-cat-node { border-top: 1px solid hsl(var(--border)); }
.hd-cat-row--d1 { padding-left: 1.25rem; }
.hd-cat-row--d2 { padding-left: 2.75rem; }
.hd-cat-grip { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 2rem; flex-shrink: 0; margin-left: -.35rem;
  border: 0; background: none; color: hsl(var(--muted-foreground)); cursor: grab; border-radius: .375rem; opacity: .55; touch-action: none; }
.hd-cat-grip:hover, .hd-cat-grip:focus-visible { opacity: 1; background: hsl(var(--muted) / .6); }
.hd-cat-grip:active { cursor: grabbing; }
.hd-cat-node.is-dragging > .hd-cat-row { opacity: .45; }
@media (max-width: 640px) { .hd-cat-row--d1 { padding-left: .75rem; } .hd-cat-row--d2 { padding-left: 1.5rem; } }

/* #2 (Feedback IT 11.11.2026): Icon-Suche über alle Lucide-Icons (extrIconPickerInit in app.js) */
.extr-icon-search { margin-bottom: .5rem; }
.extr-icon-note { margin-top: .35rem; }
.extr-icon-results { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; max-height: 13.5rem; overflow-y: auto; padding: .125rem; }
.extr-icon-results.hidden { display: none; }