/*!
 * Projektplaner — proprietaere Software.
 * Copyright (c) 2026 Georg Schreier. Alle Rechte vorbehalten. / All rights reserved.
 * Keine Nutzung, Vervielfaeltigung oder Weitergabe ohne schriftliche Zustimmung.
 * Details: LICENSE-Datei im Projektstamm.
 */
@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Local";
  src: url("/fonts/Roboto-Normal-100-900-3.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Local";
  src: url("/fonts/Roboto-Italic-100-900-1.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans Local";
  src: url("/fonts/OpenSans-Normal-300-800-3.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans Local";
  src: url("/fonts/OpenSans-Italic-300-800-1.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Local";
  src: url("/fonts/NotoSans-Normal-100-900-3.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Local";
  src: url("/fonts/NotoSans-Italic-100-900-1.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Local";
  src: url("/fonts/AtkinsonHyperlegible-Normal-400-5.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Local";
  src: url("/fonts/AtkinsonHyperlegible-Normal-700-7.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Local";
  src: url("/fonts/AtkinsonHyperlegible-Italic-400-1.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Local";
  src: url("/fonts/AtkinsonHyperlegible-Italic-700-3.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3 Local";
  src: url("/fonts/SourceSans3-Normal-200-900-3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3 Local";
  src: url("/fonts/SourceSans3-Italic-200-900-1.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lexend Local";
  src: url("/fonts/Lexend-Normal-100-900-1.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu Local";
  src: url("/fonts/Ubuntu-Normal-400-11.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu Local";
  src: url("/fonts/Ubuntu-Normal-700-15.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu Local";
  src: url("/fonts/Ubuntu-Italic-400-3.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu Local";
  src: url("/fonts/Ubuntu-Italic-700-7.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif Local";
  src: url("/fonts/NotoSerif-Normal-100-900-3.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif Local";
  src: url("/fonts/NotoSerif-Italic-100-900-1.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather Local";
  src: url("/fonts/Merriweather-Normal-300-900-3.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather Local";
  src: url("/fonts/Merriweather-Italic-300-900-1.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-soft: #eef2f4;
  --surface-elevated: #fbfcfd;
  --column-bg: #f9fafb;
  --line: #d8dee4;
  --text: #1e252b;
  --muted: #66717c;
  --primary: #176b5b;
  --primary-strong: #0e4c41;
  --primary-soft: #dcefeb;
  --primary-text: #ffffff;
  --primary-strong-text: #ffffff;
  --app-font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  --accent: #b65d12;
  --danger: #b42318;
  --danger-soft: #fce8e6;
  --toast-success-bg: #ecfdf5;
  --toast-success-border: #86efac;
  --toast-success-text: #14532d;
  --toast-error-bg: #fff4f2;
  --toast-error-border: #f0a39a;
  --toast-error-text: #7a1d15;
  --warning-soft: #fff1c7;
  --blue-soft: #e4eefc;
  --modal-backdrop: rgba(17, 24, 31, 0.42);
  --avatar-bg: #344a52;
  --shadow: 0 18px 45px rgba(28, 39, 49, 0.16);
  --brand-watermark-image: none;
  --brand-watermark-opacity: 0;
}

[data-theme="dark"] {
  --bg: #101416;
  --surface: #171d20;
  --surface-soft: #232b2f;
  --surface-elevated: #141a1d;
  --column-bg: #151b1e;
  --line: #2f3a40;
  --text: #edf2f4;
  --muted: #a7b3ba;
  --primary: #2f9f87;
  --primary-strong: #69c8b3;
  --primary-soft: #18352f;
  --primary-text: #05251e;
  --primary-strong-text: #05251e;
  --app-font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  --accent: #d7893e;
  --danger: #ff8a80;
  --danger-soft: #3a1d1a;
  --toast-success-bg: #103b2a;
  --toast-success-border: #2fa875;
  --toast-success-text: #d1fae5;
  --toast-error-bg: #3a1714;
  --toast-error-border: #b94b42;
  --toast-error-text: #ffd9d5;
  --warning-soft: #3a3016;
  --blue-soft: #18314d;
  --modal-backdrop: rgba(0, 0, 0, 0.62);
  --avatar-bg: #58717b;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
  --brand-watermark-image: none;
  --brand-watermark-opacity: 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  /* iOS-Safari-Text-Autosizing abschalten: ohne 100% blaeht Safari (v. a.
     iPad quer) Schriften eigenmaechtig auf — Spaltentitel brachen um,
     Achsen-Beschriftungen kollidierten (Nutzer-Fotos 2026-07-05). */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family:
    var(--app-font-family);
  font-weight: 400;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

/* Barrierefreiheit: Wer im System "Bewegung reduzieren" aktiviert hat, bekommt
   keine animierten Übergänge (inkl. der FLIP-Drag-Animation — deren inline
   gesetzte transition-duration wird hier per !important neutralisiert; die
   JS-Seite überspringt die Animation zusätzlich, s. animateReorder). */
@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;
  }
}

.hover-tooltip {
  position: fixed;
  z-index: 1200;
  width: max-content;
  max-width: 260px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(16, 24, 31, 0.18);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.35;
  pointer-events: none;
}

/* Rich-Vorschau einer Kalenderkarte im Hover-Tooltip (nur Desktop-Hover). */
.hover-tooltip.is-card-preview {
  max-width: 320px;
  padding: 10px 12px;
  font-weight: 500;
}

/* Rich-Vorschau einer Vorlage (Spalten + Kartenzahl) im Hover-Tooltip. */
.hover-tooltip.is-template-preview {
  max-width: 300px;
  padding: 10px 12px;
  font-weight: 500;
}

.template-preview { display: grid; gap: 6px; }
.template-preview-title { margin: 0; font-weight: 700; font-size: 0.9rem; }
.template-preview-meta { margin: 0; color: var(--muted); font-size: 0.76rem; font-weight: 650; }
.template-preview-desc { margin: 0; color: var(--muted); font-size: 0.78rem; }
.template-preview-cols { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.template-preview-cols li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.8rem; }
.template-preview-col-title { color: var(--text); overflow-wrap: anywhere; }
.template-preview-col-count { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }

.calendar-card-preview {
  display: grid;
  gap: 7px;
}

.calendar-card-preview p {
  margin: 0;
}

.calendar-card-preview-title {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.calendar-card-preview-context,
.calendar-card-preview-assignees {
  color: var(--muted);
  font-size: 0.75rem;
}

.calendar-card-preview-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.calendar-card-preview-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

textarea {
  resize: vertical;
}

.hidden {
  display: none !important;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ui-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toast {
  position: fixed;
  top: 18px;
  left: 50%;
  /* Muss über Modal-Backdrops (100+) und Bild-Viewer (300) liegen,
     sonst erscheinen Meldungen abgedunkelt (siehe Z-Index-Karte). */
  z-index: 1100;
  transform: translateX(-50%);
  max-width: min(420px, calc(100vw - 36px));
  padding: 12px 14px;
  border: 1px solid var(--toast-success-border);
  border-radius: 8px;
  color: var(--toast-success-text);
  background: var(--toast-success-bg);
  box-shadow: var(--shadow);
  overflow-wrap: anywhere;
}

.toast[data-type="error"] {
  border-color: var(--toast-error-border);
  color: var(--toast-error-text);
  background: var(--toast-error-bg);
}

/* Toast mit "Rückgängig"-Aktion */
.toast.toast-with-action {
  display: flex;
  align-items: center;
  gap: 14px;
}

.toast .toast-message {
  flex: 1 1 auto;
}

.toast .toast-undo {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-weight: 650;
  cursor: pointer;
}

.toast .toast-undo:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Eigenes Element (#undoToast) — unter den normalen Toast (top 18px) gesetzt,
   damit beide gleichzeitig sichtbar sein können, ohne sich zu überdecken. */
.undo-toast {
  top: 64px;
}

.update-banner {
  position: fixed;
  /* Unter dem Toast (top 18px) — beide können gleichzeitig sichtbar sein. */
  top: 64px;
  left: 50%;
  /* Wie der Toast über Backdrops (100+) und Bild-Viewer (300), siehe Z-Index-Karte. */
  z-index: 1100;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(420px, calc(100vw - 36px));
  padding: 10px 14px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-elevated);
  box-shadow: var(--shadow);
}

.update-banner span {
  font-size: 0.95rem;
  white-space: nowrap;
}

.update-banner button {
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  color: var(--primary-text);
  background: var(--primary);
  font-weight: 700;
  white-space: nowrap;
}

.auth-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(340px, 620px) minmax(320px, 440px);
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  width: min(1180px, calc(100vw - 48px));
  margin: 0 auto;
  padding: clamp(24px, 6vh, 72px) 0;
}

.brand-panel {
  max-width: 620px;
}

.brand-mark {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.brand-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.brand-panel h1 {
  /* Die frühere -0.04em-Kompensation war auf die Inter-Glyphe kalibriert —
     seit dem Wechsel der Titel auf die Display-Schrift (Lexend) entfernt;
     Lexends „P" sitzt praktisch bündig. */
  margin: 24px 0 12px;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 1;
  letter-spacing: 0;
}

.brand-panel p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.6;
}

.auth-panel {
  width: 100%;
  max-width: 440px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(37, 47, 56, 0.08);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  margin-bottom: 20px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.tab-button {
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  /* Voller Textkontrast auf beiden Tabs; der aktive Tab hebt sich über Fläche +
     Schatten ab (nicht über blasse Schrift — die verfehlte 4.5:1, A11y 2026-07-04). */
  color: var(--text);
  background: transparent;
}

.tab-button.active {
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(34, 42, 49, 0.12);
}

.app-shell {
  /* vh->dvh als Doppel-Deklaration (Fallback alte Browser). Der fruehere
     globale "Keep this block last"-dvh-Block stand NACH dem Tablet-Block
     und hebelte dessen height:auto aus — der Board-Kopf malte auf dem iPad
     hochkant ueber die Sidebar-Kacheln (Nutzer-Foto 2026-07-05). */
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(220px, var(--sidebar-width, 260px)) 7px minmax(0, 1fr);
  overflow: hidden;
  position: relative;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.sidebar-collapsed .sidebar {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar-resizer {
  display: none;
}

.app-shell.sidebar-collapsed .main {
  grid-column: 1 / -1;
}

.sidebar {
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-right: 1px solid var(--line);
  background: var(--surface-elevated);
  overflow: hidden;
}

.theme-icon .icon-sun,
.theme-icon.is-dark .icon-moon {
  display: none;
}

.theme-icon.is-dark .icon-sun {
  display: block;
}

.sidebar-resizer {
  cursor: col-resize;
  background: linear-gradient(90deg, transparent 0, var(--line) 50%, transparent 100%);
}

.sidebar-resizer:hover {
  background: var(--primary-soft);
}

body.resizing-sidebar {
  cursor: col-resize;
  user-select: none;
}

.sidebar-top {
  display: block;
}

.sidebar-local-toggle {
  width: 40px;
  min-height: 40px;
  flex: 0 0 auto;
}

.sidebar-top strong {
  display: block;
  max-width: 150px;
  overflow-wrap: anywhere;
}

.eyebrow {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  text-transform: uppercase;
}

.sidebar-actions {
  display: grid;
  gap: 8px;
  padding-right: 14px;
}

/* Desktop-Nav linksbündig — echte Menü-Navigation: Icon + Label am linken Rand,
   alle Buttons teilen eine Icon-Spalte (wirkt wie Linear/Notion/Slack statt einer
   Reihe zentrierter Kästchen). Gilt NUR für die vertikale Desktop-Liste; die
   Tablet-Reihe (<=900px) und die mobilen Icon-Buttons (<=620px) bleiben zentriert
   (Reset im 900px-Block). `.icon-text-button` wird auch außerhalb der Sidebar
   genutzt → bewusst auf `.sidebar-actions` gescoped. */
.sidebar-actions .icon-text-button,
.sidebar-actions .primary-button.full-width {
  justify-content: flex-start;
  padding-left: 16px;
}

.sidebar-board-heading {
  margin-top: 6px;
  padding: 12px 14px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sidebar-board-heading .eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.board-sort-button {
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.board-sort-button:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.board-sort-button:disabled {
  opacity: 0.45;
}

.sidebar-archive-button {
  min-height: 36px;
  /* „Archiv" ist eine Aktion (oeffnet ein Panel), keine der vier Ansichten — nur
     durch etwas Abstand (OHNE harte Trennlinie) sanft von den Ansichts-Buttons
     abgesetzt; die Linie wirkte zusammen mit dem Abstand unruhig. Nur Desktop; im
     900px-Block zurueckgesetzt (horizontale Reihe / Icon-Quadrate). */
  margin-top: 12px;
}

/* Aktiver Nav-Zustand — EINHEITLICH fuer alle vier Sidebar-Ansichten
   (Uebersicht / Boarduebersicht / Kalender / Meine Aufgaben). Frueher deckte
   die Regel nur Kalender + Board ab, wodurch „Uebersicht" und „Meine Aufgaben"
   im aktiven Zustand nicht hervorgehoben waren. Gleiche Bildsprache wie die
   mobile Bottom-Nav (primary-soft-Flaeche + primary-strong-Text), damit Desktop
   und Mobile denselben „Du bist hier"-Zustand zeigen. */
/* is-active vergibt NUR syncViewToggle an genau die vier Nav-Buttons — der
   Archiv-Button (ebenfalls .icon-text-button in .sidebar-actions) bekommt es
   nie. Ein Selektor statt vier Einzelklassen: neue Nav-Punkte erben den
   Aktiv-Stil automatisch (vorher mussten zwei Selektorlisten wachsen). */
.sidebar-actions .icon-text-button.is-active {
  border-color: var(--primary);
  color: var(--primary-strong);
  background: var(--primary-soft);
}

/* Aktives Element behaelt beim Hover seinen Tint (statt der neutralen
   secondary-button-Hover-Flaeche) — sonst „verschwindet" der aktive Zustand
   kurz beim Ueberfahren. Hoehere Spezifitaet als .secondary-button:hover. */
.sidebar-actions .icon-text-button.is-active:hover {
  background: var(--primary-soft);
  border-color: var(--primary-strong);
}

.board-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  /* min-content für die impliziten Zeilen: Die <button>-Karten liefern dem Grid
     sonst eine zu kleine Zeilenhöhe (Button-Eigenheit), wodurch die nächste
     Kachel die vorige um ~24px überlappte und den Avatar verdeckte (2026-06-18).
     Zusammen mit align-self: start (Button = natürliche Höhe) sitzt jede Kachel
     exakt auf ihrer Inhaltshöhe. Greift nur im Grid (>900px); <=900px ist
     .board-list eine Flex-Reihe und ignoriert grid-auto-rows. */
  grid-auto-rows: min-content;
  align-content: start;
  gap: 8px;
  overflow: auto;
  scrollbar-gutter: stable;
}

.sidebar-footer {
  margin-top: auto;
  margin-right: -18px;
  margin-bottom: -18px;
  margin-left: -18px;
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  padding: 12px 18px 18px;
  background: var(--surface-elevated);
}

.board-list button {
  /* Grid-Items sind per Default align-self: stretch und werden auf die (zu klein
     berechnete) Zeilenhöhe gepresst -> der Button wächst nicht mit seinem Inhalt.
     align-self: start löst die Stretch-Bindung (Button = natürliche Höhe). Wirkt
     nur zusammen mit grid-auto-rows: min-content auf .board-list, das die
     Zeilenhöhe korrekt setzt (sonst überlappen die Kacheln, 2026-06-18). <=900px
     ist .board-list eine horizontale Flex-Reihe und setzt align-self bewusst
     wieder auf stretch (gleich hohe Kacheln). */
  align-self: start;
  width: 100%;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  color: var(--text);
  background: var(--surface);
}

.board-list button:hover {
  border-color: var(--line-strong);
}

.board-list button.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.board-list span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.82rem;
}

.board-member-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.board-member-strip .avatar {
  width: 22px;
  height: 22px;
  display: inline-grid;
  margin-top: 0;
  color: white;
  font-size: 0.66rem;
}

.main {
  min-width: 0;
  min-height: 0;
  display: grid;
  /* Explizite Spalte minmax(0, 1fr): ohne sie ist die implizite Grid-Spalte
     `auto` (= max-content) und lässt Header/Toolbar bei langem Boardtitel über
     `.main` hinauswachsen, statt den Titel zu kürzen (Truncation-Bug 2026-06-09). */
  grid-template-columns: minmax(0, 1fr);
  /* Zeile 3 = optionales Vorlagen-Bearbeitungsbanner (auto, sonst leer/0),
     Zeile 4 = Arbeitsfläche (1fr). Inhalt/Watermark sind fest auf Zeile 4
     gepinnt, damit das Banner sie nicht in die 1fr-Zeile verdrängt. */
  grid-template-rows: auto auto auto minmax(0, 1fr);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

/* Wasserzeichen in der Arbeitsfläche (letzte Grid-Zeile, unter Header + Toolbar)
   zentrieren – so ist es bei jeder Auflösung/Variante vertikal mittig. */
.main::before {
  content: "";
  position: absolute;
  grid-row: 4;
  grid-column: 1;
  inset: 0;
  pointer-events: none;
  background-image: var(--brand-watermark-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(260px, min(48vw, 58vh), 760px) auto;
  opacity: var(--brand-watermark-opacity);
  z-index: 0;
}

.main > * {
  position: relative;
  z-index: 1;
}

.board-header {
  min-height: 112px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.board-title-block {
  min-width: 0;
  flex: 1 1 auto;
}

.board-title-row {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
}

.title-icon-button {
  width: 38px;
  min-height: 38px;
  flex: 0 0 auto;
  color: var(--muted);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.title-icon-button:hover {
  color: var(--text);
}

/* Kompakte Meta-Chips in der Board-Titelzeile: Mitglieder (Icon + Zahl) und
   Rollen-Badge („Owner" …). Kleiner + ruhiger als die .board-link-chip-Menuepunkte;
   ersetzen die frueher darueberstehende Eyebrow „X MITGLIEDER - ROLLE". */
.board-meta-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-elevated);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Einheitliche Groesse/Form aller vier Kopf-Elemente: 34px hoch, 8px Radius (wie das
   Stift-Icon). Ohne diese beiden Regeln waeren die Chips Pillen in 40/30px und das
   (jetzt in .board-overflow-wrap gewrappte) ⋯ 40px — verschiedene Formen + Groessen.
   Spezifitaet muss `.board-title-row :is(button,a) { min-height:40px }` schlagen. */
.board-title-row > .board-meta-chip {
  min-height: 34px;
}

.board-overflow-wrap > .title-icon-button {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
}

.board-meta-chip .ui-icon {
  width: 15px;
  height: 15px;
}

/* Mitglieder-Anzeige ist klickbar (oeffnet die Verwaltung) — fuer Owner. */
.board-members-indicator {
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.board-members-indicator:not(.is-static):hover {
  border-color: var(--primary);
  color: var(--primary-strong);
  background: var(--primary-soft);
}

/* Nicht-Owner (kein Verwalten): reine Anzeige — kein Klick-Hover-Tint, aber
   KEIN pointer-events:none (das unterdrückte die mouseover-Delegation des
   Tooltips; der Klick ist im JS-Handler geguardet). */
.board-members-indicator.is-static {
  cursor: default;
}

/* Rollen-Badge: Owner hervorgehoben (primary-Tint), andere Rollen neutral. */
.board-role-badge.is-owner {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  color: var(--primary-strong);
  background: var(--primary-soft);
}

/* Board-Header-Overflow: auf dem Desktop liegen die Sekundär-Chips inline in der
   Titelzeile (display: contents), der "…"-Button ist ausgeblendet. Ab Tablet
   (<=1024px) klappen die Chips hinter den Button (Mobile-UI-Verdichtung 2026-06-09). */
/* !important nötig, da `.icon-button { display: inline-grid }` (gleiche
   Spezifität, später in der Quelle) sonst gewinnt und den Button auch auf
   Desktop zeigt. Spiegelt das Muster des Filter-Toggles. */
/* Board-Aktionen liegen auf ALLEN Breiten hinter dem "…"-Knopf (2026-06-29).
   Anker = .board-title-row (oben position:relative), damit das Menue direkt
   unter dem Knopf aufgeht. Frueher nur <=1024px; jetzt global. */
.board-overflow-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
}

/* ⋯-Menue haengt an einem eigenen Anker (Wrapper um Knopf + Menue), damit es direkt
   unter dem ⋯-Knopf nach RECHTS-unten aufklappt (Windows-Konvention) statt links
   unter dem Titel. `.open-left` (per JS bei Platzmangel) klappt es nach links. */
.board-overflow-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.board-secondary-actions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 85;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(18, 30, 38, 0.2);
}

.board-secondary-actions.is-open {
  display: flex;
}

/* Rechts kein Platz → rechtsbuendig unter dem ⋯ aufklappen (bleibt im Viewport). */
.board-secondary-actions.open-left {
  left: auto;
  right: 0;
}

.board-secondary-actions .board-link-chip {
  width: 100%;
  justify-content: flex-start;
}

.board-header.is-overflow-open {
  position: relative;
  z-index: 90;
}

.app-shell > .sidebar-restore-button {
  display: none;
  width: 40px;
  min-height: 40px;
  color: var(--muted);
  background: var(--surface-elevated);
  box-shadow: 0 10px 24px rgba(16, 24, 31, 0.16);
}

.app-shell.sidebar-collapsed > .sidebar-restore-button {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 45;
  display: grid;
}

.board-title-block h2 {
  min-width: 0;
  margin: 0;
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.15;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.board-title-block p {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.board-attachment-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.attachment-chip {
  max-width: 220px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--primary-strong);
  background: var(--surface-elevated);
  font-size: 0.8rem;
  font-weight: 650;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-chip:hover {
  background: var(--primary-soft);
}

.board-link-chip {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--primary-strong);
  background: var(--surface-elevated);
  font-size: 0.84rem;
  font-weight: 650;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

/* Leichte Hover-Animation der Menue-Eintraege: Hintergrund faded weich, der
   Eintrag rueckt minimal nach rechts (reduced-motion deaktiviert das global). */
.board-link-chip:hover {
  background: var(--primary-soft);
  color: var(--primary-strong);
  transform: translateX(2px);
}

.top-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto; /* bleibt rechts, auch wenn der Board-Titel-Block ausgeblendet ist */
}

/* Ohne Board (Übersicht/Kalender/Meine Aufgaben) ist der Board-Titel-Block
   ausgeblendet; die Kopfleiste schrumpft dann auf die globalen Aktionen rechts. */
.board-header.is-boardless {
  min-height: 0;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
}

.top-icon-button {
  width: 40px;
  min-height: 40px;
}

.profile-menu-wrap {
  position: relative;
  z-index: 1000;
}

.profile-button {
  width: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: white;
  background: var(--avatar-bg);
  font-weight: 700;
}

.profile-button:hover {
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.profile-menu a.ghost-button {
  text-decoration: none;
}

/* iCal-Abo im Profilmenü */
.profile-ical {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 4px;
  border-top: 1px solid var(--line);
}
.profile-ical-label { font-weight: 600; font-size: 0.85rem; }
.profile-ical-hint,
.profile-ical-warn { margin: 0; font-size: 0.76rem; color: var(--muted); line-height: 1.35; }
.profile-ical-warn { color: var(--danger); }
.profile-ical-row { display: flex; gap: 6px; align-items: center; }
.profile-ical-url {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--text);
}
.profile-ical-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* QR-Code der iCal-Abo-Adresse (mit dem Handy scannen). Canvas-Buffer wird von
   drawQrToCanvas gesetzt; hier nur die Anzeigegroesse + Rahmen. */
.profile-ical-qr {
  display: flex;
  align-items: center;
  gap: 12px;
}
.profile-ical-qr canvas {
  flex: 0 0 auto;
  width: 116px;
  height: 116px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.profile-ical-qr-hint {
  min-width: 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.profile-menu {
  position: fixed;
  z-index: 1000;
  top: 64px;
  right: 18px;
  width: 320px;
  /* dvh-Doppeldeklaration: 100vh ist auf iPad-Safari der GROSSE Viewport (inkl.
     eingefahrener Tab-/URL-Leiste) — das Menue ragte im Querformat unten raus
     und der HINTERGRUND scrollte statt des Menues (Nutzer-Befund 2026-07-05).
     overscroll-behavior stoppt das Scroll-Chaining an den Menue-Raendern. */
  max-height: calc(100vh - 84px);
  max-height: calc(100dvh - 84px);
  overscroll-behavior: contain;
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.modal-backdrop:target {
  display: grid !important;
}

.profile-menu-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.profile-menu-head strong,
.profile-menu-head span {
  display: block;
  overflow-wrap: anywhere;
}

.profile-menu-head span:not(.avatar) {
  color: var(--muted);
  font-size: 0.84rem;
}

/* Menue-Avatar wie im restlichen Tool: fettes weisses Kuerzel, kraeftiger (vorher
   28px / Gewicht 620 → wirkte kleiner + duenner als der Top-Leisten-Avatar). */
#profileMenuInitials {
  width: 32px;
  height: 32px;
  /* display:grid + place-items:center EXPLIZIT (id schlaegt die Regel
     `.profile-menu-head span { display:block }`, die sonst den Avatar blockt und
     das Kuerzel nach oben-links fliessen laesst). Identisch zum Top-Leisten-Avatar
     `.profile-button #profileInitials` (32px, zentriert). */
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 800;
}

/* Name + Bearbeiten-Stift in einer Zeile (wie „Titel + ✎" im Board-Kopf). */
.profile-menu-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.profile-menu-name-row #profileMenuName {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Kompakter Stift (ersetzt den „Profil bearbeiten"-Button). Spezifitaet
   `.profile-menu-name-row .profile-name-edit` schlaegt die generischen
   .icon-button-Regeln (Breite var(--control-height)). */
.profile-menu-name-row .profile-name-edit {
  flex: 0 0 auto;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.profile-menu-name-row .profile-name-edit:hover {
  color: var(--text);
  background: var(--surface-soft);
}

.profile-menu-name-row .profile-name-edit .ui-icon {
  width: 15px;
  height: 15px;
}

.accent-control,
.profile-select-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 800;
}

.profile-select-control {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 1.2fr);
  /* Kein border-bottom mehr: zusammen mit dem border-top des naechsten Controls
     ergab das zwischen den Font-Selects eine doppelte Linie. Jetzt trennt nur die
     jeweilige Oberkante (eine Linie pro Uebergang). */
}

/* Doppelklasse (.modal.management-modal), damit die Breite die generische
   .modal-Regel (width: min(560px,100%)) sicher schlaegt — sonst war das Panel
   trotz Sidebar-Layout nur 560px breit (Inhalt zu schmal, Spalten kollabierten). */
.modal.management-modal {
  width: min(1180px, 96vw);
  max-width: 1180px;
}
.management-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 60vh;
  max-height: 74vh;
}
.management-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-right: 1px solid var(--line);
}
.mgmt-nav-item {
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}
.mgmt-nav-item:hover {
  background: rgba(127, 127, 127, 0.08);
}
.mgmt-nav-item.is-active {
  background: var(--primary-soft);
  /* --primary-strong (dunkler in Hell, heller in Dunkel) erfüllt 4.5:1 auf
     --primary-soft; --primary verfehlte es im Dunkelmodus (A11y 2026-07-04). */
  color: var(--primary-strong);
  font-weight: 600;
}
.management-content {
  /* Die migrierten Admin-Inhalte beziehen Padding/Abstand aus diesen Variablen,
     die zuvor nur auf .admin-modal lagen. Im Panel-Kontext hier setzen, sonst
     wird padding: var(--admin-panel-pad) ungueltig -> 0 (Texte kleben am Rand). */
  --admin-gap: 18px;
  --admin-panel-pad: 18px;
  padding: 22px 26px;
  overflow-y: auto;
}
/* Gleichmaessiger Rhythmus zwischen den Sektionen eines Panes. */
.mgmt-pane {
  display: flex;
  flex-direction: column;
  gap: var(--admin-gap);
}
/* Sekundaere Aktionen kompakt halten (nicht ueber die volle Spaltenbreite
   strecken); der primaere Submit-CTA (.primary-button) darf voll bleiben. */
.mgmt-pane .admin-settings-section > .ghost-button,
.mgmt-pane .admin-settings-section > .secondary-button,
.mgmt-pane .admin-users-section > .ghost-button {
  justify-self: start;
}
/* Eigener Datei-Picker statt nativem input[type=file] (dessen "keine Datei"-Text
   Edge intern abschneidet und dessen grauer Knopf nicht zum Design passt):
   gestylter Knopf + Dateiname, voll kontrollierbar. */
.file-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.file-picker-name {
  min-width: 0;
  color: var(--muted);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}
/* Restore optisch als eigene Gruppe vom Backup-Download/Export-Schalter trennen. */
.mgmt-pane .restore-row {
  gap: 10px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.management-header .mgmt-back {
  display: none;
}

@media (max-width: 620px) {
  .modal.management-modal {
    width: 100%;
  }
  .management-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .management-nav {
    border-right: none;
  }
  /* Header mit 3 Elementen (Zurueck, Titel, Schliessen) als Flex statt 2-Spalten-
     Grid, damit der Zurueck-Knopf im Detail nicht in eine zweite Zeile umbricht. */
  #managementModal .management-header {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  #managementModal .management-header #managementTitle {
    margin-right: auto;
  }
  /* Drill-Down: erst die Menueebene, nach Auswahl der Inhalt mit Zurueck-Knopf. */
  #managementModal .management-content {
    display: none;
  }
  #managementModal.mgmt-detail .management-nav {
    display: none;
  }
  #managementModal.mgmt-detail .management-content {
    display: block;
  }
  #managementModal.mgmt-detail .management-header .mgmt-back {
    display: inline-flex;
  }
}

.branding-logo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 4px 0 14px;
}
.branding-logo-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.branding-logo-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}
.branding-logo-preview {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
/* Vorschau auf modus-passendem Grund, damit auch helle Logos sichtbar sind. */
.branding-logo-preview.is-light {
  background: #ffffff;
}
.branding-logo-preview.is-dark {
  background: #1c2128;
}
.branding-preview-img {
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
}
.branding-preview-empty {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}
.branding-logo-preview.is-dark .branding-preview-empty {
  color: rgba(255, 255, 255, 0.6);
}

.accent-control input {
  width: 42px;
  height: 32px;
  padding: 2px;
  border-radius: 8px;
  cursor: pointer;
}

.profile-select-control select {
  min-height: 34px;
  padding: 0 8px;
  font-size: 0.88rem;
}

.profile-select-control option {
  font-size: 1rem;
}

.font-option-inter {
  font-family: "Inter", Arial, sans-serif;
}

.font-option-roboto {
  font-family: "Roboto Local", Arial, sans-serif;
}

.font-option-open-sans {
  font-family: "Open Sans Local", Arial, sans-serif;
}

.font-option-noto-sans {
  font-family: "Noto Sans Local", Arial, sans-serif;
}

.font-option-atkinson {
  font-family: "Atkinson Local", Arial, sans-serif;
}

.font-option-source-sans {
  font-family: "Source Sans 3 Local", Arial, sans-serif;
}

.font-option-lexend {
  font-family: "Lexend Local", Arial, sans-serif;
}

.font-option-ubuntu {
  font-family: "Ubuntu Local", Arial, sans-serif;
}

.font-option-noto-serif {
  font-family: "Noto Serif Local", Georgia, serif;
}

.font-option-merriweather {
  font-family: "Merriweather Local", Georgia, serif;
}

.modal-actions,
.inline-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 18px;
  padding: 12px 26px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-elevated);
}

.toolbar .mobile-filter-toggle {
  display: none !important;
  position: relative;
}

/* Zähler-Badge am Filter-Button: zeigt aktive Filter, wenn die Filterleiste
   ab Tablet hinter den Button kollabiert ist (Mobile-UI-Verdichtung 2026-06-09). */
.mobile-filter-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-text, #fff);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.mobile-filter-panel {
  display: contents;
}

.search-field {
  flex: 0 1 360px;
  min-width: 260px;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.search-field input {
  min-height: 38px;
}

.toggle-field {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: var(--muted);
  white-space: nowrap;
}

.toolbar-select {
  flex: 0 1 160px;
  min-width: 138px;
  min-height: 40px;
  color: var(--text);
  background: var(--surface);
  font-weight: 650;
}

.toolbar .toggle-field,
.toolbar .secondary-button,
.toolbar-select {
  flex: 0 0 auto;
  min-height: 40px;
}

.toolbar .secondary-button {
  width: auto;
  min-width: 108px;
  padding: 0 16px;
}

.board-content {
  min-height: 0;
  max-width: 100%;
  flex: 1;
  /* Feste 1fr-Zeile (siehe .main) — bleibt unter dem optionalen Vorlagenbanner. */
  grid-row: 4;
  position: relative;
  isolation: isolate;
  overflow-x: auto;
  overflow-y: auto;
  padding: 18px 26px 52px;
  scrollbar-gutter: stable;
}

.board-content > * {
  position: relative;
  z-index: 1;
}

.empty-state {
  max-width: 520px;
  padding: 32px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.empty-state h3 {
  margin: 0 0 8px;
}

.empty-state p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.5;
}

.kanban {
  width: max-content;
  min-width: 100%;
  min-height: 100%;
  display: flex;
  align-items: start;
  gap: 14px;
}

.column {
  width: clamp(280px, 24vw, 330px);
  flex: 0 0 clamp(280px, 24vw, 330px);
  min-height: 220px;
  height: max-content;
  max-height: max(320px, calc(100vh - 236px));
  max-height: max(320px, calc(100dvh - 236px));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--column-bg);
  overflow: hidden;
}

.column.is-collapsed {
  width: 76px;
  flex-basis: 76px;
  min-height: 220px;
  max-height: max(320px, calc(100vh - 236px));
  max-height: max(320px, calc(100dvh - 236px));
}

.column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.column.is-collapsed .column-header {
  height: 100%;
  min-height: 220px;
  flex-direction: column;
  justify-content: flex-start;
  padding: 10px 8px;
}

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

.column.is-collapsed .column-title-group {
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.column-heading {
  min-width: 0;
  margin: 0;
  font-size: 1rem;
}

.column-title-button {
  max-width: 100%;
  min-height: 28px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  font-weight: 700;
  text-align: left;
  overflow-wrap: anywhere;
}

.column.is-collapsed .column-heading {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
}

.column.is-collapsed .column-title-button {
  width: 34px;
  min-height: 120px;
  padding: 8px 3px;
  text-align: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  overflow: hidden;
}

.column-title-button:hover,
.column-title-button:focus-visible {
  border-color: var(--line);
  background: var(--surface);
}

.column-grip {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--primary-strong);
  background: var(--surface);
  cursor: grab;
}

.column-grip::before,
.column-grip::after {
  content: none;
}

.column-grip .ui-icon {
  width: 17px;
  height: 17px;
}

.column-grip:hover {
  border-color: var(--primary);
  color: var(--primary-text);
  background: var(--primary);
}

.column-grip:active {
  cursor: grabbing;
}

.column-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.column-delete-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.column-delete-divider {
  width: 100%;
  border: none;
  border-top: 1px solid var(--line);
  margin: 4px 0 0;
}

.column-delete-hint {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.column-move-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.column-move-label {
  display: grid;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--muted);
}

.column-move-label .toolbar-select {
  width: 100%;
}

.column.is-collapsed .column-actions {
  flex-direction: column;
}

.column-sort-wrap {
  position: relative;
  display: inline-flex;
}

.column-sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
}

.column-sort-button:hover:not(:disabled) {
  background: var(--surface-soft);
}

.column-sort-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.column-sort-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.column-sort-menu.hidden {
  display: none;
}

.column-sort-item {
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}

.column-sort-item:hover {
  background: var(--surface-soft);
}

.column.menu-open {
  position: relative;
  z-index: 5;
  overflow: visible;
}

.column-collapse-button {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface);
}

.column-collapse-button:hover {
  border-color: var(--primary);
  color: var(--primary-text);
  background: var(--primary);
}

.column-collapse-button .ui-icon {
  width: 16px;
  height: 16px;
}

.column-collapsed-summary {
  display: none;
}

/* Generischer Ghost-Klon für das Pointer-Umsortieren (Karten, Board-Kacheln,
   Spalten). Folgt dem Cursor; das Original bleibt als ausgegraute Lücke. */
.drag-ghost {
  position: fixed;
  z-index: 60;
  margin: 0;
  pointer-events: none;
  opacity: 0.92;
  transform: rotate(1deg);
  box-shadow: var(--shadow);
}

/* Board-Ghost wird in einen .board-list-Wrapper geklont, damit die
   Nachfahren-Optik (Titel/Meta/Avatare) erhalten bleibt — Container-Eigenheiten
   (Scrollbalken-Reserve, Padding) dabei neutralisieren. */
.board-list.drag-ghost {
  overflow: visible;
  scrollbar-gutter: auto;
  padding: 0;
}

.drag-source {
  opacity: 0.35;
}

body.is-reordering {
  cursor: grabbing;
  user-select: none;
}

/* Tastenkürzel-Spickzettel (#shortcutsModal) */
.shortcuts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.shortcuts-list li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.shortcuts-list kbd {
  flex: 0 0 auto;
  min-width: 30px;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  text-align: center;
}

.shortcuts-list span {
  color: var(--text);
}

.shortcuts-hint {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.shortcuts-section-title {
  margin: 0 0 4px;
  font-weight: 760;
  color: var(--text);
}

/* Ein Hinweis-Text DIREKT unter einer Abschnitts-Ueberschrift (z. B. „Handbuch"
   -> „Alle Funktionen ausfuehrlich erklaert.") gehoert dicht an die Ueberschrift.
   Der 14px-Vorabstand von .shortcuts-hint ist nur fuer den Hinweis NACH der
   Kuerzel-Liste gedacht; hier wirkte er wie eine ueberfluessige Leerzeile. */
.shortcuts-section-title + .shortcuts-hint {
  margin-top: 0;
}

.shortcuts-divider {
  margin: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.column-header h3 {
  margin: 0;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.count-pill {
  min-width: 28px;
  padding: 3px 8px;
  border-radius: 999px;
  text-align: center;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.8rem;
  font-weight: 650;
}

/* WIP-Limit überschritten: dezente, aber deutliche Warnfarbe. */
.count-pill.over-limit {
  color: var(--danger);
  background: var(--danger-soft);
}

.card-list {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: max(180px, calc(100vh - 356px));
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.task-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(34, 42, 49, 0.06);
  cursor: grab;
}

.task-card.readonly {
  cursor: pointer;
}

.task-card.priority-low {
  border-left-color: var(--prio-low);
}

.task-card.priority-normal {
  border-left-color: var(--prio-normal);
}

.task-card.priority-high {
  border-left-color: var(--prio-high);
}

.task-card.priority-urgent {
  border-left-color: var(--prio-urgent);
}

.task-card:active {
  cursor: grabbing;
}

.card-move-buttons {
  display: none;
}

.task-card input,
.task-card a,
.task-card button {
  cursor: pointer;
}

.task-card h4 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.task-card-title-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.card-title-attachment-indicator {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-elevated);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.card-title-attachment-indicator .ui-icon {
  width: 15px;
  height: 15px;
  color: var(--primary);
}

/* Alle Indikatoren teilen sich die zweite (auto-)Grid-Spalte der Titelzeile —
   kompakt nebeneinander statt einzeln ins Grid umzubrechen. */
.card-title-indicators {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.task-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.task-card-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.card-label-strip,
.label-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.card-label,
.label-option {
  --label-color: var(--primary);
  --label-text-color: var(--primary-text);
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--label-color) 82%, var(--line));
  border-radius: 999px;
  color: var(--label-text-color);
  background: var(--label-color);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.label-option {
  cursor: pointer;
}

.label-management-row {
  padding-right: 4px;
  cursor: default;
}

.label-choice {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.label-title {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.label-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
}

.label-action-button {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.label-option .label-action-button {
  color: var(--label-text-color);
  opacity: 0.82;
}

.label-action-button:hover,
.label-action-button:focus-visible {
  color: var(--label-text-color, var(--text));
  opacity: 1;
  border-color: color-mix(in srgb, var(--label-text-color, var(--text)) 45%, transparent);
  background: color-mix(in srgb, var(--label-text-color, var(--text)) 16%, transparent);
}

.label-action-button.danger:hover,
.label-action-button.danger:focus-visible {
  color: var(--label-text-color, var(--danger));
}

.label-action-button .ui-icon {
  width: 15px;
  height: 15px;
}

.label-option:has(input:checked),
.label-option.custom-label {
  color: var(--label-text-color);
  background: var(--label-color);
  border-color: var(--label-color);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--label-text-color) 55%, transparent);
}

.label-option:has(input:checked) .label-action-button {
  color: var(--label-text-color);
}

.label-option:has(input:checked) .label-action-button:hover,
.label-option:has(input:checked) .label-action-button:focus-visible {
  color: var(--label-text-color);
  border-color: color-mix(in srgb, var(--label-text-color) 45%, transparent);
  background: color-mix(in srgb, var(--label-text-color) 16%, transparent);
}

.label-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.label-editor {
  display: grid;
  gap: 10px;
}

.label-edit-form {
  width: min(100%, 560px);
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 44px auto 30px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  cursor: default;
}

.label-edit-form input[type="color"] {
  width: 44px;
  min-height: 40px;
  padding: 3px;
}

.label-create-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px auto;
  gap: 10px;
  align-items: center;
}

.label-create-row input[type="color"] {
  width: 44px;
  min-height: 40px;
  padding: 3px;
}

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

.checklist-preview {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-elevated);
}

.checklist-progress,
.checklist-editor-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.checklist-progress-text,
.checklist-editor-summary span:first-child {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.checklist-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
}

.checklist-progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 160ms ease;
}

.checklist-preview-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
}

.checklist-preview-row input {
  width: 16px;
  min-height: 16px;
  margin: 1px 0 0;
  accent-color: var(--primary);
}

.checklist-preview-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.checklist-preview-row small {
  color: var(--muted);
  font-weight: 650;
}

.checklist-preview-row.done span {
  color: var(--muted);
  text-decoration: line-through;
}

.checklist-more {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.chip {
  max-width: 100%;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.78rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.chip.overdue {
  color: #7a271a;
  background: var(--danger-soft);
}

.chip.warning {
  color: #4c3200;
  background: #ffd166;
}

.chip.priority-chip {
  color: #133026;
  border: 1px solid transparent;
}

.chip.priority-low {
  color: #16442f;
  background: #c8ead5;
}

.chip.priority-normal {
  color: #123f4b;
  background: #c8e6f1;
}

.chip.priority-high {
  color: #5a3300;
  background: #ffd68a;
}

.chip.priority-urgent {
  color: #6f1d18;
  background: #ffc5bd;
}

.chip.blue {
  color: #0f3260;
  background: #93c5fd;
}

[data-theme="dark"] .chip.warning {
  color: #ffe8a8;
  background: #6b4b08;
}

[data-theme="dark"] .chip.priority-low {
  color: #d8f6e4;
  background: #245238;
}

[data-theme="dark"] .chip.priority-normal {
  color: #d8f4ff;
  background: #1f5060;
}

[data-theme="dark"] .chip.priority-high {
  color: #ffe9bd;
  background: #6a430e;
}

[data-theme="dark"] .chip.priority-urgent {
  color: #ffe0dc;
  background: #743029;
}

[data-theme="dark"] .chip.blue {
  color: #d7e8ff;
  background: #1d4f91;
}

[data-theme="dark"] .chip.overdue {
  color: #ffd9d2;
  background: #7c2d24;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.avatar {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: white;
  background: var(--avatar-bg);
  font-size: 0.75rem;
  font-weight: 700;
}

.more-avatar {
  color: var(--text);
  background: var(--surface-soft);
}

.unassigned-note,
.member-picker-hint {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.member-picker-hint {
  flex: 1 0 100%;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 6px;
  border: 0;
  color: var(--primary-strong);
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.member-picker-hint.inline {
  flex: 1 1 auto;
  min-width: 180px;
}

.member-picker-hint:hover,
.member-picker-hint:focus-visible {
  text-decoration: underline;
}

.doc-link {
  color: var(--primary-strong);
  font-size: 0.84rem;
  font-weight: 650;
  text-decoration: none;
}

.doc-link:hover {
  text-decoration: underline;
}

.column-footer {
  flex: 0 0 auto;
  padding: 0 12px 12px;
  background: var(--column-bg);
}

/* Inline-Schnellerfassung im Spaltenfuß */
.quick-add-form {
  display: grid;
  gap: 8px;
}

.quick-add-input {
  width: 100%;
}

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

.quick-add-submit {
  flex: 1 1 auto;
}

.quick-add-details,
.quick-add-close {
  flex: 0 0 auto;
}

.quick-add-close {
  font-size: 1.2rem;
  line-height: 1;
}

.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.icon-button {
  min-height: 38px;
  border-radius: 8px;
  font-weight: 650;
}

.primary-button {
  border: 1px solid var(--primary);
  color: white;
  background: var(--primary);
}

.primary-button:hover {
  background: var(--primary-strong);
}

.secondary-button {
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--surface);
}

.icon-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.secondary-button:hover,
.ghost-button:hover,
.icon-button:hover {
  background: var(--surface-soft);
}

.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  color: var(--text);
  background: transparent;
  text-decoration: none;
}

.danger-button {
  border: 1px solid #f0a8a1;
  color: var(--danger);
  background: var(--danger-soft);
}

.icon-button {
  width: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
}

.compact {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.85rem;
}

.full-width {
  width: 100%;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface);
  color-scheme: light;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  color-scheme: dark;
}

input[type="date"] {
  padding-right: 8px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  opacity: 0;
}

.date-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: center;
}

.date-picker-button {
  width: 40px;
  min-height: 40px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-elevated);
}

[data-theme="dark"] .date-picker-button {
  color: #f4fbff;
  border-color: #52636d;
  background: #263239;
}

.date-picker-button::before {
  content: "";
  position: absolute;
  inset: 10px 9px 8px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.date-picker-button::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  top: 15px;
  height: 2px;
  background: currentColor;
  box-shadow:
    -1px 7px 0 -0.5px currentColor,
    6px 7px 0 -0.5px currentColor;
}

input,
select {
  min-height: 40px;
  padding: 0 10px;
}

textarea {
  padding: 10px;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 650;
}

.form-stack {
  display: grid;
  gap: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

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

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--modal-backdrop);
}

.modal {
  width: min(560px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  min-height: 0;
  overflow: auto;
  padding: 20px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.modal.wide {
  width: min(760px, 100%);
}

.card-detail-modal {
  width: min(1080px, 100%);
  height: min(760px, calc(100vh - 56px));
  max-height: min(760px, calc(100vh - 56px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}

.card-detail-modal .modal-header {
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.card-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.8fr);
  min-height: 0;
  overflow: hidden;
}

.card-detail-main {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
  border-right: 1px solid var(--line);
  overflow: auto;
}

.card-detail-main > :is(.card-section, .label-editor, .checklist-editor, .attachments-editor, .modal-actions) {
  width: 100%;
  margin: 0;
}

.card-activity-panel {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  background: var(--surface-elevated);
  overflow: auto;
}

.card-activity-panel h4 {
  margin: 0;
}

.section-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.attachments-editor {
  display: grid;
  gap: 10px;
  align-content: start;
}

.card-detail-main .attachments-editor:not(.section-panel) {
  padding: 0;
}

.member-picker {
  min-height: 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.member-selected-row {
  min-width: 0;
  flex: 1 1 180px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.member-selected-chip {
  max-width: 100%;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: var(--surface-elevated);
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
}

.member-selected-chip:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.member-add-button {
  width: 30px;
  min-height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--primary-strong);
  background: var(--surface-elevated);
  font-size: 1.15rem;
  font-weight: 800;
}

.member-add-button:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.member-picker-menu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.member-picker-menu-option {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: var(--surface-elevated);
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
}

.member-picker-menu-option.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.member-picker-empty {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.member-picker.compact-picker {
  min-height: 34px;
  align-content: start;
}

.member-option {
  flex: 0 0 auto;
  max-width: 100%;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: var(--surface-elevated);
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.card-meta-grid .member-option,
.card-detail-main .member-option {
  display: inline-flex;
  align-items: center;
  align-content: center;
  grid-template-columns: none;
  gap: 6px;
}

.member-option .avatar {
  flex: 0 0 auto;
}

.member-option > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.member-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mini-avatar {
  width: 22px;
  height: 22px;
  font-size: 0.66rem;
}

.card-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.card-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.card-detail-main > label,
.card-meta-grid label,
.card-meta-grid .field-group {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}

.card-detail-main > label {
  font-size: 0.86rem;
  font-weight: 800;
}

.field-label {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.card-detail-main > :is(.label-editor, .checklist-editor, .attachments-editor) .section-head h4 {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.25;
}

.card-detail-main > label :is(input, textarea, select, .date-field, .member-picker),
.card-meta-grid :is(label, .field-group) :is(input, textarea, select, .date-field, .member-picker) {
  margin-top: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 650;
}

.card-detail-main > label textarea,
.card-meta-grid .member-picker {
  font-weight: 500;
}

.card-meta-grid > .field-group {
  grid-column: 1 / -1;
}

/* Per-Board-Zeitleiste (Gantt, read-only) */
.board-view-toggle { display: inline-flex; }
.view-toggle-btn { border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; padding: 6px 12px; cursor: pointer; }
.view-toggle-btn:first-child { border-radius: 8px 0 0 8px; }
.view-toggle-btn:last-child { border-radius: 0 8px 8px 0; border-left: none; }
.view-toggle-btn[aria-pressed="true"] { background: var(--primary-soft); color: var(--text); }
.board-timeline .mobile-column-tabs { display: none; }
/* --tl-surface = effektiver Hintergrund der Arbeitsflaeche: .main legt einen
   2%-Weiss-Schleier ueber var(--bg) (Zeile ~3709). Die fixierten Label-Zellen sind
   deckend und muessen exakt diesen Ton treffen, sonst wirken sie als dunkles Kaestchen. */
.timeline-view { padding: 8px 2px 16px; --tl-surface: color-mix(in srgb, #fff 2%, var(--bg)); }
.timeline-toolbar { margin-bottom: 12px; }
.timeline-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }
.timeline-empty,
.timeline-undated { color: var(--muted); font-size: 0.85rem; padding: 8px 2px; }
.timeline-grid { display: grid; gap: 6px; position: relative; --tl-axis-h: 34px; }
.timeline-row { display: grid; grid-template-columns: 180px 1fr; gap: 8px; align-items: center; min-height: 30px; }
.timeline-row + .timeline-row { border-top: 1px solid color-mix(in srgb, var(--muted) 14%, transparent); }
.timeline-axis-row + .timeline-row { border-top: none; }
.timeline-row:not(.timeline-axis-row):hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.timeline-row:not(.timeline-axis-row):hover .timeline-label { background: color-mix(in srgb, var(--primary) 10%, var(--tl-surface)); }
.timeline-label { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; align-self: stretch; text-align: left; background: var(--tl-surface); border: none; color: var(--text); font: inherit; cursor: pointer; padding: 0 10px 0 2px; min-width: 0; }
.timeline-label-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Leere Kopf-Zelle der fixierten Spalte komplett durchsichtig -> zeigt exakt die
   Arbeitsflaeche dahinter (kein Farb-Treffer noetig, kein Kaestchen). */
.timeline-axis-row .timeline-label { cursor: default; background: transparent; }
.timeline-track { position: relative; height: 22px; }
.timeline-track.timeline-axis { height: var(--tl-axis-h); }
/* Erst unterhalb der Datumszeile beginnen (Achsenhoehe + 6px Grid-Abstand),
   damit keine Gitterlinien ueber die Datumszahlen laufen und die leere Kopf-Zelle
   nicht gegen den schattierten Track-Bereich als Kaestchen abhebt. */
.timeline-gridlines { position: absolute; left: 188px; right: 0; top: calc(var(--tl-axis-h) + 6px); bottom: 0; z-index: -1; pointer-events: none; }
/* Tageslinien als 1px-Kachel (background-size + repeat) statt
   repeating-linear-gradient: WebKit/iPad liess bei prozentualen Gradient-Stops
   viele Wiederholungen der 1px-Linie schlicht weg (Nutzer-Fotos 2026-07-05,
   Chromium rendert beides gleich). Jede Kachel beginnt mit ihrer Linie. */
.timeline-gridlines-lines { position: absolute; inset: 0; background-image: linear-gradient(90deg, color-mix(in srgb, var(--muted) 22%, transparent) 0 1px, transparent 1px); background-size: var(--tl-step, 50%) 100%; background-repeat: repeat; }
.timeline-weekend { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--muted) 8%, transparent); }
.timeline-tick { position: absolute; bottom: 2px; transform: translateX(-50%); font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.timeline-tick-start { transform: none; }
.timeline-tick-end { transform: translateX(-100%); }
.timeline-tick-kw { position: absolute; left: 100%; bottom: 0; margin-left: 4px; white-space: nowrap; font-size: 0.85em; color: color-mix(in srgb, var(--muted) 55%, transparent); }
.timeline-tick-kw-left { left: auto; right: 100%; margin-left: 0; margin-right: 4px; }
.timeline-today { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--primary); opacity: 0.55; transform: translateX(-50%); pointer-events: none; }
/* In der Achsenzeile erst an der Heute-Pille beginnen (sonst ragt die Linie darueber). */
.timeline-axis .timeline-today { top: 2px; }
.timeline-today-label { position: absolute; top: 2px; transform: translateX(-50%); font-size: 0.62rem; font-weight: 700; color: var(--primary); background: var(--surface); padding: 0 5px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.timeline-bar { position: absolute; top: 4px; height: 14px; border-radius: 7px; border: none; background: color-mix(in srgb, var(--tl-prio, var(--primary)) 55%, transparent); cursor: pointer; transition: background 0.12s ease; }
.timeline-bar:hover { background: color-mix(in srgb, var(--tl-prio, var(--primary)) 85%, transparent); }
/* Masse defensiv festgenagelt (min/max + padding 0 + appearance): iOS-Safari
   streckte den <button> per UA-Style — rotiert wurde aus der Raute ein
   schiefes Parallelogramm (Nutzer-Fotos 2026-07-05). */
.timeline-point { position: absolute; top: 4px; width: 13px; min-width: 13px; max-width: 13px; height: 13px; min-height: 13px; max-height: 13px; padding: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; transform: translateX(-50%) rotate(45deg); background: var(--tl-prio, var(--primary)); border: none; cursor: pointer; }
.timeline-bar.priority-low, .timeline-point.priority-low, .timeline-print-legend-dot.priority-low { --tl-prio: var(--prio-low); }
.timeline-bar.priority-high, .timeline-point.priority-high, .timeline-print-legend-dot.priority-high { --tl-prio: var(--prio-high); }
.timeline-bar.priority-urgent, .timeline-point.priority-urgent, .timeline-print-legend-dot.priority-urgent { --tl-prio: var(--prio-urgent); }
.timeline-print-header { display: none; }
.timeline-print-header h2 { margin: 0 0 4px; font-size: 1.15rem; }
.timeline-print-meta { margin: 0 0 8px; color: var(--muted); font-size: 0.85rem; }
.timeline-print-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.8rem; }
.timeline-print-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.timeline-print-legend-dot { width: 12px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--tl-prio, var(--primary)) 70%, transparent); }
.board-print-header { display: none; }
.board-print-header h2 { margin: 0 0 4px; font-size: 1.15rem; }
.board-print-meta { margin: 0 0 10px; color: var(--muted); font-size: 0.85rem; }
[data-theme="dark"] .timeline-bar.priority-high, [data-theme="dark"] .timeline-point.priority-high { --tl-prio: #ffb454; }
/* Zoom als Segment-Control (Optik wie der Modus-Umschalter): ein Rahmen, Felder per border-left getrennt. */
.timeline-zoom { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.timeline-zoom > * + * { border-left: 1px solid var(--line); }
.timeline-zoom-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 0 8px; border: none; background: transparent; color: var(--muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.timeline-zoom-btn:hover:not(:disabled) { color: var(--text); background: var(--surface-soft); }
.timeline-zoom-btn:disabled { opacity: 0.4; cursor: default; }
.timeline-zoom-value { display: inline-flex; align-items: center; justify-content: center; min-width: 3.6em; padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* "Nur meine Karten" als Umschalt-Pill (statt Checkbox) — geteilt von
   Zeitleiste UND Kalender (#calendarMineToggle), damit beide Ansichten
   dieselbe Bildsprache sprechen (Nutzer-Wunsch 2026-07-05). */
.timeline-mine-toggle { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.timeline-mine-toggle:hover { color: var(--text); }
.timeline-mine-toggle.is-active { background: var(--primary-soft); color: var(--primary-strong); border-color: var(--primary); }

/* Feiner Trenner vor der Aktion "Drucken" */
.timeline-toolbar-divider { width: 1px; align-self: stretch; min-height: 22px; margin: 0 2px; background: var(--line); }

/* Drucken-Knopf auf gleiche Hoehe/Textgroesse + bordered (wie die uebrigen) */
.timeline-print-button { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.timeline-print-button:hover { color: var(--text); background: var(--surface-soft); }
.timeline-toolbar .calendar-filters { flex-wrap: wrap; }
.timeline-agenda { display: none; }
@media (max-width: 620px) {
  .timeline-grid { display: none; }
  .timeline-zoom { display: none; }
  .timeline-agenda { display: grid; gap: 6px; }
  .timeline-agenda-item { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--text); }
  .timeline-agenda-date { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
}

.attachment-list,
.activity-list {
  display: grid;
  gap: 12px;
}

.activity-filter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.activity-filter-button {
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.activity-filter-button.is-active {
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(34, 42, 49, 0.12);
}

.attachment-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(160px, 1.2fr) 38px;
  gap: 12px;
}

.attachment-row.uploaded {
  grid-template-columns: minmax(120px, 0.8fr) minmax(150px, 1fr) auto;
}

.attachment-row button[aria-label="Anhang entfernen"] {
  position: relative;
  color: transparent;
  overflow: hidden;
}

.attachment-row button[aria-label="Anhang entfernen"]::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--danger);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.attachment-actions,
.activity-attachment-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.attachment-action {
  color: var(--muted);
  text-decoration: none;
}

.attachment-action:hover {
  color: var(--primary-strong);
  background: var(--primary-soft);
}

.attachment-preview-link {
  grid-column: 1 / -1;
  width: min(280px, 100%);
  display: block;
}

.attachment-preview-image {
  width: 100%;
  max-height: 180px;
  display: block;
  object-fit: contain;
  object-position: left center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.activity-attachment-actions {
  flex-wrap: wrap;
  margin-top: 3px;
}

.comment-form {
  display: grid;
  gap: 8px;
}

.activity-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.activity-body {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.activity-row-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.activity-row-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.activity-type {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-elevated);
  font-size: 0.72rem;
  font-weight: 800;
}

.activity-type.comment {
  color: var(--primary-strong);
  border-color: var(--primary);
  background: var(--primary-soft);
}

.activity-time {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.activity-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.activity-menu-wrap.inline {
  vertical-align: text-bottom;
}

/* Kommentar-Optionen (⋯) fix oben rechts neben dem (flex:1-)Meta-Block —
   verdrängt Name/Zeit nie in eine neue Zeile. */
.activity-row-head .activity-menu-wrap {
  flex: 0 0 auto;
}

.activity-menu-button {
  width: 26px;
  min-width: 26px;
  min-height: 24px;
  color: var(--muted);
  background: transparent;
}

.activity-menu-button .ui-icon {
  width: 16px;
  height: 16px;
}

.activity-menu-button:hover,
.activity-menu-button:focus-visible {
  color: var(--text);
  background: var(--surface-soft);
}

.activity-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 116px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.activity-menu-item {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.activity-menu-item.danger {
  color: var(--danger);
}

.activity-menu-item:hover {
  background: var(--danger-soft);
}

.activity-row p {
  margin: 2px 0;
  color: var(--text);
  line-height: 1.4;
}

.activity-text {
  overflow-wrap: anywhere;
}

.modal.small {
  width: min(420px, 100%);
}

.modal-header,
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-header {
  margin-bottom: 16px;
}

.modal-header-actions {
  display: flex;
  gap: 4px;
}

.modal h3,
.modal h4 {
  margin: 0;
}

.modal-actions {
  justify-content: flex-end;
}

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

.modal-actions .secondary-button,
.modal-actions .danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
}

.archive-modal {
  width: min(920px, 100%);
  height: min(680px, calc(100vh - 40px));
  display: grid;
  /* Vier Zeilen: Kopf · Suchfeld · Filter-Umschalter · scrollende Liste.
     JEDE Kopf-Ergänzung braucht hier ihre eigene auto-Zeile — mit zu wenigen
     Zeilen streckte das Grid das Suchfeld auf die 1fr-Zeile und schob die
     Listen in eine implizite Zeile (Falle von 2026-07-02). */
  grid-template-rows: auto auto auto minmax(0, 1fr);
  overflow: hidden;
}

/* Filter-Umschalter (Alle · Boards · Karten): gleiche Segment-Optik wie der
   Kalender-Umschalter, aber eigene, aufs Archiv gescope-te Klassen —
   .calendar-mode-button gehört Kalender UND Zeitleiste (Kollisionsregel). */
.archive-modal .archive-filter-toggle {
  display: inline-flex;
  width: max-content;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}

.archive-modal .archive-filter-button {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
}

.archive-modal .archive-filter-button + .archive-filter-button {
  border-left: 1px solid var(--line);
}

.archive-modal .archive-filter-button:hover {
  color: var(--text);
}

.archive-modal .archive-filter-button.is-active {
  background: var(--primary);
  color: var(--primary-text);
}

/* hidden muss gegen das explizite display:grid der Sektionen gewinnen
   (gleiche Falle wie im Cockpit, 2026-07-04). */
.archive-layout section[hidden] {
  display: none;
}

/* Inhalt oben andocken — auf ALLEN Breiten: align-content:stretch (Default)
   verteilte bei wenig Inhalt den Restraum des gestreckten Modals als
   Riesenlücken zwischen Kopf und Liste. Bisher nur mobil gefixt (04490ab);
   mit dem Sektions-Filter (eine Sektion ausgeblendet) fiel es auch auf dem
   Desktop auf (2026-07-05). Volle Listen scrollen ohnehin — dort wirkungslos. */
.archive-layout,
.archive-layout section {
  align-content: start;
}

/* Einspaltig (Boards oben, Karten gruppiert darunter) mit EINEM gemeinsamen
   Scrollbereich — das frühere 2-Spalten-Grid quetschte die Kartentitel neben
   den breiten Aktions-Knöpfen bis zum Wortbruch (Design-Feedback 2026-07-02). */
.archive-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  overflow: auto;
  padding-right: 2px;
}

/* .archive-modal-Präfix nötig: die Skin-Regel `.search-field { max-width:
   460px }` steht SPÄTER in der Quelle und deckelte das Feld sonst auf
   halbe Modal-Breite (Nutzer-Screenshot 2026-07-02, Dunkelmodus). */
.archive-modal .archive-search {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  max-width: none;
  margin-bottom: 12px;
}

.archive-modal .archive-search .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.archive-modal .archive-search input {
  width: 100%;
  padding-left: 40px;
}

.archive-group-label {
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

.archive-group-label:first-child {
  margin-top: 0;
}

.archive-meta-time {
  font-size: 0.76rem;
}

/* Mailtexte (Verwaltung): sichtbare Platzhalter-Referenz + Vorschau-Panel
   (Design-Feedback 2026-07-02 — vorher steckte die Variablen-Doku im
   Kleingedruckten und „Vorschau" hieß „echte Test-Mail senden"). */
.mail-vars-reference {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: baseline;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  font-size: 0.82rem;
}

.mail-vars-label {
  grid-column: 1 / -1;
  font-weight: 650;
  color: var(--muted);
  font-size: 0.76rem;
}

.mail-var-chip {
  justify-self: start;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.78rem;
  color: var(--primary-strong);
}

.mail-var-desc {
  color: var(--muted);
}

.mail-insert-default {
  justify-self: start;
  margin-top: -6px;
  color: var(--primary-strong);
  font-weight: 650;
}

.mail-preview-panel {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.mail-preview-heading {
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.mail-preview-subject {
  font-size: 0.88rem;
}

.mail-preview-body {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.archive-layout section {
  /* KEIN min-height: 0 hier! Das Archiv-Layout ist höhenbegrenzt (1fr-Zeile
     des Modals) — mit min-height: 0 durften die auto-Zeilen der Sektionen
     UNTER ihre Inhaltshöhe schrumpfen (gemessen: 7 Board-Einträge in einer
     209px-Zeile) und die Liste (overflow: visible) malte ihren Überstand in
     die nächste Sektion („Karten“-Kopf über der Board-Liste,
     Nutzer-Screenshot 2026-07-05). min-height: auto lässt die Zeilen mit dem
     Inhalt wachsen; gescrollt wird im .archive-layout. */
  min-width: 0;
  display: grid;
  grid-template-rows: auto;
  gap: 12px;
}

.archive-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  /* Scroll übernimmt .archive-layout (ein gemeinsamer Bereich statt zwei
     interner Scroller nebeneinander). */
  overflow: visible;
}

.archive-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-elevated);
}

.archive-meta {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.archive-meta strong,
.archive-meta span {
  overflow-wrap: anywhere;
}

.archive-meta span {
  color: var(--muted);
  font-size: 0.85rem;
}

.archive-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.archive-note {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface);
  font-size: 0.82rem;
  font-weight: 650;
}

.members-section {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.members-modal {
  width: min(720px, 100%);
}

.members-modal .members-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.section-panel,
.checklist-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-elevated);
}

.card-detail-main > label.section-panel {
  font-size: 0.86rem;
  font-weight: 800;
}

.card-detail-main .section-head {
  min-height: 42px;
  align-items: center;
}

.card-detail-main .section-head h4,
.card-detail-main > label {
  line-height: 1.25;
}

.checklist-add {
  width: 34px;
  min-height: 34px;
  padding: 0;
  color: var(--primary-strong);
  font-size: 1.25rem;
  line-height: 1;
}

/* Vorlagen-Auswahl im "Neues Board"-Dialog — kompaktes Kachel-Raster */
.board-template-field {
  display: grid;
  gap: 7px;
}

/* Kompakte Zeile, die das Picker-Modal öffnet (zeigt die aktuelle Wahl) */
.board-template-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: var(--control-height, 42px);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius, 8px);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.board-template-trigger:hover {
  border-color: var(--primary);
}

.board-template-trigger .ui-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--muted);
}

#templatePickerModal .modal {
  max-width: 560px;
}

.board-template-choices {
  display: grid;
  gap: 8px;
}

.board-template-section {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.board-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
}

.board-template-choice {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  text-align: left;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.board-template-choice:hover {
  border-color: var(--primary);
}

.board-template-choice:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.board-template-choice.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.board-template-choice-name {
  font-weight: 650;
  font-size: 0.86rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Mini-Spaltenvorschau: kleine Balken je Spalte (Board-Skizze) */
.board-template-mini {
  display: flex;
  gap: 3px;
  height: 20px;
  align-items: stretch;
}

.board-template-mini-col {
  flex: 1 1 0;
  min-width: 4px;
  border-radius: 3px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.board-template-choice.selected .board-template-mini-col {
  background: var(--surface);
  border-color: var(--primary);
}

/* Verwalten-Knöpfe an eigenen Vorlagen-Kacheln (freigeben/privat, löschen) */
.board-template-actions {
  display: flex;
  flex-wrap: wrap; /* Sicherheitsnetz: lieber umbrechen als aus der Kachel fallen */
  gap: 4px;
  margin-top: 2px;
}

.board-template-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.board-template-action:hover {
  color: var(--text);
  border-color: var(--primary);
}

.board-template-action[aria-pressed="true"] {
  color: var(--primary-strong);
  border-color: var(--primary);
}

.board-template-action-danger,
.board-template-action-icon {
  padding: 0 6px;
}

.board-template-action-danger:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.board-template-action .ui-icon {
  width: 14px;
  height: 14px;
}

.field-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.import-board-row {
  margin-top: 10px;
}

#importResultList {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.checklist-items {
  display: grid;
  gap: 8px;
}

.checklist-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) minmax(112px, 0.68fr) 42px;
  align-items: center;
  gap: 8px;
}

.checklist-row > * {
  min-width: 0;
}

.checklist-row input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  accent-color: var(--primary);
}

.checklist-assignees.member-picker {
  min-height: 34px;
  padding: 4px;
  overflow: hidden;
}

.checklist-assignees .member-option {
  flex: 1 1 112px;
  min-width: 0;
}

.checklist-empty {
  color: var(--muted);
  font-size: 0.88rem;
}

.members-list {
  display: grid;
  gap: 8px;
}

.member-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.member-info {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.member-row strong,
.member-row span {
  display: block;
  overflow-wrap: anywhere;
}

.member-row span {
  color: var(--muted);
  font-size: 0.84rem;
}

.member-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.member-role-select {
  min-width: 132px;
  min-height: 36px;
  padding: 0 32px 0 10px;
}

.member-role-badge,
.member-protected {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.78rem;
  font-weight: 750;
  white-space: nowrap;
}

.inline-form {
  align-items: end;
}

.inline-form input {
  min-width: 0;
}

@media (max-width: 900px) {
  .auth-view {
    grid-template-columns: 1fr;
    width: min(560px, calc(100vw - 36px));
    justify-content: stretch;
    gap: 28px;
  }

  .brand-panel h1 {
    font-size: 2.6rem;
  }

  .app-shell {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    grid-template-columns: 1fr;
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .sidebar-resizer {
    display: none;
  }

  .sidebar {
    height: auto;
    max-height: none;
    position: relative;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow: visible;
  }

  .board-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 1fr);
    overflow-x: auto;
  }

  .sidebar-actions {
    padding-right: 0;
  }

  .board-header,
  .toolbar {
    padding-left: 16px;
    padding-right: 16px;
  }

  .board-header {
    flex-wrap: wrap;
  }

  /* KEIN display:none für .is-boardless hier (621–900px): der Kopf trägt die
     globalen Aktionen (Glocke/Profil/Theme/Hilfe/Logout), und die Bottom-Nav
     als Ersatz existiert erst <=620px — sonst wären sie auf Tablet in jeder
     Nicht-Board-Ansicht (inkl. Start-Übersicht) unerreichbar. Der kompakte
     is-boardless-Kopf aus der Basisregel gilt hier weiter. */

  .toolbar {
    flex-wrap: wrap;
  }

  .board-content {
    padding: 14px 16px 24px;
  }

  .column {
    width: min(330px, calc(100vw - 40px));
    flex-basis: min(330px, calc(100vw - 40px));
    max-height: none;
  }

  .column.is-collapsed {
    width: 72px;
    flex-basis: 72px;
  }

  .card-detail-modal {
    height: calc(100vh - 28px);
    max-height: calc(100vh - 28px);
    overflow: hidden;
  }

  .card-detail-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .card-detail-main {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  .modal-backdrop {
    padding: 10px;
  }

  .archive-modal {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
  }

  .auth-view {
    padding: 18px;
  }

  .brand-panel p {
    font-size: 1rem;
  }

  .form-grid,
  .archive-layout,
  .card-meta-grid {
    grid-template-columns: 1fr;
  }

  .inline-form,
  .top-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .inline-form button,
  .inline-form select,
  .top-actions > * {
    flex: 1 1 130px;
  }

  .toolbar {
    align-items: stretch;
  }

  .toolbar .search-field,
  .toolbar .toggle-field,
  .toolbar .toolbar-select,
  .toolbar .secondary-button {
    flex: 1 1 100%;
  }

  .attachment-row {
    grid-template-columns: 1fr;
  }

  .checklist-row {
    grid-template-columns: 22px minmax(0, 1fr) 38px;
  }

  .checklist-assignees {
    grid-column: 2 / -1;
  }

  /* Das Loeschen-x steht im DOM NACH den Zuweisungen und rutschte deshalb
     in eine eigene dritte Zeile — explizit neben den Aufgabentext setzen. */
  .checklist-row > .icon-button {
    grid-row: 1;
    grid-column: 3;
  }

  .attachment-row .icon-button {
    width: 100%;
  }
}

/* Mockup-inspired product skin */
:root {
  --bg: #eef3f5;
  --surface: #ffffff;
  --surface-soft: #edf3f6;
  --surface-elevated: rgba(248, 251, 252, 0.94);
  /* Etwas satter als früher (0.52-alpha war fast weiß-auf-weiß — die Spalten
     hoben sich kaum vom Board-Grund ab; Design-Audit 2026-07-02). */
  --column-bg: rgba(230, 238, 242, 0.72);
  /* Übersichts-Kacheln: gleiche Durchlässigkeit wie die Board-Spalten, damit
     das Branding-Wasserzeichen dezent durchscheint (Nutzerwunsch 2026-07-05);
     Basis bleibt die Panel-Farbe (weiß), nicht der Spalten-Tint. */
  --panel-translucent: rgba(255, 255, 255, 0.72);
  --line: #d6e0e5;
  --line-strong: #b8c8d0;
  --text: #182329;
  /* Etwas dunkler (war #65747c): erfüllt 4.5:1 auch auf weichen Flächen
     (--surface-soft, Chips/Zähler); #65747c verfehlte dort knapp (A11y 2026-07-04). */
  --muted: #59646e;
  /* Kontrastsicherer Marken-Grünton (A11y-Audit 2026-07-04) — deckt sich mit
     defaultAccentColor in app.js; applyAccentColor überschreibt inline. */
  --primary: #176b5b;
  --primary-strong: #0e4c41;
  --primary-soft: #d8f1eb;
  --primary-text: #ffffff;
  --primary-strong-text: #ffffff;
  --app-font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  /* Display-Schrift für große Titel/Kennzahlen (Design-Audit 2026-07-02):
     lokal gebündeltes Lexend (Variable-Font 100-900, kein CDN — On-Prem/DSGVO).
     Bleibt beim Wechsel des Schrift-Presets (--app-font-family) konstant,
     damit die Marken-Typografie nicht mitwandert. */
  --font-display: "Lexend Local", "Inter", "Segoe UI", system-ui, sans-serif;
  /* Prioritäts-Farben ZENTRAL — vorher drei divergierende Belegungen
     (task-card: #629677/accent · Aufgaben/Dashboard: muted/#d98a00 ·
     Zeitleiste: #d98a00). Eine Kanten-Sprache für die ganze App. */
  --prio-low: #8a97a3;
  --prio-normal: #21806f;
  --prio-high: #d98a00;
  --prio-urgent: #b53b32;
  --accent: #b46818;
  --danger: #b53b32;
  --danger-soft: #ffe3df;
  --toast-success-bg: #ecfdf5;
  --toast-success-border: #86efac;
  --toast-success-text: #14532d;
  --toast-error-bg: #fff4f2;
  --toast-error-border: #f0a39a;
  --toast-error-text: #7a1d15;
  --warning-soft: #fff0cd;
  --blue-soft: #deecff;
  --modal-backdrop: rgba(12, 18, 22, 0.48);
  --avatar-bg: #31505a;
  --shadow: 0 18px 52px rgba(23, 35, 42, 0.16);
  --bg-glow: rgba(33, 128, 111, 0.16);
}

[data-theme="dark"] {
  --bg: #0f1417;
  --surface: #151b1f;
  --surface-soft: #202930;
  --surface-elevated: rgba(18, 24, 28, 0.94);
  --column-bg: rgba(21, 27, 31, 0.72);
  /* Pendant zur hellen Variante (Surface #151b1f mit Spalten-Alpha). */
  --panel-translucent: rgba(21, 27, 31, 0.72);
  --line: #2d3941;
  --line-strong: #41505a;
  --text: #f3f7f8;
  --muted: #a6b3ba;
  --primary: #35b59b;
  --primary-strong: #68d6c2;
  --primary-soft: rgba(53, 181, 155, 0.14);
  --primary-text: #05251e;
  --primary-strong-text: #05251e;
  --app-font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  /* Prio-Kanten im Dunkelmodus einen Tick leuchtender (sonst matschig). */
  --prio-low: #7c8b96;
  --prio-normal: #35b59b;
  --prio-high: #f0a53c;
  --prio-urgent: #ff7a70;
  --accent: #ffb454;
  --danger: #ff7a70;
  --danger-soft: #4a221f;
  --toast-success-bg: #103b2a;
  --toast-success-border: #2fa875;
  --toast-success-text: #d1fae5;
  --toast-error-bg: #3a1714;
  --toast-error-border: #b94b42;
  --toast-error-text: #ffd9d5;
  --warning-soft: #3d3018;
  --blue-soft: #1f3d63;
  --modal-backdrop: rgba(0, 0, 0, 0.66);
  --avatar-bg: #35b59b;
  --shadow: 0 18px 52px rgba(0, 0, 0, 0.36);
  --bg-glow: rgba(53, 181, 155, 0.16);
}

/* Display-Typografie (Design-Audit 2026-07-02): Lexend NUR für die großen
   Marken-Momente — Login-Wortmarke, Begrüßung, Board-/Ansichts-Titel,
   Dialog-Titel und die Kennzahlen. Alles Übrige bleibt im Body-Font
   (Inter bzw. gewähltes Schrift-Preset) — ein Kontrast, nicht zwei Schriften
   im Fließtext. */
.brand-panel h1,
#dashboardGreeting,
#boardTitle,
.my-tasks-title,
.modal-header h3,
.modal h3 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

.dash-stat-value {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Formen-Leitplanke (Design-Audit 2026-07-02): Pillenform (999px) NUR für
   Zustands-/Filter-Chips, Badges, Zähler und Avatare — Aktionen, Eingaben
   und Menü-Controls sind eckig (6–12px). Neue Komponenten bitte einordnen. */

/* Login: abstrakte Board-Silhouette unter der Wortmarke — Produkt-Vernakular
   (Spalten, Karten, Prio-Kanten) statt leerer Fläche; erbt die Theme-Farben
   über CSS-Variablen und funktioniert damit in Hell und Dunkel. */
.brand-illustration {
  display: block;
  width: min(360px, 100%);
  height: auto;
  margin-top: 30px;
  opacity: 0.92;
}

@media (max-width: 900px) {
  .brand-illustration {
    display: none;
  }
}

/* Bewegung dosiert: Karten-Lift + Dialog-Einblenden. Nutzer mit reduzierter
   Bewegung bekommen alle Zustände ohne Übergänge (WCAG). */
@media (prefers-reduced-motion: no-preference) {
  .task-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }

  @media (hover: hover) {
    .task-card:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 22px rgba(18, 30, 38, 0.1);
    }
  }

  .modal-backdrop:not(.hidden) {
    animation: overlay-fade 0.16s ease-out;
  }

  .modal-backdrop:not(.hidden) > * {
    animation: dialog-rise 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
}

@keyframes overlay-fade {
  from { opacity: 0; }
}

@keyframes dialog-rise {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
}

body {
  background:
    radial-gradient(circle at top right, var(--bg-glow), transparent 34rem),
    var(--bg);
}

.auth-panel,
.modal,
.card-detail-modal {
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.brand-mark {
  border-radius: 10px;
  background: transparent;
}

.app-shell {
  grid-template-columns: minmax(240px, var(--sidebar-width, 260px)) 7px minmax(0, 1fr);
  background: transparent;
}

.sidebar {
  gap: 18px;
  padding: 18px;
  background: var(--surface-elevated);
  backdrop-filter: blur(18px);
}

.sidebar-top {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

/* White-label-Wortmarke in der Sidebar, wenn kein Logo gesetzt ist. */
.sidebar-brand-name {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-actions .primary-button,
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  color: var(--primary-text);
  background: var(--primary);
  font-weight: 800;
}

.primary-button:hover {
  color: var(--primary-strong-text);
  background: var(--primary-strong);
}

/* Kein Dark-Override der Textfarbe mehr: der Grund bleibt --primary, also muss
   der Text --primary-text (dessen berechneter Kontrastpartner) sein — die alte
   Regel setzte --primary-strong-text (schwarz) auf grünen Grund = 3.16:1
   (A11y-Audit 2026-07-04). */

.board-list button {
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 8px;
  border-color: var(--line);
  background: var(--surface);
}

.board-list button:hover {
  border-color: var(--line-strong);
}

.board-list button.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.main {
  background: rgba(255, 255, 255, 0.02);
}

.board-header {
  min-height: 76px;
  align-items: center;
  padding: 16px 22px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px);
}

.board-title-row {
  align-items: center;
  gap: 10px;
}

.board-title-block h2 {
  font-size: clamp(1.5rem, 1.8vw, 1.9rem);
}

.title-icon-button,
.top-icon-button,
.icon-button {
  border-radius: 8px;
}

.board-link-chip,
.attachment-chip {
  min-height: 34px;
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  color: var(--primary-strong);
  background: var(--primary-soft);
  font-weight: 800;
}

.top-actions {
  gap: 8px;
}

.profile-button {
  width: auto;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 3px 12px 3px 4px;
  border-radius: 999px;
  color: var(--text);
  background: var(--surface);
  font-weight: 800;
}

.profile-button #profileInitials {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--primary-text);
  background: var(--primary);
}

.profile-button-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-menu {
  border-radius: 10px;
}

.toolbar {
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 22px;
  background: color-mix(in srgb, var(--surface-elevated) 86%, transparent);
}

.search-field {
  position: relative;
  flex: 0 1 420px;
  max-width: 460px;
}

.search-field .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.search-field input {
  height: 42px;
  min-height: 42px;
  padding-left: 40px;
  border-radius: 8px;
  background: var(--surface);
  font-weight: 650;
}

.toggle-field {
  height: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface);
  font-size: 0.9rem;
  font-weight: 650;
}

.toolbar-select {
  height: 42px;
  min-height: 42px;
  padding: 0 34px 0 12px;
  border-radius: 8px;
  background-color: var(--surface);
  font-size: 0.9rem;
}

.toggle-field input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.toggle-field span {
  line-height: 1;
}

.toolbar .secondary-button,
.secondary-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.9rem;
  font-weight: 650;
}

.toolbar .secondary-button {
  height: 42px;
  padding: 0 16px;
}

.board-content {
  padding: 18px 22px 34px;
}

.kanban {
  gap: 14px;
}

.kanban > .column.is-collapsed {
  width: 76px;
  flex-basis: 76px;
}

.add-column-tile {
  width: 168px;
  min-height: 46px;
  align-self: start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  font-weight: 800;
}

.add-column-tile:hover {
  border-color: var(--primary);
  color: var(--primary-strong);
  background: var(--primary-soft);
}

.add-column-tile .ui-icon {
  width: 17px;
  height: 17px;
}

.column {
  border-color: var(--line);
  border-radius: 10px;
  background: var(--column-bg);
  backdrop-filter: blur(2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
}

.column-header {
  min-height: 46px;
  padding: 8px 10px;
}

.column-title-group {
  gap: 7px;
}

.column-title-button {
  font-size: 0.95rem;
  font-weight: 800;
}

.count-pill {
  min-width: 30px;
  color: var(--muted);
  background: var(--surface-soft);
  font-weight: 800;
}

.card-list {
  gap: 10px;
  padding: 12px;
}

.task-card {
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .task-card {
  background: var(--surface-soft);
}

.task-card h4 {
  font-size: 1rem;
  font-weight: 800;
}

.meta-row,
.card-footer,
.doc-link,
.chip {
  align-items: center;
}

.chip {
  min-height: 24px;
  gap: 5px;
  padding: 3px 8px;
  font-weight: 800;
}

.chip .ui-icon,
.doc-link .ui-icon {
  width: 15px;
  height: 15px;
}

.chip.priority-low {
  color: #16442f;
  background: #c8ead5;
}

.chip.priority-normal {
  color: #123f4b;
  background: #c8e6f1;
}

.chip.priority-high {
  color: #5a3300;
  background: #ffd68a;
}

.chip.priority-urgent {
  color: #6f1d18;
  background: #ffc5bd;
}

.attachment-chip-indicator {
  color: var(--muted);
  background: var(--surface-soft);
}

.attachment-chip-indicator .ui-icon {
  color: var(--primary);
}

/* Dunkelmodus-Chips einen Tick leuchtender (0.24-Alpha wirkte matschig auf
   den dunklen Karten; Design-Audit 2026-07-02). */
[data-theme="dark"] .chip.priority-low {
  color: #e2ffe9;
  background: rgba(123, 216, 143, 0.3);
}

[data-theme="dark"] .chip.priority-normal {
  color: #e0f3ff;
  background: rgba(106, 168, 255, 0.3);
}

[data-theme="dark"] .chip.priority-high {
  color: #ffedc9;
  background: rgba(255, 180, 84, 0.32);
}

[data-theme="dark"] .chip.priority-urgent {
  color: #ffe7e4;
  background: rgba(255, 122, 112, 0.32);
}

.checklist-preview {
  background: color-mix(in srgb, var(--surface) 72%, var(--surface-soft));
}

.avatar {
  color: var(--primary-text);
  background: var(--primary);
  font-weight: 800;
}

.card-footer > div:first-child {
  display: flex;
  align-items: center;
}

.card-footer .avatar {
  border: 2px solid var(--surface);
}

.card-footer .avatar + .avatar {
  margin-left: -7px;
}

.doc-link {
  display: inline-flex;
  gap: 6px;
  color: var(--primary-strong);
  font-weight: 800;
}

.column-footer {
  padding: 0 12px 12px;
}

/* „+ Karte" tritt zurück (in jeder Spalte wiederholt = visuelles Rauschen)
   und wird beim Überfahren der Spalte voll sichtbar; Touch-Geräte ohne Hover
   sehen sie dauerhaft voll. */
.add-card-button {
  border-style: dashed;
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
  opacity: 0.72;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.column:hover .add-card-button,
.add-card-button:hover,
.add-card-button:focus-visible {
  opacity: 1;
  color: var(--text);
  border-color: var(--line-strong);
}

@media (hover: none) {
  .add-card-button {
    opacity: 1;
  }
}

.modal-header {
  background: var(--surface);
}

.card-detail-layout {
  background: var(--surface);
}

.card-activity-panel {
  background: color-mix(in srgb, var(--surface-elevated) 88%, var(--surface-soft));
}

.admin-modal {
  width: min(720px, calc(100vw - 32px));
  height: min(760px, calc(100vh - 32px));
  max-height: min(760px, calc(100vh - 32px));
  display: grid;
  grid-template-rows: auto auto minmax(140px, 1fr) auto auto;
  gap: 14px;
  overflow: hidden;
}

.admin-settings-section {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-elevated);
}

.backup-status-banner {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 0.9rem;
  font-weight: 600;
}
.backup-status-banner.is-ok {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.backup-status-banner.is-warn {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-soft);
}
.backup-status-banner.is-neutral {
  color: var(--muted);
}

.admin-registration-toggle {
  justify-content: flex-start;
  width: 100%;
  height: auto;
  min-height: 42px;
}

.admin-registration-toggle span {
  line-height: 1.25;
  white-space: normal;
}

.restore-row {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.restore-selection {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.restore-selection-title { margin: 0; font-weight: 650; }
.restore-selection-list { display: grid; gap: 4px; max-height: 220px; overflow: auto; }
.restore-board-option { display: flex; align-items: center; gap: 8px; }

.card-links-items { display: grid; gap: 6px; }
.card-link-row { display: flex; gap: 6px; align-items: center; }
.card-link-row input { min-width: 0; }
.card-link-row .card-link-label { flex: 0 1 32%; }
.card-link-row input[type="url"] { flex: 1 1 auto; }
.card-link-open { text-decoration: none; }

.admin-setting-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

/* Idle-Timeout: schmales Minuten-Eingabefeld (statt voller Breite). */
.idle-minutes-input {
  max-width: 140px;
}

/* Admin: An/Aus-Schalter je System-Vorlage (untereinander). */
.admin-template-toggles {
  display: grid;
  gap: 4px;
}

/* Hinweisbanner über dem Board, wenn eine Vorlage bearbeitet wird. */
.template-edit-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--primary);
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--text);
}

.template-edit-banner-text {
  flex: 1 1 auto;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.admin-users-section {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  margin: 0;
}

.admin-user-search {
  width: 100%;
  max-width: none;
}

.admin-users-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: none;
  overflow: auto;
  padding-right: 2px;
}

.admin-user-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-elevated);
}

.admin-user-meta {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.admin-user-meta strong,
.admin-user-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-meta > span {
  color: var(--muted);
  font-size: 0.84rem;
}

.admin-user-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-user-protected {
  justify-self: end;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-edit-form {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-elevated);
}

.admin-modal > .form-stack {
  min-height: 0;
}

.admin-modal > .form-stack:not(.admin-edit-form) {
  padding-top: 2px;
}

.members-invite-form {
  display: grid;
  gap: 10px;
}

.members-invite-form .inline-form {
  align-items: end;
}

.members-invite-form select {
  min-height: 42px;
}

.members-invite-form select[name="userId"] {
  min-width: min(100%, 280px);
  flex: 1 1 260px;
}

.invite-new-user {
  padding: 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--surface-elevated);
}

.invite-new-user summary {
  cursor: pointer;
  color: var(--primary-strong);
  font-weight: 800;
}

.invite-new-user .form-grid {
  margin-top: 10px;
}

@media (max-width: 760px) {
  .admin-modal {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
    gap: 14px;
    padding: 16px;
  }

  .admin-user-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .admin-user-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .admin-edit-form .form-grid {
    grid-template-columns: 1fr;
  }

  .profile-button-name {
    display: none;
  }

  .toolbar {
    align-items: stretch;
  }

  .search-field {
    max-width: none;
  }
}

/* UI consistency pass: keep dialog, form, and action spacing predictable. */
:root {
  --ui-radius: 8px;
  --ui-radius-lg: 10px;
  --control-height: 42px;
  --control-gap: 12px;
  --section-gap: 16px;
  --panel-padding: 12px;
  --label-size: 0.86rem;
  --label-weight: 760;
  --body-size: 0.95rem;
}

body,
button,
input,
select,
textarea {
  font-size: var(--body-size);
}

label,
.field-label,
.section-head h4,
.modal h4 {
  color: var(--muted);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: 1.25;
}

input,
select,
textarea {
  width: 100%;
  border-radius: var(--ui-radius);
  font: inherit;
}

input,
select {
  min-height: var(--control-height);
}

textarea {
  min-height: 96px;
  resize: vertical;
}

.form-stack,
.card-detail-main,
.members-invite-form {
  gap: var(--section-gap);
}

.form-grid,
.card-meta-grid {
  gap: var(--control-gap);
}

.form-stack > label,
.card-detail-main > label,
.card-meta-grid label,
.field-group,
.profile-select-control,
.accent-control {
  display: grid;
  gap: 7px;
  align-content: start;
}

.modal {
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-lg);
}

.modal-header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--control-gap);
  margin: -20px -20px 18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.card-detail-modal .modal-header,
.admin-modal .modal-header {
  margin: 0;
}

.modal-header h3,
.modal h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  line-height: 1.2;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--control-gap);
  min-height: var(--control-height);
}

.section-head h4 {
  margin: 0;
}

.section-actions,
.modal-actions,
.inline-form,
.admin-user-actions {
  gap: var(--control-gap);
}

.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.icon-button,
.date-picker-button,
.board-link-chip,
.toggle-field {
  min-height: var(--control-height);
  border-radius: var(--ui-radius);
  font-size: 0.9rem;
  line-height: 1;
}

.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.board-link-chip,
.toggle-field {
  padding-inline: 14px;
}

.compact {
  min-height: 36px;
  padding-inline: 12px;
}

.icon-button,
.date-picker-button {
  width: var(--control-height);
  min-width: var(--control-height);
  padding: 0;
}

.toolbar {
  min-height: 76px;
  align-items: center;
}

.toolbar .search-field input,
.toolbar-select,
.toolbar .secondary-button,
.toolbar .toggle-field {
  height: var(--control-height);
  min-height: var(--control-height);
}

.section-panel,
.checklist-editor {
  gap: 10px;
  padding: var(--panel-padding);
  border-radius: var(--ui-radius-lg);
}

.card-detail-main > .section-panel {
  padding: 14px 0;
  border-width: 1px 0 0;
  border-radius: 0;
  background: transparent;
}

.card-detail-main > .section-panel > .section-head,
.card-detail-main > .section-panel > .attachment-list,
.card-detail-main > .section-panel > input,
.card-detail-main > .section-panel > .checklist-items,
.card-detail-main > .section-panel > .label-picker,
.card-detail-main > .section-panel > .label-create-row {
  width: 100%;
}

.card-detail-main > .section-panel.card-section {
  color: var(--muted);
}

.card-detail-main > .section-panel.card-section input {
  margin-top: 7px;
}

.member-picker {
  min-height: 58px;
  padding: 10px;
}

.member-selected-row {
  gap: 8px;
}

.member-selected-chip {
  min-height: 30px;
  padding: 4px 10px 4px 5px;
}

.attachment-row,
.label-create-row,
.checklist-row {
  gap: 10px;
}

.comment-form {
  display: grid;
  gap: 10px;
}

.activity-list {
  display: grid;
  gap: 12px;
}

.admin-modal {
  padding: 18px;
}

.admin-edit-form,
.invite-new-user {
  padding: 14px;
  border-radius: var(--ui-radius-lg);
}

@media (max-width: 760px) {
  .modal-backdrop {
    padding: 10px;
  }

  .modal,
  .admin-modal {
    width: calc(100vw - 20px);
  }

  .modal-header {
    margin: -16px -16px 16px;
  }

  .card-detail-main > .section-panel {
    width: 100%;
  }
}

/* Modal typography and alignment refinement. */
:root {
  --font-label: 0.88rem;
  --font-control: 0.95rem;
  --font-section-title: 1rem;
  --font-dialog-title: 1.22rem;
  --font-small: 0.82rem;
  --dialog-padding: 18px;
}

.modal-header h3,
.modal h3 {
  font-size: var(--font-dialog-title);
  font-weight: 780;
}

.form-stack > label,
.card-detail-main > label,
.card-meta-grid label,
.field-group,
.field-label {
  color: var(--muted);
  font-size: var(--font-label);
  font-weight: 720;
}

.card-detail-main > label :is(input, textarea, select, .date-field, .member-picker),
.card-meta-grid :is(label, .field-group) :is(input, textarea, select, .date-field, .member-picker),
.comment-form textarea,
.comment-form button,
.toolbar input,
.toolbar select,
.toolbar button {
  font-size: var(--font-control);
}

.card-detail-main > :is(.label-editor, .checklist-editor, .attachments-editor) .section-head h4,
.card-detail-main > .section-panel.card-section,
.card-activity-panel h4,
.archive-layout h4,
.admin-users-section h4,
.admin-edit-form h4 {
  color: var(--text);
  font-size: var(--font-section-title);
  font-weight: 760;
  line-height: 1.3;
}

.card-detail-main,
.card-activity-panel {
  padding: var(--dialog-padding);
}

.card-activity-panel {
  gap: 14px;
}

.card-activity-panel > h4,
.card-activity-panel > .comment-form,
.card-activity-panel > .activity-list {
  width: 100%;
  margin: 0;
}

.comment-form textarea {
  min-height: 86px;
}

.comment-form .secondary-button,
.comment-form button {
  width: 100%;
}

.activity-row {
  width: 100%;
  padding: 2px 0;
}

.activity-body {
  color: var(--text);
  font-size: var(--font-control);
}

.activity-type,
.checklist-empty,
.admin-user-meta > span,
.member-row span {
  font-size: var(--font-small);
}

.section-panel,
.card-detail-main > .section-panel {
  gap: 12px;
}

/* Responsive toolbar and stronger product type scale. */
:root {
  --font-label: 0.82rem;
  --font-control: 0.92rem;
  --font-section-title: 1.08rem;
  --font-dialog-title: 1.38rem;
  --font-small: 0.78rem;
}

.modal-header h3,
.modal h3,
.card-detail-modal .modal-header h3 {
  font-size: var(--font-dialog-title);
  font-weight: 820;
  letter-spacing: 0;
}

.card-detail-main > :is(.label-editor, .checklist-editor, .attachments-editor) .section-head h4,
.card-detail-main > .section-panel.card-section,
.card-activity-panel h4,
.archive-layout h4,
.admin-users-section h4,
.admin-edit-form h4,
.members-section h4 {
  font-size: var(--font-section-title);
  font-weight: 800;
}

.card-detail-main > label :is(input, textarea, select, .date-field, .member-picker),
.card-meta-grid :is(label, .field-group) :is(input, textarea, select, .date-field, .member-picker),
.comment-form textarea,
.comment-form button,
.toolbar input,
.toolbar select,
.toolbar button {
  font-size: var(--font-control);
}

.form-stack > label,
.card-detail-main > label,
.card-meta-grid label,
.field-group,
.field-label {
  font-size: var(--font-label);
  font-weight: 760;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 12px 22px;
  overflow: visible;
}

.toolbar .search-field {
  flex: 1 1 320px;
  min-width: min(100%, 240px);
  max-width: 430px;
}

.toolbar .toggle-field {
  flex: 0 0 auto;
}

/* Die früheren Breiten-Regeln der OFFENEN Filterleiste (max-width je Select,
   „+ Spalte"-Knopf) sind entfernt: die Filter liegen auf allen Breiten hinter
   dem Filter-Knopf, und die ID-Selektoren (.toolbar #labelFilterInput …)
   schlugen per ID-Spezifität die width:100%-Regeln des Menüs — daher wirkten
   die Dropdowns dort treppenförmig ungleich breit (Befund 2026-07-02). */

@media (max-width: 980px) {
  .toolbar .search-field,
  .toolbar .toolbar-select,
  .toolbar .toggle-field,
  .toolbar #newColumnButton {
    flex: 1 1 180px;
    max-width: none;
  }
}

/* Keep sidebar collapse controls on the same viewport baseline. */
.sidebar-footer {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 45;
  display: flex;
  justify-content: flex-start;
  width: 42px;
  margin: 0;
  padding: 0;
  background: transparent;
}

.sidebar-local-toggle {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  height: 42px;
  background: var(--surface-elevated);
  box-shadow: 0 10px 24px rgba(16, 24, 31, 0.16);
}

.app-shell.sidebar-collapsed .sidebar-footer {
  display: none;
}

.app-shell > .sidebar-restore-button {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  height: 42px;
  background: var(--surface-elevated);
  box-shadow: 0 10px 24px rgba(16, 24, 31, 0.16);
}

.app-shell.sidebar-collapsed > .sidebar-restore-button {
  left: 18px;
  bottom: 18px;
}

.sidebar-local-toggle,
.app-shell > .sidebar-restore-button {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.sidebar-local-toggle:hover,
.sidebar-local-toggle:focus,
.sidebar-local-toggle:active,
.app-shell > .sidebar-restore-button:hover,
.app-shell > .sidebar-restore-button:focus,
.app-shell > .sidebar-restore-button:active {
  color: var(--muted);
  background: var(--surface-elevated);
  border-color: var(--line);
  box-shadow: 0 10px 24px rgba(16, 24, 31, 0.16);
  transform: none;
}

/* Global font tone control. */
:root {
  --app-font-style: normal;
  --weight-body: 400;
  --weight-label: 560;
  --weight-control: 500;
  --weight-button: 600;
  --weight-section: 660;
  --weight-title: 720;
  --weight-chip: 620;
  --font-label: 0.8rem;
  --font-control: 0.9rem;
  --font-section-title: 1rem;
  --font-dialog-title: 1.28rem;
  --font-small: 0.78rem;
}

body,
input,
select,
textarea,
button {
  font-style: var(--app-font-style);
}

body {
  font-weight: var(--weight-body);
}

input,
select,
textarea {
  font-weight: var(--weight-control);
}

button,
.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.board-link-chip,
.toggle-field {
  font-weight: var(--weight-button);
}

label,
.field-label,
.form-stack > label,
.card-detail-main > label,
.card-meta-grid label,
.field-group,
.eyebrow {
  font-weight: var(--weight-label);
}

.modal-header h3,
.modal h3,
.board-title-block h2,
.brand-panel h1,
.task-card h4,
.column-title-button,
.profile-menu-head strong,
.admin-user-meta strong,
.member-row strong {
  font-weight: var(--weight-title);
}

.card-detail-main > :is(.label-editor, .checklist-editor, .attachments-editor) .section-head h4,
.card-detail-main > .section-panel.card-section,
.card-activity-panel h4,
.archive-layout h4,
.admin-users-section h4,
.admin-edit-form h4,
.members-section h4,
.section-head h4 {
  font-weight: var(--weight-section);
}

.chip,
.avatar,
.count-pill,
.activity-type,
.doc-link,
.member-selected-chip,
.admin-user-protected {
  font-weight: var(--weight-chip);
}

.profile-select-control select {
  font-style: normal;
}

.activity-menu-button.icon-button {
  width: 26px;
  min-width: 26px;
  min-height: 24px;
}

/* Keep the board header compact when a board has a longer description. */
.board-header > .top-actions {
  align-self: flex-start;
}

.board-description-wrap {
  position: relative;
  max-width: min(920px, 100%);
  margin-top: 7px;
}

.board-title-block .board-description {
  max-width: 100%;
  margin: 0 !important;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.board-description-wrap:has(.board-description-toggle:not(.hidden)) .board-description:not(.is-expanded) {
  padding-right: 94px;
}

.board-description.is-expanded {
  display: inline;
  overflow: visible;
}

.board-description-toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 0 0 20px;
  border: 0;
  color: var(--primary-strong);
  background: linear-gradient(90deg, transparent, var(--surface) 18px);
  font-size: 0.78rem;
  font-weight: var(--weight-button);
  line-height: 1.35;
  cursor: pointer;
}

.board-description.is-expanded + .board-description-toggle {
  position: static;
  margin-left: 6px;
  padding: 0;
  background: transparent;
}

.board-description-toggle:hover,
.board-description-toggle:focus-visible {
  text-decoration: underline;
}

.board-title-row > .title-icon-button {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
}

.board-title-row > .board-link-chip {
  min-height: 34px;
  padding-inline: 10px;
  font-size: 0.82rem;
}

/* Card overview density: avatars carry assignment, chips carry task state. */
.task-card {
  gap: 8px;
  padding: 12px 12px 10px;
}

.task-card h4 {
  line-height: 1.25;
}

.task-card p {
  line-height: 1.35;
}

.card-label-strip {
  gap: 5px;
}

.meta-row {
  gap: 6px;
  align-items: center;
}

.chip {
  min-height: 23px;
}

.checklist-preview {
  gap: 6px;
  padding: 8px;
}

.checklist-preview-row {
  min-height: 22px;
}

.card-footer {
  margin-top: 2px;
  min-height: 26px;
}

.card-footer > div:first-child {
  min-height: 26px;
}

.card-footer .avatar {
  width: 26px;
  height: 26px;
  font-size: 0.72rem;
}

#membersModal {
  z-index: 35;
}

/* Admin modal: split list and details into stable work areas. */
.admin-modal {
  width: min(1080px, calc(100vw - 32px));
  height: min(760px, calc(100vh - 32px));
  max-height: min(760px, calc(100vh - 32px));
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(380px, 1.05fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
  overflow: hidden;
}

.admin-modal > .modal-header {
  grid-column: 1 / -1;
  grid-row: 1;
}

.admin-users-section {
  grid-column: 1;
  grid-row: 2 / 4;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-elevated);
  overflow: hidden;
}

.admin-settings-section {
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
}

#adminEditUserForm,
#adminUserForm {
  grid-column: 2;
  grid-row: 3;
  min-height: 0;
  align-content: start;
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-elevated);
}

#adminUserForm {
  margin: 0;
}

.admin-modal .form-grid {
  grid-template-columns: 1fr;
}

.admin-modal .primary-button {
  width: 100%;
}

.audit-modal {
  width: min(760px, calc(100vw - 32px));
  height: min(680px, calc(100vh - 32px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
}

.error-event-row {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.error-event-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.error-event-status {
  font-weight: 600;
  color: var(--danger, #c0392b);
}

.error-event-route {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  word-break: break-all;
}

.error-event-message {
  white-space: pre-wrap;
  word-break: break-word;
}

.error-event-stack pre {
  margin: 6px 0 0;
  padding: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.8em;
  background: var(--surface-muted, rgba(127, 127, 127, 0.1));
  border-radius: 8px;
}

.audit-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--font-size-sm);
}

.audit-log-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  padding-right: 4px;
}

.audit-log-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-elevated);
}

.audit-log-body {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.audit-log-headline,
.audit-log-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.audit-log-headline strong,
.audit-log-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-action {
  color: var(--primary-strong);
  font-weight: 700;
}

.audit-log-meta {
  color: var(--muted);
  font-size: var(--font-size-sm);
}

.logo-media-modal {
  width: min(860px, calc(100vw - 32px));
  height: min(700px, calc(100vh - 32px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
}

.media-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--font-size-sm);
}

.logo-media-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  padding-right: 4px;
}

.logo-media-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-elevated);
}

.logo-media-preview {
  width: 72px;
  height: 56px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(45deg, rgba(120, 136, 151, 0.12) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(120, 136, 151, 0.12) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(120, 136, 151, 0.12) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(120, 136, 151, 0.12) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.logo-media-info {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.logo-media-info strong,
.logo-media-info span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logo-media-info > span {
  color: var(--muted);
  font-size: var(--font-size-sm);
}

.logo-media-badges,
.logo-media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.logo-media-actions {
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .media-summary,
  .logo-media-row {
    align-items: stretch;
  }

  .media-summary {
    flex-direction: column;
  }

  .logo-media-row {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .logo-media-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

.admin-modal #adminEditUserForm .inline-toggle,
.admin-modal #adminUserForm .inline-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-height: 42px;
  height: auto;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--surface);
}

.admin-modal #adminEditUserForm .inline-toggle input,
.admin-modal #adminUserForm .inline-toggle input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
}

.admin-modal #adminEditUserForm .inline-toggle span,
.admin-modal #adminUserForm .inline-toggle span {
  min-width: 0;
  line-height: 1.2;
  white-space: normal;
}

.admin-user-row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.admin-user-actions {
  align-items: center;
}

@media (max-width: 900px) {
  .admin-modal {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(180px, 0.85fr) minmax(220px, 1fr);
    padding: 14px;
  }

  .admin-modal > .modal-header,
  .admin-settings-section,
  .admin-users-section,
  #adminEditUserForm,
  #adminUserForm {
    grid-column: 1;
  }

  .admin-modal > .modal-header {
    grid-row: 1;
  }

  .admin-settings-section {
    grid-row: 2;
  }

  .admin-users-section {
    grid-row: 3;
  }

  #adminEditUserForm,
  #adminUserForm {
    grid-row: 4;
  }
}

/* Admin modal alignment pass. */
.admin-modal {
  --admin-pad: 20px;
  --admin-gap: 16px;
  --admin-panel-pad: 14px;
  padding: var(--admin-pad);
  gap: var(--admin-gap);
}

.admin-modal > .modal-header {
  min-height: 56px;
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}

.admin-modal > .modal-header h3 {
  margin: 0;
}

.admin-modal > .modal-header .icon-button {
  align-self: center;
}

.admin-users-section,
.admin-settings-section,
#adminEditUserForm,
#adminUserForm {
  padding: var(--admin-panel-pad);
}

.admin-users-section .section-head,
.admin-settings-section .section-head,
#adminEditUserForm .section-head,
#adminUserForm .section-head {
  min-height: 32px;
}

.admin-users-section .section-head h4,
.admin-settings-section .section-head h4,
#adminEditUserForm .section-head h4,
#adminUserForm .section-head h4 {
  margin: 0;
}

.admin-user-search {
  margin: 0;
}

.admin-user-row {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.admin-user-row .avatar {
  width: 28px;
  height: 28px;
  align-self: center;
}

.admin-user-meta {
  gap: 5px;
  align-self: center;
}

.admin-user-actions {
  align-self: center;
  flex-wrap: wrap;
}

.admin-user-actions .compact,
.admin-user-protected {
  min-height: 34px;
}

.admin-registration-toggle,
.admin-modal #adminEditUserForm .inline-toggle,
.admin-modal #adminUserForm .inline-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
}

.admin-registration-toggle input,
.admin-modal #adminEditUserForm .inline-toggle input,
.admin-modal #adminUserForm .inline-toggle input {
  flex: 0 0 auto;
  margin: 0;
}

