/* app.css - Oberfläche. Farben ausschließlich über Variablen. Hauptfarbe, Schriftgröße und Hell/Dunkel setzt
   app-theme.js zur Laufzeit (--primary, --primary-dark, --primary-text, --link, --primary-soft, --font-scale, --font-body,
   --font-heading, data-theme). Schriften liegen lokal unter assets/fonts (SIL OFL, siehe README.txt dort). */

@font-face { font-family: "Nunito"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/nunito-v32-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/nunito-v32-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/nunito-v32-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-weight: 200 1000; font-style: normal; font-display: swap; src: url("fonts/Mulish-VariableFont_wght.ttf") format("truetype"); }
@font-face { font-family: "Fraunces"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Fraunces-400.ttf") format("truetype"); }
@font-face { font-family: "Fraunces"; font-weight: 600 700; font-style: normal; font-display: swap; src: url("fonts/Fraunces-600.ttf") format("truetype"); }

:root {
  --primary: #574d3d;
  --primary-dark: #3f382c;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-body);
  --primary-text: #ffffff;
  --primary-soft: #ece8e0;
  --link: #574d3d;
  --font-scale: 1;

  --bg: #f5f1eb;
  --surface: #ffffff;
  --surface2: #f0ece4;
  --line: #ddd8cf;
  --text: #1a1713;
  --muted: #625644;
  --danger: #b3261e;
  --danger-bg: #fbe9e7;
  --ok: #2e7d32;
  --ok-bg: #e6f3e7;
  --focus: #0b57d0;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.18);
  --radius: 12px;

  --k-appointment: #1f5fa8; --k-appointment-bg: #e5eefa;
  --k-deadline: #b3261e;    --k-deadline-bg: #fbe9e7;
  --k-followup: #8a5a00;    --k-followup-bg: #fbf0d9;
  --k-task: #2e7d32;        --k-task-bg: #e6f3e7;
  --k-external: #5b4a9c;    --k-external-bg: #ece9f6;
  --k-holiday: #625644;     --k-holiday-bg: #eee9df;
  --k-private: #ad1457;     --k-private-bg: #fce4ec; /* private Aufgaben (28.09.2026) */

  --nav-w: 13.5rem;
  --topbar-h: 3.5rem;
}

:root[data-theme="dark"] {
  --bg: #171411;
  --surface: #211d19;
  --surface2: #2a251f;
  --line: #3a342c;
  --text: #f0ebe3;
  --muted: #b8ab94;
  --danger: #ff8a80;
  --danger-bg: #3d1f1c;
  --ok: #7fd68b;
  --ok-bg: #1c3421;
  --focus: #8ab4f8;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.6);

  --k-appointment: #8ab4f8; --k-appointment-bg: #1b2a40;
  --k-deadline: #ff8a80;    --k-deadline-bg: #3d1f1c;
  --k-followup: #f2c063;    --k-followup-bg: #3a2f14;
  --k-task: #7fd68b;        --k-task-bg: #1c3421;
  --k-external: #b8a6f0;    --k-external-bg: #2c2540;
  --k-holiday: #c9b99d;     --k-holiday-bg: #2f2921;
  --k-private: #f48fb1;     --k-private-bg: #3a1e2a;
}

* { box-sizing: border-box; }

html { font-size: calc(16px * var(--font-scale)); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-family: var(--font-heading); }
button, input, select, textarea { font-family: inherit; }
p { margin: 0.5rem 0; }
a { color: var(--link); }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.pad { padding: 1rem; }
.boot-note { padding: 2rem; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.icon { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; vertical-align: middle; }
.icon svg { width: 100%; height: 100%; }

.skip-link { position: absolute; left: -999px; top: 0; padding: 0.5rem 1rem; background: var(--surface); color: var(--text); z-index: 1000; }
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------------------------------------------------------------- Bausteine */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.5rem 1.1rem;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  color: var(--primary-text); background: var(--primary); border: 1px solid var(--primary); border-radius: 0.5rem;
}
.btn.secondary { color: var(--text); background: var(--surface); border-color: var(--line); }
.btn.small { min-height: 2.25rem; padding: 0.3rem 0.8rem; font-size: 0.9rem; }
.btn.icon-only { padding: 0.5rem; min-width: 2.75rem; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn:hover:not(:disabled) { filter: brightness(1.06); }
.btn:active:not(:disabled) { background: var(--primary-dark); }

.link-btn { font: inherit; color: var(--link); background: none; border: 0; padding: 0.5rem 0; cursor: pointer; text-decoration: underline; }

.field { margin: 0.9rem 0; }
label { display: block; margin-bottom: 0.25rem; font-weight: 600; }
.hint { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted); }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="file"] {
  width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem; font: inherit; color: var(--text);
  background: var(--surface2); border: 1px solid var(--line); border-radius: 0.5rem;
}
input[type="range"] { flex: 1; min-width: 6rem; accent-color: var(--primary); }
input[type="color"] { width: 3rem; height: 2.5rem; padding: 0.15rem; background: var(--surface2); border: 1px solid var(--line); border-radius: 0.5rem; cursor: pointer; }
input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); }
.pin-input { max-width: 9rem; text-align: center; letter-spacing: 0.5em; font-size: 1.4rem; }
.pin-input.small { font-size: 1.1rem; }
.pin-masked { -webkit-text-security: disc; } /* PIN als Punkte, ohne Passwortfeld (App.pinInput) */

.check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; margin: 1rem 0; cursor: pointer; }
.check input { margin-top: 0.3rem; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.row { display: flex; align-items: center; gap: 0.75rem; margin: 0.6rem 0; }
.row.wrap { flex-wrap: wrap; }
.row label { margin: 0; }
.row input[type="text"] { flex: 1; min-width: 10rem; }
.stack > * + * { margin-top: 0.6rem; }

.message { margin: 0.9rem 0; padding: 0.7rem 1rem; border-radius: 0.5rem; border: 1px solid var(--line); background: var(--surface2); }
.message.error { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
.message.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.message.demo { border-style: dashed; }

/* Grundabstand direkt in .card (20.09.2026: "Texte picken zu sehr an den Kanten" — betraf u. a. die
   Dashboard-Kacheln, aber ebenso jede andere Stelle, die .card ohne die Zusatzklasse .pad einsetzt, z. B.
   Anrufliste, Termine, Vorgänge). .pad bleibt zusätzlich bestehen (u. a. Import-Karten) und überschreibt hier
   denselben Wert redundant, aber ohne Nebenwirkung. */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; }
/* Kündigungsschreiben: nicht editierbarer Kopf (Absender/Empfänger/Datum) über dem WYSIWYG-Editor,
   23.09.2026 - overflow:hidden fasst die rechtsbündige Datumsangabe (float:right) ein. */
.letter-header-preview { background: var(--surface2); overflow: hidden; }
.letter-header-preview p { margin: 0 0 0.5rem; }
.letter-header-preview .letter-gap { margin-top: 1.5rem; }
.letter-header-preview .letter-date { text-align: right; }
.badge { display: inline-block; padding: 0.05rem 0.5rem; font-size: 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface2); }
.badge.danger { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
.badge.assignee-initials { font-weight: 600; letter-spacing: 0.04em; }
.badge.type-badge { margin-left: 0.6rem; }

/* Storno-Liste: abgeschwächte Zeile + Notiz je Benutzer (20.09.2026). */
.tbl tbody tr.storno-muted { opacity: 0.5; }
.tbl tbody tr.storno-muted:hover { opacity: 0.85; }
.tbl tbody tr.storno-done { opacity: 0.55; } /* erledigt (storniert): inaktiv */
.tbl tbody tr.storno-done:hover { opacity: 0.85; }
.done-badge { color: var(--muted); }
.done-cell { gap: 0.5rem; align-items: center; }
.done-check { display: inline-flex; color: var(--primary); margin-left: auto; }
.done-check svg { width: 1.3rem; height: 1.3rem; }
.flag-cell { align-items: center; }
/* Preisangaben bei Angeboten (30.09.2026): Jahresprämie gekennzeichnet, darunter Prämie lt. Zahlweise und Info-Beträge */
.offer-item-price .price-label { font-weight: 400; color: var(--muted); font-size: 0.8125rem; }
.offer-item-prices { font-size: 0.875rem; }
.offer-item-prices .price-info, .premium-annual { margin: 0.125rem 0 0; }
/* Kündigungsschreiben: Zusatzerklärungen zum Anhaken (30.09.2026) */
.letter-blocks { border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.5rem 0.75rem; margin: 0.75rem 0; }
.letter-blocks legend { font-size: 0.875rem; padding: 0 0.25rem; }
.letter-block { align-items: flex-start; margin: 0.35rem 0; }
.letter-block .hint { display: block; font-size: 0.8125rem; white-space: pre-line; }
/* Nebenwohnsitze im Kundenfenster (30.09.2026) */
.address-item { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.address-item.inactive { opacity: 0.6; }
.address-form input, .address-form select { width: auto; flex: 1 1 7rem; min-width: 5rem; }
.dup-identical { border-color: var(--primary); }
/* Nacherfassung Flächen (30.09.2026) */
.flaechen-badge.fehlt { background: var(--danger-bg); color: var(--danger); }
.flaechen-badge.teilweise { background: var(--surface2); color: var(--text); }
.flaechen-badge.erfasst { background: var(--ok-bg); color: var(--ok); }
.flaechen-actions { gap: 0.4rem; }
.flag-until { display: block; font-size: 0.75rem; margin-top: 0.125rem; } /* ausgeblendet bis ... (30.09.2026) */
.flag-mute-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: 0 0 auto; padding: 0; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 0.4rem; cursor: pointer; }
.flag-mute-btn.active { color: var(--primary-text); background: var(--primary); border-color: var(--primary); }
.flag-note { min-width: 7rem; font-size: 0.875rem; } /* Kundenliste (20.09.2026): mehr Abstand zwischen Name und Privat/Firma */

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 0.6rem; overflow: hidden; background: var(--surface); }
.seg { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0.35rem 0.85rem; font: inherit; color: var(--text); background: transparent; border: 0; border-right: 1px solid var(--line); cursor: pointer; }
.seg:last-child { border-right: 0; }
.seg[aria-checked="true"] { color: var(--primary-text); background: var(--primary); }

/* ---------------------------------------------------------------- Anmeldung */

/* Waagerecht und senkrecht zentriert (20.09.2026: die Karte klebte oben mit viel Leerraum darunter);
   min-height statt height, damit ein langer Inhalt (z. B. TOTP-Einrichtung mit QR-Code) die Karte nicht abschneidet. */
