@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400..700&display=swap");

/* ============================================================
   FSBS INTERN — Design-System
   ------------------------------------------------------------
   Eine Ebene für die ganze App: Tokens, Layout-Shell und alle
   Komponenten (Karten, Kennzahlen, Tabellen, Buttons, Pills,
   Formulare, Dialoge). Die Seiten definieren nur noch das, was
   wirklich nur bei ihnen vorkommt.

   Aufbau
     1  Tokens (Light/Dark)
     2  Basis & Typografie
     3  Shell: Kopfzeile, Navigation, Seitenkopf
     4  Layout: Sektionen, Raster
     5  Komponenten
     6  Alt-Klassen der Seiten (Aliase auf die Komponenten)
   ============================================================ */

/* ============================================================
   Design Tokens — Light (Default)
   ============================================================ */
:root {
  color-scheme: light;

  /* Radien — ein Satz für die ganze App */
  --radius-sm: 10px;           /* kleine Steuerelemente, Icon-Buttons */
  --radius-control: 12px;      /* Buttons, Eingabefelder */
  --radius-md: 12px;
  --radius-lg: 16px;           /* Kennzahlen-Kacheln, Listenzeilen */
  --radius-card: 20px;         /* Karten & Panels */
  --radius-modal: 22px;        /* Dialoge */
  --radius: var(--radius-card);
  --radius-xl: var(--radius-modal);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Flächen & Text */
  --background: oklch(0.968 0.001 260);
  --foreground: oklch(0.15 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.15 0 0);
  --primary: oklch(0.55 0.19 258);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.945 0.001 260);
  --secondary-foreground: oklch(0.15 0 0);
  --muted-surface: oklch(0.945 0.001 260);
  --muted-foreground: oklch(0.45 0 0);
  --faint-foreground: oklch(0.62 0 0);
  --accent-surface: oklch(0.925 0.001 260);
  --destructive: oklch(0.58 0.21 25);
  --destructive-foreground: oklch(0.99 0 0);
  --border-color: oklch(0 0 0 / 9%);
  --border-strong: oklch(0 0 0 / 16%);
  --input-border: oklch(0 0 0 / 16%);
  --ring: oklch(0.55 0.19 258);

  /* Halbtransparente Schichten auf dem Karten-Hintergrund */
  --surface-1: oklch(0 0 0 / 3%);
  --surface-2: oklch(0 0 0 / 5%);
  --surface-3: oklch(0 0 0 / 8%);

  /* Semantik */
  --success: oklch(0.52 0.15 150);
  --success-surface: oklch(0.52 0.15 150 / 12%);
  --warning: oklch(0.55 0.15 75);
  --warning-surface: oklch(0.65 0.16 75 / 16%);
  --danger: oklch(0.55 0.2 25);
  --danger-surface: oklch(0.58 0.21 25 / 12%);
  --info: oklch(0.53 0.14 235);
  --info-surface: oklch(0.53 0.14 235 / 12%);
  --on-success: oklch(0.99 0 0);
  --on-warning: oklch(0.99 0 0);
  --on-danger: oklch(0.99 0 0);
  --on-info: oklch(0.99 0 0);
  --on-accent: oklch(0.99 0 0);

  /* Diagramm-/Ressortfarben */
  --chart-1: oklch(0.62 0.19 45);
  --chart-2: oklch(0.55 0.16 250);
  --chart-3: oklch(0.6 0.17 150);
  --chart-4: oklch(0.68 0.16 90);
  --chart-5: oklch(0.55 0.2 330);

  --shadow-card: 0 24px 60px -30px oklch(0 0 0 / 0.18);
  --shadow-soft: 0 12px 32px -18px oklch(0 0 0 / 0.18);
  --shadow-glow: 0 16px 44px -22px oklch(0 0 0 / 0.2);
  --shadow-pop: 0 32px 80px -32px oklch(0 0 0 / 0.28);

  --backdrop: oklch(0.2 0.01 260 / 0.35);
  --grid-line: oklch(0 0 0 / 0.05);

  /* ---- Kompatibilität mit bestehendem Seiten-CSS ---- */
  --bg1: var(--background);
  --bg2: var(--background);
  --bg3: var(--card);
  --accent1: var(--primary);
  --accent2: var(--chart-5);
  --glass: var(--card);
  --border: var(--border-color);
  --text: var(--foreground);
  --muted: var(--muted-foreground);
  --faint: var(--faint-foreground);
  --shadow: var(--shadow-card);
  --ok: var(--success);
  --bad: var(--danger);
  --warn: var(--warning);
  --green: var(--success);
  --green-light: var(--success);
  --green-deep: var(--success);
  --red-light: var(--danger);
  --red-deep: var(--danger);
  --danger1: var(--destructive);
  --danger2: var(--destructive);
  --glow-color: var(--primary);
  --anim-color-light: var(--primary);

  /* Ressort-Pills (Paare: Fläche / zweite Fläche für Verläufe) */
  --rx-a1: color-mix(in oklab, var(--chart-1) 20%, transparent);
  --rx-a2: color-mix(in oklab, var(--chart-1) 10%, transparent);
  --rx-p1: color-mix(in oklab, var(--chart-5) 20%, transparent);
  --rx-p2: color-mix(in oklab, var(--chart-5) 10%, transparent);
  --rx-b1: color-mix(in oklab, var(--chart-2) 20%, transparent);
  --rx-b2: color-mix(in oklab, var(--chart-2) 10%, transparent);
  --rx-g1: color-mix(in oklab, var(--chart-3) 20%, transparent);
  --rx-g2: color-mix(in oklab, var(--chart-3) 10%, transparent);
  --rx-r1: color-mix(in oklab, var(--destructive) 18%, transparent);
  --rx-r2: color-mix(in oklab, var(--destructive) 9%, transparent);
}

/* ============================================================
   Design Tokens — Dark
   ============================================================ */
:root.dark {
  color-scheme: dark;

  --background: oklch(0.19 0.006 260);
  --foreground: oklch(0.975 0 0);
  --card: oklch(0.3 0.008 260);
  --card-foreground: oklch(0.975 0 0);
  --popover: oklch(0.255 0.007 260);
  --popover-foreground: oklch(0.975 0 0);
  --primary: oklch(0.75 0.15 255);
  --primary-foreground: oklch(0.16 0.01 260);
  --secondary: oklch(0.315 0.007 260);
  --secondary-foreground: oklch(0.975 0 0);
  --muted-surface: oklch(0.305 0.007 260);
  --muted-foreground: oklch(0.78 0.005 260);
  --faint-foreground: oklch(0.66 0.005 260);
  --accent-surface: oklch(0.36 0.008 260);
  --destructive: oklch(0.68 0.19 25);
  --destructive-foreground: oklch(0.16 0.01 260);
  --border-color: oklch(1 0 0 / 18%);
  --border-strong: oklch(1 0 0 / 32%);
  --input-border: oklch(1 0 0 / 26%);
  --ring: oklch(0.75 0.15 255);

  --surface-1: oklch(1 0 0 / 5%);
  --surface-2: oklch(1 0 0 / 8%);
  --surface-3: oklch(1 0 0 / 13%);

  --success: oklch(0.83 0.16 150);
  --success-surface: oklch(0.8 0.16 150 / 16%);
  --warning: oklch(0.86 0.15 85);
  --warning-surface: oklch(0.84 0.15 85 / 18%);
  --danger: oklch(0.75 0.17 22);
  --danger-surface: oklch(0.68 0.19 25 / 18%);
  --info: oklch(0.82 0.12 235);
  --info-surface: oklch(0.75 0.13 235 / 18%);
  --on-success: oklch(0.18 0.02 160);
  --on-warning: oklch(0.2 0.03 80);
  --on-danger: oklch(0.18 0.03 25);
  --on-info: oklch(0.18 0.02 240);
  --on-accent: oklch(0.18 0.02 300);

  --chart-1: oklch(0.76 0.17 45);
  --chart-2: oklch(0.75 0.15 250);
  --chart-3: oklch(0.8 0.16 150);
  --chart-4: oklch(0.84 0.15 90);
  --chart-5: oklch(0.72 0.18 330);

  --shadow-card: 0 24px 64px -32px oklch(0 0 0 / 0.65), 0 0 0 1px oklch(1 0 0 / 0.05);
  --shadow-soft: 0 10px 28px -16px oklch(0 0 0 / 0.55);
  --shadow-glow: 0 16px 44px -22px oklch(1 0 0 / 0.14);
  --shadow-pop: 0 32px 80px -34px oklch(0 0 0 / 0.8);

  --backdrop: oklch(0.1 0.01 260 / 0.6);
  --grid-line: oklch(1 0 0 / 0.08);
}

/* Fallback, falls JS deaktiviert ist: Systempräferenz respektieren */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) {
    color-scheme: dark;
    --background: oklch(0.19 0.006 260);
    --foreground: oklch(0.975 0 0);
    --card: oklch(0.3 0.008 260);
    --card-foreground: oklch(0.975 0 0);
    --popover: oklch(0.255 0.007 260);
    --popover-foreground: oklch(0.975 0 0);
    --primary: oklch(0.75 0.15 255);
    --primary-foreground: oklch(0.16 0.01 260);
    --secondary: oklch(0.315 0.007 260);
    --secondary-foreground: oklch(0.975 0 0);
    --muted-surface: oklch(0.305 0.007 260);
    --muted-foreground: oklch(0.78 0.005 260);
    --faint-foreground: oklch(0.66 0.005 260);
    --accent-surface: oklch(0.36 0.008 260);
    --destructive: oklch(0.68 0.19 25);
    --destructive-foreground: oklch(0.16 0.01 260);
    --border-color: oklch(1 0 0 / 18%);
    --border-strong: oklch(1 0 0 / 32%);
    --input-border: oklch(1 0 0 / 26%);
    --ring: oklch(0.75 0.15 255);
    --surface-1: oklch(1 0 0 / 5%);
    --surface-2: oklch(1 0 0 / 8%);
    --surface-3: oklch(1 0 0 / 13%);
    --success: oklch(0.83 0.16 150);
    --success-surface: oklch(0.8 0.16 150 / 16%);
    --warning: oklch(0.86 0.15 85);
    --warning-surface: oklch(0.84 0.15 85 / 18%);
    --danger: oklch(0.75 0.17 22);
    --danger-surface: oklch(0.68 0.19 25 / 18%);
    --info: oklch(0.82 0.12 235);
    --info-surface: oklch(0.75 0.13 235 / 18%);
    --on-success: oklch(0.18 0.02 160);
    --on-warning: oklch(0.2 0.03 80);
    --on-danger: oklch(0.18 0.03 25);
    --on-info: oklch(0.18 0.02 240);
    --on-accent: oklch(0.18 0.02 300);
    --chart-1: oklch(0.76 0.17 45);
    --chart-2: oklch(0.75 0.15 250);
    --chart-3: oklch(0.8 0.16 150);
    --chart-4: oklch(0.84 0.15 90);
    --chart-5: oklch(0.72 0.18 330);
    --shadow-card: 0 24px 64px -32px oklch(0 0 0 / 0.65), 0 0 0 1px oklch(1 0 0 / 0.05);
    --shadow-soft: 0 10px 28px -16px oklch(0 0 0 / 0.55);
    --shadow-glow: 0 16px 44px -22px oklch(1 0 0 / 0.14);
    --shadow-pop: 0 32px 80px -34px oklch(0 0 0 / 0.8);
    --backdrop: oklch(0.1 0.01 260 / 0.6);
    --grid-line: oklch(1 0 0 / 0.08);
  }
}

/* ============================================================
   2  Basis & Typografie
   ============================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body { min-height: 100%; }

html {
  background-color: var(--background);
  background-image:
    radial-gradient(60rem 32rem at 50% -12%, color-mix(in oklab, var(--primary) 14%, transparent), transparent 70%),
    radial-gradient(48rem 28rem at 92% 6%, color-mix(in oklab, var(--chart-5) 9%, transparent), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}

@supports (-webkit-touch-callout: none) {
  html { background-attachment: scroll; }
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--foreground);
  background: transparent;
  display: block;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

h2 { font-size: 19px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }

a { color: var(--primary); }

strong, b { font-weight: 600; }

small, .small {
  font-size: 13px;
  color: var(--muted-foreground);
}

.muted { color: var(--muted-foreground); }
.faint { color: var(--faint-foreground); }
.hidden { display: none !important; }

hr, .hr, hr.sep {
  border: none;
  border-top: 1px solid var(--border-color);
  height: 0;
  margin: 16px 0;
}

/* --- Bewegung --- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

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

.animate-fade-in { animation: fadeIn 0.45s var(--ease) both; }
.animate-scale-in { animation: scaleIn 0.3s var(--ease) both; }

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

/* --- Fokus & Scrollbars --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

::selection { background: color-mix(in oklab, var(--primary) 24%, transparent); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* ============================================================
   3  Shell — Kopfzeile, Navigation, Seitenkopf
   ------------------------------------------------------------
   Alle Bedienelemente der Kopfzeile stehen auf einer Höhe
   (--head-control) und teilen dieselbe Pillenform.
   ============================================================ */
