:root {
  /* CI-Grundwerte kommen aus koschmieder-tokens.css (--kf-*, App-Familie-Master).
     Diese lokalen Aliase bleiben für den KoWork-Code erhalten, beziehen ihren
     Wert aber jetzt aus der gemeinsamen Quelle → keine Farb-Drift mehr. */
  --dark-grey: var(--kf-dark-grey);
  --light-grey: var(--kf-light-grey);
  --dark-blue: var(--kf-dark-blue);
  --medium-blue: var(--kf-medium-blue);
  --light-blue: var(--kf-light-blue);
  --white: var(--kf-white);

  /* Hero gradient tokens */
  --hero-light-bg:
    radial-gradient(circle at 7% 15%, rgba(44, 158, 201, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 248, 251, 0.94));
  --hero-border: rgba(41, 123, 150, 0.11);
  --hero-shadow: 0 18px 45px rgba(30, 81, 103, 0.08);

  /* Semantic colour tokens */
  --color-text: #1a2e3b;
  --color-text-strong: #111827;
  --color-text-muted: #51626e;
  --color-text-subtle: #5f7380;
  --color-surface: #ffffff;
  --color-surface-soft: #f7fbfd;
  --color-surface-muted: #f1f5f9;
  --color-border: #d8e4ea;
  --color-border-strong: #cbd5e1;
  --color-primary: var(--medium-blue);
  --color-primary-hover: var(--dark-blue);
  --color-primary-soft: rgba(41, 123, 150, 0.12);
  --color-primary-softer: rgba(41, 123, 150, 0.08);
  --color-focus: rgba(44, 158, 201, 0.18);
  --color-danger: #a83d50;
  --color-danger-soft: #fceaed;
  /* v704: von #1a8c6a abgedunkelt. Grüner Text auf hellgrünem Grund
     (--color-success-soft) kam sonst nur auf 3,7:1 — WCAG AA verlangt 4,5:1.
     Betrifft u. a. die Häkchen-Schritte der Einrichtungs-Checkliste. */
  --color-success: #14705a;
  --color-success-soft: #e4f5ee;
  --color-warning: #8a5f00;
  --color-warning-soft: #fdf2d0;
  /* 30.10.2026 (Markenfarben auf WCAG AA, DESIGN_RULES.md "Aenderung 30.10.2026"):
     - Rahmen von Bedienelementen (Felder, Auswahl): mind. 3:1 gegen Flaeche und Seitengrund.
       --color-border bleibt die zarte Trennlinie fuer Karten und Listen.
     - Fokus-Ring: durchgehend, mind. 3:1 (frueher ein 18-%-Schimmer).
     - Primaerknopf-Verlauf: heller Anfang #2a7f9c statt #3ab5d8, weisse Schrift ueberall >= 4,5:1. */
  --color-border-control: #728590;
  --color-border-control-hover: #5f7280;
  --color-focus-ring: #1b6a88;
  --primary-gradient: linear-gradient(140deg, #2a7f9c, var(--medium-blue) 60%, #1a5c74);

  /* U9-g Schritt 3 — hier endet die Doppelführung.
   *
   * KoWork hatte zwei semantische Wertesätze mit EIGENEN Werten: `--color-*`
   * (hier) und `--c-*` (weiter unten, seit v844 ebenfalls mit Dunkelsatz).
   * Zwei Sätze heißt: jeder neue Wert muss zweimal gepflegt werden, und der
   * dunkle Satz musste zweimal geschrieben werden. Genau das kostet.
   *
   * Ab hier gibt es nur noch EINEN Ort, an dem Werte stehen: diesen. `--c-*`
   * ist nur noch eine zweite Schreibweise und zeigt mit `var(…)` hierher.
   *
   * Warum nicht einfach gleichsetzen: Manche Paare hatten wirklich
   * verschiedene Farben — `--c-primary` ist das dunkle Petrol #1e5167,
   * `--color-primary` das mittlere #297b96. Sie zusammenzuwerfen hätte 501
   * Verwendungen sichtbar umgefärbt und den Kontrast auf Weiß von 8,7:1 auf
   * 4,8:1 gedrückt. Solche Paare behalten deshalb beide Werte — aber unter
   * EINEM Namensschema, damit erkennbar ist, dass es Abstufungen derselben
   * Sache sind und keine zufälligen Dubletten.
   *
   * Nur dort zusammengelegt, wo der Unterschied nicht sichtbar war und der
   * Kontrast nicht leidet: `--c-text-muted` (#64748b → #6b7280, 4,76 → 4,83)
   * und `--c-border` (#e5e7eb → #d8e4ea, beides kaum sichtbare Linien). */
  --color-bg: #f7f8fa;
  --color-text-max: #0f172a;
  /* Petrol-Abstufungen, von hell nach dunkel */
  --color-primary-deep: var(--dark-blue);
  --color-primary-deepest: #143a4a;
  --color-primary-deep-soft: rgba(30, 81, 103, 0.08);
  /* Kräftigere Statusfarben (der zweite Satz führte eigene) */
  --color-success-vivid: var(--color-success);
  --color-success-vivid-soft: #dcfce7;
  --color-warning-vivid: #8a5f00;
  --color-warning-vivid-soft: #fef9c3;
  --color-danger-vivid: #b91c1c;
  --color-danger-vivid-soft: #fee2e2;
  /* „Hinweis" gab es nur im zweiten Satz */
  --color-info: #0369a1;
  --color-info-soft: #e0f2fe;

  --line: var(--color-border);
  --warn: #8a5f00;
  --ok: var(--color-success);
  --high: #a83d50;
  /* Supplementary warm tokens - do not replace CI colours */
  --gold: var(--kf-gold);
  --gold-light: var(--kf-gold-light);
  --terracotta: #c26050;
  --terracotta-light: #faede8;
  --ui-font: var(--font-ui);
  --bg-page: #F4F7FA;

  /* Spacing: 4px base, 8pt-friendly */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Layout */
  --content-max-width: 1440px;
  --sidebar-width: 280px;
  --sidebar-width-collapsed: 72px;
  --topbar-min-height: 64px;
  --grid-gutter: var(--space-4);
  --split-min-column: 420px;

  /* Radius */
  --radius-pill: 999px;
  --list-item-padding-y: 10px;
  --list-item-padding-x: 12px;

  /* Shadows */

  /* Typography */
  /* v453: Font-Sizing-Fallback gegen CLS — system-ui-Metriken matchen DM Sans
     näher als Default-Serif (verhindert Text-Reflow beim Font-Swap) */
  --font-ui: "DM Sans", "DM Sans Fallback", "Inter", system-ui, -apple-system, sans-serif;
}

/* Geschützte Personalakte und Dokumentablage */
.work-schedule-periods-panel {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #d8e4ea);
}

.employee-document-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.employee-document-row {
  gap: 16px;
  align-items: center;
}

.employee-document-row > div:first-child {
  min-width: 0;
}

.employee-document-row strong {
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
}

@media (max-width: 760px) {
  .employee-document-upload-row {
    grid-template-columns: 1fr;
  }

  .employee-document-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* v453: CSS-Font-Size-Adjust — sorgt für ähnliche x-Height beim Fallback */
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial");
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
  size-adjust: 105%;
}

:root {
  --font-display: "Futura Heavy", "Futura", "Avenir Next", sans-serif;
  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 22px;
  --font-size-3xl: 28px;
  --font-size-page: 30px;
  --line-tight: 1.2;
  --line-label: 1.4;
  --line-body: 1.55;
  --tracking-eyebrow: 0.1em;
  --label-xs-size: 10px;
  --label-xs-weight: 700;
  --label-xs-tracking: 0.06em;
  --overline-size: 11px;
  --overline-tracking: 0.09em;

  /* Controls */
  --control-height-sm: 32px;
  --control-height: 42px;
  --control-height-lg: 44px;
  --control-padding-x: 12px;
  --button-padding-x: 12px;
  --button-height-sm: 32px;
  --button-height-md: 40px;
  --button-height-lg: 44px;
  --button-font-sm: 12px;
  --button-font-md: 13px;
  --form-control-height-sm: 34px;
  --form-control-height: 42px;
  --form-control-padding-y: 9px;
  --form-control-padding-x: 12px;
  --avatar-size-xs: 18px;
  --avatar-size-sm: 22px;
  --avatar-size-md: 24px;
  --avatar-size-lg: 38px;
  --chip-height: 20px;
  --status-pending-bg: #fff5d6;
  --status-pending-text: #8a5f00;
  --status-pending-border: #f2d06b;
  --status-approved-bg: #e4f5ee;
  /* 30.10.2026: ein Erfolgs-Gruen fuer alles (--color-success, 5,3:1 auf #e4f5ee) */
  --status-approved-text: #14705a;
  --status-approved-border: #9fd8c0;
  --status-rejected-bg: #fceaed;
  --status-rejected-text: #a83d50;
  --status-rejected-border: #e7afba;
  --status-absence-bg: #e8f3fa;
  --status-absence-text: #1e5167;
  --status-absence-border: #b8d6e6;
}

* {
  box-sizing: border-box;
}

.skip-link {
  transform: translateY(-160%);
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: var(--radius-pill);
  font-weight: 800;
  box-shadow: var(--shadow-lg);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: none;
}

#mainContent:focus {
  outline: none;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--color-text);
  background:
    radial-gradient(circle at 5% 5%, rgba(44, 158, 201, 0.10), transparent 35%),
    radial-gradient(circle at 85% 10%, rgba(30, 81, 103, 0.12), transparent 35%),
    var(--bg-page);
  font-family: var(--font-ui);
}

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

button,
input,
select,
textarea,
.panel,
.stack,
.split > *,
.split-2 > *,
.split-3 > * {
  min-width: 0;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
  transition: grid-template-columns 220ms ease;
}
.app-shell:has(.sidebar.collapsed) {
  grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}
.app-shell.sidebar-collapsed {
  grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

.sidebar {
  position: relative;
  z-index: 60;
  color: #e8f8ff;
  background:
    linear-gradient(170deg, rgba(30, 81, 103, 0.97), rgba(22, 40, 51, 0.99)),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.03),
      rgba(255, 255, 255, 0.03) 8px,
      rgba(255, 255, 255, 0) 8px,
      rgba(255, 255, 255, 0) 16px
    );
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.logo-dot {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(30, 81, 103, 0.14), 0 8px 20px rgba(9, 50, 65, 0.16);
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: block;
  object-fit: contain;
}

.brand-top {
  margin: 0;
  font-family: "Futura Heavy", "Futura", "Avenir Next", sans-serif;
  font-style: italic;
  font-size: 20px;
}

.brand-sub {
  margin: 0;
  opacity: 0.8;
  font-size: 13px;
}

.side-link {
  color: inherit;
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  outline: none;
}

.side-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.side-link.is-active {
  transform: none;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: var(--light-blue, #2c9ec9);
  color: #fff;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  vertical-align: 1px;
  margin-left: 3px;
}

.sidebar-toggle-btn {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e8f8ff;
  cursor: pointer;
  padding: 0;
  opacity: 0.9;
  transition: opacity 160ms, background 160ms, border-color 160ms, transform 160ms;
  flex-shrink: 0;
}
.sidebar-toggle-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}
.sidebar.collapsed .sidebar-toggle-btn {
  margin-left: 0;
  margin-right: auto;
}
.sidebar-toggle-btn .sidebar-expand-icon { display: none; }
.sidebar.collapsed .sidebar-toggle-btn .sidebar-collapse-icon { display: none; }
.sidebar.collapsed .sidebar-toggle-btn .sidebar-expand-icon { display: block; }

.sidebar {
  transition: width 220ms ease;
}

.sidebar.collapsed {
  width: 72px !important;
  padding: 24px 10px;
  overflow: hidden;
}
.sidebar.collapsed .brand-text {
  display: none;
}
.sidebar.collapsed .brand {
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.sidebar.collapsed .side-search,
.sidebar.collapsed .my-tasks {
  display: none;
}
.sidebar.collapsed .side-link {
  text-align: center;
  padding: 10px 6px;
  font-size: 0;
}
.sidebar.collapsed .side-link::before {
  font-size: 13px;
  font-weight: 600;
}
.sidebar.collapsed .side-link:hover {
  transform: none;
}

.side-search {
  display: grid;
}

.side-search label {
  font-size: 12px;
  opacity: 0.84;
}

.side-search-quick {
  display: none;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.08);
  color: #e8f8ff;
  cursor: pointer;
  font-weight: 800;
}

.side-search-quick:hover,
.side-search-quick:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

.sidebar.collapsed .side-search-quick {
  display: grid;
}

.sidebar.collapsed .side-search-quick span {
  display: none;
}

.side-search input {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: 10px var(--control-padding-x);
  color: var(--white);
  background: rgba(255, 255, 255, 0.07);
}

.side-search input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.my-tasks h2 {
  margin: 0 0 8px 0;
  font-size: var(--type-label);
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

#myTasksList {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

#myTasksList li {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
}

.main {
  display: grid;
  grid-template-rows: auto 1fr;
}

.topbar {
  border-radius: var(--radius);
  justify-content: space-between;
  animation: fade-in 260ms ease;
}

.eyebrow {
  margin: 0;
}

.headline {
  font-family: "Futura Heavy", "Futura", "Avenir Next", sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(24px, 3.5vw, 34px);
}

.header-workday-controls {
  border: 1px solid rgba(200, 221, 232, 0.9);
}

.header-workday-controls.is-visible {
  display: grid;
}

.header-workday-actions .ghost-button:disabled {
  opacity: 0.42;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.icon-button-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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

.project-switcher {
  display: grid;
  gap: 6px;
  font-size: 12px;
}

.project-switcher select {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  min-width: 200px;
}

.user-chip {
  font-weight: 700;
  cursor: pointer;
}

.view {
  display: none;
}

.view.is-active {
  display: block;
  animation: fade-in 340ms ease;
}

.kpi-label {
  margin: 0;
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.home-grid > .panel {
  min-width: 0;
}
.dashboard-widget-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--grid-gutter, 12px);
}
.dashboard-widget-column > .panel {
  min-width: 0;
  width: 100%;
}
.dashboard-widget-column:empty {
  display: none;
}
.dashboard-widget-column.is-empty {
  display: none;
}
.home-grid.has-one-widget-column {
  grid-template-columns: 1fr;
}
/* "Zeiten heute" always spans both columns — it's the hero widget */
.home-grid > [data-widget-key="workday"] {
  grid-column: 1 / -1;
}
.home-grid > [data-widget-key="work-intelligence"] {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.home-grid > [data-widget-key="employee-concerns"] {
  grid-column: 1 / -1;
}
/* Column 1: Angepinnt, Schnellaufgabe, Projektradar, Teamauslastung */
.home-grid > [data-widget-key="pinned-tasks"]  { grid-column: 1; order: 21; }
.home-grid > [data-widget-key="quick-task"]    { grid-column: 1; order: 30; }
.home-grid > [data-widget-key="project-radar"] { grid-column: 1; order: 40; }
.home-grid > [data-widget-key="workload"]      { grid-column: 1; order: 50; }
/* Column 2: Abwesenheiten, Geburtstage, Aktivität */
.home-grid > [data-widget-key="vacation"]      { grid-column: 2; order: 22; }
.home-grid > [data-widget-key="birthdays"]     { grid-column: 2; order: 32; }
.home-grid > [data-widget-key="activity"]      { grid-column: 2; order: 42; }
@media (max-width: 600px) {
  .home-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-widget-column {
    gap: var(--grid-gutter, 12px);
  }
  .home-grid > [data-widget-key] {
    grid-column: 1 !important;
  }
}

.dashboard-head {
  flex-wrap: wrap;
}

.dashboard-head-controls {
  display: flex;
  flex-wrap: wrap;
}

.dashboard-head-controls .stack {
  min-width: 190px;
}

/* Kompakte Ansicht: "Zeiten heute" in Spalte 1 statt voller Breite */
.dashboard-compact-mode .home-grid > [data-widget-key="workday"] {
  grid-column: 1;
  order: 10;
}

/* Mitarbeiterbelange: gemeinsame, datensparsame Freigabe-Warteschlange. */
.employee-concerns-panel {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
}

.employee-concerns-header {
  align-items: center;
  background: linear-gradient(115deg, var(--color-primary-softer), var(--color-primary-soft));
}

.employee-concerns-header h2,
.employee-concerns-header p {
  margin: 0;
}

.employee-concerns-header p {
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.employee-concerns-count {
  display: inline-grid;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  place-items: center;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

.employee-concerns-count.is-clear {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.employee-concern-list {
  display: grid;
}

.employee-concern-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  border-top: 1px solid var(--color-border);
}

.employee-concern-card:first-child {
  border-top: 0;
}

.employee-concern-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--color-primary-hover), var(--color-primary));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.employee-concern-main {
  min-width: 0;
}

.employee-concern-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.employee-concern-heading time {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 11px;
}

.employee-concern-type {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.employee-concern-type.is-vacation {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.employee-concern-type.is-time {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.employee-concern-summary,
.employee-concern-detail {
  margin: 3px 0 0;
}

.employee-concern-summary {
  font-size: 13px;
  font-weight: 600;
}

.employee-concern-detail {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-concern-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}

.employee-concerns-empty {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 15px 16px;
  border-top: 1px solid var(--color-border);
}

.employee-concerns-empty-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--color-success-soft);
  color: var(--color-success);
}

.employee-concerns-empty p {
  margin: 2px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
}

.employee-concern-review-note {
  display: block;
  grid-column: 1 / -1;
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 11px;
}

.employee-concern-auto-hint {
  margin: 0;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--color-success-soft);
  color: var(--color-success);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}
/* `.panel p` färbt Absätze grau (4,3 : 1 auf dem Grün) — der Hinweis soll Erfolgsgrün bleiben. */
.employee-concern-auto-hint.employee-concern-auto-hint {
  color: var(--color-success);
}

.attendance-entry-detail .employee-concern-review-note {
  margin-top: 2px;
}

/* Arbeitszeitgesetz-Hinweis an einem Ist-Zeit-Tag (nur Hinweis, JAS-179 Nr. 10) */
.attendance-entry-detail .attendance-arbzg-hinweis {
  margin-top: 2px;
  color: var(--warn);
  line-height: 1.35;
}

@media (max-width: 760px) {
  .employee-concern-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .employee-concern-actions {
    grid-column: 2;
  }
  .employee-concern-heading time {
    width: 100%;
    margin-left: 0;
  }
}
/* Spalte 2 bekommt "Abwesenheiten" an oberste Stelle */
.dashboard-compact-mode .home-grid > [data-widget-key="vacation"] { grid-column: 2; order: 11; }

.dashboard-compact-mode .simple-list {
  max-height: 210px;
  overflow: auto;
  padding-right: 2px;
}

.dashboard-activity-item {
  justify-content: space-between;
}

.dashboard-activity-item > div {
  gap: 4px;
}

.dashboard-activity-item time {
  white-space: nowrap;
}

.dashboard-radar-list li {
  display: grid;
  gap: var(--space-2);
}

.dashboard-radar-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-left: 4px solid var(--color-success);
}

.dashboard-radar-item.at-risk {
  border-left-color: var(--color-warning);
}

.dashboard-radar-item.off-track {
  border-left-color: var(--color-warning);
}

.dashboard-radar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Fälligkeiten-Widget */

.dashboard-deadline-group-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5a7a8a;
  padding: 8px 14px 4px;
  border-top: 1px solid var(--line);
}

.dashboard-deadline-group-header:first-child {
  border-top: none;
}

.dashboard-deadline-group-header.overdue {
  color: var(--color-danger, #c0392b);
}

.dashboard-deadline-group-header.today {
  color: var(--medium-blue, #1e5167);
}

.deadline-group-count {
  font-weight: 500;
  opacity: 0.7;
  margin-left: 4px;
}

.dashboard-deadline-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.dashboard-deadline-item:hover {
  background: var(--bg-hover, #f5f8fb);
}

.deadline-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.deadline-item-title {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deadline-item-project {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deadline-item-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.deadline-item-date {
  font-size: 12px;
  font-weight: 600;
  color: #47677a;
  white-space: nowrap;
}

.deadline-item-date.is-overdue {
  color: var(--color-warning, #b7791f);
}

[data-theme="dark"] .dashboard-deadline-group-header { color: #7a93a1; border-top-color: #2a3f52; }
[data-theme="dark"] .dashboard-deadline-group-header.today { color: #5db8d8; }
[data-theme="dark"] .dashboard-deadline-item:hover { background: #1c2f3e; }
[data-theme="dark"] .deadline-item-date { color: #8ab0c0; }

.dashboard-team-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dashboard-load-bar {
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  overflow: hidden;
}

.dashboard-load-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #5abfa8;
}

.dashboard-team-item.high .dashboard-load-bar span {
  background: #e0b858;
}

.dashboard-team-item.over .dashboard-load-bar span {
  background: #c87888;
}

.dashboard-team-item[data-open-user-tasks-id] {
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
}

.dashboard-team-item[data-open-user-tasks-id]:hover,
.dashboard-team-item[data-open-user-tasks-id]:focus-visible {
  border-color: color-mix(in srgb, var(--medium-blue) 45%, var(--color-border));
  box-shadow: 0 8px 20px rgba(30, 81, 103, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.workday-alert-item {
  display: grid;
  gap: 8px;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  display: inline;
}
.link-button:hover {
  color: var(--medium-blue, #1a7da0);
}

.workday-alert-fix-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.workday-alert-fix-form input[type="time"] {
  max-width: 150px;
}

.time-entry-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.time-entry-delete {
  opacity: 0;
  transition: opacity 140ms ease;
}

.time-entry-item:hover .time-entry-delete {
  opacity: 1;
}

@media (pointer: coarse) {
  .time-entry-delete {
    opacity: 1;
  }
}

.time-entry-item-right {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.day-planner-shell {
  display: grid;
  gap: 12px;
}

.day-planner-card {
  border: 1px solid #cfe0f0;
  border-radius: 20px;
  background: #ffffff;
  overflow: hidden;
}

.day-planner-header {
  color: #ffffff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.day-planner-title-wrap h2 {
  margin: 0;
}

.day-planner-meta {
  display: flex;
  flex-wrap: wrap;
}

.day-planner-target {
  display: grid;
  gap: 8px;
  min-width: 270px;
}

.day-planner-target .stack {
  gap: 4px;
}

.day-planner-target span {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.95);
}

.day-planner-content {
  padding: 24px 24px 18px;
  display: grid;
  gap: 18px;
  max-height: 62vh;
  overflow-y: auto;
}

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

.day-planner-intro h3 {
  margin: 0 0 8px 0;
  font-size: var(--type-section-title);
  font-weight: 800;
  color: #1f2f3f;
}

.day-planner-intro p {
  margin: 0;
  line-height: 1.42;
}

.day-planner-tools {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.day-planner-hours-field {
  display: grid;
  gap: 4px;
  min-width: 120px;
}

.day-planner-hours-field span {
  color: #4e616e;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.day-planner-hours-field input {
  min-height: 38px;
}

.day-planner-section {
  display: grid;
  gap: 8px;
}

.day-planner-section h4 {
  margin: 0;
  font-weight: 800;
  color: #2f3e4d;
}

.day-planner-task-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
}

.day-planner-task-card {
  display: grid;
  gap: 10px;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease, background 120ms ease;
}

.day-planner-task-card:hover {
  border-color: #bdcedf;
  box-shadow: 0 6px 14px rgba(22, 47, 62, 0.12);
}

.day-planner-task-card.is-selected {
  border-color: var(--medium-blue);
  background: var(--color-primary-softer);
}

.day-planner-task-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.day-planner-task-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.day-planner-task-check {
  width: 23px;
  height: 23px;
  border-radius: 999px;
  border: 2px solid #97a3b2;
  margin-top: 2px;
  flex-shrink: 0;
}

.day-planner-task-card.is-selected .day-planner-task-check {
  box-shadow: inset 0 0 0 5px var(--color-primary-softer);
}

.day-planner-task-title {
  margin: 0;
  line-height: 1.3;
}

.day-planner-task-description {
  margin: 3px 0 0 0;
  color: #596d7c;
  font-size: 0.95rem;
  line-height: 1.4;
}

.day-planner-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: #647989;
  font-size: 0.85rem;
}

.day-planner-priority-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 700;
}

.day-planner-overdue-toggle {
  width: fit-content;
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 9px 14px;
  cursor: pointer;
}

.day-planner-footer {
  border-top: 1px solid #d7e6ef;
  background: #f7fbfd;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.day-planner-footer-actions {
  margin-left: auto;
}

.day-planner-save-error {
  margin: 0;
  color: #b0492f;
  font-weight: 700;
}

.day-plan-suggestion-wrap {
  margin-top: 8px;
}

.day-plan-suggestion-card {
  border: 1px solid #d5e7f0;
  background: linear-gradient(175deg, rgba(251, 255, 255, 0.95), rgba(238, 247, 252, 0.95));
}

.day-plan-suggestion-item {
  border: 1px solid #dceaf2;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.day-plan-suggestion-item.is-extra {
  background: #f7fbfe;
}

.day-plan-suggestion-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}

.task-layout {
  display: grid;
  grid-template-columns: 1fr;
}

.workday-panel .muted {
  margin: 2px 0 0 0;
}

.workday-panel .primary-button,
.workday-panel .ghost-button {
  border-radius: 12px;
}

.workday-panel .stack {
  gap: 8px;
}

.workday-panel select,
.workday-panel input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.workday-panel label {
  display: block;
  max-width: 100%;
}

.task-layout.is-split {
  grid-template-columns: 1fr;
}

.project-space {
  display: grid;
}

.project-space-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-space-path {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.square {
  min-width: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
}

.project-switcher-inline span {
  color: #325566;
}

.project-inner-nav {
  display: flex;
  flex-wrap: wrap;
}

.project-action-row {
  display: flex;
  justify-content: flex-start;
}

.project-tab-view {
  display: none;
}

.project-tab-view.is-active {
  display: block;
}

.project-mini-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.project-mini-col {
  border-radius: 10px;
  border: 1px dashed var(--line);
  padding: 10px;
  background: #f9fdff;
  min-height: 260px;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.project-mini-col.drag-over {
  border-color: var(--medium-blue);
  background: color-mix(in srgb, #ffffff 78%, var(--light-blue) 22%);
  box-shadow: inset 0 0 0 2px rgba(41, 123, 150, 0.12);
}

.project-mini-col h4 {
  margin: 0 0 8px 0;
}

.project-board-task-item {
  border-radius: 10px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-left-color: transparent;
  padding: 10px 10px 8px;
  background: var(--white, #fff);
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity 140ms ease, transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  box-shadow: 0 1px 3px rgba(30,81,103,0.07);
}

.project-board-task-item:hover {
  box-shadow: 0 3px 10px rgba(30,81,103,0.13);
  transform: translateY(-1px);
}

.project-board-task-item:active {
  cursor: grabbing;
}

.project-board-task-item.is-dragging {
  opacity: 0.45;
  transform: scale(0.98);
}

/* Priority border colours */
.project-board-task-item.board-card-priority-critical { border-left-color: #e74c3c; }
.project-board-task-item.board-card-priority-high     { border-left-color: #e67e22; }
.project-board-task-item.board-card-priority-low      { border-left-color: #95a5a6; }

.project-board-task-item.is-selected {
  border-color: var(--medium-blue);
  border-left-color: var(--medium-blue);
  background: rgba(41, 123, 150, 0.06);
  box-shadow: 0 0 0 2px rgba(41,123,150,0.18);
}

/* Card inner elements */
.board-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.board-card-tag {
  background: rgba(99,102,241,0.10);
  color: #4f46e5;
  border: 1px solid rgba(99,102,241,0.22);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
}

.board-card-title {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  color: inherit;
  width: 100%;
  word-break: break-word;
}

.board-card-title:hover { color: var(--medium-blue); }

.board-card-time-bar {
  height: 3px;
  background: #e5eef3;
  border-radius: 999px;
  overflow: hidden;
}

.board-card-time-bar > div {
  height: 100%;
  background: var(--medium-blue);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.board-card-time-bar.is-warn > div { background: #e67e22; }
.board-card-time-bar.is-over > div { background: #e74c3c; }

.board-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 20px;
}

.board-card-footer-left {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}

.board-card-footer-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.board-card-deadline {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

.board-card-deadline.deadline-today { background: #fff3cd; color: #856404; }
.board-card-deadline.deadline-soon  { background: #fff8e1; color: #b45309; }
.board-card-deadline.deadline-overdue { background: #fffbeb; color: #92400e; }

.board-card-time-chip {
  font-size: 10px;
  color: #5a7a8a;
  font-weight: 600;
}

.board-card-meta-icon {
  font-size: 10px;
  color: #7a93a1;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.board-card-avatars {
  display: flex;
  gap: 2px;
}

.board-card-timer-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(30,81,103,0.2);
  background: linear-gradient(135deg, var(--medium-blue), var(--dark-blue));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}

.project-board-task-item:hover .board-card-timer-btn { opacity: 1; }
.board-card-timer-btn:hover { transform: scale(1.12); }

[data-theme="dark"] .project-board-task-item { background: #1a2e3c; border-color: #2a3f52; }
[data-theme="dark"] .project-board-task-item:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.3); }
[data-theme="dark"] .project-board-task-item.is-selected { background: rgba(41,123,150,0.15); }
[data-theme="dark"] .board-card-tag { background: rgba(99,102,241,0.18); color: #a5b4fc; }
[data-theme="dark"] .board-card-time-bar { background: #243647; }
[data-theme="dark"] .board-card-time-chip { color: #8ab0c0; }
[data-theme="dark"] .board-card-meta-icon { color: #6a8a9a; }

.project-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.project-overview-group + .project-overview-group {
  margin-top: 8px;
}

.projects-only-shell {
  display: grid;
  gap: 12px;
}

.projects-only-actions {
  display: flex;
  justify-content: flex-start;
}

.projects-only-group .project-status-row {
  justify-content: flex-start;
  gap: 10px;
}

.projects-only-table {
  table-layout: fixed !important;
}

.projects-only-table col:nth-child(1) { width: 29%; }
.projects-only-table col:nth-child(2) { width: 9%; }
.projects-only-table col:nth-child(3) { width: 7%; }
.projects-only-table col:nth-child(4) { width: 17%; }
.projects-only-table col:nth-child(5) { width: 14%; }
.projects-only-table col:nth-child(6) { width: 13%; }
.projects-only-table col:nth-child(7) { width: 11%; }

.projects-only-table th,
.projects-only-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.projects-only-table th:first-child,
.projects-only-table td:first-child {
  white-space: normal;
}

.projects-only-progress {
  display: flex;
  align-items: center;
  gap: 6px;
}

.projects-only-progress .progress-inline {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.projects-only-pct {
  font-size: 12px;
  white-space: nowrap;
  color: var(--muted-text);
  min-width: 30px;
}

.project-overview-table-wrap {
  border: 1px solid #d7e5ed;
  overflow: auto;
  background: rgba(255, 255, 255, 0.94);
}

.project-overview-table th,
.project-overview-table td {
  border-left: 0;
  border-right: 0;
}

.project-overview-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f8fc;
  color: #456375;
}

.project-main-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
}

.project-main-cell > span:last-child {
  display: grid;
  gap: 2px;
}

.project-main-cell small {
  color: #51626e;
  font-size: 12px;
}

.project-folder-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #365d71;
  background: #eaf3f8;
  border: 1px solid #d5e3eb;
}

.project-folder-icon .ci-icon-svg {
  width: 18px;
  height: 18px;
}

.project-tag-pill {
  border: 1px dashed #b9d1df;
  color: #406175;
  background: #f5fbff;
  margin-right: 4px;
}

.project-tag-pill.is-empty {
  color: #7a909d;
}

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

.project-date-overdue {
  color: #c04871;
  font-weight: 700;
}

.project-date-normal {
  color: #294f63;
  font-weight: 600;
}

.project-status-chip {
  /* JAS-037: lange Statuslabels ("Noch nicht gestartet") liefen in der
     Projekt-Tabelle über den Zellenrand hinaus bzw. wurden abgeschnitten.
     Zeilenumbruch statt starrem nowrap erlauben, damit der Text vollständig
     sichtbar bleibt. */
  /* Klicktest 2026-09-25: .panel setzt global overflow-wrap:anywhere; das
     erbte auch dieser Chip und riss dadurch kurze Ein-Wort-Labels wie
     "Läuft" in der schmalen Status-Spalte Buchstabe für Buchstabe um.
     Zeilenumbruch soll nur zwischen Wörtern passieren, nicht mittendrin. */
}

button.project-status-chip {
  cursor: pointer;
  font-family: inherit;
}

button.project-status-chip:hover {
  box-shadow: 0 8px 20px rgba(30, 81, 103, 0.14);
  transform: translateY(-1px);
}

.project-status-chip .status-dot {
  width: 8px;
  height: 8px;
  background: var(--status-color);
  border-radius: 999px;
}

.project-overview-row {
  cursor: pointer;
}

.project-overview-row:hover {
  background: rgba(41, 123, 150, 0.07);
}

.project-task-layout {
  display: grid;
  grid-template-columns: 1fr;
}

.project-task-layout.is-split {
  grid-template-columns: minmax(560px, 1fr) minmax(380px, 0.9fr);
}

.awork-project-task-layout {
  gap: 0;
  border-radius: 14px;
  overflow: hidden;
}

.awork-project-task-layout.is-split {
  grid-template-columns: minmax(560px, 1fr) minmax(560px, 1fr);
}

.project-task-list-wrap {
  padding-right: 10px;
}

.project-task-lists-shell {
  display: grid;
}

/* Archived tasks section */
.archived-tasks-section {
  padding-top: 12px;
}

.archived-task-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}

.archived-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-hover, #f5f8fb);
  border-radius: var(--radius-sm, 6px);
  opacity: 0.75;
}

.archived-task-row:hover {
  opacity: 1;
}

.archived-task-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.archived-task-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #5a7a8a);
  text-decoration: line-through;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .archived-tasks-section { border-top-color: #2a3f52; }
[data-theme="dark"] .archived-task-row { background: #1c2f3e; }
[data-theme="dark"] .archived-task-title { color: #7a93a1; }

.project-task-list-group {
  display: grid;
}

.project-task-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.project-task-list-toggle {
  border: 0;
  background: transparent;
  color: #1d4257;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 0;
}

.project-task-list-head-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.project-task-list-group.is-collapsed .project-task-list-card {
  display: none;
}

.project-task-new-row-form {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
}

.project-task-new-row-form input {
  border: 0;
  background: transparent;
  padding: 4px 0;
  color: #193b50;
  font-weight: 700;
  font-style: italic;
  outline: none;
}

.project-task-new-row-form input::placeholder {
  color: #9ab3bf;
}

.project-task-list-rows {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  display: grid;
}

.project-task-list-row {
  display: grid;
  /* v257: 6 Spalten: drag-handle | bulk-check | collapse-chevron | state-dot | title | right-meta */
  align-items: center;
  gap: 0 5px;
  border-bottom: 1px solid #dce9f1;
  cursor: pointer;
}

.global-awork-task-list-shell {
  max-width: none;
  width: 100%;
  margin: 18px auto 0;
}

.global-awork-task-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 6px 8px;
}

.global-awork-task-list-head h3 {
  margin: 0;
}

.global-awork-task-list-card {
  padding: 0 12px;
  border: 1px dashed #c7dced;
  background: rgba(252, 255, 255, 0.9);
  width: 100%;
}

.global-awork-task-group {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.global-awork-task-group:first-of-type {
  margin-top: 0;
}

.global-awork-task-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 2px;
}

.global-awork-task-group-head h4 {
  margin: 0;
  font-size: 14px;
}

.global-awork-task-group-head p {
  margin: 2px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
}

#view-aufgaben .global-awork-task-row {
  min-height: 40px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.global-awork-task-row .project-task-row-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.global-awork-task-row .task-meta-chip.is-project {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-aufgaben .global-task-new-row {
  cursor: pointer;
}

#view-aufgaben .global-task-new-row .project-task-state-dot {
  background: transparent;
  border: 1px dashed #c7dced;
  color: #b5cfe0;
  pointer-events: none;
}

.global-task-new-label {
  color: #9ab3bf;
  font-style: italic;
  font-size: 14px;
}

#view-aufgaben .global-awork-task-group .global-task-new-row {
  display: none;
}

#view-aufgaben .global-awork-task-group:first-child .global-task-new-row {
  display: grid;
}

#view-aufgaben .global-awork-task-list-rows {
  margin: 0;
}

/* ── Subtask rows (awork-style: clean indent) — Einrückung siehe v342-Block ── */
.global-awork-task-row.is-child .project-task-title-btn {
  font-size: 13px;
  opacity: 0.9;
}

/* ── Collapse/expand button ─────────────────────────────────────────── */
.task-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0;
  opacity: 0;
  transition: opacity 120ms, background 120ms, color 120ms;
  flex-shrink: 0;
}

.project-task-list-row:hover .task-collapse-btn,
.project-task-list-row.is-selected .task-collapse-btn {
  opacity: 1;
}

.task-collapse-btn:hover {
  background: var(--color-primary-softer);
  color: var(--medium-blue);
  opacity: 1;
}

.task-collapse-placeholder {
  display: block;
  width: 14px;
  flex-shrink: 0;
}

/* Parent task: subtle visual indicator */
.global-awork-task-row.has-children .project-task-title-btn {
  font-weight: 600;
}

.global-awork-task-row .project-task-title-btn {
  font-size: 14px;
}

.global-awork-task-row .task-timer-play-button {
  min-width: 70px;
}

.project-task-state-dot {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid #b5cfe0;
  background: #fff;
  color: #6b8596;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.project-task-state-dot .ci-icon-svg {
  width: 16px;
  height: 16px;
}

.project-task-state-dot.is-doing {
  border-color: #f1cf67;
  color: #e3b82f;
  background: #fff8da;
}

.project-task-state-dot.is-review {
  border-color: #a78bdd;
  color: #7652bd;
  background: #f2ecff;
}

.project-task-state-dot.is-done {
  border-color: #62cc96;
  color: #26a366;
  background: #e8f9ef;
}

/* awork-artiger Schnellwechsel direkt am Statuskreis. Der Picker ist bereits
 * in der Zeile vorhanden und wird per Hover bzw. Tastaturfokus eingeblendet. */
.task-status-quick-wrap {
  position: relative;
  z-index: 20;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
}

.task-status-quick-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: -8px;
  z-index: 9900;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  width: max-content;
  max-width: calc(100vw - 48px);
  padding: 6px;
  border: 1px solid var(--line, #dce6ec);
  border-radius: 999px;
  background: var(--surface, #fff);
  box-shadow: 0 10px 28px rgba(17, 47, 66, 0.18), 0 2px 7px rgba(17, 47, 66, 0.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 110ms ease, transform 110ms ease, visibility 110ms;
}

/* Unsichtbare Brücke, damit der Picker beim Weg vom Kreis nicht zuklappt. */
.task-status-quick-picker::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 8px;
}

.task-status-quick-wrap:hover .task-status-quick-picker,
.task-status-quick-wrap:focus-within .task-status-quick-picker {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.task-status-quick-option {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  padding: 0;
  border: 1px solid var(--pick-color, #9bc8f8);
  border-radius: 50%;
  background: var(--surface, #fff);
  color: var(--pick-color, #6b8596);
  overflow: visible;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease, transform 100ms ease, box-shadow 100ms ease;
}

.task-status-quick-option:hover,
.task-status-quick-option:focus-visible {
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pick-color, #9bc8f8) 22%, transparent);
}

.task-status-quick-option.is-current {
  box-shadow: inset 0 0 0 2px var(--surface, #fff), 0 0 0 2px var(--pick-color, #9bc8f8);
}

.task-status-quick-option .ci-icon-svg {
  width: 15px;
  height: 15px;
}

/* Bezeichnung wie bei awork erst an der gerade betrachteten Option zeigen. */
.task-status-quick-label {
  position: absolute;
  top: calc(100% + 13px);
  left: 50%;
  z-index: 1;
  width: max-content;
  max-width: 220px;
  padding: 8px 11px;
  border-radius: 9px;
  background: #152c3c;
  box-shadow: 0 7px 20px rgba(17, 47, 66, 0.2);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -3px);
  transition: opacity 90ms ease, transform 90ms ease, visibility 90ms;
}

.task-status-quick-option:hover .task-status-quick-label,
.task-status-quick-option:focus-visible .task-status-quick-label {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

[data-theme="dark"] .task-status-quick-picker,
[data-theme="dark"] .task-status-quick-option {
  background: #1c2b38;
  border-color: var(--pick-color, #50687a);
}

[data-theme="dark"] .task-status-quick-option.is-current {
  box-shadow: inset 0 0 0 2px #1c2b38, 0 0 0 2px var(--pick-color, #9bc8f8);
}

@media (prefers-reduced-motion: reduce) {
  .task-status-quick-picker,
  .task-status-quick-option,
  .task-status-quick-label {
    transition: none;
  }
}

.project-task-title-btn {
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  padding: 4px 0;
}

.project-task-row-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}

.task-meta-chip.is-deadline {
  color: #b44573;
  background: #fdeef5;
  border-color: #f3cae0;
}

.task-meta-chip.is-zero {
  color: #98adb9;
  background: #f2f5f7;
  border-color: #d8e2e8;
}

.task-meta-chip.is-priority-high {
  color: #c0392b;
  background: #fdf0ee;
  border-color: #f5c6c0;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.task-meta-users {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.task-meta-count {
  color: #577082;
  font-size: 11px;
  font-weight: 700;
}

.project-task-detail-wrap {
  border-left: 1px solid #d7e6ee;
}

.project-task-detail-wrap.hidden {
  display: none;
  border-left: 0;
  padding-left: 0;
}

.project-task-detail-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(248, 252, 255, 0.9);
  display: grid;
  max-height: calc(100vh - 210px);
  overflow: auto;
  position: sticky;
}

.awork-task-detail {
  border-radius: 16px;
  background: rgba(251, 255, 255, 0.95);
}

.project-task-detail-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.project-task-detail-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #3b6074;
  font-size: 13px;
  font-weight: 700;
}

.project-task-detail-title-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.project-task-detail-title-row .project-task-state-dot {
  width: 38px;
  height: 38px;
}

.project-task-detail-title-row .project-task-state-dot .ci-icon-svg {
  width: 20px;
  height: 20px;
}

.project-task-detail-title-row input {
  min-width: 0;
  width: 100%;
  font-family: "Futura Heavy", "Futura", "Avenir Next", sans-serif;
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.12;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid #d7e6ee;
  background: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-detail-timer-button {
  align-self: center;
}

.task-timer-play-button {
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  gap: 5px;
}

.task-timer-play-button:not(:disabled):hover {
  color: #fff;
  background: linear-gradient(135deg, var(--light-blue), var(--medium-blue));
  box-shadow: 0 10px 22px rgba(30, 81, 103, 0.24);
  transform: translateY(-1px);
}

.project-task-detail-fields {
  display: grid;
  align-items: start;
}

.project-task-detail-fields > label {
  color: #47677a;
  font-weight: 700;
  font-size: 13px;
}

.task-multi-select {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
}

.task-multi-select > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.task-multi-select > summary::-webkit-details-marker {
  display: none;
}

.task-multi-select-summary {
  color: var(--color-text);
  font-size: 14px;
}

.task-multi-select-count {
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.task-multi-select-dropdown {
  border-top: 1px solid var(--color-border);
  display: grid;
}

.task-multi-select-actions {
  display: flex;
  gap: 6px;
}

.task-multi-select-options {
  overflow: auto;
  display: grid;
  gap: 4px;
  padding-right: 2px;
}

.task-multi-select-option {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-multi-select-option input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
}

.task-multi-select-option span {
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.3;
}

.task-multi-select-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-multi-select-empty {
  color: var(--doc-leise);
  font-size: 12px;
}

.task-multi-select-hint {
  margin: 0;
}

.project-task-section {
  border-top: 1px solid #d7e6ee;
}

.project-task-section h4 {
  margin: 0 0 8px 0;
  color: #2b4f63;
}

/* Project task inline comment list */
.project-task-comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
  display: grid;
  gap: 8px;
}

.project-task-comment .comment-body {
  margin: 4px 0 0 0;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

[data-theme="dark"] .project-task-section { border-top-color: #243647; }
[data-theme="dark"] .project-task-section h4 { color: #b8d4e3; }
[data-theme="dark"] .project-task-comment { background: #1c2f3e; }

.project-task-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.project-task-check-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #dce9f1;
}

.project-task-check-toggle {
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.project-task-check-toggle .ci-icon-svg {
  width: 14px;
  height: 14px;
}

.project-task-subtask-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.project-task-bottom-facts {
  border-top: 1px solid #d7e6ee;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}

.project-task-fact {
  border-radius: 12px;
  border: 1px solid #e4edf2;
  display: grid;
}

.project-task-fact small {
  color: #6f8795;
  font-size: 12px;
}

.project-task-fact strong {
  color: #203e50;
  font-size: var(--kpi-value-size);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
}

.project-task-fact.danger {
  background: #fbeef4;
}

.project-task-fact.warn {
  background: #fdf4d8;
}

.project-task-fact.ok {
  background: #e4f5ee;
}

.project-task-detail-empty {
  padding: 16px;
}

.column-picker-wrap {
  position: relative;
}

.column-picker-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(340px, calc(100vw - 48px));
  max-height: 420px;
  padding: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.98);
  z-index: 20;
  display: grid;
  gap: 6px;
}

.column-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 7px 8px;
  color: #2b4a5a;
}

.column-picker-item.is-enabled {
  background: rgba(41, 123, 150, 0.12);
}

.column-picker-item input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.progress-inline {
  width: 110px;
  margin-bottom: 4px;
}

.project-dashboard {
  gap: 14px;
}

.project-home-awork {
  border: 1px solid #d6e7f0;
  background: linear-gradient(180deg, rgba(252, 255, 255, 0.97), rgba(242, 249, 254, 0.9));
  display: grid;
}

.project-home-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.project-home-status-chip:focus-visible {
  outline: 2px solid var(--medium-blue);
  outline-offset: 2px;
}

.project-home-quick-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.project-home-main {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: start;
}

.project-home-icon {
  width: 74px;
  height: 74px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #4f6fa4;
  background: #e7f0f8;
  border: 1px solid #d2e4f0;
}

.project-home-icon .ci-icon-svg {
  width: 36px;
  height: 36px;
}

.icon-only-button {
  min-width: 34px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-only-button .ci-icon-svg {
  width: 14px;
  height: 14px;
}

.project-home-main-content {
  display: grid;
}

.project-home-main-content h2 {
  margin: 0;
}

.project-home-meta-grid {
  display: grid;
  max-width: 740px;
}

.project-home-meta-row {
  display: grid;
  align-items: center;
}

.project-home-meta-label {
  color: #486879;
  font-size: 13px;
  font-weight: 700;
}

.project-home-meta-value {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: #193b50;
  font-weight: 700;
}

.project-home-tag-wrap .project-tag-pill {
  margin-right: 0;
}

.project-inline-link {
  border: 0;
  background: transparent;
  color: #2b65c9;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.project-inline-link:hover {
  text-decoration: underline;
}

.project-local-folder-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: min(100%, 620px);
  border: 1px solid rgba(44, 158, 201, 0.22);
  border-radius: 999px;
  background: rgba(44, 158, 201, 0.08);
  color: #1e5167;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 11px;
  text-align: left;
}

.project-local-folder-link .ci-icon-svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.project-local-folder-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-local-folder-link:hover {
  background: rgba(44, 158, 201, 0.14);
  border-color: rgba(44, 158, 201, 0.38);
}

.settings-local-folder-link {
  justify-self: flex-start;
}

.project-home-description {
  border-top: 1px solid #d8e8f2;
  border-bottom: 1px solid #d8e8f2;
  color: #355364;
  min-height: 68px;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  cursor: pointer;
  transition: background 0.12s;
  border-radius: 6px;
  position: relative;
}

.project-home-description:hover {
  background: rgba(44, 158, 201, 0.05);
}

.project-home-description::after {
  content: "✎";
  font-size: 11px;
  color: #8aaab9;
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  transition: opacity 0.12s;
}

.project-home-description:hover::after {
  opacity: 1;
}

.project-home-description.is-empty {
  color: #8aaab9;
  font-style: italic;
}

.project-home-desc-edit {
  border-top: 1px solid #d8e8f2;
  border-bottom: 1px solid #d8e8f2;
  padding: 8px 10px 10px;
}

.project-home-desc-textarea {
  width: 100%;
  min-height: 90px;
  border: 1px solid var(--color-primary, #2c9ec9);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.65;
  color: #355364;
  background: #fff;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 158, 201, 0.12);
  font-family: inherit;
}

.project-home-desc-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.project-home-awork .project-settings-section {
  margin-top: -4px;
}

.project-home-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-home-kpi-card {
  display: grid;
}

.project-home-kpi-card .progress-inline {
  width: 100%;
  margin: 2px 0 0 0;
}

.project-home-kpi-card.is-deadline {
  background: #faecf3;
}

.project-home-kpi-card.is-budget {
  background: #f0ebf9;
}

.project-home-kpi-card.is-tracked {
  background: #e4f5ee;
}

.project-home-kpi-card.is-progress {
  background: #eaf1fb;
}

.project-home-kpi-label {
  margin: 0;
}

.project-home-kpi-value {
  margin: 2px 0 0 0;
}

.project-home-kpi-sub {
  margin: 0;
  color: #5a7382;
  font-size: 12px;
  font-weight: 700;
}

.project-home-team-strip {
  border-top: 1px solid #d8e8f2;
  display: grid;
}

.project-home-member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.project-home-member-chip .avatar-mini {
  width: 26px;
  height: 26px;
}

.project-home-activity {
  border: 1px solid #d6e7f0;
  border-radius: 14px;
  background: rgba(252, 255, 255, 0.9);
}

.project-settings-section {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(248, 252, 255, 0.85);
  padding: 10px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
}

.settings-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-row-left input[type="text"],
.settings-row-right input[type="text"] {
  min-width: 170px;
}

.settings-row-right input[type="color"] {
  width: 42px;
  min-width: 42px;
  height: 34px;
  padding: 2px;
}

.settings-status-button {
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #25495a;
  font-weight: 700;
}

select[data-user-multi-select] {
  min-height: 132px;
}

select[data-user-multi-select] option {
  border-radius: 8px;
  margin: 3px 0;
  padding: 8px 10px;
}

select[data-user-multi-select] option:checked {
  background: linear-gradient(90deg, var(--dark-blue), var(--medium-blue));
  color: #fff;
  font-weight: 700;
}

.activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.activity-item {
  justify-content: space-between;
}

.activity-item > div {
  display: grid;
  gap: 4px;
}

.activity-item time {
  white-space: nowrap;
}

.activity-change-details {
  display: inline-grid;
  justify-items: start;
  max-width: 100%;
  margin-top: 2px;
  vertical-align: middle;
}

.activity-change-details > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--medium-blue);
  background: var(--color-surface);
  cursor: pointer;
  list-style: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

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

.activity-change-details > summary:hover,
.activity-change-details > summary:focus-visible,
.activity-change-details[open] > summary {
  border-color: var(--medium-blue);
  color: var(--dark-blue);
  background: var(--color-surface-soft);
  outline: none;
}

.activity-change-panel {
  width: min(560px, calc(100vw - 96px));
  max-width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.activity-change-title {
  margin-bottom: 8px;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
}

.activity-change-unavailable-text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.activity-change-row + .activity-change-row {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--color-border);
}

.activity-change-field {
  margin-bottom: 4px;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
}

.activity-change-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.activity-change-before,
.activity-change-after {
  min-width: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--color-surface-soft);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
  white-space: pre-wrap;
}

.activity-change-before > span,
.activity-change-after > span {
  display: block;
  margin-bottom: 2px;
  color: var(--color-text-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.activity-change-arrow {
  color: var(--color-text-muted);
  font-weight: 700;
}

.activity-change-row.is-deleted .activity-change-after {
  color: var(--color-danger, #a12b3a);
  background: rgba(161, 43, 58, 0.08);
}

.activity-change-row.is-added .activity-change-after {
  color: var(--color-success, #167a5a);
  background: rgba(22, 122, 90, 0.08);
}

@media (max-width: 620px) {
  .activity-change-panel {
    width: min(420px, calc(100vw - 64px));
  }

  .activity-change-values {
    grid-template-columns: 1fr;
  }

  .activity-change-arrow {
    display: none;
  }
}

.panel {
  border: 1px solid rgba(255, 255, 255, 0.94);
  background: var(--color-surface);
}

.panel h2,
.panel h3 {
  margin: 0;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header:has(#dashboardActivityScope) h2,
.panel-header:has(#projectActivityFilterSelect) h3 {
  white-space: nowrap;
  flex: 0 0 auto;
}

#dashboardActivityScope,
#projectActivityFilterSelect {
  width: auto;
  min-width: 132px;
  max-width: 180px;
  flex: 0 0 auto;
}

.toolbar-inline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.toolbar-inline input {
  min-width: 240px;
}

.export-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: var(--space-2) 0;
}

.export-controls select {
  min-width: 170px;
}

.panel-header .export-controls {
  margin: 0;
}

.management-shell {
  display: grid;
}

.management-toolbar {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.management-toolbar > input[type="search"] {
  min-width: 240px;
  flex: 1;
}

.management-toolbar > select {
  min-width: 190px;
}

.customer-list-panel {
  position: relative;
  z-index: 3;
}

#customerSearchInput {
  position: relative;
  z-index: 7;
}

.management-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.management-row-main {
  display: grid;
  min-width: 0;
}

.management-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.management-row-title > div {
  min-width: 0;
}

.management-row-title strong,
.management-row-title .muted {
  display: block;
  overflow-wrap: anywhere;
}

.user-overview-toolbar {
  grid-template-columns: minmax(220px, 1.2fr) minmax(170px, 0.7fr) minmax(170px, 0.7fr) auto;
}

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

.user-overview-row {
  cursor: pointer;
}

.user-overview-row.is-selected {
  border-color: rgba(41, 123, 150, 0.45);
  box-shadow: inset 3px 0 0 var(--medium-blue);
}

.management-shell.is-user-detail-mode .user-overview-panel {
  display: none;
}

.management-shell:not(.is-user-detail-mode) .user-detail-panel {
  display: none;
}

.user-detail-panel {
  display: grid;
  gap: 18px;
}

.user-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.user-detail-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.user-detail-identity .avatar-mini {
  width: 42px;
  height: 42px;
  font-size: 13px;
}

.user-detail-identity h2 {
  margin: 0;
}

.user-detail-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  overflow-x: auto;
  scrollbar-width: thin;
}

.user-detail-tabs .project-inner-link {
  flex: 0 0 auto;
  min-width: max-content;
}

.user-detail-form {
  gap: 16px;
}

.user-detail-tab-pane {
  display: none;
}

.user-detail-tab-pane.is-active {
  display: grid;
  gap: 14px;
}

.user-detail-tab-pane .management-row {
  cursor: pointer;
}

.user-detail-panel .project-fact-value {
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.12;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.work-schedule-editor .toolbar-inline {
  flex-wrap: wrap;
}

.ai-budget-status {
  --ai-budget-color: #2d7a5d;
  display: grid;
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid #cfe0e8;
  border-radius: 11px;
  background: rgba(244, 250, 252, 0.9);
}

.ai-budget-status.is-warning {
  --ai-budget-color: #a56600;
  border-color: #edcc91;
  background: #fff9ed;
}

.ai-budget-status.is-reached,
.ai-budget-status.is-disabled {
  --ai-budget-color: #b23b3b;
  border-color: #edb5b5;
  background: #fff5f5;
}

.ai-budget-status-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}

.ai-budget-status-head span,
.ai-budget-status-detail {
  color: #58717e;
  font-size: 0.9rem;
}

.ai-budget-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce9ee;
}

.ai-budget-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--ai-budget-color);
  transition: width 180ms ease;
}

/* KI-Kosten sichtbar (Beschluss Jasmin 30.09.2026, KO-UNIVERSUM.md): Preis +
   (i) mit Budget-Balken neben jedem KI-Knopf/-Feld. */
.ki-kosten-hinweis {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #58717e;
}

.ai-agent-cost-row {
  display: flex;
  justify-content: flex-end;
  padding: 2px 10px 6px;
}

.ki-kosten-info {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ki-kosten-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #cfe0e8;
  background: #f4fafc;
  color: #58717e;
  font-size: 0.68rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  cursor: help;
  padding: 0;
}

.ki-kosten-info-btn:hover,
.ki-kosten-info-btn:focus-visible {
  border-color: #297b96;
  color: #297b96;
}

.ki-kosten-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 220px;
  background: #1e3742;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(9, 50, 65, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 20;
  text-align: left;
}

.ki-kosten-popover-label {
  display: block;
  font-weight: 600;
}

.ki-kosten-popover .ai-budget-progress {
  margin-top: 6px;
  height: 6px;
}

.ki-kosten-popover-detail {
  display: block;
  margin-top: 4px;
  opacity: 0.9;
}

.ki-kosten-info-btn:hover + .ki-kosten-popover,
.ki-kosten-info-btn:focus-visible + .ki-kosten-popover {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* KI-Audit-Log-Betrachter (Einstellungen, nur Admins) */
.ai-audit-log-table-wrap {
  overflow-x: auto;
}
.ai-audit-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ai-audit-log-table th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  color: var(--color-text-muted, #51626e);
  font-weight: 600;
  white-space: nowrap;
}
.ai-audit-log-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  white-space: nowrap;
}
.ai-audit-log-table tr.is-blocked td {
  background: color-mix(in srgb, #dc2626 6%, transparent);
}
[data-theme="dark"] .ai-audit-log-table th,
[data-theme="dark"] .ai-audit-log-table td {
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .ai-audit-log-table tr.is-blocked td {
  background: rgba(220, 38, 38, 0.12);
}

/* Kleine, admin-only Budget-Anzeige im Dashboard-Kopf */
.ai-budget-mini-badge {
  border: 1px solid #cfe0e8;
  background: rgba(244, 250, 252, 0.9);
  color: #2d7a5d;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.ai-budget-mini-badge.is-warning {
  border-color: #edcc91;
  background: #fff9ed;
  color: #a56600;
}
.ai-budget-mini-badge.is-reached {
  border-color: #f3b0ab;
  background: #fff2f1;
  color: #b3261e;
}
[data-theme="dark"] .ai-budget-mini-badge {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #6ee7b7;
}
[data-theme="dark"] .ai-budget-mini-badge.is-warning { color: #fbbf24; }
[data-theme="dark"] .ai-budget-mini-badge.is-reached { color: #fca5a5; }

/* Lead-Pipeline-Card: responsive Grids statt starrer 1fr-1fr-Inline-Styles.
   auto-fit + minmax kollabiert auf schmalen Viewports automatisch auf
   1 Spalte — kein Media-Query nötig, keine abgeschnittenen Felder. */
.lead-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.lead-add-integration-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  align-items: end;
}

.lead-secret-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.lead-secret-row input {
  flex: 1 1 220px;
  min-width: 0;
  font-family: monospace;
}

.lead-integration-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.02);
}
@media (max-width: 560px) {
  .lead-integration-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-auto-flow: row;
  }
  .lead-integration-row [data-lead-copy-url],
  .lead-integration-row [data-lead-delete-integration] {
    grid-column: span 1;
  }
}

.lead-actions-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  flex-wrap: wrap;
}

/* Integration-Card mit aufklappbaren Details (Meta-Credentials, Mapping,
   Payload-Vorschau). details/summary nativ — kein JS-State nötig. */
.lead-integration-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.lead-integration-card .lead-integration-row {
  border: none;
  border-radius: 0;
}
.lead-integration-details {
  border-top: 1px dashed var(--border);
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.015);
}
.lead-integration-details summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  user-select: none;
}
.lead-integration-details h5 {
  margin: 0 0 6px;
  font-size: 12px;
}
.lead-meta-credentials {
  border: 1px solid rgba(41, 123, 150, 0.25);
  border-radius: 8px;
  padding: 10px;
  background: rgba(41, 123, 150, 0.05);
  margin-top: 8px;
}

.lead-meta-assistant {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-top: 8px;
}
.lead-assistant-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.5;
}
.lead-diagnose-panel {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lead-diagnose-row {
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}
.lead-diagnose-row:first-of-type {
  border-top: none;
  padding-top: 0;
}
.lead-diagnose-status {
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
}
.lead-diagnose-status.is-ok { color: var(--ok); }
.lead-diagnose-status.is-missing { color: var(--warn); }
.lead-diagnose-status.is-unknown { color: var(--muted-text, var(--warn)); }

.lead-mapping-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px;
}
.lead-mapping-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.lead-mapping-row code {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lead-mapping-row input {
  font-family: monospace;
  font-size: 11px;
  padding: 4px 8px;
}

.lead-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.lead-preview-table td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.lead-preview-table td:first-child {
  width: 160px;
  white-space: nowrap;
}
.lead-preview-missing td {
  color: var(--c-text-muted, #888);
}
.lead-preview-missing td:first-child code {
  color: #8a5f00;
}
.lead-preview-raw {
  max-height: 220px;
  overflow: auto;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  padding: 8px;
  margin-top: 4px;
}

.settings-card h3 {
  margin: 0;
  color: #24465a;
}

.settings-card > .split,
.settings-card > label.stack,
.settings-card > .toolbar-inline,
.settings-card > .switch,
.settings-card > p {
  max-width: 980px;
}

.settings-warning {
  font-size: 13px;
}

.settings-warning ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.settings-admin-shell {
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.settings-admin-nav {
  position: sticky;
  top: var(--space-4);
  max-height: calc(100vh - 48px);
  overflow: auto;
}

/* v519: Mobile-Layout für Settings — Sidebar wird oben über Content gestapelt */
@media (max-width: 820px) {
  .settings-admin-shell {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .settings-admin-nav {
    position: static;
    max-height: none;
    overflow: visible;
  }
  /* Nav-Gruppen werden zu horizontal scrollenden Chip-Reihen */
  .settings-nav-list button {
    font-size: 13px;
  }
}

.settings-nav-list {
  display: grid;
  gap: 6px;
}

.settings-nav-list button {
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--dark-blue);
  cursor: pointer;
  font-weight: 700;
  min-height: 40px;
  padding: 9px 12px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.settings-nav-list button:hover,
.settings-nav-list button.is-active {
  background: rgba(41, 123, 150, 0.12);
  border-color: rgba(41, 123, 150, 0.24);
  color: var(--medium-blue);
}

.settings-admin-content {
  min-width: 0;
  max-width: 1180px;
}

.settings-admin-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.settings-section-pane {
  display: none;
}

.settings-section-pane.is-active {
  display: grid;
  gap: 16px;
}

.settings-overview-grid {
  display: grid;
  gap: 12px;
}

.settings-overview-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(249, 253, 255, 0.92);
  cursor: pointer;
  min-height: 132px;
  text-align: left;
}

.settings-overview-card:hover {
  border-color: rgba(41, 123, 150, 0.35);
  box-shadow: 0 12px 30px rgba(30, 81, 103, 0.08);
}

.settings-overview-title {
  color: var(--dark-blue);
  font-size: 16px;
}

.time-report-name-input {
  min-width: 320px;
  flex: 1;
}

.time-report-round15-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-grey);
  white-space: nowrap;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: background 0.15s;
}

.time-report-round15-label:has(input:checked) {
  background: rgba(39, 145, 181, 0.1);
  border-color: var(--medium-blue);
  color: var(--medium-blue);
}

.time-report-round15-label input[type="checkbox"] {
  min-height: unset;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  padding: 0;
  accent-color: var(--medium-blue);
}

.task-form {
  margin-bottom: 12px;
  display: grid;
  gap: 8px;
}

.task-form-title-row {
  display: flex;
  align-items: center;
}

.task-form-title-row input {
  flex: 1;
  min-width: 0;
}

.task-form-title-row select {
  flex-shrink: 0;
  max-width: 180px;
}

/* Aufgaben-Toolbar — v180: kompaktere Version */
.task-toolbar {
  padding: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#view-aufgaben > .task-layout > .panel {
  display: flex;
  flex-direction: column;
}

#view-aufgaben .task-toolbar {
  order: 0;
}

#view-aufgaben #bulkActionToolbar {
  order: 1;
}

#view-aufgaben #taskColumns {
  order: 2;
  display: block;
  grid-template-columns: none;
  width: 100%;
}

#view-aufgaben #taskForm {
  order: 3;
  margin-top: 18px;
}

#view-aufgaben .inbox-panel {
  order: 4;
  margin-top: 14px;
}

#view-aufgaben #taskForm,
#view-aufgaben .inbox-panel {
  display: none;
}

.task-toolbar-primary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.task-search-input {
  flex: 1 1 180px;
  min-width: 120px;
  max-width: 260px;
}

.task-toolbar-secondary {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

/* v187: Aufgaben-Toolbar — alles in einer Zeile */
#view-aufgaben .task-toolbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  padding: 2px 0 6px !important;
}
#view-aufgaben .task-toolbar-primary {
  display: flex;
  flex: 1;
  min-width: 0;
}
#view-aufgaben .task-quick-filters {
  scrollbar-width: none;
}
#view-aufgaben .task-quick-filters::-webkit-scrollbar { display: none; }
#view-aufgaben .task-search-input {
  padding: 4px 10px;
  font-size: 13px;
}
#view-aufgaben .task-toolbar-secondary.task-icon-toolbar {
  flex-shrink: 0;
  border-top: none !important;
  padding-top: 0 !important;
  gap: 4px;
}
#view-aufgaben .task-icon-toolbar {
  justify-content: flex-end;
  border-top: 0;
  padding-top: 0;
  gap: 4px;
}

.task-tool-popover {
  position: relative;
}

.task-icon-button {
  width: var(--button-height-md);
  height: var(--button-height-md);
  border: 0;
  background: rgba(218, 235, 245, 0.92);
  color: var(--dark-blue);
  display: inline-grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.task-icon-button:hover,
.task-icon-button.is-active,
.task-tool-popover.is-open > .task-icon-button {
  background: var(--medium-blue);
  color: #fff;
}

.task-tool-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 25;
  min-width: 220px;
  padding: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  display: grid;
  gap: 8px;
}

.task-tool-panel-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.task-tool-panel .toolbar-select-compact {
  width: 100%;
  height: 36px;
  font-size: 13px;
}

#view-aufgaben .column-picker-wrap {
  position: relative;
}

#view-aufgaben .task-icon-export.export-controls.is-compact-export {
  width: auto;
  max-width: max-content;
}

#view-aufgaben .task-icon-export.export-controls.is-compact-export .export-icon-button,
#view-aufgaben .task-icon-export .task-icon-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
}
#view-aufgaben .task-icon-toolbar .task-icon-button {
  width: 34px;
  height: 34px;
}

#view-aufgaben .task-icon-export.export-controls.is-compact-export.is-open,
#view-aufgaben .task-icon-export.export-controls.is-compact-export:focus-within {
  display: grid;
  grid-template-columns: minmax(170px, 220px) 38px;
  width: min(274px, calc(100vw - 48px));
  align-items: stretch;
}

#view-aufgaben .task-icon-export.export-controls.is-compact-export.is-open .export-menu-field,
#view-aufgaben .task-icon-export.export-controls.is-compact-export:focus-within .export-menu-field {
  grid-column: 1 / 2;
  flex: initial;
}

#view-aufgaben .task-icon-export.export-controls.is-compact-export.is-open .export-icon-button,
#view-aufgaben .task-icon-export.export-controls.is-compact-export:focus-within .export-icon-button {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  height: 100%;
}

.toolbar-select-compact {
  height: 30px;
}

.task-toolbar-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

/* Neue Aufgabe form people row */
.task-form-people-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

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

.task-column {
  border-radius: 12px;
  border: 1px dashed var(--line);
  background: rgba(235, 245, 251, 0.64);
  padding: 10px;
}

.task-column h3 {
  margin-bottom: 8px;
}

.task-column-count {
  font-size: 12px;
  font-weight: 400;
}

.task-stack {
  display: grid;
  gap: 12px;
}

.task-card {
  border-radius: 12px;
  border: 1px solid rgba(216, 228, 234, 0.7);
  background: var(--white);
  cursor: pointer;
  box-shadow: var(--shadow-card);
}

.task-card.blocked {
  opacity: 0.65;
  border-style: dashed;
}

/* Priority accent: left border on board cards */
.task-card.high { border-left: 3px solid var(--terracotta); }
.task-card.warn { border-left: 3px solid var(--gold); }
.task-card.ok   { border-left: 3px solid var(--color-border); }

/* Pinned task card highlight */
.task-card.is-pinned {
  box-shadow: 0 0 0 2px var(--color-accent, #3b82f6) inset;
}

/* Badge for pinned indicator in card header */
.badge-pinned {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent, #3b82f6);
  color: #fff;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 10px;
  flex-shrink: 0;
}

/* Pin toggle button on board card */
.task-pin-btn {
  opacity: 0.45;
  transition: opacity 0.15s, color 0.15s;
}
.task-pin-btn:hover,
.task-pin-btn.is-pinned {
  opacity: 1;
  color: var(--color-accent, #3b82f6);
}

.subtask-progress-bar {
  margin: 6px 0 4px;
}

.subtask-progress-fill {
  height: 100%;
  background: var(--color-success);
  transition: width 0.3s;
}

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

.task-title {
  margin: 0;
}

.task-meta {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.badge-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #c4e2f0;
  font-weight: 600;
}
.badge-filter button {
  cursor: pointer;
}
.badge-filter button:hover {
  color: var(--danger, #c0392b);
}

.badge.ok {
  /* v460: WCAG AA Contrast > 4.5:1 */
}

.assignee-row {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.avatar-mini {
  border-radius: 999px;
  place-items: center;
  background: #193342;
  color: #fff;
}

/* W8 — Profilbild in der Avatar-Blase. Gilt fuer JEDE Blase, egal welche
   Klasse sie sonst traegt: Das Bild fuellt den Kreis vollstaendig aus, wird
   mittig beschnitten und uebermalt die Hintergrundfarbe. Ohne Bild greift
   keine dieser Regeln — Emoji und Initialen bleiben unveraendert. */
.hat-profilbild {
  overflow: hidden;
  padding: 0;
  position: relative;
}

.hat-profilbild > .avatar-bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.avatar-mini.xs {
  width: var(--avatar-size-xs);
  height: var(--avatar-size-xs);
  font-size: 8px;
}

.avatar-mini.sm {
  width: var(--avatar-size-sm);
  height: var(--avatar-size-sm);
  font-size: 9px;
}

.task-card-actions {
  margin-top: 8px;
}

.task-card-actions button {
  flex: 1;
}

/* Status dot in list view */
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--dot-bg, #9bc8f8);
}

/* Priority flag in list view */
.priority-flag {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-right: 4px;
  vertical-align: middle;
}

.priority-flag.high { background: var(--terracotta); }
.priority-flag.warn { background: var(--gold); }
.priority-flag.ok   { background: var(--color-border); }

/* Hover actions in list rows */
.task-row-title-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.task-parent-sub-line {
  padding-left: 28px;
}

.task-row-hover-actions {
  opacity: 0;
  transition: opacity 0.15s;
  margin-left: 4px;
}

tr.task-card:hover .task-row-hover-actions,
.project-task-list-row:hover .task-row-hover-actions {
  opacity: 1;
}

.task-row-hover-actions button {
  min-height: 24px;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 6px;
  white-space: nowrap;
}

/* List-row hover actions — inline flex, right-aligned, hidden until hover */
.project-task-list-row .task-row-hover-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: 4px;
}

.task-row-ha-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 5px;
  color: var(--text-muted, #888);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.task-row-ha-btn:hover {
  background: var(--surface-2, #f0f0f0);
  color: var(--text, #222);
}
.task-row-ha-btn.is-pinned {
  color: var(--color-accent, #3b82f6);
}
.task-row-ha-btn.is-danger:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* Deadline badge variants */
.badge.deadline-today {
  background: #ffeeed;
  color: #c85e44;
  font-weight: 700;
}

.badge.deadline-overdue {
  font-weight: 700;
}

.badge.deadline-soon {
  background: #fff8e6;
  color: #9a6700;
}

/* Board column add-task button */
.task-column-add {
  margin-top: 8px;
  width: 100%;
  border-radius: 8px;
  border: 1.5px dashed var(--line);
  background: transparent;
  color: var(--muted-blue);
  font-size: 13px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.task-column-add:hover {
  background: rgba(39, 145, 181, 0.07);
  border-color: var(--medium-blue);
  color: var(--medium-blue);
}

/* Time widget in task detail */
.time-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}

.time-tile {
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  font-size: 12px;
}

.time-tile-planned {
  background: #eef6fb;
  color: #2270a0;
}

.time-tile-tracked {
  background: #eefbf2;
  color: #1e7a46;
}

.time-tile-diff.positive {
  background: #fff8e6;
  color: #9a6700;
}

.time-tile-diff.negative {
  background: #ffeeed;
  color: #c85e44;
}

.time-tile strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}

.detail-panel {
  position: fixed;
  right: 0;
  top: 60px;
  height: calc(100vh - 60px);
  width: 440px;
  max-width: 100vw;
  transform: translateX(110%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 48;
  overflow-y: auto;
  display: block;
  background: var(--color-surface);
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.16);
  border-left: 1px solid var(--line);
  border-radius: 0;
  padding: 20px;
}

.detail-panel.is-open {
  transform: translateX(0);
}

/* Global task detail panel layout */
.task-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 0 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}

.task-detail-title-input {
  width: 100%;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.15;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 7px 10px;
  margin-bottom: 8px;
  background: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-detail-meta-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.task-detail-meta-row > * { flex: 1 1 0; min-width: 0; font-size: 0.82rem; }

.task-detail-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.task-detail-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}

.task-detail-field-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.task-detail-field-group select,
.task-detail-field-group input {
  font-size: 0.84rem;
  padding: 5px 8px;
  min-height: unset;
}

.task-detail-field-group .task-multi-select {
  font-size: 0.84rem;
}

.task-detail-field-group .task-multi-select > summary {
  padding: 5px 8px;
  min-height: unset;
}

input,
select,
textarea {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  width: 100%;
}

select,
input {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Checkbox / Radio reset */
input[type="checkbox"],
input[type="radio"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 16px;
  height: 16px;
  min-height: unset;
  padding: 0;
  border: none;
  background: initial;
  border-radius: 3px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--medium-blue, #2c9ec9);
  vertical-align: middle;
}

/* Toggle-Switch (settings labels) */
.switch {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
}
.switch input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: #c8d6df;
  transition: background 0.18s;
  flex-shrink: 0;
}
.switch input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 0.18s;
}
.switch input[type="checkbox"]:checked {
  background: var(--medium-blue, #2c9ec9);
}
.switch input[type="checkbox"]:checked::after {
  transform: translateX(14px);
}
.switch input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--medium-blue, #2c9ec9);
  outline-offset: 2px;
}

.primary-button,
.ghost-button {
  border: 0;
  min-height: var(--button-height-md);
  padding: 9px var(--button-padding-x);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.ghost-button.danger {
  color: #c0392b;
}

.ghost-button.danger:hover {
  background: rgba(192, 57, 43, 0.08);
}

.primary-button {
  background: var(--primary-gradient);
  box-shadow: 0 2px 8px rgba(41, 123, 150, 0.25);
}
.primary-button:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(41, 123, 150, 0.38);
  filter: brightness(0.94);
}
.primary-button:not(:disabled):active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(41, 123, 150, 0.2);
}

.ghost-button {
  color: var(--dark-blue);
  background: var(--color-primary-soft);
}

/* Pin button active state in detail topbar */
#pinTaskButton.is-active {
  color: var(--color-accent, #3b82f6);
  background: rgba(59, 130, 246, 0.12);
}

/* ── Read-only banner for done/archived tasks ──────────────────────── */
.task-done-readonly-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #f0fdf4;
  border-bottom: 1px solid #bbf7d0;
  color: #14705a;
  font-size: 12px;
  font-weight: 500;
}
.task-done-readonly-banner span { flex: 1; }
.task-done-readonly-banner button {
  flex-shrink: 0;
}

/* Read-only detail panel: freeze all form inputs */
#taskDetail.is-readonly .task-detail-body input,
#taskDetail.is-readonly .task-detail-body select,
#taskDetail.is-readonly .task-detail-body textarea,
#taskDetail.is-readonly .task-detail-body button:not(#reopenTaskButton) {
  pointer-events: none;
  opacity: 0.55;
  cursor: default;
}
#taskDetail.is-readonly .task-detail-body .task-assignee-row,
#taskDetail.is-readonly .task-detail-body .task-checklist-form,
#taskDetail.is-readonly .task-detail-body .task-subtask-add,
#taskDetail.is-readonly .task-detail-body [data-action],
#taskDetail.is-readonly .task-detail-body .task-detail-add-btn {
  pointer-events: none;
  opacity: 0.55;
}

/* Read-only for project inline detail panel (board done column) */
.project-task-detail-panel.is-readonly input,
.project-task-detail-panel.is-readonly select,
.project-task-detail-panel.is-readonly textarea,
.project-task-detail-panel.is-readonly button:not([data-project-task-detail-reopen]):not([data-project-task-detail-close]):not([data-project-task-detail-open-global]) {
  pointer-events: none;
  opacity: 0.55;
  cursor: default;
}

.ghost-button.tiny.danger {
  max-width: 112px;
  border: 1px solid rgba(168, 61, 80, 0.20);
  background: rgba(168, 61, 80, 0.06);
  color: var(--color-danger);
  font-weight: 800;
}

.ghost-button.tiny.danger:hover {
  border-color: rgba(168, 61, 80, 0.36);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.ghost-button.sm,
.primary-button.sm {
  min-height: var(--button-height-sm);
  padding: 6px 10px;
  border-radius: var(--button-radius-sm);
  font-size: var(--button-font-sm);
}

.ghost-button.md,
.primary-button.md {
  min-height: var(--button-height-md);
  padding: 9px 12px;
  border-radius: var(--button-radius);
  font-size: var(--button-font-md);
}


button:disabled {
  box-shadow: none;
}

.primary-button:disabled,
.ghost-button:disabled {
  color: #6a7f8b;
  background: #dbe6ec;
}

.panel-subtle {
  border: 1px dashed var(--line);
  background: rgba(246, 251, 255, 0.78);
}

.split {
  display: flex;
}

.split > * {
  flex: 1;
}

.split-2 {
  display: grid;
}

.split-3 {
  display: grid;
}

.task-custom-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.simple-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.doc-title-button {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
}

.doc-title-button:hover {
  color: var(--medium-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.file-list-item {
  cursor: pointer;
}

.file-ext-badge {
  background: #e4f2fb;
  color: var(--medium-blue);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.doc-item-actions {
  margin-top: 6px;
}

.doc-item-actions .ghost-button.danger {
  margin-left: auto;
  border: 1px solid rgba(176, 52, 76, 0.28);
  background: transparent;
  color: var(--color-danger, #b0344c);
  box-shadow: none;
}

.doc-item-actions .ghost-button.danger:hover {
  background: var(--color-danger-soft, rgba(176, 52, 76, 0.08));
  color: var(--color-danger, #b0344c);
}

.inbox-item {
  justify-content: space-between;
}

.inbox-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inbox-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inbox-select input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.inbox-panel .split > * {
  min-width: 0;
}

.inbox-item-preview {
  align-items: flex-start;
}

.calendar-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.cal-type-chip {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-text-muted);
  opacity: 0.65;
  transition: opacity 140ms, background 140ms, border-color 140ms;
}
.cal-type-chip:hover {
  opacity: 0.9;
}
.cal-type-chip.is-active {
  opacity: 1;
  background: var(--color-primary-soft);
  border-color: var(--medium-blue);
  color: var(--dark-blue);
  font-weight: 600;
}

.calendar-chip .chip-icon {
  flex-shrink: 0;
}

.checklist-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* v341: Kompakte Checklisten-Personen-Zuweisung */
.checklist-assignee-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  padding-left: 24px; /* unter Checkbox einrücken */
}
.checklist-assignee-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  background: var(--c-primary-soft, rgba(30,81,103,0.08));
  color: var(--c-primary, #1e5167);
  padding: 2px 9px;
  border-radius: 999px;
}
.checklist-assign-add {
  font-size: 11px;
  color: var(--c-text-muted, #64748b);
  padding: 2px 8px;
}
.checklist-assign-edit {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--c-text-muted, #64748b);
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 4px;
  line-height: 1;
}
.checklist-assign-edit:hover {
  background: var(--c-surface-2, #f1f5f9);
  color: var(--c-primary, #1e5167);
}
.checklist-assignee-picker {
  margin: 6px 0 2px 24px;
  padding: 8px;
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 8px;
  background: var(--c-surface, #fff);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 2px 12px;
  box-shadow: var(--sh-1, 0 1px 2px rgba(0,0,0,.05));
}
.checklist-assignee-picker.hidden { display: none; }
.checklist-picker-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 4px;
  border-radius: 4px;
  cursor: pointer;
}
.checklist-picker-item:hover { background: var(--c-surface-2, #f1f5f9); }
.checklist-picker-item input { margin: 0; }
.checklist-add-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.checklist-add-form #checklistInput { flex: 1; min-width: 0; }

.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.task-doc-preview {
  min-height: 210px;
}

.task-activity-list li {
  justify-content: space-between;
}

.attachment-chip button {
  border: 0;
  background: transparent;
  color: #3f5f70;
  cursor: pointer;
  padding: 0;
}

.comment-composer-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.comment-emoji-row .ghost-button {
  padding: 8px 10px;
}

.reaction-insert-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.reaction-insert-btn .ci-icon-svg {
  width: 15px;
  height: 15px;
}

.task-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-filter-chip.is-active {
  box-shadow: none;
}

.warning-item {
  cursor: pointer;
}

.comment-attachments {
  margin-top: 8px;
  display: grid;
}

.comment-attachment {
  width: fit-content;
}

.comment-attachment img {
  max-width: 240px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.comment-meta .comment-delete-btn {
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s;
}
li:hover .comment-delete-btn,
.comment-delete-btn:focus {
  opacity: 1;
}

.comment-reactions {
  margin-top: 8px;
}

/* ───────── Umfragen / Abstimmungen in Kommentaren ───────────────────────── */
.comment-poll {
  margin: 8px 0 4px;
  border: 1px solid var(--border, #d9e8f0);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(41, 123, 150, 0.05);
}
.comment-poll.is-closed { opacity: 0.85; }
.poll-question {
  font-weight: 600;
  font-size: var(--fz-14, 14px);
  margin-bottom: 8px;
}
.poll-closed-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #7a8a93);
  border: 1px solid var(--border, #d9e8f0);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 4px;
}
.poll-options { display: flex; flex-direction: column; gap: 6px; }
.poll-option {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border, #d9e8f0);
  border-radius: 9px;
  background: var(--surface, #fff);
  padding: 8px 10px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.poll-option:hover:not([disabled]) { border-color: rgba(41, 123, 150, 0.55); }
.poll-option[disabled] { cursor: default; }
.poll-option.is-mine {
  border-color: rgba(41, 123, 150, 0.8);
  background: rgba(41, 123, 150, 0.08);
}
.poll-option-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(41, 123, 150, 0.16);
  z-index: 0;
  transition: width 240ms ease;
}
.poll-option.is-mine .poll-option-bar { background: rgba(41, 123, 150, 0.26); }
.poll-option-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.poll-option-label { font-size: var(--fz-13, 13px); font-weight: 500; }
.poll-option.is-mine .poll-option-label { font-weight: 700; }
.poll-option-count {
  font-size: 12px;
  color: var(--text-muted, #7a8a93);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.poll-voters {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 6px;
}
.poll-voter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(41, 123, 150, 0.85);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  cursor: default;
}
.poll-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.poll-total { font-size: 11px; color: var(--text-muted, #7a8a93); }

/* Composer */
.poll-composer {
  margin-top: 8px;
  border: 1px dashed var(--border, #d9e8f0);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(41, 123, 150, 0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.poll-composer-title { font-weight: 600; font-size: var(--fz-13, 13px); }
.poll-composer-q,
.poll-composer-opt {
  width: 100%;
  border: 1px solid var(--border, #d9e8f0);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: var(--fz-13, 13px);
}
.poll-composer-opts { display: flex; flex-direction: column; gap: 6px; }
.poll-composer-multi {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, #7a8a93);
}

.comment-reactions button {
  cursor: pointer;
}

.comment-reaction-button .ci-icon-svg {
  width: 14px;
  height: 14px;
}

.notification-drawer {
  position: fixed;
  right: 8px;
  width: min(560px, calc(100vw - 16px));
  padding: 0;
  flex-direction: column;
}

.drawer-actions {
  justify-content: flex-start;
  min-width: 0;
}

.notification-drawer > .panel-header {
  margin: 0;
}

.notification-drawer > .panel-header h2 {
  margin: 0;
}

.notification-drawer .drawer-actions button {
  flex: 0 1 auto;
  line-height: 1.15;
  padding: 8px 10px;
}

.notification-drawer > .simple-list {
  flex: 1;
}

.notification-item.is-read {
  opacity: 0.88;
}

.notification-item-actions {
  margin-top: 8px;
}

.workday-midnight-prompt {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(14, 31, 40, 0.34);
  display: grid;
  place-items: center;
  padding: 14px;
}

.workday-midnight-card {
  width: min(620px, 100%);
  padding: 18px;
  display: grid;
  gap: 10px;
}

.workday-midnight-card h3 {
  margin: 0;
  color: #1e5167;
}

.workday-midnight-card p {
  margin: 0;
}

.calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
}

.calendar-user-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 32px;
}

.cal-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  opacity: 0.55;
}

.cal-user-chip:hover {
  opacity: 0.85;
}

.cal-user-chip.is-active {
  opacity: 1;
  font-weight: 600;
}

.cal-user-chip .avatar-mini {
  width: 18px;
  height: 18px;
  font-size: 9px;
  line-height: 18px;
}

.calendar-grid {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: auto;
  background: rgba(255, 255, 255, 0.8);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 840px;
  border-bottom: 1px solid var(--line);
  background: rgba(41, 123, 150, 0.08);
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 840px;
}

.calendar-day {
  min-height: 120px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
}

.calendar-day:nth-child(7n) {
  border-right: 0;
}

.calendar-day.is-muted {
  background: rgba(240, 246, 251, 0.65);
  color: #7892a0;
}

.calendar-day header {
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.calendar-blocked-dot {
  border-radius: 999px;
}

/* v516: Kleine KW-Markierung neben Tageszahl (nur Montag) */
.calendar-kw-badge {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-text-muted, #51626e);
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 5px;
  border-radius: 999px;
  margin-left: 4px;
  white-space: nowrap;
  align-self: center;
  line-height: 1.2;
}
.calendar-day.is-muted .calendar-kw-badge { opacity: 0.55; }
[data-theme="dark"] .calendar-kw-badge {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
}

/* v517: Source-Badge im Task-Detail (TaskUlf, WhatsApp, …) */
.task-source-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 8px;
}
.task-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(41, 123, 150, 0.08);
  color: var(--c-primary, #297b96);
  font-size: 11px;
  font-weight: 600;
  cursor: help;
  line-height: 1.4;
}
.task-source-badge-icon { font-size: 12px; line-height: 1; }
.task-source-badge-link {
  font-size: 11px;
  color: var(--c-text-muted, #51626e);
  text-decoration: none;
}
.task-source-badge-link:hover { color: var(--c-primary, #297b96); }
[data-theme="dark"] .task-source-badge {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}

/* v517: Universal-Task-Modal Description-Row + Source-Hint */
.utf-description-row textarea {
  width: 100%;
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-control);
}
.utf-source-hint {
  font-size: 12px;
  color: var(--c-text-muted, #51626e);
  background: rgba(41, 123, 150, 0.06);
  padding: 7px 10px;
  border-radius: 8px;
  border-left: 3px solid var(--c-primary, #297b96);
}
[data-theme="dark"] .utf-source-hint {
  background: rgba(255, 255, 255, 0.04);
}

/* v517: Settings-Nav Gruppen */
.settings-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}
.settings-nav-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted, #51626e);
  margin: 8px 8px 4px;
  padding: 0;
}
/* Settings-CTA-Row für Mitarbeiter-Verwalten-Button etc. */
.settings-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(41, 123, 150, 0.05);
  border-radius: 8px;
  border-left: 3px solid var(--c-primary, #297b96);
}
.settings-cta-row .muted.small { font-size: 12px; max-width: 60ch; }
[data-theme="dark"] .settings-cta-row {
  background: rgba(255, 255, 255, 0.03);
}

/* v519: Mitarbeiter-Picker-Modal */
.member-picker-card {
  width: 540px;
  max-width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.member-picker-body {
  padding: 16px 18px 18px;
  overflow: auto;
}
.member-picker-body input[type="search"] {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--c-border);
  font-size: 14px;
}
.member-picker-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.member-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.member-picker-row:hover {
  background: rgba(41, 123, 150, 0.08);
  border-color: rgba(41, 123, 150, 0.18);
}
.member-picker-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: white;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.member-picker-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.member-picker-meta strong { font-size: 14px; }
.member-picker-meta .small { font-size: 11px; }
[data-theme="dark"] .member-picker-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* v520: Customer-Detail-Modal mit Tabs */
.customer-detail-modal-card {
  width: 780px;
  max-width: 95vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.customer-detail-tabs {
  padding: 0 18px;
  border-bottom: 1px solid var(--c-border);
  flex-wrap: wrap;
}
.customer-detail-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--c-text-muted, #51626e);
  border-radius: 0;
  transition: color 0.15s, border-color 0.15s;
}
.customer-detail-tab:hover { color: var(--c-text); }
.customer-detail-tab.is-active {
  color: var(--c-primary, #297b96);
  border-bottom-color: var(--c-primary, #297b96);
}
.customer-detail-body {
  padding: 18px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.customer-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 700px) {
  .customer-detail-grid { grid-template-columns: 1fr; }
}
.cdm-list-row {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--c-surface, #fff);
}
.cdm-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cdm-row-grid-3 {
  grid-template-columns: 2fr 1fr 1fr;
}
@media (max-width: 600px) {
  .cdm-row-grid, .cdm-row-grid-3 { grid-template-columns: 1fr; }
}
.cdm-row-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/* JAS-192 CRM-3: Ansicht „Leads“ (features/crm-leads.js). */
.crm-leads-filter,
.crm-leads-auswahl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.crm-leads-auswahl select {
  flex: 0 1 260px;
  width: auto;
}
.crm-leads-filter .ghost-button.is-active {
  background: var(--color-primary-soft, rgba(44, 158, 201, 0.14));
}
.crm-leads-detail {
  margin: 12px 0;
}
.crm-leads-personen {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 8px 0;
}
.crm-leads-personen div {
  display: contents;
}
.crm-leads-personen dt {
  color: var(--color-text-muted);
}
.crm-leads-personen dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.crm-leads-zustand {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.crm-leads-zustand label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.crm-leads-zustand label.hidden {
  display: none !important;
}
.crm-leads-fehler {
  color: var(--color-danger);
}
.crm-leads-hinweis {
  border-left: 3px solid var(--color-warning, #d08b1f);
  padding: 4px 12px;
  margin: 8px 0;
}
/* JAS-192 CRM-1: Werbesperre am Ansprechpartner (features/crm-werbesperre.js). */
.cdm-row-actions:has(.crm-werbesperre) {
  flex-wrap: wrap;
  gap: 8px;
}
.cdm-row-actions .crm-werbesperre {
  display: inline-flex;
  flex: 1 1 260px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cdm-row-actions .crm-werbesperre ~ * { flex-shrink: 0; }
.crm-werbesperre .badge svg { vertical-align: -1px; }
.crm-werbesperre-formular {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}
.crm-report-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0 2px 26px;
}
/* Inline-Checkliste ist ein Raster (Knopf, Text, Entfernen): Knöpfe in Zeile 2 unter den Text. */
.project-task-check-row .crm-report-zeile { grid-column: 2; grid-row: 2; margin: 0; }
.crm-wiederansprache { margin-top: 16px; }
.cdm-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--c-border);
}
[data-theme="dark"] .cdm-list-row {
  background: rgba(255, 255, 255, 0.03);
}

/* v522: Projekt-Termine unter Gantt */
.project-appt-section {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
}
.project-appt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 12px;
}
.project-appt-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.project-appt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.project-appt-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}
.project-appt-row:hover { background: rgba(41, 123, 150, 0.04); }
.appt-source-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.appt-source-tag.is-koshot {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}
.appt-source-tag.is-customer {
  background: rgba(168, 85, 247, 0.10);
  color: #6b21a8;
}
.appt-source-tag.is-kowork {
  background: rgba(41, 123, 150, 0.10);
  color: var(--c-primary, #297b96);
}
.project-appt-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  background: var(--c-surface-2, #f4f6f8);
  border-radius: 8px;
}
.project-appt-add-form input,
.project-appt-add-form select {
  padding: 6px 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-size: 13px;
}
.appt-form-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 8px;
}
@media (max-width: 600px) {
  .appt-form-row { grid-template-columns: 1fr; }
  .project-appt-table { font-size: 12px; }
  .appt-location { display: none; }
}
.appt-form-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
[data-theme="dark"] .project-appt-add-form {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .appt-source-tag.is-koshot { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
[data-theme="dark"] .appt-source-tag.is-customer { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; }
[data-theme="dark"] .appt-source-tag.is-kowork { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); }

/* v525: Lohnhistorie Auto-Umrechnung */
.salary-auto-hint {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--c-text-muted, #51626e);
  font-style: italic;
}
input.is-auto-calc {
  background: rgba(41, 123, 150, 0.06);
  border-color: rgba(41, 123, 150, 0.4);
  font-style: italic;
  color: var(--c-primary, #297b96);
}
input.is-auto-calc:focus {
  font-style: normal;
  background: var(--c-surface, #fff);
  color: var(--c-text);
}
input.is-primary-field {
  border-color: var(--c-primary, #297b96);
  border-width: 2px;
}
/* Effektiver Lohn (durch Sonderstatus modifiziert) */
.lohn-effective-salary {
  position: relative;
  cursor: help;
  border-bottom: 1px dashed var(--c-text-muted, #51626e);
}
[data-theme="dark"] input.is-auto-calc {
  background: rgba(255, 255, 255, 0.04);
  color: #93c5fd;
  border-color: rgba(255, 255, 255, 0.2);
}

/* v526: KoShot-Mirror-Tasks in „Meine Aufgaben" */
.my-task-item.is-koshot-mirror,
.dashboard-task-item.is-koshot-mirror {
  cursor: pointer;
  border-left: 3px solid #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.06) 0%, transparent 100%);
}
.my-task-item.is-koshot-mirror:hover,
.dashboard-task-item.is-koshot-mirror:hover {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, transparent 100%);
}
.koshot-mirror-badge {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #b45309 !important;
  font-size: 10px;
  padding: 2px 6px;
}
[data-theme="dark"] .koshot-mirror-badge {
  background: rgba(245, 158, 11, 0.25) !important;
  color: #fbbf24 !important;
}

.calendar-block-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
}

.calendar-day-events {
  display: grid;
  gap: 4px;
  align-content: start;
}

.calendar-chip {
  vertical-align: top;
}

.calendar-chip span:last-child {
  min-width: 0;
  flex: 1;
}

.calendar-day-events .calendar-chip {
  width: 100%;
}

.calendar-chip.task_due {
  background: #ffe2ea;
  color: #8a2848;
}

.calendar-chip.task_start {
  background: #e4f2ff;
  color: #234f8a;
}

.calendar-chip.attendance {
  background: #e8f8eb;
  color: #215e3a;
}

.calendar-chip.planned_workday {
  background: rgba(41, 123, 150, 0.14);
  color: var(--dark-blue);
  border: 1px dashed rgba(41, 123, 150, 0.38);
}

.calendar-chip.birthday_user,
.calendar-chip.birthday_customer {
  background: #fff0d9;
  color: #8a5c10;
}

.calendar-chip.import {
  background: #ece9ff;
  color: #4f3e86;
}

.calendar-chip.appointment {
  background: #eeecff;
  color: #3730a3;
  font-weight: 600;
}

.calendar-agenda-day {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
}

.calendar-agenda-day-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(216, 230, 238, 0.8);
}

.calendar-agenda-day-head strong {
  font-size: var(--type-card-title);
  color: var(--dark-blue);
  text-transform: capitalize;
}

.calendar-agenda-events {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.calendar-agenda-events .calendar-agenda-event {
  display: grid;
  align-items: center;
  gap: 8px;
  background: rgba(247, 251, 253, 0.78);
}

.calendar-agenda-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dark-blue);
}

.calendar-more {
  appearance: none;
  width: 100%;
  min-height: 22px;
  border: 1px solid rgba(190, 213, 225, 0.82);
  border-radius: 7px;
  background: rgba(244, 249, 252, 0.92);
  font-size: 11px;
  font-weight: 700;
  color: #5a7280;
  cursor: pointer;
}

.calendar-more:hover,
.calendar-more:focus-visible {
  border-color: var(--light-blue);
  background: rgba(226, 239, 246, 0.95);
  color: var(--dark-blue);
}

/* User badge (small colored pill with initials) */
.cal-badge-sm {
  border-radius: 50%;
  color: #fff;
  letter-spacing: 0;
}

/* Month view: user presence badges row */
.cal-month-presence {
  padding: 2px 0 1px;
}

.calendar-presence-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  min-height: 20px;
  border: 1px solid color-mix(in srgb, var(--presence-color, var(--medium-blue)) 34%, var(--line));
  border-radius: 999px;
  padding: 2px 6px 2px 4px;
  background: color-mix(in srgb, var(--presence-color, var(--medium-blue)) 13%, #fff);
  color: var(--dark-blue);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.calendar-presence-pill-attendance {
  background: color-mix(in srgb, var(--presence-color, #2c8f56) 18%, #fff);
}

.calendar-presence-icon {
  font-size: 11px;
  line-height: 1;
}

.calendar-presence-initials {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* JAS-008: Ein abgeschlossener Tag, an dem nur geplant, aber nichts erfasst
   wurde. Der Plan bleibt sichtbar, tritt aber zurueck und bekommt einen
   gestrichelten Rand — damit man auf einen Blick sieht: hier fehlt etwas. */
.calendar-presence-pill.is-plan-ohne-erfassung {
  border-style: dashed;
  background: transparent;
  opacity: 0.68;
}

.calendar-presence-pill:hover {
  border-color: color-mix(in srgb, var(--presence-color, var(--medium-blue)) 58%, var(--line));
  background: color-mix(in srgb, var(--presence-color, var(--medium-blue)) 20%, #fff);
}

.calendar-day.is-muted .calendar-presence-pill {
  opacity: 0.72;
}

[data-theme="dark"] .calendar-presence-pill {
  background: color-mix(in srgb, var(--presence-color, var(--medium-blue)) 24%, #111827);
  color: var(--c-text, #e5eef5);
}

/* User filter chip - colored dot */
.cal-user-chip .cal-badge-sm { font-size: 8px; }

/* Week view (Google Calendar style) */
.calw-shell {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  max-height: calc(100vh - 200px);
  min-height: 480px;
}
.calw-head {
  display: flex;
  border-bottom: 2px solid var(--line);
  background: var(--bg-card, #fff);
  position: sticky;
  top: 0;
  z-index: 4;
  flex-shrink: 0;
}
.calw-head-gutter {
  width: 52px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
}
.calw-head-cols {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.calw-head-col {
  flex: 1;
  min-width: 0;
  text-align: center;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.calw-head-col:last-child { border-right: 0; }
.calw-head-col.is-weekend { background: rgba(0,0,0,0.02); color: #8a9ba8; }
.calw-head-day-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark-blue);
  line-height: 1;
}
.calw-head-day-num.is-today {
  display: flex;
  align-items: center;
  justify-content: center;
}
.calw-head-day-label { font-weight: 700; color: #7892a0; text-transform: uppercase; }
.calw-head-users {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2px;
}
.calw-head-badge {
  border-radius: 50%;
  color: #fff;
}
.calw-body {
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}
.calw-gutter {
  width: 52px;
  flex-shrink: 0;
  position: relative;
  border-right: 1px solid var(--line);
  background: rgba(41,123,150,0.02);
}
.calw-lbl {
  position: absolute;
  right: 6px;
  font-size: 10px;
  color: #8a9ba8;
  transform: translateY(-50%);
  white-space: nowrap;
  user-select: none;
}
.calw-cols-area {
  flex: 1;
  position: relative;
  min-width: 0;
}
.calw-grid-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.calw-cols {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 1;
}
.calw-col {
  flex: 1;
  min-width: 0;
  position: relative;
  border-right: 1px solid var(--line);
}
.calw-col:last-child { border-right: 0; }
.calw-col.is-weekend { background: rgba(0,0,0,0.012); }
.calw-col.is-past .calw-event { filter: saturate(0.25); opacity: 0.5; }
.calw-hline {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.calw-hline-half { border-top: 1px dashed rgba(0,0,0,0.04); }
.calw-now {
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 3;
}
.calw-now::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
}
.calw-now::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.calw-event {
  position: absolute;
  padding: 3px 5px;
  overflow: hidden;
  opacity: 0.88;
  cursor: default;
  transition: opacity 120ms;
  z-index: 2;
}
.calw-event:hover { opacity: 1; z-index: 5; }
.calw-event-badge {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.5);
  flex-shrink: 0;
  font-size: 6px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* Week view — absence chips (all-day row in header) */
.calw-absence-allday {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px 2px 2px;
  min-height: 0;
}
.calw-absence-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 5px 1px 3px;
  border-radius: 10px;
  font-size: 9.5px;
  font-weight: 600;
  color: #fff;
  background: var(--ac, #64748b);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.calw-absence-chip.is-pending {
  opacity: 0.7;
  border: 1px dashed rgba(255,255,255,0.5);
}
.calw-absence-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  flex-shrink: 0;
}
.calw-absence-initials {
  font-weight: 700;
}
.calw-absence-lbl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Week view — absence strip in time column (translucent background) */
.calw-absence-strip {
  position: absolute;
  inset: 0;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}

/* Day view */
/* Calendar Day View (Google Calendar style) */
.cald-shell {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  max-height: calc(100vh - 200px);
  min-height: 480px;
}

/* Sticky header row: gutter spacer + user columns */
.cald-head {
  display: flex;
  border-bottom: 2px solid var(--line);
  background: var(--bg-card, #fff);
  position: sticky;
  top: 0;
  z-index: 4;
  flex-shrink: 0;
}
.cald-head-gutter {
  width: 52px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
}
.cald-head-cols {
  flex: 1;
  display: flex;
  min-width: 0;
}
.cald-head-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--line);
  min-width: 80px;
}
.cald-head-col:first-child { border-left: 0; }
.cald-head-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--label-color, #4a6274);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Day label bar (date + today badge) */
.cald-datebar {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark-blue);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: rgba(41,123,150,0.04);
}
.cald-datebar.is-past { color: #8a9ba8; }
.cald-col.is-past .cald-event { filter: saturate(0.25); opacity: 0.5; }

/* Absence banner row (day view) */
.cald-absence-banner {
  padding: 5px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
  background: rgba(0,0,0,0.015);
}
.cald-absence-banner-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
}
.cald-absence-banner-chip.is-pending {
  opacity: 0.7;
  border: 1px dashed rgba(255,255,255,0.6);
}

/* Full-height absence overlay per user column (day view) */
.cald-absence-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
.cald-absence-overlay.is-pending {
  opacity: 0.07;
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 6px,
    rgba(255,255,255,0.35) 6px, rgba(255,255,255,0.35) 12px
  );
}
.cald-absence-overlay-lbl {
  position: absolute;
  top: 8px;
  left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(0,0,0,0.45);
  pointer-events: none;
}

/* Task chips row */
.cald-tasks {
  padding: 6px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
  font-size: 12px;
}

/* Scrollable body */
.cald-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  position: relative;
}

/* Time gutter (left axis) */
.cald-gutter {
  width: 52px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  position: relative;
  background: rgba(41,123,150,0.02);
}
.cald-lbl {
  position: absolute;
  right: 6px;
  font-size: 10px;
  color: #8a9ba8;
  transform: translateY(-50%);
  white-space: nowrap;
  user-select: none;
}

/* Columns area: grid + events */
.cald-cols-area {
  flex: 1;
  position: relative;
  min-width: 0;
}
.cald-grid-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Grid lines layer */
.cald-hline {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 1px solid rgba(0,0,0,0.07);
  pointer-events: none;
  z-index: 0;
}
.cald-hline-half {
  border-top: 1px dashed rgba(0,0,0,0.04);
}

/* Current time indicator */
.cald-now {
  position: absolute;
  left: 0; right: 0;
  z-index: 3;
  pointer-events: none;
}
.cald-now::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
}
.cald-now::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

/* User event columns (flex row, filling cols-area) */
.cald-cols {
  position: absolute;
  inset: 0;
  display: flex;
}
.cald-col {
  flex: 1;
  position: relative;
  border-left: 1px solid var(--line);
  min-width: 0;
}
.cald-col:first-child { border-left: 0; }

/* Individual event block */
.cald-event {
  position: absolute;
  left: 4px; right: 4px;
  padding: 4px 8px;
  overflow: hidden;
  opacity: 0.92;
  cursor: default;
  transition: opacity 0.1s;
  min-height: 20px;
}
/* JAS-008: geplant, aber nichts erfasst (nur bei abgeschlossenen Tagen). */
.cald-event.is-plan-ohne-erfassung { background: transparent !important; border: 1px dashed currentColor; opacity: 0.6; }
.cald-event:hover { opacity: 1; }
.cald-event-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.birthday-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.birthday-item.birthday-past {
  opacity: 0.6;
}
/* v467: Foto-Avatar im Birthday-Widget für Mitarbeiter */
.birthday-item-photo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: var(--bg, #f1f3f5);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Arbeitszeit-Alerts inside Zeiten heute panel */
.workday-alerts-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 12px 0 10px;
}
.workday-alerts-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #51626e);
  margin: 0 0 6px;
}

/* ── Lohnhistorie entry form ──────────────────────────────────── */
.salary-entry-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.salary-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
}

.salary-form-row label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.salary-form-row label input,
.salary-form-row label select {
  font-size: 14px;
  min-width: 0;
}

/* Field widths */
.salary-field-lohnmodell select { width: 145px; }
.salary-field-brutto input      { width: 130px; }
.salary-field-hourly input      { width: 120px; }
.salary-field-taxclass select   { width: 95px; }
.salary-field-sv select         { width: 220px; }
.salary-field-validfrom input   { width: 155px; }
.salary-field-note              { flex: 1; min-width: 180px; }
.salary-field-note input        { width: 100%; }

/* Submit button aligned to field bottom */
.salary-form-action {
  display: flex;
  align-items: flex-end;
  padding-bottom: 1px;
}

/* History list */
#userSalaryHistoryList {
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
#userSalaryHistoryList .file-list-item {
  padding: 8px 4px;
  font-size: 13px;
}

.work-schedule-editor .panel-header.compact {
  align-items: flex-start;
  margin-bottom: 12px;
}

.work-schedule-continuation,
.work-schedule-follow-up {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(238, 247, 251, 0.72);
}

.work-schedule-continuation {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 12px;
  align-items: end;
}

.work-schedule-continuation > p {
  grid-column: 1 / -1;
  margin: 0;
}

.work-schedule-follow-up h4 {
  margin: 0;
}

@media (max-width: 720px) {
  .work-schedule-continuation {
    grid-template-columns: 1fr;
  }
}

.work-schedule-days {
  display: grid;
  gap: 8px;
}

.work-schedule-day {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto 92px auto;
  gap: 10px;
  align-items: center;
}

.work-schedule-day-name {
  font-weight: 700;
  color: var(--dark-blue);
}

.work-schedule-period-row {
  display: flex;
  flex-direction: column;
}

.work-schedule-period-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.work-schedule-period-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  flex: 1;
}

.work-schedule-day-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.work-schedule-day-badge {
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  color: #23404f;
  background: #deedf4;
}

.work-schedule-day-badge.is-off {
  color: var(--muted);
  background: rgba(148, 163, 184, 0.16);
  font-weight: 400;
}

/* ── Zeitphasen: Kopfzeile mit Ansichtsumschalter ───────────────── */
.work-schedule-periods-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.segmented-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border, #d8e4ea);
  border-radius: var(--button-radius, 10px);
  background: rgba(148, 163, 184, 0.10);
  gap: 3px;
}

.segmented-toggle-button {
  border: 0;
  border-radius: calc(var(--button-radius, 10px) - 3px);
  padding: 7px 14px;
  font-size: var(--button-font-sm, 12px);
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.segmented-toggle-button:hover {
  color: var(--dark-blue);
}

.segmented-toggle-button.is-active {
  color: var(--dark-blue);
  background: var(--white, #fff);
  box-shadow: 0 1px 4px rgba(41, 123, 150, 0.18);
}

/* ── Zeitphasen: Listenansicht ──────────────────────────────────── */
.work-schedule-period-row {
  gap: 10px;
  border-left: 4px solid rgba(148, 163, 184, 0.35);
}

.work-schedule-period-row.is-current {
  border-left-color: var(--medium-blue, #297b96);
}

.work-schedule-period-row.is-future {
  border-left-color: #b08b2e;
}

.work-schedule-period-row.is-past {
  opacity: 0.82;
}

.work-schedule-period-date-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.work-schedule-period-date {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--dark-blue);
}

.work-schedule-period-duration {
  font-size: 12px;
  color: var(--muted);
}

.work-schedule-period-status {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(148, 163, 184, 0.18);
}

.work-schedule-period-status.is-current {
  color: #10506a;
  background: #d3ecf6;
}

.work-schedule-period-status.is-future {
  color: #7a5c12;
  background: #f6ead1;
}

.work-schedule-period-name {
  display: block;
  font-size: 14px;
}

.work-schedule-period-toggle-static {
  min-width: 0;
  flex: 1;
}

.work-schedule-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.work-schedule-chip {
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #3d5765;
  background: rgba(148, 163, 184, 0.14);
}

.work-schedule-period-continuation {
  margin-top: 6px;
  font-size: 12px;
}

/* Buttons: gleiche Breite, voller Text — nicht abgeschnitten */
.work-schedule-period-buttons,
.user-absence-buttons {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 6px;
}

.work-schedule-period-buttons .ghost-button,
.user-absence-buttons .ghost-button {
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  border: 1px solid var(--border, #d8e4ea);
  white-space: nowrap;
}

/* ── Zeitphasen: Zeitstrahl-Ansicht ─────────────────────────────── */
.work-schedule-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-x: auto;
}

.work-schedule-timeline-axis,
.work-schedule-timeline-lane {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(220px, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.work-schedule-timeline-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 12.5px;
}

.work-schedule-timeline-label span {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.work-schedule-timeline-axis-track {
  position: relative;
  height: 18px;
  border-bottom: 1px solid var(--border, #d8e4ea);
}

.work-schedule-timeline-year {
  position: absolute;
  bottom: 1px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  transform: translateX(-50%);
}

.work-schedule-timeline-track {
  position: relative;
  height: 26px;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.12);
}

.work-schedule-timeline-bar {
  position: absolute;
  top: 3px;
  bottom: 3px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding: 0 6px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  color: var(--white, #fff);
  background: #7f97a5;
  white-space: nowrap;
}

.work-schedule-timeline-bar.is-current {
  background: var(--medium-blue, #297b96);
}

.work-schedule-timeline-bar.is-future {
  background: #c0a04a;
}

.work-schedule-timeline-bar.is-open-end {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.work-schedule-timeline-today {
  position: absolute;
  top: 0;
  bottom: -2px;
  width: 2px;
  background: var(--color-danger, #a83d50);
}

.work-schedule-timeline-legend {
  margin: 4px 0 0;
  font-size: 11.5px;
}

/* Phase ohne Wirkung (vollständig überlagert oder deaktiviert): sichtbar,
   aber deutlich zurückgenommen — sie steuert gerade nichts. */
.work-schedule-period-status.is-off {
  color: #8a5a2b;
  background: rgba(197, 128, 51, 0.16);
}

/* Klartext-Zeile: wann die Phase wirklich greift, wenn das vom gespeicherten
   Zeitraum abweicht. */
.work-schedule-period-effect {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #8a5a2b;
}

/* Hinweiskasten über gespeicherte Überschneidungen. */
/* Höhere Spezifität als `.simple-list li` und `.management-row`, sonst gewinnt
   deren weißer Hintergrund und der Kasten wäre nicht als Warnung erkennbar. */
ul li.work-schedule-overlap-notice {
  display: block;
  border-left: 3px solid var(--color-warning, #c58033);
  background: rgba(197, 128, 51, 0.10);
}

.work-schedule-overlap-notice strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
}

.work-schedule-overlap-notice ul {
  margin: 0 0 6px;
  padding-left: 18px;
  font-size: 12px;
}

.work-schedule-overlap-notice p {
  margin: 0;
  font-size: 11.5px;
}

/* Info-Box mit Vorschlag (work-schedule-periods.js). Petrol statt Orange:
   Gerechnet wird richtig — das ist ein Hinweis mit Ausweg, keine Warnung. */
/* display:block wie bei der alten Warnbox — `.management-row` bringt eigene
   Flex-Regeln mit, die sonst die Knöpfe weit nach unten schieben. */
ul li.work-schedule-finding {
  display: block;
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-softer);
}

.work-schedule-finding-text {
  min-width: 0;
  font-size: 12.5px;
}

.work-schedule-finding-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.work-schedule-finding-text ul,
.work-schedule-finding-text ol {
  margin: 4px 0 8px;
  padding-left: 18px;
}

.work-schedule-finding-text li {
  margin: 2px 0;
}

.work-schedule-finding-text p {
  margin: 0 0 6px;
}

.work-schedule-finding-preview summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary);
}

.work-schedule-finding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

ul li.work-schedule-finding.is-done .work-schedule-finding-actions {
  margin-top: 6px;
}

/* Schattenbalken = gespeicherter Zeitraum. Er erklärt, warum der farbige
   Balken kürzer ist als das Datum links vermuten lässt. */
.work-schedule-timeline-ghost {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 5px;
  border: 1px dashed rgba(127, 151, 165, 0.55);
  background: rgba(127, 151, 165, 0.10);
}

/* Status als kleiner Chip direkt unter dem Phasennamen im Zeitstrahl. */
.work-schedule-timeline-status {
  align-self: flex-start;
  margin-top: 2px;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(148, 163, 184, 0.18);
}

.work-schedule-timeline-status.is-current {
  color: #10506a;
  background: #d3ecf6;
}

.work-schedule-timeline-status.is-future {
  color: #7a5c12;
  background: #f6ead1;
}

.work-schedule-timeline-status.is-off {
  color: #8a5a2b;
  background: rgba(197, 128, 51, 0.16);
}

[data-theme="dark"] .work-schedule-period-status.is-off,
[data-theme="dark"] .work-schedule-timeline-status.is-off {
  color: #e8b579;
  background: rgba(197, 128, 51, 0.24);
}

[data-theme="dark"] .work-schedule-period-effect {
  color: #e8b579;
}

[data-theme="dark"] ul li.work-schedule-overlap-notice {
  background: rgba(197, 128, 51, 0.14);
}

[data-theme="dark"] .work-schedule-timeline-status {
  color: rgba(180, 210, 225, 0.75);
  background: rgba(148, 163, 184, 0.20);
}

[data-theme="dark"] .work-schedule-timeline-status.is-current {
  color: #9fdcf3;
  background: rgba(41, 123, 150, 0.30);
}

[data-theme="dark"] .work-schedule-timeline-status.is-future {
  color: #ecd08a;
  background: rgba(176, 139, 46, 0.26);
}

[data-theme="dark"] .work-schedule-timeline-ghost {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

/* ── Urlaub & Krankheit im Arbeitszeit-Tab ──────────────────────── */
.user-absence-panel {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #d8e4ea);
}

.user-absence-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.user-absence-kpi {
  display: flex;
  flex: 1 1 140px;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border, #d8e4ea);
  border-radius: 10px;
  padding: 9px 12px;
  background: rgba(148, 163, 184, 0.07);
}

.user-absence-kpi-label {
  font-size: 11.5px;
  color: var(--muted);
}

.user-absence-kpi strong {
  font-size: 16px;
  color: var(--dark-blue);
}

.user-absence-kpi strong.is-negative {
  color: var(--color-danger, #a83d50);
}

.user-absence-group-title {
  padding: 4px 2px 0;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  list-style: none;
}

.user-absence-row {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  border-left: 4px solid rgba(148, 163, 184, 0.35);
}

.user-absence-row.is-urlaub { border-left-color: #2f8f6b; }
.user-absence-row.is-krank_au,
.user-absence-row.is-krank_ohne { border-left-color: #a83d50; }
.user-absence-row.is-kindkrank { border-left-color: #b0692e; }
.user-absence-row.is-sonderurlaub { border-left-color: #6b5cb0; }

.user-absence-date-rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-absence-date {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--dark-blue);
}

.user-absence-days {
  font-size: 11.5px;
  color: var(--muted);
}

.user-absence-main {
  min-width: 0;
}

.user-absence-type {
  margin-right: 8px;
}

.user-absence-status {
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  color: #10506a;
  background: #d3ecf6;
  white-space: nowrap;
}

.user-absence-status.is-pending {
  color: #7a5c12;
  background: #f6ead1;
}

.user-absence-status.is-rejected {
  color: var(--color-danger, #a83d50);
  background: rgba(168, 61, 80, 0.12);
}

.user-absence-note {
  margin-top: 4px;
  font-size: 12.5px;
}

@media (max-width: 780px) {
  .user-absence-row,
  .work-schedule-timeline-axis,
  .work-schedule-timeline-lane {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-schedule-period-buttons,
  .user-absence-buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .work-schedule-period-row-top {
    flex-direction: column;
  }
}

/* ── Urlaub ändern / absagen: Aktionen auf den eigenen Karten ──────────── */
.vac-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.vac-card-action {
  border: 1px solid var(--border, #d8e4ea);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--medium-blue, #297b96);
  background: var(--white, #fff);
  cursor: pointer;
  white-space: nowrap;
}

.vac-card-action:hover {
  border-color: var(--medium-blue, #297b96);
  background: rgba(41, 123, 150, 0.08);
}

.vac-card-action.is-danger {
  color: var(--color-danger, #a83d50);
}

.vac-card-action.is-danger:hover {
  border-color: rgba(168, 61, 80, 0.4);
  background: rgba(168, 61, 80, 0.08);
}

.vac-card-change-note,
.user-absence-change-note {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: #7a5c12;
}

.calendar-edit-hint {
  border-left: 3px solid var(--medium-blue, #297b96);
  line-height: 1.45;
}

[data-theme="dark"] .vac-card-action {
  border-color: rgba(255, 255, 255, 0.12);
  color: #9fdcf3;
  background: transparent;
}

[data-theme="dark"] .vac-card-action.is-danger {
  color: #f0a4b1;
}

[data-theme="dark"] .vac-card-change-note,
[data-theme="dark"] .user-absence-change-note {
  color: #ecd08a;
}

[data-theme="dark"] .calendar-edit-hint {
  color: #cfe1ea;
  background: rgba(41, 123, 150, 0.18);
}

/* Dunkler Modus: --dark-blue bleibt dunkel, Texte brauchen eigene helle Farben */
[data-theme="dark"] .work-schedule-period-date,
[data-theme="dark"] .user-absence-date,
[data-theme="dark"] .user-absence-kpi strong {
  color: #d0e8f2;
}

[data-theme="dark"] .segmented-toggle-button:hover {
  color: #d0e8f2;
}

[data-theme="dark"] .work-schedule-period-status,
[data-theme="dark"] .user-absence-status {
  color: rgba(180, 210, 225, 0.75);
  background: rgba(148, 163, 184, 0.20);
}

[data-theme="dark"] .work-schedule-period-status.is-current,
[data-theme="dark"] .user-absence-status.is-confirmed {
  color: #9fdcf3;
  background: rgba(41, 123, 150, 0.30);
}

[data-theme="dark"] .work-schedule-period-status.is-future,
[data-theme="dark"] .user-absence-status.is-pending {
  color: #ecd08a;
  background: rgba(176, 139, 46, 0.26);
}

[data-theme="dark"] .user-absence-status.is-rejected {
  color: #f0a4b1;
  background: rgba(168, 61, 80, 0.26);
}

[data-theme="dark"] .work-schedule-period-buttons .ghost-button,
[data-theme="dark"] .user-absence-buttons .ghost-button {
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .segmented-toggle {
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .user-absence-kpi {
  border-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .work-schedule-timeline-track {
  background: rgba(148, 163, 184, 0.16);
}

[data-theme="dark"] .work-schedule-timeline-axis-track {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .work-schedule-chip,
[data-theme="dark"] .user-absence-kpi {
  color: #cfe1ea;
  background: rgba(148, 163, 184, 0.14);
}

[data-theme="dark"] .segmented-toggle-button.is-active {
  color: #eaf4f9;
  background: rgba(148, 163, 184, 0.28);
}

.work-schedule-legal-hint {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(41, 123, 150, 0.06);
  line-height: 1.45;
}

.work-schedule-legal-hint.is-warning {
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
  color: var(--warn);
}

/* ── Legacy timeline styles (kept for references elsewhere) ──────── */
.timeline-open-button {
  text-align: left;
  justify-content: flex-start;
}

/* ── Gantt chart (project timeline redesign) ─────────────────────── */
.gantt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 10px;
  flex-wrap: wrap;
}

.gantt-toolbar-range {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  opacity: 0.75;
}

.gantt-toolbar-zoom {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--color-text-muted);
  cursor: default;
}

.gantt-toolbar-zoom select {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
}

.gantt-wrap {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg);
}

/* ── Left fixed labels column ─────────────────────────────────────── */
.gantt-left {
  flex: 0 0 220px;
  min-width: 0;
  border-right: 1px solid var(--line);
  background: var(--color-bg);
  z-index: 2;
}

.gantt-label-hdr {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--line);
  background: var(--color-bg-alt, #f5f8fa);
}

.gantt-label-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  transition: background 120ms;
}
.gantt-label-row:last-child {
  border-bottom: none;
}
.gantt-label-row.is-selected {
  background: rgba(41, 123, 150, 0.08);
}
.gantt-label-row:hover {
  background: rgba(41, 123, 150, 0.05);
}

.gantt-label-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  background: none;
  border: none;
  padding: 0 10px;
  height: 100%;
  text-align: left;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  overflow: hidden;
  min-width: 0;
}
.gantt-label-btn:hover {
  color: var(--medium-blue);
}

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

.gantt-label-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.gantt-label-flag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.12);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Right scrollable chart area ───────────────────────────────────── */
.gantt-right {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
}

.gantt-ruler {
  position: relative;
  background: var(--color-bg-alt, #f5f8fa);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.gantt-tick {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  pointer-events: none;
  padding: 1px 3px;
}

.gantt-canvas {
  position: relative;
  overflow: hidden;
}

.gantt-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  opacity: 0.5;
  pointer-events: none;
}

.gantt-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e74c3c;
  opacity: 0.8;
  pointer-events: none;
  z-index: 3;
  transform: translateX(-50%);
}
.gantt-today-line::after {
  content: "heute";
  position: absolute;
  top: 3px;
  left: 4px;
  font-size: 9px;
  font-weight: 700;
  color: #e74c3c;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0.85;
}

/* ── Bar rows ───────────────────────────────────────────────────────── */
.gantt-bar-row {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  transition: background 120ms;
}
.gantt-bar-row:last-child {
  border-bottom: none;
}
.gantt-bar-row:hover {
  background: rgba(41, 123, 150, 0.04);
}
.gantt-bar-row.is-selected {
  background: rgba(41, 123, 150, 0.08);
}

/* Hover controls (date shift) – hidden by default */
.gantt-bar-row:hover .gantt-bar-tools {
  opacity: 1;
  pointer-events: auto;
}

.gantt-bar {
  position: absolute;
  top: 6px;
  height: calc(100% - 12px);
  min-width: 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  transition: filter 100ms, box-shadow 100ms;
}
.gantt-bar:hover {
  filter: brightness(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gantt-bar-progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  pointer-events: none;
  border-radius: 6px 0 0 6px;
}

.gantt-bar-label {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  padding: 0 7px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Date shift controls – hover pill above bar */
.gantt-bar-tools {
  position: absolute;
  bottom: calc(100% - 4px);
  left: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--color-bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2px 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
  z-index: 10;
  white-space: nowrap;
}

.gantt-shift-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0;
  transition: background 100ms, color 100ms;
}
.gantt-shift-btn:hover {
  background: var(--color-primary-softer);
  color: var(--medium-blue);
}

.gantt-tools-lbl {
  font-size: 10.5px;
  color: var(--color-text);
  font-weight: 600;
  padding: 0 2px;
}

.gantt-tools-sep {
  font-size: 11px;
  color: var(--line);
  padding: 0 2px;
}

/* ── Dark mode tweaks ───────────────────────────────────────────────── */
[data-theme="dark"] .gantt-bar-label {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .gantt-bar-tools {
  background: var(--color-bg);
  border-color: var(--color-border);
}
[data-theme="dark"] .gantt-wrap {
  border-color: var(--color-border);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .gantt-left {
    flex: 0 0 140px;
  }
  .gantt-label-btn {
    font-size: 11.5px;
    padding: 0 6px;
  }
}

.project-timer-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: grid;
  justify-items: end;
  pointer-events: none;
}

.project-timer-dock > * {
  pointer-events: auto;
}

body.timer-dock-left .project-timer-dock {
  left: 18px;
  right: auto;
  justify-items: start;
}

body.timer-dock-left .project-timer-tabs {
  justify-items: start;
}

body.timer-dock-top-left .project-timer-dock {
  left: 18px;
}

body.timer-dock-top-right .project-timer-dock {
  right: 18px;
  justify-items: end;
}

body.timer-dock-top-left .project-timer-tabs {
  justify-items: start;
}

.project-timer-tabs {
  display: grid;
  gap: 8px;
  justify-items: end;
}

/* New awork-style timer pills */
.ptimer-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px 0 12px;
  height: 40px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  transition: background 180ms, box-shadow 180ms;
  position: relative;
}

.ptimer-pill-icon {
  display: flex;
  align-items: center;
  opacity: 0.9;
  flex-shrink: 0;
}

.ptimer-pill-label {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ptimer-pill-time {
  font-family: "Futura Heavy", "Futura", "Avenir Next", sans-serif;
  font-style: italic;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
  opacity: 0.88;
  min-width: 58px;
}

.ptimer-pill-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
}

.ptimer-pill:hover .ptimer-pill-controls {
  display: inline-flex;
}

.ptimer-ctrl-btn {
  width: 26px;
  height: 26px;
  border: 0;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 120ms;
  pointer-events: auto;
}

.ptimer-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.38);
}

.ptimer-ctrl-delete:hover {
  background: rgba(220, 80, 80, 0.55);
}

/* Add-pill (+ button next to pills) */
.ptimer-add-pill {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px dashed rgba(14, 97, 140, 0.45);
  background: rgba(255, 255, 255, 0.95);
  color: #0e618c;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(14, 97, 140, 0.12);
  transition: background 120ms, border-color 120ms, transform 120ms;
  flex-shrink: 0;
}
.ptimer-add-pill:hover { background: #fff; border-color: rgba(14, 97, 140, 0.75); }
.ptimer-add-pill.is-active { background: #0e618c; color: #fff; border-color: #0e618c; }

.project-timer-toggle {
  padding: 0;
  line-height: 1;
  cursor: pointer;
}

.project-timer-toggle .ci-icon-svg {
  display: block;
}

.project-timer-panel {
  width: min(340px, calc(100vw - 24px));
}

.ptimer-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Active timer block */
.ptimer-active-block {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ptimer-active-chips {
  display: flex;
  flex-wrap: wrap;
}

.ptimer-chip-project {
  background: #e8f3fa;
  color: #2a6a8c;
  border: 1px solid rgba(42, 106, 140, 0.2);
}

.ptimer-chip-task {
  background: #edf6ef;
  color: #2a7340;
  border: 1px solid rgba(42, 115, 64, 0.2);
}

.ptimer-billable-toggle {
  background: var(--color-surface-muted, #f2f3f5);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ptimer-billable-toggle:hover { border-color: var(--dark-blue); color: var(--dark-blue); }
.ptimer-billable-toggle.is-billable {
  background: #e3f3fa;
  color: var(--dark-blue);
  border-color: rgba(30, 81, 103, 0.3);
}

/* Klickbare Kacheln: Projekt/Aufgabe/Tätigkeit ändern direkt in der Kachel,
 * statt in einer doppelten Auswahl-Zeile darunter. */
.ptimer-chip-editable {
  position: relative;
  cursor: pointer;
  transition: filter 120ms;
}
.ptimer-chip-editable:hover,
.ptimer-chip-editable:focus-within {
  filter: brightness(0.95);
}
.ptimer-chip-text {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ptimer-chip-editable svg:last-child {
  opacity: 0.5;
  margin-left: -1px;
}
.ptimer-chip-native-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
}
.ptimer-chip-activity {
  background: #f3edf9;
  color: #6a3f9c;
  border: 1px solid rgba(106, 63, 156, 0.2);
}

/* Editable fields row in active block */
.ptimer-edit-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 6px;
}
.ptimer-edit-time-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.ptimer-edit-duration-preview {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.ptimer-field-label {
  display: flex; flex-direction: column; gap: 3px;
}

.ptimer-activity-select {
  width: 100%;
}

.ptimer-note-input {
  width: 100%;
  font-family: inherit;
}

/* Vacation Request Card */
/* ── Vac/Sick Widget Tabs ────────────────────────────────────────────────── */
.vac-widget-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
}
.vac-tab-btn {
  flex: 1;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  text-align: center;
  transition: background 0.15s, color 0.15s;
}
.vac-tab-btn:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.vac-tab-btn.is-active {
  /* v460: WCAG AA — dunklere Text-Farbe für Contrast > 4.5:1 */
  background: rgba(41,123,150,0.18);
  border-color: rgba(41,123,150,0.4);
  color: #0d3a52;
}
/* Dunkelmodus: dunkle Schrift auf dunkler Fläche war 1,2 : 1 */
[data-theme="dark"] .vac-tab-btn.is-active { color: var(--color-text); }

/* ── Sick Report Form ────────────────────────────────────────────────────── */
.sick-quick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.sick-quick-row .ghost-button.is-active {
  background: rgba(41,123,150,0.12);
  border-color: rgba(41,123,150,0.3);
  color: var(--medium-blue);
}
/* EP-48: Kein AU-Upload mehr, nur der Hinweis; 📎 öffnet die Übersicht der AU-Dateien auf dem Gerät. */
.sick-au-hinweis { margin: 2px 0 0; }
button.sick-note-link,
button.absence-doc-link {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.kw-au-dateien-liste {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
#kwAuDateienDialog .app-dialog-actions { flex-wrap: wrap; }
.kw-au-dateien-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow-wrap: anywhere;
}

/* ── Sick Entry Cards ────────────────────────────────────────────────────── */
.sick-entry-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--color-bg-subtle, #f5f5f5);
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 4px;
}
.sick-entry-card.is-sick {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}
[data-theme="dark"] .sick-entry-card.is-sick { background: rgba(253,230,138,0.12); border-color: rgba(253,230,138,0.3); color: #fde68a; }
.sick-entry-label {
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  flex-shrink: 0;
}
.sick-entry-dates { flex: 1; color: var(--color-text); }
.sick-entry-days  { font-weight: 600; color: var(--medium-blue); flex-shrink: 0; }
.sick-note-link   { text-decoration: none; flex-shrink: 0; }
[data-theme="dark"] .sick-entry-card { background: rgba(255,255,255,0.06); }

/* AU-Dokument-Link in Lohn-Abwesenheiten-Tabelle */
.absence-doc-link {
  font-size: 12px;
  color: var(--medium-blue, #1a6e8c);
  text-decoration: none;
  white-space: nowrap;
}
.absence-doc-link:hover { text-decoration: underline; }

/* Hinweis krank_ohne max. 1 Tag */
.sick-ohne-hint {
  padding: 4px 8px;
  background: rgba(243, 176, 80, 0.12);
  border-left: 2px solid #e6a817;
  border-radius: 4px;
  line-height: 1.4;
}

.vac-balance-bar-wrap { display: flex; flex-direction: column; gap: 4px; }
.vac-balance-nums { display: flex; align-items: baseline; gap: 8px; }
.vac-balance-big { font-size: 1.6rem; font-weight: 700; color: #1e5167; line-height: 1; }

.vac-mini-bar {
  position: relative; height: 6px; border-radius: 3px;
  background: var(--border-color, #e0e0e0); overflow: visible;
}
.vac-mini-bar-taken {
  position: absolute; left: 0; top: 0; height: 100%;
  background: #2c9ec9; border-radius: 3px; transition: width 0.3s;
}
.vac-mini-bar-pending {
  position: absolute; top: 0; height: 100%;
  background: #f39c12; border-radius: 3px; opacity: 0.7;
}

.vacation-request-form .vac-form-row {
  display: grid; grid-template-columns: 1fr 1fr;
}

.vac-req-list { display: flex; flex-direction: column; gap: 5px; }
.vac-req-dates { flex: 1; min-width: 0; }

.vac-status-badge {
  flex-shrink: 0;
}

.vac-cards-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

.vac-card {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.vac-card-pending  { border: 1px solid var(--status-pending-border); }
.vac-card-approved { border: 1px solid var(--status-approved-border); }
.vac-card-rejected { border: 1px solid var(--status-rejected-border); }

.vac-card-label { font-weight: 800; text-transform: uppercase; flex-shrink: 0; }
.vac-card-dates { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vac-card-days { opacity: 0.75; white-space: nowrap; }

.vac-card-cancel {
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  opacity: 0.72;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  transition: opacity 120ms;
}
.vac-card-cancel:hover { opacity: 0.9; }

.vac-admin-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; border-top: 1px solid var(--border-color, #eee); font-size: 13px;
}
.vac-admin-row:first-child { border-top: none; }
.vac-admin-actions { margin-left: auto; }

/* Calendar Vacation Chips */
.calendar-chip.vacation_pending  { border: 1px dashed var(--status-pending-border); }
.calendar-chip.vacation_approved { border: 1px solid var(--status-approved-border); font-weight: 700; }
.calendar-chip.absence_entry     { background: var(--status-absence-bg); color: var(--status-absence-text); border: 1px solid var(--status-absence-border); }

/* Inline SVG Charts */
.stat-svg-full { display: block; width: 100%; height: auto; overflow: visible; }
.stat-svg-full .chart-label { font-size: 11px; fill: var(--text-muted, #888); font-family: inherit; }

.donut-chart-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut-svg { width: 116px; height: 116px; flex-shrink: 0; }
.donut-legend { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.donut-legend-item { display: flex; align-items: center; gap: 7px; font-size: 12px; min-width: 0; }
.donut-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.donut-legend-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary, #555); }
.donut-legend-val { margin-left: auto; font-weight: 600; color: var(--text, #1e1e1e); padding-left: 8px; flex-shrink: 0; }

.project-home-chart-section { margin-top: 12px; }

.lohn-ausgeglichen-input {
  width: 58px; border-radius: 5px;
  border: 1px solid var(--line); padding: 3px 5px;
  font-size: 12px; text-align: right;
  background: var(--bg-secondary, #f7f8fa); color: var(--text);
}
.lohn-ausgeglichen-input:focus {
  border-color: #2c9ec9; outline: none;
  background: var(--bg, #fff);
}

.ptimer-meta-row {
  display: flex;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.ptimer-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ptimer-startzeit-item {
  flex-wrap: wrap;
}

.ptimer-time-step {
  min-width: 24px;
  height: 20px;
  padding: 0 4px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #d8dee3);
  background: var(--color-surface-muted, #f2f3f5);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.ptimer-time-step:hover {
  background: var(--dark-blue);
  color: #fff;
  border-color: var(--dark-blue);
}

.ptimer-time-input {
  min-width: 0;
  width: 70px;
  height: 20px;
  padding: 0 4px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #d8dee3);
  background: #fff;
  color: var(--text);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  cursor: text;
}

.ptimer-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  background: var(--bg-secondary, #f7f8fa);
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 120ms;
}

.ptimer-action-btn:hover {
  background: var(--bg-hover, #edf2f7);
}

.ptimer-action-pause:hover { background: #e8f3fa; color: #2a6a8c; border-color: rgba(42, 106, 140, 0.3); }
.ptimer-action-stop:hover { background: #edf6ef; color: #2a7340; border-color: rgba(42, 115, 64, 0.3); }
.ptimer-action-delete {
  margin-left: auto;
  padding: 5px 8px;
  color: #c0392b;
  border-color: rgba(192, 57, 43, 0.25);
}
.ptimer-action-delete:hover { background: #fff0f0; }

/* New timer form */
.ptimer-new-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ptimer-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.ptimer-search-input {
  width: 100%;
}

.ptimer-search-results {
  border: 1px solid var(--line);
  background: #fff;
  max-height: 180px;
}

.ptimer-search-item {
  padding: 7px 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
  transition: background 100ms;
}

.ptimer-search-item:hover, .ptimer-search-item:focus {
  background: #eaf4f9;
  outline: none;
}

.ptimer-search-project {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.ptimer-search-task {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
}

.ptimer-recent {
  display: grid;
  gap: 7px;
  padding-top: 2px;
}

.ptimer-recent-title {
  color: #6b8493;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ptimer-recent-item {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(200, 221, 232, 0.95);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--dark-blue);
  text-align: left;
  cursor: pointer;
}

.ptimer-recent-item:hover {
  border-color: var(--medium-blue);
  background: rgba(44, 158, 201, 0.1);
}

.ptimer-recent-item span,
.ptimer-recent-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ptimer-recent-item span {
  font-weight: 800;
}

.ptimer-recent-item small {
  color: #617b89;
}

.ptimer-draft-chips {
  display: flex;
  flex-wrap: wrap;
}

.ptimer-chip-clearable {
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: opacity 120ms, filter 120ms;
}

.ptimer-chip-clearable:hover {
  filter: brightness(0.92);
}

.ptimer-start-btn {
  width: 100%;
  padding: 8px;
  border: 0;
  font-size: 0.88rem;
  cursor: pointer;
  transition: opacity 150ms;
}

.ptimer-start-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ptimer-start-btn:not(:disabled):hover {
  opacity: 0.9;
}

/* Panel header */
.ptimer-panel-title { font-size: 0.84rem; font-weight: 600; color: var(--color-text); }

.ptimer-back-btn {
  font-size: 0.79rem;
  color: var(--color-text-muted);
  background: none;
  border: 1px solid var(--line);
  padding: 3px 8px;
  cursor: pointer;
  transition: background 120ms;
}
.ptimer-back-btn:hover { background: var(--color-surface-muted); }

/* Tab bar (dual timer) */
.ptimer-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ptimer-tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ptimer-tab-add {
  flex: 0 0 auto;
  width: 36px;
  font-size: 1.1rem;
  color: #0e618c;
  border-left: 1px solid var(--line);
}

/* Toggle button hidden when pills exist */
.project-timer-toggle.is-hidden-when-timers { display: none; }

/* Taetigkeiten settings */
#settingNewTaetigkeitKey {
  flex: 0 0 140px;
}

.taetigkeit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.taetigkeit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--bg-secondary, #f7f8fa);
  border: 1px solid var(--line);
}

.taetigkeit-label {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 500;
}

.taetigkeit-key {
  font-size: 0.75rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--line);
  color: var(--text-muted);
}

@media (max-width: 720px) {

  .day-planner-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .day-planner-target {
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .day-planner-content {
    padding: 14px;
    max-height: none;
  }

  .day-planner-intro h3 {
    font-size: var(--type-section-title);
  }

  .day-planner-intro {
    flex-direction: column;
    align-items: stretch;
  }

  .day-planner-tools {
    justify-content: stretch;
  }

  .day-planner-tools > *,
  .day-planner-hours-field {
    width: 100%;
  }

  .day-planner-footer {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px;
  }

  .day-planner-footer-actions {
    width: 100%;
    margin-left: 0;
    grid-template-columns: 1fr;
  }
}

body.modal-open {
  overflow: hidden;
}

.app-shell.is-blurred {
  filter: blur(5px);
}

.modal-layer {
  position: fixed;
  inset: 0;
  /* 105: über dem Timer-Chip (z-index 100 am Handy), unter dem Menü (110) */
  z-index: 105;
  display: grid;
  place-items: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(10, 32, 44, 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.modal-card {
  position: relative;
  width: min(640px, calc(100vw - 28px));
  padding: 16px;
  z-index: 1;
  animation: fade-in 200ms ease;
}

.doc-preview {
  min-height: 360px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.8);
  padding: 10px;
}

.doc-preview img {
  max-width: 100%;
  border-radius: 10px;
}

.doc-preview iframe {
  width: 100%;
  min-height: 540px;
  border: 0;
  border-radius: 8px;
}

#docsSummary {
  margin: 0 0 8px 0;
}

.docs-workspace {
  display: grid;
  gap: var(--grid-gutter, 16px);
  align-items: start;
}

.docs-sidebar-panel {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

/* ── Sidebar widgets ────────────────────────────────────────────── */
.sidebar-widget {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-surface);
  flex-shrink: 0;
}

.sidebar-widget-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-surface-soft);
  border-bottom: 1px solid var(--line);
}

.sidebar-widget-title {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--doc-leise);
}

/* Doc list inside widget: show ~3 cards then scroll */
.docs-doc-list-widget {
  max-height: 260px;
  overflow-y: auto;
}

/* Remove old widget-specific margins (now handled by sidebar gap) */

.docs-editor-panel {
  min-height: calc(100vh - 170px);
}

.docs-editor-preview {
  min-height: calc(100vh - 210px);
  padding: 0;
  background: var(--color-surface-soft);
}

.docs-editor-panel,
.docs-editor-preview,
.docs-editor-preview *,
.doc-preview,
.doc-preview *,
.doc-editor-shell,
.doc-editor-shell *,
.doc-editor-page,
.doc-rich-editor,
#docRichEditor,
#docTitleInput {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  transform: none;
}

.doc-editor-meta,
.docs-editor-preview .muted,
.docs-editor-preview .doc-title-button {
  color: var(--color-text-muted);
}

.doc-rich-editor,
#docRichEditor {
  display: block !important;
  word-break: normal !important;
  overflow-wrap: break-word;
}

#settingDefaultProjectStatusInput,
#settingTimerPositionInput {
  min-width: 220px;
}

#settingAbsenceTypesInput {
  min-height: 86px;
  resize: vertical;
  line-height: 1.45;
}

.settings-role-matrix {
  display: grid;
  gap: 8px;
}

.settings-role-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) minmax(max-content, auto) minmax(max-content, auto) minmax(100px, auto);
  gap: 10px;
  align-items: center;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.settings-role-main {
  display: grid;
  gap: 2px;
}

.file-list-main {
  min-width: 0;
}

.file-list-main strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-desc-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

/* Comment @mention dropdown */
.comment-compose-wrap {
  position: relative;
}

.comment-mention-dropdown {
  display: grid;
  gap: 2px;
  padding: 6px;
}

.comment-mention-option {
  border-radius: 8px;
  font-weight: 600;
  color: var(--dark-blue);
}

.doc-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.doc-target-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}

.doc-target-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  user-select: none;
}

.doc-upload-project-select {
  min-width: 0;
  cursor: pointer;
}

.doc-upload-label {
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 12px;
  padding: 8px 12px;
}

.project-members-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}

.project-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 100ms;
}

.project-member-row:hover {
  background: var(--table-row-hover-bg);
}

.project-member-row.is-selected {
  background: rgba(41, 123, 150, 0.07);
}

.project-member-row input[type="checkbox"] {
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--medium-blue);
}

.project-member-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-member-crown {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(185, 211, 226, 0.95);
  color: #587184;
  padding: 3px 6px;
  cursor: pointer;
  opacity: 0.58;
  transition: opacity 120ms, filter 120ms, background 120ms, color 120ms;
  filter: grayscale(0.35);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
}

.project-member-crown:not(:disabled):hover {
  opacity: 0.9;
  filter: grayscale(0);
}

.project-member-crown.is-owner {
  opacity: 1;
  color: #07556c;
  background: rgba(44, 158, 201, 0.14);
  border-color: rgba(44, 158, 201, 0.36);
  filter: grayscale(0);
}

.project-member-crown:disabled {
  cursor: default;
  opacity: 0.12;
}

.doc-editor-shell {
  --doc-bg-image: none;
  display: grid;
  gap: 14px;
  padding: 18px;
}

.doc-editor-head {
  justify-content: space-between;
}

.doc-title-input {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(24px, 3vw, 40px);
  color: var(--dark-grey);
}

.doc-editor-toolbar {
  align-items: center;
  border: 1px solid var(--line);
}

.doc-link-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.doc-editor-toolbar button {
  justify-content: center;
}

.doc-editor-toolbar button svg {
  display: block;
  flex-shrink: 0;
}

.doc-editor-toolbar select {
  cursor: pointer;
  height: 34px;
}

.doc-editor-toolbar button.is-active {
  border-color: var(--medium-blue);
}

.doc-editor-toolbar button:hover:not(.is-active) {
  background: #d6eef8;
}

.doc-link-panel > .doc-link-control {
  flex: 1 1 180px;
}

.doc-link-control > summary {
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  background: var(--color-surface-soft);
  font-size: 13px;
  color: var(--color-primary-hover);
  list-style: none;
  user-select: none;
}

.doc-link-control > summary:hover {
  background: var(--color-primary-soft);
}

.doc-link-control > summary::-webkit-details-marker {
  display: none;
}

.task-multi-select-summary {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-link-control-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--doc-leise);
  white-space: nowrap;
  flex-shrink: 0;
}

.doc-link-search-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: var(--color-surface-soft);
}

/* A4 sheet — 794 × 1123 px @ 96 dpi */
.doc-rich-editor {
  position: relative;
  width: 794px;
  flex-shrink: 0;
  min-height: 1123px;
  border: none;
  border-radius: 0;
  /* Papier-Insel: Blatt und Schrift gelten in BEIDEN Modi (Werte: Abschnitt
     „Doc-Papier“ am Dateiende). --dark-grey wäre falsch: das wird im dunklen Modus hell. */
  background: var(--papier-flaeche);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.10),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 96px 80px;
  outline: none;
  color: var(--papier-text);
  line-height: 1.65;
}

.doc-rich-editor.is-dragover {
  outline: 3px solid var(--medium-blue);
  outline-offset: -3px;
}

.doc-editor-shell.is-doc-locked .doc-editor-toolbar,
.doc-editor-shell.is-doc-locked .doc-link-panel,
.doc-editor-shell.is-doc-locked .doc-comment-compose {
  opacity: 0.58;
}

.doc-rich-editor.is-locked {
  background: #f6f9fb;
  cursor: not-allowed;
  user-select: text;
}

.doc-lock-label {
  color: #a15b00;
  font-weight: 800;
}

/* ── Page-break separator ──────────────────────────────────────── */
.doc-page-sep {
  position: absolute;
  left: 0;
  right: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
  transform: translateY(-16px);
}

.doc-page-sep::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 32px;
}

.doc-page-sep-label {
  position: relative;
  z-index: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 4px;
}

/* ── Inline image block ────────────────────────────────────────── */
.doc-inline-media {
  position: relative;
  display: block;
  margin: 12px 0;
  user-select: none;
  box-sizing: border-box;
}

.doc-inline-media.is-selected {
  outline: 2px solid var(--medium-blue, #1a9cc5);
  outline-offset: 2px;
}

/* ── Resize corner handles ─────────────────────────────────────── */
.doc-resize-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #fff;
  border: 2px solid var(--medium-blue, #1a9cc5);
  border-radius: 2px;
  z-index: 20;
  touch-action: none;
}

.doc-resize-nw { top: -5px; left: -5px; cursor: nw-resize; }
.doc-resize-ne { top: -5px; right: -5px; cursor: ne-resize; }
.doc-resize-se { bottom: -5px; right: -5px; cursor: se-resize; }
.doc-resize-sw { bottom: -5px; left: -5px; cursor: sw-resize; }

/* ── Image caption ─────────────────────────────────────────────── */
.doc-image-caption {
  display: block;
  text-align: center;
  font-size: 12px;
  font-style: italic;
  color: var(--muted-blue, #58707d);
  padding: 5px 8px 2px;
  outline: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s;
}

.doc-image-caption:focus {
  border-bottom-color: var(--line);
}

.doc-image-caption:empty::before {
  content: attr(data-placeholder);
  color: var(--muted-blue, #58707d);
  opacity: 0.5;
  pointer-events: none;
}

/* Show remove button when image is selected */
.doc-inline-media.is-selected .doc-media-remove {
  opacity: 1;
  transform: translateY(0);
}

.doc-rich-editor a,
.doc-inline-link {
  color: var(--dark-blue);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(41, 123, 150, 0.45);
  text-underline-offset: 3px;
  cursor: pointer;
}

.doc-rich-editor a:hover,
.doc-inline-link:hover {
  color: var(--medium-blue);
  text-decoration-color: currentColor;
}

.doc-inline-media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: contain;
}

.doc-media-remove {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.72);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.12s, transform 0.12s, background 0.12s;
}

.doc-inline-media:hover .doc-media-remove,
.doc-media-remove:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.doc-media-remove:hover {
  background: #1a1a1a;
}

.doc-rich-editor h1,
.doc-rich-editor h2,
.doc-rich-editor h3,
.doc-rich-editor h4,
.doc-rich-editor h5 {
  font-family: var(--font-display);
  font-style: italic;
  line-height: 1.2;
  margin: 0.8em 0 0.35em;
}

.doc-rich-editor h1 { font-size: 36px; }
.doc-rich-editor h2 { font-size: 30px; }
.doc-rich-editor h3 { font-size: 24px; }
.doc-rich-editor h4 { font-size: 19px; }
.doc-rich-editor h5 { font-size: 16px; }

.doc-rich-editor table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
}

.doc-rich-editor th,
.doc-rich-editor td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  vertical-align: top;
}

.doc-rich-editor th {
  background: #e9f4f8;
  color: var(--dark-blue);
}

.doc-mention {
  display: inline-flex;
  border-radius: 999px;
  padding: 1px 7px;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  font-weight: 700;
}

.doc-page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #5e7682;
  font-size: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.doc-word-count {
  color: #8aacba;
}

/* Emoji picker */
.doc-emoji-picker {
  position: absolute;
  top: 8px;
  left: 56px;
  z-index: 200;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(17, 40, 55, 0.12);
  width: 220px;
}

.doc-emoji-picker.hidden {
  display: none;
}

.doc-emoji-btn {
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 5px;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  text-align: center;
  transition: background 0.1s;
}

.doc-emoji-btn:hover {
  background: rgba(26, 156, 197, 0.1);
}

.doc-comments-panel {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding-top: 18px;
}

.doc-comment-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.doc-comment-compose-input-wrap {
  position: relative;
  min-width: 0;
}

.doc-comment-compose textarea {
  min-height: 72px;
  width: 100%;
}

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

.doc-comment-item {
  display: grid;
}

.doc-comment-item p {
  margin: 4px 0 0;
}

.doc-comment-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.doc-comment-meta strong {
  color: var(--color-text);
}

.doc-history-panel {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

/* Doc editor head */
.doc-editor-head-left {
  flex: 1 1 0;
}

.doc-editor-meta {
  margin: 4px 0 0;
}

.doc-editor-head-actions {
  flex-shrink: 0;
}

/* Autosave chip */
.autosave-chip {
  transition: opacity 0.3s;
}

.autosave-chip.hidden {
  display: none;
}

/* Toolbar separator */
.toolbar-sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 2px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Doc checkbox items */
.doc-checkbox-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 3px 0;
}

.doc-cb-mark {
  line-height: 1;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.doc-checkbox-item.is-checked > *:not(.doc-cb-mark) {
  text-decoration: line-through;
  opacity: 0.55;
}

/* Doc toolbar color picker */
.doc-color-label {
  display: flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--line);
  background: #eef6fa;
  border-radius: 9px;
  padding: 5px 8px;
  cursor: pointer;
  position: relative;
}

.doc-color-label:hover {
  background: #d6eef8;
}

.doc-color-icon {
  font-weight: 700;
  font-size: 13px;
  color: var(--color-text);
  border-bottom: 3px solid #000000;
  line-height: 1.1;
  padding-bottom: 1px;
}

.doc-color-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  border: none;
  padding: 0;
  top: 0;
  left: 0;
  overflow: hidden;
}

/* Doc editor area — scrollable A4 desk */
.doc-editor-area {
  position: relative;
  margin: 0 -18px -18px;
  padding: 24px 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100vh - 230px);
  min-height: 600px;
  overflow-y: scroll;
  overflow-x: auto;
  scroll-behavior: smooth;
}

/* @mention autocomplete dropdown */
.doc-mention-dropdown {
  display: grid;
  gap: 2px;
  padding: 6px;
  min-width: 160px;
  max-width: 240px;
}

.doc-mention-dropdown.hidden {
  display: none;
}

.doc-mention-option {
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--dark-blue);
  font-weight: 600;
}

.doc-mention-option:hover,
.doc-mention-option.is-hovered {
  background: rgba(26, 156, 197, 0.1);
  outline: none;
}

/* Doc side tab panel */
.doc-panel-section {
  border-top: 1px solid var(--line);
  padding-top: 4px;
}

.doc-panel-tabs {
  margin-bottom: 14px;
}

.doc-panel-tab {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
}

.doc-panel-content.hidden {
  display: none;
}

/* Live presence bar */
.doc-presence-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.doc-presence-bar.hidden {
  display: none;
}

.presence-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--presence-color, #1a9cc5);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.presence-label {
  font-size: 12px;
  color: var(--doc-leise);
  font-style: italic;
}

@media (max-width: 980px) {
  .settings-admin-shell {
    grid-template-columns: 1fr;
  }

  .settings-admin-nav {
    position: static;
    max-height: none;
  }

  .user-overview-toolbar {
    grid-template-columns: 1fr;
  }

  .user-detail-head {
    flex-direction: column;
  }

  .docs-sidebar-panel {
    position: static;
    max-height: none;
  }

  .doc-editor-head {
    flex-direction: column;
  }

  .doc-target-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .doc-target-row .primary-button,
  .doc-target-row .doc-upload-label {
    grid-row: 2;
  }

  .doc-comment-compose,
  .doc-comment-item {
    grid-template-columns: 1fr;
  }

  .doc-rich-editor {
    min-height: 320px;
    padding: 28px 22px;
  }
}

.warn-text {
  font-weight: 700;
}

.hidden {
  display: none;
}

.report-table th,
.report-table td {
  white-space: nowrap;
}

.report-table th {
  min-width: 80px;
  overflow: hidden;
}

.report-table th:first-child,
.report-table td:first-child {
  min-width: 0;
  width: 36px;
  padding: 0 8px;
  text-align: center;
}

.report-table th:last-child,
.report-table td:last-child {
  min-width: 0;
  width: 36px;
  padding: 4px 6px;
}

.report-table tbody tr.is-selected {
  background: rgba(44, 158, 201, 0.08) !important;
}

.report-table-action-cell {
  padding: 4px 6px !important;
  white-space: nowrap;
}

/* Checkbox column */
.report-col-check {
  width: 36px;
  min-width: 0 !important;
  text-align: center;
  padding: 0 8px !important;
}

.report-row-select,
[data-select-all-entries] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--medium-blue, #2c9ec9);
  vertical-align: middle;
}

/* Billable badges */
.report-billable-yes {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--color-success);
  font-weight: 600;
  font-size: 12px;
}

.report-billable-no {
  color: var(--muted, #7892a0);
  font-size: 12px;
}

/* Bulk action bar */
/* v347: awork-Stil – schwebender Auswahl-Balken + Aktionsmenü */
.report-bulk-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 16px 11px 22px;
  background: #0f1f3d;
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 60;
  width: min(720px, calc(100vw - 40px));
  margin: 0;
}

.report-bulk-count {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
}

.report-bulk-bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.report-bulk-cancel {
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
}
.report-bulk-cancel:hover { background: rgba(255, 255, 255, 0.2); }

.report-bulk-choose {
  display: inline-flex;
  align-items: center;
  border: none;
  background: var(--medium-blue, #2c9ec9);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
}
.report-bulk-choose:hover { filter: brightness(1.08); }

.report-bulk-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: 264px;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e2ecf2);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  padding: 6px;
  display: flex;
  flex-direction: column;
  max-height: min(70vh, 460px);
  overflow-y: auto;
}
.report-bulk-menu.hidden { display: none; }
.report-bulk-menu-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted, #8aa0ad);
  padding: 8px 10px 4px;
}
.report-bulk-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--medium-blue, #1f6f8b);
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.report-bulk-menu button:hover { background: rgba(44, 158, 201, 0.1); }
.report-bulk-menu button.danger { color: #c0392b; }
.report-bulk-menu button.danger:hover { background: rgba(192, 57, 43, 0.1); }
.report-bulk-menu-sep {
  border: none;
  border-top: 1px solid var(--c-border, #eef3f6);
  margin: 5px 6px;
}
.bulk-modal-field { width: 100%; margin-top: 10px; }
@media (max-width: 600px) {
  .report-bulk-bar { width: calc(100vw - 24px); bottom: 72px; gap: 8px; padding: 10px 12px; }
  .report-bulk-count { font-size: 12.5px; }
  .report-bulk-bar-actions { gap: 6px; }
  .report-bulk-cancel { padding: 8px 12px; }
  .report-bulk-choose { padding: 8px 14px; }
  .report-bulk-menu { width: min(264px, calc(100vw - 32px)); }
}

.report-row-delete {
  transition: opacity 140ms ease;
  padding: 3px 7px !important;
  font-size: 12px;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1380px) {
  .task-layout,
  .task-layout.is-split,
  .project-task-layout,
  .project-task-layout.is-split {
    grid-template-columns: 1fr;
  }

  .project-home-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-panel {
    width: 100vw;
  }

  .project-task-detail-panel {
    position: static;
    max-height: none;
  }

  .project-task-detail-wrap {
    border-left: 0;
    margin-top: 10px;
  }

  .project-task-bottom-facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {

  .dashboard-head {
    flex-direction: column;
  }

  .dashboard-head-controls .stack {
    min-width: 0;
    width: 100%;
  }

  .project-task-list-row {
    /* Mobile: 6-col layout */
  }

  .day-planner-header {
    flex-direction: column;
  }

  .day-planner-target {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-task-row-right {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-left: 64px;
    flex-wrap: wrap;
    overflow: visible;
  }

  .sidebar {
    border-bottom-right-radius: 18px;
    border-bottom-left-radius: 18px;
  }

  .project-home-main {
    grid-template-columns: 1fr;
  }

  .project-home-icon {
    width: 58px;
    height: 58px;
    font-size: 30px;
  }

  .project-home-quick-actions {
    justify-content: flex-start;
  }

  .home-grid,
.task-columns,
.task-custom-fields-grid,
.project-home-kpi-grid {
    grid-template-columns: 1fr;
  }

  .management-row {
    flex-direction: column;
  }

  .comment-composer-row {
    flex-wrap: wrap;
  }

  .settings-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-row-right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .time-entry-item {
    flex-direction: column;
  }

  .time-entry-item-right {
    justify-items: start;
  }
}

/* 9.2 Eyebrow / breadcrumb clarity */
.eyebrow,
.eyebrow-label {
  text-transform: uppercase;
  font-weight: 700;
}

.eyebrow-label {
  margin: 0;
  /* v704: von #8899a6 abgedunkelt — 10px fett kam auf hellem Grund nur auf
     2,7:1. WCAG AA verlangt auch bei fetter Kleinschrift 4,5:1. */
  color: #5a6b78;
}

/* 9.3 Meta hierarchy */
.task-title,
.comment-body,
.project-task-title-btn,
.day-planner-task-title,
.management-row-title strong {
  color: #1a2e3b;
  font-size: 14px;
  font-weight: 600;
}

.muted,
.comment-meta,
.management-row-title .muted {
  color: #51626e;
}

.timestamp,
.dashboard-activity-item time,
.activity-item time {
  color: #5f7380;
  font-size: 11px;
}

/* 9.4 Heading scale hierarchy */
.headline {
  font-size: clamp(28px, 2.6vw, 30px);
}

.panel > h2,
.panel-header > h2 {
  font-size: clamp(20px, 2vw, 22px);
}

.panel > h3,
.panel-header > h3,
.project-task-section h4,
.day-planner-section h4 {
  font-size: 16px;
}

/* 9.5 Medium/semibold usage */
button {
  font-weight: 600;
}

label > span,
.settings-row strong,
.toolbar-inline > strong {
  font-weight: 500;
  font-size: 13px;
  color: #374151;
}

/* 10 Chips/badges normalization */
.badge,
.task-meta-chip,
.project-tag-pill,
.task-multi-select-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 10px;
  font-weight: 500;
  white-space: nowrap;
}

.badge.warn {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  letter-spacing: 0.03em;
}

.management-row-meta .badge.ok {
  background: rgba(14, 165, 160, 0.12);
  color: #0a7a76;
}

/* 10.4 Calendar event clipping */
.calendar-chip {
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-chip[title] {
  cursor: help;
}

/* 11.1 Workday buttons unified */
.workday-panel .split.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.workday-panel .split.split-2 button {
  height: 40px;
  border-radius: 8px;
}

/* 11.2 Disabled state stronger */
button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* 11.3 Export input-group feel */
.export-controls {
  gap: 0;
}

.export-controls > * {
  border-radius: 0;
  margin-left: -1px;
}

.export-controls > *:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  margin-left: 0;
}

.export-controls > *:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.export-controls select:last-of-type {
  border-right: 0;
}

.export-controls select:last-of-type + button {
  border-left: 1px solid #cbd5e1;
  white-space: nowrap;
}

.export-controls.is-compact-export {
  margin: 0;
  width: auto;
}

.export-controls.is-compact-export > * {
  border-radius: 12px;
  margin-left: 0;
}

.export-controls.is-compact-export .export-menu-field {
  display: none;
  min-width: 170px;
}

.export-controls.is-compact-export.is-open .export-menu-field,
.export-controls.is-compact-export:focus-within .export-menu-field {
  display: block;
}

.export-controls.is-compact-export .export-icon-button {
  border-radius: 12px;
  border: 1px solid #cddde5;
  background: #e6f1f6;
  color: var(--dark-blue);
  font-weight: 900;
}

.export-controls.is-compact-export.is-open .export-icon-button {
  background: var(--medium-blue);
  border-color: var(--medium-blue);
  color: #fff;
}

.management-toolbar .export-controls.is-compact-export {
  margin-left: auto;
}

/* 11.4 Planner footer placement */
.day-planner-card {
  display: flex;
  flex-direction: column;
}

.day-planner-content {
  flex: 1;
}

.day-planner-footer {
  margin-top: auto;
}

/* 12 Calendar spacing/details */
.calendar-weekday {
  padding: 8px 0 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #51626e;
  border-bottom: 2px solid #e5e7eb;
}

.calendar-day {
  padding: 8px 6px 6px;
}

/* JAS-119: Die Tageszahl bekommt ihre eigene runde Marke; die KW-Markierung
 * (.calendar-kw-badge) sitzt daneben im `header` (space-between, § 6825) statt
 * in derselben 26px-Kreisfläche verdeckt zu werden. */
.calendar-day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin: 2px 0 4px 2px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
}

.calendar-day.is-today .calendar-day-number {
  background: var(--medium-blue);
  color: #fff;
}

.calendar-day.is-planning-blocked.is-today .calendar-day-number {
  background: #b91c1c;
}

#calendarMonthLabel {
  min-width: 130px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

/* 14 Planner card spacing */
.day-planner-header {
  padding: 24px;
}

.day-planner-meta {
  margin-top: 10px;
  gap: 10px;
}

.day-planner-content {
  padding-top: 20px;
}

.day-planner-intro p {
  color: #51626e;
  font-size: 13px;
  margin-top: 4px;
}

/* 15.2 Consistent grid gutters */
.home-grid,
.task-layout,
.project-task-layout,
.management-shell,
.management-list,
.project-facts-grid {
  gap: var(--grid-gutter);
}

@media (max-width: 1100px) {
  .workday-panel .split.split-2 {
    grid-template-columns: 1fr;
  }
}

.empty-state p {
  line-height: 1.5;
}

/* Bulk Action Toolbar */
.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}

.bulk-toolbar.hidden {
  display: none !important;
}

#view-aufgaben .bulk-toolbar {
  align-self: flex-start;
  max-width: 720px;
  padding: 8px 10px;
  background: rgba(218, 235, 245, 0.7);
  border: 1px solid rgba(39, 145, 181, 0.14);
}

#view-aufgaben .bulk-toolbar select {
  width: min(220px, 44vw);
  height: 34px;
}

#view-aufgaben .bulk-toolbar .ghost-button {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}
.task-card-bulk-cb {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--light-blue);
  z-index: 2;
}
.task-card {
  position: relative;
}
.task-card.bulk-selected {
  outline: 2px solid var(--light-blue);
  outline-offset: 2px;
}

/* Global Search Dropdown */
.search-dropdown {
  position: absolute;
  max-height: 280px;
  z-index: 500;
  margin-top: 4px;
}
.search-result-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
}
.search-result-item:last-child {
  border-bottom: none;
}
.search-result-icon {
  flex-shrink: 0;
  text-align: center;
}
.search-result-type-badge {
  flex: 0 0 auto;
  min-width: 64px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(148, 205, 224, 0.22);
  background: rgba(148, 205, 224, 0.1);
  color: #c8e0ec;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}
.search-result-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-type {
  white-space: nowrap;
}
.search-match {
  background: rgba(255, 220, 80, 0.35);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
  font-weight: 600;
}

.kpi-overdue-badge {
  font-size: 10px;
  vertical-align: middle;
  padding: 1px 5px;
}

/* Recurring task indicator */
.task-meta-chip.is-recurring {
  background: rgba(16, 185, 129, 0.10);
  color: var(--color-success);
  border: 1px solid rgba(16, 185, 129, 0.28);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

[data-theme="dark"] .task-meta-chip.is-recurring {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}

/* Task tags */
.task-meta-chip.is-tag {
  background: rgba(99, 102, 241, 0.1);
  color: #4f46e5;
  border: 1px solid rgba(99, 102, 241, 0.25);
  font-size: 10px;
  font-weight: 600;
}

[data-theme="dark"] .task-meta-chip.is-tag {
  background: rgba(99, 102, 241, 0.18);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.35);
}

.tag-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.task-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.1);
  color: #4f46e5;
  border: 1px solid rgba(99, 102, 241, 0.25);
  cursor: pointer;
  transition: background 0.12s;
}

.task-tag-chip:hover {
  background: rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .task-tag-chip {
  background: rgba(99, 102, 241, 0.18);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.35);
}

.task-detail-field-group-full {
  grid-column: 1 / -1;
}

/* Tag filter chip in task toolbar */
.task-filter-chip.is-tag-chip {
  color: #4f46e5;
  border-color: rgba(99, 102, 241, 0.35);
}

.task-filter-chip.is-tag-chip.is-active {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
  border-color: #6366f1;
}

[data-theme="dark"] .task-filter-chip.is-tag-chip {
  color: #a5b4fc;
  border-color: rgba(165, 180, 252, 0.3);
}

[data-theme="dark"] .task-filter-chip.is-tag-chip.is-active {
  background: rgba(99, 102, 241, 0.22);
  color: #c7d2fe;
}

/* Time entry inline editing */

.time-entry-edit-billable {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

/* Keyboard shortcut modal */

kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  background: var(--bg-hover, #f3f6fa);
  border: 1px solid var(--border-color, #dde3ea);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
  color: var(--color-text);
  line-height: 1.6;
}

/* Toast / Snackbar */
.toast-container {
  position: fixed;
  bottom: 80px;
  right: 24px;
  display: grid;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
  max-width: calc(100vw - 48px);
}
/* v393: Auf Mobile über Bottom-Nav + FAB positionieren, Layout zentrieren */
@media (max-width: 768px) {
  .toast-container {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px); /* Bottom-Nav + Safe-Area + Margin */
    right: 16px;
    left: 16px;
    max-width: none;
    justify-items: stretch;
  }
  .toast-container .toast {
    text-align: center;
    margin-right: 80px; /* Platz für FAB rechts */
  }
}

.toast {
  background: #1a2d3a;
  color: #e2edf3;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  animation: toast-in 240ms ease forwards, toast-out 300ms ease 2700ms forwards;
  max-width: 320px;
  border-left: 4px solid var(--light-blue);
}

.app-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(12, 30, 40, 0.36);
  /* ALLE-1/JAS-124: sanftes Einblenden statt hartem Erscheinen */
  animation: app-dialog-backdrop-in 180ms ease;
}

.app-dialog-card {
  width: min(440px, calc(100vw - 36px));
  /* ALLE-1/JAS-124: sanftes Einblenden statt hartem Erscheinen */
  animation: app-dialog-card-in 200ms ease;
}

@keyframes app-dialog-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes app-dialog-card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .app-dialog-backdrop,
  .app-dialog-card {
    animation: none;
  }
}

/* ALLE-1/JAS-124: sanftes Auf-/Zuklappen für native <details>-Elemente
   (Aufklapp-Bereiche in Integrationen, Aufgaben, Auswertungen etc.), rein
   über CSS — keine Logikänderung. Nur dort aktiv, wo der Browser das neue
   `::details-content`-Pseudo-Element kennt; sonst bleibt der bisherige,
   harte Sprung als Rückfall unverändert bestehen. `prefers-reduced-motion`
   schaltet die Animation zusätzlich global ab. */
@media (prefers-reduced-motion: no-preference) {
  details {
    interpolate-size: allow-keywords;
  }
  details::details-content {
    overflow: hidden;
    height: 0;
    transition: height 200ms ease, content-visibility 200ms ease allow-discrete;
  }
  details[open]::details-content {
    height: auto;
  }
}

.app-dialog-body {
  display: grid;
  gap: 10px;
}

.app-dialog-body h3 {
  margin: 0;
  font-size: 1.25rem;
}

.app-dialog-body p {
  margin: 0;
  color: #4e616e;
  line-height: 1.5;
}

.app-dialog-input {
  width: 100%;
}
.app-pick-list {
  margin-top: 10px;
}
.toast.success { border-left-color: var(--ok); }
.toast.error   { border-left-color: var(--high); }
.toast.warn    { border-left-color: var(--warn); }
/* Undo-toast stays visible longer — JS removes it after 5 s */
.toast-with-action { display: flex; align-items: center; gap: 12px; animation: toast-in 240ms ease forwards; }
.toast-undo-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(226, 237, 243, 0.45);
  color: #e2edf3;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.toast-undo-btn:hover { background: rgba(226, 237, 243, 0.15); }
/* Fehler direkt am Feld: Text unter dem Feld, Rahmen wie .input-error. */
.feld-fehler {
  margin: 4px 0 0;
  color: var(--color-danger, #b3261e);
  font-size: 12.5px;
  font-weight: 600;
}
.feld-fehler[hidden] { display: none; }
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--color-danger, #b3261e) !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}
@keyframes toast-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(6px); }
}

/* Dark Mode */
[data-theme="dark"] {
  --line: #2e4450;
  --white: #1a2a34;
  color-scheme: dark;
}
[data-theme="dark"] .topbar {
  background: rgba(15, 30, 40, 0.85);
  border-color: rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .panel {
  background: rgba(18, 32, 42, 0.9);
  border-color: rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .task-card {
  background: #152130;
  border-color: var(--line);
}
[data-theme="dark"] .task-card:hover {
  background: #1b2d3e;
}
[data-theme="dark"] .task-card.selected {
  background: #1d3448;
  border-color: var(--light-blue);
}
[data-theme="dark"] input:not(.side-search input),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #1a2d3a;
  color: var(--dark-grey);
  border-color: var(--line);
}
[data-theme="dark"] .ghost-button {
  color: #b0ccd8;
  border-color: var(--line);
}
[data-theme="dark"] .ghost-button:hover {
  background: rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .primary-button {
  background: var(--medium-blue);
}
[data-theme="dark"] .work-schedule-day-badge {
  background: #1e3a4a;
  color: #8ec5d8;
}
[data-theme="dark"] .work-schedule-day-badge.is-off {
  background: rgba(148, 163, 184, 0.12);
  color: var(--muted);
}
[data-theme="dark"] .panel-header {
  border-color: var(--line);
}
[data-theme="dark"] .muted,
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .project-fact-label {
  color: #5f8499;
}
[data-theme="dark"] .management-row {
  border-color: var(--line);
}
[data-theme="dark"] .management-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .time-entry-item {
  border-color: var(--line);
}
[data-theme="dark"] .task-column {
  background: rgba(15, 27, 36, 0.7);
  border-color: var(--line);
}
[data-theme="dark"] .task-column-header {
  background: rgba(20, 35, 47, 0.9);
  border-color: var(--line);
}

[data-theme="dark"] .doc-editor-toolbar {
  background: rgba(20, 45, 60, 0.8);
}

[data-theme="dark"] .doc-link-search-input {
  background: rgba(20, 50, 65, 0.7);
  border-color: var(--line);
  color: var(--dark-grey);
}

[data-theme="dark"] .doc-item {
  background: #152130;
  border-color: var(--line);
}

[data-theme="dark"] .doc-title-button {
  color: #e6f3f8;
}

[data-theme="dark"] .file-ext-badge {
  background: #1a3048;
  color: #7ecbec;
}

[data-theme="dark"] .project-home-description {
  border-color: rgba(255,255,255,0.1);
  color: #a0bec9;
}

[data-theme="dark"] .project-home-description.is-empty {
  color: #4a6577;
}
[data-theme="dark"] .doc-editor-toolbar button,
[data-theme="dark"] .doc-color-label {
  background: rgba(30, 70, 95, 0.6);
  border-color: var(--line);
  color: var(--dark-grey);
}
[data-theme="dark"] .doc-mention-dropdown {
  background: #0f1e28;
  border-color: var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
[data-theme="dark"] .doc-mention-option:hover {
  background: rgba(26, 156, 197, 0.18);
}
[data-theme="dark"] .presence-avatar {
  border-color: #1a2a34;
}
[data-theme="dark"] .comment-mention-dropdown {
  background: #0f1e28;
  border-color: var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
[data-theme="dark"] .comment-mention-option:hover,
[data-theme="dark"] .comment-mention-option.is-hovered {
  background: rgba(26, 156, 197, 0.18);
}
[data-theme="dark"] .autosave-chip {
  background: rgba(46, 204, 113, 0.12);
  color: #55d98a;
}
[data-theme="dark"] .calendar-day {
  background: #152130;
  border-color: var(--line);
}
[data-theme="dark"] .calendar-day.today {
  background: #1a3048;
}
[data-theme="dark"] .project-inner-nav.panel {
  background: rgba(15, 27, 36, 0.9);
}
[data-theme="dark"] .project-overview-group {
  border-color: var(--line);
}
[data-theme="dark"] .notification-drawer,
[data-theme="dark"] .mention-drawer {
  background: #0f1e28;
  border-color: var(--line);
}
[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}
[data-theme="dark"] .modal {
  background: #0f1e28;
  border-color: var(--line);
}
[data-theme="dark"] .headline,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
  color: #d0e8f2;
}
[data-theme="dark"] .detail-panel {
  background: #0f1e28;
  border-color: var(--line);
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .time-tile-planned {
  background: #112a3a;
  color: #7cc4e0;
}
[data-theme="dark"] .time-tile-tracked {
  background: #0e2818;
  color: #5bc48a;
}
[data-theme="dark"] .time-tile-diff.positive {
  background: #2a2010;
  color: #f0c050;
}
[data-theme="dark"] .time-tile-diff.negative {
  background: #2a1010;
  color: #e08080;
}
[data-theme="dark"] .task-column-add {
  border-color: var(--line);
  color: #4e6a7a;
}
[data-theme="dark"] .subtask-progress-bar {
  background: #1e3a4a;
}

/* Feature 11 - Board Drag & Drop */
.task-card.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.task-card[draggable="true"] {
  cursor: grab;
}
.task-column.drag-over {
  outline: 2px dashed var(--light-blue);
  outline-offset: -4px;
  background: rgba(59, 173, 227, 0.06);
}

/* Feature 13 - Calendar Drag & Drop */
.calendar-chip[draggable="true"] {
  cursor: grab;
}
[data-calendar-day].drag-over {
  background: rgba(59, 173, 227, 0.12);
  outline: 2px dashed var(--light-blue);
}

[data-calendar-day].drag-blocked {
  outline-color: #b91c1c;
  cursor: not-allowed;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(185, 28, 28, 0.08) 0,
      rgba(185, 28, 28, 0.08) 8px,
      rgba(255, 255, 255, 0.45) 8px,
      rgba(255, 255, 255, 0.45) 16px
    ),
    #fff8f8;
}

/* Feature 15 - Dashboard Widget Drag & Drop */
[data-widget-key] {
  cursor: grab;
  transition: box-shadow 120ms ease, opacity 120ms ease;
}
[data-widget-key="workday"] {
  cursor: default;
}
[data-widget-key].is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
[data-widget-key].drag-over {
  outline: 2px dashed var(--light-blue);
  outline-offset: -4px;
}

/* Bug fixes (05/2026) */

/* B-01/B-02/L-01 - Drawer backdrop */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 49;
}
.notification-drawer {
  z-index: 50;
  top: 8px;
  /* v413: max-height entfernt — identisch zur Hauptdef bei L5509 und wird durch
     L19212 (min(70vh, calc(100vh - 24px))) ohnehin überschrieben. */
}

/* B-03/S-01 - User menu popup */
.user-menu-popup {
  position: fixed;
  top: 60px;
  right: 12px;
  min-width: 200px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(9, 50, 65, 0.18);
  z-index: 200;
  overflow: hidden;
  animation: fade-in 160ms ease;
}
.user-menu-header {
  padding: 12px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid var(--line);
}
.user-menu-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: inherit;
}
.user-menu-item:hover {
  background: rgba(41, 123, 150, 0.08);
}
.warn-text { color: #b91c1c; }

/* L-02 - Active nav item font weight */
.side-link.is-active {
  font-weight: 700;
}

/* L-07 - Overdue button: neutral instead of bright red */
.day-planner-overdue-toggle {
  border-color: var(--line);
  color: var(--dark-blue);
  background: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

/* B-08 - Project inner tab text not clipped */
.project-inner-link {
  white-space: nowrap;
  max-width: min(220px, 42vw);
}
.project-inner-link.is-active {
  max-width: none;
}

/* L-05 - bottom padding so FAB doesn't cover content */
.main > section {
  padding-bottom: 80px;
}

/* Section */

/* 2 - UI body font overrides (CI headlines unchanged) */
button, input, select, textarea,
.muted, .eyebrow, .badge, .avatar-mini,
.management-row-meta, .notif-count,
.panel-header, .toolbar-inline,
.task-meta, .task-card-actions,
.assignee-row, .simple-list, .my-task-item {
  font-family: var(--ui-font);
}

/* 6 - Sidebar nav icons */
.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
}
.side-link .nav-icon {
  transition: transform 180ms ease, opacity 180ms ease;
}
.side-link:hover .nav-icon {
  opacity: 1;
  transform: scale(1.12);
}
.side-link.is-active .nav-icon {
  opacity: 1;
}
/* Collapsed: hide text span, show only icon */
.sidebar.collapsed .side-link span {
  display: none;
}
.sidebar.collapsed .side-link {
  justify-content: center;
  gap: 0;
}
.sidebar.collapsed .side-link::before {
  content: none;
}

/* 7 - Micro-transitions on interactive elements */
.ghost-button {
  transition: background 140ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.ghost-button:not(:disabled):hover {
  background: rgba(41, 123, 150, 0.22);
  transform: translateY(-1px);
}
.ghost-button.tiny:not(:disabled):hover {
  transform: none;
}

input, select, textarea {
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--light-blue) !important;
  box-shadow: 0 0 0 3px rgba(44, 158, 201, 0.15);
}

/* Gold warning indicator (replaces harsh orange) */
.warning-item.warn {
  border-left: 3px solid var(--gold);
}

/* 4 - Management rows: subtle shadow + rounding */
.management-row {
  box-shadow: var(--shadow-card);
  background: var(--white);
  transition: box-shadow 160ms ease;
}
.management-row:hover {
  box-shadow: 0 2px 4px rgba(9, 50, 65, 0.05), 0 8px 20px rgba(9, 50, 65, 0.11);
}

/* 5 - Topbar elevation */
.topbar {
  background: var(--white);
  border: 1px solid rgba(216, 228, 234, 0.6);
  box-shadow: 0 1px 2px rgba(9, 50, 65, 0.04), 0 4px 14px rgba(9, 50, 65, 0.07);
}

/* Search input focus ring in sidebar */
.side-search input:focus {
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

/* Notification drawer: clean white card */

@media (max-width: 560px) {

  .notification-drawer .drawer-actions select,
  .notification-drawer .drawer-actions button {
    width: 100%;
    flex-basis: auto;
  }
}

/* Dark mode: update warm tokens */
[data-theme="dark"] {
  --gold-light: rgba(232, 192, 96, 0.14);
  --terracotta-light: rgba(194, 96, 80, 0.14);
}
[data-theme="dark"] .badge.warn {
  color: #5a3800;
  background: #c89840;
}

/* Typografie-Rhythmus */
body,
p,
li {
  line-height: 1.55;
}

label > span,
.muted,
.kpi-label,
.project-fact-label,
.project-home-meta-label,
.project-home-kpi-label,
.lohn-kpi-label,
.ptimer-field-label,
.task-detail-field-label,
.auswertung-create-field-label,
.auswertung-create-field-label-sm,
.task-meta-chip {
  line-height: 1.4;
}

.kpi-label,
.project-fact-label,
.project-home-kpi-label,
.lohn-kpi-label,
.ptimer-field-label,
.task-detail-field-label,
.auswertung-create-field-label,
.auswertung-create-field-label-sm {
  font-size: var(--label-xs-size);
  font-weight: var(--label-xs-weight);
  letter-spacing: var(--label-xs-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.panel-header h2,
.panel-header h3,
.settings-card h3,
.lohn-summary-card-header h3 {
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
  font-weight: 800;
}

.panel-header.compact h2,
.panel-header.compact h3 {
  font-size: var(--font-size-base);
}

.main {
  padding: var(--space-6);
  gap: var(--space-4);
}

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: var(--space-6) var(--space-4);
}

.brand {
  margin-bottom: var(--space-5);
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.side-nav-group {
  display: grid;
  gap: var(--space-1);
}

.side-nav-separator {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: var(--space-2) 0;
}

.side-link {
  padding: 10px 16px;
}

[data-theme="dark"] .side-link {
  color: #d7e8f0;
}

[data-theme="dark"] .side-link:not(.is-active) {
  color: #c6d7df;
  background: rgba(255, 255, 255, 0.08);
}

.side-link:hover {
  transform: none;
}

.side-link.is-active {
  border-left: 3px solid var(--gold);
  padding-left: 13px;
  transition: none;
}

/* Sidebar Task Filter Section */

.sidebar-filter-item-row {
  display: flex;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
  transition: background 0.15s;
}

.sidebar-filter-item-row:hover {
  background: rgba(255, 255, 255, 0.07);
}

.sidebar-filter-item-row.is-active {
  background: rgba(39, 145, 181, 0.2);
  border-left: 2px solid var(--light-blue);
}

.sidebar-filter-item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 7px 8px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 8px;
  transition: color 0.15s;
}

.sidebar-filter-item:hover,
.sidebar-filter-item-row.is-active .sidebar-filter-item {
  color: #fff;
}

.sidebar-filter-item-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.65;
}

.sidebar-filter-item-delete {
  opacity: 0;
  transition: opacity 0.15s;
  color: rgba(255, 255, 255, 0.5) !important;
  border: none !important;
  background: none !important;
  min-height: unset !important;
  padding: 4px 8px !important;
  font-size: 12px;
}

.sidebar-filter-item-row:hover .sidebar-filter-item-delete {
  opacity: 1;
}

.sidebar-filter-item-delete:hover {
  color: #ff7070 !important;
}

.sidebar-filter-empty {
  font-style: italic;
}

/* Filter Builder Modal */
.fb-modal-card {
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  padding: 0;
}
.fb-modal-header {
  flex-shrink: 0;
}
.fb-modal-header h2 { font-size: var(--type-card-title); font-weight: 800; margin: 0; }
.fb-modal-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  flex: 1;
  overflow: hidden;
  min-height: 400px;
}
.fb-left {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fb-field-search {
  margin: 10px 10px 6px;
  min-height: 32px;
  font-size: 13px;
}
.fb-field-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 8px;
}
.fb-field-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-blue);
  padding: 8px 12px 4px;
  margin: 0;
}
.fb-field-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  font-size: 13px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text);
  border-radius: 0;
  transition: background 0.1s;
}
.fb-field-item:hover { background: rgba(44,158,201,0.08); color: var(--medium-blue); }
.fb-right {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fb-right-top {
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.fb-name-input { flex: 1; min-width: 160px; font-size: 14px; }
.fb-logic-row { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fb-conditions {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fb-empty-hint {
  margin: 0;
}
.fb-condition {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--bg-page, #f5f9fb);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.fb-cond-field-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--dark-blue);
  padding: 5px 0;
  white-space: nowrap;
}
.fb-cond-op {
  font-size: 12px;
  min-height: 28px;
  padding: 3px 6px;
}
.fb-cond-val-text,
.fb-cond-val-date {
  font-size: 12px;
  min-height: 28px;
  padding: 3px 8px;
  flex: 1;
  min-width: 120px;
}
.fb-pill-group { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex: 1; }
.fb-pill {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--color-surface);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  white-space: nowrap;
}
.fb-pill:hover { border-color: var(--medium-blue); color: var(--medium-blue); }
.fb-pill.is-sel { background: var(--medium-blue); border-color: var(--medium-blue); color: #fff; }
.fb-cond-remove { margin-left: auto; align-self: flex-start; margin-top: 2px; }
.fb-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
[data-theme="dark"] .fb-condition { background: #0a1820; }

.side-utility {
  margin-top: var(--space-4);
}

.side-search {
  margin-top: 0;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  gap: var(--space-2);
}

.my-tasks h2 {
  margin-bottom: var(--space-2);
}

#myTasksList li {
  padding: 10px 12px;
}

.topbar-title-block {
  display: grid;
  gap: var(--space-1);
  align-content: center;
}

.headline {
  margin: 0;
  line-height: 1.05;
}

.topbar-controls > .primary-button {
  min-height: 44px;
  padding-inline: 16px;
  box-shadow: 0 8px 20px rgba(30, 81, 103, 0.13);
}

.header-workday-controls {
  /* v199: 2-zeiliges Layout: Status oben, Buttons unten */
  display: flex !important;
  flex-direction: column;
  gap: 5px;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(247, 251, 253, 0.96), rgba(235, 245, 250, 0.9));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 1px 3px rgba(9,50,65,0.06);
}

.header-workday-state {
  display: block;
  color: var(--dark-blue);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .01em;
  white-space: nowrap;
}

.header-workday-actions {
  /* v199: Flex statt Grid → Buttons skalieren auf ihren Text-Inhalt */
  flex-wrap: nowrap;
}

.header-workday-actions .ghost-button.tiny {
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Aktive Buttons: blauer Akzent */
.header-workday-actions .ghost-button.tiny:not(:disabled) {
  border-color: rgba(41, 123, 150, 0.30);
}
.header-workday-actions .ghost-button.tiny:not(:disabled):hover {
  border-color: rgba(41, 123, 150, 0.45);
}

/* Inaktive Buttons: dezent ausgegraut, aber sichtbar */
.header-workday-actions .ghost-button.tiny:disabled {
  opacity: 0.38;
  color: #7a93a1;
  border-color: rgba(154, 170, 179, 0.22);
  background: transparent;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.sync-status-chip {
  /* v460: stärkerer Hintergrund + dunklerer Text für WCAG AA Contrast */
}

.sync-status-chip.is-syncing {
  border-color: rgba(240, 180, 41, 0.4);
  background: rgba(240, 180, 41, 0.12);
  color: #79570e;
}

.sync-status-chip.is-offline {
  border-color: rgba(185, 28, 28, 0.22);
}

.panel-header {
  margin-bottom: var(--space-4);
  gap: var(--space-3);
}

.panel-header.compact {
  margin-bottom: var(--space-3);
}

.split,
.split-2,
.split-3,
.task-custom-fields-grid {
  gap: var(--space-3);
}

input,
select,
textarea {
  min-height: 42px;
  padding: 10px 12px;
}

.dashboard-head {
  grid-template-columns: minmax(320px, 1fr) auto;
}

.dashboard-head-intro {
  display: grid;
  gap: var(--space-1);
  border-bottom: 1px solid #e6edf2;
}

.dashboard-head h2 {
  margin: 0;
}

.dashboard-head-controls {
  align-items: flex-end;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}

.home-grid {
  margin-top: var(--space-4);
  gap: var(--space-4);
}

.workday-panel p {
  margin: 0;
}

.workday-panel .muted {
  line-height: 1.6;
}

.workday-panel .muted + .muted {
  margin-top: var(--space-1);
}

.workday-panel .split {
  gap: var(--space-3);
}

.workday-panel .stack {
  margin-top: var(--space-2);
}

.workday-panel .primary-button,
.workday-panel .ghost-button {
  min-height: 44px;
  width: 100%;
}

.workday-panel [data-open-project-timer-panel],
.mein-tag-proj-list [data-open-project-timer-panel],
[data-open-project-timer-panel].is-primary-action {
  color: var(--white);
  background: var(--primary-gradient);
  box-shadow: 0 2px 8px rgba(41, 123, 150, 0.25);
  font-weight: 700;
}

.workday-panel .stack,
.workday-panel .split,
.workday-panel .split-2 {
  min-width: 0;
}

.project-space {
  gap: var(--space-4);
}

.project-space-head {
  gap: var(--space-4);
}

.project-action-row {
  margin-top: var(--space-1);
}

.project-task-layout,
.project-task-lists-shell {
  gap: var(--space-4);
}

.project-task-list-group {
  gap: var(--space-3);
}

.project-task-list-card {
  padding: 12px 14px;
}

.project-task-detail-wrap {
  padding-left: var(--space-4);
}

.project-task-detail-panel {
  padding: var(--space-4);
  gap: var(--space-4);
  top: var(--space-2);
}

.project-task-detail-fields {
  grid-template-columns: 132px 1fr;
  gap: var(--space-3);
}

.project-task-detail-fields > label {
  padding-top: 10px;
}

.task-multi-select-dropdown {
  padding: 10px;
  gap: 10px;
}

.task-multi-select-options {
  max-height: 220px;
}

.task-multi-select-option {
  padding: 8px 10px;
}

.project-task-section {
  padding-top: var(--space-4);
}

.project-task-section h4 {
  margin-bottom: var(--space-3);
}

.project-task-bottom-facts {
  padding-top: var(--space-4);
  gap: var(--space-3);
}

.project-task-fact {
  padding: 10px 12px;
  gap: 6px;
}

.project-home-awork {
  padding: var(--space-6);
  gap: var(--space-6);
}

.project-home-topline {
  gap: var(--space-4);
}

.project-home-main {
  gap: var(--space-5);
}

.project-home-main-content {
  gap: var(--space-4);
}

.project-home-meta-grid {
  gap: var(--space-3);
}

.project-home-meta-row {
  grid-template-columns: 100px minmax(0, 1fr);
  gap: var(--space-4);
}

.project-home-description {
  padding: var(--space-4) var(--space-3);
}

.project-home-kpi-card {
  min-height: 132px;
  gap: var(--space-2);
}

.project-home-kpi-value {
  margin-top: var(--space-2);
}

.project-home-kpi-sub {
  margin-top: var(--space-1);
}

.project-home-team-strip {
  padding-top: var(--space-4);
  gap: var(--space-3);
}

.project-home-activity {
  padding: var(--space-4);
}

.management-shell,
.management-list {
  gap: var(--space-4);
}

.management-toolbar {
  gap: var(--space-3);
}

.management-row {
  gap: var(--space-4);
}

.management-row-main {
  gap: var(--space-3);
}

.settings-card h3 {
  margin-bottom: var(--space-3);
}

.settings-row {
  padding: 10px 12px;
}

.settings-row + .settings-row {
  margin-top: var(--space-2);
}

.simple-list {
  gap: var(--space-3);
}

.project-fact-card {
  border: 1px solid #d8e6ee;
  border-radius: 14px;
  background: rgba(252, 255, 255, 0.92);
  gap: var(--space-2);
}

.project-fact-card--warn {
  border-color: rgba(231, 76, 60, 0.35);
  background: rgba(231, 76, 60, 0.04);
}

.project-fact-label {
  margin: 0;
  color: #4c6778;
  font-size: var(--type-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.project-fact-value {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: var(--kpi-value-size);
}

.project-fact-value.is-negative {
  color: #c0392b;
}

@media (max-width: 1100px) {
  .main {
    padding: var(--space-4);
  }

  .dashboard-head {
    grid-template-columns: 1fr;
  }

  .dashboard-head-controls {
    width: 100%;
    align-items: stretch;
  }

  .project-task-detail-fields {
    grid-template-columns: 1fr;
  }

  .project-task-detail-fields > label {
    padding-top: 0;
  }
}

/* WORKING state - green pulsing */

@keyframes work-dock-pulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(39, 174, 96, 0.38); }
  50%       { box-shadow: 0 4px 28px rgba(39, 174, 96, 0.65); }
}

/* Work time floating panel */

.work-time-panel-status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #4c6778;
}

.work-time-panel-elapsed {
  font-family: "Futura Heavy", "Futura", "Avenir Next", sans-serif;
  font-style: italic;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  color: #183d53;
  line-height: 1.1;
}

.work-time-panel-elapsed.is-onbreak {
  color: #e67e22;
  font-size: 22px;
}

.work-time-panel-meta {
  font-size: 12px;
  color: #5c7585;
}

.work-time-panel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.break-type-btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--dark-blue);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 140ms ease;
}

.break-type-btn:hover {
  background: rgba(41, 123, 150, 0.18);
}

.work-time-panel-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2px 0;
}

.work-time-panel-proj-section {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7a93a1;
  margin-bottom: 2px;
}

.work-time-panel-proj-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.work-time-panel-proj-label {
  font-size: 12px;
  color: #3d5663;
}

.work-time-panel-proj-elapsed {
  font-variant-numeric: tabular-nums;
}

.work-time-panel-proj-inactive {
  font-size: 12px;
  color: #7a93a1;
}

/* Section */

.zeiten-subnav {
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: 20px;
  overflow-x: auto;
}

.zeiten-tab-btn {
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.zeiten-pane {
  display: grid;
  gap: 20px;
}

.zeiten-pane.hidden {
  display: none;
}

/* Section */

.kontingent-overview-table td:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* v435: Kontingent-Overview – letzte Spalte (Details/Schließen-Button) nicht abschneiden */
.kontingent-overview-table th:last-child,
.kontingent-overview-table td:last-child {
  min-width: 100px;
  overflow: visible;
  text-overflow: clip;
}
/* Wrap-Container für horizontales Scrollen falls Tabelle zu breit wird */
#overtimeContingentPane {
  overflow-x: auto;
}

.overtime-balance-pos { color: var(--color-success); }
.overtime-balance-neg { color: var(--color-danger); }

.kontingent-payout-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.input-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.input-row label input {
  font-size: 14px;
}

[data-theme="dark"] .overtime-balance-chip {
  background: rgba(41, 123, 150, 0.15);
  color: #7ecbec;
}
[data-theme="dark"] .overtime-balance-chip.overtime-balance-pos {
  background: rgba(31, 143, 85, 0.2);
  color: #4cd596;
}
[data-theme="dark"] .overtime-balance-chip.overtime-balance-neg {
  background: rgba(185, 28, 28, 0.2);
  color: #f87171;
}
[data-theme="dark"] .is-active-row > td {
  background: rgba(41, 123, 150, 0.12);
}

/* Lohn page */
.lohn-shell { display: flex; flex-direction: column; gap: 0; }

/* Page header */
.lohn-page-header {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--color-border);
}
.lohn-page-title h1 { margin: 0; font-size: 20px; font-weight: 800; color: var(--dark-blue); }
.lohn-header-controls { display: flex; flex-wrap: wrap; align-items: center; }
.lohn-year-label { font-size: 16px; font-weight: 700; color: var(--dark-blue); }

/* ── Admin-Badge ──────────────────────────────────────────────── */
/* Small circle indicator on admin-only nav items, headings, columns */
.admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1e5167;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  vertical-align: middle;
  margin-left: 5px;
  flex-shrink: 0;
  cursor: default;
  user-select: none;
  transition: opacity .15s;
}
.admin-badge:hover { opacity: 0.85; }

/* Hide badge text in collapsed sidebar (icon-only mode) */
.sidebar.collapsed .admin-badge { display: none; }

/* Slightly lighter in dark mode */
[data-theme="dark"] .admin-badge { background: #2e7a9a; }

/* User selector (segment style) */
.lohn-user-selector { display: flex; gap: 4px; flex-wrap: wrap; }

/* User switcher inside the Mitarbeiter detail panel */
.user-detail-switcher {
  padding: 10px 24px 4px;
  border-bottom: 1px solid var(--color-border);
}
.user-detail-switcher:empty { display: none; }
.lohn-user-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border); background: transparent;
  font-size: 13px; font-weight: 500; cursor: pointer;
  color: var(--color-text-muted); transition: all .15s;
}
.lohn-user-btn:hover { border-color: var(--dark-blue); color: var(--dark-blue); }
.lohn-user-btn.is-active { background: var(--dark-blue); border-color: var(--dark-blue); color: #fff; }
.lohn-user-btn[disabled] { cursor: default; opacity: 1; }

/* v435: Soll-Modell-Switch im Lohn-Header */
.lohn-payroll-model-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--color-border, #d8e2eb);
  border-radius: 6px;
  background: var(--color-surface, #fff);
  font-size: 12px;
}
.lohn-payroll-model-select {
  border: none;
  background: transparent;
  font-size: 12px;
  padding: 2px 4px;
  color: var(--color-text, #183d53);
  cursor: pointer;
}
.lohn-payroll-monthly-h {
  width: 60px;
  padding: 2px 4px;
  border: 1px solid var(--color-border, #d8e2eb);
  border-radius: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* v434: Dropdown-Variante des Lohn-User-Switchers */
.lohn-user-selector-dropdown {
  position: relative;
}
.lohn-user-selector-dropdown .lohn-user-btn {
  cursor: pointer;
  padding-right: 8px;
}
.lohn-user-selector-dropdown .lohn-user-btn .kw-icon {
  margin-left: 4px;
  transition: transform 150ms ease;
}
.lohn-user-selector-dropdown .lohn-user-btn[aria-expanded="true"] .kw-icon {
  transform: rotate(180deg);
}
.lohn-user-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #d8e2eb);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lohn-user-popover.hidden {
  display: none;
}
.lohn-user-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--color-text, #183d53);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.lohn-user-popover-item:hover {
  background: var(--row-hover-bg, rgba(14, 97, 140, 0.06));
}
.lohn-user-popover-item.is-active {
  background: rgba(44, 158, 201, 0.10);
  color: var(--dark-blue);
  font-weight: 600;
}
.lohn-user-popover-item .kw-icon {
  margin-left: auto;
  color: var(--dark-blue);
}

/* KPI bar */
.lohn-kpi-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-bottom: 1px solid var(--color-border);
}
.lohn-kpi {
  min-width: 0;
  align-content: center;
  gap: 5px;
}
.lohn-kpi:last-child { border-right: none; }
.lohn-kpi-label {
  display: block;
  margin: 0;
}

.lohn-kpi strong.overtime-balance-pos,
.lohn-cockpit-table .overtime-balance-pos,
.kontingent-overview-table .overtime-balance-pos {
  color: var(--color-success);
}

.lohn-kpi strong.overtime-balance-neg,
.lohn-cockpit-table .overtime-balance-neg,
.kontingent-overview-table .overtime-balance-neg {
  color: var(--color-danger);
}

/* Sub-label (bis heute / % Monats-Soll) */
.lohn-kpi-sub {
  display: block;
  font-size: 10.5px;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-top: 3px;
  line-height: 1.3;
}
.lohn-kpi-sub.overtime-balance-neg { color: var(--color-danger); }
.lohn-kpi-sub.lohn-warn-text       { color: var(--gold, #c8890e); }

/* Tab nav */
.lohn-tab-nav {
  margin: 12px 16px 0;
  overflow-x: auto;
}
.lohn-tab-btn {
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

/* Tab content */
.lohn-tab-content { padding: 16px; gap: 14px; }

/* Summary row (2 cards side by side) */
.lohn-summary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lohn-summary-card-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.lohn-summary-card-header h3 { margin: 0; font-weight: 600; }
.lohn-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
}
.lohn-kpi-row .lohn-kpi {
  padding: 10px 14px;
}
.lohn-kpi-row .lohn-kpi:last-child { border-right: none; }
.lohn-kpi-row .lohn-kpi strong { font-size: 15px; }

/* Capture / inline add forms */
.lohn-capture-form { padding: 4px 0 8px; }
.lohn-capture-form button[type="submit"],
.lohn-inline-add-form button[type="submit"] {
  margin-top: 10px;
}

/* Inline add form inside a table section — subtle separator + tint */
.lohn-inline-add-form {
  margin: 0 16px 0;
  padding: 10px 14px 14px;
  background: rgba(30, 81, 103, 0.06);
  border-radius: 6px;
  border: 1px solid rgba(30, 81, 103, 0.13);
}
[data-theme="dark"] .lohn-inline-add-form {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Empty state */
.lohn-empty-state { padding: 20px 16px; }

/* Alert */
.lohn-alert { font-size: 13px; font-weight: 600; }
.lohn-alert-warn   { border-bottom: 1px solid var(--gold); }
.lohn-alert-danger { border-bottom: 1px solid var(--color-danger); }

/* Table */
.lohn-cockpit-table th,
.lohn-cockpit-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
/* Override generic report-table first/last child rules that break alignment */
.lohn-cockpit-table th:first-child,
.lohn-cockpit-table td:first-child {
  width: 100px !important;
  min-width: 80px !important;
  padding: 8px 12px !important;
  text-align: left !important;
}
.lohn-cockpit-table th:last-child,
.lohn-cockpit-table td:last-child {
  /* v435: Button-Spalte darf nicht abgeschnitten werden. Auto statt fixed-width
     + min-width für "Sperren" + Icon (~120px). overflow:visible damit Button
     nicht durch parent-Clip verschwindet. */
  width: auto !important;
  min-width: 120px !important;
  padding: 8px 10px !important;
  text-align: left !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* ── Column resize handle (all resizable tables) ────────────────── */
.col-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  z-index: 2;
  flex-shrink: 0;
}
.col-resize-handle:hover { background: rgba(41, 123, 150, 0.25); }
th.is-resizing .col-resize-handle,
.col-resize-handle:active { background: rgba(41, 123, 150, 0.45); }
/* While resizing: block text selection and show cursor everywhere */
body.col-resizing { cursor: col-resize !important; user-select: none !important; }
.lohn-cockpit-table .ghost-button.tiny {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
}
.lohn-cockpit-table input[type="number"] {
  height: 32px;
}
.lohn-month-row:hover td { background: var(--color-primary-softer); }
.lohn-row-locked td { opacity: 0.65; }
.lohn-row-current td { font-weight: 600; }
.lohn-totals-row td { background: var(--color-surface-muted); }

/* Kept for backward compat in renderMeinTag overtime card */
.lohn-vacation-account { display: flex; flex-wrap: wrap; }
.lohn-vac-stat { flex: 1; min-width: 120px; padding: 10px 14px; border-right: 1px solid var(--color-border); }
.lohn-vac-stat:last-child { border-right: none; }
.lohn-vac-label { display: block; font-size: 11px; color: var(--color-text-muted); margin-bottom: 3px; }

/* Dark theme */
[data-theme="dark"] .lohn-page-header  { background: var(--color-surface); }
[data-theme="dark"] .lohn-kpi-bar      { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .lohn-tab-nav      { background: var(--color-surface); }
[data-theme="dark"] .lohn-row-current td { background: rgba(41,123,150,0.12); }
[data-theme="dark"] .lohn-totals-row td  { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .lohn-user-btn.is-active { background: var(--dark-blue); }
[data-theme="dark"] .lohn-kpi-sub          { color: rgba(255,255,255,0.45); }

/* Section */

.mein-tag-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px) {
  .mein-tag-layout { grid-template-columns: 1fr; }
}

.mein-tag-status-card {
  display: grid;
  gap: 8px;
}

.mein-tag-status-card.is-working {
  background: linear-gradient(145deg, #e8f8ef, #d5f0e1);
  border-color: #a8d8bc;
}

.mein-tag-status-card.is-onbreak {
  background: linear-gradient(145deg, #fef9ec, #fdf0c8);
  border-color: #f3d97a;
}

.mein-tag-status-label {
  font-size: var(--type-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: #5a7a8a;
}

.mein-tag-status-label.is-working { color: #1e8449; }
.mein-tag-status-label.is-onbreak { color: #b7770d; }

.mein-tag-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mein-tag-edit-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.mein-tag-edit-btn:hover {
  background: var(--color-surface-muted);
  color: var(--dark-blue);
  border-color: var(--color-border);
}

.mein-tag-edit-btn svg { width: 13px; height: 13px; }

.mein-tag-edit-pending {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border: 1px solid var(--status-pending-border);
  border-radius: var(--radius-pill);
  background: var(--status-pending-bg);
  color: var(--status-pending-text);
  cursor: pointer;
  white-space: nowrap;
}

.mein-tag-edit-pending:hover { filter: brightness(0.97); }

.mein-tag-big-time {
  font-family: "Futura Heavy", "Futura", "Avenir Next", sans-serif;
  font-style: italic;
  font-size: 32px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #183d53;
}

.mein-tag-big-time.is-working { color: #1a6e3c; }
.mein-tag-big-time.is-onbreak { color: #c07c10; font-size: 26px; }

.mein-tag-since {
  font-size: 13px;
  color: #5a7a8a;
}

.mein-tag-break-history {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mein-tag-break-entry {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: 9px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
}

.mein-tag-break-entry.is-active {
  border-color: color-mix(in srgb, var(--color-warning) 32%, transparent);
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.mein-tag-break-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
}

.mein-tag-break-entry.is-active .mein-tag-break-icon {
  background: color-mix(in srgb, var(--color-warning) 13%, transparent);
  color: var(--color-warning);
}

.mein-tag-checkin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 11px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 4px 18px rgba(41, 123, 150, 0.3);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.mein-tag-checkin-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(41, 123, 150, 0.42);
}

.mein-tag-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mein-tag-action-row .mein-tag-checkin-btn,
.mein-tag-action-row .mein-tag-checkout-btn,
.work-time-panel-actions .mein-tag-checkin-btn,
.work-time-panel-actions .mein-tag-checkout-btn {
  width: auto;
  flex: 1;
  min-width: 80px;
}

.mein-tag-checkout-btn {
  width: 100%;
  border: 1px solid #c8dde8;
  border-radius: 10px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.7);
  color: #3d5663;
  transition: background 140ms ease;
}

.mein-tag-checkout-btn:hover {
  background: #fff;
}

.mein-tag-checkout-btn.is-primary {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(39, 174, 96, 0.28);
}

/* Timeline blocks */
.mein-tag-blocks {
  display: grid;
  gap: 6px;
}

.mein-tag-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  font-size: 13px;
}

.mein-tag-block.is-work {
  border-left: 3px solid #27ae60;
}

.mein-tag-block.is-break {
  border-left: 3px solid #f39c12;
  background: rgba(255, 248, 230, 0.6);
  color: #6a4e1a;
}

.mein-tag-block-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 110px;
  font-size: 12px;
  color: #4c6778;
}

.mein-tag-block-dur {
  margin-left: auto;
  font-weight: 700;
  color: #183d53;
}

/* Project time list within mein tag */
.mein-tag-proj-list {
  display: grid;
  gap: 6px;
}

.mein-tag-proj-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--color-primary-soft);
  font-size: 13px;
}

.mein-tag-proj-dur {
  margin-left: auto;
  font-weight: 700;
  color: var(--dark-blue);
  white-space: nowrap;
}

.mein-tag-empty {
  padding: 32px;
  text-align: center;
}

.mein-tag-proj-list .mein-tag-empty {
  padding: 12px;
}

.mein-tag-proj-total {
  font-size: 12px;
  color: #5a7a8a;
  margin-top: 4px;
}

/* Quick manual time entry form (Nachtrag) */
.quick-time-entry-form {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick-te-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.quick-te-fields > select,
.quick-te-fields > .input-with-unit {
  min-width: 0;
}

.quick-te-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.quick-te-bottom > input[type="text"] {
  flex: 1;
  min-width: 120px;
}

[data-theme="dark"] .quick-time-entry-form {
  border-top-color: #2a3f52;
}

.delta-neg {
  color: #c0392b;
}

/* Day type quick buttons */

.daytype-btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: var(--color-primary-soft);
  color: #4c6778;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

/* Section */

.team-status-grid {
  display: grid;
  gap: 10px;
}

.team-status-card {
  display: flex;
  align-items: center;
  gap: 14px;
}

.team-status-card.is-working {
  border-left: 4px solid #27ae60;
}

.team-status-card.is-onbreak {
  border-left: 4px solid #f39c12;
}

.team-status-card.is-offline {
  border-left: 4px solid #c8d6de;
  opacity: 0.7;
}

.team-status-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #c8d6de;
}

.team-status-dot.is-working {
  background: #27ae60;
  box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);
  animation: team-dot-pulse 2.5s ease-in-out infinite;
}

@keyframes team-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2); }
  50%       { box-shadow: 0 0 0 6px rgba(39, 174, 96, 0.1); }
}

.team-status-dot.is-onbreak {
  background: #f39c12;
}

.team-status-name {
  font-weight: 700;
  font-size: 14px;
  color: #183d53;
}

.team-status-info {
  font-size: 12px;
  color: #5a7a8a;
}

.team-status-elapsed {
  margin-left: auto;
  font-family: "Futura Heavy", "Futura", "Avenir Next", sans-serif;
  font-style: italic;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  color: #183d53;
}

/* Sidebar dot for zeiten nav */
.zeiten-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #27ae60;
  margin-left: auto;
  flex-shrink: 0;
  animation: work-dock-pulse 2.8s ease-in-out infinite;
}

.zeiten-nav-dot.is-onbreak {
  background: #f39c12;
  animation: none;
}

/* Dark mode overrides */

[data-theme="dark"] .mein-tag-status-card.is-working {
  background: linear-gradient(145deg, #0b2a1a, #0a2216);
  border-color: #1a4a2a;
}

[data-theme="dark"] .mein-tag-status-card.is-onbreak {
  background: linear-gradient(145deg, #2a1e00, #221800);
  border-color: #4a3600;
}

[data-theme="dark"] .work-time-panel-elapsed {
  color: #d0e8f2;
}

[data-theme="dark"] .mein-tag-big-time {
  color: #d0e8f2;
}

[data-theme="dark"] .mein-tag-break-entry {
  border-color: rgba(120, 186, 216, 0.22);
  background: rgba(255, 255, 255, 0.055);
  color: #c3dce8;
}

[data-theme="dark"] .mein-tag-break-entry.is-active {
  border-color: rgba(243, 197, 95, 0.3);
  background: rgba(183, 119, 13, 0.12);
  color: #f0cf83;
}

[data-theme="dark"] .mein-tag-block {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .zeiten-tab-btn {
  color: rgba(180, 210, 225, 0.7);
}

[data-theme="dark"] .zeiten-tab-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #d0e8f2;
}

/* Zeitauswertungen Redesign */

/* Landing page */
.auswertung-landing {
  display: grid;
  gap: var(--space-6);
}

/* Auswertung Create Form */
.auswertung-create {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.auswertung-create-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.auswertung-create-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-5);
}

.auswertung-create-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auswertung-create-field-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.auswertung-create-field-label-sm {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
}

.auswertung-create-name {
  font-size: 1rem;
  font-weight: 500;
}

/* Preset tiles grid */
.auswertung-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.auswertung-preset-grid--small {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.auswertung-preset-tile {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-secondary, #f7f8fa);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text);
}

.auswertung-preset-tile:has(input:checked) {
  background: #e9f4ff;
  border-color: var(--medium-blue, #0e618c);
  color: var(--medium-blue, #0e618c);
}

.auswertung-preset-tile input[type="radio"] {
  display: none;
}

.auswertung-preset-label {
  pointer-events: none;
}

/* Custom date range */
.auswertung-custom-range {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-secondary, #f7f8fa);
}

/* Checklist (multi-select users / projects) */
.auswertung-checklist-toolbar {
  display: flex;
  gap: 6px;
}

.auswertung-checklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  background: var(--bg, #fff);
}

.auswertung-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.87rem;
  transition: background 100ms;
}

.auswertung-checklist-item:hover {
  background: var(--bg-hover, #f0f4f8);
}

/* Mitarbeiter-Auswahl in "Neue Auswertung": Namenskürzel-Reihe statt Checkbox-Liste */
.auswertung-avatar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.auswertung-avatar-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 58px;
  cursor: pointer;
}

.auswertung-avatar-chip input[type="checkbox"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.auswertung-avatar-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid transparent;
  filter: grayscale(1) opacity(0.35);
  transition: filter 150ms, border-color 150ms, transform 100ms;
}

.auswertung-avatar-chip:hover .auswertung-avatar-circle {
  transform: scale(1.06);
}

.auswertung-avatar-chip input:checked + .auswertung-avatar-circle {
  filter: none;
  border-color: var(--dark-blue, #1e5167);
  box-shadow: 0 0 0 2px rgba(30, 81, 103, 0.15);
}

.auswertung-avatar-name {
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: var(--color-text-muted, #6c7a89);
  text-align: center;
}

.auswertung-project-search,
.auswertung-filter-search {
  font-size: 0.84rem;
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg, #fff);
  color: var(--text);
  width: 100%;
}

.auswertung-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

/* Report detail filter: multi-select dropdowns */
.report-filter-multiselect-wrap {
  position: relative;
}

.report-filter-multiselect-btn {
  white-space: nowrap;
}

.report-filter-multiselect-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  background: var(--bg, #fff);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 40, 52, 0.14);
  min-width: 200px;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
}
.report-filter-multiselect-panel:not(.hidden) {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.auswertung-filter-checklist-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 100ms;
}

.auswertung-filter-checklist-item:hover {
  background: var(--bg-hover, #f0f4f8);
}

.auswertung-filter-all-item {
  font-weight: 600;
}

.auswertung-filter-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 3px 0;
}

[data-theme="dark"] .auswertung-preset-tile {
  background: var(--bg-secondary-dark, #23303a);
  border-color: var(--line-dark, #2e4050);
  color: var(--text-dark, #d0dde8);
}

[data-theme="dark"] .auswertung-preset-tile:has(input:checked) {
  background: #1a3a52;
  border-color: #3898c5;
  color: #7ec8f0;
}

[data-theme="dark"] .auswertung-checklist {
  background: var(--bg-dark, #1a2530);
  border-color: var(--line-dark, #2e4050);
}

[data-theme="dark"] .auswertung-checklist-item:hover,
[data-theme="dark"] .auswertung-filter-checklist-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .report-filter-multiselect-panel {
  background: var(--bg-dark, #1a2530);
  border-color: var(--line-dark, #2e4050);
}

[data-theme="dark"] .ptimer-search-input {
  background: var(--bg-dark, #1a2530);
  color: var(--text-dark, #d0dde8);
  border-color: var(--line-dark, #2e4050);
}

[data-theme="dark"] .ptimer-search-results {
  background: var(--bg-dark, #1a2530);
  border-color: var(--line-dark, #2e4050);
}

[data-theme="dark"] .ptimer-search-item:hover {
  background: rgba(123, 94, 167, 0.18);
}

[data-theme="dark"] .ptimer-activity-select,
[data-theme="dark"] .ptimer-note-input,
[data-theme="dark"] .ptimer-time-input {
  background: var(--bg-dark, #1a2530);
  color: var(--text-dark, #d0dde8);
  border-color: var(--line-dark, #2e4050);
}

[data-theme="dark"] .taetigkeit-row {
  background: var(--bg-secondary-dark, #23303a);
  border-color: var(--line-dark, #2e4050);
}

.auswertung-landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.auswertung-landing-title {
  margin: 0;
}

.auswertung-section {
  display: grid;
  gap: var(--space-3);
}

.auswertung-section h3 {
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #51626e;
}

/* Template tiles */
.auswertung-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

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

.auswertung-template-tile {
  gap: var(--space-3);
  background: rgba(252, 255, 255, 0.92);
  border: 1px solid #d8e6ee;
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.auswertung-template-tile:hover {
  border-color: var(--medium-blue);
  box-shadow: 0 4px 16px rgba(14, 97, 140, 0.1);
  transform: translateY(-1px);
}

.auswertung-tile-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.auswertung-tile-body {
  display: grid;
}

.auswertung-tile-body strong {
  font-size: 13px;
  font-weight: 600;
  color: #183d53;
  line-height: 1.3;
}

.auswertung-tile-body p {
  font-size: 12px;
  color: #51626e;
  line-height: 1.4;
}

/* Library list */
.auswertung-library-list {
  border: 1px solid #d8e6ee;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(252, 255, 255, 0.92);
}

.auswertung-library-head {
  display: grid;
  grid-template-columns: 1fr 140px 120px 36px;
  gap: var(--space-3);
  padding: 8px 14px;
  background: rgba(14, 97, 140, 0.05);
  border-bottom: 1px solid #d8e6ee;
  font-size: var(--type-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: #51626e;
}

.auswertung-library-row {
  display: grid;
  /* v430: 4. Spalte erweitert für Duplicate + Trash */
  gap: var(--space-3);
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #eaf0f5;
  transition: background 0.12s;
}

/* v430: Action-Cluster (Duplicate + Trash) — beide Buttons opaque-fade on hover */
.auswertung-library-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
.auswertung-library-actions > button {
  opacity: 0;
  transition: opacity 0.15s;
}
.auswertung-library-row:hover .auswertung-library-actions > button,
.auswertung-library-row:focus-within .auswertung-library-actions > button {
  opacity: 1;
}

.auswertung-library-row:last-child {
  border-bottom: none;
}

.auswertung-library-row:hover {
  background: rgba(14, 97, 140, 0.04);
}

.auswertung-library-name {
  font-size: 14px;
  font-weight: 500;
  color: #183d53;
}

.auswertung-library-preset,
.auswertung-library-updated {
  font-size: 13px;
  color: #51626e;
}

.auswertung-library-delete {
  transition: opacity 0.15s;
}

.auswertung-library-row:hover .auswertung-library-delete {
  opacity: 1;
}

/* Report detail */
.auswertung-detail {
  display: grid;
  gap: var(--space-5);
}

.auswertung-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.auswertung-back-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #51626e;
  font-size: 13px;
  flex-shrink: 0;
}

.auswertung-back-btn:hover {
  color: var(--medium-blue);
}

.auswertung-detail-header .time-report-name-input {
  flex: 1;
  min-width: 160px;
  font-size: 17px;
  font-weight: 600;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 4px 0;
  transition: border-color 0.15s;
}

.auswertung-detail-header .time-report-name-input:focus {
  outline: none;
  border-bottom-color: var(--medium-blue);
}

.auswertung-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* v430: Split-Save (Speichern | Caret) — eine optische Einheit */
.auswertung-save-split {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border, #d8e2eb);
  border-radius: 6px;
  overflow: hidden;
}
.auswertung-save-split > .auswertung-save-main {
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--color-border, #d8e2eb);
  padding-right: 10px;
}
.auswertung-save-split > .auswertung-save-as {
  border: none;
  border-radius: 0;
  padding: 4px 6px;
  min-width: 28px;
}
.auswertung-save-split > button:hover {
  background: rgba(14, 97, 140, 0.06);
}

.auswertung-export-format {
  font-size: 13px;
  padding: 5px 8px;
}

.auswertung-export-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}

/* Month navigation pill */
.auswertung-month-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  border: 1px solid #d8e6ee;
  border-radius: 8px;
  background: #fff;
}

.auswertung-month-label {
  padding: 0 8px;
  font-size: 13px;
  font-weight: 500;
  color: #183d53;
  white-space: nowrap;
  min-width: 110px;
  text-align: center;
}

/* KPI tile color variants */

.project-fact-card.is-teal {
  border-color: rgba(14, 97, 140, 0.25);
  background: rgba(14, 97, 140, 0.06);
}

.project-fact-card.is-teal .project-fact-value {
  color: var(--medium-blue);
}

.project-fact-card.is-orange {
  border-color: rgba(230, 145, 56, 0.3);
  background: rgba(230, 145, 56, 0.06);
}

.project-fact-card.is-orange .project-fact-value {
  color: #c87a1a;
}

.project-fact-card.is-gray {
  border-color: #d8e6ee;
  background: rgba(100, 130, 150, 0.05);
}

.project-fact-card.is-gray .project-fact-value {
  color: #51626e;
}

.project-fact-card.is-negative-card {
  border-color: rgba(192, 57, 43, 0.25);
  background: rgba(192, 57, 43, 0.05);
}

/* Muted KPI card — used when filter makes the value non-comparable */
.project-fact-card.is-muted-card {
  border-color: var(--color-border);
  background: var(--color-surface-muted);
  opacity: 0.7;
}

.project-fact-card.is-muted-card .project-fact-value {
  color: var(--color-text-muted);
}

/* Dark mode adjustments */
[data-theme="dark"] .auswertung-template-tile {
  background: rgba(30, 55, 70, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .auswertung-template-tile:hover {
  border-color: rgba(14, 97, 140, 0.6);
}

[data-theme="dark"] .auswertung-tile-body strong {
  color: #d0e8f2;
}

[data-theme="dark"] .auswertung-library-list {
  background: rgba(30, 55, 70, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .auswertung-library-head {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .auswertung-library-row {
  border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .auswertung-library-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .auswertung-library-name {
  color: #d0e8f2;
}

[data-theme="dark"] .auswertung-month-nav {
  background: rgba(30, 55, 70, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .auswertung-month-nav.is-active {
  border-color: rgba(14, 97, 140, 0.6);
  background: rgba(14, 97, 140, 0.15);
}

[data-theme="dark"] .auswertung-month-label {
  color: #d0e8f2;
}

[data-theme="dark"] .project-fact-card.is-teal {
  background: rgba(14, 97, 140, 0.12);
  border-color: rgba(14, 97, 140, 0.3);
}

[data-theme="dark"] .project-fact-card.is-orange {
  background: rgba(230, 145, 56, 0.1);
  border-color: rgba(230, 145, 56, 0.2);
}

[data-theme="dark"] .project-fact-card.is-gray {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .project-fact-card.is-negative-card {
  background: rgba(192, 57, 43, 0.1);
  border-color: rgba(192, 57, 43, 0.2);
}

[data-theme="dark"] .auswertung-landing-title {
  color: #d0e8f2;
}

/* Soll/Ist Fortschrittsbalken */

.work-progress-wrap {
  display: grid;
  gap: 8px;
}

.work-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.work-progress-scope-row {
  display: flex;
  gap: 3px;
}

.work-progress-scope-btn {
  padding: 3px 10px;
  border: 1px solid #c8d6de;
  border-radius: 999px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: #4c6778;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.work-progress-scope-btn:hover {
  background: rgba(14, 97, 140, 0.07);
  border-color: var(--medium-blue);
  color: var(--medium-blue);
}

.work-progress-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.work-progress-stat {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 12px;
}

.work-progress-stat-label {
  color: #51626e;
  font-size: 11px;
}

.work-progress-stat strong {
  font-size: 16px;
  color: var(--dark-blue, #183d53);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.work-progress-stat.is-primary strong {
  color: var(--medium-blue, #1a8fc7);
}

.work-progress-stat.is-overtime strong {
  color: #a83d50;
}

.work-progress-stat.is-done strong {
  color: #27ae60;
}

.work-progress-divider {
  color: #c8d6de;
  font-size: 12px;
}

.work-progress-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.work-progress-track {
  flex: 1;
}

.work-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0e618c, #1a8fc7);
  transition: width 0.8s ease;
  min-width: 4px;
}

.work-progress-fill.is-done {
  background: linear-gradient(90deg, #1a8c6a, #25b885);
}

.work-progress-fill.is-overtime {
  background: linear-gradient(90deg, #c0506a, #a03050);
  width: 100% !important;
}

.work-progress-pct {
  font-size: 12px;
  font-weight: 700;
  color: #4c6778;
  min-width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Dark mode */
[data-theme="dark"] .work-progress-title {
  color: rgba(180, 210, 225, 0.7);
}

[data-theme="dark"] .work-progress-scope-btn {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(180, 210, 225, 0.7);
}

[data-theme="dark"] .work-progress-scope-btn:hover {
  background: rgba(14, 97, 140, 0.2);
  border-color: rgba(14, 97, 140, 0.5);
  color: #d0e8f2;
}

[data-theme="dark"] .work-progress-scope-btn.is-active {
  background: var(--medium-blue);
  border-color: var(--medium-blue);
  color: #fff;
}

[data-theme="dark"] .work-progress-stat strong {
  color: #d0e8f2;
}

[data-theme="dark"] .work-progress-stat.is-primary strong {
  color: #5bc4e8;
}

[data-theme="dark"] .work-progress-track {
  background: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .zeiten-week-day {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Zeiten page refinements */
.zeiten-status-hero {
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) minmax(420px, 1.75fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid rgba(200, 221, 232, 0.95);
  border-radius: 22px;
  background: var(--hero-light-bg);
  box-shadow: var(--hero-shadow);
}

.zeiten-status-copy {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.zeiten-status-copy h2 {
  margin: 0;
  font-size: var(--type-section-title);
  font-weight: 800;
  color: var(--dark-blue);
}

.zeiten-status-copy p {
  margin: 0;
  max-width: 58ch;
  color: #51626e;
  font-size: 13px;
  line-height: 1.55;
}

.zeiten-status-reminder {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(44, 158, 201, 0.25);
  border-radius: 14px;
  background: rgba(44, 158, 201, 0.08);
  color: #365d71;
  font-size: 13px;
  font-weight: 600;
}

.zeiten-status-metrics {
  display: grid;
}

.zeiten-status-metric {
  min-width: 0;
}

.zeiten-status-metric span,
.zeiten-week-summary span {
  display: block;
  margin-bottom: 6px;
  color: #6b8493;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.zeiten-status-metric strong,
.zeiten-week-summary strong {
  display: block;
  overflow: hidden;
  color: var(--dark-blue);
  font-family: "Futura Heavy", "Futura", "Avenir Next", sans-serif;
  font-size: 23px;
  font-style: italic;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zeiten-status-progress {
  grid-column: 1 / -1;
}

.zeiten-status-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--medium-blue), var(--light-blue));
  transition: width 220ms ease;
}

.zeiten-status-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.zeiten-status-actions .primary-button,
.zeiten-status-actions .ghost-button {
  min-height: 38px;
}

.primary-button.danger-soft {
  background: linear-gradient(135deg, #1e5167, #297b96);
  color: #fff;
}

.zeiten-status-timer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: min(100%, 320px);
  margin-left: auto;
  padding: 8px 12px;
  border: 1px solid rgba(200, 221, 232, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #4d6978;
  font-size: 12px;
}

.zeiten-status-timer span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zeiten-status-timer strong {
  color: var(--dark-blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.zeiten-status-timer-value::before {
  content: "· ";
  color: #7a93a1;
  font-weight: 700;
}

.zeiten-week-shell {
  display: grid;
  gap: 16px;
}

.zeiten-week-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
}

.zeiten-week-head h2 {
  margin: 0;
  font-size: 24px;
}

.zeiten-week-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 5px;
}

.zeiten-week-nav-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.zeiten-week-label {
  font-size: 14px;
  font-weight: 600;
  color: #47677a;
  min-width: 148px;
  text-align: center;
}

.zeiten-week-label.is-current {
  color: var(--medium-blue);
}

.zeiten-week-head p {
  margin: 0;
  max-width: 62ch;
  color: #657c8a;
  font-size: 13px;
  line-height: 1.55;
}

.zeiten-week-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
  min-width: min(100%, 430px);
}

.zeiten-week-summary article {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #f7fbfd;
}

.zeiten-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(100px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.zeiten-week-day {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  border: 1px dashed #c8dde8;
  border-radius: 18px;
  background: rgba(247, 252, 255, 0.85);
  overflow: hidden;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.zeiten-week-day.is-today {
  border-color: var(--medium-blue);
  background: rgba(44, 158, 201, 0.08);
}

.zeiten-week-day.is-holiday {
  background: rgba(241, 196, 15, 0.07);
  border-color: rgba(241, 196, 15, 0.35);
}

.zeiten-week-holiday-name {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  color: #b7860c;
  line-height: 1.25;
}

.zeiten-week-day.is-drag-over {
  border-color: var(--light-blue);
  background: rgba(44, 158, 201, 0.14);
  transform: translateY(-1px);
}

/* Attendance entry list items */
.attendance-entry-item {
  flex-direction: column;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.attendance-entry-item:last-child {
  border-bottom: none;
}
.attendance-entry-detail {
  font-size: 12px;
}

.zeiten-week-day header {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: start;
  flex-wrap: wrap;
  min-width: 0;
}

.zeiten-week-day header strong {
  display: block;
  color: var(--dark-blue);
  font-size: 14px;
}

.zeiten-week-day header span {
  color: #6c8796;
  font-size: 11px;
}

.zeiten-week-warning {
  max-width: 100%;
  color: #8c650c !important;
  font-size: 9px !important;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  flex-shrink: 0;
}

.zeiten-week-warning.is-positive {
  background: rgba(26, 140, 106, 0.14);
  color: #146b52 !important;
}

.zeiten-week-day-bars {
  display: grid;
  gap: 5px;
}

.zeiten-week-day-bars div {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #dcebf2;
}

.zeiten-week-day-bars div span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--medium-blue), var(--light-blue));
}

.zeiten-week-day-bars p {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  color: #5c7583;
  font-size: 10px;
}

.zeiten-week-day-bars p > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.zeiten-week-entry-list {
  display: grid;
  gap: 8px;
}

.zeiten-week-entry {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #cfe1ea;
  border-radius: 13px;
  background: #fff;
  color: var(--dark-blue);
  font: inherit;
  text-align: left;
  cursor: grab;
  box-shadow: 0 6px 16px rgba(30, 81, 103, 0.06);
}

.zeiten-week-entry:active {
  cursor: grabbing;
}

.zeiten-week-entry span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zeiten-week-entry small,
.zeiten-week-empty {
  color: #718a98;
  font-size: 11px;
}

.zeiten-week-empty {
  margin: 0;
  padding: 10px;
}

.week-proj-chip {
  font: inherit;
  cursor: pointer;
  transition: background 120ms;
}

.week-proj-chip:hover {
  background: rgba(44, 158, 201, 0.2);
}

/* Mein Monat */
.monat-nav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.monat-grid-wrap {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}

.monat-weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #f0f7fb;
  border-bottom: 1px solid var(--line);
}

.monat-weekday-lbl {
  padding: 6px 0;
  color: #6b8493;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}

.monat-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.monat-day {
  min-height: 72px;
  padding: 7px 8px 6px;
  border-right: 1px solid rgba(200, 221, 232, 0.5);
  border-bottom: 1px solid rgba(200, 221, 232, 0.5);
  display: grid;
  align-content: start;
  gap: 4px;
}

.monat-day:nth-child(7n) { border-right: none; }

.monat-day-empty {
  background: rgba(245, 249, 252, 0.5);
}

.monat-day.is-today {
  background: rgba(44, 158, 201, 0.07);
}

.monat-day.is-weekend {
  background: rgba(245, 249, 252, 0.7);
}

.monat-day-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.monat-day-num {
  font-size: 12px;
  font-weight: 800;
  color: var(--dark-blue);
}

.monat-day-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.monat-day-edit-btn:hover { color: var(--dark-blue); }
.monat-day-edit-btn svg { width: 9px; height: 9px; }

.monat-day-edit-pending {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  padding: 0;
}

.monat-day.is-today .monat-day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2c9ec9;
  color: #fff;
  font-size: 11px;
}

.monat-day-warn {
  font-size: 9px;
  font-weight: 800;
  color: #8c650c;
  background: rgba(240, 180, 41, 0.15);
  padding: 1px 4px;
  border-radius: 999px;
}

/* Überstunden: grün statt gelb — gleiche Farben wie in der Wochenansicht. */
.monat-day-warn.is-positive {
  color: #146b52;
  background: rgba(26, 140, 106, 0.14);
}

.monat-day-times {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.monat-time-arbeit {
  font-size: 10px;
  font-weight: 700;
  color: #1e5167;
  background: rgba(44, 158, 201, 0.1);
  padding: 1px 5px;
  border-radius: 999px;
}

.monat-time-proj {
  font-size: 10px;
  font-weight: 700;
  color: #4a7a8a;
  background: rgba(176, 212, 232, 0.35);
  padding: 1px 5px;
  border-radius: 999px;
}

.monat-proj-chip {
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 120ms;
}

.monat-proj-chip:hover {
  background: rgba(44, 158, 201, 0.15);
}

@media (max-width: 1100px) {
  .zeiten-status-hero {
    grid-template-columns: 1fr;
  }

  .zeiten-status-timer {
    margin-left: 0;
  }

  .zeiten-week-head {
    align-items: stretch;
    flex-direction: column;
  }

  .zeiten-week-summary {
    min-width: 0;
  }
}


/* JAS-118: "Zeiten heute" (Arbeitszeit) und "Projektzeit" nebeneinander —
 * links Arbeitszeit, rechts Projektzeit. Nur Layout, keine eigene Logik. */
.dashboard-time-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  margin-top: 10px;
}

.dashboard-time-column {
  min-width: 0;
}

.dashboard-time-column .dashboard-time-status-grid {
  margin-top: 0;
}

@media (max-width: 760px) {
  .dashboard-time-columns {
    grid-template-columns: 1fr;
  }
}

.dashboard-time-status-grid {
  display: grid;
  margin-top: 12px;
}

.dashboard-time-status-grid-single {
  grid-template-columns: 1fr;
}

.dashboard-work-status-card-slot {
  margin-top: 0;
}
.dashboard-work-status-card-slot .mein-tag-status-card {
  margin: 0;
}

.dashboard-project-timer-card {
  width: 100%;
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.dashboard-project-timer-card:disabled {
  cursor: default;
  opacity: 1;
}

.dashboard-project-timer-card.is-active {
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.dashboard-project-timer-card.is-active:hover {
  border-color: color-mix(in srgb, var(--color-primary) 48%, transparent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-primary-hover) 11%, transparent);
  transform: translateY(-1px);
}

.dashboard-project-timer-card.is-active:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
  outline-offset: 2px;
}

.dashboard-time-status-card span {
  display: block;
  margin-bottom: 6px;
}

.dashboard-time-status-card strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* v524: Action-Row spiegelt das Card-Grid darüber (2 gleich breite Spalten),
 * damit die Buttons exakt unter ihrer jeweiligen Card sitzen. */
.dashboard-time-action-row {
  margin-top: 12px;
}

/* UI hardening: keep long labels inside controls/cards */
button,
select,
input,
textarea {
  max-width: 100%;
  min-width: 0;
}

button,
.ghost-button,
.primary-button,
.side-link,
.project-inner-link {
  overflow: hidden;
  text-overflow: ellipsis;
}

select,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="date"],
textarea {
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel,
.card,
.management-row,
.notification-item,
.dashboard-time-status-card,
.project-fact-card,
.task-card,
.project-board-task-item,
.global-awork-task-row,
.doc-item {
  min-width: 0;
}

.panel strong,
.panel p,
.panel li,
.management-row,
.notification-item,
.dashboard-time-status-card strong,
.project-fact-value,
.task-title,
.task-row-main,
.doc-item strong {
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
}

.split > *,
.toolbar-inline > *,
.management-toolbar > * {
  min-width: 0;
}

.export-controls.is-compact-export {
  align-items: center;
}

.export-controls.is-compact-export .export-menu-field {
  width: min(220px, calc(100vw - 96px));
}

.export-controls.is-compact-export:not(.is-open):not(:focus-within) {
  flex: 0 0 auto;
}

.panel,
.panel-subtle,
.settings-card,
.docs-editor-panel,
.embedded-form-panel {
  border-radius: var(--panel-radius);
}

.simple-list li,
.activity-item,
.dashboard-activity-item,
.notification-item,
.doc-comment-item,
.warning-item,
.vac-admin-row {
  border-radius: var(--list-item-radius);
}

.notification-drawer .drawer-actions select,
.notification-drawer .drawer-actions button {
  height: auto;
  min-height: 38px;
}

@media (max-width: 720px), (pointer: coarse) {
  button,
.ghost-button,
.primary-button,
.task-icon-button,
.icon-only-button,
.cal-view-tabs .ghost-button,
.zeiten-tab-btn,
.lohn-tab-btn,
.ptimer-ctrl-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .ghost-button.tiny {
    padding-inline: 12px;
  }

  .ptimer-pill-controls {
    gap: 6px;
  }

  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]),
  .inbox-select,
  .task-multi-select-option,
  .column-picker-item {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
  }

  .inbox-select {
    justify-content: center;
  }

  .task-card-bulk-cb {
    width: 24px;
    height: 24px;
    top: 6px;
    left: 6px;
  }
}

/* Tagesplan: use KoWork CI and the same list rhythm as tasks */
.day-planner-card {
  border-color: var(--line);
  box-shadow: 0 18px 42px rgba(30, 81, 103, 0.14);
}

.day-planner-header {
  background: var(--hero-dark-bg);
}

.day-planner-target select,
.day-planner-target input[type="date"] {
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.94);
}

.day-planner-task-search {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  background: #f7fbfd;
  padding: 10px 14px;
  color: var(--dark-blue);
}

.day-planner-task-search:focus {
  border-color: var(--medium-blue);
  box-shadow: 0 0 0 3px rgba(41, 123, 150, 0.14);
  outline: none;
}

.day-planner-block-notice {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  line-height: 1.45;
}

.day-planner-block-notice .ci-icon-svg {
  flex: 0 0 auto;
  color: #b91c1c;
}

.day-planner-task-list {
  gap: 6px;
}

.day-planner-task-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.92);
}

.day-planner-task-card:hover {
  border-color: color-mix(in srgb, var(--medium-blue) 42%, var(--line));
  background: #f7fbfd;
}

.day-planner-task-card.is-selected {
  border-color: color-mix(in srgb, var(--medium-blue) 76%, #fff);
  background: color-mix(in srgb, #ffffff 84%, var(--light-blue) 16%);
  box-shadow: 0 8px 18px rgba(30, 81, 103, 0.12);
}

.day-planner-task-card.is-selected .day-planner-task-check {
  border-color: var(--medium-blue);
  background: var(--medium-blue);
  box-shadow: inset 0 0 0 5px color-mix(in srgb, #ffffff 82%, var(--light-blue) 18%);
}

.day-planner-priority-pill.priority-high {
  color: #99422f;
  background: rgba(200, 94, 68, 0.14);
}

.day-planner-priority-pill.priority-medium {
  color: #805f14;
  background: rgba(240, 180, 41, 0.18);
}

.day-planner-priority-pill.priority-low {
  color: var(--dark-blue);
  background: rgba(44, 158, 201, 0.13);
}

.day-plan-short-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: color-mix(in srgb, var(--dark-blue) 74%, #ffffff);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.day-plan-short-cards {
  display: grid;
  gap: 7px;
}

.day-plan-short-card,
.day-plan-short-more {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--dark-blue);
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.day-plan-short-card strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
}

.day-plan-short-card span {
  display: block;
  margin-top: 3px;
  color: #617b89;
  font-size: 11px;
}

.day-plan-short-card:hover,
.day-plan-short-more:hover {
  border-color: var(--medium-blue);
  background: color-mix(in srgb, #ffffff 82%, var(--light-blue) 18%);
}

.sidebar .day-plan-short-head {
  color: rgba(255, 255, 255, 0.78);
}

.sidebar .day-plan-short-card,
.sidebar .day-plan-short-more {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.sidebar .day-plan-short-card span {
  color: rgba(255, 255, 255, 0.74);
}

/* Day plan card list — full-width, no extra padding from simple-list */
.day-plan-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  width: 100%;
}

.day-plan-saved-card {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

.day-plan-saved-card.is-archived {
  background: var(--color-surface-muted, #f7fbfd);
  border-color: var(--color-border, #d8e4ea);
  opacity: 0.82;
}

.day-plan-saved-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.day-plan-saved-head strong,
.day-plan-saved-head span {
  display: block;
}

.day-plan-saved-task-rows {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fbfdff;
}

.day-plan-saved-task-rows.is-locked {
  pointer-events: none;
  opacity: 0.65;
}

/* Action bar for past plans with open tasks */
.day-plan-expired-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
}

/* Archive badge inside archived plan card */
.day-plan-archive-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-muted, #51626e);
  padding: 4px 0;
}

/* C pass: layout, responsive behavior, floating layers */
html {
  overflow-x: hidden;
}

.main,
.panel,
.card,
.task-layout,
.project-task-layout,
.project-task-list-wrap,
.project-task-detail-wrap,
.task-detail-panel,
.project-task-detail-panel,
.management-list,
.simple-list,
.dashboard-team-item,
.zeiten-status-hero,
.calendar-grid {
  min-width: 0;
}

.panel,
.card,
.dashboard-team-item,
.notification-item,
.activity-item,
.project-task-list-row,
.task-row,
.doc-item,
.day-plan-short-card {
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
}

.task-title,
.project-task-title-btn,
.project-task-list-row strong,
.dashboard-team-item strong,
.notification-item strong,
.notification-item p,
.activity-item p,
.doc-item strong,
.day-plan-short-card strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
}

/* v365: #topbarBreadcrumb hier entfernt — konsolidierte Definition liegt bei
   Zeile ~20051. Diese alte Stelle hatte nicht-flex-kompatible Regeln und führte
   zum „Breadcrumbs umbrechen in mehrere Zeilen"-Bug auf Mobile. */

/* v368: Panel-Headers auf Mobile umbrechen statt überlaufen.
   `!important` notwendig, weil eine ältere Regel bei ~24771 `.panel-header.compact`
   mit `flex-wrap: nowrap !important` setzt. */
@media (max-width: 720px) {
  .panel-header,
  .panel-header.compact {
    flex-wrap: wrap !important;
  }
  .panel-header > * { min-width: 0; }
}

.topbar-controls {
  flex-wrap: wrap;
}

.notification-drawer {
  width: min(540px, calc(100vw - 24px));
  display: grid;
}

.notification-drawer.hidden {
  display: none;
}

.notification-drawer .drawer-actions {
  display: grid;
  gap: 8px;
  width: 100%;
}

.notification-drawer .drawer-actions select {
  width: 100%;
  flex: initial;
}

.notification-drawer .drawer-actions button {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

#notificationList,
#mentionList {
  min-height: 0;
}

.export-controls.is-compact-export {
  position: relative;
  justify-content: flex-end;
  gap: 6px;
}

.export-controls.is-compact-export .export-icon-button {
  flex: 0 0 38px;
  width: 38px;
  height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.export-controls.is-compact-export .export-menu-field {
  width: min(220px, calc(100vw - 120px));
}

.export-controls.is-compact-export.is-open,
.export-controls.is-compact-export:focus-within {
  flex-wrap: wrap;
}

.export-controls.is-compact-export.is-open .export-menu-field,
.export-controls.is-compact-export:focus-within .export-menu-field {
  flex: 1 1 150px;
}

.project-timer-dock {
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  max-width: min(520px, calc(100vw - 24px));
}

body.timer-dock-left .project-timer-dock {
  left: clamp(12px, 2vw, 24px);
}

body.timer-dock-top-right .project-timer-dock,
body.timer-dock-top-left .project-timer-dock {
  top: 92px;
  bottom: auto;
}

body.timer-dock-top-left .project-timer-dock {
  left: clamp(12px, 2vw, 24px);
  right: auto;
  justify-items: start;
}

body.timer-dock-top-right .project-timer-dock {
  right: clamp(12px, 2vw, 24px);
  left: auto;
}

/* Timer läuft unabhängig vom DOM weiter (state.projectTimers + Interval) —
 * das Ausblenden ist rein visuell. Wiedereinblenden: Checkbox in „Profil &
 * Anzeige" oder Klick auf den Sidebar-Timer-Chip bei „Zeiten". */
body.timer-dock-hidden .project-timer-dock {
  display: none;
}

/* Sidebar-Projektfavoriten */
.side-nav-favorite-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.side-link-favorite span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stern-Toggle in der Projektübersicht */
.project-pin-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted, #8a97a3);
  padding: 2px;
  border-radius: 6px;
}
.project-pin-toggle:hover {
  color: var(--kf-gold, #e8c060);
  background: color-mix(in srgb, var(--kf-gold, #e8c060) 12%, transparent);
}
.project-pin-toggle.is-pinned {
  color: var(--kf-gold, #e8c060);
}

.project-timer-tabs {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.ptimer-pill {
  max-width: min(340px, calc(100vw - 72px));
}

.ptimer-pill-label {
  max-width: clamp(72px, 24vw, 150px);
}

.project-timer-panel {
  width: min(430px, calc(100vw - 24px));
  max-height: calc(100vh - 110px);
  overscroll-behavior: contain;
}

.ptimer-panel-inner,
.ptimer-new-form,
.ptimer-active-block {
  min-width: 0;
}

.ptimer-search-results {
  max-height: min(320px, 42vh);
  overflow: auto;
}

.modal-card {
  max-width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
}

.column-picker-panel {
  max-width: min(360px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 96px));
  overflow: auto;
}

.dashboard-time-status-grid,
.zeiten-status-metrics {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.zeiten-status-actions {
  align-items: stretch;
}

.zeiten-status-actions .primary-button,
.zeiten-status-actions .ghost-button {
  flex: 0 1 auto;
}

.zeiten-status-timer {
  max-width: 100%;
  min-width: min(100%, 260px);
}

.toolbar-inline,
.management-toolbar,
.calendar-toolbar,
.panel-header {
  min-width: 0;
}

.toolbar-inline > *,
.management-toolbar > *,
.calendar-toolbar > * {
  min-width: 0;
}

@media (min-width: 1101px) {
  .task-layout.is-split {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr);
    align-items: start;
  }

  .task-layout.is-split .detail-panel {
    position: sticky;
    top: 14px;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 130px);
    transform: none;
    overflow: auto;
    border-radius: 18px;
    box-shadow: var(--shadow);
  }

  .project-task-layout.is-split {
    grid-template-columns: minmax(0, 1fr) minmax(430px, 0.95fr);
    align-items: start;
  }

  .awork-project-task-layout.is-split {
    grid-template-columns: minmax(0, 1fr) minmax(520px, 1fr);
  }

  .project-task-detail-panel {
    position: sticky;
    top: 14px;
    max-height: calc(100vh - 130px);
    overflow: auto;
  }

  .project-task-detail-wrap {
    border-left: 1px solid var(--line);
    padding-left: 12px;
    margin-top: 0;
  }

  .topbar-controls {
    flex-wrap: nowrap;
  }

  .header-workday-controls {
    flex-shrink: 1;
  }
}

@media (max-width: 1100px) {
  .topbar {
    flex-direction: column;
  }

  .topbar-controls {
    flex-wrap: wrap;
  }

  .topbar-title-block .headline {
    word-break: normal;
    overflow-wrap: normal;
  }

  .task-layout,
  .task-layout.is-split,
  .project-task-layout,
  .project-task-layout.is-split,
  .awork-project-task-layout,
  .awork-project-task-layout.is-split {
    grid-template-columns: 1fr;
  }

  .project-task-detail-panel {
    position: static;
    max-height: none;
  }

  .project-task-detail-wrap {
    border-left: 0;
    padding-left: 0;
    margin-top: 12px;
  }
}

@media (max-width: 900px) {

  .zeiten-status-hero {
    grid-template-columns: 1fr;
  }

  .zeiten-status-timer {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 720px) {
  .main {
    padding: 12px;
  }

  .panel-header {
    align-items: stretch;
  }

  .notification-drawer {
    right: 8px;
    top: 8px;
    width: calc(100vw - 16px);
  }

  .notification-drawer .drawer-actions select {
    grid-column: 1 / -1;
  }

  .project-timer-dock,
  body.timer-dock-left .project-timer-dock {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    justify-items: end;
  }

  body.timer-dock-top-right .project-timer-dock,
  body.timer-dock-top-left .project-timer-dock {
    top: 76px;
    bottom: auto;
  }

  .project-timer-panel {
    width: 100%;
    max-height: calc(100vh - 110px);
  }

  .project-timer-tabs {
    width: 100%;
    justify-items: end;
  }

  .ptimer-pill {
    max-width: 100%;
  }

  .ptimer-pill-controls {
    display: inline-flex;
  }
}

@media (max-width: 560px) {

  .header-workday-state {
    font-size: 11px;
  }

  .dashboard-time-action-row,
.zeiten-status-actions,
.toolbar-inline,
.management-toolbar,
.calendar-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .export-controls.is-compact-export {
    justify-content: start;
  }

  .export-controls.is-compact-export .export-icon-button {
    width: 100%;
  }
}

/* Statistik View */
.statistik-pane {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* v433: Statistik-Period-Control mit Select-Dropdown + Custom-Date-Pickers */
.stats-period-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* v442: Mobile — Period-Control + Custom-Picker auf voller Breite */
@media (max-width: 760px) {
  .stats-period-control {
    width: 100%;
  }
  .stats-period-select {
    flex: 1;
    min-height: 40px; /* Touch-target */
  }
  .stats-period-custom {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .stats-period-custom input[type="date"],
  .stats-period-custom input[type="month"] {
    min-height: 36px;
    flex: 1;
  }
}
.stats-period-select {
  min-width: 180px;
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--color-border-control);
  border-radius: 6px;
  background: var(--color-surface, #fff);
  font-size: 13px;
  color: var(--color-text, #183d53);
  cursor: pointer;
}
.stats-period-custom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--color-border, #d8e2eb);
  border-radius: 6px;
  background: var(--color-surface, #fff);
}
.stats-period-custom input[type="date"],
.stats-period-custom input[type="month"] {
  border: none;
  background: transparent;
  font-size: 13px;
  padding: 4px 0;
  color: var(--color-text, #183d53);
}
.stats-period-custom input:focus {
  outline: none;
}

.stats-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.stats-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stats-kpi-val {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--kpi-value-size);
  font-style: italic;
  font-weight: 800;
  color: var(--dark-blue);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stats-kpi-lbl {
  margin: 0;
  font-size: var(--type-label);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  line-height: var(--line-label);
}

.stats-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.stats-chart-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-light, #e8edf2);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 280px;
}

.stats-chart-card h3 {
  margin: 0;
  font-size: var(--type-card-title);
  font-weight: 800;
  color: var(--color-text);
}

.stats-chart-wide {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .stats-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .stats-chart-grid { grid-template-columns: 1fr; }
  .stats-chart-wide { grid-column: 1; }
}

@media (max-width: 600px) {
  .stats-kpi-row { grid-template-columns: 1fr 1fr; }
  .statistik-pane { padding: var(--space-3); }
}

/* ── Statistik: sections & new elements ─────────────────────────── */
.stats-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted, #8a9bb0);
  margin-top: var(--space-2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light, #e8edf2);
}

.stats-compare-note {
  font-size: 12px;
  margin: calc(var(--space-5) * -0.6) 0 0;
}

/* 8-column wide KPI row */
.stats-kpi-row-wide {
  grid-template-columns: repeat(8, 1fr);
}

/* KPI trend badge */
.stats-kpi-trend {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-top: 2px;
  min-height: 14px;
}
.stats-kpi-trend-up   { color: var(--color-success); }
.stats-kpi-trend-down { color: #dc2626; }
.stats-kpi-trend-neutral { color: var(--color-text-muted, #8a9bb0); }

/* Warning KPI card (overdue tasks) */

.stats-kpi-card-success {
  border-color: rgba(34, 197, 94, 0.28) !important;
  background: rgba(34, 197, 94, 0.08) !important;
}

.stats-kpi-card-success .stats-kpi-val {
  color: var(--color-success);
}

.stats-kpi-card-attention {
  border-color: rgba(180, 83, 9, 0.22) !important;
  background: rgba(251, 191, 36, 0.08) !important;
}

.stats-kpi-card-attention .stats-kpi-val {
  color: #92400e;
}

.lohn-neutral-note,
.overtime-neutral-state {
  margin: 10px 16px 0;
  padding: 12px 14px;
  border: 1px solid rgba(44, 158, 201, 0.18);
  border-radius: 12px;
  background: rgba(44, 158, 201, 0.07);
  color: #4f6f80;
  font-size: 13px;
  font-weight: 650;
}

.overtime-neutral-state {
  margin: 12px 16px;
}

/* Heatmap standalone card (outside chart-grid) */
.stats-heatmap-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-light, #e8edf2);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.stats-heatmap-card h3 {
  margin: 0;
  font-size: var(--type-card-title);
  font-weight: 800;
  color: var(--color-text);
}

/* Activity heatmap grid */
.stats-heatmap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-x: auto;
}
.stats-heatmap-month-row,
.stats-heatmap-row {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.stats-heatmap-day-label {
  width: 22px;
  min-width: 22px;
  font-size: 10px;
  color: var(--color-text-muted, #8a9bb0);
  text-align: right;
  padding-right: 4px;
  flex-shrink: 0;
}
.stats-heatmap-month-label {
  width: 14px;
  min-width: 14px;
  font-size: 10px;
  color: var(--color-text-muted, #8a9bb0);
  text-align: center;
  flex-shrink: 0;
}
.stats-heatmap-cell {
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: 2px;
  flex-shrink: 0;
  cursor: default;
  transition: filter 0.1s;
}
.stats-heatmap-cell:hover { filter: brightness(0.85); }
.stats-heatmap-cell.is-today {
  outline: 2px solid var(--color-accent, #3b82f6);
  outline-offset: 1px;
}
.stats-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.stats-heatmap-legend-label {
  font-size: 10px;
  color: var(--color-text-muted, #8a9bb0);
}
.stats-heatmap-legend-cells {
  display: flex;
  gap: 3px;
}

/* User filter inline select */
.stats-user-filter {
  font-size: var(--type-label);
  height: 28px;
  padding: 0 8px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border-control);
  background: var(--bg-card, #fff);
  color: var(--color-text);
  cursor: pointer;
}

/* Responsive adjustments for wide KPI row */
@media (max-width: 1400px) {
  .stats-kpi-row-wide { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .stats-kpi-row-wide { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .stats-kpi-row-wide { grid-template-columns: 1fr 1fr; }
}

/* Calendar day/week view polish */
.cald-datebar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cald-back-btn {
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 120ms;
}
.cald-back-btn:hover { opacity: 1; }

/* Responsive: week + day views */
@media (max-width: 760px) {
  .calw-shell,
  .cald-shell {
    max-height: calc(100vh - 140px);
    min-height: 320px;
    border-radius: 8px;
  }
  .calw-head-gutter,
  .cald-head-gutter,
  .calw-gutter,
  .cald-gutter {
    width: 38px;
  }
  .calw-lbl,
  .cald-lbl {
    font-size: 9px;
    right: 3px;
  }
  .calw-head-day-num { font-size: 14px; }
  .calw-head-day-label,
  .calw-head-users { display: none; }
  .cald-head-col { min-width: 56px; }
}

@media (max-width: 480px) {
  .calw-body,
  .cald-body { overflow-x: auto; }
  .calw-cols { min-width: 420px; }
  .cald-cols { min-width: 280px; }

  .header-workday-state {
    display: none;
  }

  .header-workday-controls {
    padding: 4px 6px;
  }

  .topbar-title-block .headline {
    font-size: clamp(20px, 5vw, 26px);
  }

  #openProjectModalButton {
    display: none;
  }
}

/* Compact toolbars: keep controls proportional instead of stretching them across the page. */

#projectAufgabenContent #projectTaskSearchInput {
  width: 100%;
}

#projectAufgabenContent #projectTaskSortSelect {
  width: 100%;
}

#projectAufgabenContent .export-controls.is-compact-export {
  justify-self: end;
  width: auto;
}

#projectAufgabenContent .export-controls.is-compact-export .export-icon-button {
  width: 38px;
}

@media (max-width: 720px) {
  #projectAufgabenContent #projectTaskSearchInput {
    grid-column: 1 / -1;
  }
}

/* Section */
.cal-add-dropdown {
  position: relative;
}

.cal-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: none;
  background: linear-gradient(135deg, var(--medium-blue), var(--dark-blue));
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(30, 81, 103, 0.22);
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.cal-add-btn:hover {
  box-shadow: 0 6px 16px rgba(30, 81, 103, 0.3);
  transform: translateY(-1px);
}

.cal-add-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 150px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  list-style: none;
  margin: 0;
  padding: 4px;
  z-index: 200;
}

.cal-add-menu li button {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  color: var(--color-text);
  transition: background 100ms ease;
}

.cal-add-menu li button:hover {
  background: var(--color-surface-soft);
}

/* Section */
#appointmentModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#appointmentModal.hidden {
  display: none;
}

.appt-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 36, 50, 0.38);
  cursor: pointer;
}

.appt-modal-card {
  position: relative;
  width: 520px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
}

.appt-title-input {
  flex: 1;
  outline: none;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-strong);
  min-width: 0;
}

.appt-title-input::placeholder { color: #b0bec5; }

.modal-close-btn {
  width: 28px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--color-text-muted);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.modal-close-btn:hover { background: var(--color-surface-muted); }

.appt-modal-body {
  display: flex;
  flex-direction: column;
}

.appt-field-row {
  display: flex;
  border-bottom: 1px solid var(--color-surface-muted);
}

.appt-field-icon {
  width: 20px;
  flex-shrink: 0;
  justify-content: center;
}

.appt-input {
  flex: 1;
  outline: none;
  color: var(--color-text);
  min-width: 0;
  font-family: inherit;
}

.appt-input::placeholder { color: #b0bec5; }
.appt-input:focus { color: var(--color-text-strong); }

.appt-time-input {
  flex: 0 0 auto;
}

.appt-time-sep {
  font-size: 14px;
  color: var(--color-text-muted);
  align-self: center;
}

.appt-textarea {
  resize: vertical;
  line-height: 1.5;
}

.appt-attendees-row { align-items: flex-start; }

.appt-attendee-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}

.appt-attendee-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}

.appt-attendee-pill:hover {
  background: var(--color-surface-soft);
}

.appt-attendee-pill.is-sel {
  background: var(--color-primary-soft);
  border-color: var(--medium-blue);
  font-weight: 600;
}

.appt-attendee-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.appt-modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.appt-reminders-row {
  align-items: flex-start;
}

.appt-reminder-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.appt-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-strong);
}

.appt-reminder-selects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.appt-reminder-select {
  width: 100%;
  min-height: var(--form-control-height-dense, 34px);
  border: 1px solid var(--color-border);
  border-radius: var(--form-control-radius-standard, var(--radius-md));
  background: var(--form-control-bg, #fff);
  color: var(--color-text);
  padding: 6px 28px 6px 10px;
  font: inherit;
  font-size: 13px;
}

.appt-reminder-select:focus-visible {
  outline: none;
  border-color: var(--medium-blue);
  box-shadow: var(--form-control-focus-ring);
}

.appt-reminder-help {
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.appt-footer-actions {
  display: flex;
  gap: 8px;
}

/* Appointment events in week/day grid */
.calw-event-appt {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px 6px;
}

.calw-event-appt-title {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Day view appointment overlay */
.cald-appt-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 3;
}

.cald-appt-event {
  position: absolute;
  left: calc(var(--appt-col-left, 0%) + 4px);
  width: calc(var(--appt-col-width, 100%) - 8px);
  background: color-mix(in srgb, var(--medium-blue) 18%, #ffffff);
  border-left: 3px solid var(--medium-blue);
  padding: 4px 8px;
  cursor: pointer;
  pointer-events: all;
  overflow: hidden;
  min-height: 20px;
  opacity: 0.94;
}

.cald-appt-event:hover {
  background: color-mix(in srgb, var(--medium-blue) 26%, #ffffff);
}

.cald-appt-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--dark-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Calendar system normalization: one visual language for month/week/day/agenda. */
:root {
  --calendar-today: var(--medium-blue);
  --calendar-today-bg: rgba(41, 123, 150, 0.09);
  --calendar-today-ring: rgba(41, 123, 150, 0.30);
  --calendar-now: #e85d75;
  --calendar-now-dot: 10px;
  --calendar-now-line: 2px;
  --calendar-event-radius: 7px;
  --calendar-event-pad-y: 3px;
  --calendar-event-pad-x: 7px;
  --calendar-blocked-bg: rgba(185, 28, 28, 0.045);
  --calendar-blocked-border: rgba(185, 28, 28, 0.20);
  --calendar-blocked-text: #8a3a49;
  --calendar-head-pad-y: 8px;
  --calendar-head-pad-x: 8px;
}

.calendar-day.is-today,
.calw-head-col.is-today,
.calw-col.is-today,
.cald-datebar.is-today {
  background: var(--calendar-today-bg);
  box-shadow: inset 0 0 0 1px var(--calendar-today-ring);
}

.calendar-day.is-today header,
.calw-head-day-num.is-today,
.cald-datebar .badge {
  background: var(--calendar-today);
  color: #fff;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--calendar-today) 18%, transparent);
}

.calendar-day.is-today header {
  width: 28px;
  height: 28px;
}

.calw-head-day-num.is-today {
  width: 30px;
  height: 30px;
}

.cald-datebar .badge {
  border: 0;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.calendar-day.is-planning-blocked {
  background:
    linear-gradient(135deg, var(--calendar-blocked-bg), rgba(255,255,255,0) 58%),
    #fff;
  box-shadow: inset 0 0 0 1px var(--calendar-blocked-border);
}

.calendar-day.is-planning-blocked.is-today {
  background:
    linear-gradient(135deg, var(--calendar-blocked-bg), rgba(255,255,255,0) 58%),
    var(--calendar-today-bg);
  box-shadow:
    inset 0 0 0 1px var(--calendar-today-ring),
    inset 0 0 0 2px color-mix(in srgb, var(--calendar-blocked-border) 80%, transparent);
}

.calendar-day.is-planning-blocked header {
  width: auto;
  min-width: 40px;
  padding: 0 7px;
  justify-content: center;
}

.calendar-day.is-planning-blocked.is-today header {
  background: var(--calendar-today);
  color: #fff;
}

.calendar-blocked-dot {
  width: 7px;
  height: 7px;
  background: var(--calendar-blocked-text);
  box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.10);
}

.calendar-block-label {
  background: rgba(185, 28, 28, 0.075);
  color: var(--calendar-blocked-text);
  border: 1px solid rgba(185, 28, 28, 0.14);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  text-transform: none;
}

.calendar-chip,
.cald-tasks .calendar-chip {
  border-radius: var(--calendar-event-radius);
  padding: var(--calendar-event-pad-y) var(--calendar-event-pad-x);
  line-height: 1.35;
  border-left: 3px solid color-mix(in srgb, currentColor 38%, transparent);
}

.calendar-chip.task_due,
.calendar-agenda-event.task_due {
  --calendar-event-accent: #d94d7f;
}

.calendar-chip.task_start,
.calendar-agenda-event.task_start {
  --calendar-event-accent: #2f75bd;
}

.calendar-chip.attendance,
.calendar-agenda-event.attendance {
  --calendar-event-accent: #2c8f56;
}

.calendar-chip.planned_workday,
.calendar-agenda-event.planned_workday {
  --calendar-event-accent: var(--medium-blue);
}

.calendar-chip.appointment,
.calendar-agenda-event.appointment {
  --calendar-event-accent: #6366f1;
}

.calendar-chip.birthday_user,
.calendar-chip.birthday_customer,
.calendar-agenda-event.birthday_user,
.calendar-agenda-event.birthday_customer {
  --calendar-event-accent: #b7791f;
}

.calendar-chip.vacation_pending,
.calendar-chip.vacation_approved,
.calendar-chip.absence_entry,
.calendar-agenda-event.vacation_pending,
.calendar-agenda-event.vacation_approved,
.calendar-agenda-event.absence_entry {
  --calendar-event-accent: var(--calendar-blocked-text);
}

.calendar-agenda-events .calendar-agenda-event {
  border: 1px solid var(--line);
  border-left: 3px solid var(--calendar-event-accent, var(--medium-blue));
  border-radius: var(--calendar-event-radius);
  padding: 6px 8px;
  background: color-mix(in srgb, #ffffff 92%, var(--calendar-event-accent, var(--medium-blue)) 8%);
}

.calendar-agenda-events .calendar-agenda-event .badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--calendar-event-accent, var(--medium-blue)) 12%, #fff);
  color: color-mix(in srgb, var(--calendar-event-accent, var(--dark-blue)) 60%, var(--dark-blue));
  border: 1px solid color-mix(in srgb, var(--calendar-event-accent, var(--medium-blue)) 22%, transparent);
}

.cal-user-chip .cal-badge-sm {
  width: var(--avatar-size-xs);
  height: var(--avatar-size-xs);
  min-width: var(--avatar-size-xs);
}

.cal-month-presence {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  min-height: var(--avatar-size-xs);
}

.cald-head-col,
.calw-head-col {
  padding: var(--calendar-head-pad-y) var(--calendar-head-pad-x);
  min-height: 54px;
  gap: 3px;
}

.cald-head {
  border-bottom-width: 1px;
}

.cald-datebar {
  min-height: 44px;
  padding: 8px 16px;
}

.calw-now::before,
.cald-now::before {
  height: var(--calendar-now-line);
  background: var(--calendar-now);
}

.calw-now::after,
.cald-now::after {
  width: var(--calendar-now-dot);
  height: var(--calendar-now-dot);
  left: calc(var(--calendar-now-dot) / -2);
  top: calc((var(--calendar-now-dot) - var(--calendar-now-line)) / -2);
  background: var(--calendar-now);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--calendar-now) 18%, transparent);
}

.calw-event,
.calw-event-appt,
.cald-event,
.cald-appt-event {
  border-radius: var(--calendar-event-radius);
}

.cald-appt-event {
  border-left-color: var(--calendar-event-accent, #6366f1);
}

[data-theme="dark"] .calendar-day.is-today,
[data-theme="dark"] .calw-head-col.is-today,
[data-theme="dark"] .calw-col.is-today,
[data-theme="dark"] .cald-datebar.is-today {
  background: rgba(44, 158, 201, 0.16);
}

[data-theme="dark"] .calendar-day.is-planning-blocked {
  background:
    linear-gradient(135deg, rgba(248, 113, 113, 0.12), rgba(255,255,255,0) 58%),
    rgba(255,255,255,0.04);
}

/* Form system normalization: shared controls, labels, layout density and dialog footers. */
:root {
  --form-control-height-dense: 34px;
  --form-control-height-standard: 42px;
  --form-control-height-large: 48px;
  --form-control-radius-standard: var(--radius-md);
  --form-control-radius-inline: var(--radius-sm);
  --form-control-border: var(--color-border-control);
  --form-control-border-hover: var(--color-border-control-hover);
  --form-control-bg: #fff;
  --form-control-bg-soft: rgba(247, 251, 253, 0.92);
  --form-control-font: var(--font-size-base);
  --form-control-font-dense: var(--font-size-md);
  --form-control-focus-ring: 0 0 0 1px var(--color-focus-ring);
  --form-label-size-standard: 13px;
  --form-label-size-xs: 10px;
  --form-label-color: #38586a;
  --form-label-muted: #51626e;
  --form-row-gap: 10px;
  --form-section-gap: 14px;
  --form-panel-padding-standard: 14px;
  --form-panel-padding-compact: 10px;
  --form-number-width: 96px;
  --form-time-width: 104px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea,
.form-input,
.app-dialog-input,
.toolbar-select-compact,
.doc-upload-project-select,
.doc-editor-toolbar select,
.ptimer-select,
.ptimer-activity-select,
.ptimer-note-input,
.ptimer-search-input,
.task-detail-field-group select,
.task-multi-select > summary,
.report-filter-multiselect-btn {
  min-height: var(--form-control-height-standard);
  border: 1px solid var(--form-control-border);
  border-radius: var(--form-control-radius-standard);
  background: var(--form-control-bg);
  color: var(--color-text);
  font-size: var(--form-control-font);
  line-height: 1.35;
  padding: var(--form-control-padding-y) var(--form-control-padding-x);
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):hover,
select:hover,
textarea:hover,
.form-input:hover,
.app-dialog-input:hover,
.toolbar-select-compact:hover,
.doc-upload-project-select:hover,
.doc-editor-toolbar select:hover,
.ptimer-select:hover,
.ptimer-activity-select:hover,
.ptimer-note-input:hover,
.ptimer-search-input:hover,
.task-detail-field-group select:hover,
.task-multi-select > summary:hover,
.report-filter-multiselect-btn:hover {
  border-color: var(--form-control-border-hover);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
select:focus,
textarea:focus,
.form-input:focus,
.app-dialog-input:focus,
.toolbar-select-compact:focus,
.doc-upload-project-select:focus,
.doc-editor-toolbar select:focus,
.ptimer-select:focus,
.ptimer-activity-select:focus,
.ptimer-note-input:focus,
.ptimer-search-input:focus,
.task-detail-field-group select:focus,
.task-multi-select > summary:focus,
.report-filter-multiselect-btn:focus {
  outline: none;
  border-color: var(--color-focus-ring);
  box-shadow: var(--form-control-focus-ring);
  background: #fff;
}

textarea,
.ptimer-note-input {
  min-height: 84px;
  resize: vertical;
}

input[type="number"],
.lohn-cockpit-table input[type="number"],
.work-schedule-day input[type="number"] {
  width: var(--form-number-width);
  min-width: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

input[type="time"],
.appt-time-input {
  width: var(--form-time-width);
  font-variant-numeric: tabular-nums;
}

/* Bugjagd: Termin-Fenster am Handy — das Datumsfeld war auf ~25 px gequetscht und
   die Endzeit ragte aus dem Fenster. Datum bekommt die volle Zeile, Zeiten teilen sich die nächste. */
@media (max-width: 520px) {
  .appt-field-row:has(#apptDate) { flex-wrap: wrap; }
  #apptDate { flex: 1 1 calc(100% - 40px); }
  .appt-field-row:has(#apptDate) .appt-time-input { flex: 1 1 0; width: auto; min-width: 0; }
}

.toolbar-select-compact,
.notification-drawer .drawer-actions select,
.calendar-toolbar select,
.export-controls select,
.ptimer-select,
.ptimer-activity-select,
.report-filter-multiselect-btn {
  min-height: var(--form-control-height-dense);
  font-size: var(--form-control-font-dense);
  padding-top: 7px;
  padding-bottom: 7px;
}

/* Dunkelmodus: die beiden Beschriftungsfarben waren feste Hellwerte (#38586a, #6b7280). */
[data-theme="dark"] {
  --form-label-color: var(--color-text);
  --form-label-muted: var(--color-text-muted);
}

.form-label-xs,
.kpi-label,
.settings-card small:first-child,
.ptimer-field-label,
.task-detail-field-group > label {
  color: var(--form-label-muted);
  font-size: var(--form-label-size-xs);
  font-weight: var(--label-xs-weight);
  letter-spacing: var(--label-xs-tracking);
  text-transform: uppercase;
  line-height: var(--line-label);
}

.stack,
label.stack {
  display: grid;
  gap: 6px;
}

.split,
.split-2,
.split-3,
.vacation-request-form .vac-form-row,
.ptimer-edit-fields,
.settings-card > .split,
.task-form-title-row {
  gap: var(--form-row-gap);
}

.split-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.split-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.embedded-form-panel,
.ptimer-active-block,
.ptimer-new-form,
.settings-card,
.work-schedule-day {
  border-radius: var(--panel-radius);
  border: 1px solid var(--color-border);
  background: var(--form-control-bg-soft);
}

.embedded-form-panel,
.ptimer-active-block,
.ptimer-new-form {
  padding: var(--form-panel-padding-standard);
}

.work-schedule-day,
.settings-row-left,
.settings-row-right {
  padding: var(--form-panel-padding-compact);
}

.appt-modal-body {
  gap: 8px;
}

.appt-field-row {
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--form-control-radius-standard);
  background: var(--form-control-bg-soft);
}

.appt-field-row:last-child {
  border-bottom: 1px solid var(--color-border);
}

.appt-field-icon {
  margin-top: 0;
  display: inline-grid;
  place-items: center;
  color: var(--medium-blue);
}

.appt-input {
  min-height: var(--form-control-height-dense);
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 6px 0;
}

.appt-input:hover,
.appt-input:focus {
  border-color: transparent;
  box-shadow: none;
  background: transparent;
}

.appt-title-input {
  min-height: var(--form-control-height-large);
  border: 1px solid var(--color-border);
  border-radius: var(--form-control-radius-standard);
  background: var(--form-control-bg-soft);
  padding: 8px 12px;
}

.appt-title-input:focus {
  border-color: var(--medium-blue);
  box-shadow: var(--form-control-focus-ring);
  background: #fff;
}

.appt-textarea {
  min-height: 88px;
}

.appt-attendee-pill {
  min-height: var(--form-control-height-dense);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
}

.app-dialog-actions {
  margin-top: 12px;
}

.ptimer-active-actions {
  margin-top: 10px;
}

@media (max-width: 760px) {
  .split-2,
.split-3,
.vacation-request-form .vac-form-row,
.ptimer-edit-fields,
.settings-card > .split,
.task-form-title-row {
    grid-template-columns: 1fr;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea,
  .form-input,
  .app-dialog-input,
  .toolbar-select-compact,
  .doc-upload-project-select,
  .doc-editor-toolbar select,
  .ptimer-select,
  .ptimer-activity-select,
  .ptimer-note-input,
  .ptimer-search-input,
  .task-detail-field-group select,
  .task-multi-select > summary,
  .report-filter-multiselect-btn {
    min-height: 44px;
  }

  .appt-modal-footer,
.app-dialog-actions,
.day-planner-footer-actions,
.ptimer-active-actions {
    flex-wrap: wrap;
  }

  .appt-reminder-selects {
    grid-template-columns: 1fr;
  }
}

/* List, card and status normalization: one base language for rows, chips and notices. */
:root {
  --row-radius: var(--radius-lg);
  --row-padding-y: 10px;
  --row-padding-x: 12px;
  --row-gap: 10px;
  --row-bg: rgba(255, 255, 255, 0.86);
  --row-bg-soft: rgba(247, 251, 253, 0.86);
  --row-border: var(--color-border);
  --row-hover-bg: rgba(41, 123, 150, 0.075);
  --row-selected-bg: rgba(41, 123, 150, 0.12);
  --row-selected-border: rgba(41, 123, 150, 0.42);
  --row-warning-bg: rgba(176, 120, 0, 0.08);
  --row-warning-border: rgba(176, 120, 0, 0.28);
  --row-critical-bg: rgba(168, 61, 80, 0.08);
  --row-critical-border: rgba(168, 61, 80, 0.28);
  --chip-radius: var(--radius-pill);
  --chip-min-height: 22px;
  --chip-padding-y: 3px;
  --chip-padding-x: 9px;
  --chip-gap: 5px;
  --chip-font-size: 11px;
  --chip-font-weight: 650;
  --chip-bg-neutral: rgba(232, 243, 250, 0.9);
  --chip-text-neutral: var(--dark-blue);
  --chip-border-neutral: rgba(41, 123, 150, 0.18);
  --mini-badge-xs: 18px;
  --mini-badge-sm: 22px;
  --mini-badge-md: 32px;
  --notice-info-bg: rgba(41, 123, 150, 0.09);
  --notice-info-border: rgba(41, 123, 150, 0.25);
  --notice-info-text: var(--dark-blue);
  --notice-warning-bg: rgba(176, 120, 0, 0.10);
  --notice-warning-border: rgba(176, 120, 0, 0.32);
  --notice-warning-text: #7a5200;
  --notice-critical-bg: rgba(168, 61, 80, 0.10);
  --notice-critical-border: rgba(168, 61, 80, 0.34);
  --notice-critical-text: var(--color-danger);
}

.simple-list li,
.notification-item,
.comment-list li,
.doc-comment-item,
.activity-item,
.dashboard-activity-item,
.warning-item,
.inbox-item,
.file-list-item,
.doc-target-row,
.settings-role-row,
.vac-card,
.team-status-card,
.mein-tag-status-card,
.workday-alert-item {
  border: 1px solid var(--row-border);
  border-radius: var(--row-radius);
  background: var(--row-bg);
  padding: var(--row-padding-y) var(--row-padding-x);
  min-width: 0;
}

.simple-list li,
.notification-item,
.comment-list li,
.doc-comment-item,
.activity-item,
.dashboard-activity-item,
.warning-item,
.inbox-item,
.file-list-item,
.doc-target-row,
.settings-role-row {
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.simple-list li:hover,
.notification-item:hover,
.comment-list li:hover,
.doc-comment-item:hover,
.activity-item:hover,
.dashboard-activity-item:hover,
.warning-item:hover,
.inbox-item:hover,
.file-list-item:hover,
.doc-target-row:hover,
.settings-role-row:hover {
  border-color: var(--row-selected-border);
  background: var(--row-hover-bg);
}

.simple-list li.selected-doc,
.project-task-list-row.is-selected,
.global-awork-task-row.is-selected,
.task-card.selected,
.task-card.bulk-selected,
.inbox-item.is-selected,
.notification-item.is-unread {
  border-color: var(--row-selected-border);
  background: var(--row-selected-bg);
  box-shadow: inset 3px 0 0 var(--medium-blue);
}

.file-list-item,
.inbox-item,
.activity-item,
.dashboard-activity-item,
.task-activity-list li,
.doc-comment-item {
  gap: var(--row-gap);
  align-items: center;
}

.file-list-item,
.inbox-item,
.activity-item,
.dashboard-activity-item,
.task-activity-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.file-list-item {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.doc-comment-item {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.notification-item-actions,
.doc-item-actions,
.management-row-actions,
.task-card-actions,
.task-row-hover-actions,
.vac-admin-actions,
.drawer-actions,
.comment-reactions,
.attachment-chip-list,
.comment-emoji-row,
.week-proj-chips,
.monat-proj-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.notification-item-actions,
.doc-item-actions,
.management-row-actions,
.task-card-actions,
.task-row-hover-actions,
.vac-admin-actions {
  justify-content: flex-end;
}

.badge,
.badge-filter button,
.task-meta-chip,
.attachment-chip,
.comment-attachment,
.comment-reactions button,
.task-filter-chip,
.project-chip,
.project-status-chip,
.project-home-status-chip,
.project-home-member-chip,
.day-planner-meta-chip,
.task-multi-select-chip,
.ptimer-chip,
.ptimer-chip-clearable,
.week-proj-chip,
.monat-proj-chip,
.overtime-balance-chip,
.lohn-status-chip,
.vac-status-badge,
.calendar-chip,
.autosave-chip,
.sync-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--chip-gap);
  min-height: var(--chip-min-height);
  max-width: 100%;
  border-radius: var(--chip-radius);
  border: 1px solid var(--chip-border-neutral);
  background: var(--chip-bg-neutral);
  color: var(--chip-text-neutral);
  padding: var(--chip-padding-y) var(--chip-padding-x);
  font-size: var(--chip-font-size);
  font-weight: var(--chip-font-weight);
  line-height: 1.3;
  white-space: nowrap;
}

/* JAS-037: Projektstatus-Chip ("Noch nicht gestartet" u. Ä.) darf umbrechen
   statt in der Projekt-Tabelle abgeschnitten zu werden — überschreibt die
   generelle white-space:nowrap-Regel oben gezielt nur für diesen Chip.
   Klicktest 2026-09-25: .panel vererbt overflow-wrap:anywhere; ohne die
   Korrektur hier riss das kurze Ein-Wort-Labels ("Läuft") in der schmalen
   Status-Spalte Buchstabe für Buchstabe um. */
.project-status-chip {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  text-align: center;
}

.badge.high,
.badge.warn,
.warning-item.warn,
.lohn-alert-warn,
.calendar-chip.vacation_pending,
.vac-status-pending,
.vac-card-pending {
  border-color: var(--status-pending-border);
  background: var(--status-pending-bg);
  color: var(--status-pending-text);
}

.badge.ok,
.calendar-chip.vacation_approved,
.vac-status-approved,
.vac-card-approved,
.overtime-balance-chip.overtime-balance-pos {
  border-color: var(--status-approved-border);
  background: var(--status-approved-bg);
  color: var(--status-approved-text);
}

.badge.deadline-overdue,
.warning-item.critical,
.lohn-alert-danger,
.vac-status-rejected,
.vac-card-rejected,
.overtime-balance-chip.overtime-balance-neg {
  border-color: var(--status-rejected-border);
  background: var(--status-rejected-bg);
  color: var(--status-rejected-text);
}

.warning-item,
.settings-warning,
.workday-alert-item,
.day-planner-block-notice,
.zeiten-week-warning,
.lohn-alert {
  border-radius: var(--row-radius);
  padding: var(--row-padding-y) var(--row-padding-x);
  border: 1px solid var(--notice-info-border);
  background: var(--notice-info-bg);
  color: var(--notice-info-text);
}

.warning-item.warn,
.settings-warning,
.workday-alert-item,
.zeiten-week-warning,
.lohn-alert-warn {
  border-color: var(--notice-warning-border);
  background: var(--notice-warning-bg);
  color: var(--notice-warning-text);
}

.warning-item.critical,
.lohn-alert-danger {
  border-color: var(--notice-critical-border);
  background: var(--notice-critical-bg);
  color: var(--notice-critical-text);
}

.file-ext-badge,
.avatar-mini,
.cal-badge-sm,
.calw-head-badge,
.appt-attendee-dot,
.status-dot,
.team-status-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 800;
  line-height: 1;
}

.file-ext-badge {
  width: var(--mini-badge-md);
  height: var(--mini-badge-md);
  border-radius: var(--radius-sm);
  font-size: 9px;
}

.cal-badge-sm,
.calw-head-badge {
  width: var(--mini-badge-xs);
  height: var(--mini-badge-xs);
  min-width: var(--mini-badge-xs);
  font-size: 8px;
}

.avatar-mini {
  width: var(--mini-badge-sm);
  height: var(--mini-badge-sm);
  min-width: var(--mini-badge-sm);
  font-size: 9px;
}

.comment-meta,
.doc-comment-meta,
.activity-item time,
.dashboard-activity-item time,
.task-activity-list time,
.file-list-main small,
.inbox-item-preview,
.vac-card-days {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: var(--line-label);
}

.comment-body,
.doc-comment-item p,
.activity-item p,
.notification-item p {
  color: var(--color-text);
  line-height: var(--line-body);
}

[data-theme="dark"] .simple-list li,
[data-theme="dark"] .notification-item,
[data-theme="dark"] .comment-list li,
[data-theme="dark"] .doc-comment-item,
[data-theme="dark"] .activity-item,
[data-theme="dark"] .dashboard-activity-item,
[data-theme="dark"] .warning-item,
[data-theme="dark"] .inbox-item,
[data-theme="dark"] .file-list-item,
[data-theme="dark"] .doc-target-row,
[data-theme="dark"] .settings-role-row,
[data-theme="dark"] .vac-card,
[data-theme="dark"] .team-status-card,
[data-theme="dark"] .mein-tag-status-card {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .badge,
[data-theme="dark"] .badge-filter button,
[data-theme="dark"] .task-meta-chip,
[data-theme="dark"] .attachment-chip,
[data-theme="dark"] .comment-attachment,
[data-theme="dark"] .comment-reactions button,
[data-theme="dark"] .task-filter-chip,
[data-theme="dark"] .project-chip,
[data-theme="dark"] .project-status-chip,
[data-theme="dark"] .project-home-status-chip,
[data-theme="dark"] .day-planner-meta-chip,
[data-theme="dark"] .task-multi-select-chip,
[data-theme="dark"] .ptimer-chip,
[data-theme="dark"] .week-proj-chip,
[data-theme="dark"] .monat-proj-chip,
[data-theme="dark"] .lohn-status-chip,
[data-theme="dark"] .vac-status-badge,
[data-theme="dark"] .calendar-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: #d7ecf5;
}

/* Global navigation, header utility and overlay normalization. */
:root {
  --nav-active-bg: linear-gradient(135deg, rgba(44, 158, 201, 0.22), rgba(41, 123, 150, 0.18));
  --nav-active-border: var(--light-blue);
  --nav-active-text: #ffffff;
  --nav-hover-bg: rgba(255, 255, 255, 0.08);
  --secondary-nav-bg: rgba(232, 243, 250, 0.74);
  --secondary-nav-border: rgba(190, 213, 225, 0.72);
  --secondary-nav-active-bg: #ffffff;
  --secondary-nav-active-text: var(--dark-blue);
  --secondary-nav-active-shadow: 0 1px 2px rgba(20, 56, 74, 0.08);
  --view-switch-active-bg: var(--medium-blue);
  --view-switch-active-text: #ffffff;
  --utility-size: 42px;
  --utility-gap: 8px;
  --overlay-width-md: 560px;
  --overlay-width-sm: 440px;
  --overlay-bg: rgba(255, 255, 255, 0.98);
  --overlay-border: rgba(216, 228, 234, 0.95);
  --overlay-header-pad: 14px 16px;
  --overlay-body-pad: 14px 16px;
  --overlay-footer-pad: 12px 16px 16px;
  --overlay-shadow: 0 24px 54px rgba(14, 55, 72, 0.24);
}

.side-link {
  min-height: 42px;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  border-radius: var(--radius-lg);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.side-link:hover {
  background: var(--nav-hover-bg);
}

.side-link.is-active {
  background: var(--nav-active-bg);
  border-color: rgba(255,255,255,0.14);
  border-left-color: var(--nav-active-border);
  color: var(--nav-active-text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
/* v409: Redundante `.topbar { align-items: center }` entfernt — siehe L492 + L19680 */

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

.headline {
  max-width: min(760px, 52vw);
}

.icon-button,
.user-chip {
  width: var(--utility-size);
  height: var(--utility-size);
  border: 1px solid rgba(41, 123, 150, 0.16);
  background: rgba(41, 123, 150, 0.12);
  color: var(--dark-blue);
  box-shadow: none;
  position: relative;
  overflow: visible;
}

.icon-button:hover {
  background: rgba(41, 123, 150, 0.18);
  border-color: rgba(41, 123, 150, 0.28);
}

/* Dunkelmodus-Kontrast: --dark-blue (#1e5167) auf der dunklen Kopfzeile = 1,75 : 1.
   Die Symbole (KI, Hilfe, Erwähnungen, Benachrichtigungen) tragen Information und
   brauchen mindestens 3 : 1; --color-primary (#5db8d8) kommt auf rund 6 : 1. */
[data-theme="dark"] .icon-button {
  color: var(--color-primary);
}

/* Dunkelmodus: Die Arbeitszeit-Leiste in der Kopfzeile war eine fast weiße Fläche
   (Verlauf aus #f7fbfd), darauf standen helle Schrift und helle Knöpfe. Der Verlauf
   wird durch die Flächen-Tokens ersetzt; die Knöpfe darin tragen schon helle Schrift. */
[data-theme="dark"] .header-workday-controls {
  background: var(--color-surface-soft);
  border-color: var(--color-border);
  box-shadow: none;
}

.user-chip {
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--dark-blue), var(--medium-blue));
  border-color: rgba(255,255,255,0.26);
}

.user-detail-tabs,
.lohn-tab-nav,
.cal-view-tabs,
.stats-period-tabs,
.doc-panel-tabs,
.ptimer-tab-bar {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--secondary-nav-border);
  border-radius: var(--radius-xl);
  background: var(--secondary-nav-bg);
  padding: 4px;
  box-shadow: none;
}

.project-inner-link,
.user-detail-tabs .project-inner-link,
.lohn-tab-btn,
.zeiten-tab-btn,
.cal-view-tabs .ghost-button,
.stats-period-tabs .ghost-button,
.doc-panel-tab,
.ptimer-tab-btn {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-text-muted);
  padding: 7px 11px;
  font-size: var(--font-size-md);
  font-weight: 650;
  text-decoration: none;
  box-shadow: none;
}

.project-inner-link:hover,
.lohn-tab-btn:hover,
.zeiten-tab-btn:hover,
.cal-view-tabs .ghost-button:hover,
.stats-period-tabs .ghost-button:hover,
.doc-panel-tab:hover,
.ptimer-tab-btn:hover {
  background: rgba(255,255,255,0.64);
  color: var(--dark-blue);
}

.project-inner-link.is-active,
.user-detail-tabs .project-inner-link.is-active,
.lohn-tab-btn.is-active,
.zeiten-tab-btn.is-active,
.cal-view-tabs .ghost-button.is-active,
.stats-period-tabs .ghost-button.is-active,
.doc-panel-tab.is-active,
.ptimer-tab-btn.is-active {
  background: var(--secondary-nav-active-bg);
  color: var(--secondary-nav-active-text);
  border-color: rgba(41, 123, 150, 0.16);
  box-shadow: var(--secondary-nav-active-shadow);
  transition: none;
}

.task-filter-chip.is-active,
.task-icon-button.is-active,
.task-tool-popover.is-open > .task-icon-button,
.settings-nav-list button.is-active,
.settings-status-button.is-active,
.daytype-btn.is-active,
.work-progress-scope-btn.is-active,
.auswertung-month-nav.is-active {
  background: var(--view-switch-active-bg);
  color: var(--view-switch-active-text);
  border-color: var(--view-switch-active-bg);
}

.notification-drawer,
.mention-drawer,
.project-timer-panel,
.workday-midnight-card,
.modal-card,
.app-dialog-card,
.fb-modal-card,
.appt-modal-card {
  border: 1px solid var(--overlay-border);
  border-radius: var(--overlay-radius);
  background: var(--overlay-bg);
  box-shadow: var(--overlay-shadow);
  overflow: hidden;
}

.notification-drawer,
.mention-drawer {
  width: min(var(--overlay-width-md), calc(100vw - 16px));
  max-height: calc(100vh - 16px);
}

.app-dialog-card,
.fb-modal-card {
  width: min(var(--overlay-width-sm), calc(100vw - 36px));
}

.project-timer-panel {
  width: min(380px, calc(100vw - 24px));
}

.notification-drawer > .panel-header,
.mention-drawer > .panel-header,
.ptimer-panel-header,
.appt-modal-header,
.fb-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: var(--overlay-header-pad);
  border-bottom: 1px solid var(--color-border);
  background: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.notification-drawer > .simple-list,
.ptimer-panel-inner,
.appt-modal-body,
.fb-modal-body,
.app-dialog-body {
  padding: var(--overlay-body-pad);
}

.notification-drawer > .simple-list,
.ptimer-panel-inner {
  overflow: auto;
  min-height: 0;
}

.appt-modal-footer,
.app-dialog-actions,
.workday-midnight-actions,
.day-planner-footer-actions,
.ptimer-active-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: var(--overlay-footer-pad);
  border-top: 1px solid var(--color-border);
  background: rgba(247, 251, 253, 0.86);
}

.workday-midnight-actions {
  margin: 0 -18px -18px;
}

.modal-layer,
.app-dialog-backdrop,
.drawer-backdrop,
.workday-midnight-prompt,
#appointmentModal {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.modal-close-btn,
.cald-back-btn,
.ptimer-back-btn {
  min-width: 34px;
  height: 34px;
  border-radius: var(--radius-lg);
}

[data-theme="dark"] {
  --overlay-bg: rgba(18, 32, 42, 0.98);
  --overlay-border: rgba(255,255,255,0.10);
  --secondary-nav-bg: rgba(255,255,255,0.06);
  --secondary-nav-border: rgba(255,255,255,0.10);
  --secondary-nav-active-bg: rgba(44, 158, 201, 0.22);
  --secondary-nav-active-text: #d7ecf5;
}

[data-theme="dark"] .notification-drawer > .panel-header,
[data-theme="dark"] .mention-drawer > .panel-header,
[data-theme="dark"] .ptimer-panel-header,
[data-theme="dark"] .appt-modal-header,
[data-theme="dark"] .fb-modal-header,
[data-theme="dark"] .appt-modal-footer,
[data-theme="dark"] .app-dialog-actions,
[data-theme="dark"] .workday-midnight-actions,
[data-theme="dark"] .day-planner-footer-actions,
[data-theme="dark"] .ptimer-active-actions {
  background: rgba(18, 32, 42, 0.94);
}

@media (max-width: 760px) {
  .headline {
    max-width: 100%;
  }

  .user-detail-tabs,
.lohn-tab-nav,
.cal-view-tabs,
.stats-period-tabs,
.doc-panel-tabs,
.ptimer-tab-bar {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .project-inner-link,
.lohn-tab-btn,
.zeiten-tab-btn,
.cal-view-tabs .ghost-button,
.stats-period-tabs .ghost-button,
.doc-panel-tab,
.ptimer-tab-btn {
    flex: 0 0 auto;
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════
   PAGE HERO SYSTEM — Light Glass (Version A)
   Applied to the top section of each main view.
   Dark variant: Planer only (day-planner-header).
   Light variant: all other info/action pages.
═══════════════════════════════════════════════════════ */

/* Dashboard greeting block */
.panel.dashboard-head {
  background-image: var(--hero-light-bg);
  border-color: var(--hero-border);
  box-shadow: var(--hero-shadow);
}

/* Zeitauswertungen landing header */
.auswertung-landing-header {
  background: var(--hero-light-bg);
  border: 1px solid var(--hero-border);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  margin-bottom: var(--space-5);
  box-shadow: var(--hero-shadow);
}
.auswertung-landing-title {
  font-size: var(--type-section-title);
  font-weight: 800;
}

/* Statistik section header */
.statistik-pane > .panel-header {
  background: var(--hero-light-bg);
  border: 1px solid var(--hero-border);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  margin-bottom: var(--space-5);
  box-shadow: var(--hero-shadow);
}

/* Lohn page header */
.lohn-page-header {
  background: var(--hero-light-bg);
  border: 1px solid var(--hero-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--hero-shadow);
}

/* Kalender panel header — bleed to panel edges */
#view-kalender > .panel > .panel-header {
  background: var(--hero-light-bg);
  border-bottom: 1px solid var(--hero-border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin: -14px -16px var(--space-4) -16px;
  padding: 20px 24px;
}

/* Mitarbeiter overview panel header — bleed */
.user-overview-panel > .panel-header {
  background: var(--hero-light-bg);
  border-bottom: 1px solid var(--hero-border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin: -14px -16px var(--space-4) -16px;
  padding: 20px 24px;
}

/* Kunden management first panel header — bleed */
.management-shell > .panel:first-child > .panel-header {
  background: var(--hero-light-bg);
  border-bottom: 1px solid var(--hero-border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin: -14px -16px var(--space-4) -16px;
  padding: 20px 24px;
}

/* Data grid, table and KPI normalization. */
:root {
  --table-radius: var(--radius-xl);
  --table-border: var(--color-border);
  --table-head-bg: rgba(232, 243, 250, 0.82);
  --table-row-bg: rgba(255,255,255,0.86);
  --table-row-alt-bg: rgba(247, 251, 253, 0.72);
  --table-row-hover-bg: rgba(41, 123, 150, 0.08);
  --table-row-active-bg: rgba(41, 123, 150, 0.12);
  --table-cell-pad-y: 9px;
  --table-cell-pad-x: 10px;
  --table-cell-height: 46px;
  --table-head-font-size: 11px;
  --table-body-font-size: 13px;
  --kpi-card-radius: var(--radius-xl);
  --kpi-card-padding: 16px;
  --kpi-label-size: 10px;
  --kpi-value-size: clamp(20px, 2.2vw, 28px);
}

#reportTableWrap,
.project-overview-table-wrap,
.lohn-table-wrap,
.projects-only-table-wrap,
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--table-radius);
}

.report-table,
.project-overview-table,
.projects-only-table,
.lohn-cockpit-table,
.kontingent-overview-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  background: var(--table-row-bg);
  border: 1px solid var(--table-border);
  overflow: hidden;
}

.report-table th,
.report-table td,
.project-overview-table th,
.project-overview-table td,
.projects-only-table th,
.projects-only-table td,
.lohn-cockpit-table th,
.lohn-cockpit-table td,
.kontingent-overview-table th,
.kontingent-overview-table td {
  height: var(--table-cell-height);
  padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
  border: 0;
  border-bottom: 1px solid var(--table-border);
  color: var(--color-text);
  font-size: var(--table-body-font-size);
  line-height: 1.35;
}

.report-table th,
.project-overview-table th,
.projects-only-table th,
.lohn-cockpit-table th,
.kontingent-overview-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: var(--table-head-font-size);
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.report-table tbody tr:nth-child(even),
.project-overview-table tbody tr:nth-child(even),
.projects-only-table tbody tr:nth-child(even),
.lohn-cockpit-table tbody tr:nth-child(even),
.kontingent-overview-table tbody tr:nth-child(even) {
  background: var(--table-row-alt-bg);
}

.report-table tbody tr:hover,
.project-overview-table tbody tr:hover,
.projects-only-table tbody tr:hover,
.lohn-cockpit-table tbody tr:hover,
.kontingent-overview-table tbody tr:hover {
  background: var(--table-row-hover-bg);
}

.is-active-row > td,
.lohn-row-current td,
.project-overview-table tr.is-selected > td,
.report-table tr.is-selected > td {
  background: var(--table-row-active-bg) !important;
  box-shadow: inset 3px 0 0 var(--medium-blue);
}

.report-table tr:last-child td,
.project-overview-table tr:last-child td,
.projects-only-table tr:last-child td,
.lohn-cockpit-table tr:last-child td,
.kontingent-overview-table tr:last-child td {
  border-bottom: 0;
}

.report-table th:first-child,
.report-table td:first-child,
.project-overview-table th:first-child,
.project-overview-table td:first-child,
.projects-only-table th:first-child,
.projects-only-table td:first-child,
.lohn-cockpit-table th:first-child,
.lohn-cockpit-table td:first-child,
.kontingent-overview-table th:first-child,
.kontingent-overview-table td:first-child {
  padding-left: 14px;
}

.report-table th:last-child,
.report-table td:last-child,
.project-overview-table th:last-child,
.project-overview-table td:last-child,
.projects-only-table th:last-child,
.projects-only-table td:last-child,
.lohn-cockpit-table th:last-child,
.lohn-cockpit-table td:last-child,
.kontingent-overview-table th:last-child,
.kontingent-overview-table td:last-child {
  padding-right: 14px;
}

.report-table td.num,
.report-table th.num,
.lohn-cockpit-table td.num,
.lohn-cockpit-table th.num,
.kontingent-overview-table td.num,
.kontingent-overview-table th.num,
.project-overview-table td:nth-child(n+3),
.projects-only-table td:nth-child(n+3) {
  font-variant-numeric: tabular-nums;
}

.report-table-action-cell {
  width: 44px;
}

.report-row-delete {
  opacity: 0;
}

.report-table tbody tr:hover .report-row-delete,
.report-row-delete:focus-visible {
  opacity: 1;
}

.progress-inline,
.report-bar,
.subtask-progress-bar,
.zeiten-status-progress,
.work-progress-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(216, 230, 238, 0.9);
  overflow: hidden;
}

.progress-inline > *,
.report-bar,
.subtask-progress-fill,
.zeiten-status-progress span,
.work-progress-fill {
  border-radius: inherit;
}

.project-home-kpi-card,
.zeiten-status-metric,
.dashboard-time-status-card,
.lohn-kpi,
.lohn-summary-card,
.stats-kpi-card,
.work-progress-stat {
  border-radius: var(--kpi-card-radius);
  border: 1px solid var(--color-border);
  background:
    radial-gradient(circle at 8% 8%, rgba(44, 158, 201, 0.10), transparent 38%),
    rgba(255,255,255,0.86);
  padding: var(--kpi-card-padding);
  box-shadow: var(--shadow-xs);
}

.kpi-label,
.project-home-kpi-label,
.zeiten-status-metric span,
.dashboard-time-status-card span,
.lohn-kpi-label,
.work-progress-title,
.work-progress-stat span {
  color: var(--color-text-muted);
  font-size: var(--kpi-label-size);
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: var(--line-label);
  text-transform: uppercase;
}

.project-home-kpi-value,
.zeiten-status-metric strong,
.dashboard-time-status-card strong,
.lohn-kpi strong {
  font-family: var(--font-display);
  font-size: var(--kpi-value-size);
  font-style: italic;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
}

.project-home-kpi-grid,
.zeiten-status-metrics,
.dashboard-time-status-grid,
.lohn-kpi-bar,
.lohn-kpi-row,
.stats-kpi-row {
  gap: var(--grid-gutter);
}

.lohn-kpi-bar,
.lohn-kpi-row {
  background: transparent;
  border: 0;
}

.lohn-kpi,
.lohn-kpi-row .lohn-kpi {
  border-right: 0;
  min-height: 76px;
}

.lohn-totals-row td {
  border-top: 2px solid var(--color-border-strong);
  font-weight: 800;
}

[data-theme="dark"] {
  --table-head-bg: rgba(255,255,255,0.07);
  --table-row-bg: rgba(255,255,255,0.045);
  --table-row-alt-bg: rgba(255,255,255,0.03);
  --table-row-hover-bg: rgba(44, 158, 201, 0.12);
  --table-row-active-bg: rgba(44, 158, 201, 0.16);
  --table-border: rgba(255,255,255,0.12);
}

[data-theme="dark"] .report-table,
[data-theme="dark"] .project-overview-table,
[data-theme="dark"] .projects-only-table,
[data-theme="dark"] .lohn-cockpit-table,
[data-theme="dark"] .kontingent-overview-table,
[data-theme="dark"] .project-home-kpi-card,
[data-theme="dark"] .zeiten-status-metric,
[data-theme="dark"] .dashboard-time-status-card,
[data-theme="dark"] .lohn-kpi,
[data-theme="dark"] .lohn-summary-card,
[data-theme="dark"] .stats-kpi-card,
[data-theme="dark"] .work-progress-stat {
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.12);
}

@media (max-width: 760px) {
  .report-table,
  .project-overview-table,
  .projects-only-table,
  .lohn-cockpit-table,
  .kontingent-overview-table {
    min-width: 680px;
  }

  .project-home-kpi-grid,
.zeiten-status-metrics,
.dashboard-time-status-grid,
.lohn-kpi-bar,
.lohn-kpi-row,
.stats-kpi-row {
    grid-template-columns: 1fr;
  }
}

/* Accessibility, focus and touch-target normalization */
:root {
  --focus-ring: 0 0 0 2px var(--color-focus-ring);
  --focus-ring-strong: 0 0 0 3px var(--color-focus-ring);
  --touch-target: 44px;
  --motion-fast: 140ms;
  --motion-medium: 220ms;
}

button,
a,
input,
select,
textarea,
[role="button"],
[tabindex]:not([tabindex="-1"]) {
  -webkit-tap-highlight-color: rgba(44, 158, 201, 0.18);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.side-link:focus-visible,
.project-inner-link:focus-visible,
.user-detail-tabs button:focus-visible,
.lohn-tab-nav button:focus-visible,
.cal-view-tabs button:focus-visible,
.stats-period-tabs button:focus-visible,
.doc-panel-tabs button:focus-visible,
.export-icon-button:focus-visible,
.task-timer-play-button:focus-visible,
.modal-close-btn:focus-visible {
  box-shadow: var(--focus-ring-strong);
}

.icon-button,
.sidebar-toggle-btn,
.modal-close-btn,
.export-controls.is-compact-export .export-icon-button,
.task-tool-icon-btn,
.calendar-toolbar button,
.calendar-toolbar select,
.task-timer-play-button,
.doc-media-remove,
.report-row-delete,
.comment-mention-option,
.doc-mention-option {
  min-width: var(--touch-target);
  min-height: var(--touch-target);
}

.ghost-button.tiny,
.badge,
.chip,
.task-meta-chip,
.calendar-agenda-event,
.avatar-mini {
  touch-action: manipulation;
}

.doc-media-remove,
.report-row-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notification-item,
.simple-list li,
.task-row,
.global-awork-task-row,
.project-task-list-row,
.project-board-task-item,
.calendar-agenda-event,
.doc-item {
  scroll-margin-top: 96px;
}

.export-controls.is-compact-export.is-open .export-icon-button,
.task-tool-popover.is-open > button {
  box-shadow: var(--focus-ring);
}

.export-controls.is-compact-export,
.notification-drawer,
.modal-card,
.project-timer-panel {
  will-change: opacity, transform;
}

@media (pointer: coarse) {
  .ghost-button,
.primary-button,
.side-link,
.project-inner-link,
.user-detail-tabs button,
.lohn-tab-nav button,
.cal-view-tabs button,
.stats-period-tabs button,
.doc-panel-tabs button,
.task-filter-chip,
.calendar-agenda-event,
.notification-item-actions .ghost-button {
    min-height: var(--touch-target);
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }
}

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

@media (max-width: 640px) {
  .modal-card,
  .notification-drawer,
  .project-timer-panel {
    max-height: calc(100dvh - 24px);
  }

  .notification-item-actions,
.doc-item-actions {
    flex-wrap: wrap;
  }
}

/* 30.10.2026: --focus-ring folgt jetzt dem Token --color-focus-ring (hell und dunkel), kein eigener Dunkelwert mehr. */

/* Empty states and helper copy normalization */
:root {
  --empty-bg: rgba(255,255,255,0.72);
  --empty-border: rgba(188, 213, 229, 0.82);
  --empty-border-dashed: rgba(147, 190, 218, 0.72);
  --empty-text: var(--color-text-muted);
  --empty-title: var(--dark-blue);
  --empty-radius: var(--radius-lg);
  --empty-padding: 22px;
  --empty-icon-size: 34px;
}

.empty-state,
.lohn-empty-state,
.mein-tag-empty,
.zeiten-week-empty,
.project-task-detail-empty,
.project-task-empty-row,
.task-multi-select-hint,
.fb-empty-hint,
.sidebar-filter-empty,
.ptimer-search-no-results,
.search-no-results,
.calendar-empty-state {
  border: 1px dashed var(--empty-border-dashed);
  border-radius: var(--empty-radius);
  background:
    radial-gradient(circle at 14% 12%, rgba(44, 158, 201, 0.08), transparent 42%),
    var(--empty-bg);
  color: var(--empty-text);
  font-size: 13px;
  line-height: 1.55;
}

.empty-state,
.calendar-empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: var(--empty-padding);
  text-align: center;
}

.empty-state.hidden,
.calendar-empty-state.hidden {
  display: none;
}

.empty-state.compact,
.calendar-empty-state.compact {
  padding: 14px 16px;
}

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--empty-icon-size);
  height: var(--empty-icon-size);
  border-radius: var(--radius-pill);
  background: rgba(41, 123, 150, 0.10);
  color: var(--dark-blue);
  font-size: 16px;
  font-weight: 800;
}

.empty-state p,
.calendar-empty-state p,
.lohn-empty-state p,
.mein-tag-empty p,
.zeiten-week-empty p {
  margin: 0;
  color: var(--empty-text);
}

.empty-state strong,
.calendar-empty-state strong,
.lohn-empty-state strong,
.mein-tag-empty strong,
.zeiten-week-empty strong {
  color: var(--empty-title);
}

.project-task-empty-row,
.task-multi-select-hint,
.fb-empty-hint,
.sidebar-filter-empty,
.ptimer-search-no-results,
.search-no-results {
  padding: 12px 14px;
}

.project-task-empty-row {
  display: block;
  text-align: center;
}

.simple-list > li > .empty-state,
.project-task-list-rows > li.project-task-empty-row,
.calendar-agenda-events > li.calendar-empty-state {
  margin: 6px;
}

.cal-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calendar-chip .chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: rgba(226, 239, 246, 0.9);
  color: #1b6079;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.muted,
.text-xs,
.task-parent-sub-line,
.doc-editor-meta,
.settings-row .muted,
.notification-item .muted {
  line-height: 1.5;
}

[data-theme="dark"] {
  --empty-bg: rgba(255,255,255,0.05);
  --empty-border: rgba(255,255,255,0.14);
  --empty-border-dashed: rgba(255,255,255,0.20);
  --empty-text: rgba(229, 239, 245, 0.72);
  --empty-title: rgba(255,255,255,0.92);
}

/* Design-system hardening: radius, density, typography and elevation tokens */
:root {
  /* Radius scale: use these semantic tiers instead of ad-hoc 6/10/14px values. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-control: var(--radius-sm);
  --radius-card: var(--radius-lg);
  --radius-panel: var(--radius-lg);
  --radius-overlay: var(--radius-xl);
  --radius-row: var(--radius-md);
  --radius-chip: var(--radius-pill);
  --radius: var(--radius-card);
  --panel-radius: var(--radius-panel);
  --panel-radius-elevated: var(--radius-overlay);
  --overlay-radius: var(--radius-overlay);
  --list-item-radius: var(--radius-row);
  --button-radius: var(--radius-control);
  --button-radius-sm: var(--radius-control);
  --form-control-radius: var(--radius-control);

  /* Density scale. */
  --density-compact-y: 8px;
  --density-compact-x: 10px;
  --density-default-y: 12px;
  --density-default-x: 14px;
  --density-comfort-y: 16px;
  --density-comfort-x: 18px;
  --panel-padding-compact: var(--density-default-y) var(--density-default-x);
  --panel-padding-default: var(--density-comfort-y) var(--density-comfort-x);
  --row-padding: var(--density-compact-y) var(--density-default-x);
  --card-padding: var(--density-default-y) var(--density-comfort-x);

  /* Type scale. */
  --type-xs: 11px;
  --type-sm: 12px;
  --type-meta: 12px;
  --type-label: 12px;
  --type-body: 14px;
  --type-card-title: 16px;
  --type-section-title: 20px;
  --type-page-title: clamp(26px, 2.8vw, 34px);
  --type-display-title: clamp(30px, 3.4vw, 42px);
  --tracking-label: 0.065em;
  --tracking-overline: 0.095em;

  /* Elevation scale. */
  --elevation-flat: none;
  --elevation-raised: 0 1px 2px rgba(9, 50, 65, 0.04), 0 8px 22px rgba(9, 50, 65, 0.08);
  --elevation-overlay: 0 22px 54px rgba(20, 56, 74, 0.18);
  --shadow-xs: 0 1px 2px rgba(9, 50, 65, 0.04);
  --shadow-sm: var(--elevation-raised);
  --shadow-md: var(--elevation-raised);
  --shadow-lg: var(--elevation-overlay);
  --shadow: var(--elevation-raised);
  --shadow-card: var(--elevation-raised);
}

body {
  font-size: var(--type-body);
  line-height: var(--line-body);
}

.panel,
.settings-card,
.settings-section-pane,
.project-task-list-card,
.global-awork-task-list-card,
.project-home-awork,
.dashboard-time-status-card,
.workday-panel,
.doc-preview-card,
.lohn-summary-card,
.lohn-kpi,
.modal-card,
.notification-drawer,
.project-timer-panel {
  border-radius: var(--radius-panel);
}

.panel,
.settings-card,
.settings-section-pane,
.dashboard-time-status-card,
.workday-panel,
.doc-preview-card,
.lohn-summary-card,
.lohn-kpi {
  box-shadow: var(--elevation-raised);
}

.modal-card,
.notification-drawer,
.project-timer-panel,
.app-dialog-card,
.task-tool-panel,
.column-picker-panel,
.doc-mention-dropdown,
.comment-mention-dropdown,
.export-controls.is-compact-export.is-open {
  border-radius: var(--radius-overlay);
  box-shadow: var(--elevation-overlay);
}

input,
select,
textarea,
.form-input,
.appt-input,
.ptimer-select,
.ptimer-note-input,
.task-search-input,
.doc-link-search-input,
.day-planner-task-search,
.time-report-name-input,
.project-task-new-row-form input {
  border-radius: var(--radius-control);
  font-size: var(--type-body);
  line-height: var(--line-body);
}

.primary-button,
.ghost-button,
.icon-button,
.task-icon-button,
.task-timer-play-button,
.ptimer-action-btn,
.ptimer-ctrl-btn,
.ptimer-start-btn,
.export-icon-button,
.modal-close-btn,
.sidebar-toggle-btn {
  border-radius: var(--radius-control);
  font-weight: 700;
}

.badge,
.chip,
.task-meta-chip,
.project-tag-pill,
.calendar-chip,
.calendar-block-label,
.ptimer-chip,
.task-filter-chip,
.doc-link-chip,
.attachment-chip {
  border-radius: var(--radius-chip);
  font-size: var(--type-xs);
  line-height: var(--line-label);
}

.simple-list li,
.notification-item,
.doc-item,
.management-row,
.project-task-list-row,
.global-awork-task-row,
.calendar-agenda-event,
.settings-role-row {
  border-radius: var(--radius-row);
  padding: var(--row-padding);
}

.eyebrow,
.eyebrow-label,
.kpi-label,
.project-home-kpi-label,
.lohn-kpi-label,
.vac-card-label,
.calw-head-day-label,
.calendar-weekdays,
.report-table thead th,
.project-overview-table thead th,
.lohn-cockpit-table thead th {
  font-size: var(--type-label);
  letter-spacing: var(--tracking-label);
  line-height: var(--line-label);
}

.muted,
.text-xs,
.task-parent-sub-line,
.doc-editor-meta,
.notification-item .muted,
.calendar-agenda-day-head .muted,
.management-row-title .muted {
  font-size: var(--type-meta);
  line-height: var(--line-body);
}

.dashboard-head h1,
.view-head h1 {
  font-family: var(--font-display);
  font-size: var(--type-page-title);
  font-style: italic;
  line-height: var(--line-tight);
}

.project-home-main-content h2,
.day-planner-title-wrap h2 {
  font-family: var(--font-display);
  font-size: var(--type-display-title);
  font-style: italic;
  font-weight: 800;
  line-height: var(--line-tight);
}

.panel h2,
.panel h3,
.settings-card h3,
.project-task-section h4,
.global-awork-task-list-head h3,
.calendar-agenda-heading,
.lohn-summary-card-header h3,
.ptimer-panel-title,
.notification-drawer > .panel-header h2 {
  line-height: var(--line-tight);
}

.panel h2,
.settings-card h3,
.notification-drawer > .panel-header h2,
.statistik-pane .panel-header h2 {
  font-size: var(--type-section-title);
}

.panel h3,
.project-task-section h4,
.global-awork-task-list-head h3,
.lohn-summary-card-header h3,
.calendar-agenda-heading {
  font-size: var(--type-card-title);
}

.panel,
.settings-card {
  padding: var(--panel-padding-default);
}

.panel-header.compact,
.notification-item-actions,
.doc-item-actions,
.project-task-toolbar,
.calendar-toolbar,
.settings-row,
.drawer-actions {
  gap: var(--space-2);
}

@media (max-width: 760px) {
  :root {
    --panel-padding-default: 14px;
    --card-padding: 12px;
    --type-page-title: clamp(24px, 7vw, 30px);
    --type-display-title: clamp(26px, 8vw, 34px);
  }
}

[data-theme="dark"] {
  --elevation-raised: 0 1px 2px rgba(0, 0, 0, 0.22), 0 12px 30px rgba(0, 0, 0, 0.28);
  --elevation-overlay: 0 26px 60px rgba(0, 0, 0, 0.42);
}

/* Micro-interactions, floating docks and global utilities */
:root {
  --fab-size: 56px;
  --fab-icon-size: 25px;
  --fab-bg: linear-gradient(145deg, var(--medium-blue), var(--dark-blue));
  --fab-bg-active: linear-gradient(145deg, var(--light-blue), var(--medium-blue));
  --fab-shadow: 0 14px 30px rgba(17, 55, 71, 0.28);
  --fab-shadow-hover: 0 18px 38px rgba(17, 55, 71, 0.34);
  --micro-target: 36px;
  --micro-target-mobile: 44px;
  --utility-height: 38px;
  --utility-radius: var(--radius-md);
  --inline-chip-height: 30px;
  --inline-chip-gap: 6px;
  --inline-chip-bg: rgba(41, 123, 150, 0.10);
  --inline-chip-border: rgba(41, 123, 150, 0.22);
  --inline-chip-text: var(--dark-blue);
}

.project-timer-toggle {
  width: var(--fab-size);
  height: var(--fab-size);
  min-width: var(--fab-size);
  min-height: var(--fab-size);
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--fab-bg);
  color: #fff;
  box-shadow: var(--fab-shadow);
  display: inline-grid;
  place-items: center;
  transition:
    transform var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    filter var(--motion-fast) ease,
    background var(--motion-fast) ease;
}

.project-timer-toggle:hover {
  transform: translateY(-2px);
  box-shadow: var(--fab-shadow-hover);
  filter: brightness(1.04);
}

.project-timer-toggle .ci-icon-svg {
  width: var(--fab-icon-size);
  height: var(--fab-icon-size);
}

.project-timer-dock {
  gap: 10px;
}

.ptimer-pill {
  min-height: 42px;
  border-radius: var(--radius-pill);
  background: var(--fab-bg);
  box-shadow: var(--fab-shadow);
}

.ptimer-pill.is-running {
  background: var(--fab-bg);
}

.ptimer-pill.is-paused {
  background: linear-gradient(145deg, #6f94a8, #4f798e);
}

.ptimer-pill.is-selected {
  box-shadow: 0 0 0 2px #fff, var(--focus-ring-strong), var(--fab-shadow);
}

.ptimer-ctrl-btn,
.ptimer-action-btn,
.ptimer-add-pill,
.ptimer-back-btn,
.reaction-insert-btn,
.comment-reactions button,
.attachment-chip button,
.comment-attachment,
.doc-media-remove,
.report-row-delete,
.sidebar-filter-item-delete,
.fb-cond-remove,
[data-remove-pending-attachment-id],
[data-checklist-action="remove"],
[data-project-task-check-remove] {
  min-width: var(--micro-target);
  min-height: var(--micro-target);
}

.ptimer-ctrl-btn,
.ptimer-action-btn,
.reaction-insert-btn,
.comment-reactions button,
.attachment-chip,
.comment-attachment,
.doc-link-chip,
.ptimer-chip,
.task-meta-chip {
  border-radius: var(--radius-pill);
}

.attachment-chip,
.comment-attachment,
.comment-reactions button,
.reaction-insert-btn,
.doc-link-chip,
.ptimer-chip,
.task-meta-chip {
  min-height: var(--inline-chip-height);
  border: 1px solid var(--inline-chip-border);
  background: var(--inline-chip-bg);
  color: var(--inline-chip-text);
  gap: var(--inline-chip-gap);
}

.attachment-chip-list,
.comment-reactions,
.comment-emoji-row,
.comment-attachments,
.ptimer-active-chips,
.ptimer-draft-chips {
  gap: var(--inline-chip-gap);
}

.attachment-chip button,
.comment-attachment button,
.comment-reactions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-button,
.user-chip,
.header-workday-controls {
  border-radius: var(--utility-radius);
}

.icon-button,
.user-chip {
  min-width: var(--utility-height);
  min-height: var(--utility-height);
}

.header-workday-controls {
  min-height: var(--utility-height);
  align-items: center;
}

.notif-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  background: var(--dark-blue);
  /* Dunkelmodus-Kontrast: --white ist im dunklen Modus eine dunkle Fläche (#1a2a34).
     Weiße Zahl auf Petrol-Grund braucht den Markenwert, der in beiden Modi weiß bleibt. */
  color: var(--kf-white);
  border: 2px solid var(--bg, #fff);
  border-radius: 9px;
  pointer-events: none;
  z-index: 2;
}

.ghost-button.is-live-stop,
.header-workday-actions .ghost-button.tiny:not(:disabled),
.workday-panel [data-open-project-timer-panel],
.task-timer-play-button {
  background: var(--color-primary-soft);
  color: var(--dark-blue);
  box-shadow: none;
}

.primary-button,
.ptimer-start-btn,
.task-detail-timer-button {
  background: var(--primary-gradient);
  color: #fff;
}

.task-timer-play-button:hover,
.ghost-button.is-live-stop:hover,
.header-workday-actions .ghost-button.tiny:not(:disabled):hover,
.workday-panel [data-open-project-timer-panel]:hover {
  background: rgba(41, 123, 150, 0.18);
  color: var(--dark-blue);
}

@media (pointer: coarse), (max-width: 760px) {
  .ptimer-ctrl-btn,
.ptimer-action-btn,
.ptimer-add-pill,
.ptimer-back-btn,
.reaction-insert-btn,
.comment-reactions button,
.attachment-chip button,
.comment-attachment,
.doc-media-remove,
.report-row-delete,
.sidebar-filter-item-delete,
.fb-cond-remove,
[data-remove-pending-attachment-id],
[data-checklist-action="remove"],
[data-project-task-check-remove] {
    min-width: var(--micro-target-mobile);
    min-height: var(--micro-target-mobile);
  }

  .ptimer-pill {
    min-height: var(--micro-target-mobile);
  }
}

[data-theme="dark"] {
  --inline-chip-bg: rgba(44, 158, 201, 0.14);
  --inline-chip-border: rgba(44, 158, 201, 0.28);
  --inline-chip-text: rgba(230, 245, 251, 0.92);
}

/* Search and popover normalization */
.side-search {
  position: relative;
}

.search-dropdown {
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(360px, 60vh);
  overflow: auto;
  border: 1px solid var(--overlay-border, var(--color-border));
  border-radius: var(--radius-overlay);
  background: var(--overlay-bg, rgba(255,255,255,0.98));
  color: var(--color-text);
  box-shadow: var(--elevation-overlay);
  padding: 6px;
}

.search-result-item {
  min-height: 48px;
  border: 0;
  border-radius: var(--radius-row);
  padding: 8px 10px;
  color: var(--color-text);
  gap: 9px;
}

.search-result-item + .search-result-item {
  margin-top: 3px;
}

.search-result-item:hover,
.search-result-item.is-focused {
  background: var(--color-primary-soft);
  color: var(--dark-blue);
}

.search-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: rgba(41, 123, 150, 0.10);
  color: var(--dark-blue);
  font-size: var(--type-xs);
  font-weight: 800;
}
.search-result-icon svg {
  width: 14px;
  height: 14px;
}

.search-result-type {
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(41, 123, 150, 0.08);
  color: var(--color-text-muted);
  font-size: var(--type-xs);
  font-weight: 800;
  opacity: 1;
}

.search-no-results {
  display: grid;
  gap: 3px;
  padding: 14px;
  border: 1px dashed var(--empty-border-dashed);
  border-radius: var(--radius-row);
  background: var(--empty-bg);
  color: var(--empty-text);
}

.search-no-results strong {
  color: var(--empty-title);
}

.search-no-results span {
  color: var(--empty-text);
  font-size: var(--type-meta);
}

/* JAS-045 Phase 2: "Aus anderen Tools" — sichtbar getrennte Gruppe für
   Treffer aus den Family-Search-Endpunkten der Schwester-Apps (Aggregator,
   POST /api/search/aggregate). Wird asynchron NACH den eigenen Treffern
   befüllt; leer/versteckt, solange keine Schwester-App etwas liefert. */
.search-family-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--color-border);
}
.search-family-group.hidden {
  display: none;
}
.search-family-heading {
  padding: 4px 10px 6px;
  font-size: var(--type-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
a.search-result-item.search-result-item-family {
  color: inherit;
  text-decoration: none;
}
.search-result-item-family .search-result-icon {
  background: rgba(41, 123, 150, 0.06);
}

.task-tool-popover .task-tool-panel,
.column-picker-panel,
.doc-mention-dropdown,
.comment-mention-dropdown,
.ptimer-search-results {
  border-radius: var(--radius-overlay);
  box-shadow: var(--elevation-overlay);
}

/* JAS-018: Suchtreffer in der Seitenleiste umbrechen statt abzuschneiden –
   kein waagerechter Scrollbalken mehr, Titel sind (bis 2 Zeilen) lesbar. */
.search-dropdown {
  overflow-x: hidden;
}
.search-dropdown .search-result-label {
  flex: 1 1 auto;
  white-space: normal;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.search-dropdown .search-result-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .search-dropdown {
    max-height: min(420px, 68vh);
  }

  .search-result-item {
    min-height: 52px;
  }
}

[data-theme="dark"] .search-dropdown {
  background: rgba(20, 35, 45, 0.98);
  border-color: rgba(255,255,255,0.13);
}

[data-theme="dark"] .search-result-item {
  color: rgba(238, 247, 252, 0.94);
}

/* Dialog system: clear semantic variants and stable action hierarchy */
.app-dialog-card {
  position: relative;
}

.app-dialog-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--color-teal);
}

.app-dialog-actions {
  justify-content: space-between;
}

@media (max-width: 560px) {

  .app-dialog-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

/* Notification drawer hierarchy and safe bulk actions */
.notification-drawer {
  max-height: min(70vh, calc(100vh - 24px));
  grid-template-rows: auto auto minmax(0, 1fr);
}

.notification-drawer > .panel-header {
  position: sticky;
  top: 0;
  z-index: 3;
}

.notification-drawer .drawer-actions {
  grid-template-columns: minmax(130px, 1fr) auto auto auto;
  align-items: center;
}

.notification-drawer > .simple-list,
#notificationList,
#mentionList {
  max-height: min(58vh, calc(100vh - 180px));
  overflow: auto;
  overscroll-behavior: contain;
}

.notification-text {
  min-width: 0;
  color: var(--color-text);
  line-height: var(--line-body);
}

.notification-item-actions {
  align-items: center;
  gap: 8px;
}

.notification-action-primary,
.notification-bulk-read {
  border: 1px solid rgba(41, 123, 150, 0.30);
  background: var(--color-primary-soft);
  color: var(--dark-blue);
  font-weight: 800;
}

.notification-action-primary:hover,
.notification-bulk-read:hover {
  background: rgba(41, 123, 150, 0.18);
}

.notification-action-danger,
.notification-bulk-delete {
  border: 1px solid rgba(168, 61, 80, 0.28);
  background: transparent;
  color: var(--color-danger);
  font-weight: 700;
}

.notification-action-danger:hover,
.notification-bulk-delete:hover {
  background: var(--color-danger-soft);
  border-color: rgba(168, 61, 80, 0.42);
}

.notification-bulk-delete {
  margin-left: 6px;
}

.notification-bulk-delete::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  border-radius: var(--radius-pill);
  background: rgba(168, 61, 80, 0.14);
  font-size: 10px;
  line-height: 1;
}

@media (max-width: 640px) {
  .notification-drawer {
    max-height: calc(100dvh - 16px);
  }

  .notification-drawer .drawer-actions {
    grid-template-columns: 1fr 1fr;
  }

  .notification-drawer .drawer-actions select,
  .notification-drawer .drawer-actions button {
    width: 100%;
  }
}

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

.mention-drawer .drawer-actions button {
  flex: 0 0 auto;
}

.mention-drawer .notification-item {
  border-left: 3px solid rgba(44, 158, 201, 0.28);
}

.mention-drawer .notification-item.is-unread {
  border-left-color: var(--light-blue);
}

.mention-drawer #mentionList {
  max-height: min(58vh, calc(100vh - 164px));
  overflow: auto;
}

@media (max-width: 640px) {
  .mention-drawer .drawer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .mention-drawer .drawer-actions button {
    width: 100%;
  }
}

/* Visual QA pass: stable click states, truncation and medium-width sidebar overlay. */
.side-link::after,
.project-inner-link::after,
.icon-button::after,
.ghost-button::after,
.primary-button::after,
.cal-view-tabs button::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
}

.side-link,
.project-inner-link,
.icon-button {
  isolation: isolate;
  overflow: visible;
}

.ghost-button,
.primary-button,
.cal-view-tabs button {
  isolation: isolate;
  overflow: hidden;
}

.notification-drawer > .panel-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
}

.notification-drawer > .panel-header h2 {
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.notification-drawer .drawer-actions {
  min-width: 0;
}

.auswertung-template-tile {
  min-width: 0;
}

.auswertung-tile-icon {
  font-size: clamp(20px, 2.4vw, 26px);
}

.calendar-chip,
.cald-event,
.task-card .task-title,
.project-board-task-item strong {
  min-width: 0;
}

.calendar-chip span:last-child,
.calendar-chip.chip-overflow span:last-child,
.cald-event-lbl,
.task-card .task-title,
.project-board-task-item strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: left;
}

.calendar-chip.chip-overflow span:last-child {
  text-overflow: ellipsis;
}

.empty-state.compact {
  min-height: 74px;
  align-items: center;
  justify-content: flex-start;
  color: var(--muted);
}

@media (max-width: 1100px) {
  /* Sidebar is position:fixed at this breakpoint — remove it from the grid
     and compensate with padding so .main fills the remaining space correctly. */
  .app-shell,
  .app-shell.sidebar-collapsed,
  .app-shell:not(.sidebar-collapsed) {
    grid-template-columns: 1fr !important;
  }

  .main {
    padding-left: var(--sidebar-width-collapsed) !important;
    box-sizing: border-box !important;
  }

  .app-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 54;
    background: rgba(12, 30, 40, 0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .app-shell.sidebar-overlay-open::before {
    opacity: 1;
    pointer-events: auto;
  }

  .topbar {
    flex-wrap: wrap;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(var(--sidebar-width), 86vw);
    max-width: 86vw;
    height: 100vh;
    overflow-y: auto;
    z-index: 55;
    box-shadow: 16px 0 40px rgba(12, 30, 40, 0.22);
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sidebar.collapsed {
    width: var(--sidebar-width-collapsed) !important;
    max-width: var(--sidebar-width-collapsed);
    box-shadow: none;
  }
}

/* Mobile phone layout: full-overlay sidebar, no persistent icon bar */
#mobileMenuButton {
  display: none;
}

@media (max-width: 767px) {
  #mobileMenuButton {
    display: inline-flex;
    flex-shrink: 0;
  }

  .app-shell,
  .app-shell.sidebar-collapsed,
  .app-shell:not(.sidebar-collapsed) {
    grid-template-columns: 1fr !important;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .main {
    padding-left: 0 !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
  }

  .sidebar,
  .sidebar.collapsed {
    transform: translateX(-100%);
    width: min(var(--sidebar-width), 88vw) !important;
    max-width: 88vw !important;
    box-shadow: none !important;
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
  }

  .app-shell.sidebar-overlay-open .sidebar,
  .app-shell.sidebar-overlay-open .sidebar.collapsed {
    transform: translateX(0) !important;
    box-shadow: 16px 0 40px rgba(12, 30, 40, 0.28) !important;
  }

  .topbar-workday-slot {
    display: none !important;
  }

  /* Ensure eyebrow + headline stack tightly inside title block */
  #topbarBreadcrumb {
    line-height: 1.2 !important;
  }
}

/* Final shell and topbar contract.
   This intentionally sits at the end of the stylesheet: older responsive
   passes had several competing flex/grid rules for the same header. */
.main {
  width: 100%;
  min-width: 0;
  max-width: 100vw;
  /* Ohne explizite Spalten-Definition sizet ein implizites Grid-Track auf
     "auto" — das lässt breite Inhalte (z.B. viele Tabs in der Projekt-Nav)
     die Spalte über die Breite von .main hinaus aufziehen, obwohl .main
     selbst korrekt begrenzt ist. minmax(0,1fr) deckelt die Spalte hart auf
     den verfügbaren Platz, Kinder mit eigenem overflow-x scrollen dann intern. */
  grid-template-columns: minmax(0, 1fr);
}

.main > header,
.main > section {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

.topbar {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) minmax(0, auto);
  align-items: center !important;
  align-content: center !important;
  grid-auto-rows: max-content !important;
  min-height: var(--topbar-min-height) !important;
  height: auto !important;
  gap: 10px 20px !important;
  padding: 10px 20px !important;
  overflow: visible !important;
}

.topbar-title-block,
.topbar > div:first-child {
  min-width: 0 !important;
  max-width: 100% !important;
  flex: initial !important;
}

.topbar-title-block .headline,
#projectHeadline {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding-bottom: 6px !important;
  margin-bottom: -6px !important;
}

.topbar-controls {
  display: grid !important;
  grid-template-columns: auto minmax(260px, 360px) auto;
  align-items: center !important;
  align-content: center !important;
  justify-content: end !important;
  grid-auto-rows: max-content !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 10px !important;
  flex: initial !important;
}

.topbar-primary-actions,
.topbar-utility-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

.topbar-workday-slot {
  width: min(360px, 100%) !important;
  min-width: 0 !important;
}

.topbar-primary-actions .primary-button {
  min-height: 44px;
  white-space: nowrap;
}

.topbar-utility-actions .icon-button,
.topbar-utility-actions .user-chip {
  flex: 0 0 auto;
}

.header-workday-controls {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
}

.header-workday-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px !important;
}

.header-workday-actions .ghost-button {
  min-width: 0 !important;
  width: 100% !important;
  padding-inline: 8px !important;
}

@media (max-width: 1280px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    align-content: start !important;
  }

  .topbar-controls {
    grid-template-columns: auto minmax(260px, 360px) auto !important;
    justify-content: start !important;
    width: 100% !important;
  }
}

@media (max-width: 960px) {
  .topbar-controls {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .topbar-workday-slot {
    grid-column: 1 / -1;
    width: min(100%, 520px) !important;
  }

  .topbar-utility-actions {
    justify-self: end;
  }
}

/* Mid-range: keep controls in a single row so topbar stays 2-line (title + controls) */
@media (min-width: 641px) and (max-width: 960px) {
  .topbar-controls {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
  }
  .topbar-workday-slot {
    grid-column: auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  /* Hide verbose state label — buttons remain self-explanatory */
  #headerWorkdayState {
    display: none !important;
  }
  .header-workday-controls {
    gap: 0 !important;
  }
}

@media (max-width: 640px) {
  .topbar {
    padding: 14px !important;
    align-content: start !important;
  }

  .topbar-controls {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .topbar-primary-actions,
  .topbar-utility-actions {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    white-space: normal !important;
  }

  .topbar-utility-actions {
    justify-self: stretch;
  }

  .topbar-workday-slot {
    width: 100% !important;
  }
}

/* Critical visual QA fixes: Docs editor, report template tiles, file empty state. */
.docs-workspace {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
  min-width: 0;
}

.docs-workspace > *,
.docs-editor-panel,
.docs-editor-preview,
.doc-preview,
.doc-editor-shell,
.doc-editor-head,
.doc-editor-head-left,
.doc-editor-area,
.doc-editor-page,
.doc-rich-editor {
  min-width: 0 !important;
  max-width: 100%;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

.docs-editor-panel {
  overflow: hidden;
}

.docs-editor-preview,
.doc-preview {
  overflow: auto !important;
  overflow-x: auto !important;
  word-break: normal !important;
}

.doc-editor-shell {
  width: 100%;
  align-content: start;
}

.doc-editor-head {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) max-content;
  align-items: start !important;
  gap: 14px !important;
}

.doc-editor-head-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: visible !important;
}

.doc-editor-head-actions .ghost-button {
  min-width: max-content;
  overflow: visible;
}

.doc-title-input,
.doc-editor-meta,
.docs-editor-preview .muted,
.docs-editor-preview .doc-title-button {
  width: 100%;
  max-width: 100%;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.doc-rich-editor {
  min-width: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  direction: ltr !important;
}

.doc-rich-editor *,
.doc-preview * {
  max-width: 100%;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.doc-editor-toolbar {
  overflow: visible;
}

.auswertung-template-grid {
  align-items: stretch;
}

.auswertung-template-tile {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start !important;
  min-height: 132px;
  overflow: hidden;
}

.auswertung-tile-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 72px;
  min-width: 72px !important;
  max-width: 72px !important;
  min-height: 40px;
  margin-top: 2px;
  overflow: hidden;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  text-align: center;
  line-height: 1.05 !important;
}

.auswertung-tile-body {
  min-width: 0;
  align-content: start;
  gap: 6px !important;
}

.auswertung-tile-body strong,
.auswertung-tile-body p {
  position: static !important;
  display: block;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auswertung-tile-body strong {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

.auswertung-tile-body p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.empty-state-icon {
  min-width: var(--empty-icon-size);
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1;
}

@media (max-width: 980px) {
  .docs-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .doc-editor-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-editor-head-actions {
    justify-content: flex-start !important;
  }
}

/* QA v61: Aufgabenliste vor Quetsch-Layout schuetzen */

#view-aufgaben .global-awork-task-list-rows {
  min-width: min(760px, 100%);
}

#view-aufgaben .global-awork-task-row {
  grid-template-columns: 14px 22px 14px 28px minmax(140px, 1fr) auto;
}

@media (min-width: 1101px) and (max-width: 1399px) {
  #view-aufgaben .task-layout.is-split {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #view-aufgaben .task-layout.is-split .detail-panel {
    position: fixed !important;
    top: 18px !important;
    right: 18px !important;
    width: min(520px, calc(100vw - 116px)) !important;
    height: auto !important;
    max-height: calc(100vh - 36px) !important;
    transform: translateX(0) !important;
    border-radius: var(--radius-panel) !important;
    box-shadow: var(--shadow-lg) !important;
    z-index: 80 !important;
  }
}

@media (min-width: 1400px) {
  #view-aufgaben .task-layout.is-split {
    grid-template-columns: minmax(640px, 1fr) minmax(420px, 0.72fr) !important;
  }
}

/* QA v62: kleine visuelle Kanten glätten */
#view-home .dashboard-time-status-card strong {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.18;
}

#projectSettingsBudget {
  text-align: left;
}

#projectSettingsBudget::placeholder {
  text-align: left;
}

/* QA v63: globale Layout- und Komponenten-Konsistenz */
:root {
  --card-padding-sm: 10px 12px;
  --card-padding-md: 14px 16px;
  --card-padding-lg: 18px 20px;
  --list-item-padding: 9px 12px;
}

.is-context-hidden {
  display: none !important;
}

#topbarBreadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  color: var(--color-text-muted);
  font-size: var(--type-label);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  line-height: var(--line-label);
  text-transform: uppercase;
}

#topbarBreadcrumb .crumb {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  height: auto;
  line-height: 1.4;
  padding: 2px 4px;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#topbarBreadcrumb .crumb.is-link {
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}
#topbarBreadcrumb .crumb.is-link:hover {
  background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
  color: var(--dark-blue, var(--color-text));
  text-decoration: underline;
}
#topbarBreadcrumb .crumb.is-link:focus-visible {
  outline: 2px solid var(--brand, #1e5167);
  outline-offset: 1px;
}
#topbarBreadcrumb .crumb.is-current {
  color: color-mix(in srgb, var(--color-text-muted) 84%, var(--dark-blue));
}
#topbarBreadcrumb .crumb-sep {
  flex-shrink: 0;
  color: var(--color-text-muted);
  opacity: 0.6;
}

/* Override globale Touch-Target-Regel (44px) für Breadcrumbs auf Mobile/Touch */
@media (max-width: 720px), (pointer: coarse) {
  #topbarBreadcrumb .crumb,
  #topbarBreadcrumb button.crumb {
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 2px 4px;
  }
}

#topbarBreadcrumb span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-text-muted) 84%, var(--dark-blue));
}

.panel h2,
.panel h3,
.panel h4,
.card h2,
.card h3,
.card h4,
.settings-card h3,
.project-task-section h4,
.settings-overview-title {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.dashboard-radar-item,
.dashboard-team-item,
.management-row,
.global-awork-task-row,
.project-task-list-row,
.notification-item,
.doc-item {
  padding: var(--list-item-padding);
}

.panel,
.dashboard-time-status-card,
.project-fact-card,
.project-home-kpi-card,
.lohn-kpi,
.stats-kpi-card {
  padding: var(--card-padding-md);
}

.auswertung-template-tile,
.settings-overview-card {
  padding: var(--card-padding-lg);
}

.project-board-task-item .task-timer-play-button {
  background: var(--color-primary-soft) !important;
  color: var(--dark-blue) !important;
  box-shadow: none !important;
  border: 1px solid rgba(41, 123, 150, 0.18) !important;
}

.project-inner-nav,
.lohn-tab-nav,
.cal-view-tabs,
.stats-period-tabs,
.doc-panel-tabs,
.ptimer-tab-bar {
  border-bottom: 1px solid var(--line);
  background: transparent !important;
  box-shadow: none !important;
}

.project-inner-link,
.zeiten-tab-btn,
.lohn-tab-btn,
.cal-view-tabs .ghost-button,
.stats-period-tabs .ghost-button,
.doc-panel-tab,
.ptimer-tab-btn {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #36586b !important;
}

.project-inner-link.is-active,
.zeiten-tab-btn.is-active,
.lohn-tab-btn.is-active,
.cal-view-tabs .ghost-button.is-active,
.stats-period-tabs .ghost-button.is-active,
.doc-panel-tab.is-active,
.ptimer-tab-btn.is-active {
  border-bottom-color: var(--medium-blue) !important;
  color: var(--dark-blue) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 900;
}

.my-tasks {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.my-tasks h2 {
  flex-shrink: 0;
  padding: 0 0 8px;
}

#myTasksList {
  flex: 1 1 auto;
  overflow-y: auto;
  scrollbar-width: thin;
  max-height: min(40vh, 380px);
}

/* Source-mode label (Tagesplan / Fokus) */
.todo-source-label {
  list-style: none;
  padding: 0 0 4px 0;
  margin: 0;
}
.todo-source-label span {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
}

#myTasksList li,
.sidebar .day-plan-short-card,
.sidebar .day-plan-short-more {
  overflow: hidden;
}

#myTasksList li:not(.todo-source-label),
.sidebar .day-plan-short-card strong,
.sidebar .day-plan-short-card span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.settings-overview-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ── Mobile layout: panel headers, touch targets, content density ── */
@media (max-width: 767px) {
  /* Panel headers: stack heading + toolbar vertically */
  .panel-header {
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
  }

  .panel-header > h2,
  .panel-header > h3,
  .panel-header > h4 {
    flex: 1 1 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }

  /* Toolbar stays compact and left-aligned below heading */
  .panel-header > .toolbar-inline {
    flex: 0 0 auto !important;
  }

  /* Minimum touch target — Apple HIG recommends 44px */
  button, [role="button"], a, input, select, textarea {
    min-height: 44px;
  }

  /* Navigation links are full-width rows — 44px makes them comfortably tappable */
  .side-link {
    min-height: 44px !important;
  }

  /* Tab bars are compact by design but still need 40px */
  .cal-view-tabs button,
  .project-inner-link, .zeiten-tab-btn, .lohn-tab-btn,
  .stats-period-tabs .ghost-button, .doc-panel-tab, .ptimer-tab-btn {
    min-height: 40px !important;
  }

  /* Prevent iOS Safari auto-zoom on input focus (triggers when font-size < 16px) */
  input, select, textarea {
    font-size: max(16px, 1em) !important;
  }

  /* Remove mobile tap highlight; use CSS focus styles instead */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  button:active, [role="button"]:active, a:active {
    opacity: 0.75;
    transition: opacity 80ms ease;
  }

  /* Section cards: reduce padding on mobile */
  .panel {
    padding: 12px !important;
  }

  .card {
    padding: var(--card-padding-sm) !important;
  }

  /* FAB: keep clear of the bottom edge */
  .fab,
[class*="fab"] {
    bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    right: 16px !important;
  }
}

/* ── Mobile topbar: must follow the "Final shell and topbar contract" to win ── */
@media (max-width: 767px) {
  .topbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: max(12px, env(safe-area-inset-top)) 14px 12px !important;
    min-height: unset !important;
    height: auto !important;
  }

  /* Title block: hamburger + stacked eyebrow/headline, takes remaining space */
  .topbar-title-block,
  .topbar > div:first-child {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  /* Controls become a flex-level participant alongside the title block */
  .topbar-controls {
    display: contents !important;
  }

  /* Hide desktop-only CTA row on mobile */
  .topbar-primary-actions {
    display: none !important;
  }

  .topbar-utility-actions {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  /* Compact eyebrow/headline text */
  #topbarBreadcrumb {
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #projectHeadline {
    font-size: 16px !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* QA v64: funktionale B-Optimierungen */
.auswertung-library-row {
  grid-template-columns: minmax(180px, 1fr) minmax(120px, auto) minmax(96px, auto) 40px;
  cursor: pointer;
}
.auswertung-library-delete {
  justify-self: end;
  opacity: 0.72;
}
.auswertung-library-delete:hover,
.auswertung-library-delete:focus-visible {
  opacity: 1;
}
.project-board-task-item .timeline-open-button {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  line-height: 1.35;
}
.project-task-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.project-task-toolbar-left {
  grid-template-columns: minmax(220px, 1fr) minmax(140px, 180px);
  flex: 1 1 520px;
}
.project-task-toolbar-actions {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex: 0 0 auto;
}
.project-task-export-controls.export-controls.is-compact-export {
  justify-self: end;
}
.project-fact-card.is-warning {
  border-color: rgba(180, 83, 9, 0.28);
  background: rgba(251, 191, 36, 0.12);
}
.project-fact-hint,
.zeiten-status-metric-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #92400e;
  line-height: 1.25;
}
.row-overflow-menu {
  position: relative;
  display: inline-flex;
}
.row-overflow-menu summary {
  list-style: none;
  cursor: pointer;
}
.row-overflow-menu summary::-webkit-details-marker { display: none; }
.row-overflow-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 140px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--elevation-overlay, 0 18px 40px rgba(20, 56, 74, 0.18));
}
.input-with-unit {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.input-with-unit input {
  width: 100%;
  padding-right: 34px;
}
.input-unit {
  position: absolute;
  right: 12px;
  color: #51626e;
  font-size: 12px;
  pointer-events: none;
}
.day-plan-capacity-progress {
  display: grid;
  gap: 6px;
  margin: 8px 0 12px;
}
.day-plan-capacity-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: #36586b;
}
.day-plan-capacity-track {
  height: 7px;
  border-radius: 999px;
  background: #e5eef4;
  overflow: hidden;
}
.day-plan-capacity-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--medium-blue), #2c9ec9);
}
.day-plan-capacity-progress.is-overbooked .day-plan-capacity-track span {
  background: linear-gradient(90deg, #f59e0b, #dc2626);
}
/* v345: Überbuchungs-Hinweis am Auslastungsbalken */
.day-plan-capacity-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #b91c1c;
}
.day-plan-capacity-warning .ci-icon-svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
/* v345: "Auch bei …" Badge auf der Aufgabenkarte */
.day-planner-cross-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
  white-space: nowrap;
}
.day-planner-cross-badge .ci-icon-svg {
  width: 13px;
  height: 13px;
}
.day-planner-task-card.is-cross-assigned {
  border-left: 3px solid #f59e0b;
}
/* v345: ausklappbare Liste "bereits einem anderen Mitarbeiter zugeordnet" */
.day-planner-crossperson {
  border: 1px solid #fde68a;
  background: #fffbeb;
  border-radius: var(--r-md, 12px);
  padding: 6px 8px;
}
.day-planner-crossperson-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: #92400e;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 4px;
  text-align: left;
}
.day-planner-crossperson-toggle .ci-icon-svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.day-planner-crossperson-caret {
  margin-left: auto;
  font-size: 12px;
}
.day-planner-crossperson-list {
  list-style: none;
  margin: 4px 0 2px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.day-planner-crossperson-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 7px 10px;
  background: #ffffff;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 13px;
}
.day-planner-crossperson-item.is-selected {
  border-color: #f59e0b;
  box-shadow: inset 0 0 0 1px #f59e0b;
}
.day-planner-crossperson-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.day-planner-crossperson-who {
  color: #92400e;
  font-weight: 600;
  white-space: nowrap;
}
/* v345: Pop-up "Planzeit festlegen" */
.day-plan-plantime-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.day-plan-plantime-quick .ghost-button {
  flex: 1 1 auto;
  min-width: 72px;
}
.day-plan-plantime-free {
  display: block;
  margin-top: 12px;
  font-size: 13px;
}
.day-plan-plantime-free > span {
  display: block;
  margin-bottom: 4px;
  color: var(--c-text-muted, #51626e);
}
/* v345: .app-dialog-actions{display:flex} überschreibt sonst .hidden — explizit ausblenden */
.app-dialog-actions.day-plan-plantime-actions-step1.hidden,
.app-dialog-actions.day-plan-plantime-actions-step2.hidden {
  display: none;
}
.input-error {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}
.day-plan-empty-state {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px dashed rgba(41, 123, 150, 0.26);
  border-radius: 14px;
  background: rgba(247, 251, 253, 0.86);
}
.day-plan-empty-state h3 {
  margin: 0 0 4px;
}
.day-plan-empty-state p {
  margin: 0;
  color: #587184;
}
.day-plan-empty-state .ghost-button {
  margin-top: 10px;
}
.day-plan-list-empty {
  list-style: none;
  margin: 0;
}
.zeiten-status-metric .is-neutral {
  color: #51626e;
}
.zeiten-status-metric .zeiten-status-metric-hint {
  color: #51626e;
}
.lohn-table-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: inset -18px 0 18px -22px rgba(20, 56, 74, 0.8);
}
.lohn-cockpit-table th:first-child,
.lohn-cockpit-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
}
.lohn-cockpit-table thead th:first-child {
  z-index: 3;
}
@media (max-width: 760px) {
  .project-task-toolbar-left {
    grid-template-columns: 1fr;
    flex-basis: 100%;
  }
  .project-task-toolbar-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .day-plan-empty-state {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ── C1: Global search at top of sidebar ────────────────────── */
.side-search-top {
  padding: 8px 12px 4px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.side-search-top .side-search-quick {
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius-md, 8px);
  background: rgba(255,255,255,0.12);
  padding: 7px 10px;
  color: rgba(255,255,255,0.82);
  font-size: 13px;
}
.side-search-top .side-search-quick:hover { background: rgba(255,255,255,0.2); color: #fff; }
.search-kbd {
  margin-left: auto;
  font-size: 10px;
  opacity: 0.6;
  font-family: inherit;
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: 0;
  font-weight: 600;
}
/* side-search inside the top-section: kein extra Padding/Border nötig */
.side-search-top .side-search {
  display: block;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}
/* Sidebar-Suchfeld: kompaktere Höhe */
.side-search-top .side-search-field,
.side-search-top .side-search-field input {
  min-height: 34px !important;
  height: 34px !important;
}
.side-search-top {
  padding-bottom: 6px;
}
.side-search-top .side-search-quick { display: none; }
.sidebar.collapsed .side-search-top .side-search-quick { display: grid; }

/* Collapsed sidebar: icon-only white tile */
.sidebar.collapsed .side-search-top {
  padding: 8px 0 4px;
  display: flex;
  justify-content: center;
  border-bottom: none;
}
.sidebar.collapsed .side-search-top .side-search-quick {
  width: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
  background: #fff;
  color: var(--light-blue, #2c9ec9);
  border: 1px solid rgba(44,158,201,0.22);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 1px 4px rgba(30,81,103,0.08);
}
.sidebar.collapsed .side-search-top .side-search-quick:hover {
  background: #f0f9ff;
  color: #1a7aaa;
}
.sidebar.collapsed .side-search-top .side-search-quick .search-kbd { display: none; }
.sidebar.collapsed .side-search-top .side-search-quick .nav-icon { width: 18px; height: 18px; }

/* Search overlay: expands from collapsed sidebar into content area */
.sidebar.collapsed .side-search-top .side-search { display: none; }
.sidebar.collapsed.search-overlay-open .side-search-top .side-search {
  display: block;
  position: fixed;
  left: calc(var(--sidebar-width-collapsed, 72px) + 8px);
  top: var(--search-overlay-top, 72px);
  width: min(360px, calc(100vw - var(--sidebar-width-collapsed, 72px) - 24px));
  z-index: 400;
  background: #fff;
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 32px rgba(30,81,103,0.18), 0 2px 8px rgba(30,81,103,0.1);
  padding: 0;
}
.sidebar.collapsed.search-overlay-open .side-search-top .side-search input {
  background: #fff;
  color: var(--text-primary, #1a3040);
  border: 1.5px solid rgba(44,158,201,0.4);
  border-radius: var(--radius-md, 8px);
  padding: 10px 12px 10px 36px;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  font-size: 14px;
}
.sidebar.collapsed.search-overlay-open .side-search-icon {
  color: var(--light-blue, #2c9ec9);
}
.sidebar.collapsed.search-overlay-open #globalSearchDropdown {
  border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
  box-shadow: none;
  border-top: 1px solid rgba(44,158,201,0.12);
}

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

/* Search icon inside sidebar input */
.side-search-field {
  position: relative;
  display: flex;
  align-items: center;
}
.side-search-field input {
  flex: 1;
  min-width: 0;
}
.side-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--light-blue, #2c9ec9);
  pointer-events: none;
  z-index: 1;
}
#globalSearch {
  padding-left: 34px;
}

/* ── C3: Auto-hide "Gespeichert" sync chip ──────────────────── */
@keyframes savedChipFade {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}
.sync-status-chip.is-gespeichert {
  animation: savedChipFade 4s ease-out forwards;
}

/* ── C4: Workday state chip color states ────────────────────── */
.header-workday-state.state-running {
  color: #0f7c4b;
}
.header-workday-state.state-on-break {
  color: #8a6700;
}
.header-workday-state.state-stopped {
  color: var(--color-text-muted);
}

/* ── C8: Lohn IST warn color ────────────────────────────────── */
.lohn-warn-text { color: #b45309; }

/* ── C9: Visual separator between lohn user selector and year chips */
.lohn-header-controls {
  gap: 14px;
}
.lohn-header-controls .toolbar-inline {
  border-left: 1.5px solid var(--color-border, rgba(0,0,0,0.12));
  padding-left: 14px;
}

/* v436: Mobile-Polish — Lohn-Header-Controls auf schmalen Viewports stacken,
   Border-Separator entfernen (sieht im Stack-Layout falsch aus) */
@media (max-width: 760px) {
  .lohn-page-header {
    flex-direction: column;
    align-items: stretch;
  }
  .lohn-header-controls {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .lohn-header-controls .toolbar-inline,
  .lohn-header-controls .lohn-payroll-model-toggle {
    border-left: none !important;
    padding-left: 0 !important;
    width: 100%;
    justify-content: space-between;
  }
  .lohn-user-selector-dropdown {
    width: 100%;
  }
  .lohn-user-selector-dropdown .lohn-user-btn {
    width: 100%;
    justify-content: space-between;
  }
  .lohn-user-popover {
    left: 0;
    right: 0;
    min-width: 0;
  }
}

/* ── C15: Calendar week view – dim past day columns ─────────── */
.calw-col.is-past {
  background: rgba(0,0,0,0.025);
}
.calw-head-col.is-past { opacity: 0.55; }

/* ── C16: Board column task count badge ─────────────────────── */
.board-col-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-border, rgba(0,0,0,0.1));
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 4px;
}

/* ── Notification drawer improvements ───────────────────────── */
.notification-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  padding-left: 18px;
}
.notification-project-group {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary, #1e5167) 22%, var(--color-border));
  border-radius: var(--list-item-radius);
  background: color-mix(in srgb, var(--color-surface, #fff) 94%, var(--primary, #1e5167) 6%);
  list-style: none;
}
.notification-project-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.notification-project-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.notification-project-title strong,
.notification-task-title {
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
}
.notification-project-items {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.notification-project-items .notification-item {
  background: var(--color-surface, #fff);
}
.notification-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 11px;
}
.notification-check-button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
}
.notification-check-button.is-done {
  color: var(--color-success, #18836c);
  background: var(--color-success-soft, #e7f6f1);
}
/* Gelesen-Toggle: klickbar, um wieder auf ungelesen zu setzen. */
.notification-check-button.is-toggle {
  cursor: pointer;
}
.notification-check-button.is-toggle:hover {
  color: var(--color-text, #1f2933);
  background: var(--color-hover, #eef1f5);
}
.notification-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.notification-row-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.notif-unread-dot {
  position: absolute;
  left: 4px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary, #1e5167);
  flex-shrink: 0;
}
.notif-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.45;
}
.notif-time {
  font-size: 11px;
  margin-top: 1px;
}
.notification-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--color-text-muted);
  font-size: 13px;
  list-style: none;
}
/* v383: Größeres Empty-State-Icon mit dezenter Transparenz */
.kw-icon-empty-state {
  width: 32px;
  height: 32px;
  opacity: 0.3;
  stroke-width: 1.3;
}

/* v407: Pinned-Task-Reihe in der Aufgaben-Liste — dezenter Brand-Akzent links */
.project-task-list-row.is-pinned-row {
  border-left: 3px solid color-mix(in srgb, var(--brand, #1e5167) 60%, transparent);
}
.project-task-list-row.is-pinned-row::before {
  content: none; /* falls bestehende ::before-Indikatoren existieren */
}

/* Nur lesen (Beschluss Jasmin 07.10.2026): Aufgaben aus Projekten, in denen man nicht
 * Mitglied ist, stehen unter „Alle Aufgaben“ grau und gekennzeichnet. Der Titel bleibt
 * klickbar (öffnet lesend), alles andere ist gesperrt. */
.project-task-list-row.is-nur-lesen {
  background: var(--color-surface-muted, #f1f5f9);
  cursor: default;
}
.project-task-list-row.is-nur-lesen .project-task-title-btn,
.project-task-list-row.is-nur-lesen .task-title-project {
  color: var(--color-text-muted, #6b7785);
  cursor: pointer;
}
.project-task-list-row.is-nur-lesen .project-task-state-dot,
.project-task-list-row.is-nur-lesen .project-task-row-right > :not(.task-nur-lesen-badge) {
  opacity: 0.75;
}
.project-task-list-row.is-nur-lesen .project-task-state-dot,
.project-task-list-row.is-nur-lesen .task-bulk-check {
  cursor: not-allowed;
}
.project-task-list-row.is-nur-lesen .task-drag-handle.is-gesperrt {
  visibility: hidden;
}
.task-nur-lesen-badge {
  white-space: nowrap;
  flex: 0 0 auto;
}
.task-nur-lesen-hinweis {
  margin: 4px 0 10px;
  font-size: 13px;
  line-height: 1.45;
}

/* v419: Activity-Log-Modal */
.dashboard-activity-more {
  list-style: none;
  padding: 8px 0 0;
  text-align: center;
  border-top: 1px dashed var(--border-soft, #e5e9ee);
  margin-top: 4px;
}
.activity-log-overlay .activity-log-modal {
  max-width: 720px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.activity-log-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 18px 18px;
  list-style: none;
  margin: 0;
}

/* v412: Onboarding-Wizard — mehrstufige UI */
.first-run-wizard {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.first-run-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}
.fr-step-dot {
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand, #1e5167) 16%, transparent);
  transition: background 0.2s ease;
}
.fr-step-dot.is-active { background: var(--brand, #1e5167); }
.fr-step-dot.is-done { background: color-mix(in srgb, var(--brand, #1e5167) 60%, transparent); }
.first-run-features {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
/* v463: robustes Flex-Layout statt Grid (Grid hat Text-Nodes als Items
   in eigene Cells gepackt — auf schmalen Breiten brachen Wörter einzeln um). */
.first-run-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.first-run-features .fr-feat-icon {
  flex: 0 0 auto;
  width: 28px;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
}
.first-run-features .fr-feat-text {
  flex: 1 1 0;
  min-width: 0;
}
.first-run-features .fr-feat-text strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  line-height: 1.3;
}
.first-run-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.first-run-choice {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  text-align: left;
  padding: 14px 16px;
  background: var(--surface-2, #f6f8fa);
  border: 1px solid var(--border-soft, #e5e9ee);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.first-run-choice:hover {
  background: color-mix(in srgb, var(--brand, #1e5167) 6%, transparent);
  border-color: color-mix(in srgb, var(--brand, #1e5167) 30%, transparent);
}
.first-run-choice:active { transform: scale(0.99); }
.first-run-choice-icon {
  grid-row: 1 / span 2;
  font-size: 28px;
  align-self: center;
  text-align: center;
}
.first-run-choice strong { font-size: 14px; }
.first-run-choice span:not(.first-run-choice-icon) { font-size: 12px; color: var(--color-text-muted, #6b7785); }
.first-run-shortcuts {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.first-run-shortcuts li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--surface-2, #f6f8fa);
  border-radius: 8px;
  font-size: 13px;
}
.first-run-shortcuts kbd {
  background: var(--surface, #fff);
  border: 1px solid var(--border-soft, #e5e9ee);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
.first-run-actions-right { display: flex; gap: 6px; }

/* v406: Pinned-Task-Button im Detail — wenn aktiv: brand-color + filled bg */
.task-detail-pin-btn.is-active {
  background: color-mix(in srgb, var(--brand, #1e5167) 14%, transparent);
  color: var(--brand, #1e5167);
  border-color: color-mix(in srgb, var(--brand, #1e5167) 40%, transparent);
}
.task-detail-pin-btn.is-active:hover {
  background: color-mix(in srgb, var(--brand, #1e5167) 22%, transparent);
}

/* v406: Pinned-Tasks in Sidebar To-Do — dezenter Brand-Akzent links */
.todo-pin-item {
  border-left: 3px solid color-mix(in srgb, var(--brand, #1e5167) 60%, transparent);
  padding-left: 8px;
  background: color-mix(in srgb, var(--brand, #1e5167) 4%, transparent);
}
.todo-pin-item:hover {
  background: color-mix(in srgb, var(--brand, #1e5167) 9%, transparent);
}

/* v387: Filter-Dot in der Sidebar (signalisiert aktive Filter in einer View) */
.nav-filter-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: #f59e0b; /* amber */
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface, var(--c-bg-page, #fff));
  pointer-events: none;
}
.side-link { position: relative; }

/* v384: "Alle Filter zurücksetzen"-Chip im Aufgaben-Header */
.badge-filter-reset-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--brand, #1e5167);
  background: color-mix(in srgb, var(--brand, #1e5167) 6%, transparent);
}
.badge-filter-reset-all:hover {
  background: color-mix(in srgb, var(--brand, #1e5167) 14%, transparent);
}

/* ── Drawer slide-in animation ───────────────────────────────── */
@keyframes drawerSlideIn {
  from { opacity: 0; transform: translateX(12px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.notification-drawer:not(.hidden) {
  animation: drawerSlideIn 180ms cubic-bezier(0.2, 0, 0.1, 1) both;
}

/* Keep notification drawer fully within the content area (right of sidebar).
   v394: Nur auf Desktop greifen — auf Mobile (768px−) ist die Sidebar hidden,
   und die sidebar-width-Subtraktion machte den Drawer winzig (~79px). */
@media (min-width: 769px) {
  body:has(.sidebar:not(.collapsed)) .notification-drawer {
    max-width: calc(100vw - var(--sidebar-width) - 16px);
  }
  body:has(.sidebar.collapsed) .notification-drawer {
    max-width: calc(100vw - var(--sidebar-width-collapsed) - 16px);
  }
}

/* ── Icon-only button sizing fix ─────────────────────────────── */
.icon-only-button svg { display: block; }

/* ── Dark mode: fehlende Komponenten ────────────────────────── */

[data-theme="dark"] .settings-card {
  background: linear-gradient(180deg, rgba(18, 34, 44, 0.96), rgba(15, 29, 38, 0.96));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .settings-card h3 {
  color: #b8d8e8;
}

[data-theme="dark"] .day-planner-card {
  background: rgba(14, 28, 38, 0.98);
  border-color: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .day-planner-task-card {
  background: rgba(20, 38, 50, 0.95);
  border-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .day-planner-task-card:hover {
  background: rgba(26, 48, 64, 0.98);
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .day-planner-task-card.is-selected {
  background: rgba(41, 123, 150, 0.18);
  border-color: var(--light-blue);
}

[data-theme="dark"] .day-planner-task-card.is-selected .day-planner-task-check {
  box-shadow: inset 0 0 0 5px rgba(41, 123, 150, 0.18);
}

[data-theme="dark"] .day-planner-task-title {
  color: #d0e8f4;
}

[data-theme="dark"] .day-planner-task-description,
[data-theme="dark"] .day-planner-intro p {
  color: #6a90a2;
}

[data-theme="dark"] .day-planner-section h4 {
  color: #8ab4c8;
}

[data-theme="dark"] .day-planner-intro h3 {
  color: #c4dfe9;
}

/* ── Auto-Theme: System-Dark-Mode ────────────────────────────── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --dark-grey: #e2edf3;
    --line: #2e4450;
    --white: #1a2a34;
    --shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
  html:not([data-theme="light"]):not([data-theme="dark"]) body {
    color: var(--dark-grey);
    background:
      radial-gradient(circle at 5% 5%, rgba(44, 158, 201, 0.08), transparent 35%),
      radial-gradient(circle at 85% 10%, rgba(30, 81, 103, 0.12), transparent 35%),
      linear-gradient(140deg, #0d1a22, #111f28 60%, #0b1820);
  }
  html:not([data-theme="light"]):not([data-theme="dark"]) .topbar {
    background: rgba(15, 30, 40, 0.85);
    border-color: rgba(255, 255, 255, 0.07);
  }
  html:not([data-theme="light"]):not([data-theme="dark"]) .panel {
    background: rgba(18, 32, 42, 0.9);
    border-color: rgba(255, 255, 255, 0.07);
  }
  html:not([data-theme="light"]):not([data-theme="dark"]) input:not(.side-search input),
  html:not([data-theme="light"]):not([data-theme="dark"]) select,
  html:not([data-theme="light"]):not([data-theme="dark"]) textarea {
    background: #1a2d3a;
    color: var(--dark-grey);
    border-color: var(--line);
  }
  html:not([data-theme="light"]):not([data-theme="dark"]) .ghost-button {
    color: #b0ccd8;
  }
  html:not([data-theme="light"]):not([data-theme="dark"]) .task-card {
    background: #152130;
    border-color: var(--line);
  }
}

/* ── Mobile content fixes ── */
@media (max-width: 767px) {
  /* Zeitauswertungen: single-column tile grid so text isn't squeezed */
  .auswertung-template-grid {
    grid-template-columns: 1fr !important;
  }

  .auswertung-template-tile {
    min-height: 72px !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }

  .auswertung-tile-icon {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
  }

  /* Auswertung library: collapse 4-column table to 3 columns (hide "updated" column) */
  .auswertung-library-head,
  .auswertung-library-row {
    grid-template-columns: minmax(0, 1fr) auto 36px !important;
  }

  /* Hide the "Zuletzt geändert" column header and cell */
  .auswertung-library-head > *:nth-child(3),
  .auswertung-library-row > *:nth-child(3) {
    display: none !important;
  }

  /* Project task toolbar: full-width stack */
  .project-task-toolbar {
    flex-direction: column !important;
  }

  .project-task-toolbar-left {
    grid-template-columns: 1fr !important;
    flex: 1 1 auto !important;
    width: 100% !important;
  }

  /* Kunden: fix "Kundenliste" label wrap */
  [class*="kunden"] h3,
[class*="kunden"] h4 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Zeiten: workday control buttons should be full-width on mobile */
  .header-workday-actions {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Sticky topbar shadow when scrolled */
  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    box-shadow: 0 1px 0 var(--color-border) !important;
  }

  /* Horizontal scroll containers: always show scrollbar track on touch */
  [class*="timeline"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory;
  }

  /* Person chips row in Lohn/Mitarbeiter: allow wrapping */
  [class*="person-tabs"],
[class*="user-chips"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Settings grid: single column */
  .settings-overview-grid {
    grid-template-columns: 1fr !important;
  }

  /* Docs workspace: override the global 2-column rule to single column */
  .docs-workspace {
    grid-template-columns: 1fr !important;
  }

  /* Project Kanban board: horizontal scroll instead of squeezing 3 columns */
  .project-mini-board {
    grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
  }

  /* Notification & mention drawers: bottom sheet */
  .notification-drawer,
  .mention-drawer {
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-height: calc(100dvh - 56px) !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    animation: slide-up-mobile 240ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Project timer dock: safe area margin for home indicator */
  .project-timer-dock {
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }

  /* Main content: prevent rubber-band pull-to-refresh */
  .main {
    overscroll-behavior-y: contain;
  }

  /* Task meta chips and calendar chips: slightly larger for touch readability */

  .calendar-chip {
    font-size: 11px !important;
    min-height: 26px !important;
    padding: 2px 6px !important;
  }

  /* Project overview KPI cards: 2-column on mobile instead of collapsing to 1 */
  .project-home-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Auswertung KPI grid: always 2 columns on mobile */
  .auswertung-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── v141: Wochenstunden-Ziel ──────────────────────────── */
.zeiten-week-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.zeiten-week-goal {
  min-width: 220px;
  max-width: 280px;
}

.zeiten-week-goal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.zeiten-week-goal-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6a8ea0;
  flex: 1;
}

/* Static goal value (replaces editable input) */
.zeiten-week-goal-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-strong, #111827);
}

.zeiten-week-goal-bar-wrap {
  height: 7px;
  background: var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 5px;
}

.zeiten-week-goal-bar {
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s ease;
  min-width: 3px;
}

.zeiten-week-goal-bar.goal-bar-low  { background: #e74c3c; }
.zeiten-week-goal-bar.goal-bar-mid  { background: #e67e22; }
.zeiten-week-goal-bar.goal-bar-near { background: #3498db; }
.zeiten-week-goal-bar.goal-bar-done { background: #27ae60; }

.zeiten-week-goal-sub {
  font-size: 11px;
  margin: 0;
  text-align: right;
}

/* ── v154: Überfällige Aufgaben – Zeilenhervorhebung (box-shadow statt border-left, damit Grid nicht verschoben wird) */
.project-task-list-row.is-overdue-row {
  box-shadow: inset 3px 0 0 var(--color-warning, #d97706);
}
.dark .project-task-list-row.is-overdue-row,
[data-theme="dark"] .project-task-list-row.is-overdue-row {
  box-shadow: inset 3px 0 0 #fbbf24;
}

/* ── v153: Zeiten-Hero Projektzeit-Abdeckungs-Balken ─────────── */
.zeiten-coverage-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 0;
  font-size: 11.5px;
}
.zeiten-coverage-bar-label {
  color: var(--color-text-muted);
  white-space: nowrap;
  min-width: 150px;
}
.zeiten-coverage-bar-track {
  flex: 1;
  background: var(--surface-raised, #f0f2f5);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}
.zeiten-coverage-bar-fill {
  height: 100%;
  background: #27ae60;
  border-radius: 99px;
  transition: width .35s ease;
}
.zeiten-coverage-bar-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 30px;
  text-align: right;
}
.dark .zeiten-coverage-bar-track { background: #2a2d36; }

/* ── v152: Projekt Home – Zuletzt aktiv ─────────────────────── */
/* (reuses .project-home-meta-row / .muted — no extra CSS needed) */

/* ── v151: Task-Detail Schätzzeit-Fortschrittsbalken ────────── */
.task-effort-progress {
  margin: 4px 0 8px;
  padding: 8px 12px;
  background: var(--surface-raised, #f8f9fb);
  border-radius: 8px;
  border: 1px solid var(--border, #e5e7eb);
}
.task-effort-progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 6px;
}
.task-effort-progress-bar-wrap {
  background: var(--border, #e5e7eb);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}
.task-effort-progress-bar {
  height: 100%;
  background: #27ae60;
  border-radius: 99px;
  transition: width .3s ease;
}
.task-effort-progress-bar.is-warn { background: #f39c12; }
.task-effort-progress-bar.is-over { background: #e74c3c; }
.dark .task-effort-progress { background: #1e2130; border-color: #374151; }
.dark .task-effort-progress-bar-wrap { background: #374151; }

/* ── v150: Meine Woche – Vorwochenvergleich ─────────────────── */
/* (reuses .zeiten-week-summary article + .overtime-balance-* classes) */

/* ── v149: Projekt-Zeiten Tätigkeitstyp-Auswertung ─────────── */
/* (reuses .proj-member-dist-* styles from v146) */

/* ── v148: Projekt Home – Prioritäts-Badges ─────────────────── */
.proj-prio-dist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}
.proj-prio-badge {
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.proj-prio-badge strong { font-weight: 700; }
.proj-prio-badge.prio-badge-kritisch { background: #fde8e8; color: #b91c1c; }
.proj-prio-badge.prio-badge-hoch    { background: #fff3e0; color: #c05621; }
.proj-prio-badge.prio-badge-mittel  { background: #e8f0fe; color: #2563eb; }
.proj-prio-badge.prio-badge-niedrig { background: #f0f0f0; color: #51626e; }
.dark .proj-prio-badge.prio-badge-kritisch { background: #450a0a; color: #fca5a5; }
.dark .proj-prio-badge.prio-badge-hoch     { background: #431407; color: #fdba74; }
.dark .proj-prio-badge.prio-badge-mittel   { background: #1e3a5f; color: #93c5fd; }
.dark .proj-prio-badge.prio-badge-niedrig  { background: #1f2937; color: #9ca3af; }

/* ── v147: Mein Monat – Aktivitäts-Auswertung ─────────────── */
/* (reuses .zeiten-activity-* styles from v142) */

/* ── v146: Zeitverteilung nach Mitglied (Projekt-Zeiten-Tab) ── */
.proj-member-dist {
  padding: 4px 0 8px;
}
.proj-member-dist-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}
.proj-member-dist-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.proj-member-dist-row {
  display: grid;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.proj-member-dist-avatar {
  font-size: 9px;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.proj-member-dist-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proj-member-dist-bar-wrap {
  background: var(--surface-raised, #f0f2f5);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}
.proj-member-dist-bar {
  height: 100%;
  background: var(--accent, #5c6ac4);
  border-radius: 99px;
  min-width: 3px;
  transition: width .35s ease;
}
.proj-member-dist-time {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.proj-member-dist-pct {
  text-align: right;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .proj-member-dist-pct { display: none; }
}
.dark .proj-member-dist-bar-wrap { background: #2a2d36; }
.dark .proj-member-dist-bar { background: #7b8ff5; }

/* ── v145: Aufgaben-Deadline-Schnellfilter ─────────────────── */
.deadline-filter-chip:hover { background: var(--surface-hover, #f3f4f6); color: var(--text, #1a2e3c); }
.dark .deadline-filter-chip { border-color: #374151; color: #9ca3af; }
.dark .deadline-filter-chip:hover { background: #1f2937; color: #e5e7eb; }
.dark .deadline-filter-chip.is-active { background: #d97706; border-color: #d97706; color: #fff; }

/* ── v144: Mein Tag – Tätigkeits-Kurzauswertung ────────────── */
.mein-tag-activity-breakdown {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #e5e7eb);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mein-tag-activity-row {
  display: grid;
  grid-template-columns: 130px 1fr 50px;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}
.mein-tag-activity-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text-muted);
}
.mein-tag-activity-bar-wrap {
  background: var(--surface-raised, #f0f2f5);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}
.mein-tag-activity-bar {
  height: 100%;
  background: var(--accent, #5c6ac4);
  border-radius: 99px;
  min-width: 3px;
}
.mein-tag-activity-time {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 11px;
}
.dark .mein-tag-activity-breakdown { border-top-color: #374151; }
.dark .mein-tag-activity-bar-wrap { background: #2a2d36; }
.dark .mein-tag-activity-bar { background: #7b8ff5; }

/* ── v143: Projekt Aufgaben-Statusverteilung ─────────────────── */
.proj-status-dist {
  margin: 0 0 8px;
  padding: 10px 0 2px;
}
.proj-status-dist-bar {
  display: flex;
  height: 10px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--surface-raised, #f0f2f5);
  gap: 2px;
}
.proj-status-segment {
  flex-shrink: 0;
  transition: width .35s ease;
  border-radius: 0;
}
.proj-status-segment:first-child { border-radius: 99px 0 0 99px; }
.proj-status-segment:last-child { border-radius: 0 99px 99px 0; }
.proj-status-segment:only-child { border-radius: 99px; }
.proj-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 8px;
  font-size: 12px;
}
.proj-status-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.proj-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.proj-status-legend-label { color: var(--color-text-muted); }
.proj-status-legend-item strong { font-weight: 600; }
.dark .proj-status-dist-bar { background: #2a2d36; }

/* ── v142: Tätigkeitstyp-Auswertung (Meine Woche) ─────────── */
.zeiten-activity-breakdown {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border, #e5e7eb);
}
.zeiten-activity-breakdown-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 12px;
}
.zeiten-activity-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zeiten-activity-row {
  display: grid;
  grid-template-columns: 150px 1fr 52px 38px;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.zeiten-activity-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zeiten-activity-bar-wrap {
  background: var(--surface-raised, #f0f2f5);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}
.zeiten-activity-bar {
  height: 100%;
  background: var(--accent, #5c6ac4);
  border-radius: 99px;
  min-width: 3px;
  transition: width .35s ease;
}
.zeiten-activity-time {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.zeiten-activity-pct {
  text-align: right;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .zeiten-activity-row {
    grid-template-columns: 1fr 1fr 44px 32px;
  }
}
.dark .zeiten-activity-breakdown { border-top-color: var(--border-dark, #374151); }
.dark .zeiten-activity-bar-wrap { background: #2a2d36; }
.dark .zeiten-activity-bar { background: #7b8ff5; }

/* ── v140: Druckbarer Projekt-Statusbericht ─────────────── */
/* (no extra CSS needed — report opens in new window with inline styles) */

/* ── Notizfarben (JAS-175): Schnellnotiz und Kommentar-Markierung ────────────
   Eine Palette, ein Ort. Voreinstellung ist das Logo-Blau der CI
   (koschmieder-tokens.css); die anderen Töne bleiben über die Farbwahl an der
   Schnellnotiz wählbar (features/notizfarben.js setzt data-notizfarbe am <html>).
   Weiche Flächen, dunkle Schrift: Jede Farbe erreicht für Text mindestens 4,5 : 1,
   im hellen wie im dunklen Modus. notizfarben.test.js rechnet das aus DIESEN
   Zeilen nach — wer hier einen Wert ändert, wird vom Test geprüft.
   Aufbau: erst die Werte (hell), dann die Dunkel-Werte. Wegen gleicher Wertigkeit
   zählt die Reihenfolge: dunkle Blöcke stehen NACH allen hellen.
   Die Papier-Werte (--notiz-papier-*) gelten in beiden Modi, weil das Doc-Blatt
   auch im dunklen Modus hell bleibt. */
/* NOTIZFARBEN-ANFANG */
:root,
[data-notizfarbe="blau"] {
  --notiz-flaeche: #e6f3f9;
  --notiz-rand: #b5d9ea;
  --notiz-text: #10303d;
  --notiz-label: #1e5167;
  --notiz-platzhalter: #456b7c;
  --notiz-erfolg: #17653a;
  --notiz-papier-markierung: #cfe8f4;
  --notiz-papier-markierung-stark: #a9d6ec;
  --notiz-papier-linie: #297b96;
}
[data-notizfarbe="petrol"] {
  --notiz-flaeche: #dde9ee;
  --notiz-rand: #b0c8d2;
  --notiz-text: #14303a;
  --notiz-label: #1e5167;
  --notiz-platzhalter: #476673;
  --notiz-erfolg: #17653a;
  --notiz-papier-markierung: #cfdfe6;
  --notiz-papier-markierung-stark: #aec7d3;
  --notiz-papier-linie: #1e5167;
}
[data-notizfarbe="gold"] {
  --notiz-flaeche: #fdf4de;
  --notiz-rand: #ecd9a4;
  --notiz-text: #3d2f0a;
  --notiz-label: #7a5a00;
  --notiz-platzhalter: #80671f;
  --notiz-erfolg: #17653a;
  --notiz-papier-markierung: #f7e6b4;
  --notiz-papier-markierung-stark: #efd58a;
  --notiz-papier-linie: #8a6a00;
}
[data-notizfarbe="salbei"] {
  --notiz-flaeche: #e8f3ec;
  --notiz-rand: #bcd9c6;
  --notiz-text: #16311f;
  --notiz-label: #1f5e3a;
  --notiz-platzhalter: #4a6c57;
  --notiz-erfolg: #17653a;
  --notiz-papier-markierung: #d3ead9;
  --notiz-papier-markierung-stark: #b0d9bd;
  --notiz-papier-linie: #2f7a4c;
}
[data-notizfarbe="rose"] {
  --notiz-flaeche: #fbeaf0;
  --notiz-rand: #efc3d3;
  --notiz-text: #3b1a28;
  --notiz-label: #8a2a52;
  --notiz-platzhalter: #85516a;
  --notiz-erfolg: #17653a;
  --notiz-papier-markierung: #f6d6e3;
  --notiz-papier-markierung-stark: #eebad0;
  --notiz-papier-linie: #a63a68;
}
[data-notizfarbe="grau"] {
  --notiz-flaeche: #eef0f2;
  --notiz-rand: #cdd3d8;
  --notiz-text: #1f262b;
  --notiz-label: #46525b;
  --notiz-platzhalter: #5d6870;
  --notiz-erfolg: #17653a;
  --notiz-papier-markierung: #dfe3e6;
  --notiz-papier-markierung-stark: #c3cad0;
  --notiz-papier-linie: #5b6770;
}
/* Dunkler Modus */
[data-theme="dark"]:not([data-notizfarbe]),
[data-theme="dark"] [data-notizfarbe="blau"],
[data-theme="dark"][data-notizfarbe="blau"] {
  --notiz-flaeche: #16303c;
  --notiz-rand: #2a5568;
  --notiz-text: #e3f1f7;
  --notiz-label: #8fd0ea;
  --notiz-platzhalter: #9ab8c6;
  --notiz-erfolg: #7fd6a0;
}
[data-theme="dark"] [data-notizfarbe="petrol"],
[data-theme="dark"][data-notizfarbe="petrol"] {
  --notiz-flaeche: #17292f;
  --notiz-rand: #2f4b55;
  --notiz-text: #e0edf1;
  --notiz-label: #86bdd0;
  --notiz-platzhalter: #9ab3bc;
  --notiz-erfolg: #7fd6a0;
}
[data-theme="dark"] [data-notizfarbe="gold"],
[data-theme="dark"][data-notizfarbe="gold"] {
  --notiz-flaeche: #33290f;
  --notiz-rand: #5c4a1a;
  --notiz-text: #f6ecd0;
  --notiz-label: #e8c060;
  --notiz-platzhalter: #c4b07a;
  --notiz-erfolg: #7fd6a0;
}
[data-theme="dark"] [data-notizfarbe="salbei"],
[data-theme="dark"][data-notizfarbe="salbei"] {
  --notiz-flaeche: #18301f;
  --notiz-rand: #2f5a3c;
  --notiz-text: #e2f2e8;
  --notiz-label: #8fd3a9;
  --notiz-platzhalter: #9bbba8;
  --notiz-erfolg: #7fd6a0;
}
[data-theme="dark"] [data-notizfarbe="rose"],
[data-theme="dark"][data-notizfarbe="rose"] {
  --notiz-flaeche: #341c28;
  --notiz-rand: #5e3a4b;
  --notiz-text: #f8e6ee;
  --notiz-label: #f0a6c4;
  --notiz-platzhalter: #c9a0b3;
  --notiz-erfolg: #7fd6a0;
}
[data-theme="dark"] [data-notizfarbe="grau"],
[data-theme="dark"][data-notizfarbe="grau"] {
  --notiz-flaeche: #252b30;
  --notiz-rand: #424a51;
  --notiz-text: #e8ecef;
  --notiz-label: #aab6bf;
  --notiz-platzhalter: #a3adb4;
  --notiz-erfolg: #7fd6a0;
}
/* NOTIZFARBEN-ENDE */

.project-quicknote-wrap {
  border-radius: 10px;
  border: 1.5px solid var(--notiz-rand);
  background: var(--notiz-flaeche);
  color: var(--notiz-text);
  padding: 10px 14px 12px;
  margin: 2px 0 8px;
}

.project-quicknote-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.project-quicknote-icon { font-size: 14px; }

.project-quicknote-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--notiz-label);
  flex: 1;
}

.project-quicknote-save-chip {
  font-size: 11px;
  color: var(--notiz-erfolg);
  font-weight: 500;
  transition: opacity 0.3s;
}

.project-quicknote-textarea {
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: transparent !important;
  resize: none;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--notiz-text) !important;
  outline: none;
  min-height: 62px;
  overflow: hidden;
  padding: 0;
}

.project-quicknote-textarea::placeholder { color: var(--notiz-platzhalter) !important; opacity: 1; }

/* Farbwahl: sechs Kreise, jeder trägt seine eigene Palette (data-notizfarbe am
   Eintrag). Der Rand in der Beschriftungsfarbe hält den Kreis auch auf hellem
   und dunklem Grund sichtbar (mindestens 3 : 1); der gewählte Kreis bekommt
   zusätzlich ein Häkchen und einen Ring — nicht nur eine andere Farbe. */
.notizfarbe-wahl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 0;
  margin: 0;
  padding: 0;
}

.notizfarbe-wahl-eintrag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.notizfarbe-wahl-eintrag input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.notizfarbe-punkt {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--notiz-label);
  background: var(--notiz-flaeche);
  color: var(--notiz-label);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.notizfarbe-wahl-eintrag input:checked + .notizfarbe-punkt {
  box-shadow: 0 0 0 2px var(--notiz-flaeche), 0 0 0 4px var(--notiz-label);
}

.notizfarbe-wahl-eintrag input:checked + .notizfarbe-punkt::after { content: "✓"; }

.notizfarbe-wahl-eintrag input:focus-visible + .notizfarbe-punkt {
  outline: 3px solid var(--notiz-label);
  outline-offset: 4px;
}

@media (pointer: coarse) {
  .notizfarbe-wahl-eintrag { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .project-quicknote-save-chip { transition: none; }
}

/* ── v138: Zeiteinträge im Projekt-Inline-Detail ─────── */
.task-time-entry-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.task-time-entry-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 1px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.task-time-entry-row:last-child { border-bottom: none; }

.task-time-entry-meta {
  font-size: 11px;
  color: #7a9bab;
  grid-column: 1;
}

.task-time-entry-dur {
  font-weight: 600;
  font-size: 12px;
  color: var(--medium-blue);
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  white-space: nowrap;
}

.task-time-entry-note {
  grid-column: 1;
  font-size: 11px;
  color: #8aabb8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── v137: Tages-Briefing Banner ───────────────────────── */
.dashboard-briefing-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 14px;
  border: 1px solid transparent;
}
/* Specificity override: .hidden alone (0,1,0) is overridden by .dashboard-briefing-banner (0,1,0)
   because it appears later in the sheet. This rule (0,2,0) wins correctly. */
.dashboard-briefing-banner.hidden { display: none; }

.dashboard-briefing-banner.briefing-urgent {
  background: rgba(231, 76, 60, 0.08);
  border-color: rgba(231, 76, 60, 0.25);
  color: #8b2e22;
}

.dashboard-briefing-banner.briefing-info {
  background: rgba(52, 152, 219, 0.08);
  border-color: rgba(52, 152, 219, 0.25);
  color: #1c5880;
}

.briefing-text { flex: 1; }
.briefing-icon { font-size: 16px; flex-shrink: 0; }

.briefing-action {
  flex-shrink: 0;
  background: none;
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  opacity: 0.85;
  white-space: nowrap;
  transition: opacity 0.12s, background 0.12s;
}
.briefing-action:hover {
  opacity: 1;
  background: rgba(0,0,0,0.06);
}

.briefing-dismiss {
  margin-left: auto;
  opacity: 0.6;
  flex-shrink: 0;
}

.briefing-dismiss:hover { opacity: 1; }

[data-theme="dark"] .dashboard-briefing-banner.briefing-urgent {
  background: rgba(231, 76, 60, 0.14);
  border-color: rgba(231, 76, 60, 0.3);
  color: #e8a09a;
}
[data-theme="dark"] .dashboard-briefing-banner.briefing-info {
  background: rgba(52, 152, 219, 0.12);
  border-color: rgba(52, 152, 219, 0.28);
  color: #7abfe0;
}

/* ── v136: Team-Workload-Widget ────────────────────────── */
.workload-widget-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

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

.workload-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--medium-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.workload-info { flex: 1; min-width: 0; }

.workload-name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.workload-name {
  font-size: 13px;
  font-weight: 600;
}

.workload-meta {
  font-size: 11px;
  /* v460: WCAG AA Contrast — 4.5:1 gegen white = mind. #6b757d  */
  color: #5a6b75;
}

.workload-bar-wrap {
  height: 5px;
  background: var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.workload-bar {
  height: 100%;
  border-radius: 10px;
  transition: width 0.4s ease;
  min-width: 2px;
}

.workload-bar.load-low    { background: #27ae60; }
.workload-bar.load-medium { background: #e67e22; }
.workload-bar.load-high   { background: #e74c3c; }

.workload-due-badge {
  /* v465: feste Slot-Breite, damit Bar-Länge konstant ist — egal ob Badge gefüllt oder leer. */
  background: rgba(231, 76, 60, 0.12);
  color: #c0392b;
  font-size: 11px;
  font-weight: 700;
  border-radius: 12px;
  padding: 2px 7px;
  flex: 0 0 auto;
  min-width: 26px;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  cursor: help;
}
.workload-due-badge[data-empty="1"] {
  /* Platz wird reserviert, aber unsichtbar → identisches Layout in jeder Zeile. */
  visibility: hidden;
  background: transparent;
}

/* v465: Info-Tooltip-Icon im Widget-Header */
.workload-info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  font-size: 13px;
  color: var(--medium-blue);
  cursor: help;
  border-radius: 50%;
  vertical-align: middle;
  opacity: 0.7;
  transition: opacity 0.15s ease;
  user-select: none;
}
.workload-info-tip:hover,
.workload-info-tip:focus-visible { opacity: 1; outline: none; }
.workload-info-tip:focus-visible { box-shadow: 0 0 0 2px rgba(46, 134, 171, 0.35); }

[data-theme="dark"] .workload-due-badge { background: rgba(231, 76, 60, 0.2); color: var(--color-danger); }
[data-theme="dark"] .workload-due-badge[data-empty="1"] { background: transparent; }
[data-theme="dark"] .workload-meta { color: var(--color-text-subtle); }
/* Info-Symbol: Deckkraft 0,7 mitgerechnet, deshalb der hellere Ton und 0,85 */
[data-theme="dark"] .workload-info-tip { color: var(--color-text-muted); opacity: 0.85; }
[data-theme="dark"] .workload-info-tip:hover,
[data-theme="dark"] .workload-info-tip:focus-visible { opacity: 1; }

/* ── v135: Tag-Filter im Projekt-Aufgaben-Tab ──────────── */

.tag-filter-chip {
  font-family: inherit;
}

.tag-filter-chip:hover {
  background: rgba(16, 185, 129, 0.08);
  border-color: var(--color-success);
  color: var(--color-success);
}

[data-theme="dark"] .tag-filter-chip { color: #8aaab8; border-color: #2a3f52; }
[data-theme="dark"] .tag-filter-chip:hover { background: rgba(16, 185, 129, 0.12); color: #34d399; border-color: #34d399; }
[data-theme="dark"] .tag-filter-chip.is-active { background: #047857; border-color: #047857; color: #fff; }

/* ── v133: Bearbeiter-Filter im Aufgaben-Tab ────────────── */

.assignee-filter-chip {
  font-family: inherit;
}

.assignee-filter-chip:hover {
  background: rgba(30, 81, 103, 0.08);
  border-color: var(--medium-blue);
  color: var(--medium-blue);
}

[data-theme="dark"] .assignee-filter-chip { color: #8aaab8; border-color: #2a3f52; }
[data-theme="dark"] .assignee-filter-chip:hover { background: rgba(255,255,255,0.07); color: #b0cad6; border-color: #5a9ab5; }
[data-theme="dark"] .assignee-filter-chip.is-active { background: #1e6f96; border-color: #1e6f96; color: #fff; }

/* ── v132: Kunden-Zeitbericht ──────────────────────────── */
.customer-time-report-panel .panel-footer-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.customer-time-report-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}

.ctr-customer-block {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.ctr-customer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--bg-subtle, #f5f9fb);
  border-bottom: 1px solid var(--line);
}

.ctr-customer-header strong {
  flex: 1;
  min-width: 120px;
}

.task-meta-chip.is-billable-chip {
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-success);
}

.ctr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ctr-table th {
  text-align: left;
  padding: 6px 12px;
  font-weight: 600;
  color: #51626e;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: transparent;
  border-bottom: 1px solid var(--line);
}

.ctr-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.ctr-table tbody tr:last-child td { border-bottom: none; }
.ctr-table tbody tr:hover { background: rgba(0,0,0,0.02); }
.ctr-project-name { font-weight: 500; }

[data-theme="dark"] .ctr-customer-header { background: #1a2e3c; }
[data-theme="dark"] .ctr-customer-block { border-color: #2a3f52; }
[data-theme="dark"] .ctr-table th { color: #7a9bab; }
[data-theme="dark"] .ctr-table tbody tr:hover { background: rgba(255,255,255,0.03); }

@keyframes slide-up-mobile {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── v155: Globale Schnellsuche (Ctrl+K) ────────────────────── */
.quick-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9900;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(60px, 12vh, 130px);
}
.quick-search-overlay.hidden { display: none; }

.quick-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.quick-search-modal {
  position: relative;
  z-index: 1;
  width: min(600px, calc(100vw - 32px));
  background: var(--surface, #fff);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  animation: qs-in 0.15s ease;
}

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

.quick-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}

.quick-search-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  width: 18px;
  height: 18px;
}

.quick-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: var(--text-primary, #1a2e3c);
  line-height: 1.4;
}
.quick-search-input::placeholder { color: var(--color-text-subtle); }

.quick-search-kbd {
  flex-shrink: 0;
  font-size: 11px;
  font-family: inherit;
  background: var(--surface-raised, #f3f4f6);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 5px;
  padding: 2px 7px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.quick-search-results {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.quick-search-results:empty { display: none; }

.quick-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.08s;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.quick-search-item:last-child { border-bottom: none; }
.quick-search-item:hover,
.quick-search-item.is-active {
  background: var(--surface-hover, #f0f7ff);
}

.quick-search-item-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--surface-raised, #f3f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.quick-search-item-body {
  flex: 1;
  min-width: 0;
}

.quick-search-item-label {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary, #1a2e3c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-search-item-sub {
  display: block;
  font-size: 11.5px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.quick-search-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
}

.quick-search-footer {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--line, #e5e7eb);
  background: var(--surface-raised, #f9fafb);
  font-size: 11px;
  color: var(--color-text-muted);
}

.quick-search-footer kbd {
  display: inline-block;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  font-family: inherit;
  margin-right: 3px;
}

/* Dark mode */
[data-theme="dark"] .quick-search-backdrop { background: rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .quick-search-modal { background: #1c2b38; box-shadow: 0 24px 80px rgba(0,0,0,0.5); }
[data-theme="dark"] .quick-search-input-wrap { border-color: #2a3f52; }
[data-theme="dark"] .quick-search-input { color: #e2e8f0; }
[data-theme="dark"] .quick-search-input::placeholder { color: #4b6274; }
[data-theme="dark"] .quick-search-kbd { background: #243444; border-color: #2a3f52; color: #7a9bab; }
[data-theme="dark"] .quick-search-item { border-color: #2a3f52; }
[data-theme="dark"] .quick-search-item:hover,
[data-theme="dark"] .quick-search-item.is-active { background: #1e3347; }
[data-theme="dark"] .quick-search-item-icon { background: #243444; }
[data-theme="dark"] .quick-search-item-label { color: #e2e8f0; }
[data-theme="dark"] .quick-search-item-sub { color: #7a9bab; }
[data-theme="dark"] .quick-search-footer { background: #172330; border-color: #2a3f52; }
[data-theme="dark"] .quick-search-footer kbd { background: #1c2b38; border-color: #2a3f52; }
.dark .quick-search-backdrop { background: rgba(0, 0, 0, 0.6); }
.dark .quick-search-modal { background: #1c2b38; box-shadow: 0 24px 80px rgba(0,0,0,0.5); }
.dark .quick-search-input-wrap { border-color: #2a3f52; }
.dark .quick-search-input { color: #e2e8f0; }
.dark .quick-search-input::placeholder { color: #4b6274; }
.dark .quick-search-kbd { background: #243444; border-color: #2a3f52; color: #7a9bab; }
.dark .quick-search-item { border-color: #2a3f52; }
.dark .quick-search-item:hover, .dark .quick-search-item.is-active { background: #1e3347; }
.dark .quick-search-item-icon { background: #243444; }
.dark .quick-search-item-label { color: #e2e8f0; }
.dark .quick-search-item-sub { color: #7a9bab; }
.dark .quick-search-footer { background: #172330; border-color: #2a3f52; }
.dark .quick-search-footer kbd { background: #1c2b38; border-color: #2a3f52; }

/* ── v156: Board-Spalten-Statistik-Footer ────────────────────── */
.board-col-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 8px;
  font-size: 11px;
  color: var(--color-text-muted);
  border-top: 1px solid var(--line, #e5e7eb);
  margin-top: 4px;
}

.board-col-footer span { white-space: nowrap; }

.board-col-footer-sep {
  color: var(--color-text-subtle);
  font-size: 10px;
  margin: 0 1px;
}

.board-col-footer-overdue {
  color: #b7791f !important;
  font-weight: 500;
}

.dark .board-col-footer { border-color: #2a3f52; color: #7a9bab; }
.dark .board-col-footer-sep { color: #4b6274; }
.dark .board-col-footer-overdue { color: #fbbf24 !important; }
[data-theme="dark"] .board-col-footer { border-color: #2a3f52; color: #7a9bab; }
[data-theme="dark"] .board-col-footer-sep { color: #4b6274; }
[data-theme="dark"] .board-col-footer-overdue { color: #fbbf24 !important; }

/* ── v157: Sidebar Laufender Projekt-Timer-Chip ──────────────── */
.sidebar-timer-chip {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #27ae60;
  background: rgba(39, 174, 96, 0.12);
  border-radius: 5px;
  padding: 1px 6px;
  letter-spacing: 0.02em;
  line-height: 1.6;
  animation: sidebar-timer-pulse 2s ease-in-out infinite;
}
.sidebar-timer-chip.hidden { display: none; }

/* Push the zeiten-nav-dot to the right of the chip */
.sidebar-timer-chip + .zeiten-nav-dot {
  margin-left: 4px;
}

@keyframes sidebar-timer-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* Dark mode */
.dark .sidebar-timer-chip {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
}
[data-theme="dark"] .sidebar-timer-chip {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
}

/* ── v159: Projekt Home – Nächste Deadlines ─────────────────── */
.proj-deadlines-panel { overflow: hidden; }

.proj-deadlines-list {
  padding: 0 16px 4px;
}

.proj-deadline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line, #e5e7eb);
  cursor: pointer;
  transition: background 0.08s;
  border-radius: 4px;
  padding-inline: 4px;
}
.proj-deadline-row:last-child { border-bottom: none; }
.proj-deadline-row:hover { background: var(--surface-hover, #f5f9ff); }

.proj-deadline-date {
  flex-shrink: 0;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 68px;
}
.proj-deadline-date.is-overdue { color: #b7791f; }

.proj-deadline-title {
  flex: 1;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary, #1a2e3c);
}
.proj-deadline-row.is-overdue .proj-deadline-title { color: #92400e; }

.proj-deadline-assignees {
  flex-shrink: 0;
  display: flex;
  gap: 2px;
}

.proj-deadlines-more {
  font-size: 11px;
  color: var(--color-text-muted);
  padding: 4px 20px 10px;
}

/* Dark mode */
.dark .proj-deadline-row { border-color: #2a3f52; }
.dark .proj-deadline-row:hover { background: #1e3347; }
.dark .proj-deadline-title { color: #e2e8f0; }
.dark .proj-deadline-row.is-overdue .proj-deadline-title { color: #fbbf24; }
.dark .proj-deadline-date.is-overdue { color: #fbbf24; }
[data-theme="dark"] .proj-deadline-row { border-color: #2a3f52; }
[data-theme="dark"] .proj-deadline-row:hover { background: #1e3347; }
[data-theme="dark"] .proj-deadline-title { color: #e2e8f0; }
[data-theme="dark"] .proj-deadline-row.is-overdue .proj-deadline-title { color: #fbbf24; }
[data-theme="dark"] .proj-deadline-date.is-overdue { color: #fbbf24; }

/* ── v158: Mein Tag – Aufgaben-Widget ────────────────────────── */
.mein-tag-tasks-list {
  padding: 0 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mein-tag-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line, #e5e7eb);
  cursor: pointer;
  transition: background 0.08s;
  border-radius: 6px;
  padding-inline: 4px;
}
.mein-tag-task-row:last-child { border-bottom: none; }
.mein-tag-task-row:hover { background: var(--surface-hover, #f5f9ff); }

.mein-tag-task-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mein-tag-task-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary, #1a2e3c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mein-tag-task-proj {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mein-tag-task-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  padding: 2px 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.mein-tag-task-tag.is-overdue   { background: #fffbeb; color: #92400e; }
.mein-tag-task-tag.is-due-today { background: #fffbeb; color: #d97706; }
.mein-tag-task-tag.is-start     { background: #f0fdf4; color: #14705a; }

.mein-tag-task-timer-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line, #e5e7eb);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
  opacity: 0;
}
.mein-tag-task-row:hover .mein-tag-task-timer-btn { opacity: 1; }
.mein-tag-task-timer-btn:hover { background: #27ae60; border-color: #27ae60; color: #fff; }

/* Dark mode */
.dark .mein-tag-task-row:hover { background: #1e3347; }
.dark .mein-tag-task-row { border-color: #2a3f52; }
.dark .mein-tag-task-title { color: #e2e8f0; }
.dark .mein-tag-task-tag.is-overdue   { background: rgba(251,191,36,0.16);  color: #fbbf24; }
.dark .mein-tag-task-tag.is-due-today { background: rgba(217,119,6,0.18);  color: #fbbf24; }
.dark .mein-tag-task-tag.is-start     { background: rgba(22,163,74,0.18);  color: #4ade80; }
.dark .mein-tag-task-timer-btn { border-color: #2a3f52; }
[data-theme="dark"] .mein-tag-task-row:hover { background: #1e3347; }
[data-theme="dark"] .mein-tag-task-row { border-color: #2a3f52; }
[data-theme="dark"] .mein-tag-task-title { color: #e2e8f0; }
[data-theme="dark"] .mein-tag-task-tag.is-overdue { background: rgba(251,191,36,0.16);  color: #fbbf24; }
[data-theme="dark"] .mein-tag-task-tag.is-due-today { background: rgba(217,119,6,0.18);  color: #fbbf24; }
[data-theme="dark"] .mein-tag-task-tag.is-start { background: rgba(22,163,74,0.18);  color: #4ade80; }
[data-theme="dark"] .mein-tag-task-timer-btn { border-color: #2a3f52; }

/* ── v164: Priorität-Schnellmenü-Button in Aufgabenzeilen ───── */
.task-prio-btn {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.1s, background 0.1s;
}
.task-prio-btn:hover { opacity: 0.75; }

.prio-btn-kritisch { background: #fef2f2; color: #e74c3c; border-color: #fca5a5; }
.prio-btn-hoch     { background: #fff7ed; color: #e67e22; border-color: #fdba74; }

/* Dark mode */
.dark .prio-btn-kritisch { background: rgba(231,76,60,0.18);  border-color: rgba(231,76,60,0.4); }
.dark .prio-btn-hoch     { background: rgba(230,126,34,0.18); border-color: rgba(230,126,34,0.4); }
[data-theme="dark"] .prio-btn-kritisch { background: rgba(231,76,60,0.18);  border-color: rgba(231,76,60,0.4); }
[data-theme="dark"] .prio-btn-hoch { background: rgba(230,126,34,0.18); border-color: rgba(230,126,34,0.4); }

/* ── v163: Board-Spalten Schnell-Aufgabe ─────────────────────── */
.board-col-quick-add-form {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 8px;
}

.board-col-quick-add-input {
  flex: 1;
  height: 30px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 7px;
  padding: 0 8px;
  font-size: 12.5px;
  background: var(--surface-raised, #f9fafb);
  color: var(--text-primary, #1a2e3c);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.board-col-quick-add-input::placeholder { color: var(--color-text-subtle); }
.board-col-quick-add-input:focus {
  border-color: #2c9ec9;
  background: var(--surface, #fff);
}

.board-col-quick-add-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--surface-raised, #f3f4f6);
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.board-col-quick-add-btn:hover {
  background: #2c9ec9;
  border-color: #2c9ec9;
  color: #fff;
}

/* ── v165: Inline Deadline-Editor ───────────────────────────── */
/* Vorhandener Chip als Button */
button.task-deadline-btn.task-meta-chip {
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  padding: 0 5px;
  border-radius: 5px;
  transition: background 0.1s, border-color 0.1s;
}
button.task-deadline-btn.task-meta-chip:hover {
  border-color: currentColor;
  background: rgba(0,0,0,0.04);
}

/* Leerer "+Datum"-Button – nur bei Row-Hover sichtbar */
.task-deadline-btn-empty {
  align-items: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-subtle);
  background: transparent;
  border: 1px dashed var(--line, #e5e7eb);
  border-radius: 5px;
  padding: 1px 5px;
  cursor: pointer;
  line-height: 18px;
  transition: opacity 0.12s, color 0.1s, border-color 0.1s, background 0.1s;
  white-space: nowrap;
}
.project-task-list-row:hover .task-deadline-btn-empty,
.global-awork-task-row:hover .task-deadline-btn-empty {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.task-deadline-btn-empty:hover {
  color: #2c9ec9;
  border-color: #2c9ec9;
  background: rgba(44,158,201,0.06);
}

/* Floating Popover */
.deadline-picker-popover {
  position: absolute;
  z-index: 9800;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #d8e4ea);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 220px;
  animation: qs-in 0.12s ease;
}
.deadline-picker-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted, #51626e);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.deadline-picker-input {
  width: 100%;
  height: 34px;
  border: 1px solid var(--color-border, #d8e4ea);
  border-radius: 7px;
  padding: 0 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text, #1a2e3b);
  background: var(--color-surface-soft, #f7fbfd);
  cursor: pointer;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.deadline-picker-input:focus {
  outline: none;
  border-color: #2c9ec9;
  background: var(--color-surface, #fff);
}
.deadline-picker-clear {
  width: 100%;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  color: var(--color-text-muted, #51626e);
  background: transparent;
  border: 1px solid var(--color-border, #d8e4ea);
  border-radius: 7px;
  cursor: pointer;
  text-align: center;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.deadline-picker-clear:hover {
  background: #fef2f2;
  color: #e74c3c;
  border-color: #fca5a5;
}

/* Dark mode – class-based */
.dark .deadline-picker-popover { background: #1c2b38; border-color: #2a3f52; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.dark .deadline-picker-input { background: #162130; border-color: #2a3f52; color: #d1e0eb; }
.dark .deadline-picker-input:focus { border-color: #2c9ec9; background: #0f1d29; }
.dark .deadline-picker-clear { border-color: #2a3f52; color: #7a9ab4; }
.dark .deadline-picker-clear:hover { background: rgba(231,76,60,0.15); color: #f87171; border-color: rgba(231,76,60,0.4); }
/* Dark mode – system preference */
[data-theme="dark"] .deadline-picker-popover { background: #1c2b38; border-color: #2a3f52; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
[data-theme="dark"] .deadline-picker-input { background: #162130; border-color: #2a3f52; color: #d1e0eb; }
[data-theme="dark"] .deadline-picker-input:focus { border-color: #2c9ec9; background: #0f1d29; }
[data-theme="dark"] .deadline-picker-clear { border-color: #2a3f52; color: #7a9ab4; }
[data-theme="dark"] .deadline-picker-clear:hover { background: rgba(231,76,60,0.15); color: #f87171; border-color: rgba(231,76,60,0.4); }

/* Dark mode */
.dark .board-col-quick-add-input {
  background: #172330;
  border-color: #2a3f52;
  color: #e2e8f0;
}
.dark .board-col-quick-add-input:focus { border-color: #2c9ec9; background: #1c2b38; }
.dark .board-col-quick-add-btn { background: #1c2b38; border-color: #2a3f52; color: #7a9bab; }
[data-theme="dark"] .board-col-quick-add-input { background: #172330; border-color: #2a3f52; color: #e2e8f0; }
[data-theme="dark"] .board-col-quick-add-input:focus { border-color: #2c9ec9; background: #1c2b38; }
[data-theme="dark"] .board-col-quick-add-btn { background: #1c2b38; border-color: #2a3f52; color: #7a9bab; }

/* ── v166: Inline Assignee-Picker ───────────────────────────── */
/* Klickbarer Bearbeiter-Button (mit Avataren) */
button.task-assignee-btn.task-meta-users {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 5px;
  transition: outline 0.1s;
}
button.task-assignee-btn.task-meta-users:hover {
  outline: 2px solid rgba(44,158,201,0.35);
  outline-offset: 1px;
}

/* Leerer "+Person"-Button – hover-only */
.task-assignee-btn-empty {
  align-items: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-subtle);
  background: transparent;
  border: 1px dashed var(--line, #e5e7eb);
  border-radius: 5px;
  padding: 1px 5px;
  cursor: pointer;
  line-height: 18px;
  white-space: nowrap;
  transition: opacity 0.12s, color 0.1s, border-color 0.1s, background 0.1s;
}
.project-task-list-row:hover .task-assignee-btn-empty,
.global-awork-task-row:hover .task-assignee-btn-empty {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.task-assignee-btn-empty:hover {
  color: #2c9ec9;
  border-color: #2c9ec9;
  background: rgba(44,158,201,0.06);
}

/* Floating Popover */
.assignee-picker-popover {
  position: absolute;
  z-index: 9800;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #d8e4ea);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  padding: 8px;
  min-width: 200px;
  max-width: 280px;
  animation: qs-in 0.12s ease;
}
.assignee-picker-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted, #51626e);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 4px 6px;
}
.assignee-picker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.assignee-picker-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border: none;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text, #1a2e3b);
  transition: background 0.1s;
  position: relative;
}
.assignee-picker-option:hover { background: var(--color-surface-muted, #f1f5f9); }
.assignee-picker-option.is-assigned { background: rgba(44,158,201,0.08); }
.assignee-picker-option.is-assigned:hover { background: rgba(44,158,201,0.14); }
.assignee-picker-avatar {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--user-color, #2c9ec9);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.assignee-picker-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assignee-picker-check {
  flex-shrink: 0;
  font-size: 12px;
  color: #2c9ec9;
  font-weight: 700;
}

/* Dark mode – class-based */
.dark .assignee-picker-popover { background: #1c2b38; border-color: #2a3f52; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.dark .assignee-picker-option { color: #d1e0eb; }
.dark .assignee-picker-option:hover { background: #1e3247; }
.dark .assignee-picker-option.is-assigned { background: rgba(44,158,201,0.15); }
.dark .assignee-picker-option.is-assigned:hover { background: rgba(44,158,201,0.22); }
/* Dark mode – system preference */
[data-theme="dark"] .assignee-picker-popover { background: #1c2b38; border-color: #2a3f52; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
[data-theme="dark"] .assignee-picker-option { color: #d1e0eb; }
[data-theme="dark"] .assignee-picker-option:hover { background: #1e3247; }
[data-theme="dark"] .assignee-picker-option.is-assigned { background: rgba(44,158,201,0.15); }
[data-theme="dark"] .assignee-picker-option.is-assigned:hover { background: rgba(44,158,201,0.22); }

/* ── v171: Planzeit-Editor + Ratio-Chip ─────────────────────── */
/* Ratio-Chip (Erfasst / Geplant) */
.task-effort-btn {
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  border-radius: 5px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: background 0.1s, border-color 0.1s;
}
.task-effort-btn:hover { background: rgba(0,0,0,0.05); border-color: var(--color-border, #d8e4ea); }
.effort-sep { opacity: 0.4; font-size: 9px; }
.task-effort-btn.is-near-limit { color: #d97706; }
.task-effort-btn.is-over-budget { color: #dc2626; font-weight: 600; }

/* +Plan-Hover-Button */
.task-plan-btn-empty {
  align-items: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-subtle);
  background: transparent;
  border: 1px dashed var(--line, #e5e7eb);
  border-radius: 5px;
  padding: 1px 5px;
  cursor: pointer;
  line-height: 18px;
  white-space: nowrap;
  transition: opacity 0.12s, color 0.1s, border-color 0.1s, background 0.1s;
}
.project-task-list-row:hover .task-plan-btn-empty,
.global-awork-task-row:hover .task-plan-btn-empty {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.task-plan-btn-empty:hover { color: #2c9ec9; border-color: #2c9ec9; background: rgba(44,158,201,0.06); }

/* Floating Planzeit-Picker */
.planned-picker-popover {
  position: absolute;
  z-index: 9800;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #d8e4ea);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  padding: 10px;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  animation: qs-in 0.12s ease;
}
.planned-picker-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted, #51626e);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.planned-picker-form {
  display: flex;
  align-items: center;
  gap: 4px;
}
.planned-picker-input {
  flex: 1;
  height: 32px;
  border: 1px solid var(--color-border, #d8e4ea);
  border-radius: 7px;
  padding: 0 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text, #1a2e3b);
  background: var(--color-surface-soft, #f7fbfd);
  min-width: 0;
  transition: border-color 0.15s;
}
.planned-picker-input:focus { outline: none; border-color: #2c9ec9; background: var(--color-surface, #fff); }
.planned-picker-unit { font-size: 13px; color: var(--color-text-muted, #51626e); flex-shrink: 0; }
.planned-picker-save {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: none;
  background: #2c9ec9;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
}
.planned-picker-save:hover { background: #1e7fa8; }
.planned-picker-clear {
  width: 100%;
  padding: 4px 8px;
  font-size: 11px;
  font-family: inherit;
  color: var(--color-text-muted, #51626e);
  background: transparent;
  border: 1px solid var(--color-border, #d8e4ea);
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.planned-picker-clear:hover { background: #fef2f2; color: #e74c3c; border-color: #fca5a5; }
.planned-picker-hint {
  font-size: 11px;
  color: var(--color-text-muted, #51626e);
  margin: 0;
}

.planned-picker-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #547081;
  margin-top: 2px;
}

.planned-picker-max-hint {
  font-size: 10px;
  font-weight: 500;
  color: #8eaab8;
  margin-left: 4px;
}

.planned-picker-target-form .planned-picker-save {
  background: #4b7c91;
}
.planned-picker-target-form .planned-picker-save:hover {
  background: #3a6478;
}

/* ── Task detail: Sollzeit & Geplante Zeit ──────────────────────────── */
.task-fact-sollzeit {
  background: #eef4f8;
  border-color: #c2d8e5;
}

.task-fact-admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 800;
  background: #3e6e87;
  color: #fff;
  vertical-align: middle;
  margin-left: 2px;
}

.task-fact-planned-ratio {
  font-size: 10px;
  font-weight: 700;
  color: #7a9ab4;
  margin-top: 1px;
}
.task-fact-editable.is-editing .task-fact-planned-ratio {
  display: none;
}

/* Dark mode */
.dark .planned-picker-popover { background: #1c2b38; border-color: #2a3f52; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.dark .planned-picker-input { background: #162130; border-color: #2a3f52; color: #d1e0eb; }
.dark .planned-picker-input:focus { border-color: #2c9ec9; background: #0f1d29; }
.dark .planned-picker-clear { border-color: #2a3f52; color: #7a9ab4; }
.dark .planned-picker-clear:hover { background: rgba(231,76,60,0.15); color: #f87171; border-color: rgba(231,76,60,0.4); }
.dark .task-effort-btn:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .planned-picker-popover { background: #1c2b38; border-color: #2a3f52; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
[data-theme="dark"] .planned-picker-input { background: #162130; border-color: #2a3f52; color: #d1e0eb; }
[data-theme="dark"] .planned-picker-input:focus { border-color: #2c9ec9; background: #0f1d29; }
[data-theme="dark"] .planned-picker-clear { border-color: #2a3f52; color: #7a9ab4; }
[data-theme="dark"] .planned-picker-clear:hover { background: rgba(231,76,60,0.15); color: #f87171; border-color: rgba(231,76,60,0.4); }
[data-theme="dark"] .task-effort-btn:hover { background: rgba(255,255,255,0.05); }

/* ── v170: Kalender-Aufgaben Verbesserungen ─────────────────── */
/* Überfällige Task-Chips */
.calendar-chip.task_due.is-overdue {
  background: #fffbeb;
  color: #92400e;
  border-left-color: #f59e0b;
  font-weight: 600;
}
.calendar-chip.task_due.is-overdue .chip-icon { opacity: 1; }

/* Agenda: Überfällige Einträge */
.calendar-agenda-event.is-overdue .calendar-agenda-title {
  color: #92400e;
  font-weight: 600;
}
.calendar-agenda-event.is-overdue .badge {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}

/* Agenda: Projektname-Chip */
.calendar-agenda-proj {
  font-size: 11px;
  color: var(--color-text-muted, #51626e);
  background: var(--color-surface-muted, #f1f5f9);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* Dark mode */
.dark .calendar-chip.task_due.is-overdue { background: rgba(251,191,36,0.15); color: #fbbf24; border-left-color: #f59e0b; }
.dark .calendar-agenda-event.is-overdue .calendar-agenda-title { color: #fbbf24; }
.dark .calendar-agenda-event.is-overdue .badge { background: rgba(251,191,36,0.15); color: #fbbf24; border-color: rgba(251,191,36,0.32); }
.dark .calendar-agenda-proj { background: #1c2b38; color: #7a9ab4; }
[data-theme="dark"] .calendar-chip.task_due.is-overdue { background: rgba(251,191,36,0.15); color: #fbbf24; border-left-color: #f59e0b; }
[data-theme="dark"] .calendar-agenda-event.is-overdue .calendar-agenda-title { color: #fbbf24; }
[data-theme="dark"] .calendar-agenda-event.is-overdue .badge { background: rgba(251,191,36,0.15); color: #fbbf24; border-color: rgba(251,191,36,0.32); }
[data-theme="dark"] .calendar-agenda-proj { background: #1c2b38; color: #7a9ab4; }

/* ── Smarte Kalender-Agenda: Personen pro Tag zusammenfassen ── */
.calendar-agenda-panel {
  display: grid;
  gap: 12px;
}

.calendar-agenda-heading {
  display: grid;
  gap: 3px;
}

.calendar-agenda-heading h3,
.calendar-agenda-heading p {
  margin: 0;
}

.calendar-agenda-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.calendar-agenda-list > .calendar-agenda-day {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(244,249,252,0.84));
  box-shadow: 0 4px 14px rgba(31, 72, 91, 0.045);
}

.calendar-agenda-day-head {
  align-items: center;
  padding-bottom: 8px;
}

.calendar-agenda-date-button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--dark-blue);
  font: inherit;
  font-size: var(--type-card-title);
  font-weight: 800;
  text-align: left;
  text-transform: capitalize;
  cursor: pointer;
}

.calendar-agenda-date-button:hover,
.calendar-agenda-date-button:focus-visible {
  color: var(--medium-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.calendar-agenda-people {
  display: grid;
  gap: 6px;
}

.calendar-agenda-person {
  display: grid;
  grid-template-columns: 28px minmax(96px, 150px) minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--agenda-user-color, var(--medium-blue)) 13%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--agenda-user-color, var(--medium-blue)) 4%, #fff);
}

.calendar-agenda-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--agenda-user-color, var(--medium-blue));
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agenda-user-color, var(--medium-blue)) 12%, transparent);
}

.calendar-agenda-person-name {
  min-width: 0;
  overflow: hidden;
  color: var(--dark-blue);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-agenda-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.calendar-agenda-status {
  --agenda-status-color: var(--medium-blue);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--agenda-status-color) 25%, var(--line));
  border-radius: 999px;
  padding: 4px 9px;
  background: color-mix(in srgb, var(--agenda-status-color) 9%, #fff);
  color: color-mix(in srgb, var(--agenda-status-color) 68%, var(--dark-blue));
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
}

.calendar-agenda-status.is-attendance {
  --agenda-status-color: #2c8f56;
}

.calendar-agenda-status.is-absence {
  --agenda-status-color: #7656c9;
}

/* JAS-008: geplant, aber nichts erfasst (nur bei abgeschlossenen Tagen). */
.calendar-agenda-status.is-presence-offen {
  --agenda-status-color: #9aa5b1;
  border-style: dashed;
  opacity: 0.85;
}

.calendar-agenda-status:hover,
.calendar-agenda-status:focus-visible {
  border-color: var(--agenda-status-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agenda-status-color) 13%, transparent);
}

.calendar-agenda-status-detail {
  color: color-mix(in srgb, var(--agenda-status-color) 45%, var(--dark-blue));
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.calendar-agenda-events.has-team {
  padding-top: 9px;
  border-top: 1px dashed var(--line);
}

.calendar-agenda-events .calendar-agenda-event {
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
}

.calendar-agenda-event-time {
  min-width: 38px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.calendar-agenda-empty,
.calendar-agenda-limit-note {
  margin: 0;
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 18px;
  background: rgba(247, 251, 253, 0.7);
  color: var(--muted);
  text-align: center;
}

.dark .calendar-agenda-list > .calendar-agenda-day,
[data-theme="dark"] .calendar-agenda-list > .calendar-agenda-day {
  background: linear-gradient(145deg, rgba(26,42,54,0.98), rgba(18,32,43,0.92));
}

.dark .calendar-agenda-person,
[data-theme="dark"] .calendar-agenda-person,
.dark .calendar-agenda-status,
[data-theme="dark"] .calendar-agenda-status {
  background: color-mix(in srgb, var(--agenda-user-color, var(--agenda-status-color, var(--medium-blue))) 12%, #142532);
}

@media (max-width: 640px) {
  .calendar-agenda-day-head {
    align-items: flex-start;
  }

  .calendar-agenda-day-head .muted {
    text-align: right;
  }

  .calendar-agenda-person {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .calendar-agenda-statuses {
    grid-column: 1 / -1;
  }

  .calendar-agenda-events .calendar-agenda-event {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .calendar-agenda-event .calendar-agenda-proj,
  .calendar-agenda-event .ghost-button.tiny {
    grid-column: 3;
    justify-self: start;
  }
}

/* ── v169: Projekt-Gesundheits-Ampel ────────────────────────── */
/* Kleiner Dot in der Tabellenzeile */
.proj-health-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
  position: relative;
  top: -1px;
  transition: transform 0.15s;
}
.proj-health-dot:hover { transform: scale(1.4); }
.proj-health-gut      { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.2); }
.proj-health-risiko   { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,0.2); }
.proj-health-kritisch { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.2); animation: health-pulse 2s ease-in-out infinite; }

@keyframes health-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(239,68,68,0.2); }
  50%       { box-shadow: 0 0 0 5px rgba(239,68,68,0.0); }
}

/* Badge im Projekt-Home-Header */
.project-home-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.project-home-title-row h2 { margin: 0; }

.proj-health-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.proj-health-badge::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}
.proj-health-badge.proj-health-gut      { background: #f0fdf4; color: #14705a; border: 1px solid #bbf7d0; }
.proj-health-badge.proj-health-risiko   { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.proj-health-badge.proj-health-kritisch { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

/* Dark mode */
.dark .proj-health-badge.proj-health-gut      { background: rgba(34,197,94,0.12);  border-color: rgba(34,197,94,0.3);  color: #4ade80; }
.dark .proj-health-badge.proj-health-risiko   { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #fbbf24; }
.dark .proj-health-badge.proj-health-kritisch { background: rgba(239,68,68,0.12);  border-color: rgba(239,68,68,0.3);  color: #f87171; }
[data-theme="dark"] .proj-health-badge.proj-health-gut { background: rgba(34,197,94,0.12);  border-color: rgba(34,197,94,0.3);  color: #4ade80; }
[data-theme="dark"] .proj-health-badge.proj-health-risiko { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #fbbf24; }
[data-theme="dark"] .proj-health-badge.proj-health-kritisch { background: rgba(239,68,68,0.12);  border-color: rgba(239,68,68,0.3);  color: #f87171; }

/* ── v168: Inline Tag-Editor ─────────────────────────────────── */
/* Bestehende Tag-Chips als Buttons */
button.task-tag-chip.task-meta-chip {
  cursor: pointer;
  border: 1px solid transparent;
  background: rgba(44,158,201,0.10);
  font: inherit;
  border-radius: 5px;
  padding: 0 6px;
  transition: background 0.1s, border-color 0.1s;
}
button.task-tag-chip.task-meta-chip:hover {
  background: rgba(44,158,201,0.20);
  border-color: rgba(44,158,201,0.35);
}

/* +Tag Hover-Button (kein Tag gesetzt) */
.task-tag-btn-empty {
  align-items: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-subtle);
  background: transparent;
  border: 1px dashed var(--line, #e5e7eb);
  border-radius: 5px;
  padding: 1px 5px;
  cursor: pointer;
  line-height: 18px;
  white-space: nowrap;
  transition: opacity 0.12s, color 0.1s, border-color 0.1s, background 0.1s;
}
.project-task-list-row:hover .task-tag-btn-empty,
.global-awork-task-row:hover .task-tag-btn-empty {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.task-tag-btn-empty:hover {
  color: #2c9ec9;
  border-color: #2c9ec9;
  background: rgba(44,158,201,0.06);
}

/* Floating Tag-Picker-Popover */
.tag-picker-popover {
  position: absolute;
  z-index: 9800;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #d8e4ea);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  padding: 8px;
  min-width: 200px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: qs-in 0.12s ease;
}
.tag-picker-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted, #51626e);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 4px 2px;
}
.tag-picker-add-form {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tag-picker-input {
  flex: 1;
  height: 30px;
  border: 1px solid var(--color-border, #d8e4ea);
  border-radius: 7px;
  padding: 0 8px;
  font-size: 12px;
  font-family: inherit;
  color: var(--color-text, #1a2e3b);
  background: var(--color-surface-soft, #f7fbfd);
  transition: border-color 0.15s;
  min-width: 0;
}
.tag-picker-input::placeholder { color: var(--color-text-subtle, #5f7380); }
.tag-picker-input:focus { outline: none; border-color: #2c9ec9; background: var(--color-surface, #fff); }
.tag-picker-add-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--color-border, #d8e4ea);
  background: var(--color-surface-muted, #f1f5f9);
  color: var(--color-text-muted, #51626e);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.tag-picker-add-btn:hover { background: #2c9ec9; border-color: #2c9ec9; color: #fff; }
.tag-picker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
}
.tag-picker-option {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  color: var(--color-text, #1a2e3b);
  transition: background 0.1s;
}
.tag-picker-option:hover { background: var(--color-surface-muted, #f1f5f9); }
.tag-picker-option.is-active {
  background: rgba(44,158,201,0.10);
  color: #1a7fa0;
  font-weight: 500;
}
.tag-picker-option.is-active:hover { background: rgba(44,158,201,0.18); }
.tag-picker-indicator {
  flex-shrink: 0;
  width: 14px;
  font-size: 11px;
  font-weight: 700;
  color: #2c9ec9;
  text-align: center;
}
.tag-picker-empty {
  font-size: 12px;
  color: var(--color-text-muted, #51626e);
  margin: 4px 8px;
  font-style: italic;
}
.tag-picker-clear {
  width: 100%;
  padding: 4px 8px;
  font-size: 11px;
  font-family: inherit;
  color: var(--color-text-muted, #51626e);
  background: transparent;
  border: 1px solid var(--color-border, #d8e4ea);
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  margin-top: 2px;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.tag-picker-clear:hover { background: #fef2f2; color: #e74c3c; border-color: #fca5a5; }

/* Dark mode – class-based */
.dark .tag-picker-popover { background: #1c2b38; border-color: #2a3f52; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.dark .tag-picker-input { background: #162130; border-color: #2a3f52; color: #d1e0eb; }
.dark .tag-picker-input:focus { border-color: #2c9ec9; background: #0f1d29; }
.dark .tag-picker-option { color: #d1e0eb; }
.dark .tag-picker-option:hover { background: #1e3247; }
.dark .tag-picker-option.is-active { background: rgba(44,158,201,0.18); color: #60c5e8; }
.dark .tag-picker-clear { border-color: #2a3f52; color: #7a9ab4; }
.dark .tag-picker-clear:hover { background: rgba(231,76,60,0.15); color: #f87171; border-color: rgba(231,76,60,0.4); }
.dark button.task-tag-chip.task-meta-chip { background: rgba(44,158,201,0.15); }
.dark button.task-tag-chip.task-meta-chip:hover { background: rgba(44,158,201,0.25); }
/* Dark mode – system preference */
[data-theme="dark"] .tag-picker-popover { background: #1c2b38; border-color: #2a3f52; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
[data-theme="dark"] .tag-picker-input { background: #162130; border-color: #2a3f52; color: #d1e0eb; }
[data-theme="dark"] .tag-picker-input:focus { border-color: #2c9ec9; background: #0f1d29; }
[data-theme="dark"] .tag-picker-option { color: #d1e0eb; }
[data-theme="dark"] .tag-picker-option:hover { background: #1e3247; }
[data-theme="dark"] .tag-picker-option.is-active { background: rgba(44,158,201,0.18); color: #60c5e8; }
[data-theme="dark"] .tag-picker-clear { border-color: #2a3f52; color: #7a9ab4; }
[data-theme="dark"] .tag-picker-clear:hover { background: rgba(231,76,60,0.15); color: #f87171; border-color: rgba(231,76,60,0.4); }
[data-theme="dark"] button.task-tag-chip.task-meta-chip { background: rgba(44,158,201,0.15); }
[data-theme="dark"] button.task-tag-chip.task-meta-chip:hover { background: rgba(44,158,201,0.25); }

/* ── v167: Tastaturkürzel-Hilfe-Overlay ─────────────────────── */
/* Topbar-Button */
.shortcuts-help-btn { opacity: 0.65; }
.shortcuts-help-btn:hover { opacity: 1; }
.shortcuts-help-glyph {
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
}

/* Backdrop */
.shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shortcuts-overlay.hidden { display: none; }
.shortcuts-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 30, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Modal */
.shortcuts-modal {
  position: relative;
  z-index: 1;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #d8e4ea);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
  width: min(700px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: qs-in 0.15s ease;
}
.shortcuts-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--color-border, #d8e4ea);
}
.shortcuts-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-strong, #111827);
  margin: 0;
}
.shortcuts-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: var(--color-surface-muted, #f1f5f9);
  color: var(--color-text-muted, #51626e);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
}
.shortcuts-close-btn:hover { background: var(--color-border, #d8e4ea); color: var(--color-text, #1a2e3b); }

/* Body – 2-Spalten-Grid */
.shortcuts-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow-y: auto;
  padding: 20px;
  gap: 0 32px;
}
@media (max-width: 520px) {
  .shortcuts-body { grid-template-columns: 1fr; }
}
.shortcuts-col { display: flex; flex-direction: column; gap: 20px; }
.shortcuts-group { display: flex; flex-direction: column; gap: 8px; }
.shortcuts-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted, #51626e);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.shortcuts-list { display: flex; flex-direction: column; gap: 4px; }
.shortcut-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px;
  border-radius: 6px;
}
.shortcut-row:hover { background: var(--color-surface-muted, #f1f5f9); }
.shortcut-keys {
  flex-shrink: 0;
  min-width: 110px;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}
.shortcut-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid var(--color-border-strong, #cbd5e1);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--color-surface-muted, #f1f5f9);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text, #1a2e3b);
  line-height: 1;
}
.shortcut-click {
  font-size: 11px;
  font-weight: 600;
  color: #2c9ec9;
  background: rgba(44,158,201,0.08);
  border: 1px solid rgba(44,158,201,0.2);
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}
.shortcut-desc {
  font-size: 13px;
  color: var(--color-text, #1a2e3b);
}

/* Footer */
.shortcuts-footer {
  padding: 10px 20px 14px;
  border-top: 1px solid var(--color-border, #d8e4ea);
  font-size: 11px;
  color: var(--color-text-muted, #51626e);
  display: flex;
  align-items: center;
  gap: 6px;
}
.shortcuts-footer kbd {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 4px;
  border: 1px solid var(--color-border-strong, #cbd5e1);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--color-surface-muted, #f1f5f9);
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text, #1a2e3b);
}

/* Dark mode – class-based */
.dark .shortcuts-modal { background: #1c2b38; border-color: #2a3f52; }
.dark .shortcuts-modal-header { border-color: #2a3f52; }
.dark .shortcuts-modal-title { color: #e2e8f0; }
.dark .shortcuts-close-btn { background: #162130; color: #7a9ab4; }
.dark .shortcuts-close-btn:hover { background: #2a3f52; color: #e2e8f0; }
.dark .shortcut-row:hover { background: #162130; }
.dark .shortcut-keys kbd { background: #162130; border-color: #2a3f52; color: #d1e0eb; }
.dark .shortcut-desc { color: #d1e0eb; }
.dark .shortcuts-footer { border-color: #2a3f52; }
.dark .shortcuts-footer kbd { background: #162130; border-color: #2a3f52; color: #d1e0eb; }
/* Dark mode – system preference */
[data-theme="dark"] .shortcuts-modal { background: #1c2b38; border-color: #2a3f52; }
[data-theme="dark"] .shortcuts-modal-header { border-color: #2a3f52; }
[data-theme="dark"] .shortcuts-modal-title { color: #e2e8f0; }
[data-theme="dark"] .shortcuts-close-btn { background: #162130; color: #7a9ab4; }
[data-theme="dark"] .shortcuts-close-btn:hover { background: #2a3f52; color: #e2e8f0; }
[data-theme="dark"] .shortcut-row:hover { background: #162130; }
[data-theme="dark"] .shortcut-keys kbd { background: #162130; border-color: #2a3f52; color: #d1e0eb; }
[data-theme="dark"] .shortcut-desc { color: #d1e0eb; }
[data-theme="dark"] .shortcuts-footer { border-color: #2a3f52; }
[data-theme="dark"] .shortcuts-footer kbd { background: #162130; border-color: #2a3f52; color: #d1e0eb; }

/* ── v162: Status-Schnellmenü ────────────────────────────────── */
.status-picker-popover {
  position: absolute;
  z-index: 9800;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
  animation: qs-in 0.12s ease;
}

.status-picker-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text-primary, #1a2e3c);
  cursor: pointer;
  text-align: left;
  transition: background 0.08s;
}
.status-picker-option:hover { background: var(--surface-hover, #f0f7ff); }
.status-picker-option.is-current {
  background: var(--surface-raised, #f3f4f6);
  font-weight: 600;
}

.status-picker-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pick-color, #9BC8F8);
  flex-shrink: 0;
}

/* Dark mode */
.dark .status-picker-popover { background: #1c2b38; border-color: #2a3f52; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.dark .status-picker-option { color: #e2e8f0; }
.dark .status-picker-option:hover { background: #1e3347; }
.dark .status-picker-option.is-current { background: #243444; }
[data-theme="dark"] .status-picker-popover { background: #1c2b38; border-color: #2a3f52; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
[data-theme="dark"] .status-picker-option { color: #e2e8f0; }
[data-theme="dark"] .status-picker-option:hover { background: #1e3347; }
[data-theme="dark"] .status-picker-option.is-current { background: #243444; }

/* ── v161: Mein Monat – Monatsziel-Fortschrittsbalken ──────────*/
.monat-head-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 260px;
}

/* ── v160: Meine Woche – Aufgaben diese Woche ────────────────── */
.woche-tasks-section {
  margin-top: 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
}

.woche-tasks-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.woche-tasks-header h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.woche-tasks-list {
  padding: 0 16px 4px;
}

.woche-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.08s;
}
.woche-task-row:last-of-type { border-bottom: none; }
.woche-task-row:hover { background: var(--surface-hover, #f5f9ff); }

.woche-task-day {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  min-width: 76px;
}
.woche-task-day.is-overdue { color: #b7791f; }

.woche-task-title {
  flex: 1;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary, #1a2e3c);
}
.woche-task-row.is-overdue .woche-task-title { color: #92400e; }

.woche-task-proj {
  flex-shrink: 0;
  font-size: 11px;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.woche-task-timer-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line, #e5e7eb);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.1s, background 0.1s;
}
.woche-task-row:hover .woche-task-timer-btn { opacity: 1; }
.woche-task-timer-btn:hover { background: #27ae60; border-color: #27ae60; color: #fff; }

.woche-tasks-more {
  font-size: 11px;
  color: var(--color-text-muted);
  padding: 4px 4px 8px;
}

/* Dark mode */
.dark .woche-tasks-section { background: #1c2b38; border-color: #2a3f52; }
.dark .woche-tasks-header { border-color: #2a3f52; }
.dark .woche-task-row { border-color: #2a3f52; }
.dark .woche-task-row:hover { background: #1e3347; }
.dark .woche-task-title { color: #e2e8f0; }
.dark .woche-task-row.is-overdue .woche-task-title { color: #fbbf24; }
.dark .woche-task-day.is-overdue { color: #fbbf24; }
.dark .woche-task-timer-btn { border-color: #2a3f52; }
[data-theme="dark"] .woche-tasks-section { background: #1c2b38; border-color: #2a3f52; }
[data-theme="dark"] .woche-tasks-header { border-color: #2a3f52; }
[data-theme="dark"] .woche-task-row { border-color: #2a3f52; }
[data-theme="dark"] .woche-task-row:hover { background: #1e3347; }
[data-theme="dark"] .woche-task-title { color: #e2e8f0; }
[data-theme="dark"] .woche-task-row.is-overdue .woche-task-title { color: #fbbf24; }
[data-theme="dark"] .woche-task-day.is-overdue { color: #fbbf24; }
[data-theme="dark"] .woche-task-timer-btn { border-color: #2a3f52; }

/* ── v175 j/k Tastaturnavigation ───────────────────────────────── */
/* Nur Outline-Ring, kein Background – damit is-selected nicht überschrieben wird */
.project-task-list-row.is-keyboard-focused {
  outline: 2px solid var(--medium-blue, #297b96);
  outline-offset: -2px;
  border-radius: 8px;
}

/* ── v172 Bulk-Aktionen ─────────────────────────────────────────── */

/* Checkbox wrapper – hidden by default, shown on row hover or selection */
.task-bulk-check-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-right: 4px;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s;
}
.project-task-list-row:hover .task-bulk-check-wrap,
.is-bulk-selected .task-bulk-check-wrap {
  visibility: visible;
  opacity: 1;
}

.task-bulk-check {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--medium-blue, #297b96);
  flex-shrink: 0;
}

/* Row highlight when selected */
.project-task-list-row.is-bulk-selected {
  background: rgba(41, 123, 150, 0.10);
  border-left: 3px solid var(--medium-blue, #297b96);
  padding-left: 9px;
}

/* Floating bulk action bar */

.bulk-bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── v173 Markdown-Vorschau ─────────────────────────────────────── */

.task-desc-preview-toggle {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--medium-blue, #297b96);
  border: 1px solid var(--medium-blue, #297b96);
  opacity: 0.8;
  transition: opacity 0.12s, background 0.12s;
}
.task-desc-preview-toggle:hover {
  opacity: 1;
  background: rgba(41,123,150,0.08);
}

/* Rendered markdown output */
.task-desc-preview {
  min-height: 80px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--surface-muted, #f9fafb);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text, #1a2e3b);
  word-break: break-word;
}

.task-desc-preview h3 { font-size: 16px; font-weight: 700; margin: 10px 0 4px; }
.task-desc-preview h4 { font-size: 14px; font-weight: 700; margin: 8px 0 3px; }
.task-desc-preview h5 { font-size: 13px; font-weight: 700; margin: 6px 0 2px; }
.task-desc-preview p  { margin: 2px 0; }
.task-desc-preview ul,
.task-desc-preview ol { padding-left: 20px; margin: 4px 0; }
.task-desc-preview li { margin: 2px 0; }
.task-desc-preview code {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  padding: 1px 5px;
}
.task-desc-preview strong { font-weight: 700; }
.task-desc-preview em     { font-style: italic; }
.task-desc-preview hr     { border: none; border-top: 1px solid var(--border-color, #e2e8f0); margin: 8px 0; }
.task-desc-preview a      { color: var(--medium-blue, #297b96); text-decoration: underline; }
.task-desc-preview a:hover{ opacity: 0.8; }
.task-desc-preview .md-spacer { height: 8px; }
.task-desc-preview .md-empty  { color: var(--color-text-muted, #5f7380); font-style: italic; }

/* Dark mode */
.dark .task-desc-preview {
  background: #1a2e3b;
  border-color: #2a3f52;
  color: #e2e8f0;
}
.dark .task-desc-preview code { background: rgba(255,255,255,0.08); }
.dark .task-desc-preview hr   { border-color: #2a3f52; }
[data-theme="dark"] .task-desc-preview { background: #1a2e3b; border-color: #2a3f52; color: #e2e8f0; }
[data-theme="dark"] .task-desc-preview code { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .task-desc-preview hr { border-color: #2a3f52; }

/* Dark mode – bar already has dark bg; row highlight tweak */
.dark .project-task-list-row.is-bulk-selected {
  background: rgba(41, 123, 150, 0.18);
}
[data-theme="dark"] .project-task-list-row.is-bulk-selected {
  background: rgba(41, 123, 150, 0.18);
}

/* ── v178: Quick-Create Overlay (N-Taste) ───────────────────── */
.quick-create-overlay {
  position: fixed;
  inset: 0;
  z-index: 9950;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(60px, 14vh, 140px);
}
.quick-create-overlay.hidden { display: none; }

.quick-create-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.quick-create-modal {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100vw - 32px));
  background: var(--surface, #fff);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  animation: qs-in 0.15s ease;
}

.quick-create-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}

.quick-create-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--medium-blue, #297b96);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.quick-create-header-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #111827);
  flex: 1;
}

.quick-create-shortcut-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--bg-subtle, #f3f4f6);
  border: 1px solid var(--line, #e5e7eb);
  color: var(--color-text-muted);
  font-family: inherit;
  line-height: 1.4;
}

.quick-create-title-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-family: inherit;
  font-weight: 500;
  color: var(--text-primary, #111827);
}
.quick-create-title-input::placeholder { color: var(--color-text-subtle); font-weight: 400; }
.quick-create-title-input:focus { outline: none; }

.quick-create-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 14px;
  flex-wrap: wrap;
}

.quick-create-select {
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--bg-subtle, #f9fafb);
  color: var(--text-primary, #111827);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  flex: 1;
  min-width: 100px;
}
.quick-create-select:focus { border-color: var(--medium-blue, #297b96); box-shadow: 0 0 0 2px rgba(41,123,150,0.15); }

.quick-create-deadline {
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--bg-subtle, #f9fafb);
  color: var(--text-primary, #111827);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.quick-create-deadline:focus { border-color: var(--medium-blue, #297b96); box-shadow: 0 0 0 2px rgba(41,123,150,0.15); }

.quick-create-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--line, #e5e7eb);
  background: var(--bg-subtle, #f9fafb);
}

.quick-create-hint {
  font-size: 12px;
  color: var(--color-text-subtle);
}
.quick-create-hint kbd {
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  color: var(--color-text-muted);
  font-family: inherit;
}

/* Dark mode – .dark prefix */
.dark .quick-create-modal { background: #1c2b38; box-shadow: 0 24px 80px rgba(0,0,0,0.5); }
.dark .quick-create-header { border-color: #2a3f52; }
.dark .quick-create-header-title { color: #e2e8f0; }
.dark .quick-create-shortcut-badge { background: #1a2e3b; border-color: #2a3f52; color: #8fa8b8; }
.dark .quick-create-backdrop { background: rgba(0,0,0,0.6); }
.dark .quick-create-title-input { color: #e2e8f0; }
.dark .quick-create-title-input::placeholder { color: #4b6274; }
.dark .quick-create-select { background: #1a2e3b; border-color: #2a3f52; color: #e2e8f0; }
.dark .quick-create-deadline { background: #1a2e3b; border-color: #2a3f52; color: #e2e8f0; }
.dark .quick-create-footer { background: #172330; border-color: #2a3f52; }
.dark .quick-create-hint { color: #8fa8b8; }
.dark .quick-create-hint kbd { background: #1c2b38; border-color: #2a3f52; color: #8fa8b8; }

/* Dark mode – media query */
[data-theme="dark"] .quick-create-modal { background: #1c2b38; box-shadow: 0 24px 80px rgba(0,0,0,0.5); }
[data-theme="dark"] .quick-create-header { border-color: #2a3f52; }
[data-theme="dark"] .quick-create-header-title { color: #e2e8f0; }
[data-theme="dark"] .quick-create-shortcut-badge { background: #1a2e3b; border-color: #2a3f52; color: #8fa8b8; }
[data-theme="dark"] .quick-create-backdrop { background: rgba(0,0,0,0.6); }
[data-theme="dark"] .quick-create-title-input { color: #e2e8f0; }
[data-theme="dark"] .quick-create-title-input::placeholder { color: #4b6274; }
[data-theme="dark"] .quick-create-select { background: #1a2e3b; border-color: #2a3f52; color: #e2e8f0; }
[data-theme="dark"] .quick-create-deadline { background: #1a2e3b; border-color: #2a3f52; color: #e2e8f0; }
[data-theme="dark"] .quick-create-footer { background: #172330; border-color: #2a3f52; }
[data-theme="dark"] .quick-create-hint { color: #8fa8b8; }
[data-theme="dark"] .quick-create-hint kbd { background: #1c2b38; border-color: #2a3f52; color: #8fa8b8; }

/* ── v180: Visual/UX Kompakt-Optimierungen ──────────────────── */

/* 1. Topbar-Headline auf Desktop verkleinern (global clamp bis 34px → topbar 75px) */
.topbar-title-block .headline,
.topbar-title-block #projectHeadline {
  font-size: clamp(14px, 1.35vw, 19px) !important;
  line-height: 1.1 !important;
  margin-top: 1px !important;
}
.topbar-title-block .eyebrow {
  font-size: 10px;
  margin-bottom: 0;
  line-height: 1.3;
}

/* 2. Timer-Play-Button in Aufgabenreihen: kein 44px Touch-Target nötig (Desktop) */
@media (min-width: 768px) {
  .project-task-list-row .task-timer-play-button,
  .global-awork-task-row .task-timer-play-button {
    min-height: 26px !important;
    height: 26px !important;
    font-size: 11px;
    padding: 0 7px;
    min-width: 56px;
    line-height: 24px;
  }
}

/* 3. Aufgabenreihen: kompakteres vertikales Padding auf Desktop */
@media (min-width: 768px) {
  .project-task-list-row {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  #view-aufgaben .global-awork-task-row {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: 36px;
  }
}

/* 4. Task-Meta-Chips kompakter (waren 30px; min-height überschreibt height) */
.task-meta-chip {
  min-height: 22px !important;
  height: 22px !important;
  line-height: 20px !important;
  padding: 0 7px !important;
  font-size: 11px !important;
}

/* ── v181: Projekt-Header kompakter ─────────────────────────── */

/* Project-switcher inline: label + select in einer Zeile statt gestapelt */
.project-switcher-inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.project-switcher-inline span {
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
  flex-shrink: 0;
}
.project-switcher-inline select {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  font-size: 13px;
  min-width: 160px;
  max-width: 260px;
  width: auto !important;
}

/* Project-space-path: kompaktes Padding, kleinere Nav-Buttons */
.project-space-path {
  padding: 6px 12px;
  align-items: center;
}
.project-space-path .square {
  min-width: 32px !important;
  min-height: 32px !important;
  width: 32px;
  height: 32px;
}

/* Project-inner-nav Tabs: weniger Padding */
.project-inner-nav {
  padding: 6px 12px !important;
  gap: 3px !important;
}
.project-inner-link {
  padding: 6px 10px !important;
  min-height: 30px !important;
}

/* Project-chip: etwas kompakter */
.project-chip {
  padding: 6px 10px !important;
  font-size: 13px;
}

/* Export-Controls im Aufgaben-Tab: Selects nicht auf 100% Breite strecken */
.project-task-export-controls {
  flex-wrap: nowrap !important;
  gap: 6px !important;
  align-items: center !important;
}
.project-task-export-controls select {
  width: auto !important;
  min-width: 130px;
  max-width: 200px;
}

/* Bearbeiter- und Deadline-Filter: einzeilig mit scroll statt umbrechen */
.project-task-assignee-filter,
.project-task-deadline-filter {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.project-task-assignee-filter::-webkit-scrollbar,
.project-task-deadline-filter::-webkit-scrollbar { display: none; }

/* Globale Aufgaben-Toolbar: Padding + Gap kompakter */
#view-aufgaben .task-toolbar {
  padding-top: 4px !important;
  padding-bottom: 2px !important;
  gap: 6px !important;
}
/* Export-Icon-Button in der Sekundär-Toolbar: Touch-Target auf Desktop reduzieren */
@media (min-width: 768px) {
  #view-aufgaben .task-icon-export.is-compact-export,
  #view-aufgaben .task-icon-export .export-icon-button {
    min-height: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    width: 34px !important;
  }
}

/* ── v183: Task-Detail kompakter ────────────────────────────── */

/* Form-Controls im Task-Detail-Panel: 42px → 34px */
@media (min-width: 768px) {
  .project-task-detail-panel select,
  .project-task-detail-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    min-height: 34px !important;
    height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 34px;
  }
  /* State-Dot im Titel etwas kleiner */
  .project-task-detail-title-row .project-task-state-dot {
    width: 32px !important;
    height: 32px !important;
  }
  .project-task-detail-title-row .project-task-state-dot .ci-icon-svg {
    width: 17px !important;
    height: 17px !important;
  }
  /* Kompakt-Header in den Sektionen */
  .panel-header.compact {
    padding: 4px 0 !important;
    min-height: 26px !important;
  }
}

/* ── v187: Sidebar-Task-Items Farb-Fix + Aufgaben-Toolbar ───── */
/* Sidebar: dashboard-task-item Overrides für dunklen Hintergrund */
.sidebar .my-task-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 8px 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  margin-bottom: 3px !important;
}
.sidebar .my-task-item:last-child { border-bottom: none !important; }
.sidebar .my-task-item:hover { background: rgba(255, 255, 255, 0.12) !important; }
.sidebar .dashboard-task-title {
  color: #e8f8ff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.sidebar .dashboard-task-project {
  color: rgba(232, 248, 255, 0.55) !important;
  font-size: 10px !important;
}
.sidebar .dashboard-task-meta {
  display: none !important;
}

/* ── v186: Dashboard & Task-Row Polish ──────────────────────── */
/* Projekt-Task-Toolbar: kompakter, eine Zeile */
.project-task-toolbar {
  margin-bottom: 8px !important;
}
.project-task-toolbar-left {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  align-items: center !important;
}
/* Task-Row Hover subtiler */
.project-task-list-row:hover,
.global-awork-task-row:hover {
  background: var(--color-surface-soft) !important;
}
/* Overdue: subtiler Linkstreifen statt auffälligem Rot */
.project-task-list-row.is-overdue-row {
  border-left: 3px solid var(--color-warning) !important;
  background: rgba(217, 119, 6, 0.04) !important;
}
/* Timer-Button: erst beim Row-Hover sichtbar */
.task-timer-play-button {
  opacity: 0;
  transition: opacity 140ms, background 140ms;
}
.project-task-list-row:hover .task-timer-play-button,
.global-awork-task-row:hover .task-timer-play-button {
  opacity: 1;
}
/* Timer läuft: immer sichtbar */
.project-task-list-row.is-timed .task-timer-play-button,
.task-timer-play-button.is-running {
  opacity: 1 !important;
}
/* Subtask/Checklist-Chip: grüner wenn komplett erledigt */
.task-meta-chip.is-green {
  background: var(--color-success-soft) !important;
  color: var(--color-success) !important;
  border-color: transparent !important;
}


/* Dashboard-Header: schlank ohne Panel-Box */
.dashboard-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding: 0 4px !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}
.dashboard-head .dashboard-head-intro h2 {
  font-size: clamp(20px, 2.5vw, 28px) !important;
  margin: 2px 0 0 !important;
}
.dashboard-head .dashboard-head-intro .muted {
  font-size: 12px;
  margin: 0;
}
/* Bugjagd: Unter 1100 px stapelt sich die Kopfzeile; "center" schob Titel und Untertitel in die Mitte. */
@media (max-width: 1100px) {
  .dashboard-head { align-items: stretch !important; }
}
/* Leere Listengruppe (Default-Liste ohne Namen) */
.project-task-list-group.is-unnamed-list > .project-task-list-head {
  padding: 4px 0 !important;
  border-bottom: none !important;
  opacity: 0.6;
}
.project-task-list-no-name {
  flex: 1;
}
/* Kein Rand über der ersten Aufgabe wenn kein Listen-Header */
.project-task-list-group.is-unnamed-list .project-task-list-card {
  border-top: none !important;
}
/* Subtile Trennlinie zwischen Aufgabe-Zeilen */
.project-task-list-rows > li + li {
  border-top: 1px solid var(--color-border);
}

/* ── v185: Dashboard-Aufgaben awork-Style ────────────────────── */
.dashboard-task-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 120ms;
  list-style: none;
}
.dashboard-task-item:last-child { border-bottom: none; }
.dashboard-task-item:hover { background: var(--color-surface-soft); }
.dashboard-task-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.dashboard-task-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-strong);
  line-height: 1.3;
}
.dashboard-task-project {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-task-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.dashboard-task-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.dashboard-task-date.is-danger { color: var(--color-danger); }
.dashboard-task-date.is-warn   { color: var(--color-warning); }

/* ── v184: Task-Row Aufräumen ────────────────────────────────── */
/* Timer-Button: Icon only, kompakt */
.task-timer-play-button {
  min-width: 26px !important;
  width: 26px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
/* Leere Liste ohne "Ohne Liste" Label */
.project-task-list-toggle strong:empty {
  display: none;
}
/* Floating empty-state Buttons in Aufgaben-Zeilen ausblenden (Fallback) */
.task-tag-btn-empty,
.task-plan-btn-empty,
.task-deadline-btn-empty,
.task-assignee-btn-empty {
  display: none !important;
}

/* ── v189: Multi-View Visual Polish ─────────────────────────── */

/* 1 ─ Sidebar nav-links kompakter (Desktop) */
@media (min-width: 768px) {
  .side-link {
    padding: 7px var(--control-padding-x) !important;
    min-height: 36px !important;
    font-size: 13px !important;
  }
  .side-nav { gap: 3px !important; }
}

/* 2 ─ Mitarbeiter: Zeilen & Aktionsbuttons kompakter */
.management-row.user-overview-row {
  padding: 8px 16px !important;
}
.management-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px !important;
}
.management-row-actions .ghost-button.tiny {
  font-size: 11px !important;
  padding: 2px 8px !important;
  height: 24px !important;
  min-height: 24px !important;
}
.management-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px !important;
}
.management-row-meta .badge {
  font-size: 10px !important;
  padding: 1px 6px !important;
}

/* 3 ─ Zeiten-Hero: Metric-Karten visuell aufwerten (nur Farben/Borders, kein Layout-Override) */
.zeiten-status-metric {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
}
.zeiten-status-metric strong {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  color: var(--color-primary) !important;
}

/* 4 ─ Planer: Aufgaben-Vorschläge kompakter */
#view-planer .headline {
  font-size: clamp(22px, 3vw, 32px) !important;
}

/* 6 ─ Panel: Hover-Elevation überall */
.panel {
  transition: box-shadow 180ms ease !important;
}

/* 7 ─ Global: ghost-button tiny einheitlich */
.ghost-button.tiny {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  border-radius: var(--radius-sm) !important;
}

/* 8 ─ Badge global einheitlicher */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: var(--radius-pill) !important;
}

/* 9 ─ Leere Zustände: Icon und Text besser zentriert */
.empty-state {
  padding: 28px 16px !important;
}
.empty-state-icon {
  margin-bottom: 8px !important;
  opacity: 0.3 !important;
}
.empty-state p {
  font-size: 13px !important;
  color: var(--color-text-muted) !important;
  margin: 0 !important;
}

/* 10 ─ Management-Panel-Header: kompakter */
.user-overview-panel > .panel-header {
  padding-bottom: 10px !important;
}
.user-overview-panel .panel-header h2 {
  font-size: 15px !important;
}

/* ── v192: Dashboard & Task-Row Kompakt ─────────────────────── */

/* 1 ─ KPI-Grids: 2 Spalten auf schmalen Screens statt 1 */
@media (max-width: 1100px) {
  .dashboard-time-status-grid,
.zeiten-status-metrics,
.stats-kpi-row,
.project-home-kpi-grid,
.project-facts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 2 ─ Schnellaufgabe: Split-2-Zeilen seitenweise auf schmalem Screen */

/* 3 ─ Workday-Panel Buttons kompakter */
/* v524: Action-Row spiegelt das Card-Grid (2 gleich breite Spalten).
 * Wichtig: gleiches gap wie .dashboard-time-status-grid und flex/auto
 * werden NICHT mehr genutzt — Buttons sind direkt unter ihrer Card.
 * Vorherige flex+!important-Lösung führte zu asymmetrischen Breiten,
 * weil Button-Text-Länge sie wachsen ließ. */
.dashboard-time-action-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.dashboard-time-action-row .ghost-button,
.dashboard-time-action-row button {
  width: 100% !important;
  min-width: 0 !important;
  font-size: 13px !important;
  padding: 8px 10px !important;
  height: auto !important;
  min-height: 36px !important;
}
@media (max-width: 760px) {
  .dashboard-time-action-row {
    grid-template-columns: 1fr !important;
  }
}

/* 4 ─ Aufgaben-Zeile: Titel kürzen statt umbrechen */
.project-task-title-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  overflow: hidden !important;
  min-width: 0 !important;
}
.task-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}
.task-title-project {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-muted, #51626e);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  margin-top: 1px;
}

/* 5 ─ Dashboard-Aufgaben: Titel einzeilig */
.dashboard-task-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 6 ─ Meine Aufgaben: Scope-Dropdown kompakter */
#dashboardTaskScope {
  width: auto !important;
  max-width: 180px !important;
  font-size: 12px !important;
}

/* 7 ─ Panel-Header mit Select: flex ausrichten */
.panel-header.compact {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

/* KW-MOBIL-AUDIT-2 (27.09.2026): Regel "7" oben (unconditional, !important) kommt
   nach dem v368-Mobil-Fix (Zeile ~18016, `.panel-header.compact { flex-wrap: wrap
   !important }` unter max-width:720px) und gewinnt deshalb ueberall, auch auf dem
   Handy -- v368 wird komplett unwirksam. Sichtbar z.B. bei Mitarbeiter -> Arbeitszeit
   -> "Zeitphasen im Kalender": Titel+Text links, Ansichts-Umschalter+Knopf rechts
   passen bei 375 px nicht in eine Zeile und ragen unlesbar ueber den Rand. Regel 7
   ist fuer eine bestimmte Desktop-Kompaktansicht gedacht; auf dem Handy muss wieder
   umgebrochen werden koennen. */
@media (max-width: 720px) {
  .panel-header.compact {
    flex-wrap: wrap !important;
  }
  .panel-header.compact > * {
    min-width: 0;
  }
}

/* 8 ─ Task-Row Meta-Chips: Gap etwas kompakter */
.project-task-row-right {
  gap: 4px !important;
}

/* 9 ─ Dashboard-Head: kompakter ohne Trennlinie */
.dashboard-head-intro {
  padding-bottom: 4px !important;
}
.dashboard-head-intro .eyebrow-label {
  margin-bottom: 2px !important;
  font-size: 10px !important;
}
.dashboard-head-intro h2 {
  margin: 0 0 2px !important;
  font-size: clamp(20px, 4vw, 28px) !important;
}
.dashboard-head-intro .muted {
  font-size: 12px !important;
  margin: 0 !important;
}

/* 10 ─ Dashboard anpassen: kompakt als Ghost-Icon-Button */
#dashboardCustomizeButton {
  font-size: 12px !important;
  padding: 5px 10px !important;
  min-height: 28px !important;
  height: 28px !important;
}
#dashboardCustomizeButton:hover {
  opacity: 1 !important;
}

/* ── v193: Dashboard Aktivität kompakt + Board-Titel Clamp ──── */

/* 1 ─ Dashboard Aktivität: Kompakter — Grid→Block, Autor inline */
.dashboard-activity-item > div {
  display: block !important;
}
.dashboard-activity-item .badge {
  vertical-align: middle !important;
}
.dashboard-activity-item > div > .muted {
  margin-top: 2px !important;
  font-size: 11px !important;
}

/* 1b ─ v432: Icon + time teilen sich die gleiche Grid-Cell (rechte Spalte).
   Bisher (v429): Icon position:absolute → bei stark unterschiedlich breitem Datum
   konnte der visuelle Wechsel "springend" wirken. Jetzt sitzen beide Elemente
   garantiert an identischer Position (justify-self: end). Beim Hover toggelt
   nur die opacity — keinerlei Layout-Shift. */
.dashboard-activity-item > time,
.dashboard-activity-item .dashboard-activity-action {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  transition: opacity 140ms ease;
}
.dashboard-activity-item .dashboard-activity-action {
  opacity: 0;
  pointer-events: none;
  padding: 4px;
  min-width: 0;
}
.dashboard-activity-item:hover .dashboard-activity-action,
.dashboard-activity-item:focus-within .dashboard-activity-action {
  opacity: 1;
  pointer-events: auto;
}
.dashboard-activity-item:hover > time,
.dashboard-activity-item:focus-within > time {
  opacity: 0;
}
/* Auf Touch-Geräten keine Hover-Logik → time + Icon nebeneinander */
@media (hover: none) {
  .dashboard-activity-item > time,
  .dashboard-activity-item .dashboard-activity-action {
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
  }
  .dashboard-activity-item .dashboard-activity-action {
    opacity: 1;
    pointer-events: auto;
    margin-left: 6px;
  }
  .dashboard-activity-item:hover > time,
  .dashboard-activity-item:focus-within > time {
    opacity: 1;
  }
}

/* 2 ─ Board-Karten: Titel auf 3 Zeilen begrenzen */
.board-card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 3 ─ Dashboard Aktivitäts-Badge: kompakter */
.dashboard-activity-item .badge {
  display: inline-block !important;
  margin-bottom: 2px !important;
}

/* 5 ─ Kalender-Toolbar: Heute + ‹/› auf einer Zeile */
@media (max-width: 760px) {
  #view-kalender .toolbar-inline {
    display: grid !important;
    grid-template-columns: auto auto 1fr auto !important;
    align-items: center !important;
    gap: 6px !important;
  }
  #view-kalender .cal-add-dropdown,
  #view-kalender .cal-view-tabs {
    grid-column: 1 / -1 !important;
  }
  #calendarTodayButton {
    width: auto !important;
    min-width: 0 !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
  #calendarMonthLabel {
    text-align: center !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* 6 ─ Kalender-Export-Icon: volle Breite im kompakten Modus */
@media (max-width: 760px) {
  .export-controls.is-compact-export .export-icon-button {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
}

/* 7 ─ Workload-Widget: kompakter Header */
.workload-widget-panel .panel-header {
  padding-bottom: 6px !important;
}

/* ── v191: Grid-Layout-Bugfixes ─────────────────────────────── */
/* Fix 1: Global Aufgaben-Ansicht — alte 3-Spalten-Override korrigiert */
/* Fix 2: Mobile Projekt-Aufgaben — 3 Spalten → 5 Spalten (Wrapping-Bug) */
/* Fix 3: Zeiten-Hero — flex !important entfernt, original grid bleibt erhalten */
/* Fix 4: Dashboard renderHome() — awork-Style Aufgaben-Items */

/* ── v179: Drag & Drop Aufgaben-Sortierung ──────────────────── */
.task-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  flex-shrink: 0;
  cursor: grab;
  color: var(--color-text-subtle);
  opacity: 0;
  transition: opacity 0.12s;
  padding: 0 2px;
  margin-left: -2px;
  user-select: none;
  touch-action: none;
}
.project-task-list-row:hover .task-drag-handle { opacity: 0.55; }
.project-task-list-row.is-dragging { opacity: 0.35; pointer-events: none; }
.project-task-list-row.is-dragging .task-drag-handle { cursor: grabbing; }

/* Drop indicator lines */
.project-task-list-row.drag-over-top {
  border-top: 2px solid var(--medium-blue, #297b96) !important;
}
.project-task-list-row.drag-over-bottom {
  border-bottom: 2px solid var(--medium-blue, #297b96) !important;
}

/* Dark mode */
.dark .task-drag-handle { color: #4b6274; }
[data-theme="dark"] .task-drag-handle { color: #4b6274; }

/* ── v194 / v238: Fokus-Aufgabe-Card entfernt (buildTaskRowHtml-Template) ── */

/* 2 ─ Lohn: KPI-Bar 2 Spalten statt 1 */
@media (max-width: 1100px) {
  .lohn-kpi-bar,
  .lohn-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 3 ─ Lohn: Toolbar (Jahres-Nav) wieder inline */
.lohn-header-controls .toolbar-inline {
  grid-template-columns: auto auto auto auto !important;
  align-items: center !important;
  width: fit-content !important;
}

/* 4 ─ Zeitauswertungen: Titel kein Wort-Mittentrennung */
.auswertung-landing-title {
  overflow-wrap: normal !important;
  word-break: normal !important;
  font-size: clamp(15px, 4vw, 20px) !important;
}

/* 5 ─ Views: min-width:0 verhindert, dass breite Inhalte das Grid-Layout sprengen */
.view {
  min-width: 0;
  overflow-x: hidden;
}

/* 6 ─ Hinweise zur Arbeitszeit: max-height + Scroll-Snap für vollständige Karten */
#dashboardWorkdayAlertList {
  max-height: 290px !important; /* ~2 vollständige Karten à 133px + Gap */
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
}
#dashboardWorkdayAlertList > li {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* 7 ─ Lohn: Tabellen-Panels scrollen horizontal statt Layout zu dehnen */
@media (max-width: 900px) {
  .lohn-shell .panel,
  .lohn-tab-content .panel {
    overflow-x: auto;
  }
  #view-lohn,
  .lohn-shell {
    max-width: 100%;
  }
}

/* ── v198: Projekt-Aufgaben + Detail-Panel Layout Overhaul ── */

/* ═══════════════════════════════════════════
   A. TASK LIST — toolbar, rows, list card
   ═══════════════════════════════════════════ */

/* A1 — Toolbar: flex row, search+sort left, actions right */
/* ── v206: Projekt-Aufgaben Toolbar — wrap-safe layout ────────── */
#projectAufgabenContent .project-task-toolbar {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
#projectAufgabenContent .project-task-toolbar-left {
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: visible !important;
}
#projectAufgabenContent .project-task-toolbar-left > input[type="search"] {
  min-width: 140px;
  max-width: 220px;
  flex-shrink: 0;
}
#projectAufgabenContent .project-task-toolbar-left > select {
  max-width: 120px;
  flex-shrink: 0;
}
#projectAufgabenContent .project-task-toolbar-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap;
}

/* A2 — Filter chip groups: compact chips, wrap onto second line */
.project-task-assignee-filter,
.project-task-tag-filter,
.project-task-deadline-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.assignee-filter-chip,
.tag-filter-chip,
.deadline-filter-chip {
  font-size: 11px !important;
  padding: 2px 8px !important;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #cde0ed;
  background: #f4faff;
  color: #3b6074;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  transition: background .1s, border-color .1s;
}
.assignee-filter-chip.is-active,
.tag-filter-chip.is-active,
.deadline-filter-chip.is-active {
  background: var(--medium-blue, #5b9ab5);
  border-color: var(--medium-blue, #5b9ab5);
  color: #fff;
}
.assignee-filter-chip:hover:not(.is-active),
.tag-filter-chip:hover:not(.is-active),
.deadline-filter-chip:hover:not(.is-active) {
  background: #e2f0f8;
  border-color: #a8ccde;
}

/* A3 — Task list card: cleaner, subtle border */
.project-task-list-card {
  border: 1px solid #e0edf5;
  background: rgba(252, 255, 255, 0.97);
  box-shadow: 0 1px 4px rgba(30, 80, 105, 0.05);
}

/* A4 — List group header: progress indicator */
.project-task-list-head {
  padding: 2px 2px 4px;
}
.project-task-list-group::before {
  content: none;
}
/* Progress bar under list group header */
.project-task-list-group .project-task-list-head {
  position: relative;
}

/* A5 — Task rows: breathing room, hover, selected */
.project-task-list-row {
  min-height: 40px;
  padding: 5px 6px;
  border-bottom-color: #edf4f8;
  border-radius: 0;
}
.project-task-list-row:first-child { border-radius: 10px 10px 0 0; }
.project-task-list-row:last-child  { border-radius: 0 0 10px 10px; border-bottom: 0; }
.project-task-list-row.is-selected {
  background: rgba(41, 123, 150, 0.10);
  border-radius: 8px !important;
}
.project-task-list-row.is-overdue-row .project-task-title-btn {
  color: #8a5b13;
}

/* A6 — Title in rows: slightly softer weight */
.project-task-title-btn {
  font-weight: 500 !important;
  font-size: 13.5px;
}
.project-task-list-row.is-done .project-task-title-btn {
  color: #8aa3af;
  text-decoration: line-through;
  opacity: 0.75;
}

/* A7 — Timer play button: compact circle, reveal on row hover */
.project-task-list-row .task-timer-play-button {
  min-width: 28px !important;
  width: 28px;
  height: 28px;
  padding: 0 !important;
  border-radius: 50% !important;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity .15s;
}
.project-task-list-row:hover .task-timer-play-button,
.project-task-list-row.is-selected .task-timer-play-button {
  opacity: 1;
}

/* A7b — Task rows list: no top margin (form now at bottom) */
.project-task-list-rows {
  margin-top: 0;
}

/* A8 — Quick-add form: at bottom of card (tasks first, add-row last) */
.project-task-new-row-form {
  margin: 4px 0 0;
  border-radius: 8px;
  border: 1px dashed #c7dced;
  background: rgba(242, 249, 254, 0.65);
}

/* A9 — Archived section: cleaner header */
.archived-tasks-section {
  border-top: 2px dashed #d0e4ef;
  margin-top: 20px;
}

/* ═══════════════════════════════════════════
   B. DETAIL PANEL — title, props, sections
   ═══════════════════════════════════════════ */

/* B1 — Title: smaller max, better line height */
.awork-task-detail .project-task-detail-title-row input {
  /* v676: Obergrenze von 24px auf 20px gesenkt. In der geteilten Ansicht ist
   * das Panel nur halb so breit wie der Bildschirm — 1.8vw richtete sich aber
   * nach der vollen Bildschirmbreite, dadurch war jeder längere Titel
   * abgeschnitten. */
  font-size: clamp(16px, 1.4vw, 20px) !important;
  line-height: 1.2;
  padding: 6px 10px;
  border-color: #e0edf5;
}
.awork-task-detail .project-task-detail-title-row input:focus {
  border-color: var(--medium-blue, #5b9ab5);
  box-shadow: 0 0 0 3px rgba(91,154,181,0.15);
}

/* B2 — Timer button: ghost style with accent border */
.task-detail-timer-button {
  border: 1px solid var(--medium-blue, #5b9ab5) !important;
  color: var(--medium-blue, #1a6a8c) !important;
  background: transparent !important;
  font-weight: 700;
  white-space: nowrap;
}
.task-detail-timer-button:hover {
  background: var(--medium-blue, #5b9ab5) !important;
  color: #fff !important;
}

/* B3 — Section headers: awork-style small-caps labels */
.awork-task-detail .td-section-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #7a9aaa !important;
  margin: 0 0 6px !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
.td-section-count {
  background: #e8f1f6;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  color: #4a7088;
  letter-spacing: 0;
  text-transform: none;
}

/* B4 — Fact cards: compact but prominent, directly below title */
.awork-task-detail .project-task-bottom-facts {
  border-top: none;
  padding-top: 0;
  gap: 6px;
}
.awork-task-detail .project-task-fact {
  padding: 8px 10px;
  min-height: 56px;
}
.awork-task-detail .project-task-fact small {
  text-transform: uppercase;
  font-weight: 700;
}
.awork-task-detail .project-task-fact strong {
  margin-top: 2px;
  display: block;
}

/* B5 — Property strip selects: visible light border always */
.task-prop-select {
  border: 1px solid #dce9f2 !important;
  border-radius: 6px !important;
  background: #fafcfe !important;
  padding: 4px 8px !important;
  color: #1d3c50;
}
.task-prop-select:hover,
.task-prop-select:focus {
  border-color: var(--medium-blue, #5b9ab5) !important;
  background: #fff !important;
}

/* B6 — Tag input: visible border */
.task-prop-input {
  border: 1px solid #dce9f2 !important;
  border-radius: 6px !important;
  background: #fafcfe !important;
  padding: 4px 8px !important;
}
.task-prop-input:focus {
  border-color: var(--medium-blue, #5b9ab5) !important;
}

/* B7 — Checklist / subtask inline-add form */
.task-inline-add-form {
  margin-top: 6px;
}
.task-inline-add-form input {
  width: 100%;
  border: 1px dashed #c7dced;
  border-radius: 8px;
  padding: 7px 10px;
  background: rgba(242, 249, 254, 0.5);
  color: #7a93a1;
  font-style: italic;
  font-size: 13px;
  transition: border-color .12s, background .12s;
}
.task-inline-add-form input:focus {
  border-color: var(--medium-blue, #5b9ab5);
  border-style: solid;
  background: #fff;
  color: #1d3c50;
  font-style: normal;
  outline: none;
}

/* B8 — Section description textarea */
.awork-task-detail textarea[data-project-task-detail-field="description"] {
  border: 1px solid #dce9f2;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fafcfe;
  font-size: 13px;
  line-height: 1.55;
  transition: border-color .12s;
  min-height: 72px;
}
.awork-task-detail textarea[data-project-task-detail-field="description"]:focus {
  border-color: var(--medium-blue, #5b9ab5);
  outline: none;
}

/* B9 — Comments: avatar + bubble layout */
.project-task-comment {
  display: flex;
  gap: 10px;
  background: none;
  padding: 6px 0;
  border-radius: 0;
  border-bottom: 1px solid #edf4f8;
}
.project-task-comment:last-child { border-bottom: 0; }
.comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--medium-blue, #5b9ab5), var(--dark-blue, #2d6680));
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.comment-body-wrap {
  flex: 1;
  min-width: 0;
}
.comment-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.comment-author {
  font-size: 12px;
  font-weight: 700;
  color: #1d3c50;
}
.comment-time {
  font-size: 11px;
  color: #7a93a1;
}
.comment-delete-btn {
  margin-left: auto;
  opacity: 0;
  transition: opacity .12s;
}
.project-task-comment:hover .comment-delete-btn { opacity: 1; }
.comment-body {
  font-size: 13px;
  line-height: 1.5;
  color: #2a4558;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* B10 — Activity log: compact, muted */
.task-activity-list li {
  font-size: 12px !important;
  padding: 3px 0 !important;
  border-bottom: 1px solid #f0f5f8;
  color: #4a6779;
}
.task-activity-list li:last-child { border-bottom: 0; }
.task-activity-list time {
  font-size: 10px !important;
  color: #93adb9 !important;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Zeiteintrag-Einträge in Aktivität: leicht hervorgehoben */
.task-activity-list li.activity-time-entry {
  color: #2e6a8a !important;
}
.task-activity-list li.activity-time-entry span { font-style: normal; }

/* B11 — Multi-select control in property strip: compact */
.task-prop-control .task-multi-select > summary {
  padding: 4px 8px;
  font-size: 13px;
}
.task-prop-control .task-multi-select {
  background: var(--color-surface-soft);
}

/* B12 — Checklist items: cleaner */
.project-task-check-row {
  border-color: #e8f0f6;
  border-radius: 8px;
  padding: 5px 8px;
  background: #fafcfe;
}
.project-task-check-row.is-done span {
  color: #8aa3af;
  text-decoration: line-through;
  opacity: 0.75;
}

/* B13 — Detail panel: tighter gap between sections */
.awork-task-detail { gap: 10px !important; }
.awork-task-detail .project-task-section { padding-top: 10px; }

/* B14 — "Weitere Felder" collapsible toggle */
.task-extra-details-toggle {
  color: #7a9aaa !important;
}

/* ═══════════════════════════════════════════
   C. RESPONSIVE adjustments
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
  .awork-project-task-layout.is-split {
    grid-template-columns: 1fr !important;
  }
  .awork-task-detail .project-task-detail-title-row input {
    font-size: 18px !important;
  }
}

/* ── v197: Aufgaben-Detail Redesign ── */

/* 1 ─ Topline: alle Buttons icon-only, uniform */
.task-detail-toolbar { gap: 2px !important; }
.task-detail-toolbar .ghost-button.icon-only-button {
  width: 30px; height: 30px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
}
.task-detail-archive-btn { color: var(--color-danger, #c0392b) !important; opacity: 0.7; }
.task-detail-archive-btn:hover { opacity: 1; background: #fbeef4 !important; }
.task-detail-close-btn { margin-left: 4px; border-left: 1px solid #d7e6ee; padding-left: 6px !important; border-radius: 0 7px 7px 0 !important; }

/* 2 ─ Property strip */
.task-detail-props {
  display: flex; flex-direction: column; gap: 2px;
  margin: 8px 0 2px;
}
.task-prop-row {
  display: grid; grid-template-columns: 90px 1fr; align-items: center;
  min-height: 30px; gap: 8px;
}
.task-prop-label {
  font-size: 11px; font-weight: 600; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.task-prop-select {
  max-width: 200px; font-size: 13px; padding: 3px 6px;
  border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.task-prop-select:hover, .task-prop-select:focus {
  border-color: var(--medium-blue, #5b9ab5); background: #f4f8fb; outline: none;
}
.task-prop-input {
  width: 100%; max-width: 280px; font-size: 13px; padding: 3px 6px;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  transition: border-color .12s, background .12s;
}
.task-prop-input:hover, .task-prop-input:focus {
  border-color: var(--medium-blue, #5b9ab5); background: #f4f8fb; outline: none;
}
.task-prop-control { min-width: 0; }
.task-prop-control .task-multi-select { border: 1px solid transparent; border-radius: 6px; }
.task-prop-control .task-multi-select:hover { border-color: var(--medium-blue, #5b9ab5); background: var(--color-surface-muted); }

/* 3 ─ Fact cards: "neutral" state + inline editing */
.project-task-fact.neutral { background: #f4f8fb; }
.task-fact-editable { cursor: pointer; transition: box-shadow .12s; }
.task-fact-editable:hover { box-shadow: 0 0 0 2px var(--medium-blue, #5b9ab5) inset; }
.task-fact-editable .task-fact-input {
  display: none; width: 100%; border: none; background: transparent; font-weight: 700; color: #203e50;
  padding: 0; margin: 0; outline: none;
}
.task-fact-editable.is-editing .task-fact-display { display: none; }
.task-fact-editable.is-editing .task-fact-input { display: block; }
.task-fact-editable.is-editing { box-shadow: 0 0 0 2px var(--medium-blue, #5b9ab5) inset !important; }

/* v201: Stunden-Eingabe-Wrap (Geplant) */
.task-fact-hours-wrap {
  align-items: center;
  gap: 3px;
  width: 100%;
}
.task-fact-hours-wrap .task-fact-hours-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  font-weight: 700;
  color: #203e50;
  padding: 0;
  margin: 0;
  outline: none;
}
.task-fact-unit {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: #51626e;
  line-height: 1;
}
/* is-editing: show as flex row */
.task-fact-editable.is-editing .task-fact-hours-wrap { display: flex; }
.task-fact-editable:not(.is-editing) .task-fact-hours-wrap { display: none; }
.task-fact-editable::after {
  content: "✎"; font-size: 10px; color: #51626e; position: absolute;
  top: 5px; right: 6px; opacity: 0; transition: opacity .12s;
}
.project-task-fact { position: relative; }
.task-fact-editable:hover::after { opacity: 1; }

/* 4 ─ Extra details collapsible */
.task-extra-details { border-top: 1px solid #d7e6ee; padding-top: 10px; }
.task-extra-details-toggle {
  cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--color-text-muted); letter-spacing: .04em; text-transform: uppercase;
  list-style: none; display: flex; align-items: center; gap: 6px; user-select: none;
}
.task-extra-details-toggle::before { content: "▶"; font-size: 9px; transition: transform .15s; }
.task-extra-details[open] > .task-extra-details-toggle::before { transform: rotate(90deg); }
.task-extra-details-toggle::-webkit-details-marker { display: none; }

[data-theme="dark"] .task-prop-select,
[data-theme="dark"] .task-prop-input { color: inherit; }
[data-theme="dark"] .task-prop-select:hover,
[data-theme="dark"] .task-prop-select:focus,
[data-theme="dark"] .task-prop-input:hover,
[data-theme="dark"] .task-prop-input:focus { background: #1a2e3e; }
[data-theme="dark"] .task-extra-details { border-top-color: #243647; }
[data-theme="dark"] .project-task-fact.neutral { background: #1a2e3e; }

/* ── v202: Inline Comment System — Drag-Drop, @Mentions, Reactions, Edit ── */

/* Comment input wrap + drag-over zone */
.comment-input-wrap {
  position: relative;
  border: 1.5px solid #d7e6ee;
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.comment-input-wrap:focus-within {
  border-color: var(--medium-blue, #2c9ec9);
  box-shadow: 0 0 0 3px rgba(44,158,201,0.10);
}
.comment-input-wrap.is-drag-over {
  border-color: var(--medium-blue, #2c9ec9);
  border-style: dashed;
  background: rgba(44,158,201,0.04);
  box-shadow: 0 0 0 3px rgba(44,158,201,0.13);
}
.project-task-comment-input {
  width: 100%;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  resize: vertical;
  min-height: 52px;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 9px;
  box-shadow: none !important;
}
.project-task-comment-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

/* @ mention dropdown */
.comment-mention-dropdown {
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  min-width: 200px;
  max-width: 280px;
  background: #fff;
  border: 1px solid #d0e4ee;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(9,50,65,0.13);
  z-index: 200;
  overflow: hidden;
}
.comment-mention-dropdown.hidden { display: none; }
.comment-mention-option {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 12px;
  text-align: left;
  font-size: 13px;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.comment-mention-option:hover,
.comment-mention-option.is-hovered {
  background: rgba(44,158,201,0.09);
}

/* Pending attachment chips */
.comment-pending-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Attach label button */
.comment-attach-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}

/* Comment list items — enhanced */
.project-task-comment { align-items: flex-start; }
.comment-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.12s;
}
.project-task-comment:hover .comment-actions { opacity: 1; }
.comment-edit-btn { font-style: normal; }

/* Edit form (hidden by default) */
.comment-edit-form {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}
.comment-edit-form.hidden { display: none; }
.comment-body.hidden { display: none; }
.comment-edit-textarea {
  width: 100%;
  padding: 6px 9px;
  border: 1.5px solid var(--medium-blue, #2c9ec9);
  border-radius: 8px;
  font-size: 13px;
  resize: vertical;
  min-height: 60px;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(44,158,201,0.10);
  outline: none;
}
.comment-edited-label {
  font-size: 10px;
  color: #8aabba;
  font-style: italic;
  margin-left: 4px;
}

/* Emoji reactions row */
.comment-reactions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
}
.inline-reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #d7e6ee;
  background: #f4f8fb;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
  line-height: 1.4;
  user-select: none;
}
.inline-reaction-btn:hover {
  background: rgba(44,158,201,0.10);
  border-color: rgba(44,158,201,0.35);
  transform: scale(1.08);
}
.inline-reaction-btn.is-reacted {
  background: rgba(44,158,201,0.15);
  border-color: rgba(44,158,201,0.45);
  font-weight: 700;
}
.reaction-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--dark-blue);
  min-width: 12px;
}

/* Image attachments inside comments */
.comment-attachments-display {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.inline-comment-img-wrap {
  max-width: 260px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #d7e6ee;
  cursor: pointer;
}
.inline-comment-img {
  display: block;
  max-width: 100%;
  max-height: 180px;
  object-fit: cover;
}

/* ── v200: Projekt KPI Cards — inline editierbar + Aufgaben-Klick ──────── */

/* Editierbare Card: Hover-Highlight + Stift-Icon */
.kpi-editable {
  cursor: pointer;
  position: relative;
  transition: box-shadow 0.15s;
}
.kpi-editable:hover {
  box-shadow: 0 0 0 2px rgba(41, 123, 150, 0.28), 0 2px 8px rgba(41,123,150,0.08);
}
.kpi-edit-hint {
  font-size: 10px;
  font-style: normal;
  opacity: 0;
  color: var(--medium-blue, #2c9ec9);
  margin-left: 3px;
  transition: opacity 0.15s;
  pointer-events: none;
}
.kpi-editable:hover .kpi-edit-hint { opacity: 0.7; }

/* Standard: Input versteckt, Anzeigewert sichtbar */
.kpi-editable .kpi-input    { display: none; }
.kpi-editable .kpi-display-val { display: block; }

/* is-editing: Input zeigen, Anzeigewert verbergen */
.kpi-editable.is-editing .kpi-display-val { display: none; }
.kpi-editable.is-editing .kpi-input {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 4px 0 2px;
}
.kpi-editable.is-editing .kpi-input input,
.kpi-editable.is-editing input.kpi-input {
  width: 100%;
  padding: 5px 8px;
  border: 1.5px solid var(--medium-blue, #2c9ec9);
  border-radius: 7px;
  font-size: 15px;
  font-weight: 700;
  color: var(--dark-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(44,158,201,0.12);
  outline: none;
}
.kpi-input-budget { flex-wrap: nowrap; }
.kpi-input-budget input { flex: 1 1 auto; min-width: 0; }
.kpi-input-currency { font-size: 15px; font-weight: 700; color: var(--dark-blue); flex-shrink: 0; }

/* Aufgaben-Card: klickbar wie ein Button */
.kpi-clickable {
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.12s;
}
.kpi-clickable:hover {
  box-shadow: 0 0 0 2px rgba(41, 123, 150, 0.28), 0 4px 12px rgba(41,123,150,0.10);
  transform: translateY(-1px);
}
.kpi-clickable:active { transform: translateY(0); }

/* ── v565: Aufgaben-Filter Chips + Suche — Chips wrappen auf 2 Zeilen statt
   abgeschnitten/unsichtbar-gescrollt zu werden. Buttons dürfen nie
   abgeschnitten wirken (v508s "eine Zeile, horizontal scrollen" hatte genau
   das Problem: die Scrollbar war unsichtbar, daher wirkte der letzte Chip
   wie abgehackt). ──── */

/* Toolbar-Primary: Chips + Suche nebeneinander, bei Platzmangel bricht die
   Suche in eine eigene Zeile um (die Chips selbst wrappen intern, s.u.). */
#view-aufgaben .task-toolbar-primary {
  flex-wrap: wrap !important;
  align-items: center !important;
  overflow: visible !important;
  gap: 8px !important;
}

/* Chips-Container: wrappt auf so viele Zeilen wie nötig, kein Scrollen mehr. */
#view-aufgaben .task-quick-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  flex: 1 1 auto !important;
  min-width: 220px !important;
  gap: 5px !important;
  overflow-x: visible !important;
}

/* Einzelner Chip: nicht stauchen, Text nie abschneiden */
#view-aufgaben .task-filter-chip {
  font-size: 12px !important;
  padding: 4px 11px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Suche: etwas schmaler als vorher, damit für die Chips mehr Platz bleibt,
   bevor überhaupt umgebrochen werden muss. */
#view-aufgaben .task-search-input {
  flex: 0 0 200px !important;
  max-width: 220px !important;
  min-width: 140px !important;
  height: 32px !important;
}

/* Auf schmalen Viewports: Suche über volle Breite unter den Chips. Zusätzlich
   muss die ÄUSSERE Toolbar-Zeile (.task-toolbar, Primary + Icon-Toolbar
   nebeneinander) selbst umbrechen dürfen — sonst quetscht die (nicht
   schrumpfende) Icon-Toolbar die Primary-Sektion auf 0 Breite zusammen,
   und Chips + Suche verschwinden komplett statt nur umzubrechen. */
@media (max-width: 720px) {
  #view-aufgaben .task-toolbar {
    flex-wrap: wrap !important;
  }
  #view-aufgaben .task-toolbar-primary {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #view-aufgaben .task-quick-filters {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #view-aufgaben .task-search-input {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* Aufgaben-Detailpanel: eigenes overflow:auto + position:sticky erzeugte
   eine zweite, direkt neben der Seiten-Scrollleiste liegende Scrollleiste
   (wirkte wie zwei parallele Balken). Das Panel scrollt jetzt mit der
   restlichen Seite statt einen eigenen inneren Scroll-Container zu öffnen. */
#view-aufgaben .project-task-detail-panel {
  position: static !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ── v236: Presence Calendar Picker Modal ────────────────────────────── */
.dppp-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dppp-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  padding: 22px 24px 18px;
  width: 320px;
  max-width: 95vw;
}
.dppp-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark-blue, #1a3c5e);
  margin-bottom: 6px;
}
.dppp-hint {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
}
.dppp-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--medium-blue, #2c9ec9);
  flex-shrink: 0;
}
.dppp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dppp-nav {
  font-size: 20px;
  line-height: 1;
  padding: 2px 8px;
  min-width: 32px;
}
.dppp-month-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-blue, #1a3c5e);
  text-transform: capitalize;
}
.dppp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.dppp-weekdays span {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  padding: 2px 0;
}
.dppp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dppp-day {
  position: relative;
  text-align: center;
  font-size: 12px;
  padding: 5px 2px;
  border-radius: 6px;
  cursor: pointer;
  color: #334155;
  transition: background 0.12s;
}
.dppp-day:hover:not(.empty) {
  background: #e0f2fe;
}
.dppp-day.empty {
  cursor: default;
}
.dppp-day.is-today {
  font-weight: 700;
  color: var(--medium-blue, #2c9ec9);
}
.dppp-day.is-selected {
  background: var(--medium-blue, #2c9ec9);
  color: #fff;
  font-weight: 700;
}
.dppp-day.is-selected::after {
  background: #fff;
}
/* Blue dot for presence days */
.dppp-day.has-presence::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--medium-blue, #2c9ec9);
}
.dppp-day.is-selected.has-presence::after {
  background: rgba(255,255,255,0.8);
}
.dppp-selected-label {
  font-size: 12px;
  color: #475569;
  margin: 10px 0 4px;
  min-height: 18px;
}
.dppp-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  border-top: 1px solid #e2e8f0;
  padding-top: 12px;
}

/* ── v246 ─────────────────────────────────────────────────────── */

/* Büropräsenz badge in Meine Woche day cards */
.week-presence-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(44, 158, 201, 0.1);
  border: 1px solid rgba(44, 158, 201, 0.28);
  color: var(--dark-blue);
  font-size: 11px;
  font-weight: 600;
  cursor: grab;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  transition: background 120ms, box-shadow 120ms;
  user-select: none;
}

.week-presence-badge:hover {
  background: rgba(44, 158, 201, 0.18);
  box-shadow: 0 2px 6px rgba(30, 81, 103, 0.12);
}

.week-presence-badge:active {
  cursor: grabbing;
}

/* Drag-blocked state for week day drop targets */
[data-week-day].is-drag-blocked {
  border-color: var(--color-danger, #a83d50) !important;
  background: rgba(168, 61, 80, 0.06) !important;
  cursor: not-allowed;
}

/* Week entry row: entry button + pencil edit button side by side */
.zeiten-week-entry-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  position: relative;
}

.zeiten-week-entry-row .zeiten-week-entry {
  flex: 1 1 0;
  min-width: 0;
}

.week-entry-edit-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms, background 150ms, color 150ms;
}

.zeiten-week-entry-row:hover .week-entry-edit-btn,
.zeiten-week-entry-row:focus-within .week-entry-edit-btn {
  opacity: 1;
}

.week-entry-edit-btn:hover {
  background: var(--color-surface-muted);
  color: var(--dark-blue);
  border-color: var(--color-border);
}

.week-entry-edit-btn svg {
  width: 14px;
  height: 14px;
}

.zeiten-week-attendance-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-left: 4px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  vertical-align: middle;
}

.zeiten-week-attendance-edit-btn:hover {
  background: var(--color-surface-muted);
  color: var(--dark-blue);
  border-color: var(--color-border);
}

.zeiten-week-attendance-edit-btn svg { width: 11px; height: 11px; }

/* Büropräsenz dot in Mein Monat day header */
.monat-presence-dot {
  font-size: 11px;
  line-height: 1;
  opacity: 0.8;
  flex-shrink: 0;
}

/* Feiertage in Mein Monat */
.monat-day.is-holiday {
  background: rgba(241, 196, 15, 0.08);
}
.monat-day.is-holiday .monat-day-num {
  color: #b7860c;
}
.monat-day-holiday {
  font-size: 10px;
  line-height: 1;
  flex-shrink: 0;
}
.monat-holiday-name {
  margin: 0 0 3px;
  font-size: 9px;
  font-weight: 700;
  color: #b7860c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Archive smooth expand wrapper */
.day-plan-archive-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms ease;
  overflow: hidden;
}

.day-plan-archive-wrap.is-open {
  grid-template-rows: 1fr;
}

.day-plan-archive-wrap > ul {
  min-height: 0;
  overflow: hidden;
}

/* ── v247 Docs Redesign ─────────────────────────────────────── */

/* Search */
.docs-search-wrap {
  position: relative;
  padding: 0 12px;
  margin-bottom: 10px;
}

.docs-search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  z-index: 1;
}

.docs-search-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 7px 10px 7px 38px;
  padding-left: 38px !important; /* override high-specificity input:not([type=...]) rule */
  min-height: 0 !important;     /* same: prevent 42px override */
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-soft);
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
  box-sizing: border-box;
  transition: border-color 120ms, box-shadow 120ms;
}

.docs-search-input:focus {
  outline: none;
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 1px var(--color-focus-ring);
}

/* Context tabs */
.docs-context-tabs {
  display: flex;
  padding: 0 12px 10px;
  gap: 4px;
}

.docs-context-tab {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  text-align: center;
}

.docs-context-tab:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.docs-context-tab.is-active {
  background: var(--medium-blue);
  border-color: var(--medium-blue);
  color: #fff;
}

/* List toolbar */
.docs-list-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 8px;
}

.docs-sort-select {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-soft);
  font: inherit;
  font-size: 12px;
  color: var(--color-text);
}

/* Doc count */
.docs-list-count {
  padding: 0 14px 4px;
  margin: 0;
  font-size: 11px;
  color: var(--doc-leise);
}

/* Doc list */
.docs-doc-list {
  list-style: none;
  margin: 0;
  padding: 0 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

/* Group headers */
.docs-group-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 8px 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  list-style: none;
  user-select: none;
}

/* Doc card */
.doc-card {
  list-style: none;
  position: relative;
  border-radius: 10px;
  overflow: visible; /* allow hover-actions to overlay without clipping */
  transition: background 120ms;
}

.doc-card:hover {
  background: var(--color-surface-muted);
}

.doc-card.is-selected {
  background: var(--color-primary-softer);
  border: 1px solid var(--color-primary-soft);
}

.doc-card-body {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--color-text);
  min-width: 0;
}

.doc-card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.doc-card.is-selected .doc-card-icon {
  background: var(--color-primary-soft);
  border-color: var(--medium-blue);
  color: var(--medium-blue);
}

.doc-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.doc-card-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-card-meta {
  display: block;
  font-size: 11px;
  color: var(--doc-leise);
}

.doc-card-badge {
  color: var(--doc-warn);
}

/* Status & type badges */
.doc-status-badge,
.doc-type-badge {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.doc-status-badge.is-draft {
  background: var(--color-surface-muted);
  color: var(--doc-leise);
  border: 1px solid var(--color-border);
}

.doc-status-badge.is-review {
  background: var(--color-warning-soft);
  color: var(--doc-warn);
  border: 1px solid rgba(176, 120, 0, 0.2);
}

.doc-status-badge.is-done {
  background: var(--color-success-soft);
  color: var(--color-success);
  border: 1px solid rgba(26, 140, 106, 0.2);
}

.doc-type-badge {
  background: var(--color-surface-muted);
  color: var(--doc-leise);
  border: 1px solid var(--color-border);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Doc card hover actions — absolute overlay on the right, no extra card height */
.doc-card-actions {
  display: none;
  align-items: center;
  gap: 3px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-surface-muted);
  border-radius: 8px;
  padding: 3px 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

.doc-card:hover .doc-card-actions,
.doc-card.is-selected .doc-card-actions {
  display: flex;
}

/* Icon-only action buttons inside doc card */
.doc-card-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 100ms, color 100ms;
  padding: 0;
}

.doc-card-action-btn:hover {
  background: var(--color-surface-soft);
  color: var(--color-text-strong);
}

.doc-card-action-btn.danger:hover {
  background: rgba(220, 50, 50, 0.1);
  color: var(--color-danger, #c0392b);
}

/* Docs empty state */
.docs-empty-item {
  list-style: none;
  padding: 20px 12px;
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
}

/* Editor: status select */
.doc-status-select {
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 120ms;
}

.doc-status-select:focus {
  outline: none;
  border-color: var(--medium-blue);
}

/* Editor: markdown copy button */
[data-doc-copy-markdown] {
  font-size: 12px;
  white-space: nowrap;
}

/* Editor: overflow menu */
.doc-overflow-wrap {
  position: relative;
}

.doc-overflow-btn {
  padding: 4px 8px;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 2px;
}

.doc-overflow-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 200;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(30, 81, 103, 0.14);
  min-width: 200px;
  overflow: hidden;
}

.doc-overflow-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  transition: background 120ms;
}

.doc-overflow-item:hover {
  background: var(--color-surface-muted);
}

/* File attachment shell (non-editable files) */
.doc-file-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
}

.doc-file-name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-strong);
}

.doc-file-preview-area {
  flex: 1;
  padding: 24px 32px;
  overflow: auto;
}

.doc-file-preview-img {
  display: flex;
  justify-content: center;
}

.doc-file-preview-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  max-height: 520px;
  overflow: auto;
}

.doc-file-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

.doc-file-convert-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 32px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-muted);
  background: var(--color-surface-soft);
}

/* ── Doc navigation widget (sidebar) ────────────────────────────── */
.doc-nav-widget {
  margin: 8px 12px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--color-surface-soft, #f7fbfd);
  overflow: hidden;
}

.doc-nav-widget-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--doc-leise);
  border-bottom: 1px solid var(--line);
  background: var(--color-surface);
}

.doc-nav-list {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  max-height: 200px;
  overflow-y: auto;
}

.doc-nav-item {
  display: block;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-primary-hover);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px 12px;
  transition: background 0.1s, color 0.1s;
}

.doc-nav-item:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.doc-nav-h1 { font-weight: 700; }
.doc-nav-h2 { font-weight: 600; }
.doc-nav-h3,
.doc-nav-h4,
.doc-nav-h5 { color: var(--doc-leise); font-weight: 400; }

/* ── Doc share modal ─────────────────────────────────────────────── */
.doc-share-modal {
  max-width: 540px;
  width: min(540px, calc(100vw - 28px));
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

.doc-share-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 18px;
}

.doc-share-option {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.doc-share-option-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-surface-soft);
  border-bottom: 1px solid var(--line);
}

.doc-share-option-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.doc-share-option-head strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}

.doc-share-option-head .muted {
  font-size: 12px;
  margin-top: 2px;
}

.doc-share-option-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc-share-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.doc-share-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--doc-leise);
}

.doc-share-select,
.doc-share-date-input {
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--color-surface-soft);
  color: var(--color-text);
  width: 100%;
  min-height: unset;
  box-sizing: border-box;
}

.doc-share-link-result {
  display: flex;
  gap: 8px;
  align-items: center;
}

.doc-share-link-output {
  flex: 1;
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--color-surface-soft);
  color: var(--color-text);
  min-width: 0;
  min-height: unset;
}

.doc-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ── Inline comment highlight mark ───────────────────────────────── */
/* JAS-175: sanfte Tönung in der gewählten Notizfarbe statt Warngelb. Das Doc-Blatt
   ist in beiden Modi hell, deshalb die festen Papier-Werte und eine feste dunkle
   Schrift (der Browser-Standard für <mark> wäre schwarz auf Gelb). */
.doc-comment-mark {
  background: var(--notiz-papier-markierung);
  color: var(--kf-dark-grey);
  border-bottom: 2px solid var(--notiz-papier-linie);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.12s;
}

.doc-comment-mark:hover,
.doc-comment-mark.is-active {
  background: var(--notiz-papier-markierung-stark);
}

/* ── Floating "add comment" button ───────────────────────────────── */
/* ID specificity (100) beats .hidden (10) — must override explicitly */
#docInlineCommentBtn.hidden,
#docInlineCommentPopup.hidden {
  display: none !important;
}

#docInlineCommentBtn {
  position: fixed;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--dark-blue, #112837);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  pointer-events: auto;
  transition: transform 0.1s, background 0.1s;
}

#docInlineCommentBtn:hover {
  background: var(--medium-blue);
  transform: translateY(-1px);
}

/* ── Inline comment popup ────────────────────────────────────────── */
#docInlineCommentPopup {
  position: fixed;
  z-index: 500;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(17, 40, 55, 0.14);
  padding: 14px;
  width: 290px;
}

.doc-comment-popup-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--doc-leise);
  margin-bottom: 6px;
}

.doc-comment-popup-quote {
  font-size: 12px;
  font-style: italic;
  color: var(--doc-leise);
  background: var(--color-surface-soft);
  border-left: 3px solid var(--color-primary);
  padding: 4px 8px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#docInlineCommentText {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-surface-soft);
  box-sizing: border-box;
  margin-bottom: 8px;
}

#docInlineCommentText:focus {
  outline: none;
  border-color: var(--medium-blue);
}

.doc-comment-popup-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* ── @ mention dropdown inside comment popup ─────────────────────── */
.doc-mention-dropdown {
  position: absolute;
  z-index: 600;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(17, 40, 55, 0.14);
  overflow: hidden;
  max-height: 200px;
  overflow-y: auto;
}

.doc-mention-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.1s;
}

.doc-mention-item:hover {
  background: var(--color-primary-soft);
}

/* ── Comment widget (sidebar) ────────────────────────────────────── */
.doc-comment-widget {
  margin: 8px 12px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--color-surface-soft, #f7fbfd);
  overflow: hidden;
}

.doc-comment-widget-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--doc-leise);
  border-bottom: 1px solid var(--line);
  background: var(--color-surface);
}

.doc-comment-list-inline {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  overflow-y: auto;
}

.doc-comment-inline-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s;
}

.doc-comment-inline-item:last-child {
  border-bottom: none;
}

.doc-comment-inline-item:hover {
  background: var(--color-primary-soft);
}

/* „Erledigt“ steht als Text im Eintrag; die Deckkraft zu senken würde die Schrift
   unter die Lesbarkeitsgrenze drücken. Stattdessen: durchgestrichen und leise. */
.doc-comment-inline-item.is-resolved .doc-comment-inline-text {
  color: var(--doc-leise);
  text-decoration: line-through;
}

.doc-comment-inline-quote {
  font-size: 11px;
  font-style: italic;
  color: var(--doc-leise);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.doc-comment-inline-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-comment-inline-meta {
  font-size: 10px;
  color: var(--doc-leise);
  margin-top: 2px;
}

/* Nav section labels (pages vs headings) */
.doc-nav-section-label {
  padding: 5px 12px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--doc-leise);
  background: var(--color-surface-muted);
  border-top: 1px solid var(--line);
}

.doc-nav-page {
  color: var(--doc-leise);
  font-style: italic;
}

/* ── Customer combobox (project modal) ───────────────────────────────────── */
.project-customer-combobox-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.project-customer-combobox {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.project-customer-search-input {
  width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 8px;
  font-size: 14px;
  background: var(--color-surface, #fff);
  color: var(--color-text, var(--dark-blue));
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.project-customer-search-input:focus {
  border-color: var(--color-primary, var(--teal));
  box-shadow: 0 0 0 3px rgba(26, 156, 197, 0.12);
}

.project-customer-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 700;
  background: #fff;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(17, 40, 55, 0.14);
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}

.project-customer-dropdown.hidden {
  display: none;
}

.project-customer-option {
  display: block;
  width: 100%;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dark-blue);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.project-customer-option:hover {
  background: rgba(26, 156, 197, 0.09);
}

.project-customer-no-result {
  color: var(--muted-blue);
  font-style: italic;
  cursor: default;
}

.project-customer-new-opt {
  border-top: 1px solid var(--line);
  color: var(--teal);
  font-weight: 600;
}

.project-customer-new-opt:hover {
  background: rgba(26, 156, 197, 0.12);
}

/* ── Universal task-create modal ─────────────────────────────────────────── */
.task-create-modal-card {
  width: 540px;
  max-width: calc(100vw - 32px);
}

.task-create-form {
  display: grid;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px) 0 0;
}

.task-create-title-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 10px;
  background: var(--color-surface, #fff);
  color: var(--color-text, var(--dark-blue));
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.task-create-title-input:focus {
  border-color: var(--color-primary, var(--teal));
  box-shadow: 0 0 0 3px rgba(26, 156, 197, 0.12);
}

.task-create-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--line);
  margin-top: var(--space-2, 8px);
}

/* ── Task Effort Chart (Aufgaben: Erfasst vs. Geplant) ───────────────────── */
.tec-chart-wrap {
  padding: 12px 18px 16px;
}

.tec-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tec-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line, #dce8ef);
  margin-bottom: 4px;
}

.tec-leg-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted-blue, #5a7a8a);
  font-weight: 500;
}

.tec-leg-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}

.tec-leg-dash {
  display: inline-block;
  width: 14px;
  height: 2px;
  background: #1e5167;
  border-radius: 1px;
  flex-shrink: 0;
}

.tec-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.tec-row {
  display: grid;
  grid-template-columns: 160px 1fr auto auto;
  align-items: center;
  gap: 10px;
  min-height: 26px;
}

.tec-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--dark-blue, #1a3444);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tec-bars {
  position: relative;
  height: 22px;
  background: #f0f5f9;
  border-radius: 6px;
  overflow: hidden;
}

.tec-bar-plan {
  position: absolute;
  inset: 0 auto 0 0;
  background: #d6e9f3;
  border-radius: 6px;
  display: block;
}

.tec-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 6px;
  display: block;
  transition: width 0.25s ease;
}

.tec-target-line {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: #1e5167;
  border-radius: 1px;
  display: block;
  transform: translateX(-1px);
}

.tec-val {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--dark-blue, #1a3444);
}

.tec-val strong {
  font-weight: 700;
}

.tec-val-sep,
.tec-val-plan {
  color: var(--muted-blue, #6f8997);
  font-size: 11px;
}

.tec-pct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: #e0f0f8;
  color: #2c7a9a;
}

.tec-pct.is-none {
  background: transparent;
  color: var(--muted-blue, #8eaab8);
  font-weight: 400;
}

.tec-pct.is-near {
  background: #fdf3d8;
  color: #b86e00;
}

.tec-pct.is-over {
  background: #fde8e8;
  color: #c0392b;
}

@media (max-width: 600px) {
  .tec-row {
    grid-template-columns: 100px 1fr auto auto;
    gap: 6px;
  }
  .tec-label { font-size: 12px; }
}

/* ── Task billable toggle ─────────────────────────────────────────────── */
.task-billable-toggle {
  display: flex;
  align-items: center;
  cursor: default;
}

.task-billable-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 20px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  line-height: 1.4;
}

.task-billable-btn.is-billable {
  background: rgba(46, 204, 113, 0.1);
  border-color: rgba(46, 204, 113, 0.4);
  color: #1a7a4a;
}

.task-billable-btn.is-billable:hover {
  background: rgba(46, 204, 113, 0.18);
}

.task-billable-btn.is-non-billable {
  background: rgba(149, 165, 166, 0.1);
  border-color: rgba(149, 165, 166, 0.35);
  color: #666;
}

.task-billable-btn.is-non-billable:hover {
  background: rgba(149, 165, 166, 0.18);
}

[data-theme="dark"] .task-billable-btn.is-billable {
  background: rgba(46, 204, 113, 0.15);
  border-color: rgba(46, 204, 113, 0.3);
  color: #5ddb8e;
}

[data-theme="dark"] .task-billable-btn.is-non-billable {
  color: #aaa;
}

/* ── Zeiten-Tab: Abrechenbar-Badge in Zeiteinträgen ────────────────────── */
.time-entry-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 4px;
  line-height: 1;
}
.time-entry-badge.is-billable {
  background: rgba(46, 204, 113, 0.15);
  color: #1a7a4a;
  border: 1px solid rgba(46, 204, 113, 0.35);
}
.time-entry-badge.is-non-billable {
  background: rgba(149, 165, 166, 0.1);
  color: #888;
  border: 1px solid rgba(149, 165, 166, 0.3);
}
[data-theme="dark"] .time-entry-badge.is-billable {
  background: rgba(46, 204, 113, 0.18);
  color: #5ddb8e;
  border-color: rgba(46, 204, 113, 0.3);
}
[data-theme="dark"] .time-entry-badge.is-non-billable {
  color: #aaa;
}
.text-nowrap { white-space: nowrap; }

/* ── Textarea Auto-Resize ───────────────────────────────────────────────── */
textarea[data-autoresize] {
  resize: none;
  overflow: hidden;
  transition: height 80ms ease;
  min-height: 72px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * v292 — Health Badges, Profitability, Templates, Sync, Push, PIN, RBAC
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Project Health Badge */
.health-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  vertical-align: middle;
  border: 1px solid transparent;
  cursor: help;
}
.health-badge.is-sm { padding: 1px 6px; font-size: 10px; }
.health-badge.is-md { padding: 2px 8px; font-size: 11px; }
.health-badge.is-lg { padding: 3px 10px; font-size: 12px; }
.health-badge .health-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
}
.health-badge.is-green { color: #14705a; background: #dcfce7; border-color: #86efac; }
.health-badge.is-yellow { color: #8a5f00; background: #fef9c3; border-color: #fde047; }
.health-badge.is-red { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.health-badge.is-neutral { color: #64748b; background: #f1f5f9; border-color: #cbd5e1; }
.health-badge.is-archived { color: #51626e; background: #f3f4f6; border-color: #d1d5db; }

/* Customer Profitability Panel */
.customer-profitability-panel { margin-top: 16px; }
.customer-profitability-body { padding: 0 8px; overflow-x: auto; }
.profit-kpis {
  margin-bottom: 16px;
}
.profit-table { width: 100%; font-size: 13px; }
.profit-table th { padding: 8px; border-bottom: 1px solid #e5e7eb; }
.profit-table td { padding: 8px; border-bottom: 1px solid #f1f5f9; }
.profit-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.profit-table .is-negative { color: #b91c1c; font-weight: 600; }

/* Templates Admin */
.template-list { list-style: none; padding: 0; margin: 0; }
.template-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px;
  margin-bottom: 6px; background: white;
}
.template-meta { display: flex; flex-direction: column; gap: 2px; }
.template-meta strong { font-size: 14px; }
.template-actions { display: flex; gap: 6px; }

/* Push Settings */
.push-status { margin: 12px 0; }
.push-perm-badge {
  display: inline-block; padding: 4px 12px; border-radius: 14px;
  font-size: 13px; font-weight: 600;
}
.push-perm-badge.is-granted { background: #dcfce7; color: #14705a; }
.push-perm-badge.is-denied { background: #fee2e2; color: #b91c1c; }
.push-perm-badge.is-default { background: #fef9c3; color: #8a5f00; }
.push-perm-badge.is-unsupported { background: #f3f4f6; color: #51626e; }
.push-controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.push-log-list { list-style: none; padding: 0; margin: 0; max-height: 280px; overflow-y: auto; }
.push-log-list li { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }

/* PIN Lock */
.pin-lock-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pin-lock-card {
  background: white; border-radius: 14px; padding: 32px 40px;
  text-align: center; max-width: 360px; width: 90%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.pin-lock-card h2 { margin: 0 0 8px; font-size: 22px; }
.pin-lock-card input {
  width: 100%; padding: 12px; margin: 16px 0;
  border: 2px solid #e5e7eb; border-radius: 8px;
  font-size: 18px; text-align: center; letter-spacing: 6px;
}
.pin-lock-card button { width: 100%; padding: 12px; font-size: 15px; }
.pin-error { color: #b91c1c; margin-top: 10px; font-size: 13px; }
.pin-status-badge {
  display: inline-block; padding: 4px 12px; border-radius: 14px;
  background: #f3f4f6; color: #51626e; font-weight: 600; font-size: 13px;
}
.pin-status-badge.is-active { background: #dcfce7; color: #14705a; }
.pin-controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; align-items: center; }
.pin-controls input { padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 6px; min-width: 200px; }

/* RBAC Permissions */
.role-permissions-card {
  border: 1px solid #e5e7eb; border-radius: 8px;
  margin-bottom: 10px; padding: 10px 14px; background: white;
}
.role-permissions-card summary { cursor: pointer; padding: 4px 0; }
.role-perm-groups {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-top: 12px;
}
.role-perm-group {
  border: 1px solid #f1f5f9; border-radius: 6px; padding: 10px;
}
.role-perm-group legend { font-weight: 600; padding: 0 6px; font-size: 12px; color: #475569; }
.role-perm-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 13px;
}
.custom-role-add { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
.custom-role-add input { padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 6px; min-width: 220px; }

/* Mobile Optimizations */
@media (max-width: 768px) {
  .health-badge { font-size: 10px; }
  .profit-table { font-size: 12px; }
  .profit-table th, .profit-table td { padding: 6px 4px; }
  .pin-lock-card { padding: 24px; }
  .role-perm-groups { grid-template-columns: 1fr; }
  .template-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .template-actions { width: 100%; }
  /* Bigger touch targets */
  .ghost-button, .primary-button { min-height: 40px; }
  .icon-button { min-width: 40px; min-height: 40px; }
  /* Sticky timer dock at bottom on mobile */
  .project-timer-dock {
    position: fixed; bottom: 0; left: 0; right: 0;
    border-top: 1px solid #e5e7eb;
    border-radius: 0; max-width: 100vw;
    z-index: 100;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * v293 — UX/LAYOUT OVERHAUL
 * Design Tokens · Dark Mode · Density · Tabs · Mobile · Toasts · Palette
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────── DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  /* Spacing scale 4/8/12/16/24/32/48 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  /* Radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;
  /* Shadows */
  --sh-1: 0 1px 2px rgba(0,0,0,.05);
  --sh-2: 0 4px 12px rgba(0,0,0,.08);
  --sh-3: 0 10px 30px rgba(0,0,0,.12);
  --sh-4: 0 20px 50px rgba(0,0,0,.18);
  /* Farben — NUR NOCH ZWEITE SCHREIBWEISE (U9-g Schritt 3).
   *
   * Hier stand bis v845 ein eigener Wertesatz mit eigenen Hexwerten. Er ist
   * aufgelöst: Die Werte leben jetzt an genau einer Stelle, oben im
   * `--color-*`-Satz, und zwar für hell UND dunkel. Diese 18 Zeilen zeigen nur
   * noch dorthin.
   *
   * Folge: Ein neuer Wert wird einmal gepflegt statt zweimal, und ein dunkles
   * Gegenstück muss nicht mehr an zwei Orten geschrieben werden.
   *
   * Diese Schreibweise wird nicht mehr erweitert (DESIGN_RULES.md § 28). Die
   * 501 bestehenden Verwendungen dürfen bleiben — sie beziehen ihren Wert ab
   * jetzt aus derselben Quelle wie alle anderen. */
  --c-bg: var(--color-bg);
  --c-surface: var(--color-surface);
  --c-surface-2: var(--color-surface-muted);
  --c-text: var(--color-text-max);
  --c-text-muted: var(--color-text-muted);
  --c-border: var(--color-border);
  --c-border-strong: var(--color-border-strong);
  --c-primary: var(--color-primary-deep);
  --c-primary-strong: var(--color-primary-deepest);
  --c-primary-soft: var(--color-primary-deep-soft);
  --c-success: var(--color-success-vivid);
  --c-success-soft: var(--color-success-vivid-soft);
  --c-warn: var(--color-warning-vivid);
  --c-warn-soft: var(--color-warning-vivid-soft);
  --c-danger: var(--color-danger-vivid);
  --c-danger-soft: var(--color-danger-vivid-soft);
  --c-info: var(--color-info);
  --c-info-soft: var(--color-info-soft);
  /* Type scale */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 32px;
  --lh-tight: 1.2;
  --lh-base: 1.45;
  /* Motion */
  --mo-fast: 120ms;
  --mo-base: 200ms;
  --mo-slow: 360ms;
  --ease: cubic-bezier(.2,.7,.2,1);
  /* Button heights */
  --btn-h-sm: 32px;
  --btn-h: 38px;
  --btn-h-lg: 46px;
  /* Z-index scale */
  --z-fab: 80;
  --z-bottom-nav: 90;
  --z-toast: 9000;
  --z-modal: 9500;
  --z-palette: 9900;
  --z-pinlock: 99999;
}

/* ──────────── DARK MODE ──────────────────────────────────────────────────── */

/* U9-g Schritt 1 — der ältere Wertesatz lernt Dunkelheit.
 *
 * DAS PROBLEM: KoWork führte zwei semantische Wertesätze nebeneinander.
 * `--c-*` (18 Werte, 501 Verwendungen) hatte dunkle Gegenstücke, `--color-*`
 * (20 Werte, 560 Verwendungen) NICHT. Beim Umschalten taten diese 560
 * Verwendungen also schlicht nichts: dunkler Text blieb dunkel, weiße Flächen
 * blieben weiß. Genau deshalb hingen am dunklen Modus zusätzlich 427
 * Einzelregeln — sie flickten von Hand, was der Wertesatz nicht konnte.
 *
 * DIE LÖSUNG: Hier bekommt `--color-*` seinen dunklen Satz. Damit werden 560
 * Verwendungen auf einen Schlag umschaltfähig, ohne eine einzige davon
 * anzufassen. Das ist gemeint mit „Dunkelheit entsteht durch Werte, nie durch
 * Einzelregeln" (DESIGN_RULES.md § 27.5).
 *
 * WO DAS STEHT: am <html>-Element, also auf derselben Ebene wie `:root`.
 * Gleiche Spezifität, aber weiter unten in der Datei — deshalb gewinnt dieser
 * Satz im dunklen Modus. Von dort erbt die ganze Seite.
 *
 * MITGEZOGEN OHNE ZUTUN: `--line` und `--ok` sind in `:root` als
 * `var(--color-border)` bzw. `var(--color-success)` definiert. Beide stehen am
 * selben Element und übernehmen die neuen Werte von allein — das sind weitere
 * 219 Verwendungen (`--line`), die hier ohne eigene Zeile mitkommen.
 *
 * BEWUSST NICHT DABEI: `--white`. Der Wert wird zwölfmal benutzt — sechsmal als
 * Fläche, aber sechsmal als SCHRIFTFARBE (weiße Schrift auf Petrol-Knöpfen).
 * Ihn umzudrehen würde die Flächen richtig machen und die Schrift unleserlich.
 * Er bleibt ein Markenwert und wird bei Bedarf einzeln abgelöst.
 *
 * Alle Werte sind gegen die drei Flächen nachgemessen (mindestens 4,5:1 für
 * Text); die Töne sind bewusst dieselben wie im `--c-*`-Dunkelsatz weiter
 * unten, damit die beiden Sätze nicht zweierlei Dunkel zeigen. */
[data-theme="dark"] {
  /* Text */
  --color-text: #e6ebf5;
  --color-text-strong: #f4f7fb;
  --color-text-muted: #a3b1c6;
  --color-text-subtle: #8593ab;
  /* Flächen */
  --color-surface: #131c2e;
  --color-surface-soft: #16203a;
  --color-surface-muted: #1a2540;
  /* Linien */
  --color-border: #2a3654;
  --color-border-strong: #3a4868;
  /* Marke auf dunklem Grund: das Petrol muss aufgehellt werden, sonst
     verschwindet es. #297b96 käme auf #131c2e nur auf 2,6:1. */
  --color-primary: #5db8d8;
  --color-primary-hover: #8ed2ea;
  --color-primary-soft: rgba(93, 184, 216, 0.16);
  --color-primary-softer: rgba(93, 184, 216, 0.09);
  --color-focus: rgba(93, 184, 216, 0.34);
  /* 30.10.2026: Feldrahmen 3:1 auf den dunklen Flaechen, Fokus-Ring hell und durchgehend */
  --color-border-control: #6a7d94;
  --color-border-control-hover: #8fa3bd;
  --color-focus-ring: #7fd0ee;
  /* Statusfarben: die dunklen Töne sind für weißen Grund gemacht und auf
     dunklem Grund nicht mehr lesbar. Hier die aufgehellten Gegenstücke. */
  --color-danger: #f2909e;
  --color-danger-soft: rgba(239, 68, 68, 0.18);
  --color-success: #5fd6a4;
  --color-success-soft: rgba(34, 197, 94, 0.18);
  --color-warning: #f0c04a;
  --color-warning-soft: rgba(234, 179, 8, 0.18);
  /* Abstufungen und kräftige Statusfarben (Schritt 3). Die kräftigen Töne
     hatten vorher gar kein dunkles Gegenstück — #15803d auf #131c2e sind
     2,5:1, also unlesbar. */
  --color-bg: #0b1220;
  --color-text-max: #e6ebf5;
  --color-primary-deep: #3a8aa8;
  --color-primary-deepest: #4ea3c4;
  --color-primary-deep-soft: rgba(74, 154, 184, 0.15);
  --color-success-vivid: #5fd6a4;
  --color-success-vivid-soft: rgba(34, 197, 94, 0.18);
  --color-warning-vivid: #f0c04a;
  --color-warning-vivid-soft: rgba(234, 179, 8, 0.18);
  --color-danger-vivid: #f2909e;
  --color-danger-vivid-soft: rgba(239, 68, 68, 0.18);
  --color-info: #5db8d8;
  --color-info-soft: rgba(59, 130, 246, 0.18);
  /* Ältere Einzelwerte, die nicht über --color-* laufen */
  --dark-grey: #e2edf3;
  --warn: #f0c04a;
  --high: #f2909e;
  --bg-page: #0b1220;
  --shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

/* U9-g Schritt 3: Die dunklen Gegenstücke der zweiten Schreibweise standen
 * hier als eigene `--c-*`-Werte — das war der zweite Ort, an dem Dunkelheit
 * gepflegt werden musste. Sie sind in den Wertesatz oben gewandert; `--c-*`
 * folgt jetzt automatisch, weil es nur noch dorthin zeigt.
 *
 * Nachgetragen dabei: `--c-success`, `--c-warn`, `--c-danger` und `--c-info`
 * hatten ÜBERHAUPT KEIN dunkles Gegenstück. Ihre kräftigen Töne sind für
 * weißen Grund gemacht — #15803d auf #131c2e kommt auf 2,5:1. Sie standen also
 * im dunklen Modus unlesbar auf der Seite. */
[data-theme="dark"] body {
  --sh-1: 0 1px 2px rgba(0,0,0,.5);
  --sh-2: 0 4px 12px rgba(0,0,0,.4);
  --sh-3: 0 10px 30px rgba(0,0,0,.5);
  background: var(--c-bg);
  color: var(--c-text);
}
[data-theme="dark"] body .panel,
[data-theme="dark"] body .sidebar,
[data-theme="dark"] body .topbar,
[data-theme="dark"] body .project-fact-card,
[data-theme="dark"] body .settings-card {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border);
}
[data-theme="dark"] body input,
[data-theme="dark"] body select,
[data-theme="dark"] body textarea {
  background: var(--c-surface-2);
  color: var(--c-text);
  border-color: var(--color-border-control);
}
[data-theme="dark"] body .ghost-button { background: transparent; }
[data-theme="dark"] body .ghost-button:hover { background: var(--c-primary-soft); }
[data-theme="dark"] body .badge { background: var(--c-primary-soft); color: var(--c-text); }
[data-theme="dark"] body .empty-state-hero { background: var(--c-surface); }
[data-theme="dark"] body table { color: var(--c-text); }
[data-theme="dark"] body table th { background: var(--c-surface-2) !important; }
[data-theme="dark"] body .health-badge.is-green { background: rgba(34,197,94,.18); color: #4ade80; border-color: rgba(74,222,128,.4); }
[data-theme="dark"] body .health-badge.is-yellow { background: rgba(234,179,8,.18); color: #fbbf24; border-color: rgba(251,191,36,.4); }
[data-theme="dark"] body .health-badge.is-red { background: rgba(251,191,36,.16); color: #fbbf24; border-color: rgba(251,191,36,.4); }
[data-theme="dark"] body .health-badge.is-neutral { background: rgba(148,163,184,.16); color: #cbd5e1; border-color: rgba(203,213,225,.32); }

/* ──────────── TYPOGRAPHY HIERARCHY ──────────────────────────────────────── */
h1, .h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--fs-2xl); line-height: var(--lh-tight); font-weight: 600; letter-spacing: -0.01em; }
h3, .h3 { font-size: var(--fs-xl); line-height: var(--lh-tight); font-weight: 600; }
h4, .h4 { font-size: var(--fs-lg); line-height: var(--lh-base); font-weight: 600; }

/* ──────────── DENSITY MODES ─────────────────────────────────────────────── */
body[data-density="compact"] {
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --fs-base: 12px;
  --btn-h: 32px;
  --btn-h-lg: 38px;
}
body[data-density="comfortable"] {
  /* defaults */
}
body[data-density="spacious"] {
  --sp-3: 16px;
  --sp-4: 20px;
  --sp-5: 28px;
  --fs-base: 14px;
  --btn-h: 44px;
  --btn-h-lg: 52px;
}
body[data-density="compact"] .panel { padding: 12px; }
body[data-density="spacious"] .panel { padding: 28px; }
body[data-density="compact"] table th,
body[data-density="compact"] table td { padding: 4px 6px !important; font-size: 12px; }
body[data-density="spacious"] table th,
body[data-density="spacious"] table td { padding: 12px 14px !important; }

/* ──────────── BUTTON CONSISTENCY ─────────────────────────────────────────── */
.primary-button, .ghost-button:not(.tiny):not(.square) {
  min-height: var(--btn-h);
  padding: 0 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  transition: transform var(--mo-fast) var(--ease), background var(--mo-base) var(--ease);
}
.primary-button:active, .ghost-button:active { transform: scale(0.97); }
.ghost-button.tiny { min-height: var(--btn-h-sm); padding: 0 10px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.ghost-button.square { width: var(--btn-h); height: var(--btn-h); padding: 0; }

/* ──────────── REDUCED MOTION ────────────────────────────────────────────── */
body.kw-reduced-motion *, body.kw-reduced-motion *::before, body.kw-reduced-motion *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ──────────── FOCUS RINGS (A11y) ────────────────────────────────────────── */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid #3b82f6;
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* v365: #topbarBreadcrumb hier komplett entfernt — siehe konsolidierte
   Definition bei Zeile ~20051. Diese Duplikat-Definition hatte ursprünglich
   `flex-wrap: wrap`, was den Breadcrumb-Layout-Bug verursachte (Stand v363). */

/* ──────────── SIDEBAR ENHANCEMENTS ──────────────────────────────────────── */
.side-recent {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.side-recent h2 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6);
  margin: 0 0 6px;
}
.side-recent ul { list-style: none; padding: 0; margin: 0; }
.side-recent-link {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: transparent; border: none; color: rgba(255,255,255,0.85);
  padding: 5px 8px; border-radius: var(--r-sm); cursor: pointer;
  font-size: 12px; text-align: left;
  transition: background var(--mo-fast) var(--ease);
}
.side-recent-link:hover { background: rgba(255,255,255,0.08); }
.side-recent-icon { width: 14px; text-align: center; opacity: 0.7; }
.side-recent-text {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 1px;
}
.side-recent-label,
.side-recent-sub {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-recent-label { font-weight: 650; }
.side-recent-sub {
  color: rgba(255,255,255,0.58);
  font-size: 10px;
  line-height: 1.2;
}
.sidebar.collapsed .side-recent { display: none; }

/* ──────────── PERMISSION HIDING ─────────────────────────────────────────── */
.perm-hidden { display: none !important; }

/* ──────────── MOBILE BOTTOM NAV ─────────────────────────────────────────── */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: none;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  z-index: var(--z-bottom-nav);
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
}
.mobile-nav-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; border: none; padding: 6px 4px;
  color: var(--c-text-muted); font-size: 10px; cursor: pointer;
  min-height: 50px;
}
.mobile-nav-btn .mn-icon { font-size: 20px; line-height: 1; }
.mobile-nav-btn.is-active { color: var(--c-primary); font-weight: 600; }
.mobile-nav-btn.is-active .mn-icon { transform: scale(1.1); }
@media (max-width: 768px) {
  .mobile-bottom-nav { display: flex; }
  body { padding-bottom: 64px; }
  .sidebar { display: none; }
  .app-shell.sidebar-overlay-open .sidebar { display: flex; }
}

/* Floating Language-Switcher (JS-erstellt in app.js, v455).
   Desktop: unten links. Mobile: über die Bottom-Nav gehoben,
   sonst überlappt er den Home-Button. */
.kw-locale-switch {
  /* Bugjagd: lag als fester Knopf unten links über dem Seitenmenü (deckte „Mitarbeiter" ab);
     sitzt jetzt wie am Handy in der Kopfzeile. */
  position: static;
  order: -1;
  border: 1px solid #ccd6dd;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  color: #1e5167;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  opacity: 1; /* Kontrast (axe): früher 0.7 */
  transition: opacity 0.15s;
}
.kw-locale-switch:hover,
.kw-locale-switch:focus-visible {
  opacity: 1;
}
@media (max-width: 768px) {
  .kw-locale-switch {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* ──────────── FLOATING ACTION BUTTON ────────────────────────────────────── */
.global-fab {
  position: fixed;
  bottom: 80px;
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-primary);
  color: white;
  border: none;
  font-size: 28px;
  font-weight: 300;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(30,81,103,0.4);
  z-index: var(--z-fab);
  display: none;
  align-items: center;
  justify-content: center;
  transition: transform var(--mo-base) var(--ease), box-shadow var(--mo-base) var(--ease);
}
.global-fab:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(30,81,103,0.5); }
.global-fab:active { transform: scale(0.95); }
@media (max-width: 768px) {
  .global-fab { display: flex; }
}

/* ──────────── COMMAND PALETTE ───────────────────────────────────────────── */
.cmd-palette-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: var(--z-palette);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px;
}
.cmd-palette {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  width: 100%;
  max-width: 640px;
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.cmd-palette input {
  width: 100%;
  border: none;
  padding: 18px 22px;
  font-size: 17px;
  outline: none;
  background: transparent;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}
#cmdPaletteResults {
  list-style: none;
  padding: 8px;
  margin: 0;
  max-height: 50vh;
  overflow-y: auto;
}
#cmdPaletteResults li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  color: var(--c-text);
}
#cmdPaletteResults li.is-active { background: var(--c-primary-soft); }
#cmdPaletteResults li:hover { background: var(--c-surface-2); }
.cmd-icon { font-size: 16px; width: 24px; text-align: center; }
.cmd-main { flex: 1; font-weight: 500; }
.cmd-sub { font-size: var(--fs-sm); color: var(--c-text-muted); }
.cmd-empty { padding: 24px; text-align: center; color: var(--c-text-muted); }
.cmd-palette-hint {
  padding: 10px 16px;
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  background: var(--c-surface-2);
}
.cmd-palette-hint kbd {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  margin: 0 2px;
}

/* ──────────── QUICK TIME ENTRY ──────────────────────────────────────────── */
.quick-time-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 100px 16px;
}
.quick-time-card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  width: 100%;
  max-width: 520px;
  padding: 24px;
}
.quick-time-card h3 { margin: 0 0 12px; font-size: 18px; }
.quick-time-card input, .quick-time-card select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 14px;
  background: var(--c-surface);
  color: var(--c-text);
}
#qteInput { font-size: 15px; padding: 12px 14px; margin-bottom: 12px; }
.quick-time-row {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: 8px;
  margin-bottom: 16px;
}
.quick-time-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ──────────── TOAST STACK ────────────────────────────────────────────────── */
.toast-stack {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  max-width: 380px;
  pointer-events: none;
}
.toast-stacked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--c-surface);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  font-size: var(--fs-md);
  color: var(--c-text);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity var(--mo-base) var(--ease), transform var(--mo-base) var(--ease);
  pointer-events: auto;
}
.toast-stacked.toast-show { opacity: 1; transform: translateX(0); }
.toast-stacked.is-success { border-left-color: var(--c-success); }
.toast-stacked.is-warn { border-left-color: var(--c-warn); }
.toast-stacked.is-error { border-left-color: var(--c-danger); }
.toast-stacked.is-info { border-left-color: var(--c-info); }
.toast-icon { font-weight: bold; }
.toast-message { flex: 1; }
.toast-action {
  background: var(--c-primary);
  color: white;
  border: none;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.toast-close {
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--c-text-muted);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  /* Zielgröße mindestens 24 px (WCAG 2.5.8); am Handy 44 px */
  min-width: 24px;
  min-height: 24px;
}
@media (max-width: 768px) {
  .toast-close { min-width: 44px; min-height: 44px; }
}

/* ──────────── OFFLINE BANNER ────────────────────────────────────────────── */
.offline-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--c-warn);
  color: white;
  text-align: center;
  padding: 6px;
  font-size: var(--fs-sm);
  z-index: var(--z-toast);
  font-weight: 600;
}

/* ──────────── PROJECT TABS w/ COUNTS & STICKY ───────────────────────────── */
.project-inner-nav.is-sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--c-surface);
  border-bottom: 2px solid var(--c-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.project-inner-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--c-text-muted);
  border-bottom: 3px solid transparent;
  transition: all var(--mo-fast) var(--ease);
}
.project-inner-link:hover { color: var(--c-text); background: var(--c-primary-soft); }
.project-inner-link.is-active {
  color: var(--c-primary);
  font-weight: 600;
  border-bottom-color: var(--c-primary);
  background: var(--c-primary-soft);
}
.ptab-icon { font-size: 14px; opacity: 0.85; }
.ptab-count {
  background: var(--c-primary-soft);
  color: var(--c-primary);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  min-width: 18px;
  text-align: center;
}
.project-inner-link.is-active .ptab-count {
  background: var(--c-primary);
  color: white;
}

/* ──────────── PROJECT COCKPIT HERO ──────────────────────────────────────── */
.project-cockpit-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: linear-gradient(135deg, var(--c-primary-soft) 0%, transparent 100%);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  margin-bottom: var(--sp-5);
  align-items: center;
}
.cockpit-health-block {
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 24px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-1);
}
.cockpit-health-block.is-green { color: var(--c-success); background: var(--c-success-soft); }
.cockpit-health-block.is-yellow { color: var(--c-warn); background: var(--c-warn-soft); }
.cockpit-health-block.is-red { color: var(--c-danger); background: var(--c-danger-soft); }
.cockpit-health-block.is-neutral { color: var(--c-text-muted); background: rgba(148, 163, 184, 0.12); }
.cockpit-health-score { font-size: 32px; font-weight: 700; line-height: 1; }
.cockpit-health-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
.cockpit-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.cockpit-stat { gap: 2px;
}
.cs-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-muted); }
.cs-value { font-size: var(--fs-xl); font-weight: 600; color: var(--c-text); }
.cs-bar { height: 4px; background: var(--c-border); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.cs-bar-fill { height: 100%; background: var(--c-primary); transition: width var(--mo-slow) var(--ease); }
.cockpit-actions { display: flex; flex-direction: column; gap: 6px; }
.cockpit-reasons {
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-border);
}
.cockpit-reasons span { display: inline-block; padding: 2px 8px; background: var(--c-warn-soft); color: var(--c-warn); border-radius: var(--r-sm); margin: 2px; font-size: var(--fs-xs); }
.cockpit-reason-clickable { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; transition: box-shadow 0.15s; }
.cockpit-reason-clickable:hover, .cockpit-reason-clickable:focus-visible { box-shadow: 0 0 0 2px rgba(41, 123, 150, 0.28); outline: none; }
@media (max-width: 768px) {
  .project-cockpit-hero { grid-template-columns: 1fr; }
  .cockpit-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ──────────── TODAY HERO WIDGET (Dashboard) ─────────────────────────────── */
.today-hero-widget {
  background: linear-gradient(135deg, #1e5167 0%, #2a7088 100%);
  color: white;
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  margin: var(--sp-3) 0 var(--sp-5);
  box-shadow: var(--sh-2);
}
.today-hero-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: start;
  margin-bottom: var(--sp-5);
}
.today-eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}
.today-greeting { font-size: var(--fs-2xl); margin: 4px 0; color: white; }
.today-ctx-msg { font-size: var(--fs-md); opacity: 0.9; margin: 0; }
.today-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.today-quick-actions .primary-button {
  background: white;
  /* Weißer Knopf auf Markenverlauf: dunkles Marken-Petrol statt --c-primary,
     das im dunklen Modus aufgehellt wird (3,9 : 1 auf Weiß). Hell unverändert. */
  color: var(--kf-dark-blue);
}
.today-quick-actions .ghost-button {
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
}
.today-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--sp-3);
}
.today-tile {
  min-width: 0;
  background: rgba(255,255,255,0.1);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.today-tile h3 { color: white; font-size: var(--fs-md); margin: 0 0 8px; opacity: 0.9; }
/* v417: Lesbarer Text in Hero-Tiles auf dunklem Hintergrund.
   Sonst erbt .muted die dunkle Standard-Farbe → schwer lesbar. */
.today-tile p,
.today-tile .muted,
.today-tile ul,
.today-tile li { color: rgba(255,255,255,0.85); }
.today-tile .ghost-button {
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
}
.today-task-list { list-style: none; padding: 0; margin: 0; }
.today-task-list li { padding: 4px 0; font-size: var(--fs-sm); }
.today-task-list li.is-overdue { color: #fde68a; }
/* Jasmin, 29.09.2026: Überfälliges steht im blauen HEUTE-Bereich über „Meine Aufgaben heute“. */
.today-tile.is-tasks [data-quick-action="overduetasks"] { display: block; margin: 2px 0 14px; }
.today-task-list .muted { margin-left: 6px; }
.today-task-link {
  background: transparent; border: none; color: inherit;
  text-align: left; cursor: pointer; padding: 0;
  font-size: var(--fs-sm); width: 100%;
}
.today-task-link:hover { text-decoration: underline; }
.empty-positive { color: white; margin: 0; opacity: 0.85; }
.today-project-time-list,
.today-appointment-list {
  display: grid;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.today-project-time-entry,
.today-appointment-entry {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 3px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 9px;
  padding: 7px 9px;
  background: rgba(255,255,255,0.08);
  color: white;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.today-project-time-entry:hover,
.today-appointment-entry:hover {
  border-color: rgba(255,255,255,0.38);
  background: rgba(255,255,255,0.16);
}
.today-project-time-entry:focus-visible,
.today-appointment-entry:focus-visible {
  outline: 2px solid rgba(255,255,255,0.72);
  outline-offset: 2px;
}
.today-project-time-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}
.today-project-time-main strong,
.today-appointment-entry strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-project-time-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
}
.today-project-time-entry.is-running .today-project-time-dot {
  background: #86efac;
  box-shadow: 0 0 0 3px rgba(134,239,172,0.16);
}
.today-project-time-meta,
.today-appointment-entry span {
  font-size: 11px;
}
.today-more-hint {
  margin: 0 0 6px;
  font-size: 11px;
}
@media (max-width: 1180px) {
  .today-hero-head { grid-template-columns: 1fr; }
  .today-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today-tile.is-tasks { grid-column: 1 / -1; }
  .today-quick-actions { width: 100%; }
}
@media (max-width: 768px) {
  .today-hero-grid { grid-template-columns: 1fr; }
  .today-tile.is-tasks { grid-column: auto; }
}

/* ──────────── SORTABLE TABLE ────────────────────────────────────────────── */
table.sortable-table th { position: relative; user-select: none; transition: background var(--mo-fast) var(--ease); }
table.sortable-table th:hover { background: var(--c-surface-2); }
table.sortable-table th.sort-asc::after { content: " ▲"; font-size: 10px; color: var(--c-primary); }
table.sortable-table th.sort-desc::after { content: " ▼"; font-size: 10px; color: var(--c-primary); }
.report-table thead { position: sticky; top: 0; background: var(--c-surface); z-index: 5; }

/* ──────────── FIRST RUN TOUR ────────────────────────────────────────────── */
.first-run-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.7);
  z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.first-run-card {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  max-width: 560px;
  width: 100%;
  padding: 34px 36px 28px;
  text-align: center;
}
.first-run-header {
  max-width: 430px;
  margin: 0 auto 22px;
}
.first-run-wave {
  display: inline-block;
  margin-right: 8px;
  font-size: 24px;
  line-height: 1;
  vertical-align: -2px;
}
.first-run-card h2 {
  display: inline;
  margin: 0;
  font-size: var(--fs-2xl);
  line-height: 1.2;
}
.first-run-card p {
  color: var(--c-text-muted);
}
.first-run-header p {
  margin: 10px 0 0;
  line-height: 1.55;
}
.first-run-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin: 0 0 12px;
}
.first-run-actions .ghost-button,
.first-run-actions .primary-button {
  min-height: 36px;
  padding-inline: 16px;
}
.first-run-tip {
  margin: 0;
  line-height: 1.55;
}

@media (max-width: 560px) {
  .first-run-overlay {
    padding: 12px;
  }
  .first-run-card {
    padding: 24px 18px 18px;
    /* v463: Modal scrollbar wenn länger als Viewport (vorher: Overflow) */
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
  .first-run-card h2 {
    display: block;
    margin-top: 6px;
    font-size: 20px;
  }
  .first-run-wave {
    margin-right: 0;
  }
  /* v463: kleinere Icon-Spalte auf Mobile, mehr Platz für Text */
  .first-run-features .fr-feat-icon {
    width: 24px;
    font-size: 18px;
  }
  .first-run-features .fr-feat-text strong {
    font-size: 13px;
  }
  .first-run-features li {
    font-size: 12.5px;
    line-height: 1.45;
  }
  .first-run-actions {
    flex-wrap: wrap;
  }
}

/* ──────────── EMPTY STATE HERO ──────────────────────────────────────────── */
.empty-state-hero {
  text-align: center;
  padding: 48px 24px;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  border: 2px dashed var(--c-border);
}
.empty-illu { font-size: 48px; margin-bottom: 12px; }
.empty-state-hero h3 { font-size: var(--fs-xl); margin: 0 0 8px; }
.empty-state-hero p { color: var(--c-text-muted); margin: 0 0 20px; }
.empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ──────────── MINI CALENDAR SIDEBAR ─────────────────────────────────────── */
.mini-cal-sidebar {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 280px;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  box-shadow: var(--sh-2);
  border: 1px solid var(--c-border);
  z-index: 10;
}
.mini-cal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; font-weight: 600;
}
.mini-cal-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mini-cal-toggle {
  flex: 0 0 auto;
}
.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.mini-cal-dow {
  text-align: center;
  font-size: 9px;
  color: var(--c-text-muted);
  font-weight: 600;
  padding: 4px 0;
  text-transform: uppercase;
}
.mini-cal-day {
  background: transparent;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--c-text);
  position: relative;
  text-align: center;
}
.mini-cal-day.is-empty { visibility: hidden; }
.mini-cal-day:hover { background: var(--c-primary-soft); }
.mini-cal-day.is-today { background: var(--c-primary); color: white; font-weight: 700; }
.mini-cal-day.has-event::after {
  content: "";
  position: absolute;
  bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-warn);
}
.mini-cal-legend {
  display: flex; gap: 12px; justify-content: center;
  margin-top: 8px; font-size: 10px; color: var(--c-text-muted);
  border-top: 1px solid var(--c-border); padding-top: 6px;
}
.mc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.mc-dot.today { background: var(--c-primary); }
.mc-dot.has-event { background: var(--c-warn); }
@media (max-width: 1024px) { .mini-cal-sidebar { position: relative; width: 100%; top: auto; right: auto; margin-bottom: 16px; } }

/* ──────────── ACTIVE TIMER PULSE ────────────────────────────────────────── */
body.kowork-timer-active .sidebar-timer-chip { display: inline-flex !important; animation: timer-pulse 2s infinite; }
@keyframes timer-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
  50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
body.kowork-timer-active .zeiten-nav-dot {
  display: inline-block !important;
  width: 8px; height: 8px;
  background: #ef4444;
  border-radius: 50%;
  animation: timer-pulse 2s infinite;
}

/* ──────────── ACTION BUTTON PRESS FEEDBACK ──────────────────────────────── */
button:not(:disabled):active { transform: scale(0.97); }

/* ──────────── HOVER LIFT ON CARDS ───────────────────────────────────────── */
.task-card,
.project-fact-card,
.settings-card,
.template-item {
  transition: transform var(--mo-fast) var(--ease), box-shadow var(--mo-fast) var(--ease);
}
.task-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}

/* ──────────── SLIDE-IN SIDE PANEL (Task Detail) ─────────────────────────── */
@keyframes slideInRight {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ──────────── BULK ACTION BAR — FLOATING ────────────────────────────────── */
.bulk-toolbar, [data-bulk-toolbar] {
  position: sticky;
  bottom: 16px;
  background: var(--c-surface);
  box-shadow: var(--sh-3);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  z-index: 50;
}

/* ──────────── HIDE SIDEBAR-SEARCH-QUICK DUPLICATE ───────────────────────── */
@media (min-width: 769px) {
  .side-search-quick { display: none !important; }
}

/* ──────────── KANBAN COLLAPSIBLE COLUMNS ────────────────────────────────── */
.task-column[data-collapsed="true"] {
  min-width: 48px; max-width: 48px;
  overflow: hidden;
}
.task-column[data-collapsed="true"] .task-card,
.task-column[data-collapsed="true"] .task-column-add { display: none; }
.task-column[data-collapsed="true"] .task-column-header {
  writing-mode: vertical-lr;
  text-align: left;
}

/* ──────────── SLASH COMMAND HINT in editors ─────────────────────────────── */
[contenteditable]:empty:before {
  content: attr(data-placeholder);
  color: var(--c-text-muted);
  font-style: italic;
}

/* ──────────── RESIZABLE SIDEBAR HANDLE ──────────────────────────────────── */
.sidebar-resize-handle {
  position: absolute;
  right: -3px; top: 0; bottom: 0;
  width: 6px;
  cursor: col-resize;
  background: transparent;
  z-index: 100;
}
.sidebar-resize-handle:hover { background: var(--c-primary-soft); }

/* ──────────── HIGH CONTRAST MODE ────────────────────────────────────────── */
body[data-high-contrast="true"] {
  --c-text: #000;
  --c-text-muted: #333;
  --c-border: #000;
  --c-primary: #003355;
}

/* ──────────── SKIP LINK ─────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px; left: 0;
  padding: 8px 16px;
  /* Weiße Schrift: Marken-Petrol statt --c-primary (dunkel aufgehellt, 3,9 : 1). Hell unverändert. */
  background: var(--kf-dark-blue);
  color: white;
  z-index: 99999;
  transition: top var(--mo-base) var(--ease);
}
.skip-link:focus { top: 0; }

/* ──────────── PTR INDICATOR ─────────────────────────────────────────────── */
.ptr-indicator { pointer-events: none; }

/* ──────────── SKELETON LOADERS ──────────────────────────────────────────── */
@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ──────────── TOOLTIP (better than title) ───────────────────────────────── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--c-text);
  color: var(--c-surface);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mo-fast) var(--ease);
  z-index: 100;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ──────────── KANBAN COLLAPSE BUTTON ────────────────────────────────────── */
.task-column-header [data-collapse-column] {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 12px;
  color: var(--c-text-muted);
  border-radius: var(--r-sm);
}
.task-column-header [data-collapse-column]:hover { background: var(--c-surface-2); }

/* ──────────── DARK MODE FALLBACKS for common UI patterns ──────────────── */
[data-theme="dark"] body .topbar-title-block .eyebrow,
[data-theme="dark"] body .muted {
  color: var(--c-text-muted);
}
[data-theme="dark"] body .badge.ok { background: var(--c-success-soft); color: #4ade80; }
[data-theme="dark"] body .badge.warn { background: var(--c-warn-soft); color: #fbbf24; }
[data-theme="dark"] body .badge.danger { background: var(--c-danger-soft); color: #f87171; }
[data-theme="dark"] body .task-card { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); }
[data-theme="dark"] body .modal-card {
  background: var(--c-surface); color: var(--c-text);
}
[data-theme="dark"] body .drawer-backdrop { background: rgba(0,0,0,0.6); }
[data-theme="dark"] body .notification-drawer, [data-theme="dark"] body .mention-drawer {
  background: var(--c-surface); color: var(--c-text);
}
[data-theme="dark"] body .topbar { background: var(--c-surface); border-bottom-color: var(--c-border); }
[data-theme="dark"] body .sidebar { background: linear-gradient(180deg, #0f1828 0%, #1a2540 100%); }
[data-theme="dark"] body .ghost-button { color: var(--c-text); }
[data-theme="dark"] body kbd { background: var(--c-surface-2); color: var(--c-text); border-color: var(--c-border); }
[data-theme="dark"] body .health-badge.is-green .health-dot,
[data-theme="dark"] body .health-badge.is-yellow .health-dot,
[data-theme="dark"] body .health-badge.is-red .health-dot {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.5);
}
[data-theme="dark"] body .today-hero-widget {
  background: linear-gradient(135deg, #1a2540 0%, #2a3654 100%);
  border: 1px solid var(--c-border);
}

/* ──────────── MULTI-PANE LAYOUT (Tasks list+detail side-by-side) ───────── */
body[data-multi-pane="true"] .task-detail-panel {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border-left: 1px solid var(--c-border);
  padding-left: 16px;
}
@media (min-width: 1280px) {
  body[data-multi-pane="true"] .task-layout {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 16px;
  }
}

/* ──────────── ANIMATIONS: VIEW TRANSITIONS ─────────────────────────────── */
.view {
  animation: viewFadeIn var(--mo-base) var(--ease);
}
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ──────────── PRINT-FRIENDLY ────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .mobile-bottom-nav, .global-fab, .toast-stack { display: none !important; }
  .main { padding: 0; }
  .view { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * v294 — YEAR HEAT-MAP + VIRTUAL SCROLLING
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────── YEAR HEAT-MAP ─────────────────────────────────────────────── */
.year-heatmap {
  /* Ruhige CI-Palette statt der frueheren GitHub-Grün-/Orange-Skalen. */
  --year-heat-time-1: color-mix(in srgb, var(--kf-light-blue) 10%, var(--c-surface));
  --year-heat-time-2: color-mix(in srgb, var(--kf-light-blue) 20%, var(--c-surface));
  --year-heat-time-3: color-mix(in srgb, var(--kf-medium-blue) 32%, var(--c-surface));
  --year-heat-time-4: color-mix(in srgb, var(--kf-medium-blue) 46%, var(--c-surface));
  --year-heat-event-1: color-mix(in srgb, var(--kf-dark-blue) 8%, var(--c-surface));
  --year-heat-event-2: color-mix(in srgb, var(--kf-medium-blue) 16%, var(--c-surface));
  --year-heat-event-3: color-mix(in srgb, var(--kf-medium-blue) 27%, var(--c-surface));
  --year-heat-event-4: color-mix(in srgb, var(--kf-dark-blue) 40%, var(--c-surface));
  padding: var(--sp-3);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
}
.year-heatmap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.year-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: var(--sp-2);
  flex: 1;
}
.year-stat-card {
  gap: 2px;
  padding: 8px 12px;
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
}
.year-stat-label {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.year-stat-value {
  font-size: var(--fs-xl);
  color: var(--c-text);
  font-weight: 600;
}
.year-mode-switch {
  display: flex;
  gap: 4px;
  background: var(--c-surface-2);
  padding: 4px;
  border-radius: var(--r-md);
}
.year-mode-switch .ghost-button.is-active {
  background: var(--c-primary);
  color: white;
}
.year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.year-month {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-2);
}
.year-month-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.year-month-head strong {
  font-size: var(--fs-md);
  color: var(--c-text);
}
.year-month-sub {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}
.year-month-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.year-month-dow span {
  text-align: center;
  font-size: 9px;
  color: var(--c-text-muted);
  font-weight: 600;
}
.year-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.year-cell {
  aspect-ratio: 1;
  background: var(--c-surface-2);
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  transition: transform var(--mo-fast) var(--ease), border-color var(--mo-fast) var(--ease), box-shadow var(--mo-fast) var(--ease);
  position: relative;
}
.year-cell:hover {
  transform: scale(1.14);
  border-color: var(--c-primary);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-primary) 18%, transparent);
  z-index: 5;
}
.year-cell.is-empty {
  cursor: default;
  background: transparent;
}
.year-cell.is-empty:hover { transform: none; border-color: transparent; }
.year-cell.is-weekend { opacity: 0.7; }
.year-cell.is-today {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
}
/* Heat intensity: entsättigte KoWork-Blaupalette. */
.year-cell.is-int-0 { background: var(--c-surface-2); }
.year-cell.is-int-1 { background: var(--year-heat-time-1); }
.year-cell.is-int-2 { background: var(--year-heat-time-2); }
.year-cell.is-int-3 { background: var(--year-heat-time-3); }
.year-cell.is-int-4 { background: var(--year-heat-time-4); }
/* Ereignisse bleiben unterscheidbar, aber ohne die dominante Orange-Fläche. */
.year-mode-events .year-cell.is-int-1 { background: var(--year-heat-event-1); }
.year-mode-events .year-cell.is-int-2 { background: var(--year-heat-event-2); }
.year-mode-events .year-cell.is-int-3 { background: var(--year-heat-event-3); }
.year-mode-events .year-cell.is-int-4 { background: var(--year-heat-event-4); }
.year-cell.has-event::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 4px; height: 4px;
  background: color-mix(in srgb, var(--kf-gold) 72%, var(--c-surface));
  border-radius: 0 0 2px 0;
}
.year-cell.has-absence {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    color-mix(in srgb, var(--kf-gold) 22%, transparent) 3px,
    color-mix(in srgb, var(--kf-gold) 22%, transparent) 5px
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kf-gold) 34%, transparent);
}
.year-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-border);
  flex-wrap: wrap;
}
.year-legend .legend-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}
.year-legend-max {
  margin-left: 12px;
  font-style: italic;
}
@media (max-width: 1024px) {
  .year-grid { grid-template-columns: repeat(3, 1fr); }
  .year-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .year-grid { grid-template-columns: repeat(2, 1fr); }
  .year-heatmap-head { flex-direction: column; align-items: stretch; }
}

/* Dark mode: dieselbe Farbwelt mit etwas mehr Helligkeitsabstand. */
[data-theme="dark"] body .year-heatmap {
  --year-heat-time-1: color-mix(in srgb, var(--kf-light-blue) 18%, var(--c-surface-2));
  --year-heat-time-2: color-mix(in srgb, var(--kf-light-blue) 30%, var(--c-surface-2));
  --year-heat-time-3: color-mix(in srgb, var(--kf-light-blue) 44%, var(--c-surface-2));
  --year-heat-time-4: color-mix(in srgb, var(--kf-light-blue) 60%, var(--c-surface-2));
  --year-heat-event-1: color-mix(in srgb, var(--kf-medium-blue) 16%, var(--c-surface-2));
  --year-heat-event-2: color-mix(in srgb, var(--kf-medium-blue) 27%, var(--c-surface-2));
  --year-heat-event-3: color-mix(in srgb, var(--kf-light-blue) 40%, var(--c-surface-2));
  --year-heat-event-4: color-mix(in srgb, var(--kf-light-blue) 54%, var(--c-surface-2));
}
[data-theme="dark"] body .year-cell.is-int-0 { background: var(--c-surface-2); }

/* ──────────── VIRTUAL SCROLLING ─────────────────────────────────────────── */
[data-virtualized="1"] {
  position: relative;
  overflow: hidden;
  /* min-height set inline based on items × itemHeight */
}
[data-virtualized="1"] [data-vl-viewport] {
  position: absolute;
  top: 0; left: 0; right: 0;
  contain: layout style;
}
[data-virtualized="1"]::after {
  /* Indicator that this list is virtualized */
  content: attr(data-vl-count) " Einträge (virtuell)";
  position: absolute;
  bottom: 4px; right: 8px;
  font-size: 10px;
  color: var(--c-text-muted);
  background: var(--c-surface);
  padding: 2px 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
}
[data-virtualized="1"]:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
 * v295 — BACKEND, LOGIN, EDIT-LOCKING, TAB-SYNC, ACTIVITY-LOG
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────── LOGIN OVERLAY ─────────────────────────────────────────────── */
.login-overlay {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #0f1828 0%, #1e5167 100%);
  z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
#loginOverlay.hidden,
#mfaChallengeOverlay.hidden {
  display: none;
}
.login-card {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--sh-4);
}
.login-brand {
  text-align: center;
  margin-bottom: 24px;
}
.login-brand h1 {
  margin: 12px 0 4px;
  font-size: 28px;
  color: var(--c-primary);
}
.sso-connecting-card { text-align: center; }
.sso-connecting-spinner {
  width: 28px; height: 28px;
  margin: 4px auto 0;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: kwSsoSpin 0.8s linear infinite;
}
@keyframes kwSsoSpin { to { transform: rotate(360deg); } }
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-form .stack { display: flex; flex-direction: column; gap: 4px; }
.login-form .stack span,
.login-form .stack > label { font-size: var(--fs-sm); font-weight: 500; color: var(--c-text); }
.login-form input {
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 15px;
  background: var(--c-surface);
  color: var(--c-text);
}
.login-form input:focus { border-color: var(--c-primary); outline: none; }
.login-password-control {
  position: relative;
  display: flex;
  align-items: center;
}
.login-password-control input {
  width: 100%;
  padding-right: 46px;
}
.login-password-toggle {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
}
.login-password-toggle:hover,
.login-password-toggle:focus-visible,
.login-password-toggle.is-visible {
  color: var(--c-primary);
  background: var(--c-primary-soft);
  outline: none;
}
.login-submit { width: 100%; padding: 13px; font-size: 15px; font-weight: 600; }
.login-aux {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
/* KW-G-007: Auf dem Handy waren „Passwort vergessen?" und „Zurück zum
   Lokal-Modus" nur 26 px hoch — deutlich unter dem Richtwert von 44 px, den
   Apple und Google für sicher treffbare Tippziele nennen. Nur die
   Anmeldeseite ist betroffen, deshalb hier gezielt angehoben. */
.login-aux .ghost-button.tiny,
.login-footer .ghost-button.tiny {
  min-height: 44px;
  padding-block: 10px;
  display: inline-flex;
  align-items: center;
}
.login-passkey-button {
  width: 100%;
  min-height: 42px;
}
.login-error {
  background: var(--c-danger-soft);
  color: var(--c-danger);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.login-status {
  margin-top: 12px;
  text-align: center;
  font-size: var(--fs-sm);
  min-height: 18px;
}
.login-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
}
body.login-mode .app-shell { pointer-events: none; filter: blur(4px); }

/* ──────────── EDIT LOCK BANNER ──────────────────────────────────────────── */
.edit-lock-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-warn-soft);
  color: var(--c-warn);
  border: 1px solid var(--c-warn);
  padding: 10px 14px;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-3);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 8500;
  max-width: calc(100vw - 32px);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.elb-icon { font-size: 16px; }
.elb-text strong { font-weight: 700; }
.elb-text .muted { margin-left: 4px; font-weight: 400; }
#editLockBanner.hidden,
#tabConflictBanner.hidden {
  display: none;
}

/* ──────────── TAB CONFLICT BANNER ───────────────────────────────────────── */
.tab-conflict-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-warn);
  color: white;
  padding: 10px 16px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 8600;
  max-width: calc(100vw - 32px);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.tcb-icon { font-size: 16px; }
.tab-conflict-banner .primary-button.tiny,
.tab-conflict-banner .ghost-button.tiny {
  background: white;
  color: var(--c-warn);
  padding: 4px 10px;
  font-size: 12px;
  min-height: 26px;
  border-radius: var(--r-sm);
}
.tab-conflict-banner .ghost-button.tiny {
  background: transparent;
  color: white;
  border: 1px solid white;
}

/* ──────────── W29 CLOUD-AUFFRISCHEN-STREIFEN ────────────────────────────── */
/* Ruhiger Streifen, kein Warnton: Es ist nichts kaputt, die Anzeige wartet nur
   höflich, bis die Person mit dem Tippen fertig ist. Sitzt unter dem
   Tab-Konflikt-Streifen, damit sich beide nie überdecken. */
.cloud-refresh-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-surface, white);
  color: var(--c-text, #1f2933);
  border: 1px solid var(--c-border, #d7dce2);
  padding: 8px 14px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 8590;
  max-width: calc(100vw - 32px);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.cloud-refresh-banner.hidden {
  display: none;
}
/* Beide Streifen sitzen mittig bei top: 12px. Ein niedrigerer z-index reicht
   deshalb NICHT — der Tab-Konflikt-Streifen läge exakt darüber und der Knopf
   „Ansicht auffrischen" wäre weder sicht- noch klickbar. Ist der Konflikt-
   Streifen sichtbar, rutscht dieser hier darunter. */
body:has(#tabConflictBanner:not(.hidden)) .cloud-refresh-banner {
  top: 64px;
}
.crb-icon {
  font-size: 15px;
  opacity: 0.7;
}
.cloud-refresh-banner .primary-button.tiny {
  padding: 4px 10px;
  font-size: 12px;
  min-height: 26px;
  border-radius: var(--r-sm);
}

/* ──────────── SYNC STATUS CHIP ──────────────────────────────────────────── */
.sync-status-chip {
  margin-right: 8px;
}
.sync-status-chip.is-online { background: var(--c-success-soft); color: var(--c-success); }
.sync-status-chip.is-offline { background: var(--c-warn-soft); color: var(--c-warn); }

/* ──────────── BACKEND SETTINGS ──────────────────────────────────────────── */
.backend-status-block {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 12px 0;
}
.backend-status-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.backend-status-pill.is-on { background: var(--c-success-soft); color: var(--c-success); }
.backend-status-pill.is-off { background: var(--c-surface-2); color: var(--c-text-muted); }
.backend-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ──────────── ACTIVITY LOG DRAWER ───────────────────────────────────────── */
.activity-log-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100vw;
  height: 100vh;
  background: var(--c-surface);
  box-shadow: -8px 0 30px rgba(0,0,0,0.15);
  z-index: 8800;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--c-border);
}
.activity-log-drawer header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-border);
}
.activity-log-drawer header h2 { margin: 0; font-size: var(--fs-xl); }
/* KW-G-003: Register „Aktivitäten" / „Zugriffe" in der Protokoll-Schublade. */
.actlog-tabs {
  display: flex;
  gap: 6px;
  padding: 0 16px 8px;
}
.actlog-tabs .ghost-button.tiny.is-active {
  background: var(--c-primary-soft, rgba(30, 81, 103, 0.12));
  color: var(--c-primary);
  font-weight: 600;
}
.actlog-filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 8px;
  font-size: var(--fs-sm);
  color: var(--c-text-muted, var(--c-text));
}

.actlog-filter {
  display: flex;
  gap: 6px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--c-border);
}
.actlog-filter select {
  flex: 1;
  padding: 6px 10px;
  font-size: var(--fs-sm);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
}
.actlog-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  padding: 12px 16px;
  margin: 0;
}
.actlog-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-surface-2);
  font-size: var(--fs-sm);
}
.actlog-avatar {
  width: 32px; height: 32px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-xs);
}
.actlog-body { display: flex; flex-direction: column; gap: 2px; }
.actlog-body time { font-size: var(--fs-xs); color: var(--c-text-muted); }
.actlog-meta { display: block; font-family: ui-monospace, monospace; font-size: 10px; word-break: break-all; }

/* ──────────── DARK MODE ─────────────────────────────────────────────────── */
[data-theme="dark"] body .login-card { background: var(--c-surface); color: var(--c-text); }
[data-theme="dark"] body .activity-log-drawer { background: var(--c-surface); }

.account-security-methods {
  display: grid;
  gap: 12px;
}

.account-security-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.account-security-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.account-security-status.is-active {
  border-color: color-mix(in srgb, var(--c-success) 35%, var(--c-border));
  background: var(--c-success-soft);
  color: var(--c-success);
}

.account-security-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 10px;
}

.account-security-method {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

.account-security-method strong {
  color: var(--c-text);
}

.account-security-method p {
  margin: 0;
  font-size: var(--fs-sm);
}

.account-security-method .ghost-button,
.account-security-method .primary-button {
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  white-space: normal;
  line-height: 1.2;
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
}

.account-security-setup {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--c-primary) 28%, var(--c-border));
  border-radius: var(--r-lg);
  background: var(--c-primary-soft);
}

.account-security-setup img {
  width: min(220px, 100%);
  aspect-ratio: 1;
  padding: 10px;
  border-radius: var(--r-md);
  background: #fff;
}

.account-security-secret {
  display: block;
  max-width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
  user-select: all;
}

.account-security-factor-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-security-factor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

.account-security-factor-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-security-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.account-security-message {
  margin: 0;
}

@media (max-width: 860px) {
  .account-security-method-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .account-security-factor,
  .account-security-inline-form {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .account-security-factor {
    display: grid;
  }
}

.customer-row-card {
  flex-wrap: wrap;
  align-items: flex-start;
}

.customer-row-card .management-row-main {
  min-width: min(420px, 100%);
}

.customer-detail-panel {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-surface-muted, #f4f8fb) 70%, transparent);
}

.customer-detail-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.customer-detail-tabs button {
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: 700;
  padding: 6px 12px;
}

.customer-detail-tabs button.is-active {
  background: var(--c-accent-soft, #dff2f6);
  border-color: var(--c-accent, #1e5167);
  color: var(--c-accent-strong, #164154);
}

.customer-project-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

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

.customer-project-empty {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 12px;
}

.user-project-empty {
  align-items: center;
}

.settings-sensitive-note {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-surface-muted, #f4f8fb);
}
[data-theme="dark"] body .sync-status-chip.is-local { background: var(--c-surface-2); color: var(--c-text-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
 * v296 — UI/UX-KONSISTENZ-FIXES (QA-Bericht)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────── T1: Stat-Cards einheitliche Mindesthöhe ───────────────────── */
.project-fact-card,
.lohn-kpi,
.year-stat-card,
.cockpit-stat {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

/* ──────────── T2/T3: KPI-Zahlenwerte responsive vereinheitlichen ────────── */
.project-fact-value,
.lohn-kpi strong,
.year-stat-value,
.cs-value {
  font-size: clamp(16px, 2.4vw, 26px);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
/* Wenn längere Texte unvermeidbar (vs-Vergleiche), gestattet umbrechen */
.project-fact-value.allow-wrap,
.project-fact-value[data-allow-wrap="true"] {
  white-space: normal;
  font-size: clamp(14px, 1.9vw, 20px);
}
/* KPI-Grid grundsätzlich gleichmäßig */
.project-facts-grid,
.profit-kpis,
.auswertung-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3, 12px);
  align-items: stretch;
}

/* ──────────── T4: Breadcrumb/Title-Bereich überlaufsicher ───────────────── */
.topbar-title-block .headline,
#projectHeadline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.topbar-title-block .eyebrow {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* v365: #topbarBreadcrumb wird durch konsolidierte Definition bei ~20051 abgedeckt. */
@media (max-width: 768px) {
  .topbar-title-block .eyebrow { max-width: 40vw; }
}
/* Bei mehreren Ebenen (z.B. "Dashboard › Projekte › Projektname › Aufgaben")
   reicht 40vw auf schmalen Bildschirmen nicht für alle Krümel — jeder schrumpft
   dann gleichmäßig auf ein paar Pixel und überlappt die Topbar-Aktionsknöpfe
   daneben. Auf schmalen Screens daher nur den aktuellen (letzten) Krümel zeigen. */
@media (max-width: 640px) {
  /* #topbarBreadcrumb-Regeln (siehe oben) setzen display:inline-block per
     ID-Selektor — muss hier mit übertroffen werden, sonst gewinnt die höhere
     Spezifität und die Krümel bleiben trotz dieser Regel sichtbar. */
  #topbarBreadcrumb.eyebrow > *:not(:last-child),
  .topbar-title-block #topbarBreadcrumb.eyebrow > *:not(:last-child) {
    display: none;
  }
  .topbar-title-block .eyebrow .crumb:last-child {
    max-width: 100%;
  }
}

/* ──────────── L3: "Lokal"-Badge dezenter + erkennbar ────────────────────── */
.sync-status-chip {
  position: relative;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: var(--r-pill, 999px);
  border: 1px solid transparent;
}
.sync-status-chip.is-local {
  background: var(--c-surface-2, #f1f5f9);
  /* v462: WCAG AA Contrast — dunklerer Text auf #f1f5f9 = 4.6:1 */
  color: #475569;
  border-color: var(--c-border, #cbd5e1);
}
.sync-status-chip.is-local::before { content: "● "; opacity: 0.6; }
.sync-status-chip.is-online::before { content: "● "; color: var(--c-success, #14705a); }
.sync-status-chip.is-offline::before { content: "● "; color: var(--c-warn, #8a5f00); }

.sync-conflict-badge {
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.02em;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill, 999px);
  background: var(--c-warn-soft, #fef3c7);
  color: var(--c-warn, #8a5f00);
  border: 1px solid transparent;
}
[data-theme="dark"] .sync-conflict-badge {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

/* ──────────── B1: Kalender-Filter-Chips Aktiv/Inaktiv klar ──────────────── */
.calendar-filter-chips [data-cal-filter],
.cal-user-chip {
  border: 1px solid var(--c-border, #e5e7eb);
  background: var(--c-surface, #fff);
  color: var(--c-text-muted, #64748b);
  padding: 5px 12px;
  border-radius: var(--r-pill, 999px);
  font-size: var(--fs-sm, 12px);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--mo-fast, 120ms) var(--ease, ease),
              color var(--mo-fast, 120ms) var(--ease, ease),
              border-color var(--mo-fast, 120ms) var(--ease, ease);
}
.calendar-filter-chips [data-cal-filter]:hover,
.cal-user-chip:hover {
  background: var(--c-primary-soft, rgba(30,81,103,0.08));
  border-color: var(--c-primary, #1e5167);
  color: var(--c-text, #0f172a);
}
.calendar-filter-chips [data-cal-filter].is-active,
.calendar-filter-chips [aria-pressed="true"],
.cal-user-chip.is-active {
  background: var(--c-primary, #1e5167);
  color: white;
  border-color: var(--c-primary, #1e5167);
}

/* ──────────── B2: Auto-Save-Feedback im Slide-over-Panel ────────────────── */
.task-detail-panel .panel-header,
.project-task-detail-wrap .panel-header,
#taskDetailPane .panel-header,
.task-detail-actions {
  position: sticky;
  top: 0;
  background: var(--c-surface, #fff);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border, #e5e7eb);
}

/* ──────────── B3: Lohn-Person-Switcher Avatar-Kontrast ──────────────────── */
[data-lohn-user-chip] {
  background: var(--c-surface-2, #f1f5f9);
  color: var(--c-text, #0f172a);
  border: 1px solid var(--c-border, #e5e7eb);
  transition: all 150ms ease;
}

/* ──────────── B4: Docs-Editor-Toolbar systemkonform ─────────────────────── */
.doc-editor-toolbar,
[data-doc-toolbar] {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  background: var(--c-surface-2, #f8fafc);
  border-bottom: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--r-md, 8px) var(--r-md, 8px) 0 0;
}
.doc-editor-toolbar button,
[data-doc-toolbar] button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm, 6px);
  padding: 5px 9px;
  min-height: 28px;
  font-size: 13px;
  color: var(--c-text, #0f172a);
  cursor: pointer;
  transition: all 120ms ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.doc-editor-toolbar button:hover,
[data-doc-toolbar] button:hover {
  background: var(--c-primary-soft, rgba(30,81,103,0.08));
  border-color: var(--c-primary-soft, transparent);
}
.doc-editor-toolbar button.is-active,
[data-doc-toolbar] button[aria-pressed="true"] {
  background: var(--c-primary, #1e5167);
  color: white;
}
.doc-editor-toolbar button:focus-visible {
  outline: 2px solid var(--c-primary, #1e5167);
  outline-offset: 1px;
}

/* ──────────── C1: Task-Cards mit konsistentem Minimum-Layout ────────────── */
.task-card {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
}
.task-card:empty::before,
.task-card .task-card-meta-empty {
  content: "";
  display: block;
}
/* Card zeigt mindestens Projekt-Name als Footer */
.task-card .task-project-line {
  font-size: 11px;
  color: var(--c-text-muted, #64748b);
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px dashed transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-card:not(:has(.task-meta-row)) .task-project-line,
.task-card:not(:has(.priority-badge)) .task-project-line {
  border-top-color: var(--c-border, #e5e7eb);
}
.task-card:not(:has(.task-card-avatars)):not(:has(.priority-badge)) {
  background: var(--c-surface-2, #f8fafc);
  border-style: dashed;
}

/* ──────────── C2: Aufgabenliste — Status-Signal konsistent ──────────────── */
.task-row,
.project-task-list-row {
  position: relative;
  border-left: 3px solid transparent;
  transition: border-color 150ms ease;
}
.task-row.is-overdue,
.project-task-list-row.is-overdue,
.task-row[data-overdue="true"],
.project-task-list-row[data-overdue="true"] {
  border-left-color: var(--c-warn, #d97706);
}
.task-row.is-due-today,
.project-task-list-row.is-due-today,
.task-row[data-due-today="true"] {
  border-left-color: var(--c-warn, #8a5f00);
}
.task-row.is-done,
.project-task-list-row.is-done,
.task-row[data-done="true"] {
  opacity: 0.55;
  border-left-color: var(--c-success, #14705a);
}
.task-row.is-blocked,
.project-task-list-row.is-blocked {
  border-left-color: var(--c-text-muted, #64748b);
  background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,0.02) 4px, rgba(0,0,0,0.02) 6px);
}
/* Legende-Komponente (kann via JS eingebunden werden) */
.task-list-legend {
  display: flex;
  gap: 10px;
  font-size: 10px;
  color: var(--c-text-muted, #64748b);
  padding: 6px 12px;
  border-bottom: 1px solid var(--c-border, #e5e7eb);
  flex-wrap: wrap;
}
.task-list-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.task-list-legend-bar {
  width: 3px; height: 12px; border-radius: 2px;
}

/* ──────────── C3: Listenaktionen einheitlich (Detail/Bearbeiten + Overflow) */
.management-list .list-action-bar,
.employee-list-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.management-list .list-action-bar .primary-action,
.list-action-bar [data-action="edit"],
.list-action-bar [data-primary-action] {
  background: var(--c-primary-soft, rgba(30,81,103,0.08));
  color: var(--c-primary, #1e5167);
  border: 1px solid transparent;
  padding: 4px 10px;
  border-radius: var(--r-sm, 6px);
  font-size: var(--fs-sm, 12px);
  font-weight: 500;
}
/* Lösch-Buttons ins Overflow / dezent */
.list-action-bar [data-action="delete"],
.list-action-bar .danger,
.management-list .list-action-bar button.danger {
  color: var(--c-danger, #b91c1c);
  background: transparent;
  border: 1px solid transparent;
}
.list-action-bar [data-action="delete"]:hover,
.list-action-bar .danger:hover {
  background: var(--c-danger-soft, #fee2e2);
  border-color: var(--c-danger, #b91c1c);
}
/* Overflow-Menü (drei Punkte) für Mitarbeiter-/Kunden-Cards */
.list-overflow-menu {
  position: relative;
  display: inline-block;
}
.list-overflow-menu-trigger {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-sm, 6px);
  color: var(--c-text-muted, #64748b);
  font-size: 16px;
  line-height: 1;
}
.list-overflow-menu-trigger:hover {
  background: var(--c-surface-2, #f1f5f9);
  color: var(--c-text, #0f172a);
}
.list-overflow-menu-panel {
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--r-md, 8px);
  box-shadow: var(--sh-3, 0 10px 30px rgba(0,0,0,.12));
  min-width: 160px;
  z-index: 100;
  padding: 4px;
}
.list-overflow-menu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  background: transparent;
  border: none;
  font-size: 13px;
  border-radius: var(--r-sm, 6px);
  cursor: pointer;
  color: var(--c-text, #0f172a);
}
.list-overflow-menu-panel button:hover {
  background: var(--c-primary-soft, rgba(30,81,103,0.08));
}
.list-overflow-menu-panel button.danger {
  color: var(--c-danger, #b91c1c);
}
.list-overflow-menu-panel button.danger:hover {
  background: var(--c-danger-soft, #fee2e2);
}

/* ──────────── L1: Skeleton für Dashboard-Greeting beim Initial-Load ─────── */
.dashboard-greeting-skeleton {
  display: inline-block;
  background: var(--c-surface-2, #f1f5f9);
  border-radius: 6px;
  width: 220px;
  height: 1.2em;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * v297 — Zweiter QA-Bericht: Farben, Zustände, Responsiveness, Navigation
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────── F1: Lohn IST-Card dreistufiges Ampelschema ────────────────── */
/* Klassen werden via JS gesetzt (siehe v297-Modul in app.js) */
.lohn-kpi-value-ok { color: var(--c-success, #14705a); }
.lohn-kpi-value-warn { color: var(--c-warn, #8a5f00); }
.lohn-kpi-value-danger { color: var(--c-danger, #b91c1c); }
.lohn-kpi-value-neutral { color: var(--c-text, #0f172a); }

/* ──────────── IZ1: Timer-Buttons echter Disabled-State ──────────────────── */
.header-workday-actions button:disabled,
.header-workday-actions button[aria-disabled="true"],
.header-workday-actions button.is-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none;
  filter: grayscale(0.4);
}
/* Tooltip-Variante (zeigt Hover bei pointer-events: none — daher Wrapper-Fallback) */
.header-workday-actions [data-disabled-hint] {
  position: relative;
}
.header-workday-actions [data-disabled-hint]::after {
  content: attr(data-disabled-hint);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-text, #0f172a);
  color: var(--c-surface, #fff);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
  z-index: 50;
}
.header-workday-actions [data-disabled-hint]:hover::after { opacity: 1; }

/* ──────────── IZ2: Aufgabenliste-Hover deutlicher ───────────────────────── */
.task-row:hover,
.project-task-list-row:hover {
  background: rgba(30, 81, 103, 0.06);
  box-shadow: inset 4px 0 0 transparent;
  transition: background 120ms ease;
}
[data-theme="dark"] body .task-row:hover,
[data-theme="dark"] body .project-task-list-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ──────────── IZ4: Kalender-Filter-Chips — robust überschreiben ─────────── */
/* Höhere Spezifität, damit alte Stile nicht greifen */
#calendarTypeFilterBar button,
#calendarUserFilter .cal-user-chip,
#calendarUserFilter button {
  border: 1.5px solid var(--c-border, #e5e7eb) !important;
  background: var(--c-surface, #fff) !important;
  color: var(--c-text-muted, #64748b) !important;
}
#calendarTypeFilterBar button.is-active,
#calendarTypeFilterBar [aria-pressed="true"],
#calendarUserFilter .cal-user-chip.is-active,
#calendarUserFilter button.is-active,
#calendarUserFilter [aria-pressed="true"] {
  background: var(--c-primary, #1e5167) !important;
  color: white !important;
  border-color: var(--c-primary, #1e5167) !important;
}

/* ──────────── IZ6: Docs Entwurf-Badge funktionell oder neutral ──────────── */
.doc-status-badge[role="button"],
.doc-status-badge.is-clickable {
  cursor: pointer;
  background: var(--c-surface-2, #f1f5f9);
  border: 1px solid var(--c-border, #e5e7eb);
  padding: 2px 10px;
  border-radius: var(--r-pill, 999px);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 150ms ease;
}
.doc-status-badge[role="button"]:hover {
  background: var(--c-primary-soft, rgba(30,81,103,0.08));
  border-color: var(--c-primary, #1e5167);
  color: var(--c-primary, #1e5167);
}
.doc-status-badge[role="button"]::after {
  content: " ▾";
  font-size: 9px;
  opacity: 0.6;
}
.doc-status-badge.is-readonly {
  cursor: default;
  background: transparent;
  border: none;
  color: var(--c-text-muted, #64748b);
  font-weight: 500;
}

/* ──────────── IZ7: Statistik-Zeitraum-Buttons Aktiv-State klarer ────────── */
[data-stats-period] {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e5e7eb);
  color: var(--c-text-muted, #64748b);
  padding: 5px 12px;
  border-radius: var(--r-sm, 6px);
  font-size: var(--fs-sm, 12px);
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms ease;
}
[data-stats-period].is-active,
[data-stats-period][aria-pressed="true"] {
  background: var(--c-primary, #1e5167);
  color: white;
  border-color: var(--c-primary, #1e5167);
}
[data-stats-period]:hover:not(.is-active) {
  background: var(--c-primary-soft, rgba(30,81,103,0.08));
  border-color: var(--c-primary, #1e5167);
  color: var(--c-text, #0f172a);
}

/* ──────────── R1: Kalender-Titel nicht umbrechen ────────────────────────── */
#projectHeadline,
.headline {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ──────────── R3: Sidebar TO-DO-Bereich begrenzen ───────────────────────── */
.side-utility {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}
.side-utility .my-tasks {
  min-height: 0;
  max-height: 280px;
  overflow-y: auto;
}
.side-utility .my-tasks h2 {
  top: 0;
  z-index: 2;
}
@media (max-height: 720px) {
  .side-utility .my-tasks { max-height: 180px; }
}
@media (max-height: 600px) {
  .side-utility .my-tasks { max-height: 120px; }
}

/* ──────────── N1: Projekt-Header — Pill ODER Dropdown ───────────────────── */
/* Verstecke Dropdown wenn Pill sichtbar (Pill ist Hauptaktion) */
.project-switcher-inline { display: none !important; }
@media (min-width: 1280px) {
  /* Auf großen Screens: Pill als Anker, Dropdown weiterhin versteckt */
  .project-switcher-inline { display: none !important; }
}
/* Project-Chip wird zur primären Navigationsaktion */
#projectWorkspaceTitle.project-chip {
  cursor: pointer;
  position: relative;
}
#projectWorkspaceTitle.project-chip::after {
  content: " ▾";
  font-size: 10px;
  opacity: 0.6;
  margin-left: 4px;
}

/* ──────────── N2: Projekt-Home — doppelte Quick-Nav entfernen ───────────── */
.project-home-quick-nav {
  /* Aus QA: Nur "Projekt bearbeiten" und "Bericht" bleiben sichtbar */
}
.project-home-quick-nav [data-quick-nav-tab="aufgaben"],
.project-home-quick-nav [data-quick-nav-tab="board"],
.project-home-quick-nav [data-quick-nav-tab="timeline"],
.project-home-quick-nav [data-quick-nav-tab="zeiten"],
.project-home-quick-nav [data-quick-nav-tab="einstellungen"] {
  display: none !important;
}

/* ──────────── N4: Einheitlicher Zurück-Button ───────────────────────────── */
.detail-back-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--c-border, #e5e7eb);
  color: var(--c-text, #0f172a);
  padding: 4px 12px;
  border-radius: var(--r-sm, 6px);
  font-size: 12px;
  cursor: pointer;
  transition: all 120ms ease;
}
.detail-back-button:hover {
  background: var(--c-primary-soft, rgba(30,81,103,0.08));
  border-color: var(--c-primary, #1e5167);
}
.detail-back-button::before {
  content: "← ";
  margin-right: 2px;
}

/* ──────────── W7: Info-Icon (sauberer als "i"-Buchstabe) ────────────────── */
.info-icon-inline {
  display: inline-flex;
  width: 14px;
  height: 14px;
  background: var(--c-text-muted, #64748b);
  color: var(--c-surface, #fff);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  font-family: serif;
  font-style: italic;
  margin-left: 4px;
  cursor: help;
}
.info-icon-inline::before { content: "i"; }

/* ──────────── W9: Listen-Action-Buttons konsistent (Mitarbeiter etc.) ────── */
[data-employee-list-actions] [data-action="arbeitszeit-rechte"],
.employee-list-actions [data-arbeitszeit-rechte] {
  /* Wird durch JS-Splitting ersetzt — falls noch existiert: dezent */
}

/* ──────────── W10: "Alle gelesen"-Button bei 0 ungelesenen deaktivieren ── */
#markAllNotifReadButton:disabled,
#markAllNotifReadButton[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ──────────── W11: Prioritäts-Dots mit Label-Hint ───────────────────────── */
.priority-dot,
.task-priority-dot,
[data-priority-dot] {
  position: relative;
}
.priority-dot[aria-label]::after,
.task-priority-dot[aria-label]::after,
[data-priority-dot][aria-label]::after {
  /* Screen-reader-friendly text; Tooltip-visuell via title-attribut */
}

/* ──────────── DOPPEL-BADGE-Differenzierung ──────────────────────────────── */
.subtask-counter::before { content: "⤷ "; opacity: 0.8; font-size: 10px; }
.checklist-counter::before { content: "☑ "; opacity: 0.8; font-size: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
 * v298 — Service Worker Update-Banner
 * ═══════════════════════════════════════════════════════════════════════════ */
.sw-update-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #1e5167 0%, #297b96 100%);
  color: white;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 99998;
  max-width: calc(100vw - 32px);
  font-size: 14px;
  animation: swub-slide-up 250ms cubic-bezier(.2,.7,.2,1);
}
@keyframes swub-slide-up {
  from { opacity: 0; transform: translate(-50%, 30px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.sw-update-banner .swub-icon {
  font-size: 18px;
}
.sw-update-banner .swub-text {
  flex: 1;
  font-weight: 500;
}
.sw-update-banner .primary-button.tiny {
  background: white;
  color: #1e5167;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  min-height: 28px;
}
.sw-update-banner .primary-button.tiny:hover {
  background: #f1f5f9;
}
.sw-update-banner .ghost-button.tiny {
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  min-width: 28px;
  min-height: 28px;
}
.sw-update-banner .ghost-button.tiny:hover {
  background: rgba(255,255,255,0.25);
}
@media (max-width: 480px) {
  /* Bugjagd: mit left:50% wurde die Meldung auf ~195 px zusammengedrückt (zehn Zeilen hoch).
     Am Handy volle Breite, ohne Verschiebe-Animation. */
  .sw-update-banner { flex-wrap: wrap; bottom: 16px; left: 16px; right: 16px; transform: none; max-width: none; animation: none; }
  .sw-update-banner .swub-text { flex-basis: 100%; }
}

/* v312: Tabellen optisch beruhigen und Spaltenachsen konsistent zentrieren */
.report-table,
.project-overview-table,
.projects-only-table,
.lohn-cockpit-table,
.kontingent-overview-table,
.profit-table {
  border-radius: var(--table-radius, 14px);
  box-shadow: 0 10px 28px rgba(30, 81, 103, 0.055);
}

.report-table th,
.report-table td,
.project-overview-table th,
.project-overview-table td,
.projects-only-table th,
.projects-only-table td,
.lohn-cockpit-table th,
.lohn-cockpit-table td,
.kontingent-overview-table th,
.kontingent-overview-table td,
.profit-table th,
.profit-table td,
.report-table td.num,
.report-table th.num,
.lohn-cockpit-table td.num,
.lohn-cockpit-table th.num,
.kontingent-overview-table td.num,
.kontingent-overview-table th.num,
.profit-table td.num,
.profit-table th.num,
.project-overview-table td:nth-child(n+3),
.projects-only-table td:nth-child(n+3) {
  text-align: center;
  vertical-align: middle;
}

.report-table th,
.project-overview-table th,
.projects-only-table th,
.lohn-cockpit-table th,
.kontingent-overview-table th,
.profit-table th {
  background: linear-gradient(180deg, rgba(241, 248, 252, 0.98), rgba(232, 243, 250, 0.92));
  color: #36576d;
}

.report-table td > *,
.project-overview-table td > *,
.projects-only-table td > *,
.lohn-cockpit-table td > *,
.kontingent-overview-table td > *,
.profit-table td > * {
  margin-left: auto;
  margin-right: auto;
}

.projects-only-empty-group {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.projects-only-empty-group .link-button {
  font-size: 13px;
  white-space: nowrap;
}

.report-table th > button,
.project-overview-table th > button,
.projects-only-table th > button,
.lohn-cockpit-table th > button,
.kontingent-overview-table th > button,
.profit-table th > button {
  justify-content: center;
  width: 100%;
}

.report-table td .notification-item-actions,
.report-table td .doc-item-actions,
.report-table td .management-row-actions,
.report-table td .task-row-hover-actions,
.report-table td .vac-admin-actions,
.project-overview-table td .project-main-cell,
.project-overview-table td .assignee-inline,
.projects-only-table td .project-main-cell,
.projects-only-table td .assignee-inline {
  justify-content: center;
}

.project-overview-table td .project-main-cell,
.projects-only-table td .project-main-cell {
  text-align: left;
}

.projects-only-progress {
  justify-content: center;
  width: min(100%, 220px);
}

.projects-only-pct {
  text-align: center;
}

.report-table-action-cell,
.report-table th:last-child,
.report-table td:last-child,
.project-overview-table th:last-child,
.project-overview-table td:last-child,
.projects-only-table th:last-child,
.projects-only-table td:last-child {
  text-align: center;
}

[data-theme="dark"] .report-table th,
[data-theme="dark"] .project-overview-table th,
[data-theme="dark"] .projects-only-table th,
[data-theme="dark"] .lohn-cockpit-table th,
[data-theme="dark"] .kontingent-overview-table th,
[data-theme="dark"] .profit-table th {
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.055));
  color: var(--color-text-muted);
}

/* v314: Dashboard-Masonry darf nie auf zeilenhohes CSS-Grid zurückfallen */
.home-grid.is-dashboard-masonry {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: var(--grid-gutter, 12px) !important;
}

.home-grid.is-dashboard-masonry > [data-widget-key="workday"],
.home-grid.is-dashboard-masonry > [data-widget-key="work-intelligence"],
.home-grid.is-dashboard-masonry > [data-widget-key="employee-concerns"] {
  grid-column: 1 / -1 !important;
}

.home-grid.is-dashboard-masonry > .dashboard-widget-column {
  min-width: 0;
  align-self: start;
  display: flex !important;
  flex-direction: column;
  gap: var(--grid-gutter, 12px);
}

.home-grid.is-dashboard-masonry > .dashboard-widget-column > [data-widget-key] {
  grid-column: auto !important;
  order: initial !important;
  margin: 0;
}

.home-grid.is-dashboard-masonry > .dashboard-widget-column > [data-widget-key].hidden {
  display: none !important;
}

.home-grid.is-dashboard-masonry.has-one-widget-column,
.home-grid.is-dashboard-masonry.is-dashboard-single-column {
  grid-template-columns: minmax(0, 1fr) !important;
}

.home-grid.is-dashboard-single-column > [data-widget-key] {
  grid-column: 1 !important;
  /* JAS-127: Frühere Kachelregeln setzen eigene `order`-Werte. Auf dem Handy
     entscheidet ausschließlich die von applyDashboardWidgetOrder hergestellte
     DOM-Reihenfolge (rechte Desktop-Spalte vor der linken). */
  order: initial !important;
}

@media (max-width: 600px) {
  .home-grid.is-dashboard-masonry {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v315: Kalender-Einträge direkt bearbeiten */
[data-calendar-event-type] {
  cursor: pointer;
}

[data-calendar-event-type]:focus-visible {
  outline: 3px solid rgba(56, 166, 197, 0.35);
  outline-offset: 2px;
}

.calendar-edit-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 31, 44, 0.38);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.calendar-edit-card {
  width: min(100%, 560px);
  max-height: min(90vh, 760px);
  overflow: auto;
  border: 1px solid var(--color-border, #d8e5ed);
  border-radius: 12px;
  background: var(--color-surface, #fff);
  box-shadow: 0 24px 70px rgba(8, 31, 44, 0.25);
}

.calendar-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--color-border, #d8e5ed);
}

.calendar-edit-head h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.calendar-edit-body {
  padding: 18px 20px 8px;
}

.calendar-edit-hint {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  background: var(--status-pending-bg);
  color: var(--status-pending-text);
  border: 1px solid var(--status-pending-border);
}

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

.calendar-edit-grid label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text-muted, #627386);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.calendar-edit-wide {
  grid-column: 1 / -1;
}

/* Der Dialog „Tag eintragen" blendet Felder je nach gewählter Art aus.
   Die Grid-Regel für Labels ist stärker als .hidden und muss deshalb
   ausdrücklich überstimmt werden. */
.calendar-edit-grid label.hidden {
  display: none;
}

.calendar-edit-grid input,
.calendar-edit-grid select,
.calendar-edit-grid textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--color-border, #d8e5ed);
  border-radius: 10px;
  padding: 9px 11px;
  background: var(--color-surface, #fff);
  color: var(--color-text, #0b2235);
  font: inherit;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.calendar-edit-grid textarea {
  min-height: 84px;
  resize: vertical;
}

.calendar-edit-error {
  margin: 6px 20px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  font-weight: 700;
}

.calendar-edit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--color-border, #d8e5ed);
}

.calendar-edit-spacer {
  flex: 1;
}

.calendar-edit-delete {
  color: #b91c1c;
}

.attendance-entry-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.attendance-entry-main {
  min-width: 0;
}

@media (max-width: 560px) {
  .calendar-edit-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-edit-actions {
    flex-wrap: wrap;
  }

  .calendar-edit-spacer {
    flex-basis: 100%;
    height: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SEVDESK-INTEGRATION
 * ═══════════════════════════════════════════════════════════════════════════ */
.sevdesk-prereq-warning {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--c-warn-soft, #fef9c3);
  border: 1px solid var(--c-warn, #8a5f00);
  border-radius: var(--r-md, 8px);
  align-items: flex-start;
}
.sevdesk-prereq-warning > span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(138, 95, 0, 0.08);
  color: var(--c-warn, #8a5f00);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.sevdesk-prereq-warning strong { display: block; margin-bottom: 4px; }
.sevdesk-prereq-warning .primary-button { margin-top: 10px; }
.sevdesk-section-warning {
  margin-bottom: 14px;
}

.sevdesk-settings-body {
  display: grid;
  gap: 16px;
}

.sevdesk-status-block {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
}
.sevdesk-status-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-pill, 999px);
  font-size: var(--fs-xs, 11px);
  font-weight: 600;
}
.sevdesk-status-pill.is-on { background: var(--c-success-soft, #dcfce7); color: var(--c-success, #14705a); }
.sevdesk-status-pill.is-off { background: var(--c-surface-2, #f1f5f9); color: var(--c-text-muted, #64748b); }

.sevdesk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.inline-icon-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.inline-icon-button .ci-icon-svg,
.sevdesk-link-badge .ci-icon-svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.sevdesk-audit-list { list-style: none; padding: 0; margin: 0; }
.sevdesk-audit-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--c-surface-2, #f1f5f9);
  font-size: var(--fs-sm, 12px);
}
.sevdesk-audit-list li.is-error { color: var(--c-danger, #b91c1c); }
.sevdesk-audit-action { font-weight: 500; }
.sevdesk-audit-status.ok { color: var(--c-success, #14705a); }
.sevdesk-audit-status.err { color: var(--c-danger, #b91c1c); font-size: 11px; }
.sevdesk-audit-list time { color: var(--c-text-muted, #64748b); font-size: 11px; }

/* Angebot → Aufgaben Modal */
.sevdesk-import-modal {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 9600;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.sevdesk-import-card {
  background: var(--c-surface, #fff);
  border: 1px solid var(--overlay-border, var(--c-border, #e5e7eb));
  border-radius: var(--overlay-radius, var(--r-lg, 12px));
  box-shadow: var(--sh-4, 0 20px 50px rgba(0,0,0,.18));
  width: 100%;
  max-width: 680px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sevdesk-import-card header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--c-border, #e5e7eb);
}
.sevdesk-import-card header h3 { margin: 0 0 2px; font-size: var(--fs-xl, 20px); }
.sevdesk-import-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
.sevdesk-import-card footer {
  padding: 14px 22px;
  border-top: 1px solid var(--c-border, #e5e7eb);
  display: flex; justify-content: flex-end; gap: 8px;
  background: var(--c-surface, #fff);
}
.sevdesk-pos-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--r-sm, 6px);
  margin-bottom: 6px;
}
.sevdesk-invoice-preview-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.sevdesk-pos-row.is-excluded { opacity: 0.5; }
.sevdesk-pos-name { font-weight: 500; }
.sevdesk-pos-meta { font-size: 11px; color: var(--c-text-muted, #64748b); }
.sevdesk-pos-target { font-size: 11px; }
.sevdesk-pos-target .form-input,
.sev-pos-target.form-input {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 11px;
}
.sevdesk-import-section {
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--r-md, 8px);
  padding: 12px;
  margin-bottom: 14px;
}
.sevdesk-import-section h4 { margin: 0 0 8px; font-size: var(--fs-md, 14px); }
.sevdesk-search-input,
.sevdesk-full-field {
  width: 100%;
}
.sevdesk-search-input {
  margin-bottom: 12px;
}
.sevdesk-radio-row,
.sevdesk-checkbox-row,
.sevdesk-inline-field-row,
.sevdesk-date-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sevdesk-radio-row {
  margin: 8px 0;
}
.sevdesk-indented-fields {
  display: grid;
  gap: 6px;
  padding-left: 24px;
}
.sevdesk-indented-fields .text-xs,
.sevdesk-import-section > .text-xs {
  margin: 6px 0 0;
}
.sevdesk-inline-field-row {
  flex-wrap: wrap;
  margin-top: 8px;
}
.sevdesk-inline-field-row > label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sevdesk-date-range {
  flex-wrap: wrap;
}
.sevdesk-rate-input {
  width: 96px;
}
.sevdesk-checkbox-row {
  align-items: flex-start;
  margin-top: 4px;
}
.sevdesk-list-hint,
.report-context-note {
  margin-top: 8px;
}

/* Order-Liste im Kunden-Tab */
.sevdesk-order-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--r-sm, 6px);
  margin-bottom: 6px;
  cursor: pointer;
}
.sevdesk-order-row:hover { background: var(--c-primary-soft, rgba(30,81,103,0.08)); }
.sevdesk-order-info strong { display: block; font-size: 14px; }
.sevdesk-order-info span { font-size: 11px; color: var(--c-text-muted, #64748b); }

/* SevDesk-Verknüpfungs-Badge */
.sevdesk-link-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600;
  background: var(--c-info-soft, #e0f2fe); color: var(--c-info, #0369a1);
  padding: 2px 7px; border-radius: var(--r-pill, 999px);
}
.sevdesk-origin-note {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin-bottom: 12px;
  background: var(--c-info-soft, #e0f2fe);
  border-radius: var(--r-sm, 6px);
  font-size: var(--fs-sm, 12px);
}

/* Dark Mode */
[data-theme="dark"] body .sevdesk-import-card { background: var(--c-surface); }

/* ═══════════════════════════════════════════════════════════════════════════
 * v342 — Unteraufgaben in Aufgaben-Listen deutlich einrücken
 * Höhere Spezifität (.is-child) + späteste Position überschreibt die
 * shorthand-padding-Sammelregeln, die die Einrückung sonst wegbügeln.
 * 28px ≈ eine Kreisbreite (state-dot-Spalte) pro Hierarchie-Ebene.
 * ═══════════════════════════════════════════════════════════════════════════ */
.global-awork-task-row.is-child,
.project-task-list-row.is-child {
  /* padding-left überschreibt NUR links; top/bottom/right bleiben erhalten */
  padding-left: calc(8px + var(--task-depth, 1) * 28px) !important;
  position: relative;
}
/* Dezenter vertikaler Hierarchie-Strich an der Einrückungskante */
.global-awork-task-row.is-child::before,
.project-task-list-row.is-child::before {
  content: "";
  position: absolute;
  left: calc(var(--task-depth, 1) * 28px - 6px);
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--c-border-strong, #cbd5e1);
  border-radius: 1px;
  opacity: 0.7;
}

/* v344: Sidebar utility sections share heading scale and collapse behavior */
.side-utility .side-recent,
.side-utility .my-tasks {
  flex: 0 0 auto;
  margin-top: var(--space-4, 16px);
  padding-top: var(--space-4, 16px);
  padding-left: 0;
  padding-right: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.side-utility .side-recent:first-child {
  margin-top: var(--space-3, 12px);
}

.side-utility .side-recent h2,
.side-utility .my-tasks h2,
.side-utility .sidebar-section-title {
  position: static;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(232, 248, 255, 0.7);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.side-utility .sidebar-section-title:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 3px;
  border-radius: 6px;
}

/* v461: innerer Toggle-Button (statt h2[role=button]) — visuell wie der h2 */
.side-utility .sidebar-section-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  text-align: left;
}
.side-utility .sidebar-section-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 3px;
  border-radius: 6px;
}

.side-utility .sidebar-section-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-utility .sidebar-section-arrow {
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid currentColor;
  opacity: 0.75;
  transform-origin: center;
  transition: transform 150ms ease;
}

.side-utility .is-collapsed .sidebar-section-arrow {
  transform: rotate(-90deg);
}

.side-utility .side-recent ul,
.side-utility .my-tasks ul {
  transition: opacity 150ms ease;
}

.side-utility .side-recent.is-collapsed,
.side-utility .my-tasks.is-collapsed {
  max-height: none;
  overflow: visible;
}

.side-utility .side-recent.is-collapsed ul,
.side-utility .my-tasks.is-collapsed ul {
  display: none;
}

.side-utility .side-recent ul {
  display: grid;
  gap: 4px;
}

.sidebar.collapsed .side-utility .side-recent,
.sidebar.collapsed .side-utility .my-tasks {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * v344 — Benutzerdefinierte Wiederholung (Modal + Summary)
 * ═══════════════════════════════════════════════════════════════════════════ */
.recurrence-summary {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--c-primary, #1e5167);
  background: var(--c-primary-soft, rgba(30,81,103,0.08));
  padding: 2px 8px;
  border-radius: 999px;
}
.recurrence-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 9700;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.recurrence-modal {
  background: var(--c-surface, #fff);
  border-radius: var(--r-lg, 12px);
  box-shadow: var(--sh-4, 0 20px 50px rgba(0,0,0,.18));
  width: 100%; max-width: 460px;
  overflow: hidden;
}
.recurrence-modal header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-border, #e5e7eb);
}
.recurrence-modal header h3 { margin: 0; font-size: var(--fs-xl, 20px); }
.recurrence-modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.recurrence-modal footer {
  padding: 14px 20px;
  border-top: 1px solid var(--c-border, #e5e7eb);
  display: flex; justify-content: flex-end; gap: 8px;
}
.rec-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-md, 14px);
}
.rec-interval-input { width: 64px; padding: 6px 8px; border: 1px solid var(--c-border, #e5e7eb); border-radius: 6px; }
.rec-freq-select { padding: 6px 10px; border: 1px solid var(--c-border, #e5e7eb); border-radius: 6px; background: var(--c-surface, #fff); color: var(--c-text, #0f172a); }
.rec-label { display: block; font-size: var(--fs-sm, 12px); font-weight: 600; color: var(--c-text-muted, #64748b); margin-bottom: 6px; }
.rec-weekday-toggles { display: flex; gap: 4px; flex-wrap: wrap; }
.rec-weekday {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--c-border, #e5e7eb);
  background: var(--c-surface, #fff);
  color: var(--c-text-muted, #64748b);
  cursor: pointer;
  font-size: 12px; font-weight: 600;
  transition: all 120ms ease;
}
.rec-weekday:hover { border-color: var(--c-primary, #1e5167); }
.rec-weekday.is-on {
  background: var(--c-primary, #1e5167);
  color: #fff;
  border-color: var(--c-primary, #1e5167);
}
.rec-end-section { display: flex; flex-direction: column; gap: 8px; }
.rec-end-opt { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md, 14px); flex-wrap: wrap; }
.rec-end-opt input[type="date"], .rec-count-input {
  padding: 5px 8px; border: 1px solid var(--c-border, #e5e7eb); border-radius: 6px;
}
.rec-count-input { width: 64px; }
.rec-preview {
  margin: 0; padding: 8px 12px;
  background: var(--c-surface-2, #f1f5f9);
  border-radius: 6px; font-size: var(--fs-sm, 12px);
}
[data-theme="dark"] body .recurrence-modal { background: var(--c-surface); }
[data-theme="dark"] body .rec-interval-input,
[data-theme="dark"] body .rec-freq-select,
[data-theme="dark"] body .rec-weekday,
[data-theme="dark"] body .rec-count-input,
[data-theme="dark"] body .rec-end-opt input[type="date"] { background: var(--c-surface-2); color: var(--c-text); }

/* ── v346: Zeitauswertungen (awork-Stil) ───────────────────────────── */
.auswertung-period-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}
.auswertung-period-select {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
}
.auswertung-controls-card,
.auswertung-summary-card {
  border: 1px solid var(--c-border, #d8e6ee);
  border-radius: 12px;
  background: var(--c-surface, #fff);
  padding: 12px 16px 14px;
}
.auswertung-summary-card { padding: 14px 16px 18px; }
.auswertung-controls-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--c-text-muted, #51626e);
  margin-bottom: 10px;
}
.auswertung-controls-head svg { color: var(--medium-blue); }
.auswertung-controls-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.auswertung-chip-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.auswertung-chip-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-muted, #6b8597);
}
.auswertung-chip-field > select,
.auswertung-chip-field > .report-filter-multiselect-btn {
  min-width: 150px;
}
.auswertung-reset-btn {
  margin-left: auto;
  align-self: flex-end;
  font-size: 13px;
}
/* Zusammenfassung */
.auswertung-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.auswertung-summary-head h3 { margin: 0; font-size: 16px; }
.auswertung-view-toggle {
  display: inline-flex;
  border: 1px solid var(--c-border, #d8e6ee);
  border-radius: 8px;
  overflow: hidden;
}
.auswertung-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  border: none;
  background: var(--c-surface, #fff);
  color: var(--c-text-muted, #6b8597);
  cursor: pointer;
}
.auswertung-view-btn + .auswertung-view-btn { border-left: 1px solid var(--c-border, #d8e6ee); }
.auswertung-view-btn.is-active { background: var(--medium-blue); color: #fff; }
/* KPI cards */
.auswertung-kpi {
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auswertung-kpi-label { margin: 0; font-size: 12px; font-weight: 600; color: inherit; opacity: .85; }
.auswertung-kpi-value { margin: 0; font-size: 22px; font-weight: 700; color: inherit; }
.kpi-total       { background: rgba(124, 92, 246, .10); border-color: rgba(124, 92, 246, .22); color: #6d4bd8; }
.kpi-billable    { background: rgba(230, 167, 35, .12); border-color: rgba(230, 167, 35, .26); color: #b6810f; }
.kpi-invoiced    { background: rgba(22, 160, 96, .10);  border-color: rgba(22, 160, 96, .24); color: #138052; }
.kpi-nonbillable { background: rgba(231, 76, 60, .09);  border-color: rgba(231, 76, 60, .22); color: #c0392b; }
[data-theme="dark"] .kpi-total       { background: rgba(124, 92, 246, .18); border-color: rgba(124, 92, 246, .35); color: #b9a6f5; }
[data-theme="dark"] .kpi-billable    { background: rgba(230, 167, 35, .18); border-color: rgba(230, 167, 35, .35); color: #f2c97a; }
[data-theme="dark"] .kpi-invoiced    { background: rgba(22, 160, 96, .18);  border-color: rgba(22, 160, 96, .35); color: #6fd3a6; }
[data-theme="dark"] .kpi-nonbillable { background: rgba(231, 76, 60, .16);   border-color: rgba(231, 76, 60, .35); color: #f3a097; }
.auswertung-secondary-stats {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--c-text-muted, #51626e);
}
.auswertung-secondary-stats strong { color: var(--c-text, #183d53); }
.auswertung-secondary-stats .is-negative { color: #c0392b; }
.auswertung-summary-body { margin-top: 16px; }
.auswertung-chart-pane { padding: 8px 4px; }
/* Pivot-Matrix */
.report-pivot-wrap { overflow-x: auto; }
.report-pivot {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.report-pivot th, .report-pivot td {
  padding: 8px 12px;
  text-align: right;
  white-space: nowrap;
}
.report-pivot thead th {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-muted, #6b8597);
  text-transform: uppercase;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--c-border, #e2ecf2);
}
.report-pivot-group-head, .report-pivot-group {
  text-align: left !important;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.report-pivot-group { font-weight: 600; color: var(--c-text, #183d53); }
.report-pivot-total-head, .report-pivot-total { font-weight: 700; }
.report-pivot tbody tr { border-bottom: 1px solid var(--c-border, #f0f5f8); }
.report-pivot tbody tr:hover { background: rgba(14, 97, 140, .045); }
.report-pivot-cell { position: relative; min-width: 76px; }
.report-pivot-bar {
  position: absolute;
  left: 8px; right: 8px; bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--medium-blue), #2c9ec9);
  opacity: .4;
}
.report-pivot-val { position: relative; }
.report-pivot-empty { color: var(--c-text-muted, #c2d2dc); opacity: .6; }
.report-pivot tfoot td {
  border-top: 2px solid var(--c-border, #e2ecf2);
  font-weight: 700;
  color: var(--c-text, #183d53);
  background: rgba(14, 97, 140, .04);
}
.report-pivot-total { background: rgba(14, 97, 140, .04); }
/* Details (Einzelne Zeiteinträge) collapsible */
.auswertung-details { padding: 0; }
.auswertung-details-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
}
.auswertung-details-summary::-webkit-details-marker { display: none; }
.auswertung-details-summary h3 { margin: 0; font-size: 15px; }
.auswertung-details-caret { color: var(--c-text-muted, #6b8597); transition: transform .15s; display: inline-flex; }
.auswertung-details[open] .auswertung-details-caret { transform: rotate(180deg); }
.auswertung-details-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0 16px 8px;
}
@media (max-width: 720px) {
  .auswertung-controls-row { gap: 10px; }
  .auswertung-chip-field > select,
  .auswertung-chip-field > .report-filter-multiselect-btn { min-width: 130px; }
  .auswertung-reset-btn { margin-left: 0; }
}

/* v396: QuickSearch — Treffer-Highlight in Label + Sub */
.qs-match {
  background: color-mix(in srgb, #f59e0b 35%, transparent);
  color: inherit;
  padding: 0 1px;
  border-radius: 3px;
  font-weight: 600;
}

/* v376: QuickSearch — Group-Label "Zuletzt besucht" */
.quick-search-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted, #6b7785);
  padding: 8px 14px 4px;
  border-bottom: 1px solid var(--border-soft, #e5e9ee);
  margin-bottom: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   v363 Planner: Parent-Badge bei Unteraufgaben
   ───────────────────────────────────────────────────────────────────── */
.day-planner-parent-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--brand, #1e5167);
  background: color-mix(in srgb, var(--brand, #1e5167) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand, #1e5167) 22%, transparent);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
  line-height: 1.4;
}
.day-planner-parent-badge:hover {
  background: color-mix(in srgb, var(--brand, #1e5167) 16%, transparent);
  border-color: color-mix(in srgb, var(--brand, #1e5167) 40%, transparent);
  text-decoration: underline;
}
.day-planner-parent-badge:focus-visible {
  outline: 2px solid var(--brand, #1e5167);
  outline-offset: 1px;
}
/* Subtask-Karte erhält dezenten linken Akzent */
.day-planner-task-card.is-subtask {
  border-left: 3px solid color-mix(in srgb, var(--brand, #1e5167) 30%, transparent);
}

/* Parent-Krume im Task-Detail-Panel-Breadcrumb */
.project-task-detail-breadcrumb .ptd-crumb-sep {
  margin: 0 6px;
  color: var(--color-text-muted);
  opacity: 0.6;
}
.project-task-detail-breadcrumb .ptd-parent-crumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  font: inherit;
  color: var(--brand, #1e5167);
  background: color-mix(in srgb, var(--brand, #1e5167) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand, #1e5167) 22%, transparent);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-task-detail-breadcrumb .ptd-parent-crumb:hover {
  background: color-mix(in srgb, var(--brand, #1e5167) 16%, transparent);
  border-color: color-mix(in srgb, var(--brand, #1e5167) 40%, transparent);
  text-decoration: underline;
}
.project-task-detail-breadcrumb .ptd-parent-crumb:focus-visible {
  outline: 2px solid var(--brand, #1e5167);
  outline-offset: 1px;
}

/* Parent-Crumb in globaler Aufgaben-Liste (flach gerenderte Subtask) */
.task-title-parent-crumb {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--brand, #1e5167);
  background: color-mix(in srgb, var(--brand, #1e5167) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand, #1e5167) 22%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  vertical-align: middle;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-title-parent-crumb:hover {
  background: color-mix(in srgb, var(--brand, #1e5167) 16%, transparent);
  border-color: color-mix(in srgb, var(--brand, #1e5167) 40%, transparent);
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────
   v359 Icon-System (Sprite-basiert, Lucide-Style outline, currentColor)
   Verwendung: <svg class="kw-icon"><use href="#ic-dashboard"/></svg>
   Größe wird über width/height am Container gesteuert (em-basiert).
   ───────────────────────────────────────────────────────────────────── */
.kw-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
/* Spezielle Größen */
.kw-icon.kw-icon-sm { width: 0.875em; height: 0.875em; }
.kw-icon.kw-icon-lg { width: 1.25em; height: 1.25em; }
.kw-icon.kw-icon-xl { width: 1.5em; height: 1.5em; }
/* Nav-Icons (Sidebar) — feste 20px */
.kw-icon.kw-nav-icon { width: 20px; height: 20px; }
/* Topbar-Icons — feste 20px */
.kw-icon.kw-topbar-icon { width: 20px; height: 20px; }
/* Bottom-Nav-Icons (Mobile) — feste 22px */
.kw-icon.kw-mobile-icon { width: 22px; height: 22px; }
/* Icons in Buttons orientieren sich an Schriftgröße */
button .kw-icon, .ghost-button .kw-icon, .primary-button .kw-icon {
  vertical-align: -0.18em;
}
/* Wenn ein Icon stark gefüllt sein soll (z.B. ausgefüllter Star), nutzt man .kw-icon-filled */
.kw-icon.kw-icon-filled {
  fill: currentColor;
  stroke: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   v358 Dateien-Tab: Drei-Spalten-Layout + Ordnerbaum + Sticky Bulk-Bar
   ───────────────────────────────────────────────────────────────────── */

.files-header-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }

.files-bulk-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface, #fff);
  border: 1px solid var(--border-soft, #e5e9ee);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.files-bulk-bar.hidden { display: none; }
.files-bulk-bar .bulk-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.files-bulk-bar .bulk-bar-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }

.files-tab-grid {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(280px, 360px);
  gap: 12px;
  align-items: start;
}
@media (max-width: 1100px) {
  .files-tab-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .files-tab-preview { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .files-tab-grid { grid-template-columns: 1fr; }
  .files-tab-sidebar { max-height: 240px; overflow: auto; }
}

.files-tab-sidebar {
  background: var(--surface-2, #f6f8fa);
  border: 1px solid var(--border-soft, #e5e9ee);
  border-radius: 10px;
  padding: 8px;
  min-height: 240px;
}
.file-folder-tree { display: flex; flex-direction: column; gap: 2px; }
.file-folder-children { list-style: none; margin: 0; padding-left: calc(8px * var(--depth, 1)); }
.file-folder-item { list-style: none; }
.file-folder-row {
  display: grid;
  grid-template-columns: 16px 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
  font-size: 13px;
}
.file-folder-row:hover { background: rgba(30, 81, 103, 0.05); }
.file-folder-row.active { background: rgba(30, 81, 103, 0.12); font-weight: 500; }
.file-folder-row.root { border-bottom: 1px dashed var(--border-soft, #e5e9ee); padding-bottom: 6px; margin-bottom: 4px; }
.file-folder-row.root:last-of-type { border-bottom: none; }
.file-folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-folder-count {
  font-size: 11px;
  color: var(--muted-fg, #6b7785);
  background: var(--surface, #fff);
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
.file-folder-actions {
  display: none;
  gap: 2px;
}
.file-folder-row:hover .file-folder-actions,
.file-folder-row.active .file-folder-actions {
  display: inline-flex;
}
.file-folder-tree .ghost-button.full-width {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

.files-tab-list { margin: 0; padding: 0; min-height: 240px; }
.files-tab-list .file-list-item {
  display: grid;
  grid-template-columns: 24px 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft, #e5e9ee);
}
.files-tab-list .file-list-item:hover { background: rgba(30, 81, 103, 0.03); }
.files-tab-list .file-list-item.is-checked { background: rgba(30, 81, 103, 0.06); }
.files-tab-list .file-list-item.selected-doc { background: rgba(30, 81, 103, 0.10); }
.files-tab-list .file-checkbox { display: inline-flex; align-items: center; }
.files-tab-list .file-list-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.files-tab-list .file-list-main > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-tab-list .file-list-meta { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; }
.files-tab-list .file-ext-badge {
  background: var(--surface-2, #f0f3f7);
  border: 1px solid var(--border-soft, #e5e9ee);
  border-radius: 6px;
  padding: 4px 0;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted-fg, #6b7785);
}

.file-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2, #f0f3f7);
  border: 1px solid var(--border-soft, #e5e9ee);
  color: var(--muted-fg, #6b7785);
  font-size: 11px;
  font-weight: 500;
  cursor: default;
  text-decoration: none;
}
.file-source-badge.link {
  cursor: pointer;
  color: var(--brand, #1e5167);
  border-color: rgba(30, 81, 103, 0.25);
}
.file-source-badge.link:hover {
  background: rgba(30, 81, 103, 0.08);
  text-decoration: underline;
}
.file-source-badge[data-source-kind="project"] { background: rgba(30, 81, 103, 0.08); color: var(--brand, #1e5167); }
.file-source-badge[data-source-kind="comment"] { background: rgba(135, 92, 230, 0.10); color: #6c4ed1; border-color: rgba(135, 92, 230, 0.25); }

.files-tab-preview {
  background: var(--surface, #fff);
  border: 1px solid var(--border-soft, #e5e9ee);
  border-radius: 10px;
  padding: 12px;
  min-height: 240px;
  max-height: 60vh;
  overflow: auto;
}

/* ──── v466: Birthday-Celebration Overlay ──────────────────── */
.birthday-celebration-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(15, 35, 80, 0.65) 0%, rgba(2, 8, 25, 0.88) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 99000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: birthdayOverlayIn 0.45s ease;
}
.birthday-celebration-overlay.birthday-fadeout {
  animation: birthdayOverlayOut 0.4s ease forwards;
}
@keyframes birthdayOverlayIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes birthdayOverlayOut { to   { opacity: 0; } }

/* Konfetti */
.birthday-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.birthday-confetti-piece {
  position: absolute;
  top: -12vh;
  display: block;
  border-radius: 2px;
  animation: birthdayConfettiFall linear infinite;
  opacity: 0.92;
  will-change: transform;
}
@keyframes birthdayConfettiFall {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0deg); }
  100% { transform: translate3d(var(--drift, 0), 115vh, 0) rotate(var(--rot, 360deg)); }
}

/* Charaktere — v467: Flex-Layout, lückenlose Gruppen-Anordnung am unteren Rand.
   Anzahl wird via --char-count vom JS gesetzt, Char-Breite passt sich an. */
.birthday-celebration-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0px, 0.8vw, 14px);
  padding: 0 1vw;
  --char-count: 5;
}
.birthday-char {
  position: relative;
  /* Char-Breite skaliert mit Anzahl: bei wenigen Bildern größer, bei vielen kleiner.
     85vw verteilbar / N, geclamped auf [60px … 230px]. */
  width: clamp(60px, calc(85vw / var(--char-count, 5)), 230px);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
  opacity: 0;
  animation: birthdayInBottom 0.95s cubic-bezier(.22,.85,.32,1.08) forwards;
  flex: 0 1 auto;
}
@keyframes birthdayInBottom {
  from { transform: translateY(115%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* X-Close-Button oben rechts */
.birthday-celebration-x {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.birthday-celebration-x:hover,
.birthday-celebration-x:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.06);
  outline: none;
}

/* Center-Box */
.birthday-celebration-center {
  position: relative;
  z-index: 10;
  text-align: center;
  color: #fff;
  background: rgba(10, 24, 52, 0.62);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 32px 40px;
  border-radius: 28px;
  max-width: min(560px, 92vw);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: birthdayCenterIn 0.85s 0.30s cubic-bezier(.16,.84,.44,1) backwards;
}
@keyframes birthdayCenterIn {
  from { opacity: 0; transform: scale(0.72) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
.birthday-celebration-hat {
  display: inline-block;
  font-size: 44px;
  line-height: 1;
  margin-bottom: 8px;
  animation: birthdayHatWobble 1.8s ease-in-out infinite;
  transform-origin: 50% 80%;
}
@keyframes birthdayHatWobble {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}
.birthday-celebration-center h1 {
  margin: 0 0 10px;
  font-size: clamp(22px, 3.6vw, 36px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}
.birthday-celebration-center p {
  margin: 0 0 22px;
  font-size: 15px;
  opacity: 0.95;
}
.birthday-celebration-close {
  background: #fff;
  color: #142340;
  border: 0;
  padding: 11px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.birthday-celebration-close:hover,
.birthday-celebration-close:focus-visible {
  transform: translateY(-1px) scale(1.04);
  outline: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

/* Mobile-Tweaks — Char-Breite skaliert weiterhin via clamp() mit --char-count,
   nur Min-/Max enger gefasst und Card kompakter. */
@media (max-width: 640px) {
  /* Untergrenze 35px: garantiert auch bei 10 Charakteren auf 375px keinen Overflow.
     Bei 4 Charakteren: ~85px, bei 6: ~57px, bei 10: ~36px — alle lesbar. */
  .birthday-char {
    width: clamp(35px, calc(95vw / var(--char-count, 5)), 120px);
  }
  .birthday-celebration-stage { gap: 2px; padding: 0 4px; }
  .birthday-celebration-center { padding: 22px 24px; border-radius: 22px; }
  .birthday-celebration-x { top: 12px; right: 12px; width: 36px; height: 36px; font-size: 22px; }
}

/* Reduced-Motion: keine Animation, kein Konfetti, keine Charaktere */
@media (prefers-reduced-motion: reduce) {
  .birthday-celebration-overlay,
  .birthday-celebration-center,
  .birthday-celebration-hat { animation: none !important; }
  .birthday-celebration-center { opacity: 1; transform: none; }
  .birthday-confetti,
  .birthday-celebration-stage { display: none; }
}


/* ─── v474 / Phase 4: Bridge-Settings + Sidebar-KoShot-Link ─── */
.bridge-settings-header { display: flex; flex-direction: column; gap: 4px; }
.bridge-settings-header h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.bridge-status-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--line, #bbb);
  flex-shrink: 0;
}
.bridge-status-dot.is-paired { background: #27ae60; box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.18); }
.bridge-status-dot.is-error  { background: #e74c3c; }
.bridge-settings-panel { display: flex; flex-direction: column; gap: 14px; }
.bridge-settings-panel.hidden { display: none; }
.bridge-pairing-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) {
  .bridge-pairing-modes { grid-template-columns: 1fr; }
}
.bridge-mode-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  background: var(--card-soft, #f8fafc);
}
.bridge-mode-card h4 { margin: 0; font-size: 14px; }
.bridge-mode-card p.muted { margin: 0; font-size: 12px; }
.bridge-pin-display {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--card, #fff);
  border: 1px dashed var(--medium-blue, #2e86ab);
  border-radius: 8px;
}
.bridge-pin-code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--medium-blue, #2e86ab);
}
.bridge-paired-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.bridge-external-icon {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.9em;
}
/* v527 / Phase 12: Bridge-Sync-Settings */
.bridge-sync-section {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color, #2a3240);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bridge-sync-section h4 {
  font-size: 0.95rem;
  margin: 0;
  letter-spacing: 0.02em;
}
.bridge-sync-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.bridge-sync-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-color, #2a3240);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bridge-sync-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.bridge-sync-card-title {
  font-weight: 600;
  font-size: 0.9rem;
}
.bridge-sync-card-meta {
  font-size: 0.75rem;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.bridge-sync-card .ghost-button {
  align-self: flex-start;
}
.bridge-sync-optin summary {
  cursor: pointer;
  font-size: 0.9rem;
  user-select: none;
  list-style: none;
  padding: 4px 0;
}
.bridge-sync-optin summary::-webkit-details-marker {
  display: none;
}
.bridge-sync-optin summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s ease;
  opacity: 0.6;
}
.bridge-sync-optin[open] summary::before {
  transform: rotate(90deg);
}
.bridge-sync-userlist {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
}
.bridge-sync-userlist li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.85rem;
}
.bridge-sync-userlist li.is-disabled {
  opacity: 0.5;
}
.bridge-sync-userlist li.is-inactive {
  opacity: 0.4;
  font-style: italic;
}
.bridge-sync-userlist li label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
}
.bridge-sync-userlist li input[type="checkbox"] {
  cursor: pointer;
}
.bridge-sync-userlist li .user-meta {
  font-size: 0.75rem;
  opacity: 0.6;
}
.bridge-error {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(231, 76, 60, 0.08);
  border: 1px solid rgba(231, 76, 60, 0.3);
  color: #c0392b;
  font-size: 13px;
}
.muted.small { font-size: 12px; }

/* Sidebar KoShot-Link */
.bridge-external-link .bridge-external-icon {
  font-size: 0.85em;
  margin-left: 3px;
}

.family-app-logo {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: block;
  object-fit: contain;
  border-radius: 8px;
  padding: 3px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(30, 81, 103, 0.12);
}

[data-theme="dark"] .bridge-mode-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .bridge-pin-display { background: rgba(255,255,255,0.04); }

/* ── v478 / Phase 6: Projekt-Verknüpfungs-Tabelle ──── */
.bridge-links-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bridge-links-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.bridge-links-table th, .bridge-links-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  vertical-align: middle;
  font-size: 13px;
}
.bridge-links-table th { font-weight: 600; color: var(--text-muted, #64748b); background: transparent; }
.bridge-links-table tr.is-linked td { background: rgba(39, 174, 96, 0.05); }
.bridge-links-table select { min-width: 200px; padding: 6px 8px; }
.bridge-links-table .bridge-link-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 2px 8px;
  border-radius: 999px; background: rgba(39, 174, 96, 0.12); color: #1d6e3a;
}
.bridge-links-table .ghost-button.tiny { padding: 4px 10px; font-size: 12px; }
.bridge-links-empty { padding: 20px; text-align: center; color: var(--text-muted, #64748b); }

[data-theme="dark"] .bridge-links-table tr.is-linked td { background: rgba(39, 174, 96, 0.1); }
[data-theme="dark"] .bridge-links-table .bridge-link-badge { background: rgba(39, 174, 96, 0.2); color: #5fd185; }

/* v480 / Phase 7: KoShot-Verknüpfungs-Badge in Projekt-Liste */
.bridge-project-link-badge {
  display: inline-block;
  font-size: 13px;
  margin-left: 6px;
  cursor: help;
  opacity: 0.85;
  vertical-align: middle;
}
.bridge-project-link-badge:hover { opacity: 1; }

/* v486 / Phase 10: Bridge-Notifications + Auto-Tasks */
.bridge-notif-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 11px;
  background: var(--medium-blue, #2e86ab);
  color: #fff;
  margin-left: 6px;
  vertical-align: middle;
}
.bridge-notif-count:empty { display: none; }
.bridge-notifications-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bridge-notif-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--card-soft, #f8fafc);
}
.bridge-notif-item.is-unread {
  border-left: 3px solid var(--medium-blue, #2e86ab);
  background: rgba(46, 134, 171, 0.04);
}
.bridge-notif-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}
.bridge-notif-title > span:first-child {
  /* v491: Title-Text bekommt erste Spalte, ggf. mit overflow-ellipsis */
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
}
.bridge-notif-kind {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--line, #e5e7eb);
  color: var(--text-muted, #64748b);
  font-weight: 500;
}
.bridge-notif-body { margin: 0; font-size: 13px; }
.bridge-notif-meta { font-size: 11px; color: var(--text-muted, #64748b); }
.bridge-notif-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
/* v493 R7: Dark-Mode-fähiger Divider im KoShot-Deep-Link-Popover */
.bridge-popover-divider {
  margin: 6px 0;
  border: none;
  border-top: 1px solid var(--line, #e5e7eb);
}

/* v499 / Inbox-Bridge Phase 3: TaskUlf-Inbox-Cards */
#kwInboxBridgeWrap.hidden { display: none; }
#kwInboxBridgeWrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 18px;
  padding: 14px;
  border: 1px solid var(--medium-blue, #2e86ab);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(46,134,171,0.06) 0%, rgba(46,134,171,0.02) 100%);
}
#kwInboxBridgeWrap > h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--medium-blue, #2e86ab);
  letter-spacing: 0.02em;
}
.kw-inbox-bridge-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  background: var(--card-bg, #fff);
}
.kw-inbox-bridge-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  flex-wrap: wrap;
}
.kw-inbox-bridge-source {
  font-weight: 600;
  color: var(--medium-blue, #2e86ab);
  background: rgba(46,134,171,0.10);
  padding: 2px 8px;
  border-radius: 999px;
}
.kw-inbox-bridge-sender { font-weight: 500; }
.kw-inbox-bridge-time { margin-left: auto; opacity: 0.8; }
.kw-inbox-bridge-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.kw-inbox-bridge-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary, #334155);
  white-space: pre-line;
}
.kw-inbox-bridge-suggestion {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--card-soft, #f8fafc);
}
.kw-inbox-bridge-chip {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--line, #e5e7eb);
  color: var(--text-secondary, #334155);
}
.kw-inbox-bridge-chip.muted { opacity: 0.55; }
.kw-inbox-bridge-tags { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; margin-top: 4px; }
.kw-inbox-bridge-tag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--card-bg, #fff);
  color: var(--text-muted, #64748b);
  border: 1px dashed var(--line, #e5e7eb);
}
.kw-inbox-bridge-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
[data-theme="dark"] #kwInboxBridgeWrap {
  background: linear-gradient(180deg, rgba(46,134,171,0.12) 0%, rgba(46,134,171,0.04) 100%);
}
[data-theme="dark"] .kw-inbox-bridge-item {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .kw-inbox-bridge-suggestion { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .kw-inbox-bridge-chip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); }
@media (max-width: 560px) {
  .kw-inbox-bridge-head { font-size: 11px; }
  .kw-inbox-bridge-title { font-size: 14px; }
}
.bridge-notif-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted, #64748b);
}
[data-theme="dark"] .bridge-notif-item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }

/* WhatsApp-Eingang P3: Anhang-Vorschau (Aufgaben-Dokumente + Dateien-Tab) */
.kw-whatsapp-doc-preview {
  max-width: 100%;
  max-height: 420px;
  border-radius: 8px;
}
.kw-whatsapp-doc-office {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kw-whatsapp-doc-download { display: flex; }

/* WhatsApp-Eingang P3: Kopplungscode in „Mein Konto" */
.kw-whatsapp-code-box {
  border: 1px dashed var(--line, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}
.kw-whatsapp-code-gross {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 0 0 4px;
}
.kw-whatsapp-code-aktionen {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 8px 0;
}
.kw-whatsapp-code-erfolg {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-success, #1a7f37);
  text-align: center;
}
[data-theme="dark"] .kw-whatsapp-code-box { border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .bridge-notif-item.is-unread { background: rgba(46, 134, 171, 0.1); }
.info-banner {
  padding: 10px 12px;
  border: 1px solid #b9d9e2;
  border-radius: 11px;
  color: #245568;
  background: #eef8fb;
  font-size: 0.92rem;
  line-height: 1.45;
}

[data-theme="dark"] .info-banner {
  border-color: rgba(110, 190, 210, 0.35);
  color: #cfeaf1;
  background: rgba(47, 121, 143, 0.22);
}
/* Importer */
.importer-shell { min-width: 0; }
.importer-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-border, #d8e2e6);
  border-radius: 12px;
  background: var(--color-surface-muted, #f3f7f8);
  overflow-x: auto;
}
.importer-tabs button {
  min-height: 44px;
  padding: 7px 14px;
  border: 0;
  border-radius: 9px;
  color: var(--color-text-muted, #58717c);
  background: transparent;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.importer-tabs button.is-active {
  color: var(--color-primary-dark, #12586b);
  background: var(--color-surface, #fff);
  box-shadow: 0 1px 4px rgb(20 62 77 / 12%);
}
.importer-pane { display: none; }
.importer-pane.is-active { display: block; }
.importer-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.importer-card-heading h3 { margin-bottom: 4px; }
.importer-dropzone {
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: 22px;
  border: 2px dashed #9ab9c4;
  border-radius: 14px;
  color: #365f6e;
  background: #f5fafb;
  text-align: center;
  cursor: pointer;
}
.importer-dropzone:hover { border-color: #2a7f94; background: #eef8fa; }
.importer-dropzone:focus-within { outline: 3px solid rgba(42, 127, 148, 0.25); outline-offset: 2px; }
.importer-dropzone input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.importer-dropzone strong { font-size: 15px; }
.importer-dropzone span { margin-top: 4px; color: #51626e; font-size: 12px; }
.importer-dataset {
  padding: 14px;
  border: 1px solid var(--color-border, #d8e2e6);
  border-radius: 12px;
  background: var(--color-surface, #fff);
}
.importer-dataset.is-invalid { border-color: #dfa3a3; }
.importer-mapping select.is-invalid { border-color: #c94c4c; box-shadow: 0 0 0 2px rgba(201, 76, 76, 0.12); }
.importer-dataset-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.importer-dataset-meta { min-width: 0; }
.importer-dataset-meta strong, .importer-dataset-meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.importer-dataset-meta span { margin-top: 3px; color: #6a818a; font-size: 12px; }
.importer-dataset-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.importer-mapping { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-top: 12px; }
.importer-mapping label { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(120px, 1.2fr); align-items: center; gap: 8px; font-size: 12px; }
.importer-mapping label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.importer-dataset-error,
.importer-dataset-ok {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 12px;
}
.importer-dataset-error { color: #842c2c; background: #fff0f0; border: 1px solid #edbaba; }
.importer-dataset-ok { color: #246348; background: #eff9f3; border: 1px solid #c0dfcc; }
#importerSourceHint { min-height: 1.3em; line-height: 1.3; }
.importer-summary { display: grid; grid-template-columns: repeat(6, minmax(72px, 1fr)); gap: 8px; }
.importer-summary.hidden,
.importer-preview-table.hidden { display: none; }
.importer-stat { padding: 10px; border: 1px solid #d6e3e7; border-radius: 10px; background: #fff; }
.importer-stat strong, .importer-stat span { display: block; }
.importer-stat strong { font-size: 19px; color: #174f60; }
.importer-stat span { color: #71868e; font-size: 11px; }
.importer-stat.is-error { border-color: #e7b7b7; background: #fff6f6; }
.importer-stat.is-new { border-color: #b7dfc8; background: #f4fbf7; }
.importer-preview-table { max-height: 430px; overflow: auto; border: 1px solid #d8e2e6; border-radius: 12px; }
.importer-preview-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.importer-preview-table th { position: sticky; top: 0; z-index: 1; background: #edf5f7; color: #315c6b; text-align: left; }
.importer-preview-table th, .importer-preview-table td { padding: 8px 10px; border-bottom: 1px solid #e4ecef; vertical-align: top; }
.importer-preview-table tr:last-child td { border-bottom: 0; }
.importer-status { display: inline-flex; padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.importer-status-new { color: #17643d; background: #dcf4e6; }
.importer-status-update { color: #785c0c; background: #fff0bd; }
.importer-status-unchanged, .importer-status-skip { color: #526b75; background: #e8eff2; }
.importer-status-error { color: #8b2424; background: #fde2e2; }
.importer-actions { justify-content: flex-start; flex-wrap: wrap; }
.importer-export-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.importer-action-card {
  min-height: 86px;
  padding: 14px;
  border: 1px solid #d7e3e7;
  border-radius: 12px;
  color: inherit;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.importer-action-card:hover { border-color: #75aaba; box-shadow: 0 4px 14px rgb(28 83 101 / 10%); }
.importer-action-card strong, .importer-action-card span { display: block; }
.importer-action-card span { margin-top: 5px; color: #6b818a; font-size: 12px; line-height: 1.4; }
.importer-format-select { max-width: 300px; }
.importer-history-entry { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #e2eaed; }
.importer-history-entry:last-child { border-bottom: 0; }
.importer-history-entry p { margin: 3px 0 0; }
[data-theme="dark"] .importer-dropzone,
[data-theme="dark"] .importer-action-card,
[data-theme="dark"] .importer-stat,
[data-theme="dark"] .importer-dataset { background: var(--color-surface); }
@media (max-width: 800px) {
  .importer-card-heading { display: grid; }
  .importer-mapping, .importer-export-grid { grid-template-columns: 1fr; }
  .importer-summary { grid-template-columns: repeat(3, minmax(72px, 1fr)); }
}
@media (max-width: 520px) {
  .topbar {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }
  .importer-summary { grid-template-columns: repeat(2, minmax(72px, 1fr)); }
  .importer-dataset-head { align-items: stretch; flex-direction: column; }
  .importer-dataset-controls { display: grid; grid-template-columns: 1fr auto; }
  .importer-dataset-controls select,
  .importer-dataset-controls button,
  .importer-actions button { min-height: 44px; }
  .importer-mapping label { grid-template-columns: 1fr; }
}

/* UX hardening v536: clearer navigation, contained wide content, mobile touch targets */
.side-nav-label {
  display: block;
  padding: 7px 16px 3px;
  color: rgba(232, 248, 255, 0.68);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sidebar.collapsed .side-nav-label {
  display: none;
}

#importerSettingsBody.is-loading {
  opacity: 0.68;
  pointer-events: none;
}

#view-aufgaben .task-layout,
#view-aufgaben .global-awork-task-list-shell,
#view-aufgaben .global-awork-task-list-card {
  max-width: 100%;
  min-width: 0;
}

#view-aufgaben .global-awork-task-list-card {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

@media (max-width: 768px) {
  html,
  body,
  .app-shell,
  .main,
  .view {
    max-width: 100%;
    min-width: 0;
  }

  html,
  body {
    overflow-x: hidden;
  }

  .view {
    overflow-x: clip;
  }

  .calendar-grid,
.global-awork-task-list-card,
.project-task-list-wrap,
.management-list,
.lohn-table-wrap {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  #view-aufgaben .global-awork-task-list-rows {
    min-width: 680px;
  }

  .management-row,
.user-overview-row {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100%;
  }

  .management-row-actions {
    justify-content: flex-start;
  }

  .management-toolbar,
.user-overview-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .view button:not(.task-collapse-btn),
  .view [role="button"],
  .view a.side-link {
    min-height: 44px !important;
  }

  .view .task-icon-button,
  .view .icon-button,
  .view .task-timer-play-button,
  .view .modal-close-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .management-row-actions .ghost-button.tiny,
  #view-lohn .ghost-button.tiny,
  #view-user .ghost-button.tiny,
  #view-kunden .ghost-button.tiny,
  #view-planer .ghost-button.tiny {
    height: auto !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
  }
}

@media (max-width: 768px) {
  #dashboardCustomizeButton {
    min-height: 44px !important;
    padding-block: 9px !important;
  }

  .ghost-button.square {
    width: 44px !important;
    min-width: 44px !important;
  }

  .calendar-presence-pill[role="button"] {
    min-width: 44px !important;
  }
}

/* Lokale Meeting-Vorbereitung (meetergo Log) */
#meetingPrepModal {
  z-index: 1100;
}

.meeting-prep-trigger {
  border-color: color-mix(in srgb, var(--color-primary, #297b96) 38%, var(--line));
  color: var(--color-text, #1a2e3b);
}

.meeting-prep-modal {
  width: min(720px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
  overflow: auto;
}

.meeting-prep-header,
.meeting-prep-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.meeting-prep-header h2 {
  margin: 2px 0 0;
  font-size: 20px;
}

.meeting-prep-eyebrow {
  color: var(--color-text-muted, #51626e);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.meeting-prep-body {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.meeting-prep-context-card,
.meeting-prep-notice,
.meeting-prep-consent,
.meeting-prep-import {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--color-surface, #fff);
}

.meeting-prep-context-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
}

.meeting-prep-context-card > div {
  min-width: 0;
}

.meeting-prep-context-card strong {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meeting-prep-context-card p,
.meeting-prep-tool-row p {
  margin: 4px 0 0;
  font-size: 12px;
}

.meeting-prep-notice {
  padding: 12px 14px;
  border-color: color-mix(in srgb, var(--color-primary, #297b96) 35%, var(--line));
  background: color-mix(in srgb, var(--color-primary, #297b96) 7%, var(--color-surface, #fff));
  font-size: 13px;
  line-height: 1.45;
}

.meeting-prep-notice.is-limited {
  border-color: color-mix(in srgb, #e2a228 45%, var(--line));
  background: color-mix(in srgb, #e2a228 8%, var(--color-surface, #fff));
}

.meeting-prep-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: meeting-step;
}

.meeting-prep-steps li {
  position: relative;
  min-height: 112px;
  padding: 14px 12px 12px 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  counter-increment: meeting-step;
}

.meeting-prep-steps li::before {
  content: counter(meeting-step);
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary, #297b96);
  color: white;
  font-size: 11px;
  font-weight: 800;
}

.meeting-prep-steps strong,
.meeting-prep-steps span {
  display: block;
}

.meeting-prep-steps strong {
  margin-bottom: 5px;
  font-size: 13px;
}

.meeting-prep-steps span {
  color: var(--color-text-muted, #51626e);
  font-size: 12px;
  line-height: 1.4;
}

.meeting-prep-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}

.meeting-prep-consent input {
  flex: 0 0 auto;
  margin-top: 2px;
}

.meeting-prep-tool-row {
  display: grid;
  gap: 8px;
}

.meeting-prep-tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meeting-prep-tool-row .primary-button,
.meeting-prep-tool-row .ghost-button {
  flex: 0 0 auto;
}

.meeting-prep-import {
  padding: 13px 14px;
}

.meeting-prep-import summary {
  font-weight: 700;
  cursor: pointer;
}

.meeting-prep-import > p {
  margin: 8px 0 12px;
  font-size: 12px;
}

.meeting-import-preview {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.meeting-import-preview > label:first-child {
  font-size: 12px;
  font-weight: 700;
}

.meeting-import-preview textarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
}

.meeting-store-consent {
  background: color-mix(in srgb, var(--color-primary, #297b96) 5%, var(--color-surface, #fff));
}

.meeting-prep-footer {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  color: var(--color-text-muted, #51626e);
  font-size: 12px;
}

@media (max-width: 680px) {
  .meeting-prep-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .meeting-prep-steps {
    grid-template-columns: 1fr;
  }

  .meeting-prep-steps li {
    min-height: 0;
  }

  .meeting-prep-context-card,
  .meeting-prep-tool-row,
  .meeting-prep-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .meeting-prep-tool-row .primary-button,
  .meeting-prep-tool-row .ghost-button,
  .meeting-prep-tool-actions,
  .meeting-prep-context-card button,
  .meeting-prep-footer button {
    width: 100%;
  }
}

/* ═══════════ KI-Chat-Assistent (Agent) — Seiten-Panel ═══════════════════
 * Slide-in von rechts (Desktop), volle Breite als Drawer (Mobil). Bleibt beim
 * Navigieren offen (kein Overlay-Hintergrund, Hauptbereich bleibt bedienbar).
 * Siehe ki-konzept/KI-KoWork-Agent-Chat.md, Kapitel 2. */
.ai-agent-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 100vw;
  background: var(--color-surface, #fff);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  z-index: 9500;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 220ms ease;
}
.ai-agent-panel.is-open {
  transform: translateX(0);
}

/* Minimiert: nur die Kopfzeile bleibt als kleiner, anklickbarer Tab unten
   rechts stehen — Konversation läuft im Hintergrund unverändert weiter. */
.ai-agent-panel.is-minimized {
  top: auto;
  height: auto;
  width: 260px;
  border-radius: 12px 0 0 0;
  box-shadow: var(--shadow-lg);
}
.ai-agent-panel.is-minimized .ai-agent-header {
  cursor: pointer;
  border-bottom: none;
}
.ai-agent-panel.is-minimized .ai-agent-context-chip,
.ai-agent-panel.is-minimized .ai-agent-messages,
.ai-agent-panel.is-minimized .ai-agent-history-list,
.ai-agent-panel.is-minimized .ai-agent-template-form,
.ai-agent-panel.is-minimized .ai-agent-attachment-preview,
.ai-agent-panel.is-minimized .ai-agent-input-row {
  display: none;
}

.ai-agent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.ai-agent-header h3 {
  margin: 0;
  font-size: 15px;
  color: var(--dark-blue);
}
.ai-agent-header-actions {
  display: flex;
  gap: 4px;
}

.ai-agent-context-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 16px 0;
  padding: 6px 10px;
  border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, var(--dark-blue) 10%, transparent);
  color: var(--dark-blue);
  font-size: 12px;
}
.ai-agent-context-chip button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  opacity: 0.7;
}
.ai-agent-context-chip button:hover {
  opacity: 1;
}
.ai-agent-context-chip.hidden {
  display: none;
}

.ai-agent-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-agent-messages.hidden {
  display: none;
}

.ai-agent-msg {
  max-width: 92%;
  padding: 8px 12px;
  border-radius: var(--radius-md, 10px);
  line-height: var(--line-body, 1.5);
  font-size: 13px;
  white-space: normal;
}
.ai-agent-msg-user {
  align-self: flex-end;
  background: var(--dark-blue);
  color: #fff;
}
.ai-agent-msg-assistant {
  align-self: flex-start;
  background: color-mix(in srgb, var(--line) 40%, transparent);
  color: var(--color-text);
}

/* Tippindikator — kein Token-Streaming, nur eine Wartezeit-Rückmeldung */
.ai-agent-typing {
  padding: 12px 14px;
}
.ai-agent-typing-dots {
  display: inline-flex;
  gap: 4px;
}
.ai-agent-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  animation: ai-agent-typing-bounce 1.2s infinite ease-in-out;
}
.ai-agent-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-agent-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-agent-typing-bounce {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* JAS-104: gemeinsamer Ladezustand-Baustein für jeden Knopf, der eine
   KI-Anfrage auslöst (siehe kwAiButtonBusy in app.js). Passt inline in
   Buttons und Status-Zeilen, Farbe unabhängig vom Text (currentColor würde
   im disabled-Zustand mit blasser). */
.kw-ai-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 6px;
  vertical-align: -2px;
  border: 2px solid var(--c-border, rgba(0, 0, 0, .15));
  border-top-color: var(--c-primary, #297b96);
  border-radius: 50%;
  animation: kwAiSpin 0.7s linear infinite;
}
@keyframes kwAiSpin { to { transform: rotate(360deg); } }

.ai-agent-confirm-card {
  border: 1px solid var(--dark-blue);
  border-radius: var(--radius-md, 10px);
  padding: 10px 12px;
  background: var(--color-surface, #fff);
}
.ai-agent-confirm-card strong {
  display: block;
  font-size: 12px;
  color: var(--dark-blue);
  margin-bottom: 4px;
}
.ai-agent-confirm-card p {
  margin: 4px 0;
}
.ai-agent-confirm-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: flex-end;
}

/* "Ändern"-Inline-Formular in der Bestätigungs-Karte */
.ai-agent-change-form {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.ai-agent-change-form input {
  flex: 1 1 160px;
  min-width: 0;
  box-sizing: border-box;
}

/* JAS-046: Websuche — Suchbegriff in der Rückfrage und Quellen-Links */
.ai-agent-websearch-query {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ai-agent-sources {
  margin: 6px 0 0;
  padding-left: 18px;
}
.ai-agent-sources li {
  margin: 2px 0;
  overflow-wrap: anywhere;
}

.ai-agent-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-agent-history-list.hidden {
  display: none;
}
.ai-agent-history-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 10px;
  background: none;
  cursor: pointer;
  width: 100%;
}
.ai-agent-history-item:hover {
  background: color-mix(in srgb, var(--dark-blue) 6%, transparent);
}
.ai-agent-history-title {
  font-size: 13px;
  color: var(--color-text-strong);
}
.ai-agent-history-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.ai-agent-history-row .ai-agent-history-item {
  flex: 1;
  min-width: 0;
}
.ai-agent-history-row-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
}

/* Custom Agents (Vorlagen) — Werkzeugleiste über der Vorlagen-Liste */
.ai-agent-templates-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

/* Custom Agents (Vorlagen) — An-/Bearbeiten-Formular, eigene Ansicht im
   selben Panel (kein Modal, gleiches Muster wie der Verlauf). */
.ai-agent-template-form {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 16px;
}
.ai-agent-template-form.hidden {
  display: none;
}
.ai-agent-template-form-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-agent-template-form-inner h4 {
  margin: 0 0 4px;
}
.ai-agent-template-form-inner label {
  margin-top: 6px;
}
.ai-agent-template-form-inner input,
.ai-agent-template-form-inner select,
.ai-agent-template-form-inner textarea {
  box-sizing: border-box;
  width: 100%;
  font: inherit;
}
.ai-agent-template-form-inner textarea {
  resize: vertical;
}
.ai-agent-template-form-inner .ai-agent-confirm-actions {
  margin-top: 12px;
}

.ai-agent-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.ai-agent-input-row input[type="text"] {
  flex: 1;
  box-sizing: border-box;
  min-width: 0;
}

/* Stufe 3: Bild-Anhang-Vorschau */
.ai-agent-attachment-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.ai-agent-attachment-preview.hidden {
  display: none;
}
#aiAgentAttachmentThumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--line);
}
.ai-agent-attachment-preview button {
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0.7;
  font-size: 13px;
}
.ai-agent-attachment-preview button:hover {
  opacity: 1;
}

/* Stufe 3: Sprach-Eingabe — Mikrofon pulsiert, solange zugehört wird */
[data-ai-agent-mic].is-recording {
  color: #ef4444;
  animation: ai-agent-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes ai-agent-mic-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@media (max-width: 768px) {
  .ai-agent-panel {
    width: 100vw;
  }
}

/* Dark Mode — .ai-agent-panel nutzt KEINE .panel-Klasse, deshalb hier eigene
 * Overrides (analog zu [data-theme="dark"] .panel weiter oben in dieser Datei). */
[data-theme="dark"] .ai-agent-panel {
  background: rgba(18, 32, 42, 0.97);
  border-left-color: rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .ai-agent-msg-assistant {
  background: rgba(255, 255, 255, 0.07);
  color: var(--dark-grey, #e2edf3);
}
[data-theme="dark"] .ai-agent-confirm-card {
  background: rgba(18, 32, 42, 0.97);
  border-color: var(--dark-blue);
}
[data-theme="dark"] .ai-agent-history-item {
  border-color: rgba(255, 255, 255, 0.07);
  color: var(--dark-grey, #e2edf3);
}
[data-theme="dark"] .ai-agent-history-title {
  color: var(--dark-grey, #e2edf3);
}
[data-theme="dark"] .ai-agent-context-chip {
  background: rgba(44, 158, 201, 0.18);
  color: #9fd8ea;
}
[data-theme="dark"] #aiAgentAttachmentThumb {
  border-color: rgba(255, 255, 255, 0.07);
}
/* Ein global sehr spezifisches Formularfeld-Selektor-Bündel (siehe
 * ":not([type=checkbox])..."-Regel weiter oben in dieser Datei) gewinnt sonst
 * gegen die allgemeine Dark-Mode-Eingabe-Regel und lässt das Eingabefeld
 * weiß — ID-Selektor hier, um das gezielt (nur für dieses Feld) zu korrigieren. */
[data-theme="dark"] #aiAgentInput,
[data-theme="dark"] #aiAgentChangeInput {
  background: #1a2d3a;
  color: var(--dark-grey, #e2edf3);
  border-color: var(--line);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * v674 — ABGESCHNITTENE INHALTE IN DER GETEILTEN AUFGABEN-ANSICHT
 * ───────────────────────────────────────────────────────────────────────────
 * Sobald rechts das Aufgaben-Detail aufgeht, halbiert sich die Liste links.
 * Vier Stellen haben das bisher nicht mitgemacht und Inhalte einfach
 * abgeschnitten ("A…", "H…", "Fr…" statt "Alle", "Heute", "Fristen").
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1) Filter-Chips: eigene Zeile statt Restplatz ────────────────────────────
 * Suchfeld und Sortier-Auswahl dürfen nicht schrumpfen (flex-shrink: 0), die
 * Chip-Gruppen dagegen schon — und weil sie zusätzlich "overflow-x: auto"
 * haben, dürfen sie bis auf 0 px zusammenfallen. Ergebnis: sie quetschen sich
 * in den Rest der ersten Zeile (77 px) statt umzubrechen. Mit "flex-basis:
 * 100%" bekommt jede Chip-Gruppe garantiert ihre eigene Zeile. */
#projectAufgabenContent .project-task-toolbar-left > .project-task-assignee-filter,
#projectAufgabenContent .project-task-toolbar-left > .project-task-deadline-filter,
#projectAufgabenContent .project-task-toolbar-left > .project-task-tag-filter {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}

/* ── 2) Aufgabenzeile: Titel bekommt Vorrang vor den Meta-Chips ──────────────
 * Die letzte Spalte war "auto" (= so breit wie ihr Inhalt) und hat sich alles
 * genommen, was sie wollte; der Titel behielt nur seine Mindestbreite von
 * 140 px. Jetzt darf die Chip-Spalte bis 0 schrumpfen, und die Chips brechen
 * in eine zweite Zeile um, statt abgeschnitten zu werden. */
.project-task-list-row {
  grid-template-columns: 14px 22px 14px 28px minmax(160px, 1fr) minmax(0, auto);
}
.project-task-list-row .project-task-row-right {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 2px;
  justify-content: flex-end;
}

/* ── 3) Zeitverteilung nach Mitglied: Zeitspalte war zu schmal ───────────────
 * 54 px reichen für "1h 5 Min", nicht für "16h 30 Min" — das brach um und
 * überlappte die Prozentangabe. */
.proj-member-dist-row {
  grid-template-columns: 26px minmax(0, 140px) 1fr max-content 38px;
}
.proj-member-dist-time {
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * v674 — SCHRIFTGRÖSSEN IN DEN KENNZAHL-WIDGETS
 * ───────────────────────────────────────────────────────────────────────────
 * Die Zahlen waren so groß, dass längere Werte ("19h 45 Min / 1h 40 Min",
 * "2.136 / 24.000 €") nicht mehr passten und mit "…" abgeschnitten wurden.
 * Lieber etwas kleiner und vollständig lesbar.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Große KPI-Karten (Projekt-Home, Dashboard, Lohn, Auswertungen). */
:root {
  --kpi-value-size: clamp(18px, 1.7vw, 24px);
}

/* Projekt-/Dashboard-Faktenkarten: kleiner, und bei zusammengesetzten Werten
 * ("Ist / Plan", "Ausgegeben / Budget") lieber umbrechen als abschneiden. */
.project-fact-value,
.lohn-kpi strong,
.year-stat-value,
.cs-value {
  font-size: clamp(15px, 1.7vw, 22px);
}
.project-fact-value.allow-wrap,
.project-fact-value[data-allow-wrap="true"] {
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.2;
}

/* Schnell-Widgets im Aufgaben-Detail (Fällig bis / Sollzeit / Geplante Zeit /
 * Erfasst). Bei vier Karten nebeneinander bleiben pro Karte nur ~150 px. */
.awork-task-detail .project-task-fact {
  min-width: 0;
}
.awork-task-detail .project-task-fact strong,
.awork-task-detail .project-task-fact .task-fact-display {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.awork-task-detail .project-task-fact small {
  font-size: 9.5px;
  letter-spacing: 0.03em;
}
.task-fact-editable .task-fact-input,
.task-fact-hours-wrap .task-fact-hours-input {
  font-size: 14px;
}

/* ── 2b) Hover-Aktionen belegen keinen Platz mehr, solange sie unsichtbar sind ─
 * Die Knopfleiste rechts in der Aufgabenzeile ist bis zum Überfahren mit der
 * Maus durchsichtig (opacity: 0) — sie hat aber trotzdem gut 100 px Breite
 * belegt und dem Titel weggenommen. Nur auf Geräten mit echtem Mauszeiger:
 * auf Touch-Geräten gibt es kein "hover", dort bleibt alles wie bisher. */

/* ── 1b) Werkzeugleiste darf umbrechen ───────────────────────────────────────
 * Ursache der abgeschnittenen Chips: Die Leiste stand auf "flex-wrap: nowrap",
 * die Knopfgruppe rechts ("Aufgaben aus Text", "KI-Chat", "Archiv", Export)
 * darf nicht schrumpfen — also blieb für die linke Hälfte mit Suchfeld und
 * Filtern in der geteilten Ansicht nur noch ein Reststreifen von ~78 px übrig.
 * Jetzt rutscht die Knopfgruppe in eine zweite Zeile, sobald links weniger als
 * 320 px blieben. */
#projectAufgabenContent .project-task-toolbar {
  flex-wrap: wrap !important;
}
#projectAufgabenContent .project-task-toolbar-left {
  flex: 1 1 320px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * KoGuard — Ansicht „Sicherheit"
 * Abgehakte Vorfaelle treten optisch zurueck, verschwinden aber nicht: Sie
 * bleiben nachvollziehbar, draengen sich aber nicht mehr auf.
 * ═══════════════════════════════════════════════════════════════════════════ */
.guard-event { border-left: 3px solid var(--line); }
.guard-event.is-acknowledged { opacity: .62; }
.guard-event .badge.danger { background: #fdecec; color: #9b1c1c; border-color: #f5c2c2; }
.guard-event .badge.warn { background: #fff6e5; color: #8a5a00; border-color: #f3ddb0; }
.guard-event details { margin-top: 6px; }
.guard-event details summary { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════════
 * v684 — AUFGABENZEILE: KEIN SPRINGEN MEHR BEIM ÜBERFAHREN
 * ───────────────────────────────────────────────────────────────────────────
 * Was war kaputt: Die kleine Knopfleiste rechts in jeder Aufgabenzeile
 * (Timer starten / Anpinnen / Duplizieren / Archivieren) war unsichtbar auf
 * 0 px zusammengeklappt und wuchs beim Überfahren mit der Maus schlagartig auf
 * gut 110 px. In schmalen Ansichten (z. B. Liste + Detail nebeneinander) war
 * dieser Platz nicht übrig: Die Info-Chips rutschten in eine zweite Zeile, die
 * Aufgabenzeile wurde höher, alle darunter verschoben sich — und die Maus lag
 * plötzlich über einer anderen Zeile. Die alte klappte wieder zu, alles rutschte
 * zurück, die Maus war wieder über der alten Zeile: ein endloses Hin und Her.
 * Nebenwirkung: Weil zwischendurch der Platz fehlte, wurde Text abgeschnitten.
 *
 * Die Lösung: Die Knopfleiste liegt jetzt als kleine schwebende Leiste ÜBER
 * dem rechten Rand der Zeile statt in ihr drin (position: absolute). Sie belegt
 * dadurch überhaupt keinen Platz mehr im Layout — weder sichtbar noch
 * unsichtbar. Beim Überfahren blendet sie nur noch ein, es verschiebt sich
 * nichts mehr. Titel und Chips behalten immer genau die Breite, die sie auch
 * ohne Maus hätten.
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  /* Bezugspunkt für die schwebende Leiste (die meisten Zeilen sind schon
   * "relative"; hier sicherheitshalber noch einmal festgeschrieben). */
  .project-task-list-row {
    position: relative;
  }

  .project-task-list-row .task-row-hover-actions {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    z-index: 4;
    /* Die alte Aufklapp-Mechanik (width 0 → auto) wird hier abgeschaltet. */
    width: auto;
    margin: 0;
    overflow: visible;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 2px 5px;
    border-radius: 999px;
    background: var(--white, #ffffff);
    border: 1px solid var(--line, #d8e4ea);
    box-shadow: 0 2px 10px rgba(16, 42, 58, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
  }

  .project-task-list-row:hover .task-row-hover-actions,
  .project-task-list-row:focus-within .task-row-hover-actions,
  .project-task-list-row.is-keyboard-focused .task-row-hover-actions {
    width: auto;
    margin: 0;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
  }

  /* Die Info-Chips dürfen jetzt wieder in einer Zeile bleiben: Der Grund für
   * den Umbruch (die aufklappende Knopfleiste) ist weg. Reicht der Platz
   * wirklich nicht, wird weiterhin umgebrochen statt abgeschnitten. */
  .project-task-list-row .project-task-row-right {
    overflow: visible;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * KOPFZEILE: NICHTS MEHR ABSCHNEIDEN
 * ═══════════════════════════════════════════════════════════════════════════
 * Problem: Die Kopfzeile war ein starres 3-Spalten-Raster. Die mittlere Spalte
 * (Arbeitszeit) bestand auf 260–360 px, also wurden die beiden äußeren Spalten
 * zusammengequetscht — „+ Projekt anlegen" wurde mitten im Wort abgeschnitten,
 * das Warn-Zeichen schrumpfte auf „⚠…".
 *
 * Lösung: 1) Der Sync-Chip zeigt nur noch einen farbigen Punkt, der Text
 *            klappt beim Überfahren auf — das spart rund 90 px.
 *         2) Die Leisten dürfen nicht mehr schrumpfen. Reicht der Platz nicht,
 *            rutscht stattdessen eine Gruppe in die nächste Zeile.
 */

/* ── 1) Sync-Chip: nur Punkt, Text bei Hover/Fokus ───────────────────────── */
.sync-status-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
  padding: 3px 6px !important;
  overflow: hidden;
  max-width: 100%;
  transition: gap 160ms var(--ease, ease), padding 160ms var(--ease, ease), background 160ms var(--ease, ease);
}
/* Der farbige Punkt kommt weiter aus ::before — hier nur noch der Zustand
 * „speichert gerade", der bisher keinen eigenen Punkt hatte. */
.sync-status-chip.is-syncing::before { content: "● "; color: var(--c-warn, #8a5f00); }

.sync-status-chip .sync-chip-label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: max-width 180ms var(--ease, ease), opacity 140ms var(--ease, ease);
}
.sync-status-chip:hover,
.sync-status-chip:focus,
.sync-status-chip:focus-within,
.sync-status-chip.is-expanded {
  gap: 4px;
  padding-right: 10px !important;
}
.sync-status-chip:hover .sync-chip-label,
.sync-status-chip:focus .sync-chip-label,
.sync-status-chip:focus-within .sync-chip-label,
.sync-status-chip.is-expanded .sync-chip-label {
  max-width: 220px;
  opacity: 1;
}
/* Auf Touch-Geräten gibt es kein „Überfahren" — dort steht der Text dauerhaft
 * da, sobald genug Platz ist (unter 768 px ist die Leiste ohnehin ausgeblendet). */
@media (hover: none) and (pointer: coarse) {
  .sync-status-chip { gap: 4px; padding-right: 10px !important; }
  .sync-status-chip .sync-chip-label { max-width: 220px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sync-status-chip,
  .sync-status-chip .sync-chip-label { transition: none !important; }
}

/* ── 2) Kopfzeilen-Leisten dürfen umbrechen statt zu schrumpfen ──────────── */
@media (min-width: 768px) {
  .topbar-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .topbar-primary-actions,
  .topbar-utility-actions {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  .topbar-primary-actions > *,
  .topbar-utility-actions > * {
    flex: 0 0 auto !important;
  }
  /* Die Arbeitszeit-Leiste gibt als Erste nach und wandert zur Not in Zeile 2. */
  .topbar-workday-slot {
    flex: 1 1 240px !important;
    width: auto !important;
    min-width: 220px !important;
    max-width: 360px !important;
    grid-column: auto !important;
  }
  /* Beschriftungen bleiben vollständig lesbar. */
  .topbar-primary-actions .primary-button {
    overflow: visible !important;
    text-overflow: clip !important;
  }
  #syncConflictBadge {
    overflow: visible !important;
    max-width: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * KALENDER-PRIVATSPHÄRE
 * ═══════════════════════════════════════════════════════════════════════════
 * Fremde Sperren sollen erkennbar „nichts sagen": neutrales Grau statt der
 * Personenfarbe, kein Zeiger, kein Hover-Effekt. Der Inhalt liegt gar nicht
 * in diesem Browser — die Optik soll das auch vermitteln.
 */
.calendar-chip.busy,
.calendar-agenda-event.busy {
  background: var(--c-surface-2, #eef2f6);
  color: #5b6b7a;
  border: 1px dashed rgba(91, 107, 122, 0.35);
  cursor: default;
  font-weight: 600;
}
.calendar-chip.busy:hover,
.calendar-agenda-event.busy:hover {
  background: var(--c-surface-2, #eef2f6);
  filter: none;
  transform: none;
}

/* Import-Dialog: die drei Sichtbarkeitsstufen */
.calendar-import-choices {
  display: grid;
  gap: 8px;
  margin: 4px 0 12px;
}
.calendar-import-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--c-border, #d7e2ea);
  border-radius: 10px;
  cursor: pointer;
  line-height: 1.35;
}
.calendar-import-choice:hover {
  border-color: var(--c-primary, #2c9ec9);
  background: var(--c-surface-2, #f4f8fb);
}
.calendar-import-choice input {
  margin-top: 3px;
  flex: 0 0 auto;
}
.calendar-import-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

/* „Meine Kalenderquellen" */
.calendar-source-list {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.calendar-source-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--c-border, #d7e2ea);
  border-radius: 10px;
}
.calendar-source-delete {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.calendar-source-orphans {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--c-warn-soft, #fde68a);
  background: var(--c-warn-soft, #fef3c7);
  border-radius: 10px;
  font-size: 13px;
}
.calendar-source-orphans label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

@media (max-width: 640px) {
  .calendar-source-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Kalender-Abos und Vertretungen im Quellen-Dialog */
.calendar-feed-add {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 8px;
}
.calendar-feed-add input,
.calendar-feed-add select {
  min-width: 0;
}
.calendar-delegate-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.calendar-delegate-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
@media (max-width: 640px) {
  .calendar-feed-add {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ─── Dunkelmodus für die neuen Kalender-Elemente ──────────────────────────
 * Die hellen Varianten oben arbeiten mit dunklen Schriftfarben auf hellen
 * Flächen. Im Dunkelmodus kehrt sich der Untergrund um — ohne diese Regeln
 * stünde dunkles Grau auf dunklem Blau (gemessen 2,8:1 statt der geforderten
 * 4,5:1) und die grünen Überstunden wären praktisch unlesbar (1,5:1).
 */
[data-theme="dark"] body .calendar-chip.busy,
[data-theme="dark"] body .calendar-agenda-event.busy {
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
  border-color: rgba(203, 213, 225, 0.35);
}
[data-theme="dark"] body .monat-day-warn {
  background: rgba(240, 180, 41, 0.18);
  color: #f0c86a;
}
[data-theme="dark"] body .monat-day-warn.is-positive {
  background: rgba(26, 140, 106, 0.22);
  color: #5fd0a3;
}
[data-theme="dark"] body .zeiten-week-warning {
  color: #f0c86a !important;
}
[data-theme="dark"] body .zeiten-week-warning.is-positive {
  background: rgba(26, 140, 106, 0.22);
  color: #5fd0a3 !important;
}
[data-theme="dark"] body .calendar-source-orphans {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.35);
  color: #f5deb0;
}
[data-theme="dark"] body .calendar-import-choice:hover {
  background: rgba(148, 163, 184, 0.12);
}

/* Die Kleinüberschriften wurden für den Hellmodus abgedunkelt (4,5:1). Im
 * Dunkelmodus braucht dieselbe Farbe die Gegenrichtung — sonst steht dunkles
 * Grau auf fast schwarzem Grund (gemessen 3,4:1). */
[data-theme="dark"] body .eyebrow-label,
[data-theme="dark"] .eyebrow-label {
  color: #93a4b3;
}

/* Antippbare Flächen im Quellen-Dialog: Die Zeilen um Kästchen und Knöpfe
 * bekommen eine Mindesthöhe, damit man auf dem Handy nicht das 20-px-Kästchen
 * selbst treffen muss — der ganze Beschriftungsbereich schaltet mit.
 * Die kleinen Knöpfe bleiben bei 26 px: Diese Größe ist app-weit gesetzt
 * (.ghost-button.tiny mit !important) und wird hier nicht einzeln gebrochen. */
.calendar-source-delete,
.calendar-delegate-row {
  min-height: 36px;
}
@media (max-width: 640px) {
  .calendar-source-delete,
  .calendar-delegate-row {
    min-height: 44px;
  }
  .calendar-source-row {
    row-gap: 4px;
  }
}

/* Arbeitszeit-Knöpfe in der Kopfzeile: Die helle Variante setzt dunkles
 * Petrol auf einen zarten blauen Schleier. Im Dunkelmodus steht damit dunkle
 * Schrift auf dunklem Grund — gemessen 1,8:1. Hier die Gegenrichtung. */
[data-theme="dark"] body .header-workday-actions .ghost-button.tiny:not(:disabled),
[data-theme="dark"] .header-workday-actions .ghost-button.tiny:not(:disabled) {
  border-color: rgba(120, 190, 220, 0.38);
  background: rgba(120, 190, 220, 0.14);
  color: #cfe8f4;
}
[data-theme="dark"] body .header-workday-actions .ghost-button.tiny:not(:disabled):hover,
[data-theme="dark"] .header-workday-actions .ghost-button.tiny:not(:disabled):hover {
  background: rgba(120, 190, 220, 0.24);
  border-color: rgba(120, 190, 220, 0.55);
}
[data-theme="dark"] body .header-workday-actions .ghost-button.tiny:disabled,
[data-theme="dark"] .header-workday-actions .ghost-button.tiny:disabled {
  color: #9fb3c0;
  opacity: 0.5;
}


/* ── Aufbewahrung: Vorlage-Mappe (v732) ─────────────────────────────────
   Eine Zeile = eine anstehende Entscheidung. Besonders schützenswerte
   Daten (Lohn, Krankmeldungen) bekommen eine sichtbare Markierung, damit
   sie in einer langen Liste nicht übersehen werden. */
.retention-row {
  align-items: center;
  border: 1px solid var(--color-border, #d8e5ec);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 14px;
}
.retention-row.is-sensibel {
  border-left: 4px solid var(--color-warn, #b8860b);
}
.retention-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 260px;
}
.retention-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lohn-neutral-selection {
  display: grid;
  gap: var(--sp-4, 16px);
}
.lohn-person-selection-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3, 12px);
}
.lohn-person-selection-button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.lohn-person-selection-button:hover,
.lohn-person-selection-button:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* KW-A-014/015: Auf schmalen Geräten bekommt der Seitentitel eine eigene,
   umbrechende Zeile. Die Sprachwahl lebt in der Kopfzeile statt über Inhalten. */
@media (max-width: 768px) {
  .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)) !important;
  }

  .topbar-title-block,
  .topbar > div:first-child {
    width: 100% !important;
    overflow: visible !important;
    align-items: flex-start !important;
  }

  .topbar-title-block > div {
    overflow: visible !important;
  }

  #topbarBreadcrumb,
  #projectHeadline {
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
  }

  .topbar-controls {
    display: contents !important;
  }

  .topbar-utility-actions {
    display: flex !important;
    width: 100% !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    white-space: normal !important;
  }

  .kw-locale-switch {
    position: static;
    order: -1;
    min-height: 40px;
    margin: 0;
    opacity: 1;
    background: var(--c-surface, #fff);
    color: var(--c-text, #1e5167);
    border-color: var(--c-border, #ccd6dd);
    box-shadow: none;
  }
}

@media (max-width: 414px) {
  .topbar-utility-actions .icon-button,
  .topbar-utility-actions .user-chip {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .topbar-title-block .headline,
  #projectHeadline {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
}

.first-run-dismiss {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 14px;
  color: var(--c-text-muted, #526873);
  font-size: 13px;
  cursor: pointer;
}

.first-run-dismiss input {
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--c-primary, #1e5167);
}

/* KW-A-016: bewusst als aktive Steuerung erkennbar, mit CI-Farben statt
   verringerter Deckkraft. Petrol auf Weiß liegt deutlich über WCAG AA. */
#dashboardCustomizeButton {
  opacity: 1 !important;
  color: var(--kf-dark-blue) !important;
  background: var(--kf-white) !important;
  border: 1px solid var(--kf-medium-blue) !important;
  font-weight: 700;
}

#dashboardCustomizeButton:hover,
#dashboardCustomizeButton[aria-pressed="true"] {
  color: var(--kf-dark-blue) !important;
  background: var(--kf-light-grey) !important;
  border-color: var(--kf-dark-blue) !important;
}

#dashboardCustomizeButton:focus-visible {
  outline: 3px solid var(--kf-gold) !important;
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════════
   Handy- und Tablet-Nachbesserungen aus dem Klick-Audit (KW-G, 17.09.2026)
   ────────────────────────────────────────────────────────────────────────────
   Drei Befunde, die alle dasselbe Muster haben: Ein Element behält auf dem
   Handy seine Desktop-Mindestbreite und ragt aus dem Bildschirm.
   ════════════════════════════════════════════════════════════════════════ */

/* KW-G-011 (S4) — „Team-Übersicht" lag außerhalb des Bildschirms, und dass die
   Reiterleiste seitlich scrollbar ist, war nicht zu sehen. Ein weicher
   Farbverlauf am rechten Rand zeigt jetzt: da geht es weiter. */
@media (max-width: 720px) {
  .zeiten-subnav {
    position: relative;
    width: 100%;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Der Schatten am rechten Rand macht sichtbar, dass es weitergeht. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), rgba(0, 0, 0, 0.35) 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), rgba(0, 0, 0, 0.35) 100%);
  }
  .zeiten-tab-btn {
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

/* KW-G-009 (S3) — Aufgabenzeile: Titel und Projektname ragten ohne scrollbaren
   Rahmen über den rechten Rand, der Text war auf dem Handy nicht lesbar.
   Ursache: eine feste Mindestbreite (140 px) für die Titelspalte plus eine
   rechte Spalte, die so breit werden darf, wie sie mag. Auf schmalen Geräten
   darf beides schrumpfen; der Titel wird dann sichtbar gekürzt (…). */
@media (max-width: 720px) {
  #view-aufgaben .global-awork-task-row {
    grid-template-columns: 14px 22px 14px 44px minmax(0, 1fr) minmax(0, auto);
  }
  /* Der Status-Knopf ist auf dem Handy 44 px gross (Touch-Ziel) und ueberdeckte
     mit nur 28 px Spalte die ersten Buchstaben des Titels. */
  #view-aufgaben .global-awork-task-row .task-status-quick-wrap {
    width: 44px;
    height: 44px;
  }
  /* K2-KW-003: Die Liste behielt ihre Desktop-Mindestbreite (680 px) und wurde
     im Handy-Fenster seitlich abgeschnitten. Auf dem Handy passt sie sich an. */
  #view-aufgaben .global-awork-task-list-rows {
    min-width: 0;
  }
  .global-awork-task-row .project-task-title-btn,
  .global-awork-task-row .task-row-title-cell {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .global-awork-task-row .task-meta-chip.is-project {
    max-width: 96px;
  }
  .global-awork-task-row .task-timer-play-button {
    min-width: 0;
  }
}

/* KW-G-008 (S3) — Der Monatskalender war 840 px breit in einem 336 px schmalen
   Fenster: sichtbar waren knapp drei von sieben Wochentagen. Auf dem Handy
   entfällt die Desktop-Mindestbreite, damit alle sieben Spalten nebeneinander
   passen; Zellen werden dafür flacher und die Beschriftung kürzer. */
@media (max-width: 720px) {
  .calendar-weekdays,
  .calendar-days {
    min-width: 0;
  }
  .calendar-weekday {
    padding: 6px 2px;
    font-size: 10px;
    text-align: center;
    overflow: hidden;
  }
  .calendar-day {
    min-height: 62px;
    padding: 3px 2px;
    gap: 3px;
  }
  .calendar-day header {
    font-size: 11px;
    gap: 2px;
  }
  .calendar-day-events .calendar-chip {
    font-size: 10px;
    padding: 1px 3px;
  }
}

/* KW-MOBIL-AUDIT-1 (27.09.2026, Mobile-Audit): "Zeiten -> Mein Monat" nutzt ein
   eigenes Grid (.monat-grid) mit anderen Klassennamen als der Dashboard-
   Kalender oben (KW-G-008) und wurde von dieser Korrektur nicht mit erfasst.
   Bei 375 px war das Grid 528 px breit und lag hinter `.monat-grid-wrap`
   (overflow: hidden) -- Samstag/Sonntag waren unsichtbar und nicht erreichbar,
   auch nicht durch Wischen. Ursache: `.monat-day` hat als Grid-Zelle implizit
   `min-width: auto` (Inhaltsbreite aus Tageszahl + Praesenz-Punkt + "-8h"-Chip),
   dagegen kommt keine 1fr-Spalte an. Grund auf 0 setzen und Inhalt verschlanken,
   damit alle sieben Spalten nebeneinander passen (wie beim Dashboard-Kalender). */
@media (max-width: 720px) {
  /* .zeiten-pane/.zeiten-week-shell sind Grids ohne eigene Spaltendefinition
     (impliziert eine "auto"-Spalte). Eine "auto"-Spalte wird vom Inhalt her
     bemessen und darf breiter werden als der Container -- genau das passierte
     hier: 418 px Inhalt in einem 363 px schmalen Rahmen. Eine feste
     minmax(0,1fr)-Spalte zwingt sie, sich auf die verfuegbare Breite zu
     beschraenken, erst dann greifen die min-width:0-Regeln unten. */
  .zeiten-pane,
  .zeiten-week-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .monat-weekday-row,
  .monat-grid {
    min-width: 0;
  }
  .monat-weekday-lbl {
    padding: 5px 0;
    font-size: 9px;
  }
  .monat-day {
    min-width: 0;
    min-height: 56px;
    padding: 4px 3px 3px;
  }
  .monat-day-hdr {
    flex-wrap: wrap;
    gap: 2px;
  }
  .monat-day-num {
    font-size: 11px;
  }
  .monat-day-warn {
    font-size: 8px;
    padding: 1px 3px;
  }
  /* Lange Projektnamen (z.B. "Website KFilm 2026") ragten mit white-space:nowrap
     ueber die schmale Handy-Zelle hinaus und ueberlappten den Nachbartag.
     .monat-day ist selbst ein Grid, also braucht auch das Kind (.monat-proj-chips)
     sein eigenes min-width:0 -- sonst greift derselbe Trick eine Ebene tiefer. */
  .monat-proj-chips {
    min-width: 0;
  }
  .monat-proj-chip {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* P-KW-AUDIT: Register „Admin-Protokoll" – abgewiesene Versuche hervorheben. */
.actlog-abgewiesen {
  color: var(--c-danger, #b42318);
  font-weight: 600;
}

/* JAS-019: Das minimierte KI-Fenster (unten rechts, 260 px breit) verdeckte den
   Timer-Chip. Der Timer rückt daneben; auf schmalen Fenstern rückt er darüber. */
body:has(.ai-agent-panel.is-minimized):not(.timer-dock-left):not(.timer-dock-top-right):not(.timer-dock-top-left) .project-timer-dock {
  right: calc(260px + 32px);
}
@media (max-width: 900px) {
  body:has(.ai-agent-panel.is-minimized):not(.timer-dock-left):not(.timer-dock-top-right):not(.timer-dock-top-left) .project-timer-dock {
    right: clamp(12px, 2vw, 24px);
    bottom: 72px;
  }
}

/* A2-KW-011: Sichtbarer Tastaturfokus. Der globale Fokusstil war nur ein
   15-%-Schatten bei entferntem Rand (WCAG 2.4.7 / 1.4.11). Ein Ring mit
   ausreichendem Kontrast gilt jetzt zusätzlich, auch bei Feldern ohne Rand. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-focus-ring) !important;
  outline-offset: 2px;
}

/* K2-KW-003/004 (19.09.2026): Mobil (Handy-Breite) – Aufgabenliste und Dauer-Hinweis.
   Nur unter 480 px, Desktop und Tablet bleiben unverändert.
   - Kopfzeile "Alle Aufgaben": darf umbrechen, Überschrift bricht nicht mehr
     mitten im Wort, der Zähler ("10 Aufgaben") wird nicht mehr abgeschnitten.
   - Dauer-Hinweis (Speicher-/2FA-Hinweis): kompakt und höchstens ein Drittel
     der Bildschirmhöhe, damit Zeiterfassungs-Knopf und Inhalt nutzbar bleiben. */
@media (max-width: 480px) {
  .global-awork-task-list-head {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 6px;
    margin-left: 0;
    margin-right: 0;
  }

  .global-awork-task-list-head h3 {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .global-awork-task-list-head .task-meta-chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  #kwWorkspaceSyncNotice,
  #kwMfaRequiredNotice {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    max-height: 32vh;
    overflow-y: auto;
    text-align: left;
    margin-right: 72px;
  }

  #kwWorkspaceSyncNotice > span,
  #kwMfaRequiredNotice > span {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* JAS-007: Schnellbuttons „Heute"/„Morgen" unter Datumsfeldern (im Fluss, keine Überdeckung). */
.date-quick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.date-quick-buttons .ghost-button.tiny {
  min-height: 32px;
  min-width: 64px;
}
@media (max-width: 1023px) {
  .date-quick-buttons .ghost-button.tiny { min-height: 44px; }
}
/* JAS-001 / JAS-009: Timer-Schnellauswahl (Modal-Vorschlagsliste und Dashboard).
 * Liegt im normalen Fluss der Karte bzw. des Timer-Fensters, überdeckt also
 * weder die mobile Navigation noch den schwebenden Elemente-Stapel. */
.ptimer-search-hint {
  padding: 6px 11px 2px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}
.dashboard-quickpick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.dashboard-quickpick.hidden { display: none; }
.dashboard-quickpick-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.dashboard-quickpick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 12px;
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
}
.dashboard-quickpick-item:hover {
  background: var(--color-surface-soft);
}
/* Sichtbarer Tastaturfokus (WCAG 2.4.7): Ring in CI-Blau statt outline:none. */
.dashboard-quickpick-item:focus-visible {
  background: var(--color-surface-soft);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.dashboard-quickpick-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dashboard-quickpick-text strong,
.dashboard-quickpick-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-quickpick-text small { color: var(--color-text-muted); font-size: 0.75rem; }
[data-theme="dark"] .dashboard-quickpick-item {
  background: #1a2e3b;
  border-color: #2a3f52;
  color: #e2e8f0;
}
[data-theme="dark"] .dashboard-quickpick-item:hover { background: #22394a; }
[data-theme="dark"] .dashboard-quickpick-item:focus-visible {
  background: #22394a;
  outline: 2px solid #7fc4e0;
  outline-offset: 2px;
}
[data-theme="dark"] .dashboard-quickpick-label,
[data-theme="dark"] .dashboard-quickpick-text small,
[data-theme="dark"] .ptimer-search-hint { color: #a9b8c4; }
/* ═══════════════════════════════════════════════════════════════════════
   MOBILE-NAVIGATION (Tablet + Smartphone, < 1024 px) — einheitliche Spezifikation
   Siehe docs/MOBILE-NAVIGATION.md. Steht bewusst am Dateiende: ältere
   Regeln (1100 / 768 / 767 px, Bottom-Nav) werden hier überstimmt.
   Ab 1024 px bleibt die Desktop-Navigation unverändert.
   ═══════════════════════════════════════════════════════════════════════ */
.kw-mnav-bar { display: none; }
.kw-drawer-foot { display: none; }

@media (max-width: 1023px) {
  html.kw-mnav-locked, html.kw-mnav-locked body { overflow: hidden !important; overscroll-behavior: none; }
  html.kw-mnav-locked .kw-locale-switch, html.kw-mnav-locked .project-timer-dock, html.kw-mnav-locked .global-fab { visibility: hidden !important; }
  .sidebar, .sidebar.collapsed { overflow-x: hidden !important; }
  body { padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important; padding-bottom: 0 !important; }

  /* Feste Kopfzeile: Logo/Name links, Titel daneben, Burger rechts */
  .kw-mnav-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    box-sizing: border-box;
    display: flex; align-items: center; gap: 10px;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px));
    background: #1e5167; /* CI-Petrol wie KoEngine-Kopfzeile */
    color: #e8f8ff;
  }
  .kw-mnav-logo { width: 32px; height: 32px; flex: 0 0 auto; padding: 3px; box-sizing: border-box; background: #fff; border-radius: 8px; }
  .kw-mnav-app { font-weight: 700; font-size: 16px; flex: 0 0 auto; }
  .kw-mnav-title {
    flex: 1 1 0; min-width: 0; font-size: 15px; font-weight: 500;
    color: rgba(232, 248, 255, 0.85);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-left: 10px; border-left: 1px solid rgba(232, 248, 255, 0.35);
  }
  .kw-mnav-title:empty { display: none; }
  #mobileMenuButton.kw-mnav-burger { display: inline-flex !important; }
  .kw-mnav-burger {
    flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin: 0; border: 0; border-radius: 10px; cursor: pointer;
    background: transparent; color: inherit;
  }
  .kw-mnav-burger:focus-visible { outline: 2px solid #e8f8ff; outline-offset: 2px; }
  .kw-mnav-burger .kw-icon { width: 24px; height: 24px; }
  /* Kleine Kopfzeile: Titel statt App-Name, wenn es eng wird */
  @media (max-width: 420px) { .kw-mnav-app { display: none; } .kw-mnav-title { border-left: 0; padding-left: 0; } }

  /* Seiteninhalt: volle Breite, kein Restbestand der alten Rail/Bottom-Nav */
  .app-shell, .app-shell.sidebar-collapsed, .app-shell:not(.sidebar-collapsed) { grid-template-columns: minmax(0, 1fr) !important; }
  .main { padding-left: 0 !important; max-width: 100vw; }
  .mobile-bottom-nav { display: none !important; }

  /* Schwebende Elemente sauber gestapelt (rechts: Timer unten, + darüber; links: Sprache) — nichts überlappt, Inhalt hat unten Luft */
  .project-timer-dock { right: max(12px, env(safe-area-inset-right, 0px)) !important; left: auto !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
  .global-fab { right: max(16px, env(safe-area-inset-right, 0px)) !important; bottom: calc(12px + 67px + 12px + env(safe-area-inset-bottom, 0px)) !important; width: 48px; height: 48px; }
  .kw-locale-switch { left: max(8px, env(safe-area-inset-left, 0px)) !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
  .main { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Die alte Titelzeile der Desktop-Topbar entfällt (Titel steckt in der Kopfzeile) */
  .topbar { display: flex !important; flex-direction: row !important; justify-content: flex-end !important; align-items: center !important; min-height: 0 !important; padding: 8px max(14px, env(safe-area-inset-right, 0px)) 8px max(14px, env(safe-area-inset-left, 0px)) !important; }
  /* h1 bleibt für Screenreader erhalten: visuell versteckt statt entfernt */
  .topbar-title-block, .topbar > .topbar-title-block:first-child { display: block !important; position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; margin: -1px !important; padding: 0 !important; }
  .topbar-controls { display: flex !important; flex: 1 1 auto !important; width: auto !important; justify-content: flex-end !important; gap: 8px !important; }

  /* Drawer von rechts */
  .sidebar, .sidebar.collapsed {
    display: flex !important; flex-direction: column;
    position: fixed !important; top: 0 !important; bottom: 0 !important; right: 0 !important; left: auto !important;
    width: min(88vw, 320px) !important; max-width: min(88vw, 320px) !important;
    height: 100dvh !important; box-sizing: border-box;
    overflow-y: auto; overscroll-behavior: contain;
    z-index: 110; border-radius: 0 !important; margin: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important; padding-left: 0 !important;
    padding-right: env(safe-area-inset-right, 0px);
    transform: translateX(100%) !important; visibility: hidden; box-shadow: none !important;
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 240ms;
  }
  .app-shell.sidebar-overlay-open .sidebar, .app-shell.sidebar-overlay-open .sidebar.collapsed {
    transform: translateX(0) !important; visibility: visible; transition-delay: 0s;
    box-shadow: -16px 0 40px rgba(12, 30, 40, 0.28) !important;
  }
  /* Abdunklung: über der Kopfzeile, unter dem Drawer; Tippen schließt */
  .app-shell::before { z-index: 105 !important; background: rgba(12, 30, 40, 0.5) !important; transition: opacity 200ms ease; }
  .sidebar .side-link, .sidebar a.side-link, .sidebar .side-nav .side-link, .sidebar .side-nav-group > a { min-height: 48px !important; box-sizing: border-box; }
  #sidebarToggle { min-width: 44px; min-height: 44px; }

  /* Drawer-Fuss: App-Familie + Benutzer/Abmelden, am Ende des Drawers (Farben erbt die Seitenleiste) */
  .kw-drawer-foot {
    display: flex; flex-direction: column; gap: 4px;
    margin-top: auto; flex: 0 0 auto;
    padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, 0.18); color: inherit;
  }
  .kw-drawer-user { font-size: 14px; font-weight: 600; padding: 8px 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kw-drawer-logout {
    min-height: 48px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 10px;
    background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer;
  }
  .kw-drawer-logout:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  .kw-drawer-foot .side-link, .kw-drawer-foot .side-link:hover { text-decoration: none; }
  .kw-drawer-foot .side-nav-separator { display: none; }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar.collapsed, .app-shell::before { transition: none !important; }
}

/* W14/W15: Hinweis-Toasts (Speichern abgelehnt, Rechte geändert) – breiter, Text oben,
   Knöpfe in eigener Zeile; bei wenig Platz stehen die Knöpfe untereinander. */
#kwWorkspaceSyncNotice,
#kwRightsChangedNotice {
  display: block;
  max-width: min(520px, 100%);
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
}
#kwWorkspaceSyncNotice > span,
#kwRightsChangedNotice > span {
  display: block;
  min-width: 0;
}
.kw-sync-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.kw-sync-notice-actions .toast-undo-btn {
  flex: 0 1 auto;
  white-space: normal;
  min-height: 32px;
}
@media (max-width: 480px) {
  .kw-sync-notice-actions { flex-direction: column; align-items: stretch; }
  .kw-sync-notice-actions .toast-undo-btn { min-height: 44px; }
}

/* W23 (JAS-019/JAS-026): Mobil (< 1024 px) steht das minimierte KI-Fenster (unten
   rechts, ca. 60 px hoch) mit im Stapel: KI-Fenster ganz unten, darüber Timer,
   darüber „+“ – und Sprachumschalter links auf gleicher Höhe. Nichts überlappt.
   Die z-Reihenfolge der Mobile-Navigation (Modal 90 / Dock 100 / Scrim 105 /
   Drawer 110) bleibt unverändert; bei offenem Menü ist das Fenster ausgeblendet. */
@media (max-width: 1023px) {
  html.kw-mnav-locked .ai-agent-panel.is-minimized { visibility: hidden !important; }
  .ai-agent-panel.is-minimized { width: min(260px, calc(100vw - 24px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
  body:has(.ai-agent-panel.is-minimized) .project-timer-dock { bottom: calc(12px + 64px + env(safe-area-inset-bottom, 0px)) !important; }
  body:has(.ai-agent-panel.is-minimized) .global-fab { bottom: calc(12px + 67px + 12px + 64px + env(safe-area-inset-bottom, 0px)) !important; }
  body:has(.ai-agent-panel.is-minimized) .kw-locale-switch { bottom: calc(12px + 64px + env(safe-area-inset-bottom, 0px)) !important; }
  body:has(.ai-agent-panel.is-minimized) .main { padding-bottom: calc(214px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* W16: Kalender auf dem Handy als Liste. Der Tab „Liste" gibt es nur unter 768 px;
   die Tab-Leiste scrollt seitlich, ein Schattenrand zeigt weitere Reiter (KW-G-011). */
.cal-view-tabs .cal-view-tab-list { display: none; }
@media (max-width: 767px) {
  .cal-view-tabs .cal-view-tab-list { display: inline-flex; align-items: center; }
  .cal-view-tabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    background:
      linear-gradient(to right, var(--color-surface) 30%, transparent) left center / 24px 100% no-repeat local,
      linear-gradient(to left, var(--color-surface) 30%, transparent) right center / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .22), transparent) left center / 10px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .22), transparent) right center / 10px 100% no-repeat scroll,
      var(--color-surface);
  }
  .cal-view-tabs::-webkit-scrollbar { display: none; }
  .cal-view-tabs .ghost-button { flex: 0 0 auto; }
}

/* W21: App-Dialog-Bausteine (Häkchen, Auswahl, Fehlerzeile, langer Text) */
.app-dialog-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; line-height: 1.4; cursor: pointer; }
.app-dialog-check input { flex: 0 0 auto; }
.app-dialog-error { margin-top: 8px; color: #b3261e; font-weight: 600; }
.app-dialog-error[hidden] { display: none; }
.app-dialog-text { max-height: min(50vh, 360px); overflow-y: auto; white-space: pre-wrap; line-height: 1.5; color: #4e616e; overflow-wrap: anywhere; }
/* Viele Rückfragen sind bewusst mehrzeilig („Wirklich trennen?\n\nInhalte bleiben
   erhalten."). Das native Browser-Fenster hat die Absätze gezeigt; ohne pre-wrap
   würden sie hier zu einem einzigen Fließtext verschmelzen — genau bei den
   sicherheitsnahen Erklärungen (2FA-Reset, Freischalten) der schlechteste Ort. */
.app-dialog-message { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Integrationen: Reihenfolge, Statuszeile, „Woher kommt das?“ (nur Design-Tokens) */
/* JAS-043: Ueberschrift klebte am linken Seitenrand, weil .settings-card
   daneben 18px Innenabstand hat, dieses bare <h4> aber keinen eigenen —
   Grundsatz: Text nie direkt am Rand. */
.integration-group-title {
  margin: 18px 0 2px;
  padding: 0 18px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.integration-status {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
}
.integration-status.is-ok { color: var(--ok); }
.integration-status.is-missing { color: var(--warn); }
.integration-guide {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.integration-guide h4 { margin: 0 0 6px; font-size: 13px; }
.integration-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 12px;
  line-height: 1.5;
}
.integration-origin {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
}
.integration-details > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  user-select: none;
}
.integration-details[open] > summary { margin-bottom: 10px; }

/* JAS-028: Suchtreffer mobil – Titel zuerst, ganze Worte umbrechen; Typ-Badge und
   Projekt-Chip stehen in einer zweiten Zeile und fressen dem Titel keine Breite. */
.search-dropdown .search-result-item {
  display: grid;
  grid-template-columns: 26px auto minmax(0, 1fr);
  grid-template-areas:
    "icon label label"
    ".    badge chip";
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
}
.search-dropdown .search-result-icon { grid-area: icon; align-self: start; }
.search-dropdown .search-result-label {
  grid-area: label;
  min-width: 0;
  overflow-wrap: break-word; /* nur überlange Einzelwörter werden getrennt */
  word-break: normal;
  hyphens: auto;
  -webkit-line-clamp: 3;
  line-height: 1.3;
}
.search-dropdown .search-result-type-badge {
  grid-area: badge;
  min-width: 0;
  padding: 1px 6px;
  font-size: 10px;
}
.search-dropdown .search-result-type {
  grid-area: chip;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 11px;
}
@media (max-width: 760px) {
  .search-dropdown {
    max-height: min(420px, 68dvh);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* JAS-029: Datei-Felder einheitlich im CI – der Browser-Standardknopf wird wie ein
   „ghost-button" gestaltet. Selektoren und IDs bleiben unverändert. */
input[type="file"] {
  max-width: 100%;
  min-width: 0;
  font: inherit;
  font-size: var(--type-meta, 12px);
  color: var(--color-text-muted, #5b7482);
}
input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 7px 14px;
  border: 1px solid var(--color-border, #d8e4ea);
  border-radius: var(--button-radius, 10px);
  background: var(--color-primary-soft, rgba(41, 123, 150, 0.12));
  color: var(--dark-blue, #1d5a70);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease;
}
input[type="file"]::file-selector-button:hover {
  background: rgba(41, 123, 150, 0.2);
}
input[type="file"]:focus-visible {
  outline: 2px solid var(--color-primary, #297b96);
  outline-offset: 2px;
}
[data-theme="dark"] input[type="file"]::file-selector-button {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(44, 158, 201, 0.18);
  color: #c8e0ec;
}

/* ─── JAS-127: Dashboard – sanftes Aufklappen ─────────────────────── */
.dashboard-activity-more-panel {
  overflow: hidden;
}

.dashboard-activity-more-panel > .simple-list {
  margin: 0;
  padding: 0;
}

.dashboard-activity-more > [data-toggle-dashboard-activity] {
  margin-top: 8px;
}


/* KW-2/P3: Lead-Rohdaten (Einstellungen → Integrationen) */
.lead-rohdaten-zaehler { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.lead-rohdaten-tabelle-wrap { max-width: 100%; overflow-x: auto; }
.lead-rohdaten-tabelle { width: 100%; border-collapse: collapse; font-size: 12px; }
.lead-rohdaten-tabelle th, .lead-rohdaten-tabelle td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.lead-rohdaten-tabelle th { font-weight: 600; color: var(--muted, #4e616e); }
.lead-rohdaten-tabelle .ghost-button { font-size: 12px; padding: 4px 10px; white-space: nowrap; }
.lead-rohdaten-bereich[hidden] { display: none; }
/* KW-SYNC-1: Notbremse-Karte nur für Admins laut Datenbank-Profil (.stack setzt sonst display). */
#kwNotbremseKarte[hidden] { display: none; }
/* KW-M7: Ohne diese Regel zeigt .stack (display:grid) die WhatsApp-Karte trotz hidden — mit Dauer-„Wird geladen …“. */
#settingsWhatsappKoppelnCard[hidden] { display: none; }
.lead-rohdaten-tabelle td[data-label="Eingang"], .lead-rohdaten-tabelle td[data-label="Quelle"] { white-space: nowrap; }
@media (max-width: 640px) {
  .lead-rohdaten-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lead-rohdaten-tabelle, .lead-rohdaten-tabelle tbody, .lead-rohdaten-tabelle tr, .lead-rohdaten-tabelle td { display: block; width: 100%; }
  .lead-rohdaten-tabelle tr { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
  .lead-rohdaten-tabelle td { border-bottom: 0; padding: 2px 0; white-space: normal; }
  .lead-rohdaten-tabelle td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; }
  .lead-rohdaten-tabelle td[data-label="Eingang"], .lead-rohdaten-tabelle td[data-label="Quelle"] { white-space: normal; }
  .lead-rohdaten-tabelle .lead-rohdaten-aktion:empty { display: none; }
  .lead-rohdaten-tabelle .lead-rohdaten-aktion { padding-top: 6px; }
}

/* KW-WF-1: nur lesbare Projekte in der leeren Aufgaben-Ansicht */
.task-board-readonly-list .task-board-readonly-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Seitenwechsel (features/seitenwechsel.js): Die Hauptüberschrift nimmt nach einem Ansichtswechsel den Fokus
   auf, damit Tastatur und Vorlesehilfe am Anfang der neuen Ansicht beginnen. Sie ist kein Bedienelement,
   ein Fokusring wäre hier nur Rauschen. Bedienbare Elemente behalten ihren Ring. */
[data-kw-fokusziel]:focus,
[data-kw-fokusziel]:focus-visible { outline: none; box-shadow: none; }

/* Handy (bis 760 px, einspaltiges Dashboard): „Zeiten heute“ mit dem Knopf zum Arbeitsbeginn steht
   direkt unter der Überschrift – vor dem Einrichtungs-Hinweis und dem blauen HEUTE-Bereich. Vorher lag
   der Start gut 1 200 px tiefer und war am Handy schwer zu finden. Die Kachel bleibt im Raster
   (Reihenfolge der übrigen Kacheln unverändert); das Raster löst sich nur auf, damit die Kachel
   vor die Geschwister des Dashboards rücken kann. Desktop und Tablet bleiben unberührt. */
@media (max-width: 760px) {
  #view-home.is-active { display: flex; flex-direction: column; }
  #view-home .home-grid.is-dashboard-masonry.is-dashboard-single-column { display: contents !important; }
  #view-home > .dashboard-head { order: -3; }
  #view-home .home-grid.is-dashboard-single-column > [data-widget-key="workday"] { order: -2 !important; margin-bottom: 16px; }
  #view-home .home-grid.is-dashboard-single-column > [data-widget-key]:not([data-widget-key="workday"]) { margin-bottom: var(--grid-gutter, 12px); }
}

/* ── Doc-Papier: das Blatt ist in beiden Modi „Papier“ ─────────────────────────
   Das Doc-Blatt (#docRichEditor) und der Schreibtisch darunter bleiben im dunklen
   Modus hell. Früher bekam der Inhalt trotzdem die hellgrauen Dunkelmodus-Textfarben
   (Fließtext ≈ 2 : 1 auf Weiß, Überschriften und Tabellen noch schlechter). Jetzt gilt
   im Blatt überall dieselbe Papier-Palette: dunkle Schrift auf hellem Grund, hell wie
   dunkel. Werkzeugleiste, Seitenleisten und Ränder außerhalb folgen weiter dem Modus.
   Die Werte stehen NUR hier; notizfarben-gleich rechnet doc-papier.test.js den Kontrast
   aus diesen Zeilen nach (Text ≥ 4,5 : 1, Linien ≥ 3 : 1) und e2e/kontrast.js misst ihn
   am gerenderten Blatt. Die Regeln unten haben absichtlich doppelte Klasse
   (.doc-rich-editor.doc-rich-editor): Die Dunkelmodus-Regeln (z. B. `[data-theme="dark"] h1`,
   `[data-theme="dark"] body table th`, `.panel p`) wären sonst gleich stark oder stärker.
   Eine vom Nutzer gesetzte Textfarbe (style-Attribut) bleibt davon unberührt. */
/* DOC-PAPIER-ANFANG */
.doc-editor-area,
.doc-rich-editor {
  --papier-flaeche: #ffffff;
  --papier-schreibtisch: #dde3e8;
  --papier-text: var(--kf-dark-grey);
  --papier-text-leise: #46606d;
  --papier-link: var(--kf-dark-blue);
  --papier-link-hover: var(--kf-medium-blue);
  --papier-linie: #6f8794;
  --papier-kopf: #e9f4f8;
  --papier-kopf-text: var(--kf-dark-blue);
  --papier-auswahl: #bfe0ee;
}
/* Hoher Kontrast: Linien und Zweittext ganz dunkel. */
body[data-high-contrast="true"] .doc-editor-area,
body[data-high-contrast="true"] .doc-rich-editor {
  --papier-linie: #000000;
  --papier-text-leise: #333333;
}
/* DOC-PAPIER-ENDE */

/* Native Bedienelemente, Auswahl, Scrollbalken und Standardfarben (z. B. <mark>) im Blatt hell. */
.doc-rich-editor {
  color-scheme: light;
  caret-color: var(--papier-text);
}
.doc-rich-editor ::selection,
.doc-rich-editor::selection {
  background: var(--papier-auswahl);
  color: var(--papier-text);
}

/* Text: alles im Blatt erbt die Papier-Schrift (Überschriften, Absätze, Listen, Zitat, Code, Tabelle …). */
.doc-rich-editor.doc-rich-editor :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, pre, code, strong, b, em, i, u, s, sub, sup, div, span, table, thead, tbody, tr, td, figure) {
  color: inherit;
}
.doc-rich-editor.doc-rich-editor .doc-mention {
  color: var(--papier-link);
}
.doc-rich-editor.doc-rich-editor a,
.doc-rich-editor.doc-rich-editor .doc-inline-link {
  color: var(--papier-link);
}
.doc-rich-editor.doc-rich-editor a:hover,
.doc-rich-editor.doc-rich-editor .doc-inline-link:hover {
  color: var(--papier-link-hover);
}

/* Tabellen: Rand mindestens 3 : 1 gegen das Blatt, Kopfzeile hell statt dunkel. */
.doc-rich-editor.doc-rich-editor th,
.doc-rich-editor.doc-rich-editor td {
  border-color: var(--papier-linie);
}
.doc-rich-editor.doc-rich-editor th {
  /* !important nur hier: `[data-theme="dark"] body table th` setzt den Hintergrund selbst mit !important. */
  background: var(--papier-kopf) !important;
  color: var(--papier-kopf-text);
}
.doc-rich-editor.doc-rich-editor hr {
  border-color: var(--papier-linie);
}

/* Bildunterschrift und Platzhalter: kein Halbtransparent-Grau mehr (der Platzhalter lag bei 2 : 1). */
.doc-rich-editor.doc-rich-editor .doc-image-caption {
  color: var(--papier-text-leise);
}
.doc-rich-editor .doc-image-caption:focus {
  border-bottom-color: var(--papier-linie);
}
.doc-rich-editor .doc-image-caption:empty::before {
  color: var(--papier-text-leise);
  opacity: 1;
}

/* Erledigte Zeile: durchgestrichen und leiser, aber lesbar (Deckkraft .55 ergab ≈ 3,9 : 1 und im Dunkelmodus ≈ 1 : 1). */
.doc-rich-editor.doc-rich-editor .doc-checkbox-item.is-checked > *:not(.doc-cb-mark) {
  opacity: 1;
  color: var(--papier-text-leise);
}

/* Schreibtisch unter dem Blatt (bleibt hell): Seitentrenner, Fußzeile, Wortzähler tragen dieselbe dunkle Zweitschrift. */
.doc-editor-area {
  background: var(--papier-schreibtisch);
}
.doc-page-sep::before {
  background: var(--papier-schreibtisch);
}
.doc-page-sep-label {
  background: var(--papier-schreibtisch);
  color: var(--papier-text-leise);
}
.doc-editor-area .doc-page-footer {
  color: var(--papier-text-leise);
  border-top-color: var(--papier-linie);
}
.doc-editor-area .doc-word-count {
  color: var(--papier-text-leise);
}

/* Druck: Das Blatt druckt immer dunkle Schrift auf Weiß, auch wenn der dunkle Modus an ist. */
@media print {
  .doc-rich-editor {
    box-shadow: none;
  }
}

/* ── Doc-Panels: alles außerhalb des Blatts folgt dem Modus ────────────────────
   Docs-Liste, Editor-Hülle, Verknüpfungen, Kommentare/Verlauf, Navigation, Kommentar-
   Popup und Teilen-Dialog tragen Flächen und Schrift aus den --color-*-Werten; nur das
   Blatt selbst (Abschnitt „Doc-Papier“ oben) bleibt in beiden Modi hell. Früher standen
   hier feste Weißtöne (#fff, #f7fbfd, #f4f9fc) ohne dunkles Gegenstück — im dunklen Modus
   kam dann helle Fläche unter hellgrauer Schrift heraus (ca. 1 : 1).
   Die drei Werte unten gibt es nur hier; e2e/kontrast.js misst die Panels hell und dunkel
   (Text ≥ 4,5 : 1, Feldränder ≥ 3 : 1). */
/* DOC-PANELS-ANFANG */
:root {
  --doc-leise: #55606f;
  --doc-warn: #7a5500;
  --doc-linie: #7a8e9b;
}
[data-theme="dark"] {
  --doc-leise: var(--color-text-muted);
  --doc-warn: var(--color-warning);
  --doc-linie: #6a7a94;
  /* Auswahlfelder aus <summary> (Verknüpfungen, Berichtsfilter) lesen --form-control-bg;
     der Wert war nur hell definiert und ließ sie im dunklen Modus weiß. */
  --form-control-bg: var(--color-surface-muted);
}
/* Feldränder: Eingabefelder brauchen eine Kontur mit mindestens 3 : 1 gegen ihre Fläche.
   Die ID im Vorspann sticht die Grundregeln für input/select/textarea aus (die zählen
   über ihre :not()-Ketten höher als jede einfache Klasse); im Fokus bleibt deren Rahmen. */
#view-docs :is(.docs-search-input, .docs-sort-select, .doc-status-select, .doc-link-control > summary, .doc-link-search-input, .doc-comment-compose textarea):not(:focus),
#docShareModal :is(.doc-share-select, .doc-share-date-input, .doc-share-link-output):not(:focus),
#docInlineCommentText:not(:focus) {
  border-color: var(--doc-linie);
}
#view-docs .doc-title-input:not(:focus) {
  border-bottom-color: var(--doc-linie);
}
/* Die Tab-Regel für .doc-panel-tab steht mit !important weiter oben; im dunklen Modus
   braucht sie daher ein !important-Gegenstück. */
[data-theme="dark"] .doc-panel-tab {
  color: var(--doc-leise) !important;
}
[data-theme="dark"] .doc-panel-tab.is-active {
  color: var(--color-text) !important;
}
/* Dropdowns und Picker haben dunkle Flächen, aber hatten dunkelblaue Schrift. */
[data-theme="dark"] .doc-mention-option,
[data-theme="dark"] .comment-mention-option,
[data-theme="dark"] .doc-mention-item {
  color: var(--color-text);
}
.doc-emoji-picker {
  background: var(--color-surface);
}
/* Werkzeugleiste: Schrift und Auswahlfeld folgen dem Modus (die Flächen stehen oben). */
.doc-editor-toolbar button,
.doc-editor-toolbar select {
  color: var(--color-text);
}
.doc-editor-toolbar button.is-active {
  color: #fff;
}
/* Im dunklen Modus wäre der aktive Knopf aufgehellt (#3a8aa8) und weiße Schrift käme nur auf 3,9 : 1. */
[data-theme="dark"] .doc-editor-toolbar button.is-active {
  background: var(--medium-blue);
}
/* `.panel strong` färbt Auszeichnungen grau; die Symbole der Leiste erben die Knopf-Farbe. */
.doc-editor-toolbar button strong,
.doc-editor-toolbar button em,
.doc-editor-toolbar button u,
.doc-editor-toolbar button s {
  color: inherit;
}
/* Erledigte Kommentare: nicht durch Deckkraft dimmen (das drückt die Schrift unter die Grenze). */
.doc-comment-item.is-resolved {
  opacity: 1;
}
.doc-comment-item.is-resolved .comment-body {
  color: var(--doc-leise);
  text-decoration: line-through;
}
/* Export-Knopf der Docs-Liste: gemeinsame Komponente, im Docs-Panel aber helle Fläche im dunklen Modus. */
[data-theme="dark"] .docs-sidebar-panel .export-controls.is-compact-export .export-icon-button {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  border-color: var(--color-border-strong);
}
/* DOC-PANELS-ENDE */

/* KALENDER-KONTRAST-ANFANG */
/* Kalender: Lesbarkeit nach WCAG 2.1 AA, hell und dunkel.
   Text mindestens 4,5 : 1; Heute-Markierung, Filterknöpfe und Trennlinien der Tage mindestens 3 : 1.
   Die Werte stehen NUR hier (Rollen --kal-*); gemessen von e2e/kontrast.js (Kalender-Fall) und
   kalender-kontrast.test.js. Die gemeinsamen Markenfarben (koschmieder-tokens.css) bleiben unberührt:
   hier wird nur abgeleitet oder über vorhandene --color-*-Werte gearbeitet.
   Vergangene Tage, fremde Monate und nicht gewählte Filter werden NICHT mehr über Deckkraft
   abgeblendet (das drückt auch die Schrift unter die Grenze), sondern über eine eigene, trotzdem
   lesbare Farbe. */
#view-kalender,
#miniCalendarSidebar,
#appointmentModal,
#meetingPrepModal,
#calendarEditOverlay {
  --kal-text: var(--color-text);
  --kal-text-leise: #4b5563;
  --kal-text-aussen: #556070;
  --kal-text-marke: #1e5167;
  --kal-flaeche: #ffffff;
  --kal-flaeche-leise: #f4f8fb;
  --kal-kopf: #e9f1f5;
  --kal-heute: rgba(41, 123, 150, 0.12);
  --kal-wochenende: rgba(15, 23, 42, 0.04);
  --kal-linie: #7a8f9c;
  --kal-linie-fein: #c3d3dc;
  --kal-aktiv: #1e5167;
  --kal-aktiv-text: #ffffff;
  --kal-marke: #1e5167;
  --kal-marke-text: #ffffff;
  --kal-hell-weich: rgba(41, 123, 150, 0.12);
}
[data-theme="dark"] #view-kalender,
[data-theme="dark"] #miniCalendarSidebar,
[data-theme="dark"] #appointmentModal,
[data-theme="dark"] #meetingPrepModal,
[data-theme="dark"] #calendarEditOverlay {
  --kal-text: var(--color-text);
  --kal-text-leise: var(--color-text-muted);
  --kal-text-aussen: #9aa8bf;
  --kal-text-marke: var(--color-primary-hover);
  --kal-flaeche: var(--color-surface);
  --kal-flaeche-leise: var(--color-surface-soft);
  --kal-kopf: var(--color-surface-muted);
  --kal-heute: rgba(93, 184, 216, 0.16);
  --kal-wochenende: rgba(255, 255, 255, 0.035);
  --kal-linie: #64779a;
  --kal-linie-fein: #2a3654;
  --kal-aktiv: var(--medium-blue);
  --kal-aktiv-text: #ffffff;
  --kal-marke: var(--color-primary-hover);
  --kal-marke-text: #0b1220;
  --kal-hell-weich: var(--color-primary-soft);
}

/* ── Kopf: Titelband, Ansichten, Filter ──────────────────────────────────── */
[data-theme="dark"] #view-kalender > .panel > .panel-header,
[data-theme="dark"] #view-kalender .panel-header {
  background: var(--kal-flaeche-leise);
}
#view-kalender #calendarMonthLabel {
  color: var(--kal-text);
}
/* Ansichten-Reiter: eine ältere Regel setzt die Schrift mit !important auf ein dunkles Petrol, das auf dunklem
   Grund fast unsichtbar ist. Der gewählte Reiter trägt zusätzlich Unterstreichung und Fettdruck. */
#view-kalender .cal-view-tabs .ghost-button {
  color: var(--kal-text-leise) !important;
}
#view-kalender .cal-view-tabs .ghost-button.is-active {
  color: var(--kal-text-marke) !important;
}
/* Filterknöpfe: gewählt = gefüllt, nicht gewählt = nur Umriss. Beides lesbar, nicht über Deckkraft. */
#view-kalender #calendarTypeFilterBar button,
#view-kalender #calendarUserFilter .cal-user-chip,
#view-kalender #calendarUserFilter button {
  opacity: 1 !important;
  background: var(--kal-flaeche) !important;
  color: var(--kal-text-leise) !important;
  border-color: var(--kal-linie) !important;
}
#view-kalender #calendarTypeFilterBar button:hover,
#view-kalender #calendarUserFilter .cal-user-chip:hover,
#view-kalender #calendarUserFilter button:hover {
  background: var(--kal-hell-weich) !important;
  color: var(--kal-text) !important;
}
#view-kalender #calendarTypeFilterBar button.is-active,
#view-kalender #calendarTypeFilterBar [aria-pressed="true"],
#view-kalender #calendarUserFilter .cal-user-chip.is-active,
#view-kalender #calendarUserFilter button.is-active,
#view-kalender #calendarUserFilter [aria-pressed="true"] {
  background: var(--kal-aktiv) !important;
  color: var(--kal-aktiv-text) !important;
  border-color: var(--kal-aktiv) !important;
}
#view-kalender #calendarUserFilter .cal-user-chip.is-active span {
  color: inherit;
}

/* ── Monat ───────────────────────────────────────────────────────────────── */
[data-theme="dark"] #view-kalender .calendar-grid {
  background: var(--kal-flaeche);
}
#view-kalender .calendar-weekdays {
  background: var(--kal-kopf);
}
#view-kalender .calendar-weekday {
  color: var(--kal-text-leise);
}
#view-kalender .calendar-day {
  border-color: var(--kal-linie-fein);
}
#view-kalender .calendar-day-number {
  color: var(--kal-text);
}
#view-kalender .calendar-day.is-muted,
#view-kalender .calendar-day.is-muted .calendar-day-number {
  color: var(--kal-text-aussen);
}
#view-kalender .calendar-day.is-today {
  background: var(--kal-heute);
}
/* Heute: die runde Marke ist die Kopfzeile des Tages (header), die Zahl liegt darin. */
/* Heute-Marken: hell = dunkles Petrol mit weißer Schrift, dunkel = helles Blau mit dunkler Schrift
   (so hebt sich die Marke auch im Dunkeln mit mindestens 3 : 1 von der Fläche ab). */
#view-kalender .calendar-day.is-today header,
#view-kalender .calendar-day.is-today .calendar-day-number,
#view-kalender .calw-head-day-num.is-today,
#view-kalender .cald-datebar .badge,
#miniCalendarSidebar .mini-cal-day.is-today {
  background: var(--kal-marke);
  color: var(--kal-marke-text);
}
#view-kalender .calendar-kw-badge {
  color: var(--kal-text-leise);
  opacity: 1;
}
/* Präsenz-Pillen: Schrift in der Textfarbe, nicht im Marken-Petrol (das kam auf der Tönung nur auf 4,0 : 1);
   in fremden Monaten und bei „nur geplant“ nicht über Deckkraft abblenden. */
#view-kalender .calendar-presence-pill {
  color: var(--kal-text);
}
#view-kalender .calendar-day.is-muted .calendar-presence-pill,
#view-kalender .calendar-presence-pill.is-plan-ohne-erfassung {
  opacity: 1;
}
#view-kalender .calendar-more {
  color: var(--kal-text-leise);
  border-color: var(--kal-linie);
}
[data-theme="dark"] #view-kalender .calendar-more {
  background: var(--color-surface-muted);
}
[data-theme="dark"] #view-kalender .calendar-more:hover,
[data-theme="dark"] #view-kalender .calendar-more:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

/* ── Woche und Tag ───────────────────────────────────────────────────────── */
#view-kalender :is(.calw-shell, .calw-head, .cald-shell, .cald-head) {
  background: var(--kal-flaeche);
}
[data-theme="dark"] #view-kalender :is(.calw-shell, .cald-shell) {
  border-color: var(--kal-linie-fein);
}
#view-kalender :is(.calw-gutter, .cald-gutter, .cald-datebar) {
  background-color: var(--kal-flaeche-leise);
}
#view-kalender .cald-datebar.is-today {
  background-color: var(--kal-heute);
}
#view-kalender .calw-head-day-label {
  color: var(--kal-text-leise);
}
#view-kalender .calw-head-day-num {
  color: var(--kal-text-marke);
}
#view-kalender .calw-head-col.is-weekend .calw-head-day-label,
#view-kalender .calw-head-col.is-weekend .calw-head-day-num {
  color: var(--kal-text-aussen);
}
#view-kalender .calw-head-col.is-today,
#view-kalender .calw-col.is-today {
  background: var(--kal-heute);
}
#view-kalender .calw-head-col.is-weekend,
#view-kalender .calw-col.is-weekend {
  background: var(--kal-wochenende);
}
#view-kalender :is(.calw-lbl, .cald-lbl) {
  color: var(--kal-text-leise);
}
/* Vergangene Tage und Termine: nur eine leichte Tönung, nie Deckkraft auf Text. */
#view-kalender .calw-head-col.is-past,
#view-kalender .calw-event,
#view-kalender .cald-event,
#view-kalender .cald-appt-event,
#view-kalender .calendar-agenda-status.is-presence-offen {
  opacity: 1;
}
/* Vergangene Termine waren zusätzlich entsättigt (filter: saturate); das verschiebt Farbe und Schrift
   gegeneinander und drückt mittlere Töne unter 4,5 : 1. Die Tönung der vergangenen Spalte genügt. */
#view-kalender .calw-col.is-past .calw-event,
#view-kalender .cald-col.is-past .cald-event {
  filter: none;
}
#view-kalender .calw-col.is-past {
  background: var(--kal-wochenende);
}
/* Schrift auf farbigen Balken/Pillen: die Farbe kommt aus dem Skript (kalenderSchriftfarbe). */
#view-kalender :is(.calw-event-time, .calw-event-appt-title, .calw-event-badge, .cald-event-lbl, .cald-event-time, .calw-absence-initials, .calw-absence-lbl) {
  color: inherit;
}
#view-kalender .calw-absence-dot {
  background: currentColor;
  opacity: 0.55;
}
#view-kalender .cald-datebar {
  color: var(--kal-text-marke);
}
#view-kalender .cald-appt-lbl {
  color: var(--kal-text-marke);
}
#view-kalender .cald-head-name {
  color: var(--kal-text-leise);
}
#view-kalender .cald-back-btn {
  opacity: 1;
  color: var(--kal-text-marke);
}
#view-kalender .cald-tasks strong,
#view-kalender .cald-tasks .muted {
  color: var(--kal-text-leise);
}

/* Gesperrte Tage (Planungssperre): rote Beschriftung im dunklen Modus aufgehellt. */
[data-theme="dark"] #view-kalender .calendar-block-label {
  color: var(--color-danger);
}

/* ── Liste (Agenda) ──────────────────────────────────────────────────────── */
#view-kalender .calendar-agenda-title,
#view-kalender .calendar-agenda-date-button,
#view-kalender .calendar-agenda-list time {
  color: var(--kal-text-marke);
}
#view-kalender .calendar-agenda-proj {
  color: var(--kal-text-leise);
}

/* ── Jahr ────────────────────────────────────────────────────────────────── */
#view-kalender .year-stat-label,
#view-kalender .year-month-sub,
#view-kalender .year-legend-label,
#view-kalender .year-legend-max,
#view-kalender .year-month-dow span {
  color: var(--kal-text-leise);
}
[data-theme="dark"] #view-kalender :is(.year-heatmap, .year-month) {
  background: var(--kal-flaeche);
}
[data-theme="dark"] #view-kalender :is(.year-stat-card, .year-mode-switch) {
  background: var(--color-surface-muted);
}
#view-kalender .year-month-head strong,
#view-kalender .year-stat-value {
  color: var(--kal-text);
}
#view-kalender .year-mode-switch .ghost-button.is-active {
  background: var(--kal-aktiv);
  color: var(--kal-aktiv-text);
}

/* ── Mini-Kalender ───────────────────────────────────────────────────────── */
#miniCalendarSidebar .mini-cal-dow,
#miniCalendarSidebar .mini-cal-legend,
#miniCalendarSidebar .mini-cal-legend span {
  color: var(--kal-text-leise);
}
/* ── Dialoge des Kalenders: Menü „+ Eintragen“, Termin, Tag eintragen ─────── */
[data-theme="dark"] #view-kalender .cal-add-menu {
  background: var(--color-surface-muted);
  border-color: var(--color-border-strong);
}
[data-theme="dark"] #view-kalender .cal-add-menu li button:hover {
  background: var(--color-primary-soft);
}
/* Primärknöpfe in diesen Dialogen: der allgemeine Verlauf beginnt bei einem hellen Cyan (#3ab5d8),
   weiße Schrift käme dort nur auf 2,4 : 1. Hier derselbe Verlauf wie beim Knopf „+ Eintragen“. */
#appointmentModal .primary-button,
#meetingPrepModal .primary-button,
#calendarEditOverlay .primary-button {
  background: linear-gradient(135deg, var(--medium-blue), var(--dark-blue));
  color: #fff;
}
/* Platzhalter: heller Grauton war auf der Feldfläche unter 2 : 1. */
:is(#view-kalender, #appointmentModal, #meetingPrepModal, #calendarEditOverlay) :is(input, textarea)::placeholder {
  color: var(--kal-text-aussen);
  opacity: 1;
}
#calendarEditOverlay .calendar-edit-grid label span {
  color: var(--kal-text-leise);
}
[data-theme="dark"] #appointmentModal .appt-title-input,
[data-theme="dark"] #appointmentModal .appt-title-input:focus {
  background: var(--color-surface-muted);
  color: var(--color-text);
}
[data-theme="dark"] #appointmentModal .appt-field-row {
  background: var(--color-surface-soft);
}
[data-theme="dark"] #appointmentModal .appt-attendee-pill {
  background: var(--color-surface-muted);
  color: var(--color-text);
}
[data-theme="dark"] #appointmentModal .appt-attendee-pill:hover,
[data-theme="dark"] #appointmentModal .appt-attendee-pill.is-sel {
  background: var(--color-primary-soft);
}
[data-theme="dark"] #appointmentModal .kwork-address-suggestions {
  background: var(--color-surface-muted);
  border-color: var(--color-border-strong);
}
[data-theme="dark"] #appointmentModal .kwork-address-option {
  background: transparent;
  color: var(--color-text);
  border-bottom-color: var(--color-border);
}
/* KALENDER-KONTRAST-ENDE */

/* DUNKELMODUS-KONTRAST-ANFANG */
/* Dunkler Modus außerhalb des Kalenders: Hellgraue Flächen mit heller Schrift (Titelbänder, Karten,
   Tabellen), dunkles Petrol als Schriftfarbe auf dunklem Grund, zu blasse Beschriftungen.
   Vorgehen nach § 27.5: zuerst die Werte (Tokens) für den dunklen Modus setzen, danach nur dort
   einzelne Regeln, wo eine Komponente die Farbe fest einträgt. Alle Paare mindestens 4,5 : 1
   (Text) bzw. 3 : 1 (Bedienelemente); gemessen mit e2e/kontrast.js (Fälle „ansicht-…-dunkel“).
   Die Markenfarben (koschmieder-tokens.css) bleiben unberührt. */
[data-theme="dark"] {
  --hero-light-bg:
    radial-gradient(circle at 7% 15%, rgba(93, 184, 216, 0.14), transparent 34%),
    linear-gradient(145deg, var(--color-surface-soft), var(--color-surface));
  --hero-border: var(--color-border);
  --hero-shadow: none;
  --bg-card: var(--color-surface);
}
/* Hell wie dunkel: Der dunkle Titelverlauf endete im hellen Blau (#2c9ec9); weiße Schrift käme dort
   nur auf 3,1 : 1. Jetzt endet er im mittleren Petrol (weiß darauf 4,8 : 1). */
:root {
  --hero-dark-bg:
    radial-gradient(circle at 14% 10%, rgba(44, 158, 201, 0.22), transparent 34%),
    linear-gradient(135deg, var(--dark-blue) 0%, var(--medium-blue) 100%);
}
[data-theme="dark"] .admin-badge {
  opacity: 1;
}
[data-theme="dark"] {
  --dunkel-auf-hell: #0b1220;
}

/* Flächen mit fest eingetragenem Hellton bekommen die dunkle Kartenfläche. */
[data-theme="dark"] .project-overview-table-wrap,
[data-theme="dark"] .zeiten-status-timer,
[data-theme="dark"] .day-plan-empty-state,
[data-theme="dark"] .day-planner-overdue-toggle,
[data-theme="dark"] .settings-overview-card {
  background: var(--color-surface-soft);
  border-color: var(--color-border);
}
[data-theme="dark"] .settings-admin-header {
  background: var(--color-surface);
}
[data-theme="dark"] .day-planner-header {
  background: linear-gradient(135deg, #14323f 0%, var(--dark-blue) 100%);
}
[data-theme="dark"] .day-planner-header :is(span:not(.admin-badge), label > span) {
  color: var(--color-text);
}
[data-theme="dark"] .zeiten-status-timer strong,
[data-theme="dark"] .day-plan-capacity-label strong {
  color: var(--color-text);
}
[data-theme="dark"] .zeiten-status-timer span,
[data-theme="dark"] .day-plan-capacity-label span,
[data-theme="dark"] .day-planner-overdue-toggle {
  color: var(--color-text-muted);
}

/* Schrift in dunklem Petrol (--dark-blue) steht auf hellem Grund richtig, auf dunklem unlesbar. */
[data-theme="dark"] :is(.settings-overview-title, .stats-kpi-val, .lohn-page-title h1, .zeiten-status-copy h2, .zeiten-status-state, .auswertung-section h3) {
  color: var(--color-text);
}
[data-theme="dark"] .settings-nav-list button:not(.is-active) {
  color: var(--color-text-muted);
}
[data-theme="dark"] .settings-nav-list button:hover {
  color: var(--color-primary-hover);
}
/* Reiter: die allgemeine Regel setzt die Farbe mit !important, deshalb hier ebenfalls. */
[data-theme="dark"] :is(.project-inner-link, .zeiten-tab-btn, .lohn-tab-btn, .stats-period-tabs .ghost-button, .ptimer-tab-btn) {
  color: var(--color-text-muted) !important;
}
[data-theme="dark"] :is(.project-inner-link, .zeiten-tab-btn, .lohn-tab-btn, .stats-period-tabs .ghost-button, .ptimer-tab-btn).is-active {
  color: var(--color-primary-hover) !important;
}

/* Zu blasse Beschriftungen (Grau-Blau-Töne, die für Weiß gemacht sind). */
[data-theme="dark"] :is(
  label > span, .section-label, .form-label, .settings-row strong, .toolbar-inline > strong,
  .project-fact-label, .mein-tag-since, .mein-tag-status-label, .work-progress-pct,
  .zeiten-status-copy p, .zeiten-status-metric-hint, .input-unit, .day-planner-hours-field span,
  .day-plan-empty-state p, .stats-heatmap-month-label, .stats-heatmap-day-label, .stats-heatmap-legend-label,
  .project-main-cell small, .auswertung-library-list span, .empty-state
) {
  color: var(--color-text-muted);
}
[data-theme="dark"] .project-date-overdue,
[data-theme="dark"] .stats-kpi-trend-down {
  color: var(--color-danger);
}
[data-theme="dark"] .stats-kpi-trend-up,
[data-theme="dark"] .stats-kpi-card-success .stats-kpi-val {
  color: var(--color-success);
}
[data-theme="dark"] .stats-kpi-card-attention .stats-kpi-val {
  color: var(--color-warning);
}
[data-theme="dark"] .today-tile p.muted {
  color: var(--color-text);
}
[data-theme="dark"] .link-button {
  color: var(--color-primary-hover);
}
/* Helle Füllungen tragen dunkle Schrift (weiß käme dort unter 3 : 1). */
[data-theme="dark"] .kw-health-score,
[data-theme="dark"] .kw-business-tabs button.is-active {
  color: var(--dunkel-auf-hell);
}
/* Hell wie dunkel: Einchecken-Knopf mit Verlauf bis ins helle Blau, weiße Schrift käme dort auf 3,1 : 1. */
.mein-tag-checkin-btn {
  background: linear-gradient(135deg, var(--medium-blue), var(--dark-blue));
}
/* Einstellungen: Zeilen und Karten mit fest weißem Grund. */
[data-theme="dark"] .settings-row,
[data-theme="dark"] .role-permissions-card,
[data-theme="dark"] .settings-sensitive-note {
  background: var(--color-surface-soft);
  border-color: var(--color-border);
}
[data-theme="dark"] .role-perm-group {
  border-color: var(--color-border);
}
[data-theme="dark"] .role-perm-group legend {
  color: var(--color-text-muted);
}
[data-theme="dark"] .pin-status-badge {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}
[data-theme="dark"] .pin-status-badge.is-active {
  background: var(--color-success-soft);
  color: var(--color-success);
}
[data-theme="dark"] .importer-tabs button.is-active,
[data-theme="dark"] .bridge-pin-code {
  color: var(--color-primary-hover);
}
[data-theme="dark"] .sidebar-section-label {
  color: var(--color-text-muted);
}
[data-theme="dark"] .my-tasks p,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .empty-state p {
  color: var(--color-text);
}
[data-theme="dark"] .ai-budget-status {
  background: var(--color-surface-soft);
  border-color: var(--color-border);
}
/* Hell wie dunkel: Abschnittstitel der Seitenleiste waren zusätzlich auf 65 % Deckkraft gesetzt. */
.my-tasks h2.sidebar-section-title,
.bridge-external-icon,
.bridge-external-link .bridge-external-icon {
  opacity: 1;
}
/* Eine ältere Regel setzt die Schrift leerer Zustände mit !important auf die gedämpfte Farbe. */
[data-theme="dark"] .empty-state p {
  color: var(--color-text) !important;
}
[data-theme="dark"] :is(.ai-budget-status-head span, .ai-budget-status-detail) {
  color: var(--color-text-muted);
}
/* Platzhalter: der dunkle Grundwert (#4e6a7a) kam auf den Feldern nur auf rund 2,5 : 1. */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}
[data-theme="dark"] .app-dialog-message {
  color: var(--color-text-muted);
}
/* Trennzeichen der Brotkrumen waren auf 60 % Deckkraft gesetzt (im Dunkeln 3,7 : 1). */
[data-theme="dark"] #topbarBreadcrumb .crumb-sep,
[data-theme="dark"] .project-task-detail-breadcrumb .ptd-crumb-sep {
  opacity: 1;
}
/* DUNKELMODUS-KONTRAST-ENDE */

/* ==========================================================================
   MARKENFARBEN-AA (30.10.2026) — Reste, die sich nicht ueber die Tokens loesen
   Werte und Begruendung: DESIGN_RULES.md, "Aenderung 30.10.2026".
   ========================================================================== */
/* Link-Knopf: das helle Cyan (#2c9ec9) kam auf Weiss nur auf 3,1 : 1. */
.link-button {
  color: var(--color-primary);
}
/* Im blauen HEUTE-Bereich ist die Flaeche dunkel: dort weiss. */
.today-hero-widget .link-button,
.today-tile .link-button {
  color: #fff;
}
.today-hero-widget .link-button:hover {
  color: #fff;
  text-decoration-thickness: 2px;
}
/* Gedaempfte Schrift im HEUTE-Bereich: 65-70 % Weiss kamen dort nur auf ~3 : 1. */
.today-tile p.muted {
  color: #fff;
}
.today-task-list .muted,
.today-project-time-meta,
.today-appointment-entry span {
  color: rgba(255, 255, 255, 0.92);
}
.today-eyebrow {
  opacity: 0.9;
}
/* Zweitknoepfe im HEUTE-Bereich: dunkel hinterlegt statt hell (weisse Schrift auf hellerer Flaeche war zu schwach). */
.today-quick-actions .ghost-button,
.today-tile .ghost-button {
  background: rgba(10, 40, 55, 0.4);
  border-color: rgba(255, 255, 255, 0.55);
}
.today-quick-actions .ghost-button:hover,
.today-tile .ghost-button:hover {
  background: rgba(10, 40, 55, 0.55);
}
/* "R"-Marke (Berechtigung erforderlich): war auf 45 % Deckkraft gedimmt und nur 8 px gross. */
.admin-badge {
  opacity: 1;
  font-size: 9px;
}
.sidebar .admin-badge {
  background: rgba(232, 248, 255, 0.92);
  color: var(--kf-dark-blue);
}
/* Gedaempfte Texte in der Seitenleiste (dunkle Flaeche): helle Schrift statt des grauen Hilfstons. */
.sidebar .muted,
.sidebar li.muted {
  color: rgba(232, 248, 255, 0.82);
}
/* Leerer Zustand in der Seitenleiste: der graue Hilfston kam auf der grauen Kachel nur auf 3,6 : 1. */
:root:not([data-theme="dark"]) .sidebar .empty-state p {
  color: #14323f !important;
}
/* Fokus-Ring in der Seitenleiste: die Flaeche ist dunkel, also ein heller Ring. Die Ringe sind als
   fertige Werte am :root aufgeloest und muessen deshalb hier neu gesetzt werden. */
.sidebar {
  --focus-ring: 0 0 0 2px #e8f8ff;
  --focus-ring-strong: 0 0 0 3px #e8f8ff;
}
.sidebar :focus-visible {
  outline-color: #e8f8ff !important;
}
/* Planer-Kopf: bleibt in beiden Modi dunkelblau; die Feldrahmen brauchen dort einen hellen Ton (3 : 1 auf #1e5167). */
[data-theme="dark"] body .day-planner-header :is(input, select, textarea) {
  border-color: #a9bccb !important;
}
/* Der Planer-Kopf ist in beiden Modi dunkel: Fokus-Ring dort hell (die Ringe sind am :root fertig aufgeloest). */
.day-planner-header {
  --focus-ring: 0 0 0 2px #e8f8ff;
  --focus-ring-strong: 0 0 0 3px #e8f8ff;
}
.day-planner-header :focus-visible {
  outline-color: #e8f8ff !important;
}