/* KI-Zentrale · Prime Solutions Kezic
   Ein helles Thema: warmes Papier als Grundfläche, Inhalt auf einem helleren Blatt, Tinte als Schriftfarbe und
   ein gedecktes Petrol als einzige Akzentfarbe. Überschriften in einer Serifenschrift für Ruhe und Wertigkeit.
   Nur Systemschriften (keine externen Fonts, DSGVO). Alle Texte erreichen mindestens 4,5:1 Kontrast. */

:root {
  --bg: #f3efe7;            /* Grundfläche hinter Seitenleiste und Blatt */
  --surface: #fffdf9;       /* Inhaltsflächen */
  --surface-sunk: #f8f5ef;  /* Kopfzeilen, ruhige Flächen */
  --surface-hover: #f1ece3;
  --text: #22201b;
  --text-muted: #5f5a50;
  --text-subtle: #716b60;
  --border: #e8e2d7;
  --border-strong: #d6cec0;

  --accent: #1f6a64;
  --accent-hover: #17544f;
  --on-accent: #ffffff;
  --accent-soft: #e2eeeb;
  --tinte: #26241f;         /* dunkle Flächen: Marke, Hinweis auf Neues */

  --ok-text: #2f6b44;  --ok-bg: #e5f0e7;
  --err-text: #a63d2a; --err-bg: #f7e7e2;
  --open-text: #85560c; --open-bg: #f6ead3;
  --prio-dringend: #c4473a;
  --prio-hoch: #cc6b22;
  --prio-mittel: #b48a1e;
  --prio-niedrig: #9a9386;

  --focus: #1f6a64;
  --radius-sm: 6px;
  --radius: 9px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgb(60 45 20 / 0.05);
  --shadow-blatt: 0 1px 2px rgb(60 45 20 / 0.04), 0 12px 32px -18px rgb(60 45 20 / 0.18);
  --shadow-pop: 0 14px 36px -10px rgb(50 38 18 / 0.24), 0 2px 6px rgb(50 38 18 / 0.08);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, "New York", "Iowan Old Style", Charter, "Source Serif Pro", "Palatino Linotype", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14.5px/1.55 var(--font);
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--accent); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
code {
  font: 12.5px/1.4 var(--font-mono);
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  padding: 0 5px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 60; background: var(--surface); padding: 8px 12px; border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--text-muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.wrap { overflow-wrap: anywhere; }
.pre { white-space: pre-line; }
.err-text { color: var(--err-text); }

/* ---------- Typografie und Kopfbereich ---------- */

.page-head { margin-bottom: 32px; }
.page-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
h1 {
  font-family: var(--font-serif);
  font-size: 31px; font-weight: 500; line-height: 1.15; letter-spacing: -0.012em;
  margin: 0 0 8px; text-wrap: balance;
}
h2 { font-size: 16px; font-weight: 620; letter-spacing: -0.01em; margin: 0 0 12px; text-wrap: balance; }
h3 { font-size: 14.5px; font-weight: 600; }
.lead { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.6; max-width: 64ch; text-wrap: pretty; }
p { text-wrap: pretty; }
.crumb { margin: 0 0 10px; font-size: 13px; }
.crumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; border-radius: var(--radius-sm); }
.crumb a::before { content: "‹"; font-size: 17px; line-height: 1; margin-top: -2px; color: var(--text-subtle); transition: transform 160ms var(--ease); }
.crumb a:hover { color: var(--text); }
.crumb a:hover::before { transform: translateX(-2px); color: var(--text); }
.note { font-size: 13px; color: var(--text-muted); max-width: 70ch; margin: 14px 0 0; }
.block { margin-top: 44px; }
.block-first { margin-top: 0; }
.block-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.block-kopf h2 { margin: 0; }
.block-kopf a { font-size: 13px; text-decoration: none; }
.block-kopf a:hover { text-decoration: underline; }
.small-head { font-size: 12.5px; font-weight: 550; color: var(--text-muted); margin: 0 0 8px; }
.vor-liste { margin: 0 0 12px; }

/* ---------- Hinweise und Status ---------- */

.flash, .status {
  display: block; padding: 11px 16px 11px 14px; border-radius: var(--radius); margin-bottom: 22px;
  border: 1px solid transparent; border-left-width: 3px; overflow-wrap: anywhere; font-size: 14px;
}
.flash-ok, .status-ok { background: var(--ok-bg); color: var(--ok-text); border-color: color-mix(in srgb, var(--ok-text) 22%, transparent); border-left-color: var(--ok-text); }
.flash-err, .status-err { background: var(--err-bg); color: var(--err-text); border-color: color-mix(in srgb, var(--err-text) 22%, transparent); border-left-color: var(--err-text); }
.status-open { background: var(--open-bg); color: var(--open-text); border-color: color-mix(in srgb, var(--open-text) 22%, transparent); border-left-color: var(--open-text); }
.status a, .flash a { color: inherit; font-weight: 600; }
.status details { margin-top: 8px; }
.status summary { cursor: pointer; font-weight: 600; }
.status ul { margin: 6px 0 0; padding-left: 20px; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 580; line-height: 19px;
  padding: 0 7px; border-radius: var(--radius-sm); white-space: nowrap;
  background: var(--surface-sunk); color: var(--text-muted); border: 1px solid var(--border);
}
.badge-ok { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.badge-open { background: var(--open-bg); color: var(--open-text); border-color: transparent; }
.badge-err { background: var(--err-bg); color: var(--err-text); border-color: transparent; }
.badge-info { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge-muted { background: var(--surface-sunk); color: var(--text-muted); }
.badge-neu { background: var(--accent); color: var(--on-accent); border-color: transparent; }
/* ---------- Formulare ---------- */

.settings { display: grid; gap: 20px; }

.group {
  margin: 0;
  padding: 18px 20px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  min-width: 0;
}
/* Legende als Kopfzeile innerhalb des Panels */
.group > legend { float: left; width: 100%; padding: 0; margin: 0 0 14px; font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.group > legend ~ * { clear: both; } /* ~ statt +: ein verstecktes Feld direkt nach der Legende darf das Clearing nicht schlucken */
.group-hint { margin: 0 0 14px; color: var(--text-muted); font-size: 13px; max-width: 70ch; clear: both; }
.group-actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field-wide { grid-column: 1 / -1; }

label { font-weight: 500; font-size: 13px; }
.req { font-weight: 450; font-size: 11.5px; color: var(--text-subtle); margin-left: 6px; }
.hint { margin: 0; font-size: 12.5px; color: var(--text-muted); text-wrap: pretty; }

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="tel"],
input[type="number"], input[type="time"], input[type="date"], input[type="file"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 6px 10px;
  min-height: 34px;
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
input[type="file"] { padding: 5px 6px; background: var(--surface-sunk); }
select { background-color: var(--surface); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--border-strong) 60%, var(--text-subtle)); }
textarea { resize: vertical; line-height: 1.5; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent);
}
input[readonly] { background: var(--surface-sunk); color: var(--text-muted); }

.field-toggle { grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }
.field-toggle .hint { grid-column: 2; }
/* Sprungziel aus einem Link (z. B. fehlende Freigabe): Feld kurz sichtbar machen */
.field:has(> :target) { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--radius); }
.field > :target { scroll-margin-top: 32px; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
/* Auswahl mit Knopf daneben (z. B. Stimme + Anhören) */
.feld-mit-knopf { display: flex; gap: 8px; align-items: center; }
.feld-mit-knopf select { flex: 1; min-width: 0; }
.feld-mit-knopf .btn { flex: none; min-width: 6.5em; }
.feld-mit-knopf .btn[aria-busy="true"] { cursor: progress; opacity: .75; }
.probe-status { color: var(--err-text); }
.inline-check {display: flex; gap: 8px; align-items: center; font-weight: 400; font-size: 13px; color: var(--text-muted); }

.savebar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 0;
  background: linear-gradient(to top, var(--surface) 72%, transparent);
}