#adminEditUserForm,
#adminUserForm {
  gap: 14px;
}

#adminEditUserForm label,
#adminUserForm label {
  margin: 0;
}

@media (max-width: 900px) {
  .admin-modal {
    --admin-pad: 14px;
  }
}

/* Password setup and profile security controls. */
.auth-form-intro h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.auth-form-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.profile-menu > .ghost-button {
  width: 100%;
  justify-content: flex-start;
}

.password-setup-toggle {
  margin-top: 4px;
}

.invitation-preview {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--line));
  border-radius: 8px;
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  font-size: 0.85rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.invitation-preview a {
  color: var(--primary-text-strong, var(--primary));
  font-weight: 700;
}

.invite-new-user .password-setup-toggle {
  margin-top: 12px;
}

.invite-new-user-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.invite-new-user-actions .primary-button {
  width: auto;
  min-width: 220px;
}

/* Keep checkbox labels horizontal inside stacked forms. */
.form-stack > label.inline-toggle {
  min-height: var(--control-height);
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 10px 12px;
}

.form-stack > label.inline-toggle > input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
}

.form-stack > label.inline-toggle > span {
  min-width: 0;
  line-height: 1.3;
  white-space: normal;
}

/* Global admin settings. */
.system-settings-modal {
  width: min(720px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
  overflow: auto;
}

.system-settings-modal .section-head {
  align-items: flex-start;
  gap: 16px;
}

.section-hint {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.status-badge {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-badge.success {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--line));
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 15%, var(--surface));
}