:root {
  --head-height: 60px;
  --head-control: 34px;
}

@media (min-width: 641px) {
  :root { --head-height: 60px; }
}

.siteHeader {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid color-mix(in oklab, var(--border-color) 65%, transparent);
  background: color-mix(in oklab, var(--background) 78%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.siteHeaderInner {
  max-width: 64rem;
  margin: 0 auto;
  height: var(--head-height);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

@media (min-width: 641px) {
  .siteHeaderInner { padding: 0 24px; gap: 18px; }
}

/* ---------- Wortmarke ---------- */
.siteLogo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: var(--head-control);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.siteLogo:hover { opacity: 0.65; }

.siteLogoImg {
  height: 24px;
  width: auto;
  display: block;
}

@media (min-width: 641px) {
  .siteLogoImg { height: 28px; }
}

.siteLogoImg--dark { display: none; }
:root.dark .siteLogoImg--light { display: none; }
:root.dark .siteLogoImg--dark { display: block; }

/* ---------- Navigation ---------- */
.siteNav {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  margin-left: 8px;
}

@media (min-width: 641px) {
  .siteNav { margin-left: 14px; }
}

.siteNav .navLeft {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.navLink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--head-control);
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--muted-foreground);
  white-space: nowrap;
  user-select: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.navLink:hover {
  background: var(--surface-1);
  color: var(--foreground);
}

.navLink.active {
  background: var(--foreground);
  color: var(--background);
}

.navLink.active:hover {
  background: color-mix(in oklab, var(--foreground) 88%, var(--background));
  color: var(--background);
}

/* Das Zeichen läuft eine Spur blasser mit als die Beschriftung —
   es soll den Punkt begleiten, nicht ihn übertönen. */
.navIcon {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  flex: none;
  opacity: 0.72;
}

.navIcon svg { width: 100%; height: 100%; display: block; }

.navLink:hover .navIcon,
.navLink.active .navIcon { opacity: 1; }

/* ---------- Aktionen rechts ---------- */
.siteActions {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 14px;
  position: relative;
}

/* feine Trennlinie zwischen Navigation und Aktionen */
.siteActions::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: var(--border-color);
}

.siteActions .navRight {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.siteActions .navRight button,
.siteActions .btn-secondary {
  height: var(--head-control);
  padding: 0 13px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: none;
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 500;
  min-height: 0;
}

.siteActions .navRight button:not(:disabled):hover,
.siteActions .btn-secondary:not(:disabled):hover {
  background: var(--surface-1);
  color: var(--foreground);
  transform: none;
}

.siteActions .themeToggle {
  width: var(--head-control);
  height: var(--head-control);
}

/* ---------- Konto-Menü ---------- */
.userMenu {
  position: relative;
  flex: 0 0 auto;
}

/* Auslöser */
.userTrigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--head-control);
  max-width: 220px;
  padding: 0 10px 0 3px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  min-height: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.userTrigger:hover {
  background: var(--surface-1);
  border-color: var(--border-color);
}

.userMenu.is-authed .userTrigger { padding-left: 3px; }

/* Abgemeldet: nur Statuspunkt und Text, nicht anklickbar */
.userMenu:not(.is-authed) .userTrigger {
  padding-left: 12px;
  pointer-events: none;
  color: var(--muted-foreground);
}

.userMenu:not(.is-authed) .userChevron { display: none; }

.userTrigger .dot {
  width: 7px;
  height: 7px;
}

.userMenu.is-authed .userTrigger .dot { display: none; }

.userTrigger .authAvatar {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--foreground);
  background: var(--secondary);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 12%, transparent);
  overflow: hidden;
}

.userTriggerLabel {
  display: flex;
  align-items: center;
  min-width: 0;
}

.authState {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.authCompact {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.authNameInline {
  font-size: 13px;
  font-weight: 500;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 128px;
}

/* Auf schmalen Fenstern genügt das Profilbild */
@media (max-width: 1100px) {
  .userMenu.is-authed .userTriggerLabel { display: none; }
  .userMenu.is-authed .userTrigger { padding-right: 6px; }
}

.userChevron {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--faint-foreground);
  transition: transform 0.25s var(--ease);
}

.userChevron svg { width: 13px; height: 13px; display: block; }

.userMenu .userPanel:not(.hidden) ~ * .userChevron,
.userTrigger[aria-expanded="true"] .userChevron { transform: rotate(180deg); }

/* Aufklapper */
.userPanel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 262px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-pop);
  animation: scaleIn 0.16s var(--ease) both;
  transform-origin: top right;
}

.userPanel.hidden { display: none !important; }

.userPanelHead {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 10px 12px;
  min-width: 0;
}

.userPanelAvatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  background: var(--secondary);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 12%, transparent);
  overflow: hidden;
}

.userPanelText { min-width: 0; }

.userPanelName {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.authMail {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.userPanelRole {
  padding: 0 10px 10px;
}

.userPanelSep {
  height: 1px;
  margin: 2px 6px 6px;
  background: var(--border-color);
}

/* Aktionen im Menü sehen aus wie Menüeinträge */
.userPanelActions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: none;
  margin: 0;
  padding: 0;
}

.siteActions .userPanelActions button,
.userPanelActions button,
.userPanelActions .btn-secondary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  justify-content: flex-start;
  border: none;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 500;
  min-height: 0;
}

.siteActions .userPanelActions button:not(:disabled):hover,
.userPanelActions button:not(:disabled):hover,
.userPanelActions .btn-secondary:not(:disabled):hover {
  background: var(--surface-2);
  color: var(--foreground);
  transform: none;
}

.userPanelIcon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--muted-foreground);
}

.userPanelIcon svg { width: 15px; height: 15px; display: block; }

.userPanelActions button:hover .userPanelIcon { color: var(--foreground); }

/* Statuschip einzelner Seiten (MV, Finanzen) */
.siteActions > .pill,
.siteActions #statusPill {
  height: 26px;
  font-size: 12px;
}

@media (max-width: 900px) {
  .siteActions > .pill,
  .siteActions #statusPill { display: none; }
}

/* ---------- Seitenkopf ---------- */
.pageHead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid color-mix(in oklab, var(--border-color) 80%, transparent);
  animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (min-width: 641px) {
  .pageHead {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 48px;
    padding-bottom: 40px;
  }
}

.pageHeadMain { min-width: 0; }

.pageHeadExtra {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}

.pageHeadExtra a {
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.2s ease;
}

.pageHeadExtra a:hover { color: var(--foreground); }

h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0;
}

.pageHeadMeta,
.subtitle {
  color: var(--muted-foreground);
  font-size: 13px;
  letter-spacing: -0.01em;
  margin: 0;
}

@media (min-width: 641px) {
  .pageHeadMeta,
  .subtitle { font-size: 14px; }
}

.pageHeadMain .subtitle { margin-top: 8px; }

/* ---------- Alte Brand-Elemente (nur noch Fallback) ---------- */
.top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.brandLeft {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brandRight {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.brandLogo {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  text-decoration: none;
  flex: 0 0 auto;
  overflow: hidden;
  color: var(--foreground);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.brandLogo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 13px;
}

/* ============================================================
   4  Layout: Container, Sektionen & Raster
   ============================================================ */

/* Inhaltsbreite — überall gleich, auch in der Kopfzeile */
.app {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 28px 16px 72px;
}

@media (min-width: 641px) {
  .app { padding: 48px 24px 96px; }
}


.section {
  margin-bottom: 24px;
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.section__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.section__meta {
  font-size: 12px;
  color: var(--muted-foreground);
}

/* Auto-Raster für Kacheln und Karten */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.spacer { flex: 1 1 auto; min-width: 0; }

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

/* ---------- 5.1 Karte ---------- */
.card,
.glass {
  background: var(--card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 20px;
}

@media (min-width: 641px) {
  .card,
  .glass { padding: 24px; }
}

.card--flush { padding: 0; overflow: hidden; }
.card--tight { padding: 16px; }

.card--interactive {
  cursor: pointer;
  transition: transform 0.25s var(--ease), border-color 0.25s ease, box-shadow 0.25s ease;
}

.card--interactive:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--primary) 32%, transparent);
  box-shadow: var(--shadow-card);
}

.cardTitle {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.cardSub {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 3px;
  line-height: 1.45;
}

/* ---------- 5.2 Kennzahlen ---------- */
.statGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.stat {
  background: var(--card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  transition: transform 0.25s var(--ease), border-color 0.25s ease;
}

.stat--interactive:hover,
.stat.card--interactive:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--primary) 32%, transparent);
}

/* Eine Kachel, die zugleich filtert. Sie ist ein Knopf, soll aber aussehen
   wie ihre Nachbarn — und zeigen, wenn sie gedrückt ist. */
.stat--filter {
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.stat--filter.is-active {
  border-color: color-mix(in oklab, var(--primary) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 12%, transparent);
}

.stat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.stat__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
  letter-spacing: 0;
  text-transform: none;
}

.stat__value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.stat__hint {
  font-size: 12px;
  color: var(--muted-foreground);
  line-height: 1.45;
}

.stat__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: var(--radius-control);
  display: grid;
  place-items: center;
  background: var(--secondary);
  border: 1px solid var(--border-color);
  font-size: 17px;
}

.stat__actions {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Farbakzent per Ton */
.stat--success { border-color: color-mix(in oklab, var(--success) 30%, transparent); }
.stat--warning { border-color: color-mix(in oklab, var(--warning) 30%, transparent); }
.stat--danger  { border-color: color-mix(in oklab, var(--danger) 30%, transparent); }
.stat--info    { border-color: color-mix(in oklab, var(--info) 30%, transparent); }
.stat--accent  { border-color: color-mix(in oklab, var(--chart-5) 30%, transparent); }

.stat--success .stat__label { color: var(--success); }
.stat--warning .stat__label { color: var(--warning); }
.stat--danger  .stat__label { color: var(--danger); }
.stat--info    .stat__label { color: var(--info); }
.stat--accent  .stat__label { color: var(--chart-5); }

/* ---------- 5.3 Buttons ---------- */
button {
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.btn,
button.btn-primary,
button.btn-secondary,
button.btn-danger,
button.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost,
.btn-success,
.btn-info,
.btn-warning,
.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              box-shadow 0.2s ease, transform 0.2s var(--ease), opacity 0.2s ease;
}

/* `hidden` heißt zu. `display: inline-flex` machte wieder auf und gewann –
   ein Knopf, den eine Seite einer Rolle nicht zeigen wollte, stand trotzdem
   da. Dieselbe Regel unten für die zweite Knopf-Familie. */
.btn-primary[hidden],
.btn-secondary[hidden],
.btn-danger[hidden],
.btn-ghost[hidden],
.btn-success[hidden],
.btn-info[hidden],
.btn-warning[hidden],
.btn-accent[hidden] { display: none; }

.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active,
.btn-ghost:active,
.btn-success:active,
.btn-info:active,
.btn-warning:active,
.btn-accent:active { transform: scale(0.98); }

button:disabled,
.btn:disabled {
  cursor: not-allowed !important;
  opacity: 0.45 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Varianten */
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}
.btn-primary:not(:disabled):hover {
  background: color-mix(in oklab, var(--primary) 88%, var(--foreground));
  box-shadow: var(--shadow-glow);
}

.btn-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--border-color);
}
.btn-secondary:not(:disabled):hover {
  background: var(--accent-surface);
  border-color: var(--border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--muted-foreground);
}
.btn-ghost:not(:disabled):hover {
  background: var(--secondary);
  color: var(--foreground);
}

.btn-danger {
  background: var(--destructive);
  color: var(--destructive-foreground);
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}
.btn-danger:not(:disabled):hover {
  background: color-mix(in oklab, var(--destructive) 88%, var(--foreground));
  box-shadow: var(--shadow-glow);
}

/* Getönte Varianten — für Nebenaktionen mit Bedeutung */
.btn-success {
  background: var(--success-surface);
  color: var(--success);
  border-color: color-mix(in oklab, var(--success) 28%, transparent);
  font-weight: 600;
}
.btn-success:not(:disabled):hover { background: color-mix(in oklab, var(--success) 24%, transparent); }

.btn-info {
  background: var(--info-surface);
  color: var(--info);
  border-color: color-mix(in oklab, var(--info) 28%, transparent);
  font-weight: 600;
}
.btn-info:not(:disabled):hover { background: color-mix(in oklab, var(--info) 24%, transparent); }

.btn-warning {
  background: var(--warning-surface);
  color: var(--warning);
  border-color: color-mix(in oklab, var(--warning) 28%, transparent);
  font-weight: 600;
}
.btn-warning:not(:disabled):hover { background: color-mix(in oklab, var(--warning) 26%, transparent); }

.btn-accent {
  background: color-mix(in oklab, var(--chart-5) 16%, transparent);
  color: color-mix(in oklab, var(--chart-5) 92%, var(--foreground));
  border-color: color-mix(in oklab, var(--chart-5) 28%, transparent);
  font-weight: 600;
}
.btn-accent:not(:disabled):hover { background: color-mix(in oklab, var(--chart-5) 24%, transparent); }

/* Grössen */
.btn--sm,
.btn-sm {
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: var(--radius-sm);
}