.login-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card { width: 100%; max-width: 26rem; padding: 1.5rem; }
/* PIN-Eingabe beim Login komplett zentriert (21.09.2026). */
.pin-step { text-align: center; }
.pin-step .field { display: flex; flex-direction: column; align-items: center; }
.pin-step .actions { justify-content: center; }
.login-card h1 { font-size: 1.5rem; margin: 0.25rem 0 0.5rem; }
.login-brand { justify-content: center; margin-bottom: 0.75rem; }

.brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex: 0 1 auto; }
.brand-logo { height: 2rem; width: auto; max-width: 10rem; object-fit: contain; }
.brand-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-brand .brand-logo { height: 3rem; max-width: 14rem; }

/* ---------------------------------------------------------------- Rahmen */

.app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100vh; height: 100dvh; }

.topbar {
  min-width: 0; display: flex; align-items: center; gap: 1rem; min-height: var(--topbar-h); padding: 0.4rem 1rem;
  color: var(--primary-text); background: var(--primary);
}
.topbar .brand-name { color: var(--primary-text); }
.spacer { flex: 1; }

.user-menu-wrap { position: relative; }
.user-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.25rem 0.6rem 0.25rem 0.3rem;
  font: inherit; color: var(--primary-text); background: transparent; border: 1px solid currentColor; border-radius: 999px; cursor: pointer;
}
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; font-size: 0.85rem; font-weight: 700; color: var(--primary); background: var(--primary-text); }
.menu {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 500; min-width: 15rem; padding: 0.4rem;
  color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop);
}
.menu-head { display: flex; flex-direction: column; padding: 0.5rem 0.75rem 0.6rem; border-bottom: 1px solid var(--line); margin-bottom: 0.3rem; overflow: hidden; }
.menu-head .muted { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; }
.menu-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 2.5rem; padding: 0.4rem 0.75rem; font: inherit; color: var(--text); background: transparent; border: 0; border-radius: 0.5rem; text-align: left; cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface2); }

.body { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 0; min-width: 0; }
.nav { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; padding: 0.4rem 0.75rem; color: var(--text); text-decoration: none; border-radius: 0.6rem; }
.nav-item:hover { background: var(--surface2); }
.nav-item.active { color: var(--primary-text); background: var(--primary); font-weight: 600; }
.nav-fab { display: none; } /* nur am Handy sichtbar (auch Querformat), s. @media unten */

.main { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.page { height: 100%; overflow: auto; padding: 1rem; }
.page:focus { outline: none; }
.windows { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: 0.5rem; max-width: min(24rem, calc(100vw - 2rem)); }
.toast { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; color: var(--text); background: var(--surface); border: 1px solid var(--ok); border-radius: 0.6rem; box-shadow: var(--shadow-pop); }
.toast.error { border-color: var(--danger); }
.toast .icon { color: var(--ok); }
.toast.error .icon { color: var(--danger); }

/* ---------------------------------------------------------------- Fenster */

.win {
  position: absolute; display: flex; flex-direction: column; pointer-events: auto;
  min-width: 260px; min-height: 160px; max-width: 100%; max-height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop);
}
.win.active { border-color: var(--primary); }
.win:focus { outline: none; }
.win.dragging { user-select: none; }
.win.max { border-radius: 0; }

.win-title {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem 0.4rem 0.75rem;
  background: var(--surface2); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0;
  cursor: grab; user-select: none; touch-action: none;
}
.win.dragging .win-title { cursor: grabbing; }
.win.max .win-title { cursor: default; border-radius: 0; }
.win.active .win-title { background: var(--primary-soft); }
.win-heading { flex: 1; min-width: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-icon { color: var(--link); }
.win-actions { display: flex; gap: 0.25rem; }
.win-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; color: var(--text); background: transparent; border: 0; border-radius: 0.5rem; cursor: pointer; }
.win-btn:hover { background: var(--line); }
.win-body { flex: 1; min-height: 0; overflow: auto; padding: 1rem; overflow-wrap: anywhere; }
.win-resize { position: absolute; right: 0; bottom: 0; width: 1.4rem; height: 1.4rem; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 55%, var(--muted) 55%, var(--muted) 62%, transparent 62%, transparent 74%, var(--muted) 74%, var(--muted) 81%, transparent 81%); border-bottom-right-radius: var(--radius); }
.win.max .win-resize { display: none; }

.panel-section { margin: 1.25rem 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.panel-section:first-of-type { border-top: 0; padding-top: 0; }
.section-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; font-size: 1.05rem; }

.swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
.swatch { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; color: #fff; border: 2px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.swatch .icon { opacity: 0; }
.swatch.selected { box-shadow: 0 0 0 3px var(--text); }
.swatch.selected .icon { opacity: 1; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

.device-list { list-style: none; margin: 0; padding: 0; }
.device-list li { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.device-main { display: flex; flex-direction: column; flex: 1; min-width: 8rem; }
.badges { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.device-icon { color: var(--muted); }

.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 1rem; margin: 0.75rem 0; padding: 0.75rem 1rem; list-style: none; background: var(--surface2); border: 1px solid var(--line); border-radius: 0.5rem; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.05em; }
.logo-preview { max-height: 5rem; max-width: 100%; padding: 0.5rem; background: #fff; border: 1px solid var(--line); border-radius: 0.5rem; }
.logo-box { margin: 0.75rem 0; }
.item-title { margin-bottom: 0.75rem; }

.holiday-name { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--k-holiday); }
.holiday-name .icon { width: 1em; height: 1em; }
.holiday-name.block { display: flex; margin: 0.3rem 0; padding: 0.3rem 0.5rem; background: var(--k-holiday-bg); border-radius: 0.4rem; font-size: 0.9rem; }

/* ---------------------------------------------------------------- Kalender */

.page:has(.cal-toolbar) { display: flex; flex-direction: column; padding: 0.75rem; }
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.cal-nav { display: flex; gap: 0.4rem; }
.cal-title { flex: 1; min-width: 12rem; font-size: 1.4rem; }
.cal-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cal-scroll { flex: 1; min-height: 0; overflow: auto; }

.cal-month {
  display: grid; grid-template-columns: 2.6rem repeat(7, minmax(0, 1fr));
  height: 100%; min-height: 30rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.cal-row { display: contents; }
.cal-h { padding: 0.4rem; font-size: 0.85rem; font-weight: 600; text-align: center; color: var(--muted); background: var(--surface2); border-bottom: 1px solid var(--line); }
.cal-h.kw { font-weight: 400; font-size: 0.75rem; border-right: 1px solid var(--line); }
.cal-h.weekend { color: var(--link); }
.cal-row .cal-h.kw:not(:first-child), .cal-month .cal-row > .cal-h.kw[role="rowheader"] { padding-top: 0.5rem; text-align: center; border-bottom: 1px solid var(--line); }
.cal-month .day { position: relative; min-width: 0; min-height: 0; padding: 0.25rem 0.3rem; overflow: hidden; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-month .day:nth-child(8n) { border-right: 0; }
.cal-month .day.other { background: var(--surface2); }
.cal-month .day.other .day-num { color: var(--muted); }
.cal-month .day.weekend { background: var(--primary-soft); }
.cal-month .day.other.weekend { background: var(--surface2); }
.cal-month .day.today { box-shadow: inset 0 0 0 2px var(--primary); }
.cal-month .day.holiday .day-num { color: var(--k-holiday); }
.cal-month .day.today .day-num { color: var(--primary-text); }

.day-head { display: flex; align-items: center; gap: 0.4rem; min-height: 1.6rem; flex-wrap: wrap; }
.day-num { min-width: 1.9rem; height: 1.9rem; padding: 0 0.3rem; font: inherit; font-weight: 700; color: var(--text); background: transparent; border: 0; border-radius: 0.4rem; cursor: pointer; }
.day-num:hover { background: var(--line); }
.today .day-num { color: var(--primary-text); background: var(--primary); }
.today-tag { padding: 0 0.4rem; font-size: 0.72rem; font-weight: 700; color: var(--primary-text); background: var(--primary); border-radius: 999px; }
.day-items { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.15rem; }

.chip { display: flex; align-items: center; gap: 0.3rem; width: 100%; min-width: 0; padding: 0.1rem 0.35rem; font: inherit; font-size: 0.8rem; text-align: left; color: var(--text); border: 0; border-left: 3px solid currentColor; border-radius: 0.3rem; cursor: pointer; }
.chip .icon { width: 1em; height: 1em; }
.chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.done .chip-text, .row-item.done .row-title { text-decoration: line-through; opacity: 0.7; }
.more { padding: 0.1rem 0.35rem; font: inherit; font-size: 0.78rem; color: var(--link); background: transparent; border: 0; text-align: left; cursor: pointer; text-decoration: underline; }

.kind-appointment { color: var(--k-appointment); background: var(--k-appointment-bg); }
.kind-deadline { color: var(--k-deadline); background: var(--k-deadline-bg); }
.kind-followup { color: var(--k-followup); background: var(--k-followup-bg); }
.kind-task { color: var(--k-task); background: var(--k-task-bg); }
.kind-external { color: var(--k-external); background: var(--k-external-bg); }
.kind-holiday { color: var(--k-holiday); background: var(--k-holiday-bg); }
/* Online-Termin-Blöcke: bewusst durchscheinend (gestrichelt, ohne Füllung), damit sie eigene Einträge nicht verdrängen */
.kind-online { color: var(--muted); background: transparent; }
.chip.kind-online, .row-item.kind-online { border: 1px dashed currentColor; border-left-width: 3px; opacity: 0.85; }
.chip.kind-online.paused, .row-item.kind-online.paused { opacity: 0.55; text-decoration: line-through; }
.bg-preview { display: inline-flex; align-items: center; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 0.5rem; }
.bg-preview-card { display: inline-flex; flex-direction: column; padding: 0.3rem 0.6rem; border: 1px solid transparent; border-radius: 0.4rem; font-size: 0.85rem; }
.error-text { color: var(--danger); }
.chip .chip-text, .row-item .row-title, .row-item .row-time { color: var(--text); }

.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; min-height: 100%; }
.col { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.col.weekend { background: var(--primary-soft); }
.col-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.5rem; padding: 0.5rem 0.6rem; font: inherit; color: var(--text); text-align: left; background: var(--surface2); border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.col-head.today { color: var(--primary-text); background: var(--primary); }
.col-head.today .today-tag { color: var(--primary); background: var(--primary-text); }
.col-day { font-weight: 700; }
.col-items { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.5rem; }

.row-item { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 0.5rem; width: 100%; padding: 0.4rem 0.6rem; font: inherit; text-align: left; border: 0; border-left: 4px solid currentColor; border-radius: 0.4rem; cursor: pointer; }
.row-time { font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.row-title { min-width: 0; overflow-wrap: anywhere; }
.row-kind { font-size: 0.78rem; color: var(--text); opacity: 0.8; }
.col .row-item { grid-template-columns: auto 1fr; }
.col .row-item .row-time { grid-column: 2; }
.col .row-item .row-title { grid-column: 1 / -1; }
.col .row-item .row-kind { grid-column: 1 / -1; }

.cal-agenda { max-width: 56rem; }
.agenda-day { margin: 0 0 1rem; }
.agenda-head { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.4rem; padding-bottom: 0.3rem; font-size: 1rem; border-bottom: 1px solid var(--line); }
.agenda-head.today { color: var(--link); }
.agenda-day .row-item { margin-bottom: 0.3rem; }

.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.legend-item { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0.6rem; font-size: 0.85rem; border-radius: 999px; }
.legend-item span { color: var(--text); }
/* Private Kalender lassen sich per Klick in der Legende ein-/ausblenden (20.09.2026) */
.legend-toggle { border: 1px solid currentColor; background: transparent; font: inherit; cursor: pointer; }
.legend-toggle.off { opacity: 0.45; }
.legend-toggle:hover:not(:disabled) { filter: brightness(0.9); }
.legend-toggle:disabled { cursor: wait; }

/* ---------------------------------------------------------------- Storno-Liste, Verträge, Kunden */

select, input[type="date"], input[type="time"], input[type="month"], input[type="search"], textarea {
  width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem; font: inherit; color: var(--text);
  background: var(--surface2); border: 1px solid var(--line); border-radius: 0.5rem;
}
textarea { min-height: 5rem; resize: vertical; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.page-title { font-size: 1.4rem; }
.check.inline { display: inline-flex; margin: 0; align-items: center; }
.check.inline input { margin-top: 0; }

.storno-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.filters > select { flex: 1 1 12rem; width: auto; }
.filters > .search { flex: 2 1 16rem; width: auto; }
.filters > .check { flex: 0 0 auto; white-space: nowrap; }
.stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.stat { display: flex; flex-direction: column; min-width: 7.5rem; padding: 0.4rem 0.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 0.6rem; }
.stat strong { font-size: 1.25rem; line-height: 1.2; }
.stat span { font-size: 0.8rem; color: var(--muted); }
.stat.warn { border-color: var(--k-followup); background: var(--k-followup-bg); }

/* Waagerecht scrollbare Bereiche (Tabellen, Reiterleisten) zeigen am rechten Rand einen schmalen Schatten, solange
   noch mehr Inhalt folgt (reine CSS-Technik: zwei mitlaufende Deckflächen plus zwei feste Schattenflächen, kein
   JavaScript nötig). Ohne Hinweis war am Handy wie am PC nicht erkennbar, dass breite Tabellen und lange
   Reiterleisten überhaupt weiterscrollen (UX-Durchsicht 22.09.2026, "für Handy und PC optimieren"). */
.table-wrap, .segmented {
  background-image:
    linear-gradient(to right, var(--surface) 30%, rgba(0, 0, 0, 0)),
    linear-gradient(to left, var(--surface) 30%, rgba(0, 0, 0, 0)),
    linear-gradient(to right, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)),
    linear-gradient(to left, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
  background-position: left, right, left, right;
  background-repeat: no-repeat;
  background-size: 1.5rem 100%, 1.5rem 100%, 0.6rem 100%, 0.6rem 100%;
  background-attachment: local, local, scroll, scroll;
}
.table-wrap { overflow-x: auto; background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tbl th, .tbl td { padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--surface2); }
.tbl th { position: sticky; top: 0; background: var(--surface2); white-space: nowrap; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.th-btn { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0; font: inherit; font-weight: 700; color: var(--text); background: none; border: 0; cursor: pointer; }
.th-btn .sort-icon { opacity: 0.35; width: 1em; height: 1em; }
.th-btn .sort-icon.on { opacity: 1; }
.tbl td .hint { display: block; margin-top: 0; }
.row-link { padding: 0; text-align: left; font-weight: 600; }
.row-link.big { font-size: 1.15rem; }
.flag { color: var(--k-followup); }
.flag.sofort-flag { color: var(--primary); } /* "sofort kündbar" (20.09.2026): eigenes Symbol statt nur Text */
.badge.warn { color: var(--k-followup); border-color: var(--k-followup); background: var(--k-followup-bg); }
.pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin: 0.75rem 0; }

.detail-head { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.cancel-card { padding: 0.8rem 1rem; margin-bottom: 0.5rem; }
/* "Alternativangebot anfragen" (21.09.2026): Knopf + aufklappbares Anfrageformular im Vertragsfenster. */
.calc-request { margin-top: 0.75rem; }
.calc-request-panel { margin-top: 0.6rem; padding: 0.75rem 1rem; background: var(--surface2); border: 1px solid var(--line); border-radius: 0.5rem; }
.calc-request-panel textarea { min-height: 14rem; }
.section-title.spaced { margin-top: 1.25rem; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.9rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 0.9rem; }
.pick-results { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.3rem 0; }
.pick-item, .list-btn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; width: 100%; padding: 0.4rem 0.6rem; font: inherit; text-align: left; color: var(--text); background: var(--surface2); border: 1px solid var(--line); border-radius: 0.5rem; cursor: pointer; }
.pick-item:hover, .list-btn:hover { background: var(--primary-soft); }
.pick-chosen { margin: 0.2rem 0 0.5rem; }
.link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.link-list-item { display: flex; gap: 0.4rem; align-items: stretch; }
.link-list-item .list-btn { flex: 1; min-width: 0; }

/* Dashboard (§16, Phase 4b): Kacheln mobil einspaltig, ab genug Breite mehrspaltig. */
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.9rem; align-items: start; }
.dash-tile h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.dash-tile-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.dash-edit-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.dash-edit-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.7rem; background: var(--surface2); border: 1px solid var(--line); border-radius: 0.5rem; }
.dash-edit-label { font-weight: 600; }
.edit-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; margin: 0.4rem 0; padding: 0.5rem; background: var(--surface2); border: 1px solid var(--line); border-radius: 0.5rem; }
.edit-row > input[type="text"], .edit-row > select, .edit-row > input[type="email"] { flex: 1 1 8rem; min-width: 7rem; width: auto; }
.edit-row .narrow, .edit-row > input.narrow { flex: 0 0 4.5rem; min-width: 4.5rem; }
.edit-row > .field { flex: 1 1 100%; margin: 0.2rem 0; }

@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .filters > select { flex-basis: 45%; }
  .filters > .search { flex-basis: 100%; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  /* Tabellen am Handy als Karten (28.09.2026: "am Handy soll alles auf einer Seite ersichtlich sein von der
     Breite her"): statt waagerecht zu scrollen wird jede Zeile ein Block, jede Zelle zeigt ihre Spaltenüberschrift
     (data-label, gesetzt von App.labelTable) davor. Es wird weiterhin keine Spalte ausgeblendet (22.09.2026: "damit
     der komplette Inhalt sichtbar bleibt"). */
  .table-wrap { overflow-x: visible; }
  .tbl, .tbl tbody, .tbl tr, .tbl td, .tbl tbody th, .tbl tfoot { display: block; width: 100%; }
  .tbl thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tbl tbody tr, .tbl tfoot tr { padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--line); }
  .tbl tbody tr:last-child { border-bottom: 0; }
  .tbl td, .tbl tbody th, .tbl tfoot th, .tbl tfoot td { position: relative; padding: 0.15rem 0 0.15rem 7.2rem; border: 0; min-height: 1.4rem;
    white-space: normal; overflow-wrap: anywhere; text-align: left; }
  .tbl td::before, .tbl tbody th::before, .tbl tfoot td::before { content: attr(data-label); position: absolute; left: 0; top: 0.2rem; width: 6.8rem;
    font-size: 0.78rem; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
  .tbl td[data-label=""], .tbl td:not([data-label]), .tbl tbody th[data-label=""], .tbl tbody th:not([data-label]) { padding-left: 0; }
  .tbl td[data-label=""]::before, .tbl td:not([data-label])::before, .tbl tbody th[data-label=""]::before, .tbl tbody th:not([data-label])::before { display: none; }
  .tbl .num { text-align: left; white-space: normal; }
}

/* ---------------------------------------------------------------- Schmale Bildschirme */

@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .topbar { padding: 0.4rem 0.75rem; }
  .user-name, .user-caret { display: none; }
  .user-btn { padding: 0.2rem; }

  .body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  /* Die Navigationsleiste ließ sich am Handy nicht zuverlässig waagerecht scrollen (Wunsch 21.09.2026,
     zweite Rückmeldung) — jetzt komplett anders: standardmäßig UNSICHTBAR, ein einzelner runder Knopf rechts unten
     (.nav-fab, immer erreichbar, unabhängig vom Scrollzustand der Seite) klappt sie bei Bedarf als volle Fläche
     auf, alle Punkte stehen dann ohne Wischen bereit. "Import" bleibt dabei ausgeblendet (hideOnMobile, s.
     app-shell.js). .nav-fab liegt bewusst NICHT in #nav, sondern direkt in der App-Hülle, damit sie immer an
     derselben Stelle bleibt, ganz gleich ob die Navigation gerade sichtbar ist oder nicht. */
  .nav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 0.25rem; padding: 0.75rem; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); max-height: 70vh; overflow-y: auto; background: var(--surface); border-right: 0; border-top: 1px solid var(--line); box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.2); }
  .nav.nav-expanded { display: flex; }
  .nav-item { flex: 0 0 auto; flex-direction: column; gap: 0.1rem; min-width: 4.5rem; padding: 0.3rem 0.5rem; font-size: 0.8rem; }
  .nav-item-hide-mobile { display: none; }
  .nav-fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 900;
    width: 3.4rem; height: 3.4rem; padding: 0; border-radius: 50%; border: 0;
    background: var(--primary); color: var(--primary-text); box-shadow: var(--shadow-pop); cursor: pointer;
  }
  .nav-fab .icon { width: 1.5em; height: 1.5em; }

  .win { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border: 0; border-radius: 0; max-width: none; }
  .win:not(.active) { display: none; }
  .win-title { border-radius: 0; cursor: default; }
  .win-resize { display: none; }
  .win-btn[aria-label="Fenster maximieren"], .win-btn[aria-label="Fenster verkleinern"] { display: none; }

  .cal-title { font-size: 1.15rem; min-width: 100%; order: -1; }
  .cal-week { grid-template-columns: 1fr; }
  .cal-month { grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 28rem; }
  .cal-month .cal-h.kw { display: none; }
  .cal-month .day { padding: 0.15rem; }
  .cal-month .day:nth-child(8n) { border-right: 1px solid var(--line); }
  .cal-month .day:nth-child(7n+1) { border-right: 1px solid var(--line); }
  .cal-month .day:nth-child(7n) { border-right: 0; }
  .chip-text { display: none; }
  .chip { width: auto; padding: 0.1rem 0.25rem; }
  .day-items { flex-direction: row; flex-wrap: wrap; }
  .holiday-name span:last-child { display: none; }
  .seg span:last-child { display: none; }
  .codes { grid-template-columns: 1fr; }
  .toasts { bottom: 5rem; }

  /* Kopfzeile von Listenseiten (Storno-Liste, Kunden, Anrufliste, Vorgänge, Aufgaben, Termine, Ablage, Dashboard):
     Titel und CSV/Excel/Neu-Schaltflächen standen in einer einzigen, nicht umbrechenden Zeile und liefen am
     schmalen Handy-Bildschirm über den rechten Rand hinaus — die Schaltfläche zum Neuanlegen war dadurch ohne
     seitliches Verschieben gar nicht erreichbar (UX-Durchsicht 22.09.2026, "Handy und PC optimieren").
     Umbruch statt Überlauf, gleiches Muster wie schon bei .filters/.actions. */
  .storno-head { flex-wrap: wrap; row-gap: 0.5rem; }

  /* Reiter-/Chip-Leisten mit vielen Einträgen (Aufgaben-Ansichten, Vorgänge-Ansichten, Anrufliste "Stand"): bei
     schmaler Breite reichte der Platz nicht, hintere Reiter wurden vom Rahmen hart abgeschnitten und waren am
     Handy weder sichtbar noch antippbar. Jetzt waagerecht wischbar statt verloren, gleiches Prinzip wie die seit
     22.09.2026 wischbaren Tabellen; kurze Leisten (z. B. Monat/Woche/Liste im Kalender), die ohnehin ganz
     hineinpassen, sind davon nicht betroffen.
     28.09.2026 ("am Handy soll alles auf einer Seite ersichtlich sein von der Breite her"): statt zu wischen brechen
     die Reiter in weitere Zeilen um, damit alle ohne Wischen zu sehen sind. */
  .segmented { display: flex; flex-wrap: wrap; max-width: 100%; overflow: hidden; }
  .segmented .seg, .segmented .tab { flex: 1 1 auto; justify-content: center; border-bottom: 1px solid var(--line); margin-bottom: -1px; }
}