.form-grid.two-columns {
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.32fr);
}

.input-with-suffix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.input-with-suffix > span {
  color: var(--muted);
  font-size: 0.86rem;
}

.system-settings-actions {
  margin-top: 2px;
}

.test-mail-form {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.test-mail-form .inline-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 560px) {
  .form-grid.two-columns,
  .test-mail-form .inline-form {
    grid-template-columns: 1fr;
  }
}

/* Attachment editor polish: clearer file/link rows and stable action placement. */
.attachment-editor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-elevated) 92%, transparent);
}

.attachment-editor-row .attachment-details {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.attachment-field {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: var(--font-label);
  font-weight: 760;
}

.attachment-field input {
  width: 100%;
  min-width: 0;
}

.attachment-file-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.84rem;
}

.attachment-file-meta .ui-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--primary);
}

.attachment-file-meta strong {
  min-width: 0;
  color: var(--text);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-editor-row .attachment-actions {
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
}

.attachment-editor-row .attachment-action,
.attachment-editor-row .danger-icon-button {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
}

.attachment-editor-row .danger-icon-button {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.attachment-editor-row .danger-icon-button:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 54%, var(--line));
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
}

.attachment-editor-row button[aria-label="Anhang entfernen"] {
  color: var(--danger);
  overflow: visible;
}