.btn--xs,
.btn-xs {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

.btn--lg {
  height: 46px;
  padding: 0 24px;
  font-size: 15px;
}

.btn--pill { border-radius: 999px; }
.btn--block { width: 100%; }

/* Icon-Buttons */
.iconBtn {
  width: 36px;
  height: 36px;
  padding: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--secondary);
  color: var(--muted-foreground);
  font-size: 15px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease);
}

.iconBtn:not(:disabled):hover {
  background: var(--accent-surface);
  color: var(--foreground);
  transform: translateY(-1px);
}

.iconBtn.btn-danger {
  background: var(--danger-surface);
  color: var(--danger);
  border-color: color-mix(in oklab, var(--danger) 26%, transparent);
  box-shadow: none;
}

.iconBtn.btn-danger:not(:disabled):hover {
  background: color-mix(in oklab, var(--danger) 22%, transparent);
  box-shadow: none;
}

.actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Segmentierte Auswahl (Status umschalten o. Ä.) */
.segment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--secondary);
  border: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.segment__btn {
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
}

.segment__btn:hover { color: var(--foreground); }

.segment__btn.is-active {
  background: var(--foreground);
  color: var(--background);
  font-weight: 600;
}

/* ---------- 5.4 Pills & Badges ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--secondary);
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill--lg { height: 28px; padding: 0 12px; font-size: 12px; }
.pill--strong { font-weight: 600; color: var(--foreground); }

.pill--success { background: var(--success-surface); border-color: color-mix(in oklab, var(--success) 28%, transparent); color: var(--success); }
.pill--warning { background: var(--warning-surface); border-color: color-mix(in oklab, var(--warning) 28%, transparent); color: var(--warning); }
.pill--danger  { background: var(--danger-surface);  border-color: color-mix(in oklab, var(--danger) 28%, transparent);  color: var(--danger); }
.pill--info    { background: var(--info-surface);    border-color: color-mix(in oklab, var(--info) 28%, transparent);    color: var(--info); }
.pill--accent  { background: color-mix(in oklab, var(--chart-5) 14%, transparent); border-color: color-mix(in oklab, var(--chart-5) 28%, transparent); color: color-mix(in oklab, var(--chart-5) 92%, var(--foreground)); }
.pill--neutral { background: var(--secondary); border-color: var(--border-color); color: var(--muted-foreground); }

.pillRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Statuspunkt */
.dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--faint-foreground);
}

.dot.ok, .dot--success { background: var(--success); }
.dot.warn, .dot--warning { background: var(--warning); }
.dot.bad, .dot--danger { background: var(--danger); }
.dot--info { background: var(--info); }
.dot--accent { background: var(--chart-5); }

/* ---------- 5.5 Avatare ---------- */
.avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--secondary);
  border: 1px solid var(--border-color);
  color: var(--secondary-foreground);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 30px; height: 30px; font-size: 12px; }
.avatar--lg { width: 56px; height: 56px; font-size: 18px; }

/* ---------- 5.5b Schalter ---------- */
.switch,
.mailToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--secondary);
  border: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--muted-foreground);
  user-select: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.switch:hover,
.mailToggle:not(.disabled):hover {
  background: var(--accent-surface);
  color: var(--foreground);
}

.switch.disabled,
.mailToggle.disabled { opacity: 0.45; cursor: not-allowed; }

.switch__knob,
.mailKnob {
  position: relative;
  width: 30px;
  height: 17px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background 0.2s ease;
}

.switch__knob::after,
.mailKnob::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--card);
  transition: left 0.2s var(--ease);
}

.switch.on .switch__knob,
.mailToggle.on .mailKnob { background: var(--success); }

.switch.on .switch__knob::after,
.mailToggle.on .mailKnob::after { left: 15px; }

/* ---------- 5.6 Werkzeugleiste ---------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.toolbar__search {
  flex: 1 1 240px;
  min-width: 180px;
}

.toolbar__select { flex: 0 1 180px; min-width: 150px; }
.toolbar__spacer { flex: 1 1 auto; }

.toolbar__count {
  font-size: 13px;
  color: var(--muted-foreground);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .toolbar { gap: 8px; }
  .toolbar__search { flex: 1 1 100%; }
  .toolbar__select { flex: 1 1 calc(50% - 4px); }
}

/* Reiter */
.tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--secondary);
  border: 1px solid var(--border-color);
  flex-wrap: wrap;
  max-width: 100%;
}

.tabBtn {
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
}

.tabBtn:hover { color: var(--foreground); }

.tabBtn.active {
  background: var(--foreground);
  color: var(--background);
  font-weight: 600;
}

/* ---------- 5.7 Tabellen ---------- */
.tableCard {
  background: var(--card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.tableWrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

thead tr {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
}

th {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
  letter-spacing: 0;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-color);
}

td {
  padding: 13px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in oklab, var(--border-color) 70%, transparent);
}

tbody tr { transition: background 0.15s ease; }
tbody tr.clickable { cursor: pointer; }
tbody tr:hover { background: var(--surface-1); }
tbody tr:last-child td { border-bottom: none; }

td.avatarCell { width: 56px; padding-right: 4px; }
th.avatarTh { width: 56px; }

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

.nameStack .nameBold {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.nameStack .emailMuted {
  font-size: 12px;
  color: var(--muted-foreground);
}

/* ---------- 5.8 Schlüssel/Wert-Listen ---------- */
.kv {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kv__row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
}

.kv__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--faint-foreground);
}

.kv__value {
  font-size: 14px;
  color: var(--foreground);
  line-height: 1.5;
  word-break: break-word;
}

.kv__value a { color: var(--primary); text-decoration: none; }
.kv__value a:hover { text-decoration: underline; }

/* ---------- 5.9 Formulare ---------- */
input, select, textarea {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: var(--card);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-control);
  color: var(--foreground);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea {
  height: auto;
  min-height: 96px;
  padding: 11px 14px;
  line-height: 1.55;
  resize: vertical;
}

select {
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 13px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

input[type="checkbox"], input[type="radio"] {
  width: 17px;
  height: 17px;
  accent-color: var(--primary);
}

input[type="file"] { height: auto; padding: 9px 14px; }

input::placeholder, textarea::placeholder { color: var(--faint-foreground); }

input:hover, select:hover, textarea:hover {
  border-color: color-mix(in oklab, var(--primary) 40%, var(--input-border));
}

input:focus, select:focus, textarea:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 20%, transparent);
}

select option { background: var(--popover); color: var(--popover-foreground); }

label, .formLabel, .field__label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
  margin-bottom: 6px;
}

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

.field__label { margin-bottom: 6px; }

.fieldGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.fieldGrid .full { grid-column: 1 / -1; }

.formSection { margin-bottom: 22px; }
/* Der letzte Abschnitt braucht seinen Abstand nicht — darunter kommt
   schon der Innenabstand des Körpers. */
.modalBody > .formSection:last-child { margin-bottom: 0; }

.formSectionTitle {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint-foreground);
  margin-bottom: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border-color);
}

/* ---------- 5.10 Dialoge ---------- */
dialog:not([open]) { display: none !important; }

dialog {
  border: none;
  padding: 16px;
  background: transparent;
  width: min(680px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  overflow: visible;
  color: var(--foreground);
  /* Der Browser mittet einen modalen Dialog über `margin: auto`. Der
     Reset in 1. setzt `margin: 0` auf alles – ohne diese Zeile klebten
     die Dialoge in der linken oberen Ecke. Auf schmalen Geräten wird
     daraus weiter unten ein Blatt, das von unten hereinfährt. */
  margin: auto;
}

dialog::backdrop {
  background: var(--backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Die Hülle muss in den Dialog passen, nicht bloß auf den Bildschirm: Der
   Dialog hat oben wie unten 16 px Innenabstand. Ohne diese Rechnung ragte
   ein hoher Dialog unten aus seiner Hülle heraus und klebte am Fensterrand,
   während oben eine Lücke blieb. */
dialog > .dlgShell,
dialog > .dlgPanel,
dialog > .modal,
dialog > .modalBox { max-height: calc(100dvh - 64px); }

.modalOverlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modalOverlay.show { display: flex; }

.modalPanel {
  width: 100%;
  max-width: 680px;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-pop);
  animation: modalIn 0.26s var(--ease) both;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.97) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes modalInMobile {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modalHeader {
  flex: 0 0 auto;
  padding: 22px 24px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modalHeader--center { text-align: center; display: block; }

/* Die linke Seite einer Kopfzeile: Bild und Titel nebeneinander, das ✕
   bleibt dadurch rechts in der Ecke, wo es hingehört. */
.modalKopf {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.modalTitle {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.modalSub {
  font-size: 13px;
  color: var(--muted-foreground);
  margin-top: 4px;
}

.modalBody {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 24px 20px;
  -webkit-overflow-scrolling: touch;
}

.modalSection {
  padding: 14px 24px;
  border-top: 1px solid var(--border-color);
  flex: 0 0 auto;
}

.modalActions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Fünf, sechs Knöpfe passen in keine Zeile mehr — sie brechen um,
     statt seitlich aus dem Dialog zu laufen. */
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border-color);
}

.modalActions--split { justify-content: space-between; }

/* `display: flex` schlägt das `hidden` des Browsers — eine Knopfreihe, die
   eine Seite ausdrücklich zumacht, stand sonst trotzdem da. Auf den
   Bewerbungen hing genau das daran: Die Ressortleitung sah „Übernehmen“
   und „Ablehnen“, obwohl die Seite sie ihr nie zugedacht hatte. */
.modalActions[hidden] { display: none; }

.closeX {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--secondary);
  color: var(--muted-foreground);
  font-size: 16px;
}

.closeX:hover { background: var(--accent-surface); color: var(--foreground); }

.modalDragHandle {
  display: none;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--border-strong);
  margin: 10px auto 0;
}

@media (max-width: 640px) {
  dialog {
    padding: 0;
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - env(safe-area-inset-top, 20px) - 12px);
    margin-bottom: 0;
  }
  .modalPanel {
    border-radius: var(--radius-modal) var(--radius-modal) 0 0;
    max-height: calc(100dvh - env(safe-area-inset-top, 20px) - 16px);
    animation: modalInMobile 0.28s var(--ease) both;
  }
  /* Hier hat der Dialog keinen Innenabstand mehr, den die Hülle abziehen
     müsste — sie darf wieder so hoch werden wie er. */
  dialog > .dlgShell,
  dialog > .dlgPanel,
  dialog > .modal,
  dialog > .modalBox {
    max-height: calc(100dvh - env(safe-area-inset-top, 20px) - 12px);
  }
  .modalDragHandle { display: block; }
  .modalHeader { padding: 14px 18px 14px; }
  .modalBody { padding: 4px 18px 16px; }
  .modalSection, .modalActions { padding-left: 18px; padding-right: 18px; }
  .modalActions { flex-direction: column-reverse; }
  .modalActions > * { width: 100%; }
}

/* ---------- 5.11 Zustände ---------- */
.empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--muted-foreground);
  font-size: 14px;
}

.empty__icon { font-size: 30px; margin-bottom: 12px; opacity: 0.7; }

.empty__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 6px;
}

.pageLoader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 72px 20px;
  color: var(--muted-foreground);
  font-size: 14px;
}

.pageLoader.hidden { display: none; }

.spinnerRing,
.spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid var(--border-color);
  border-top-color: var(--primary);
  animation: spin 0.75s linear infinite;
}

.spinner--sm { width: 18px; height: 18px; border-width: 2px; }

@media (prefers-reduced-motion: reduce) {
  .spinnerRing, .spinner { animation: none; opacity: 0.5; }
}

.skeleton {
  background: linear-gradient(90deg, var(--surface-1), var(--surface-3), var(--surface-1));
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeletonShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Hinweisbox */
.notice {
  padding: 11px 14px;
  border-radius: var(--radius-control);
  font-size: 13px;
  background: var(--info-surface);
  border: 1px solid color-mix(in oklab, var(--info) 25%, transparent);
  color: var(--info);
}

.notice--success { background: var(--success-surface); border-color: color-mix(in oklab, var(--success) 25%, transparent); color: var(--success); }
.notice--warning { background: var(--warning-surface); border-color: color-mix(in oklab, var(--warning) 25%, transparent); color: var(--warning); }
.notice--danger,
.notice.bad { background: var(--danger-surface); border-color: color-mix(in oklab, var(--danger) 25%, transparent); color: var(--danger); }

/* Kurzmeldung */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  transform: translateX(-50%) translateY(16px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--foreground);
  color: var(--background);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s var(--ease);
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
  .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 5.12 Listenzeilen ---------- */
.listRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: var(--surface-1);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.listRow--interactive { cursor: pointer; }

.listRow--interactive:hover {
  background: var(--surface-2);
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
}

.listRow.is-active {
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  border-color: color-mix(in oklab, var(--primary) 38%, transparent);
  color: var(--primary);
}

/* ---------- 5.13 Theme-Umschalter ---------- */
.themeToggle {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: color-mix(in oklab, var(--card) 70%, transparent);
  color: var(--muted-foreground);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.25s var(--ease);
}

.themeToggle:hover {
  color: var(--foreground);
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
  transform: translateY(-1px);
}

.themeToggle svg { width: 17px; height: 17px; }
.themeToggle .sunIcon { display: none; }
:root.dark .themeToggle .sunIcon { display: block; }
:root.dark .themeToggle .moonIcon { display: none; }

.themeToggle--floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 60;
  box-shadow: var(--shadow-soft);
}