/* Wochentage im Berichts-Zeitplan */
.wochentage { border: 0; padding: 0; margin: 0; min-width: 0; }
.wochentage legend { font-weight: 500; font-size: 13px; margin-bottom: 6px; padding: 0; }
.field-tags { border: 0; padding: 0; margin: 0; min-width: 0; }
.field-tags legend { font-weight: 500; font-size: 13px; margin-bottom: 6px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.chip span {
  display: inline-block; padding: 5px 11px; font-size: 13px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  color: var(--text-muted); background: var(--surface); transition: background-color .15s, color .15s, border-color .15s; user-select: none;
}
.chip:hover span { background: var(--surface-hover); color: var(--text); }
.chip input:checked + span { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.tage { justify-self: start; width: max-content; max-width: 100%; display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.tag { position: relative; }
.tag + .tag { border-left: 1px solid var(--border-strong); }
.tag input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.tag span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 34px; padding: 0 10px;
  background: var(--surface); color: var(--text-muted);
  font-weight: 550; font-size: 13px;
  transition: background-color 120ms var(--ease), color 120ms var(--ease);
}
.tag:hover span { background: var(--surface-hover); color: var(--text); }
.tag input:checked + span { background: var(--accent-soft); color: var(--accent); }
.tag input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 13.5px; font-weight: 550;
  white-space: nowrap;
  border-radius: var(--radius);
  padding: 6px 13px;
  min-height: 34px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease), transform 80ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 1px 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow); }
.btn-secondary:hover { background: var(--surface-hover); color: var(--text); }
.btn-quiet { background: transparent; color: var(--text-muted); padding-left: 8px; padding-right: 8px; }
.btn-quiet:hover { color: var(--text); background: var(--surface-hover); }
.btn-danger { background: transparent; color: var(--err-text); border-color: color-mix(in srgb, var(--err-text) 45%, transparent); }
.btn-danger:hover { background: var(--err-bg); }
.btn-sm { min-height: 28px; padding: 3px 10px; font-size: 12.5px; border-radius: var(--radius-sm); }
.btn-icon { min-height: 28px; width: 28px; padding: 0; }
.btn-icon svg { width: 16px; height: 16px; fill: currentColor; }
.danger { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); }
.inline-action { margin-top: 8px; }

/* ---------- Panels, Gruppen, Listen ---------- */

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
/* Kein overflow: hidden, damit das Bearbeiten-Menü nicht abgeschnitten wird; Ecken stattdessen an den Rändern runden */
.panel > :first-child, .panel > :first-child > .gruppe-kopf { border-top-left-radius: 11px; border-top-right-radius: 11px; }
.panel .aufgaben > .aufgabe:last-child, .panel > .panel-fuss:last-child { border-bottom-left-radius: 11px; border-bottom-right-radius: 11px; }
details.panel:not([open]) > summary { border-radius: 11px; }
.panel + .panel { margin-top: 14px; }
.gruppe + .gruppe { border-top: 1px solid var(--border); }
.gruppe-kopf {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 7px 16px;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px; font-weight: 600; color: var(--text);
  letter-spacing: 0;
}
.gruppe-kopf .anzahl { color: var(--text-subtle); font-weight: 500; font-variant-numeric: tabular-nums; }
.gruppe-warn .gruppe-kopf span:first-child { color: var(--err-text); }
details.panel > summary.gruppe-kopf { cursor: pointer; list-style: none; border-bottom: 0; }
details.panel > summary.gruppe-kopf::-webkit-details-marker { display: none; }
details.panel > summary.gruppe-kopf::before { content: ""; width: 0; height: 0; border-left: 4px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; color: var(--text-subtle); transition: transform 120ms var(--ease); }
details.panel[open] > summary.gruppe-kopf { border-bottom: 1px solid var(--border); }
details.panel[open] > summary.gruppe-kopf::before { transform: rotate(90deg); }
.panel-fuss { display: block; padding: 9px 16px; border-top: 1px solid var(--border); font-size: 13px; text-decoration: none; color: var(--text-muted); }
.panel-fuss:hover { background: var(--surface-hover); color: var(--text); }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.empty { padding: 28px 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); text-align: center; }
.empty p { margin: 0 0 4px; }
.empty p:last-child { margin: 0; }


/* Kategorien-Editor (Postfach-Regeln): eine Karte je Kategorie */
.field-kategorien { display: grid; gap: 10px; }
.field-label { font-weight: 600; font-size: 13px; }
.kat-hinweis { margin: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--accent-soft); color: var(--text); font-size: 13px; }
.kat-liste { display: grid; gap: 10px; }
.kat-zeile { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunk); }
.kat-zeile.kat-entfernt { opacity: 0.45; }
.kat-zeile.kat-entfernt .kat-name { text-decoration: line-through; }
.kat-kopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kat-nr { min-width: 1.6em; font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 600; }
.kat-name { flex: 1 1 220px; font-weight: 600; }
.kat-aktionen { display: flex; gap: 6px; align-items: center; }
.kat-feld { display: grid; gap: 4px; font-size: 12.5px; color: var(--text-muted); }
.kat-feld textarea, .kat-feld input { width: 100%; }
.kat-mehr summary { cursor: pointer; font-size: 12.5px; color: var(--text-muted); }
.kat-mehr-felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
@media (max-width: 760px) { .kat-mehr-felder { grid-template-columns: 1fr; } }

/* Ausprobieren (Postfach-Regeln): Beispielmail und Ergebnis */
.probe { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.probe-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.probe-felder .kat-breit { grid-column: 1 / -1; }
.probe-ergebnis { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--accent-soft); }
.probe-tabelle { display: grid; gap: 6px; margin: 0; }
.probe-zeile { display: grid; grid-template-columns: 11rem 1fr; gap: 8px; }
.probe-zeile dt { color: var(--text-muted); font-size: 13px; }
.probe-zeile dd { margin: 0; }
.probe-liste { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.probe-lernen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) { .probe-felder, .probe-zeile { grid-template-columns: 1fr; } }