.attachment-editor-row button[aria-label="Anhang entfernen"]::before {
  content: none;
}

.attachment-editor-row .attachment-preview-link {
  grid-column: 1 / -1;
  width: min(360px, 100%);
  margin-top: 2px;
}

.attachment-editor-row .attachment-preview-image {
  max-height: 220px;
}

.attachment-link-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.attachments-editor .section-actions {
  gap: 8px;
}

.attachments-editor .section-actions .icon-text-button {
  min-height: 36px;
  padding-inline: 12px;
  font-size: 0.86rem;
}

@media (max-width: 720px) {
  .attachment-editor-row {
    grid-template-columns: 1fr;
  }

  /* Aktionen rechtsbuendig und auf Feldhoehe (42px) — linksbuendige 38px-
     Buttons direkt hinter unterschiedlich hohen Feldern wirkten unruhig
     (User-Feedback 2026-06-10). */
  .attachment-editor-row .attachment-actions {
    justify-content: flex-end;
  }

  .attachment-editor-row .attachment-actions .icon-button,
  .attachment-editor-row .attachment-actions .attachment-action {
    width: 42px;
    height: 42px;
    min-height: 42px;
  }
}

/* Responsive baseline (Touch-Ziele/Modals). Die frueheren dvh-Overrides fuer
   .app-shell/.sidebar/.column leben jetzt als vh->dvh-Doppel-Deklaration in
   den BASIS-Regeln — hier hinten haetten sie die Tablet-height:auto-Regeln
   (<=900px) ueberschrieben: Board-Kopf ueberlappte die Sidebar-Kacheln auf
   dem iPad hochkant (Nutzer-Foto 2026-07-05). */