/* ============================================================
   6  Alt-Klassen der Seiten
   ------------------------------------------------------------
   Die Seiten erzeugen ihr Markup teilweise in JavaScript. Statt
   dort Klassennamen zu ändern, zeigen die bestehenden Namen hier
   auf die Komponenten oben — dadurch sieht jede Seite gleich aus.
   ============================================================ */

/* ---------- Karten ---------- */
.card-bew,
.rCard,
.chartBox,
.protoHeaderCard,
.stateBox,
.memberCard,
.sessionCard {
  background: var(--card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 20px;
  min-width: 0;
}

.card-bew,
.rCard,
.memberCard {
  cursor: pointer;
  position: relative;
  transition: transform 0.25s var(--ease), border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Karten in einem Raster gleich hoch abschliessen lassen */
.card-bew,
.rCard,
.memberCard {
  display: flex;
  flex-direction: column;
}

.rCard .cardMeta,
.card-bew .tags,
.memberCard .cardActions { margin-top: auto; }

.card-bew:hover,
.rCard:hover,
.memberCard:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--primary) 32%, transparent);
  box-shadow: var(--shadow-card);
}

/* ---------- Kennzahlen ---------- */
.kpiGrid,
.kpis,
.statGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.kpi,
.kpiCard {
  background: var(--card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  box-shadow: none;
  transition: transform 0.25s var(--ease), border-color 0.25s ease;
}

.kpiCard:hover,
.kpi:hover { border-color: color-mix(in oklab, var(--primary) 28%, transparent); }

.kpiTop,
.stat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.kpiTitle,
.kpiLabel,
.kLabel,
.kpi .label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
  letter-spacing: 0;
  text-transform: none;
}

.kpiValue,
.kValue,
.kpi .value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0;
}

.kpiSub,
.kHint,
.kpi .sub {
  font-size: 12px;
  color: var(--muted-foreground);
  line-height: 1.45;
  margin: 0;
}

.kpiIcon,
.iconBox {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: var(--radius-control);
  display: grid;
  place-items: center;
  background: var(--secondary);
  border: 1px solid var(--border-color);
  font-size: 17px;
  color: var(--muted-foreground);
}

.kpiActions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.kpiDot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--faint-foreground);
}

.kpiDot.ok      { background: var(--success); }
.kpiDot.warn    { background: var(--warning); }
.kpiDot.bad     { background: var(--danger); }
.kpiDot.purple  { background: var(--chart-5); }

/* Farbtöne der Kennzahlen */
.kpi.kpi-open   { border-color: color-mix(in oklab, var(--warning) 30%, transparent); }
.kpi.kpi-check  { border-color: color-mix(in oklab, var(--info) 30%, transparent); }
.kpi.kpi-paid   { border-color: color-mix(in oklab, var(--success) 30%, transparent); }
.kpi.kpi-total  { border-color: color-mix(in oklab, var(--chart-5) 30%, transparent); }
.kpi.kpi-open  .kLabel { color: var(--warning); }
.kpi.kpi-check .kLabel { color: var(--info); }
.kpi.kpi-paid  .kLabel { color: var(--success); }
.kpi.kpi-total .kLabel { color: var(--chart-5); }

/* Karten-/Kachelraster — passt sich der Breite an.
   .grid heisst auf mehreren Seiten dasselbe: eine Reihe gleichwertiger
   Karten. Seiten mit anderer Aufteilung überschreiben es lokal. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  align-items: start;
}

.kpiBig  { grid-column: span 2; }
.kpiFull { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .kpiBig { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .grid { grid-template-columns: 1fr; }
  .kpiBig { grid-column: 1 / -1; }
}

/* ---------- Pills & Badges ---------- */
.badge,
.rolePill,
.statusPill,
.ressortPill,
.cornerBadge,
.statusBadge,
.tag,
.metaPill,
.blockType,
.code-badge,
.mpRessort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--secondary);
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge strong { font-weight: 600; color: var(--foreground); }

/* Töne der Alt-Badges */
.pill-status-volle,
.statusBadge.paid,
.statusBadge.present,
.cornerBadge.ok,
.tag.p            { background: var(--success-surface); border-color: color-mix(in oklab, var(--success) 28%, transparent); color: var(--success); }

.pill-status-anw,
.statusBadge.check,
.pill-role-vorstand,
.cornerBadge.info { background: var(--info-surface); border-color: color-mix(in oklab, var(--info) 28%, transparent); color: var(--info); }

.pill-status-pau,
.statusBadge.open,
.cornerBadge.warn,
.cornerBadge.amber,
.pill-role-stv    { background: var(--warning-surface); border-color: color-mix(in oklab, var(--warning) 28%, transparent); color: var(--warning); }

.pill-status-aus,
.statusBadge.absent,
.cornerBadge.bad  { background: var(--danger-surface); border-color: color-mix(in oklab, var(--danger) 28%, transparent); color: var(--danger); }

.pill-role-admin,
.cornerBadge.purple { background: color-mix(in oklab, var(--chart-5) 14%, transparent); border-color: color-mix(in oklab, var(--chart-5) 28%, transparent); color: color-mix(in oklab, var(--chart-5) 92%, var(--foreground)); }

.pill-role-leitung { background: color-mix(in oklab, var(--chart-1) 14%, transparent); border-color: color-mix(in oklab, var(--chart-1) 28%, transparent); color: color-mix(in oklab, var(--chart-1) 92%, var(--foreground)); }

.rolePill.vorstand         { background: var(--info-surface); border-color: color-mix(in oklab, var(--info) 28%, transparent); color: var(--info); }
.rolePill.ressortleiter    { background: color-mix(in oklab, var(--chart-1) 14%, transparent); border-color: color-mix(in oklab, var(--chart-1) 28%, transparent); color: color-mix(in oklab, var(--chart-1) 92%, var(--foreground)); }
.rolePill.protokollfuehrer { background: var(--success-surface); border-color: color-mix(in oklab, var(--success) 28%, transparent); color: var(--success); }

.tags,
.tagRow,
.cardMeta,
.cardPills,
.ressortList,
.summaryRow,
.pillRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cardMeta {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--border-color);
}

.statusDot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: inline-block;
}

/* Eckbadge auf Karten */
.cornerBadge {
  position: absolute;
  top: 14px;
  right: 14px;
}

/* ---------- Buttons ---------- */
.btn-done   { background: var(--success-surface); color: var(--success); border-color: color-mix(in oklab, var(--success) 28%, transparent); }
.btn-ok     { background: var(--success-surface); color: var(--success); border-color: color-mix(in oklab, var(--success) 28%, transparent); }
.btn-warn   { background: var(--info-surface); color: var(--info); border-color: color-mix(in oklab, var(--info) 28%, transparent); }
.btn-amber  { background: var(--warning-surface); color: var(--warning); border-color: color-mix(in oklab, var(--warning) 28%, transparent); }
.btn-purple { background: color-mix(in oklab, var(--chart-5) 16%, transparent); color: color-mix(in oklab, var(--chart-5) 92%, var(--foreground)); border-color: color-mix(in oklab, var(--chart-5) 28%, transparent); }
.btn-export { background: var(--primary); color: var(--primary-foreground); font-weight: 600; box-shadow: var(--shadow-soft); }
.btn-pick   { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border-color); }

.btn-done,
.btn-ok,
.btn-warn,
.btn-amber,
.btn-purple,
.btn-export,
.btn-pick,
.btn-mini,
.statusBtn,
.baustein-btn,
.block-act,
.protoItemDel,
.miniLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease);
}

.btn-done[hidden],
.btn-ok[hidden],
.btn-warn[hidden],
.btn-amber[hidden],
.btn-purple[hidden],
.btn-export[hidden],
.btn-pick[hidden],
.btn-mini[hidden],
.statusBtn[hidden],
.baustein-btn[hidden],
.block-act[hidden],
.protoItemDel[hidden],
.miniLink[hidden] { display: none; }

.btn-done:not(:disabled):hover,
.btn-ok:not(:disabled):hover,
.btn-warn:not(:disabled):hover,
.btn-amber:not(:disabled):hover,
.btn-purple:not(:disabled):hover,
.btn-export:not(:disabled):hover,
.btn-pick:not(:disabled):hover { transform: translateY(-1px); }

.btn-mini,
.block-act,
.protoItemDel,
.miniLink,
.statusBtn,
.baustein-btn {
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--border-color);
}

.btn-mini:hover,
.block-act:hover,
.miniLink:hover,
.statusBtn:hover,
.baustein-btn:hover {
  background: var(--accent-surface);
  border-color: var(--border-strong);
}

.protoItemDel {
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--faint-foreground);
}

.protoItemDel:hover { background: var(--danger-surface); color: var(--danger); }

/* Aktive Status-Buttons */
.statusBtn.is-active { font-weight: 600; }
#setOpenBtn.is-active  { background: var(--warning-surface); border-color: color-mix(in oklab, var(--warning) 38%, transparent); color: var(--warning); }
#setCheckBtn.is-active { background: var(--info-surface);    border-color: color-mix(in oklab, var(--info) 38%, transparent);    color: var(--info); }
#setPaidBtn.is-active  { background: var(--success-surface); border-color: color-mix(in oklab, var(--success) 38%, transparent); color: var(--success); }

/* ---------- Werkzeugleisten ---------- */
.filterBar,
.controls,
.controlsRow,
.controlsBottom,
.exportBar,
.exportBtns,
.bausteineBtns,
.mpActions,
.blockActions,
.dlgActions,
.statusBar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filterBar,
.controls { margin-bottom: 18px; }

.filterBar .searchInput,
.controlsRow input[type="search"],
.controlsRow input[type="text"] { flex: 1 1 240px; min-width: 180px; }

.filterBar select,
.controlsRow select { flex: 0 1 180px; min-width: 150px; }

.filterBar .countText,
.countText {
  font-size: 13px;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.dlgActions { justify-content: flex-end; }
.blockActions { gap: 6px; flex: 0 0 auto; }

/* ---------- Dialoge (Alt-Namen) ---------- */
.dlgShell,
.dlgPanel,
.modal,
.modalBox,
.fallbackPanel {
  width: 100%;
  max-width: 680px;
  max-height: calc(100dvh - 32px);
  /* Eine Hülle, die schmaler ist als ihr Dialog, stünde sonst links
     darin statt mittig. */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-pop);
  animation: modalIn 0.26s var(--ease) both;
  position: relative;
}

.dlgShell { padding: 0; }

.fallbackOverlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.fallbackOverlay.show { display: flex; }

.dlgHeader {
  flex: 0 0 auto;
  padding: 22px 24px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dlgTitle {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.dlgSub {
  font-size: 13px;
  color: var(--muted-foreground);
  margin-top: 4px;
}

.statusBar,
.summaryRow {
  padding: 14px 24px;
  border-top: 1px solid var(--border-color);
  flex: 0 0 auto;
}

.summaryRow { border-top: none; }

.kvGrid {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kvRow,
.kv-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
}

.kvLabel,
.kv-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--faint-foreground);
  text-transform: none;
  letter-spacing: 0;
}

.kvValue,
.kv-value {
  font-size: 14px;
  color: var(--foreground);
  line-height: 1.5;
  word-break: break-word;
}

.kvValue a,
.kv-value a,
.mailLink { color: var(--primary); text-decoration: none; }
.kvValue a:hover, .kv-value a:hover, .mailLink:hover { text-decoration: underline; }

.dlgActions {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border-color);
  flex: 0 0 auto;
}

.sheetHandle,
.modalDragHandle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--border-strong);
  margin: 10px auto 0;
}

@media (max-width: 640px) {
  .dlgShell,
  .dlgPanel,
  .modal,
  .modalBox,
  .fallbackPanel {
    border-radius: var(--radius-modal) var(--radius-modal) 0 0;
    max-height: calc(100dvh - env(safe-area-inset-top, 20px) - 16px);
    animation: modalInMobile 0.28s var(--ease) both;
  }
  .dlgHeader { padding: 14px 18px; }
  .statusBar, .summaryRow, .kvGrid, .dlgActions { padding-left: 18px; padding-right: 18px; }
}

/* Formularraster in Dialogen */
.formGrid,
.protoHeaderGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.formGrid .full,
.protoHeaderGrid .full,
.fieldGroup.full { grid-column: 1 / -1; }

.formField,
.fieldGroup {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---------- Zustände (Alt-Namen) ---------- */
.empty,
.emptyState,
.emptyBlocks,
.mpEmpty,
.protoListEmpty,
.denyBox {
  padding: 48px 24px;
  text-align: center;
  color: var(--muted-foreground);
  font-size: 14px;
}

.emptyIcon { font-size: 30px; margin-bottom: 12px; opacity: 0.7; }

.emptyTitle {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 6px;
}

.mpEmpty, .protoListEmpty { padding: 24px 12px; font-size: 13px; }

/* ---------- Namenszellen & Avatare ---------- */
.nameCell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.nameMeta {
  font-size: 12px;
  color: var(--muted-foreground);
}

.avatarSmall,
.avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--secondary);
  border: 1px solid var(--border-color);
  color: var(--secondary-foreground);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
}