/* Auswahl als Karten (z. B. Betriebsart) und eingeklappte Experten-Gruppen */
.auswahl-karten { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.auswahl-karten legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; padding: 0; }
.auswahl-karte { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.auswahl-karte:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.auswahl-karte input { margin-top: 3px; }
.auswahl-karte > span { display: grid; gap: 2px; }
.group-klappe > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.group-klappe[open] > summary { margin-bottom: 14px; }
/* ---------- Todo-Zeilen ---------- */

.aufgaben { list-style: none; margin: 0; padding: 0; }
.aufgabe {
  position: relative;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: start; gap: 10px;
  padding: 9px 12px 9px 14px;
  transition: background-color 120ms var(--ease), opacity 200ms var(--ease);
}
.aufgabe + .aufgabe { border-top: 1px solid var(--border); }
.aufgabe:hover { background: var(--surface-hover); }
.aufgabe-haken { margin: 0; }
.haken {
  display: grid; place-items: center;
  width: 18px; height: 18px; margin-top: 1px; padding: 0;
  border: 1.5px solid var(--border-strong); border-radius: 50%;
  background: var(--surface); color: transparent;
  cursor: pointer;
  transition: border-color 120ms var(--ease), background-color 120ms var(--ease), color 120ms var(--ease), transform 80ms var(--ease);
}
/* Größere Trefferfläche ohne größeres Symbol */
.haken { position: relative; }
.haken::after { content: ""; position: absolute; inset: -9px; }
.haken svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.haken:hover { border-color: var(--accent); color: color-mix(in srgb, var(--accent) 55%, transparent); }
.haken:active { transform: scale(0.9); }
.aufgabe-erledigt .haken { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.aufgabe-erledigt { opacity: 0.62; }
.aufgabe-erledigt .aufgabe-titel { text-decoration: line-through; text-decoration-color: var(--text-subtle); }

.prio { display: inline-flex; align-items: center; gap: 4px; min-width: 42px; height: 20px; color: var(--prio-niedrig); }
.prio-ico { width: 14px; height: 14px; flex: none; fill: currentColor; stroke: currentColor; stroke-width: 0; }
.prio-ico .aus { fill: var(--border-strong); }
.prio-ohne .prio-ico { fill: none; stroke-width: 1.5; stroke-linecap: round; color: var(--text-subtle); }
.prio-dringend .prio-flaeche { fill: var(--prio-dringend); }
.prio-dringend .prio-zeichen { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.prio-zahl { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.prio-dringend { color: var(--prio-dringend); }
.prio-hoch { color: var(--prio-hoch); }
.prio-mittel { color: var(--prio-mittel); }
.prio-niedrig { color: var(--prio-niedrig); }

.aufgabe-text { display: grid; gap: 1px; min-width: 0; }
.aufgabe-titel { font-weight: 500; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.aufgabe-meta { font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.trenner { margin: 0 6px; color: var(--text-subtle); }
.aufgabe-quelle { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.aufgabe-quelle:hover { color: var(--text); text-decoration-color: currentColor; }
.aufgabe-details {
  font-size: 12.5px; color: var(--text-subtle); white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.aufgabe-rechts { display: flex; align-items: center; gap: 6px; min-height: 20px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-muted);
  font-size: 12px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.chip-heute { color: var(--open-text); background: var(--open-bg); border-color: transparent; }
.chip-ueberfaellig { color: var(--err-text); background: var(--err-bg); border-color: transparent; }

/* Termine: Uhrzeit links, Konflikte mit Markierung am Rand */
.termin {
  position: relative;
  display: grid; grid-template-columns: 6.6em minmax(0, 1fr) auto;
  align-items: start; gap: 10px;
  padding: 9px 12px 9px 14px;
  transition: background-color 120ms var(--ease);
}
.termin + .termin { border-top: 1px solid var(--border); }
.termin:hover { background: var(--surface-hover); }
.termin-konflikt { box-shadow: inset 3px 0 0 var(--err-text); }
.termin-zeit { font-size: 13px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.termin-hinweis { font-size: 12.5px; color: var(--err-text); overflow-wrap: anywhere; }
.termin-bestaetigung { overflow-wrap: anywhere; }
.termin-entfernen, .termin-aktion { margin: 0; }
.segmente .anzahl { margin-left: 4px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }

/* Termine: Darstellung Monat/Liste */
.termine-kopf { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 12px; }
/* Termin von Hand anlegen: Knopf klappt das Formular auf */
.termin-neu { margin-bottom: 16px; }
.termin-neu > summary { list-style: none; width: max-content; cursor: pointer; }
.termin-neu > summary::-webkit-details-marker { display: none; }
.termin-neu[open] > summary { margin-bottom: 12px; }
.termin-einladen { border: 0; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: grid; gap: 10px; min-width: 0; }
.termin-einladen > legend { padding: 0; font-weight: 600; font-size: 13.5px; }
.termin-kollegen { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.termine-kopf .vor-liste { margin: 0; flex: 1 1 320px; max-width: 75ch; }
.segmente-klein { margin-bottom: 0; }
.segmente-klein a { padding: 3px 10px; font-size: 12.5px; }

/* Klassische Monatsansicht */
.kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.kal-titel { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.kal-nav { display: flex; align-items: center; gap: 4px; }
.kal-nav .btn-icon svg { width: 16px; height: 16px; }
.monat-rahmen { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.monat { width: 100%; border-collapse: collapse; table-layout: fixed; }
.monat th {
  padding: 7px 8px; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-sunk); border-bottom: 1px solid var(--border);
}
.monat abbr { text-decoration: none; }
.monat td { height: 112px; padding: 4px 4px 6px; vertical-align: top; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.monat tr:first-child td { border-top: 0; }
.monat td:first-child { border-left: 0; }
.monat .tag-we { background: color-mix(in srgb, var(--surface-sunk) 55%, var(--surface)); }
.monat .tag-aus { background: var(--surface-sunk); }
.monat .tag-aus .tag-zahl { color: var(--text-subtle); }
.tag-zahl {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin: 0 0 3px 2px; padding: 0 5px;
  border-radius: 999px; font-size: 12.5px; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.tag-heute .tag-zahl { background: var(--accent); color: var(--on-accent); }
.tag-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.tag-liste li { min-width: 0; }
.ev {
  display: flex; align-items: baseline; gap: 5px; min-width: 0; overflow: hidden;
  padding: 2px 6px; border-radius: var(--radius-sm);
  font-size: 12px; line-height: 17px; color: var(--text); text-decoration: none;
  background: var(--accent-soft); border: 1px solid transparent;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease);
}
a.ev:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
a.ev:focus-visible, .ev-mehr:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ev-zeit { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); }
.ev-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-ganztag { background: color-mix(in srgb, var(--accent) 22%, transparent); font-weight: 500; }
.ev-vorschlag { background: transparent; border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.ev-konflikt { background: var(--err-bg); box-shadow: inset 2px 0 0 var(--err-text); }
.ev-konflikt .ev-zeit { color: var(--err-text); }
a.ev-konflikt:hover { background: color-mix(in srgb, var(--err-text) 16%, var(--err-bg)); }
.ev-frist { background: var(--open-bg); }
.ev-frist .ev-zeit { color: var(--open-text); font-weight: 600; }
a.ev-frist:hover { background: color-mix(in srgb, var(--open-text) 14%, var(--open-bg)); }
.ev-mehr { display: block; padding: 1px 6px; font-size: 11.5px; color: var(--text-muted); text-decoration: none; border-radius: var(--radius-sm); }
.ev-mehr:hover { color: var(--text); background: var(--surface-hover); }
.kal-legende { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.kal-legende .ev { display: inline-flex; }
/* Schmale Bildschirme: Tagesliste statt Raster */
.monat-agenda { display: none; }
.monat-agenda .gruppe-kopf { font-size: 13px; }
.monat-agenda .tag-liste { padding: 8px 12px 10px; gap: 4px; }
.monat-agenda .ev { font-size: 13px; line-height: 20px; padding: 5px 8px; }
.monat-agenda .ev-titel { white-space: normal; overflow-wrap: anywhere; }

/* Kalenderwahl in Mein Konto */
.kal-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kal-option {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); font-weight: 400; cursor: pointer;
  transition: border-color 120ms var(--ease), background-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.kal-option:hover { border-color: color-mix(in srgb, var(--border-strong) 50%, var(--accent)); }
.kal-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.kal-option:has(input:disabled) { cursor: not-allowed; opacity: 0.65; }
.kal-option:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
.kal-option input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.kal-option-text { display: grid; gap: 2px; }
.kal-option-titel { font-weight: 600; font-size: 13.5px; }
.kal-details { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.kal-status { margin: 0; }
.kal-form:not(:has(input[value="outlook"]:checked)) .kal-details[data-fuer="outlook"],
.kal-form:not(:has(input[value="caldav"]:checked)) .kal-details[data-fuer="caldav"] { display: none; }
.kal-form:has(input[value="intern"]:checked) .kal-testen,
.kal-form:has(input[value="abo"]:checked) .kal-testen { display: none; }

.aufgabe-edit { position: relative; }
.aufgabe-edit > summary { list-style: none; opacity: 0; transition: opacity 120ms var(--ease); }
.aufgabe-edit > summary::-webkit-details-marker { display: none; }
.aufgabe:hover .aufgabe-edit > summary, .aufgabe-edit > summary:focus-visible, .aufgabe-edit[open] > summary { opacity: 1; }
.aufgabe-edit[open] > summary { background: var(--surface-hover); color: var(--text); }
.aufgabe-datum {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
  display: grid; gap: 6px; width: 230px; padding: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}
.aufgabe-datum label { font-size: 12px; color: var(--text-muted); }
.aufgabe-datum .btn { margin-top: 4px; }

/* Kompakte Kennzahlen-Leiste */
.stats-leiste {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); margin-bottom: 14px; overflow: hidden;
}
.stat { display: grid; gap: 1px; padding: 12px 16px; }
.stat + .stat { border-left: 1px solid var(--border); }
.stat-wert { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat-label { font-size: 12px; color: var(--text-muted); }
.stat-warn .stat-wert { color: var(--err-text); }

/* Eingabezeile für neue Todos */
.composer {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 150px 120px auto; align-items: center; gap: 8px;
  padding: 8px 8px 8px 12px; margin-bottom: 18px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow);
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.composer:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }
.composer-plus { width: 16px; height: 16px; fill: none; stroke: var(--text-subtle); stroke-width: 1.6; stroke-linecap: round; }
.composer input[type="text"] { border: 0; box-shadow: none; padding-left: 2px; font-size: 14px; background: transparent; }
.composer input[type="text"]:focus-visible { box-shadow: none; }
.composer input[type="date"], .composer select { min-height: 30px; font-size: 12.5px; background: var(--surface-sunk); border-color: var(--border); }
.composer-details { grid-column: 2 / -1; font-size: 12.5px; color: var(--text-muted); }
.composer-details summary { cursor: pointer; width: max-content; }
.composer-details textarea { margin-top: 6px; }

/* Umschalter Offen / Historie */
.segmente { display: inline-flex; gap: 2px; padding: 2px; margin-bottom: 16px; background: var(--surface-sunk); border: 1px solid var(--border); border-radius: var(--radius); }
.segmente a { padding: 4px 12px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13px; font-weight: 550; text-decoration: none; }
.segmente a:hover { color: var(--text); }
.segmente a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border), var(--shadow); }

/* Live-Anzeige */
.live {
  display: inline-flex; align-items: center; gap: 7px; margin: 4px 0 0;
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 12px; color: var(--text-muted); background: var(--surface);
}
.live-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--text-subtle); }
.live:has([data-zustand="ok"]) .live-punkt { background: var(--ok-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok-text) 22%, transparent); }
.live:has([data-zustand="err"]) .live-punkt { background: var(--err-text); }

/* Historie */
.historie { list-style: none; margin: 0; padding: 0; }
.historie li { display: grid; grid-template-columns: 3.2em 8.5em minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 16px; }
.historie li + li { border-top: 1px solid var(--border); }
.historie time { font-variant-numeric: tabular-nums; color: var(--text-subtle); font-size: 12.5px; }
.historie .badge { justify-self: start; }
.historie-text { min-width: 0; overflow-wrap: anywhere; }
.historie-text strong { font-weight: 500; }

/* ---------- Übersicht ---------- */

.todo-block .stats-leiste { margin-bottom: 12px; }
.zwei-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 28px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; margin-bottom: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.kpi { display: grid; gap: 3px; padding: 16px 18px; color: var(--text); text-decoration: none; border-left: 1px solid var(--border); margin-left: -1px; }
a.kpi { transition: background-color 120ms var(--ease); }
a.kpi:hover { background: var(--surface-hover); color: var(--text); }
.kpi-wert { font-size: 22px; font-weight: 620; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 12px; color: var(--text-muted); }
.kpi-hervor .kpi-wert { color: var(--accent); }
.kpi-warn .kpi-wert { color: var(--err-text); }
.kpis + .kpis { margin-top: 12px; }

.checklist { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.check { display: grid; grid-template-columns: 80px auto 1fr; gap: 12px; align-items: center; padding: 12px 18px; }
.check + .check { border-top: 1px solid var(--border); }
.check a { font-weight: 500; text-decoration: none; color: var(--text); }
.check a:hover { color: var(--accent); }
.check .badge { justify-self: start; }

.log { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; font-size: 13.5px; background: var(--surface); }
.log li { padding: 10px 18px; }
.log li + li { border-top: 1px solid var(--border); }
.log time { font-variant-numeric: tabular-nums; color: var(--text-subtle); margin-right: 10px; }

details.block > summary { font-weight: 600; cursor: pointer; }
details > summary { cursor: pointer; }
.stats { margin: 0 0 20px; color: var(--text-muted); font-size: 14px; }
.postfach-filter { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.postfach-filter label { font-weight: 600; }
.zugriff { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.zugriff legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.zugriff .hint { flex-basis: 100%; }
.push-app { margin: 0 0 16px; }
.push-titel { font-weight: 600; margin: 0 0 6px; }
.push-geraete li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.push-entfernen { margin: 0 0 0 auto; }
.push-anlaesse { border: 0; padding: 0; margin: 0; }
.push-anlaesse > legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.push-anlass { border-top: 1px solid var(--border); padding: 10px 0; }
.push-anlass:last-child { border-bottom: 1px solid var(--border); }
.push-anlass .hint { margin: 2px 0 0 26px; }
.push-anlass-wahl { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0 0 26px; }
.push-anlass-wahl .field { margin: 0; min-width: 12rem; }
.zwei-faktor-schritte { margin: 0 0 12px; padding-left: 1.3em; }
.zwei-faktor-schritte li { margin: 0 0 8px; }
.qr-rahmen { margin: 10px 0; }
.qr { width: 200px; height: 200px; display: block; border: 1px solid var(--border, #ddd); border-radius: 6px; }
.zwei-faktor-schluessel { word-break: break-all; user-select: all; }
.zwei-faktor-form { align-items: end; margin: 0 0 8px; }
.code-eingabe { font-variant-numeric: tabular-nums; letter-spacing: 0.15em; max-width: 14ch; }
.zwei-faktor-ersatz { margin: 0 0 14px; }
.ersatz-codes { list-style: none; padding: 0; margin: 8px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13ch, 1fr)); gap: 4px 12px; }
.ersatz-codes code { font-size: 15px; letter-spacing: 0.05em; }
.zwei-faktor-aus { margin-top: 10px; }
.zwei-faktor-aus summary { cursor: pointer; color: var(--text-muted); }
@media print { .zwei-faktor-ersatz { border: 0; } }
.stats strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- Tabellen ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-wrap > table { border: 0; }
table:not(.table-wrap > table) { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
th, td { text-align: left; padding: 11px 16px; vertical-align: top; }
thead th { background: var(--surface-sunk); font-weight: 500; font-size: 12px; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody tr + tr td { border-top: 1px solid var(--border); }
tbody tr { transition: background-color 120ms var(--ease); }
table.list tbody tr:hover { background: var(--surface-hover); }
td.right, th.right { text-align: right; }
td.num, td code { font-variant-numeric: tabular-nums; }
tr.inaktiv td { opacity: 0.55; }

/* ---------- Login ---------- */

.login-body { display: grid; place-items: center; min-height: 100dvh; padding: 16px; }
.login { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px 28px; box-shadow: var(--shadow-pop); }
.login h1 { font-size: 20px; margin-bottom: 4px; }
.login > .muted { margin: 0 0 22px; font-size: 13px; }
.login .btn { width: 100%; }
.login-breit { max-width: 460px; }
.login-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.login-fuss > span { min-width: 0; overflow-wrap: anywhere; }
.login-fuss .btn { width: auto; flex: none; }
.login .flash { margin: 0 0 16px; }
.schritt { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: 0.01em; }
.stack { display: grid; gap: 14px; }

/* ---------- KI-Verbindungen ---------- */

.models { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 240px; overflow-y: auto; }
optgroup { font-weight: 600; }
.abo-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.anleitung { margin: 0 0 16px; font-size: 13px; }
.anleitung ol, .anleitung-liste { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }

/* ---------- Postfach ---------- */

.verlauf td { vertical-align: top; }
.verlauf p { margin: 4px 0 0; }
.row-dringend td:first-child { box-shadow: inset 2px 0 0 var(--err-text); }
.mails { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.mail { padding: 16px 20px; transition: background-color 120ms var(--ease); }
.mail + .mail { border-top: 1px solid var(--border); }
.mail:hover { background: var(--surface-hover); }
.mail-dringend { box-shadow: inset 2px 0 0 var(--err-text); }
.mail-kopf { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.mail-titel { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.mail-titel strong { font-size: 14.5px; font-weight: 620; line-height: 1.4; }
.mail-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.mail p { margin: 8px 0 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.55; max-width: 80ch; }
.mail-korrektur { margin-top: 8px; }
.mail-link { color: inherit; text-decoration: none; }
.mail-link:hover strong { text-decoration: underline; text-underline-offset: 2px; }
.mail-badges-links { justify-content: flex-start; margin: 12px 0 0; }
.mail-todos { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.mail-volltext { padding: 16px 18px; white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; max-width: 90ch; }
.korrektur { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 8px; }
.korrektur label { display: grid; gap: 4px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.korrektur select { width: auto; min-height: 28px; padding: 2px 8px; font-size: 12.5px; }

/* ---------- Ausschreibungen ---------- */

.tabs { display: inline-flex; gap: 2px; padding: 2px; flex-wrap: wrap; margin-bottom: 16px; background: var(--surface-sunk); border: 1px solid var(--border); border-radius: var(--radius); }
.tabs a { padding: 4px 12px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13px; font-weight: 550; text-decoration: none; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border), var(--shadow); }
.tenders { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.tender { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 20px; }
.tender + .tender { border-top: 1px solid var(--border); }
.tender:hover { background: var(--surface-hover); }
.tender h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.tender p { margin: 2px 0; }
.tender-score .score { display: inline-block; min-width: 44px; font-size: 15px; padding: 5px 4px; font-variant-numeric: tabular-nums; }
.tender-status { display: flex; gap: 6px; align-items: center; }
.tender-status select { width: auto; min-height: 28px; padding: 2px 8px; font-size: 12.5px; }

/* ---------- Angebote ---------- */

.offer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 16px; }
.offer-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; font-size: 13.5px; margin-bottom: 20px; }
.offer-meta { text-align: right; }
.offer h2 { font-size: 17px; }
.offer-text { border: 1px dashed var(--border-strong); margin-bottom: 16px; }
.offer-table tfoot td { border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.offer-table .total td { font-weight: 700; }
.offer-terms { margin-top: 16px; color: var(--text-muted); }
.offer-terms p { margin: 2px 0; }

/* ---------- Kosten ---------- */

.budget { height: 8px; background: var(--surface-sunk); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin: 16px 0 6px; }
.budget-bar { height: 100%; background: var(--accent); border-radius: 999px; }
.budget-voll { background: var(--err-text); }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 96px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.spark-bar { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; min-width: 3px; opacity: 0.85; }
.spark-bar:hover { opacity: 1; }
.spark-leer { background: var(--border); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* ---------- Module, Wissen, Schreiben ---------- */

.module { display: grid; gap: 14px; }
.antwort { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; }
.antwort h2 { margin-top: 0; }
.antwort-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.antwort-kopf h2 { margin: 0; }
.antwort-text { line-height: 1.65; max-width: 72ch; }
.quellen { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; }
.ergebnis { font-family: inherit; }
.texte { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }

/* ---------- Todo-Karten: Klick öffnet die Mail, Score direkt am Badge ändern ---------- */

.aufgabe[data-ziel] { cursor: pointer; }
.aufgabe-titel-link { color: inherit; text-decoration: none; }
.aufgabe-titel-link:hover { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.aufgabe-erledigt .aufgabe-titel-link { text-decoration: line-through; text-decoration-color: var(--text-subtle); }

.prio-edit { position: relative; }
.prio-edit > summary { list-style: none; cursor: pointer; border-radius: var(--radius-sm); margin: -2px -4px; padding: 2px 4px; transition: background-color 120ms var(--ease); }
.prio-edit > summary::-webkit-details-marker { display: none; }
.prio-edit > summary:hover, .prio-edit[open] > summary { background: var(--surface-hover); }
.aufgabe:hover .prio-edit > summary { box-shadow: inset 0 0 0 1px var(--border); }
.prio-pop { left: -4px; right: auto; width: 260px; }
.prio-pop-titel { font-size: 12px; font-weight: 600; color: var(--text); }
.prio-stufen { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 4px; }
.prio-stufe {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  min-height: 30px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease), transform 80ms var(--ease);
}
.prio-stufe span:first-child { color: var(--text); }
.prio-stufe:hover { background: var(--surface-hover); border-color: currentColor; }
.prio-stufe:active { transform: translateY(1px); }
.prio-stufe.aktiv { border-color: currentColor; background: color-mix(in srgb, currentColor 9%, var(--surface)); }
.prio-bisher { margin: 0; }

/* ---------- Mail wie im Mailprogramm ---------- */

.mail-kopfzeile { margin-bottom: 20px; }
.mail-kopfzeile h1 { text-wrap: balance; }
.mail-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.mail-ki { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 16px; }
.mail-ki-teil { padding: 14px 16px; min-width: 0; }
.mail-ki-teil + .mail-ki-teil { border-left: 1px solid var(--border); }
.mail-ki-teil p { margin: 0; font-size: 13.5px; text-wrap: pretty; }
.mail-ki-titel { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.01em; }
.mail-ki-titel .anzahl { font-weight: 500; color: var(--text-subtle); margin-left: 4px; }
.mail-ki .mail-todos { font-size: 13.5px; }
.konflikt-link { color: var(--err-text); }

.mailblatt { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.mailblatt-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 16px 20px 14px; border-bottom: 1px solid var(--border); }
.mailblatt-avatar {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 15px;
}
.mailblatt-von { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.mailblatt-von .muted { font-size: 13px; }
.mailblatt-meta { margin: 2px 0 0; display: grid; gap: 1px; font-size: 12.5px; color: var(--text-muted); }
.mailblatt-zeile { display: flex; gap: 6px; min-width: 0; }
.mailblatt-zeile dt { color: var(--text-subtle); flex: none; }
.mailblatt-zeile dd { margin: 0; overflow-wrap: anywhere; }
.mailblatt-zeit { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.anhaenge { list-style: none; margin: 0; padding: 10px 20px; display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--border); background: var(--surface-sunk); }
.anhang {
  display: inline-flex; align-items: center; gap: 6px; max-width: 320px; min-height: 30px; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text); font-size: 12.5px; text-decoration: none;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease);
}
a.anhang:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.anhang svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--text-muted); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.anhang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anhang-groesse { color: var(--text-subtle); font-variant-numeric: tabular-nums; flex: none; }
.mailblatt-hinweis { margin: 0; padding: 9px 20px; font-size: 12.5px; color: var(--open-text); background: var(--open-bg); border-bottom: 1px solid var(--border); }
.mailblatt-hinweis:last-child { border-bottom: 0; color: var(--text-muted); background: transparent; }
/* Die Mail behält ihr eigenes Aussehen (weiße Fläche wie in Outlook), auch im dunklen Modus */
.mail-frame { display: block; width: 100%; height: 480px; border: 0; background: #fff; color-scheme: light; }

/* ---------- Antworten ---------- */

.antwort-block h2 { margin-bottom: 12px; }
.antwort-form { display: grid; gap: 16px; }
.antwort-ki { margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunk); display: grid; gap: 12px; min-width: 0; }
.antwort-ki > legend { float: left; width: 100%; padding: 0; font-weight: 600; font-size: 13.5px; }
.antwort-ki > legend + * { clear: both; }
.wahl-gruppe { display: flex; flex-wrap: wrap; gap: 6px; border: 0; }
.wahl { position: relative; display: inline-flex; font-weight: 500; }
.wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl span {
  display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text-muted);
  font-size: 13px; transition: background-color 120ms var(--ease), color 120ms var(--ease), border-color 120ms var(--ease);
}
.wahl:hover span { color: var(--text); border-color: var(--text-subtle); }
.wahl input:checked + span { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.wahl input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.antwort-infos { display: grid; gap: 6px; }
.antwort-ki-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.antwort-anrede { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.antwort-anrede select { width: auto; min-height: 32px; }
.antwort-fehler { margin: 0; }
.antwort-text-feld { display: grid; gap: 6px; }
.antwort-text-feld label .muted { font-weight: 400; }
.antwort-text-feld textarea { font-size: 14px; line-height: 1.6; min-height: 240px; }
.antwort-optionen { display: grid; gap: 6px; font-size: 13px; }
.antwort-optionen .field-check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.antwort-knoepfe { align-items: center; }

/* ---------- Terminkonflikt ---------- */

.konflikt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.konflikt-paar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch;
  padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
.konflikt-karte { display: grid; gap: 2px; align-content: start; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-sunk); min-width: 0; overflow-wrap: anywhere; }
.konflikt-eigen { box-shadow: inset 2px 0 0 var(--accent); }
.konflikt-quelle { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.konflikt-titel { font-size: 14.5px; }
.konflikt-zeit { font-size: 13px; font-variant-numeric: tabular-nums; }
.konflikt-gegen { align-self: center; color: var(--text-subtle); font-size: 18px; }
.konflikt-aktion { grid-column: 1 / -1; margin: 0; display: flex; justify-content: flex-end; }

/* ---------- Schmal ---------- */

@media (max-width: 899px) {
  .composer { grid-template-columns: auto minmax(0, 1fr) auto; }
  .composer input[type="date"], .composer select { grid-row: 2; }
  .composer input[type="date"] { grid-column: 2; }
  .composer select { grid-column: 3; }
  .composer .btn { grid-row: 1; grid-column: 3; }
}

@media (max-width: 767px) {
  /* Seitenleiste und Blatt: siehe 06-navigation.css */
  h1 { font-size: 25px; }
  .grid { grid-template-columns: 1fr; }
  .check { grid-template-columns: 76px 1fr; }
  .check .muted { grid-column: 2; }
  .stats-leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aufgabe { grid-template-columns: auto auto minmax(0, 1fr); }
  .aufgabe-rechts { grid-column: 3; }
  .monat-rahmen, .kal-legende { display: none; }
  .monat-agenda { display: block; }
  .kal-wahl { grid-template-columns: 1fr; }
  .termin { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .termin-zeit, .termin .aufgabe-rechts { grid-column: 1 / -1; }
  .termin .aufgabe-rechts { margin-top: 4px; }
  .aufgabe-edit > summary { opacity: 1; }
  .btn-icon { min-height: 36px; width: 36px; }
  .aufgabe-datum input { min-height: 40px; }
  .aufgabe-datum { left: -4px; right: auto; }
  .prio-pop { width: min(260px, calc(100vw - 48px)); }
  .mail-ki-teil + .mail-ki-teil { border-left: 0; border-top: 1px solid var(--border); }
  .mailblatt-kopf { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px 12px; }
  .mailblatt-zeit { grid-column: 2; }
  .anhaenge, .mailblatt-hinweis { padding-left: 16px; padding-right: 16px; }
  .konflikt-paar { grid-template-columns: minmax(0, 1fr); }
  .konflikt-gegen { justify-self: center; transform: rotate(90deg); }
  .konflikt-aktion .btn { width: 100%; }
  .antwort-knoepfe .btn { flex: 1 1 auto; }
  .historie li { grid-template-columns: 3.2em minmax(0, 1fr); }
  .historie-text { grid-column: 1 / -1; }
  table.list thead { display: none; }
  table.list tr { display: grid; padding: 8px 0; }
  table.list td { padding: 3px 14px; border: 0 !important; }
  table.list td[data-label] { text-align: left; }
  table.list td[data-label]::before { content: attr(data-label) ": "; color: var(--text-muted); font-size: 12.5px; }
  td.right { text-align: left; }
  .tender { grid-template-columns: 48px minmax(0, 1fr); }
  .tender-status { grid-column: 1 / -1; }
  .offer { padding: 16px; }
  .offer-head { grid-template-columns: 1fr; }
  .offer-meta { text-align: left; }
  .two-col { grid-template-columns: 1fr; }
  .mail-kopf { flex-direction: column; }
  .mail-badges { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Druck (Angebot als PDF) ---------- */

@media print {
  :root { --bg: #fff; --surface: #fff; --text: #111; --text-muted: #444; --border: #bbb; color-scheme: light; }
  .side, .no-print, .flash, .skip, .savebar { display: none !important; }
  .shell { display: block; }
  .frame { margin: 0; border: 0; box-shadow: none; }
  .main { padding: 0; max-width: none; }
  .offer { border: 0; padding: 0; }
  .offer-text { border: 0; resize: none; overflow: visible; height: auto; }
}

/* Lizenz (Einrichtung und Module) */
.lizenz-kopf { margin: 0 0 10px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; display: flex; gap: 8px; align-items: center; }
.lizenz-daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 20px; margin: 0; }
.lizenz-daten div { display: grid; gap: 1px; min-width: 0; }
.lizenz-daten dt { font-size: 12px; color: var(--text-muted); }
.lizenz-daten dd { margin: 0; font-weight: 550; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lizenz-fehler { margin-top: 10px; color: var(--err-text); }
.lizenz-manuell { margin-top: 14px; }
.lizenz-manuell summary { cursor: pointer; font-size: 13px; font-weight: 550; color: var(--accent); width: fit-content; }
.lizenz-manuell summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.lizenz-form { display: grid; gap: 8px; margin-top: 10px; max-width: 70ch; }
.lizenz-form label { font-size: 13px; font-weight: 550; }
.lizenz-form textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; }
.modul-gesperrt label { color: var(--text-muted); }
.modul-gesperrt input { cursor: not-allowed; }

/* Kontakte */
.suche { display: flex; gap: 8px; margin: 0 0 16px; max-width: 520px; }
.suche input { flex: 1; min-width: 0; }
.vorschlaege { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.vorschlag legend { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form { display: inline; margin: 0; }

/* Telefon: Transkript gut lesbar, lange Gespräche scrollen innerhalb des Kastens */
.transkript {
  max-width: 72ch; max-height: 60vh; overflow-y: auto; margin-top: 12px; padding: 14px 16px;
  background: var(--surface-sunk); border: 1px solid var(--border); border-radius: 8px;
  line-height: 1.6; overflow-wrap: anywhere;
}
#einrichtung .kal-wahl { margin: 16px 0; }
@media (max-width: 640px) { #einrichtung .kal-wahl { grid-template-columns: 1fr; } }

/* KI-Agent: Arbeitsschritte je Mail */
.agent-protokoll { margin-top: 4px; }
.agent-protokoll summary { cursor: pointer; color: var(--text-muted); }
.agent-protokoll summary:hover { color: var(--text); }
.agent-protokoll ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; max-width: 75ch; overflow-wrap: anywhere; }

/* KI-Rezeption: Einstellungen je Rufnummer */
.rez-titel { font-size: 13.5px; font-weight: 600; margin: 20px 0 10px; }
.rez-form .kal-wahl { margin-bottom: 12px; }
/* Fehlende Premium-Freigabe: nur zeigen, wenn Premium gewählt ist (direkt oder über die Vorgabe) */
.rez-premium-fehlt { display: none; }
.rez-form:has(input[name="gespraech_modus"][value="realtime"]:checked) .rez-premium-fehlt,
.rez-form:has(input[name="gespraech_modus"][value=""]:checked) .rez-premium-fehlt[data-vorgabe-premium] { display: block; }
.rez-form:has(input[name="modus"][value="immer"]:checked) .rez-bedingungen { opacity: 0.55; }
.rez-bearbeiten > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.rez-bearbeiten[open] > summary { margin-bottom: 12px; }
@media (max-width: 640px) { .rez-form .kal-wahl { grid-template-columns: 1fr; } }
/* Telefon-Wissen: vorab erzeugtes FAQ, lesbar und scrollbar statt endlos lang */
.rez-wissen {
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; margin: 10px 0 0; padding: 12px 14px;
  font-family: inherit; font-size: 13px; line-height: 1.55; background: var(--surface-sunk); border-radius: var(--radius-sm); max-width: 75ch;
}
.rez-wissen:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tabular { font-variant-numeric: tabular-nums; }
/* Mehrzeilige Zusammenfassungen von Telefonaten */
.zeilen { white-space: pre-line; }

/* Einrichtungsassistent Postfach-Assistent: nummerierte Schritte, der offene ist aufgeklappt */
.assistent { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.assistent-schritt { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.assistent-schritt.aktuell { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.assistent-kopf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.assistent-kopf h2 { margin: 0; font-size: 15px; flex: 1 1 auto; }
.assistent-nr { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-sunk); font-weight: 600; font-size: 13px; }
.assistent-schritt.erledigt .assistent-nr { background: var(--ok-bg); color: var(--ok-text); }
.assistent-text { margin: 6px 0 0 36px; color: var(--text-muted); font-size: 13px; }
.assistent-inhalt { margin-top: 14px; display: grid; gap: 12px; }
.assistent-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.assistent-liste li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.assistent-mehr > summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.assistent-mehr[open] > summary { margin-bottom: 10px; }
@media (max-width: 760px) { .assistent-text { margin-left: 0; } }

/* Auswertung des Postfach-Assistenten */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.kennzahl { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.kennzahl strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.kennzahl-titel { font-size: 12.5px; color: var(--text-muted); }
.empfehlung { padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.empfehlung h2 { display: flex; gap: 8px; align-items: center; font-size: 15px; margin: 0 0 6px; }
.verwechslungen { margin: 0; padding-left: 18px; }
.ordner-liste { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.ordner-liste legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; padding: 0; }
/* Rezeption: Vorschläge und Erfahrungen aus Gesprächen */
.rez-lehren { list-style: none; margin: 0; padding: 0; }
.rez-lehre { padding: 14px 0; border-top: 1px solid var(--border); }
.rez-lehre:last-child { border-bottom: 1px solid var(--border); }
.rez-lehre-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.rez-lehre .group-actions { margin-top: 8px; }
/* ---------- Grundgerüst: Seitenleiste auf der Grundfläche, Inhalt als Blatt ---------- */

.shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100dvh; }
.frame {
  min-width: 0;
  margin: 10px 10px 10px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-blatt);
}
.main { padding: 44px 56px 120px; max-width: 1120px; width: 100%; margin: 0 auto; min-width: 0; }
.main:focus { outline: none; }
.topbar, .schleier, .side-zu { display: none; }

/* ---------- Seitenleiste ---------- */

.side {
  min-width: 0;
  padding: 14px 12px 12px;
  display: flex; flex-direction: column; gap: 10px;
  position: sticky; top: 0;
  height: 100dvh;
}
.side-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 6px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px; border-radius: var(--radius); color: var(--text); text-decoration: none; min-width: 0; }
.brand:hover { color: var(--text); }
.brand-mark {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--tinte); color: #f6f1e7;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06), 0 1px 2px rgb(50 38 18 / 0.2);
}
.brand-mark-lg { width: 42px; height: 42px; border-radius: 12px; font-size: 15px; margin-bottom: 18px; }
.brand-text { display: grid; min-width: 0; line-height: 1.25; }
.brand-name { font-weight: 650; font-size: 14px; letter-spacing: -0.01em; }
.brand-sub { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bühne: alle Ebenen übereinander; die aktive liegt vorn, die Hauptebene weicht nach links, Unterebenen warten rechts */
.nav-buehne { position: relative; flex: 1; min-height: 0; overflow: hidden; margin: 0 -4px; }
.nav-panel {
  position: absolute; inset: 0;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  padding: 4px 4px 16px;
  transition: transform 300ms var(--ease-out), opacity 220ms var(--ease), visibility 0s linear 300ms;
}
.nav-panel[data-zustand="aktiv"] { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.nav-panel[data-zustand="links"] { transform: translateX(-30%); opacity: 0; visibility: hidden; }
.nav-panel[data-zustand="rechts"] { transform: translateX(104%); opacity: 1; visibility: hidden; }

.nav-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.nav-titel { margin: 18px 10px 5px; font-size: 12px; font-weight: 600; color: var(--text-subtle); letter-spacing: 0.01em; }
.nav-panel > .nav-liste:first-child { margin-top: 2px; }

.nav-punkt {
  display: flex; align-items: center; gap: 10px;
  min-height: 34px; padding: 5px 10px;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 13.75px; font-weight: 520;
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color 140ms var(--ease), color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-punkt:hover { background: var(--surface-hover); color: var(--text); }
.nav-punkt:active { transform: translateY(0.5px); }
.nav-punkt[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border), var(--shadow); }
.nav-punkt[aria-current="page"] .ico { color: var(--accent); }
.ico { flex: none; color: var(--text-subtle); transition: color 140ms var(--ease); }
.nav-punkt:hover .ico { color: var(--text-muted); }
.nav-pfeil { margin-right: -3px; opacity: 0.7; transition: transform 160ms var(--ease), opacity 160ms var(--ease); }
.nav-ordner:hover .nav-pfeil { transform: translateX(2px); opacity: 1; }
/* Die aktuelle Seite liegt in dieser Unterebene (nach „Zurück“ sichtbar) */
.nav-ordner-aktiv { color: var(--text); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.nav-ordner-aktiv .ico:first-child { color: var(--accent); }
.kat-punkt { display: grid; place-items: center; width: 16px; height: 16px; flex: none; }
.kat-punkt::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--kat, var(--text-subtle)); }
.nav-kat[aria-current="page"] .kat-punkt::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--kat) 22%, transparent); }

/* Zähler: neu (Akzent) und offen (wartet auf Bearbeitung) */
.zahl {
  flex: none; display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  font-size: 11.5px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.zahl-neu { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.zahl-offen { background: var(--open-bg); color: var(--open-text); }
.nav-punkt[aria-current="page"] .zahl-neu { box-shadow: none; }

/* Unterebene: zurück, Titel */
.nav-zurueck {
  display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 10px; margin-bottom: 4px;
  border-radius: var(--radius); color: var(--text-muted); font-size: 13.5px; font-weight: 520; text-decoration: none;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}
.nav-zurueck span:first-of-type { flex: 1; }
.nav-zurueck:hover { background: var(--surface-hover); color: var(--text); }
.nav-zurueck .ico { transition: transform 160ms var(--ease); }
.nav-zurueck:hover .ico { transform: translateX(-2px); color: var(--text); }
.nav-panel-titel {
  display: flex; align-items: center; gap: 10px; margin: 6px 10px 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
  font-family: var(--font-serif); font-size: 21px; font-weight: 500; letter-spacing: -0.01em; color: var(--text);
}
.nav-panel-titel .ico { width: 18px; height: 18px; color: var(--accent); }

/* Angemeldete Person */
.ich { display: flex; align-items: center; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.ich a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius); color: var(--text); text-decoration: none; transition: background-color 140ms var(--ease); }
.ich a:hover, .ich a[aria-current="page"] { background: var(--surface-hover); }
.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11.5px; font-weight: 650;
}
.ich-text { display: grid; min-width: 0; line-height: 1.3; }
.ich-text strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ich-text span { font-size: 11.5px; color: var(--text-muted); }
.logout { margin: 0; }
.logout .btn { color: var(--text-muted); }

/* ---------- Hinweis auf Neues (unten rechts) ---------- */

.hinweis-neu {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px 9px 14px; border-radius: 12px;
  background: var(--tinte); color: #f6f1e7; font-size: 13.5px; font-weight: 520;
  box-shadow: var(--shadow-pop);
  animation: hinweis-rein 320ms var(--ease-out);
}
.hinweis-neu .ico { color: #9ed3cb; }
.hinweis-neu a { color: #9ed3cb; font-weight: 650; text-decoration: none; }
.hinweis-neu a:hover { color: #c7ebe5; text-decoration: underline; }
.hinweis-neu .btn-quiet { color: #d8d0c2; }
.hinweis-neu .btn-quiet:hover { background: rgb(255 255 255 / 0.08); color: #fff; }
@keyframes hinweis-rein { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Schmale Bildschirme: Kopfzeile, Seitenleiste als ausklappbares Menü ---------- */

@media (max-width: 899px) {
  /* Sprungziele und Tastaturfokus nicht unter der klebenden Kopfzeile */
  html { scroll-padding-top: 70px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 8px 12px;
    background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .topbar .brand { flex: 1; }
  .topbar .brand-mark { width: 26px; height: 26px; border-radius: 8px; font-size: 10.5px; }
  .topbar-neu { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); color: var(--text-muted); }
  .topbar-neu .zahl { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; font-size: 10.5px; padding: 0 5px; }
  .topbar .btn-icon { width: 40px; min-height: 40px; }
  .side {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: min(320px, 88vw); height: 100dvh;
    background: var(--bg); box-shadow: var(--shadow-pop);
    transform: translateX(-104%); visibility: hidden;
    transition: transform 320ms var(--ease-out), visibility 0s linear 320ms;
  }
  .menue-offen { overflow: hidden; }
  .menue-offen .side { transform: none; visibility: visible; transition-delay: 0s; }
  /* Geschlossen: auch die aktive Ebene verstecken (ihr „visible“ würde das „hidden“ der Leiste überschreiben),
     damit sie per Tastatur nicht erreichbar ist; erst nach dem Hinausschieben */
  body:not(.menue-offen) .side .nav-panel { visibility: hidden; transition-delay: 0s, 0s, 320ms; }
  .side-zu { display: inline-grid; }
  .schleier {
    display: block; position: fixed; inset: 0; z-index: 30;
    background: rgb(38 36 31 / 0.34); opacity: 0; pointer-events: none;
    transition: opacity 240ms var(--ease);
  }
  .menue-offen .schleier { opacity: 1; pointer-events: auto; }
  .nav-punkt, .nav-zurueck { min-height: 42px; }
  .frame { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .main { padding: 28px 24px 96px; }
}
@media (max-width: 767px) {
  .main { padding: 22px 16px 96px; }
  .hinweis-neu { left: 12px; right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-panel, .side, .schleier { transition: none !important; }
  .hinweis-neu { animation: none; }
}
@media print {
  .topbar, .hinweis-neu, .schleier { display: none !important; }
}
/* ---------- Kopf der Startseite ---------- */

.datum-zeile { margin: 0 0 6px; font-size: 13px; font-weight: 550; color: var(--text-subtle); }

/* ---------- Einträge (Neuigkeiten, Kategorie-Verlauf): Symbol, Titel, Meta, Kurztext ---------- */

.eintraege { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.eintrag + .eintrag { border-top: 1px solid var(--border); }
.eintrag-link {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 14px 18px; color: inherit; text-decoration: none;
  transition: background-color 140ms var(--ease);
}
.eintrag-link:hover { background: var(--surface-hover); color: inherit; }
.eintrag-symbol {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: var(--surface-sunk); border: 1px solid var(--border); color: var(--text-muted);
}
.eintrag-symbol .ico { color: currentColor; }
.eintrag-inhalt { display: grid; gap: 3px; min-width: 0; }
.eintrag-titel { font-weight: 600; font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.eintrag-link:hover .eintrag-titel { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.eintrag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 12.5px; color: var(--text-muted); }
.eintrag-meta .trenner { margin: 0 7px; }
.eintrag-meta time { font-variant-numeric: tabular-nums; }
.eintrag-text { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.eintrag-neu { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.eintrag-neu .eintrag-symbol { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.eintrag-neu .eintrag-link { box-shadow: inset 3px 0 0 var(--accent); }
.eintrag-wichtig .eintrag-symbol { background: var(--err-bg); border-color: transparent; color: var(--err-text); }

.kat-etikett {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 0 8px 0 7px; height: 21px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--kat) 11%, var(--surface)); color: color-mix(in srgb, var(--kat) 72%, var(--text));
  font-size: 12px; font-weight: 600; white-space: nowrap; vertical-align: 1px;
}
.kat-etikett::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--kat); flex: none; }

/* Neuigkeiten-Block */
.neu-block { margin-bottom: 8px; }
.neu-kopf h2 { display: flex; align-items: center; gap: 8px; }
.neu-kopf h2 .ico { color: var(--accent); }
.neu-kopf form { margin: 0; }
.neu-summe { margin: -6px 0 12px; font-size: 13px; color: var(--text-muted); }
.neu-leer {
  margin: 0; padding: 16px 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  color: var(--text-muted); font-size: 14px; background: var(--surface);
}

/* Postfach und Telefon: Neues hervorheben */
.mail-neu { background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.mail-neu.mail-dringend { box-shadow: inset 3px 0 0 var(--err-text); }
tr.zeile-neu td { background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }
tr.zeile-neu td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- Kategorie-Seite ---------- */

.kat-kopf-etikett { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; font-weight: 550; color: var(--text-subtle); }
.kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 0 0 32px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.kennzahlen > div { padding: 14px 18px; border-left: 1px solid var(--border); margin-left: -1px; }
.kennzahlen dt { font-size: 12px; color: var(--text-muted); }
.kennzahlen dd { margin: 2px 0 0; font-size: 22px; font-weight: 620; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kennzahlen > div:first-child dd { color: var(--accent); }
.kat-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.kat-seite { position: sticky; top: 24px; padding: 18px 20px; background: var(--surface-sunk); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.kat-seite h2 { font-size: 14.5px; }
.kat-todos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; font-size: 13.5px; }
.kat-todos li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; align-items: baseline; }
.kat-todos a { color: var(--text); text-decoration: none; font-weight: 520; }
.kat-todos a:hover { color: var(--accent); text-decoration: underline; }
.kat-zeile:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Kategorien verwalten */
.kat-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); text-decoration: none; }
.kat-link:hover { color: var(--accent); }
.vorschlaege { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.vorschlag { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.vorschlag p { margin: 0 0 4px; }
.vorschlag-name { font-weight: 650; }
.vorschlag form { margin: 0; flex: none; }

/* ---------- Schnittstellen ---------- */

.zugang-neu {
  display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap;
  padding: 18px 20px; margin-bottom: 36px;
  background: var(--surface-sunk); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.zugang-neu h2 { margin: 0 0 2px; }
.zugang-neu p { margin: 0; }
.zugang-neu-wahl { display: flex; gap: 8px; flex: 1 1 320px; max-width: 460px; }
.zugang-neu-wahl select { flex: 1; min-height: 38px; }
.zugang-neu-wahl .btn { min-height: 38px; }
.zugang-gruppe + .zugang-gruppe { margin-top: 32px; }
.zugang-gruppe h2 { font-size: 13px; font-weight: 620; color: var(--text-muted); margin-bottom: 8px; }
.zugaenge { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.zugaenge > li + li { border-top: 1px solid var(--border); }
.zugang {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 16px; gap: 14px; align-items: center;
  padding: 13px 18px; color: inherit; text-decoration: none; transition: background-color 140ms var(--ease);
}
div.zugang { grid-template-columns: 10px minmax(0, 1fr) auto; }
a.zugang:hover { background: var(--surface-hover); color: inherit; }
a.zugang:hover .zugang-pfeil { transform: translateX(2px); color: var(--text); }
.zugang-pfeil { transition: transform 160ms var(--ease); }
.zugang-text { display: grid; min-width: 0; }
.zugang-name { font-weight: 600; overflow-wrap: anywhere; }
.zugang-art { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zugang-stand { font-size: 12.5px; color: var(--text-muted); text-align: right; }
.zustand { width: 9px; height: 9px; border-radius: 50%; background: var(--text-subtle); }
.zustand-ok { background: #3f8a58; box-shadow: 0 0 0 3px var(--ok-bg); }
.zustand-fehlt { background: #c8962e; box-shadow: 0 0 0 3px var(--open-bg); }
.zustand-fehler { background: var(--err-text); box-shadow: 0 0 0 3px var(--err-bg); }
.zustand-info { background: var(--text-subtle); box-shadow: 0 0 0 3px var(--surface-sunk); }
.zugang-leer { margin: 0; padding: 13px 18px; font-size: 13.5px; color: var(--text-muted); }
.zugang-verweis { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-sunk); font-size: 13.5px; }

/* Eigene Schnittstelle: Felder */
.eigen-felder { display: grid; gap: 8px; }
.eigen-feld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 120px 34px; gap: 8px; align-items: end; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-sunk); border: 1px solid var(--border); }
.eigen-weg { min-height: 34px; width: 34px; }

/* ---------- Schmal ---------- */

@media (max-width: 1000px) {
  .kat-raster { grid-template-columns: minmax(0, 1fr); }
  .kat-seite { position: static; }
}
@media (max-width: 767px) {
  .eintrag-link { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
  .eintrag-symbol { width: 28px; height: 28px; border-radius: 8px; }
  .zugang { grid-template-columns: 10px minmax(0, 1fr) 16px; }
  .zugang-stand { grid-column: 2; grid-row: 2; text-align: left; }
  .eigen-feld { grid-template-columns: minmax(0, 1fr) 34px; }
  .eigen-feld .kat-feld:nth-of-type(2), .eigen-feld .kat-feld:nth-of-type(3) { grid-column: 1; }
  .eigen-weg { grid-column: 2; grid-row: 1; }
  .vorschlag { flex-direction: column; }
}