.modal,
.admin-modal,
.archive-modal,
.audit-modal,
.logo-media-modal,
.system-settings-modal,
.card-detail-modal {
  max-height: min(860px, calc(100dvh - 32px));
}

.toolbar :is(input, select, button),
.toolbar .toggle-field,
.board-title-row :is(button, a),
.top-actions :is(button, a),
.sidebar-actions :is(button, a),
.sidebar-footer button {
  min-height: 40px;
}

@media (max-width: 900px) {
  .app-shell {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .sidebar {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    height: auto;
    /* KEIN 220px-Deckel mehr: der schnitt die Board-Kachelreihe halb ab
       (overflow:hidden; iPad-hochkant-Foto 2026-07-05). Die Hoehe ist
       selbstbegrenzend — die Kachelliste ist hier EINE horizontal
       scrollende Reihe, Nav+Filter je eine Zeile (~370px gesamt). */
    max-height: none;
    gap: 10px;
    padding: 12px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow: visible;
  }

  .sidebar-resizer {
    display: none;
  }

  .board-list {
    min-height: 58px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
  }

  .board-list button {
    /* Ab hier (<=900px) ist .board-list eine horizontale Flex-Reihe; align-self
       steuert die Querachse (Höhe). stretch hält die Kacheln gleich hoch und
       neutralisiert das align-self: start der Desktop-Basisregel (das nur im
       Grid >900px gebraucht wird). */
    align-self: stretch;
    flex: 0 0 min(240px, 72vw);
    min-height: 50px;
  }

  .sidebar-actions {
    display: flex;
    gap: 8px;
    padding-right: 0;
    /* Bei Platzmangel scrollt die Nav-Reihe horizontal (wie die Board-Kachel-
       Reihe darunter), statt die Buttons unter ihre Inhaltsbreite zu quetschen. */
    overflow-x: auto;
  }

  .sidebar-actions .full-width {
    width: auto;
    flex: 1 0 auto;
  }

  /* Buttons nie unter die Inhaltsbreite schrumpfen: sonst bricht das Label um,
     der Textblock nimmt die volle Restbreite und drueckt das Icon an den linken
     Kachelrand — Icon klebte links, Text stand zentriert (iPad-Foto 2026-07-05). */
  .sidebar-actions .icon-text-button {
    flex: 1 0 auto;
    white-space: nowrap;
  }

  /* <=900px ist .sidebar-actions eine horizontale Reihe (und <=620px Icon-Quadrate)
     — dort die Desktop-Linksbündigkeit zurücknehmen, sonst klebt der Inhalt links
     bzw. das einzelne Icon sitzt außermittig. Gilt via max-width:900px auch für
     <=620px. */
  .sidebar-actions .icon-text-button,
  .sidebar-actions .primary-button.full-width {
    justify-content: center;
    /* Symmetrisch statt padding-left:0 — die Buttons haben hier ihre
       natuerliche Breite (flex-shrink 0), das Padding rahmt Icon+Text. */
    padding-left: 14px;
    padding-right: 14px;
  }

  /* In der horizontalen Reihe (<=900px) bzw. als Icon-Quadrat (<=620px) ergibt der
     Archiv-Abstand keinen Sinn — zuruecknehmen. */
  .sidebar-archive-button {
    margin-top: 0;
  }

  .main {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    overflow: hidden;
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .app-shell.sidebar-collapsed .main {
    grid-column: 1;
    grid-row: 1;
  }

  .board-header {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
  }

  .board-title-block {
    grid-column: 1;
  }

  .top-actions {
    grid-column: 2;
    width: auto;
    margin-left: auto;
  }

  .toolbar {
    flex: 0 0 auto;
    align-items: stretch;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable;
  }

  .toolbar .search-field {
    min-width: min(100%, 260px);
  }

  .toolbar .toolbar-select,
  .toolbar .toggle-field,
  .toolbar #newColumnButton {
    min-width: 160px;
  }

  .board-content {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 28px;
  }

  .kanban {
    width: max-content;
    min-width: 100%;
    min-height: 100%;
  }

  .column {
    width: min(340px, calc(100vw - 40px));
    flex-basis: min(340px, calc(100vw - 40px));
    max-height: none;
  }

  .card-list {
    max-height: max(220px, calc(100dvh - 430px));
  }

  .card-detail-modal,
  .archive-modal,
  .admin-modal,
  .audit-modal,
  .logo-media-modal,
  .system-settings-modal {
    width: calc(100vw - 20px);
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
  }

  .card-detail-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.25fr) minmax(220px, 0.75fr);
    min-height: 0;
    overflow: hidden;
  }

  .card-detail-main {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  body {
    overflow: hidden;
  }

  .app-shell {
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--bg);
  }

  .sidebar {
    position: relative;
    max-height: 92px;
    gap: 6px;
    padding: 7px 10px 8px;
    box-shadow: 0 8px 22px rgba(20, 31, 38, 0.08);
  }

  .sidebar-top {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 32px;
    padding-right: 128px;
  }

  .sidebar-brand-mark {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }

  .sidebar-top strong {
    max-width: none;
    font-size: 0.95rem;
  }

  .sidebar-top .eyebrow {
    font-size: 0.66rem;
    line-height: 1.05;
  }

  .sidebar-actions {
    position: absolute;
    top: 7px;
    right: 48px;
    display: flex;
    width: auto;
    gap: 6px;
  }

  .sidebar-actions .primary-button,
  .sidebar-actions .secondary-button {
    width: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    font-size: 0.8rem;
  }

  .sidebar-actions .primary-button span,
  .sidebar-actions .secondary-button span {
    display: none;
  }

  .board-list {
    min-height: 32px;
    gap: 7px;
    padding-bottom: 0;
    scrollbar-width: none;
  }

  .board-list::-webkit-scrollbar {
    display: none;
  }

  .board-list button {
    flex: 0 0 min(190px, 62vw);
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 8px;
    border-color: var(--line);
    background: var(--surface);
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .board-list button.active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-strong);
  }

  .board-list button strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .board-list span,
  .board-member-strip {
    display: none;
  }

  /* Scroll-Hinweis: rechter Fade nur, wenn die Board-Reihe horizontal scrollbar
     ist und noch nicht am Ende (Klasse via JS: updateBoardScrollHint). */
  .sidebar:has(.board-list.has-scroll)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 8px;
    width: 42px;
    height: 38px;
    background: linear-gradient(to right, transparent, var(--surface-elevated));
    pointer-events: none;
    z-index: 3;
  }

  .sidebar-footer {
    position: absolute;
    top: 7px;
    right: 10px;
    bottom: auto;
    left: auto;
    width: auto;
    z-index: 6;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  .sidebar-footer .sidebar-local-toggle {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    height: 34px;
    background: var(--surface-elevated);
    box-shadow: 0 8px 22px rgba(20, 31, 38, 0.12);
  }

  .app-shell.sidebar-collapsed > .sidebar-restore-button {
    top: 7px;
    right: 10px;
    bottom: auto;
    left: auto;
    z-index: 90;
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    height: 34px;
    border-color: var(--line);
    background: var(--surface-elevated);
    box-shadow: 0 8px 22px rgba(20, 31, 38, 0.12);
  }

  .sidebar-local-toggle:hover,
  .sidebar-local-toggle:focus,
  .sidebar-local-toggle:active,
  .app-shell > .sidebar-restore-button:hover,
  .app-shell > .sidebar-restore-button:focus,
  .app-shell > .sidebar-restore-button:active {
    background: var(--surface-elevated);
    box-shadow: 0 8px 22px rgba(20, 31, 38, 0.12);
    transform: none;
  }

  .main {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }

  .board-header {
    position: relative;
    padding: 9px 12px 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .board-title-block {
    grid-column: 1;
    min-width: 0;
  }

  .board-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
  }

  .board-title-row #boardTitle {
    order: 1;
    flex: 0 1 auto;
    max-width: calc(100% - 41px);
  }

  .board-title-row #boardSettingsButton {
    order: 2;
    flex: 0 0 34px;
  }

  .board-title-row #boardMembersButton {
    order: 3;
    flex: 0 0 auto;
  }

  .board-title-row #boardDocmostLink {
    order: 4;
    flex: 0 0 auto;
  }

  .board-title-block h2 {
    font-size: clamp(1.16rem, 5.4vw, 1.36rem);
    line-height: 1.08;
  }

  .board-description {
    margin-top: 5px;
    font-size: 0.84rem;
    line-height: 1.28;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .board-link-chip {
    min-height: 28px;
    padding-inline: 8px;
    font-size: 0.75rem;
  }

  .title-icon-button,
  .top-icon-button,
  .profile-button {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    min-height: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
  }

  .top-actions {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    width: 34px;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 5px;
  }

  .app-shell.sidebar-collapsed .top-actions {
    margin-top: 40px;
  }

  .top-actions > * {
    flex: 0 0 auto;
  }

  .profile-button-name {
    display: none;
  }

  .profile-button {
    display: grid;
    place-items: center;
    justify-content: center;
    gap: 0;
    color: var(--text);
    background: var(--surface-elevated);
  }

  .profile-button #profileInitials {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--primary-text);
    background: var(--primary);
    font-size: 0.66rem;
  }

}