.avatar img, .avatarSmall img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Mobile Kartenliste (statt Tabelle) ---------- */
.memberCardGrid {
  display: none;
  grid-template-columns: 1fr;
  gap: 12px;
}

.memberCard .cardNr {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 11px;
  color: var(--faint-foreground);
}

.memberCard .cardTop {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  min-width: 0;
}

.memberCard .cardName {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.memberCard .cardEmail {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 2px;
  word-break: break-all;
}

.memberCard .cardPills { margin-bottom: 12px; }

.memberCard .cardActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.memberCard .cardActions button { width: 100%; }

/* Unter 720 px tritt eine Tabelle zurück und eine Kartenliste nimmt ihren
   Platz ein. Zurück tritt aber nur, wer `nurBreit` trägt: Vorher galt die
   Regel für jede `.tableWrap`, und Seiten ohne Kartenliste — Anwärter, MV —
   zeigten auf dem Handy gar nichts mehr. Wer Karten hat, sagt es also. */
@media (max-width: 719px) {
  .nurBreit { display: none; }
  .memberCardGrid { display: grid; }
}

/* ---------- Rechnungs-Karten ---------- */
.cardGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.rCard .cardTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.cardLeft {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.cardName {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.cardAmount {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  flex: 0 0 auto;
  text-align: right;
}

/* ---------- Bewerbungskarten ---------- */
.card-bew .inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.card-bew .title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.card-bew .sub {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 3px;
}

/* ---------- Login-Seite ---------- */
.step { transition: opacity 0.25s ease, transform 0.25s ease; }
.step.hidden { display: none !important; }

/* Wartehinweis: eine ruhige Zeile, kein farbiges Panel */
.pollWrap {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--faint-foreground);
}

.pollDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: pulsePoll 1.6s ease-in-out infinite;
}

@keyframes pulsePoll {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}


/* ============================================================
   7  Seitenbausteine
   ------------------------------------------------------------
   Bausteine, die nur auf einzelnen Seiten vorkommen — hier,
   damit alles an einer Stelle liegt und gleich aussieht.
   ============================================================ */

/* ---------- 7.1  Protokoll-Editor ---------- */
/* Speicher-Status */
  .saveIndicator {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--secondary);
    color: var(--muted-foreground);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
  }
  .saveIndicator.saved   { background: var(--success-surface); border-color: color-mix(in oklab, var(--success) 28%, transparent); color: var(--success); }
  .saveIndicator.saving  { background: var(--info-surface);    border-color: color-mix(in oklab, var(--info) 28%, transparent);    color: var(--info); }
  .saveIndicator.unsaved { background: var(--warning-surface); border-color: color-mix(in oklab, var(--warning) 28%, transparent); color: var(--warning); }

  /* Gespeicherte Protokolle */
  .protokollBar {
    background: var(--card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    padding: 18px 20px;
    margin-bottom: 14px;
  }
  .protokollBarHead {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .protokollBarTitle {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-foreground);
    flex: 1 1 auto;
  }
  .protokollList { display: flex; flex-wrap: wrap; gap: 6px; }

  .protoListItem {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    padding: 7px 12px;
    border-radius: var(--radius-control);
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }
  .protoListItem:hover { background: var(--surface-2); border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
  .protoListItem.active {
    background: color-mix(in oklab, var(--primary) 12%, transparent);
    border-color: color-mix(in oklab, var(--primary) 38%, transparent);
    color: var(--primary);
    font-weight: 500;
  }
  .protoListItem > span:first-child {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Abschnittsüberschrift */
  .pageHeader { margin-bottom: 14px; }
  .pageTitle {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .pageSub { font-size: 13px; color: var(--muted-foreground); margin-top: 3px; }

  /* Kopfdaten des Protokolls */
  .protoHeaderCard { margin-bottom: 14px; padding: 20px 22px; }
  .fieldGroup { gap: 6px; }
  .timeRow { display: flex; align-items: center; gap: 8px; }
  .timeRow span { flex: 0 0 auto; color: var(--muted-foreground); }
  .timeRow input { flex: 1 1 0; min-width: 0; }

  /* Anwesenheitsauswahl */
  .anwLabel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
  }
  .anwLabel label { margin-bottom: 0; }

  .memberPicker {
    margin-top: 10px;
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    overflow: hidden;
  }
  .mpSearch {
    height: 38px;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    background: transparent;
  }
  .mpSearch:focus { box-shadow: none; border-bottom-color: var(--ring); }
  .mpList {
    max-height: 180px;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mpItem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .mpItem:hover { background: var(--surface-2); }
  .mpItem label { margin: 0; cursor: pointer; flex: 1 1 auto; color: var(--foreground); font-size: 13px; }
  .mpItem input[type=checkbox] { flex: 0 0 auto; }
  .mpRessort { height: auto; padding: 0; border: none; background: none; color: var(--faint-foreground); font-size: 11px; }
  .mpActions {
    padding: 10px 12px;
    border-top: 1px solid var(--border-color);
  }
  .mpCount { font-size: 12px; color: var(--muted-foreground); margin-left: auto; }

  /* Bausteine */
  .bausteineWrap {
    background: var(--card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    padding: 18px 20px;
    margin-bottom: 14px;
  }
  .bausteineTitle {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint-foreground);
    margin-bottom: 10px;
  }
  .baustein-btn:hover {
    background: color-mix(in oklab, var(--primary) 12%, transparent);
    border-color: color-mix(in oklab, var(--primary) 30%, transparent);
    color: var(--primary);
  }

  /* Blöcke */
  .blockList { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }

  .block {
    background: var(--card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    padding: 0;
    overflow: hidden;
    transition: border-color 0.2s ease;
  }
  .block:hover { border-color: var(--border-strong); }

  .blockHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-color);
  }

  .blockType {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--foreground);
  }
  .blockTypeIcon { font-size: 15px; flex: 0 0 auto; }

  .blockNum {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--primary) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--primary) 26%, transparent);
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }

  .block-act {
    width: 30px;
    height: 30px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 13px;
  }
  .block-act:disabled { opacity: 0.3; }
  .block-act.del:not(:disabled):hover {
    background: var(--danger-surface);
    border-color: color-mix(in oklab, var(--danger) 28%, transparent);
    color: var(--danger);
  }

  .blockFields {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .blockFields textarea { min-height: 84px; }
  .blockFields textarea.tall { min-height: 120px; }

  /* Abstimmungszeile */
  .abstRow {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.4fr;
    gap: 10px;
    align-items: end;
  }
  .abstLabel {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted-foreground);
    margin-bottom: 4px;
  }

  .pauseBlock { display: flex; align-items: center; gap: 10px; }
  .pauseBlock input { flex: 1 1 auto; }

  /* Leerer Editor */
  .emptyBlocks {
    background: var(--surface-1);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-card);
  }

  /* Exportleiste */
  .exportBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    padding: 18px 20px;
  }
  .exportInfo { font-size: 14px; color: var(--muted-foreground); }

  @media (max-width: 640px) {
    .abstRow { grid-template-columns: 1fr 1fr; }
    .exportBar { flex-direction: column; align-items: stretch; }
    .exportBtns { width: 100%; }
    .exportBtns > * { flex: 1 1 auto; justify-content: center; }
  }

/* ---------- 7.2  Anwärter ---------- */
/* Kacheln, Werkzeugleiste und Liste stehen als eigene Karten untereinander —
   nicht mehr alles zusammen in einer großen. */
  .anwInhalt { display: grid; gap: 16px; }

  /* Suche und Auswahlfelder links, Zähler und Knöpfe rechts — und die drei
     Knöpfe brechen gemeinsam um, nicht einzeln. */
  .anwWerkzeuge { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

  @media (min-width: 641px) {
    /* Damit alles in eine Zeile passt: die Suche gibt nach, und
       „Neueste zuerst“ bekommt ein paar Pixel mehr als „Ressort (alle)“. */
    .anwInhalt .toolbar__search { flex: 1 1 200px; }
    .anwInhalt .toolbar__select { flex: 0 1 160px; min-width: 140px; }
    .anwInhalt #sortBy { flex: 0 1 180px; }
    .anwInhalt .toolbar__count { margin-left: auto; }
  }

  @media (max-width: 640px) {
    /* „Neueste zuerst“ wird neben dem Ressort abgeschnitten — auf dem Handy
       bekommt die Sortierung deshalb eine eigene Zeile. */
    .anwInhalt #sortBy { flex: 1 1 100%; }
    .anwInhalt .toolbar__count { flex: 1 1 100%; }
    .anwWerkzeuge { flex: 1 1 100%; }
    .anwWerkzeuge button { flex: 1 1 0; min-width: 0; justify-content: center; }
  }

  /* Sechs Spalten passen mit der Standardpolsterung nicht in die
     Inhaltsbreite — 10 px je Seite reichen. Die Knopfzeile bleibt dabei
     einzeilig; wird das Fenster doch zu schmal, schiebt `.tableWrap`. */
  .anwInhalt th,
  .anwInhalt td { padding-left: 10px; padding-right: 10px; }

  .anwMailTh { width: 1%; }
  .anwAktionenTh { width: 1%; text-align: right; }
  .anwAktionenTd .actions { justify-content: flex-end; flex-wrap: nowrap; gap: 6px; }

  .anwLeer { color: var(--faint-foreground); }

  .anwTel { color: var(--primary); text-decoration: none; white-space: nowrap; }
  .anwTel:hover { text-decoration: underline; }

  .anwMail { text-decoration: none; }
  .anwMail:hover { color: var(--primary); text-decoration: underline; }

  /* Gibt es ein Foto, führt das Bildchen selbst hin. */
  .anwFoto { display: inline-flex; border-radius: 999px; }
  .anwFoto:hover .avatarSmall { border-color: color-mix(in oklab, var(--primary) 45%, transparent); }

  /* Dieselbe Zeile als Karte, fürs Handy. Sie ist zum Lesen und Drücken da,
     aber nicht als Ganzes anklickbar — also ohne Zeiger und ohne Anheben. */
  .anwKarte { cursor: default; }
  .anwKarte:hover {
    transform: none;
    border-color: var(--border-color);
    box-shadow: var(--shadow-soft);
  }
  .anwKarte .pillRow { margin: 12px 0; }

  .anwKarteZeilen {
    display: grid;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
  }

  .anwKarteZeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
  }

  .anwKarteLabel {
    font-size: 11px;
    font-weight: 500;
    color: var(--faint-foreground);
  }

  /* Drei Knöpfe, die sich die Breite teilen und umbrechen, wenn sie zu
     dritt nicht mehr lesbar wären. */
  .anwKarteAktionen {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
    gap: 8px;
  }
  .anwKarteAktionen button { width: 100%; }

  /* Fotovorschau im Bearbeiten-Dialog */
  .photoPreview {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-lg);
    background: var(--secondary);
    border: 1px solid var(--border-color);
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 600;
    color: var(--foreground);
    overflow: hidden;
  }

  .photoPreview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

/* ---------- 7.3  Bewerbungen ---------- */
  /* Abstand der Angabenliste im Detaildialog. Alles Übrige — Karte,
     Foto, Kacheln — steht in bewerbungen.html selbst. */
  .kv { margin: 14px 0; }

/* ---------- 7.4  Dashboard ---------- */
/* Die Startseite hält nur, was die Rolle wirklich braucht: eine Reihe
   Kennzahlen und darunter, was offen ist. Auswertungen stehen auf den
   Seiten, zu denen sie gehören. */

.dash {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* --- Begrüssung --- */
.dashHello {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dashHelloTitle {
  margin: 0;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.dashHelloMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- Kennzahlen --- */
.dashStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.statTile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  text-align: left;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), border-color 0.25s ease, box-shadow 0.25s ease;
}

.statTile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  box-shadow: var(--shadow-soft);
}

.statTile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.statTile__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
}

.statTile__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--secondary);
  border: 1px solid var(--border-color);
  font-size: 15px;
}

.statTile__value {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}

.statTile__sub {
  font-size: 12px;
  color: var(--muted-foreground);
  line-height: 1.4;
}

/* Warm wird eine Kachel nur, wenn hinter der Zahl Arbeit steckt. */
.statTile.is-warn { border-color: color-mix(in oklab, var(--warning) 34%, transparent); }
.statTile.is-warn .statTile__value { color: var(--warning); }
.statTile.is-warn .statTile__icon  { background: var(--warning-surface); border-color: color-mix(in oklab, var(--warning) 28%, transparent); }

/* --- Was offen ist --- */
.panel { padding: 20px; }

.panelTitle {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.panelEmpty {
  font-size: 13px;
  color: var(--muted-foreground);
}

.todoList {
  display: flex;
  flex-direction: column;
}

.todoItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--border-color);
  color: inherit;
  text-decoration: none;
}

.todoItem:first-child { border-top: none; padding-top: 0; }
.todoItem:last-child  { padding-bottom: 0; }
.todoItem:hover .todoText { color: var(--primary); }