@media print {
  .topbar, .nav, .toasts, .win-actions, .win-resize { display: none !important; }
  .app { display: block; height: auto; }
  .windows { position: static; }
  .win { position: static !important; width: auto !important; height: auto !important; box-shadow: none; border: 0; }
  .actions, .segmented, .cal-toolbar { display: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .nav-item, .chip, .menu-item { transition: background-color 0.12s, filter 0.12s; }
}

.group-row th { padding: 0.35rem 0.7rem; font-size: 0.9rem; text-align: left; color: var(--muted); background: var(--surface2); border-bottom: 1px solid var(--line); }
.group-row .icon { width: 1em; height: 1em; margin-right: 0.2rem; }

.btn.danger { color: var(--surface); background: var(--danger); border-color: var(--danger); }
.confirm-panel { margin: 0.5rem 0 0.9rem; }
.confirm-panel .message { margin-bottom: 0.5rem; }

.plain-list { margin: 0.4rem 0; padding-left: 1.2rem; }
.import-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.import-item .actions { margin: 0 0 0 auto; }
.import-item .confirm-host { flex: 1 1 100%; }
progress { width: 100%; height: 0.9rem; accent-color: var(--primary); }
.import-main { margin-bottom: 1rem; }
.clauses { margin: 0.6rem 0; } .clauses summary { cursor: pointer; font-weight: 600; }

/* ---------------------------------------------------------------- Aufgaben */

.tasks { max-width: 60rem; }
.quick { margin-bottom: 0.6rem; }
.quick input { font-size: 1.05rem; }
.tabs, .tasks .segmented { margin: 0.4rem 0 0.7rem; }
.tab { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0.35rem 0.85rem; font: inherit; color: var(--text); background: transparent; border: 0; border-right: 1px solid var(--line); cursor: pointer; }
.tab:last-child { border-right: 0; }
.tab.on { color: var(--primary-text); background: var(--primary); }
.tab .count { min-width: 1.4rem; padding: 0 0.35rem; font-size: 0.8rem; text-align: center; color: var(--text); background: var(--surface2); border-radius: 999px; }
.tab .count.danger { color: var(--danger); background: var(--danger-bg); }
.task-list { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.task-item { padding: 0.5rem 0.7rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 0.6rem; }
.task-item.state-overdue { border-left-color: var(--danger); }
.task-item.state-snoozed { opacity: 0.8; }
.task-item.closed .row-link { text-decoration: line-through; opacity: 0.7; }
.task-main { display: flex; align-items: flex-start; gap: 0.6rem; }
.task-body { flex: 1; min-width: 0; }
.task-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; margin-top: 0.2rem; font-size: 0.9rem; }
.task-check { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex: none; color: var(--muted); background: transparent; border: 2px solid var(--line); border-radius: 50%; cursor: pointer; }
.task-check.on { color: var(--ok); border-color: var(--ok); }
.task-check:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.snooze-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.5rem 0; }
.snooze-panel input[type="date"] { width: auto; min-height: 2.25rem; }
.task-desc { white-space: pre-wrap; margin: 0.8rem 0; }
.sub-list { list-style: none; margin: 0.3rem 0 0.6rem; padding: 0; }
.sub-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0; }
.sub-list .done { text-decoration: line-through; opacity: 0.7; }
.timeline { list-style: none; margin: 0.8rem 0; padding: 0 0 0 0.9rem; border-left: 2px solid var(--line); }
.timeline li { margin: 0 0 0.7rem; }
.tl-text { margin: 0.2rem 0 0; white-space: pre-wrap; }
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) { .tab { padding: 0.35rem 0.55rem; } }

.task-item.state-waiting { border-left-color: var(--k-followup); }
.task-item.state-wait_due { border-left-color: var(--k-followup); }
.task-item.state-wait_due .task-body .badge.warn { background: var(--k-followup-bg); }
.wait-card { padding: 0.7rem 1rem; margin: 0.8rem 0; }
.wait-card h4 { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; font-size: 1rem; }
.wait-form { margin-top: 0.5rem; }

/* Einklappbare Abschnitte in "Sparten und Bestand" */
.panel-section > summary { cursor: pointer; list-style: none; user-select: none; }
.panel-section > summary::-webkit-details-marker { display: none; }
.panel-section > summary::marker { content: ''; }
.panel-section .section-chevron { transition: transform 0.15s; }
.panel-section[open] > summary .section-chevron { transform: rotate(180deg); }
.panel-section > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 0.3rem; }
.panel-section > *:not(summary) { margin-top: 0.6rem; }

/* ---------------------------------------------------------------- Übergreifende Suche (Kopfzeile) */

.quick-search { position: relative; width: 16rem; max-width: 32vw; flex: 0 1 auto; }
.quick-search input[type="search"] { min-height: 2.4rem; background: var(--surface); color: var(--text); border-color: transparent; }
.qs-results { position: absolute; z-index: 60; top: calc(100% + 0.3rem); left: 0; right: 0; max-height: 60vh; overflow-y: auto; padding: 0.3rem; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 0.6rem; box-shadow: var(--shadow-pop); }
.qs-group-label { padding: 0.4rem 0.6rem 0.2rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.qs-item { display: flex; align-items: flex-start; gap: 0.6rem; width: 100%; padding: 0.4rem 0.6rem; font: inherit; text-align: left; color: var(--text); background: none; border: 0; border-radius: 0.4rem; cursor: pointer; }
.qs-item:hover, .qs-item:focus-visible { background: var(--surface2); }
.qs-item-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.qs-empty { margin: 0; padding: 0.5rem 0.6rem; }

@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .quick-search { max-width: 40vw; }
}
@media (max-width: 480px) {
  .quick-search { display: none; }
}
.row .chip { width: auto; flex: 1; min-width: 10rem; cursor: default; }
.quick-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.8rem; }
.next-step { margin: 0.8rem 0; padding: 0.7rem 0.9rem; border-left: 4px solid var(--primary); }
.template-card { margin: 0.6rem 0; padding: 0.6rem; background: var(--surface2); border: 1px solid var(--line); border-radius: 0.6rem; }
.template-editor { display: flex; flex-direction: column; gap: 0.4rem; }
.template-editor .edit-row { margin: 0; padding: 0; background: none; border: 0; }
.template-editor textarea, .template-editor input[type="text"] { width: 100%; }
.contact-entry { padding: 0.6rem 0.2rem; border-bottom: 1px solid var(--line); list-style: none; }
.contact-head { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: baseline; }
.contact-subject { font-weight: 600; margin-top: 0.2rem; }
.contact-body { margin-top: 0.2rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.swatch-families { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.5rem 0; }
.swatch-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.swatch-family-name { width: 5.5rem; font-size: 0.85rem; color: var(--muted); }
.swatch-row .swatch { width: 2rem; height: 2rem; }
.tune { margin: 0.5rem 0; }
.tune .row { margin: 0.25rem 0; }
.tune .row label { width: 6.5rem; }
.tune input[type="range"] { flex: 1; }
.sub-title { margin: 0.75rem 0 0.4rem; font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem; }
.font-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.5rem 0.7rem; font: inherit; color: var(--text); text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 0.6rem; cursor: pointer; }
.font-card:hover { background: var(--primary-soft); }
.font-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.font-sample { font-size: 1.6rem; line-height: 1.2; }
.font-name { font-weight: 600; }