/* Board-Chrome (Mobile-UI-Verdichtung 2026-06-09): Filterleiste kollabiert ab
   Tablet (<=1024px) hinter den Filter-Button. Konsolidiert aus dem fruheren
   620px-Block, daher gilt dieses Verhalten jetzt durchgehend bis 1024px. */
@media (max-width: 1024px) {
  .board-header {
    position: relative;
    min-height: 0;
    align-items: center;
    padding: 8px 14px;
  }

  /* Aktionen behalten ihre Breite, der Titel ist das Schrumpf-Ziel. */
  .board-header > .top-actions {
    flex: 0 0 auto;
  }

  .profile-button-name {
    display: none;
  }

  .board-title-row {
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 0;
  }

  .board-title-block h2 {
    font-size: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* "…"-Knopf + Dropdown selbst liegen jetzt in der Basis (gilt global) —
     hier nur noch die mobil-spezifischen Layoutregeln. */
}

/* Filter auf ALLEN Breiten hinter den Button (Userwunsch 2026-06-09): Suchfeld
   bleibt inline, Chips/Selects klappen ins Dropdown, Aktiv-Badge zeigt gesetzte
   Filter. Bewusst global statt nur <=1024px. Die Header-Verdichtung darüber
   bleibt auf <=1024px beschränkt. */
.toolbar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    min-height: 50px;
    gap: 7px;
    padding: 6px 12px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    overflow: visible;
    scrollbar-width: none;
  }

  .toolbar::-webkit-scrollbar {
    display: none;
  }

  .toolbar .search-field {
    grid-column: 1;
    flex: initial;
    min-width: 0;
    max-width: none;
  }

  .toolbar .mobile-filter-toggle {
    grid-column: 2;
    grid-row: 1;
    min-width: 42px;
    display: inline-flex !important;
    gap: 6px;
  }

  .toolbar .board-view-toggle {
    grid-column: 3;
    grid-row: 1;
  }

  .mobile-filter-toggle span {
    display: none;
  }

  .toolbar .toggle-field,
  .toolbar .toolbar-select {
    display: none;
  }

  .toolbar .mobile-filter-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 12px;
    left: auto;
    width: min(320px, calc(100vw - 24px));
    z-index: 80;
    display: none;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 18px 42px rgba(18, 30, 38, 0.2);
  }

  /* `.main > *` gibt Toolbar UND Board-Content beide z-index:1; da der
     Board-Content im DOM später kommt, malt er (samt Karten) über das in der
     Toolbar absolut positionierte Panel. Wir heben die Toolbar nur im
     geöffneten Zustand über den Board-Content-Stacking-Context. */
  .toolbar.is-filter-open {
    z-index: 90;
  }

  .toolbar.is-filter-open .mobile-filter-panel {
    display: grid;
  }

  /* Struktur im Filter-Menü (gilt im Popover UND im mobilen Such-Sheet,
     „Sektionen + Raster" 2026-07-02): Kopfzeile mit Titel + „Zurücksetzen",
     Eyebrow-Sektionslabels, Schnellfilter im 2x2-Raster gleicher Breite,
     Selects in voller Menübreite. Bewusst auf .mobile-filter-panel gescoped:
     .quick-filter-chip nutzt auch die Sidebar-Board-Filter (Alle/Eigene/
     Geteilt) — die behalten ihre Pillen-Optik. */
  .filter-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 26px;
  }

  .filter-panel-title {
    font-size: 0.92rem;
    font-weight: 750;
    color: var(--text);
  }

  .filter-panel-head .filter-reset-button {
    flex: 0 0 auto;
  }

  .filter-section-label {
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
  }

  .mobile-filter-panel .quick-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .mobile-filter-panel .quick-filter-chip {
    width: 100%;
    justify-content: center;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 10px;
  }

  .mobile-filter-panel .toolbar-select {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 38px;
    border-radius: 10px;
  }

@media (max-width: 620px) {
  /* Auf schmalen Screens darf das Panel wieder volle Breite nutzen. */
  .toolbar .mobile-filter-panel {
    left: 12px;
    right: 12px;
    width: auto;
  }

  .board-content {
    min-height: 0;
    height: 100%;
    padding: 10px 10px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 10px;
    scrollbar-gutter: stable;
  }

  .kanban {
    min-height: 100%;
    height: 100%;
    align-items: stretch;
    gap: 10px;
  }

  .add-column-tile {
    width: calc(100vw - 34px);
    min-height: 100%;
    scroll-snap-align: start;
  }

  .column {
    width: calc(100vw - 34px);
    flex-basis: calc(100vw - 34px);
    min-height: 100%;
    height: 100%;
    max-height: none;
    scroll-snap-align: start;
    border-radius: 10px;
  }

  .column.is-collapsed {
    width: 64px;
    flex-basis: 64px;
    min-height: 100%;
  }

  .column-header {
    min-height: 54px;
    padding: 8px 10px;
  }

  .column-grip {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
  }

  .column-title-button {
    font-size: 0.98rem;
  }

  .card-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .task-card {
    padding: 12px;
    border-radius: 10px;
  }

  .task-card h4 {
    font-size: 1rem;
  }

  .task-card p {
    font-size: 0.9rem;
  }

  .card-move-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
  }
  .card-move-step {
    width: 40px;
    height: 40px;
  }

  .modal-backdrop {
    padding: 0;
    place-items: stretch;
  }

  .modal,
  .admin-modal,
  .archive-modal,
  .audit-modal,
  .logo-media-modal,
  .system-settings-modal,
  .card-detail-modal {
    width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }

  .admin-modal,
  .archive-modal,
  .audit-modal,
  .logo-media-modal,
  .card-detail-modal {
    height: 100dvh;
  }

  .card-detail-modal .modal-header,
  .modal-header {
    min-height: 56px;
    padding: 10px 12px;
  }

  .card-detail-main,
  .card-activity-panel {
    padding: 12px;
  }

  .card-meta-grid {
    grid-template-columns: 1fr;
  }

  .card-detail-layout {
    display: block;
    height: calc(100dvh - 56px);
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .card-detail-main,
  .card-activity-panel {
    overflow: visible;
  }

  .card-detail-main {
    border-bottom: 1px solid var(--line);
  }

  .card-activity-panel {
    min-height: 260px;
    border-top: 0;
  }

  .admin-user-row,
  .member-row,
  .archive-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-user-actions,
  .member-actions,
  .archive-actions {
    justify-content: flex-start;
  }
}

/* Mobile polish pass: keep the compact navigation predictable and stop header controls from jumping. */
@media (max-width: 620px) {
  .sidebar {
    max-height: 118px;
    padding: 8px 10px;
  }

  /* Kompakte Überschrift, damit die horizontale Board-Reihe im Top-Bar Platz behält. */
  .sidebar-board-heading {
    margin-top: 2px;
    padding: 5px 0 2px;
  }

  .sidebar-board-heading .eyebrow {
    font-size: 0.64rem;
  }

  .sidebar-top {
    min-height: 34px;
    padding-right: 128px;
  }

  .sidebar-actions {
    top: 8px;
    right: 50px;
  }

  .sidebar-actions .primary-button,
  .sidebar-actions .secondary-button,
  .sidebar-local-toggle,
  .app-shell.sidebar-collapsed > .sidebar-restore-button,
  .title-icon-button,
  .top-icon-button,
  .profile-button {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 8px;
  }

  .sidebar-footer,
  .app-shell.sidebar-collapsed > .sidebar-restore-button {
    position: fixed;
    top: 8px;
    right: 10px;
    bottom: auto;
    left: auto;
    z-index: 90;
    width: 34px;
    height: 34px;
  }

  .app-shell > .sidebar-restore-button {
    display: none;
  }

  .app-shell.sidebar-collapsed > .sidebar-restore-button {
    display: grid;
  }

  .app-shell.sidebar-collapsed .sidebar-footer {
    display: none;
  }

  /* Titel teilt sich die obere Zeile mit den globalen Icons (rechts); die
     Aktions-Chips stehen in fester Reihe darunter. Spart die separate Icon-Zeile. */
  .board-header {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    position: relative;
    align-items: start;
    padding: 8px 12px 9px;
    gap: 6px;
  }

  .board-title-block {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .board-title-row {
    align-items: center;
    gap: 7px;
    row-gap: 8px;
  }

  /* Titel in der oberen Zeile: Zeilenhöhe = Icon-Höhe (34px), damit die Chip-Reihe
     sauber UNTER den Icons startet; rechts Platz für die 4 Icons reserviert (kürzt
     mit Ellipsis). Kein Überlappen mit den Icons, kein Verschieben. */
  .board-title-row #boardTitle {
    flex: 1 1 100%;
    max-width: 100%;
    min-height: 34px;
    line-height: 34px;
    padding-right: 172px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .board-title-row #boardSettingsButton {
    align-self: center;
  }

  /* Mobil (<=620px): die Desktop-Meta-Chips (Mitglieder-Anzeige, „Privat",
     Rollen-Badge) ausblenden — der Board-Kopf ist hier zu eng (sonst verrutscht
     die Titelzeile). Die Mitgliederzahl steht mobil weiter im ⋯-Menue
     („X Mitglieder"). */
  .board-title-row .board-meta-chip {
    display: none;
  }

  /* Mute-Chip ans Ende der Aktions-Reihe (sonst steht er vor dem Titel). */
  .board-title-row #boardMuteButton {
    order: 5;
  }

  .top-actions,
  .app-shell.sidebar-collapsed .top-actions {
    position: absolute;
    top: 8px;
    right: 12px;
    width: auto;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    z-index: 4;
  }

  /* Eingeklappt sitzt der fixierte Sidebar-Restore-Button oben rechts – Icons und
     Titel-Reserve nach links versetzen, damit nichts überlappt. */
  .app-shell.sidebar-collapsed .top-actions {
    right: 54px;
  }

  .app-shell.sidebar-collapsed .board-title-row #boardTitle {
    padding-right: 214px;
  }

  .top-actions > *,
  .top-actions .profile-menu-wrap {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  /* Höhere Spezifität als .notifications-button (height:44px), sonst ist die
     Glocke höher als die anderen Icons und ragt in die Chip-Reihe. */
  .top-actions .notifications-button {
    width: 34px;
    height: 34px;
    min-height: 34px;
  }

  .profile-button {
    display: grid;
    place-items: center;
  }

  .profile-button #profileInitials {
    width: 24px;
    height: 24px;
    font-size: 0.64rem;
  }

  .board-description-wrap {
    max-width: 100%;
    padding-right: 4px;
  }

  .board-description-toggle {
    margin-left: 6px;
  }

  .toolbar {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  .toolbar .mobile-filter-toggle {
    width: 42px;
    min-width: 42px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    justify-content: center;
  }

  .mobile-filter-panel {
    max-height: min(360px, calc(100dvh - 180px));
    overflow: auto;
  }

  .toolbar.is-filter-open .mobile-filter-panel {
    grid-template-columns: 1fr;
  }
}


/* Final form system: one visual rhythm for all dialogs and popups. */
:root {
  --dialog-pad: 20px;
  --dialog-gap: 16px;
  --dialog-section-pad: 14px;
  --dialog-control-height: 42px;
  --dialog-radius: 10px;
}

.modal,
.admin-modal,
.archive-modal,
.audit-modal,
.logo-media-modal,
.system-settings-modal,
.card-detail-modal {
  gap: var(--dialog-gap);
}

.modal-header {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}

.modal-header h3 {
  margin: 0;
  font-size: var(--font-dialog-title);
  line-height: 1.2;
}

.modal-header > .icon-button,
.modal-header-actions > .icon-button {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  align-self: center;
}

.section-head {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

.section-head h4,
.modal h4 {
  margin: 0;
  font-size: var(--font-section-title);
  line-height: 1.25;
}

.form-stack {
  gap: 14px;
}

.form-grid {
  gap: 14px;
}

.form-stack > label,
.form-grid > label,
.card-detail-main > label,
.card-meta-grid label,
.card-meta-grid .field-group,
.attachment-field {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  margin: 0;
  color: var(--muted);
  font-size: var(--font-label);
  font-weight: var(--weight-label);
  line-height: 1.25;
}

.form-stack > label :is(input, textarea, select, .date-field, .member-picker, .input-with-suffix),
.form-grid > label :is(input, textarea, select, .date-field, .member-picker, .input-with-suffix),
.card-detail-main > label :is(input, textarea, select, .date-field, .member-picker, .input-with-suffix),
.card-meta-grid :is(label, .field-group) :is(input, textarea, select, .date-field, .member-picker, .input-with-suffix),
.inline-form :is(input, select, button) {
  width: 100%;
  min-width: 0;
  min-height: var(--dialog-control-height);
  margin: 0;
  color: var(--text);
  font-size: var(--font-control);
  font-weight: var(--weight-control);
}

.form-stack textarea,
.form-grid textarea,
.card-detail-main textarea {
  min-height: 96px;
  resize: vertical;
}

.form-stack > label.inline-toggle,
.toggle-field.inline-toggle,
.admin-registration-toggle,
.admin-modal #adminEditUserForm .inline-toggle,
.admin-modal #adminUserForm .inline-toggle {
  min-height: var(--dialog-control-height);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--dialog-radius);
  color: var(--text);
  background: var(--surface);
  font-size: var(--font-control);
  font-weight: var(--weight-control);
  line-height: 1.3;
}

.form-stack > label.inline-toggle > input[type="checkbox"],
.toggle-field.inline-toggle > input[type="checkbox"],
.admin-registration-toggle > input[type="checkbox"],
.admin-modal #adminEditUserForm .inline-toggle > input[type="checkbox"],
.admin-modal #adminUserForm .inline-toggle > input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: var(--primary);
}

.form-stack > label.inline-toggle > span,
.toggle-field.inline-toggle > span,
.admin-registration-toggle > span,
.admin-modal #adminEditUserForm .inline-toggle > span,
.admin-modal #adminUserForm .inline-toggle > span {
  min-width: 0;
  display: inline;
  overflow-wrap: anywhere;
  white-space: normal;
}

.section-panel,
.checklist-editor,
.attachments-editor.section-panel,
.admin-users-section,
.admin-settings-section,
#adminEditUserForm,
#adminUserForm {
  border-radius: var(--dialog-radius);
}

.card-detail-main {
  gap: 14px;
}

.card-detail-main > :is(.label-editor, .checklist-editor, .attachments-editor, .section-panel) {
  margin: 0;
}

.card-detail-main > .section-panel,
.card-detail-main > :is(.label-editor, .checklist-editor, .attachments-editor) {
  padding: var(--dialog-section-pad);
}

.card-detail-main > :is(.label-editor, .checklist-editor, .attachments-editor) .section-head h4,
.card-detail-main > .section-panel.card-section,
.card-detail-main > label {
  color: var(--muted);
  font-size: var(--font-label);
  font-weight: var(--weight-label);
}

.label-create-row,
.label-edit-form,
.attachment-editor-row,
.test-mail-form .inline-form {
  gap: 10px;
}

.label-create-row input[type="color"],
.label-edit-form input[type="color"] {
  width: 42px;
  min-width: 42px;
  min-height: var(--dialog-control-height);
}

.modal-actions {
  gap: 10px;
  margin: 0;
}

.modal-actions :is(button, a),
.section-actions :is(button, a),
.inline-form :is(button, a) {
  min-height: var(--dialog-control-height);
}

.admin-modal {
  --admin-pad: var(--dialog-pad);
  --admin-gap: var(--dialog-gap);
  --admin-panel-pad: var(--dialog-section-pad);
}

.admin-modal > .modal-header {
  padding-inline: 0;
}

.admin-user-row {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
}

.admin-user-meta,
.admin-user-actions {
  align-self: center;
}

.system-settings-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.system-settings-modal #mailSettingsForm {
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.system-settings-modal .section-head {
  align-items: center;
}

.test-mail-form {
  margin: 0;
  padding-top: 16px;
}

@media (max-width: 900px) {
  :root {
    --dialog-pad: 14px;
    --dialog-gap: 12px;
    --dialog-section-pad: 12px;
  }

  .modal-header {
    min-height: 48px;
    padding-bottom: 12px;
  }

  .admin-modal {
    --admin-pad: var(--dialog-pad);
  }

  .admin-user-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .admin-user-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 620px) {
  .modal-header h3 {
    font-size: 1.12rem;
  }

  .form-grid,
  .form-grid.two-columns,
  .label-create-row,
  .label-edit-form,
  .attachment-editor-row,
  .test-mail-form .inline-form {
    grid-template-columns: 1fr;
  }

  .label-create-row input[type="color"],
  .label-edit-form input[type="color"] {
    width: 100%;
  }

  .split-actions,
  .modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .modal-actions :is(button, a) {
    width: 100%;
  }
}

/* Final card-detail baseline: sections act as dividers, not inset cards. */
.card-detail-main > .section-panel {
  padding: 14px 0;
  border-width: 1px 0 0;
  border-radius: 0;
  background: transparent;
}

.card-detail-main > .section-panel > :is(.section-head, .attachment-list, input, .checklist-items, .label-picker, .label-create-row) {
  width: 100%;
}

/* Final responsive sidebar toggle position: one stable location on compact layouts. */
@media (max-width: 900px) {
  .sidebar-footer,
  .app-shell.sidebar-collapsed > .sidebar-restore-button {
    position: fixed;
    top: 8px;
    right: 10px;
    bottom: auto;
    left: auto;
    z-index: 90;
  }

  .sidebar-footer .sidebar-local-toggle,
  .app-shell.sidebar-collapsed > .sidebar-restore-button {
    display: grid;
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-color: var(--line);
    border-radius: 8px;
    background: var(--surface-elevated);
    box-shadow: 0 8px 22px rgba(20, 31, 38, 0.12);
  }
}

/* Der fixe Sidebar-Knopf (oben rechts, Regel direkt darueber) lag bei
   eingeklappter Sidebar UEBER dem Hell/Dunkel-Button der Top-Leiste
   (iPad-Foto 2026-07-05) — die horizontale Leiste rueckt ihm aus dem Weg.
   Nur 621–900px: unter 620px ist die Leiste vertikal und weicht bereits
   per margin-top nach unten aus. */
@media (min-width: 621px) and (max-width: 900px) {
  .app-shell.sidebar-collapsed .top-actions {
    margin-right: 52px;
  }
}