.todoCount {
  flex: 0 0 auto;
  min-width: 30px;
  height: 26px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  background: var(--secondary);
  border: 1px solid var(--border-color);
}

.todoCount.warn { background: var(--warning-surface); border-color: color-mix(in oklab, var(--warning) 28%, transparent); color: var(--warning); }
.todoCount.bad  { background: var(--danger-surface);  border-color: color-mix(in oklab, var(--danger) 28%, transparent);  color: var(--danger); }
.todoCount.info { background: var(--info-surface);    border-color: color-mix(in oklab, var(--info) 28%, transparent);    color: var(--info); }

.todoText {
  font-size: 13px;
  line-height: 1.45;
  transition: color 0.2s ease;
}

/* --- Systemstatus (nur Vorstand) --- */
.sysHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.sysHead .panelTitle { margin-bottom: 0; }

.sysMeta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sysSumme {
  font-size: 12px;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.sysSumme[data-ton="ok"]   { color: var(--success); }
.sysSumme[data-ton="warn"] { color: var(--warning); }
.sysSumme[data-ton="bad"]  { color: var(--danger); }

.sysRefresh {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.sysRefresh:hover { color: var(--foreground); border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
.sysRefresh.is-spinning { animation: sysSpin 0.9s linear infinite; }

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

.sysList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Jede Kachel trägt ihre Lage als Farbe: grün, gelb, rot. */
.sysItem {
  --ton: var(--faint-foreground);
  --ton-surface: var(--secondary);
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--ton) 30%, var(--border-color));
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--ton-surface), transparent 85%), var(--card);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s var(--ease), border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Farbstreifen links */
.sysItem::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ton);
}

.sysItem:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--ton) 55%, transparent);
  box-shadow: var(--shadow-soft);
}

.sysItem[data-ton="ok"]   { --ton: var(--success); --ton-surface: var(--success-surface); }
.sysItem[data-ton="warn"] { --ton: var(--warning); --ton-surface: var(--warning-surface); }
.sysItem[data-ton="bad"]  { --ton: var(--danger);  --ton-surface: var(--danger-surface); }

/* Logo in Markenfarbe */
.sysLogo {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--brand);
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 26%, transparent);
}

.sysLogo svg { width: 20px; height: 20px; }

.sysLogoFs {
  width: 30px;
  height: 30px;
  background: currentColor;
  -webkit-mask: url("/logo-fs-mark.png") center / contain no-repeat;
          mask: url("/logo-fs-mark.png") center / contain no-repeat;
}

.sysItem[data-dienst="supabase"] { --brand: #3ecf8e; }
.sysItem[data-dienst="github"]   { --brand: var(--foreground); }
.sysItem[data-dienst="domain"]   { --brand: var(--foreground); }

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

.sysName {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sysText {
  font-size: 12px;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sysItem[data-ton="warn"] .sysText,
.sysItem[data-ton="bad"]  .sysText { color: var(--ton); }

/* Status-Chip rechts */
.sysChip {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ton);
  background: var(--ton-surface);
  border: 1px solid color-mix(in oklab, var(--ton) 30%, transparent);
}

.sysDot {
  position: relative;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ton);
}

/* Ein leiser Puls zeigt: hier wird live geprüft. */
.sysDot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ton);
  opacity: 0;
  animation: sysPulse 2.4s ease-out infinite;
}

@keyframes sysPulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { opacity: 0; }
}

.sysItem[data-ton="pending"] .sysDot::after { animation: none; }

@media (max-width: 900px) {
  .sysList { grid-template-columns: 1fr; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .sysDot::after, .sysRefresh.is-spinning { animation: none; }
}

/* Kachel, deren Zahl noch nachgeladen wird */
.isPending { color: var(--faint-foreground); }

@media (max-width: 640px) {
  .dashStats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .statTile { padding: 14px; }
  .statTile__value { font-size: 26px; }
  .panel { padding: 16px; }
}

@media (max-width: 380px) {
  .dashStats { grid-template-columns: 1fr; }
}

/* ---------- 7.5  Finanzen ---------- */
/* Betrag rechts oben auf der Belegkarte */
  .rCard .cardAmount { margin-left: auto; }

  /* Hinweisfläche, wenn der Zugriff fehlt */
  .denyBox .iconBox { margin: 0 auto 14px; }

/* ---------- 7.6  Anwesenheit MV ---------- */
/* Begründung in der Tabelle */
  .reasonText {
    font-size: 12px;
    color: var(--muted-foreground);
    font-style: italic;
  }

  /* Lade-/Fehlerfläche */
  .stateBox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    font-size: 14px;
    color: var(--muted-foreground);
    box-shadow: none;
    border: none;
    background: none;
  }

/* ---------- 7.7  Abstimmung (öffentlich) ---------- */
/* Code entry */
    .code-container {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin: 16px 0;
    }

.code-input {
      width: 48px;
      height: 58px;
      border-radius: var(--radius-control);
      text-align: center;
      font-size: 21px;
      font-weight: 600;
      letter-spacing: 0;
      text-transform: uppercase;
      padding: 0;
    }

/* Primary button for voting page */
    .btnPrimary {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 48px;
      margin-top: 20px;
      padding: 0 24px;
      background: var(--primary);
      color: var(--primary-foreground);
      font-family: inherit;
      font-size: 15px;
      font-weight: 600;
      border: none;
      border-radius: 999px;
      cursor: pointer;
      box-shadow: var(--shadow-soft);
      transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease);
    }

.btnPrimary:not(:disabled):hover {
      transform: translateY(-1px);
      background: color-mix(in oklab, var(--primary) 88%, var(--foreground));
      box-shadow: var(--shadow-glow);
    }

.btnPrimary:disabled { opacity: 0.45; cursor: not-allowed; }

/* Vote option buttons */
    .optBtn {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      padding: 14px 18px;
      height: auto;
      background: var(--surface-1);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-control);
      font-size: 15px;
      font-weight: 500;
      color: var(--foreground);
      text-align: left;
      cursor: pointer;
      font-family: inherit;
      margin-bottom: 10px;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

.optBtn:hover {
      background: var(--surface-2);
      border-color: var(--border-strong);
    }

.optBtn.selected {
      background: color-mix(in oklab, var(--primary) 14%, transparent);
      border-color: color-mix(in oklab, var(--primary) 38%, transparent);
      color: var(--primary);
      font-weight: 600;
    }

/* Step buttons for delegation count */
    .countStepper {
      display: flex;
      align-items: center;
      gap: 12px;
    }

.stepBtn {
      width: 36px;
      height: 36px;
      border-radius: 999px;
      border: 1px solid var(--border-color);
      background: var(--secondary);
      color: var(--foreground);
      font-size: 17px;
      font-weight: 500;
      display: grid;
      place-items: center;
      cursor: pointer;
      font-family: inherit;
      padding: 0;
      transition: background 0.14s;
    }

.stepBtn:hover:not(:disabled) { background: var(--surface-3); }

.stepBtn:disabled { opacity: 0.35; cursor: not-allowed; }

.countDisplay {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 600;
      min-width: 28px;
      text-align: center;
    }

/* Delegation section */
    .delegationSection {
      margin-top: 20px;
      padding: 16px;
      background: var(--surface-1);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-control);
    }

.delegationTitle {
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 12px;
    }

.delegationCountRow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

.delegationNames {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
    }

.delegationNameInput {
      width: 100%;
    }

/* Animation container */
    .anim-container {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 50;
    }

/* Loader ring animation */
    .loader-ring {
      position: absolute;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: var(--anim-color-light);
      opacity: 0;
      transform: scale(0.5) rotate(0deg);
      box-shadow: 0 0 30px var(--anim-color-light);
    }

/* White flash */
    .white-flash {
      position: absolute;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--foreground);
      opacity: 0;
      transform: scale(0.5);
    }

/* Shockwave */
    .shockwave {
      position: absolute;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 2px solid var(--anim-color-light);
      opacity: 0;
      transform: scale(0.5);
    }

/* Main icon */
    .main-icon {
      position: absolute;
      width: 80px;
      height: 80px;
      opacity: 0;
      transform: scale(0.5);
    }

.main-icon svg {
      width: 100%;
      height: 100%;
    }

/* Ambient glow for animation */
    .ambient-glow {
      position: absolute;
      width: 240px;
      height: 240px;
      border-radius: 50%;
      opacity: 0;
      transform: scale(0.8);
      background: radial-gradient(circle, var(--anim-color-light), transparent 70%);
    }

0%, 100% { opacity: 0.35; transform: scale(1); }

50% { opacity: 0.55; transform: scale(1.15); }

from { opacity: 0; transform: translateY(16px); }

to   { opacity: 1; transform: translateY(0); }

/* Animation text block */
    .anim-text {
      position: fixed;
      bottom: 15%;
      left: 0;
      right: 0;
      text-align: center;
      opacity: 0;
      transform: translateY(20px);
    }

.anim-title {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 600;
      letter-spacing: -0.03em;
    }

.anim-sub {
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 8px;
    }

@keyframes pulseAmbient {
      0%, 100% { opacity: 0.35; transform: scale(1); }
      50% { opacity: 0.55; transform: scale(1.15); }
    }

@keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

/* ---------- 7.8  Schreiben-Composer ---------- */
/* Die Seite /schreiben: links die Schritte, auf Wunsch das Blatt.
   Die Absätze borgen sich die Bausteine des Protokoll-Editors
   (.block, .blockHeader, .blockFields) — hier steht nur, was es
   dort nicht schon gibt. */

.composerHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.composerMeta {
  font-size: 12px;
  color: var(--muted-foreground);
  letter-spacing: -0.01em;
}

.composerStack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --- Schritt-Karte --- */
.stepCard {
  background: var(--card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 18px 20px;
}

.stepHead {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.stepNum {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 28%, transparent);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
}

.stepTitle {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.stepHint {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 3px;
  line-height: 1.45;
  max-width: 62ch;
}

.stepActions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Art des Schreibens --- */
.artGruppe + .artGruppe { margin-top: 16px; }

.artGruppeTitel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint-foreground);
  margin-bottom: 9px;
}

.artGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.artCard {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  height: auto;
  padding: 13px 14px;
  text-align: left;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: var(--foreground);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease);
}

.artCard:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.artCard.active {
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  border-color: color-mix(in oklab, var(--primary) 42%, transparent);
}

.artIcon { font-size: 18px; line-height: 1.25; flex: 0 0 auto; }

.artLabel {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.artKurz {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted-foreground);
  margin-top: 3px;
  line-height: 1.45;
  white-space: normal;
}

.artCard.active .artLabel { color: var(--primary); }

/* --- Empfänger --- */
.empfZeile { margin-bottom: 4px; }

.empfChip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
  max-width: 100%;
}

.empfChipName { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.empfChipMeta { font-size: 12px; color: var(--muted-foreground); }

.empfChipWeg {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 12px;
}

.empfChipWeg:hover { background: var(--surface-2); color: var(--foreground); }

.empfLeer { font-size: 13px; color: var(--muted-foreground); }

.mpItem.active {
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  color: var(--primary);
}

.mpEmpty {
  padding: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--muted-foreground);
}

/* --- Aufzählungen in einem Absatz --- */
.bulletList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.bulletRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bulletDot { flex: 0 0 auto; color: var(--faint-foreground); font-size: 16px; line-height: 1; }
.bulletRow input { flex: 1 1 auto; min-width: 0; height: 36px; font-size: 14px; }
.bulletRow .iconBtn { width: 32px; height: 32px; font-size: 12px; }

/* --- Satzungsauszug --- */
.satzChips { display: flex; flex-wrap: wrap; gap: 6px; }

.satzChip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: auto;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--surface-1);
  color: var(--muted-foreground);
  font-size: 12.5px;
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.satzChip:hover { background: var(--surface-2); color: var(--foreground); }

.satzChip.active {
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  border-color: color-mix(in oklab, var(--primary) 34%, transparent);
  color: var(--primary);
}

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

.satzQuote {
  margin-top: 12px;
  padding: 11px 14px;
  border-left: 3px solid color-mix(in oklab, var(--primary) 40%, transparent);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background: var(--surface-1);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted-foreground);
}

.satzQuote p { margin: 0 0 8px; }
.satzQuote p:last-child { margin-bottom: 0; }
.satzQuote b { color: var(--foreground); }

.satzLeer { margin-top: 10px; font-size: 12.5px; color: var(--faint-foreground); }

/* --- Unterschriften --- */
.signGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.signCard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}

.signCardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint-foreground);
}

.signCardHead .iconBtn { width: 28px; height: 28px; font-size: 12px; }