/* Vorgänge (app-cases.js) */
.case-list { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.case-item { padding: 0.5rem 0.7rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 0.6rem; }
.case-item.priority-urgent { border-left-color: var(--danger); }
.case-item.priority-high { border-left-color: var(--k-deadline); }
.badge.small { font-size: 0.7rem; margin-left: 0.3rem; padding: 0 0.35rem; }
.case-steps { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.8rem; }
/* Abgerundete, kleinere Stadium-Kästchen (20.09.2026: "schöner!", gleiche Machart wie die
   Sparte/Provisionsnummer-Chips der Storno-Liste). */
.case-steps .step-chip { min-height: auto; padding: 0.3rem 0.75rem; border: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.case-steps .step-chip.selected { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.next-step-hint { display: flex; align-items: center; gap: 0.4rem; color: var(--primary); font-weight: 600; }
.toggle-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; max-width: 100%; }
/* Kleinere, abgerundete Kästchen für Sparte/Provisionsnummer/Betreuer (20.09.2026: "schöner!"). Eigene
   Regel statt die geteilte .seg/.step-chip-Grundform (u. a. Wechsel-Vorgang-Schritte) zu verändern. */
.toggle-chips .step-chip { min-height: auto; padding: 0.2rem 0.65rem; font-size: 0.8rem; border: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.toggle-chips .step-chip.selected { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.toggle-chips .step-chip.toggle-more { background: transparent; border-style: dashed; color: var(--muted); }
/* Die ganze Zeile "Sparte"/"Provisionsnummer" einklappbar (20.09.2026), gleiches Chevron-Muster wie
   die einklappbaren Abschnitte in "Sparten und Bestand" (.panel-section). */
.field-collapsible > summary { cursor: pointer; list-style: none; display: flex; align-items: center; min-width: 10rem; }
.field-collapsible > summary::-webkit-details-marker { display: none; }
.field-collapsible > summary::marker { content: ''; }
.field-collapsible .section-chevron { transition: transform 0.15s; }
.field-collapsible[open] > summary .section-chevron { transform: rotate(180deg); }
.field-collapsible > .toggle-chips { margin-top: 0.4rem; }
.step-chip { display: inline-flex; align-items: center; gap: 0.3rem; }
.step-chip.selected { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.step-chip:disabled { cursor: default; }
.share-item { margin: 0; text-align: center; max-width: 7rem; }
.share-item img { display: block; max-width: 100%; height: auto; border-radius: 0.4rem; }
.share-row { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.share-row img { border-radius: 0.3rem; display: block; }
.label-like { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.editor { border: 1px solid var(--line); border-radius: 0.5rem; background: var(--panel); }
.editor-bar { padding: 0.35rem; gap: 0.3rem; border-bottom: 1px solid var(--line); }
.editor-area { min-height: 9rem; max-height: 22rem; overflow: auto; padding: 0.6rem 0.75rem; outline: none; }
.editor-area:focus-visible { box-shadow: inset 0 0 0 2px var(--focus, var(--primary)); }
.editor-area p { margin: 0 0 0.6rem; }
.editor-area ul, .editor-area ol { margin: 0 0 0.6rem 1.2rem; padding: 0; }
.bulk-bar { margin: 0.5rem 0; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--panel); }
.task-pick { width: 1.15rem; height: 1.15rem; margin-right: 0.4rem; flex: none; }

/* Kundenkarteiblatt im Aufbau des Allianz-Karteiblatts (app-karteiblatt.js, 23.09.2026): schlichte
   Tabellen, fette Spaltenköpfe, dünne Trennlinien wie im Original. */
.message.warn { color: var(--k-followup); border-color: var(--k-followup); background: var(--k-followup-bg); }
.kb-sheet { font-size: 0.9rem; line-height: 1.35; }
.kb-sheet table { border-collapse: collapse; width: 100%; }
.kb-sheet th, .kb-sheet td { text-align: left; vertical-align: top; padding: 0.12rem 0.6rem 0.12rem 0; }
.kb-sheet th { font-weight: 700; }
.kb-sheet .num { text-align: right; white-space: nowrap; }
.kb-sheet .b { font-weight: 700; }
.kb-title { border-bottom: 1px solid var(--text); padding-bottom: 0.4rem; margin-bottom: 0.8rem; }
.kb-title .kb-h1 { font-size: 1.25rem; margin: 0; }
.kb-title .kb-sub { margin: 0.2rem 0 0; font-size: 0.8rem; }
.kb-members th:first-child, .kb-members td:first-child { width: 36%; }
.kb-label { font-weight: 700; margin-top: 0.8rem; }
.kb-addr { display: grid; grid-template-columns: max-content 1fr; gap: 0.1rem 1rem; margin: 0.1rem 0 0.8rem; }
.kb-addr dd, .kb-bvn dd { margin: 0; }
.kb-contract { border-top: 1px solid var(--text); padding: 0.8rem 0 1rem; }
.kb-chead { display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; align-items: baseline; font-weight: 700; font-size: 1rem; }
.kb-chead .kb-verm { margin-left: auto; }
.kb-chead .kb-open { font-weight: 400; font-size: 0.85rem; }
.kb-bvn { display: grid; grid-template-columns: 6rem 1fr; gap: 0.05rem 0.8rem; margin: 0.4rem 0 0.8rem; }
.kb-bvn dt { font-weight: 700; }
.kb-sparten .kb-sp-name { font-size: 1rem; }
.kb-sparten .kb-line { border-top: 1px solid var(--text); }
.kb-agree { margin: 0.7rem 0; }
.kb-desc { margin-top: 0.7rem; }
.kb-desc thead th { padding-bottom: 0.35rem; }
.kb-desc .kb-sp { width: 2.2rem; padding-left: 0.8rem; }
.kb-desc .kb-prod { width: 30%; }
.kb-desc .kb-vs { width: 7rem; }
.kb-desc .kb-pos { width: 2.5rem; }
.kb-desc tr.kb-bstart td { padding-top: 0.8rem; }
.kb-desc tr.kb-gap td { padding-top: 0.7rem; }
.kb-posl { list-style: none; margin: 0.7rem 0 0; padding: 0 0 0 0.8rem; }
.kb-posl li { margin: 0.15rem 0; }
.kb-check ul { margin: 0.3rem 0 0; }
.kb-now { display: grid; grid-template-columns: max-content 1fr; gap: 0.1rem 1rem; margin: 0.8rem 0 0; padding: 0.6rem 0.8rem; background: var(--surface2); border: 1px solid var(--line); border-radius: 0.5rem; font-size: 0.85rem; }
.kb-now dt { color: var(--muted); }
.kb-now dd { margin: 0; }
.kb-now .kb-now-title { font-weight: 700; color: var(--text); }
.kb-now dd.kb-now-title { font-weight: 400; color: var(--muted); }
@media (max-width: 640px) {
  .kb-desc .kb-prod { width: auto; }
  .kb-desc .kb-vs { width: auto; }
}
.kb-inline { margin: 1rem 0 0; border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.4rem 0.8rem; }
.kb-inline > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 0.3rem; }
.kb-inline .kb-contract { border-top: 0; }
.kb-sheet .table-wrap { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.kb-agree .kb-para { height: 0.6rem; }
/* Fenster "Unterlagen" (app-karteiblatt.js) */
.doc-list { list-style: none; margin: 0.4rem 0 0.6rem; padding: 0; display: grid; gap: 0.5rem; }
.doc-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; }
.info-line { display: flex; align-items: flex-start; gap: 0.2rem; margin: 0.2rem 0 0.5rem; }
.name-home { font-size: 1.15rem; font-weight: 700; padding: 0; text-align: left; }
.seg.seg-missing { opacity: 0.75; font-style: italic; }
.badge.badge-private { background: var(--k-external-bg); color: var(--k-external); }
/* Einstellungen: Bereiche mit Inhaltsverzeichnis (24.09.2026) */
.settings-toc { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem 0; margin-bottom: 0.4rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.settings-group { margin: 1.2rem 0 0.4rem; padding-top: 0.4rem; scroll-margin-top: 3.2rem; }
.settings-group + .settings-group { border-top: 2px solid var(--line); padding-top: 1rem; }
.settings-group-title { display: flex; align-items: center; gap: 0.45rem; font-size: 1.15rem; margin: 0 0 0.3rem; }
.settings-group > .panel-section { margin-left: 0.2rem; }
.sub-details { margin: 0.4rem 0; padding: 0.4rem 0.7rem; border: 1px solid var(--line); border-radius: 0.5rem; }
.sub-details > summary { cursor: pointer; font-weight: 600; }

/* Vertragsdaten als kompakte Kacheln nebeneinander (24.09.2026) */
.fact-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.3rem; margin: 0.2rem 0 0.4rem; }
.fact-tile { display: flex; flex-direction: column; gap: 0; padding: 0.25rem 0.5rem; border: 1px solid var(--line); border-radius: calc(var(--radius) / 2); background: var(--surface); min-width: 0; line-height: 1.3; }
.fact-tile.wide { grid-column: 1 / -1; }
.fact-tile .fact-label { font-size: 0.72rem; color: var(--muted); }
.fact-tile .fact-value { font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere; }
.fact-tile .hint { font-size: 0.68rem; line-height: 1.2; }
.premium-card { margin: 0.5rem 0; }
.motor-calc { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }
.motor-calc-row { margin: 0; padding: 0.5rem 0.8rem 0.6rem; border: 1px solid var(--line); border-radius: calc(var(--radius) / 2); }
.motor-calc-row > legend { font-weight: 600; padding: 0 0.3rem; }
.motor-calc-row > .hint { margin: 0 0 0.2rem; }
/* Motorsteuer-Formular (27.09.2026): Felder im Raster, im Vertragsfenster wie im Rechner */
.motor-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0 0.9rem; }
.motor-form > .message { grid-column: 1 / -1; margin: 0.3rem 0; }
.motor-result { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.9rem; background: var(--primary-soft); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: calc(var(--radius) / 2); }
.motor-vehicles { margin: 0.4rem 0 0; font-size: 0.9rem; }
.motor-vehicles .hint { display: block; margin: 0; }
.field-inline { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; }
.field-inline input { width: 9rem; }

/* Aufklappbare Verträge im Kundendatensatz (24.09.2026) */
.contract-fold { width: 100%; }
.contract-fold > summary { cursor: pointer; list-style: none; }
.contract-fold > summary::-webkit-details-marker { display: none; }
.contract-fold > summary::before { content: '\25B8'; color: var(--muted); margin-right: 0.3rem; }
.contract-fold[open] > summary::before { content: '\25BE'; }
.contract-fold-body { padding: 0.4rem 0.2rem 0.8rem 1rem; border-left: 2px solid var(--line); margin: 0.2rem 0 0.6rem 0.4rem; }
.contract-inline .section-title { margin-top: 0.6rem; }
.advisor-fact .hint { margin-left: 0.2rem; }
.link-list-item .contract-fold { flex: 1; min-width: 0; }
.contract-folds .link-list-item { align-items: flex-start; }

/* Angebote und Ersparnis beim Wechsel (24.09.2026) */
.offer-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.3rem 0 0.6rem; }
.offer-item { border: 1px solid var(--line); border-radius: calc(var(--radius) / 1.5); padding: 0.45rem 0.65rem; background: var(--surface); }
.compare-col .offer-item { margin-bottom: 0.4rem; }
.offer-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.offer-item-price { font-weight: 700; white-space: nowrap; }
.offer-item .actions { margin-top: 0.3rem; }
.offer-sum { font-weight: 700; text-align: right; margin: 0.2rem 0 0.4rem; }
.offer-form { border-top: 1px dashed var(--line); padding-top: 0.6rem; margin-top: 0.4rem; }
.savings-box { display: flex; flex-direction: column; gap: 0.1rem; margin: 0.6rem 0; padding: 0.75rem 1rem; border-radius: var(--radius);
  background: var(--savings-bg, #15803d); color: var(--savings-fg, #ffffff); }
.savings-box .savings-label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.savings-box .savings-amount { font-size: 1.35rem; }
.savings-box .savings-month { font-size: 0.85rem; opacity: 0.9; }
.savings-box.more { background: var(--warn-bg, #fff4e5); color: var(--warn-fg, #7c4a03); }

/* Anlagen bei der Kalkulanten-Anfrage, Karteiblatt-Knöpfe (24.09.2026) */
.calc-attach { border: 1px solid var(--line); border-radius: calc(var(--radius) / 2); padding: 0.4rem 0.7rem 0.5rem; margin: 0.5rem 0; }
.calc-attach legend { font-weight: 600; padding: 0 0.3rem; }
.calc-attach .check { display: flex; gap: 0.4rem; align-items: center; margin: 0.15rem 0; }
.calc-attach-files { margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px dashed var(--line); }
.sheet-actions { margin: -0.2rem 0 0.4rem; }
.storno td .btn.small + .btn.small, .storno td div + .btn.small { margin-top: 0.25rem; }

.badge-shared { background: var(--accent-soft, var(--surface2)); color: var(--text); }

/* Erledigte Wechsel (24.09.2026) */
.tbl tr.sum-row th, .tbl tr.sum-row td { font-weight: 700; border-top: 1px solid var(--line); }
.tbl tr.sum-row.total th, .tbl tr.sum-row.total td { border-top: 2px solid var(--text); }
input.short { width: 6.5rem; }
.label-like { font-size: 0.85rem; color: var(--muted); }

/* ---------------------------------------------------------------- Handy kompakter (25.09.2026)
   "fürs Handy die Buttons kleiner gestalten und alles übersichtlicher" - gilt im Hoch- und Querformat. Knöpfe bleiben
   mit mindestens 2 rem (32 px) gut antippbar, Abstände und Kennzahlen-Kacheln werden enger. */
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .btn { min-height: 2.25rem; padding: 0.3rem 0.75rem; gap: 0.35rem; font-size: 0.9rem; }
  .btn.small { min-height: 2rem; padding: 0.2rem 0.6rem; font-size: 0.85rem; }
  .btn.icon-only { min-width: 2.25rem; padding: 0.3rem; }
  .page, .win-body { padding: 0.6rem; }
  .page-title { font-size: 1.2rem; }
  .field { margin: 0.55rem 0; }
  .panel-section { margin: 0.8rem 0; padding-top: 0.6rem; }
  .stats { gap: 0.35rem; margin-bottom: 0.5rem; }
  .stat { min-width: 5.5rem; padding: 0.25rem 0.55rem; font-size: 0.85rem; }
  .filters { gap: 0.35rem; margin-bottom: 0.5rem; }
  .nav-fab { width: 3rem; height: 3rem; }
}
/* Querformat am Handy: wenig Höhe - Kopfzeile schmaler, Monatsansicht ohne Mindesthöhe */
@media (max-height: 500px) and (pointer: coarse) {
  .topbar { min-height: 2.6rem; padding-top: 0.15rem; padding-bottom: 0.15rem; }
  .quick-search input[type="search"] { min-height: 2rem; padding-top: 0.2rem; padding-bottom: 0.2rem; }
  .win-title { padding-top: 0.15rem; padding-bottom: 0.15rem; }
  .win-title .win-btn { min-height: 2rem; min-width: 2rem; }
  .cal-month { min-height: 0; }
  .nav { max-height: 85vh; }
}

/* Aufgabe: Verträge des Kunden zum Ankreuzen (25.09.2026) */
.contract-picks { display: flex; flex-direction: column; gap: 0.25rem; max-height: 12rem; overflow-y: auto; padding: 0.35rem 0.5rem; background: var(--surface2); border: 1px solid var(--line); border-radius: 0.5rem; }
.contract-picks .check { margin: 0; }
.sub-label { display: block; margin-top: 0.5rem; font-size: 0.85rem; color: var(--muted); }
.contract-links { display: inline-flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; }

/* ---------------------------------------------------------------- Vorgangsfenster gegliedert (27.09.2026)
   "besser gegliedert und optisch schöner": Kopf, Aktionsleiste (beim Wechsel "Alternativangebot anfragen" ganz
   vorne), danach jeder Bereich als eigene Karte mit abgesetzter Überschrift. */
.case-detail { display: flex; flex-direction: column; gap: 0.9rem; }
.case-detail > .detail-head { margin-bottom: 0; }
.case-detail > div:empty { display: none; }
.case-head-main { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.case-head-main .item-title { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.case-head-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.case-head-badges .badge { display: inline-flex; align-items: center; gap: 0.25rem; }
.badge.status-open { color: var(--text); border-color: var(--primary); background: var(--primary-soft); }
.badge.status-done { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.badge.status-cancelled { color: var(--muted); }
.case-admin { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.case-actionbar { padding: 0.75rem 0.9rem; background: var(--primary-soft); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--radius); }
.case-actionbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.case-bar-hint { margin: 0; }
.case-calc:empty { display: none; }
.case-calc { margin-top: 0.6rem; }
.case-calc .calc-request-panel { margin-top: 0.3rem; background: var(--surface); }
.case-detail .card { margin: 0; padding: 0.85rem 1rem; }
.case-detail .card > h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: -0.1rem 0 0.7rem; padding-bottom: 0.5rem; font-size: 1rem; border-bottom: 1px solid var(--line); }
.case-detail .card > h4 > .icon { color: var(--primary); }
.case-detail .card > h4 > .spacer { flex: 1; }
.case-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.9rem; align-items: start; }
.case-detail .task-desc { margin: 0.7rem 0 0; padding-top: 0.6rem; border-top: 1px dashed var(--line); white-space: pre-wrap; }
.case-detail .case-steps { margin: 0 0 0.6rem; }
.case-steps .step-chip .step-num { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; font-size: 0.75rem; font-weight: 700; border-radius: 50%; background: var(--surface2); color: var(--muted); }
.case-steps .step-chip.selected .step-num { background: var(--primary-text); color: var(--primary); }
.case-steps .step-chip.done { border-color: var(--primary); background: var(--primary-soft); }
.case-steps .step-chip.done .step-num { background: var(--primary); color: var(--primary-text); }
.case-detail .sub-title { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.9rem; }
.case-status-actions { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.case-detail .wait-card { margin: 0; padding: 0; border: 0; box-shadow: none; }
.case-detail .link-list { margin: 0; }
@media (max-width: 720px) {
  .case-admin { width: 100%; }
  .case-actionbar { padding: 0.6rem; }
}

/* ---------------------------------------------------------------- Storno-Liste übersichtlicher (27.09.2026)
   Kennzahlen oben, Filter als eigener Block (Suche/Zeitraum, Auswahl-Chips, Ansichtsoptionen), "Wechsel vorbereiten"
   hervorgehoben, Kunde und Polizzennummer als eigene Links. */
.storno .stats { margin-bottom: 0.9rem; }
.storno-filters { margin-bottom: 0.9rem; padding: 0.8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.storno-filters .storno-filter-main { margin-bottom: 0; }
.storno-filter-chips { display: flex; flex-wrap: wrap; gap: 0.2rem 1.5rem; align-items: flex-start; margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.storno-filter-chips > * { margin: 0.2rem 0; min-width: 0; }
.storno-filter-chips input.mono { max-width: 10rem; }
.storno-filter-options { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.storno-filter-options .check { white-space: nowrap; font-size: 0.95rem; }
.policy-link { padding: 0; font: inherit; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; text-align: left; white-space: nowrap; }
.storno .tbl td.action-cell { min-width: 11rem; }
.wechsel-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.wechsel-state { display: flex; flex-direction: column; gap: 0.1rem; }
.wechsel-state .badge { align-self: flex-start; color: var(--text); border-color: var(--primary); background: var(--primary-soft); }
.wechsel-state .hint { margin: 0; }
.wechsel-btn { white-space: nowrap; }
.btn.wechsel-btn:not(.secondary) { font-weight: 600; box-shadow: var(--shadow); }
/* Vorher/Nachher im Vorgangsfenster: Spalten untereinander, sobald das Fenster schmal ist */
.case-detail .compare > .grid2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.9rem; }
/* Ablage nach Kunden gruppiert (27.09.2026) */
.ablage-group { margin: 0 0 0.8rem; }
.ablage-group > .section-title { padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); }

/* Kalender: Einträge verschieben per Ziehen (27.09.2026) */
.chip.movable, .row-item.movable { cursor: grab; }
.chip.dragging, .row-item.dragging { opacity: 0.45; }
.cal-month .day.drop-target, .cal-week .col.drop-target { outline: 2px dashed var(--primary); outline-offset: -2px; background: var(--primary-soft); }

/* Gebäude und Wohnungen beim Kunden (27.09.2026) */
.object-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.3rem 0; }
.object-item { padding: 0.55rem 0.75rem; background: var(--surface2); border: 1px solid var(--line); border-radius: calc(var(--radius) / 1.5); }
.object-item.muted { opacity: 0.7; }
.object-item .actions { margin-top: 0.4rem; }
.object-item .hint { margin: 0.1rem 0 0; }
.object-head { display: flex; align-items: center; gap: 0.4rem; }
.object-head .icon { color: var(--primary); }
.object-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0 0.8rem; }
.object-form { margin-top: 0.6rem; padding: 0.7rem 0.9rem; border: 1px dashed var(--line); border-radius: calc(var(--radius) / 1.5); }
.object-picks .check > span { display: flex; flex-direction: column; }
.object-picks .hint { margin: 0; }

/* ---------------------------------------------------------------- Kalender-Einträge und Stundenraster (28.09.2026)
   Aufgaben: Art (Frist/Aufgabe/Wiedervorlage) mit Symbol oben, darunter Titel, Kunde als eigenes, farbig hinterlegtes
   Abzeichen mit runden Ecken; Tag und Woche mit Uhrzeiten, sichtbar 8 bis 19 Uhr. */
.chip.entry { flex-direction: column; align-items: stretch; gap: 0.05rem; }
.entry-kind { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: currentColor; }
.entry-line { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.entry-time { font-variant-numeric: tabular-nums; font-size: 0.75rem; color: var(--text); opacity: 0.85; white-space: nowrap; }
.entry-person { align-self: flex-start; max-width: 100%; margin-top: 0.1rem; padding: 0 0.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.7rem; line-height: 1.45; color: var(--text); background: var(--primary-soft); border: 1px solid var(--line); border-radius: 999px; }
.row-item.entry { grid-template-columns: 4.6rem 1fr auto; }
.row-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.row-main .chip-text { white-space: normal; overflow-wrap: anywhere; color: var(--text); }
.row-item.done .row-main .chip-text { text-decoration: line-through; opacity: 0.7; }

.cal-timegrid { --hour-h: 3rem; display: flex; flex-direction: column; min-width: 0; min-height: 22rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cal-timegrid .tg-row, .cal-timegrid .tg-body { display: grid; grid-template-columns: 3.4rem repeat(var(--cal-cols), minmax(0, 1fr)); }
.cal-timegrid.single .tg-row, .cal-timegrid.single .tg-body { grid-template-columns: 3.4rem 1fr; }
.tg-corner { padding: 0.3rem 0.35rem; font-size: 0.68rem; line-height: 1.2; text-align: right; color: var(--muted); }
.tg-head { flex: none; background: var(--surface2); border-bottom: 1px solid var(--line); }
.tg-dayhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.4rem; padding: 0.4rem 0.5rem; font: inherit; text-align: left; color: var(--text); background: transparent; border: 0; border-left: 1px solid var(--line); cursor: pointer; }
.tg-dayhead:hover { background: var(--primary-soft); }
.tg-dayhead.today .col-date { color: var(--primary); font-weight: 700; }
.tg-dayhead .holiday-name { flex-basis: 100%; font-size: 0.75rem; }
.tg-scroll { position: relative; flex: 1 1 auto; min-height: 6rem; overflow-y: auto; }
.tg-cell { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; padding: 0.25rem; border-left: 1px solid var(--line); overflow-y: auto; }
.tg-cell.weekend, .tg-col.weekend { background: var(--surface2); }
/* ganztägige Kalendertermine: fix unten im Kalenderbereich */
.tg-allday { flex: none; max-height: 7rem; border-top: 2px solid var(--line); background: var(--surface); }
.tg-allday.empty { display: none; }
/* Ziehgriff und Aufgabenbereich unter dem Kalender */
.tg-grip { flex: none; display: flex; align-items: center; justify-content: center; height: 0.8rem; background: var(--surface2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: ns-resize; touch-action: none; }
.tg-grip-bar { width: 3rem; height: 0.25rem; border-radius: 999px; background: var(--muted); opacity: 0.6; }
.tg-grip:hover .tg-grip-bar, .tg-grip.active .tg-grip-bar, .tg-grip:focus-visible .tg-grip-bar { background: var(--primary); opacity: 1; }
.tg-tasks { flex: none; height: 8.5rem; min-height: 3rem; overflow: hidden; position: relative; }
.tg-tasks > .tg-cell { max-height: 100%; }
.tg-empty { position: absolute; left: 3.8rem; top: 0.4rem; margin: 0; font-size: 0.85rem; }
.tg-hours .tg-hour-label { height: var(--hour-h); padding: 0 0.35rem; font-size: 0.72rem; text-align: right; color: var(--muted); transform: translateY(-0.5em); }
.tg-hours .tg-hour-label:first-child { transform: none; }
.tg-col { position: relative; border-left: 1px solid var(--line); }
.tg-slot { height: var(--hour-h); border-bottom: 1px solid var(--line); }
.tg-slot.off { background: var(--surface2); }
.tg-slot:hover { background: var(--primary-soft); }
.tg-col.today .tg-slot:not(.off) { background: color-mix(in srgb, var(--primary-soft) 45%, transparent); }
.chip.tg-event { position: absolute; overflow: hidden; justify-content: flex-start; box-shadow: var(--shadow); z-index: 1; }
.tg-col.drop-target, .tg-cell.drop-target { outline: 2px dashed var(--primary); outline-offset: -2px; }
@media (max-width: 720px) {
  .cal-timegrid { --hour-h: 2.6rem; }
  .cal-timegrid:not(.single) { min-width: 44rem; }
}

/* Eigene Vorschlagsliste unter Eingabefeldern (28.09.2026, statt <datalist>) */
.suggest-host { position: relative; }
.suggest-list { position: absolute; z-index: 40; left: 0; right: 0; top: 100%; max-height: 14rem; overflow-y: auto; margin: 0.15rem 0 0; padding: 0.25rem; list-style: none;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 0.5rem; box-shadow: var(--shadow-pop); }
.suggest-item { padding: 0.4rem 0.6rem; border-radius: 0.35rem; cursor: pointer; }
.suggest-item:hover, .suggest-item.active { background: var(--primary-soft); }

/* Bankverbindungen beim Kunden (28.09.2026) */
.iban-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.3rem 0; }
.iban-item { padding: 0.5rem 0.75rem; background: var(--surface2); border: 1px solid var(--line); border-radius: calc(var(--radius) / 1.5); }
.iban-item.inactive { opacity: 0.65; }
.iban-item .actions { margin-top: 0.35rem; }
.iban-item .hint { margin: 0.1rem 0 0; }
.iban-value { font-size: 1rem; letter-spacing: 0.03em; }
.badge.iban-active { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.iban-add input.mono { min-width: 16rem; }


/* Wechsel-Gegenüberstellung (28.09.2026): Ändern/Löschen oben am Angebot, Kommentare links und rechts */
.offer-item-head .offer-item-price { margin-left: auto; }
.offer-item-tools { display: inline-flex; gap: 0.25rem; }
.offer-item-tools .btn.icon-only { min-height: 1.9rem; min-width: 1.9rem; padding: 0.2rem; }
.compare-item { padding: 0.5rem 0.65rem; margin-bottom: 0.5rem; border: 1px solid var(--line); border-radius: calc(var(--radius) / 1.5); background: var(--surface); }
.compare-item .actions { margin-top: 0.35rem; }
.compare-comment { margin: 0.35rem 0 0; padding: 0.3rem 0.55rem; font-size: 0.9rem; font-style: italic; white-space: pre-wrap; background: var(--surface2); border-left: 3px solid var(--primary); border-radius: 0.3rem; }
.offers-editor .offer-form { margin-top: 0.6rem; }

/* Kalender: Vorschau beim Ziehen, wohin der Eintrag kommt (28.09.2026) */
.drag-ghost { pointer-events: none; font-size: 0.75rem; font-weight: 600; color: var(--text); background: var(--primary-soft); border: 2px dashed var(--primary); border-radius: 0.35rem; }
.drag-ghost:not(.timed) { display: block; margin-top: 0.2rem; padding: 0.1rem 0.35rem; }
.drag-ghost.timed { position: absolute; left: 2px; right: 2px; z-index: 3; overflow: hidden; padding: 0.15rem 0.35rem; box-shadow: var(--shadow-pop); }

/* mehrzeiliger Text in Faktenlisten (z. B. Notizen eines Google-Termins, 28.09.2026) */
.pre-wrap { white-space: pre-wrap; }

/* Aufgaben bis zum Termin täglich sichtbar (28.09.2026) */
.entry-until { font-size: 0.7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry.carry { border-style: dashed; }
.entry.overdue .entry-until { color: var(--danger); font-weight: 600; }
.transfer-block { margin: -0.2rem 0 0.6rem; }

/* Handy: Karten-Tabellen (28.09.2026) - nach den allgemeinen Regeln, damit sie gewinnen */
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .storno .tbl td.action-cell { min-width: 0; }
  .tbl td input, .tbl td select, .tbl td textarea, .tbl td .btn { max-width: 100%; min-width: 0; }
  .tbl td .flag-note, .tbl td .row input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; }
  .tbl td .btn { white-space: normal; text-align: left; }
}

/* Mailadresse mit Kopieren-Symbol (28.09.2026) */
.email-copy { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; vertical-align: middle; }
.email-copy a { overflow-wrap: anywhere; }
.copy-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.9rem; height: 1.9rem; padding: 0;
  color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 0.4rem; cursor: pointer; vertical-align: middle; }
.copy-btn:hover, .copy-btn:focus-visible { color: var(--primary); border-color: var(--primary); }
.copy-btn svg { width: 1rem; height: 1rem; }

/* Aufgabe an diesem Tag schon angesehen (28.09.2026): blass, unten, mit Häkchen */
.entry.viewed { opacity: 0.55; }
.entry.viewed:hover, .entry.viewed:focus-visible { opacity: 0.9; }
.entry-viewed { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.7rem; color: var(--muted); }
.entry-viewed svg { width: 0.8rem; height: 0.8rem; }
.viewed-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0.2rem 0 0.6rem; font-size: 0.9rem; color: var(--muted); }
.viewed-line.is-viewed { color: var(--text); }

/* Darüberfahren (28.09.2026): Einträge und Aufgaben heben sich ab, Vorschaukarte */
@media (hover: hover) and (pointer: fine) {
  .chip.entry, .row-item.entry { transition: box-shadow 0.12s ease, transform 0.12s ease, background-color 0.12s ease; }
  .chip.entry:hover, .row-item.entry:hover { background-color: var(--surface2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 0 0 1px currentColor; transform: translateY(-1px); z-index: 3; }
  .chip.tg-event:hover { transform: none; z-index: 4; }
  .task-item { transition: box-shadow 0.12s ease, border-color 0.12s ease, background-color 0.12s ease; }
  .task-item:hover { background-color: var(--surface2); border-color: var(--primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
}
.hover-card { position: fixed; z-index: 2000; max-width: 20rem; padding: 0.55rem 0.7rem; display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.85rem; line-height: 1.35; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 0.5rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); pointer-events: none; overflow-wrap: anywhere; }
.hover-card .hc-kind { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); }
.hover-card .hc-kind svg { width: 0.9rem; height: 0.9rem; }
.hover-card .hc-title { font-size: 0.95rem; }
.hover-card .hc-note { white-space: pre-wrap; color: var(--muted); border-top: 1px solid var(--line); padding-top: 0.25rem; margin-top: 0.1rem; }
.hover-card .hc-danger { color: var(--danger); font-weight: 600; }
.hover-card .hc-hint { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }

/* Ränder ziehen (28.09.2026): Griffe oben/unten im Stundenraster, links/rechts bei ganztägigen Terminen */
.chip.entry { position: relative; }
.chip.tg-event { position: absolute; }
.resize-handle { position: absolute; z-index: 2; touch-action: none; opacity: 0; transition: opacity 0.12s ease; }
.resize-handle.top, .resize-handle.bottom { left: 0; right: 0; height: 7px; cursor: ns-resize; }
.resize-handle.top { top: 0; }
.resize-handle.bottom { bottom: 0; }
.resize-handle.left, .resize-handle.right { top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
.resize-handle.left { left: -3px; }
.resize-handle.right { right: 0; }
.resize-handle::after { content: ""; position: absolute; border-radius: 2px; background: currentColor; }
.resize-handle.top::after, .resize-handle.bottom::after { left: 35%; right: 35%; height: 3px; top: 2px; }
.resize-handle.left::after, .resize-handle.right::after { top: 25%; bottom: 25%; width: 3px; left: 2px; }
.chip.entry:hover .resize-handle, .chip.entry:focus-visible .resize-handle, .chip.entry.resizing .resize-handle { opacity: 0.8; }
@media (hover: none) { .resize-handle { opacity: 0.5; } }
.chip.entry.resizing { outline: 2px dashed currentColor; outline-offset: 1px; z-index: 5; }
.resize-label { position: absolute; right: 4px; bottom: 4px; font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); background: var(--surface); padding: 0 0.25rem; border-radius: 0.25rem; }
.resize-label:empty { display: none; }

/* "+" unter "Aufgaben" im Stundenraster (28.09.2026) */
.tg-add { display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; margin: 0.3rem 0 0 auto; padding: 0;
  color: var(--primary); background: var(--surface); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.tg-add:hover, .tg-add:focus-visible { color: var(--primary-text); background: var(--primary); border-color: var(--primary); }
.tg-add svg { width: 1rem; height: 1rem; }

/* Mögliche Doppelanlagen (28.09.2026) */
.dup-group { margin: 0 0 0.8rem; display: flex; flex-direction: column; gap: 0.35rem; }
.dup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 0.5rem; }
.dup-row > .check { flex: 0 0 7rem; margin: 0; }
.dup-row.keep { border-color: var(--primary); background: var(--primary-soft); }
.dup-main { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 14rem; min-width: 12rem; }
.dup-main .link-btn { text-align: left; }
.dup-main .hint { overflow-wrap: anywhere; }
.dup-row .actions { margin: 0; flex: 0 1 auto; flex-wrap: wrap; }


/* Gleich breite Tagesspalten (28.09.2026): alle Zeilen des Stundenrasters reservieren den Platz der Scrollleiste,
   sonst waren die Spalten im gescrollten Stundenbereich schmäler als Kopf, Ganztags- und Aufgabenzeile */
.cal-timegrid .tg-row, .cal-timegrid .tg-scroll { scrollbar-gutter: stable; overflow-y: auto; }
.cal-timegrid .tg-head { overflow-y: hidden; }
.cal-toolbar .btn.active { color: var(--primary-text); background: var(--primary); border-color: var(--primary); }

/* Private Aufgaben im Kalender (28.09.2026: "private Aufgaben andersfarbig darstellen bzw. mit einem Symbol markieren") */
.entry.private { color: var(--k-private); background: var(--k-private-bg); }
.entry-private { display: inline-flex; align-items: center; color: var(--k-private); }
.entry-private svg { width: 0.85rem; height: 0.85rem; }

/* Aufgaben-Kategorien und Schaden-Stand (29.09.2026) */
.badge.badge-private { background: var(--k-private-bg); color: var(--k-private); }
.badge.badge-private svg, .badge.claim-stage svg { width: 12px; height: 12px; vertical-align: -1px; }
.badge.cat-badge { background: var(--k-appointment-bg); color: var(--k-appointment); }
.badge.cat-badge.private { background: var(--k-private-bg); color: var(--k-private); }
.badge.claim-stage.stage-anzulegen { background: var(--k-deadline-bg); color: var(--k-deadline); }
.badge.claim-stage.stage-in_bearbeitung { background: var(--k-followup-bg); color: var(--k-followup); }
.badge.claim-stage.stage-erledigt { background: var(--ok-bg); color: var(--ok); }
.claim-tasks li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.25rem 0; }
.claim-tasks li svg { width: 16px; height: 16px; flex: none; }
.claim-tasks li.muted .link-btn { text-decoration: line-through; }
.claim-tasks { list-style: none; padding-left: 0; }

/* Termin-Kennzeichen (29.09.2026) */
.entry-flag { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.8em; opacity: 0.9; }
.entry-flag svg { width: 12px; height: 12px; }
.flag-dot { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 1px solid var(--line); flex: none; }
.flag-list li { align-items: center; gap: 0.4rem; }
.flag-list input[type="color"] { width: 2.5rem; height: 2rem; padding: 0.1rem; }
.flag-list li.is-hidden > input[type="text"] { color: var(--muted); text-decoration: line-through; }
.dep-presets { margin: 0.4rem 0; }
.dep-wait { display: flex; align-items: center; gap: 0.3rem; color: var(--muted); margin: 0.4rem 0; }

/* Abhakliste einer Aufgabe, z. B. Einkaufsliste (29.09.2026) */
.check-list { list-style: none; margin: 0.4rem 0; padding: 0; }
.check-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.check-list li .check { flex: 1 1 auto; min-width: 0; }
.check-list li.done .check span { text-decoration: line-through; color: var(--muted); }
.check-list li .btn.icon-only { min-width: 1.9rem; min-height: 1.9rem; padding: 0.2rem; }
.checklist textarea { resize: vertical; min-height: 2.4rem; flex: 1 1 14rem; }

/* Hinweis zum Original im Karteiblatt (29.09.2026) */
.kb-note { margin-top: 0.6rem; }
.kb-note ul { margin: 0.3rem 0 0; }

/* Schnellanlage abgegrenzt (29.09.2026) */
.quick-card { border: 2px solid var(--primary); border-radius: var(--radius); background: var(--primary-soft); padding: 0.8rem 1rem 0.4rem; margin: 0 0 1.4rem; box-shadow: var(--shadow); }
.quick-card-title { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.25rem; font-size: 1.15rem; color: var(--primary); }
.quick-card-title svg { width: 20px; height: 20px; }
.quick-card .quick input { background: var(--surface); border-color: var(--primary); }
.quick-card .hint { margin: 0 0 0.5rem; }
.quick-card .quick-chips { margin-bottom: 0.5rem; }
.quick-offer { gap: 0.5rem; align-items: center; margin: 0.2rem 0 0.5rem; }

/* Logo oben links führt zur Startseite (29.09.2026) */
.topbar-brand { cursor: pointer; }
.topbar-brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* Kategorie-Knöpfe, Fälligkeit mit −/+ und Titel-Schnellbelegung (29.09.2026) */
.cat-chips { display: flex; flex-direction: column; gap: 0.35rem; }
.cat-chip-list { display: flex; flex-direction: column; gap: 0.35rem; }
.cat-chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.cat-chip-label { min-width: 6.5rem; font-size: 0.9em; }
.btn.cat-chip { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.btn.cat-chip.is-sub { border-style: dashed; }
.cat-chip-sub { margin-left: 0.75rem; padding-left: 0.6rem; border-left: 2px solid var(--line); } /* Unterkategorien der gewählten Kategorie (30.09.2026) */
.btn.cat-chip.is-on { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.btn.cat-chip svg { width: 14px; height: 14px; }
/* Farben der Hauptkategorien (30.09.2026, einstellbar): Wert kommt als --cat-color aus den Einstellungen */
.btn.cat-chip.has-color { border-color: var(--cat-color); box-shadow: inset 4px 0 0 var(--cat-color); }
.btn.cat-chip.has-color.is-on { background: var(--cat-color); border-color: var(--cat-color); color: var(--primary-text); box-shadow: none; }
.btn.cat-chip.kind-status { border-radius: 999px; }
.btn.cat-chip.kind-sparte { border-style: dotted; }
.cat-chip-status .cat-chip-label, .cat-chip-sparte .cat-chip-label { font-style: italic; }
.badge.cat-badge.has-color { background: var(--surface2); color: var(--text); box-shadow: inset 4px 0 0 var(--cat-color); }
.cat-edit-host:not(:empty) { margin-top: 0.4rem; padding: 0.6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface2); }
.cat-edit-row input[type="text"] { flex: 1 1 12rem; min-width: 8rem; }
.btn.icon-only { padding: 0.25rem 0.45rem; }
.date-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
@media (max-width: 520px) { .date-pair { grid-template-columns: 1fr; } }
.cat-add { align-self: flex-start; }
.cat-add-form { gap: 0.4rem; align-items: center; margin-top: 0.3rem; }
.due-stepper { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.due-stepper input[type="date"] { width: auto; min-width: 10rem; }
.btn.due-step { min-width: 2.4rem; font-weight: 600; }
.due-offday { flex-basis: 100%; color: var(--danger); }
.quick-opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0.6rem 1rem; margin: 0.4rem 0; }
@media (max-width: 800px) { .quick-opts { grid-template-columns: 1fr; } }
.quick-chips .btn.quick-chip-on { background: var(--primary); color: var(--primary-text); border-color: var(--primary); box-shadow: 0 0 0 2px var(--focus); }
.cat-badges { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
/* Sie/Du direkt in der Nacherfassung Flächen (30.09.2026) */
.segmented.seg-mini { display: inline-flex; margin-top: 0.25rem; margin-left: 0.6rem; vertical-align: middle; } /* Abstand zum Namen (30.09.2026) */
.segmented.seg-mini .seg { padding: 0.1rem 0.55rem; font-size: 0.8rem; min-height: 0; }
/* Handy (30.09.2026: "am handy muss ich nach dem laden der seite immer die seite verkleinern"): kein Eingabefeld,
   keine Auswahl und kein Filterfeld darf breiter werden als der Bildschirm, sonst vergrößert der Browser die Seite */
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  html, body { overflow-x: hidden; max-width: 100%; }
  input, select, textarea { max-width: 100%; }
  select { min-width: 0; }
  .field-inline { min-width: 0; max-width: 100%; }
  .field-inline input { width: auto; min-width: 0; flex: 1 1 6rem; }
  .field-inline .row { flex-wrap: wrap; }
  .filters > * { min-width: 0; max-width: 100%; }
}
/* Kundendatensatz übersichtlicher (30.09.2026) */
.person-hero { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1rem; margin-bottom: 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface2); box-shadow: inset 4px 0 0 var(--primary); }
.person-hero-top { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.person-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--primary); color: var(--primary-text); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.03em; }
.person-hero-main { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.person-hero-name .name-home { font-size: 1.3rem; font-weight: 700; text-decoration: none; }
.person-hero-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.person-reach { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.person-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.9rem; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.person-chip svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted); }
.person-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: flex-start; }
.person-more { position: relative; }
.person-more > summary { list-style: none; cursor: pointer; }
.person-more > summary::-webkit-details-marker { display: none; }
.person-more-menu { position: absolute; z-index: 20; top: calc(100% + 0.3rem); right: 0; display: flex; flex-direction: column; gap: 0.3rem; min-width: 12rem; padding: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-pop); }
.person-more-menu .btn { justify-content: flex-start; }
.person-card { margin: 0 0 0.8rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.person-card > .section-title, .person-card > div > .section-title:first-child { margin-top: 0; }
.person-facts { margin: 0; }
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .person-more-menu { right: auto; left: 0; }
  .person-hero { padding: 0.7rem; }
}