@media (max-width: 620px) {
  .sidebar-footer .sidebar-local-toggle,
  .app-shell.sidebar-collapsed > .sidebar-restore-button {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    height: 34px;
    min-height: 34px;
  }
}

/* Final label contrast guard: form label rules must not mute colored chips. */
.card-label,
.label-option,
.label-option .label-choice,
.label-option .label-title,
.label-option.custom-label {
  color: var(--label-text-color);
}

.notifications-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  border-radius: 999px;
}
.notifications-button:hover {
  background: var(--surface-soft);
}
.notifications-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.notifications-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}
.notifications-panel {
  position: fixed;
  right: 16px;
  top: 64px;
  width: min(360px, calc(100vw - 32px));
  max-height: min(480px, calc(100vh - 80px));
  overflow: auto;
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 1100;
  color: var(--text);
}
.notifications-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.notifications-panel-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.notifications-mark-all {
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: 13px;
  cursor: pointer;
}
.notifications-mark-all:hover {
  text-decoration: underline;
}
.notifications-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.notifications-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  color: inherit;
}
.notifications-item:hover {
  background: var(--surface-soft);
}
.notifications-item-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--primary);
}
.notifications-item.is-read .notifications-item-dot {
  background: transparent;
  border: 1px solid var(--line);
}
.notifications-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.notifications-item-meta {
  font-size: 11px;
  color: var(--muted);
}
.notifications-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.notifications-load-more {
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: 13px;
  cursor: pointer;
  border-top: 1px solid var(--line);
}
@media (max-width: 640px) {
  .notifications-panel {
    position: fixed;
    inset: 0 0 0 0;
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
}

.quick-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.quick-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.quick-filter-chip:hover {
  background: var(--surface-soft);
}

.quick-filter-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quick-filter-chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Aktiver Chip: weiche primary-soft-Flaeche + primary-strong-Text + primary-Rand —
   dieselbe „aktiv"-Bildsprache wie Sidebar-Nav, View-Toggle und Board-Marker
   (statt der frueheren schweren Voll-Gruen-Fuellung). */
.quick-filter-chip[aria-pressed="true"] {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-strong);
}

.quick-filter-chip[aria-pressed="true"]:hover {
  background: var(--primary-soft);
  border-color: var(--primary-strong);
}

/* Chips etwas kraeftiger, damit sie sauber lesbar wirken. */
.quick-filter-chip {
  font-weight: 600;
}

/* Aktiv-Tint der Filter-Selects: sobald ein Filter gesetzt ist (JS setzt
   `.is-active`), faerbt sich der Select in derselben primary-soft-Sprache —
   gesetzte Filter sind so auf einen Blick sichtbar. */
.toolbar-select.is-active {
  border-color: var(--primary);
  color: var(--primary-strong);
  background-color: var(--primary-soft);
  font-weight: 700;
}

/* „Zurücksetzen" (erscheint nur bei aktiven Filtern; JS toggelt `.hidden`). */
.filter-reset-button {
  color: var(--muted);
}

.filter-reset-button:hover {
  color: var(--primary-strong);
}

.calendar-view {
  flex: 1;
  /* Wie .board-content fest in der 1fr-Zeile von .main (siehe dort). */
  grid-row: 4;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px 26px 32px;
  gap: 16px;
  overflow: auto;
}

/* Cross-Board „Meine Aufgaben" — wie .calendar-view fest in der 1fr-Zeile. */
.my-tasks-view {
  grid-row: 4;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px 26px 32px;
  gap: 16px;
  overflow: auto;
}
.my-tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.my-tasks-title { margin: 0; font-size: 1.2rem; }
.my-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 880px;
}
.my-tasks-group { display: flex; flex-direction: column; gap: 8px; }
.my-tasks-group-head { display: flex; align-items: center; gap: 8px; }
.my-tasks-group-title { margin: 0; font-size: 0.95rem; color: var(--text); }
.my-tasks-group.is-overdue .my-tasks-group-title { color: var(--danger); }
.my-tasks-group-count {
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--surface-soft);
  border-radius: 999px;
  padding: 1px 9px;
}
.my-task-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.my-task-item:hover { background: var(--surface-soft); }
.my-task-item.priority-low,
.dash-row.priority-low { border-left-color: var(--prio-low); }
.my-task-item.priority-normal { border-left-color: var(--primary); }
.my-task-item.priority-high,
.dash-row.priority-high { border-left-color: var(--prio-high); }
.my-task-item.priority-urgent,
.dash-row.priority-urgent { border-left-color: var(--prio-urgent); }
.my-task-title { font-weight: 600; color: var(--text); }
.my-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--muted);
}
.my-task-item.is-overdue .my-task-due { color: var(--danger); font-weight: 600; }
.my-task-due { font-variant-numeric: tabular-nums; }
.my-task-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.my-task-label {
  font-size: 0.72rem;
  padding: 1px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--primary);
}
.my-tasks-empty { color: var(--muted); padding: 22px 4px; }

@media (max-width: 620px) {
  .my-tasks-view { padding: 12px 14px 24px; }
}

/* --- Dashboard / „Übersicht" (Startseite) --- */
.dashboard-view {
  grid-row: 4; /* wie .my-tasks-view in die Arbeitsflächen-Zeile des .main-Grids */
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px 26px 32px;
  gap: 16px;
  overflow: auto;
}
.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 1200px;
}
.dashboard-greeting { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dashboard-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary);
}
.dashboard-title { margin: 0; font-size: 1.55rem; font-weight: 800; line-height: 1.15; }
.dashboard-date { margin: 0; font-size: 0.9rem; color: var(--muted); text-transform: capitalize; }
.dashboard-header .ghost-button { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.dashboard-header .ghost-button .ui-icon { width: 14px; height: 14px; }
/* Demo-Hinweis auf der Übersicht (nur Admin, nur solange Demo-Daten da sind). */
.demo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
  padding: 12px 16px;
  background: var(--warning-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.demo-banner-text { margin: 0; font-size: 0.9rem; line-height: 1.4; flex: 1 1 320px; min-width: 0; }
.demo-banner-button { flex: 0 0 auto; }
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 1200px;
}
.dash-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px 16px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  /* Wie .dash-panel: Wasserzeichen scheint dezent durch (2026-07-05). */
  background: var(--panel-translucent, var(--surface));
  overflow: hidden;
}
.dash-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--muted);
}
.dash-stat.is-today::before { background: var(--accent); }
.dash-stat.is-week::before { background: var(--primary); }
.dash-stat.is-overdue.has-count::before { background: var(--danger); }
.dash-stat-value { font-size: 2.1rem; font-weight: 800; color: var(--text); line-height: 1.05; font-variant-numeric: tabular-nums; }
.dash-stat-label { font-size: 0.82rem; color: var(--muted); }
.dash-stat.is-overdue.has-count .dash-stat-value { color: var(--danger); }
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
  max-width: 1200px;
  align-items: start;
}
.dash-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dash-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  /* Leicht durchlässig wie die Board-Spalten: das Branding-Wasserzeichen
     scheint dezent durch, ohne die Lesbarkeit zu stören (2026-07-05). */
  background: var(--panel-translucent, var(--surface));
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  min-width: 0;
}
.dash-board-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* Board-Gesundheitsbalken: überfällig · diese Woche · Rest der offenen Karten. */
.dash-health-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-soft);
  margin-top: 8px;
}
.dash-health-seg { display: block; min-width: 0; }
.dash-health-seg.is-overdue { background: var(--danger); }
.dash-health-seg.is-week { background: var(--accent); }
.dash-health-seg.is-rest { background: color-mix(in srgb, var(--primary) 45%, var(--surface-soft)); }

/* Wochen-Balkendiagramm (nächste 7 Tage). */
.dash-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 150px;
  padding-top: 6px;
}
.dash-chart-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; height: 100%; }
.dash-chart-track { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.dash-chart-bar {
  width: 68%;
  max-width: 34px;
  min-height: 3px;
  border-radius: 6px 6px 3px 3px;
  background: var(--surface-soft);
}
.dash-chart-bar.has-count { background: var(--primary); }
.dash-chart-col.is-today .dash-chart-bar.has-count { background: var(--accent); }
.dash-chart-value { font-size: 0.72rem; font-weight: 800; color: var(--text); }
.dash-chart-day { font-size: 0.72rem; color: var(--muted); }
/* Akzent als kleiner Text: --primary-strong (dunkler in Hell, heller in Dunkel)
   erfüllt 4.5:1, --primary knapp nicht (A11y-Audit 2026-07-04). */
.dash-chart-col.is-today .dash-chart-day { color: var(--primary-strong); font-weight: 800; }
.dash-chart-caption { font-size: 0.8rem; color: var(--muted); }

/* Gemeinsame Basis der drei klickbaren Dashboard-Zeilen (Zuletzt aktualisiert,
   Aufgaben-Zeile, Board-Zeile) — vorher drei fast identische Blöcke, deren
   Hover/Rahmen bei Änderungen dreifach gepflegt werden mussten. Danach nur
   noch die Deltas (border-left/radius bzw. gap/padding). */
.dash-recent-row,
.dash-row,
.dash-board-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.15s ease;
}
.dash-recent-row:hover,
.dash-row:hover,
.dash-board-row:hover { background: var(--surface-soft); }
.dash-recent-title { font-weight: 600; color: var(--text); font-size: 0.9rem; }
.dash-recent-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.78rem; color: var(--muted); }
.dash-recent-time { font-variant-numeric: tabular-nums; }
.dash-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-panel-title { margin: 0; font-size: 0.98rem; color: var(--text); }
.dash-panel-link {
  border: none;
  background: none;
  color: var(--primary-strong);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}
.dash-panel-link:hover { background: var(--surface-soft); }
.dash-list { display: flex; flex-direction: column; gap: 8px; }
/* Delta zur gemeinsamen Basis: Prioritäts-Akzentkante (Farben — inkl. dem
   hart kodierten High-Orange — teilen sich die Zeilen mit .my-task-item,
   s. Selektorlisten dort). */
.dash-row {
  border-left: 3px solid var(--primary);
  border-radius: 8px;
}
.dash-row-title { font-weight: 600; color: var(--text); font-size: 0.9rem; }
.dash-row-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.78rem; color: var(--muted); }
.dash-row-due { font-variant-numeric: tabular-nums; }
.dash-row.is-overdue .dash-row-due { color: var(--danger); font-weight: 600; }
.dash-board-row {
  gap: 4px;
  padding: 10px 12px;
}
.dash-board-title { font-weight: 600; color: var(--text); }
.dash-board-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-count { font-size: 0.74rem; color: var(--muted); background: var(--surface-soft); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.dash-count.is-overdue { color: var(--danger); background: var(--danger-soft); }
.dash-count.is-week { color: var(--primary-strong); background: var(--primary-soft); }
.dash-empty { font-size: 0.85rem; color: var(--muted); padding: 6px 2px; }

/* Leere Zustände in Panels/Listen: Icon + Satz + optionale Aktion, ruhig
   zentriert (Design-Audit 2026-07-02 — „ein leerer Bereich ist eine
   Einladung"). Bewusst NICHT .empty-state: die Klasse gehört dem großen
   „Noch kein Board"-Kasten der Board-Ansicht (gestrichelt, max-width 520)
   und mischte sich sonst hinein (Nutzer-Screenshot: halbbreite Strichel-Box
   im Archiv). */
.empty-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  text-align: center;
}

.empty-note-icon {
  width: 26px;
  height: 26px;
  color: var(--muted);
  opacity: 0.7;
}

.empty-note-text {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 44ch;
}

.empty-note-action {
  color: var(--primary-strong);
  font-weight: 650;
}

/* Ohne Daten schrumpft das Wochen-Diagramm auf eine kompakte Zeile. */
.dash-chart.is-empty {
  height: 58px;
}

@media (max-width: 620px) {
  .dashboard-view { padding: 12px 14px 24px; gap: 12px; }
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dash-stat-value { font-size: 1.4rem; }
}

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

.calendar-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.calendar-range-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-left: 8px;
}

.calendar-filters {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(var(--calendar-cols, 7), minmax(0, 1fr));
  gap: 8px;
  min-height: 360px;
}

.calendar-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--column-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 220px;
  /* Groessen-Container fuer die Schmal-Kachel-Query darunter. */
  container-type: inline-size;
}

/* Schmale Tageskacheln (iPad quer mit offener Sidebar: ~95px bei 7 Spalten):
   mehrzeilig zerhackte Woerter wirken chaotisch, Titel ragten frueher sogar
   ueber den Kachelrand (Nutzer-Fotos 2026-07-05). Ab Kachel <160px dieselbe
   Loesung wie Monats-Kompaktkarten und Mobile: einzeilig + Ellipsis; Details
   zeigt der Tap/Hover. Bedingung ist die KACHELbreite (Container-Query),
   nicht die Fensterbreite — deckt 5/7 Spalten und Sidebar offen/zu ab.
   Browser ohne Container-Queries behalten den Silbentrennungs-Umbruch. */
@container (max-width: 160px) {
  .calendar-card-title,
  .calendar-card-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    hyphens: none;
  }
}

.calendar-day.is-today {
  border-color: var(--primary);
  /* Inset-Schatten statt dickerem Rand: 2px-Wirkung ohne Layout-Shift. */
  box-shadow: inset 0 0 0 1px var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--column-bg));
}

.calendar-day.is-today .calendar-day-weekday {
  color: var(--primary-strong);
  font-weight: 700;
}

/* Vergangene Tage treten zurück (flacher Grund, gedämpfte Kopfzeile) — der
   frühere rote is-overdue-Rahmen las sich als Fehlerzustand. Überfällige
   KARTEN darin bleiben voll sichtbar und rot markiert. */
.calendar-day.is-past {
  background: transparent;
}

.calendar-day.is-past .calendar-day-head {
  opacity: 0.55;
}

/* Wochenende: leicht getintet, damit die Arbeitswoche als Block lesbar ist. */
.calendar-day.is-weekend {
  background: color-mix(in srgb, var(--text) 3%, var(--column-bg));
}

.calendar-day.is-past.is-weekend {
  background: color-mix(in srgb, var(--text) 2%, transparent);
}

.calendar-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
}

.calendar-day-weekday {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.calendar-day-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.calendar-day-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calendar-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  /* Signatur-Kante links: gleiche Prioritäts-Sprache wie task-card/dash-row. */
  border-left: 3px solid var(--prio-normal);
  border-radius: 8px;
  background: var(--surface-elevated);
  text-align: left;
  cursor: pointer;
  width: 100%;
  color: inherit;
  /* Als Flex-Item schrumpfbar halten: ohne min-width:0 zwingt der laengste
     Wort-min-content die Karte ueber die Zellbreite hinaus — Safari/WebKit
     wendet die overflow-Ausnahme fuer die automatische Mindestbreite nicht
     zuverlaessig an (iPad-Foto 2026-07-05: Pillen ragten aus Monatszellen). */
  min-width: 0;
}

/* Titel/Meta sind span-Flex-Items: Safari braucht display:block + min-width:0
   explizit, damit overflow/text-overflow und Umbruch wirklich greifen
   (Chromium blockifiziert und nullt die Mindestbreite von selbst). */
.calendar-card-title,
.calendar-card-meta {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.calendar-card.priority-low { border-left-color: var(--prio-low); }
.calendar-card.priority-high { border-left-color: var(--prio-high); }
.calendar-card.priority-urgent { border-left-color: var(--prio-urgent); }

.calendar-card:hover {
  border-color: var(--primary);
}

.calendar-card.is-overdue {
  border-left: 3px solid var(--danger);
}

.calendar-card-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  /* Lange Einzelwoerter ("Kontaktformular") ragten auf schmalen Tageskacheln
     ueber den Kachelrand (iPad-Foto 2026-07-05). hyphens bricht mit
     Trennstrich an Silbengrenzen (nutzt das html-lang-Attribut),
     break-word faengt Woerter ohne Woerterbuch-Treffer hart ab. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.calendar-card-meta {
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: break-word;
  hyphens: auto;
}

.calendar-empty {
  margin: 24px auto;
  text-align: center;
  color: var(--muted);
}

.calendar-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.calendar-mode-button {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
}

.calendar-mode-button + .calendar-mode-button {
  border-left: 1px solid var(--line);
}

.calendar-mode-button:hover {
  color: var(--text);
}

.calendar-mode-button.is-active {
  background: var(--primary);
  color: #fff;
}

.calendar-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 360px;
}

.calendar-list-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--column-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  border-left: 3px solid var(--line);
}

.calendar-list-day.is-today {
  border-left-color: var(--primary);
}

.calendar-list-day.is-overdue {
  border-left-color: var(--danger);
}

.calendar-list-day-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.calendar-list-day-weekday {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.calendar-list-day-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.calendar-list-day-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calendar-card.is-draggable {
  cursor: grab;
}

.calendar-card.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.calendar-day.drop-target,
.calendar-month-cell.drop-target {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--column-bg));
  box-shadow: inset 0 0 0 1px var(--primary);
}

/* Monatsansicht */
.calendar-month {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 360px;
}

.calendar-month-weekdays {
  display: grid;
  grid-template-columns: minmax(30px, auto) repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 0 2px;
}

.calendar-month-weekday {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: center;
}

.calendar-month-week-head {
  font-size: 11px;
}

.calendar-month-grid {
  display: grid;
  grid-template-columns: minmax(30px, auto) repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(96px, auto);
  gap: 8px;
}

/* Kalenderwoche als führende Zelle jeder Wochenzeile. */
.calendar-month-week {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.calendar-month-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: var(--column-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}

.calendar-month-cell.is-outside {
  opacity: 0.5;
}

.calendar-month-cell.is-today {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--column-bg));
}

.calendar-month-cell.is-past {
  background: transparent;
}

.calendar-month-cell.is-past .calendar-month-date {
  color: var(--muted);
}

.calendar-month-cell.is-weekend {
  background: color-mix(in srgb, var(--text) 3%, var(--column-bg));
}

.calendar-month-cell.is-past.is-weekend {
  background: color-mix(in srgb, var(--text) 2%, transparent);
}

.calendar-month-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  align-self: flex-end;
}

.calendar-month-cards {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.calendar-month-more {
  font-size: 11px;
  color: var(--muted);
  padding-left: 2px;
}

.calendar-card.is-compact {
  padding: 3px 6px;
  gap: 0;
  /* Harte Kante fuer WebKit: selbst wenn der Titel-Span dort nicht schrumpft,
     bleibt der Text in der Pille statt in die Nachbarzelle zu laufen. */
  overflow: hidden;
}

.calendar-card.is-compact .calendar-card-title {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .calendar-grid {
    grid-template-columns: 1fr;
  }
  .calendar-day {
    min-height: auto;
  }
  .calendar-month-grid {
    grid-auto-rows: minmax(64px, auto);
    gap: 4px;
  }
  .calendar-month-weekdays,
  .calendar-month-grid {
    grid-template-columns: minmax(20px, auto) repeat(7, minmax(0, 1fr));
  }
  .calendar-month-weekdays {
    gap: 4px;
  }
  .calendar-month-cell {
    padding: 4px;
  }
}

@media (max-width: 620px) {
  /* Filterzeile umbrechen, damit der 4er-Umschalter UND "Nur meine Karten" passen. */
  .calendar-filters {
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
  }
  .calendar-mode-toggle {
    display: flex;
    width: 100%;
    /* Notausgang auf sehr schmalen Geräten: scrollen statt abschneiden. */
    overflow-x: auto;
  }
  .calendar-mode-button {
    /* flex-shrink 0: Segmente nie unter Textbreite quetschen — „Arbeitswoche"/
       „Projektzeitraum" wurden sonst ohne Ellipsis abgeschnitten und liefen
       optisch unter das aktive Segment (Mobile-Review 2026-07-04). */
    flex: 1 0 auto;
    min-width: 0;
    padding: 7px 8px;
    font-size: 12px;
    white-space: nowrap;
  }
}

.comment-input-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mention-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  max-height: 200px;
  overflow: auto;
  z-index: 50;
}

.mention-suggestion {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
}

.mention-suggestion:hover,
.mention-suggestion.is-active {
  background: var(--surface-soft);
}

.mention-suggestion-name {
  font-weight: 600;
}

.mention-suggestion-handle {
  color: var(--muted);
  font-size: 12px;
}

/* Hervorgehobene @Erwähnung im angezeigten Kommentar */
.mention {
  padding: 0 3px;
  border-radius: 4px;
  color: var(--primary);
  background: var(--primary-soft);
  font-weight: 650;
}

/* Karten-Beschreibung: Lese-/Bearbeiten-Umschaltung */
.card-section-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card-desc-toggle {
  flex: 0 0 auto;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
}

.card-desc-toggle:hover {
  border-color: var(--line-strong);
}

.card-desc-preview {
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-weight: 500;
}

.card-desc-preview.is-empty {
  color: var(--muted);
}

/* Sicheres Markdown in Kommentaren/Beschreibungen (Anzeige) */
.rich-text > :first-child {
  margin-top: 0;
}

.rich-text > :last-child {
  margin-bottom: 0;
}

.rich-text p {
  margin: 0 0 8px;
}

.rich-text ul,
.rich-text ol {
  margin: 0 0 8px;
  padding-left: 1.4em;
}

.rich-text li {
  margin: 2px 0;
}

.rich-text code,
.task-card-description code,
#boardDescription code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-soft);
  font-size: 0.92em;
}

.rich-text a,
.task-card-description a,
#boardDescription a {
  color: var(--primary);
  text-decoration: underline;
  word-break: break-word;
}

/* === Mobile Bottom-Bar (Phase 1 Mobile-Redesign, 2026-06-10) ===
   Bottom-Navigation ersetzt auf <=620px Topbar-Sidebar, Header-Icons und
   Toolbar. Eigene Klassen (KEIN .icon-button) wegen der display-Spezifitäts-
   Falle; z-index 92-94 liegt über .main>* (1) und unter Modals (1000+). */
.mobile-nav,
.mobile-sheet,
.mobile-sheet-backdrop,
.profile-menu .mobile-only {
  display: none;
}