/* --- Das Blatt ---
   Die Vorschau soll kein Abbild des Dokuments sein, sondern das
   Dokument: dieselbe Schrift, dieselben Farben, dieselben Maße wie
   in der Word-Datei und im Druck — nur in Pixeln statt in Punkt.

   --pt ist der Umrechner, ein Punkt in Pixeln. Jede Länge hier ist
   ein Vielfaches davon und trägt die Zahl, die auch im DOKUMENT_CSS
   von schreiben.html steht; wer eine Zahl ändert, ändert sie an
   beiden Stellen. Kleiner gesetzt schiebt --pt das ganze Blatt
   zusammen, ohne ein einziges Verhältnis zu verschieben — so passt
   die Seite auf ein Telefon, ohne ihre Gestalt zu verlieren.

   Alles unter .briefSheet ist bewusst eine Stufe spezifischer als
   nötig. Im Dokument steht `p` gegen `.briefOrt`, und die Klasse
   gewinnt; hier stünde `.briefSheet p` gegen `.briefOrt`, und der
   Absatz verlöre seinen Abstand. Die gemeinsame Stufe hält beide
   Kaskaden in derselben Reihenfolge.

   Papier bleibt weiß, auch wenn die App dunkel steht: ein Zeugnis
   wird gedruckt und unterschrieben, nicht am Bildschirm gelesen.
   Dunkel ist nur der Rahmen darum. */

.sheetWrap { display: flex; justify-content: center; }

.briefSheet {
  --pt: calc(4px / 3); /* ein Punkt in Pixeln */
  --breite: 595.28;    /* DIN A4: 21 cm */
  --rand: 70.87;       /* Seitenrand: 2,5 cm */
  --randUnten: 56.69;  /* unten: 2 cm */

  width: 100%;
  max-width: calc(var(--breite) * var(--pt));
  padding: calc(var(--rand) * var(--pt)) calc(var(--rand) * var(--pt)) calc(var(--randUnten) * var(--pt));
  background: #fff;
  color: #1a1a1a;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: calc(11 * var(--pt));
  line-height: 1.6;
  /* Der Rahmen liegt außen auf (outline), nicht innen: eine Linie,
     die das Blatt schmaler macht, verschiebt den Zeilenumbruch
     gegenüber der Word-Datei. */
  outline: 1px solid var(--border-color);
  box-shadow: var(--shadow-pop);
}

/* Schmaler Bildschirm: erst rückt der Seitenrand ein, dann das
   ganze Blatt — die Schriftgrade folgen von selbst. */
@media (max-width: 860px) {
  .briefSheet { --rand: 42.52; --randUnten: 42.52; }
}

@media (max-width: 640px) {
  .briefSheet { --pt: 1.15px; --rand: 28.35; --randUnten: 28.35; }
}

.briefSheet p { margin: 0 0 calc(8 * var(--pt)); }

/* Die App setzt Fettes auf 600; Arial im Dokument kennt nur
   normal und bold. Auf dem Blatt gilt das Dokument. */
.briefSheet strong, .briefSheet b { font-weight: bold; }

.briefSheet .briefKopf {
  border-bottom: calc(1.5 * var(--pt)) solid #1a1a1a;
  padding-bottom: calc(6 * var(--pt));
  margin-bottom: calc(22 * var(--pt));
}

.briefSheet .briefKopfName {
  font-size: calc(13 * var(--pt));
  font-weight: bold;
  letter-spacing: 0.02em;
}

.briefSheet .briefKopfZeile {
  font-size: calc(8.5 * var(--pt));
  color: #555;
  margin-top: calc(2 * var(--pt));
}

.briefSheet .briefAbsender {
  font-size: calc(7.5 * var(--pt));
  color: #666;
  border-bottom: calc(0.5 * var(--pt)) solid #bbb;
  padding-bottom: calc(2 * var(--pt));
  margin-bottom: calc(8 * var(--pt));
}

.briefSheet .briefAnschrift {
  font-size: calc(11 * var(--pt));
  line-height: 1.45;
  margin-bottom: calc(24 * var(--pt));
}

.briefSheet .briefDatum {
  text-align: right;
  font-size: calc(10 * var(--pt));
  color: #444;
  margin-bottom: calc(22 * var(--pt));
}

.briefSheet .briefBetreff {
  font-size: calc(11.5 * var(--pt));
  font-weight: bold;
  margin-bottom: calc(16 * var(--pt));
}

.briefSheet .briefTitel {
  text-align: center;
  font-size: calc(16 * var(--pt));
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: calc(6 * var(--pt)) 0 calc(22 * var(--pt));
}

.briefSheet .briefListe { margin: calc(4 * var(--pt)) 0 calc(10 * var(--pt)); padding-left: calc(18 * var(--pt)); }
.briefSheet .briefListe li { margin: calc(3 * var(--pt)) 0; }

.briefSheet .briefZitat {
  border-left: calc(2 * var(--pt)) solid #888;
  background: #f5f5f5;
  padding: calc(8 * var(--pt)) calc(12 * var(--pt));
  margin: calc(14 * var(--pt)) 0;
  font-size: calc(9.5 * var(--pt));
  color: #333;
}

.briefSheet .briefZitatKopf {
  font-size: calc(8.5 * var(--pt));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #666;
  margin-bottom: calc(6 * var(--pt));
}

.briefSheet .briefZitat p { margin: 0 0 calc(6 * var(--pt)); }

.briefSheet .briefGruss { margin-top: calc(16 * var(--pt)); }
.briefSheet .briefOrt { margin-top: calc(18 * var(--pt)); }

/* Die Tabellen der App haben mit dieser hier nichts zu tun. Ohne
   den Rückbau erbt die Unterschriftenzeile Zellenpolster, eine
   Trennlinie und die Hover-Farbe der Listen — und steht tiefer als
   im Dokument. */
.briefSheet .briefSig {
  width: 100%;
  border-collapse: collapse;
  font-size: inherit;
  margin-top: calc(46 * var(--pt));
}

.briefSheet .briefSig td {
  /* 1px ist kein gegriffener Wert, sondern das Zellenpolster, das
     jeder Browser von sich aus setzt — im Word-Dokument steht keine
     td-Regel, dort gilt genau dieses eine Pixel. */
  padding: 1px;
  border: 0;
  background: none;
  text-align: start;
  vertical-align: top;
}

.briefSheet .briefSig tr:hover { background: none; }

.briefSheet .briefSig .briefSigZelle {
  border-top: calc(0.75 * var(--pt)) solid #555;
  padding-top: calc(5 * var(--pt));
  text-align: center;
  font-size: calc(10 * var(--pt));
}

.briefSheet .briefSigRolle { font-size: calc(8.5 * var(--pt)); color: #555; }
.briefSheet .briefSigLuecke { width: 8%; }

.briefSheet .briefFuss {
  margin-top: calc(30 * var(--pt));
  padding-top: calc(6 * var(--pt));
  border-top: calc(0.5 * var(--pt)) solid #ccc;
  text-align: center;
  font-size: calc(8 * var(--pt));
  color: #777;
}

/* ============================================================
   KONTO — E-Mail ändern, Passkeys
   Der Dialog aus konto.js. Er borgt sich Kopf, Körper und
   Knopfzeile von den übrigen Dialogen; eigen ist nur die Liste
   der hinterlegten Geräte.
   ============================================================ */

.kontoMsg {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.kontoMsg:empty { display: none; }
.kontoMsg.error   { color: var(--danger); }
.kontoMsg.success { color: var(--success); }

.pkListe {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 12px;
}

.pkZeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 14px);
  background: var(--surface-2, var(--secondary));
}

.pkText { min-width: 0; }

.pkName {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pkMeta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted-foreground);
}

.pkWeg {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.pkLeer {
  padding: 16px;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md, 14px);
  font-size: 13px;
  text-align: center;
  color: var(--muted-foreground);
}

.pkAktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 480px) {
  .pkZeile { align-items: flex-start; flex-direction: column; }
  .pkWeg { align-self: stretch; }
}


/* ============================================================
   Akzentfarbe
   ------------------------------------------------------------
   Gewählt unter „Mein Konto → Darstellung“, gesetzt von theme.js
   als data-akzent am <html>. Blau ist der Standard und braucht
   keine eigene Regel. Alles, was die Akzentfarbe trägt, hängt an
   --primary und --ring.
   ============================================================ */
:root[data-akzent="violett"] { --primary: oklch(0.53 0.21 295); --ring: oklch(0.53 0.21 295); }
:root.dark[data-akzent="violett"] { --primary: oklch(0.75 0.15 295); --ring: oklch(0.75 0.15 295); }
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark)[data-akzent="violett"] { --primary: oklch(0.75 0.15 295); --ring: oklch(0.75 0.15 295); }
}
:root[data-akzent="gruen"] { --primary: oklch(0.52 0.14 155); --ring: oklch(0.52 0.14 155); }
:root.dark[data-akzent="gruen"] { --primary: oklch(0.76 0.15 155); --ring: oklch(0.76 0.15 155); }
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark)[data-akzent="gruen"] { --primary: oklch(0.76 0.15 155); --ring: oklch(0.76 0.15 155); }
}
:root[data-akzent="tuerkis"] { --primary: oklch(0.53 0.10 205); --ring: oklch(0.53 0.10 205); }
:root.dark[data-akzent="tuerkis"] { --primary: oklch(0.77 0.11 205); --ring: oklch(0.77 0.11 205); }
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark)[data-akzent="tuerkis"] { --primary: oklch(0.77 0.11 205); --ring: oklch(0.77 0.11 205); }
}
:root[data-akzent="orange"] { --primary: oklch(0.57 0.17 45); --ring: oklch(0.57 0.17 45); }
:root.dark[data-akzent="orange"] { --primary: oklch(0.77 0.15 55); --ring: oklch(0.77 0.15 55); }
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark)[data-akzent="orange"] { --primary: oklch(0.77 0.15 55); --ring: oklch(0.77 0.15 55); }
}
:root[data-akzent="rosa"] { --primary: oklch(0.56 0.20 355); --ring: oklch(0.56 0.20 355); }
:root.dark[data-akzent="rosa"] { --primary: oklch(0.76 0.14 355); --ring: oklch(0.76 0.14 355); }
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark)[data-akzent="rosa"] { --primary: oklch(0.76 0.14 355); --ring: oklch(0.76 0.14 355); }
}


/* ============================================================
   Einstellungen (konto.js)
   ------------------------------------------------------------
   Links die Bereiche, rechts der Inhalt. Die Höhe bleibt beim
   Umschalten gleich, damit der Dialog nicht springt.
   ============================================================ */
.kontoDlg .dlgShell { max-width: 780px; width: 100%; }
@media (min-width: 641px) {
  dialog.kontoDlg { width: min(812px, calc(100vw - 32px)); }
}

.setLayout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  border-top: 1px solid var(--border-color);
}

.setNav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--border-color);
  background: var(--surface-1, transparent);
}

.setNavBtn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-foreground);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.setNavBtn svg { width: 17px; height: 17px; flex: none; }
.setNavBtn:hover { background: var(--accent-surface); color: var(--foreground); }

.setNavBtn[aria-selected="true"] {
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  color: var(--primary);
  font-weight: 600;
}

.setInhalt {
  min-height: min(440px, calc(100dvh - 180px));
  max-height: calc(100dvh - 180px);
  overflow-y: auto;
  padding: 20px 24px 24px;
  -webkit-overflow-scrolling: touch;
}

.setPanel[hidden] { display: none; }

.setGruppe + .setGruppe {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border-color);
}

.setGruppeKopf { margin-bottom: 12px; }

.setGruppeTitel {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

.setGruppeText {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.setHinweis {
  margin-top: 22px;
  font-size: 12px;
  color: var(--faint-foreground);
}

.setWert {
  font-size: 14px;
  font-weight: 500;
  color: var(--foreground);
  word-break: break-all;
}

.setZeile {
  display: flex;
  gap: 10px;
}

.setZeile input { flex: 1 1 auto; min-width: 0; }
.setZeile button { flex: 0 0 auto; }

.kontoDlg .pkListe { margin-top: 0; }

/* ---- Design: drei kleine Vorschauen ---- */
.designWahl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.designBtn {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--surface-2, var(--secondary));
  color: var(--foreground);
  cursor: pointer;
  text-align: left;
}

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

.designVorschau {
  position: relative;
  display: block;
  height: 58px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid oklch(0 0 0 / 10%);
}

.designVorschau--light  { background: oklch(0.968 0.001 260); }
.designVorschau--dark   { background: oklch(0.19 0.006 260); }
.designVorschau--system {
  background: linear-gradient(135deg, oklch(0.968 0.001 260) 50%, oklch(0.19 0.006 260) 50%);
}

/* Eine Karte, zwei Zeilen und ein Knopf in der Akzentfarbe */
.designVorschau span { position: absolute; border-radius: 4px; }
.designVorschau span:nth-child(1) { left: 10px; top: 10px; width: 46%; height: 7px; background: oklch(0.6 0 0 / 45%); }
.designVorschau span:nth-child(2) { left: 10px; top: 23px; width: 30%; height: 7px; background: oklch(0.6 0 0 / 30%); }
.designVorschau span:nth-child(3) { left: 10px; bottom: 9px; width: 34%; height: 11px; background: var(--primary); border-radius: 6px; }

.designName {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  font-size: 13px;
  font-weight: 500;
}

.designName svg { width: 15px; height: 15px; flex: none; color: var(--muted-foreground); }

.designBtn[aria-checked="true"],
.akzentBtn[aria-checked="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 28%, transparent);
}

.designBtn[aria-checked="true"] .designName { font-weight: 600; }
.designBtn[aria-checked="true"] .designName svg { color: var(--primary); }

/* ---- Akzentfarbe ---- */
.akzentWahl {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.akzentBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 4px 9px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--surface-2, var(--secondary));
  color: var(--foreground);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

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

.akzentPunkt {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--akzent-licht);
  color: oklch(0.99 0 0);
}