@media (max-width: 620px) {
  :root {
    --mobile-nav-height: calc(60px + env(safe-area-inset-bottom));
  }

  /* Altes Mobile-Chrome entfällt komplett. */
  .sidebar,
  .sidebar-resizer,
  .sidebar-footer,
  .app-shell > .sidebar-restore-button,
  .app-shell.sidebar-collapsed > .sidebar-restore-button,
  .board-header .top-actions,
  .toolbar {
    display: none !important;
  }

  /* Ohne Board keinen leeren Kopf stehen lassen — NUR hier (<=620px) sicher,
     weil die Bottom-Nav alle globalen Aktionen ersetzt (Panels wandern beim
     Öffnen nach document.body). */
  .board-header.is-boardless {
    display: none;
  }

  .app-shell {
    grid-template-rows: minmax(0, 1fr);
  }

  /* .main sitzt aus dem 1024px-Block in grid-row 2 — ohne Topbar-Zeile wäre
     Zeile 1 (leer) die 1fr-Zeile. Explizit in Zeile 1 ziehen. Und: ohne die
     Toolbar-Zeile (display:none) rückt .board-content in die zweite
     auto-Zeile — daher nur noch zwei Zeilen: Header + Inhalt. */
  .main {
    grid-row: 1;
    grid-column: 1;
    grid-template-rows: auto minmax(0, 1fr);
    padding-bottom: var(--mobile-nav-height);
  }

  /* Touch-Ziele (Mobile-Review 2026-07-04): kleine Bedienelemente bekommen
     eine fingertaugliche TREFFERFLÄCHE (~36-44px), die Optik bleibt.
     Checklisten-Zeilen auf Karten sind volle Label-Zeilen — Höhe anheben
     statt die 16px-Checkbox aufzublasen. */
  .checklist-preview-row {
    min-height: 34px;
    align-items: center;
  }
  .notifications-mark-all {
    min-height: 40px;
    padding: 8px 10px;
  }
  .card-desc-toggle {
    min-height: 36px;
    padding: 6px 12px;
  }

  /* Archiv-Leerzustand: die auto-Zeilen des gestreckten Modals verteilten
     den Restraum auf die leeren Sektionen (align-content: stretch-Default)
     — Riesenlücken zwischen „Boards"/„Karten" und ihren Leerhinweisen.
     Inhalt oben andocken; gefüllte Listen scrollen ohnehin. */
  .archive-layout,
  .archive-layout section {
    align-content: start;
  }

  /* Spaltenfuß („+ Karte") deckt die scrollende Kartenliste sauber ab:
     opak (Spalten-Tint über --bg komponiert) + Haarlinie als Scroll-Kante.
     Vorher schimmerte die am Listenrand angeschnittene letzte Karte durch
     den halbtransparenten Fuß (--column-bg mit Alpha) — wirkte wie ein
     Überlappungs-Bug (Mobile-Review 2026-07-04). */
  .column-footer {
    background: linear-gradient(var(--column-bg), var(--column-bg)), var(--bg);
    border-top: 1px solid var(--line);
    padding-top: 10px;
  }

  /* GRID-ZEILEN-FALLE (Mobile-Review 2026-07-04): Die Ansichten pinnen aus
     dem Desktop-Layout `grid-row: 4` — im 2-Zeilen-Template hier zeigt das
     auf eine IMPLIZITE Auto-Zeile UNTER der leeren 1fr-Zeile. Inhaltshohe
     Ansichten („Meine Aufgaben", Board-Zeitleiste) klebten dadurch am
     unteren Bildschirmrand mit Riesenleerraum darüber; Übersicht/Kalender/
     Kanban sahen nur zufällig richtig aus (erzwingen eigene Vollhöhe).
     Alle Arbeitsflächen-Ansichten explizit in die 1fr-Zeile (Zeile 2). */
  .main > .board-content,
  .main > .dashboard-view,
  .main > .my-tasks-view,
  .main > .calendar-view {
    grid-row: 2;
    min-height: 0;
  }

  /* Titel braucht keine Icon-Reserve mehr (vorher 172px/214px). */
  .board-title-row #boardTitle,
  .app-shell.sidebar-collapsed .board-title-row #boardTitle {
    padding-right: 8px;
  }

  .mobile-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 92;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    gap: 2px;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 -8px 22px rgba(20, 31, 38, 0.1);
  }

  .mobile-nav-button {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    min-height: 48px;
    padding: 4px 2px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-nav-button .ui-icon {
    width: 22px;
    height: 22px;
  }

  .mobile-nav-button[aria-expanded="true"] {
    background: var(--primary-soft);
    color: var(--primary-strong);
  }

  .mobile-nav-button:disabled {
    opacity: 0.45;
    cursor: default;
  }

  /* Wie :disabled gedimmt, aber tippbar — der Tap erklärt per Toast, warum
     die Suche hier nichts filtert (Board-bezogen; Mobile-Review 2026-07-04). */
  .mobile-nav-button.is-unavailable {
    opacity: 0.45;
  }

  .mobile-nav-add .ui-icon {
    width: 32px;
    height: 32px;
    padding: 6px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
  }

  .mobile-nav-avatar {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
  }

  .mobile-nav-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 20px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }

  .mobile-sheet-backdrop {
    position: fixed;
    inset: 0 0 var(--mobile-nav-height) 0;
    z-index: 93;
    display: block;
    background: rgba(15, 25, 31, 0.45);
  }

  .mobile-sheet-backdrop.hidden {
    display: none;
  }

  .mobile-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--mobile-nav-height);
    z-index: 94;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(70dvh, 520px);
    padding: 14px;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: var(--surface);
    box-shadow: 0 -18px 42px rgba(18, 30, 38, 0.25);
    overflow: auto;
  }

  .mobile-sheet.hidden {
    display: none;
  }

  .mobile-sheet-head strong {
    font-size: 1rem;
  }

  .mobile-boards-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .mobile-boards-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: inherit;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
  }

  .mobile-boards-item span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 500;
  }

  .mobile-boards-item.active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-strong);
  }

  .mobile-sheet-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
  }

  .mobile-sheet-actions .secondary-button {
    min-height: 48px;
    justify-content: center;
  }

  /* Such-/Filter-Sheet: die Toolbar selbst wird zum Sheet (kein Reparenting). */
  .toolbar.is-filter-open {
    display: grid !important;
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: var(--mobile-nav-height);
    z-index: 94;
    grid-template-columns: 1fr;
    gap: 10px;
    max-height: min(70dvh, 520px);
    padding: 14px;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: var(--surface);
    box-shadow: 0 -18px 42px rgba(18, 30, 38, 0.25);
    overflow: auto;
  }

  .toolbar.is-filter-open .mobile-filter-toggle {
    display: none !important;
  }

  /* Alle Sheet-Inhalte in EINER Spalte stapeln: die globalen grid-column-
     Platzierungen der einzeiligen Toolbar (Suche=1, Filter-Knopf=2,
     Ansicht=3) erzeugten hier implizite Spalten — Panel und Ansichts-
     Umschalter lagen NEBEN der Suche statt untereinander (Sheet wirkte
     zerrissen; Befund 2026-07-02, bestand schon vor dem Menü-Umbau). */
  .toolbar.is-filter-open > .search-field,
  .toolbar.is-filter-open > .board-view-toggle,
  .toolbar.is-filter-open > .mobile-filter-panel {
    grid-column: 1;
    grid-row: auto;
  }

  /* Kanban|Zeitleiste im Sheet als volle Breite (50/50). */
  .toolbar.is-filter-open > .board-view-toggle {
    justify-self: stretch;
    display: flex;
  }

  .toolbar.is-filter-open > .board-view-toggle .view-toggle-btn {
    flex: 1 1 0;
  }

  .toolbar.is-filter-open .mobile-filter-panel {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    width: auto;
    max-height: none;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  /* Touch-Ziele im Sheet größer (die ID-Spezifitäts-Krücke von früher ist weg —
     die .toolbar-#…-max-width-Regeln existieren nicht mehr). */
  .toolbar.is-filter-open .mobile-filter-panel .toolbar-select {
    width: 100%;
    max-width: none;
    min-height: 44px;
  }

  .toolbar.is-filter-open .search-field input {
    min-height: 44px;
  }

  .toolbar.is-filter-open .mobile-filter-panel .quick-filter-chip {
    min-height: 40px;
  }

  /* Notifications + Profilmenü docken als Sheets über der Bottom-Bar an.
     (Profilmenü liegt zur Laufzeit unter document.body.) */
  #notifications-panel,
  #profileMenu {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: var(--mobile-nav-height);
    width: auto;
    max-width: none;
    max-height: min(70dvh, 520px);
    z-index: 94;
    margin: 0;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    background: var(--surface);
    box-shadow: 0 -18px 42px rgba(18, 30, 38, 0.25);
    overflow: auto;
    overscroll-behavior: contain;
  }

  .profile-menu .mobile-only {
    display: inline-flex;
  }
}

/* === Mobile Spalten-Pager (Phase 2 Mobile-Redesign, 2026-06-10) ===
   Tab-Leiste lebt IM .board-header (display:none dort folgenlos — die
   Grid-Zeilen-Falle aus Phase 1 betrifft nur .main/.app-shell-Kinder). */
.mobile-column-tabs {
  display: none;
}

@media (max-width: 620px) {
  .mobile-column-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: 6px -12px -9px;
    padding: 4px 12px 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mobile-column-tabs::-webkit-scrollbar {
    display: none;
  }

  .mobile-column-tabs.hidden {
    display: none;
  }

  .mobile-column-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 36px;
    max-width: 200px;
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
  }

  .mobile-column-tab .tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-column-tab .tab-count {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 55%, transparent);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
  }

  .mobile-column-tab.is-active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-strong);
  }

  .mobile-column-tab.is-active .tab-count {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
  }

  /* Tabs übernehmen die Orientierung — Desktop-Scrollbar des Boards weg. */
  .board-content {
    scrollbar-width: none;
    scrollbar-gutter: auto;
  }

  .board-content::-webkit-scrollbar {
    display: none;
  }
}

/* === Mobile Karten-Lese-Sheet (Phase 3 Mobile-Redesign, 2026-06-10) ===
   Fullscreen-Detailseite (z-index 95: ueber Bottom-Bar 92 / Sheets 94,
   unter Modals 1000+). Nur <=620px; Desktop oeffnet weiter das Formular. */
.mobile-card-sheet {
  display: none;
}

@media (max-width: 620px) {
  .mobile-card-sheet {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    flex-direction: column;
    background: var(--bg);
  }

  .mobile-card-sheet.hidden {
    display: none;
  }

  .mobile-card-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 56px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }

  .mobile-card-sheet-head .icon-button {
    width: 44px;
    height: 44px;
  }

  .mobile-card-sheet-head .secondary-button {
    min-height: 44px;
  }

  .mobile-card-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .mobile-card-sheet-body h2 {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

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

  .mcs-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 3px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.82rem;
    font-weight: 650;
  }

  .mcs-chip.is-overdue {
    border-color: #c2410c;
    background: #fff1eb;
    color: #9a3412;
  }

  [data-theme="dark"] .mcs-chip.is-overdue {
    background: rgba(194, 65, 12, 0.18);
    color: #fdba74;
  }

  .mcs-label-chip {
    border: 0;
    color: #fff;
  }

  .mcs-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }

  .mcs-section-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .mcs-member-row {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
  }

  .mcs-description {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
  }

  .mcs-progress {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.85rem;
    font-weight: 650;
  }

  .mcs-progress-track {
    flex: 1 1 auto;
    height: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 55%, transparent);
    overflow: hidden;
  }

  .mcs-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
  }

  .mcs-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 2px 0;
  }

  .mcs-check-row input[type="checkbox"] {
    width: 22px;
    height: 22px;
    /* globale input-Regel setzt min-height (42px) — neutralisieren, sonst
       haengt die Checkbox unter der Textmitte */
    min-height: 0;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--primary);
  }

  .mcs-check-row span {
    font-size: 0.95rem;
  }

  .mcs-check-row.done span {
    text-decoration: line-through;
    color: var(--muted);
  }

  .mcs-check-row small {
    color: var(--muted);
  }

  .mcs-link-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  .mcs-link-row img {
    width: 38px;
    height: 38px;
    border-radius: 7px;
    object-fit: cover;
    flex: 0 0 auto;
  }

  .mcs-comment {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
  }

  .mcs-comment-meta {
    display: flex;
    gap: 8px;
    font-size: 0.76rem;
    color: var(--muted);
  }

  .mcs-comment-body {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .mcs-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
  }

  .mcs-actions .secondary-button {
    min-height: 46px;
    justify-content: center;
  }
}

/* Versionsanzeige im Profilmenue (Support: "alter Stand oder Bug?") */
.app-version-label {
  display: block;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
  user-select: text;
}

/* === Board-Listen-Filter „Alle · Eigene · Geteilt" (2026-06-11) === */
.board-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sidebar .board-filter-row {
  justify-content: center;
  margin-top: -4px;
  padding: 0 0 5px;
}

.sidebar .board-filter-chip {
  min-height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

.board-filter-chip.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-strong);
}

@media (max-width: 620px) {
  .mobile-sheet .board-filter-chip {
    min-height: 38px;
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* === Fix-Runde nach User-Handy-Test (2026-06-10) === */

/* "Letzter Owner": .member-row span { display:block } schlug die
   inline-flex-Zentrierung der Basisklasse (hoehere Spezifitaet). */
.member-row span.member-protected {
  display: inline-flex;
}


@media (max-width: 620px) {
  /* iOS Safari zoomt bei Fokus in Eingaben mit font-size < 16px hinein und
     zoomt oft nicht zurueck ("abgeschnittenes" Layout). 16px unterbindet
     den Auto-Zoom; Pinch-Zoom des Users bleibt unangetastet. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Kalender-Symbol: iOS oeffnet den Date-Picker NUR bei direktem Tap aufs
     Input (showPicker/click() wirkungslos). Das Icon wird zur Dekoration AUF
     dem vollbreiten Input — jeder Tap auf der Zeile trifft das Eingabefeld. */
  .date-field {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
  }

  .date-field input {
    padding-right: 52px;
  }

  .date-field .date-picker-button {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    pointer-events: none;
    border: 0;
    background: transparent;
  }

  /* Kleines Bottom-Polster fuer Kommentare/Aktivitaet (User-Wunsch):
     max() statt Addition — Geraete OHNE Safe-Area (Android u. a.) bekommen
     20px Luft, iPhones nutzen ihre ohnehin groessere Safe-Area (~34px),
     ohne dass sich beides stapelt ("Leiste zu hoch"-Feedback). */
  .card-detail-main,
  .card-activity-panel {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  /* Dialoge haben Basis-z-index 20 — die Bottom-Bar (92) und Sheets (94-96)
     uebermalten ihre unteren ~60-95px ("Speichern abgeschnitten",
     User-Befund 2026-06-10). Auf Mobile ueber alle Sheet-Ebenen heben
     (Toasts/Tooltips liegen bei 1000+ und bleiben darueber). */
  .modal-backdrop {
    z-index: 100;
  }

  /* Spalten verschieben: Drag-Griff kollidiert mobil mit dem Snap-Scrolling —
     stattdessen ◀/▶-Schritt-Tasten im Spaltenkopf. */
  .column-grip {
    display: none !important;
  }

  /* Spezifischer als die Basis-display:none-Regel weiter unten. */
  .column .column-move-buttons {
    display: inline-flex;
    gap: 4px;
    flex: 0 0 auto;
  }

  .column-move-buttons .column-move-step {
    /* Schmaler (28 statt 34): gewinnt Titelplatz im Spaltenkopf; die
       34px-Tipp-Hoehe bleibt (Touch-Ziel). */
    width: 28px;
    min-width: 28px;
    height: 34px;
    min-height: 34px;
  }
}

/* Schritt-Tasten existieren nur mobil; Desktop behaelt den Drag-Griff. */
.column-move-buttons {
  display: none;
}

/* Touch-Geräte ohne Hover (Tablets, Touch-Laptops) jeder Breite: Der
   Pointer-Drag steigt bei pointerType "touch" bewusst aus (Scroll-Konflikt),
   deshalb sind die Umsortier-Pfeile dort der verlässliche Pfad — wie auf dem
   Handy, aber unabhängig von der ≤620px-Grenze. Spiegelt die Mobile-Regeln. */
@media (hover: none) and (pointer: coarse) {
  /* Karten-Verschiebepfeile leben auf Touch IN der Footer-Zeile (rechts
     neben Avatar/Doku-Link) — als eigene Zeile machten sie die Karten
     unnoetig hoch und "leer" (Nutzer-Befund 2026-07-06). */
  .card-footer > div:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .card-footer .card-move-buttons {
    display: flex;
    gap: 6px;
    margin-top: 0;
  }
  .card-footer .card-move-step {
    width: 36px;
    height: 36px;
    min-height: 36px;
  }

  /* Spaltenkopf: Der Titel bekommt den Platz. Die auf Touch permanenten
     Verschiebe-Pfeile quetschten ihn sonst auf ~50px — "Bac klog" /
     "In Arb eit" brachen buchstabenweise um und machten die Koepfe
     verschieden hoch (iPad-Fotos 2026-07-05). */
  .column:not(.is-collapsed) .column-title-group {
    flex: 1 1 auto;
  }
  .column:not(.is-collapsed) .column-heading {
    flex: 1 1 auto;
    min-width: 0;
  }
  .column:not(.is-collapsed) .column-title-button {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }
  /* Zeitleisten-Punkt: unsichtbare, groessere Tipp-Flaeche (13px-Raute ist
     als Touch-Ziel zu klein); rotate kompensieren, Optik unveraendert. */
  .timeline-point::after {
    content: "";
    position: absolute;
    inset: -12px;
  }

  /* Einklapp-Knopf-Dock opak + Haarlinie: der sticky Sidebar-Fuss schwebte
     halbtransparent ueber der letzten Board-Kachel (iPad-Foto 2026-07-05) —
     gleiche Bildsprache wie der opake Spaltenfuss (ef911ee). */
  .sidebar-footer {
    background: var(--surface);
    border-top: 1px solid var(--line);
  }

  .card-move-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
  }
  .card-move-step {
    width: 40px;
    height: 40px;
  }
  .column-grip {
    display: none !important;
  }
  .column .column-move-buttons {
    display: inline-flex;
    gap: 4px;
    flex: 0 0 auto;
  }
  .column-move-buttons .column-move-step {
    /* Schmaler (28 statt 34): gewinnt Titelplatz im Spaltenkopf; die
       34px-Tipp-Hoehe bleibt (Touch-Ziel). */
    width: 28px;
    min-width: 28px;
    height: 34px;
    min-height: 34px;
  }
}

/* === Runde 3: Bild-Viewer + Neu-Menue (2026-06-10) === */
/* Der Bild-Viewer gilt auf ALLEN Plattformen (User-Wunsch: auch Desktop/
   Tablet statt neuem Tab). z-index 300: ueber den Dialogen (modalZCounter
   ~100+), unter Toast/Tooltip (1000+). */
.mobile-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: rgba(10, 16, 20, 0.96);
}

.mobile-image-viewer.hidden {
  display: none;
}

.mobile-image-viewer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px;
  color: #fff;
}

.mobile-image-viewer-head strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
}

.mobile-image-viewer-head .icon-button {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.mobile-image-viewer-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 12px;
}

.mobile-image-viewer-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

@media (max-width: 620px) {
  .mobile-create-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-create-options .secondary-button {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 72px;
  }

  .mobile-create-options .secondary-button:disabled {
    opacity: 0.45;
  }

  /* (Bild-Viewer-Styles sind global — siehe Block "Runde 3" weiter oben.) */
}

/* === Zwei-Faktor-Authentifizierung === */

.hint-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

.auth-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.form-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.88rem;
  line-height: 1.45;
}

.totp-qr-wrap {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

#totpQrCanvas {
  width: min(216px, 100%);
  height: auto;
  border-radius: 12px;
  image-rendering: pixelated;
}

.totp-manual {
  border: 1px dashed var(--line);
  border-radius: 10px;
}

.totp-manual summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  font-size: 0.88rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.totp-manual summary::-webkit-details-marker {
  display: none;
}

.totp-manual summary::before {
  content: "▸";
  flex: none;
}

.totp-manual[open] summary::before {
  content: "▾";
}

.totp-manual[open] summary {
  padding-bottom: 4px;
}

.totp-secret-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 16px;
}

.totp-secret-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.totp-secret-value {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  word-break: break-word;
  user-select: all;
}

.totp-recovery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.totp-recovery-code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.95rem;
  text-align: center;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  user-select: all;
}

/* === Druck / PDF: nur die Zeitleiste aufs Papier (2026-06-29) === */
@media print {
  @page { size: landscape; margin: 12mm; }

  /* color-scheme: dark faerbt sonst die Seiten-Canvas (Rand/Margin) schwarz,
     sobald Hintergruende gedruckt werden -> im Druck immer hell. */
  html, html[data-theme="dark"] { color-scheme: light !important; }

  /* Hell erzwingen, auch wenn die App im Dunkelmodus laeuft (Tinte/Lesbarkeit).
     Diese Theme-Vars kommen aus dem Stylesheet (nicht inline) -> ueberschreibbar. */
  [data-theme="dark"] {
    --bg: #ffffff; --surface: #ffffff; --surface-soft: #eef2f4; --surface-elevated: #ffffff;
    --column-bg: #f9fafb; --line: #d8dee4; --text: #1e252b; --muted: #5a6670;
  }
  html, body, .app-shell, .main, .board-content { background: #ffffff !important; }

  /* App-Chrome ausblenden */
  .sidebar, .app-shell > .sidebar-restore-button, .board-header, .toolbar,
  .mobile-nav, .timeline-toolbar, .timeline-agenda, .timeline-undated,
  .timeline-empty { display: none !important; }

  /* Layout aufmachen: keine Hoehenbegrenzung, kein Scroll-Clip */
  .app-shell, .main, .board-content, .timeline-view, .timeline-scroll {
    display: block !important; height: auto !important; max-height: none !important;
    overflow: visible !important; width: auto !important;
  }
  .main { padding: 0 !important; }

  /* Gantt fuellt die Seitenbreite (Balken sind prozentbasiert -> fliessen mit);
     inline px-Breite bei Zoom>1 ueberschreiben. */
  .timeline-grid { width: 100% !important; min-width: 0 !important; }

  /* Zeilen nie mittendrin umbrechen; sticky Spalte statisch */
  .timeline-row { break-inside: avoid; page-break-inside: avoid; }
  .timeline-label { position: static !important; background: transparent !important; }

  /* Hintergruende/Farben drucken (Balken, Wochenende, Gitter, Heute-Linie, Legende) */
  .timeline-view { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Druck-Kopfzeile zeigen */
  .timeline-print-header { display: block !important; }

  /* --- Kanban-/Board-Ausdruck --- */
  /* Board-Druck-Kopf zeigen (nur Kanban; bei Timeline/Kalender leer -> :empty). */
  .board-print-header { display: block !important; }
  .board-print-header:empty { display: none !important; }

  /* Spalten brechen um statt horizontalem Scroll; volle Hoehe, kein Clip. */
  .kanban {
    display: flex !important; flex-wrap: wrap !important;
    width: auto !important; min-width: 0 !important;
    gap: 10px !important; align-items: flex-start !important;
  }
  .kanban > .column {
    flex: 0 0 270px !important; width: 270px !important;
    min-height: 0 !important; max-height: none !important; overflow: visible !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .card-list { max-height: none !important; overflow: visible !important; }
  .task-card { break-inside: avoid; page-break-inside: avoid; }

  /* Labels/Prioritaets-Akzente mitdrucken. */
  .board-content { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Interaktions-Chrome raus (Griff, Sortier-/Einklapp-Knopf, "+ Karte",
     "+ Spalte"-Kachel am Board-Ende). */
  .column-grip, .add-card-button, .column-actions, .column-footer,
  .quick-add-composer, .add-column-tile { display: none !important; }

  /* Prioritaets-Pillen: im Dunkelmodus-Druck die hellen (papiertauglichen)
     Farben erzwingen — die Dunkel-Pillen waschen sonst auf Weiss aus. */
  [data-theme="dark"] .chip.priority-low { color: #16442f !important; background: #c8ead5 !important; }
  [data-theme="dark"] .chip.priority-normal { color: #123f4b !important; background: #c8e6f1 !important; }
  [data-theme="dark"] .chip.priority-high { color: #5a3300 !important; background: #ffd68a !important; }
  [data-theme="dark"] .chip.priority-urgent { color: #6f1d18 !important; background: #ffc5bd !important; }

  /* Zuletzt (Quellreihenfolge entscheidet bei gleicher Spezifität): die
     Sichtbarkeits-Semantik der App gilt auch im Druck. Die display:block-
     Aufmach-Regeln oben schlugen .hidden sonst — aus der Übersicht gedruckt
     erschien das unsichtbar im Hintergrund geladene Board komplett im Ausdruck. */
  .hidden { display: none !important; }
}