.akzentPunkt svg { width: 16px; height: 16px; opacity: 0; transition: opacity 0.15s; }
.akzentBtn[aria-checked="true"] .akzentPunkt svg { opacity: 1; }
.akzentBtn[aria-checked="true"] .akzentName { font-weight: 600; }

:root.dark .akzentPunkt { background: var(--akzent-dunkel); color: oklch(0.16 0.01 260); }
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) .akzentPunkt { background: var(--akzent-dunkel); color: oklch(0.16 0.01 260); }
}

/* ---- Telefon: Bereiche als Reiter oben ---- */
@media (max-width: 640px) {
  .setLayout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .setNav {
    flex-direction: row;
    gap: 4px;
    padding: 8px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
  }
  .setNavBtn { flex: 1 1 0; justify-content: center; height: 36px; padding: 0 8px; font-size: 13px; }
  .setInhalt { min-height: 0; max-height: none; padding: 18px 18px 22px; }
  .akzentWahl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .designName { font-size: 12px; gap: 4px; }
  .designName svg { display: none; }
  .setZeile { flex-direction: column; }
}


/* ============================================================
   7  Design 2026 — Seitenleiste auf Schiefer, helle Fläche
   ------------------------------------------------------------
   Liegt bewusst als letzte Ebene über allem: der Hintergrund wie
   auf der Login-Seite (Anthrazit nach Schiefergrau), darauf die
   dunkle Seitenleiste aus app-shell.js und die helle
   Inhaltsfläche. Überschriften in Geist. Hauptknöpfe, Fokus und
   der aktive Punkt tragen die Akzentfarbe aus den Einstellungen
   (--primary, siehe [data-akzent] weiter oben).
   ============================================================ */
:root {
  --font-headline: "Geist", var(--font-sans);

  /* Der Rahmen hinter Seitenleiste und Inhaltsfläche – dieselben
     zwei Farben wie auf /login. */
  --shell-verlauf: linear-gradient(135deg, #15171c 0%, #56637a 100%);

  --background: oklch(0.965 0.003 260);
  --foreground: oklch(0.17 0.006 260);
  --card: oklch(1 0 0);
  --popover: oklch(1 0 0);
  --secondary: oklch(0.96 0.004 260);
  --muted-surface: oklch(0.96 0.004 260);
  --accent-surface: oklch(0.935 0.005 260);
  --muted-foreground: oklch(0.46 0.012 260);
  --faint-foreground: oklch(0.62 0.01 260);
  --border-color: oklch(0.3 0.02 260 / 10%);
  --border-strong: oklch(0.3 0.02 260 / 18%);
  --input-border: oklch(0.3 0.02 260 / 16%);
  --surface-1: oklch(0.3 0.02 260 / 4%);
  --surface-2: oklch(0.3 0.02 260 / 6%);
  --surface-3: oklch(0.3 0.02 260 / 9%);

  --shell-main: oklch(0.99 0.002 260);
  --shell-schatten: 0 30px 80px -30px oklch(0.1 0.02 260 / 60%);
  --shadow-soft: 0 1px 2px oklch(0.2 0.02 260 / 5%);
  --shadow-card: 0 1px 2px oklch(0.2 0.02 260 / 5%), 0 18px 40px -30px oklch(0.2 0.03 260 / 30%);
}

:root.dark {
  --background: oklch(0.17 0.008 260);
  --foreground: oklch(0.96 0.004 260);
  --card: oklch(0.235 0.009 260);
  --popover: oklch(0.25 0.009 260);
  --secondary: oklch(0.27 0.009 260);
  --muted-surface: oklch(0.27 0.009 260);
  --accent-surface: oklch(0.3 0.01 260);
  --muted-foreground: oklch(0.74 0.01 260);
  --faint-foreground: oklch(0.6 0.01 260);
  --border-color: oklch(1 0 0 / 8%);
  --border-strong: oklch(1 0 0 / 15%);
  --input-border: oklch(1 0 0 / 14%);
  --shell-main: oklch(0.2 0.008 260);
  --shell-schatten: 0 30px 80px -30px oklch(0 0 0 / 70%);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) {
    --background: oklch(0.17 0.008 260);
    --foreground: oklch(0.96 0.004 260);
    --card: oklch(0.235 0.009 260);
    --popover: oklch(0.25 0.009 260);
    --secondary: oklch(0.27 0.009 260);
    --muted-surface: oklch(0.27 0.009 260);
    --accent-surface: oklch(0.3 0.01 260);
    --muted-foreground: oklch(0.74 0.01 260);
    --faint-foreground: oklch(0.6 0.01 260);
    --border-color: oklch(1 0 0 / 8%);
    --border-strong: oklch(1 0 0 / 15%);
    --input-border: oklch(1 0 0 / 14%);
    --shell-main: oklch(0.2 0.008 260);
    --shell-schatten: 0 30px 80px -30px oklch(0 0 0 / 70%);
  }
}

/* Ohne Seitenleiste (öffentliche Formulare): ruhig und hell. Die
   Seiten mit Seitenleiste bekommen den Schiefer-Verlauf weiter unten. */
html { background-image: none; }

/* ---------- Überschriften in Geist ---------- */
h1, h2, h3,
.pageHead h1 {
  font-family: var(--font-headline);
}
h1,
.pageHead h1 {
  font-weight: 650;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.modalTitle,
.empty__title,
.abschnittTitel { font-family: var(--font-headline); font-weight: 600; letter-spacing: -0.025em; }

/* ---------- Hauptknöpfe in der Akzentfarbe ---------- */
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: none;
}
.btn-primary:not(:disabled):hover {
  background: color-mix(in oklab, var(--primary) 86%, var(--foreground));
  box-shadow: none;
}
.btn-secondary { background: var(--secondary); }
.btn-ghost:hover { background: var(--secondary); }

/* ---------- Flächen ---------- */
.card,
.glass {
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}
.stat { border-radius: 18px; }
.tableCard { border-radius: 20px; box-shadow: var(--shadow-soft); }
thead tr { background: var(--secondary); }
th { border-bottom: none; font-weight: 500; }
input, select, textarea { border-radius: 12px; }
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
}

/* ============================================================
   Shell ab 769 px: Seitenleiste links, Inhaltsfläche rechts
   ============================================================ */
@media (min-width: 769px) {
  body.hatSidebar {
    background: var(--shell-verlauf) fixed;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    min-height: 100vh;
  }

  .siteSidebar {
    position: sticky;
    top: 14px;
    flex: 0 0 248px;
    height: calc(100vh - 28px);
    display: flex;
    flex-direction: column;
    padding: 18px 12px 12px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #fff;
  }

  .siteMain {
    flex: 1 1 auto;
    min-width: 0;
    min-height: calc(100vh - 28px);
    background: var(--shell-main);
    border: 1px solid var(--border-color);
    border-radius: 26px;
    box-shadow: var(--shell-schatten);
  }

  /* Kopf der Inhaltsfläche: Suche links, Aktionen rechts */
  .siteMain .siteHeader {
    border-bottom: none;
    border-radius: 26px 26px 0 0;
    background: color-mix(in oklab, var(--shell-main) 86%, transparent);
  }
  .siteMain .siteHeaderInner {
    max-width: none;
    height: 72px;
    padding: 0 28px;
    gap: 14px;
  }
  .siteHeader .siteLogo,
  .siteHeader .fsbsDevBadge { display: none; }
  .siteHeader .siteActions { margin-left: auto; }
  .siteHeader .siteActions::before { display: none; }

  .hatSidebar .app {
    max-width: 1180px;
    padding: 10px 36px 72px;
  }
}

@media (min-width: 769px) and (max-width: 1080px) {
  .siteSidebar { flex-basis: 214px; }
  .hatSidebar .app { padding: 6px 24px 64px; }
  .siteMain .siteHeaderInner { padding: 0 20px; }
}


/* ---------- Seitenleiste innen ---------- */
.sidebarKopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 16px;
}
/* Logo und Name links, das DEV-Schild rechtsbündig in derselben Zeile */
.sidebarKopf .fsbsDevBadge { order: 1; margin-left: auto; }
.sidebarKopf .siteLogoImg { height: 26px; }
.sidebarName {
  font-family: var(--font-headline);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}
/* Auf dem dunklen Grund steht immer das helle Zeichen */
.siteSidebar .siteLogoImg--light { display: none; }
.siteSidebar .siteLogoImg--dark { display: block; }

.siteSidebar .siteNav {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  overflow-y: auto;
}
.siteSidebar .navLeft {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.navGruppe {
  padding: 16px 12px 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
}
.navGruppe:first-child { padding-top: 4px; }

.siteSidebar .navLink {
  width: 100%;
  height: 42px;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}
.siteSidebar .navLink .navIcon { width: 18px; height: 18px; }
.siteSidebar .navLink:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
/* Aktiv: helle Fläche, das Zeichen in der Akzentfarbe */
.siteSidebar .navLink.active,
.siteSidebar .navLink.active:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.siteSidebar .navLink.active .navIcon {
  opacity: 1;
  color: color-mix(in oklab, var(--primary) 55%, #fff);
}

/* ---------- Konto unten in der Leiste ---------- */
.sidebarFuss {
  margin-top: auto;
  padding-top: 10px;
}
.siteSidebar .userMenu { display: block; width: 100%; }
.siteSidebar .userTrigger {
  width: 100%;
  max-width: none;
  height: 58px;
  padding: 0 12px 0 10px;
  gap: 11px;
  justify-content: flex-start;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.siteSidebar .userTrigger:hover { background: rgba(255, 255, 255, 0.12); }
.siteSidebar .authNameInline,
.siteSidebar .userChevron { color: #fff; }
.siteSidebar .userTrigger .authAvatar { width: 36px; height: 36px; font-size: 12px; }
.siteSidebar .userMenu.is-authed .userTriggerLabel { display: flex; }
.siteSidebar .authNameInline { max-width: 130px; font-size: 14px; font-weight: 600; }
.siteSidebar .userChevron { margin-left: auto; }
.siteSidebar .userPanel {
  top: auto;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  width: auto;
  transform-origin: bottom center;
}

/* ---------- Suche ---------- */
.siteSuche {
  position: relative;
  flex: 0 1 440px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 8px 0 14px;
  border-radius: 14px;
  background: var(--secondary);
  border: 1px solid var(--border-color);
  color: var(--muted-foreground);
}
.siteSuche:focus-within { background: var(--card); border-color: var(--border-strong); }
.siteSucheIcon { width: 17px; height: 17px; flex: none; }
.siteSuche .siteSucheFeld {
  flex: 1 1 auto;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
}
.siteSuche .siteSucheFeld:focus,
.siteSuche .siteSucheFeld:focus-visible { border: none; outline: none; box-shadow: none; }
.siteSuche .siteSucheFeld::-webkit-search-cancel-button { display: none; }
.siteSucheKbd {
  flex: none;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--border-color);
  font: 500 11px/1 var(--font-sans);
  color: var(--muted-foreground);
}
.siteSucheListe {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 70;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--popover);
  box-shadow: var(--shadow-pop);
  animation: scaleIn 0.14s var(--ease) both;
  transform-origin: top center;
}
.siteSucheListe[hidden] { display: none; }
.siteSucheTreffer {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--foreground);
  text-decoration: none;
  font-size: 14px;
}
.siteSucheTreffer .navIcon { opacity: 0.7; }
.siteSucheTreffer:hover,
.siteSucheTreffer.is-aktiv { background: var(--secondary); }
.siteSucheLeer { padding: 10px; font-size: 13px; color: var(--muted-foreground); }

/* ---------- Seitenkopf ---------- */
.pageHead,
.hatSidebar .pageHead {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 28px;
  padding-bottom: 0;
  border-bottom: none;
}
.pageHeadMeta { font-size: 15px; }

/* Aktive Filterkachel in der Akzentfarbe */
.stat--filter.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 14%, transparent);
}

/* Unter 769 px: keine Seitenleiste und keine Suche – Logo und Menü
   oben, wie bisher. Steht am Ende, damit es die Regeln darüber schlägt. */
@media (max-width: 768px) {
  .siteSidebar,
  .siteHeader .siteSuche { display: none; }

  /* Am Handy gibt es keine Seitenleiste – der Schiefer steckt im Kopf */
  .hatSidebar .siteHeader {
    background: var(--shell-verlauf);
    border-bottom: none;
  }
  .hatSidebar .siteHeader .siteLogoImg--light { display: none; }
  .hatSidebar .siteHeader .siteLogoImg--dark { display: block; }
  html:has(body.hatSidebar), body.hatSidebar { background: var(--shell-main); }
}

/* Auf dem dunklen Schiefer (Handy-Kopf): Menüknopf in hellen Tönen,
   sonst ginge er unter. */
@media (max-width: 768px) {
  .hatSidebar .siteHeader .hamburger {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
  }
}