:root {
  --bg: #1f2a26;
  --panel: rgba(45, 59, 53, 0.9);
  --border: rgba(216, 213, 201, 0.16);
  --text: #f7f7f5;
  --muted: #9a9a8e;
  --accent: #4a90e2;
  --accent-strong: #3a73b5;
  --danger: #ff7a7a;
  /* Zeilen-Hover (Mauszeiger über Tabellenzeilen) im gesamten Programm -
     dunkel: Accent Blau getönt. Hell: siehe body.theme-light weiter unten,
     bewusst NICHT dieselbe blaue Tönung, sondern Sand statt eines fast
     weißen/verwaschenen Blaus auf hellem Grund. */
  --row-hover-bg: rgba(74, 144, 226, 0.12);
  /* Lücken, die die bietende Firma ausfüllt (siehe .stamm-lv-gap-bl/-blo) -
     bewusst NICHT die Akzentfarbe, die markiert die eigenen Ausschreiber-
     Lücken. */
  --ava-gap-bieter: #7dd3fc;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
  --radius: 16px;
  --radius-sm: 10px;
  --card: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  --glass: rgba(255, 255, 255, 0.06);
  --panel-solid: rgba(24, 32, 29, 0.95);
  --time-pause: #06b6d4;
  --time-za: #3b82f6;
  --time-internal: #6366f1;
  --time-sick: #f87171;
  --time-vacation: #fbbf24;
  /* Tönung über dem täglich wechselnden Sidebar-Hintergrundfoto (siehe
     applySidebarDailyBackground in main.js) - hoch-opak, damit das Foto nur
     dezent durchscheint und Text/Icons in der Sidebar lesbar bleiben. */
  --sidebar-bg-tint: rgba(16, 22, 19, 0.88);
  font-family: "Inter", "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(120% 120% at 10% 10%, rgba(74, 144, 226, 0.28), transparent 50%),
    radial-gradient(120% 120% at 80% -5%, rgba(31, 42, 38, 0.5), transparent 45%),
    linear-gradient(180deg, rgba(16, 22, 19, 0.9), rgba(12, 17, 15, 0.9)),
    var(--bg);
  transition: background 0.45s ease, color 0.45s ease;
}

/* Modern light UI overrides */
body.theme-light {
  --bg: #f7f7f5;
  --panel: #ffffff;
  --border: #d8d5c9;
  --text: #1f2a26;
  --muted: #9a9a8e;
  --accent: #4a90e2;
  --accent-strong: #3a73b5;
  --danger: #d63c3c;
  --row-hover-bg: rgba(216, 213, 201, 0.45);
  --shadow: 0 12px 30px rgba(31, 42, 38, 0.08);
  --card: #ffffff;
  --glass: rgba(255, 255, 255, 0.92);
  --panel-solid: #ffffff;
  --sidebar-bg-tint: rgba(255, 255, 255, 0.9);
  background: #f7f7f5;
}

body.theme-light .topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.05);
}

body.theme-light .sidebar {
  background: #ffffff;
  border-right: 1px solid var(--border);
}

body.theme-light .sidebar-nav .ghost {
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 9px 12px;
  color: #1f2937;
  background: transparent;
  box-shadow: none;
}

body.theme-light .sidebar-nav .ghost:hover,
body.theme-light .sidebar-nav .ghost[data-active-view="true"] {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(148, 163, 184, 0.35);
  color: #111827;
  box-shadow: none;
}

body.theme-light .sidebar-nav .ghost:disabled,
body.theme-light .sidebar-nav .ghost:disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  background: transparent;
  border-color: transparent;
  color: #1f2937;
}

body.theme-light .hero {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

body.theme-light .card,
body.theme-light .settings-card,
body.theme-light .column,
body.theme-light .table-wrapper {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

body.theme-light input,
body.theme-light select,
body.theme-light textarea {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
}

/* Muss mindestens so spezifisch sein wie die dunkle Grundregel weiter unten
   (input:not([type=checkbox]):not([type=radio])), sonst gewinnt die trotz
   hellem Modus und das Kalender-Icon/Popup bleibt dunkel eingefärbt. */
body.theme-light input:not([type="checkbox"]):not([type="radio"]),
body.theme-light select,
body.theme-light textarea {
  color-scheme: light;
}

body.theme-light input:focus,
body.theme-light select:focus,
body.theme-light textarea:focus {
  outline: none;
  border-color: rgba(31, 191, 127, 0.55);
  box-shadow: 0 0 0 2px rgba(31, 191, 127, 0.18);
}

body.theme-light .primary {
  background: #1fbf7f;
  color: #ffffff;
  border: 1px solid #19a46d;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(31, 191, 127, 0.18);
}

body.theme-light .ghost {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #1f2937;
  border-radius: 12px;
}

body.theme-light .ghost:hover {
  background: #f3f5f8;
  border-color: rgba(31, 191, 127, 0.35);
  color: #111827;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

body.theme-light .settings-tabs .settings-tab.is-active {
  color: var(--accent);
}

body.theme-light .table-wrapper table {
  border-collapse: collapse;
  width: 100%;
}

body.theme-light .table-wrapper thead th {
  background: #f3f5f8;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

body.theme-light .table-wrapper td {
  border-bottom: 1px solid var(--border);
}

body.theme-light .dialog form {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

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

.network-status-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40010;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  background: rgba(45, 31, 12, 0.96);
  color: #ffe6b5;
  border-bottom: 1px solid rgba(255, 183, 77, 0.55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.network-status-banner.hidden {
  display: none;
}

.network-status-banner-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ffb74d;
  animation: network-status-pulse 1.4s ease-in-out infinite;
}

@keyframes network-status-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

body.theme-light .network-status-banner {
  background: #fff7e6;
  border-color: #f2b84b;
  color: #6b4300;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
}

.login-time-notice {
  position: fixed;
  top: 18px;
  right: 18px;
  /* Am Handy überlappte dieser Hinweis (fix oben rechts) inzwischen mehrere
     eigene Kopfzeilen (Chat-Zurück-Pfeil, Home-Logo) - dort konkret sogar
     Klicks auf den Zurück-Pfeil verschluckt, weil sein z-index höher ist als
     der der Kopfzeile. Am Handy deshalb weiter unten, unterhalb jeder
     realistischen Kopfzeilenhöhe (siehe body.is-standalone-client-Regel
     weiter unten für den Override). */
  /* Höher als .project-change-popup-container (z-index: 1400) - der sitzt in
     derselben Ecke (top/right) und konnte auf schmalen/kurzen Bildschirmen
     den Schließen-Button dieses Hinweises überdecken, obwohl er selbst
     unsichtbar ist (pointer-events: none am Container, aber Kind-Popups
     können pointer-events wieder aktivieren). */
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(420px, calc(100vw - 36px));
  padding: 14px 16px;
  border: 1px solid rgba(255, 183, 77, 0.55);
  border-radius: 10px;
  background: rgba(45, 31, 12, 0.96);
  color: #ffe6b5;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}

.login-time-notice.hidden {
  display: none;
}

body.is-standalone-client .login-time-notice {
  top: calc(112px + env(safe-area-inset-top));
  right: 12px;
  left: 12px;
  max-width: none;
  /* Egal wie hoch die jeweilige Kopfzeile gerade ist (variiert je Ansicht:
     Home ohne, Chat-Liste, Chat-Thread, Dialoge...) - ein einzelner fixer
     Versatz überlappt in mindestens einer davon immer etwas Interaktives
     (hat schon den Zurück-Pfeil im Chat und jetzt ganze Chat-Einträge in
     der Liste blockiert, weil der Hinweis einen höheren z-index als deren
     Kopfzeilen hat). Deshalb grundsätzlich klick-durchlässig machen und nur
     den sichtbaren ×-Button wieder aktivieren - der Hinweis bleibt sichtbar
     und schließbar, blockiert aber nichts mehr darunter. */
  pointer-events: none;
}

body.is-standalone-client .login-time-notice * {
  pointer-events: none;
}

body.is-standalone-client #dismissMissingTimeNotice {
  pointer-events: auto;
}

/* Variante für Validierungshinweise, die MITTIG statt oben rechts erscheinen
   sollen (z.B. beim Speichern einer Rechnung ohne Kunde/Projekt) - dieselbe
   gelbe Optik wie der "keine Stunden erfasst"-Hinweis, aber als direktes Kind
   des jeweiligen <dialog>-Elements eingebaut (siehe billingErrorNotice,
   index.html), statt lose im <body>: ein modal per showModal() geöffneter
   Dialog liegt im Top-Layer des Browsers, ein außerhalb liegendes
   position:fixed-Element würde darunter verschwinden. */
.login-time-notice.center-notice {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  z-index: 20;
}

.login-time-notice-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 230, 181, 0.35);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.login-time-notice-close:hover,
.login-time-notice-close:focus {
  background: rgba(255, 230, 181, 0.12);
  outline: none;
}

body.theme-light .login-time-notice {
  background: #fff7e6;
  border-color: #f2b84b;
  color: #6b4300;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}

body.theme-light .login-time-notice-close {
  border-color: rgba(107, 67, 0, 0.25);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(130% 130% at 80% 5%, rgba(104, 255, 199, 0.18), transparent 45%),
    radial-gradient(120% 120% at 10% 85%, rgba(99, 102, 241, 0.12), transparent 50%),
    var(--bg);
  color: var(--text);
  overflow: hidden;
  transition: background 0.45s ease;
}

body.settings-page {
  overflow: auto;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  height: auto;
}

body.settings-page,
body.settings-page::before {
  background:
    radial-gradient(130% 130% at 80% 5%, rgba(104, 255, 199, 0.18), transparent 45%),
    radial-gradient(120% 120% at 10% 85%, rgba(99, 102, 241, 0.12), transparent 50%),
    var(--bg);
}

label {
  line-height: 1.2;
}

.login-overlay {
  position: fixed;
  inset: 0;
  background-color: #141f1b;
  /* Dasselbe täglich wechselnde Foto wie hinter der Sidebar (siehe dort für
     Details) - hier als dunkle Tönung über die gesamte Anmeldemaske statt
     des bisherigen reinen Schwarz/Navy. */
  background-image: linear-gradient(rgba(15, 22, 19, 0.82), rgba(15, 22, 19, 0.82)), var(--app-daily-bg-wide, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
  z-index: 30000;
  pointer-events: auto;
}

.login-overlay.hidden {
  display: none;
}

.login-intro-video {
  grid-column: 1;
  grid-row: 1;
  width: min(380px, 92vw);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
  object-fit: cover;
  pointer-events: none;
  /* Bewusst NIE display:none (auch nicht vor dem Reveal) - Safari decodiert
     bzw. spielt <video>-Frames bei display:none teils gar nicht erst ab,
     selbst wenn .play() korrekt synchron zur Nutzergeste aufgerufen wurde.
     Unsichtbar bleibt es stattdessen per Opacity, das Element behält dabei
     eine echte Layout-Box. */
  opacity: 0;
  transition: opacity 200ms ease;
}

.login-intro-video.visible {
  opacity: 1;
}

.login-card {
  grid-column: 1;
  grid-row: 1;
  width: min(380px, 92vw);
  /* Bewusst fixe Werte statt var(--panel)/var(--text)/var(--border)/
     var(--shadow) - die sind über Einstellungen > Design frei vom Nutzer
     anpassbar (z.B. für eigenes Firmen-Branding), und eine dort z.B. auf Weiß
     gesetzte "Panel"-Farbe hat die Anmeldemaske sonst unabhängig vom
     Dark/Light-Theme immer weiß gefärbt. Die Anmeldemaske läuft schon vor
     jeder Anmeldung und soll deshalb unabhängig von jeder personen- oder
     mandantenspezifischen Einstellung immer gleich aussehen (siehe auch
     applyThemePreference("dark") in main.js/showLogin()).
  */
  background: rgba(31, 42, 38, 0.92);
  border: 1px solid rgba(216, 213, 201, 0.18);
  border-radius: var(--radius);
  padding: 20px;
  display: grid;
  gap: 12px;
  text-align: left;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
  pointer-events: auto;
  color: #f7f7f5;
  opacity: 1;
  transition: opacity 260ms ease;
}

.login-card.login-card-pending {
  opacity: 0;
  pointer-events: none;
}

body.login-open #launcher {
  display: none;
  pointer-events: none;
}

body.logged-in #launcher {
  display: grid;
  pointer-events: auto;
}

body:not(.logged-in) #launcher {
  display: none;
}

.login-card h2 {
  margin: 0 0 6px 0;
}

.login-card label {
  font-size: 13px;
  color: #c7c4b8;
}

.login-card input {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(216, 213, 201, 0.2);
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #f7f7f5;
  font-size: 14px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.login-card input:focus {
  outline: none;
  border-color: rgba(74, 144, 226, 0.8);
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.25);
}

/* Safaris eigenes AutoFill/Keychain-Vorschlagsfeld (in einem normalen Tab
   aktiv, anders als im am Homescreen installierten Standalone-Modus) malt
   sonst unabhängig von .login-card input oben eine helle Hintergrundfarbe
   mit schwarzer Schrift über das Feld - auf der bewusst immer dunklen
   Anmeldemaske (siehe Kommentar bei .login-card) dadurch unlesbar. Gleicher
   Kniff wie bei #offerAssignProjectInput/#offerAssignCustomerInput weiter
   unten in dieser Datei. */
#loginUsername:-webkit-autofill,
#loginUsername:-webkit-autofill:hover,
#loginUsername:-webkit-autofill:focus,
#loginPassword:-webkit-autofill,
#loginPassword:-webkit-autofill:hover,
#loginPassword:-webkit-autofill:focus {
  -webkit-text-fill-color: #f7f7f5 !important;
  box-shadow: 0 0 0 1000px rgba(31, 42, 38, 0.92) inset !important;
}

.login-card .primary {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
}

.login-card.is-loading input,
.login-card.is-loading button {
  cursor: progress;
}

.login-card button:disabled,
.login-card input:disabled {
  opacity: 0.72;
}

.login-loading {
  display: grid;
  gap: 8px;
  margin-top: -2px;
}

.login-loading-text {
  font-size: 13px;
  color: #a8b5d8;
}

.login-progress {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.22);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.login-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1ea36b 0%, #1fbf7f 55%, #67f3d1 100%);
  box-shadow: 0 0 18px rgba(31, 191, 127, 0.28);
  transition: width 280ms ease;
}

body.theme-light .login-progress {
  background: #edf2f7;
  border-color: #d8e0e8;
}

.pdf-progress-overlay {
  /* <dialog> statt <div>, damit die Meldung immer sichtbar bleibt: ein
     offener <dialog> (z.B. Rechnungs-/Angebots-Fenster) wird vom Browser
     in einer eigenen "Top Layer" gezeichnet, die JEDES normale z-index
     schlägt - ein normales div konnte dahinter verschwinden, wodurch der
     PDF-Export scheinbar ohne jede Rückmeldung "hing". Chrome positioniert
     ein per position:fixed rechts/unten verankertes <dialog> aber fehlerhaft
     (rutscht an den linken Rand) - deshalb deckt dieses <dialog> hier
     stattdessen einfach den ganzen Viewport ab (unsichtbar, klickdurchlässig)
     und die eigentliche, sichtbare Karte (.pdf-progress-card) wird als
     normales, ganz gewöhnlich positioniertes Element darin unten rechts
     platziert. */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  pointer-events: none;
}

.pdf-progress-overlay.hidden {
  display: none;
}

.pdf-progress-overlay::backdrop {
  /* Wird jetzt per showModal() geöffnet (siehe main.js), das bringt einen
     Backdrop mit sich. Transparent + klickdurchlässig, damit optisch
     weiterhin nur die kleine Karte unten rechts erscheint. */
  background: transparent;
  pointer-events: none;
}

.pdf-progress-card {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: min(340px, calc(100vw - 32px));
  pointer-events: auto;
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.94);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  color: var(--text);
  backdrop-filter: blur(12px);
}

.pdf-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

#pdfProgressText {
  min-width: 0;
  overflow-wrap: anywhere;
}

#pdfProgressPercent {
  flex: 0 0 auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pdf-progress-track {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
}

.pdf-progress-bar {
  position: relative;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1ea36b 0%, #1fbf7f 60%, #67f3d1 100%);
  box-shadow: 0 0 18px rgba(31, 191, 127, 0.3);
  transition: width 240ms ease;
}

.pdf-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: translateX(-100%);
  animation: pdf-progress-shine 1.15s linear infinite;
}

body.theme-light .pdf-progress-card {
  border-color: #d8e0e8;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}

body.theme-light .pdf-progress-track {
  border-color: #d8e0e8;
  background: #edf2f7;
}

@keyframes pdf-progress-shine {
  to {
    transform: translateX(100%);
  }
}

.login-card .error {
  min-height: 18px;
  margin: 0;
  font-size: 13px;
  color: #ff7a7a;
}

.login-user-picker {
  position: relative;
  width: 100%;
}

.login-user-toggle {
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: rgba(9, 12, 25, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  color: #f6f7ff;
  font-size: 14px;
  font-weight: 500;
  gap: 12px;
}

.login-user-toggle span:last-child {
  transition: transform 130ms ease;
}

.login-user-toggle[aria-expanded="true"] span:last-child {
  transform: rotate(180deg);
}

.login-user-dropdown {
  position: absolute;
  inset: auto 0 auto 0;
  top: calc(100% + 8px);
  background: rgba(9, 12, 25, 0.9);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
  z-index: 40002;
  padding: 4px 0;
  max-height: 240px;
  overflow-y: auto;
}

.login-user-option {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 11px 16px;
  font-size: 14px;
  color: #f6f7ff;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.login-user-option:hover,
.login-user-option:focus {
  background: rgba(31, 191, 127, 0.15);
  color: #f6f7ff;
  outline: none;
}

.login-user-option.is-selected {
  background: rgba(31, 191, 127, 0.25);
}

.topbar {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbar-actions {
  flex-wrap: wrap;
}

.sync-status {
  /* Auf Wunsch ausgeblendet - Logik/Status-Updates in main.js bleiben
     bestehen, falls der Punkt später wieder gebraucht wird. */
  display: none;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.sync-status.saved {
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}
.sync-status.pending,
.sync-status.error,
.sync-status.unknown {
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.topbar-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}

body.theme-light .topbar-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0;
  color: #51605d;
}

.home-dashboard-summary {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.dashboard-notice-card {
  grid-column: 1 / -1;
  border-color: rgba(56, 189, 248, 0.28);
  background: linear-gradient(135deg, rgba(12, 74, 110, 0.3), rgba(15, 23, 42, 0.92));
}

.dashboard-notice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-notice-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dashboard-notice-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dashboard-notice-copy strong,
.dashboard-notice-copy p {
  margin: 0;
}

.dashboard-notice-copy p {
  color: rgba(226, 232, 240, 0.85);
  font-size: 13px;
}

.dashboard-notice-meta {
  margin-top: auto;
}

.home-user-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100px;
}

.stat-card strong {
  font-size: 26px;
  font-weight: 700;
}

.stat-card .stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0;
}

.stat-card .stat-note,
.stat-card .stat-meta {
  color: var(--muted);
  font-size: 12px;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

#topbarCompany {
  font-size: 12px;
  line-height: 1;
  align-self: flex-end;
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}

.sidebar-logo {
  height: 40px;
  width: auto;
  display: block;
  max-width: 160px;
  margin: 0 auto;
  object-fit: contain;
}

.topbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.topbar-actions .nav-icon {
  font-size: 24px;
}

.user-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.user-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border-color: rgba(142, 240, 193, 0.35);
  background: rgba(142, 240, 193, 0.08);
  position: relative;
}

.user-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  min-width: 60px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(255, 255, 255, 0.04);
}

.user-theme-toggle-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 44px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
}

.user-theme-toggle-icon {
  font-size: 11px;
  line-height: 1;
  color: var(--muted);
  z-index: 1;
}

.user-theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #8ef0c1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
  transition: transform 0.2s ease, background 0.2s ease;
}

.user-theme-toggle.is-light .user-theme-toggle-thumb {
  transform: translateX(22px);
  background: #facc15;
}

body.theme-light .user-theme-toggle {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.35);
}

body.theme-light .user-theme-toggle-track {
  background: rgba(15, 23, 42, 0.08);
}

.user-button .assignment-notif-badge {
  position: absolute;
  top: -5px;
  right: -5px;
}

.topbar .user-name {
  display: none;
}

.user-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(142, 240, 193, 0.25);
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
}

.user-name {
  font-size: 13px;
  font-weight: 600;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: grid;
  gap: 6px;
  z-index: 60;
}

.user-dropdown .ghost {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}

.user-dropdown-section {
  display: grid;
  gap: 6px;
  padding: 4px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.user-dropdown-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 8px;
}

.user-theme-action.is-active {
  background: rgba(142, 240, 193, 0.18);
  border-color: rgba(142, 240, 193, 0.35);
}

body.theme-light .user-theme-action.is-active {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.12);
}

.hidden {
  display: none !important;
}

.page {
  max-width: 100%;
  margin: 0 auto;
  padding: 5px 4px 12px;
  /* Erlaubt @container-Abfragen, die auf die tatsächlich verfügbare Breite
     des Inhaltsbereichs reagieren (Fensterbreite minus Sidebar), statt auf
     die reine Fensterbreite wie @media es tut - bei ausgeklappter Sidebar
     kann der Inhaltsbereich schmal sein, obwohl das Fenster breit ist. */
  container-type: inline-size;
  container-name: page;
}

/* Nur für die AVA-Seite (#avaShell): height:100% statt der bisherigen
   eigenen Schätzung in .ava-layout (calc(100vh - 130px)) - gemessen wurde
   z.B. main-area clientHeight 382px, aber .ava-kostenanalyse kam trotzdem
   auf 627px, weil die 100vh-Rechnung dort nicht zur tatsächlichen Höhe von
   main-area passte.
   #avaShell ist selbst ein Flex-Item von .main-area (display:flex,
   flex-direction:column) NEBEN .topbar - height:100% ignoriert dabei
   Geschwister-Elemente und bezieht sich auf die GESAMTE main-area-Höhe,
   wodurch #avaShell genau um die Höhe der Topbar zu groß wurde (gemessen:
   main-area clientHeight 400px, scrollHeight 440px = exakt +40px Topbar).
   flex:1 (statt height:100%) berücksichtigt Geschwister automatisch korrekt
   und ist hier deshalb bewusst anders als bei .page direkt darunter: .page
   ist KEIN Flex-Item (nur normaler Block-Inhalt von #avaShell), daher passt
   height:100% dort weiterhin (kein display:flex nötig, siehe Kommentar von
   einem vorherigen, fehlgeschlagenen Versuch, der .page selbst zu einem
   Flex-Container gemacht hatte und dadurch andere Kinder wie .ava-overview
   zerschossen hat). */
#avaShell {
  flex: 1;
  min-height: 0;
}

#avaShell > .page {
  height: 100%;
}

.wide-page {
  max-width: 100%;
}

.hero {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 14px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Keep the toolbar row ("Fixe + eigener Block" / search / Spalten in the
   Kanban shell, "Neues Projekt" / Suche / filters in the Projekte shell,
   "Neue Adresse" / Suche in the Adressen shell, "Neues Angebot" / Suche in
   the Angebote shell, "Neuer Beleg" / Suche in the Belege shell, "Neue
   Rechnung" / Suche / Datumsfilter in the Rechnungen shell) visible while
   the list below scrolls underneath it, pinned right below the (also
   sticky) .topbar. Scoped to these shells only — .hero/.project-toolbar are
   reused unstyled-for-sticky in several other views. */
#appShell .hero,
#projectsShell .hero,
#customersShell .hero,
#offersShell .hero,
#receiptsShell .hero,
#billingShell .hero {
  position: sticky;
  top: 56px;
  z-index: 20;
  background: var(--panel-solid);
  backdrop-filter: blur(12px);
}

body.theme-light #appShell .hero,
body.theme-light #projectsShell .hero,
body.theme-light #customersShell .hero,
body.theme-light #offersShell .hero,
body.theme-light #billingShell .hero,
body.theme-light #receiptsShell .hero {
  background: #ffffff;
}

/* Artikel shell has two stacked toolbar rows: the tab nav (always visible)
   and, right below it, whichever per-tab action row is currently shown
   (Artikel/Vorlagen/Regieposition — only one of these three is unhidden at
   a time via applyArticlesTab() in main.js). The second row's top offset
   is the topbar height (56px) plus the tab nav row's own height (~59px). */
#articlesShell #articlesTabHero {
  position: sticky;
  top: 56px;
  z-index: 21;
  background: var(--panel-solid);
  backdrop-filter: blur(12px);
}

#articlesShell #articlesToolbar,
#articlesShell #templatesToolbar,
#articlesShell #regieHeader {
  position: sticky;
  top: 115px;
  z-index: 20;
  background: var(--panel-solid);
  backdrop-filter: blur(12px);
}

body.theme-light #articlesShell #articlesTabHero,
body.theme-light #articlesShell #articlesToolbar,
body.theme-light #articlesShell #templatesToolbar,
body.theme-light #articlesShell #regieHeader {
  background: #ffffff;
}

.hero h1 {
  display: none;
}

.eyebrow {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
  margin: 0 0 6px 0;
}

h1 {
  margin: 0 0 6px 0;
  font-size: 34px;
}

.large {
  font-size: 18px;
  padding: 14px 20px;
}

.lede {
  margin: 0;
  color: var(--muted);
  max-width: 720px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.settings-embed-page {
  min-height: 100vh;
  height: 100vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.settings-embed {
  flex: 1;
  overflow: auto;
}

.settings-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
  overflow: auto;
}

body.settings-page.embed .settings-header {
  display: none;
}

body.settings-page.embed .settings-page-shell {
  padding-top: 0;
}

.time-user-switch label {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.time-user-switch select {
  font-size: 12px;
  padding: 6px 8px;
}

#timeShell .time-user-switch {
  flex: 1 1 320px;
  min-width: min(100%, 280px);
  max-width: 480px;
}

#timeShell #timeUserViewSelect {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  font-size: 11px;
  line-height: 1.2;
  padding: 6px 8px;
}

#timeShell #timeUserViewSelect option {
  background: #ffffff;
  color: #111111;
}

.time-weekend-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}

.time-weekend-toggle input {
  margin: 0;
  accent-color: var(--accent);
}

.day-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
  /* Not `position: sticky`: inside this app's nested flex/grid shell layout,
     Chromium fails to keep sticky elements pinned to their scrolling
     ancestor (confirmed by direct testing). Pinning is instead done via
     JS (see the #timeGrid scroll listener in main.js) using `transform`,
     which is unaffected by that containing-block quirk. */
  position: relative;
  z-index: 3;
  background: var(--panel);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  will-change: transform;
}

.vacation-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
}

.vacation-toggle input {
  margin: 0;
}

.sick-toggle {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.26);
  color: #b91c1c;
}

button {
  font: inherit;
  cursor: pointer;
  border-radius: 12px;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
}

button:active {
  transform: translateY(1px);
}

.primary {
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.4);
  padding: 8px 14px;
  font-weight: 600;
  min-height: 40px;
  box-shadow: none;
}

.ghost {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #e2e8f0;
  padding: 8px 14px;
  min-height: 40px;
  box-shadow: none;
}

.ghost.danger-action {
  color: var(--danger);
}

.primary:hover,
.ghost:hover {
  background: #1e293b;
  border-color: rgba(94, 234, 212, 0.55);
  color: #f8fafc;
  box-shadow: 0 10px 22px rgba(2, 8, 23, 0.35);
  transform: translateY(-1px);
}

.ghost.danger-action:hover {
  background: linear-gradient(120deg, var(--danger) 0%, #b91c1c 100%);
  color: #1b0b0b;
  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.25);
}

.ghost:hover,
.primary:hover {
  box-shadow: 0 10px 22px rgba(2, 8, 23, 0.35);
}

.ghost:disabled,
.ghost:disabled:hover {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.4);
  color: #e2e8f0;
  box-shadow: none;
  transform: none;
}

.board {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 28px;
}

.column {
  width: 100%;
}

.app-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100vh;
  background: #0b1122;
}

body.theme-light .app-layout {
  background: var(--bg);
}

body.theme-light .sidebar {
  background-color: rgba(255, 255, 255, 0.9);
  background-image: linear-gradient(var(--sidebar-bg-tint), var(--sidebar-bg-tint)), var(--app-daily-bg, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border-right: 1px solid rgba(15, 23, 42, 0.12);
}

.main-area {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.settings-frame {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
  border: none;
  border-radius: 0;
  background: var(--bg);
}

.color-grid {
  display: grid;
  gap: 16px;
}

.theme-color-tools {
  display: flex;
  gap: 10px;
}

.theme-color-tools input[type="search"] {
  width: 100%;
}

.theme-color-section {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 4%, var(--panel));
  padding: 12px;
}

.theme-color-section-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.theme-color-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

.theme-color-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  background: var(--panel);
  display: grid;
  gap: 10px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.theme-color-row:hover,
.theme-color-row:focus-within {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

.theme-color-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.theme-color-label-wrap {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.theme-color-label-wrap label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.theme-color-key {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "JetBrains Mono", "Courier New", monospace;
}

.theme-color-preview {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  flex: 0 0 auto;
}

.theme-color-preview-empty {
  background-image: linear-gradient(
    45deg,
    color-mix(in srgb, var(--muted) 35%, transparent) 25%,
    transparent 25%,
    transparent 50%,
    color-mix(in srgb, var(--muted) 35%, transparent) 50%,
    color-mix(in srgb, var(--muted) 35%, transparent) 75%,
    transparent 75%,
    transparent
  );
  background-size: 8px 8px;
}

.theme-color-controls {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 8px;
  align-items: center;
}

.theme-color-picker {
  width: 46px;
  height: 40px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.theme-color-value {
  width: 100%;
  min-width: 120px;
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 12px;
}

.theme-color-reset {
  white-space: nowrap;
}

.custom-css-field {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  background: color-mix(in srgb, var(--text) 3%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
}

.custom-css-editor {
  width: 100%;
  border: none;
  min-height: 140px;
  resize: vertical;
  font-family: "JetBrains Mono", "Courier New", monospace;
  color: var(--text);
  background: transparent;
  padding: 0;
  margin-top: 6px;
  outline: none;
  font-size: 0.95rem;
}

.custom-css-editor:focus {
  outline: none;
}

#settingsShell .page {
  min-height: 100vh;
  height: 100vh;
  padding: 0;
  display: flex;
  flex-direction: column;
}

#settingsShell main {
  flex: 1;
  overflow: auto;
}

.project-number-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.project-number-row input {
  width: 80px;
  text-align: center;
}

.pn-sep {
  opacity: 0.8;
}

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

.protocols-toolbar {
  justify-content: flex-start;
}

.protocols-heading {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.protocols-hero {
  padding: 6px 10px;
  min-height: 0;
}

.protocols-hero .project-toolbar {
  gap: 8px;
}

.protocols-hero .primary {
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.1;
}

.protocols-list,
.protocols-detail {
  display: flex;
  flex-direction: column;
}

.protocols-table tbody tr,
.protocols-detail-table-wrapper tbody tr {
  cursor: pointer;
}

.protocols-detail-table-wrapper {
  margin: 0 10px 10px;
}

@media (max-width: 640px) {
  /* Scoped to .protocols-detail so this doesn't also affect AVA's Vergabe
     detail view, which reuses the same .ava-vergabe-detail-head classes. */
  .protocols-detail .ava-vergabe-detail-head {
    flex-wrap: wrap;
    padding: 10px 12px;
  }
  .protocols-detail .ava-vergabe-detail-head-title {
    flex-basis: 100%;
    order: 1;
  }
  .protocols-detail .ava-vergabe-detail-actions {
    order: 2;
  }
  .protocols-detail .ava-vergabe-detail-actions .primary {
    padding: 6px 10px;
    font-size: 13px;
  }
  /* Besprechungsdatum is the least essential column here (still visible
     after opening a protocol) - drop it so the rest fits without needing
     to scroll horizontally to reach the Aktion buttons. */
  .protocols-detail-table-wrapper th:nth-child(3),
  .protocols-detail-table-wrapper td:nth-child(3) {
    display: none;
  }
  .protocols-detail-table-wrapper .protocol-row-actions-inline {
    gap: 8px;
  }
  .protocols-detail-table-wrapper .analytics-table {
    font-size: 13px;
  }
  .protocols-detail-table-wrapper .analytics-table th {
    font-size: 10px;
    padding: 6px 6px;
  }
  /* table-layout:auto stretches columns proportionally to fill 100% width,
     over-allocating to short content (Protokollnummer, Einträge) instead of
     to Titel/Aktion which actually need the room. Switch to fixed layout
     with explicit widths, same approach as #analyticsHoursPanel. */
  .protocols-detail-table-wrapper .analytics-table {
    table-layout: fixed;
  }
  .protocols-detail-table-wrapper th:nth-child(1),
  .protocols-detail-table-wrapper td:nth-child(1) {
    width: 22%;
  }
  .protocols-detail-table-wrapper th:nth-child(2),
  .protocols-detail-table-wrapper td:nth-child(2) {
    width: 30%;
  }
  .protocols-detail-table-wrapper th:nth-child(4),
  .protocols-detail-table-wrapper td:nth-child(4) {
    width: 14%;
  }
  .protocols-detail-table-wrapper th:nth-child(5),
  .protocols-detail-table-wrapper td:nth-child(5) {
    width: 34%;
  }
  /* Titel is free-text and often long/unbroken ("Baubesprechungsprotokoll")
     - without wrapping it alone forces the whole table wider than the
     screen, pushing Aktion off to the right. Header labels need the same
     treatment or they overlap the neighboring column at these fixed
     widths. Selector needs the extra .table-wrapper.analytics specificity
     to beat the base nowrap rule (.table-wrapper.analytics th/td), which
     ties otherwise and wins on source order. */
  .protocols-detail-table-wrapper.table-wrapper.analytics th:nth-child(1),
  .protocols-detail-table-wrapper.table-wrapper.analytics td:nth-child(1),
  .protocols-detail-table-wrapper.table-wrapper.analytics th:nth-child(2),
  .protocols-detail-table-wrapper.table-wrapper.analytics td:nth-child(2),
  .protocols-detail-table-wrapper.table-wrapper.analytics th:nth-child(4) {
    white-space: normal;
    word-break: break-word;
  }

  /* Protokoll-Bearbeiten-Fenster (#protocolModal): "Erledigte anzeigen" +
     "Neuer Punkt" don't fit on one line at phone width and were forcing
     the row (and with it #protocolModal's overflow-x:hidden form) to
     ~620px, clipping "Neuer Punkt" off-screen entirely. Let the row wrap
     instead of forcing width. */
  .protocol-entry-actions {
    flex-wrap: wrap;
  }
  /* The 7-column entries table (Pos./Anhänge/Text/Zuständig/Fällig
     am/Erledigt/Aktion) has no scroll container of its own, so it was
     also clipped by the form's overflow-x:hidden with no way to reach
     the missing columns. Give it its own horizontal scroller, same
     pattern as .protocols-detail-table-wrapper above. */
  .protocol-entries-group {
    overflow-x: auto;
  }
  .protocol-entries-table {
    font-size: 13px;
  }
}

.input-row.inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.protocol-entry-responsible {
  flex-wrap: wrap;
}

.protocol-entry-responsible-summary {
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.input-row.inline label {
  font-size: 11px;
  color: var(--muted);
}

.input-row.inline input {
  min-width: 220px;
}

.input-row.inline select {
  min-width: 220px;
  flex: 1 1 auto;
}
.billing-filter-row {
  gap: 12px;
}
.billing-summary-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.billing-gross-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.billing-gross-summary strong {
  color: var(--accent);
}
.billing-open-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.billing-open-summary strong {
  color: var(--accent);
}
.billing-draft-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.billing-draft-summary strong {
  color: var(--muted);
}
.billing-verrechnen-picker {
  position: relative;
  display: inline-flex;
}

.billing-verrechnen-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  max-width: 360px;
  max-height: 320px;
  overflow-y: auto;
  background: rgba(6, 10, 18, 0.98);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(2, 8, 23, 0.45);
  padding: 6px;
  z-index: 200;
}

.billing-verrechnen-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.billing-verrechnen-list li {
  margin: 0;
}

.billing-verrechnen-list button {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #e9eef8;
  font: inherit;
  cursor: pointer;
}

.billing-verrechnen-list button:hover,
.billing-verrechnen-list button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.billing-verrechnen-list .billing-verrechnen-empty {
  padding: 10px;
  color: var(--muted);
  font-size: 0.85rem;
}

body.theme-light .billing-verrechnen-panel {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.15);
}

body.theme-light .billing-verrechnen-list button {
  color: #111827;
}

body.theme-light .billing-verrechnen-list button:hover,
body.theme-light .billing-verrechnen-list button:focus-visible {
  background: rgba(15, 23, 42, 0.08);
}

.billing-unpaid-label span {
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
}
.billing-date-filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.billing-date-filters label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--muted);
}

.date-input-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.billing-date-input {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 4px 8px;
  padding-right: 28px;
  min-width: 110px;
  color: var(--text);
  font: inherit;
}
.billing-date-input::-webkit-datetime-edit {
  color: var(--text);
}
.billing-date-input::-webkit-date-and-time-value {
  color: var(--text);
}

.billing-date-input.billing-date-empty {
  color: #b7bec8;
  font-style: italic;
}
.billing-date-input.billing-date-empty::-webkit-datetime-edit {
  color: #b7bec8;
}
.billing-date-input.billing-date-empty::-webkit-date-and-time-value {
  color: #b7bec8;
}
.billing-date-input.billing-date-empty::-webkit-datetime-edit-text,
.billing-date-input.billing-date-empty::-webkit-datetime-edit-day-field,
.billing-date-input.billing-date-empty::-webkit-datetime-edit-month-field,
.billing-date-input.billing-date-empty::-webkit-datetime-edit-year-field {
  color: #b7bec8;
}

.billing-date-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.billing-date-clear:hover,
.billing-date-clear:focus-visible {
  color: var(--accent);
}

.billing-date-clear[hidden] {
  display: none;
}

.billing-filter-row input[type="text"] {
  min-width: 160px;
}

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

.project-form-grid .input-row label {
  font-size: 12px;
  color: var(--muted);
}

.project-form-grid .input-row input,
.project-form-grid .input-row textarea {
  font-size: 13px;
}

.budget-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.budget-section table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.55);
}

.budget-section thead th {
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.budget-section tbody td {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text);
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.budget-section tbody tr:last-child td {
  border-bottom: none;
}

.budget-section thead th:nth-child(3),
.budget-section tbody td:nth-child(3) {
  text-align: right;
}

.budget-section thead th:nth-child(5),
.budget-section tbody td:nth-child(5) {
  min-width: 150px;
}

.budget-section thead th:nth-child(6),
.budget-section tbody td:nth-child(6) {
  width: 44px;
  text-align: center;
}

.budget-section .budget-number-input,
.budget-section .budget-label-input,
.budget-section .budget-amount-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  padding: 4px 8px;
  font-size: 12px;
}

.budget-section .budget-amount-input {
  text-align: right;
}

.budget-section .budget-remove-cell .ghost {
  padding: 2px 6px;
  line-height: 1;
}

.budget-section .budget-billing-target {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 88px;
  gap: 8px;
}

.budget-section .budget-billing-month-select,
.budget-section .budget-billing-year-input,
.budget-section .budget-billing-mode-select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  padding: 4px 8px;
  font-size: 12px;
}

.budget-label {
  font-size: 12px;
  color: var(--muted);
}

.budget-list input {
  width: 100%;
  font-size: 12px;
}

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

.invoice-lines .budget-actions .ghost {
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  line-height: 1.2;
}

.budget-total {
  font-size: 12px;
  color: var(--muted);
}

.billing-totals {
  margin-left: auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.invoice-lines input {
  width: 100%;
  font-size: 11px;
  border: none;
  background: transparent;
  padding: 1px 3px;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  border-radius: 6px;
  height: 22px;
}

.invoice-lines input[type="number"]::-webkit-outer-spin-button,
.invoice-lines input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.invoice-lines th,
.invoice-lines td {
  padding: 1px 4px;
  vertical-align: middle;
  height: 22px;
  font-size: 11px;
}

.invoice-lines td.billing-actions {
  padding: 0 8px;
}

.invoice-lines td input {
  line-height: 1.2;
}

.invoice-lines td:not(:nth-child(2)) input {
  width: auto;
  min-width: 0;
}

.invoice-lines td:nth-child(2) textarea.billing-text {
  width: 100%;
}

.line-text-toolbar {
  margin: 4px 0 6px;
  flex-wrap: wrap;
}

.invoice-lines td.right .currency-input {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  gap: 4px;
}

.invoice-lines td.right .currency-input input {
  width: auto;
  min-width: 36px;
  text-align: right;
}

.invoice-lines .fixed-rate-value {
  display: inline-block;
  min-width: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.invoice-lines .fixed-rate-value.is-overridden {
  color: var(--danger);
  font-weight: 700;
}

.invoice-lines .qty-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.invoice-lines .qty-value.is-overridden {
  color: var(--danger);
  font-weight: 700;
}

.invoice-lines tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.04);
}

.invoice-lines tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02);
}

.invoice-lines .table-wrapper table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  table-layout: auto;
}

.invoice-lines th,
.invoice-lines td {
  white-space: nowrap;
}

.invoice-lines th:nth-child(2),
.invoice-lines td:nth-child(2) {
  white-space: normal;
  width: auto;
}

.invoice-lines th:not(:nth-child(2)),
.invoice-lines td:not(:nth-child(2)) {
  width: 1%;
}

.invoice-lines td:last-child {
  white-space: nowrap;
  text-align: right;
}

.invoice-lines th.center {
  text-align: center;
}

.invoice-lines th.right,
.invoice-lines td.right {
  text-align: right;
}

.row-link {
  cursor: pointer;
}

.row-link:hover {
  background: rgba(255, 255, 255, 0.04);
}

.table-link {
  background: transparent;
  border: none;
  color: var(--accent);
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

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

.receipt-number {
  display: inline-flex;
  width: auto;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.table-wrapper.receipts th:first-child,
.table-wrapper.receipts td:first-child {
  width: 1%;
  white-space: nowrap;
}

#customersShell table td,
#customersShell table th {
  white-space: nowrap;
}

.dialog .customers-table {
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

body.theme-light #articlesShell .articles-table {
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

body.theme-light #articlesShell .articles-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

body.theme-light #articlesShell .articles-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: #f3f5f8;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

body.theme-light #articlesShell .articles-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}

body.theme-light #articlesShell .articles-table tbody tr:hover {
  background: var(--row-hover-bg);
}

body.theme-light #articlesShell .templates-table {
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

body.theme-light #articlesShell .templates-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

body.theme-light #articlesShell .templates-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: #f3f5f8;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

body.theme-light #articlesShell .templates-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}

body.theme-light #articlesShell .templates-table tbody tr:hover {
  background: var(--row-hover-bg);
}

.dialog .customers-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

.dialog .customers-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: #f3f5f8;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.dialog .customers-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}

.dialog .customers-table tbody tr:hover {
  background: var(--row-hover-bg);
}

.dialog .customers-table .table-link {
  color: var(--accent);
  font-weight: 600;
}

.customer-docs-table {
  margin-top: 12px;
}

.project-view-dialog .table-wrapper.trades-table {
  border-radius: 10px;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: none;
  background: rgba(15, 23, 42, 0.55);
  width: 100%;
}

.project-view-dialog .table-wrapper.trades-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
}

.project-view-dialog .table-wrapper.trades-table thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  white-space: nowrap;
}

.project-view-dialog .table-wrapper.trades-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}

.project-view-dialog .table-wrapper.trades-table tbody td span {
  display: inline-block;
}

.project-view-dialog .table-wrapper.trades-table tbody tr:hover {
  background: #1e293b;
}

.project-view-dialog .table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
}

.table-wrapper.projects-table,
.table-wrapper.customers-table,
.table-wrapper.templates-table,
.table-wrapper.regie-table {
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--panel);
}

.table-wrapper.projects-table table,
.table-wrapper.customers-table table,
.table-wrapper.templates-table table,
.table-wrapper.regie-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
  table-layout: auto;
}

.table-wrapper.projects-table thead th,
.table-wrapper.customers-table thead th,
.table-wrapper.templates-table thead th,
.table-wrapper.regie-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-solid);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.table-wrapper.projects-table tbody td,
.table-wrapper.customers-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}

.table-wrapper.projects-table tbody tr:hover,
.table-wrapper.customers-table tbody tr:hover {
  background: var(--row-hover-bg);
}

.table-wrapper.projects-table th.project-notes-toggle-col,
.table-wrapper.projects-table td.project-notes-toggle-cell,
.table-wrapper th.project-notes-toggle-col,
.table-wrapper td.project-notes-toggle-cell {
  width: 40px;
  min-width: 40px;
  text-align: center;
  color: var(--text);
  text-transform: none;
}

.table-wrapper.projects-table .project-notes-toggle-btn {
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: 18px;
  line-height: 1;
  min-width: 0;
  color: var(--text);
  background: transparent;
  box-shadow: none;
}

.table-wrapper.projects-table .project-notes-toggle-btn span {
  display: inline-block;
  width: 16px;
  text-align: center;
  color: var(--text);
}

.table-wrapper.projects-table table {
  /* Inhalts-basierte Spaltenbreiten statt starrer Prozentanteile - siehe
     ausführlichere Begründung bei .table-wrapper.billing-table table. */
  table-layout: auto;
}

#projectsShell .table-wrapper.projects-table th,
#projectsShell .table-wrapper.projects-table td {
  white-space: nowrap;
}

#projectsShell .table-wrapper.projects-table th:nth-child(1),
#projectsShell .table-wrapper.projects-table td:nth-child(1) {
  width: 8%;
}

.table-wrapper.projects-table th:nth-child(2),
.table-wrapper.projects-table td:nth-child(2) {
  width: 9%;
}

#projectsShell .table-wrapper.projects-table td:nth-child(2) {
  white-space: nowrap;
}

.table-wrapper.projects-table th:nth-child(3),
.table-wrapper.projects-table td:nth-child(3) {
  width: 22%;
}

.table-wrapper.projects-table th:nth-child(4),
.table-wrapper.projects-table td:nth-child(4) {
  width: 18%;
}

.table-wrapper.projects-table th:nth-child(5),
.table-wrapper.projects-table td:nth-child(5) {
  width: 12%;
}

/* Projekt/Kunde/Verantwortlich dürfen mit dem Inhalt wachsen (table-layout:
   auto), aber nicht unbegrenzt - ab hier abschneiden mit "...", siehe
   ausführlichere Begründung bei .table-wrapper.billing-table td.billing-col-project. */
.table-wrapper.projects-table td:nth-child(3),
.table-wrapper.projects-table td:nth-child(4),
.table-wrapper.projects-table td:nth-child(5) {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-wrapper.projects-table th:nth-child(6),
.table-wrapper.projects-table td:nth-child(6) {
  width: 10%;
}

#projectsShell .table-wrapper.projects-table td:nth-child(6) {
  white-space: nowrap;
}

.table-wrapper.projects-table th:nth-child(7),
.table-wrapper.projects-table td:nth-child(7) {
  width: 11%;
}

.table-wrapper.projects-table th:nth-child(8),
.table-wrapper.projects-table td:nth-child(8) {
  width: 10%;
}

#projectsShell .table-wrapper.projects-table td:nth-child(8) {
  white-space: nowrap;
}

/* Projektübersicht (#projectsShell): erste Spalte ist das Projektbild, alle
   übrigen Spalten rutschen dadurch um eins nach rechts. Die allgemeinen
   Regeln oben gelten weiter unverändert für die AVA-Übersichten. */
#projectsShell .table-wrapper.projects-table th:nth-child(1),
#projectsShell .table-wrapper.projects-table td:nth-child(1) {
  width: 44px;
  padding-right: 0;
}

#projectsShell .table-wrapper.projects-table th:nth-child(2),
#projectsShell .table-wrapper.projects-table td:nth-child(2) {
  width: 8%;
}

#projectsShell .table-wrapper.projects-table th:nth-child(3),
#projectsShell .table-wrapper.projects-table td:nth-child(3) {
  width: 9%;
  max-width: none;
}

#projectsShell .table-wrapper.projects-table th:nth-child(4),
#projectsShell .table-wrapper.projects-table td:nth-child(4) {
  width: 22%;
}

#projectsShell .table-wrapper.projects-table th:nth-child(5),
#projectsShell .table-wrapper.projects-table td:nth-child(5) {
  width: 18%;
}

#projectsShell .table-wrapper.projects-table th:nth-child(6),
#projectsShell .table-wrapper.projects-table td:nth-child(6) {
  width: 12%;
}

#projectsShell .table-wrapper.projects-table td:nth-child(4),
#projectsShell .table-wrapper.projects-table td:nth-child(5),
#projectsShell .table-wrapper.projects-table td:nth-child(6) {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#projectsShell .table-wrapper.projects-table th:nth-child(7),
#projectsShell .table-wrapper.projects-table td:nth-child(7) {
  width: 10%;
}

#projectsShell .table-wrapper.projects-table th:nth-child(8),
#projectsShell .table-wrapper.projects-table td:nth-child(8) {
  width: 11%;
}

#projectsShell .table-wrapper.projects-table th:nth-child(9),
#projectsShell .table-wrapper.projects-table td:nth-child(9) {
  width: 10%;
}

.project-list-thumb {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--panel-solid);
  cursor: pointer;
}

.project-list-thumb-btn {
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  min-width: 0;
  cursor: pointer;
}

.project-list-thumb.is-empty {
  cursor: default;
  opacity: 0.35;
  border-style: dashed;
}

/* Projektbild im Projektfenster */
.project-image-editor {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.project-image-preview {
  width: 220px;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: var(--panel-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.project-image-preview.has-image {
  border-style: solid;
}

.project-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-image-empty {
  color: var(--muted);
  font-size: 13px;
}

.project-image-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 200px;
  min-width: 0;
}

.project-image-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.project-image-actions .tagline {
  margin: 0;
}

.project-notes-inline-row td {
  padding: 0;
  border-bottom: none;
}

.project-notes-inline {
  padding: 8px 12px 12px;
  background: var(--panel-solid);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid rgba(28, 41, 72, 0.4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-notes-inline .note,
.note.project-note-item {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.project-notes-inline .home-note-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-notes-inline .home-note-form textarea {
  min-height: 72px;
  resize: vertical;
  font: inherit;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--text);
}

.project-notes-inline .home-note-form .note-actions button {
  border-radius: 10px !important;
  min-height: 36px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.4) !important;
  background: rgba(15, 23, 42, 0.72) !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
}

.project-notes-inline .home-note-form .note-actions button:hover {
  background: #1e293b !important;
  border-color: rgba(94, 234, 212, 0.55) !important;
  color: #f8fafc !important;
}

body.theme-light .project-notes-inline .home-note-form .note-actions button.ghost {
  background: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, 0.4) !important;
  color: #1f2937 !important;
}

body.theme-light .project-notes-inline .home-note-form .note-actions button.ghost:hover {
  background: #f3f5f8 !important;
  border-color: rgba(31, 191, 127, 0.35) !important;
  color: #111827 !important;
}

body.theme-light .project-notes-inline .home-note-form .note-actions button.primary {
  background: #1fbf7f !important;
  border: 1px solid #19a46d !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(31, 191, 127, 0.18) !important;
}

body.theme-light .project-notes-inline .home-note-form .note-actions button.primary:hover {
  background: #19a46d !important;
  border-color: #148657 !important;
  color: #ffffff !important;
}

.project-notes-inline .note .note-header,
.note.project-note-item .note-header {
  flex: 0 0 auto;
}

.project-notes-inline .note .note-date,
.project-notes-inline .note .note-text,
.note.project-note-item .note-date,
.note.project-note-item .note-text {
  font-size: 12px;
  line-height: 1.4;
}

.project-notes-inline .note .note-text,
.note.project-note-item .note-text {
  margin: 0;
}

.customers-table .table-link {
  color: var(--accent);
  font-weight: 600;
}

.table-wrapper.billing-table {
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--panel);
}

.table-wrapper.billing-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
}

.table-wrapper.billing-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-solid);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.table-wrapper.billing-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}

.table-wrapper.billing-table tbody tr:hover {
  background: var(--row-hover-bg);
}

.table-wrapper.billing-table th.billing-preview-col,
.table-wrapper.billing-table td.billing-preview-cell {
  width: 48px;
  text-align: center;
}

.table-wrapper.billing-table .billing-preview-btn {
  padding: 4px 6px;
  border-radius: 10px;
  font-size: 10px;
  min-width: 0;
}

.table-wrapper.billing-table th.billing-action-col,
.table-wrapper.billing-table td.billing-row-actions {
  width: 40px;
  text-align: center;
}

.table-wrapper.billing-table .billing-row-menu-btn {
  padding: 4px 6px;
  border-radius: 10px;
  font-size: 12px;
  min-width: 0;
}

.table-wrapper.billing-table th,
.table-wrapper.billing-table td {
  white-space: nowrap;
}

.table-wrapper.billing-table th.money,
.table-wrapper.billing-table td.money {
  text-align: right;
}

.table-wrapper.billing-table th.billing-col-project,
.table-wrapper.billing-table td.billing-col-project,
.table-wrapper.billing-table th.billing-col-customer,
.table-wrapper.billing-table td.billing-col-customer {
  line-height: 1.4;
  padding-right: 2px;
  /* Spalte darf mit dem Inhalt wachsen (table-layout: auto), aber nicht
     unbegrenzt - ein einzelner sehr langer Name soll nicht die Spalte für
     alle Zeilen aufblähen. Ab hier abschneiden mit "..."; erst wenn selbst
     die gekappten Spalten insgesamt nicht mehr in den verfügbaren Platz
     passen, übernimmt .table-wrapper { overflow-x: auto } das Scrollen. */
  max-width: 260px;
}

.table-wrapper.billing-table td.billing-col-project span,
.table-wrapper.billing-table td.billing-col-customer span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-wrapper.billing-table table {
  /* Inhalts-basierte Spaltenbreiten statt starrer Prozentanteile: die
     Tabelle wird nur so breit wie tatsächlich nötig und scrollt erst, wenn
     der verfügbare Platz nicht mehr reicht - unabhängig von Fenster-/
     Sidebar-Breite. Die width:%-Angaben unten bleiben als Richtwerte
     erhalten, sind mit auto aber keine harte Grenze mehr, an der Inhalte
     umbrechen müssten. */
  table-layout: auto;
}

.table-wrapper.billing-table th:nth-child(1),
.table-wrapper.billing-table td:nth-child(1) {
  width: 3%;
}

.table-wrapper.billing-table th:nth-child(2),
.table-wrapper.billing-table td:nth-child(2) {
  width: 9%;
}

.table-wrapper.billing-table th:nth-child(3),
.table-wrapper.billing-table td:nth-child(3) {
  width: 3%;
}

.table-wrapper.billing-table th:nth-child(4),
.table-wrapper.billing-table td:nth-child(4) {
  width: 3%;
}

.table-wrapper.billing-table th:nth-child(5),
.table-wrapper.billing-table td:nth-child(5) {
  width: 2%;
}

.table-wrapper.billing-table th:nth-child(6),
.table-wrapper.billing-table td:nth-child(6) {
  width: 7%;
}

.table-wrapper.billing-table th:nth-child(7),
.table-wrapper.billing-table td:nth-child(7),
.table-wrapper.billing-table th:nth-child(8),
.table-wrapper.billing-table td:nth-child(8) {
  width: 13%;
}

.table-wrapper.billing-table th:nth-child(9),
.table-wrapper.billing-table td:nth-child(9),
.table-wrapper.billing-table th:nth-child(10),
.table-wrapper.billing-table td:nth-child(10),
.table-wrapper.billing-table th:nth-child(11),
.table-wrapper.billing-table td:nth-child(11),
.table-wrapper.billing-table th:nth-child(12),
.table-wrapper.billing-table td:nth-child(12) {
  width: 8%;
}

.table-wrapper.billing-table th:nth-child(13),
.table-wrapper.billing-table td:nth-child(13) {
  width: 7%;
}

.table-wrapper.billing-table th:nth-child(14),
.table-wrapper.billing-table td:nth-child(14) {
  width: 8%;
}

.table-wrapper.billing-table th.money,
.table-wrapper.billing-table td.money,
.table-wrapper.billing-table th:nth-child(6),
.table-wrapper.billing-table td:nth-child(6),
.table-wrapper.billing-table th:nth-child(13),
.table-wrapper.billing-table td:nth-child(13) {
  padding-left: 8px;
  padding-right: 8px;
}

.table-wrapper.billing-table th.money,
.table-wrapper.billing-table td.money {
  min-width: 78px;
}

.table-wrapper.billing-table th:nth-child(6),
.table-wrapper.billing-table td:nth-child(6) {
  min-width: 64px;
}

.table-wrapper.billing-table th:nth-child(13),
.table-wrapper.billing-table td:nth-child(13) {
  min-width: 68px;
}

.table-wrapper.billing-table th:nth-child(14),
.table-wrapper.billing-table td:nth-child(14) {
  min-width: 78px;
}

.table-wrapper.billing-table td.billing-status-cell {
  white-space: nowrap;
  vertical-align: middle;
}
.table-wrapper.billing-table td.billing-status-cell .billing-status-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.table-wrapper.billing-table td.billing-status-cell .badge {
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 2px 6px;
}
.table-wrapper.billing-table td.billing-status-cell .checkbox {
  margin: 0;
}

.reminder-toggle-cell {
  width: 48px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.reminder-expand {
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.reminder-expand[aria-expanded="true"] {
  opacity: 0.8;
}

.billing-reminder-count {
  width: 48px;
  font-weight: 600;
  text-align: center;
}

.invoice-reminder-row td {
  border: none;
  padding: 0;
  background: transparent;
}

.invoice-reminder-cell {
  padding: 0;
  border-top: none;
}

.inline-reminders-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.invoice-reminder-inline {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(120px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.inline-reminder-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inline-stage {
  font-weight: 700;
}

.inline-subject {
  font-size: 12px;
  color: var(--muted);
}

.inline-reminder-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.inline-amount {
  font-weight: 700;
  color: var(--text);
}

.inline-reminder-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.inline-reminder-btn {
  border-radius: 6px;
}

.inline-reminder-btn svg {
  width: 14px;
  height: 14px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.invoice-reminder-empty {
  padding: 12px 14px;
  color: var(--muted);
  font-style: italic;
}

.table-wrapper.receipts-table {
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--panel);
}

.table-wrapper.receipts-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
}

.table-wrapper.receipts-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-solid);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.table-wrapper.receipts-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}

.table-wrapper.receipts-table tbody tr:hover {
  background: var(--row-hover-bg);
}

.table-wrapper.articles-table {
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--panel);
}

.table-wrapper.articles-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
}

.table-wrapper.articles-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-solid);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.table-wrapper.articles-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}

.table-wrapper.articles-table tbody tr:hover {
  background: var(--row-hover-bg);
}

.table-wrapper.offers-table {
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--panel);
}

.table-wrapper.offers-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
}

.table-wrapper.offers-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-solid);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.table-wrapper.offers-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}

.table-wrapper.offers-table tbody tr:hover {
  background: var(--row-hover-bg);
}

.table-wrapper.offers-table th.offer-action-col,
.table-wrapper.offers-table td.offer-row-actions {
  width: 40px;
  text-align: center;
}

.table-wrapper.offers-table th.offer-preview-col,
.table-wrapper.offers-table td.offer-preview-cell {
  width: 48px;
  text-align: center;
}

.table-wrapper.offers-table .offer-preview-btn {
  padding: 4px 6px;
  border-radius: 10px;
  font-size: 10px;
  min-width: 0;
}

.table-wrapper.offers-table .offer-row-menu-btn {
  padding: 4px 6px;
  border-radius: 10px;
  font-size: 12px;
  min-width: 0;
}

.table-wrapper.offers-table table {
  /* Inhalts-basierte Spaltenbreiten statt starrer Prozentanteile - siehe
     ausführlichere Begründung bei .table-wrapper.billing-table table. */
  table-layout: auto;
}

#offersShell .table-wrapper.offers-table th,
#offersShell .table-wrapper.offers-table td {
  white-space: nowrap;
}

.table-wrapper.offers-table th:nth-child(1),
.table-wrapper.offers-table td:nth-child(1) {
  width: 11%;
}

.table-wrapper.offers-table th:nth-child(4),
.table-wrapper.offers-table td:nth-child(4) {
  width: 9%;
}

#offersShell .table-wrapper.offers-table td:nth-child(4) {
  white-space: nowrap;
}

.table-wrapper.offers-table th:nth-child(5),
.table-wrapper.offers-table td:nth-child(5) {
  width: 19%;
}

.table-wrapper.offers-table th:nth-child(6),
.table-wrapper.offers-table td:nth-child(6) {
  width: 14%;
}

.table-wrapper.offers-table th:nth-child(7),
.table-wrapper.offers-table td:nth-child(7) {
  width: 14%;
}

/* Betreff/Projekt/Kunde dürfen mit dem Inhalt wachsen (table-layout: auto),
   aber nicht unbegrenzt - ab hier abschneiden mit "...", siehe ausführlichere
   Begründung bei .table-wrapper.billing-table td.billing-col-project. */
.table-wrapper.offers-table td:nth-child(5),
.table-wrapper.offers-table td:nth-child(6),
.table-wrapper.offers-table td:nth-child(7) {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-wrapper.offers-table th:nth-child(8),
.table-wrapper.offers-table td:nth-child(8) {
  width: 10%;
}

.table-wrapper.offers-table th:nth-child(9),
.table-wrapper.offers-table td:nth-child(9) {
  width: 7%;
}

#offersShell .table-wrapper.offers-table td:nth-child(9) {
  white-space: nowrap;
}

.table-wrapper.offers-table th:nth-child(10),
.table-wrapper.offers-table td:nth-child(10) {
  width: 10%;
}

#offersShell .table-wrapper.offers-table td:nth-child(10) {
  white-space: nowrap;
}

body.theme-light #receiptsShell .receipts-table {
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

body.theme-light #tradesShell .customers-table {
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

body.theme-light #tradesShell .customers-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
}

body.theme-light #tradesShell .customers-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: #f3f5f8;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

body.theme-light #tradesShell .customers-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}

body.theme-light #tradesShell .customers-table tbody tr:hover {
  background: var(--row-hover-bg);
}

body.theme-light #tradesShell .customers-table .table-link {
  color: var(--accent);
  font-weight: 600;
}

body.theme-light #receiptsShell .receipts-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

body.theme-light #receiptsShell .receipts-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: #f3f5f8;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

body.theme-light #receiptsShell .receipts-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}

body.theme-light #receiptsShell .receipts-table tbody tr:hover {
  background: var(--row-hover-bg);
}

body.theme-light #receiptsShell .receipts-table tbody tr.receipt-billed {
  background: rgba(142, 240, 193, 0.18);
}

body.theme-light #billingShell .billing-table {
  border-radius: 14px;
  /* overflow: hidden (Kurzschreibweise) setzt auch overflow-x auf hidden und
     blockiert damit das horizontale Scrollen der Tabelle komplett - nur
     overflow-y kappen, X bleibt scrollbar wie in der Basis-Regel
     (.table-wrapper.billing-table). */
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

body.theme-light #billingShell .billing-table table {
  width: 100%;
  border-collapse: collapse;
}

body.theme-light #billingShell .billing-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: #f3f5f8;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}

body.theme-light #billingShell .billing-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}

body.theme-light #billingShell .billing-table tbody tr:hover {
  background: var(--row-hover-bg);
}

body.theme-light #billingShell .billing-table th.billing-preview-col,
body.theme-light #billingShell .billing-table td.billing-preview-cell {
  width: 48px;
  text-align: center;
}

body.theme-light #billingShell .billing-table .billing-preview-btn {
  padding: 4px 6px;
  border-radius: 10px;
  font-size: 10px;
  min-width: 0;
}

body.theme-light #billingShell .billing-table th.billing-action-col,
body.theme-light #billingShell .billing-table td.billing-row-actions {
  width: 40px;
  text-align: center;
}

body.theme-light #billingShell .billing-table .billing-row-menu-btn {
  padding: 4px 6px;
  border-radius: 10px;
  font-size: 12px;
  min-width: 0;
}

body.theme-light #billingShell .billing-table td.billing-reminder-count {
  font-weight: 600;
  text-align: center;
}

body.theme-light #billingShell .billing-table.reminders-overview {
  margin-top: 18px;
}

body.theme-light #billingShell .billing-table.reminders-overview .table-header {
  padding: 0 14px 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

body.theme-light #billingShell .billing-table.reminders-overview table {
  border-top: 1px solid var(--border);
}

body.theme-light #billingShell .billing-table th.money,
body.theme-light #billingShell .billing-table td.money {
  white-space: nowrap;
}

.payments-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.payments-actions .payments-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 12px;
  font-size: 14px;
  min-width: 36px;
}

.payments-actions .payments-action-button .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
}

.payments-actions .payments-action-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.payments-actions .payments-action-button.reminder-action-delete,
body.theme-light .payments-actions .payments-action-button.reminder-action-delete,
.payments-actions .payments-action-button.reminder-action-delete:hover,
body.theme-light .payments-actions .payments-action-button.reminder-action-delete:hover {
  color: #ef4444 !important;
}

body.theme-light #billingShell .billing-table .reminder-subject {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

body.theme-light #offersShell .offers-table {
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

body.theme-light #offersShell .offers-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

body.theme-light #offersShell .offers-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: #f3f5f8;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

body.theme-light #offersShell .offers-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}

body.theme-light #offersShell .offers-table tbody tr:hover {
  background: var(--row-hover-bg);
}

body.theme-light #offersShell .offers-table th.offer-action-col,
body.theme-light #offersShell .offers-table td.offer-row-actions {
  width: 40px;
  text-align: center;
}

body.theme-light #offersShell .offers-table th.offer-preview-col,
body.theme-light #offersShell .offers-table td.offer-preview-cell {
  width: 48px;
  text-align: center;
}

body.theme-light #offersShell .offers-table .offer-preview-btn {
  padding: 4px 6px;
  border-radius: 10px;
  font-size: 10px;
  min-width: 0;
}

body.theme-light #offersShell .offers-table .offer-row-menu-btn {
  padding: 4px 6px;
  border-radius: 10px;
  font-size: 12px;
  min-width: 0;
}

#offersShell table td,
#offersShell table th {
  white-space: nowrap;
}

#projectsShell table td,
#projectsShell table th {
  white-space: nowrap;
}

#projectsShell table th.proj-number-col,
#projectsShell table td:first-child {
  width: 1%;
}

#projectsShell .project-toolbar .project-status {
  margin-left: auto;
}

#billingShell .project-toolbar .board-toggle {
  margin-left: auto;
}

#analyticsShell .hero {
  display: flex;
  position: sticky;
  top: 56px;
  z-index: 5;
  background: var(--panel-solid);
  border: none;
  box-shadow: none;
}

#customerFilter,
#receiptFilter,
#projectFilter,
#billingFilter,
#offerFilter,
#boardFilter,
#analyticsProjectFilter,
#analyticsActivityFilter,
#protocolProjectInput {
  border-radius: 999px;
  border: 1px solid rgba(142, 240, 193, 0.35);
  background: rgba(142, 240, 193, 0.08);
  padding: 0 12px;
  min-width: 110px;
  height: 24px;
  line-height: 24px;
}

#analyticsShell .filter-controls select,
#analyticsShell .filter-controls input[type="text"] {
  border-radius: 999px;
  border: 1px solid rgba(142, 240, 193, 0.35);
  background: rgba(142, 240, 193, 0.08);
  padding: 0 12px;
  min-width: 0;
  width: 140px;
  height: 24px;
  line-height: 24px;
  color: var(--text);
  appearance: none;
}

#analyticsShell .filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  background: var(--panel-solid);
  border-radius: 12px;
  padding: 16px;
  position: sticky;
  top: 0;
  z-index: 5;
  border: none;
  box-shadow: none;
}

#analyticsShell .filter-controls .settings-tabs.analytics-tabs {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  background: transparent;
  border-radius: 12px;
  border: none;
  padding: 0;
}

#analyticsShell .filter-controls label.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(142, 240, 193, 0.35);
  background: rgba(142, 240, 193, 0.08);
  font-size: 11px;
  color: var(--text);
}

#analyticsProjectsSection .filter-controls {
  flex-direction: column;
  align-items: flex-start;
}

#analyticsShell .filter-controls select option {
  color: #111;
  background: #fff;
}

#projectStatusFilter {
  border-radius: 999px;
  border: 1px solid rgba(142, 240, 193, 0.35);
  background: rgba(142, 240, 193, 0.08);
  padding: 0 28px 0 12px;
  min-width: 220px;
  height: 24px;
  line-height: 24px;
  appearance: none;
  color: var(--text);
}

#projectStatusFilter option {
  color: #111;
  background: #fff;
}

#projectResponsibleFilter {
  border-radius: 999px;
  border: 1px solid rgba(142, 240, 193, 0.35);
  background: rgba(142, 240, 193, 0.08);
  padding: 0 28px 0 12px;
  min-width: 220px;
  height: 24px;
  line-height: 24px;
  appearance: none;
  color: var(--text);
}

#projectResponsibleFilter option {
  color: #111;
  background: #fff;
}

#customerFilter:focus,
#receiptFilter:focus,
#projectFilter:focus,
#billingFilter:focus,
#offerFilter:focus,
#boardFilter:focus,
#analyticsProjectFilter:focus,
#analyticsActivityFilter:focus,
#protocolProjectInput:focus,
#projectStatusFilter:focus {
  border-color: rgba(142, 240, 193, 0.65);
  box-shadow: 0 0 0 2px rgba(142, 240, 193, 0.2);
}

#appShell .hero-actions .board-toggle {
  margin-left: auto;
}

#appShell .hero-actions {
  margin-top: 0;
  align-items: center;
}

.board-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(142, 240, 193, 0.35);
  background: rgba(142, 240, 193, 0.08);
  color: var(--text);
  font-size: 12px;
}

.board-toggle input {
  margin: 0;
  accent-color: var(--accent);
}

.input-row.inline {
  position: relative;
  align-items: center;
}

.input-row.inline.search-field {
  gap: 0;
  /* Bezugsrahmen für .search-icon (position: absolute) - ohne das zentriert
     sich das Icon am nächsten POSITIONIERTEN Vorfahren (z.B. .hero mit
     position: sticky) statt an diesem Suchfeld selbst. */
  position: relative;
}

.input-row.inline.search-field input[type="text"],
.input-row.inline.search-field input[type="search"] {
  padding-left: 40px !important;
  padding-right: 12px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  z-index: 1;
}

.search-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.table-search-icon,
.offer-preview-btn svg,
.billing-preview-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Schlichtes Drucken-Icon statt Emoji+Text - gleiche Linien-Optik wie die
   Sidebar-Icons (.nav-icon svg) und die übrigen Icon-Buttons oben, überall im
   Programm verwendet wo ein Drucken/PDF-Button sitzt (main.js PRINT_ICON_SVG,
   der openBillingListPrint-Button in index.html, sowie jeder
   data-print-preview-Button in den Vorschau-Dialogen - die Kostenanalyse hat
   seit der "Ausgabe ▾"-Dropdown-Umstellung keinen eigenen Icon-Button mehr,
   nur noch den Drucken-Button im Vorschau-Dialog selbst). */
.print-preview-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.invoice-lines td,
.invoice-lines th,
.invoice-lines .line-total {
  color: var(--text);
}

.invoice-lines th:nth-child(1),
.invoice-lines td:nth-child(1) {
  width: 60px;
  min-width: 60px;
}

.invoice-lines th:nth-child(2),
.invoice-lines td:nth-child(2) {
  width: 28%;
  min-width: 240px;
}

.invoice-lines th:nth-child(3),
.invoice-lines td:nth-child(3) {
  width: auto;
  min-width: 72px;
}

.invoice-lines th:nth-child(4),
.invoice-lines td:nth-child(4) {
  width: 130px;
}

.invoice-lines th:nth-child(5),
.invoice-lines td:nth-child(5) {
  width: 72px;
  min-width: 72px;
}

.invoice-lines th:nth-child(6),
.invoice-lines td:nth-child(6) {
  width: auto;
  min-width: 90px;
}

#offerModal .invoice-lines th:nth-child(3),
#offerModal .invoice-lines td:nth-child(3) {
  width: 56px;
  min-width: 56px;
}

#offerModal .invoice-lines th:nth-child(4),
#offerModal .invoice-lines td:nth-child(4) {
  width: 44px;
  min-width: 44px;
}

#offerModal .invoice-lines th:nth-child(5) {
  text-align: center;
}

#offerModal .invoice-lines table {
  table-layout: fixed;
}

#offerModal .invoice-lines th:nth-child(1),
#offerModal .invoice-lines td:nth-child(1) {
  width: 52px;
  min-width: 52px;
}

#offerModal .invoice-lines th:nth-child(2),
#offerModal .invoice-lines td:nth-child(2) {
  width: auto;
  /* min-width:0 ließ diese Spalte bei table-layout:fixed schutzlos - wenn die
     ANDEREN (fest breiten) Spalten zusammen schon viel Platz brauchen (am
     Handy oft mehr als die ganze Bildschirmbreite), wurde die Leistungs-
     Spalte auf quasi 0 gequetscht und der Text brach dadurch Zeichen für
     Zeichen um (siehe Screenshot vom Nutzer - selbe Ursache wie zuvor bei
     #billingModal). .table-wrapper hat bereits overflow-x:auto - reicht die
     Breite nicht mehr, scrollt die Tabelle jetzt stattdessen horizontal,
     statt die Leistungsspalte unlesbar zu quetschen. */
  min-width: 160px;
}

#offerModal .invoice-lines th:nth-child(5),
#offerModal .invoice-lines td:nth-child(5) {
  width: 96px;
  min-width: 96px;
}

#offerModal .invoice-lines th:nth-child(6),
#offerModal .invoice-lines td:nth-child(6) {
  width: 132px;
  min-width: 132px;
}

#offerModal .invoice-lines td:nth-child(5) input {
  min-width: 60px;
}

#offerModal .invoice-lines td:nth-child(1) input {
  min-width: 32px;
}

.invoice-lines th:nth-child(7),
.invoice-lines td:nth-child(7) {
  width: 140px;
}

#billingModal .invoice-lines table {
  table-layout: fixed;
}

#billingModal .invoice-lines th:nth-child(1),
#billingModal .invoice-lines td:nth-child(1) {
  width: var(--billing-col-1, 52px);
  min-width: var(--billing-col-1, 52px);
}

#billingModal .invoice-lines th:nth-child(2),
#billingModal .invoice-lines td:nth-child(2) {
  width: auto;
  /* min-width:0 ließ diese Spalte bei table-layout:fixed schutzlos - wenn die
     ANDEREN (fest per --billing-col-N breiten) Spalten zusammen viel Platz
     brauchen (z.B. nach Übernahme vom Angebot mit langen Positionsnummern
     oder großen Beträgen), wurde die Leistungs-Spalte auf quasi 0 gequetscht
     und der Text brach dadurch Zeichen für Zeichen um (siehe Screenshot vom
     Nutzer). .table-wrapper hat bereits overflow-x:auto - reicht die Breite
     nicht mehr, scrollt die Tabelle jetzt stattdessen horizontal, statt die
     Leistungsspalte unlesbar zu quetschen. */
  min-width: 160px;
}

#billingModal .invoice-lines th:nth-child(3),
#billingModal .invoice-lines td:nth-child(3) {
  width: var(--billing-col-3, 52px);
  min-width: var(--billing-col-3, 52px);
}

#billingModal .invoice-lines th:nth-child(4),
#billingModal .invoice-lines td:nth-child(4) {
  width: var(--billing-col-4, 52px);
  min-width: var(--billing-col-4, 52px);
}

#billingModal .invoice-lines th:nth-child(5),
#billingModal .invoice-lines td:nth-child(5) {
  width: var(--billing-col-5, 64px);
  min-width: var(--billing-col-5, 64px);
}

#billingModal .invoice-lines th:nth-child(6),
#billingModal .invoice-lines td:nth-child(6) {
  width: var(--billing-col-6, 64px);
  min-width: var(--billing-col-6, 64px);
}

#billingModal .invoice-lines th:nth-child(7),
#billingModal .invoice-lines td:nth-child(7) {
  width: var(--billing-col-7, 90px);
  min-width: var(--billing-col-7, 90px);
}

#billingModal .invoice-lines th:nth-child(8),
#billingModal .invoice-lines td:nth-child(8) {
  width: var(--billing-col-8, 96px);
  min-width: var(--billing-col-8, 96px);
}

#billingModal .invoice-lines th:nth-child(9),
#billingModal .invoice-lines td:nth-child(9) {
  width: var(--billing-col-9, 110px);
  min-width: var(--billing-col-9, 110px);
}

@media (max-width: 960px) {
  #billingModal .invoice-lines table {
    table-layout: auto;
  }

  #billingModal .invoice-lines th:nth-child(1),
  #billingModal .invoice-lines td:nth-child(1),
  #billingModal .invoice-lines th:nth-child(2),
  #billingModal .invoice-lines td:nth-child(2),
  #billingModal .invoice-lines th:nth-child(3),
  #billingModal .invoice-lines td:nth-child(3),
  #billingModal .invoice-lines th:nth-child(4),
  #billingModal .invoice-lines td:nth-child(4),
  #billingModal .invoice-lines th:nth-child(5),
  #billingModal .invoice-lines td:nth-child(5),
  #billingModal .invoice-lines th:nth-child(6),
  #billingModal .invoice-lines td:nth-child(6),
  #billingModal .invoice-lines th:nth-child(7),
  #billingModal .invoice-lines td:nth-child(7),
  #billingModal .invoice-lines th:nth-child(8),
  #billingModal .invoice-lines td:nth-child(8),
  #billingModal .invoice-lines th:nth-child(9),
  #billingModal .invoice-lines td:nth-child(9) {
    width: auto;
    min-width: 0;
  }
}

/* Pos. und EH haben nie mehr als 3 Zeichen - schmal halten, damit die
   Leistungsspalte den Platz bekommt (Angebot + Rechnung) */
:is(#offerModal, #billingModal) .invoice-lines th:nth-child(1),
:is(#offerModal, #billingModal) .invoice-lines td:nth-child(1),
:is(#offerModal, #billingModal) .invoice-lines th:nth-child(4),
:is(#offerModal, #billingModal) .invoice-lines td:nth-child(4) {
  width: 18px;
  min-width: 18px;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  overflow: visible;
}

:is(#offerModal, #billingModal) .invoice-lines th:nth-child(1),
:is(#offerModal, #billingModal) .invoice-lines th:nth-child(4) {
  font-size: 10px;
  letter-spacing: 0;
}

:is(#offerModal, #billingModal) .invoice-lines td:nth-child(1) input,
:is(#offerModal, #billingModal) .invoice-lines td:nth-child(4) input {
  min-width: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 10px !important;
  letter-spacing: 0;
  text-align: center;
}

#offerModal .invoice-lines th:nth-child(7),
#offerModal .invoice-lines td:nth-child(7) {
  width: 24px;
  text-align: center;
}

@media (max-width: 960px) {
  #offerModal .invoice-lines table {
    table-layout: auto;
  }

  #offerModal .invoice-lines th:nth-child(1),
  #offerModal .invoice-lines td:nth-child(1),
  #offerModal .invoice-lines th:nth-child(2),
  #offerModal .invoice-lines td:nth-child(2),
  #offerModal .invoice-lines th:nth-child(3),
  #offerModal .invoice-lines td:nth-child(3),
  #offerModal .invoice-lines th:nth-child(4),
  #offerModal .invoice-lines td:nth-child(4),
  #offerModal .invoice-lines th:nth-child(5),
  #offerModal .invoice-lines td:nth-child(5),
  #offerModal .invoice-lines th:nth-child(6),
  #offerModal .invoice-lines td:nth-child(6),
  #offerModal .invoice-lines th:nth-child(7),
  #offerModal .invoice-lines td:nth-child(7) {
    width: auto;
    min-width: 0;
  }
}

#offerModal .invoice-lines .offer-ap input[type="checkbox"] {
  margin: 0;
  width: 14px;
  height: 14px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #111111;
  border-radius: 2px;
  background: #ffffff;
  display: inline-grid;
  place-content: center;
}

#offerModal .invoice-lines .offer-ap input[type="checkbox"]::after {
  content: "";
  width: 8px;
  height: 8px;
  background: #111111;
  transform: scale(0);
  transition: transform 120ms ease;
}

#offerModal .invoice-lines .offer-ap input[type="checkbox"]:checked::after {
  transform: scale(1);
}

.offer-alt td,
.offer-alt textarea,
.offer-alt input,
.offer-alt .line-total {
  font-style: italic;
}

.invoice-lines input:focus {
  outline: none;
  border-color: transparent;
  background: transparent;
}

.billing-actions {
  white-space: nowrap;
  text-align: right;
}

.billing-actions .line-total {
  display: inline-block;
  margin-right: 6px;
  font-size: 11px;
}

.billing-actions .ghost {
  padding: 0 6px;
  line-height: 1;
  height: auto;
  font-size: 11px;
  border: none;
  background: transparent;
  margin: 0;
}

.billing-actions .ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

.billing-header-cell {
  padding: 1px 4px;
}

.billing-header-cell .billing-header-input {
  width: 100%;
  /* !important: der globale ".dialog .input-row textarea"-Reset (Zeile ~8900)
     hat mit 3 Klassen höhere Spezifität als diese 2-Klassen-Regel und würde
     sonst min-height:80px + resize:vertical erzwingen - dadurch wurden ALLE
     Zwischenüberschriften unabhängig von der tatsächlichen Zeilenanzahl auf
     mindestens 80px hochgezogen (plus ein sichtbarer, aber wirkungsloser
     Resize-Griff, da autoResizeTextarea die Höhe bei jeder Änderung ohnehin
     wieder überschreibt). */
  min-height: 32px !important;
  padding: 4px 6px;
  font-weight: 700;
  line-height: 1.4;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  resize: none !important;
  overflow: hidden;
  box-sizing: border-box;
  white-space: pre-wrap;
}

.billing-header-cell .billing-header-input:focus {
  outline: 1px solid rgba(142, 240, 193, 0.45);
}

.billing-header-cell .billing-header-input::placeholder {
  color: var(--muted);
}

.billing-header td {
  height: auto;
}

.billing-header td:empty::before {
  content: "";
  display: block;
  height: 22px;
}

.billing-lines textarea,
.invoice-lines textarea,
.invoice-lines .billing-text,
textarea.billing-text {
  width: 100%;
  min-height: 32px;
  padding: 4px 6px;
  resize: none;
  font: inherit;
  background: transparent;
  border: none;
  color: inherit;
  overflow: hidden;
  display: block;
  white-space: pre-wrap;
}

.invoice-lines .billing-text[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
}

.invoice-lines .billing-text[contenteditable="true"]:focus {
  outline: 1px solid rgba(142, 240, 193, 0.45);
  border-radius: 4px;
}

.invoice-lines .billing-text ul,
.invoice-lines .billing-text ol {
  margin: 0;
  padding-left: 16px;
}

.invoice-lines .billing-text li {
  margin: 0;
  padding: 0;
}

.invoice-lines table th:nth-child(3),
.invoice-lines table td:nth-child(3) {
  text-align: right;
}

.invoice-lines table th:nth-child(4),
.invoice-lines table td:nth-child(4) {
  text-align: left;
  width: 60px;
  min-width: 60px;
}

.invoice-lines table td:nth-child(3) input,
.invoice-lines table td:nth-child(3) textarea {
  text-align: right;
}

.invoice-lines table td:nth-child(4) input,
.invoice-lines table td:nth-child(4) textarea {
  text-align: left;
}


.input-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.search-results {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #0b1224;
  max-height: 180px;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.search-results.hidden {
  display: none;
}

.search-results button {
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  font-size: 12px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.search-results button:hover {
  background: rgba(142, 240, 193, 0.12);
}
.settings-page-shell {
  padding: 22px 24px 40px;
  display: grid;
  gap: 18px;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 4px 2px;
  flex-wrap: nowrap;
}

.settings-header h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0;
}

.settings-head-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 12px;
  color: var(--muted);
}

.settings-head-meta strong {
  font-size: 14px;
  color: var(--text);
}

.settings-head-actions {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}

.settings-header-tabs {
  margin-left: auto;
  justify-content: flex-end;
  max-width: 78%;
  overflow-x: auto;
  scrollbar-width: thin;
  white-space: nowrap;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
}

.settings-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
  flex: 0 0 auto;
  white-space: nowrap;
}

.topbar .settings-tabs .settings-tab {
  color: #e2e8f0;
}

.settings-tab:hover {
  color: var(--text);
  background: rgba(148, 163, 184, 0.12);
}

.settings-tab.is-active {
  background: rgba(103, 243, 209, 0.16);
  border-color: rgba(103, 243, 209, 0.4);
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(103, 243, 209, 0.12);
}

.analytics-tabs {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 6px 8px;
  gap: 6px;
}

.analytics-tabs .settings-tab {
  background: transparent;
  border: none;
  color: var(--muted);
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.analytics-tabs .settings-tab:hover {
  color: var(--accent);
}

.analytics-tabs .settings-tab[data-active="true"] {
  background: rgba(103, 243, 209, 0.18);
  border: 1px solid rgba(103, 243, 209, 0.45);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(103, 243, 209, 0.25);
}

.settings-content {
  min-width: 0;
}

.settings-panel {
  display: none;
  grid-template-columns: 1fr;
  gap: 16px;
}

.settings-panel.is-active {
  display: grid;
}

.settings-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.18);
}

body.settings-page .settings-card .dialog-head {
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  margin-bottom: 12px;
}

body.settings-page .settings-card .dialog-head h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

body.settings-page .settings-card .dialog-body {
  padding: 0;
  gap: 12px;
}

body.settings-page .settings-card .dialog-body + .dialog-body {
  margin-top: 12px;
}

body.settings-page input:not([type="checkbox"]):not([type="radio"]),
body.settings-page select,
body.settings-page textarea {
  border-radius: 10px;
  min-height: 40px;
  padding: 9px 12px;
  line-height: 1.3;
  border-color: rgba(148, 163, 184, 0.35);
}

body.settings-page textarea {
  min-height: 110px;
}

body.settings-page .input-row label {
  min-width: 120px;
  font-size: 13px;
}

body.settings-page .settings-card .table-wrapper {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

body.settings-page .settings-card .tagline {
  font-size: 13px;
  color: var(--muted);
}

body.settings-page .settings-card button.primary,
body.settings-page .settings-card button.ghost {
  min-height: 38px;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
}

body.settings-page .settings-card button.ghost {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.08);
}

body.settings-page .settings-card button.ghost:hover {
  background: rgba(148, 163, 184, 0.16);
}

body.settings-page .settings-card .icon-ghost {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.08);
}

body.settings-page .settings-card .icon-ghost:hover {
  background: rgba(148, 163, 184, 0.16);
}

body.settings-page .settings-card .table-wrapper table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}

body.settings-page .settings-card .table-wrapper table tbody td {
  font-size: 13px;
}

body.settings-page .settings-card .table-wrapper table tbody tr {
  transition: background-color 140ms ease;
}

body.settings-page .settings-card .table-wrapper table tbody tr:hover {
  background: var(--row-hover-bg);
}

body.settings-page .settings-card .table-link {
  font-weight: 600;
  text-underline-offset: 2px;
}

body.settings-page .settings-card .table-link:hover {
  color: var(--accent);
}

body.settings-page .settings-card .dialog-actions {
  padding: 10px 0 0;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  margin-top: 10px;
}

body.settings-page .settings-panel-actions {
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

body.settings-page .settings-panel-save-status {
  color: var(--muted);
  font-size: 13px;
  margin-right: auto;
}

body.settings-page .settings-panel-save-status[data-variant="saved"] {
  color: #34d399;
}

body.settings-page .settings-panel-save-status[data-variant="pending"] {
  color: var(--muted);
  font-style: italic;
}

body.settings-page .settings-panel-save-status[data-variant="error"] {
  color: var(--danger);
}

body.settings-page .settings-panel.has-unsaved-settings .settings-panel-actions {
  border-top-color: rgba(103, 243, 209, 0.35);
}

/* Einstellungs-Seitenleiste (index.html #sidebarSettingsNav): mit den
   Abschnittsüberschriften sonst zu hoch für einen normalen Bildschirm. */
#sidebarSettingsNav {
  gap: 2px;
}

#sidebarSettingsNav .ghost {
  min-height: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
}

#sidebarSettingsNav .sidebar-nav-section-label {
  padding-top: 8px;
  padding-bottom: 2px;
  margin-top: 4px;
}

/* ===== Einstellungen: einheitliches Erscheinungsbild (2026-09-24) =====
   Ziel: alle Untermenüs gleich aufgebaut - Aktionen oben rechts (Neben-
   aktionen links), keine leeren Kopfzeilen, kurze Werte in kurzen Feldern,
   gleiche Knöpfe/Symbole wie im restlichen Programm. */

/* Kopfzeilen ohne Inhalt (nur Platzhalter-<div>) erzeugten einen leeren
   Streifen mit doppelter Trennlinie über jeder Karte. */
body.settings-page .settings-card > .dialog-head:not(:has(button, h2, input, select)) {
  display: none;
}

body.settings-page .settings-card > .dialog-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

body.settings-page .settings-card > .dialog-head > div:empty {
  display: none;
}

/* Nebenaktionen (z. B. "Alle Mitarbeiter abmelden", "Zurücksetzen") links,
   Hauptaktion rechts. */
body.settings-page .settings-card > .dialog-head > button.ghost:first-of-type {
  margin-right: auto;
}

/* Kurze Zahlenwerte (cm, %, h/Monat, MWST ...) nicht über die volle Breite. */
body.settings-page .settings-card .input-row > input[type="number"],
body.settings-page .settings-card .rate-calculation input[type="number"] {
  max-width: 200px;
}

/* Einzeilige Texte/Auswahlen außerhalb von Tabellen: lesbare Breite. */
body.settings-page .settings-card .input-row > input[type="text"],
body.settings-page .settings-card .input-row > select {
  max-width: 520px;
}

/* Ausnahmen: Pfade und Felder in Tabellen dürfen die volle Breite nutzen. */
body.settings-page .settings-card .path-entry .input-row > input[type="text"],
body.settings-page .settings-card td .input-row > input[type="text"],
body.settings-page .settings-card td .input-row > select {
  max-width: none;
}

/* Rich-Text-Werkzeugleiste: "Textgröße" kompakt neben B/I/U statt als eigene
   Zeile über die ganze Breite (globale Regel select { width: 100% }). */
body.settings-page .rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

body.settings-page .rich-toolbar .rich-size-select {
  width: auto;
  flex: 0 0 auto;
  min-width: 120px;
  min-height: 34px;
  height: 34px;
  padding: 4px 10px;
}

/* Einheitliche Symbolgröße in Icon-Knöpfen (Papierkorb usw.). */
body.settings-page .settings-card .icon-ghost svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.settings-page .settings-card .icon-ghost.delete-column:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}

/* Datei-Auswahl (Logo) wie die übrigen Knöpfe statt Browser-Standard. */
body.settings-page input[type="file"] {
  padding: 5px 8px;
  max-width: 520px;
}

body.settings-page input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.08);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

body.settings-page input[type="file"]::file-selector-button:hover {
  background: rgba(148, 163, 184, 0.16);
}

/* Beschriftung links neben einem Feld: feste Breite, damit alle Felder einer
   Karte bündig untereinander beginnen; einheitliche Schriftfarbe (einige
   Zeilen, z. B. Mahnstufe, waren bisher grau). */
body.settings-page .settings-card .input-row:not(.input-row-stacked):not(.full-span) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

body.settings-page .settings-card .input-row:not(.input-row-stacked):not(.full-span) > label {
  flex: 0 0 190px;
  width: 190px;
  color: var(--text);
}

/* In Tabellenzellen (z. B. Bürokosten-Zeilen) keine feste Beschriftungsbreite. */
body.settings-page .settings-card td .input-row > label {
  flex: 0 1 auto;
  width: auto;
}

body.theme-light.settings-page .settings-header-tabs {
  background: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

body.settings-page:not(.theme-light) .settings-header-tabs {
  background: rgba(15, 23, 42, 0.45) !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
  box-shadow: none !important;
}

body.theme-light.settings-page .settings-tab:hover {
  background: rgba(15, 23, 42, 0.06);
}

body.theme-light.settings-page .settings-header .settings-tab {
  color: #475569;
}

body.theme-light.settings-page .settings-header .settings-tab.is-active {
  color: #0f172a;
  background: rgba(52, 211, 153, 0.16);
  border-color: rgba(52, 211, 153, 0.45);
}

body.theme-light.settings-page .settings-card .icon-ghost,
body.theme-light.settings-page .settings-card button.ghost {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.35);
}

body.theme-light.settings-page .settings-card .icon-ghost:hover,
body.theme-light.settings-page .settings-card button.ghost:hover {
  background: rgba(15, 23, 42, 0.08);
}

body.theme-dark.settings-page .settings-header-tabs {
  background: rgba(15, 23, 42, 0.45) !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
  box-shadow: none !important;
}

html[data-theme-mode="dark"] body.settings-page.theme-dark .settings-header-tabs {
  background: rgba(15, 23, 42, 0.45) !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
  box-shadow: none !important;
}

html[data-theme-mode="light"] body.settings-page.theme-light .settings-header-tabs {
  background: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

@media (prefers-color-scheme: dark) {
  body.settings-page:not(.theme-light):not(.theme-dark) .settings-header-tabs {
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(148, 163, 184, 0.25);
  }
}

.import-confirmation {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.6);
}

.import-confirmation.hidden {
  display: none;
}

.import-confirmation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.import-confirmation-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.database-progress {
  display: grid;
  gap: 8px;
  width: 100%;
}

.database-progress.hidden {
  display: none;
}

.database-progress-head {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  justify-content: space-between;
}

.database-progress-track {
  background: rgba(148, 163, 184, 0.2);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.database-progress-bar {
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  border-radius: inherit;
  height: 100%;
  transition: width 0.2s ease;
  width: 0;
}

.dialog-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

.path-entry-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.path-entry {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--panel);
}

.path-entry .input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.path-entry .input-row label {
  min-width: 120px;
  flex: 0 0 auto;
}

.path-entry .input-row .path-entry-path-input {
  flex: 1 1 220px;
  min-width: 160px;
}

.folder-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.folder-picker-list li {
  border-bottom: 1px solid var(--border);
}

.folder-picker-list li:last-child {
  border-bottom: none;
}

.folder-picker-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.folder-picker-list button:hover {
  background: var(--hover, rgba(148, 163, 184, 0.12));
}

.folder-picker-list .folder-picker-empty {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
}

.subfolder-list .subfolder-item {
  border-bottom: 1px solid var(--border);
}

.subfolder-list .subfolder-item:last-child {
  border-bottom: none;
}

.subfolder-list .subfolder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  gap: 8px;
}

.subfolder-list .subfolder-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subfolder-list .subfolder-add,
.subfolder-list .subfolder-remove {
  flex: 0 0 auto;
  width: auto;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
}

.subfolder-list .subfolder-add:hover,
.subfolder-list .subfolder-remove:hover {
  color: var(--text);
}

.subfolder-list .subfolder-children {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

#rateCategoryList {
  display: grid;
  gap: 12px;
}

#projectRateOverrides,
#customerRateOverrides {
  max-height: 320px;
  overflow: auto;
  border-radius: var(--radius);
}

#projectRateOverrides .rate-table,
#customerRateOverrides .rate-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
}

#projectRateOverrides th,
#projectRateOverrides td,
#customerRateOverrides th,
#customerRateOverrides td {
  padding: 6px 8px;
  font-size: 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

#projectRateOverrides thead th,
#customerRateOverrides thead th {
  font-weight: 600;
  text-align: center;
  background: var(--panel-solid);
  color: var(--text);
  position: sticky;
  top: 0;
  z-index: 1;
}

#projectRateOverrides thead .rate-date,
#customerRateOverrides thead .rate-date {
  text-align: left;
}

#projectRateOverrides input[type="date"],
#projectRateOverrides input[type="number"],
#customerRateOverrides input[type="date"],
#customerRateOverrides input[type="number"] {
  height: 26px;
  padding: 2px 6px;
  font-size: 11px;
}

#projectRateOverrides input[type="number"],
#customerRateOverrides input[type="number"] {
  width: 72px;
  min-width: 72px;
  text-align: right;
}

#projectRateOverrides .rate-actions,
#customerRateOverrides .rate-actions {
  width: 32px;
  text-align: right;
}

#projectRateOverrides .add-rate-row,
#customerRateOverrides .add-rate-row {
  margin-top: 6px;
}

#billingModal .billing-picker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#billingModal .billing-picker-actions.is-stacked {
  flex-direction: column;
  align-items: flex-start;
}

.billing-picker-dialog {
  background: var(--panel);
  border: 1px solid var(--border);
}

/* Wird per showModal() geöffnet (siehe main.js, verschachtelt im bereits
   offenen Rechnungsformular) - der native ::backdrop-Layer entsteht nur bei
   showModal() und wird von .ava-floating-dialog (background:transparent auf
   dem <dialog> selbst) nicht mit erfasst, hier separat neutralisieren, sonst
   verdeckt der dunkle Standard-Backdrop das Formular dahinter komplett. */
.billing-picker-dialog.ava-floating-dialog::backdrop {
  background: transparent;
}

.billing-picker-dialog form {
  background: var(--panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.billing-picker-dialog .dialog-head,
.billing-picker-dialog .dialog-body,
.billing-picker-dialog .dialog-actions {
  background: var(--panel);
}

.billing-picker-dialog .dialog-body {
  background: var(--panel);
  max-height: 60vh;
  overflow: auto;
}

.billing-picker-dialog label.checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.billing-picker-dialog input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

#templateModal label.checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#templateModal input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 16px;
  height: 16px;
  margin: 0;
}

.billing-picker-dialog .table-wrapper {
  background: var(--panel);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.billing-picker-dialog table {
  background: var(--panel);
}

.billing-picker-dialog th,
.billing-picker-dialog td {
  background: var(--panel);
}

.billing-picker-dialog .table-wrapper.reminders-table {
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: none;
}

.billing-picker-dialog .table-wrapper.reminders-table .table-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.billing-picker-dialog .table-wrapper.reminders-table table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.billing-picker-dialog .table-wrapper.reminders-table tbody {
  min-height: 140px;
}

.billing-picker-dialog .table-wrapper.reminders-table th,
.billing-picker-dialog .table-wrapper.reminders-table td {
  padding: 10px;
  vertical-align: top;
}

.billing-picker-dialog .table-wrapper.reminders-table th:nth-child(1),
.billing-picker-dialog .table-wrapper.reminders-table td:nth-child(1) {
  width: 16%;
}

.billing-picker-dialog .table-wrapper.reminders-table th:nth-child(2),
.billing-picker-dialog .table-wrapper.reminders-table td:nth-child(2) {
  width: 42%;
}

.billing-picker-dialog .table-wrapper.reminders-table th:nth-child(3),
.billing-picker-dialog .table-wrapper.reminders-table td:nth-child(3) {
  width: 16%;
}

.billing-picker-dialog .table-wrapper.reminders-table th:nth-child(4),
.billing-picker-dialog .table-wrapper.reminders-table td:nth-child(4) {
  width: 120px;
}

.billing-picker-dialog .table-wrapper.reminders-table th:nth-child(5),
.billing-picker-dialog .table-wrapper.reminders-table td:nth-child(5) {
  width: 132px;
}

.billing-picker-dialog .table-wrapper.reminders-table td:nth-child(4) {
  white-space: nowrap;
  text-align: right;
}

.billing-picker-dialog .table-wrapper.reminders-table th.reminder-actions-head,
.billing-picker-dialog .table-wrapper.reminders-table td.reminder-actions-cell {
  white-space: nowrap;
  width: 132px;
  min-width: 132px;
  text-align: right;
  vertical-align: middle;
}

.billing-picker-dialog .table-wrapper.reminders-table td.reminder-actions-cell {
  padding-left: 4px;
}

#offerArticleDialog .table-wrapper {
  border: 1px solid rgba(148, 163, 184, 0.35);
}

#offerArticleDialog thead th {
  text-align: left;
  padding: 8px 10px;
  height: auto;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

#offerArticleDialog tbody td {
  padding: 8px 10px;
  height: auto;
  font-size: 12px;
  color: var(--text);
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

#offerArticleDialog tbody tr:nth-child(odd) td {
  background: rgba(15, 23, 42, 0.42);
}

#offerArticleDialog tbody tr:nth-child(even) td {
  background: rgba(30, 41, 59, 0.42);
}

#offerArticleDialog tbody tr:hover td {
  background: #1e293b;
}

#offerArticleDialog tbody tr:last-child td {
  border-bottom: none;
}

body.theme-light #offerArticleDialog,
body.theme-light #offerArticleDialog form,
body.theme-light #offerArticleDialog .dialog-head,
body.theme-light #offerArticleDialog .dialog-body,
body.theme-light #offerArticleDialog .dialog-actions {
  background: #ffffff;
  color: #1f2937;
  color-scheme: light;
}

body.theme-light #offerArticleDialog .analytics-tabs {
  background: #f3f5f8;
  border-color: #d8e0e8;
}

body.theme-light #offerArticleDialog .analytics-tabs .settings-tab {
  color: #6b7280;
}

body.theme-light #offerArticleDialog .analytics-tabs .settings-tab[data-active="true"] {
  background: #eefaf3;
  border: 1px solid rgba(31, 191, 127, 0.25);
  color: #135c3e;
  box-shadow: none;
}

body.theme-light #offerArticleDialog .dialog-body input,
body.theme-light #offerArticleDialog .dialog-body select,
body.theme-light #offerArticleDialog .dialog-body textarea {
  background: #ffffff;
  color: #1f2937;
  border-color: #d8e0e8;
}

body.theme-light #offerArticleDialog .table-wrapper,
body.theme-light #offerArticleDialog .table-wrapper table {
  background: #ffffff;
  border-color: #d8e0e8;
}

body.theme-light #offerArticleDialog thead th {
  background: #f3f5f8;
  color: #6b7280;
  border-bottom-color: #d8e0e8;
}

body.theme-light #offerArticleDialog tbody td {
  color: #1f2937;
  border-bottom-color: rgba(216, 224, 232, 0.9);
}

body.theme-light #offerArticleDialog tbody tr:nth-child(odd) td {
  background: #ffffff;
}

body.theme-light #offerArticleDialog tbody tr:nth-child(even) td {
  background: #f8fafc;
}

body.theme-light #offerArticleDialog tbody tr:hover td {
  background: #eefaf3;
}

.billing-picker-dialog .reminder-actions {
  gap: 4px;
  justify-content: flex-end;
  display: flex;
}

.billing-picker-dialog .reminder-action {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.billing-picker-dialog .reminder-action span {
  display: block;
}

body.theme-light .billing-picker-dialog .reminder-action {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.45);
  color: #334155;
  box-shadow: none;
}

body.theme-light .billing-picker-dialog .reminder-action:hover {
  background: #f3f5f8;
  border-color: rgba(31, 191, 127, 0.35);
  color: #0f172a;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.billing-picker-dialog .reminder-action.reminder-action-delete,
body.theme-light .billing-picker-dialog .reminder-action.reminder-action-delete,
.billing-picker-dialog .reminder-action.reminder-action-delete:hover,
body.theme-light .billing-picker-dialog .reminder-action.reminder-action-delete:hover {
  color: #ef4444 !important;
}

#billingReminderDialog .dialog-body {
  max-height: none;
  overflow: visible;
}


#offerModal details.input-row {
  display: grid;
  gap: 8px;
}

#billingModal details.input-row {
  display: grid;
  gap: 8px;
}

#offerModal details.input-row > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
}

#offerModal details.input-row > summary::-webkit-details-marker {
  display: none;
}

#offerModal details.input-row > summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 120ms ease;
  color: var(--muted);
}

#offerModal details.input-row[open] > summary::before {
  transform: rotate(90deg);
}

#billingModal details.input-row > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
}

#billingModal details.input-row > summary::-webkit-details-marker {
  display: none;
}

#billingModal details.input-row > summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 120ms ease;
  color: var(--muted);
}

#billingModal details.input-row[open] > summary::before {
  transform: rotate(90deg);
}

#billingModal .dialog-body .input-row input,
#billingModal .dialog-body .input-row select {
  padding: 6px 8px;
  font-size: 12px;
  height: auto;
}

#billingModal .dialog-body .input-row textarea {
  padding: 6px 8px;
  font-size: 12px;
}

#billingModal .dialog-body .input-row label {
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
  letter-spacing: 0.02em;
}

#billingModal .dialog-body .input-row label[for="billingExtrasToggle"] {
  white-space: nowrap;
}

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

.inline-input {
  display: flex;
  align-items: center;
  gap: 4px;
}

.inline-input input {
  width: 70px;
}

.inline-suffix {
  font-size: 11px;
  color: var(--muted);
}

.billing-terms-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 8px;
  margin: 6px 0 10px;
}

.billing-terms-text {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
}

#billingModal #openBillingIntro {
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 0;
}


.logo-preview {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: rgba(255, 255, 255, 0.03);
}

.logo-preview img {
  max-height: 76px; /* ~2cm at 96dpi */
  width: auto;
}

#footerText {
  width: 100%;
  min-height: 120px;
  resize: vertical;
}

.sidebar {
  border-right: 1px solid var(--border);
  background-color: var(--glass);
  /* Täglich wechselndes, dezentes Hintergrundfoto (Picsum, per main.js
     applyDailyBackgroundPhoto als --app-daily-bg gesetzt) unter einer
     hoch-opaken Tönung. Ohne geladenes Bild (Offline/noch nicht geladen)
     fällt der Fallback "none" zurück, es bleibt bei der reinen Glass-Fläche. */
  background-image: linear-gradient(var(--sidebar-bg-tint), var(--sidebar-bg-tint)), var(--app-daily-bg, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  padding: 8px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  width: max-content;
  min-width: 180px;
  max-width: 260px;
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: sticky;
  top: 0;
  background: transparent;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  z-index: 1;
}

.sidebar-head h1 {
  margin: 4px 0 0 0;
  font-size: 24px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: calc(100vh - 90px);
  padding-right: 4px;
}

.sidebar-nav .ghost {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  position: relative;
  font-size: 13px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #cbd5e1;
  padding: 9px 12px;
  box-shadow: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.nav-beta-badge {
  display: inline-flex;
  align-items: center;
  margin-left: -4px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.4;
  flex-shrink: 0;
}

.assignment-notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.sidebar-nav .ghost .assignment-notif-badge {
  margin-left: auto;
}

.project-change-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(191, 219, 254, 0.45);
  background: rgba(30, 64, 175, 0.22);
  color: #dbeafe;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.project-change-indicator.is-note {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(180, 83, 9, 0.24);
  color: #fef3c7;
}

.project-change-indicator.is-assignment {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(6, 95, 70, 0.28);
  color: #d1fae5;
}

.project-change-indicator.is-due-date {
  border-color: rgba(249, 115, 22, 0.5);
  background: rgba(154, 52, 18, 0.26);
  color: #ffedd5;
}

.project-change-indicator.is-move {
  border-color: rgba(129, 140, 248, 0.5);
  background: rgba(67, 56, 202, 0.24);
  color: #e0e7ff;
}

.project-change-popup-container {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.project-change-popup {
  max-width: min(520px, calc(100vw - 28px));
  border-radius: 10px;
  border: 1px solid rgba(147, 197, 253, 0.55);
  background: rgba(17, 24, 39, 0.95);
  color: #e5edf8;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.38);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
}

.project-change-popup.fade-out {
  opacity: 0;
  transform: translateY(-6px);
}

.sidebar-nav .ghost:hover,
.sidebar-nav .ghost[data-active-view="true"] {
  background: rgba(148, 163, 184, 0.14);
  border-color: rgba(148, 163, 184, 0.28);
  color: #f8fafc;
}

.sidebar-nav .ghost:disabled,
.sidebar-nav .ghost:disabled:hover {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
  border-color: transparent;
  color: #cbd5e1;
}

.sidebar-nav .ghost[data-active-view="true"] {
  position: relative;
}

.sidebar-nav .ghost[data-active-view="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 999px;
  background: var(--accent);
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

.nav-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-toggle-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-foot {
  margin-top: auto;
  padding: 12px 4px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar-copyright {
  font-size: 10px;
  line-height: 1;
  /* var(--text) statt fix #ffffff - im Light-Theme wäre weißer Text auf der
     hellen Sidebar sonst praktisch unsichtbar. */
  color: var(--text);
  opacity: 0.7;
  letter-spacing: 0.02em;
}

.sidebar.collapsed {
  min-width: 64px;
  width: 64px;
  max-width: 64px;
  padding: 18px 10px;
}

.sidebar.collapsed .sidebar-head {
  justify-content: center;
}

.sidebar.collapsed .sidebar-head p,
.sidebar.collapsed .sidebar-head h1,
.sidebar.collapsed .sidebar-nav span:not(.nav-icon):not(.assignment-notif-badge) {
  display: none;
}

#toggleSidebar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  min-width: 34px;
  margin-top: -6px;
  font-weight: 700;
  border-radius: 999px;
  background: rgba(142, 240, 193, 0.12);
  border-color: rgba(142, 240, 193, 0.35);
  color: var(--accent);
  letter-spacing: 0.02em;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

.sidebar.collapsed #toggleSidebar {
  width: 100%;
  margin: 0 auto;
  z-index: 2;
}

#toggleSidebar:hover {
  background: rgba(142, 240, 193, 0.22);
  border-color: rgba(142, 240, 193, 0.6);
  box-shadow: 0 10px 24px rgba(142, 240, 193, 0.25);
}

#toggleSidebar:active {
  transform: translateY(1px) scale(0.98);
}

.sidebar.collapsed .sidebar-nav .ghost {
  justify-content: center;
  padding: 9px 0;
}

/* Nur Zähler mit Inhalt - leere (.hidden, "0") bleiben auch in der
   eingeklappten Symbolleiste ausgeblendet. */
.sidebar.collapsed .sidebar-nav .assignment-notif-badge:not(.hidden) {
  display: inline-flex !important;
}

/* Echtes Burger-Menü unterhalb von SIDEBAR_MOBILE_BREAKPOINT (main.js) - die
   Sidebar liegt dann als volles Overlay über dem Inhalt (nicht mehr im Grid,
   siehe .app-layout unten) und ist standardmäßig komplett weggeschoben statt
   nur auf Icon-Breite geschrumpft (das bisherige .collapsed-Verhalten bleibt
   für den mittleren Breakpoint 640-900px unverändert bestehen). */
@media (max-width: 640px) {
  .app-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: min(80vw, 280px);
    max-width: none;
    min-width: 0;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 0 0 0 transparent;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 12px 0 32px rgba(2, 8, 23, 0.45);
  }

  /* Im Overlay-Zustand immer die volle Beschriftung zeigen, auch wenn der
     Desktop-Nutzer zuletzt "eingeklappt" gewählt hatte - eine reine
     Icon-Leiste als Vollbild-Overlay wäre für ein Burger-Menü unpassend. */
  .sidebar.collapsed.mobile-open {
    width: min(80vw, 280px);
  }

  .sidebar.collapsed.mobile-open .sidebar-head p,
  .sidebar.collapsed.mobile-open .sidebar-head h1,
  .sidebar.collapsed.mobile-open .sidebar-nav span:not(.nav-icon):not(.assignment-notif-badge) {
    display: inline;
  }

  .sidebar.collapsed.mobile-open .sidebar-nav .ghost {
    justify-content: flex-start;
    padding: 9px 14px;
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2, 8, 23, 0.5);
    z-index: 55;
  }

  .sidebar-backdrop.visible {
    display: block;
  }

  body.sidebar-mobile-lock {
    overflow: hidden;
  }

  /* Öffnet das Burger-Menü - lebt bewusst in der Topbar statt in der Sidebar
     selbst, weil #toggleSidebar dort unsichtbar wird, sobald die Sidebar
     weggeschoben ist (siehe .sidebar oben) - ohne einen von außen sichtbaren
     Auslöser ließe sich das Menü sonst nie wieder öffnen. */
  .topbar-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin-right: 10px;
    flex-shrink: 0;
  }

  .topbar-burger svg {
    width: 20px;
    height: 20px;
  }
}

.rate-rows .rate-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 40px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.rate-rows .rate-cell input {
  width: 100%;
}

.rate-rows .rate-header {
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  position: sticky;
  top: 0;
  z-index: 1;
}

.rate-rows .rate-header strong {
  color: inherit;
}

body.theme-light .rate-rows .rate-header {
  background: #f3f5f8;
  color: var(--text);
}

.rate-rows {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  max-height: 320px;
  overflow: auto;
}

.rate-rows .rate-row:last-child {
  border-bottom: none;
}

#rateRows {
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

#rateRows .rate-row {
  grid-template-columns: 140px 140px 120px 140px minmax(260px, 1fr) 40px;
}

.content-area {
  padding: 3px 6px 6px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

#settingsShell .content-area {
  background: var(--bg);
  padding: 0;
}

#settingsShell .page,
#settingsShell main {
  width: 100%;
}

#timeShell .hero {
  padding: 10px 16px;
  gap: 6px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
}

#timeShell .hero h1 {
  font-size: 22px;
  margin: 0;
}

#timeShell .hero .eyebrow {
  font-size: 10px;
  margin: 0;
}

#timeShell .hero .lede {
  font-size: 13px;
  margin: 0;
}

#timeShell .hero-actions {
  gap: 6px;
  margin-top: 4px;
}

#timeShell .time-icon-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#timeShell .time-icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#timeEntryDialog .inline-search {
  background: var(--panel);
  border-color: rgba(255, 255, 255, 0.1);
}

#timeEntryDialog .inline-search .inline-search-list button {
  color: var(--text);
}

#timeEntryDialog .inline-search-field input {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid var(--border);
}

#timeShell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#timeShell .page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  overflow: hidden;
}

#timeShell main {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-right: 8px;
}

.full-width {
  width: 100%;
  text-align: center;
}

.week-grid {
  display: flex;
  gap: 0;
  margin-top: 0;
  overflow-x: auto;
  overflow-y: auto;
  height: 100%;
  padding: 0;
  min-height: 300px;
  background: transparent;
  border: none;
  border-radius: 0;
  width: 100%;
  --week-day-min: 160px;
}

.week-header {
  /* --week-day-min wird sonst nur auf .week-grid gesetzt - das ist ein
     Geschwister-Element von .week-header, die Custom Property vererbt sich
     also nicht hierher. Ohne eigene Definition fällt var(--week-day-min) in
     .week-header-card auf 0 zurück und die Karten quetschen sich auf
     schmalen Bildschirmen ungebremst zusammen statt zu scrollen. */
  --week-day-min: 160px;
  display: flex;
  gap: 12px;
  padding: 0 0 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-x: auto;
  margin-top: 16px;
  scroll-behavior: smooth;
}

.week-header-card {
  min-width: var(--week-day-min);
  width: 0;
  flex: 1 1 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--radius) * 0.8);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: none;
  flex-shrink: 0;
}

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

.week-header-day-label {
  font-size: 12px;
  font-weight: 600;
}

.week-header-card.weekend .week-header-day-label,
.week-header-card.holiday .week-header-day-label,
.week-day.weekend h3,
.week-day.holiday h3 {
  color: #ef4444;
}

.week-header-holiday {
  color: #ef4444;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.2;
}

.week-header-vacation {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 10px;
  color: var(--text);
  position: relative;
  cursor: pointer;
}

.week-header-absence-toggles,
.day-absence-toggles,
.month-absence-toggles {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.week-header-vacation input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.week-header-vacation.inactive {
  opacity: 0.35;
}

.week-header-vacation.active {
  border-color: var(--accent);
  background: rgba(142, 240, 193, 0.18);
  color: #0f172a;
}

.week-header-sick.active {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(248, 113, 113, 0.16);
  color: #7f1d1d;
}

.week-header-vacation:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.week-header-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 8px;
}

.week-header-hours {
  font-size: 8px;
  font-weight: 600;
  color: var(--muted);
}

.week-header-hours.planned {
  color: var(--danger);
}

.week-header-hours.booked {
  color: var(--text);
}

.week-header-delta {
  font-size: 10px;
  font-weight: 700;
}

.week-header-delta.positive {
  color: var(--accent);
}

.week-header-delta.negative {
  color: var(--danger);
}

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

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

#analyticsProjectReportSection {
  position: relative;
  overflow: visible;
  z-index: 20;
}

#analyticsProjectReportSection .filter-row,
#analyticsProjectReportSection .filter-row .input-row {
  position: relative;
  z-index: 101;
  overflow: visible;
  pointer-events: auto;
}

#analyticsProjectReportSection .filter-row select {
  min-width: 190px;
  cursor: pointer;
  position: relative;
  z-index: 102;
  background: rgba(142, 240, 193, 0.08);
  pointer-events: auto;
}

#analyticsProjectReportResponsibleFilter {
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: auto;
  pointer-events: auto !important;
  color: var(--text) !important;
}

#analyticsProjectReportSection select option {
  color: #0f172a;
  background: #fff;
}

#analyticsProjectReportSection .table-wrapper {
  position: relative;
  z-index: 1;
}

#analyticsProjectReportSection .analytics-project-report-toolbar {
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 12px;
}

#analyticsProjectReportSection .analytics-project-report-toolbar-left,
#analyticsProjectReportSection .analytics-project-report-toolbar-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
}

#analyticsProjectReportSection .analytics-project-report-toolbar-left .input-row,
#analyticsProjectReportSection .analytics-project-report-checkbox {
  margin: 0;
}

#analyticsProjectReportSection .analytics-project-report-checkbox-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#analyticsProjectReportSummary {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

#analyticsHoursPrint {
  margin-left: auto;
}

.analytics-filters {
  align-items: flex-start;
  gap: 12px;
}

.analytics-filters .filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.analytics-header-filters {
  display: none;
}

.analytics-filters .filter-controls input {
  min-width: 160px;
  padding: 6px 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 13px;
}

.analytics-filters .filter-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.analytics-filters + .project-report-summary {
  margin-top: 4px;
}

.project-report-summary {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}


.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 10px;
}

.month-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.month-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  min-height: 32px;
}

.month-row .month-date {
  font-weight: 600;
}

.month-row .month-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.month-row.weekend {
  opacity: 0.75;
}

.month-row .vacation-toggle {
  padding: 2px 6px;
}

.month-row .month-vacation {
  font-size: 11px;
  color: #92400e;
  font-weight: 600;
}

.month-row .month-sick {
  color: #b91c1c;
}

.vacation-year-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

.vacation-user-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--panel);
}

.vacation-user-head {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
}

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

.vacation-month {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  background: #fff;
}

.vacation-month-title {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #111827;
}

.vacation-month-days {
  display: grid;
  grid-template-columns: 34px repeat(7, minmax(16px, 1fr));
  gap: 2px;
}

.vacation-day {
  font-size: 10px;
  line-height: 1;
  padding: 3px 0;
  text-align: center;
  border-radius: 4px;
  color: #111827;
  background: #f3f4f6;
}

.vacation-day.empty {
  background: transparent;
}

.vacation-day.weekend {
  color: #6b7280;
  background: #f9fafb;
}

.vacation-day.holiday {
  background: #fee2e2;
  color: #b91c1c;
}

.vacation-day.clickable {
  cursor: pointer;
}

.vacation-day.kw {
  background: #e6f4ea;
  color: #15803d;
  font-weight: 600;
  font-size: 9px;
}

.vacation-day.vacation {
  background: #fde68a;
  color: #92400e;
  font-weight: 700;
}

.vacation-users {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  align-items: center;
  font-size: 8px;
  line-height: 1;
}

.vacation-user-tag {
  background: #111827;
  color: #fff;
  padding: 1px 3px;
  border-radius: 999px;
  font-weight: 700;
}

.vacation-user-more {
  color: #92400e;
  font-weight: 700;
}

.vacation-day.today {
  outline: 1px solid #111827;
  outline-offset: -1px;
}

.month-day {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 90px;
}

.month-day header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.month-day.weekend {
  opacity: 0.75;
}

.month-day .vacation-toggle {
  padding: 2px 6px;
}

.month-day .vacation-flag {
  font-size: 12px;
  color: #92400e;
  font-weight: 600;
}

.week-day {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 12px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: var(--week-day-min);
  flex: 1 1 0;
  width: 0;
}

.week-grid.is-week .week-day {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 0;
}

.week-grid.is-week .week-day.weekend {
  background: transparent;
}

.week-grid.is-week .week-day .day-title-row,
.week-grid.is-week .week-day .holiday-label,
.week-grid.is-week .week-day .vacation-badge {
  display: none;
}

.week-grid.is-week .week-day.today {
  border: none;
  background: transparent;
}

.week-grid.is-day .week-day,
.week-grid.is-day .week-day.today {
  border: none;
  /* Bewusst transparent statt var(--panel): die Tagesspalte ist hier 617px+
     hoch und ihr Hintergrund wurde beim Scrollen (transform-basiertes
     Pinning des day-title-row, siehe main.js) nur teilweise neu gemalt -
     sichtbar als mitscrollender grünlicher Streifen, der abrupt endet
     (gemeldeter Screenshot). Mit transparent gibt es keine abweichende
     Fläche mehr, die unvollständig repainted werden könnte. */
  background: transparent;
  box-shadow: none;
}

.vacation-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--time-vacation, #fbbf24) 16%, transparent);
  color: color-mix(in srgb, var(--time-vacation, #fbbf24) 55%, black);
  font-size: 12px;
  font-weight: 600;
  width: fit-content;
}

.sick-badge {
  background: color-mix(in srgb, var(--time-sick, #f87171) 14%, transparent);
  color: color-mix(in srgb, var(--time-sick, #f87171) 60%, black);
}

.week-day.weekend {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow);
}

.week-day.today {
  border: 2px solid var(--accent);
  background: rgba(142, 240, 193, 0.2);
  box-shadow: 0 0 0 2px rgba(142, 240, 193, 0.25), var(--shadow);
}

.week-day.today h3 {
  color: var(--accent);
  font-weight: 800;
}

.week-day.holiday {
  background: rgba(255, 186, 120, 0.12);
  border-color: rgba(255, 186, 120, 0.4);
}

.holiday-label {
  font-size: 12px;
  color: #ef4444;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 4px;
}

.now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 3px solid rgba(239, 68, 68, 0.95);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.55);
  pointer-events: none;
  z-index: 1;
  transform: translateY(-1px);
}

.week-day h3 {
  margin: 0;
  font-size: 16px;
}

.day-hours {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  margin-left: auto;
}

.week-grid.is-week .day-hours,
.week-grid.is-week .day-hours .delta {
  font-size: 8px;
}

.day-hours .overbooked,
.day-hours .underbooked {
  color: var(--danger);
  font-weight: 700;
}

.day-hours .delta {
  font-weight: 700;
}

.day-hours .delta.over {
  color: var(--accent);
}

.day-hours .delta.under {
  color: var(--danger);
}

.pill-nav {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.topbar .pill-nav {
  margin-right: 8px;
}

.pill-nav button {
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  padding: 6px 10px;
}

.pill-nav .primary {
  background: transparent;
  color: var(--text);
}

.pill-nav .ghost {
  color: var(--text);
}

.delta-positive {
  color: var(--accent);
  font-weight: 700;
}

.delta-negative {
  color: var(--danger);
  font-weight: 700;
}

#analyticsStaffSection .delta-negative {
  color: #dc2626;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin: 0;
  /* iOS Safari braucht das teils explizit fuer zuverlaessiges Touch-Scrollen
     in verschachtelten (horizontal scrollbar in vertikal scrollbarer Seite)
     Bereichen, sonst reagiert overflow-x: auto nicht auf Wisch-Gesten. Fuer
     andere Browser wirkungslos/ignoriert. */
  -webkit-overflow-scrolling: touch;
}

.table-wrapper table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
}

.table-wrapper.receipts table,
.table-wrapper.analytics table {
  border-collapse: collapse;
  width: 100%;
}

.table-wrapper.receipts th,
.table-wrapper.analytics th {
  background: rgba(142, 240, 193, 0.08);
  color: var(--text);
  font-weight: 700;
  border-bottom: 2px solid var(--border);
  text-align: left;
}

.table-wrapper.receipts th.money {
  text-align: right;
}

.table-wrapper.analytics th.money {
  text-align: right;
}

.table-wrapper.projects th.money {
  text-align: right;
}

.table-wrapper.receipts th,
.table-wrapper.receipts td,
.table-wrapper.analytics th,
.table-wrapper.analytics td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  white-space: nowrap;
}

.table-wrapper.projects th,
.table-wrapper.projects td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.table-wrapper.projects th {
  background: rgba(142, 240, 193, 0.08);
  font-weight: 700;
  text-align: left;
}

.table-wrapper.projects td {
  padding: 4px 8px;
}

.table-wrapper.receipts tr:nth-child(even),
.table-wrapper.analytics tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.table-wrapper.receipts tr.receipt-billed {
  background: rgba(142, 240, 193, 0.18);
}

.invoice-approved {
  background: rgba(142, 240, 193, 0.12) !important;
}

.invoice-approved-badge {
  margin-left: 6px;
  vertical-align: middle;
}

.table-wrapper.analytics tr.project-negative,
.table-wrapper.analytics tr.project-negative td {
  background: rgba(255, 155, 165, 0.1) !important;
}

.analytics-card#analyticsLogSection .card-body {
  max-height: 420px;
  overflow: auto;
}

.sort-btn {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.sort-arrow {
  font-size: 10px;
  opacity: 0.7;
}

.analytics-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  table-layout: auto;
}

.analytics-table th,
.analytics-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.analytics-table th {
  font-weight: 700;
  color: var(--text);
  background: rgba(142, 240, 193, 0.08);
  border-bottom: 2px solid var(--border);
  text-align: left;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.analytics-table th .table-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border-radius: 6px;
  background: rgba(142, 240, 193, 0.15);
  color: var(--text);
  font-size: 12px;
}

.analytics-table td {
  color: var(--text);
}

.analytics-table td.fakturiert-yes {
  color: #0f9d58;
  font-weight: 600;
}

.analytics-table td.fakturiert-no {
  color: #dc2626;
  font-weight: 600;
}

.analytics-table td.fakturiert-manual {
  color: #0f9d58;
  font-weight: 600;
}

#analyticsHoursPanel .analytics-table {
  table-layout: fixed;
}

#analyticsHoursPanel .analytics-table th,
#analyticsHoursPanel .analytics-table td {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

#analyticsHoursPanel .analytics-table th:nth-child(1),
#analyticsHoursPanel .analytics-table td:nth-child(1) {
  width: 8%;
}

#analyticsHoursPanel .analytics-table td:nth-child(1) {
  white-space: nowrap;
}

#analyticsHoursPanel .analytics-table th:nth-child(2),
#analyticsHoursPanel .analytics-table td:nth-child(2) {
  width: 15%;
}

#analyticsHoursPanel .analytics-table th:nth-child(3),
#analyticsHoursPanel .analytics-table td:nth-child(3) {
  width: 9%;
}

#analyticsHoursPanel .analytics-table th:nth-child(4),
#analyticsHoursPanel .analytics-table td:nth-child(4) {
  width: 8%;
}

#analyticsHoursPanel .analytics-table td:nth-child(4) {
  white-space: nowrap;
}

#analyticsHoursPanel .analytics-table th:nth-child(5),
#analyticsHoursPanel .analytics-table td:nth-child(5) {
  width: 5%;
}

#analyticsHoursPanel .analytics-table td:nth-child(5) {
  white-space: nowrap;
}

#analyticsHoursPanel .analytics-table th:nth-child(6),
#analyticsHoursPanel .analytics-table td:nth-child(6) {
  width: 10%;
}

#analyticsHoursPanel .analytics-table th:nth-child(7),
#analyticsHoursPanel .analytics-table td:nth-child(7) {
  width: 9%;
}

#analyticsHoursPanel .analytics-table th:nth-child(8),
#analyticsHoursPanel .analytics-table td:nth-child(8) {
  width: 9%;
}

#analyticsHoursPanel .analytics-table th:nth-child(9),
#analyticsHoursPanel .analytics-table td:nth-child(9) {
  width: 9%;
}

#analyticsHoursPanel .analytics-table td:nth-child(9) {
  white-space: nowrap;
}

#analyticsHoursPanel .analytics-table th:nth-child(10),
#analyticsHoursPanel .analytics-table td:nth-child(10) {
  width: 18%;
}

/* Die feste Prozent-Breiten-/Umbruch-Optik oben ist nur auf breiten
   Bildschirmen sinnvoll (Spalten bleiben trotz Umbruch gut lesbar) - am
   Handy wird dieselbe Zeilenbreite in % so schmal, dass Wörter (word-break:
   break-word) buchstabenweise untereinander umbrechen ("D/a/t/u/m"), siehe
   gemeldeter Screenshot. Unter der Sidebar-Umschalt-Breite deshalb wieder auf
   natürliche Spaltenbreite + kein Umbruch zurückstellen - der Tabellen-
   Wrapper hat ohnehin schon horizontales Scrollen (.table-wrapper
   overflow-x: auto), genau wie bei jeder anderen Tabelle im Programm. */
@media (max-width: 860px) {
  #analyticsHoursPanel .analytics-table {
    table-layout: auto;
  }

  /* !important nötig, da die einzelnen th:nth-child(N)/td:nth-child(N)-Regeln
     oben (feste %-Breiten fürs Desktop-Layout) durch die zusätzliche
     :nth-child-Pseudoklasse höhere Spezifität haben als diese Regel hier -
     ohne !important würden sie trotz @media-Overrides weiter gewinnen. */
  #analyticsHoursPanel .analytics-table th,
  #analyticsHoursPanel .analytics-table td {
    width: auto !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #analyticsHoursPanel .analytics-table th .sort-btn {
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }
}

.analytics-table tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.analytics-table tr.is-selected {
  background: rgba(56, 189, 248, 0.3) !important;
}

.analytics-table tr.is-selected:nth-child(even) {
  background: rgba(56, 189, 248, 0.3) !important;
}

#analyticsHoursPanel .analytics-table tr.is-selected > td {
  background: rgba(56, 189, 248, 0.3) !important;
}

table tr.menu-row-selected > td {
  background: rgba(56, 189, 248, 0.3) !important;
}

.analytics-table tr {
  cursor: pointer;
}

#analyticsProjectReportSection .analytics-table tbody tr[data-project-id] > td {
  transition: background-color 0.12s ease;
}

#analyticsProjectReportSection .analytics-table tbody tr[data-project-id]:hover > td {
  background: rgba(56, 189, 248, 0.2);
}

#analyticsProjectReportSection .analytics-table tbody tr.project-negative:hover > td {
  background: rgba(255, 155, 165, 0.14) !important;
}

#analyticsHoursPanel .analytics-table tbody td {
  -webkit-user-select: none;
  user-select: none;
}

.analytics-subpanel {
  transition: opacity 0.2s ease;
}

.analytics-monthly-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 14px;
  overflow-x: auto;
  padding-top: 4px;
  scrollbar-width: thin;
}

.analytics-monthly-bar-row,
.analytics-monthly-scale-row {
  display: grid;
  grid-template-columns: minmax(110px, 140px) 1fr;
  gap: 12px;
  align-items: start;
  min-width: calc(var(--analytics-monthly-track-min-width, 220px) + 330px);
}

.analytics-monthly-bar-row {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.analytics-monthly-scale-row {
  padding-bottom: 2px;
}

.analytics-monthly-bar-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.analytics-monthly-label {
  font-size: 12px;
  color: var(--muted);
  padding-top: 2px;
}

.analytics-monthly-bars {
  display: grid;
  gap: 6px;
}

.analytics-monthly-scale-title {
  padding-top: 8px;
}

.analytics-monthly-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.analytics-monthly-legend {
  width: 74px;
  font-size: 11px;
  color: var(--muted);
  flex: 0 0 74px;
}

.analytics-monthly-bar {
  position: relative;
  z-index: 1;
  height: 12px;
  border-radius: 999px;
  min-width: 2px;
  overflow: hidden;
}

.analytics-monthly-track {
  position: relative;
  flex: 1 1 auto;
  min-width: var(--analytics-monthly-track-min-width, 120px);
  height: 12px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  overflow: visible;
}

.analytics-monthly-scale-track {
  position: relative;
  flex: 1 1 auto;
  min-width: var(--analytics-monthly-track-min-width, 220px);
  height: 24px;
}

/* Handy: Monats- und "Erwartet/Rechnungen"-Spalte waren mit fixen 110-140px
   bzw. 74px genauso breit wie am Desktop - auf einem schmalen Bildschirm
   ging dadurch der Löwenanteil der Breite für die Beschriftung drauf, bevor
   der eigentliche Balken überhaupt anfing. Zeilen-Gesamtbreite (min-width
   oben) bleibt gleich, die schmaleren Spalten hier geben den Platz einfach
   an die Balken-Spalte (1fr) weiter. */
@media (max-width: 640px) {
  .analytics-monthly-bar-row,
  .analytics-monthly-scale-row {
    grid-template-columns: minmax(58px, 76px) 1fr;
    gap: 6px;
  }

  .analytics-monthly-label {
    font-size: 11px;
  }

  .analytics-monthly-legend {
    width: 52px;
    flex: 0 0 52px;
  }
}

.analytics-monthly-scale-spacer {
  visibility: hidden;
}

.analytics-monthly-scale-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.analytics-monthly-scale-tick-last {
  transform: translateX(-100%);
}

.analytics-monthly-scale-tick::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 13px;
  width: 1px;
  height: 9px;
  background: rgba(148, 163, 184, 0.45);
}

.analytics-monthly-scale-tick-last::after {
  left: auto;
  right: 0;
}

.analytics-monthly-grid-line {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: rgba(148, 163, 184, 0.28);
  transform: translateX(-0.5px);
  pointer-events: none;
  z-index: 0;
}

.analytics-monthly-track-button {
  border: none;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.analytics-monthly-track-button:hover {
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.18);
}

.analytics-monthly-track-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3);
}

.analytics-monthly-bar-expected {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.92), rgba(142, 240, 193, 0.92));
}

.analytics-monthly-bar-invoices {
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.92), rgba(251, 191, 36, 0.92));
}

.analytics-monthly-bar-paid-overlay {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, rgba(194, 65, 12, 0.95), rgba(234, 88, 12, 0.95));
  border-radius: inherit;
  pointer-events: none;
}

.analytics-monthly-value {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  min-width: 86px;
  text-align: right;
  flex: 0 0 86px;
}

.analytics-monthly-target-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: rgba(248, 250, 252, 0.9);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.45);
  border-radius: 2px;
  transform: translateX(-1px);
  z-index: 2;
}

.analytics-monthly-detail-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: min(860px, 92vw);
}

.analytics-monthly-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.analytics-monthly-detail-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.analytics-monthly-detail-section.is-wide {
  grid-column: 1 / -1;
}

.analytics-monthly-detail-section h3 {
  margin: 0;
  font-size: 16px;
}

.analytics-monthly-detail-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.analytics-monthly-detail-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.analytics-monthly-detail-item.is-paid {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.24);
}

.analytics-monthly-detail-item.is-paid .analytics-monthly-detail-item-main strong,
.analytics-monthly-detail-item.is-paid .analytics-monthly-detail-item-main span,
.analytics-monthly-detail-item.is-paid .analytics-monthly-detail-item-main small,
.analytics-monthly-detail-item.is-paid .analytics-monthly-detail-item-value {
  color: rgba(226, 232, 240, 0.72);
}

.analytics-monthly-detail-item-summary {
  margin-top: 8px;
  background: rgba(15, 23, 42, 0.28);
  border-top-color: rgba(148, 163, 184, 0.34);
}

.analytics-monthly-detail-item-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.analytics-monthly-detail-item-main strong,
.analytics-monthly-detail-item-main span,
.analytics-monthly-detail-item-main small {
  overflow-wrap: anywhere;
}

.analytics-monthly-detail-item-main span,
.analytics-monthly-detail-item-main small {
  color: var(--muted);
}

.analytics-monthly-detail-item-value {
  font-weight: 700;
  white-space: nowrap;
}

.analytics-monthly-detail-item-value-negative {
  color: #f97316;
}

body.theme-light .analytics-monthly-detail-item {
  background: #ffffff;
  border-color: #d8e0e8;
}

body.theme-light .analytics-monthly-detail-item.is-paid {
  background: rgba(148, 163, 184, 0.14);
  border-color: rgba(148, 163, 184, 0.28);
}

body.theme-light .analytics-monthly-detail-item.is-paid .analytics-monthly-detail-item-main strong,
body.theme-light .analytics-monthly-detail-item.is-paid .analytics-monthly-detail-item-main span,
body.theme-light .analytics-monthly-detail-item.is-paid .analytics-monthly-detail-item-main small,
body.theme-light .analytics-monthly-detail-item.is-paid .analytics-monthly-detail-item-value {
  color: rgba(71, 85, 105, 0.82);
}

body.theme-light .analytics-monthly-detail-item-summary {
  background: rgba(148, 163, 184, 0.1);
}

@media (max-width: 860px) {
  .analytics-monthly-detail-body {
    min-width: 0;
  }

  .analytics-monthly-detail-grid {
    grid-template-columns: 1fr;
  }
}

.profit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  align-items: start;
}

.profit-total h2 {
  margin: 6px 0 0 0;
}

.profit-positive {
  color: #8ef0c1;
}

.profit-negative {
  color: #ff9ba5;
}

.badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
}

.badge-yes {
  background: rgba(142, 240, 193, 0.2);
  color: #8ef0c1;
}

.badge-no {
  background: rgba(255, 155, 165, 0.2);
  color: #ff9ba5;
}

.day-timeline {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  min-height: 1920px; /* 96 Slots à 20px (15-Min Raster) */
}

.time-slot {
  height: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding: 1px 8px;
  font-size: 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  /* KEIN touch-action:none hier (früherer Versuch, siehe Git-Historie) - das
     unterband am Handy auch normales Scrollen der Zeitleiste, weil der
     Browser Zieh-Gesten dann komplett an main.js übergibt, noch bevor per
     Haltezeit (siehe TIME_SLOT_LONG_PRESS_MS in main.js) feststeht, ob
     überhaupt eine Auswahl gemeint ist. touch-action bleibt bewusst "auto"
     (Standard) - main.js entscheidet stattdessen selbst pro Touch-Ereignis
     per preventDefault(), ob gescrollt oder eine Zeitspanne ausgewählt wird. */
}

.time-slot-hour {
  position: relative;
}

.time-slot-hour::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: rgba(255, 255, 255, 0.32);
  pointer-events: none;
}

body.theme-light .time-slot-hour {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

body.theme-light .time-slot-hour::before {
  background: rgba(15, 23, 42, 0.25);
  height: 1px;
}

.time-slot:last-child {
  border-bottom: none;
}

.time-slot .time-label {
  min-width: 40px;
  color: rgba(255, 255, 255, 0.85);
}

body.theme-light .time-slot .time-label {
  color: rgba(15, 23, 42, 0.6);
}

.time-slot-highlight .time-label,
.time-label-highlight {
  font-weight: 700;
  color: inherit;
}

.time-slot-highlight {
  background: rgba(142, 240, 193, 0.15);
}

body.theme-light .time-slot {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

body.theme-light .day-timeline {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.12);
}

body.theme-light .week-grid {
  background: transparent;
  border: none;
}

body.theme-light .time-entry {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

body.theme-light .time-form select {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.12);
}

.daily-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
}

.daily-grid input[type="number"] {
  width: 64px;
  text-align: center;
}

.daily-hours {
  width: 100%;
}

.daily-hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.daily-hours-table th,
.daily-hours-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.daily-hours-table th:first-child,
.daily-hours-table td:first-child {
  text-align: left;
}

.daily-hours-table input[type="date"] {
  width: 100%;
  min-width: 150px;
}

.daily-hours-table input[type="number"] {
  width: 64px;
  text-align: center;
}

.daily-hours-table .daily-hours-sum {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

.daily-hours-table .daily-hours-remove {
  width: 28px;
  height: 28px;
  line-height: 24px;
  padding: 0;
}

.input-row input[type="date"] {
  max-width: 220px;
}

.daily-sum {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.time-slot.selected {
  background: rgba(142, 240, 193, 0.16);
  color: var(--text);
}

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

.time-stepper input[type="time"] {
  flex: 1;
}

.time-stepper-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.time-stepper .tiny {
  padding: 4px 6px;
  min-width: 32px;
  font-size: 12px;
}

.time-block {
  position: absolute;
  left: 46px;
  right: 8px;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 10px;
  color: #0f172a;
  background: rgba(142, 240, 193, 0.8);
  border-left: 4px solid #5ce0c6;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: auto;
  z-index: 2;
  overflow: hidden;
}

.time-block.is-billed {
  background: rgba(148, 163, 184, 0.7);
  border-left-color: #94a3b8;
  color: #0f172a;
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.18);
}

.time-block.is-billed .time-range {
  color: #0f172a;
  opacity: 0.7;
}

.time-block.is-sick {
  background: color-mix(in srgb, var(--time-sick, #f87171) 20%, transparent);
  border-left-color: var(--time-sick, #f87171);
  color: #0f172a;
}

.time-block.is-sick .time-range {
  color: #0f172a;
  opacity: 0.7;
}

.time-block.is-training {
  background: rgba(251, 191, 36, 0.2);
  border-left-color: #f59e0b;
  color: #0f172a;
}

.time-block.is-training .time-range {
  color: #0f172a;
  opacity: 0.7;
}

.time-block.is-za {
  background: color-mix(in srgb, var(--time-za, #3b82f6) 18%, transparent);
  border-left-color: var(--time-za, #3b82f6);
  color: #ffffff;
}

.time-block.is-za .time-range {
  color: #ffffff;
  opacity: 0.9;
}

.time-block.is-pause {
  background: color-mix(in srgb, var(--time-pause, #06b6d4) 22%, transparent);
  border-left-color: var(--time-pause, #06b6d4);
  color: #ffffff;
}

.time-block.is-pause .time-range {
  color: #ffffff;
  opacity: 0.9;
}

.time-block.is-internal {
  background: color-mix(in srgb, var(--time-internal, #6366f1) 25%, transparent);
  border-left-color: var(--time-internal, #6366f1);
  color: #ffffff;
}

.time-block.is-internal .time-range {
  color: #ffffff;
  opacity: 0.9;
}

.time-block div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.time-block .time-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.2;
  padding-right: 34px;
}

.time-block .time-range {
  font-size: 9px;
  color: #0f172a;
  opacity: 0.8;
}

.time-block .delete-entry,
body.theme-light .time-block .delete-entry {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 1px;
  min-width: 0;
  min-height: 0;
  height: auto;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1;
  border: none;
  background: transparent;
  box-shadow: none;
}

.time-block .delete-entry.time-delete-btn,
body.theme-light .time-block .delete-entry.time-delete-btn {
  color: #ef4444;
}

.time-block .delete-entry.time-delete-btn:hover,
body.theme-light .time-block .delete-entry.time-delete-btn:hover {
  color: #dc2626;
}

.time-block .delete-entry.time-delete-btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.time-block .copy-entry,
body.theme-light .time-block .copy-entry {
  position: absolute;
  top: 2px;
  right: 20px;
  padding: 1px;
  min-width: 0;
  min-height: 0;
  height: auto;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1;
  border: none;
  background: transparent;
  box-shadow: none;
}

.time-block .delete-entry:hover,
.time-block .copy-entry:hover,
body.theme-light .time-block .delete-entry:hover,
body.theme-light .time-block .copy-entry:hover {
  border: none;
  background: transparent;
  box-shadow: none;
}

.time-block .copy-entry.time-copy-btn,
body.theme-light .time-block .copy-entry.time-copy-btn {
  color: #facc15;
}

.time-block .copy-entry.time-copy-btn:hover,
body.theme-light .time-block .copy-entry.time-copy-btn:hover {
  color: #eab308;
}

.time-block .copy-entry.time-copy-btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.time-block .handles {
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  cursor: row-resize;
  z-index: 3;
}

.time-block:not(.is-billed) {
  cursor: grab;
}
.time-block:not(.is-billed):active {
  cursor: grabbing;
}

.time-block .handle-top {
  top: -2px;
}

.time-block .handle-bottom {
  bottom: -2px;
}

body.time-resize-cursor,
body.time-resize-cursor * {
  cursor: row-resize !important;
}

.week-day .entries {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-entry {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

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

.time-entry .project {
  font-weight: 700;
}

.time-entry .hours-label {
  color: var(--muted);
  font-size: 12px;
}

.time-entry .delete-entry {
  padding: 4px 6px;
  min-width: 28px;
}

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

.time-form select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
}

@media (max-width: 900px) {
  .week-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

.time-selection-label {
  font-size: 12px;
  color: var(--muted);
}

.column {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: auto;
  box-shadow: var(--shadow);
}

.column.column-employee {
  background:
    linear-gradient(180deg, var(--column-accent-bg, transparent), transparent 180px),
    var(--panel);
  border-color: var(--column-accent-border, var(--border));
  box-shadow:
    inset 4px 0 0 var(--column-accent-stripe, transparent),
    0 0 0 1px var(--column-accent-glow, transparent),
    var(--shadow);
}

body.theme-light .column.column-employee {
  background:
    linear-gradient(180deg, var(--column-accent-bg, rgba(31, 191, 127, 0.08)), rgba(255, 255, 255, 0.82) 220px),
    #fbfcfe;
  border-color: var(--column-accent-border, rgba(148, 163, 184, 0.35));
  box-shadow:
    inset 5px 0 0 var(--column-accent-stripe, rgba(31, 191, 127, 0.35)),
    0 10px 28px rgba(16, 24, 40, 0.08);
}

.column header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.column h2 {
  margin: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.column h2 .count {
  color: var(--muted);
  font-size: 11px;
}

.add-card-btn {
  padding: 3px 7px;
  min-width: 28px;
  align-self: center;
  margin-top: -2px;
}

.column .column-body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 40px;
  height: auto;
  max-height: none;
  overflow: visible;
  padding-right: 4px;
}

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

.collapse-btn {
  padding: 3px 7px;
  min-width: 28px;
}

.column.drag-over {
  box-shadow: 0 0 0 2px rgba(142, 240, 193, 0.35), var(--shadow);
}

.column.column-employee.drag-over {
  box-shadow:
    inset 4px 0 0 var(--column-accent-stripe, transparent),
    0 0 0 2px rgba(142, 240, 193, 0.35),
    0 0 0 1px var(--column-accent-glow, transparent),
    var(--shadow);
}

.drop-target {
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  padding: 8px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px 4px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
}

.card.compact {
  padding: 4px;
}

.card.dragging {
  opacity: 0.6;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

#analyticsProjectsSection .card-head {
  margin-bottom: 2px;
}

.card.compact .card-head {
  margin-bottom: 2px;
}

.card-title {
  margin: 0;
  font-size: 12px;
  outline: none;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-due {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  margin-left: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
}

.card-due .due {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  cursor: pointer;
}

.card-due .due.ok {
  color: #7ee0ae;
  border-color: rgba(126, 224, 174, 0.5);
}

.card-due .due.today {
  color: #ffd37a;
  border-color: rgba(255, 211, 122, 0.55);
}

.card-due .due.overdue {
  color: #ff9ba5;
  border-color: rgba(255, 155, 165, 0.5);
}

.card-due .due.no-date {
  color: #8b95a6;
  border-color: rgba(139, 149, 166, 0.3);
  background: rgba(139, 149, 166, 0.04);
}
.card-due .due-clear {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0 4px;
  font-size: 0.8em;
  cursor: pointer;
  margin-left: 4px;
}
.card-due .due-clear:hover {
  color: var(--text);
}

/* Am Handy wirkte die Fertigstellungsdatum-Pille auf Kanban-Karten viel
   größer als dieselbe Pille (.card-due mit .home-due-inline) in der engen
   "bis"-Spalte der Desktop-Dashboard-Tabelle (siehe Screenshot vom Nutzer) -
   dort ist sie zwar dieselbe CSS-Klasse, wirkt aber durch die schmale
   Tabellenspalte optisch viel kompakter. Auf Nutzerwunsch am Handy auf ein
   ähnliches, kompakteres Maß verkleinert. Das eigentliche <input type=date>
   (.due-input) ist davon NICHT betroffen - das behält bewusst 16px
   (!important weiter unten), sonst zoomt iOS beim Fokussieren rein. */
body.is-standalone-client .card-due {
  font-size: 10px;
}

body.is-standalone-client .card-due .due {
  padding: 0 3px;
}

body.is-standalone-client .card-due .due-clear {
  padding: 0 2px;
  margin-left: 2px;
}

.board .card-meta {
  display: none;
}

.task-card {
  background: rgba(142, 240, 193, 0.12);
  border: 1px dashed rgba(142, 240, 193, 0.5);
  border-radius: 8px;
  padding: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text);
}

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

.task-notes-toggle {
  margin-left: 0;
}

.task-add-note {
  min-width: 20px;
}

.task-title-line {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-project-title {
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-title-inline {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-sep {
  color: var(--muted);
}

.task-due-inline {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  margin-left: auto;
}

.task-due-inline .due {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  cursor: pointer;
}

.task-due-inline .due.ok {
  color: #7ee0ae;
  border-color: rgba(126, 224, 174, 0.5);
}

.task-due-inline .due.today {
  color: #ffd37a;
  border-color: rgba(255, 211, 122, 0.55);
}

.task-due-inline .due.overdue {
  color: #ff9ba5;
  border-color: rgba(255, 155, 165, 0.5);
}

.task-due-input {
  margin-left: 6px;
}

.task-card .task-project {
  color: var(--muted);
  margin-top: 2px;
}

.task-card .task-date {
  color: var(--accent);
  margin-top: 2px;
}

.task-note-list {
  margin-top: 4px;
}

.card-meta .due {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  cursor: pointer;
}

.card-meta .due.ok {
  color: #7ee0ae;
  border-color: rgba(126, 224, 174, 0.5);
}

.card-meta .due.today {
  color: #ffd37a;
  border-color: rgba(255, 211, 122, 0.55);
}

.card-meta .due.overdue {
  color: #ff9ba5;
  border-color: rgba(255, 155, 165, 0.5);
}

.due-edit {
  padding: 1px 3px;
  font-size: 7px;
  line-height: 1;
  margin-left: 6px;
  vertical-align: super;
}

.due-input {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 4px 6px;
  font: inherit;
  /* .card-due erbt font-size:12px - unter 16px zoomt iOS Safari beim
     Fokussieren eines Feldes automatisch die ganze Seite hinein (bekanntes
     WebKit-Verhalten, unabhängig vom eigentlichen Datepicker-Bug unten bei
     due-picker-idle). Bleibt als Vorsichtsmaßnahme gegen diesen Zoom-Effekt.
     !important nötig: die generische Regel "input:not([type=checkbox])..."
     (siehe weiter unten in dieser Datei) hat durch die zwei :not()-Klauseln
     höhere Spezifität als .due-input allein und setzt per "font: inherit"
     die Schriftgröße sonst wieder zurück auf die geerbten 12px von
     .card-due. */
  font-size: 16px !important;
  margin-left: 0;
  min-width: 130px;
  z-index: 2;
}

/* Statt display:none (wie das generische .is-hidden): display:none entfernt
   das Feld komplett aus dem Layout/Fokus-Baum, wodurch iOS Safari einen
   direkt danach im selben Tick aufgerufenen focus()/showPicker() nicht
   zuverlässig verarbeitet - der native Picker geht sofort wieder zu. Mit
   opacity+pointer-events bleibt das (absolut positionierte, also ohnehin
   layoutneutrale) Feld durchgehend "echt" fokussierbar. */
.due-input.due-picker-idle {
  opacity: 0;
  pointer-events: none;
}

.card-due.is-editing .due {
  visibility: hidden;
}

.card-title:focus {
  box-shadow: 0 0 0 2px rgba(142, 240, 193, 0.4);
  border-radius: 6px;
}

.icon-button {
  padding: 2px 4px;
  font-weight: 700;
  min-width: 20px;
}

.note-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.card.compact .note-list {
  margin-bottom: 0;
}

.note-list.is-hidden {
  display: none;
}

.is-hidden {
  display: none !important;
}

.note {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  font-size: 8px;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

 .note .note-text {
   font-size: 12px;
   line-height: 1.4;
 }

body.theme-light .note {
  background: rgba(255, 255, 255, 0.7);
}

.note strong {
  color: var(--accent);
  font-weight: 700;
}

.note .note-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.note .note-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.note .note-checkbox span {
  width: 16px;
  height: 16px;
  border-radius: 6px;
}

.note.note-done .note-text {
  color: var(--muted);
  text-decoration: line-through;
}

.note-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.note-input textarea {
  min-height: 52px;
  resize: vertical;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 6px;
  font: inherit;
}

.note-actions {
  display: flex;
  gap: 6px;
}

.note-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  width: 100%;
  flex: 1 1 100%;
}

.note-edit textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 10px;
  font-size: 14px;
  line-height: 1.45;
  font-family: inherit;
}

.note-edit .note-actions {
  gap: 12px;
}

.note-edit .note-actions button {
  min-height: 44px;
  padding: 16px 24px;
  font-size: 14px;
}

.add-note {
  padding: 2px 6px;
  border-style: solid;
  min-width: 20px;
  align-self: flex-start;
}

.add-card {
  margin-top: 6px;
}

.add-card-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

.small-label {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.add-card-form input,
.add-card-form textarea {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 10px;
  font: inherit;
  outline: none;
}

.add-card-form input:focus,
.add-card-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(142, 240, 193, 0.3);
}

.add-card-form textarea {
  min-height: 56px;
  resize: vertical;
}

.primary.small {
  padding: 8px 12px;
  width: fit-content;
}

.modern-button {
  border-radius: 999px;
  padding: 6px 14px;
  background: linear-gradient(120deg, rgba(142, 240, 193, 0.25), rgba(94, 224, 198, 0.15));
  border-color: rgba(142, 240, 193, 0.6);
  box-shadow: 0 10px 24px rgba(142, 240, 193, 0.2);
  color: var(--text);
}

.modern-button:hover {
  background: linear-gradient(120deg, rgba(142, 240, 193, 0.4), rgba(94, 224, 198, 0.25));
  box-shadow: 0 12px 28px rgba(142, 240, 193, 0.35);
}

.modern-primary {
  border-radius: 999px;
  padding: 6px 14px;
  background: linear-gradient(120deg, rgba(142, 240, 193, 0.35), rgba(94, 224, 198, 0.2));
  border-color: rgba(142, 240, 193, 0.6);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(142, 240, 193, 0.2);
}

.modern-primary:hover {
  background: linear-gradient(120deg, rgba(142, 240, 193, 0.5), rgba(94, 224, 198, 0.3));
  box-shadow: 0 12px 28px rgba(142, 240, 193, 0.35);
}

.modern-secondary {
  border-radius: 999px;
  padding: 6px 12px;
  border-color: rgba(148, 163, 184, 0.5);
  background: rgba(148, 163, 184, 0.08);
  color: var(--text);
}

.modern-secondary:hover {
  background: rgba(148, 163, 184, 0.16);
}

.icon-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  min-width: 0;
}

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

.notes-toggle {
  font-size: 13px;
}

.edit-btn {
  font-size: 13px;
}

.dialog {
  display: none;
  position: fixed;
  inset: 0;
  margin: 0;
  /* Chrome's UA stylesheet gives every <dialog> a default
     max-width/max-height of calc(100% - 6px - 2em) (~38px less than the
     viewport at the default 16px font-size) meant for the browser's own
     unstyled centering. Never reset here, so despite inset:0 the dialog
     was capped ~38px short of the real viewport width (measured 352px
     of 390px on a phone) - reset it so this custom flex-centering gets
     the full viewport to work with. */
  max-width: none;
  max-height: none;
  /* The UA stylesheet also gives dialog:modal `width: fit-content;
     height: fit-content` - inset:0 alone doesn't override that, so
     without this the box shrinks to its content and (with margin:0
     above killing the UA's own auto-margin centering) sticks flush to
     the top-left instead of filling the viewport for our flex-centering
     below to work with. */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--bg);
  z-index: 20010;
  pointer-events: none;
}

.dialog[open] {
  /* !important needed: the generic dialog[open]{display:block !important}
     rule below (for non-.dialog dialogs like #pdfProgressOverlay) would
     otherwise win, killing the flex-centering here. That leaves the outer
     <dialog> as a plain block box while .dialog form still tries to
     scroll internally - two ambiguous nested scroll containers, which is
     exactly what breaks touch-scroll on iOS for tall modals (first hit:
     the Protokoll-erstellen form). Same fix already used for
     .chat-lightbox-dialog[open] below. */
  display: flex !important;
  pointer-events: auto;
}

dialog {
  display: none !important;
  border: none;
  outline: none;
}

dialog[open] {
  display: block !important;
  border: none;
  outline: none;
}


.dialog.wide-dialog {
  width: min(960px, 96vw);
}

/* "Projekt öffnen"-Dialog ist sehr kurz (nur ein Suchfeld) - das
   Autocomplete-Dropdown (.inline-search, position:absolute) würde sonst am
   unteren Rand der Form abgeschnitten, weil ".dialog form" oben
   overflow-y:auto setzt und das jeden absolut positionierten Nachfahren an
   der eigenen Boxgrenze clippt, auch wenn die Form selbst gar nicht scrollen
   muss. overflow:visible (beide Achsen - sonst erzwingt die CSS-Spec bei nur
   einer sichtbaren Achse wieder "auto") lässt die Liste wie sonst im
   Programm üblich frei über den Dialogrand hinausragen. */
#avaSelectProjectForm {
  overflow: visible;
}

.dialog::backdrop {
  background: var(--bg);
}

.dialog form {
  width: min(880px, 96vw);
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  border: none;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  padding: 0;
  pointer-events: auto;
}

/* Beleg-Vorschau: eigener Dialog mit sichtbarem Schließen-Button statt
   window.open(..., "_blank") - als "Zum Homebildschirm hinzugefügte"
   Web-App (kein Tab-Umschalter) gab es sonst keine Möglichkeit mehr
   zurückzukommen, nachdem ein Beleg geöffnet wurde. Braucht die volle
   Dialoghöhe (statt der üblichen max-height:90vh mit eigenem Scroll oben),
   damit die eingebettete Datei genug Platz hat - deshalb hier überschrieben
   und selbst um Kopfzeile + Rahmen (iframe scrollt/zoomt selbst) gekümmert.
   */
#receiptPreviewDialog .receipt-preview-panel {
  height: 90vh;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.receipt-preview-body {
  flex: 1;
  display: flex;
  padding: 0;
  overflow: hidden;
  min-height: 0;
}

.receipt-preview-frame {
  width: 100%;
  height: 100%;
  flex: 1;
  border: none;
  background: #fff;
}

body.theme-light .dialog form {
  background: #ffffff;
  border: none;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

#userInfoDialog .dialog-card {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
  padding: 20px;
  color: var(--text);
  min-width: 260px;
}

.user-info-changelog {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  max-height: 280px;
  overflow: auto;
}

.user-info-changelog-entry {
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
}

.user-info-changelog-entry header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.user-info-changelog-entry header span {
  color: var(--muted);
  font-size: 12px;
}

.user-info-changelog-entry ul {
  margin: 0;
  padding-left: 18px;
}

.user-info-changelog-entry li {
  margin: 2px 0;
}

body.theme-light #userInfoDialog .dialog-card {
  background: #ffffff;
  color: #111;
}

#billingProjectSearchDialog,
#offerProjectSearchDialog,
#protocolProjectSearchDialog {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  z-index: 80;
}

#billingProjectSearchDialog .dialog-body,
#offerProjectSearchDialog .dialog-body,
#protocolProjectSearchDialog .dialog-body,
.mini-dialog .mini-body {
  gap: 6px;
}

#billingProjectSearchList button,
#billingProjectResults button,
#offerProjectSearchList button,
#offerProjectResults button,
#protocolProjectSearchList button,
.mini-dialog #offerCustomerSearchList button,
.mini-dialog #offerCustomerResults button {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 0;
  border: 1px solid var(--border);
  border-left: none;
  border-right: none;
  background: #ffffff;
  color: var(--text);
  box-shadow: none;
}

#billingProjectSearchList button:first-child,
#billingProjectResults button:first-child,
#offerProjectSearchList button:first-child,
#offerProjectResults button:first-child,
#protocolProjectSearchList button:first-child,
.mini-dialog #offerCustomerSearchList button:first-child,
.mini-dialog #offerCustomerResults button:first-child {
  border-top: 1px solid var(--border);
}

#billingProjectSearchList button:hover,
#billingProjectResults button:hover,
#offerProjectSearchList button:hover,
#offerProjectResults button:hover,
#protocolProjectSearchList button:hover,
.mini-dialog #offerCustomerSearchList button:hover,
.mini-dialog #offerCustomerResults button:hover {
  background: #f3f5f8;
}

.modern-user-dialog form {
  width: min(960px, 96vw);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.96);
  color: var(--text);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.35);
  font-size: 12px;
}

body.theme-light .modern-user-dialog form {
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.modern-user-dialog .dialog-head {
  padding: 12px 16px 2px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  background: transparent;
}

body.theme-light .modern-user-dialog .dialog-head,
body.theme-light .modern-user-dialog .dialog-actions {
  border-color: rgba(15, 23, 42, 0.08);
}

.modern-user-dialog .dialog-head h2 {
  font-size: 16px;
  letter-spacing: 0.01em;
}

.modern-user-dialog .dialog-body {
  padding: 0 16px 10px 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}

.modern-user-dialog .dialog-body .input-row {
  margin: 0;
}

.modern-user-dialog .dialog-body .input-row-stacked {
  grid-column: 1 / -1;
}

.modern-user-dialog .dialog-actions {
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  background: transparent;
}

.modern-user-dialog input,
.modern-user-dialog select,
.modern-user-dialog textarea {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

body.theme-light .modern-user-dialog input,
body.theme-light .modern-user-dialog select,
body.theme-light .modern-user-dialog textarea {
  background: #ffffff;
  border-color: var(--border);
  color: var(--text);
}

.modern-user-dialog select {
  color-scheme: dark;
}

.modern-user-dialog select option,
.modern-user-dialog select optgroup {
  background: var(--panel-solid);
  color: var(--text);
}

body.theme-light .modern-user-dialog select {
  color-scheme: light;
}

body.theme-light .modern-user-dialog select option,
body.theme-light .modern-user-dialog select optgroup {
  background: #ffffff;
  color: var(--text);
}

.modern-user-dialog input:focus,
.modern-user-dialog select:focus,
.modern-user-dialog textarea:focus {
  outline: none;
  border-color: rgba(142, 240, 193, 0.6);
  box-shadow: 0 0 0 2px rgba(142, 240, 193, 0.18);
}

.modern-user-dialog label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.modern-user-dialog .file-row {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 6px 8px;
}

body.theme-light .modern-user-dialog .file-row,
body.theme-light .modern-user-dialog .table-wrapper,
body.theme-light .modern-user-dialog .signature-preview,
body.theme-light .modern-user-dialog .dialog-body .input-row {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.08);
}

.modern-user-dialog .input-row-stacked label {
  margin-bottom: 4px;
}

.modern-user-dialog .table-wrapper {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.03);
  max-width: 100%;
  overflow-x: auto;
}

.modern-user-dialog .daily-hours-table th,
.modern-user-dialog .daily-hours-table td {
  padding: 8px 10px;
}

.modern-user-dialog .daily-hours-table th {
  color: rgba(226, 232, 240, 0.7);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.04);
}

body.theme-light .modern-user-dialog .daily-hours-table th {
  color: var(--muted);
  background: #f3f5f8;
}

.modern-user-dialog .daily-hours-table td {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

body.theme-light .modern-user-dialog .daily-hours-table td {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

.modern-user-dialog .dialog-actions .primary {
  border-radius: 10px;
  padding: 7px 14px;
  box-shadow: none;
}

.modern-user-dialog .dialog-actions .ghost {
  border-radius: 10px;
}

.modern-user-dialog .signature-preview {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.03);
  padding: 6px;
}

.modern-user-dialog .dialog-body .input-row {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 6px 8px;
}

.modern-user-dialog .dialog-body .input-row label {
  min-width: 120px;
}

.modern-user-dialog .dialog-body .input-row input,
.modern-user-dialog .dialog-body .input-row select,
.modern-user-dialog .dialog-body .input-row textarea {
  flex: 1;
  min-width: 0;
}

.modern-user-dialog #userExitDate.is-unset-date {
  color: #9ca3af;
  font-style: italic;
}

.dialog.wide-dialog form {
  width: min(1100px, 96vw);
  max-width: 100%;
  overflow-x: hidden;
}

.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 20px 8px 20px;
  gap: 12px;
}

.dialog-body {
  padding: 0 20px 12px 20px;
  display: grid;
  gap: 16px;
  overflow: visible;
}

.user-info-version {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.user-info-year {
  text-align: center;
  font-size: 0.85rem;
  margin: 0;
  color: #9da1b5;
}

.user-info-close {
  min-width: 38px;
  min-height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 1.15rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, transform 0.2s ease;
}

.user-info-close:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.03);
}

.user-info-footer {
  text-align: center;
  font-size: 0.85rem;
  margin: 0;
  color: #9da1b5;
}

.user-info-footer-symbol {
  font-weight: 600;
  color: #fff;
}

.user-info-rights {
  letter-spacing: 0.04em;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px 18px 20px;
}

.dialog button {
  border-radius: 12px;
  padding: 8px 14px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0;
  box-shadow: none;
}

.dialog button.primary {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.4);
  color: #e2e8f0;
  font-weight: 600;
}

.dialog button.ghost {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.4);
  color: #e2e8f0;
  box-shadow: none;
}

.dialog button:hover {
  background: #1e293b;
  border-color: rgba(94, 234, 212, 0.55);
  color: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2, 8, 23, 0.35);
}

.dialog button:active {
  transform: translateY(0);
}

body.theme-light .dialog button {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.4);
  color: #1f2937;
}

body.theme-light .dialog button.primary {
  background: #1fbf7f;
  border-color: #19a46d;
  color: #ffffff;
}

body.theme-light .dialog button.ghost {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.4);
  color: #1f2937;
}

body.theme-light .dialog button:hover {
  background: #f3f5f8;
  border-color: rgba(31, 191, 127, 0.35);
  color: #111827;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

body.theme-light .dialog button.primary:hover {
  background: #19a46d;
  border-color: #15865a;
  color: #ffffff;
}

.dialog .dialog-head .ghost,
.dialog .dialog-head .icon-ghost {
  padding: 6px 10px;
  border-radius: 999px;
}

dialog[open] .dialog-actions {
  display: flex;
}

.dialog.view-only .dialog-actions {
  display: none !important;
}
.dialog .input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: visible;
  flex-wrap: wrap;
  /* Flex-Items sind ohne das per Default min-width:auto - verhindert, dass
     sie unter ihre Inhalts-Mindestbreite schrumpfen. Das reißt Zeilen mit
     breitem Inhalt (z.B. die Ansprechpartner-Tabelle, siehe .contacts-table
     unten) aus dem Dialog-Rahmen heraus, statt intern zu scrollen. */
  min-width: 0;
}

.dialog .input-row small {
  width: 100%;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.dialog .input-row.input-row-stacked {
  flex-direction: column;
  align-items: stretch;
}

.input-row.has-inline-search {
  position: relative;
  overflow: visible;
}

.input-row.has-inline-search .inline-search-field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.inline-search {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
  z-index: 200;
  max-height: 240px;
  overflow: auto;
  padding: 4px 0;
  color: #0f172a !important;
}

.mini-dialog .inline-search {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15);
  position: relative;
  z-index: 40000;
}

.inline-search-list {
  display: grid;
}

.inline-search-list button {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--border);
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: none;
}

.mini-dialog .inline-search-list button {
  background: #ffffff;
}

.mini-dialog .inline-search-list button {
  color: #0f172a !important;
}

.mini-dialog .inline-search-list button:hover {
  background: #eef2f7;
}

.inline-search-list button:first-child {
  border-top: none;
}

.inline-search-list button:hover {
  background: rgba(255, 255, 255, 0.08);
}

body.theme-light .inline-search {
  background: #ffffff !important;
  color: #0f172a !important;
}

.custom-dropdown-wrapper {
  position: relative;
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  z-index: 0;
}

#offerModal .custom-dropdown-wrapper {
  z-index: 0;
}

#offerModal .custom-dropdown-wrapper:focus-within {
  z-index: 60020;
}

.custom-dropdown-wrapper input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 8px 10px;
  background: rgba(6, 10, 18, 0.98);
  color: #e9eef8;
}

#offerAssignProjectInput {
  color: var(--text) !important;
  caret-color: var(--text);
}

#offerAssignCustomerInput {
  color: var(--text) !important;
  caret-color: var(--text);
}

#offerAssignProjectInput:-webkit-autofill,
#offerAssignProjectInput:-webkit-autofill:hover,
#offerAssignProjectInput:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  box-shadow: 0 0 0 1000px rgba(6, 10, 18, 0.98) inset !important;
}

#offerAssignCustomerInput:-webkit-autofill,
#offerAssignCustomerInput:-webkit-autofill:hover,
#offerAssignCustomerInput:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  box-shadow: 0 0 0 1000px rgba(6, 10, 18, 0.98) inset !important;
}

body.theme-light #offerAssignProjectInput:-webkit-autofill,
body.theme-light #offerAssignProjectInput:-webkit-autofill:hover,
body.theme-light #offerAssignProjectInput:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

body.theme-light #offerAssignCustomerInput:-webkit-autofill,
body.theme-light #offerAssignCustomerInput:-webkit-autofill:hover,
body.theme-light #offerAssignCustomerInput:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

.custom-dropdown-toggle {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 8px 10px;
  background: rgba(6, 10, 18, 0.98);
  color: #e9eef8;
  font: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}

.custom-dropdown-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  background: rgba(6, 10, 18, 0.98);
  border-radius: 12px;
}

.custom-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: rgba(6, 10, 18, 0.98);
  border: 1px solid var(--border);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
  border-radius: 10px;
  max-height: 250px;
  overflow-y: auto;
  z-index: 50010;
  overscroll-behavior: contain;
  color: #e9eef8;
}

.custom-dropdown.hidden {
  display: none;
}

.custom-dropdown button {
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: rgba(6, 10, 18, 0.98);
  text-align: left;
  color: #e9eef8;
  font: inherit;
  cursor: pointer;
}

.custom-dropdown button:hover {
  background: rgba(255, 255, 255, 0.09);
}

.dialog #offerCustomerDropdown,
.dialog #offerCustomerDropdown button {
  background: var(--bg) !important;
}

.dialog #offerCustomerDropdown {
  border-color: rgba(148, 163, 184, 0.32);
}

.custom-dropdown-empty {
  padding: 8px 10px;
  color: #93a2bf;
}

.custom-dropdown-panel .custom-dropdown-search {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  outline: none;
  font: inherit;
  color: #e9eef8;
  background: rgba(10, 16, 30, 0.98);
}

.custom-dropdown-panel .custom-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.custom-dropdown-panel .custom-dropdown-list li + li button {
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

#offerCustomerSearchDialog {
  display: none !important;
}

#offerModal .inline-search {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.18);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
  z-index: 40005;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  border-radius: 12px;
  padding: 4px 0;
  max-height: 260px;
  overflow-y: auto;
}

#offerModal .input-row.has-inline-search {
  z-index: 0;
  position: relative;
}

#offerModal .inline-search-list button {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: #0f172a;
  font: inherit;
}

#offerModal .inline-search-list button:hover {
  background: rgba(15, 23, 42, 0.05);
}

.context-menu {
  position: fixed;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.15);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15);
  border-radius: 10px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1000;
  min-width: 160px;
}

.context-menu button {
  border: none;
  background: transparent;
  padding: 8px 12px;
  text-align: left;
  color: #0f172a;
  border-radius: 8px;
  font-weight: 600;
}

.context-menu button:hover {
  background: rgba(15, 23, 42, 0.05);
}

body.theme-light .inline-search-list button:hover {
  background: #f3f5f8;
}

.dialog .input-row.input-row-stacked label {
  min-width: 0;
}

.dialog .input-row input:not([type="checkbox"]),
.dialog .input-row select,
.dialog .input-row textarea {
  flex: 1;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  padding: 10px 12px;
  min-height: 40px;
}

.dialog .input-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  min-height: auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.dialog .input-row textarea {
  min-height: 80px;
  resize: vertical;
}

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

.signature-preview {
  max-height: 20mm;
  width: auto;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.04);
}

.invoice-preview-overlay {
  position: fixed;
  inset: 0;
  background: #030712;
  display: block;
  z-index: 2147483647;
  overflow: hidden;
  pointer-events: auto;
  height: 100vh;
  backdrop-filter: none;
}

.invoice-preview-panel {
  width: 100%;
  min-height: 0;
  height: 100vh;
  background: #111827;
  border-radius: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: auto;
  padding-top: 0;
}

.preview-scroll {
  height: 100%;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  inset: 0;
  pointer-events: auto;
  /* Was pan-y only, which blocks pinch-zoom and horizontal panning even
     though overflow-x:auto above expects both to work - needed now that
     the preview iframe renders at natural size on narrow screens. */
  touch-action: manipulation;
}

.preview-scroll .dialog-head {
  pointer-events: auto;
}

.preview-scroll .dialog-head .dialog-head-actions,
.preview-scroll .dialog-head button {
  pointer-events: auto;
}

.preview-scroll::after {
  content: "";
  display: block;
  height: 60px;
}

.preview-open {
  overflow: hidden;
}

.invoice-preview-panel .dialog-head {
  background: #111827;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10005;
  pointer-events: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Der eigentliche Schließen-Button der Vorschau (data-close-preview "×")
     sitzt hier in der Kopfzeile, nicht im separaten #previewToolbar (das war
     die falsche Stelle beim ersten Versuch) - Nutzer-Meldung: "X" verschwindet
     im Homescreen-Modus (apple-mobile-web-app-status-bar-style:
     black-translucent, siehe index.html) hinter der iOS-Statusleiste, weil
     "top: 0" ohne Sicherheitsabstand die Kopfzeile direkt unter die
     Statusleiste legt. Gleiches env(safe-area-inset-top)-Muster wie überall
     sonst in der App.
     */
  padding-top: calc(18px + env(safe-area-inset-top));
}

.invoice-preview-panel .dialog-head .dialog-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 21010;
  pointer-events: auto !important;
}

.invoice-preview-panel .dialog-head .dialog-head-actions .ghost {
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.6);
  position: relative;
  z-index: 21011;
  pointer-events: auto !important;
}

.invoice-preview-panel .dialog-head .dialog-head-actions .ghost:hover {
  background: #1f2937;
  color: #f8fafc;
}

/* Printing the embedded PDF.js viewer isn't reliable on mobile Safari (see
   triggerPreviewPrint in main.js) - hide the button there so mobile users
   go through "PDF" (export) + the OS's own print flow on the saved file
   instead, which always works. */
@media (max-width: 640px) {
  .invoice-preview-panel .dialog-head-actions [data-print-preview] {
    display: none;
  }
}

.invoice-preview-panel .dialog-head button {
  pointer-events: auto;
}

.invoice-preview-panel .dialog-head * {
  pointer-events: auto;
}

.invoice-preview-panel .dialog-body {
  padding: 0 20px 20px 20px;
  background: #111827;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.preview-open .invoice-preview-panel .dialog-body {
  overflow-y: auto;
}

.invoice-preview-panel .dialog-body::-webkit-scrollbar {
  width: 12px;
}

.invoice-preview-panel .dialog-body::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.5);
  border-radius: 999px;
}

.invoice-preview-panel .dialog-body::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}

#previewToolbar {
  position: fixed;
  /* Im Homescreen/PWA-Modus (Nutzer-Meldung: "X" zum Schließen der PDF-
     Vorschau verschwindet hinter dem Handy-Header) legt sich die iOS-
     Statusleiste über fixe Elemente, die keinen Sicherheitsabstand
     einrechnen - gleiches env(safe-area-inset-top)-Muster wie überall sonst
     in der App (siehe z.B. .topbar/.mobile-bottom-nav weiter unten). */
  top: calc(12px + env(safe-area-inset-top));
  right: 16px;
  display: none;
  gap: 8px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: none;
  box-shadow: none;
  z-index: 20000;
  pointer-events: auto !important;
  transform: translateZ(0);
}

#previewToolbar.preview-toolbar-inline {
  position: static;
  margin-left: auto;
  top: auto;
  right: auto;
  box-shadow: none;
}

#previewToolbar .preview-toolbar-btn {
  border-radius: 999px;
  padding: 8px 16px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  pointer-events: auto !important;
}

#previewToolbar .preview-toolbar-btn:hover {
  background: #1f2937;
  color: #f8fafc;
  transform: translateY(-1px);
}

#previewToolbar .preview-toolbar-btn.preview-toolbar-primary {
  background: linear-gradient(120deg, #8ef0c1, #5ee0c6);
  color: #0c132c;
  border-color: transparent;
  box-shadow: 0 12px 24px rgba(142, 240, 193, 0.3);
}

#previewToolbar .preview-toolbar-btn.preview-toolbar-primary:hover {
  background: #9af5cc;
  transform: translateY(-1px);
}

#previewToolbar .preview-toolbar-btn.is-hover {
  background: #1f2937;
  color: #f8fafc;
  transform: translateY(-1px);
}

#previewToolbar .preview-toolbar-btn.preview-toolbar-primary.is-hover {
  background: #9af5cc;
  transform: translateY(-1px);
}

.invoice-preview-body {
  /* PDF.js experiment: the PDF renders via our own bundled PDF.js viewer
     (pdfjs/web/viewer.html) inside this iframe - a normal same-origin web
     page, not the browser's native PDF plugin, so it sidesteps both prior
     problems: Safari's embedded-PDF viewer lacking zoom/scroll, and
     standalone/home-screen PWAs having no tab to navigate back from. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  flex: 1;
  width: 100%;
  padding: 0;
}

.invoice-preview-frame {
  width: 100%;
  height: 100%;
  flex: 1;
  display: block;
  border: none;
  background: #38393a;
  pointer-events: auto;
}

.invoice-preview-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  font-family: Arial, sans-serif;
  color: #8a93a6;
  background: #1f2530;
}

.invoice-preview-status.invoice-preview-status-error {
  color: #f87171;
}

.invoice-preview-status.hidden {
  display: none;
}

.preview-pdf-wrapper iframe {
  width: min(210mm, 100%);
  max-width: 210mm;
  height: calc(297mm - 54px);
  margin: 0;
}

.preview-images {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  padding: 12px 0 24px;
  width: min(210mm, 100%);
  min-height: 0;
  overflow: visible;
}

.preview-image-wrapper {
  width: 100%;
  max-width: 210mm;
  aspect-ratio: 210 / 297;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
}

.preview-pdf-wrapper {
  width: min(210mm, 100%);
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  flex: 0 0 auto;
}

.preview-image {
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
  object-fit: contain;
}

.preview-loading {
  color: #e2e8f0;
  font-size: 14px;
  justify-content: center;
  min-height: 120px;
}

.preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  position: relative;
  z-index: 10001;
}

#previewFloatingActions {
  position: fixed;
  top: 12px;
  right: 16px;
  display: flex;
  gap: 8px;
  z-index: 10002;
  pointer-events: auto;
}

#previewFloatingActions button {
  cursor: pointer !important;
  pointer-events: auto;
}

.preview-actions button {
  cursor: pointer !important;
}

.preview-primary {
  border-radius: 999px;
  padding: 6px 14px;
  background: linear-gradient(120deg, rgba(142, 240, 193, 0.35), rgba(94, 224, 198, 0.2));
  border-color: rgba(142, 240, 193, 0.6);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(142, 240, 193, 0.2);
}

.preview-primary:hover {
  background: linear-gradient(120deg, rgba(142, 240, 193, 0.5), rgba(94, 224, 198, 0.3));
  box-shadow: 0 12px 28px rgba(142, 240, 193, 0.35);
}

.preview-secondary {
  border-radius: 999px;
  padding: 6px 12px;
  border-color: rgba(148, 163, 184, 0.5);
  background: rgba(148, 163, 184, 0.08);
  color: var(--text);
}

.preview-secondary:hover {
  background: rgba(148, 163, 184, 0.16);
}

.rich-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  --rich-control-size: 28px;
  /* Bezugsrahmen für .color-input-hidden (position:absolute, kein eigenes
     top/left) - ohne das positioniert sich das versteckte type="color"-Feld
     relativ zum nächsten positionierten Vorfahren (oder gar nicht), landet
     dadurch weit außerhalb der Toolbar und erzwingt in schmalen, scrollbaren
     Containern (z.B. dieser AVA-Dialog) einen horizontalen Scrollbalken,
     obwohl optisch nichts übersteht. */
  position: relative;
}

.rich-toolbar .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--rich-control-size);
  line-height: 1;
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 0 10px;
}

.rich-toolbar .color-trigger {
  width: var(--rich-control-size);
  padding: 0;
}

.rich-toolbar .color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: #111111;
  border: 1px solid rgba(148, 163, 184, 0.55);
}

.color-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.context-menu {
  position: fixed;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0f172a;
  color: var(--text);
  box-shadow: var(--shadow);
  z-index: 30000;
}

.context-menu button {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.context-menu button:hover {
  background: rgba(255, 255, 255, 0.08);
}

body.theme-light .context-menu button:hover {
  background: #f3f5f8;
}

body.theme-light .context-menu {
  background: #ffffff;
}

.offers-table tbody tr.offer-assigned {
  background: rgba(142, 240, 193, 0.12) !important;
}

.offers-table tbody tr.offer-not-received {
  background: rgba(245, 158, 11, 0.12) !important;
}

.offer-assigned-badge,
.offer-not-received-badge {
  margin-left: 6px;
  vertical-align: middle;
}

.offer-not-received-badge {
  color: #7c3f00;
  background: #f59e0b;
  border-color: rgba(245, 158, 11, 0.65);
}

.home-offers-card {
  margin-top: 18px;
}

.home-overdue-invoices-card {
  margin-top: 18px;
}

.home-offers-table table {
  min-width: 980px;
}

.home-overdue-invoices-table table {
  min-width: 1180px;
}

.rich-toolbar .color-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.rich-toolbar input[type="color"] {
  width: var(--rich-control-size);
  height: var(--rich-control-size);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #0a0f1f;
  flex: 0 0 auto;
}

.rich-editor {
  min-height: 120px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--panel);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}

body.settings-page .settings-panel#tab-invoice .rich-editor,
body.settings-page .settings-panel#tab-offers .rich-editor {
  min-height: 180px;
}

.rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
}

.rich-editor .rich-input {
  color: var(--text);
}

#billingModal .rich-input,
#billingModal .rich-input * {
  color: var(--text) !important;
}


.rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-radius: 10px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  margin-bottom: 6px;
}

.rich-toolbar .ghost {
  color: var(--text);
  border-color: transparent;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 4px 8px;
}

.rich-toolbar .rich-size-select {
  height: var(--rich-control-size);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 0 8px;
  min-width: 104px;
}

#billingPaymentTerms {
  min-height: 120px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 10px 12px;
  resize: vertical;
}

#billingPaymentTerms:focus {
  outline: 2px solid rgba(103, 243, 209, 0.6);
  outline-offset: -2px;
}

.dialog .row-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.dialog .row-actions button {
  padding: 4px 8px;
  min-width: 32px;
}

.dialog .input-row label {
  min-width: 90px;
}

#userDialog .dialog-body {
  max-height: 70vh;
  overflow-y: auto;
  gap: 8px;
}

#userDialog .input-row label {
  font-size: 11px;
  color: var(--muted);
}

#userDialog input,
#userDialog select,
#userDialog textarea {
  font-size: 12px;
  padding: 8px;
}

.user-date-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  flex: 1;
}

.user-date-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modern-user-dialog .user-date-row {
  gap: 8px;
}

.modern-user-dialog .user-date-field {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.modern-user-dialog .user-date-field label {
  min-width: 0;
}

#projectModalHome .payment-terms-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 140px);
  gap: 8px;
  align-items: start;
  padding: 4px 0;
  background: transparent;
  border-radius: 0;
  border: none;
}

#projectModalHome .payment-terms-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

#projectModalHome .payment-terms-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  margin-block-end: 0;
}

#projectModalHome .payment-terms-fields label {
  font-size: 11px;
  color: var(--muted);
}

#projectModalHome .payment-terms-fields input {
  width: 68px;
  max-width: 68px;
  text-align: right;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 4px 6px;
  font: inherit;
  height: 30px;
}

#projectModalHome .payment-extra-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

#projectModalHome .payment-extra-field label {
  font-size: 11px;
  color: var(--muted);
}

#projectModalHome .payment-extra-field input {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  text-align: right;
  padding: 4px 6px;
  width: 100%;
  font: inherit;
  height: 30px;
}

#billingModal .payment-terms-fields {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 8px;
  justify-content: flex-start;
}

#billingModal .payment-terms-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

#billingModal .payment-terms-fields label {
  font-size: 11px;
  color: var(--muted);
}

#billingModal .payment-terms-fields input {
  width: 80px;
  max-width: 80px;
  text-align: right;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 8px;
  font: inherit;
}

#billingModal #billingExtrasPercent {
  width: 60px;
  max-width: 60px;
  text-align: right;
}

.full-width {
  width: 100%;
}

.error {
  color: var(--danger);
  font-size: 13px;
  margin: 6px 20px 0 20px;
}

/* Fortschrittsmeldung im selben Element wie eine Fehlermeldung (z.B. "LV wird
   geprüft..." beim Freigeben) - zwei Klassen, damit sie die .error-Farbe
   sicher überschreibt, egal in welcher Reihenfolge die Regeln stehen. */
.error.is-progress {
  color: var(--muted);
}

.ava-lv-rename-hint {
  color: var(--muted);
  font-size: 12px;
  margin: 2px 20px 0 20px;
}

.user-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

body.theme-light .user-row {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
.user-index {
  min-width: 32px;
  text-align: center;
  font-weight: 600;
  color: var(--muted);
}

.user-row .user-name {
  font-weight: 700;
}

.user-row .user-email {
  color: var(--muted);
  font-size: 13px;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  border-radius: 0;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  padding: 4px 6px;
  line-height: 1.2;
  /* Ohne dies zeichnet Chrome das Kalender-Icon von input[type=date] (und
     Uhrzeit/Zahlen-Spinner) in der hellen Standardfarbe - auf diesem dunklen
     Feld-Hintergrund praktisch unsichtbar, dadurch wirkt es, als gäbe es
     gar kein Datumsauswahl-Fenster. Safari betrifft das nicht, da es dort
     kein separates Icon gibt. */
  color-scheme: dark;
}
select,
select option,
select optgroup {
  background-color: rgba(6, 10, 18, 0.98);
  color: #e9eef8;
  color-scheme: dark;
}

select option:checked,
select option:hover,
select option:focus {
  background-color: rgba(31, 191, 127, 0.28);
  color: #f8fbff;
}

body.theme-light select,
body.theme-light select option,
body.theme-light select optgroup {
  background-color: #ffffff;
  color: #111827;
  color-scheme: light;
}

.white-dropdown select {
  background: rgba(6, 10, 18, 0.98);
  color: #e9eef8;
  border-color: var(--border);
}
.white-dropdown {
  width: 100%;
  border-radius: 0;
  border: 1px solid var(--border);
  padding: 0 6px;
  background: rgba(6, 10, 18, 0.98);
}
.white-dropdown input {
  width: 100%;
  border: none;
  background: transparent;
  color: #e9eef8;
  padding: 8px 0;
  font: inherit;
}
.white-dropdown input::placeholder {
  color: #93a2bf;
}

input:not([type="checkbox"]):not([type="radio"]) {
  height: 24px;
}

/* Auswahlfelder ohne feste Höhe: bei geerbter Schriftgröße (~16px) braucht
   ein <select> mit Padding/Rahmen ~29px - die frühere Fixhöhe von 24px
   schnitt den gewählten Text oben/unten ab (Chrome und besonders
   iPad-Safari, dessen natives Select zusätzlichen Innenabstand hat). */
select {
  height: auto;
  min-height: 24px;
}

#projectModalHome .dialog-body input,
#projectModalHome .dialog-body select,
#projectModalHome .dialog-body textarea {
  font-size: 12px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 8px;
}

#projectModalHome .dialog-body select option {
  background: var(--panel);
  color: var(--text);
}

.project-view-dialog .dialog-body select {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-color: var(--border);
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
  min-height: 40px;
  font-size: 14px;
  line-height: 1.4;
}

.project-view-dialog .dialog-body select::-ms-expand {
  display: none;
}

.project-view-dialog .dialog-body select,
.project-view-dialog .dialog-body select option {
  background-color: rgba(3, 5, 12, 0.95) !important;
  color: var(--text) !important;
}

.project-view-dialog .dialog-body select option[selected] {
  background-color: rgba(31, 35, 56, 0.95) !important;
}

#projectStatusHome,
#quickStatusColumn {
  background: rgba(3, 5, 12, 0.95);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  height: 42px;
  line-height: 1.3;
  font-size: 14px;
  color-scheme: dark;
}

#projectStatusHome option,
#quickStatusColumn option {
  background-color: rgba(3, 5, 12, 0.95);
  color: var(--text);
}

#projectModalHome .dialog-body textarea {
  min-height: 48px;
}

#projectModalHome .dialog-body label {
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
  letter-spacing: 0.02em;
  display: block;
  text-align: left;
  width: 100%;
  margin-bottom: 2px;
}

#projectModalHome .dialog-body {
  padding: 0 16px 10px 16px;
  height: 100%;
  overflow: auto;
}

#projectModalHome .dialog-body .table-wrapper {
  overflow: auto;
}

#projectModalHome .dialog-body .table-wrapper.trades-table {
  overflow: visible;
  position: relative;
  z-index: 40;
}

#projectModalHome .dialog-body .table-wrapper.trades-table tbody tr,
#projectModalHome .dialog-body .table-wrapper.trades-table tbody td {
  overflow: visible;
}

#projectModalHome .project-form-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  min-height: 0;
  /* Als Grid-Item von .dialog-body (display:grid) hätte dieses Element sonst
     das Default min-width:auto - es durfte dann nie schmaler werden als der
     intrinsische Platzbedarf seines eigenen Inhalts (v.a. .project-analytics-grid
     weiter unten), obwohl .dialog-body selbst längst nur noch 366px breit war.
     Genau das hat .dialog-body (overflow-x:auto) zum seitlichen Scrollen des
     ganzen Fensters gezwungen - per Headless-Browser-Test am Handy-Viewport
     nachgewiesen. */
  min-width: 0;
  overflow: visible;
  padding-bottom: 12px;
}

.project-form-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Flex-Items haben per Default min-width:auto statt 0 - ohne diese Zeile
     durfte diese Section nie schmaler werden als der intrinsische
     Platzbedarf ihres Inhalts (v.a. .project-analytics-grid mit
     repeat(auto-fit, minmax(180px,1fr)): der Browser berechnet dafür ohne
     äußere Breitenvorgabe einen Platzbedarf für mehrere Spalten
     nebeneinander). Das war die eigentliche Ursache für das seitliche
     Scrollen des ganzen Projekt-Fensters am Handy - nicht nur die
     Auftragstabelle von vorhin. */
  min-width: 0;
}

.project-view-dialog .project-trade-dropdown {
  z-index: 80;
}

.project-view-dialog .table-wrapper.trades-table tbody tr {
  position: relative;
  z-index: 1;
}

.project-view-dialog .table-wrapper.trades-table tbody tr.project-trade-row-open {
  z-index: 120;
}

.project-view-dialog .project-trade-dropdown.project-trade-dropdown-open {
  z-index: 140;
}

.project-view-dialog .project-trade-dropdown .custom-dropdown {
  z-index: 70000;
  background: var(--bg);
  background-color: var(--bg);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 18px 36px rgba(2, 8, 23, 0.65);
  color: #e2e8f0;
  overflow: hidden;
  opacity: 1;
  isolation: isolate;
}

.project-view-dialog .project-trade-dropdown .custom-dropdown-panel {
  background: #0f172a;
  background-color: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.4);
  opacity: 1;
}

.project-view-dialog .project-trade-dropdown .custom-dropdown-search {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #f8fafc;
}

.project-view-dialog .project-trade-dropdown .custom-dropdown-search::placeholder {
  color: #94a3b8;
}

.project-view-dialog .project-trade-dropdown .custom-dropdown button {
  background: #0f172a;
  background-color: #0f172a;
  color: #e2e8f0;
}

.project-view-dialog .project-trade-dropdown .custom-dropdown button:hover,
.project-view-dialog .project-trade-dropdown .custom-dropdown button:focus-visible {
  background: #1e293b;
  color: #f8fafc;
  outline: none;
}

.project-view-dialog .project-trade-dropdown .custom-dropdown-list {
  max-height: 190px;
  overflow-y: auto;
}

.project-view-dialog .project-trade-dropdown .custom-dropdown-empty {
  color: #94a3b8;
}

body.theme-light .project-view-dialog .project-trade-dropdown .custom-dropdown-panel {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.45);
}

.project-analytics-section .project-analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.project-analytics-card {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.25);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-analytics-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.project-analytics-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
}

.project-analytics-value.positive {
  color: var(--accent-strong);
}

.project-analytics-value.negative {
  color: var(--danger);
}

.project-analytics-value-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.project-analytics-info-btn {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--muted);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.project-analytics-info-btn:hover,
.project-analytics-info-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.project-result-breakdown-total td {
  border-top: 1px solid var(--border);
  font-size: 15px;
}

.project-analytics-hint {
  font-size: 10px;
  color: var(--muted);
}

.project-notes-section .project-notes-table-wrapper {
  max-height: 220px;
  padding-right: 4px;
}

.project-notes-section .project-notes-table {
  width: 100%;
  border-collapse: collapse;
}

.project-notes-section .project-notes-table th,
.project-notes-section .project-notes-table td {
  padding: 6px 8px;
  font-size: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  text-align: left;
  vertical-align: top;
}

.project-notes-section .project-notes-table th.project-notes-done-col,
.project-notes-section .project-notes-table td.note-done-cell {
  width: 48px;
  text-align: center;
}

.project-notes-section .project-notes-table td.note-text {
  white-space: pre-wrap;
}

.project-notes-section .project-notes-table td.note-text.is-done {
  color: var(--muted);
  text-decoration: line-through;
}

.project-notes-section .project-notes-table tr.note-done {
  opacity: 0.7;
}

.project-notes-section .project-notes-table tbody tr:last-child td {
  border-bottom: none;
}

.project-form-section-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.project-form-section-head p {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.project-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 1fr);
  grid-template-areas:
    "number status"
    "name date"
    "customer responsible"
    "rates folderpath"
    "note note";
  gap: 12px 16px;
}

.project-field-grid .input-row {
  align-self: start;
}

.project-field-grid .project-number-field { grid-area: number; }
.project-field-grid .status-field { grid-area: status; }
.project-field-grid .name-field { grid-area: name; }
.project-field-grid .date-field { grid-area: date; }
.project-field-grid .customer-field { grid-area: customer; }
.project-field-grid .responsible-field { grid-area: responsible; }
.project-field-grid .rates-field { grid-area: rates; }
.project-field-grid .folder-path-field { grid-area: folderpath; }
.project-field-grid .note-field { grid-area: note; }
/* Kein eigener grid-template-areas-Slot (nur sichtbar, wenn ein Projekt schon
   einen tatsächlich aufgelösten Pfad hat) - deshalb als zusätzliche, volle
   Zeile unterhalb des benannten Grids angehängt statt eines festen Bereichs. */
.project-field-grid .folder-path-resolved-field { grid-column: 1 / -1; }

.folder-path-resolved-value {
  font-family: monospace;
  font-size: 0.85em;
  color: var(--muted);
  word-break: break-all;
}

.project-field-grid .project-create-customer-btn {
  margin-top: 4px;
  align-self: flex-start;
}

#projectModalHome .project-field-grid .input-row button,
#projectModalHome .project-field-grid .project-create-customer-btn,
#projectModalHome #openProjectRates {
  min-height: 40px;
  border-radius: 12px;
  padding: 8px 14px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0;
  font-weight: 600;
  box-shadow: none;
}

#projectModalHome .project-field-grid .input-row button:hover,
#projectModalHome .project-field-grid .project-create-customer-btn:hover,
#projectModalHome #openProjectRates:hover {
  background: #1e293b;
  border-color: rgba(94, 234, 212, 0.55);
  color: #f8fafc;
  box-shadow: 0 10px 22px rgba(2, 8, 23, 0.35);
  transform: translateY(-1px);
}

.payment-section {
  align-items: stretch;
}

#projectModalHome .dialog-head {
  padding: 12px 16px 2px 16px;
}

#projectModalHome .dialog-body .input-row {
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
}

#projectModalHome .dialog-body .input-row.has-inline-search .inline-search-field {
  width: 100%;
}

#projectCustomerHome,
#projectCreatedAtHome {
  min-height: 40px;
  height: 40px;
}

#projectCreatedAtHome {
  min-height: 40px !important;
  height: 40px !important;
  max-height: 40px !important;
  padding: 6px 8px !important;
  line-height: 1.2 !important;
  box-sizing: border-box;
}

#projectModalHome .dialog-body input:focus,
#projectModalHome .dialog-body textarea:focus,
#projectModalHome .dialog-body select:focus {
  border-color: rgba(142, 240, 193, 0.6);
  box-shadow: 0 0 0 2px rgba(142, 240, 193, 0.18);
}

body.theme-light #projectModalHome .dialog-body input,
body.theme-light #projectModalHome .dialog-body select,
body.theme-light #projectModalHome .dialog-body textarea {
  background: #ffffff;
  color: #1f2937;
  border-color: #d8e0e8;
}

body.theme-light .project-view-dialog .dialog-body select,
body.theme-light .project-view-dialog .dialog-body select option {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border-color: #d8e0e8;
}

body.theme-light .project-view-dialog .dialog-body select {
  color-scheme: light;
}

body.theme-light .project-view-dialog .dialog-body select option[selected] {
  background-color: #eef5f1 !important;
}

body.theme-light #projectStatusHome,
body.theme-light #quickStatusColumn {
  background: #ffffff;
  color: #1f2937;
  border-color: #d8e0e8;
  color-scheme: light;
}

body.theme-light #quickStatusColumn option {
  background-color: #ffffff;
  color: #1f2937;
}

body.theme-light .project-form-section,
body.theme-light .project-analytics-card {
  background: #ffffff;
  border-color: #e3e7ed;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

body.theme-light #projectModalHome .project-field-grid .input-row button,
body.theme-light #projectModalHome .project-field-grid .project-create-customer-btn,
body.theme-light #projectModalHome #openProjectRates,
body.theme-light #projectModalHome #addTaskRow,
body.theme-light #projectModalHome #addBudgetRow {
  background: #f3f5f8;
  color: #1f2937;
  border-color: #d8e0e8;
  box-shadow: none;
}

body.theme-light #projectModalHome .project-field-grid .input-row button:hover,
body.theme-light #projectModalHome .project-field-grid .project-create-customer-btn:hover,
body.theme-light #projectModalHome #openProjectRates:hover,
body.theme-light #projectModalHome #addTaskRow:hover,
body.theme-light #projectModalHome #addBudgetRow:hover {
  background: #eaf6ef;
  color: #135c3e;
  border-color: rgba(31, 191, 127, 0.35);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

body.theme-light .budget-section table,
body.theme-light .project-view-dialog .table-wrapper.trades-table,
body.theme-light .project-docs-section .table-wrapper table {
  background: #ffffff;
  border-color: #d8e0e8;
}

body.theme-light .budget-section thead th,
body.theme-light .project-view-dialog .table-wrapper.trades-table thead th,
body.theme-light .project-docs-section .table-wrapper thead th {
  background: #f3f5f8;
  color: #6b7280;
  border-bottom-color: #d8e0e8;
}

body.theme-light .budget-section tbody td,
body.theme-light .project-view-dialog .table-wrapper.trades-table tbody td,
body.theme-light .project-docs-section .table-wrapper tbody td {
  color: #1f2937;
  border-bottom-color: rgba(216, 224, 232, 0.9);
}

body.theme-light .budget-section tbody tr:hover,
body.theme-light .project-view-dialog .table-wrapper.trades-table tbody tr:hover,
body.theme-light .project-docs-section .table-wrapper tbody tr:hover {
  background: var(--row-hover-bg);
}

body.theme-light .budget-section .budget-number-input,
body.theme-light .budget-section .budget-label-input,
body.theme-light .budget-section .budget-amount-input,
body.theme-light .budget-section .budget-billing-month-select,
body.theme-light .budget-section .budget-billing-year-input,
body.theme-light .budget-section .budget-billing-mode-select {
  background: #ffffff;
  color: #1f2937;
  border-color: #d8e0e8;
}

@media (max-width: 980px) {
  .project-field-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "number"
      "status"
      "name"
      "date"
      "customer"
      "responsible"
      "rates"
      "folderpath"
      "note";
  }
}

.project-docs-section .table-wrapper {
  border: none;
  background: transparent;
  max-height: 220px;
}

.project-docs-section .table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.55);
}

.project-docs-section .table-wrapper thead th {
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.project-docs-section .table-wrapper tbody td {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text);
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  white-space: nowrap;
}

.project-docs-section .table-wrapper tbody tr:last-child td {
  border-bottom: none;
}

.project-docs-section .table-wrapper tbody tr:hover {
  background: var(--row-hover-bg);
}

.task-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(140px, 180px) auto;
  gap: 6px;
  align-items: center;
}

#customerModal .dialog-body input,
#customerModal .dialog-body select,
#customerModal .dialog-body textarea {
  font-size: 12px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 8px;
}

#customerModal .dialog-body label {
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
  letter-spacing: 0.02em;
}

#customerModal .dialog-body {
  gap: 8px;
  padding: 0 16px 10px 16px;
}

#customerModal .dialog-head {
  padding: 12px 16px 2px 16px;
}


#customerModal .dialog-body .input-row {
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
}

#customerModal .dialog-body .input-row label {
  min-width: auto;
  width: 100%;
  display: block;
  text-align: left;
  margin-bottom: 2px;
}

#customerModal .dialog-body .input-row.inline-row {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

#customerModal .dialog-body .input-row.inline-row .inline-field {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
}

#customerModal .dialog-body .input-row.inline-row .inline-field-tight {
  flex: 0 0 180px;
}

#customerModal .dialog-body .input-row.inline-row.inline-row-tight .inline-field-tight {
  flex: 0 0 140px;
}


#customerModal .dialog-body input:focus,
#customerModal .dialog-body textarea:focus,
#customerModal .dialog-body select:focus {
  border-color: rgba(142, 240, 193, 0.6);
  box-shadow: 0 0 0 2px rgba(142, 240, 193, 0.18);
}

#customerModal .dialog-body .full-span {
  padding: 8px;
}

#receiptModal .dialog-body input,
#receiptModal .dialog-body select,
#receiptModal .dialog-body textarea {
  font-size: 12px;
  line-height: 1.2;
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 8px;
}

#receiptModal .dialog-body label {
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
  letter-spacing: 0.02em;
}

#receiptModal .dialog-body {
  gap: 8px;
  padding: 0 16px 10px 16px;
  grid-template-columns: 1fr;
}

#receiptModal .dialog-head {
  padding: 12px 16px 2px 16px;
}

#receiptModal .dialog-body .input-row {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 6px 8px;
}

#receiptModal .dialog-body .input-row label {
  min-width: 120px;
  white-space: nowrap;
}

#receiptModal .dialog-body input[type="date"] {
  max-width: none;
}

#receiptModal .dialog-body input:focus,
#receiptModal .dialog-body textarea:focus,
#receiptModal .dialog-body select:focus {
  border-color: rgba(142, 240, 193, 0.6);
  box-shadow: 0 0 0 2px rgba(142, 240, 193, 0.18);
}

#receiptModal .dialog-body input[type="date"]::-webkit-calendar-picker-indicator,
.dialog .input-row input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
}

#receiptModal .dialog-body .full-span {
  padding: 8px;
}

.receipt-attachment-dropzone {
  border: 1px dashed rgba(148, 163, 184, 0.55);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 14px 12px;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.receipt-attachment-dropzone.is-dragover {
  background: rgba(142, 240, 193, 0.1);
  border-color: rgba(142, 240, 193, 0.8);
  color: var(--text);
}

.receipt-attachment-dropzone.is-disabled {
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
}

.receipt-attachment-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.receipt-attachment-row {
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 32px;
  padding: 5px 7px;
}

.receipt-attachment-row span {
  color: var(--muted);
  font-size: 12px;
}

.receipt-attachment-row.is-draft {
  border-style: dashed;
}

.receipt-attachment-status {
  white-space: nowrap;
}

.receipt-attachment-icon {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  height: 24px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 24px;
}

.receipt-attachment-icon svg {
  fill: none;
  height: 17px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 17px;
}

.receipt-attachment-icon:hover {
  color: var(--accent);
}

.receipt-attachment-status.is-empty {
  color: var(--muted);
  font-size: 12px;
}

.receipt-attachment-picker-list {
  display: grid;
  gap: 10px;
}

.receipt-attachment-picker-item {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.receipt-attachment-picker-item:hover {
  border-color: var(--accent);
}

.receipt-attachment-picker-item small {
  color: var(--muted);
  font-size: 12px;
}

#offerModal .dialog-body input:not([type="checkbox"]),
#offerModal .dialog-body select,
#offerModal .dialog-body textarea {
  font-size: 12px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 8px;
}

#offerModal .dialog-body input[type="checkbox"] {
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

#offerModal .dialog-body label {
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
  letter-spacing: 0.02em;
}

#offerModal .dialog-body {
  gap: 8px;
  padding: 0 16px 10px 16px;
  position: relative;
}

#offerModal .dialog-head {
  padding: 12px 16px 2px 16px;
}

#offerModal .dialog-body .input-row {
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
}

#offerModal .dialog-body .input-row label {
  min-width: auto;
  width: 100%;
  display: block;
  text-align: left;
  margin-bottom: 2px;
}

#offerModal .dialog-body input:focus,
#offerModal .dialog-body textarea:focus,
#offerModal .dialog-body select:focus {
  border-color: rgba(142, 240, 193, 0.6);
  box-shadow: 0 0 0 2px rgba(142, 240, 193, 0.18);
}

#offerModal .dialog-body .billing-header-cell .billing-header-input {
  min-height: 32px !important;
  height: 32px;
  border: none;
  border-radius: 4px;
  background: transparent;
  padding: 4px 6px;
  box-shadow: none;
}

#offerModal .dialog-body .billing-header-cell .billing-header-input:focus {
  height: 32px;
  border: none;
  box-shadow: none;
  outline: 1px solid rgba(142, 240, 193, 0.45);
}

#billingModal .dialog-body input,
#billingModal .dialog-body select,
#billingModal .dialog-body textarea {
  font-size: 12px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 8px;
}

#billingModal,
#billingModal input[list] {
  color-scheme: light;
}

#billingModal .dialog-body label {
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
  letter-spacing: 0.02em;
}

#billingModal .dialog-body {
  gap: 8px;
  padding: 0 16px 10px 16px;
  overflow-x: hidden;
}

#billingModal .dialog-head {
  padding: 12px 16px 2px 16px;
}

#billingModal .dialog-actions {
  align-items: center;
}

#billingModal .dialog-actions .billing-footer-flags {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}

#billingModal .dialog-body .input-row {
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
}

#billingModal .invoice-lines {
  overflow: hidden;
}

#billingModal .dialog-body .input-row label {
  min-width: auto;
  width: 100%;
  display: block;
  text-align: left;
  margin-bottom: 2px;
}

#billingModal .dialog-body .input-row.has-inline-search .inline-search-field {
  width: 100%;
}

#billingModal .dialog-body .input-row.has-inline-search .inline-search-field input {
  width: 100%;
}

#billingModal .billing-totals-panel {
  margin-left: auto;
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: flex-end;
}

#billingModal .billing-totals-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--text);
}

#billingModal .billing-totals-row span:first-child {
  color: var(--text);
}

#billingModal .billing-totals-row span:last-child,
#billingModal .billing-totals-row strong:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#billingModal .billing-totals-row-strong {
  font-size: 16px;
  font-weight: 700;
}

body.theme-light #billingModal .billing-totals-row,
body.theme-light #billingModal .billing-totals-row span:first-child {
  color: #111827;
}

#offerModal .billing-totals-panel {
  margin-left: auto;
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: flex-end;
}

#offerModal .billing-totals-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--text);
}

#offerModal .billing-totals-row span:first-child {
  color: var(--text);
}

#offerModal .billing-totals-row span:last-child,
#offerModal .billing-totals-row strong:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#offerModal .billing-totals-row-strong {
  font-size: 16px;
  font-weight: 700;
}

body.theme-light #offerModal .billing-totals-row,
body.theme-light #offerModal .billing-totals-row span:first-child {
  color: #111827;
}

#billingModal .dialog-body input:focus,
#billingModal .dialog-body textarea:focus,
#billingModal .dialog-body select:focus {
  border-color: rgba(142, 240, 193, 0.6);
  box-shadow: 0 0 0 2px rgba(142, 240, 193, 0.18);
}

@media (max-width: 960px) {
  .settings-tabs {
    width: 100%;
    justify-content: flex-start;
  }

  .settings-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

#offerModal .rich-editor,
#articleModal .rich-editor {
  display: grid;
  gap: 6px;
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 6px 8px;
}

#billingModal .rich-editor {
  display: grid;
  gap: 6px;
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 6px 8px;
}

#billingModal details.input-row {
  width: 100%;
}

#billingIntroDialog .rich-editor,
#billingClosingDialog .rich-editor {
  display: grid;
  gap: 6px;
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 6px 8px;
}

#offerModal .rich-toolbar,
#articleModal .rich-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

#billingModal .rich-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

#billingIntroDialog .rich-toolbar,
#billingClosingDialog .rich-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

#offerModal .rich-toolbar .ghost,
#articleModal .rich-toolbar .ghost {
  padding: 4px 8px;
  font-weight: 700;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.08);
}

#billingModal .rich-toolbar .ghost {
  padding: 4px 8px;
  font-weight: 700;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.08);
}

#billingIntroDialog .rich-toolbar .ghost,
#billingClosingDialog .rich-toolbar .ghost {
  padding: 4px 8px;
  font-weight: 700;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.08);
}

#offerModal .rich-toolbar input[type="color"],
#articleModal .rich-toolbar input[type="color"] {
  width: var(--rich-control-size);
  height: var(--rich-control-size);
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: transparent;
  padding: 0;
  border-radius: 6px;
  flex: 0 0 auto;
}

#billingModal .rich-toolbar input[type="color"] {
  width: var(--rich-control-size);
  height: var(--rich-control-size);
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: transparent;
  padding: 0;
  border-radius: 6px;
  flex: 0 0 auto;
}

#offerModal .rich-input,
#articleModal .rich-input {
  min-height: 64px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 8px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}

.mini-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  width: min(420px, 92vw);
  max-height: 70vh;
  z-index: 30020;
  display: none;
  padding: 12px;
}

.mini-dialog .mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.mini-dialog .mini-head h3 {
  margin: 0;
  font-size: 16px;
}

.mini-dialog .mini-body {
  display: grid;
  gap: 8px;
  max-height: 50vh;
  overflow: auto;
}

.mini-dialog .mini-body input {
  width: 100%;
}

.mini-dialog .mini-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.mini-dialog #offerCustomerSearchList,
.mini-dialog #offerCustomerResults {
  display: grid;
  gap: 6px;
}

.mini-dialog #offerCustomerSearchList button,
.mini-dialog #offerCustomerResults button {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #f6f7fb;
  color: var(--text);
  box-shadow: none;
}

.mini-dialog #offerCustomerSearchList button:hover,
.mini-dialog #offerCustomerResults button:hover {
  background: #eef2f7;
}

#billingModal .rich-input {
  min-height: 64px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 8px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}

#billingIntroDialog .rich-input,
#billingClosingDialog .rich-input {
  min-height: 64px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 8px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}

#offerModal .rich-input:focus,
#articleModal .rich-input:focus {
  outline: none;
  border-color: rgba(142, 240, 193, 0.6);
  box-shadow: 0 0 0 2px rgba(142, 240, 193, 0.18);
}

#billingModal .rich-input:focus {
  outline: none;
  border-color: rgba(142, 240, 193, 0.6);
  box-shadow: 0 0 0 2px rgba(142, 240, 193, 0.18);
}

#billingIntroDialog .rich-input:focus,
#billingClosingDialog .rich-input:focus {
  outline: none;
  border-color: rgba(142, 240, 193, 0.6);
  box-shadow: 0 0 0 2px rgba(142, 240, 193, 0.18);
}

#offerModal .dialog-head .icon-ghost {
  border-color: rgba(142, 240, 193, 0.6);
  color: rgba(142, 240, 193, 0.95);
}

#offerModal .dialog-head .icon-ghost:hover {
  background: rgba(142, 240, 193, 0.12);
}

#billingModal .dialog-head .icon-ghost {
  border-color: rgba(142, 240, 193, 0.6);
  color: rgba(142, 240, 193, 0.95);
}

#billingModal .dialog-head .icon-ghost:hover {
  background: rgba(142, 240, 193, 0.12);
}

@media (max-width: 720px) {
  #customerModal {
    width: min(560px, 94vw);
  }

  #customerModal .dialog-head {
    padding: 10px 12px 2px 12px;
  }

  #customerModal .dialog-body {
    padding: 0 12px 8px 12px;
  }

  #customerModal .dialog-body .input-row {
    flex-direction: column;
    align-items: stretch;
  }

  #customerModal .dialog-body .input-row label {
    min-width: 0;
  }
}

#timeEntryDialog .dialog-body label {
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
}

#timeEntryDialog .time-absence-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 8px;
}

#timeEntryDialog .time-absence-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

#timeEntryDialog .time-absence-row .checkbox {
  margin: 0;
}

#timeEntryDialog .time-absence-full-day {
  font-size: 11px;
  padding: 0;
  border: none;
  background: transparent;
}

#timeEntryDialog .dialog-body input,
#timeEntryDialog .dialog-body select,
#timeEntryDialog .dialog-body textarea {
  /* Unter 16px zoomt iOS/mobiles Chrome beim Fokussieren eines Feldes
     automatisch die ganze Seite hinein (siehe .due-input weiter oben in
     dieser Datei fürs selbe bekannte WebKit-Verhalten) - u.a. beim Öffnen
     des Projekt-Auswahlfelds in der Zeiterfassung am Handy. */
  font-size: 16px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

#timeEntryDialog .dialog-body select {
  /* iOS Safari: ein eigener background/color auf <select> wird bei
     erhaltener nativer Darstellung (appearance: menulist) nach der Auswahl
     nicht zuverlässig neu gezeichnet - der ausgewählte Text blieb dadurch
     unsichtbar (nur der native Pfeil war noch zu sehen), obwohl der Wert
     korrekt gesetzt war. appearance:none nimmt Safari die Kontrolle über
     die Darstellung komplett ab; der native Pfeil fällt damit weg und wird
     hier durch ein eigenes, kleines Pfeil-Icon ersetzt. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  padding-right: 28px;
}

#timeEntryDialog .dialog-body select option {
  background: var(--panel);
  color: var(--text);
}

#timeEntryDialog .time-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}

#timeEntryDialog .time-stepper-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

#timeEntryDialog .time-stepper input[type="time"] {
  width: 110px;
}

#timeEntryDialog .time-stepper-actions .ghost {
  min-width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Schnelles Mehrfach-Tippen auf +/- landet auf dem Handy sonst als
     Doppel-Tipp-Geste, die der Browser als "reinzoomen" interpretiert.
     touch-action:manipulation schaltet gezielt nur das Doppeltipp-/
     Pinch-Zoomen auf diesem Button ab, Scrollen bleibt unberührt. */
  touch-action: manipulation;
}

.invoice-lines input,
.invoice-lines input[type="text"],
.invoice-lines input[type="number"] {
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.currency-input {
  display: flex;
  align-items: center;
  gap: 4px;
}

.currency-input input {
  flex: 1;
  text-align: right;
}

.currency-input span {
  font-size: 12px;
  color: var(--muted);
}

.money {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.due-date.overdue {
  color: #ff4d4d;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 77, 77, 0.6);
}

.project-completion-date.ok {
  color: #7ee0ae;
  font-weight: 700;
}

.project-completion-date.today {
  color: #ffd37a;
  font-weight: 700;
}

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

.project-completion-date .card-due.home-due-inline {
  margin-left: 0;
}

.home-subtask-label {
  padding-left: 18px;
  color: var(--muted);
  font-style: italic;
}

.close {
  font-size: 22px;
  line-height: 1;
  padding: 6px 10px;
}

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

/* Wird aktuell nicht benötigt, aber die Berechnung/Logik dahinter (main.js)
   bleibt bestehen - auf Wunsch nur ausgeblendet, damit sie bei Bedarf leicht
   wieder eingeblendet werden kann. */
#analyticsMonthlySummary {
  display: none;
}

.tagline.profit-negative {
  color: #ff9ba5;
}

.tagline.profit-positive {
  color: #8ef0c1;
}

@media (max-width: 720px) {
  .page {
    padding: 4px 5px 12px;
  }

  .hero {
    padding: 8px 12px;
  }

  .topbar {
    height: 48px;
    padding: 0 12px;
  }

  .topbar-title {
    font-size: 12px;
  }

  .user-button {
    padding: 4px 8px;
  }

  .user-name {
    display: none;
  }

  .user-initials {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .sidebar {
    padding: 6px 10px 16px;
    min-width: 64px;
  }

  .sidebar.collapsed {
    min-width: 56px;
    width: 56px;
    max-width: 56px;
  }

  .sidebar-nav {
    gap: 8px;
    max-height: calc(100vh - 70px);
  }

  .sidebar-nav .ghost {
    font-size: 12px;
    padding: 4px 6px;
  }

  .content-area {
    padding: 2px 4px 6px;
  }

  .board {
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
  }

  .column {
    min-height: 0;
    padding: 12px;
  }

  .column header {
    margin-bottom: 8px;
  }
}
.preview-open .billing-picker-dialog {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.billing-picker-dialog.reminder-preview-open {
  display: none !important;
}
.protocol-popup-group {
   display: flex;
   flex-direction: column;
   gap: 6px;
   margin-bottom: 16px;
 }

.protocol-lot-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.protocol-lot-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.protocol-lot-controls input {
  flex: 1;
  min-width: 0;
}

.protocol-lot-controls select {
  flex: 1;
  min-width: 0;
}

#protocolPartiesDialog #protocolPartyAddSelect,
#protocolPartiesDialog #protocolPartyAddSelect option {
  background: #ffffff;
  color: #111111;
}

#protocolPartiesDialog #protocolPartyAddSelect {
  min-height: 32px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.25;
  color-scheme: light;
}

#protocolPartiesDialog .protocol-lot-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.protocol-lots-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.protocol-lot-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.protocol-lot-row input {
  flex: 1;
  min-width: 0;
}

#protocolProjectSettingsDialog .table-wrapper.trades-table {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
}

#protocolProjectSettingsDialog .table-wrapper.trades-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#protocolProjectSettingsDialog .table-wrapper.trades-table thead th {
  font-size: 0.56rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-solid);
}

#protocolProjectSettingsDialog .table-wrapper.trades-table tbody td {
  font-size: 0.58rem;
  line-height: 1.2;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

#protocolProjectSettingsDialog .table-wrapper.trades-table tbody tr:nth-child(even):not(.tagline) {
  background: rgba(255, 255, 255, 0.02);
}

#protocolProjectSettingsDialog .table-wrapper.trades-table tbody tr:hover:not(.tagline) {
  background: var(--row-hover-bg);
}

#protocolProjectSettingsDialog .table-wrapper.trades-table .custom-dropdown-toggle,
#protocolProjectSettingsDialog .table-wrapper.trades-table .project-trade-contact-select {
  min-height: 24px;
  padding: 4px 6px;
  font-size: 0.58rem;
  border-radius: 8px;
}

#protocolProjectSettingsDialog .table-wrapper.trades-table .project-trade-company {
  display: inline-block;
  font-weight: 600;
}

#protocolProjectSettingsDialog .table-wrapper.trades-table .project-trade-contact-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}

#protocolProjectSettingsDialog .table-wrapper.trades-table .project-trade-contact-add {
  min-height: 24px;
  min-width: 24px;
  padding: 0;
  font-size: 0.72rem;
}

#protocolProjectSettingsDialog .table-wrapper.trades-table .project-trade-contact-select:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

#protocolProjectSettingsDialog .table-wrapper.trades-table .project-trade-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#protocolProjectSettingsDialog .table-wrapper.trades-table .delete-column {
  min-height: 24px;
  min-width: 24px;
  padding: 0;
  font-size: 0.72rem;
}

#protocolProjectSettingsDialog .protocol-lot-controls .ghost {
  font-size: 0.72rem;
  padding: 5px 8px;
}

.protocol-parties-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

/* "+ Hinzufügen" saß direkt auf der Legende, mit großem Leerraum darüber
   (Dialog-Kopf-Abstand). Button nach oben ziehen und den Abstand unter ihm
   ausgleichen, damit er mittig zwischen Überschrift und Legende steht. */
#protocolPartiesPanel .protocol-lot-controls {
  /* früher -14px (Knopf mittig rücken) - seit unter der Überschrift der
     Speicherstatus steht, überdeckte der Knopf diesen */
  margin-top: 4px;
  margin-bottom: 14px;
}

.protocol-party-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.protocol-party-picker-list {
  max-height: 55vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.protocol-party-picker-group {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.protocol-party-picker-group:last-child {
  border-bottom: none;
}

.protocol-party-picker-company,
.protocol-party-picker-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}

.protocol-party-picker-company {
  font-weight: 600;
}

.protocol-party-picker-contacts {
  display: flex;
  flex-direction: column;
  padding-left: 26px;
}

.protocol-party-picker-contact {
  font-size: 13px;
  color: var(--muted);
}

.protocol-party-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.protocol-party-status-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.protocol-party-status-table th,
.protocol-party-status-table td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}

.protocol-party-status-table th:last-child,
.protocol-party-status-table td:last-child {
  border-right: none;
}

.protocol-party-status-table tr:last-child td {
  border-bottom: none;
}

.protocol-party-status-table th {
  font-size: 12px;
  font-weight: 600;
}

.protocol-party-status-table th:first-child,
.protocol-party-status-table td:first-child {
  text-align: left;
}

.protocol-party-company {
  font-size: 13px;
  color: var(--text);
}

.protocol-party-company-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.protocol-party-tradearea {
  width: 140px;
}

.protocol-party-tradearea-input {
  width: 100%;
  box-sizing: border-box;
}

.protocol-party-name {
  min-width: 180px;
}

.protocol-party-name .project-trade-contact-select {
  width: 100%;
  /* iPad-Safari zeichnet ein natives <select> (Pill mit Doppelpfeil) mit
     eigenem Innenabstand - bei der globalen Fixhöhe von 24px wurde der
     ausgewählte Name dadurch oben/unten abgeschnitten und war unlesbar.
     appearance:none übergibt die Darstellung an unser CSS; der native Pfeil
     wird durch ein eigenes Icon ersetzt (gleiches Prinzip wie
     #timeEntryDialog). */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: auto;
  min-height: 30px;
  line-height: 1.3;
  padding: 5px 26px 5px 8px;
  border-radius: var(--radius-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
}

.protocol-party-shortcode {
  width: 90px;
}

.protocol-party-shortcode-input {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.protocol-party-actions {
  white-space: nowrap;
}

.protocol-party-order-controls {
  display: inline-flex;
  gap: 4px;
}

.protocol-party-order-btn {
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  line-height: 1;
}

.protocol-party-status-radio,
.protocol-party-status-checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: #5b86e5;
}

.protocol-party-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}

.protocol-party-dot.present {
  background: #33c06d;
}

.protocol-party-dot.absent {
  background: #f09a2f;
}

.protocol-party-dot.excused {
  background: #5b86e5;
}

.protocol-party-dot.unexcused {
  background: #ff5a4b;
}

.protocol-party-dot.invited {
  background: #635bff;
}

.protocol-parties-list label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  font-size: 13px;
}

.protocol-parties-list input {
  width: 1rem;
  height: 1rem;
}

.protocol-parties-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.protocol-party-summary {
  font-size: 12px;
  margin: 0;
  color: var(--muted);
}

.protocol-parties-dialog-body {
  max-height: 60vh;
  overflow: auto;
  padding-bottom: 0;
}

.protocol-form-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#protocolTitleSelect {
  background: rgba(3, 5, 12, 0.95);
  color: var(--text);
  border: 1px solid var(--border);
  color-scheme: dark;
}

#protocolTitleSelect option {
  background-color: rgba(3, 5, 12, 0.95);
  color: var(--text);
}

body.theme-light #protocolTitleSelect,
body.theme-light #protocolTitleSelect option {
  background: #ffffff;
  background-color: #ffffff;
}

body.theme-light #protocolTitleSelect {
  color-scheme: light;
}

.protocol-entry-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.protocol-entry-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  /* "Neuer Punkt" bleibt beim Scrollen durch lange Punktelisten sichtbar. */
  position: sticky;
  /* direkt unter der ebenfalls sticky Topbar einrasten (Höhe setzt
     updateProtocolEditorLayout, Fallback = min-height 56px + Rahmen) */
  top: var(--topbar-sticky-offset, 57px);
  z-index: 5;
  padding: 8px 0;
  background: var(--bg);
}

/* Leere Fußleiste des Protokoll-Editors (Knöpfe stehen in der mitlaufenden
   Leiste) - .dialog-actions setzt sonst display:flex und hebt [hidden] auf. */
#protocolForm .dialog-actions[hidden] {
  display: none;
}

/* Protokoll-Editor: Der Inhalt ist ein Grid-Element (.dialog-body) und wurde
   so breit wie die Punktetabelle (min-width:auto) - bei schmaleren Fenstern
   rutschten dadurch Aktionsleiste, Hinweise und Tabelle rechts aus dem
   sichtbaren Bereich. Jetzt passt sich der Bereich ans Fenster an und nur die
   Tabelle scrollt bei Bedarf seitlich. */
.protocol-editor-panel {
  min-width: 0;
}

.protocol-entries-group {
  overflow-x: auto;
}

/* Aktionsleiste: Knöpfe behalten immer ihre Größe, nur der Status kürzt sich. */
.protocol-entry-actions > button,
.protocol-entry-actions > .board-toggle {
  flex: none;
}

/* Mitteilungen im Benutzermenü */
.user-notices {
  width: min(360px, calc(100vw - 32px));
  padding: 6px 4px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.user-notices-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 8px 6px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.user-notices-clear {
  padding: 2px 6px;
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
}

.user-dropdown .user-notices-clear {
  width: auto;
  min-height: 0;
  padding: 2px 6px;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--accent-strong, var(--accent));
  font-size: 0.75rem;
  font-weight: 600;
}

.user-dropdown .user-notices-clear:hover {
  text-decoration: underline;
  background: transparent;
}

.user-dropdown .user-notice {
  min-height: 0;
  border: none;
  box-shadow: none;
  font-weight: 400;
}

.user-notices-clear[hidden] {
  display: none;
}

.user-notices-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}

.user-notices-empty {
  padding: 10px 8px;
  font-size: 0.85rem;
  color: var(--muted);
}

.user-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.user-notice:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.user-notice.is-unread {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.user-notice.is-unread .user-notice-title::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-radius: 50%;
  background: #ef4444;
  vertical-align: middle;
}

.user-notice-icon {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-strong, var(--accent));
  font-size: 0.85rem;
}

.user-notice-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.user-notice-title {
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-notice-details {
  font-size: 0.82rem;
  color: var(--text);
}

.user-notice-time {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Eingabefeld mit Vorschlagsliste (z.B. Protokoll-Titel) */
.combo-input {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

.combo-input > input {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 36px;
}

.combo-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.combo-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.combo-input > input:disabled ~ .combo-toggle {
  display: none;
}

.combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card, #fff);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

.combo-list[hidden] {
  display: none;
}

.combo-list li {
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text);
}

.combo-list li:hover,
.combo-list li.is-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.combo-list li[aria-selected="true"] {
  font-weight: 600;
}

/* Zurück-Link in der Projekt-Detailansicht der Protokolle */
.protocols-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 4px -6px;
  padding: 4px 8px 4px 2px;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--accent-strong, var(--accent));
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.protocols-back-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.protocols-back-link:hover {
  text-decoration: underline;
  background: transparent;
}

/* Registerleiste im Protokoll - immer dann, wenn die Seitenleiste mit
   Punkte/Beteiligte/Einstellungen fehlt: schmales Handy (Burger-Menü) und
   die Homescreen-App (dort gibt es gar keine Seitenleiste, auch nicht im
   Querformat). Die Klasse setzt main.js updateSidebarAvailabilityClass. */
.protocol-mobile-tabs {
  display: none;
}

body.no-sidebar-nav .protocol-mobile-tabs {
  display: block;
  position: relative;
  z-index: 20;
  margin: 0 0 10px;
}

body.is-standalone-client .protocol-mobile-tabs {
  /* Abstand zur Statusleiste (Uhrzeit/Akku) */
  margin-top: 10px;
}

.protocol-section-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  /* deckend (im dunklen Modus ist --panel-solid leicht durchsichtig) */
  background: linear-gradient(var(--panel-solid), var(--panel-solid)), var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.protocol-section-toggle-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.protocol-section-toggle-icon,
.protocol-section-item-icon {
  flex: none;
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-strong, var(--accent));
}

.protocol-section-toggle svg,
.protocol-section-menu svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.protocol-section-chevron {
  flex: none;
  color: var(--muted);
  transition: transform 0.18s ease;
}

.protocol-mobile-tabs.is-open .protocol-section-chevron {
  transform: rotate(180deg);
}

.protocol-section-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(var(--panel-solid), var(--panel-solid)), var(--bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  animation: protocol-section-menu-in 0.14s ease-out;
}

.protocol-section-menu[hidden] {
  display: none;
}

@keyframes protocol-section-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.protocol-section-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 6px 8px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  box-shadow: none;
}

.protocol-section-menu button + button {
  margin-top: 2px;
}

.protocol-section-menu button:active,
.protocol-section-menu button:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.protocol-section-item-label {
  flex: 1 1 auto;
}

.protocol-section-check {
  flex: none;
  visibility: hidden;
  color: var(--accent-strong, var(--accent));
}

.protocol-section-menu button.is-active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.protocol-section-menu button.is-active .protocol-section-check {
  visibility: visible;
}

/* Hinweisbalken unter der Aktionsleiste (z.B. fehlende Kürzel) */
.protocol-hint-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 10px;
  padding: 8px 10px 8px 12px;
  border: 1px solid color-mix(in srgb, #d97706 40%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, #f59e0b 12%, var(--card, #fff));
  color: var(--text);
  font-size: 0.85rem;
}

.protocol-hint-banner[hidden] {
  display: none;
}

.protocol-hint-icon {
  flex: none;
  color: #d97706;
}

.protocol-hint-text {
  flex: 1 1 auto;
  min-width: 0;
  /* bis zu zwei Zeilen, damit der Hinweis auch am Handy lesbar bleibt */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.protocol-hint-banner button {
  flex: none;
}

/* Status des automatischen Speicherns (main.js setProtocolAutosaveStatus) */
.protocol-autosave-status {
  flex: 0 1 auto;
  margin: 0 0 0 auto;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.protocol-autosave-status[data-status="saved"]::before {
  content: "✓ ";
  color: #1fbf7f;
}

.protocol-autosave-status[data-status="error"],
.protocol-autosave-status[data-status="blocked"] {
  color: #d9534f;
}

.dialog-head .protocol-autosave-status {
  margin: 4px 0 0;
}

.undo-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px 10px 16px;
  border-radius: 10px;
  background: #1f2937;
  color: #f9fafb;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  font-size: 0.9rem;
}

.app-update-banner {
  position: fixed;
  /* unterhalb der Statusleiste (Homescreen-App am iPhone) */
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100vw - 32px);
  padding: 10px 12px 10px 16px;
  border-radius: 10px;
  background: #1f2937;
  color: #f9fafb;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  font-size: 0.9rem;
}

.app-update-banner button {
  flex: none;
  white-space: nowrap;
}

.undo-toast button.ghost {
  color: #6ee7b7;
  font-weight: 600;
  border-color: transparent;
}

/* Besprechungspunkte-Ansicht: Eyebrow "Protokoll" + Überschrift wiederholen
   nur den Titel, der ohnehin in der Topbar steht - weglassen, damit die
   Punkte weiter oben beginnen. In "Beteiligte Firmen" bleibt der Kopf. */
#protocolModal.protocol-entries-mode .dialog-head {
  display: none;
}

#protocolModal.protocol-entries-mode .dialog-body {
  padding-top: 12px;
}

.protocol-entry-actions-inline {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.protocol-entry-actions-inline .ghost {
  border: none;
  background: transparent;
  padding: 0;
  min-width: auto;
  width: auto;
  height: auto;
  line-height: 1;
}

.protocol-entry-actions-inline .ghost.protocol-entry-delete-btn,
body.theme-light .protocol-entry-actions-inline .ghost.protocol-entry-delete-btn,
.protocol-entry-actions-inline .ghost.protocol-entry-delete-btn:hover,
body.theme-light .protocol-entry-actions-inline .ghost.protocol-entry-delete-btn:hover {
  color: #ef4444 !important;
}

.protocol-row-actions-inline {
  display: inline-flex;
  gap: 14px;
  align-items: center;
}

.protocol-project-row td:last-child .icon-ghost,
.protocol-row-actions .icon-ghost {
  border: none;
  background: transparent;
  padding: 0;
  min-width: auto;
  width: auto;
  height: auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}

.protocol-project-row td:last-child .icon-ghost:disabled,
.protocol-row-actions .icon-ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.protocol-locked-row td {
  font-style: italic;
  color: var(--muted);
}

.protocol-project-row td:last-child .icon-ghost:hover,
.protocol-row-actions .icon-ghost:hover {
  border: none;
  background: transparent;
  color: var(--accent);
}

.protocol-project-row td:last-child .icon-ghost.protocol-delete-btn,
.protocol-row-actions .icon-ghost.protocol-delete-btn {
  color: #ef4444;
}

.protocol-project-row td:last-child .icon-ghost.protocol-delete-btn:hover,
.protocol-row-actions .icon-ghost.protocol-delete-btn:hover {
  color: #dc2626;
}

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

#protocolForm.is-saving input,
#protocolForm.is-saving select,
#protocolForm.is-saving button,
#protocolForm.is-saving textarea {
  cursor: progress;
}

#protocolForm.is-saving button:disabled,
#protocolForm.is-saving input:disabled,
#protocolForm.is-saving select:disabled,
#protocolForm.is-saving textarea:disabled {
  opacity: 0.72;
}

/* Auf der Anwesenheitsliste ist "Speichern" erst "aktiv" (voll sichtbar),
   sobald dort wirklich etwas geändert wurde - siehe
   updateProtocolPartiesFooterState() in main.js. */
#protocolForm button[type="submit"].primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.protocol-save-progress {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
}

.protocol-save-progress.hidden {
  display: none;
}

.protocol-save-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

#protocolSaveProgressText {
  min-width: 0;
  overflow-wrap: anywhere;
}

#protocolSaveProgressPercent {
  flex: 0 0 auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.protocol-save-progress-track {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
}

.protocol-save-progress-bar {
  position: relative;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1ea36b 0%, #1fbf7f 60%, #67f3d1 100%);
  box-shadow: 0 0 18px rgba(31, 191, 127, 0.3);
  transition: width 240ms ease;
}

.protocol-save-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: translateX(-100%);
  animation: pdf-progress-shine 1.15s linear infinite;
}

body.theme-light .protocol-save-progress-track {
  border-color: #d8e0e8;
  background: #edf2f7;
}

.protocol-entry-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: stretch;
}

.protocol-entry-text-editor .rich-editor {
  min-height: 4.5rem;
  width: 100%;
  box-sizing: border-box;
}

.protocol-entry-text-editor .rich-input {
  min-height: calc(1.4rem * 3);
  max-height: 11rem;
  overflow-y: auto;
  caret-color: var(--text);
}
.protocol-entry-text-editor .rich-input p,
.protocol-entry-text-editor .rich-input div {
  margin: 0;
  min-height: 1.4em;
  line-height: 1.4;
}
.protocol-entry-text-editor .rich-input li {
  min-height: 1.4em;
  line-height: 1.4;
}
.protocol-entry-text-editor .rich-input li:empty::before {
  content: "\200B";
}

.protocol-entry-text-editor .rich-input,
.protocol-entry-text-editor .rich-editor {
  width: 100%;
}

.protocol-entry-text-editor {
  width: 100%;
}

.protocol-entry-form .input-row.inline.protocol-entry-text-editor {
  width: 100%;
}

#protocolModal input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
}

#protocolNextMeetingDate {
  max-width: 220px;
}

#protocolNextMeetingDate.is-empty-display {
  color: var(--muted);
  font-style: italic;
}

.protocol-entry-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  border-radius: 8px 8px 0 0;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.protocol-entry-row .input-row.inline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: visible;
  align-items: flex-start;
}

.protocol-entry-row .input-row.inline label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.protocol-entry-row .input-row.inline:first-child label {
  color: var(--text);
}
.protocol-entry-row .input-row.inline input,
.protocol-entry-row .input-row.inline label {
  width: 100%;
  box-sizing: border-box;
}
.protocol-entry-row .input-row.inline input[type="text"],
.protocol-entry-row .input-row.inline input[type="date"] {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid var(--border);
  min-height: 40px;
  padding: 10px 12px;
  line-height: 1.2;
  border-radius: 10px;
}

.protocol-entry-row .input-row.inline select {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid var(--border);
  min-height: 40px;
  padding: 10px 12px;
  line-height: 1.2;
  border-radius: 10px;
}
.protocol-entry-row .input-row.inline input[type="date"] {
  appearance: textfield;
  padding-right: 38px;
  position: relative;
  z-index: 2;
}
.protocol-entry-row .input-row.inline input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
}

.protocol-entry-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.protocol-entry-dialog .dialog-head {
  padding-bottom: 10px;
}
.protocol-entry-form .input-row.inline:not(.protocol-entry-row .input-row.inline) {
  width: 100%;
}

.protocol-entry-attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.protocol-entry-attachment-controls {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.protocol-entry-attachment-dropzone {
  flex: 1;
  border: 1px dashed var(--border);
  border-radius: 10px;
  min-height: 76px;
  padding: 20px 16px;
  color: var(--muted);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
}

.protocol-entry-attachment-dropzone.is-dragover {
  border-color: var(--accent);
  background: rgba(31, 191, 127, 0.1);
}

.protocol-entry-attachment-draft-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.protocol-entry-attachment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
}

.protocol-entry-attachment-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.protocol-entry-attachment-size {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.protocol-entry-number {
  width: 100%;
  text-align: left;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.protocol-entries-bottom {
  margin-top: 28px;
  display: grid;
  gap: 14px;
}

.protocol-entries-group-title {
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--text);
}

.protocol-entries-table th:nth-child(1),
.protocol-entries-table td:nth-child(1) {
  width: 72px;
  white-space: nowrap;
}

.protocol-entries-table th:nth-child(2),
.protocol-entries-table td.protocol-entry-attachments-cell {
  width: 90px;
  text-align: center;
  white-space: nowrap;
}

.protocol-entries-table th:nth-child(3),
.protocol-entries-table td.protocol-entry-text-cell {
  width: 56%;
}

.protocol-entry-done-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.protocol-entry-done-date {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.protocol-entry-row-done .protocol-entry-text-cell {
  text-decoration: line-through;
  opacity: 0.75;
}

.protocol-entry-attachment-preview-main {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

#protocolEntryAttachmentPreviewImage {
  max-width: 100%;
  max-height: 58vh;
  object-fit: contain;
}

.protocol-entry-attachment-preview-list {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.protocol-entry-attachment-thumb {
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 8px;
  padding: 2px;
  cursor: pointer;
  line-height: 0;
}

.protocol-entry-attachment-thumb.is-active {
  border-color: var(--accent);
}

.protocol-entry-attachment-thumb img {
  width: 31px;
  height: 31px;
  object-fit: cover;
  border-radius: 6px;
}

.protocol-expand {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
}

.protocol-expand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.protocol-party-toggle {
  align-self: flex-start;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.protocol-parties-list.hidden {
  display: none;
}

.protocol-number-display {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 12px;
  min-height: 1.2em;
}

/* Global Table Unification (Projektübersicht-Stil) */
.table-wrapper.projects-table,
.table-wrapper.customers-table,
.table-wrapper.templates-table,
.table-wrapper.regie-table,
.table-wrapper.billing-table,
.table-wrapper.offers-table,
.table-wrapper.receipts-table,
.table-wrapper.articles-table,
.table-wrapper.analytics,
.table-wrapper.projects,
.table-wrapper.trades-table,
.project-docs-section .table-wrapper,
.project-notes-section .project-notes-table-wrapper {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: none;
  background: var(--panel);
}

.table-wrapper.projects-table table,
.table-wrapper.customers-table table,
.table-wrapper.templates-table table,
.table-wrapper.regie-table table,
.table-wrapper.billing-table table,
.table-wrapper.offers-table table,
.table-wrapper.receipts-table table,
.table-wrapper.articles-table table,
.table-wrapper.analytics table,
.table-wrapper.projects table,
.table-wrapper.trades-table table,
.project-docs-section .table-wrapper table,
.project-notes-section .project-notes-table {
  width: 100%;
  border-collapse: collapse;
}

.table-wrapper.projects-table thead th,
.table-wrapper.customers-table thead th,
.table-wrapper.templates-table thead th,
.table-wrapper.regie-table thead th,
.table-wrapper.billing-table thead th,
.table-wrapper.offers-table thead th,
.table-wrapper.receipts-table thead th,
.table-wrapper.articles-table thead th,
.table-wrapper.analytics thead th,
.table-wrapper.projects thead th,
.table-wrapper.trades-table thead th,
.project-docs-section .table-wrapper thead th,
.project-notes-section .project-notes-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-solid);
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.table-wrapper.projects-table tbody td,
.table-wrapper.customers-table tbody td,
.table-wrapper.templates-table tbody td,
.table-wrapper.regie-table tbody td,
.table-wrapper.billing-table tbody td,
.table-wrapper.offers-table tbody td,
.table-wrapper.receipts-table tbody td,
.table-wrapper.articles-table tbody td,
.table-wrapper.analytics tbody td,
.table-wrapper.projects tbody td,
.table-wrapper.trades-table tbody td,
.project-docs-section .table-wrapper tbody td,
.project-notes-section .project-notes-table td {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text);
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.table-wrapper.projects-table tbody tr:hover,
.table-wrapper.customers-table tbody tr:hover,
.table-wrapper.templates-table tbody tr:hover,
.table-wrapper.regie-table tbody tr:hover,
.table-wrapper.billing-table tbody tr:hover,
.table-wrapper.offers-table tbody tr:hover,
.table-wrapper.receipts-table tbody tr:hover,
.table-wrapper.articles-table tbody tr:hover,
.table-wrapper.analytics tbody tr:hover,
.table-wrapper.projects tbody tr:hover,
.table-wrapper.trades-table tbody tr:hover,
.project-docs-section .table-wrapper tbody tr:hover,
.project-notes-section .project-notes-table tbody tr:hover {
  background: var(--row-hover-bg);
}

.table-wrapper.projects-table tbody tr:last-child td,
.table-wrapper.customers-table tbody tr:last-child td,
.table-wrapper.templates-table tbody tr:last-child td,
.table-wrapper.regie-table tbody tr:last-child td,
.table-wrapper.billing-table tbody tr:last-child td,
.table-wrapper.offers-table tbody tr:last-child td,
.table-wrapper.receipts-table tbody tr:last-child td,
.table-wrapper.articles-table tbody tr:last-child td,
.table-wrapper.analytics tbody tr:last-child td,
.table-wrapper.projects tbody tr:last-child td,
.table-wrapper.trades-table tbody tr:last-child td,
.project-docs-section .table-wrapper tbody tr:last-child td,
.project-notes-section .project-notes-table tbody tr:last-child td {
  border-bottom: none;
}

/* Buttons inside table cells: borderless */
.table-wrapper td button,
.table-wrapper th button,
.project-notes-section .project-notes-table td button,
.project-notes-section .project-notes-table th button {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  padding: 2px 4px !important;
  color: var(--text);
}

.table-wrapper td button:hover,
.table-wrapper th button:hover,
.project-notes-section .project-notes-table td button:hover,
.project-notes-section .project-notes-table th button:hover {
  color: #f8fafc;
}

/* Offer modal: force opaque customer dropdown (no see-through artifacts). */
#offerModal #offerCustomerDropdown,
#offerModal #offerCustomerDropdown.custom-dropdown,
#offerModal #offerCustomerDropdown .custom-dropdown-panel,
#offerModal #offerCustomerDropdown button,
#offerModal #offerCustomerDropdown .custom-dropdown-empty {
  background: var(--bg) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#offerModal #offerCustomerDropdown {
  border: 1px solid rgba(148, 163, 184, 0.32) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45) !important;
}

body.theme-light #offerModal .dialog-body input:not([type="checkbox"]),
body.theme-light #offerModal .dialog-body select,
body.theme-light #offerModal .dialog-body textarea,
body.theme-light #billingModal .dialog-body input,
body.theme-light #billingModal .dialog-body select,
body.theme-light #billingModal .dialog-body textarea {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #111827;
}

body.theme-light #offerModal .rich-editor,
body.theme-light #articleModal .rich-editor,
body.theme-light #billingModal .rich-editor,
body.theme-light #billingIntroDialog .rich-editor,
body.theme-light #billingClosingDialog .rich-editor,
body.theme-light #offerModal .rich-input,
body.theme-light #articleModal .rich-input {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.35);
  color: #111827;
}

body.theme-light #offerModal .rich-toolbar .ghost,
body.theme-light #articleModal .rich-toolbar .ghost,
body.theme-light #billingModal .rich-toolbar .ghost,
body.theme-light #billingIntroDialog .rich-toolbar .ghost,
body.theme-light #billingClosingDialog .rich-toolbar .ghost {
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.35);
  color: #111827;
}

body.theme-light #offerModal #offerCustomerDropdown,
body.theme-light #offerModal #offerCustomerDropdown.custom-dropdown,
body.theme-light #offerModal #offerCustomerDropdown .custom-dropdown-panel,
body.theme-light #offerModal #offerCustomerDropdown button,
body.theme-light #offerModal #offerCustomerDropdown .custom-dropdown-empty {
  background: #ffffff !important;
  color: #111827 !important;
}

body.theme-light #offerModal #offerCustomerDropdown {
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12) !important;
}

body.theme-light #offerModal .inline-search-list button,
body.theme-light #billingModal .inline-search-list button {
  background: #ffffff;
  color: #111827;
}

/* ===================== Chat ===================== */
.chat-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 12px;
  height: calc(100vh - 130px);
  min-height: 480px;
}

.chat-thread-panel {
  display: flex;
  flex-direction: column;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.chat-thread-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.chat-thread-panel-head h3 {
  margin: 0;
}

.chat-new-button {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-thread-search {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.chat-thread-search input {
  width: 100%;
}

.chat-thread-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.chat-thread-list-empty,
.chat-new-list-empty,
.chat-read-receipts-empty {
  padding: 16px;
  color: var(--muted);
  font-size: 0.9rem;
}

.chat-thread-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.chat-thread-item:hover {
  background: var(--card);
}

.chat-thread-item.is-active {
  background: var(--card);
  box-shadow: inset 3px 0 0 var(--accent);
}

.chat-thread-item-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-strong, var(--accent));
}

.chat-thread-item-icon svg,
.chat-attachment-file-icon svg,
.chat-attachment-draft-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-thread-item-icon--project {
  border-radius: 10px;
  background: color-mix(in srgb, #d69e2e 16%, transparent);
  color: #b7791f;
}

.chat-thread-item-icon--announcement {
  border-radius: 10px;
  background: color-mix(in srgb, #e53e3e 12%, transparent);
  color: #c53030;
}

.chat-avatar-initials {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.chat-attachment-file-icon,
.chat-attachment-draft-icon {
  display: inline-flex;
  align-items: center;
}

.chat-online-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2ecc71;
  border: 2px solid var(--bg, #fff);
}

.chat-online-dot-inline {
  position: static;
  display: inline-block;
  margin-left: 6px;
  border: none;
  vertical-align: middle;
}

.chat-thread-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-thread-item-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-thread-item-preview {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-thread-item-badge {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent-strong);
  color: #04241d;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-message-panel {
  display: flex;
  flex-direction: column;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.chat-message-panel-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  text-align: center;
  padding: 20px;
}

.chat-message-panel-active {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-message-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.chat-message-panel-head h3 {
  margin: 0;
}

.chat-active-thread-subtitle {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.chat-active-thread-subtitle.chat-subtitle-online {
  color: #2ecc71;
  font-weight: 600;
}

.chat-messages-list {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-messages-loading,
.chat-messages-empty {
  color: var(--muted);
  text-align: center;
  margin: auto;
}

.chat-bubble {
  max-width: 70%;
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.chat-bubble-own {
  align-self: flex-end;
  background: linear-gradient(145deg, rgba(103, 243, 209, 0.22), rgba(45, 198, 163, 0.1));
  border-color: rgba(103, 243, 209, 0.35);
}

.chat-bubble-pending {
  opacity: 0.6;
}

.chat-bubble-pending .chat-bubble-meta span:first-child {
  font-style: italic;
}

.chat-bubble-sender {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 2px;
}

.chat-bubble-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-bubble-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--muted);
}

.chat-bubble-receipts-btn {
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  font-size: 0.72rem;
  text-decoration: underline;
}

.chat-bubble-delete-btn {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  line-height: 1;
  opacity: 0.6;
  display: inline-flex;
}

.chat-bubble-delete-btn svg {
  width: 13px;
  height: 13px;
}

.chat-bubble-delete-btn:hover {
  opacity: 1;
  color: var(--danger);
}

.chat-attachment-image-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 6px;
}

.chat-attachment-image {
  display: block;
  border: none;
  background: none;
  padding: 0;
  cursor: zoom-in;
}

.chat-attachment-image img {
  max-width: 220px;
  max-height: 220px;
  border-radius: var(--radius-sm);
  display: block;
}

.chat-attachment-image-download {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  line-height: 1;
}

.chat-attachment-image-download:hover {
  background: rgba(0, 0, 0, 0.75);
}

.chat-attachment-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--glass);
  color: var(--text);
  text-decoration: none;
}

.chat-attachment-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-attachment-file-size {
  font-size: 0.75rem;
  color: var(--muted);
}

.chat-attachment-file-download {
  color: var(--muted);
  font-size: 0.85rem;
}

.chat-attachment-drafts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px 0;
}

.chat-attachment-draft-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.8rem;
}

.chat-attachment-draft-chip img {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 50%;
}

.chat-attachment-draft-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-attachment-draft-remove {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}

.chat-compose-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.chat-attach-button {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-attach-button svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#chatComposeText {
  flex: 1;
  resize: none;
  min-height: 38px;
  max-height: 120px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text);
  font-family: inherit;
}

.chat-send-button {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-send-button svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-new-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.chat-new-tab {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.chat-new-tab.is-active {
  background: var(--accent-strong);
  color: #04241d;
  border-color: var(--accent-strong);
}

.chat-new-panel input[type="text"] {
  width: 100%;
  margin-bottom: 10px;
}

.chat-new-list,
.chat-read-receipts-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.chat-new-list-item,
.chat-read-receipt-row {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.chat-read-receipt-row {
  cursor: default;
}

.chat-new-list-item:last-child,
.chat-read-receipt-row:last-child {
  border-bottom: none;
}

.chat-new-list-item:hover {
  background: var(--card);
}

.chat-read-receipts-group,
.chat-participants-group {
  margin-bottom: 16px;
}

.chat-read-receipts-group h4,
.chat-participants-group h4 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--muted);
}

.chat-participants-group input[type="text"] {
  width: 100%;
  margin-bottom: 8px;
}

.chat-lightbox-dialog {
  border: none;
  background: transparent;
  padding: 0;
  max-width: 92vw;
  max-height: 92vh;
}

.chat-lightbox-dialog::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

.chat-lightbox-dialog[open] {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.chat-lightbox-inner {
  position: relative;
  display: inline-block;
}

.chat-lightbox-dialog img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: var(--radius-sm);
  cursor: zoom-out;
  display: block;
}

.chat-lightbox-download {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  cursor: pointer;
}

.chat-lightbox-download:hover {
  background: rgba(0, 0, 0, 0.8);
}

.chat-mobile-back-button {
  display: none;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.chat-mobile-back-button svg {
  width: 20px;
  height: 20px;
  /* Hat (anders als z.B. .chat-attach-button svg) bisher kein fill:none
     bekommen - der Pfeil-Pfad rendert ohne das mit SVG-Standardfüllung
     (schwarz), sodass statt eines Pfeil-Umrisses eine ausgefüllte dunkle
     Fläche zu sehen war. */
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Unter 860px ist nebeneinander zu eng - Liste und Unterhaltung werden zu
   Einzelansichten wie in einer Handy-Chat-App (WhatsApp-Prinzip): immer nur
   eine der beiden sichtbar, Wechsel per Klick/Zurück-Pfeil. Welche der
   beiden das gerade ist, steuert main.js über die Klassen
   chat-mobile-show-list/-thread auf .chat-layout. */
@media (max-width: 860px) {
  .chat-layout {
    display: block;
    height: calc(100vh - 130px);
  }

  .chat-thread-panel,
  .chat-message-panel {
    height: 100%;
    display: none;
  }

  .chat-layout.chat-mobile-show-list .chat-thread-panel {
    display: flex;
  }

  .chat-layout.chat-mobile-show-thread .chat-message-panel {
    display: flex;
  }

  .chat-mobile-back-button {
    display: inline-flex;
  }

  /* Der Platzhaltertext "Nachricht schreiben..." bricht bei schmalen
     Bildschirmen auf zwei Zeilen um - ohne mehr Höhe würde die zweite Zeile
     abgeschnitten wirken. */
  #chatComposeText {
    min-height: 54px;
  }
}

/* ===================== AVA ===================== */
/* Liste (Gewerke eines Projekts) und Editor sind zwei alternative Vollbild-
   Ansichten (nie nebeneinander) - siehe setAvaMobileView (main.js), das die
   Klassen ava-mobile-show-list/-editor toggelt. Ehemals nur unter 860px so,
   jetzt bei jeder Breite: mehr Platz für die LV-Tabelle statt einer
   dauerhaften schmalen Seitenspalte. */
.ava-layout {
  display: block;
  /* War eine eigene Schätzung calc(100vh - 130px), die nicht zur tatsächlich
     verfügbaren Höhe passte (siehe #avaShell weiter oben) - height:100%
     übernimmt jetzt die von dort bereits korrekt durchgereichte, echte
     Höhe. */
  height: 100%;
  min-height: 480px;
}

/* Zustand direkt nach dem Öffnen eines Projekts aus der AVA-Übersicht,
   siehe avaShowSubView(main.js) mode "projectHome" - zeigt nur Zurück-Button
   + Projektname (.ava-lv-panel-head-title), aber weder die Kopfzeilen-
   Aktionen (Suche/ONLV-Import/+Neues LV) noch die LV-Liste (<main>) noch
   den Editor daneben, bis der Nutzer explizit "Kostenanalyse" oder
   "Ausschreibung" anklickt. */
.ava-layout.ava-project-home-only .ava-lv-panel-head-actions,
.ava-layout.ava-project-home-only .ava-lv-panel > main,
.ava-layout.ava-project-home-only .ava-editor-panel {
  display: none !important;
}

.ava-lv-panel,
.ava-editor-panel {
  height: 100%;
  display: none;
  flex-direction: column;
}

.ava-layout.ava-mobile-show-list .ava-lv-panel {
  display: flex;
}

.ava-layout.ava-mobile-show-editor .ava-editor-panel {
  display: flex;
}

.ava-lv-panel-head-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ava-lv-panel-title {
  margin: 0;
}

.ava-lv-panel-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* .ava-layout gibt eine feste Höhe vor (siehe oben) - main muss deshalb
   selbst scrollen, sonst würde eine lange Gewerke-Liste über den sichtbaren
   Bereich hinaus wachsen (anders als bei .ava-overview, das außerhalb von
   .ava-layout liegt und dessen Seite als Ganzes scrollt). */
.ava-lv-panel main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.ava-editor-panel {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.ava-editor-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  text-align: center;
  padding: 20px;
}

.ava-editor-active {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Bezugsrahmen für .ava-lv-readonly-overlay (position:absolute, deckt den
     kompletten Editor ab, siehe Bearbeitungssperre gegen Doppelnutzung). */
  position: relative;
}

.ava-lv-readonly-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(217, 119, 6, 0.14);
  border-bottom: 1px solid rgba(217, 119, 6, 0.4);
  color: #d97706;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}

.ava-lv-readonly-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(15, 23, 42, 0.04);
  cursor: not-allowed;
}

/* Auf-/Zuklappen ist reines Ansehen, keine Bearbeitung: bei einem
   schreibgeschützten LV (freigegeben oder von jemand anderem gesperrt)
   bleiben deshalb die Pfeile in der OZ-Spalte anklickbar - dasselbe
   z-index-Muster wie .ava-tree-sticky-head (Ebene auf-/zuklappen), nur eben
   pro Zeile statt global. Alles andere in der Zeile liegt weiterhin unter
   dem Overlay und ist damit gesperrt. */
.ava-lv-readonly .ava-group-toggle:not(.ava-group-toggle-empty) {
  position: relative;
  z-index: 6;
}

/* Höher als .ava-lv-readonly-overlay (z-index:5) - gleiches Muster wie
   .ava-back-to-list-button/.ava-tree-sticky-head: "Ausgabe" (PDF erzeugen)
   ist reines Anzeigen/Drucken, keine Bearbeitung, und muss bei einem
   schreibgeschützten (freigegebenen) LV weiterhin nutzbar bleiben. */
#avaOutputButton {
  position: relative;
  z-index: 6;
}

/* Eigene Spaltenbreiten statt der generischen .table-wrapper.projects-table
   th:nth-child(n)-Regeln (style.css, oben) - die sind für die 8-spaltige
   Projekttabelle gedacht und passen nicht auf die 7 Spalten hier (ID hat
   höhere Spezifität als die unscoped Klassen-Regeln, gewinnt unabhängig von
   der Reihenfolge im Stylesheet). */
#avaLvTable th:nth-child(1),
#avaLvTable td:nth-child(1) {
  width: 6%;
}

#avaLvTable th:nth-child(2),
#avaLvTable td:nth-child(2) {
  width: 30%;
}

#avaLvTable th:nth-child(3),
#avaLvTable td:nth-child(3) {
  width: 14%;
}

#avaLvTable th:nth-child(4),
#avaLvTable td:nth-child(4) {
  width: 8%;
  text-align: center;
}

#avaLvTable th:nth-child(5),
#avaLvTable td:nth-child(5) {
  width: 16%;
}

#avaLvTable th:nth-child(6),
#avaLvTable td:nth-child(6) {
  width: 18%;
}

#avaLvTable th:nth-child(7),
#avaLvTable td:nth-child(7) {
  width: 8%;
  text-align: right;
}

/* Weniger vertikales Innenpolster nur in dieser Spalte, damit das größere
   Zahnrad-Symbol (.ava-overview-table .ava-row-gear-btn) hineinpasst, ohne
   dass sich die von den Text-Zellen bestimmte Zeilenhöhe ändert. */
#avaLvTable td:nth-child(7) {
  padding-top: 5px;
  padding-bottom: 5px;
}

.ava-lv-number-input {
  width: 4.5em;
  font-family: monospace;
  text-align: center;
}

.ava-lv-lock-icon {
  cursor: default;
}

/* ----- Zeilen-Kontextmenü (Zahnrad + Rechtsklick) der Gewerke-Übersicht ----- */
.context-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}

.context-menu button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ava-lv-row-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ava-lv-row-menu svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ava-lv-copy-target-choice {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-top: 6px;
}

.ava-lv-copy-target-choice label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
}

.ava-lv-item-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(217, 119, 6, 0.14);
  color: #d97706;
  font-size: 0.72rem;
  font-weight: 600;
}

.ava-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.ava-editor-head-title h3 {
  margin: 0;
}

.ava-active-lv-subtitle {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.ava-editor-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ava-delete-lv-button {
  color: var(--danger, #e5484d);
}

.ava-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 0;
}

.ava-icon-button svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ava-back-to-list-button {
  display: inline-flex;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  align-items: center;
  justify-content: center;
  /* Höher als .ava-lv-readonly-overlay (z-index:5, deckt den gesamten
     .ava-editor-active-Bereich inkl. Header ab) - "Zurück" ist reine
     Navigation, keine Bearbeitung, und muss bei einem schreibgeschützten
     (freigegebenen) LV weiterhin klickbar bleiben, siehe .ava-tree-sticky-head
     für dasselbe Muster. */
  position: relative;
  z-index: 6;
}

.ava-back-to-list-button svg {
  width: 20px;
  height: 20px;
}

.ava-editor-active {
  /* Reiner Fallback für den allerersten Render, bevor main.js
     avaApplyColumnWidths() läuft (das setzt --ava-row-grid per Inline-Style
     und ist damit maßgeblich, siehe AVA_COLUMN_DEFAULT_WIDTHS dort) - beide
     Stellen bewusst synchron gehalten. Menge (7. Wert) und EP (10. Wert)
     breiter, damit eine 4-stellige Zahl mit 2 Nachkommastellen (z.B.
     "1234,56") nicht abgeschnitten wird. */
  --ava-row-grid: 18px 22px 9em 1.6em 26px minmax(160px, 1fr) 9em 3.5em 4.5em 7.5em 4em minmax(90px, 0.6fr) 8em;
}

/* Karten-Look wie bei der Projektübersicht (.table-wrapper.projects-table):
   abgerundete Ecken, dünner Rahmen, Schatten, kein Innen-Gitter - nur
   horizontale Trennlinien zwischen den Zeilen. */
.ava-tree-table-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--panel);
  overflow: hidden;
}

/* Kopfzeile + Breadcrumb-Leiste liegen INNERHALB desselben scrollenden
   Elements wie die Zeilen (nur oben "sticky" fixiert) - dadurch benutzen
   Kopf und Zeilen exakt dieselbe Breitenberechnung (inkl. Scrollbar-Platz),
   die Spalten laufen bei jeder Fenstergröße durchgängig zusammen, wie bei
   einer Excel-Tabelle. Vorher waren Kopf/Leiste separate Geschwister neben
   dem scrollenden Container, wodurch eine sichtbare Scrollbar die Breite
   der Zeilen (nicht aber der Kopfzeile) verkleinert und die Spalten je nach
   Fensterbreite auseinanderlaufen ließ. */
.ava-tree-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.ava-tree-sticky-head {
  position: sticky;
  top: 0;
  /* Höher als .ava-lv-readonly-overlay (z-index:5), damit die reinen
     Navigations-Controls hier (Ebene auf-/zuklappen) bei einem gesperrten
     (schreibgeschützten) LV weiter benutzbar bleiben - die Sperre soll nur
     das Bearbeiten der Zeilen blockieren, nicht das Ansehen/Navigieren im
     Baum. */
  z-index: 6;
}

/* var(--panel) wird im Hell-Theme durch einen zweiten, weiter unten
   stehenden body.theme-light-Block auf einen grau-transparenten Verlauf
   überschrieben (nicht reines Weiß) - hier gezielt für die AVA-Tabelle
   korrigiert, ohne die global genutzte Variable selbst anzufassen. */
body.theme-light .ava-tree-table-wrapper {
  background: #ffffff;
}

.ava-tree-header,
.ava-tree-breadcrumb {
  display: grid;
  grid-template-columns: var(--ava-row-grid);
  gap: 6px;
  align-items: center;
  padding: 10px 14px;
  background: var(--panel-solid);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  /* siehe .ava-group-row-header: em-Spaltenbreiten brauchen dieselbe font-size
     wie die Datenzeilen, sonst laufen die Spalten auseinander. */
  font-size: 0.72rem;
}

.ava-tree-header {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ava-tree-header > *,
.ava-tree-breadcrumb > * {
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* Vertikale Spaltentrennlinien (Excel-/NOVA-Optik) - auf denselben vier
   Grid-Zeilentypen wie --ava-row-grid (Kopf, Breadcrumb, Gruppen- und
   Positionszeilen), damit die Linien bei jeder Zeilenart exakt an denselben
   Spaltengrenzen stehen. Letzte Spalte bleibt ohne Linie (der Wrapper hat
   schon einen eigenen rechten Rahmen, siehe .ava-tree-table-wrapper).
   box-shadow statt border-right: die meisten Zellen in den Daten-Zeilen sind
   <input>-Felder, und deren eigener Rahmen wird per !important auf
   transparent gesetzt (siehe .ava-position-row-main input etc.) - das würde
   ein border-right hier ebenfalls unsichtbar machen. box-shadow ist von
   diesem Reset nicht betroffen und beansprucht (als inset) auch keinen
   zusätzlichen Platz im Grid. */
.ava-tree-header > *:not(:last-child),
.ava-tree-breadcrumb > *:not(:last-child),
.ava-group-row-header > *:not(:last-child),
.ava-position-row-main > *:not(:last-child) {
  box-shadow: inset -1px 0 0 var(--border);
}

/* Spaltenbreiten per Ziehen anpassbar (siehe avaStartColumnResize in main.js) -
   der Griff liegt am rechten Rand jeder Kopfzellen-Spalte, überlappt leicht
   in die Nachbarspalte hinein (größere Trefferfläche als die sichtbare Linie). */
.ava-col-header {
  position: relative;
  min-width: 0;
}

.ava-col-header-label {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ava-col-resizer {
  position: absolute;
  top: 0;
  right: -6px;
  width: 12px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
}

.ava-col-resizer::after {
  content: "";
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: transparent;
  border-radius: 1px;
}

.ava-col-resizer:hover::after {
  background: var(--accent);
}

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

.ava-tree-breadcrumb-nav {
  grid-column: span 2;
  gap: 4px;
}

.ava-tree-breadcrumb-nav button {
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

.ava-tree-breadcrumb-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
}

.ava-tree-container {
  /* Kein eigenes overflow/flex mehr - .ava-tree-scroll (Elternelement) ist
     jetzt der alleinige Scroll-Owner, siehe .ava-tree-sticky-head. */
}

.ava-tree-empty {
  padding: 16px;
  color: var(--muted);
  font-size: 0.9rem;
}


/* Flache Tabellenzeilen (NOVA-Optik: Handle, Pfeil, OZ, Zahnrad, Kurztext,
   Menge, ME, EKT, EP, Typ-Badge, Notizen, STLV) - Gruppen- UND Positionszeilen
   teilen sich dasselbe Spaltenraster (--ava-row-grid) UND dieselbe schlichte
   Zeilenoptik (nur eine dünne Trennlinie, kein Card/Bubble-Look wie im Chat -
   siehe .chat-bubble zum Vergleich, absichtlich NICHT dieselbe Optik hier). */
.ava-group-row-header,
.ava-position-row-main {
  display: grid;
  grid-template-columns: var(--ava-row-grid);
  gap: 6px;
  align-items: center;
  padding: 2px 14px;
  min-height: 24px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  /* Muss exakt dieselbe Schriftgröße wie .ava-tree-header haben: die
     em-Einheiten in --ava-row-grid (9em, 4.5em, ...) berechnen sich relativ
     zur EIGENEN font-size des Grid-Containers, nicht zu einer festen Basis -
     ohne das hier zu setzen laufen Kopf- und Zeilenspalten auseinander. */
  font-size: 0.72rem;
}

.ava-group-row:hover > .ava-group-row-header,
.ava-position-row:hover > .ava-position-row-main {
  background: var(--row-hover-bg);
}

.ava-group-row.is-selected > .ava-group-row-header,
.ava-position-row.is-selected > .ava-position-row-main {
  box-shadow: inset 3px 0 0 var(--accent);
  background: rgba(31, 191, 127, 0.08);
}

.ava-row-handle {
  color: var(--muted);
  opacity: 0.5;
  text-align: center;
  font-size: 0.85rem;
  cursor: default;
}

.ava-group-toggle {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
  cursor: pointer;
}

.ava-group-row.is-expanded > .ava-group-row-header .ava-group-toggle,
.ava-position-row.is-expanded > .ava-position-row-main .ava-group-toggle {
  transform: rotate(90deg);
}

.ava-group-toggle svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.ava-group-toggle-empty {
  width: 18px;
  height: 18px;
}

.ava-group-ordnungszahl,
.ava-position-ordnungszahl {
  font-family: monospace;
  color: var(--muted);
  /* !important: der globale Input-Reset (input:not([type=...]):not([type=...]))
     setzt font-size: inherit mit höherer Spezifität als eine einzelne Klasse -
     ohne !important bleiben Ordnungszahl-Inputs bei der normalen Schriftgröße. */
  font-size: 0.72rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 5px;
}

/* LG/UG-Ordnungszahlen fett wie ihr Titel, Positionen/Folgepositionen (mit
   Buchstaben-Suffix) bleiben dünn - siehe NOVA-Referenz. */
.ava-group-ordnungszahl {
  /* !important: der globale Input-Reset (input:not([type=...]):not([type=...]))
     setzt font-weight: inherit mit höherer Spezifität als eine einzelne Klasse. */
  font-weight: 700 !important;
  color: var(--text);
}

/* !important auf border/background/border-radius/padding: der globale
   Input-Reset (input:not([type=...]):not([type=...]), Zeile ~9585, und im
   Hell-Theme body.theme-light input) hat mit "body." bzw. den zwei :not()
   höhere Spezifität als eine einzelne Klasse und würde sonst überall in der
   Zeile sichtbare Rahmen/abgerundete Boxen erzwingen - Excel-Optik braucht
   flache Zellen ohne Dauer-Rahmen (nur bei Hover/Fokus sichtbar). */
input.ava-group-ordnungszahl {
  border: 1px solid transparent !important;
  background: transparent !important;
  border-radius: 0 !important;
  width: 100%;
}

input.ava-group-ordnungszahl:hover,
input.ava-group-ordnungszahl:focus {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

/* Schlichtes Linien-Icon statt Kreis-Button - gleiche Optik wie die
   Sidebar-Icons (siehe #openSettings/GEAR_ICON_SVG, main.js). */
.ava-row-gear-btn {
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  opacity: 0.6;
}

.ava-row-gear-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ava-row-gear-btn:hover {
  opacity: 1;
}

/* Größeres Zahnrad speziell in der LV-Übersicht (nicht in der dichteren
   Gruppen-/Positionsbaum-Ansicht, die dieselbe Klasse mitnutzt) - die
   Zeilenhöhe bleibt unverändert, da sie von den Text-Zellen bestimmt wird. */
.ava-overview-table .ava-row-gear-btn {
  width: 32px;
  height: 32px;
  min-height: 32px;
}

.ava-overview-table .ava-row-gear-btn svg {
  width: 22px;
  height: 22px;
}

.ava-group-title {
  /* !important: siehe .ava-group-ordnungszahl - globaler Input-Reset gewinnt sonst. */
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--text);
  min-width: 0;
  width: 100%;
}

.ava-group-title:hover,
.ava-group-title:focus {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

.ava-position-row-main input {
  width: 100%;
  padding: 2px 5px !important;
  /* !important: siehe .ava-group-ordnungszahl - globaler Input-Reset gewinnt sonst. */
  font-size: 0.72rem !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
}

.ava-position-row-main input:hover,
.ava-position-row-main input:focus {
  background: var(--card) !important;
  border-color: var(--border) !important;
}


.ava-position-text-preview {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.ava-position-text-preview:hover {
  text-decoration: underline;
  color: var(--text);
}

.ava-cell {
  display: block;
  /* Ohne dies hat eine leere Zelle (Menge/ME/EKT/EP/Typ bei Gruppen- und
     Vorbemerkungszeilen) Höhe 0 (die Zeile zentriert ihre Kinder per
     align-items:center statt sie zu stretchen, siehe .ava-group-row-header,
     .ava-position-row-main) - die vertikale Spaltentrennlinie (box-shadow,
     siehe weiter oben) hat dann nichts, worüber sie sich zeichnen könnte, und
     verschwindet unsichtbar an der Stelle. 24px = derselbe Wert wie
     .ava-group-row-header/.ava-position-row-main { min-height: 24px }, damit
     die Linie exakt so hoch wie bei den befüllten Zellen daneben wirkt. */
  min-height: 24px;
}

.ava-cell-notizen {
  font-size: 0.72rem !important;
}

.ava-cell-stlv {
  font-size: 0.72rem;
  color: var(--muted);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Z"-Spalte direkt neben der OZ - markiert frei formulierte Zeilen (siehe
   avaZCellHtml in main.js), leer bei allen anderen. Eigene, schmale Spur statt
   als Suffix an die OZ angehängt (frühere Konvention), damit die OZ selbst
   immer nur die reine Nummer/den reinen Buchstaben zeigt. */
.ava-cell-z {
  justify-self: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
}

.ava-col-header-z .ava-col-header-label {
  text-align: center;
}

.ava-type-badge {
  justify-self: start;
}

.ava-group-children,
.ava-item-children {
  /* Bewusst keine Einrückung - die Ordnungszahl (LG.UG.P.O) zeigt die
     Hierarchie schon über die Punkt-Notation, die Spalten sollen bei jeder
     Tiefe exakt untereinander stehen (siehe NOVA-Referenz). */
  padding-left: 0;
}

.ava-item-children.hidden {
  display: none;
}

.ava-item-langtext {
  padding: 4px 12px 8px;
  margin-bottom: 2px;
  font-size: 0.85rem;
  min-height: 1.6em;
  color: var(--muted);
}

.ava-item-langtext:focus {
  outline: 1px solid var(--border);
  outline-offset: -1px;
  color: var(--text);
}

.ava-item-langtext p {
  margin: 0 0 6px;
}

.ava-item-langtext p:last-child {
  margin-bottom: 0;
}

.ava-grand-total-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-weight: 700;
  font-size: 1.05rem;
}

/* ----- Badges für die Typ-Spalte (SVB/GT/WVB/EPA) ----- */
.badge-position {
  background: rgba(31, 191, 127, 0.15);
  color: #1fbf7f;
}

.badge-grundtext {
  background: rgba(96, 165, 250, 0.18);
  color: #60a5fa;
}

.badge-svb {
  background: rgba(250, 204, 21, 0.18);
  color: #eab308;
}

.badge-wvb {
  background: rgba(244, 114, 182, 0.18);
  color: #f472b6;
}

/* ----- Toolbar-Dropdowns (+ Neu / Extras) ----- */
.ava-dropdown {
  position: relative;
  display: inline-flex;
}

.ava-tree-filter {
  margin-left: auto;
  /* Bezugsrahmen für .search-icon (position:absolute) - fehlte bisher, daher
     hat sich das Icon am nächsten POSITIONIERTEN Vorfahren orientiert (durch
     .ava-editor-active { position: relative } für das Read-Only-Overlay neu
     hinzugekommen) und landete mitten im LV-Baum statt im Suchfeld. */
  position: relative;
  /* inline-flex statt Standard-Inline-Fluss: die Höhe des Wrappers richtet
     sich damit exakt nach dem Input, nicht nach der Zeilenhöhe der
     Inline-Elemente - robuster gegen Zoom-/Font-Rundungsfehler als reine
     top:50%-Zentrierung allein. */
  display: inline-flex;
  align-items: center;
}

.ava-tree-filter input {
  width: 200px;
  padding-left: 36px !important;
}

/* ----- Spalten ein-/ausblenden (siehe avaApplyColumnVisibility, main.js) ----- */
.ava-column-settings-menu {
  min-width: 180px;
}

.ava-column-settings-title {
  padding: 4px 12px;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.ava-column-settings-menu label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
}

.ava-column-settings-menu label:hover {
  background: rgba(15, 23, 42, 0.05);
}

.ava-column-settings-menu input[type="checkbox"] {
  margin: 0;
}

/* Jede ausgeblendete Spalte hat denselben Kindindex (0-basiert, siehe
   --ava-row-grid) in Kopfzeile, Breadcrumb, Gruppen- UND Positionszeilen -
   ein einziges :nth-child pro Kontext reicht deshalb, ganz ohne die
   Zeilen-Bau-Funktionen in main.js anzufassen. Die Grid-Spaltenbreite selbst
   wird zusätzlich per --ava-row-grid auf 0px gesetzt (avaApplyColumnWidths),
   das hier nur die Zellinhalte selbst ausblenden.
   Reihenfolge: 0 Griff, 1 Klapp-Pfeil, 2 OZ, 3 Z, 4 Zahnrad, 5 Kurztext,
   6 Menge, 7 ME, 8 EKT, 9 EP, 10 Typ, 11 Notizen, 12 STLV. */
.ava-editor-active.ava-hide-col-8 .ava-tree-header > :nth-child(9),
.ava-editor-active.ava-hide-col-8 .ava-tree-breadcrumb > :nth-child(9),
.ava-editor-active.ava-hide-col-8 .ava-group-row-header > :nth-child(9),
.ava-editor-active.ava-hide-col-8 .ava-position-row-main > :nth-child(9),
.ava-editor-active.ava-hide-col-9 .ava-tree-header > :nth-child(10),
.ava-editor-active.ava-hide-col-9 .ava-tree-breadcrumb > :nth-child(10),
.ava-editor-active.ava-hide-col-9 .ava-group-row-header > :nth-child(10),
.ava-editor-active.ava-hide-col-9 .ava-position-row-main > :nth-child(10),
.ava-editor-active.ava-hide-col-10 .ava-tree-header > :nth-child(11),
.ava-editor-active.ava-hide-col-10 .ava-tree-breadcrumb > :nth-child(11),
.ava-editor-active.ava-hide-col-10 .ava-group-row-header > :nth-child(11),
.ava-editor-active.ava-hide-col-10 .ava-position-row-main > :nth-child(11),
.ava-editor-active.ava-hide-col-11 .ava-tree-header > :nth-child(12),
.ava-editor-active.ava-hide-col-11 .ava-tree-breadcrumb > :nth-child(12),
.ava-editor-active.ava-hide-col-11 .ava-group-row-header > :nth-child(12),
.ava-editor-active.ava-hide-col-11 .ava-position-row-main > :nth-child(12),
.ava-editor-active.ava-hide-col-12 .ava-tree-header > :nth-child(13),
.ava-editor-active.ava-hide-col-12 .ava-tree-breadcrumb > :nth-child(13),
.ava-editor-active.ava-hide-col-12 .ava-group-row-header > :nth-child(13),
.ava-editor-active.ava-hide-col-12 .ava-position-row-main > :nth-child(13) {
  /* visibility statt display: none - die Spalte bleibt ein Grid-Item (die
     Breite wird separat per --ava-row-grid auf 0px gesetzt, siehe
     avaApplyColumnWidths in main.js). Mit display:none würde das Grid-Item
     komplett aus dem Layout fallen und alle folgenden Spalten würden eine
     Spur nach links rutschen (z.B. EP landet dann sichtbar in der
     EKT-Spur). */
  visibility: hidden;
  overflow: hidden;
}

/* ----- AVA-Übersicht (Projekte mit LVs) ----- */
.ava-overview {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ava-overview-table tbody tr {
  cursor: pointer;
}

/* ----- Vergabe/Bieterpreisvergleich ----- */
/* height:100% allein reicht hier nicht - .page (der Elterncontainer) hat
   selbst keine feste Höhe, ein Prozentwert dagegen liefert dann "auto" statt
   eines echten Werts, wodurch .ava-vergabe-compare-scroll nie einen inneren
   Scrollbalken bekommt (der ganze Tabelleninhalt wächst stattdessen einfach
   die Seite auf, sticky-Kopfzeilen haben so nichts, woran sie "kleben"
   können). Gleiche Lösung wie beim Nachbar-Layout .ava-layout (LV-Editor):
   feste, vom Viewport abgeleitete Höhe statt Prozent. */
.ava-vergabe {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 130px);
  min-height: 480px;
}

.ava-vergabe-list {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#avaVergabeLvTable tbody tr {
  cursor: pointer;
}

.ava-vergabe-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.ava-vergabe-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Sperr-Hinweis + Blockade für eine "gesperrte" Kostenanalyse (Revision
   abgeschlossen, siehe "Sperren & kopieren"). #avaKkSplit enthält bereits
   sowohl die Baumtabelle als auch das Kalkulationspanel als Geschwister -
   pointer-events:none dort reicht deshalb aus, um beide auf einmal
   schreibgeschützt zu machen, ohne jedes einzelne Eingabefeld separat
   deaktivieren zu müssen. */
.ava-kk-locked-banner {
  display: none;
  padding: 8px 16px;
  background: #fff3cd;
  color: #7a5b00;
  font-size: 0.82rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

#avaKostenanalyseDetail.ava-kk-locked .ava-kk-locked-banner {
  display: block;
}

#avaKostenanalyseDetail.ava-kk-locked #avaKkSplit {
  pointer-events: none;
  opacity: 0.65;
  filter: grayscale(0.2);
}

/* Bearbeitungssperre gegen Doppelnutzung (Kostenanalyse gerade bei einem
   anderen Nutzer offen) - eigene Klasse/Banner, unabhängig von
   .ava-kk-locked oben (das ist die dauerhafte "Revision abgeschlossen"-
   Sperre). Gleiches Sperr-Muster (pointer-events:none aufs Split-Panel). */
.ava-kk-editlock-banner {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(217, 119, 6, 0.14);
  border-bottom: 1px solid rgba(217, 119, 6, 0.4);
  color: #d97706;
  font-size: 0.82rem;
  font-weight: 600;
}

#avaKostenanalyseDetail.ava-kk-edit-locked .ava-kk-editlock-banner {
  display: flex;
}

#avaKostenanalyseDetail.ava-kk-edit-locked #avaKkSplit {
  pointer-events: none;
  opacity: 0.65;
  filter: grayscale(0.2);
}

.ava-vergabe-detail-head-title {
  flex: 1;
  min-width: 0;
}

.ava-vergabe-detail-head-title h3 {
  margin: 0;
  font-size: 1rem;
}

/* Ebenen-weise auf-/zuklappen (◀/▶) im Kopf der Kostenanalyse-Detailansicht -
   gleiche Optik wie .ava-tree-breadcrumb-nav im Haupt-LV-Baum. */
.ava-kk-level-buttons {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.ava-kk-level-buttons button {
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

/* Gleiche "Karten"-Optik wie .ava-tree-table-wrapper (Haupt-LV-Baum) -
   abgerundete Ecken, Rahmen, Schatten, im Hell-Theme reines Weiß statt der
   globalen --panel-Variable (siehe body.theme-light .ava-tree-table-wrapper
   weiter oben für den Hintergrund). */
.ava-vergabe-table-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--panel);
  overflow: hidden;
}

body.theme-light .ava-vergabe-table-wrapper {
  background: #ffffff;
}

.ava-vergabe-compare-scroll {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

/* Optik bewusst an .ava-tree-header/.ava-group-row-header/.ava-position-row-main
   angeglichen (siehe style.css weiter oben, ~13464ff) - gleiche font-size
   (0.72rem), gleiche Kopfzeilen-Optik (uppercase/bold/muted), gleiche
   Zeilenhöhe (min-height 24px), damit die Vergleichstabelle wie eine
   natürliche Fortsetzung der LV-Baumansicht wirkt. */
.ava-vergabe-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.ava-vergabe-compare-table th,
.ava-vergabe-compare-table td {
  padding: 2px 10px;
  min-height: 24px;
  border-bottom: 1px solid var(--border);
  /* Vertikale Spaltentrennlinien, wie in der LV-Baumansicht (.ava-cell). */
  border-right: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.ava-vergabe-compare-table th:last-child,
.ava-vergabe-compare-table td:last-child {
  border-right: none;
}

.ava-vergabe-compare-table thead th {
  position: sticky;
  top: 0;
  background: var(--panel-solid);
  z-index: 1;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding: 6px 12px;
}

/* Zweite Kopfzeile (EP/PP je Bieter, siehe renderAvaVergabeCompare) - muss
   unterhalb der ersten, fixen Kopfzeile einrasten statt sie zu überlagern.
   --ava-vergabe-head1-height wird per JS auf die tatsächlich gemessene Höhe
   der ersten Kopfzeile gesetzt (die variiert je nach Bieter-Namenslänge) -
   ein fixer Pixelwert würde bei langen Firmennamen zu Überlappung führen. */
.ava-vergabe-compare-table thead tr:nth-child(2) th {
  top: var(--ava-vergabe-head1-height, 34px);
}

.ava-vergabe-bidder-subcol {
  font-size: 0.65rem;
  padding: 3px 10px;
}

.ava-vergabe-compare-table td.money,
.ava-vergabe-compare-table th.money {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Preisvergleich je Position: günstigster Bieter grün, teuerster rot, alle
   dazwischen liegenden Preise bleiben in der normalen Textfarbe. */
.ava-vergabe-price-min {
  color: #1fbf7f;
  font-weight: 700;
}

.ava-vergabe-price-max {
  color: #ef4444;
  font-weight: 700;
}

/* Eventualposition: kursiv, damit auf einen Blick klar ist, dass diese
   Zeile nicht in den Gesamtpreis eingerechnet wird (siehe avaVergabeBidderRawTotal). */
.ava-vergabe-eventual-row td {
  font-style: italic;
}

/* Alternativposition/Grundposition, die im Preisspiegel-Variantenvergleich
   gerade NICHT zählt (siehe avaVergabeCompareActiveVariant) - gleiche
   Konvention wie Eventualposition, damit auf einen Blick klar ist, welche
   Zeile in der Fußzeilen-Summe steckt. */
.ava-vergabe-variant-excluded-row td {
  font-style: italic;
  opacity: 0.7;
}

.ava-vergabe-variant-btn {
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
}

.ava-vergabe-variant-btn:hover .badge {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 1px;
}

.ava-vergabe-variant-btn.ava-vergabe-variant-active .badge {
  outline: 2px solid #16a34a;
  outline-offset: 1px;
}

.ava-vergabe-discount-note {
  font-weight: 400;
  font-size: 0.65rem;
  color: var(--muted);
  white-space: nowrap;
}

.ava-bidder-import-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ava-bidder-import-status {
  font-size: 0.8rem;
  color: var(--muted);
}

.ava-bidder-import-status.ava-bidder-import-status-error {
  color: #ef4444;
}

.ava-bidder-import-status.ava-bidder-import-status-ok {
  color: #16a34a;
}

.ava-bidder-discount-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ava-bidder-discount-value {
  width: 90px;
}

.ava-bidder-discount-type {
  width: 70px;
}

.ava-vergabe-compare-table tfoot td {
  font-weight: 700;
  border-bottom: none;
  border-top: 2px solid var(--border);
  text-align: right;
}

.ava-vergabe-compare-table tfoot td:first-child {
  text-align: left;
}

/* Gruppen-/Kopfzeilen bewusst OHNE Farbwäsche - im LV-Baum sind Gruppenzeilen
   genauso weiß/neutral wie normale Zeilen, nur fett (siehe Screenshot-Vorbild
   des Nutzers). */
.ava-vergabe-group-row td {
  font-weight: 700;
  background: transparent;
}

/* Firmenname + Gesamtpreis rechtsbündig, damit alle Bieter-Spalten optisch
   auf gleicher Höhe/Kante stehen statt links "zerklüftet" auszusehen.
   Muss die Basis-Regel ".ava-vergabe-compare-table th { text-align:left }"
   überstimmen, daher hier mit der Tabellenklasse zusammen qualifiziert
   (sonst gewinnt die spezifischere Basis-Regel trotz späterer Quellreihenfolge). */
.ava-vergabe-compare-table th.ava-vergabe-bidder-col {
  text-align: right;
}

/* Bewusst KEIN .ghost-Button mehr (der bringt min-height:40px + Padding/
   Rahmen/Hintergrund mit, was die Kopfzeile unnötig hoch machte) - stattdessen
   ein reiner Link-Look: kein Rahmen/Hintergrund/Mindesthöhe, nur Unterstreichung
   beim Hover als Klick-Hinweis. */
.ava-vergabe-bidder-name {
  all: unset;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
  font-size: 0.72rem;
  color: var(--text);
  line-height: 1.3;
}

.ava-vergabe-bidder-name:hover {
  text-decoration: underline;
  color: var(--accent, #2563eb);
}

/* Gesamtpreis direkt unter dem Firmennamen in der fixen Kopfzeile (siehe
   renderAvaVergabeCompare) - bleibt so beim Scrollen sichtbar, nicht erst
   in der Fußzeile am Tabellenende. Gleiche Farblogik wie dort
   (.ava-vergabe-price-min/-max), nur kompakter für die Kopfzeile. */
.ava-vergabe-bidder-head-total {
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.ava-vergabe-bidder-head-total .ava-vergabe-discount-note {
  font-size: 0.6rem;
}

/* Platzhalter-Zeile für Bieter ohne Nachlass (siehe
   avaVergabeBidderTotalCellHtml) - reserviert dieselbe Zeilenhöhe wie ein
   echter Nachlass-Hinweis, nur dezenter/durchsichtiger, damit die
   Gesamtpreise aller Bieter-Spalten auf gleicher Höhe stehen. */
.ava-vergabe-discount-note-placeholder {
  opacity: 0.35;
}

/* Typ-Badges (GT/SVB/WVB) für Grundtext-Köpfe/Vorbemerkungen - identische
   Klassen wie im LV-Baum (badge/badge-grundtext/badge-svb/badge-wvb,
   siehe ~13873ff), damit Farbe/Form exakt übereinstimmen. */
.ava-vergabe-compare-table .badge {
  margin-right: 6px;
  vertical-align: middle;
}

/* Eigene, schmale Spalte für den Auf-/Zuklapp-Pfeil ganz links - wie im
   LV-Baum (Pfeil/Chevron in eigener Spalte VOR der OZ, nicht mit dem
   Kurztext vermischt). */
.ava-vergabe-toggle-col {
  width: 60px;
  white-space: nowrap;
  padding-left: 8px !important;
  padding-right: 4px !important;
}

/* "Z"-Spalte (frei formulierte Zeilen), schmal und zentriert - wie
   .ava-col-header-z/.ava-cell-z im LV-Baum. */
.ava-vergabe-z-col {
  width: 28px;
  text-align: center;
}

/* EH-Spalte (Einheit) - kurze Werte wie "m²"/"Stk", braucht kaum Platz
   (siehe Umbenennung Einheit -> EH). */
.ava-vergabe-eh-col {
  width: 34px;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.ava-vergabe-compare-table .ava-cell-z {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
}

/* Ebenenweise Auf-/Zuklappen (Pendant zu avaTreeCollapseLevelButton/
   avaTreeExpandLevelButton im Haupt-LV-Baum, .ava-tree-breadcrumb-nav
   button) - runde 22px-Buttons, identische Optik. */
.ava-vergabe-level-btn {
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* Zeilen-Auf-/Zuklapp-Pfeil - rund, wie die Chevron-Buttons im LV-Baum. */
.ava-vergabe-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  margin-right: 4px;
  font-size: 0.68rem;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
}

.ava-bidder-price-table-wrapper {
  max-height: 50vh;
  overflow: auto;
  margin-top: 12px;
}

.ava-bidder-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.ava-bidder-price-table th,
.ava-bidder-price-table td {
  padding: 2px 8px;
  min-height: 24px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: left;
}

.ava-bidder-price-table th:last-child,
.ava-bidder-price-table td:last-child {
  border-right: none;
}

.ava-bidder-price-table thead th {
  position: sticky;
  top: 0;
  background: var(--panel-solid);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--muted);
  padding: 10px 8px;
}

.ava-bidder-price-table .badge {
  margin-right: 6px;
  vertical-align: middle;
}

.ava-bidder-part1-input,
.ava-bidder-part2-input {
  width: 90px;
}

.ava-bidder-ep-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Eigene Spaltenbreiten statt der generischen .table-wrapper.projects-table
   th:nth-child(n)-Regeln (style.css, oben) - die sind für die 8-spaltige
   Haupt-Projekttabelle gedacht (Projekt-Spalte dort nur 9% breit) und lassen
   den Projektnamen hier immer zweizeilig umbrechen, auch bei breitem Fenster.
   Alle drei Klassen kombiniert für höhere Spezifität, damit diese Regeln
   unabhängig von der Reihenfolge im Stylesheet gewinnen. */
.table-wrapper.projects-table.ava-overview-table th:nth-child(1),
.table-wrapper.projects-table.ava-overview-table td:nth-child(1) {
  width: 12%;
}

.table-wrapper.projects-table.ava-overview-table th:nth-child(2),
.table-wrapper.projects-table.ava-overview-table td:nth-child(2) {
  width: auto;
}

.table-wrapper.projects-table.ava-overview-table th:nth-child(3),
.table-wrapper.projects-table.ava-overview-table td:nth-child(3) {
  width: 12%;
}

.table-wrapper.projects-table.ava-overview-table th:nth-child(4),
.table-wrapper.projects-table.ava-overview-table td:nth-child(4) {
  width: 15%;
}

/* #avaKostenanalyseTable (ID) statt der obigen geteilten Klassen-Regel, da
   diese Tabelle (Name/Katalog/Besitzer/Geändert am/...) eine andere Spalten-
   Bedeutung hat als die allgemeine Projekt-Übersichtstabelle, die dieselben
   Klassen nutzt - Katalog (Spalte 2, seit Wegfall der Label-Spalte) soll
   hier mehr Platz bekommen, ohne die andere Tabelle zu beeinflussen. */
#avaKostenanalyseTable th:nth-child(2),
#avaKostenanalyseTable td:nth-child(2) {
  width: 26%;
}

/* ----- AVA-Einstellungen (Stammdaten etc., über "Einstellungen" in der reduzierten Sidebar) ----- */
.ava-settings {
  display: flex;
  height: 100%;
  gap: 16px;
}

.ava-settings-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 200px;
  flex-shrink: 0;
  padding-top: 4px;
}

.ava-settings-nav-item {
  text-align: left;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-weight: 600;
}

.ava-settings-nav-item:hover {
  background: var(--card);
}

.ava-settings-nav-item.is-active {
  background: var(--card);
  box-shadow: inset 3px 0 0 var(--accent);
}

.ava-settings-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 4px 4px 20px;
}

.ava-settings-panel h2 {
  margin: 0 0 14px;
}

/* ----- Zurück-zur-Übersicht-Button im LV-Panel-Kopf ----- */
.ava-back-to-overview-button {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ava-back-to-overview-button svg {
  width: 18px;
  height: 18px;
}

/* ----- Reduzierte Sidebar im AVA-Bereich ----- */
.sidebar-nav-section-label {
  padding: 14px 16px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.ava-focus-back-button {
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 4px;
}

@media (max-width: 860px) {
  .ava-group-row-header,
  .ava-position-row-main {
    /* 5. Wert (Menge) und 7. Wert (EP) breiter - dieselbe 4-stellige-Zahl-
       mit-2-Nachkommastellen-Anforderung wie im breiten Layout oben, hier
       nur eigens definiert, da dieses Raster in schmalen Fenstern/auf
       Mobilgeräten statt --ava-row-grid greift. */
    grid-template-columns: 20px 4em 22px minmax(100px, 1fr) 7em 3em 6.5em 3.5em;
  }

  .ava-tree-header {
    display: none;
  }

  .ava-group-row-header > *:nth-child(1),
  .ava-position-row-main > *:nth-child(1),
  .ava-group-row-header > *:nth-child(4),
  .ava-position-row-main > *:nth-child(4),
  .ava-group-row-header > *:nth-child(9),
  .ava-position-row-main > *:nth-child(9),
  .ava-cell-stlv,
  .ava-cell-notizen {
    display: none;
  }
}

.ava-stamm-lv-active-info {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--border);
  margin-bottom: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.ava-stamm-lv-none {
  color: var(--muted);
}

.ava-stamm-lv-import-status {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.ava-stamm-lv-version-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}

.ava-stamm-lv-version-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.ava-stamm-lv-version-row.is-active {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ----- Stamm-LV definieren (nachträgliche Zuordnung) ----- */
.ava-define-stamm-hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 12px;
}

.ava-define-stamm-version-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.ava-define-stamm-version-row.ava-stamm-lv-version-row {
  cursor: default;
}

.ava-define-stamm-current-badge {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
}

.ava-define-stamm-result {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt, rgba(0, 0, 0, 0.04));
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ----- Stammdaten ansehen (read-only Betrachter) ----- */
.ava-stamm-viewer-card {
  width: min(900px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  padding-bottom: 4px;
  display: flex;
  flex-direction: column;
}

body.theme-light .ava-stamm-viewer-card {
  background: #ffffff;
}

.ava-stamm-viewer-table-wrapper {
  margin: 0 20px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
}

.ava-stamm-viewer-header,
.ava-stamm-viewer-row {
  display: grid;
  grid-template-columns: 22px 9em 1fr 4em;
  gap: 6px;
  align-items: center;
}

.ava-stamm-viewer-header {
  padding: 10px 14px;
  background: var(--panel-solid);
  border-bottom: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.ava-stamm-viewer-tree {
  overflow-y: auto;
  flex: 1;
}

.ava-stamm-viewer-row {
  padding: 4px 14px;
  min-height: 30px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  /* siehe .ava-group-row-header in der Haupt-Tabelle: em-Spaltenbreiten
     brauchen dieselbe font-size wie die Kopfzeile, sonst laufen die Spalten
     auseinander. */
  font-size: 0.72rem;
}

.ava-stamm-viewer-row:hover {
  background: var(--row-hover-bg);
}

.ava-stamm-viewer-row-group .ava-stamm-viewer-oz,
.ava-stamm-viewer-row-group .ava-stamm-viewer-label {
  font-weight: 700;
  color: var(--text);
}

.ava-stamm-viewer-oz {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ava-stamm-viewer-label {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ava-stamm-viewer-einheit {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ÖNORM-Lücken (al/bl/blo/rw) aus dem Stamm-LV-Import - siehe
   stammLvConvertLangtext (server.js). Ohne dieses Styling wären es
   unbekannte, unsichtbare Elemente im Rich-Text; hier bewusst als
   erkennbare, aber unaufdringliche Platzhalter dargestellt. */
.stamm-lv-gap {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 4px;
  border: 1px dashed var(--accent);
  border-radius: 4px;
  color: var(--accent);
  font-size: 0.85em;
  text-align: center;
  line-height: 1.4;
}

/* Die vier ÖNORM-Lückenarten sollen im Baum auf einen Blick auseinander-
   zuhalten sein (siehe AVA_GAP_TITLES in main.js, dort hängt auch der
   erklärende Tooltip):
   - Ausschreiber-Lücke (<al>, Standardfall oben): Akzentfarbe, beschreibbar -
     "hier musst du ran".
   - echte Bieter-Lücke (<bl>): fremde Farbe und gesperrt (contenteditable
     wird in avaDecorateLangtextGaps auf false gesetzt).
   - unechte Bieter-Lücke (<blo>): dieselbe Farbe, aber beschreibbar - hier
     trägt der Ausschreiber seine Vorgabe ein.
   - Rechenwert (<rw>): unauffällig grau, ebenfalls gesperrt. */
.stamm-lv-gap-bl,
.stamm-lv-gap-blo {
  border-color: var(--ava-gap-bieter);
  color: var(--ava-gap-bieter);
}

.stamm-lv-gap-bl,
.stamm-lv-gap-rw {
  cursor: not-allowed;
}

.stamm-lv-gap-rw {
  border-style: solid;
  border-color: var(--muted);
  color: var(--muted);
}

.stamm-lv-gap:focus {
  outline: none;
  background: rgba(31, 191, 127, 0.12);
  border-style: solid;
}

.ava-stamm-viewer-children.hidden {
  display: none;
}

.ava-stamm-viewer-row-wrap.is-expanded .ava-group-toggle {
  transform: rotate(90deg);
}

.ava-stamm-lv-version-label {
  flex: 1;
  font-weight: 600;
}

.ava-stamm-lv-version-meta {
  color: var(--muted);
  white-space: nowrap;
}

.ava-stamm-lv-version-active-badge {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 700;
}

.ava-lv-check-header,
.ava-lv-check-row {
  display: grid;
  grid-template-columns: 9em 14em 1fr 6.5em;
  gap: 10px;
  align-items: center;
}

.ava-lv-check-header {
  padding: 10px 14px;
  background: var(--panel-solid);
  border-bottom: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.ava-lv-check-list {
  overflow-y: auto;
  flex: 1;
}

.ava-lv-check-empty {
  padding: 28px 14px;
  text-align: center;
  color: var(--accent);
  font-weight: 600;
}

.ava-lv-check-row {
  padding: 8px 14px;
  min-height: 34px;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}

.ava-lv-check-row:hover {
  background: var(--row-hover-bg);
}

.ava-lv-check-oz {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ava-lv-check-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ava-lv-check-message {
  color: var(--text);
}

.ava-lv-check-row-warning .ava-lv-check-message {
  color: #b8860b;
}

.ava-lv-check-row-error .ava-lv-check-message {
  color: #d3383b;
}

.ava-lv-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

#avaLvInfoDialog .rich-input {
  min-height: 120px;
}

.ava-lv-info-description-row {
  align-items: stretch;
}

.ava-lv-info-description-row .rich-editor {
  width: 100%;
}

.ava-ep-anteile-hint,
.ava-dialog-hint {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 16px;
}

.dialog input[readonly] {
  background: var(--panel-solid);
  color: var(--muted);
  cursor: default;
}

/* ----- AVA Adressbuch (Informationen-Menü) ----- */
.ava-address-book-panel {
  width: min(1100px, 96vw);
  height: min(760px, 88vh);
  display: flex;
  flex-direction: column;
  /* .dialog form bekommt Hintergrund/Rahmen/Schatten normalerweise über die
     generische ".dialog form"-Regel (siehe dort) - dieses Fenster nutzt aber
     ein <div> als direktes Kind von .ava-floating-dialog (kein <form>, da
     keine eigene Submit-Logik nötig ist), trifft diese Regel also nicht und
     blieb dadurch komplett transparent/rahmenlos. Hier dieselbe Optik
     manuell nachgezogen.
     WICHTIG: --panel-solid statt --panel - im Hell-Theme wird --panel weiter
     unten in dieser Datei (zweiter body.theme-light-Block) auf eine fast
     durchsichtige 5%-Deckkraft-Farbe umdefiniert (nur für "Glas"-Flächen
     gedacht); --panel-solid bleibt dort echt deckend #ffffff - das nutzen
     auch die einzelnen Karten (.ava-address-card) schon korrekt, nur der
     äußere Fensterrahmen hier fälschlich noch --panel, wodurch Kopfzeile/
     Hinweistext durchsichtig blieben während die Karten darunter schon
     deckend waren. */
  border-radius: var(--radius);
  background: var(--panel-solid);
  color: var(--text);
  box-shadow: var(--shadow);
}

.ava-address-book-panel .dialog-body {
  flex: 1;
  overflow-y: auto;
}

.ava-address-book-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.ava-address-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--panel-solid);
}

.ava-address-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 600;
}

.ava-address-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ava-address-card-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1;
}

.ava-address-card-actions button:hover {
  color: var(--text);
}

.ava-address-card-link-icon {
  color: var(--muted);
  font-size: 0.9rem;
}

.ava-address-card-body {
  min-height: 110px;
  font-size: 0.85rem;
  line-height: 1.5;
  cursor: pointer;
}

.ava-address-card-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.ava-address-card-contact {
  margin-top: 10px;
}

.ava-address-card-placeholder {
  color: var(--muted);
  font-style: italic;
}

/* ----- AVA Adressbuch: Slot-Editor (Adresse wählen/eingeben) ----- */
.ava-address-slot-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.ava-address-slot-tabs button.is-active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.ava-address-slot-panel.hidden {
  display: none;
}

.ava-address-slot-selected-hint {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 8px;
}

#avaAddressSlotClearButton {
  margin-right: auto;
}

/* ----- AVA "Zusatzfenster": frei schwebend statt modal (wie NOVA) -----
   .dialog deckt sonst per inset:0 + solidem background:var(--bg) den ganzen
   Bildschirm ab (Ersatz für den nativen Backdrop) und blockiert per
   pointer-events die Seite dahinter. AVA-Fenster sollen das LV im Hintergrund
   sicht- und bedienbar lassen, daher hier gezielt transparent/durchklickbar -
   nur die Fensterkarte (direktes Kind) bekommt Klicks wieder zurück. */
.ava-floating-dialog,
.ava-floating-dialog[open] {
  background: transparent;
  pointer-events: none;
}

.ava-floating-dialog > form,
.ava-floating-dialog > div {
  pointer-events: auto;
  resize: both;
  overflow: auto;
  min-width: 360px;
  min-height: 220px;
  /* Zentriert per fixed+transform statt über den Flex-Parent: verschiebbare
     .dialog-Elemente bekommen inline style="display:block" (siehe
     openDialogNonModal), das schlägt die .dialog[open]{display:flex}-Regel
     und würde die Flex-Zentrierung sonst wirkungslos machen. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ava-floating-dialog .dialog-head {
  cursor: grab;
}

.ava-floating-dialog.ava-dialog-dragging .dialog-head {
  cursor: grabbing;
}

.ava-floating-dialog .dialog-head button {
  cursor: pointer;
}

/* ----- Positions-Attribute-Dialog (Zahnrad-Menü einer Position) ----- */
.ava-position-attrs-form {
  width: min(980px, 96vw);
  display: flex;
  flex-direction: column;
  height: min(640px, 82vh);
  /* Gleiche kompakte Schriftgröße wie im übrigen AVA-Bereich (LV-Baum,
     Preisspiegel) statt der App-Standardgröße - gilt für Labels, Inputs,
     Tabs, Checkboxen usw. in diesem Dialog. */
  font-size: 0.72rem;
}

.ava-position-attrs-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  padding: 0 20px 14px;
  border-bottom: 1px solid var(--border);
}

.ava-position-attrs-head-field {
  min-width: 0;
}

/* Labels rücken näher ans Feld statt dem generischen 90px-Mindestabstand
   (.dialog .input-row label) zu folgen - gleiche Idee wie bei
   .ava-position-attrs-quantities, hier zusätzlich nötig, damit OZ/Index/
   Sprung-Navigation in einer Zeile Platz haben. Selektor braucht die
   Klassenkombination .ava-position-attrs-head-field.input-row (2 Klassen),
   sonst verliert die Regel gegen .dialog .input-row label (ebenfalls 2
   Klassen, aber früher im Stylesheet definiert und bei gleicher Spezifität
   sonst nicht überschreibbar). */
.ava-position-attrs-head-field.input-row label {
  min-width: auto;
}

.ava-position-attrs-head-field input {
  font-family: monospace;
  width: 100px;
}

.ava-position-attrs-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.ava-output-pdf-section-title {
  font-weight: 600;
  margin: 0 0 14px;
}

.ava-output-pdf-startpage-row {
  max-width: 260px;
  margin-top: 16px;
}

.ava-output-pdf-print-row {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

/* "Seite einrichten": Ränder als schmale Spalte (Label links, Zahlenfeld
   rechts) statt über die volle Dialogbreite - vier Werte in mm brauchen
   keine 600px breiten Eingabefelder. */
.ava-output-pdf-margin-grid {
  max-width: 340px;
}

.ava-output-pdf-margin-grid .input-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.ava-output-pdf-margin-grid .input-row label {
  margin: 0;
}

/* "Logo auswählen": Liste der verfügbaren Logos - erste Zeile ist immer das
   Firmenlogo aus den Einstellungen, danach die hochgeladenen aus der
   Bibliothek (rel_logos). Ausgewählt wird per Klick auf die Zeile. */
.ava-output-pdf-logo-size-row {
  display: grid;
  grid-template-columns: 190px 140px;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
}

.ava-output-pdf-logo-size-row label {
  margin: 0;
}

.ava-output-pdf-logo-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}

.ava-output-pdf-logo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  max-width: 620px;
}

.ava-output-pdf-logo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--glass);
  cursor: pointer;
}

.ava-output-pdf-logo-row.is-selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.ava-output-pdf-logo-check {
  flex: 0 0 18px;
  color: var(--accent);
  font-size: 15px;
  line-height: 1;
}

.ava-output-pdf-logo-preview {
  flex: 0 0 auto;
  max-height: 44px;
  max-width: 190px;
  object-fit: contain;
}

.ava-output-pdf-logo-label {
  flex: 1;
  color: var(--muted);
  font-size: 0.85rem;
}

.ava-output-pdf-logo-delete {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

.ava-output-pdf-logo-delete:hover {
  color: var(--danger);
}

.ava-output-pdf-logo-empty {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

/* Kostenanalyse-Liste: gleicher Aufbau wie die AVA-Übersichtstabellen, nur
   mit zweizeiliger Namensspalte (Name + Beschreibung darunter). */
/* Eigenes Höhenlimit wie .ava-layout (Haupt-LV-Ansicht) - ohne das wächst
   der Container mit dem Baum mit (bei einem großen Katalog schnell über
   Bildschirmhöhe hinaus), die ganze SEITE scrollt dann, und das untere
   Berechnungspanel wandert mit aus dem Bild statt an Ort und Stelle zu
   bleiben. flex:1 allein reicht nicht - der Elterncontainer (.page) ist
   selbst kein Flex-Layout, das flex:1 liefe also ins Leere. */
/* War fix height: calc(100vh - 130px), unabhängig vom bereits mit demselben
   Wert gerechneten .ava-layout (Elternelement) - der doppelte Abzug passte
   nicht exakt zusammen, dadurch blieb unten eine Lücke.
   Ein zwischenzeitlicher Versuch mit flex:1 ging fehl - .ava-layout ist
   display:block, KEIN Flex-Container, wodurch flex:1 hier wirkungslos
   blieb: .ava-kostenanalyse bekam dadurch gar keine begrenzte Höhe mehr,
   wuchs mit dem Bauminhalt beliebig weit nach unten und das Panel war nur
   noch durch Scrollen der gesamten Seite erreichbar.
   height:100% ist der richtige Ansatz, weil .ava-layout eine definierte
   Höhe hat (siehe dort) und ein Kind mit display:block/flex diese Höhe per
   Prozentwert übernehmen kann - exakt dieselbe Technik wie bei der
   Schwester-Ansicht .ava-editor-panel (siehe dort). */
.ava-kostenanalyse {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.ava-kostenanalyse-name {
  font-weight: 600;
}

.ava-kostenanalyse-sub {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 2px;
}

.ava-kostenanalyse-actions {
  white-space: nowrap;
  text-align: right;
}

.ava-kostenanalyse-actions button {
  padding: 4px 8px;
  /* ⎘/✎ sind reine Text-/Symbolzeichen und wirken bei normaler Schriftgröße
     deutlich kleiner als das 🗑-Emoji (Emoji-Glyphen haben unabhängig von
     font-size ein größeres Eigengewicht) - größere font-size gleicht das
     optisch an. */
  font-size: 1.2rem;
  line-height: 1;
}

/* ⎘ (Kopieren) bleibt bei dieser Schriftart auch bei 1.2rem noch spürbar
   kleiner als ✎/🗑 - eigener, größerer Wert statt am generellen Wert für
   alle drei zu drehen. */
.ava-kostenanalyse-actions [data-ava-kostenanalyse-copy] {
  font-size: 1.6rem;
}

/* 🗑 (Löschen) wirkt im Vergleich zu ⎘/✎ etwas zu groß - eigener, kleinerer
   Wert statt am generellen Wert für alle drei zu drehen. */
.ava-kostenanalyse-actions [data-ava-kostenanalyse-delete] {
  font-size: 1rem;
}

/* Katalog-Baum in der Kostenanalyse-Detailansicht - dieselbe Optik wie der
   AVA-LV-Baum (Zeile mit Toggle-Pfeil + Spalten), Excel-artig kompakt:
   kleine Schrift (dieselbe 0.72rem wie der Haupt-LV-Baum, siehe
   .ava-position-row-main dort) und vertikale Trennlinien zwischen den
   Spalten. KGR/Bezeichnung sind funktional befüllt, Schätzung/Auftragnehmer
   sowie die Endausbau-Spalten (Anteil GK I bis Skonto Prognose, Zielbenennung
   laut Nutzer-Vorlage vom 2026-09-05) sind vorbereitete, noch leere Spalten -
   dafür gibt es noch kein Dateneingabe-/Persistenzmodell, das folgt erst in
   einem späteren Schritt. */
.ava-kk-row {
  display: grid;
  /* Von avaApplyKkColumnWidths (main.js) auf .ava-kostenanalyse-detail
     gesetzt, dauerhaft pro Benutzer gemerkt (siehe dort) - der Fallback-Wert
     hier greift nur, bevor das Skript einmal gelaufen ist. Muss dieselbe
     Anzahl/Reihenfolge wie AVA_KK_COLUMN_DEFAULT_WIDTHS (main.js) haben. */
  grid-template-columns: var(--ava-kk-grid, 9em minmax(200px, 1fr) 8em 10em 9em 6em 5em 8em 8em 5em 6em 6em 9em 9em 9em 6em 8em);
  /* Ohne explizite Breite bleibt eine block-level Grid-Zeile per Default nur
     so breit wie ihr scrollender Elterncontainer (.ava-tree-scroll) - bei
     mehr Spalten, als hineinpassen, ragen die überzähligen Zellen dann zwar
     sichtbar (overflow) über den rechten Rand hinaus, aber border-bottom
     dieser Zeile (unten) endet trotzdem an der ursprünglichen, schmaleren
     Kante. Ergebnis: horizontale Linien fehlen ab einer bestimmten Spalte.
     width:max-content lässt die Zeile auf die tatsächliche Summe aller
     Spaltenbreiten wachsen, min-width:100% sorgt dafür, dass sie bei WENIGEN
     Spalten (die in den Container passen) trotzdem die volle Breite ausfüllt
     (nötig, damit die minmax(200px,1fr)-Spalte weiter den Rest ausfüllen
     kann). */
  width: max-content;
  min-width: 100%;
  border-bottom: 1px solid var(--border);
  /* Muss dieselbe font-size wie .ava-kk-tree-header haben: die em-Einheiten
     oben (9em, 10em, 8em) berechnen sich relativ zur eigenen font-size des
     Grid-Containers - sonst laufen Kopf- und Datenzeilen auseinander
     (dasselbe Prinzip wie bei .ava-position-row-main im Haupt-LV-Baum). */
  font-size: 0.72rem;
}

/* Vertikale Gitterlinien wie in Excel - über die GESAMTE Zeilenhöhe, nicht
   nur über die Texthöhe. Dafür muss das Padding an der einzelnen Zelle
   hängen statt am Zeilencontainer: ein Grid-Item ist per Default so hoch wie
   die höchste Zelle der Reihe ("align-items: stretch", CSS-Vorgabe) - liegt
   das Padding dagegen am Container, bleibt jede Zelle nur textgroß und die
   Linie reicht sichtbar nicht bis zum oberen/unteren Rand. */
.ava-kk-row > * {
  padding: 5px 10px;
  border-right: 1px solid var(--border);
}

.ava-kk-row > *:last-child {
  border-right: none;
}

/* KGR- und Bezeichnung-Spalte bleiben beim horizontalen Scrollen sichtbar
   ("Fenster einfrieren" wie in Excel) - funktioniert für Kopf-, Gesamtsumme-
   und Datenzeilen gleichermaßen, da alle drei dieselbe Kind-Reihenfolge
   haben (siehe avaKkBuildRowEl) und alle die Klasse ava-kk-row tragen. Die
   zweite Spalte braucht als linken Versatz die tatsächliche (ggf. per Ziehen
   veränderte) Breite der ersten Spalte - dafür setzt avaApplyKkColumnWidths
   (main.js) zusätzlich zu --ava-kk-grid die Variable --ava-kk-col0-width.
   Eigener, deckender Hintergrund nötig, sonst scheinen darunter
   wegscrollende Zellen durch (dasselbe Problem wie beim sticky Header). */
.ava-kk-row > *:nth-child(1),
.ava-kk-row > *:nth-child(2) {
  position: sticky;
  z-index: 2;
  background: var(--panel-solid);
}
.ava-kk-row > *:nth-child(1) {
  left: 0;
}
.ava-kk-row > *:nth-child(2) {
  left: var(--ava-kk-col0-width, 9em);
}
/* Kopf- und Gesamtsumme-Zeile sind selbst schon sticky (top) - deren
   eingefrorene Spalten müssen beim gleichzeitigen Scrollen in beide
   Richtungen ÜBER den eingefrorenen Spalten der Datenzeilen liegen. */
.ava-kk-tree-header > *:nth-child(1),
.ava-kk-tree-header > *:nth-child(2),
.ava-kk-tree-total-row > *:nth-child(1),
.ava-kk-tree-total-row > *:nth-child(2) {
  z-index: 3;
}
/* Verlassen sich NICHT allein auf die sticky-top-Position der Elternzeile
   (.ava-kk-tree-header/.ava-kk-tree-total-row) - diese Zellen sind selbst
   schon sticky (links eingefroren, s.o.), und zwei verschachtelte
   sticky-Ebenen auf zwei verschiedenen Achsen (Zeile: top, Zelle: left)
   berechnen die Fixierung beim vertikalen Scrollen browserübergreifend
   unzuverlässig - genau die "Pfeile/Überschrift verschwinden beim Scrollen"
   gemeldete Ecke. Eigenes top auf denselben Zellen macht sie zu echten
   zweiachsigen (Excel-artigen) Eckzellen, unabhängig von der Elternzeile. */
.ava-kk-tree-header > *:nth-child(1),
.ava-kk-tree-header > *:nth-child(2) {
  top: 0;
}
.ava-kk-tree-total-row > *:nth-child(1),
.ava-kk-tree-total-row > *:nth-child(2) {
  top: var(--ava-kk-header-height, 25px);
}
/* Ausgewählte Zeile: Selektions-Tönung liegt normalerweise auf dem
   transparenten Zeilenhintergrund - die eingefrorenen Zellen haben aber
   einen EIGENEN deckenden Hintergrund (s.o.) und müssten die Tönung sonst
   separat bekommen. Zwei Hintergrund-Ebenen übereinander (Verlauf mit
   gleicher Start-/Endfarbe = flächige Tönung, darunter der deckende
   Panel-Hintergrund) statt eines hartcodierten Mischtons, damit es in jedem
   Theme automatisch zur echten --panel-solid-Farbe passt. */
.ava-kk-row.is-selected > *:nth-child(1),
.ava-kk-row.is-selected > *:nth-child(2) {
  background: linear-gradient(rgba(31, 191, 127, 0.1), rgba(31, 191, 127, 0.1)), var(--panel-solid);
}

/* Unterschiedliche Grau-/Farbtöne je Hierarchietiefe (main.js avaKkBuildRowEl
   setzt ava-kk-depth-0/1/2/3 auf jede Zeile), damit die Ebene beim Scrollen
   sofort erkennbar bleibt: Tiefe 2 (z.B. "0A.01", die erste Ebene mit echter
   Erfassung - Tiefe 0/1 sind Summenzeilen, siehe .ava-kk-row-summenzeile
   unten) ein Hauch dunkler, Tiefe 3 (z.B. "0A.01.01") bewusst unverändert
   weiß. Gleiches Verlauf-über---panel-solid-Muster wie .is-selected oben,
   damit die eingefrorenen ersten beiden Spalten dieselbe Tönung wie der Rest
   der Zeile bekommen. */
.ava-kk-row.ava-kk-depth-2 {
  background: rgba(0, 0, 0, 0.035);
}
.ava-kk-row.ava-kk-depth-2 > *:nth-child(1),
.ava-kk-row.ava-kk-depth-2 > *:nth-child(2) {
  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(0, 0, 0, 0.035)), var(--panel-solid);
}

/* Oberste Kostengruppe (Tiefe 0, z.B. "0") UND deren direkte Untergruppe
   (Tiefe 1, z.B. "0A") - beides reine Summenzeilen, Firma/Vergabesumme/
   Nachlass/Nachtrag/TR-Felder/Skonto sind hier disabled (siehe
   avaKkBuildRowEl) statt nur normal ausgegraut. Eigene, deutlich erkennbare
   Farbe (helles Blau) statt der Grautöne der echten Erfassungs-Ebenen, damit
   klar ist: diese Zeile fasst nur zusammen, hier wird nichts direkt erfasst.
   Höhere Spezifität als .ava-kk-depth-2 oben (zwei Klassen statt einer) -
   wichtig, falls beide je einer Zeile zugewiesen würden. */
.ava-kk-row-summenzeile {
  font-weight: 600;
  background: rgba(59, 130, 246, 0.14);
}
.ava-kk-row-summenzeile > *:nth-child(1),
.ava-kk-row-summenzeile > *:nth-child(2) {
  background: linear-gradient(rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.14)), var(--panel-solid);
}
/* Hauptnummern (Tiefe 0, z.B. "0"/"1"/"2") etwas kräftiger als ihre direkten
   Untergruppen (Tiefe 1, z.B. "0A") - beide teilen sich sonst denselben
   hellen Blauton (.ava-kk-row-summenzeile oben) und sind auf den ersten
   Blick kaum zu unterscheiden. Zwei Klassen statt einer -> höhere
   Spezifität, gewinnt automatisch gegen die Basisregel oben. */
.ava-kk-row-summenzeile.ava-kk-depth-0 {
  background: rgba(59, 130, 246, 0.28);
}
.ava-kk-row-summenzeile.ava-kk-depth-0 > *:nth-child(1),
.ava-kk-row-summenzeile.ava-kk-depth-0 > *:nth-child(2) {
  background: linear-gradient(rgba(59, 130, 246, 0.28), rgba(59, 130, 246, 0.28)), var(--panel-solid);
}

.ava-kk-row-summenzeile input:disabled {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.ava-kk-tree-header {
  position: sticky;
  top: 0;
  /* Muss höher sein als das z-index:2 der eingefrorenen Spalten einer
     normalen Datenzeile (.ava-kk-row > *:nth-child(1)/(2) weiter oben) -
     diese Datenzellen sind selbst position:sticky, ihre Elternzeile
     (.ava-kk-row) aber NICHT positioniert und eröffnet daher KEINEN eigenen
     Stacking-Context. Ihr z-index landet dadurch im selben Kontext wie
     dieser Kopf hier (statt lokal auf die eigene Zeile begrenzt zu sein) -
     mit z-index:1 lag der Kopf beim Scrollen sichtbar HINTER den
     vorbeiziehenden eingefrorenen Datenzellen statt davor. */
  z-index: 5;
  /* --panel statt --panel-solid wäre hier falsch: im Hell-Theme ist --panel
     ein grau-transparenter Verlauf (siehe Kommentar bei .ava-tree-header
     weiter oben), ein sticky Header braucht aber einen GARANTIERT deckenden
     Hintergrund, sonst scheinen darunter wegscrollende Zeilen sichtbar
     durch. --panel-solid ist genau dafür da (dasselbe Muster wie beim
     Haupt-LV-Baum, .ava-tree-header). */
  background: var(--panel-solid);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.ava-kk-oz {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: monospace;
  cursor: pointer;
}

/* Gesamtsumme-Zeile - fix direkt unter dem Tabellenkopf (zweite sticky
   Zeile), zeigt die Summe der Schätzung-Spalte über ALLE Positionen der
   Kostenanalyse, nicht nur die gerade sichtbaren/aufgeklappten - deshalb
   aus avaKkKalkZeilen (flache Liste aller Berechnungszeilen) berechnet,
   nicht aus dem gerade gerenderten Baumausschnitt. top ergibt sich aus der
   tatsächlichen Kopfzeilenhöhe (siehe avaApplyKkHeaderOffsets in main.js,
   das --ava-kk-header-height beim Rendern misst statt einen Pixelwert hier
   zu raten - Schriftgröße/Padding könnten sich sonst leise entkoppeln). */
.ava-kk-tree-total-row {
  position: sticky;
  top: var(--ava-kk-header-height, 25px);
  /* Gleicher Grund wie bei .ava-kk-tree-header oben - muss über dem
     z-index:2 der eingefrorenen Datenzeilen-Spalten liegen. */
  z-index: 4;
  background: var(--panel-solid);
  font-weight: 700;
}

.ava-kk-tree-total-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ava-kk-row.is-expanded > .ava-kk-oz .ava-group-toggle {
  transform: rotate(90deg);
}

.ava-kk-label {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Auftragnehmer ist die erste echte Eingabespalte im Endausbau-Set (Rest ist
   noch reiner Platzhalter, siehe oben) - randlos/transparent, damit sie sich
   optisch wie die übrigen (nicht editierbaren) Zellen einfügt und nur bei
   Fokus/Hover als Eingabefeld erkennbar wird. */
/* #avaKostenanalyseDetailBody (ID) statt nur der Klasse, um die generische
   input-Regel weiter oben (input:not([type=checkbox]):not([type=radio]),
   höhere Spezifität durch die zwei :not()) sicher zu überstimmen - reiner
   Text ohne jeden Rahmen/Hintergrund/feste Höhe. */
/* border:none allein würde auch die vertikale Excel-Trennlinie der Zelle
   (border-right, von .ava-kk-row > * weiter oben) mit auf "none" setzen, da
   die Kurzschreibweise "border" alle vier Seiten zurücksetzt - deshalb hier
   explizit danach wieder border-right gesetzt, damit das Gitter an dieser
   Spalte nicht abreißt. */
#avaKostenanalyseDetailBody input.ava-kk-auftragnehmer-input {
  width: 100%;
  height: auto;
  border: none;
  border-right: 1px solid var(--border);
  outline: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}

/* Vergabesumme: gleiche randlose Optik wie Auftragnehmer, aber rechtsbündig
   und gedimmt wie Schätzung, da beide Euro-Beträge zeigen. */
#avaKostenanalyseDetailBody input.ava-kk-vergabesumme-input {
  width: 100%;
  height: auto;
  border: none;
  border-right: 1px solid var(--border);
  outline: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* % Nachlass: gleiches Prinzip wie Vergabesumme (randlos, rechtsbündig,
   gedimmt), nur mit Prozent- statt Euro-Wert. */
#avaKostenanalyseDetailBody input.ava-kk-nachlass-input {
  width: 100%;
  height: auto;
  border: none;
  border-right: 1px solid var(--border);
  outline: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* TR-Nr: kurzes Zahlen-/"S"-Feld, rechtsbündig wie in Excel für Zahlen
   üblich. */
#avaKostenanalyseDetailBody input.ava-kk-trnr-input {
  width: 100%;
  height: auto;
  border: none;
  border-right: 1px solid var(--border);
  outline: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--muted);
  text-align: right;
}

/* Datum der Teilrechnung: im Ruhezustand ein normales Textfeld (Platzhalter
   "TT.MM.JJ", mittig, grau) - erst bei Fokus wechselt main.js den type auf
   "date" für die native Kalenderauswahl. Grund: das native Datumsfeld zeigt
   im leeren Zustand bei manchen Chromium-/Electron-Versionen die Ziffern
   des HEUTIGEN Datums statt "tt.mm.jjjj" an, was wie ein echter Eintrag
   aussieht, obwohl das Feld leer ist. */
#avaKostenanalyseDetailBody input.ava-kk-teilrechnungdatum-input {
  width: 100%;
  height: auto;
  border: none;
  border-right: 1px solid var(--border);
  outline: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--muted);
  text-align: center;
}

#avaKostenanalyseDetailBody input.ava-kk-teilrechnungdatum-input::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* TR inkl. NL: gleiches Prinzip wie Vergabesumme (randlos, rechtsbündig,
   gedimmt). */
#avaKostenanalyseDetailBody input.ava-kk-trbetrag-input {
  width: 100%;
  height: auto;
  border: none;
  border-right: 1px solid var(--border);
  outline: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Nachtrag Σ ist seit der "NT"-Checkbox im Kalkulationspanel keine manuelle
   Eingabe mehr, sondern reine Anzeige (Zeilen-Span statt Input) - Ausrichtung
   siehe .ava-kk-schaetzung-Gruppe weiter unten, Farbe siehe dort und die
   .ava-kk-row-has-betraege-Gruppe. */

/* SK %: gleiches Prinzip wie % Nachlass. */
#avaKostenanalyseDetailBody input.ava-kk-skontoprozent-input {
  width: 100%;
  height: auto;
  border: none;
  border-right: 1px solid var(--border);
  outline: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ava-kk-schaetzung,
.ava-kk-nachtragnr,
.ava-kk-nachtragsumme,
.ava-kk-einsparung,
.ava-kk-arprozent,
.ava-kk-prognose,
.ava-kk-prognosebrutto,
.ava-kk-skontoertrag {
  color: var(--muted);
}

/* Erzwingt Einzeiligkeit (Nutzer-Meldung: das €-Zeichen von NT Σ landete in
   der zweiten Zeile) - diese Spalten sind reine Anzeige-Spans ohne die
   nowrap-Absicherung, die z.B. Eingabefelder von Natur aus haben, und deren
   Spaltenbreite wird nur einmal beim Öffnen anhand der DANN vorhandenen
   Werte berechnet (avaKkAutoFitColumnWidths); ändert sich ein Wert danach
   (z.B. NT Σ durch ein neu gesetztes "NT"-Häkchen) auf einen breiteren Text,
   bricht er ohne dies um statt einfach nur nicht mehr ganz sichtbar zu sein.
   overflow/ellipsis als Sicherheitsnetz, falls die Spalte trotzdem zu schmal
   bleibt - besser abgeschnitten als zweizeilig. */
.ava-kk-schaetzung,
.ava-kk-nachtragnr,
.ava-kk-nachtragsumme,
.ava-kk-einsparung,
.ava-kk-arprozent,
.ava-kk-prognose,
.ava-kk-prognosebrutto,
.ava-kk-skontoertrag {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Zeilen mit tatsächlich erfassten Beträgen (siehe avaKkBuildRowEl/
   avaKkUpdateRowHasBetraegeClass in main.js) bekommen durchgehend normalen
   statt gedimmten Text - macht ausgefüllte Zeilen auf einen Blick von noch
   leeren unterscheidbar (Nutzer-Vorgabe). Höhere Spezifität (zwei Klassen)
   nötig, um die obige .ava-kk-schaetzung-Gruppe zu überstimmen; bei den
   Eingabefeldern zusätzlich die ID der Baumtabelle, weil deren eigene Regeln
   (z.B. #avaKostenanalyseDetailBody input.ava-kk-vergabesumme-input) sonst
   wegen der ID immer gewinnen würden. */
.ava-kk-row-has-betraege .ava-kk-schaetzung,
.ava-kk-row-has-betraege .ava-kk-nachtragnr,
.ava-kk-row-has-betraege .ava-kk-nachtragsumme,
.ava-kk-row-has-betraege .ava-kk-einsparung,
.ava-kk-row-has-betraege .ava-kk-arprozent,
.ava-kk-row-has-betraege .ava-kk-prognose,
.ava-kk-row-has-betraege .ava-kk-prognosebrutto,
.ava-kk-row-has-betraege .ava-kk-skontoertrag {
  color: var(--text);
}

#avaKostenanalyseDetailBody .ava-kk-row-has-betraege input.ava-kk-vergabesumme-input,
#avaKostenanalyseDetailBody .ava-kk-row-has-betraege input.ava-kk-nachlass-input,
#avaKostenanalyseDetailBody .ava-kk-row-has-betraege input.ava-kk-trnr-input,
#avaKostenanalyseDetailBody .ava-kk-row-has-betraege input.ava-kk-teilrechnungdatum-input,
#avaKostenanalyseDetailBody .ava-kk-row-has-betraege input.ava-kk-trbetrag-input,
#avaKostenanalyseDetailBody .ava-kk-row-has-betraege input.ava-kk-skontoprozent-input {
  color: var(--text);
}

/* Alle Spalten mit Währungsbeträgen/berechneten Prozentwerten rechtsbündig,
   wie schon bei .ava-kk-tree-total-value (Gesamtsumme) gehandhabt. */
.ava-kk-schaetzung,
.ava-kk-nachtragsumme,
.ava-kk-einsparung,
.ava-kk-arprozent,
.ava-kk-prognose,
.ava-kk-prognosebrutto,
.ava-kk-skontoertrag {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Zugehörige Spaltenköpfe ebenfalls rechtsbündig, damit Kopf und Werte
   übereinander stehen. */
.ava-col-header-currency .ava-col-header-label {
  text-align: right;
}

/* Detailansicht als Flex-Spalte, damit das untere Berechnungspanel eine
   feste Höhe bekommen kann und der Baum darüber den Rest ausfüllt (siehe
   .ava-kk-split) - vorher fehlte diese Regel, weil es nur ein einziges Kind
   gab und dessen eigenes flex:1 (auf .ava-tree-table-wrapper) mangels
   Flex-Elternteil wirkungslos war. */
.ava-kostenanalyse-detail {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Baum oben (füllt den Rest) + Ziehgriff + Berechnungspanel unten (feste,
   ziehbare Höhe) - Vorbild NOVA AVA: automatisch sichtbares, vertikal
   verschiebbares Eingabefeld für die Kalkulationszeilen der ausgewählten
   KGR-Position. */
.ava-kk-split {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.ava-kk-tree-wrapper {
  min-height: 80px;
}

/* Durch die vielen Endausbau-Spalten (Anteil GK I bis Skonto Prognose) ist
   die Zeilenbreite inzwischen breiter als der Wrapper - .ava-tree-scroll
   selbst hat (fürs Haupt-LV) nur overflow-y, hier zusätzlich overflow-x, da
   Kopf- und Datenzeilen im selben Scroll-Container liegen und so beim
   horizontalen Scrollen synchron bleiben. */
.ava-kk-tree-wrapper .ava-tree-scroll {
  overflow-x: auto;
}

.ava-kk-panel-resizer {
  flex: 0 0 auto;
  height: 8px;
  margin: 0 12px;
  cursor: row-resize;
  position: relative;
}

.ava-kk-panel-resizer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: var(--border);
}

.ava-kk-panel-resizer:hover::after {
  background: var(--accent);
}

body.ava-kk-panel-resizing {
  cursor: row-resize;
  user-select: none;
}

.ava-kk-kalk-panel {
  flex: 0 0 auto;
  /* Von avaApplyKkPanelHeight (main.js) gesetzt, dauerhaft pro Benutzer
     gemerkt - Fallback greift nur vor dem ersten Skriptdurchlauf. */
  height: var(--ava-kk-panel-height, 220px);
  min-height: 120px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  /* Kein unterer Rand mehr (vorher margin: 0 12px 12px) - das Panel soll
     bündig am unteren Rand der Detailansicht sitzen statt mit sichtbarem
     Abstand darunter zu "schweben". Das übernimmt bereits flex:1 auf
     .ava-kostenanalyse (siehe dort) zuverlässig - ein zusätzliches
     position:sticky wurde wieder entfernt, weil es sich einen scrollenden
     Vorfahren zum Andocken gesucht hat, der NICHT die innere Baumtabelle
     war. Dadurch war der Ziehgriff (.ava-kk-panel-resizer direkt darüber)
     erst erreichbar, nachdem die Baumtabelle bis ganz nach unten gescrollt
     war. */
  margin: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--panel);
  overflow: hidden;
}

.ava-kk-kalk-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.ava-kk-kalk-panel-head h4 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* Checkbox "In Schätzung/Prognose" - steuert, ob die Summe der gerade
   ausgewählten Position in Schätzung/Prognose einfließt (siehe
   avaKkIsPositionEingeschlossen). flex-shrink:0, damit sie bei einem langen
   Positionstitel (h4, s.o.) nicht selbst gequetscht wird - stattdessen
   schrumpft der Titel per Ellipsis. */
.ava-kk-kalk-einbeziehen {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}

.ava-kk-kalk-einbeziehen input[type="checkbox"] {
  margin: 0;
}

.ava-kk-kalk-table-wrapper {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Berechnungszeilen-Grid: [Ziehgriff/Nr] Kommentar Berechnung Menge EH EP
   GB(netto) A %-von-Σ [Löschen] - dieselbe Excel-Optik (vertikale Linien über
   die volle Zeilenhöhe, kleine Schrift) wie .ava-kk-row oben, eigenes
   Spaltenraster. Menge ist reine Anzeige (Ergebnis von Berechnung, siehe
   avaKkKalkRowHtml), deshalb kein eigenes Eingabefeld mehr. Die Breiten
   kommen wie beim Baum oben per Ziehen anpassbar aus --ava-kk-kalk-grid
   (siehe avaApplyKkKalkColumnWidths in main.js) - der Fallback-Wert hier
   greift nur, bevor das Skript einmal gelaufen ist. */
.ava-kk-kalk-row {
  display: grid;
  grid-template-columns: var(--ava-kk-kalk-grid, 22px minmax(140px, 1fr) 8.5em 6em 4em 6em 8.5em 2.5em 2.5em 26px);
  border-bottom: 1px solid var(--border);
  font-size: 0.72rem;
}

.ava-kk-kalk-delete-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
}
.ava-kk-kalk-delete-btn:hover {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.ava-kk-kalk-row > * {
  padding: 4px 8px;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  min-width: 0;
}

.ava-kk-kalk-row > *:last-child {
  border-right: none;
}

.ava-kk-kalk-header {
  position: sticky;
  top: 0;
  z-index: 1;
  /* Gleicher Grund wie bei .ava-kk-tree-header oben - deckender Hintergrund
     für einen sticky Header. */
  background: var(--panel-solid);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.ava-kk-kalk-row.is-cut {
  opacity: 0.5;
}

.ava-kk-kalk-handle {
  cursor: grab;
  color: var(--muted);
  justify-content: center;
}

.ava-kk-kalk-row input[type="text"],
.ava-kk-kalk-row input[type="number"] {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0;
}

.ava-kk-kalk-row input[type="text"]:focus,
.ava-kk-kalk-row input[type="number"]:focus {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
  background: var(--glass);
}

.ava-kk-kalk-row input[type="number"] {
  text-align: right;
}

/* Zahlen-Spinner (Auf-/Ab-Pfeile) werden hier nicht gebraucht - gleiches
   Muster wie .ava-menge-input-group/.ava-ep-input-group weiter oben. */
.ava-kk-kalk-row input[type="number"]::-webkit-outer-spin-button,
.ava-kk-kalk-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ava-kk-kalk-row input[type="number"] {
  -moz-appearance: textfield;
}

.ava-kk-kalk-gb,
.ava-kk-kalk-menge-readonly {
  justify-content: flex-end;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ava-kk-kalk-row.is-inactive {
  color: var(--muted);
}

.ava-kk-kalk-empty {
  padding: 16px;
  color: var(--muted);
  font-size: 0.8rem;
}

.ava-kk-kalk-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.82rem;
  flex: 0 0 auto;
}

/* ===== Kostenanalyse-Tabelle im Modern-Stil (fest über die Klasse
   .ava-kk-modern auf #avaKostenanalyseDetail, siehe index.html - die
   Excel-Regeln weiter oben bleiben als Grundlage und werden hier
   überschrieben) - ohne Excel-Raster, ruhigere Zeilen,
   Hierarchie über dezente Flächen statt kräftiger Blautöne, Platzhalter
   ("Firma…", "€ 0,00", "TT.MM.JJ") nur beim Überfahren der Zeile. Jede Zeile
   trägt ihre deckende Hintergrundfarbe in --kk-row-bg, damit die links
   eingefrorenen Spalten (KGR/Bezeichnung) exakt dieselbe Fläche bekommen. ===== */
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-row {
  --kk-row-bg: var(--panel-solid);
  font-size: 0.8rem;
  background: var(--kk-row-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-row > * { border-right: none; padding: 8px 12px; }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-row > *:nth-child(1),
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-row > *:nth-child(2) { background: var(--kk-row-bg); }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-tree-header { --kk-row-bg: var(--panel-solid); border-bottom: 1px solid var(--border); color: var(--muted); }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-tree-header > * { padding-top: 11px; padding-bottom: 9px; }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-tree-header .ava-col-header-label { font-size: 0.68rem; letter-spacing: 0.05em; }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-tree-header .ava-col-resizer { opacity: 0; }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-tree-header:hover .ava-col-resizer { opacity: 1; }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-tree-total-row {
  --kk-row-bg: color-mix(in srgb, var(--accent) 9%, var(--panel-solid));
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  font-size: 0.84rem;
}
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-tree-total-row .ava-kk-tree-total-label { color: var(--accent); }
/* Hierarchie: Hauptgruppe (0, 1, 2 …) kräftig, Untergruppe (0A …) leicht getönt */
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-row-summenzeile.ava-kk-depth-0 {
  --kk-row-bg: color-mix(in srgb, var(--accent) 11%, var(--panel-solid));
  font-weight: 700;
  border-top: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
}
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-row-summenzeile.ava-kk-depth-1 { --kk-row-bg: color-mix(in srgb, var(--accent) 4.5%, var(--panel-solid)); font-weight: 600; }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-row.ava-kk-depth-2,
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-row.ava-kk-depth-3 { --kk-row-bg: var(--panel-solid); }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-row:not(.ava-kk-tree-header):not(.ava-kk-tree-total-row):hover { --kk-row-bg: color-mix(in srgb, var(--accent) 6%, var(--panel-solid)); }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-row.is-selected { --kk-row-bg: color-mix(in srgb, var(--accent) 13%, var(--panel-solid)); }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-row.is-selected > *:nth-child(1) { box-shadow: inset 3px 0 0 var(--accent); }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-oz { font-family: inherit; font-variant-numeric: tabular-nums; gap: 8px; }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-depth-2 > .ava-kk-oz,
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-depth-3 > .ava-kk-oz { color: var(--muted); }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-depth-2 .ava-kk-label,
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-depth-3 .ava-kk-label { font-weight: 500; }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-row-summenzeile.ava-kk-depth-0 > .ava-kk-oz { color: var(--accent); }
/* Eingabefelder: unsichtbar bis Hover/Fokus, Platzhalter nur beim Überfahren */
#avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody input.ava-kk-auftragnehmer-input, #avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody input.ava-kk-vergabesumme-input, #avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody input.ava-kk-nachlass-input, #avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody input.ava-kk-trnr-input, #avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody input.ava-kk-teilrechnungdatum-input, #avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody input.ava-kk-trbetrag-input, #avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody input.ava-kk-skontoprozent-input {
  /* Rahmen als outline (braucht keinen Platz) - die Spaltenbreiten sind
     auf den reinen Text gemessen, ein echter Rahmen/Innenabstand würde
     Beträge abschneiden. */
  border: none !important;
  border-radius: 8px;
  padding: 8px 12px !important;
  outline: 1px solid transparent;
  outline-offset: -5px;
  transition: outline-color 0.12s, box-shadow 0.12s;
}
#avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody .ava-kk-row input::placeholder { color: transparent; }
#avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody .ava-kk-row:hover input:not(:disabled)::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
#avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody .ava-kk-row:hover input.ava-kk-auftragnehmer-input, #avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody .ava-kk-row:hover input.ava-kk-vergabesumme-input, #avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody .ava-kk-row:hover input.ava-kk-nachlass-input, #avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody .ava-kk-row:hover input.ava-kk-trnr-input, #avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody .ava-kk-row:hover input.ava-kk-teilrechnungdatum-input, #avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody .ava-kk-row:hover input.ava-kk-trbetrag-input, #avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody .ava-kk-row:hover input.ava-kk-skontoprozent-input { outline-color: color-mix(in srgb, var(--muted) 45%, transparent); }
#avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody .ava-kk-row input:disabled { outline-color: transparent; background: transparent !important; }
#avaKostenanalyseDetail.ava-kk-modern #avaKostenanalyseDetailBody .ava-kk-row input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -5px;
  background: transparent !important;
}
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-tree-total-value { white-space: nowrap; }
/* Beträge: gleiche Zahlenoptik, leere Nullwerte nicht als Text */
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-schaetzung, #avaKostenanalyseDetail.ava-kk-modern .ava-kk-prognose, #avaKostenanalyseDetail.ava-kk-modern .ava-kk-prognosebrutto,
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-nachtragsumme, #avaKostenanalyseDetail.ava-kk-modern .ava-kk-arprozent, #avaKostenanalyseDetail.ava-kk-modern .ava-kk-skontoertrag { font-variant-numeric: tabular-nums; }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-row-has-betraege .ava-kk-prognose { font-weight: 600; }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-row-summenzeile .ava-kk-schaetzung,
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-row-summenzeile .ava-kk-prognose,
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-row-summenzeile .ava-kk-prognosebrutto { color: var(--text); }
#avaKostenanalyseDetail.ava-kk-modern .ava-group-toggle { width: 18px; height: 18px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-row:hover .ava-group-toggle:not(.ava-group-toggle-empty) { background: color-mix(in srgb, var(--accent) 14%, transparent); }
#avaKostenanalyseDetail.ava-kk-modern .ava-kk-level-buttons button { border-radius: 999px; }

/* ----- Berechnungspanel im Modern-Stil (wie der Aufmaß-Editor): Karten-
   Kopf, Eingabefelder als abgerundete Felder statt Excel-Linien, Spalten
   ohne vertikale Trennlinien, Summenzeile als Akzent. Überschreibt die
   Excel-Optik oben bewusst an einer Stelle. ----- */
.ava-kk-kalk-panel .ava-kk-kalk-panel-head { padding: 10px 14px; gap: 14px; background: var(--panel-solid); }
.ava-kk-kalk-panel .ava-kk-kalk-panel-head h4 { font-size: 0.92rem; font-weight: 700; }
.ava-kk-kalk-panel .ava-kk-kalk-einbeziehen { font-size: 0.8rem; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); }
.ava-kk-kalk-panel .ava-kk-kalk-einbeziehen input[type="checkbox"] { accent-color: var(--accent); }
#avaKkKalkAddRowButton { min-height: 32px; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, transparent); }
#avaKkKalkAddRowButton:disabled { color: var(--muted); border-color: var(--border); background: transparent; }
.ava-kk-kalk-panel .ava-kk-kalk-table-wrapper { padding: 0 8px; overflow-x: hidden; }
.ava-kk-kalk-panel .ava-kk-kalk-row { column-gap: 8px; align-items: center; font-size: 0.82rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); padding: 4px 6px; }
.ava-kk-kalk-panel .ava-kk-kalk-row > * { border-right: none; padding: 0; }
.ava-kk-kalk-panel .ava-kk-kalk-header { padding: 8px 6px 6px; font-size: 0.66rem; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); }
.ava-kk-kalk-panel .ava-kk-kalk-header .ava-col-header:nth-child(n+4) { justify-content: flex-end; }
.ava-kk-kalk-panel .ava-kk-kalk-header .ava-col-header:nth-child(5),
.ava-kk-kalk-panel .ava-kk-kalk-header .ava-col-header:nth-child(8),
.ava-kk-kalk-panel .ava-kk-kalk-header .ava-col-header:nth-child(9) { justify-content: center; }
.ava-kk-kalk-panel .ava-kk-kalk-row:not(.ava-kk-kalk-header):hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.ava-kk-kalk-panel .ava-kk-kalk-row input[type="text"],
.ava-kk-kalk-panel .ava-kk-kalk-row input[type="number"] { height: 30px; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 8px; background: var(--panel-solid); transition: border-color 0.12s, box-shadow 0.12s; }
.ava-kk-kalk-panel .ava-kk-kalk-row input[type="text"]:hover,
.ava-kk-kalk-panel .ava-kk-kalk-row input[type="number"]:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.ava-kk-kalk-panel .ava-kk-kalk-row input[type="text"]:focus,
.ava-kk-kalk-panel .ava-kk-kalk-row input[type="number"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); background: var(--panel-solid); }
.ava-kk-kalk-panel .ava-kk-kalk-row input[type="number"] { text-align: right; }
.ava-kk-kalk-panel .ava-kk-kalk-row > span:nth-child(5) input { text-align: center; }
.ava-kk-kalk-panel .ava-kk-kalk-menge-readonly { justify-content: flex-end; font-family: inherit; }
.ava-kk-kalk-panel .ava-kk-kalk-gb { justify-content: flex-end; color: var(--text); font-weight: 700; }
.ava-kk-kalk-panel .ava-kk-kalk-row.is-inactive .ava-kk-kalk-gb { color: var(--muted); font-weight: 500; text-decoration: line-through; }
.ava-kk-kalk-panel .ava-kk-kalk-check { justify-content: center; }
.ava-kk-kalk-panel .ava-kk-kalk-check input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.ava-kk-kalk-panel .ava-kk-kalk-handle { font-size: 0.8rem; opacity: 0.55; }
.ava-kk-kalk-panel .ava-kk-kalk-delete-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; padding: 0; }
.ava-kk-kalk-panel .ava-kk-kalk-delete-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ava-kk-kalk-panel .ava-kk-kalk-empty { padding: 18px 14px; font-size: 0.84rem; }
.ava-kk-kalk-panel .ava-kk-kalk-empty.is-add { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ava-kk-kalk-panel .ava-kk-kalk-empty.is-add button { min-height: 30px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 0.8rem; }
.ava-kk-kalk-panel .ava-kk-kalk-summary-row { padding: 10px 16px; background: color-mix(in srgb, var(--accent) 7%, var(--panel-solid)); font-size: 0.88rem; }
.ava-kk-kalk-panel #avaKkKalkSummaryValue { font-variant-numeric: tabular-nums; font-size: 0.95rem; }

/* Ausgewählte KGR-Position im Baum - zeigt, für welche Zeile das
   Berechnungspanel gerade steht. */
.ava-kk-row.is-selected {
  background: rgba(31, 191, 127, 0.1);
}


/* Einrückung nur in der ersten Spalte (Code+Pfeil) - sonst würde eine
   verschobene Zeile die Bezeichnungs-Spalte tieferer Ebenen aus der
   Ausrichtung der Kopfzeile bringen. */
.ava-kk-depth-1 > .ava-kk-oz { padding-left: 20px; }
.ava-kk-depth-2 > .ava-kk-oz { padding-left: 40px; }
.ava-kk-depth-3 > .ava-kk-oz { padding-left: 60px; }

.ava-output-pdf-hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 14px 0 0;
  max-width: 520px;
}

.ava-output-pdf-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 0.9rem;
}

.ava-output-pdf-field input {
  width: 120px;
}

.ava-output-pdf-print-row .input-row {
  flex: 1;
}

.ava-position-attrs-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  /* flex:1 statt fester Höhe: das Fenster ist jetzt per resize:both auf
     .ava-position-attrs-form größenveränderbar, der Body muss mitwachsen.
     min-height:0 bleibt nötig, sonst streckt CSS Grid die Inhalts-Spalte per
     align-items:stretch auf die Höhe der langen Tab-Liste (13 Einträge) -
     das war ursprünglich die Ursache für den riesigen Leerraum unter den Feldern. */
  flex: 1;
  min-height: 0;
}

.ava-position-attrs-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.ava-position-attrs-tabs button {
  justify-content: flex-start;
  text-align: left;
  border-color: transparent;
  background: transparent;
}

.ava-position-attrs-tabs button.is-active {
  background: var(--card);
  border-color: var(--border);
  font-weight: 700;
  color: var(--text);
}

.ava-position-attrs-content {
  padding: 18px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ava-position-attrs-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.ava-position-attrs-panel.hidden {
  display: none;
}

/* Langtext-Zeile füllt den verbleibenden Platz zwischen Kurztext und der
   Mengen-Zeile, statt eine feste Mindesthöhe zu haben - dadurch landet die
   Mengen-Zeile immer direkt über dem Footer, egal wie hoch der Dialog ist. */
.ava-position-attrs-langtext-row {
  flex: 1;
  min-height: 0;
  /* !important: die generische .dialog .input-row-Regel (align-items:center,
     höhere Spezifität) würde den Editor sonst vertikal zentrieren statt ihn
     über die volle verfügbare Höhe zu strecken. */
  align-items: stretch !important;
}

.ava-position-attrs-langtext-row .rich-editor {
  flex: 1;
  min-height: 0;
  /* min-width:0 nötig, sonst weigert sich der Flex-Item, unter die
     Mindestbreite seines Inhalts (Rich-Text-Toolbar) zu schrumpfen - das
     treibt den ganzen (resize:both/overflow:auto-)Dialog in einen
     horizontalen Scrollbalken, obwohl optisch nichts übersteht. */
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.ava-position-attrs-langtext-row .rich-input {
  flex: 1;
  min-height: 40px;
  overflow-y: auto;
}

.ava-position-attrs-quantities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  flex-shrink: 0;
}

/* Kurze Labels (Menge/EH/EP/Gesamtbetrag) rücken näher ans Eingabefeld -
   der generische .dialog .input-row label-Mindestwert (90px) ist für diese
   schmalen Grid-Spalten zu breit und lässt unnötig viel Platz zwischen
   Beschriftung und Feld. */
.ava-position-attrs-quantities .input-row label {
  min-width: auto;
}

/* EP und PP (Positionspreis) gleich breit - ohne feste Breite würde ein
   kürzeres Label dem Feld mehr vom verfügbaren 1fr-Spaltenplatz überlassen
   als ein längeres. */
#avaPositionAttrsEp,
#avaPositionAttrsGesamt {
  width: 110px;
  flex: 0 0 auto;
}

/* EH: maximal 3-stellige Einheitenkürzel (m², Stk, lfm ...), braucht kein
   so breites Feld wie die Preisspalten. */
#avaPositionAttrsEinheit {
  width: 60px;
  flex: 0 0 auto;
}

.ava-menge-input-group {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ava-menge-input-group input {
  flex: 1;
  min-width: 0;
  text-align: right;
}

/* Zahlen-Spinner (Auf-/Ab-Pfeile) werden hier nicht gebraucht - der Zugang
   zur Mengenvorermittlung erfolgt stattdessen über das Rechner-Symbol links. */
.ava-menge-input-group input::-webkit-outer-spin-button,
.ava-menge-input-group input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ava-menge-input-group input[type="number"] {
  -moz-appearance: textfield;
}

/* .dialog button (style.css, höhere Spezifität: Klasse+Typ) überschreibt
   sonst Hintergrund/Farbe/Rahmen/Padding dieses Icon-Buttons - siehe die
   gleiche Ursache bei .ava-group-ordnungszahl weiter oben. */
.ava-menge-calc-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--accent) !important;
  cursor: pointer;
}

.ava-menge-calc-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ava-menge-calc-btn:not(:disabled):hover {
  background: var(--accent) !important;
  color: var(--panel) !important;
}

.ava-menge-calc-btn svg {
  width: 18px;
  height: 18px;
}

/* Kompakte Variante für die Menge-Spalte in der LV-Baumtabelle (ersetzt dort
   die nicht benötigten Zahlen-Spinner-Pfeile, siehe avaBuildItemRowEl). */
.ava-menge-input-group-compact {
  gap: 3px;
}

.ava-menge-calc-btn-compact {
  width: 18px;
  height: 18px;
  min-height: 18px;
}

.ava-menge-calc-btn-compact svg {
  width: 11px;
  height: 11px;
}

/* EP-Spalte: Münzstapel-Icon statt der Zahlen-Spinner-Pfeile, "€" wird als
   fester Suffix angezeigt statt vom Benutzer eingetippt zu werden (siehe
   avaBuildItemRowEl, main.js). */
.ava-ep-input-group {
  display: flex;
  gap: 3px;
  align-items: center;
}

.ava-ep-input-group input {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.ava-ep-input-group input::-webkit-outer-spin-button,
.ava-ep-input-group input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ava-ep-input-group input[type="number"] {
  -moz-appearance: textfield;
}

.ava-ep-coin-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.ava-ep-coin-icon svg {
  width: 14px;
  height: 14px;
}

.ava-ep-suffix {
  flex-shrink: 0;
  color: var(--muted);
}

/* var(--panel) wird im Hell-Theme durch einen zweiten body.theme-light-Block
   auf einen grau-transparenten Verlauf überschrieben (siehe .ava-tree-table-wrapper) -
   hier für den Langtext-Editor gezielt korrigiert. */
body.theme-light .ava-position-attrs-panel .rich-editor {
  background: #ffffff;
}

.ava-dialog-actions-spacer {
  flex: 1;
}

/* OZ-Dialog beim Anlegen einer Gruppe (OG/LG/ULG): Ordnungszahl-Feld schmal
   halten (kurze Zahlen wie "01"/"01.01"), Bezeichnung bekommt den restlichen
   Platz - direkt beim Anlegen einen Namen zu vergeben erspart das
   nachträgliche Umbenennen in der Baumtabelle. */
.ava-oz-title-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}

.ava-oz-title-row .input-row {
  flex: 1;
}

#avaOzInput {
  width: 110px;
  flex: 0 0 auto;
}

#avaOzNameRow {
  flex: 1;
}

#avaOzNameInput {
  width: 100%;
}

.ava-position-attrs-radios,
.ava-position-attrs-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  border: none;
  padding: 0;
  margin: 0;
}

.ava-position-attrs-radios label,
.ava-position-attrs-checks label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Nummernfelder der Grundposition/Alternativposition (Wahlposition) - nur
   die zur gewählten Art passenden Zeilen sind sichtbar, siehe
   avaUpdatePositionAttrsKindFields. */
.ava-position-attrs-kind-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ava-position-attrs-kind-fields .input-row {
  flex: 1;
  min-width: 140px;
}

#avaPositionAttrsGrundNrDisplay,
#avaPositionAttrsAltRefNr,
#avaPositionAttrsAltNrDisplay {
  width: 100%;
}

/* Handy/Tablet (gleicher Breakpoint wie sonst im AVA-Bereich, siehe
   .ava-group-row-header/.ava-copy-table-header oben): Fenster geht
   randlos auf volle Bildschirmgröße statt der festen min(980px,96vw)-
   Desktopgröße, die feste 200px-Tab-Seitenspalte wird zu einer horizontal
   scrollbaren Leiste über dem Inhalt (auf schmalen Screens bliebe sonst kaum
   Platz für den eigentlichen Inhalt), und die 4-spaltige Mengen/EH/EP/
   Gesamtbetrag-Zeile wird zweispaltig, damit die Felder nicht auf
   Briefmarkengröße schrumpfen. Der Drag-Resize-Griff (resize:both) ergibt
   auf Touch-Geräten ohnehin keinen Sinn und wird deaktiviert. */
@media (max-width: 860px) {
  .ava-position-attrs-form {
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    min-width: 0;
    min-height: 0;
    border-radius: 0;
    resize: none;
    top: 0;
    left: 0;
    transform: none;
  }

  .ava-position-attrs-head {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 0 14px 14px;
  }

  .ava-position-attrs-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .ava-position-attrs-tabs {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
    -webkit-overflow-scrolling: touch;
  }

  .ava-position-attrs-tabs button {
    flex-shrink: 0;
  }

  .ava-position-attrs-content {
    padding: 14px 16px;
  }

  .ava-position-attrs-quantities {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 14px;
  }
}

/* ----- Mengenvorermittlung (Berechnungszeilen zu einer Position) ----- */
.ava-mengen-card {
  width: min(1000px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  min-width: 480px;
  min-height: 320px;
}

body.theme-light .ava-mengen-card {
  background: #ffffff;
}

.ava-mengen-toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0 20px 14px;
  border-bottom: 1px solid var(--border);
}

.ava-mengen-rundung {
  display: flex;
  gap: 10px;
  font-size: 0.85em;
}

.ava-mengen-rundung select {
  min-width: 110px;
}

.ava-mengen-table-wrapper {
  margin: 14px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  /* Flex-Kind von .ava-mengen-card (flex-direction:column): ohne flex+
     min-height:0 hier würde der Wrapper beim Verkleinern des Fensters (per
     resize:both-Ecke) auf 0 zusammengedrückt und seinen Inhalt dank des
     eigenen overflow:hidden hart abschneiden, statt der Zeilenliste
     (.ava-mengen-rows) die Chance zu geben, stattdessen selbst zu scrollen -
     ein Element mit overflow ungleich visible darf im Flex-Layout auf 0
     schrumpfen ("automatic minimum size" ist dann 0 statt der Inhaltsgröße). */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.ava-mengen-header,
.ava-mengen-summary-row,
.ava-mengen-row {
  display: grid;
  grid-template-columns: 40px 1.4fr 1.6fr 90px 110px 96px;
  gap: 8px;
  align-items: center;
}

.ava-mengen-header {
  padding: 10px 14px;
  background: var(--panel-solid);
  border-bottom: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ava-mengen-summary-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  background: rgba(31, 191, 127, 0.06);
}

.ava-mengen-summary-row span:first-child {
  grid-column: 1 / 5;
}

.ava-mengen-summary-row span:last-child {
  grid-column: 5 / 6;
  font-family: monospace;
}

.ava-mengen-rows {
  /* flex+min-height:0 lässt die Liste innerhalb von .ava-mengen-table-wrapper
     schrumpfen, statt (wie Kopf-/Summenzeile darüber) ihre volle Inhaltshöhe
     einzufordern - dadurch bleibt IMMER sie es, die per overflow-y:auto
     scrollt, auch wenn das Fenster kleiner ist als 40vh. */
  flex: 1 1 auto;
  min-height: 0;
  max-height: 40vh;
  overflow-y: auto;
  /* Ohne das hier bliebe der Scrollbalken (macOS-Standard: nur während des
     Scrollens sichtbar) unsichtbar, solange nicht aktiv gescrollt wird -
     dadurch war beim bloßen Hinschauen nicht erkennbar, dass unten weitere
     Zeilen liegen. */
  scrollbar-width: thin;
}

.ava-mengen-rows::-webkit-scrollbar {
  width: 10px;
}

.ava-mengen-rows::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

.ava-mengen-rows::-webkit-scrollbar-track {
  background: transparent;
}

.ava-mengen-row {
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
}

.ava-mengen-row:last-child {
  border-bottom: none;
}

.ava-mengen-row-nr {
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.ava-mengen-row input {
  width: 100%;
}

.ava-mengen-row-erlaeuterung,
.ava-mengen-row-ausdruck {
  border: none;
  background: transparent;
}

.ava-mengen-row-ergebnis {
  font-family: monospace;
  text-align: right;
  padding-right: 8px;
}

.ava-mengen-row-actions {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
}

/* !important nötig: .dialog button.ghost (style.css, höher spezifisch -
   Klasse+Klasse+Typ) überschreibt sonst Hintergrund/Rahmen, gleiche Ursache
   wie bei .ava-menge-calc-btn weiter oben. */
.ava-mengen-row-actions button {
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.ava-mengen-delete-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Zahlen-Spinner (Auf-/Ab-Pfeile) werden beim Faktor-Feld nicht gebraucht -
   gleiches Muster wie bei Menge/EP im Haupt-LV. */
.ava-mengen-row-faktor::-webkit-outer-spin-button,
.ava-mengen-row-faktor::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ava-mengen-row-faktor {
  -moz-appearance: textfield;
}

.ava-mengen-empty {
  padding: 20px 14px;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

/* ----- Vereinheitlichtes "Positionen kopieren"-Fenster (Stamm-LV + andere LVs) ----- */
/* Kopf, Filterzeile und Fußleiste (Einfügen/Schließen) bleiben immer
   sichtbar - nur die Positionsliste selbst wächst/schrumpft mit der
   Fensterhöhe und bekommt bei Bedarf einen eigenen Scrollbalken, statt dass
   die ganze Karte scrollt und die Buttons aus dem Blickfeld rutschen. */
.ava-copy-positions-dialog-card {
  width: min(1100px, 94vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  padding-bottom: 4px;
}

.ava-copy-positions-dialog-card .dialog-head,
.ava-copy-positions-dialog-card .ava-copy-positions-footer {
  flex-shrink: 0;
}

.ava-copy-positions-dialog-card .dialog-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ava-copy-positions-dialog-card .ava-copy-intro,
.ava-copy-positions-dialog-card .ava-copy-filter-grid {
  flex-shrink: 0;
}

body.theme-light .ava-copy-positions-dialog-card {
  background: #ffffff;
}

.ava-copy-intro {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px 16px;
}

.ava-copy-intro-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ava-copy-intro-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.ava-copy-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.ava-copy-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-bottom: 14px;
}

.ava-copy-filter-grid select,
.ava-copy-filter-grid input {
  width: 100%;
}

.ava-copy-table-wrapper {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Spaltenraster/Zeilenoptik bewusst an --ava-row-grid (Haupt-Baum, siehe
   .ava-group-row-header/.ava-position-row-main weiter oben) angeglichen:
   gleiche Schriftgröße (em-Spaltenbreiten müssen dazu passen, sonst laufen
   Kopf- und Datenzeilen auseinander), dünne Trennlinie statt Card-Look,
   flacher Hover statt abgerundeter Fläche. Eigenes Raster bleibt nötig, da
   der Kopier-Dialog zusätzliche Spalten (Checkbox, Quellbezug) hat und keine
   EKT-/Zahnrad-Spalte. */
.ava-copy-table-header,
.ava-copy-row {
  display: grid;
  grid-template-columns: 18px 22px 9em minmax(160px, 1fr) 3.5em 6em 4em;
  gap: 6px;
  align-items: center;
  padding: 2px 14px;
  font-size: 0.72rem;
}

.ava-copy-table-header {
  padding: 10px 14px;
  background: var(--panel-solid);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.ava-copy-tree {
  flex: 1;
  min-height: 160px;
  overflow-y: auto;
}

.ava-copy-row-wrap {
  margin-bottom: 0;
}

.ava-copy-row {
  min-height: 24px;
  cursor: default;
  border-bottom: 1px solid var(--border);
}

.ava-copy-row:hover {
  background: var(--row-hover-bg);
}

/* Schon in diesem LV vorhandene Positionen/Gruppen (per stammPositionId/
   sourcePositionId/stammGroupId/sourceGroupId erkannt, siehe
   avaCopyRefreshExistingIds) - grau/gesperrt, damit sie nicht versehentlich
   doppelt eingefügt werden. */
.ava-copy-row-already-inserted {
  opacity: 0.5;
  background: var(--panel-solid);
}

.ava-copy-row-already-inserted:hover {
  background: var(--panel-solid);
}

.ava-copy-row-already-inserted .ava-copy-row-check {
  cursor: not-allowed;
}

.ava-copy-row-check-empty {
  width: 16px;
}

.ava-copy-row-handle {
  color: var(--muted);
  opacity: 0.5;
  cursor: default;
  text-align: center;
}

.ava-copy-cell-oz {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: monospace;
  color: var(--muted);
  overflow: hidden;
}

.ava-copy-cell-oz-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ava-copy-cell-oz .ava-group-toggle {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.ava-copy-cell-oz .ava-group-toggle svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.ava-copy-row-wrap.is-expanded > .ava-copy-row .ava-copy-cell-oz .ava-group-toggle {
  transform: rotate(90deg);
}

.ava-copy-cell-label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.ava-copy-langtext-toggle.is-expanded {
  transform: rotate(90deg);
}

.ava-copy-cell-label-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ava-copy-langtext-panel {
  margin: 0 8px 6px 54px;
}

.ava-copy-count-hint {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--muted);
}

.ava-copy-cell {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ava-copy-row-children {
  /* Bewusst keine Einrückung - wie im Haupt-Baum (.ava-group-children/
     .ava-item-children) zeigt die Ordnungszahl die Hierarchie schon über die
     Punkt-Notation, die Spalten sollen bei jeder Tiefe exakt untereinander
     stehen. */
  padding-left: 0;
  border-left: none;
  margin-left: 0;
  margin-top: 2px;
}

.ava-copy-positions-footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ava-copy-selected-count {
  flex: 1;
  text-align: right;
  font-size: 0.85rem;
  color: var(--muted);
}

@media (max-width: 860px) {
  .ava-copy-filter-grid {
    grid-template-columns: 1fr;
  }

  .ava-copy-table-header,
  .ava-copy-row {
    grid-template-columns: 20px 16px minmax(70px, 0.6fr) minmax(140px, 1fr) 4em 3em 5em 3.5em;
  }

  .ava-copy-table-header span:nth-child(n + 9),
  .ava-copy-row > *:nth-child(n + 9) {
    display: none;
  }
}

/* Reagiert auf die tatsächlich verfügbare Breite des Inhaltsbereichs
   (.page, siehe container-type dort), nicht auf die reine Fensterbreite -
   bei ausgeklappter Sidebar kann der Inhaltsbereich schmal sein, obwohl das
   Browserfenster breit ist, und eine reine @media-Abfrage würde dann nicht
   greifen, obwohl der Platz tatsächlich fehlt. */
@container page (max-width: 860px) {
  /* Werkzeugleisten (Suche/Filter/Datum/Summen) über Projekte, Kunden,
     Angebote, Belege und Rechnungen hinweg: .input-row.inline erzwingt
     min-width:220px pro Eingabefeld und bricht selbst nie um, dadurch
     passt z.B. bei Rechnungen "Neue Rechnung" + Suche + Von + Bis + die
     Summen-Anzeige auf schmalen/Querformat-Bildschirmen nicht nebeneinander
     und läuft aus dem sichtbaren Bereich. Auf schmalen Bildschirmen sollen
     die Zeilen stattdessen umbrechen und Eingabefelder schrumpfen dürfen. */
  .project-toolbar,
  .input-row.inline {
    flex-wrap: wrap;
  }

  .input-row.inline input,
  .input-row.inline select {
    min-width: 0;
    flex: 1 1 140px;
  }

  .billing-summary-stack {
    width: 100%;
  }

  /* Horizontales Scrollen der Tabellen hat sich als nicht zuverlässig über
     alle Browser/Geräte hinweg herausgestellt (funktioniert je nach Browser/
     Trackpad-Geste/Betriebssystem unterschiedlich zuverlässig). Auf schmalen
     Bildschirmen deshalb stattdessen die weniger wichtigen Spalten
     ausblenden, damit die Tabelle ohne Scrollen komplett sichtbar und lesbar
     ist - unabhängig von Browser, Gerät oder Eingabemethode. Alle
     ausgeblendeten Werte bleiben über den "🔍"-Vorschau-Button jeder Zeile
     weiterhin erreichbar. overflow-x: auto bleibt als Rückfallebene bestehen
     für den (seltenen) Fall, dass selbst die reduzierten Spalten noch nicht
     passen. */
  #billingShell .table-wrapper.billing-table th:nth-child(5),
  #billingShell .table-wrapper.billing-table td:nth-child(5),
  #billingShell .table-wrapper.billing-table th.money:nth-child(9),
  #billingShell .table-wrapper.billing-table td.money:nth-child(9),
  #billingShell .table-wrapper.billing-table th:nth-child(10),
  #billingShell .table-wrapper.billing-table td:nth-child(10),
  #billingShell .table-wrapper.billing-table th:nth-child(11),
  #billingShell .table-wrapper.billing-table td:nth-child(11),
  #billingShell .table-wrapper.billing-table th:nth-child(13),
  #billingShell .table-wrapper.billing-table td:nth-child(13) {
    display: none;
  }

  #offersShell .table-wrapper.offers-table th:nth-child(5),
  #offersShell .table-wrapper.offers-table td:nth-child(5),
  #offersShell .table-wrapper.offers-table th:nth-child(8),
  #offersShell .table-wrapper.offers-table td:nth-child(8) {
    display: none;
  }

  #projectsShell .table-wrapper.projects-table th:nth-child(3),
  #projectsShell .table-wrapper.projects-table td:nth-child(3),
  #projectsShell .table-wrapper.projects-table th:nth-child(6),
  #projectsShell .table-wrapper.projects-table td:nth-child(6) {
    display: none;
  }
}

/* Handy-Breite: die obige Spaltenauswahl (≤860px) reicht bei ~300-350px
   Inhaltsbreite oft noch nicht zum vollständig scrollfreien Anzeigen -
   zusätzlich Datum ausblenden (Nr. ordnet zeitlich grob genug ein) und die
   Namensspalten enger kappen, damit die verbleibenden, wichtigsten Spalten
   (Nr., Kunde, Offen, Status) ohne Scrollen nebeneinander passen. */
@container page (max-width: 480px) {
  #billingShell .table-wrapper.billing-table th:nth-child(6),
  #billingShell .table-wrapper.billing-table td:nth-child(6) {
    display: none;
  }

  #billingShell .table-wrapper.billing-table td.billing-col-project,
  #billingShell .table-wrapper.billing-table td.billing-col-customer {
    max-width: 110px;
  }

  #offersShell .table-wrapper.offers-table td:nth-child(4) {
    display: none;
  }

  #offersShell .table-wrapper.offers-table td:nth-child(5),
  #offersShell .table-wrapper.offers-table td:nth-child(6),
  #offersShell .table-wrapper.offers-table td:nth-child(7) {
    max-width: 110px;
  }

  #projectsShell .table-wrapper.projects-table td:nth-child(4),
  #projectsShell .table-wrapper.projects-table td:nth-child(5) {
    max-width: 130px;
  }
}

/* Kurze Bildschirmhöhe (v.a. Handy im Querformat, wo durch Safaris eigene
   Bedienleisten oft nur ~300-350px Höhe für Inhalte bleiben): Kopfbereich
   (Topbar + Werkzeugleiste) so kompakt wie möglich machen, damit noch Platz
   für die eigentliche Tabelle bleibt statt dass sie komplett aus dem
   sichtbaren Bereich rutscht. Höhen-basiert (nicht breiten-basiert), reagiert
   deshalb unabhängig vom obigen @container page auf die Ausrichtung. */
@media (max-height: 480px) {
  .topbar {
    min-height: 40px;
  }

  /* Die sticky Werkzeugleisten sind fest 56px (Original-Topbar-Höhe) unter
     dem Topbar-Rand fixiert - bei der oben verkürzten 40px-Topbar entsteht
     sonst eine Lücke, durch die eine Tabellenzeile durchscheint, während man
     scrollt. Versatz an die neue Topbar-Höhe anpassen. */
  #appShell .hero,
  #projectsShell .hero,
  #customersShell .hero,
  #offersShell .hero,
  #receiptsShell .hero,
  #billingShell .hero,
  #articlesShell #articlesTabHero,
  #analyticsShell .hero {
    top: 40px;
  }

  .hero {
    padding: 4px 10px;
    gap: 3px;
  }

  .billing-summary-stack {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 14px;
  }

  .billing-gross-summary,
  .billing-open-summary,
  .billing-draft-summary {
    font-size: 0.8rem;
  }

  .project-toolbar {
    gap: 6px;
  }
}

/* Ansprechpartner-Tabelle (Adresse/Firma-Dialog, siehe createCustomerContactRow/
   createTradeContactRow): die generische Regel ".table-wrapper table { width:100%;
   min-width:0 }" quetscht bei 6 Spalten (Anrede/Titel/Vorname/Nachname/E-Mail/
   Telefon) + Löschen-Spalte auf schmalen Bildschirmen alles unlesbar zusammen,
   statt die Tabelle in ihrer natürlichen Breite zu belassen und den Wrapper
   (der schon overflow-x:auto hat) seitlich scrollen zu lassen. Höher
   spezifisch als die generische Regel (zwei Klassen statt einer), damit die
   Reihenfolge im Stylesheet keine Rolle spielt. */
.table-wrapper.contacts-table {
  /* .input-row in diesem Dialog ist ein Column-Flex mit align-items:flex-start
     (siehe #customerModal .dialog-body .input-row) - ohne diese Zeile würde
     der Wrapper selbst auf die volle Breite der (jetzt bewusst breiteren)
     Tabelle mitwachsen, statt bei der verfügbaren Breite zu bleiben und
     seinen eigenen Inhalt seitlich scrollen zu lassen. */
  width: 100%;
  max-width: 100%;
}

.table-wrapper.contacts-table table {
  width: max-content;
  min-width: 100%;
}

.table-wrapper.contacts-table th,
.table-wrapper.contacts-table td {
  min-width: 110px;
}

.table-wrapper.contacts-table th:last-child,
.table-wrapper.contacts-table td:last-child {
  min-width: 36px;
}

.table-wrapper.contacts-table input {
  width: 100%;
  min-width: 90px;
  box-sizing: border-box;
}

/* ===================== Mobile Home-Bildschirm (Holeron) =====================
   Nur für am Homescreen installierte Handy-Clients (body.is-standalone-client,
   siehe isStandaloneClient in main.js) - ersetzt dort die Sidebar-Navigation
   durch ein Icon-Raster auf der Hauptseite plus eine fix sichtbare untere
   Navigationsleiste. Am Desktop (Browser/Electron) bleibt alles unverändert. */

.mobile-home-launcher,
.mobile-bottom-nav,
.mobile-settings-tab-bar,
.mobile-analytics-tab-bar {
  display: none;
}

/* Ersetzt am Handy die (dort komplett unsichtbare, siehe .sidebar
   display:none weiter unten) Einstellungen-Unterpunkte-Navigation
   (sidebarSettingsNav) durch ein natives <select> - Optionen werden in
   main.js (syncMobileSettingsTabSelect) direkt aus deren echten Buttons
   aufgebaut, inkl. rollenbasierter Sichtbarkeit. */
body.is-standalone-client .mobile-settings-tab-bar {
  display: block;
  padding: 8px 14px;
  flex: 0 0 auto;
}

body.is-standalone-client #mobileSettingsTabSelect {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #1f2a26;
  color: #f7f7f5;
  font-size: 16px;
}

/* Handy-Ersatz für die Auswertung-Unterreiter (siehe mobileAnalyticsTabSelect
   in index.html) - exakt dasselbe Muster wie mobile-settings-tab-bar oben. */
body.is-standalone-client .mobile-analytics-tab-bar {
  display: block;
  padding: 8px 14px;
  flex: 0 0 auto;
}

body.is-standalone-client #mobileAnalyticsTabSelect {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #1f2a26;
  color: #f7f7f5;
  font-size: 16px;
}

body.is-standalone-client .sidebar,
body.is-standalone-client #sidebarBackdrop,
body.is-standalone-client .topbar-burger {
  display: none !important;
}

/* Verhindert, dass die App-Kopfzeile unter der vom iPhone vorgegebenen
   Statusleiste (Uhrzeit/WLAN/Akku) hervorschimmert bzw. sie überlagert -
   die Statusleisten-Zone bekommt jetzt denselben dunklen/verschwommenen
   Hintergrund wie die Topbar selbst, statt dass Seiteninhalt einfach
   dahinter durchläuft. min-height statt nur padding-top, weil der globale
   "*{box-sizing:border-box}"-Reset (siehe weiter oben) sonst den
   Sicherheitsabstand von der Content-Höhe abzieht statt on top zu addieren
   (exakt derselbe Fehler wie zuvor bei der unteren Navigationsleiste). */
body.is-standalone-client .topbar {
  min-height: calc(56px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}

/* Sicherheitsnetz gegen einen weißen Streifen am unteren Rand auf echten
   iPhones: 100vh entspricht dort im installierten Homescreen-PWA-Modus nicht
   immer exakt der sichtbaren Fläche (Safari rechnet die Home-Indicator-Zone
   unterschiedlich ein je nach Gerät) - wo dadurch minimal Fläche unterhalb
   von .app-layout durchschimmert, ist body/html jetzt dunkel statt weiß.
   100dvh (dynamische Viewport-Höhe) zusätzlich zu 100vh trifft die tatsächlich
   sichtbare Fläche auf iOS zuverlässiger. */
html:has(body.is-standalone-client) {
  background: #1f2a26;
}

body.is-standalone-client {
  background: #1f2a26;
}

body.is-standalone-client .app-layout {
  height: 100vh;
  height: 100dvh;
  /* Die Ein-Spalten-Umstellung weiter unten (@media max-width:640px) greift
     nur nach Fensterbreite - im Querformat ist das Handy aber oft breiter
     als 640px, .app-layout blieb dann bei "auto 1fr" stehen. Die Sidebar ist
     hier zwar per display:none weg, aber ohne dieses Grid-Item bleibt die
     erste ("auto") Spalte auf Content-Breite geschrumpft und die zweite
     ("1fr") Spalte leer (zeigt nur den dunkelblauen .app-layout-Hintergrund
     durch, siehe Screenshot vom Nutzer) statt dass .main-area die volle
     Breite bekommt. is-standalone-client soll unabhängig von der
     Fensterbreite/Ausrichtung immer einspaltig sein. */
  grid-template-columns: 1fr;
  /* .app-layout hat app-weit einen dunkelblauen Hintergrund (#0b1122, siehe
     Basis-Regel weiter oben) - für die Handy-App ist aber überall sonst
     (body, html, #homeShell) das dunkle Grün (#1f2a26) das Theme. Sobald
     dieser Hintergrund irgendwo kurz durchschimmert (z.B. beim elastischen
     Überscrollen von .main-area am iPhone - .main-area selbst hat keinen
     eigenen Hintergrund und liegt direkt über .app-layout, "Rubber-Banding"
     zeigt dabei kurz den Bereich dahinter), sieht man einen blauen Balken
     mitten im sonst grünen Handy-Design (siehe Screenshots vom Nutzer, Hoch-
     UND Querformat). Hintergrund hier ans Grün angleichen, damit so ein
     Durchschimmern unsichtbar bleibt statt farblich aufzufallen. */
  background: #1f2a26;
}

/* Theme-Umschalter und Benutzer-Button (Name/Avatar) werden am Handy nicht
   gebraucht - Design ist dort ohnehin immer dunkel (FORCE_DARK_THEME in
   main.js) und "Abmelden" liegt jetzt in den Einstellungen (siehe
   .mobile-logout-bar). */
body.is-standalone-client .user-theme-toggle,
body.is-standalone-client .user-button {
  display: none;
}

/* Am Handy wechselt die Zeiterfassung schon automatisch per Ausrichtung
   zwischen Tages- (Hochformat) und Wochenansicht (Querformat) - siehe
   timeOrientationQuery in main.js. Die manuellen Umschalt-Buttons dafür sind
   dort deshalb überflüssig (Nutzer-Wunsch). */
body.is-standalone-client #switchToWeek,
body.is-standalone-client #switchToDay {
  display: none;
}

/* Auf der Hauptseite (Handy) soll der Holeron-Hintergrund bis ganz nach oben
   durchlaufen statt eines dunkelblauen Topbar-Streifens mit "DASHBOARD"-
   Titel - die Zeile bleibt aber (unsichtbar) an ihrem Platz, damit ihr
   Sicherheitsabstand zur iPhone-Statusleiste (siehe .topbar-Regel weiter
   oben) weiterhin den Inhalt nach unten drückt. Auf Nutzerwunsch (zuerst für
   "time"/"kanban"/"settings", dann ausgeweitet auf alle übrigen Listen-
   Ansichten mit eigener Kopfzeile/.hero: Belege, Abrechnung, Protokoll,
   Projekte, Adressen, Angebote, Artikel) überall dort weggelassen, wo die
   jeweilige Ansicht ohnehin schon eine eigene Kopfzeile/Filterleiste zeigt,
   die denselben Zweck erfüllt (Titel/Kontext + Aktionen) - der blaue Streifen
   war dort nur zusätzliche, verschwendete Höhe. Als data-mobile-view-Liste
   statt eines einzigen "gilt für alle" wegen einzelner Ansichten (Chat,
   Auswertung, Firmen/Trades), deren Kopfzeilen komplexer/anders gebaut sind
   und hier nicht ungeprüft mit-geändert werden sollen. AVA (eigene, einfache
   .hero-Kopfzeile ohne app-weites Sticky-Verhalten) wurde auf Nutzerwunsch
   ergänzt. */
body.is-standalone-client[data-mobile-view="none"] .topbar,
body.is-standalone-client[data-mobile-view="time"] .topbar,
body.is-standalone-client[data-mobile-view="kanban"] .topbar,
body.is-standalone-client[data-mobile-view="settings"] .topbar,
body.is-standalone-client[data-mobile-view="receipts"] .topbar,
body.is-standalone-client[data-mobile-view="billing"] .topbar,
body.is-standalone-client[data-mobile-view="protocols"] .topbar,
body.is-standalone-client[data-mobile-view="projects"] .topbar,
body.is-standalone-client[data-mobile-view="customers"] .topbar,
body.is-standalone-client[data-mobile-view="offers"] .topbar,
body.is-standalone-client[data-mobile-view="articles"] .topbar,
body.is-standalone-client[data-mobile-view="ava"] .topbar {
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}

body.is-standalone-client[data-mobile-view="none"] .topbar-title,
body.is-standalone-client[data-mobile-view="time"] .topbar-title,
body.is-standalone-client[data-mobile-view="kanban"] .topbar-title,
body.is-standalone-client[data-mobile-view="settings"] .topbar-title,
body.is-standalone-client[data-mobile-view="receipts"] .topbar-title,
body.is-standalone-client[data-mobile-view="billing"] .topbar-title,
body.is-standalone-client[data-mobile-view="protocols"] .topbar-title,
body.is-standalone-client[data-mobile-view="projects"] .topbar-title,
body.is-standalone-client[data-mobile-view="customers"] .topbar-title,
body.is-standalone-client[data-mobile-view="offers"] .topbar-title,
body.is-standalone-client[data-mobile-view="articles"] .topbar-title,
body.is-standalone-client[data-mobile-view="ava"] .topbar-title {
  display: none;
}

/* Ohne Titel bräuchte die Topbar hier nicht mehr ihre volle Höhe von 56px
   plus Sicherheitsabstand (siehe .topbar-Regel weiter oben) - das ließ nur
   ungenutzten leeren Platz zwischen Statusleiste und dem eigentlichen Inhalt
   stehen (siehe Screenshots vom Nutzer). Reserviert bleibt nur noch der
   reine Sicherheitsabstand selbst (plus ein kleines Polster), der Inhalt
   rückt entsprechend nach oben. */
body.is-standalone-client[data-mobile-view="none"] .topbar,
body.is-standalone-client[data-mobile-view="time"] .topbar,
body.is-standalone-client[data-mobile-view="kanban"] .topbar,
body.is-standalone-client[data-mobile-view="settings"] .topbar,
body.is-standalone-client[data-mobile-view="receipts"] .topbar,
body.is-standalone-client[data-mobile-view="billing"] .topbar,
body.is-standalone-client[data-mobile-view="protocols"] .topbar,
body.is-standalone-client[data-mobile-view="projects"] .topbar,
body.is-standalone-client[data-mobile-view="customers"] .topbar,
body.is-standalone-client[data-mobile-view="offers"] .topbar,
body.is-standalone-client[data-mobile-view="articles"] .topbar,
body.is-standalone-client[data-mobile-view="ava"] .topbar {
  min-height: calc(4px + env(safe-area-inset-top));
}

/* .hero (Filterleiste/Suche) ist in diesen Ansichten bereits app-weit sticky
   unter der Topbar (siehe die gemeinsame #appShell .hero, #projectsShell
   .hero, ...-Regel weiter oben in dieser Datei), aber fest auf "top: 56px"
   einer vollen Desktop-Topbar einprogrammiert. Die Topbar direkt darüber ist
   für all diese Ansichten jetzt nur noch der schmale Sicherheitsabstand
   (siehe Regeln direkt darüber) - die Leiste rutscht dadurch ganz nach oben,
   direkt unter die Statusleiste, statt darunter eine leere Lücke zu lassen
   (Nutzer-Wunsch: "das untere Fenster ganz nach oben und fixieren"). Artikel
   hat zusätzlich eine zweite, tiefer sitzende Zeile (Tab-spezifische
   Aktionen) - deren "top" war ebenfalls fest auf die volle Topbar-Höhe plus
   die erste Zeile gerechnet. */
body.is-standalone-client[data-mobile-view="kanban"] #appShell .hero,
body.is-standalone-client[data-mobile-view="projects"] #projectsShell .hero,
body.is-standalone-client[data-mobile-view="customers"] #customersShell .hero,
body.is-standalone-client[data-mobile-view="offers"] #offersShell .hero,
body.is-standalone-client[data-mobile-view="receipts"] #receiptsShell .hero,
body.is-standalone-client[data-mobile-view="billing"] #billingShell .hero,
body.is-standalone-client[data-mobile-view="articles"] #articlesShell #articlesTabHero {
  top: calc(4px + env(safe-area-inset-top));
}

body.is-standalone-client[data-mobile-view="articles"] #articlesShell #articlesToolbar,
body.is-standalone-client[data-mobile-view="articles"] #articlesShell #templatesToolbar,
body.is-standalone-client[data-mobile-view="articles"] #articlesShell #regieHeader {
  top: calc(63px + env(safe-area-inset-top));
}

body.is-standalone-client #homeShell .home-dashboard-summary,
body.is-standalone-client #homeShell .home-team-overview-card,
body.is-standalone-client #homeShell .home-projects-card,
body.is-standalone-client #homeShell .home-offers-card,
body.is-standalone-client #homeShell #homeOverdueInvoicesCard {
  display: none !important;
}

/* Lässt den dunkelgrünen Hintergrund bis zur unteren Navigation reichen,
   auch wenn das Icon-Raster (9 Kacheln, seit der 3-Spalten-Umstellung
   niedriger als der verfügbare Platz) selbst nicht die volle Höhe füllt -
   sonst schimmert darunter der normale App-Hintergrund (Navi-Blau) durch. */
body.is-standalone-client #homeShell.app-shell:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: #1f2a26;
}

body.is-standalone-client #homeShell.app-shell:not(.hidden) > .page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* .page hat sonst "margin: 0 auto" (Block-Layout-Zentrierung mit
     max-width) - als Flex-Item interpretiert ein Browser "auto"-Margins
     zur Selbstzentrierung/-schrumpfung auf Content-Breite, wodurch .page
     auf wenige Pixel Breite zusammenschnurrte. Hier zurücksetzen. */
  margin: 0;
  width: 100%;
}

body.is-standalone-client #homeShell .page > main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

body.is-standalone-client .mobile-home-launcher {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 18px;
  padding: 14px 14px 8px;
  box-sizing: border-box;
}

.mobile-home-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.mobile-home-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

.mobile-home-wordmark {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #f7f7f5;
}

.mobile-home-tagline {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9a8e;
}

.mobile-home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 480px;
}

.mobile-home-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 6px;
  border: 1px solid rgba(247, 247, 245, 0.1);
  border-radius: 18px;
  background: rgba(247, 247, 245, 0.06);
  color: #f7f7f5;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-home-tile:active {
  background: rgba(247, 247, 245, 0.12);
}

.mobile-home-tile .nav-icon {
  position: relative;
  overflow: visible;
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(74, 144, 226, 0.18);
}

.mobile-home-tile .nav-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #4a90e2;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-home-tile .nav-icon .assignment-notif-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  margin-left: 0;
  z-index: 1;
}

/* Querformat: 3 Spalten x 3 Zeilen ist bei der geringen Bildschirmhöhe eines
   Handys im Querformat zu hoch - die letzte Kachel-Reihe rutscht dann unter
   die fixe untere Navigation (siehe Screenshot vom Nutzer). 5 statt 3 Spalten
   verteilt dieselben 9 Kacheln auf nur noch 2 Zeilen; max-width darf dabei
   größer sein, weil im Querformat reichlich horizontaler Platz frei ist.
   Trotzdem reichte die Höhe mit den normalen (Hochformat-)Abständen und der
   normalen Logo-/Schriftgröße oben noch nicht (2. Zeile weiterhin teils unter
   der Navigation, siehe zweiter Screenshot) - Marken-Block deshalb kompakter
   (Logo+Wortmarke nebeneinander statt untereinander, Tagline weg, kleinere
   Kacheln/Icons) und justify-content:flex-start statt :center, damit der
   gesparte Platz tatsächlich nach oben/unten frei wird statt gleichmäßig um
   den (weiterhin zu hohen) Inhalt verteilt zu bleiben. */
@media (orientation: landscape) {
  body.is-standalone-client .mobile-home-launcher {
    justify-content: flex-start;
    gap: 10px;
    padding: 6px 14px 4px;
  }

  body.is-standalone-client .mobile-home-brand {
    flex-direction: row;
    gap: 10px;
  }

  body.is-standalone-client .mobile-home-logo {
    width: 36px;
    height: 36px;
  }

  body.is-standalone-client .mobile-home-wordmark {
    margin-top: 0;
    font-size: 15px;
  }

  body.is-standalone-client .mobile-home-tagline {
    display: none;
  }

  body.is-standalone-client .mobile-home-grid {
    grid-template-columns: repeat(5, 1fr);
    max-width: 720px;
    gap: 8px;
  }

  body.is-standalone-client .mobile-home-tile {
    padding: 8px 4px;
    gap: 4px;
  }

  body.is-standalone-client .mobile-home-tile .nav-icon {
    width: 34px;
    height: 34px;
  }
}

/* Hinweis-Banner "Benachrichtigungen aktivieren" - solange keine aktive
   Push-Subscription besteht (siehe updateNotificationsActionVisibility() in
   main.js, das dieses Element jetzt mitsteuert). Bewusst nicht wegklickbar:
   ohne den Benutzer-Button in der Topbar (am Handy versteckt, siehe weiter
   oben) war "Benachrichtigungen aktivieren" sonst gar nicht mehr erreichbar. */
.mobile-notifications-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  padding: 12px 16px;
  border: 1px solid rgba(74, 144, 226, 0.35);
  border-radius: 14px;
  background: rgba(74, 144, 226, 0.14);
  color: #f7f7f5;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-notifications-banner .nav-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #4a90e2;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Nutzer hat die Berechtigung im Browser bereits verweigert - lässt sich per
   JS nicht erneut anfragen (siehe updateNotificationsActionVisibility()),
   deshalb andere Farbe + Verweis auf die iPhone-Einstellungen statt eines
   "jetzt aktivieren"-Calls-to-Action. */
.mobile-notifications-banner.denied {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.12);
}

.mobile-notifications-banner.denied .nav-icon svg {
  stroke: #fca5a5;
}

.mobile-notifications-banner.hidden {
  display: none;
}

/* Chat: sobald ein Thread offen ist, ersetzt die eigentliche Compose-Leiste
   (Anhang/Kamera/Text/Senden - schon vorhanden für Desktop) die generische
   untere Navigation, mit einem zusätzlichen Hauptseite-Icon davor - dieselbe
   Idee wie .mobile-dialog-nav/.mobile-bottom-nav.contextual, nur mit dem
   bestehenden Chat-Formular selbst statt eines eigenen Markups, damit
   Anhänge/Kamera/Senden nicht dupliziert werden müssen.
   Wichtig: als Zustands-Hook dient .chat-layout.chat-mobile-show-thread
   (main.js setChatMobileView()), NICHT #chatMessagePanelActive:not(.hidden) -
   letzteres bleibt auch nach einem Tap auf "Zurück zur Liste" (siehe
   chatBackToListButton) gesetzt, weil es am Desktop parallel zur Liste
   sichtbar bleibt; nur die show-list/-thread-Klasse wird beim Zurück-Tap
   tatsächlich umgeschaltet. Mit dem falschen Hook blieb die generische
   Navigation nach "Zurück" fälschlich versteckt. */
.chat-compose-home-button {
  display: none;
}

body.is-standalone-client .chat-compose-home-button {
  display: flex;
}

body.is-standalone-client:has(#chatShell:not(.hidden) .chat-layout.chat-mobile-show-thread) .mobile-bottom-nav {
  display: none;
}

/* .main-area reserviert sonst überall unten Platz für .mobile-bottom-nav
   (siehe weiter unten) - hier stattdessen 0, weil #chatComposeForm selbst
   (fixed, siehe unten) ihren eigenen Sicherheitsabstand mitbringt; sonst
   bliebe zwischen Chatinhalt und der fixen Compose-Leiste eine leere Lücke
   in Höhe des sonst reservierten Navigationsplatzes. */
body.is-standalone-client:has(#chatShell:not(.hidden) .chat-layout.chat-mobile-show-thread) .main-area {
  padding-bottom: 0;
}

body.is-standalone-client .chat-layout.chat-mobile-show-thread #chatComposeForm {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: #1f2a26;
  box-sizing: border-box;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

body.is-standalone-client .chat-layout.chat-mobile-show-thread .chat-messages-list {
  padding-bottom: calc(70px + env(safe-area-inset-bottom));
}

/* Eigene Chat-Kopfzeile (Zurück-Pfeil + Gesprächsname, bzw. "Chat" + Neu-
   Button in der Übersicht) statt der generischen App-Topbar ("Chat") -
   blendet die Topbar für die GESAMTE Chat-Ansicht aus (Übersicht UND
   offener Thread) und rückt die jeweils eigene Kopfzeile an ihre Stelle
   nach oben, inklusive deren Sicherheitsabstand zur iPhone-Statusleiste
   (den sonst die Topbar übernimmt). position:sticky, damit nur die Liste
   bzw. .chat-messages-list scrollt, nicht die Kopfzeile mit. */
body.is-standalone-client:has(#chatShell.app-shell:not(.hidden)) .topbar {
  display: none;
}

body.is-standalone-client .chat-layout.chat-mobile-show-thread .chat-message-panel-head {
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: #1f2a26;
}

body.is-standalone-client .chat-layout.chat-mobile-show-list .chat-thread-panel-head {
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: #1f2a26;
}

/* .chat-layout hat für schmale Bildschirme bisher eine fix berechnete Höhe
   (100vh minus einem für die alte Desktop-Topbar geschätzten Fixwert) - am
   Handy passt dieser Schätzwert nicht mehr (eigene Topbar-Höhe mit Safe-
   Area, untere Leiste/Compose-Bar mit eigenem Safe-Area-Abstand). Eine zu
   groß berechnete Höhe ließ ".chat-layout" (samt Kopfzeile) insgesamt in
   .main-area scrollen, statt wie beabsichtigt nur .chat-messages-list -
   stattdessen hier über dieselbe Flex-Kette wie bei #homeShell (siehe dort)
   exakt die tatsächlich verfügbare Höhe verwenden. */
body.is-standalone-client #chatShell.app-shell:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

body.is-standalone-client #chatShell.app-shell:not(.hidden) > .page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0;
  width: 100%;
}

body.is-standalone-client #chatShell .chat-layout {
  height: auto;
  flex: 1;
  min-height: 0;
}

body.is-standalone-client .mobile-bottom-nav {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  justify-content: space-around;
  align-items: stretch;
  /* Höhe exakt auf den unteren Abstand von .main-area abgestimmt (siehe
     body.is-standalone-client .main-area padding-bottom: 40px + safe-area
     weiter unten) - sonst reißt zwischen dem grünen Hintergrund von
     #homeShell und dieser Leiste ein Spalt auf. Die Datei hat einen
     globalen "*{box-sizing:border-box}"-Reset (siehe weiter oben), der hier
     auch greift - min-height muss deshalb den Safe-Area-Abstand selbst schon
     MIT einrechnen (nicht separat dazu addieren), sonst frisst
     padding-bottom die Safe-Area-Zone bei border-box aus der Höhe wieder
     heraus, statt die Gesamthöhe zu vergrößern - genau das hat den Spalt
     verursacht (in der Praxis als weißer Streifen sichtbar, erster
     Fixversuch mit reinem "min-height:72px" hat das übersehen). Ursprünglich
     72px, dann 56px (nur Querformat: 40px) - auf Nutzerwunsch ("auch beim
     Vertikalen halten... überall halbiert") gilt die kompakte 40px-Höhe jetzt
     in jeder Ausrichtung; 40px statt exakt halbierter 28px, weil das für
     Finger zu knapp zum Antippen wäre, die Symbole bleiben dabei noch gut
     sichtbar (siehe Icon-Größe/Item-Padding weiter unten). */
  min-height: calc(40px + env(safe-area-inset-bottom));
  background: #1f2a26;
  border-top: 1px solid rgba(247, 247, 245, 0.1);
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-bottom-nav-item {
  /* Feste Breite (1/4 der Leiste) statt flex:1 - damit das Hauptseite-Icon
     im kontextuellen Modus (siehe .contextual weiter unten, dort sind die
     anderen 3 Items per display:none ausgeblendet) exakt an derselben
     Stelle stehen bleibt, statt sich über die frei werdende Breite zu
     zentrieren und dadurch beim Seitenwechsel sichtbar zu "springen". */
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 4px 4px;
  background: none;
  border: none;
  color: #9a9a8e;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav-item span:not(.nav-icon) {
  /* Text bewusst nur visuell (nicht für Screenreader) ausgeblendet - Icons
     sollen für sich sprechen, siehe Nutzerwunsch. Gleiche Technik wie
     .sr-only weiter oben. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.mobile-bottom-nav-item .nav-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-bottom-nav-item.active {
  color: #4a90e2;
}

.mobile-bottom-nav-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  /* margin-left:auto schiebt den Button in jedem Modus ganz nach rechts,
     unabhängig davon ob .contextual aktiv ist - siehe Kommentar bei
     .mobile-bottom-nav-item zur festen Hauptseite-Position. */
  margin: auto 14px auto auto;
  border: none;
  border-radius: 999px;
  background: #4a90e2;
  color: #f7f7f5;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav-action.hidden {
  display: none;
}

.mobile-bottom-nav-action .nav-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Kontextueller Modus (siehe MOBILE_CONTEXT_ACTIONS in main.js): auf
   Unterseiten mit einer klaren "Neu anlegen"-Aktion (z.B. Adressen) zeigt
   die untere Leiste nur noch Hauptseite (Rückweg) links und die Aktion
   rechts, statt der 4 immer gleichen Icons - Zeiterfassung/Aufgaben/
   Einstellungen bleiben dafür einen Tap über Hauptseite erreichbar. Kein
   justify-content mehr nötig - Hauptseite hat schon eine feste Breite
   (siehe .mobile-bottom-nav-item), die Aktion wird per margin-left:auto an
   den rechten Rand geschoben. */

.mobile-bottom-nav.contextual .mobile-bottom-nav-item:not(#mobileNavHome) {
  display: none;
}


/* Muss exakt zur Höhe von .mobile-bottom-nav weiter oben passen, sonst reißt
   zwischen Inhalt und Leiste eine Lücke auf bzw. verdeckt die Leiste den
   unteren Rand des Inhalts - gilt jetzt einheitlich in jeder Ausrichtung. */
body.is-standalone-client .main-area {
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

/* Einstellungen-Seite (settings.html), Abmelden-Leiste: dort per JS
   eingeblendet (siehe initMobileLogoutButton in settings.js), da der
   Benutzer-Button samt Abmelden-Menü in main.js' Topbar am Handy versteckt
   ist (siehe .user-theme-toggle/.user-button weiter unten) - Abmelden
   braucht dadurch einen eigenen Zugang. */
.mobile-logout-bar {
  padding: 14px 16px 0;
}

.mobile-logout-button {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: var(--radius);
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  font-weight: 600;
  cursor: pointer;
}

/* Fixe untere Symbolleiste in Dialogen (Zurück links / Speichern rechts),
   analog zur unteren Hauptnavigation - generisch über .mobile-dialog-nav,
   damit sich weitere Dialoge (aktuell nur #customerModal) einfach durch
   Übernahme desselben Markups anschließen lassen, ohne hier pro Dialog neue
   CSS-Regeln zu brauchen. Liegt bewusst INNERHALB des <dialog>-Elements
   (als letztes Kind des Formulars) statt als eigenständiges position:fixed-
   Element im <body> - ein per showModal() geöffneter <dialog> läuft im
   Top-Layer des Browsers, ein von außen kommendes fixed-Element würde
   dahinter verschwinden (siehe Kommentar bei .login-time-notice.center-
   notice weiter oben für denselben Mechanismus). */
.mobile-dialog-nav {
  display: none;
}

body.is-standalone-client .dialog .mobile-dialog-nav {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  justify-content: space-between;
  align-items: center;
  min-height: calc(56px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  padding: 6px 20px calc(6px + env(safe-area-inset-bottom));
  background: #1f2a26;
  border-top: 1px solid rgba(247, 247, 245, 0.1);
}

/* Ersetzt die bisherige Text-Fußleiste (Abbrechen/Speichern) am Handy - bei
   Dialogen ohne .mobile-dialog-nav (noch nicht umgestellt) bleibt sie
   unverändert sichtbar. */
body.is-standalone-client .dialog:has(.mobile-dialog-nav) .dialog-actions {
  display: none;
}

body.is-standalone-client .dialog:has(.mobile-dialog-nav) form {
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

/* × oben und die kleine Eyebrow-Zeile (z.B. "Adresse") sind mit dem
   Zurück-Pfeil der neuen unteren Leiste doppelt - beides weg, übrig bleibt
   nur noch der eigentliche Titel ("Adresse anlegen"). ".dialog-head > button"
   statt einer ID, weil dieses Muster (Eyebrow + Titel + ein × in der Kopf-
   zeile) bei jedem Dialog in der App identisch ist. */
body.is-standalone-client .dialog:has(.mobile-dialog-nav) .dialog-head .eyebrow,
body.is-standalone-client .dialog:has(.mobile-dialog-nav) .dialog-head > button {
  display: none;
}

.mobile-dialog-nav-back,
.mobile-dialog-nav-save {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-dialog-nav-back {
  background: rgba(247, 247, 245, 0.08);
  color: #f7f7f5;
}

.mobile-dialog-nav-save {
  background: #4a90e2;
  color: #f7f7f5;
}

.mobile-dialog-nav-back svg,
.mobile-dialog-nav-save svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Formularfelder sind app-weit bewusst kompakt (12px, für die Desktop-
   Ansicht) - Safari auf dem iPhone zoomt aber automatisch in die Seite,
   sobald ein fokussiertes Eingabefeld unter 16px Schrift hat (Standard-
   Verhalten, keine Einstellung dagegen). Genau das ließ z.B. den Adresse-
   bearbeiten-Dialog beim Antippen eines Feldes "reinzoomen". Am Handy
   deshalb generell auf 16px anheben, für alle Dialoge (nicht nur
   #customerModal), da dieselbe Zoom-Falle jedes Formular betreffen kann.
   !important, weil einzelne Dialoge (z.B. "#customerModal .dialog-body
   input") ihre Schriftgröße über eine ID-Regel setzen, die sonst trotz
   .is-standalone-client-Scope gewinnen würde. */
body.is-standalone-client .dialog input,
body.is-standalone-client .dialog select,
body.is-standalone-client .dialog textarea {
  font-size: 16px !important;
}

/* .dialog hat app-weit nur ein festes padding:12px (siehe oben) - bei hohen
   Formularen (z.B. #offerModal), die den Dialog bis ganz nach oben füllen,
   landet die Kopfzeile (Eyebrow "Angebot" + Titel + ×) dadurch am Handy
   unter der vom iPhone reservierten Statusleisten-Zone und schimmert nur
   noch leicht transparent durch sie hindurch, statt normal lesbar zu sein -
   derselbe Effekt, der für die Topbar schon mit env(safe-area-inset-top)
   behoben wurde (siehe body.is-standalone-client .topbar weiter oben). */
body.is-standalone-client .dialog {
  padding-top: calc(12px + env(safe-area-inset-top));
}

/* "Meine Geräte" (main.js renderDevicesList) */
.devices-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: min(520px, 80vw);
}

.devices-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.devices-row.is-current {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

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

.devices-row-meta {
  font-size: 0.8rem;
  color: var(--muted);
}

.devices-row-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

/* Einstellungen › Datenpfade › Datensicherung */
.backup-auto-status {
  margin-top: 6px;
}

.backup-auto-status [data-backup-last] {
  white-space: pre-line;
}

.backup-auto-status .backup-status-error {
  color: #c53030;
}

.backup-auto-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

/* Seitentitel am Handy (Browser): "Baubesprechungsprotokoll" u.ä. wurde
   abgeschnitten - auf schmalen Bildschirmen kleiner, notfalls mit "…". */
@media (max-width: 600px) {
  /* Hinweisbalken: Text über die volle Breite, Knopf darunter */
  .protocol-hint-banner {
    flex-wrap: wrap;
  }
  .protocol-hint-text {
    flex-basis: calc(100% - 30px);
    -webkit-line-clamp: 4;
  }
  .protocol-hint-banner button {
    margin-left: auto;
  }
  .topbar-title,
  body.theme-light .topbar-title {
    font-size: 20px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Status des Autosave in Bearbeitungsdialogen (main.js setupDialogAutosave) */
.dialog-autosave-status {
  margin-right: auto;
  align-self: center;
  font-size: 0.8rem;
  color: var(--muted);
}

.dialog-autosave-status[hidden] {
  display: none;
}

.dialog-autosave-status[data-status="saved"]::before {
  content: "✓ ";
  color: #1fbf7f;
}

.dialog-autosave-status[data-status="error"] {
  color: #d9534f;
}

/* iPhone/iPad: Safari vergrößert die Seite automatisch, sobald ein
   Eingabefeld mit weniger als 16px Schrift angetippt wird - und setzt die
   Vergrößerung danach nicht zurück (v.a. in der Homescreen-App sah die Seite
   dann "verrutscht" aus). Auf Touch-Geräten deshalb alle Eingaben mit 16px.
   Das Vergrößern mit zwei Fingern bleibt möglich. */
@media (pointer: coarse), (hover: none) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]),
  textarea,
  select,
  [contenteditable="true"],
  .rich-input {
    font-size: 16px !important;
  }
}

/* Beteiligte Firmen am Handy: jede Firma als Karte statt einer 9-spaltigen
   Tabelle, die nicht auf den Bildschirm passt (Spalten rechts unerreichbar,
   "Bereich" nur wenige Buchstaben breit). Reine Darstellung - die Tabelle und
   ihre Bedienelemente bleiben dieselben. */
@media (max-width: 640px) {
  .protocol-party-status-table,
  .protocol-party-status-table tbody {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
  }
  .protocol-party-status-table thead {
    display: none;
  }
  .protocol-party-status-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card, #fff);
  }
  .protocol-party-status-table td,
  .protocol-party-status-table tr:last-child td {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    border: none;
    text-align: left;
    min-width: 0;
  }
  .protocol-party-status-table td.protocol-party-company {
    grid-column: 1 / -1;
    font-weight: 700;
    font-size: 1rem;
  }
  .protocol-party-status-table td.protocol-party-name {
    grid-column: 1 / -1;
  }
  .protocol-party-status-table td.protocol-party-tradearea::before,
  .protocol-party-status-table td.protocol-party-shortcode::before,
  .protocol-party-status-table td.protocol-party-name::before {
    font-size: 0.75rem;
    color: var(--muted);
  }
  .protocol-party-status-table td.protocol-party-tradearea::before { content: "Bereich"; }
  .protocol-party-status-table td.protocol-party-shortcode::before { content: "Kürzel"; }
  .protocol-party-status-table td.protocol-party-name::before { content: "Ansprechperson"; }
  .protocol-party-status-table td input[type="text"],
  .protocol-party-status-table td select {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box;
  }
  /* Reihenfolge: Firma / Bereich | Kürzel / Ansprechperson / Status 2x2 / Aktionen */
  .protocol-party-status-table td.protocol-party-company { order: 0; }
  .protocol-party-status-table td.protocol-party-tradearea { order: 1; }
  .protocol-party-status-table td.protocol-party-shortcode { order: 2; }
  .protocol-party-status-table td.protocol-party-name { order: 3; }
  .protocol-party-status-table td:nth-child(5) { order: 4; }
  .protocol-party-status-table td:nth-child(6) { order: 5; }
  .protocol-party-status-table td:nth-child(7) { order: 6; }
  .protocol-party-status-table td:nth-child(8) { order: 7; }
  .protocol-party-status-table td.protocol-party-actions { order: 8; }
  /* Status: Anwesend / Abwesend / Entschuldigt / Eingeladen als beschriftete Auswahl */
  .protocol-party-status-table td:nth-child(5),
  .protocol-party-status-table td:nth-child(6),
  .protocol-party-status-table td:nth-child(7),
  .protocol-party-status-table td:nth-child(8) {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
  }
  .protocol-party-status-table td:nth-child(5)::after { content: "Anwesend"; }
  .protocol-party-status-table td:nth-child(6)::after { content: "Abwesend"; }
  .protocol-party-status-table td:nth-child(7)::after { content: "Entschuldigt"; }
  .protocol-party-status-table td:nth-child(8)::after { content: "Eingeladen"; }
  .protocol-party-status-table td input[type="radio"],
  .protocol-party-status-table td input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
  }
  .protocol-party-status-table td.protocol-party-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* Zurück-Link: gegen die allgemeinen (Handy-)Knopfregeln absichern */
#protocolsDetailBackButton.protocols-back-link {
  min-height: 0;
  width: auto;
  padding: 4px 8px 4px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Protokoll-Liste eines Projekts am Handy: Karten statt enger Tabelle
   (Überschriften brachen mitten im Wort um, "PROTOKO/LLNUMME/R"). */
@media (max-width: 640px) {
  .protocols-detail-table-wrapper table,
  .protocols-detail-table-wrapper tbody {
    display: block;
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
  }
  .protocols-detail-table-wrapper thead {
    display: none;
  }
  .protocols-detail-table-wrapper {
    overflow: visible;
    border: none;
    background: transparent;
    box-shadow: none;
  }
  #protocolsDetailTableBody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card, #fff);
  }
  #protocolsDetailTableBody td {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    padding: 0;
    border: none;
    text-align: left;
    min-width: 0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: manual;
  }
  #protocolsDetailTableBody td:nth-child(1),
  #protocolsDetailTableBody td:nth-child(3) {
    white-space: nowrap;
  }
  /* Nummer | Datum */
  #protocolsDetailTableBody td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.8rem;
    color: var(--muted);
  }
  #protocolsDetailTableBody td:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.8rem;
    color: var(--muted);
    text-align: right;
  }
  /* Titel */
  #protocolsDetailTableBody td:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    font-weight: 700;
    font-size: 1rem;
  }
  /* Einträge | Aktionen */
  #protocolsDetailTableBody td:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    font-size: 0.85rem;
    color: var(--muted);
  }
  #protocolsDetailTableBody td:nth-child(4)::before {
    content: "Einträge: ";
  }
  #protocolsDetailTableBody td:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
    text-align: right;
  }
  /* Leermeldung "Noch keine Protokolle" über die ganze Breite */
  #protocolsDetailTableBody td[colspan] {
    grid-column: 1 / -1;
    grid-row: auto;
    font-size: 0.9rem;
  }
  #protocolsDetailTableBody td[colspan]::before,
  #protocolsDetailTableBody td[colspan]::after {
    content: none;
  }
}

/* Homescreen-App: "Rückgängig"-Meldung über der unteren Navigationsleiste */
body.is-standalone-client .undo-toast {
  bottom: calc(64px + env(safe-area-inset-bottom));
}

/* Protokoll-Punkte als Karten, wenn die Seitenleiste fehlt (Handy/App,
   hoch und quer) - die 7-spaltige Tabelle erzwang seitliches Scrollen.
   Spalten: 1 Pos | 2 Anhänge | 3 Text | 4 Zuständig | 5 Fällig | 6 Erledigt | 7 Aktion */
body.no-sidebar-nav #protocolEntriesTables .protocol-entries-group {
  overflow-x: visible;
}
body.no-sidebar-nav #protocolEntriesTables table,
body.no-sidebar-nav #protocolEntriesTables tbody {
  display: block;
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
}
body.no-sidebar-nav #protocolEntriesTables thead {
  display: none;
}
body.no-sidebar-nav #protocolEntriesTables tbody tr {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card, #fff);
}
body.no-sidebar-nav #protocolEntriesTables tbody td {
  display: block;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  padding: 0;
  border: none;
  text-align: left;
  white-space: normal;
}
/* Zeile 1: Pos | Zuständig | Erledigt */
body.no-sidebar-nav #protocolEntriesTables tbody td:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
  font-weight: 700;
}
body.no-sidebar-nav #protocolEntriesTables tbody td:nth-child(4) {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.85rem;
  color: var(--muted);
}
body.no-sidebar-nav #protocolEntriesTables tbody td:nth-child(4):not(:empty)::before {
  content: "Zuständig: ";
}
body.no-sidebar-nav #protocolEntriesTables tbody td:nth-child(6) {
  grid-column: 3;
  grid-row: 1;
}
/* Zeile 2: Text */
body.no-sidebar-nav #protocolEntriesTables tbody td:nth-child(3) {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}
/* Zeile 3: Fällig + Anhänge | Aktionen */
body.no-sidebar-nav #protocolEntriesTables tbody td:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 3;
  font-size: 0.85rem;
  color: var(--muted);
}
body.no-sidebar-nav #protocolEntriesTables tbody td:nth-child(5):not(:empty)::before {
  content: "Fällig: ";
}
body.no-sidebar-nav #protocolEntriesTables tbody td:nth-child(2) {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  font-size: 0.85rem;
}
body.no-sidebar-nav #protocolEntriesTables tbody td:nth-child(7) {
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
}
/* Leermeldung ("Keine Einträge") über die ganze Breite */
body.no-sidebar-nav #protocolEntriesTables tbody td[colspan] {
  grid-column: 1 / -1;
  grid-row: auto;
}
body.no-sidebar-nav #protocolEntriesTables tbody td.protocol-entry-attachments-cell.is-empty {
  visibility: hidden;
}
/* Aktionen in den Karten mit fingergerechter Tippfläche */
body.no-sidebar-nav #protocolEntriesTables .protocol-entry-actions-inline {
  display: flex;
  gap: 6px;
}
body.no-sidebar-nav #protocolEntriesTables .protocol-entry-actions-inline button {
  min-width: 38px;
  min-height: 38px;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
}
body.no-sidebar-nav #protocolEntriesTables .protocol-entry-done-wrap input[type="checkbox"] {
  width: 24px;
  height: 24px;
}
body.no-sidebar-nav #protocolEntriesTables tbody td:nth-child(6) {
  justify-self: end;
}

/* Positionsnummer: fortlaufend vergeben, nur Anzeige */
#protocolEntryNumber[readonly] {
  background: transparent;
  color: var(--muted);
  cursor: default;
}

/* Ansprechpersonen (Adressen + Firmen) als Karten, wenn die Seitenleiste
   fehlt (Handy/App, hoch und quer) - die 7-spaltige Tabelle war ~1250px breit.
   Spalten: 1 Anrede | 2 Titel | 3 Vorname | 4 Nachname | 5 E-Mail | 6 Telefon | 7 Entfernen */
body.no-sidebar-nav .contacts-table {
  overflow: visible;
  border: none;
  background: transparent;
  box-shadow: none;
}
body.no-sidebar-nav .contacts-table table,
body.no-sidebar-nav .contacts-table tbody {
  display: block;
  width: 100%;
  min-width: 0;
}
body.no-sidebar-nav .contacts-table thead {
  display: none;
}
body.no-sidebar-nav .contacts-table tbody tr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card, #fff);
}
body.no-sidebar-nav .contacts-table tbody td {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  width: auto !important;
  padding: 0;
  border: none;
}
body.no-sidebar-nav .contacts-table tbody td input {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
body.no-sidebar-nav .contacts-table tbody td::before {
  font-size: 0.75rem;
  color: var(--muted);
}
body.no-sidebar-nav .contacts-table tbody td:nth-child(1)::before { content: "Anrede"; }
body.no-sidebar-nav .contacts-table tbody td:nth-child(2)::before { content: "Titel"; }
body.no-sidebar-nav .contacts-table tbody td:nth-child(3)::before { content: "Vorname"; }
body.no-sidebar-nav .contacts-table tbody td:nth-child(4)::before { content: "Nachname"; }
body.no-sidebar-nav .contacts-table tbody td:nth-child(5)::before { content: "E-Mail"; }
body.no-sidebar-nav .contacts-table tbody td:nth-child(6)::before { content: "Telefon"; }
body.no-sidebar-nav .contacts-table tbody td:nth-child(5),
body.no-sidebar-nav .contacts-table tbody td:nth-child(6) {
  grid-column: 1 / -1;
}
body.no-sidebar-nav .contacts-table tbody td:nth-child(7) {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: flex-end;
}
body.no-sidebar-nav .contacts-table tbody td:nth-child(7)::before {
  content: none;
}
body.no-sidebar-nav .contacts-table tbody td:nth-child(7) button {
  min-width: 38px;
  min-height: 38px;
}

/* Zähler auf dem Aufgaben-Symbol (Seitenleiste) und dem Hauptseite-Symbol
   der unteren Handy-Leiste - wie beim Chat oben rechts am Symbol. */
.mobile-bottom-nav-item .nav-icon {
  position: relative;
  overflow: visible;
}

.mobile-bottom-nav-item .nav-icon .assignment-notif-badge {
  /* Hebt die "nur für Screenreader"-Regel für Beschriftungen der Leiste
     (.mobile-bottom-nav-item span:not(.nav-icon)) für den Zähler wieder auf. */
  position: absolute;
  top: -6px;
  right: -12px;
  width: auto;
  min-width: 16px;
  height: 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  font-size: 10px;
  padding: 0 4px;
}

/* Neuigkeiten-Karte auf dem Handy-Startbildschirm */
.mobile-notices-card {
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  padding: 10px 10px 6px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 14px;
  background: rgba(239, 68, 68, 0.08);
  color: #f7f7f5;
}

.mobile-notices-card.hidden {
  display: none;
}

.mobile-notices-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px 6px;
  font-size: 13px;
  font-weight: 700;
}

.mobile-notices-head .ghost {
  min-height: 0;
  padding: 4px 10px;
  font-size: 12px;
}

.mobile-notices-card .user-notices-list {
  max-height: 40vh;
}

.mobile-notices-card .user-notice {
  color: inherit;
}

.protocol-section-toggle-icon.hidden {
  display: none;
}

/* ===== Kostenanalyse am Handy (body.no-sidebar-nav) =====
   Statt 17 Spalten nur KGR, Bezeichnung und EINE wählbare Betragsspalte
   (#avaKkMobileColumn, data-kk-mobile-col = nth-child der Spalte). Alle
   Werte einer Position zeigt das Detailblatt (#avaKkMobileDetailDialog).
   Am Computer ändert sich nichts. */
.ava-kk-mobile-column {
  display: none;
}

body.no-sidebar-nav .ava-kk-mobile-column {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

body.no-sidebar-nav .ava-kk-mobile-column select {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
}

body.no-sidebar-nav #avaKostenanalyseDetail .ava-kk-row {
  /* feste Breiten, sonst richtet sich jede Zeile nach ihrem eigenen Inhalt
     und die Spalten stehen nicht untereinander */
  grid-template-columns: 5.2em minmax(0, 1fr) 8.2em !important;
  width: 100%;
  min-width: 0;
  font-size: 0.8rem;
}

body.no-sidebar-nav #avaKostenanalyseDetail .ava-kk-row > *:nth-child(1),
body.no-sidebar-nav #avaKostenanalyseDetail .ava-kk-row > *:nth-child(2) {
  position: static;
}

body.no-sidebar-nav #avaKostenanalyseDetail .ava-kk-row > *:nth-child(1),
body.no-sidebar-nav #avaKostenanalyseDetail .ava-kk-row > *:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.no-sidebar-nav #avaKostenanalyseDetail .ava-kk-row > * {
  padding-left: 6px;
  padding-right: 6px;
}

/* Betragsspalte rechtsbündig, Eingabefelder nur anzeigen (Bearbeiten am
   Computer) - Antippen öffnet stattdessen das Detailblatt. */
body.no-sidebar-nav #avaKostenanalyseDetail .ava-kk-row > *:nth-child(n+3) {
  text-align: right;
  justify-content: flex-end;
  white-space: nowrap;
  border-right: none;
}

body.no-sidebar-nav #avaKostenanalyseDetailBody .ava-kk-row input {
  pointer-events: none;
  border: none;
  background: transparent;
  box-shadow: none;
  text-align: right;
  width: 100%;
  color: inherit;
  font: inherit;
}

body.no-sidebar-nav #avaKostenanalyseDetail .ava-kk-tree-wrapper .ava-tree-scroll {
  overflow-x: hidden;
}

body.no-sidebar-nav #avaKkPanelResizer,
body.no-sidebar-nav #avaKkKalkPanel,
body.no-sidebar-nav #avaKostenanalyseDetail .ava-col-resizer {
  display: none;
}

body.no-sidebar-nav #avaKostenanalyseDetail .ava-kk-oz {
  cursor: pointer;
}

body.no-sidebar-nav #avaKostenanalyseDetail[data-kk-mobile-col="3"] .ava-kk-row > :nth-child(n+3):not(:nth-child(3)) {
  display: none;
}

body.no-sidebar-nav #avaKostenanalyseDetail[data-kk-mobile-col="4"] .ava-kk-row > :nth-child(n+3):not(:nth-child(4)) {
  display: none;
}

body.no-sidebar-nav #avaKostenanalyseDetail[data-kk-mobile-col="5"] .ava-kk-row > :nth-child(n+3):not(:nth-child(5)) {
  display: none;
}

body.no-sidebar-nav #avaKostenanalyseDetail[data-kk-mobile-col="6"] .ava-kk-row > :nth-child(n+3):not(:nth-child(6)) {
  display: none;
}

body.no-sidebar-nav #avaKostenanalyseDetail[data-kk-mobile-col="7"] .ava-kk-row > :nth-child(n+3):not(:nth-child(7)) {
  display: none;
}

body.no-sidebar-nav #avaKostenanalyseDetail[data-kk-mobile-col="8"] .ava-kk-row > :nth-child(n+3):not(:nth-child(8)) {
  display: none;
}

body.no-sidebar-nav #avaKostenanalyseDetail[data-kk-mobile-col="9"] .ava-kk-row > :nth-child(n+3):not(:nth-child(9)) {
  display: none;
}

body.no-sidebar-nav #avaKostenanalyseDetail[data-kk-mobile-col="10"] .ava-kk-row > :nth-child(n+3):not(:nth-child(10)) {
  display: none;
}

body.no-sidebar-nav #avaKostenanalyseDetail[data-kk-mobile-col="11"] .ava-kk-row > :nth-child(n+3):not(:nth-child(11)) {
  display: none;
}

body.no-sidebar-nav #avaKostenanalyseDetail[data-kk-mobile-col="12"] .ava-kk-row > :nth-child(n+3):not(:nth-child(12)) {
  display: none;
}

body.no-sidebar-nav #avaKostenanalyseDetail[data-kk-mobile-col="13"] .ava-kk-row > :nth-child(n+3):not(:nth-child(13)) {
  display: none;
}

body.no-sidebar-nav #avaKostenanalyseDetail[data-kk-mobile-col="14"] .ava-kk-row > :nth-child(n+3):not(:nth-child(14)) {
  display: none;
}

body.no-sidebar-nav #avaKostenanalyseDetail[data-kk-mobile-col="15"] .ava-kk-row > :nth-child(n+3):not(:nth-child(15)) {
  display: none;
}

body.no-sidebar-nav #avaKostenanalyseDetail[data-kk-mobile-col="16"] .ava-kk-row > :nth-child(n+3):not(:nth-child(16)) {
  display: none;
}

body.no-sidebar-nav #avaKostenanalyseDetail[data-kk-mobile-col="17"] .ava-kk-row > :nth-child(n+3):not(:nth-child(17)) {
  display: none;
}

/* Detailblatt */
.ava-kk-mobile-detail-dialog .dialog-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ava-kk-mobile-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.ava-kk-mobile-values dt,
.ava-kk-mobile-values dd {
  margin: 0;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.ava-kk-mobile-values dt {
  color: var(--muted);
}

.ava-kk-mobile-values dd {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ava-kk-mobile-values dt:nth-last-of-type(1),
.ava-kk-mobile-values dd:nth-last-of-type(1) {
  border-bottom: none;
}

.ava-kk-mobile-values .is-selected-column {
  color: var(--accent-strong, var(--accent));
}

.ava-kk-mobile-kalk h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.ava-kk-mobile-kalk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.ava-kk-mobile-kalk-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.ava-kk-mobile-kalk-list li:last-child {
  border-bottom: none;
}

.ava-kk-mobile-kalk-list li.is-inactive {
  opacity: 0.55;
}

.ava-kk-mobile-kalk-list .kalk-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ava-kk-mobile-kalk-list .kalk-sum {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ava-kk-mobile-kalk-list .kalk-calc {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.8rem;
}

.ava-kk-mobile-kalk-empty {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ===== Protokollpunkt-Fenster (modern) =====
   Beschreibung zuerst, Fälligkeit/Los nebeneinander, Zuständig als
   Auswahlzeile, Bilder als Ablagefläche, Aktionen fix am unteren Rand. */
/* Karte = Formular (das <dialog> selbst füllt den Bildschirm, siehe .dialog) */
.protocol-entry-dialog > form {
  width: min(680px, 96vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.protocol-entry-dialog .dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.protocol-entry-dialog-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.protocol-entry-number-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-strong, var(--accent));
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.protocol-entry-number-chip[hidden],
.protocol-entry-number-hidden {
  display: none !important;
}

.protocol-entry-dialog .protocol-entry-form {
  gap: 18px;
}

.protocol-entry-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.protocol-entry-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: uppercase;
}

.protocol-entry-dialog .protocol-entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  flex-direction: initial;
}

.protocol-entry-dialog .protocol-entry-row input,
.protocol-entry-dialog .protocol-entry-row select {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg, rgba(255, 255, 255, 0.06));
  color: var(--text);
  font: inherit;
}

/* Editor: Werkzeugleiste oben in derselben Umrandung */
.protocol-entry-editor-box {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--input-bg, rgba(255, 255, 255, 0.04));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.protocol-entry-editor-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.protocol-entry-dialog .protocol-entry-toolbar {
  gap: 2px;
  padding: 4px 6px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.protocol-entry-dialog .protocol-entry-toolbar button {
  min-width: 34px;
  min-height: 32px;
  padding: 4px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
}

.protocol-entry-dialog .protocol-entry-toolbar button:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.protocol-entry-dialog .protocol-entry-toolbar svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.protocol-entry-toolbar-sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--border);
}

.protocol-entry-dialog .protocol-entry-rich-editor {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-height: 7rem;
}

.protocol-entry-dialog .protocol-entry-rich-editor .rich-input {
  min-height: 6rem;
  max-height: 16rem;
  padding: 12px 14px;
  border: none;
  outline: none;
  background: transparent;
  box-shadow: none;
}

/* Zuständig: Auswahlzeile wie in Einstellungs-Apps */
.protocol-entry-picker-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  /* !important: sonst greift im dunklen Modus die Standard-Knopffarbe */
  background: color-mix(in srgb, var(--text) 4%, transparent) !important;
  color: var(--text) !important;
  text-align: left;
  font: inherit;
  box-shadow: none;
  cursor: pointer;
}

.protocol-entry-picker-button:hover {
  border-color: var(--accent);
}

.protocol-entry-picker-icon {
  flex: none;
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-strong, var(--accent));
}

.protocol-entry-picker-icon svg,
.protocol-entry-picker-chevron {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.protocol-entry-dialog .protocol-entry-responsible-summary {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.92rem;
  color: var(--text);
}

.protocol-entry-dialog .protocol-entry-responsible-summary.is-empty {
  color: var(--muted);
}

.protocol-entry-picker-chevron {
  flex: none;
  color: var(--muted);
}

/* Bilder: gesamte Fläche ist Ablage und Auswahl-Knopf zugleich */
.protocol-entry-dialog .protocol-entry-attachment-controls {
  display: block;
}

.protocol-entry-dialog .protocol-entry-attachment-dropzone {
  min-height: 0;
  padding: 0;
  border-radius: 12px;
  background: transparent;
}

.protocol-entry-attach-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  background: transparent !important;
  box-shadow: none;
  color: var(--muted) !important;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.protocol-entry-attach-link:hover {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
}

.protocol-entry-attach-link u {
  color: var(--accent-strong, var(--accent));
  text-decoration: none;
  font-weight: 600;
}

.protocol-entry-attach-link svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Aktionen fix unten: ✕ Abbrechen / ✓ Speichern */
.protocol-entry-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: inherit;
}

.protocol-entry-shortcut-hint {
  margin-right: auto;
  font-size: 12px;
  color: var(--muted);
}

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

.btn-with-icon svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: none) {
  .protocol-entry-shortcut-hint {
    display: none;
  }
}

body.no-sidebar-nav .protocol-entry-dialog .protocol-entry-row {
  grid-template-columns: 1fr;
}

body.no-sidebar-nav .protocol-entry-dialog-actions .btn-with-icon {
  flex: 1 1 0;
}

.attach-text-touch {
  display: none;
}

@media (hover: none) {
  .attach-text-pointer {
    display: none;
  }

  .attach-text-touch {
    display: inline;
  }
}

.protocol-entry-shortcut-hint.is-success {
  color: var(--accent-strong, var(--accent));
  font-weight: 600;
}

@media (hover: none) {
  .protocol-entry-shortcut-hint.is-success {
    display: inline;
  }
}

/* Schwebend (Computer): Größe per Ziehen an der Ecke, Höhe nach Inhalt */
.protocol-entry-dialog.ava-floating-dialog > form {
  min-width: 420px;
  max-height: 92vh;
  resize: both;
}

body.no-sidebar-nav .protocol-entry-dialog-actions {
  flex-wrap: wrap;
}

body.no-sidebar-nav .protocol-entry-shortcut-hint.is-success {
  flex-basis: 100%;
  margin-right: 0;
  text-align: center;
}

/* ===================== Aufgaben NEU (modernes Kanban) ===================== */
.nav-new-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-strong, var(--accent));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

#kanbanNewShell .kb-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: calc(100dvh - 96px);
  min-height: 420px;
}

.kb-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.kb-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  max-width: 380px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-solid);
}

.kb-search svg,
.kb-card svg,
.kb-drawer svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kb-search svg {
  color: var(--muted);
}

.kb-search input {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  color: var(--text);
  font: inherit;
  padding: 0;
}

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

.kb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-solid) !important;
  color: var(--text) !important;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: none;
}

.kb-chip.is-active {
  background: var(--text) !important;
  color: var(--panel-solid) !important;
  border-color: var(--text);
}

.kb-chip-count:empty {
  display: none;
}

.kb-chip-count {
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.kb-toggles {
  display: flex;
  gap: 14px;
  margin-left: auto;
}

.kb-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.kb-switch input {
  appearance: none;
  width: 34px;
  height: 20px;
  margin: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 18%, transparent);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}

.kb-switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.kb-switch input:checked {
  background: var(--accent);
}

.kb-switch input:checked::after {
  transform: translateX(14px);
}

.kb-column-jump {
  display: none;
}

.kb-board {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
}

.kb-column {
  flex: 0 0 292px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid var(--border);
  border-top: 3px solid var(--kb-accent, color-mix(in srgb, var(--text) 20%, transparent));
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.kb-column.drag-over {
  box-shadow: 0 0 0 2px var(--accent);
}

.kb-column-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 8px;
}

.kb-column-head h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.kb-count-overdue {
  background: #dc2626;
  color: #fff;
}

.kb-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  margin: 0 4px;
  background: #94a3b8;
}

.kb-status-in-verteilung { background: #3b82f6; }
.kb-status-warten { background: #f59e0b; }
.kb-status-verrechnen { background: #8b5cf6; }
.kb-status-abgeschlossen { background: #22c55e; }
.kb-status-besprechung { background: #06b6d4; }

.kb-column-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 10px 12px;
}

.kb-empty {
  margin: 8px 4px;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.kb-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-solid);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.kb-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.kb-card.is-open {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.kb-card.is-dragging {
  opacity: 0.45;
}

.kb-card-task {
  border-style: dashed;
  background: color-mix(in srgb, var(--panel-solid) 88%, var(--accent) 5%);
}

.kb-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 16px;
}

.kb-card-number {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.kb-card-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-strong, var(--accent));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kb-card-kind svg {
  width: 13px;
  height: 13px;
}

.kb-card-kind + .kb-card-number {
  margin-left: auto;
}

.kb-change-dot {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: #ef4444;
}

.kb-card-title {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kb-card-sub {
  font-size: 0.8rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  min-height: 24px;
}

.kb-card-spacer {
  flex: 1;
}

.kb-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--muted);
}

.kb-meta-item svg {
  width: 14px;
  height: 14px;
}

.kb-due {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--muted);
}

.kb-due svg {
  width: 12px;
  height: 12px;
  /* Linien-Stil direkt hier, nicht nur über die Kanban-Umgebung - sonst im
     Protokoll (Fälligkeits-Chip der Punkte) als gefülltes Quadrat */
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kb-due-overdue { background: rgba(220, 38, 38, 0.14); color: #dc2626; }
.kb-due-today { background: rgba(234, 88, 12, 0.16); color: #ea580c; }
.kb-due-soon { background: rgba(217, 119, 6, 0.14); color: #b45309; }

.kb-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--kb-avatar, #64748b);
  color: var(--kb-avatar-text, #fff);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.kb-avatar-column {
  width: 26px;
  height: 26px;
}

.kb-avatar-empty {
  background: color-mix(in srgb, var(--text) 12%, transparent);
  color: var(--muted);
}

.kb-avatar-empty svg {
  width: 13px;
  height: 13px;
}

/* ----- Detailfenster rechts ----- */
.kb-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 19990;
  background: rgba(15, 23, 42, 0.18);
}

.kb-drawer-backdrop[hidden],
.kb-drawer[hidden] {
  display: none;
}

.kb-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 19995;
  width: min(460px, 100vw);
  display: flex;
  flex-direction: column;
  background: linear-gradient(var(--panel-solid), var(--panel-solid)), var(--bg);
  color: var(--text);
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 40px rgba(15, 23, 42, 0.18);
  animation: kb-drawer-in 0.18s ease-out;
  padding-top: env(safe-area-inset-top);
}

@keyframes kb-drawer-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.kb-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.kb-drawer-head > div {
  flex: 1;
  min-width: 0;
}

.kb-drawer-number {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-strong, var(--accent));
}

.kb-drawer-head h2 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
}

.kb-drawer-customer {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.kb-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent !important;
  color: var(--text) !important;
  box-shadow: none;
}

.kb-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.kb-props {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 10px 12px;
  margin: 0;
}

.kb-props dt {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.kb-props dd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
}

.kb-props select,
.kb-props input[type="date"] {
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-size: 0.9rem;
  max-width: 100%;
}

.kb-props select {
  width: 100%;
}

.kb-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.kb-section-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.kb-section-count {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--muted);
  font-size: 11px;
}

.kb-text-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent !important;
  color: var(--accent-strong, var(--accent)) !important;
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: none;
}

.kb-text-button:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

.kb-task-list,
.kb-note-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kb-task-list li,
.kb-note-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.kb-task-list li > div,
.kb-note-list li > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.88rem;
}

.kb-note-list p {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.kb-note-list li.is-done p {
  text-decoration: line-through;
  color: var(--muted);
}

.kb-note-check input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

.kb-muted {
  color: var(--muted);
  font-size: 0.8rem;
}

.kb-empty-line {
  margin: 0;
}

.kb-note-compose {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 10px;
}

.kb-note-compose textarea {
  flex: 1;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.kb-drawer-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}

/* ----- Handy: eine Spalte pro Bildschirmbreite, wischen; Sprungleiste ----- */
body.no-sidebar-nav #kanbanNewShell .kb-page {
  height: calc(100dvh - 150px);
  gap: 8px;
}

body.no-sidebar-nav .kb-toggles {
  margin-left: 0;
}

body.no-sidebar-nav .kb-search {
  max-width: none;
}

body.no-sidebar-nav .kb-search input {
  font-size: 16px;
}

body.no-sidebar-nav .kb-column-jump {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

body.no-sidebar-nav .kb-column-jump button {
  flex: none;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-solid) !important;
  color: var(--text) !important;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: none;
}

body.no-sidebar-nav .kb-board {
  scroll-snap-type: x mandatory;
  gap: 10px;
}

body.no-sidebar-nav .kb-column {
  flex: 0 0 calc(100% - 28px);
  scroll-snap-align: start;
}

body.no-sidebar-nav .kb-drawer {
  width: 100vw;
  border-left: none;
}

.kb-props dd.kb-prop-due {
  flex-wrap: wrap;
}

.kb-column-jump,
.kb-toolbar {
  flex: none;
}

body.no-sidebar-nav .kb-toolbar {
  gap: 8px;
}

body.no-sidebar-nav .kb-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  width: 100%;
  scrollbar-width: none;
}

body.no-sidebar-nav .kb-chip {
  flex: none;
}

body.no-sidebar-nav .kb-column-jump {
  min-height: 32px;
  align-items: center;
}

/* Ziehen mit dem Finger (Aufgaben): abgehobene Karte folgt dem Finger */
.kb-card {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.kb-drag-ghost {
  position: fixed;
  z-index: 20050;
  margin: 0;
  pointer-events: none;
  transform: rotate(2deg) scale(1.03);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
  border-color: var(--accent);
  opacity: 0.96;
}

.kb-board.is-dragging .kb-column.drag-over {
  box-shadow: 0 0 0 2px var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ===== Dashboard: Meine Aufgaben (Kennzahlen + nach Termin) ===== */
.home-my-work .card-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.mw-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 18px;
}

.mw-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid) !important;
  color: var(--text) !important;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
  border-left: 4px solid var(--mw-tone, var(--border));
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.mw-stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.mw-stat-danger { --mw-tone: #dc2626; }
.mw-stat-warn { --mw-tone: #d97706; }
.mw-stat-info { --mw-tone: #3b82f6; }
.mw-stat-accent { --mw-tone: var(--accent); }

.mw-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.mw-stat strong {
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--mw-tone, var(--text));
}

.mw-stat.is-zero strong {
  color: var(--muted);
}

.mw-stat-hint {
  font-size: 12px;
  color: var(--muted);
}

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

.mw-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 4px;
  border: none;
  background: transparent !important;
  color: var(--text) !important;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
}

.mw-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.mw-group-label {
  font-weight: 700;
  font-size: 0.95rem;
}

.mw-chevron {
  width: 18px;
  height: 18px;
  margin-left: auto;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.mw-group.is-collapsed .mw-chevron {
  transform: rotate(-90deg);
}

.mw-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding-top: 6px;
}

.mw-empty {
  margin: 8px 0;
}

@media (max-width: 900px) {
  .mw-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== Dashboard: Offene Angebote (aufklappbare Kachel) ===== */
.home-offers-modern {
  padding: 0 !important;
  overflow: hidden;
}

.ho-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: none;
  border-left: 4px solid #8b5cf6;
  border-radius: 0;
  background: transparent !important;
  color: var(--text) !important;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}

.home-offers-modern.is-empty .ho-toggle {
  border-left-color: var(--border);
  cursor: default;
}

.ho-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.14);
  color: #8b5cf6;
}

.ho-icon svg,
.ho-chevron,
.ho-item svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ho-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.ho-sum {
  font-size: 0.9rem;
  color: var(--muted);
}

.ho-count {
  font-size: 1.9rem;
  line-height: 1;
  color: #8b5cf6;
}

.home-offers-modern.is-empty .ho-count {
  color: var(--muted);
}

.ho-chevron {
  color: var(--muted);
  transition: transform 0.15s ease;
}

.home-offers-modern.is-open .ho-chevron {
  transform: rotate(180deg);
}

.ho-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 16px 16px;
  border-top: 1px solid var(--border);
}

.ho-list[hidden] {
  display: none;
}

.ho-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-solid);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.ho-list .ho-item:first-child {
  margin-top: 12px;
}

.ho-item:hover,
.ho-item:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  border-color: color-mix(in srgb, #8b5cf6 45%, var(--border));
  outline: none;
}

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

.ho-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ho-number {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.ho-chip {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.ho-chip-yes { background: rgba(34, 197, 94, 0.14); color: #16a34a; }
.ho-chip-no { background: rgba(148, 163, 184, 0.2); color: var(--muted); }

.ho-subject {
  font-weight: 600;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ho-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}

.ho-amount {
  font-variant-numeric: tabular-nums;
}

.ho-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ho-item-actions .kb-icon-button {
  width: 32px;
  height: 32px;
}

@media (max-width: 700px) {
  .ho-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ho-item-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* Überfällige Rechnungen: gleiche Kachel wie Angebote, in Rot */
.home-invoices-modern .ho-toggle {
  border-left-color: #dc2626;
}

.home-invoices-modern .ho-icon {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.home-invoices-modern .ho-count {
  color: #dc2626;
}

.home-invoices-modern .ho-item:hover,
.home-invoices-modern .ho-item:focus-visible {
  border-color: color-mix(in srgb, #dc2626 45%, var(--border));
}

.ho-chip-warn {
  background: rgba(217, 119, 6, 0.15);
  color: #b45309;
}

.ho-overdue {
  color: #dc2626;
  font-weight: 600;
}

.ho-amount-open {
  color: #dc2626;
}

/* ===== Fly-over-Fenster Zahlung / Mahnung ===== */
#billingPaymentDialog > form,
#billingReminderDialog > form {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#billingPaymentDialog > form {
  width: min(620px, 96vw);
}

#billingReminderDialog > form {
  width: min(760px, 96vw);
}

#billingPaymentDialog .dialog-body,
#billingReminderDialog .dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.flyover-subtitle {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.flyover-subtitle:empty {
  display: none;
}

.flyover-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.flyover-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.flyover-field-wide {
  grid-column: 1 / -1;
}

.flyover-field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: uppercase;
}

.flyover-field input {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
}

.flyover-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

.flyover-spacer {
  flex: 1 1 auto;
}

body.no-sidebar-nav .flyover-fields {
  grid-template-columns: 1fr;
}

body.no-sidebar-nav .flyover-actions {
  flex-wrap: wrap;
}

body.no-sidebar-nav .flyover-actions .btn-with-icon {
  flex: 1 1 0;
}

/* Kachel als aktiver Filter */
.mw-stat.is-active {
  background: color-mix(in srgb, var(--mw-tone, var(--accent)) 10%, var(--panel-solid)) !important;
  border-color: var(--mw-tone, var(--accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mw-tone, var(--accent)) 35%, transparent);
}

.mw-filter-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 8px;
}

.mw-filter-clear {
  margin-left: auto;
}

.mw-note-list li {
  cursor: pointer;
}

.mw-note-list li:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.mw-note-project {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.mw-notice-list {
  max-height: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
}

.mw-filter-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}

/* ===== Dashboard: eigene Überstunden/Resturlaub als Kacheln + Team ===== */
.home-dashboard-summary.hs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hs-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--hs-tone, var(--border));
  border-radius: 14px;
  background: var(--panel-solid);
  min-width: 0;
}

.hs-tile strong {
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--hs-tone, var(--text));
}

.hs-tone-ok { --hs-tone: #16a34a; }
.hs-tone-danger { --hs-tone: #dc2626; }
.hs-tone-neutral { --hs-tone: #94a3b8; }
.hs-tone-neutral strong { color: var(--text); }
.hs-tone-vacation { --hs-tone: #0ea5e9; }

.hs-of {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
}

.hs-meta {
  font-size: 12px;
  color: var(--muted);
}

.hs-bar {
  display: block;
  height: 8px;
  margin: 6px 0 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  overflow: hidden;
}

.hs-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #0ea5e9;
}

.home-team-modern .ho-toggle {
  border-left-color: #0ea5e9;
}

.home-team-modern .ho-icon {
  background: rgba(14, 165, 233, 0.14);
  color: #0ea5e9;
}

.home-team-modern .ho-count {
  color: #0ea5e9;
}

.ht-row {
  display: grid;
  /* feste Spalten, damit Chips und Balken bei allen Personen bündig stehen */
  grid-template-columns: 30px minmax(140px, 220px) 150px minmax(160px, 1fr) 140px;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-solid);
}

.ho-list .ht-row:first-child {
  margin-top: 12px;
}

.ht-avatar {
  width: 30px;
  height: 30px;
  font-size: 11px;
}

.ht-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ht-vacation {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ht-vacation .hs-bar {
  flex: 1 1 auto;
  margin: 0;
}

.ht-days {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ht-renew {
  white-space: nowrap;
}

.ho-chip-danger {
  background: rgba(220, 38, 38, 0.14);
  color: #dc2626;
}

@media (max-width: 900px) {
  .home-dashboard-summary.hs-grid {
    grid-template-columns: 1fr;
  }

  .ht-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .ht-vacation,
  .ht-renew {
    grid-column: 2 / -1;
  }
}

/* ===== Moderne Projektübersicht (Kennzahlen + Liste/Kacheln) ===== */
.pl-modern {
  margin-top: 4px;
}

.pl-stats {
  margin-top: 4px;
}

.pl-stat-sum {
  cursor: default;
}

.pl-stat-sum:hover {
  transform: none;
  box-shadow: none;
}

.pl-stat-sum strong {
  font-size: 1.45rem;
}

.pl-listhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 10px;
}

.pl-listhead-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pl-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.pl-filter-clear {
  background: transparent !important;
  border: none;
  box-shadow: none;
  color: var(--accent) !important;
  font-size: 13px;
  padding: 2px 6px;
  cursor: pointer;
}

.pl-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-solid);
}

.pl-view-toggle button {
  background: transparent !important;
  color: var(--muted) !important;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 6px 12px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.pl-view-toggle button.is-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
  color: var(--accent) !important;
}

.pl-items.pl-view-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pl-items.pl-view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.pl-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 44px 10px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.pl-item:hover,
.pl-item:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  outline: none;
}

.pl-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid));
  display: flex;
  align-items: center;
  justify-content: center;
}

.pl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pl-thumb-empty {
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--accent) 70%, var(--muted));
  letter-spacing: 0.02em;
}

.pl-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pl-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.pl-number {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.pl-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-customer {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-thumb-empty svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Liste: Status, Termin, Summe, Verantwortlich als ausgerichtete Spalten */
.pl-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pl-slot {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.pl-slot-status { width: 130px; }
.pl-slot-due { width: 110px; }
.pl-slot-sum { width: 120px; justify-content: flex-end; }
.pl-slot-avatar { width: 30px; justify-content: center; }

.pl-status {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.pl-status-done {
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
}

.pl-sum {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pl-more {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.pl-more:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  color: var(--text) !important;
}

/* Kachelansicht: großes Projektbild oben */
.pl-view-grid .pl-item {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.pl-view-grid .pl-thumb {
  width: 100%;
  height: 150px;
  border-radius: 0;
}


.pl-view-grid .pl-main {
  padding: 12px 14px 4px;
}

.pl-view-grid .pl-meta {
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 6px 14px 14px;
  margin-top: auto;
}

.pl-view-grid .pl-slot {
  width: auto;
}

.pl-view-grid .pl-slot:empty {
  display: none;
}

.pl-view-grid .pl-slot-sum {
  margin-left: auto;
}

.pl-view-grid .pl-thumb-empty svg {
  width: 40px;
  height: 40px;
}

.pl-view-grid .pl-top {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.pl-view-grid .pl-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pl-view-grid .pl-more {
  top: 8px;
  transform: none;
  background: rgba(15, 23, 42, 0.45) !important;
  color: #fff !important;
}

.pl-empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 14px;
}

@media (max-width: 1100px) {
  .pl-view-list .pl-item {
    flex-wrap: wrap;
  }
  .pl-view-list .pl-main {
    flex-basis: calc(100% - 90px);
  }
  .pl-view-list .pl-meta {
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding-left: 78px;
  }
  .pl-view-list .pl-slot { width: auto; }
  .pl-view-list .pl-slot:empty { display: none; }
  .pl-view-list .pl-slot-sum { margin-left: auto; }
}

@media (max-width: 760px) {
  .pl-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pl-view-list .pl-meta {
    padding-left: 62px;
  }
  .pl-item {
    gap: 10px;
  }
  .pl-thumb {
    width: 52px;
    height: 42px;
  }
}

.pl-view-grid .pl-slot-sum:empty + .pl-slot-avatar {
  margin-left: auto;
}

@media (max-width: 1100px) {
  .pl-view-list .pl-slot-sum:empty + .pl-slot-avatar {
    margin-left: auto;
  }
}

/* ===== Moderne Angebots- und Belegliste ===== */
.mw-stat-success { --mw-tone: #16a34a; }

.pl-status-no {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.pl-status-warn {
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
}

.pl-slot-date {
  width: 88px;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pl-slot-action { width: 30px; justify-content: center; }

.pl-slot-labeled {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  line-height: 1.2;
}

.pl-slot-labeled small {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.pl-icon-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none;
  cursor: pointer;
}

.pl-icon-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  color: var(--text) !important;
}

.pl-icon-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.pl-thumb-btn {
  position: relative;
  padding: 0;
  border: none;
  box-shadow: none;
  cursor: pointer;
  overflow: visible;
}

.pl-thumb-btn:hover {
  background: color-mix(in srgb, var(--accent) 22%, var(--panel-solid)) !important;
}

.pl-thumb-muted {
  background: color-mix(in srgb, var(--muted) 10%, var(--panel-solid));
}

.pl-thumb-muted .pl-thumb-empty {
  color: var(--muted);
  opacity: 0.6;
}

.pl-thumb-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.pl-item-nicht_erhalten .pl-title,
.pl-item-billed .pl-title {
  color: var(--muted);
}

@media (max-width: 1100px) {
  .pl-view-list .pl-slot-date { width: auto; }
  .pl-view-list .pl-slot-labeled {
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
  }
  .pl-view-list .pl-slot-labeled + .pl-slot-labeled {
    margin-left: 0;
  }
}

/* ===== Moderne Rechnungsliste (Abrechnung) ===== */
.pl-status-muted {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted);
}

.bl-slot-status {
  width: 150px;
  gap: 8px;
}

.bl-slot-due {
  width: 118px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.pl-check {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.pl-check input {
  width: 17px;
  height: 17px;
  margin: 0;
  cursor: pointer;
  accent-color: #16a34a;
}

.bl-open .pl-sum {
  color: #dc2626;
}

.pl-rem-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 1px 8px;
  border: none;
  border-radius: 999px;
  background: rgba(217, 119, 6, 0.14) !important;
  color: #b45309 !important;
  box-shadow: none;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.pl-rem-btn.is-open {
  background: rgba(217, 119, 6, 0.24) !important;
}

.bl-entry {
  display: flex;
  flex-direction: column;
}

.bl-reminders {
  margin: -6px 12px 0 88px;
  padding: 14px 14px 10px;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: color-mix(in srgb, var(--accent) 4%, var(--panel-solid));
}

.pl-item-draft {
  border-style: dashed;
}

@media (max-width: 1100px) {
  .pl-view-list .bl-slot-status,
  .pl-view-list .bl-slot-due { width: auto; }
  .bl-reminders { margin-left: 12px; }
}

/* ===== Moderne Protokoll-Übersicht ===== */
.pr-slot-points {
  width: 190px;
  gap: 6px;
  flex-wrap: wrap;
}

.pr-slot-actions {
  gap: 2px;
}

.pr-slot-actions .pl-icon-btn {
  font-size: 15px;
}

.pl-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pl-icon-btn.pr-delete:not(:disabled):hover {
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.1) !important;
}

#protocolsDetailModern {
  margin-top: 12px;
}

@media (max-width: 1100px) {
  .pl-view-list .pr-slot-points { width: auto; }
  .pl-view-list .pr-slot-actions { margin-left: auto; }
}

/* ===== Kompakte Filterleiste (Projekte, Angebote, Belege, Abrechnung) ===== */
header.hero:has(.pl-toolbar) {
  padding: 10px 12px;
}

.pl-toolbar {
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: flex-start;
}

.pl-toolbar > .input-row {
  margin: 0;
  width: auto;
}

.pl-toolbar .pl-primary {
  order: 3;
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 14px;
  white-space: nowrap;
}

.pl-toolbar .pl-primary::before {
  content: "+";
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

.pl-toolbar .pl-search {
  order: 1;
  flex: 1 1 320px;
  min-width: 0;
  max-width: 520px;
}

.pl-toolbar .pl-search input[type="text"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  line-height: normal !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--panel-solid) !important;
  padding-right: 34px !important;
  font-size: 14px;
  box-shadow: none;
}

.pl-toolbar .pl-search input[type="text"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}

.pl-toolbar .pl-chip {
  order: 2;
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-solid);
  gap: 6px;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.pl-toolbar .pl-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.pl-toolbar .pl-chip select {
  appearance: none;
  -webkit-appearance: none;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 18px 0 0 !important;
  margin: 0;
  height: 38px;
  min-width: 0;
  max-width: 190px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0 center !important;
  background-size: 14px !important;
}

.pl-toolbar .pl-chip select:focus {
  outline: none;
}

.pl-toolbar .pl-chip-icon {
  display: inline-flex;
  color: var(--muted);
}

.pl-toolbar .pl-chip-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.pl-toolbar .pl-chip-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--muted);
  opacity: 0.6;
}

.pl-toolbar .pl-chip.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid));
}

.pl-toolbar .pl-chip.is-active select,
.pl-toolbar .pl-chip.is-active .pl-chip-icon {
  color: var(--accent);
}

.pl-toolbar .pl-chip.is-active .pl-chip-dot {
  background: var(--accent);
  opacity: 1;
}

.pl-toolbar .pl-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 18%, transparent) !important;
  color: var(--text) !important;
  box-shadow: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}

.pl-toolbar .pl-clear.hidden {
  display: none;
}

.pl-toolbar .pl-clear:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

.pl-toolbar .pl-search .pl-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 900px) {
  .pl-toolbar {
    flex-wrap: wrap;
  }
  .pl-toolbar .pl-search {
    flex: 1 1 100%;
    max-width: none;
  }
  .pl-toolbar .pl-chip {
    flex: 1 1 0;
    min-width: 0;
  }
  .pl-toolbar .pl-chip select {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
  }
  .pl-toolbar .pl-primary {
    order: 0;
    margin-left: 0;
    flex: 1 1 100%;
    justify-content: center;
  }
}

#projectsShell .pl-chip #projectStatusFilter,
#projectsShell .pl-chip #projectResponsibleFilter {
  min-width: 0;
  max-width: 230px;
  height: 38px;
  line-height: normal;
  border-radius: 0;
}

.pl-toolbar > .pl-chip,
.pl-toolbar > .pl-search {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
}

@media (max-width: 900px) {
  #projectsShell .pl-chip #projectStatusFilter,
  #projectsShell .pl-chip #projectResponsibleFilter {
    max-width: none;
  }
}

/* Abrechnung: Datumsbereich als Chip, rechte Aktionsgruppe */
.pl-toolbar .pl-date-chip {
  order: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 40px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-solid);
  margin: 0;
}

.pl-toolbar .pl-date-chip.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid));
}

.pl-toolbar .pl-date-chip .billing-date-filters {
  gap: 4px;
}

.pl-toolbar .pl-date-chip .billing-date-filters label {
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}

.pl-toolbar .pl-date-chip .billing-date-input {
  border: none;
  background: transparent;
  min-width: 0;
  width: 128px;
  padding: 4px 22px 4px 2px;
  font-size: 13px;
}

.pl-toolbar .pl-date-chip .billing-date-input:focus {
  outline: none;
}

.pl-toolbar .pl-push-right {
  margin-left: auto;
}

.pl-toolbar .pl-tool {
  order: 3;
  height: 40px;
  border-radius: 12px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.pl-toolbar.billing-toolbar .pl-primary {
  margin-left: 0;
}

.pl-toolbar .billing-unpaid-label {
  order: 3;
}

@media (max-width: 900px) {
  .pl-toolbar .pl-date-chip {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .pl-toolbar .pl-date-chip .billing-date-input {
    width: 118px;
  }
  .pl-toolbar .pl-push-right {
    margin-left: 0;
  }
  .pl-toolbar .pl-tool:not(.print-preview-btn) {
    flex: 1 1 auto;
  }
}

.pl-toolbar .pl-primary { order: 9; }
.pl-toolbar.billing-toolbar #openBillingListPrint { order: 3; width: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.pl-toolbar.billing-toolbar .billing-verrechnen-picker { order: 4; }
.pl-toolbar .billing-verrechnen-picker > button {
  height: 40px;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .pl-toolbar .pl-primary { order: 0; }
  .pl-toolbar .billing-verrechnen-picker > button { width: 100%; }
}

/* ===== AVA: moderne Karten-Listen ===== */
.table-wrapper.pl-host {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  max-height: none !important;
}

.ava-slot-chips {
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 460px;
}

.ava-slot-lock { width: 190px; }
.ava-slot-katalog { width: 220px; }

.ava-slot-katalog .pl-status {
  max-width: 100%;
}

.pl-more.ava-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--muted);
  pointer-events: none;
}

.pl-thumb.ava-lv-number {
  width: 56px;
}

.pl-thumb.ava-lv-number .ava-lv-number-input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  padding: 0;
  box-shadow: none;
  border-radius: 10px;
}

.pl-thumb.ava-lv-number .ava-lv-number-input:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--panel-solid);
}

.pl-thumb-empty.ava-rev {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pl-item.is-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

@media (max-width: 1100px) {
  .pl-view-list .ava-slot-lock,
  .pl-view-list .ava-slot-katalog { width: auto; }
  .pl-view-list .ava-slot-chips { justify-content: flex-start; max-width: none; }
}

/* ===== Adressen / Firmen: moderne Karten-Listen ===== */
.pl-thumb.ad-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-solid));
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.pl-thumb.ad-avatar.is-company {
  border-radius: 12px;
  background: color-mix(in srgb, #0ea5e9 14%, var(--panel-solid));
  color: #0369a1;
}

.ad-slot-contact {
  width: 300px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.ad-link {
  max-width: 100%;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.ad-slot-projects { width: 110px; }
.ad-slot-trade { width: 200px; }

.pl-toolbar .pl-chip-date input[type="date"] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 38px !important;
  min-width: 0 !important;
  width: 140px;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 14px;
  color: var(--text);
}

.pl-toolbar .pl-chip-date input[type="date"]:focus {
  outline: none;
}

.pl-toolbar .pl-chip-date.is-active input[type="date"] {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 1100px) {
  .pl-view-list .ad-slot-contact {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px 12px;
  }
  .pl-view-list .ad-slot-projects,
  .pl-view-list .ad-slot-trade { width: auto; }
}

/* ===== Adressfenster: Fly-over mit Kopf + Reitern ===== */
.customer-modal-modern > form {
  width: min(880px, 96vw);
  height: min(720px, 90vh);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.customer-modal-modern.ava-floating-dialog > form {
  overflow: hidden;
}

.customer-modal-modern .cm-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px 12px;
  border-bottom: none;
}

.cm-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-solid));
  color: var(--accent);
}

.cm-avatar.is-company {
  border-radius: 14px;
  background: color-mix(in srgb, #0ea5e9 14%, var(--panel-solid));
  color: #0369a1;
}

.cm-head-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cm-head-main .eyebrow {
  margin: 0;
}

.cm-head-main h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-head-meta {
  font-size: 13px;
  color: var(--muted);
}

.cm-head-meta:empty,
.cm-head-chips:empty {
  display: none;
}

.cm-head-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.cm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  background: var(--panel-solid);
}

.cm-chip .ad-link {
  font-size: 12.5px;
}

.cm-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  flex: 0 0 auto;
}

.cm-tabs::-webkit-scrollbar {
  display: none;
}

.cm-tabs button {
  position: relative;
  background: transparent !important;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 12px 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted) !important;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cm-tabs button:hover {
  color: var(--text) !important;
}

.cm-tabs button.is-active {
  color: var(--accent) !important;
}

.cm-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}

.cm-tab-count {
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.cm-tab-count:empty {
  display: none;
}

.customer-modal-modern .cm-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 20px;
  min-height: 0;
}

.cm-pane.hidden {
  display: none !important;
}

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

.cm-grid .input-row {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cm-grid .input-row label,
.cm-terms label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.cm-grid input,
.cm-terms input,
.cm-contacts input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-solid);
  padding: 0 12px;
  font-size: 14px;
  box-shadow: none;
}

.cm-grid input:focus,
.cm-terms input:focus,
.cm-contacts input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.cm-grid input[readonly] {
  background: color-mix(in srgb, var(--muted) 8%, var(--panel-solid));
  color: var(--muted);
}

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

.cm-zip-city {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 160px;
  gap: 12px 16px;
}

/* Ansprechpartner: Tabellenzeilen als Karten */
.cm-contacts.table-wrapper {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

.cm-contacts table,
.cm-contacts tbody {
  display: block;
  width: 100%;
}

.cm-contacts thead {
  display: none;
}

.cm-contacts tbody {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cm-contacts tbody tr {
  position: relative;
  display: grid;
  grid-template-columns: 110px 110px minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  padding: 12px 44px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
}

.cm-contacts tbody td {
  display: block;
  padding: 0;
  border: none;
}

.cm-contacts tbody td:nth-child(5) {
  grid-column: 1 / 3;
}

.cm-contacts tbody td:nth-child(6) {
  grid-column: 3 / 5;
}

.cm-contacts tbody td:last-child {
  position: absolute;
  top: 10px;
  right: 8px;
}

.cm-add {
  margin-top: 12px;
  border: 1px dashed var(--border) !important;
  border-radius: 12px;
  width: 100%;
  height: 42px;
  color: var(--accent) !important;
  font-weight: 600;
}

.cm-terms {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 16px;
}

.cm-terms .payment-terms-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cm-rates {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 4%, var(--panel-solid));
}

.cm-rates .tagline {
  margin: 2px 0 0;
}

.cm-section-title {
  margin: 4px 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.cm-section-title ~ .cm-section-title {
  margin-top: 20px;
}

.cm-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.cm-actions #deleteCustomerModal {
  margin-right: auto;
}

@media (max-width: 700px) {
  .cm-grid,
  .cm-terms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cm-zip-city {
    grid-template-columns: 96px minmax(0, 1fr);
  }
  .cm-zip-city > :last-child {
    grid-column: 1 / -1;
  }
  .cm-contacts tbody tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cm-contacts tbody td:nth-child(5),
  .cm-contacts tbody td:nth-child(6) {
    grid-column: 1 / -1;
  }
  .customer-modal-modern > form {
    width: 100%;
    height: 100%;
  }
}

#customerModal .cm-body {
  padding: 18px 20px !important;
}

#customerModal .cm-contacts table {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: 0 !important;
}

#customerModal .cm-contacts tbody tr,
#customerModal .cm-contacts tbody tr:hover {
  background: var(--panel-solid) !important;
}

#customerModal .cm-contacts tbody td {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

#customerModal .cm-contacts input {
  height: 38px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--panel-solid) !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  min-width: 0 !important;
}

#customerModal .cm-contacts input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

#customerModal .cm-contacts tbody td:last-child button {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  color: var(--muted) !important;
  background: transparent !important;
  border: none;
  box-shadow: none;
}

#customerModal .cm-contacts tbody td:last-child button:hover {
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.1) !important;
}

#customerModal .cm-contacts,
#customerModal .cm-contacts.table-wrapper {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* ===== Rechnungs- und Angebotsfenster: Fly-over mit Kopf, Reitern und Summenleiste ===== */
:is(#billingModal, #offerModal).billing-modal-modern > form {
  width: min(1180px, 96vw);
  height: min(860px, 92vh);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

:is(#billingModal, #offerModal) .bm-head {
  padding: 16px 20px 10px !important;
  align-items: center;
}

:is(#billingModal, #offerModal) .bm-avatar {
  font-size: 15px;
}

:is(#billingModal, #offerModal) .bm-head-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-right: 8px;
  white-space: nowrap;
}

:is(#billingModal, #offerModal) .bm-head-total strong {
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

:is(#billingModal, #offerModal) .bm-head-total small {
  font-size: 11px;
  color: var(--muted);
}

:is(#billingModal, #offerModal) .bm-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  padding: 16px 20px !important;
  display: block;
}

:is(#billingModal, #offerModal) .cm-grid .input-row {
  margin: 0;
}

:is(#billingModal, #offerModal) .cm-grid input,
:is(#billingModal, #offerModal) .cm-grid select,
:is(#billingModal, #offerModal) .cm-terms input {
  height: 38px;
  font-size: 14px;
  padding: 0 12px;
  border-radius: 10px;
}

:is(#billingModal, #offerModal) .cm-grid label,
:is(#billingModal, #offerModal) .cm-terms label {
  font-size: 12px !important;
  font-weight: 600;
}

:is(#billingModal, #offerModal) .bm-lines-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 10px;
}

:is(#billingModal, #offerModal) .bm-tool-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

:is(#billingModal, #offerModal) .bm-tool {
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
  white-space: nowrap;
}

:is(#billingModal, #offerModal) .bm-tool-main {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  font-weight: 600;
}

:is(#billingModal [data-bm-pane="texts"], #offerModal [data-om-pane="texts"]) .input-row + .input-row {
  margin-top: 18px;
}

:is(#billingModal [data-bm-pane="texts"], #offerModal [data-om-pane="texts"]) .rich-input {
  min-height: 140px;
}

/* Summenleiste unten, immer sichtbar */
:is(#billingModal, #offerModal) .bm-totals {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 4%, var(--panel-solid));
  padding: 10px 20px;
}

:is(#billingModal, #offerModal) .bm-totals .billing-totals-panel {
  width: 100%;
  margin: 0;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 6px 22px;
}

:is(#billingModal, #offerModal) .bm-totals .billing-totals-row {
  gap: 8px;
  font-size: 13px;
}

:is(#billingModal, #offerModal) .bm-totals .billing-totals-row.hidden {
  display: none;
}

:is(#billingModal, #offerModal) .bm-totals .billing-totals-row-strong {
  font-size: 15px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}

:is(#billingModal, #offerModal) .bm-totals .billing-totals-row-strong strong {
  color: var(--accent);
}

:is(#billingModal, #offerModal) .cm-actions {
  padding: 10px 20px !important;
}

@media (max-width: 700px) {
  :is(#billingModal, #offerModal).billing-modal-modern > form {
    width: 100%;
    height: 100%;
  }
  :is(#billingModal, #offerModal) .bm-head-total small { display: none; }
  :is(#billingModal, #offerModal) .bm-head-total strong { font-size: 1.05rem; }
  :is(#billingModal, #offerModal) .bm-totals .billing-totals-panel {
    justify-content: space-between;
  }
  :is(#billingModal, #offerModal) .bm-totals .billing-totals-row-strong {
    border-left: none;
    padding-left: 0;
  }
}

@media (max-width: 700px) {
  :is(#billingModal, #offerModal) .bm-avatar { display: none; }
  :is(#billingModal, #offerModal) .cm-head-meta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  :is(#billingModal, #offerModal) .bm-totals { padding: 8px 14px; }
  :is(#billingModal, #offerModal) .bm-totals .billing-totals-row:not(.billing-totals-row-strong):not(:first-child) { display: none; }
  :is(#billingModal, #offerModal) .bm-totals .billing-totals-panel { flex-wrap: nowrap; }
  :is(#billingModal, #offerModal) .billing-footer-flags { font-size: 12px; gap: 8px; }
  :is(#billingModal, #offerModal) .bm-lines-tools .bm-tool { height: 32px; font-size: 12px; padding: 0 10px; }
}

/* Angebot: ältere #offerModal .dialog-body-Regeln (mit :not()) übersteuern */
#offerModal .dialog-body .cm-grid input:not([type="checkbox"]),
#offerModal .dialog-body .cm-grid select {
  height: 38px;
  font-size: 14px;
  padding: 0 12px;
  border-radius: 10px;
}

#offerModal .dialog-body .cm-grid .input-row label {
  font-size: 12px;
  font-weight: 600;
}

#offerModal .dialog-body .cm-grid label.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
}

#offerModal .cm-actions #offerCopyAction {
  margin-right: auto;
}

/* ===== Projektfenster (modern): Kopf mit Status/Ergebnis, Reiter statt langer Seite ===== */
#projectModalHome.project-modal-modern > form {
  width: min(1100px, 96vw);
  height: min(880px, 92vh);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

#projectModalHome .bm-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px 10px !important;
}

#projectModalHome .bm-avatar {
  font-size: 15px;
  overflow: hidden;
}

#projectModalHome .bm-head-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-right: 8px;
  white-space: nowrap;
}

#projectModalHome .bm-head-total strong {
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

#projectModalHome .bm-head-total strong:empty,
#projectModalHome .bm-head-total strong:empty + small {
  display: none;
}

#projectModalHome .bm-head-total small {
  font-size: 11px;
  color: var(--muted);
}

#projectModalHome .dialog-body.pm-body {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px !important;
  display: block;
}

#projectModalHome .pm-body .project-form-body {
  height: auto;
  gap: 0;
  padding-bottom: 0;
}

#projectModalHome .pm-pane {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}

/* Abschnitte innerhalb der Reiter: flach, mit Abschnittsüberschrift statt Karte */
#projectModalHome .pm-pane .project-form-section,
body.theme-light #projectModalHome .pm-pane .project-form-section {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  gap: 10px;
}

#projectModalHome .pm-pane .project-form-section.hidden {
  display: none;
}

#projectModalHome .pm-pane .project-form-section-head p {
  display: none;
}

#projectModalHome .pm-pane .project-form-section-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

#projectModalHome .dialog-body.pm-body .input-row label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

#projectModalHome .cm-actions {
  padding: 10px 20px !important;
  border-top: 1px solid var(--border);
}

/* Basisdaten: Bezeichnung neben den Namen, Datum neben den Projektordner */
#projectModalHome .pm-pane .project-field-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "number status"
    "name bezeichnung"
    "customer responsible"
    "date folderpath"
    "rates rates"
    "note note";
}

#projectModalHome .pm-pane .project-field-grid .bezeichnung-field { grid-area: bezeichnung; }

@media (max-width: 980px) {
  #projectModalHome .pm-pane .project-field-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "number" "status" "name" "bezeichnung" "customer" "responsible"
      "date" "folderpath" "rates" "note";
  }
}

#projectModalHome .pm-pane .project-field-grid input:not([type="checkbox"]),
#projectModalHome .pm-pane .project-field-grid select {
  height: 38px;
  min-height: 38px;
  font-size: 14px;
  border-radius: 10px;
}

/* Kleine, einheitliche Werkzeug-Buttons statt der großen Kacheln */
#projectModalHome .pm-pane .project-field-grid .input-row button,
#projectModalHome .pm-pane .project-create-customer-btn,
#projectModalHome .pm-pane #openProjectRates,
#projectModalHome .pm-pane #addTaskRow,
#projectModalHome .pm-pane #addBudgetRow,
#projectModalHome .pm-pane .pm-tool-row button,
#projectModalHome .pm-pane #projectAvaOpenButton,
#projectModalHome .pm-pane #projectChatArchiveRestoreButton {
  width: auto !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600;
  align-self: flex-start;
}

#projectModalHome .pm-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Anlege-Buttons (Angebot/Rechnung erfassen, LVs verwalten): klar als aktiv erkennbar */
#projectModalHome .pm-tool-row .pm-create-btn,
body.theme-light #projectModalHome .pm-tool-row .pm-create-btn {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid)) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
  opacity: 1;
  cursor: pointer;
}

#projectModalHome .pm-tool-row .pm-create-btn:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--panel-solid)) !important;
}

#projectModalHome .pm-tool-row .pm-create-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed;
}

/* Dokumente: je Art eine eigene Tabelle */
#projectModalHome .pm-doc-groups {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

#projectModalHome .pm-doc-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#projectModalHome .pm-doc-group-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#projectModalHome .pm-doc-group .pm-doc-table {
  max-height: none;
}

#projectModalHome .pm-doc-group .pm-doc-table.hidden,
#projectModalHome .pm-doc-empty.hidden {
  display: none;
}

#projectModalHome .pm-doc-empty {
  margin: 0;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--muted);
}

#projectModalHome .pm-doc-group tbody tr.row-link {
  cursor: pointer;
}

#projectModalHome .pm-lv-number {
  flex: 0 0 auto;
  min-width: 36px;
  padding: 2px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}


/* Zahlungsbedingungen: vier gleich breite Felder */
#projectModalHome .pm-pane .payment-terms-grid {
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 16px;
}

#projectModalHome .pm-pane .payment-terms-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

#projectModalHome .pm-pane .payment-terms-field,
#projectModalHome .pm-pane .payment-extra-field {
  align-items: stretch;
}

#projectModalHome .pm-pane .payment-terms-fields label,
#projectModalHome .pm-pane .payment-extra-field label {
  font-size: 12px;
  font-weight: 600;
}

#projectModalHome .pm-pane .payment-terms-fields input,
#projectModalHome .pm-pane .payment-extra-field input {
  width: 100%;
  max-width: none;
  height: 38px;
  font-size: 14px;
  padding: 0 12px;
  border-radius: 10px;
}

@media (max-width: 700px) {
  #projectModalHome .pm-pane .payment-terms-grid,
  #projectModalHome .pm-pane .payment-terms-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  #projectModalHome.project-modal-modern > form {
    width: 100%;
    height: 100%;
  }
  #projectModalHome .bm-avatar,
  #projectModalHome .bm-head-total small {
    display: none;
  }
  #projectModalHome .bm-head-total strong {
    font-size: 1.05rem;
  }
  #projectModalHome .cm-head-meta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #projectModalHome .dialog-body.pm-body {
    padding: 14px !important;
  }
}

/* ===== Belegfenster (modern): Kopf mit Betrag, Abschnitte statt Einzelzeilen ===== */
#receiptModal.receipt-modal-modern > form {
  width: min(760px, 96vw);
  max-height: min(820px, 92vh);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

#receiptModal .bm-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px 12px !important;
  border-bottom: 1px solid var(--border);
}

#receiptModal .bm-avatar {
  font-size: 15px;
  background: color-mix(in srgb, #f59e0b 16%, var(--panel-solid));
  color: #b45309;
}

#receiptModal .bm-head-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-right: 8px;
  white-space: nowrap;
}

#receiptModal .bm-head-total strong {
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

#receiptModal .bm-head-total small {
  font-size: 11px;
  color: var(--muted);
}

#receiptModal .bm-body {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  padding: 16px 20px !important;
}

#receiptModal .cm-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

#receiptModal .dialog-body .cm-grid .input-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

#receiptModal .dialog-body .cm-grid .input-row label {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

#receiptModal .dialog-body .cm-grid input {
  height: 38px;
  font-size: 14px;
  padding: 0 12px;
  border-radius: 10px;
}

#receiptModal .dialog-body .cm-grid input[readonly] {
  background: color-mix(in srgb, var(--muted) 8%, transparent);
}

#receiptModal .receipt-attachment-dropzone {
  border-radius: 12px;
  padding: 22px 12px;
  font-size: 13px;
}

#receiptModal .receipt-attachment-list:not(:empty) {
  margin-top: 10px;
}

#receiptModal .cm-actions {
  padding: 10px 20px !important;
  border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
  #receiptModal.receipt-modal-modern > form {
    width: 100%;
    max-height: none;
    height: 100%;
  }
  #receiptModal .bm-avatar,
  #receiptModal .bm-head-total small {
    display: none;
  }
  #receiptModal .bm-head-total strong {
    font-size: 1.05rem;
  }
}

/* ===== Handy-Start (modern): Begrüßung, Kennzahlen, Heute, Bereiche ===== */
.mh-header,
.mh-stats,
.mh-section-label,
.mh-today-slot {
  display: none;
}

body.is-standalone-client .mobile-home-launcher {
  align-items: stretch;
  justify-content: flex-start;
  gap: 14px;
  padding: 16px 14px 12px;
}

body.is-standalone-client .mobile-home-brand {
  display: none;
}

body.is-standalone-client .mh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 0;
}

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

.mh-hello {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-date {
  font-size: 13px;
  color: var(--muted);
}

.mh-avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--kb-avatar, var(--accent)) !important;
  color: var(--kb-avatar-text, #fff) !important;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

body.is-standalone-client .mh-stats {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin: 0 -14px;
  padding: 2px 14px 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

body.is-standalone-client .mh-stats::-webkit-scrollbar {
  display: none;
}

.mh-stat {
  flex: 0 0 auto;
  min-width: 104px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--mh-tone, var(--border));
  border-radius: 14px;
  background: var(--panel-solid) !important;
  color: var(--text) !important;
  text-align: left;
  box-shadow: none;
}

.mh-stat strong {
  font-size: 1.6rem;
  line-height: 1.05;
  color: var(--mh-tone, var(--text));
}

.mh-stat span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.mh-stat.is-zero strong {
  color: var(--muted);
}

.mh-stat-danger { --mh-tone: #dc2626; }
.mh-stat-warn { --mh-tone: #d97706; }
.mh-stat-accent { --mh-tone: var(--accent); }
.mh-stat-info { --mh-tone: #3b82f6; }
.mh-stat-muted { --mh-tone: #64748b; }

body.is-standalone-client .mh-today-slot {
  display: block;
}

body.is-standalone-client .mh-today-slot:empty {
  display: none;
}

body.is-standalone-client .mh-today-slot #homeMyWork {
  margin: 0;
}

body.is-standalone-client #homeMyWork .mw-stats {
  display: none;
}

body.is-standalone-client .mh-section-label {
  display: block;
  margin: 4px 2px -4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Bereiche als kompaktes 4er-Symbolraster */
body.is-standalone-client .mobile-home-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px 8px !important;
  width: 100%;
}

body.is-standalone-client .mobile-home-tile {
  padding: 0 !important;
  min-height: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 600;
  color: var(--text);
}

body.is-standalone-client .mobile-home-tile .nav-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  border: 1px solid var(--border);
}

body.is-standalone-client .mobile-home-tile > span:not(.nav-icon) {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Untere Leiste: Start · Aufgaben · + · Chat · Einstellungen */
body.is-standalone-client .mobile-bottom-nav-item {
  flex: 1 1 0;
}

.mobile-bottom-nav-quick {
  display: none;
}

body.is-standalone-client .mobile-bottom-nav-quick {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: -14px 6px 0;
  padding: 0;
  border: 4px solid #1f2a26;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav-quick .nav-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
}

.mobile-bottom-nav.contextual .mobile-bottom-nav-quick {
  display: none;
}

/* "+"-Schnellmenü als Bottom-Sheet */
.mh-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.35);
}

.mh-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 901;
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--panel-solid);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
  animation: mhSheetIn 0.18s ease-out;
}

.mh-sheet.hidden,
.mh-sheet-backdrop.hidden {
  display: none;
}

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

.mh-sheet-grip {
  width: 40px;
  height: 4px;
  margin: 2px auto 10px;
  border-radius: 999px;
  background: var(--border);
}

.mh-sheet-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 4px 8px;
}

.mh-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mh-sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 8px;
  border: none;
  border-radius: 12px;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  box-shadow: none;
}

.mh-sheet-item:active {
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

.mh-sheet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.mh-sheet-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.is-standalone-client .mh-today-slot #homeMyWork {
  padding: 12px !important;
}

body.is-standalone-client .mh-today-slot #homeMyWork .card-head {
  align-items: center;
  margin-bottom: 4px;
}

body.is-standalone-client .mh-today-slot #homeMyWork .card-head .eyebrow {
  display: none;
}

body.is-standalone-client .mh-today-slot #homeMyWork .card-head h3 {
  font-size: 1.05rem;
  margin: 0;
}

body.is-standalone-client .mh-today-slot #homeMyWork .card-head .kb-text-button {
  font-size: 13px;
}

body.is-standalone-client .mh-today-slot #homeMyWork .mw-filter-head {
  padding: 2px 2px 8px;
}

body.is-standalone-client .mh-today-slot #homeMyWork .mw-filter-head .mw-group-label {
  font-size: 13px;
}

/* Handy-Start ist seit dem neuen Aufbau höher als der Bildschirm: die
   Container dürfen nicht mehr auf Bildschirmhöhe schrumpfen (sonst wird der
   untere Teil abgeschnitten statt gescrollt) - .main-area scrollt dann. Unten
   zusätzlich Platz für den über die Leiste ragenden "+"-Button. */
body.is-standalone-client #homeShell.app-shell:not(.hidden),
body.is-standalone-client #homeShell.app-shell:not(.hidden) > .page,
body.is-standalone-client #homeShell .page > main {
  flex: 1 0 auto;
}

body.is-standalone-client #homeShell .page > main {
  padding-bottom: 28px;
}

body.is-standalone-client #homeShell .page > main > .home-offers-modern {
  margin-left: 14px;
  margin-right: 14px;
}

/* ===== Moderne Zeiterfassung: Kennzahlen, Wochenleiste, Tageskarte ===== */
#timeShell header.hero.time-legacy-hero {
  display: none !important;
}

.tm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 20px;
}

.tm.hidden {
  display: none;
}

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

.tm-title h2 {
  margin: 0;
  font-size: 1.4rem;
}

.tm-title span {
  font-size: 13px;
  color: var(--muted);
}

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

.tm-top-actions .tm-user select {
  max-width: 200px;
}

.tm-mode {
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
}

.tm-stats {
  margin: 0;
}

.tm-stat {
  cursor: default;
}

.tm-stat:hover {
  transform: none;
  box-shadow: none;
}

.tm-stat strong {
  font-size: 1.6rem;
}

.tm-bar {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  overflow: hidden;
}

.tm-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--mw-tone, var(--accent));
}

/* Wochenleiste */
.tm-week {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.tm-week-nav {
  flex: 0 0 auto;
  width: 36px;
  border-radius: 12px;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  background: var(--panel-solid) !important;
  border: 1px solid var(--border);
  color: var(--muted) !important;
  box-shadow: none;
}

.tm-week-days {
  flex: 1 1 auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.tm-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid) !important;
  color: var(--text) !important;
  box-shadow: none;
  cursor: pointer;
  min-width: 0;
}

.tm-day.is-weekend {
  opacity: 0.75;
}

.tm-day.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-solid)) !important;
}

.tm-day-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.tm-day.is-today .tm-day-name {
  color: var(--accent);
}

.tm-day-num {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
}

.tm-day-bar {
  width: 80%;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  overflow: hidden;
}

.tm-day-bar > span {
  display: block;
  height: 100%;
  background: #16a34a;
  border-radius: 999px;
}

.tm-day-bar.is-over > span {
  background: #0ea5e9;
}

.tm-day-hours {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.tm-day-flag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}

.tm-flag-U { background: rgba(14, 165, 233, 0.16); color: #0284c7; }
.tm-flag-K { background: rgba(220, 38, 38, 0.14); color: #dc2626; }
.tm-flag-F { background: rgba(124, 58, 237, 0.14); color: #7c3aed; }
.tm-flag-miss { background: rgba(217, 119, 6, 0.16); color: #b45309; }

.tm-day.is-missing {
  border-color: rgba(217, 119, 6, 0.5);
}

/* Tageskarte */
.tm-daycard {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel-solid);
  overflow: hidden;
}

.tm-dayhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.tm-dayhead h3 {
  margin: 0;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tm-dayhead-sub {
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
}

.tm-plus { color: #16a34a; }
.tm-minus { color: #dc2626; }

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

.tm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.tm-toggle input {
  display: none;
}

.tm-toggle.is-on {
  border-color: #0ea5e9;
  background: rgba(14, 165, 233, 0.14);
  color: #0284c7;
}

.tm-toggle-sick.is-on {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.tm-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
}

.tm-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--border);
  border-left: 5px solid var(--tm-color, var(--accent));
  border-radius: 12px;
  background: color-mix(in srgb, var(--tm-color, var(--accent)) 6%, var(--panel-solid));
  cursor: pointer;
}

.tm-entry:hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.tm-kind-pause { --tm-color: #94a3b8; }
.tm-kind-za { --tm-color: #0ea5e9; }
.tm-kind-sick { --tm-color: #dc2626; }
.tm-kind-training { --tm-color: #7c3aed; }
.tm-kind-internal { --tm-color: #64748b; }

.tm-entry.is-billed {
  cursor: default;
  opacity: 0.8;
}

.tm-entry-time {
  flex: 0 0 110px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}

.tm-entry-time strong {
  font-size: 14px;
}

.tm-entry-time span {
  font-size: 12px;
  color: var(--muted);
}

.tm-entry-main {
  flex: 1 1 auto;
  min-width: 0;
}

.tm-entry-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-entry-sub {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-entry-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.tm-gap {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: 1px dashed var(--border) !important;
  border-radius: 12px;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 13px;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}

.tm-gap:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.tm-gap-time {
  flex: 0 0 110px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.tm-absence {
  padding: 18px;
  border-radius: 12px;
  text-align: center;
  font-weight: 600;
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
}

.tm-dayfoot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.tm-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  font-weight: 600;
}

.tm-timer svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.tm-timer.is-running {
  background: rgba(220, 38, 38, 0.12) !important;
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
}

.tm-timer-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #dc2626;
  animation: tmPulse 1.4s ease-in-out infinite;
}

@keyframes tmPulse {
  50% { opacity: 0.3; }
}

.tm-add {
  height: 40px;
  padding: 0 18px;
  border-radius: 12px;
}

@media (max-width: 760px) {
  .tm-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tm-week {
    gap: 4px;
  }
  .tm-week-nav {
    width: 26px;
  }
  .tm-week-days {
    gap: 4px;
  }
  .tm-day {
    padding: 8px 2px;
    border-radius: 12px;
  }
  .tm-day-hours {
    font-size: 10.5px;
  }
  .tm-day-flag {
    font-size: 9px;
    padding: 1px 4px;
  }
  .tm-entry {
    gap: 10px;
    flex-wrap: wrap;
  }
  .tm-entry-time,
  .tm-gap-time {
    flex-basis: 92px;
  }
  .tm-dayfoot {
    justify-content: stretch;
  }
  .tm-dayfoot > * {
    flex: 1 1 0;
    justify-content: center;
  }
}

#timeShell.tm-active #timeGrid {
  display: none !important;
}

/* Am PC steht "Zeiterfassung" schon in der oberen Leiste */
body:not(.is-standalone-client) .tm-title h2 {
  display: none;
}

body:not(.is-standalone-client) .tm-title span {
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 760px) {
  .tm-entry {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 10px 8px 10px 10px;
  }
  .tm-entry-time {
    flex: 0 0 auto;
  }
  .tm-entry-time strong {
    font-size: 12.5px;
    white-space: nowrap;
  }
  .tm-entry-actions {
    flex-direction: column;
  }
  .tm-entry-actions .pl-icon-btn {
    width: 28px;
    height: 28px;
  }
  .tm-gap-time {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .tm-dayhead-actions {
    width: 100%;
  }
  .tm-top-actions {
    width: 100%;
  }
  .tm-top-actions .tm-user {
    flex: 1 1 auto;
  }
}

/* Moderne Zeiterfassung scrollt im Inhaltsbereich (die klassische Ansicht
   scrollt stattdessen im Zeitraster) */
#timeShell.tm-active main {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.is-standalone-client #timeShell.tm-active main {
  padding-bottom: 36px;
}

/* Zeitleiste in der Tageskarte (wie der bisherige Tageskalender) */
.tm-timeline-scroll {
  height: min(620px, 62vh);
  overflow-y: auto;
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}

.tm-timeline-scroll .week-day {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: 0 !important;
  width: 100% !important;
}

.tm-timeline-scroll .day-timeline {
  border-radius: 12px;
}

.tm-view-toggle button {
  font-size: 13px !important;
  padding: 6px 12px !important;
}

@media (max-width: 760px) {
  .tm-timeline-scroll {
    height: 58vh;
  }
}

.tm-dayhead-actions {
  flex-wrap: wrap;
}

.tm-view-toggle {
  flex: 0 0 auto;
}

/* ===== Zeiterfassung am Handy: kompakter Kopf + schwebender Plus-Knopf =====
   Wie beim Protokoll: Titel und Sa/So/Urlaub in einer Zeile, die vier
   Kennzahlen als schmale Leiste nebeneinander (ohne Hinweiszeile),
   "+ Eintrag" als runder Knopf über der unteren Leiste. Desktop unverändert. */
.tm-add svg {
  display: none;
}

@media (max-width: 760px) {
  #timeModern.tm {
    gap: 10px;
  }
  #timeModern .tm-top {
    flex-wrap: nowrap;
    gap: 8px;
  }
  #timeModern .tm-title {
    min-width: 0;
  }
  #timeModern .tm-title h2 {
    font-size: 1.15rem;
    line-height: 1.2;
  }
  #timeModern .tm-title span {
    display: block;
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #timeModern .tm-top-actions {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 6px;
  }
  #timeModern .tm-top-actions .tm-mode {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 999px;
  }
  /* Benutzerauswahl (nur für Berechtigte) bekommt eine eigene Zeile */
  #timeModern .tm-top:has(.tm-user) {
    flex-wrap: wrap;
  }
  #timeModern .tm-top:has(.tm-user) .tm-top-actions {
    width: 100%;
  }

  #timeModern .tm-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
  }
  #timeModern .tm-stat {
    padding: 7px 8px 8px;
    gap: 1px;
    border-radius: 12px;
    border-left-width: 3px;
    min-width: 0;
  }
  #timeModern .tm-stat .mw-stat-label {
    max-width: 100%;
    font-size: 9.5px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #timeModern .tm-stat strong {
    font-size: 1rem;
    white-space: nowrap;
  }
  #timeModern .tm-stat .mw-stat-hint {
    display: none;
  }
  #timeModern .tm-stat .tm-bar {
    height: 3px;
    margin-top: 4px;
  }

  #timeModern .tm-day {
    padding: 6px 2px;
    gap: 2px;
  }

  /* Fußzeile nur noch für die Stoppuhr; ohne Stoppuhr ganz weg */
  #timeModern .tm-dayfoot:not(:has(.tm-timer)) {
    display: none;
  }
  #timeModern .tm-add {
    position: fixed;
    right: 18px;
    bottom: calc(54px + env(safe-area-inset-bottom) + 16px);
    z-index: 600;
    flex: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  }
  #timeModern .tm-add span {
    display: none;
  }
  #timeModern .tm-add svg {
    display: block;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
  }
  /* Platz, damit der Plus-Knopf das Ende der Tageskarte nicht verdeckt */
  body.is-standalone-client #timeShell.tm-active main {
    padding-bottom: 96px;
  }
}

/* ===== Urlaubskalender modern: Jahresübersicht ===== */
#timeVacationSection.vy-modern > .eyebrow,
#timeVacationSection.vy-modern > .vy-classic-filters {
  display: none;
}

#timeVacationSection.vy-modern #vacationYearGrid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 20px;
}

.vy-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.vy-year {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vy-year strong {
  font-size: 1.5rem;
  min-width: 64px;
  text-align: center;
}

.vy-year .tm-week-nav {
  height: 36px;
}

.vy-summary {
  font-size: 14px;
  color: var(--muted);
}

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

.vy-person {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-solid) !important;
  color: var(--text) !important;
  box-shadow: none;
  font-size: 13px;
  cursor: pointer;
}

.vy-person.is-active {
  border-color: var(--vy-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vy-color) 35%, transparent);
}

.vy-person.is-dim {
  opacity: 0.5;
}

.vy-person-name {
  font-weight: 600;
}

.vy-person-meta {
  color: var(--muted);
  font-size: 12px;
}

.vy-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--vy-color, var(--accent));
}

.vy-months {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.vy-month {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-solid);
  padding: 12px 12px 10px;
}

.vy-month.is-current {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.vy-month header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 700;
}

.vy-month-count {
  font-size: 11.5px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.14);
  color: #0284c7;
}

.vy-weekdays,
.vy-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.vy-weekdays span {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  padding-bottom: 2px;
}

.vy-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  height: 34px;
  padding: 3px 0 0;
  border: none;
  border-radius: 8px;
  background: transparent !important;
  color: var(--text) !important;
  box-shadow: none;
  font-size: 12px;
  cursor: pointer;
}

.vy-day:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

.vy-day.is-empty {
  cursor: default;
  pointer-events: none;
}

.vy-day.is-weekend,
.vy-day.is-holiday {
  color: var(--muted) !important;
  background: color-mix(in srgb, var(--muted) 8%, transparent) !important;
}

.vy-day.is-holiday .vy-num {
  color: #dc2626;
}

.vy-day.is-today .vy-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

.vy-day.is-single {
  background: color-mix(in srgb, var(--vy-color) 22%, transparent) !important;
  color: var(--text) !important;
  font-weight: 700;
}

.vy-dots {
  display: flex;
  gap: 2px;
  align-items: center;
}

.vy-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--vy-color);
}

.vy-dots b {
  font-size: 9px;
  line-height: 1;
  color: var(--muted);
}

.vy-pop {
  position: absolute;
  z-index: 30;
  width: 260px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22);
}

.vy-pop.hidden {
  display: none;
}

.vy-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.vy-pop ul {
  list-style: none;
  margin: 4px 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vy-pop li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.vy-pop li em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}

.vy-pop-holiday {
  margin: 0 0 6px;
  font-size: 13px;
  color: #dc2626;
}

.vy-pop-week {
  width: 100%;
  height: 34px;
  border-radius: 10px;
  font-size: 13px;
}

@media (max-width: 760px) {
  .vy-months {
    grid-template-columns: 1fr;
  }
  .vy-person-meta {
    display: none;
  }
}

/* Urlaubskalender: Inhalt scrollbar (alle 12 Monate erreichbar) */
#timeShell.tv-vacation main {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.is-standalone-client #timeShell.tv-vacation main {
  padding-bottom: 36px;
}

/* ===== Zeit-Erfassungsfenster: Fly-over, modern ===== */
#timeEntryDialog.te-modern > form {
  width: min(620px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

#timeEntryDialog .te-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 12px !important;
  border-bottom: 1px solid var(--border);
}

#timeEntryDialog .te-head-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-solid));
  color: var(--accent);
}

#timeEntryDialog .te-head-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

#timeEntryDialog .te-head-main {
  flex: 1 1 auto;
  min-width: 0;
}

#timeEntryDialog .te-head-main .eyebrow {
  margin: 0;
}

#timeEntryDialog .te-head-main h2 {
  margin: 0;
  font-size: 1.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#timeEntryDialog .te-range {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#timeEntryDialog .te-range:empty {
  display: none;
}

#timeEntryDialog .te-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#timeEntryDialog .te-body .input-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  margin: 0;
  width: 100%;
}

#timeEntryDialog .te-body .input-row > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  min-width: 0;
  width: auto;
  text-align: left;
}

#timeEntryDialog .te-body input:not([type="checkbox"]),
#timeEntryDialog .te-body select,
#timeEntryDialog .te-body textarea {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  background: var(--panel-solid);
  padding: 8px 12px;
}

#timeEntryDialog .te-body textarea {
  min-height: 64px;
  resize: vertical;
}

#timeEntryDialog .te-body input:focus,
#timeEntryDialog .te-body select:focus,
#timeEntryDialog .te-body textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Art als Chips */
#timeEntryDialog .te-types {
  gap: 8px !important;
  margin: 0 !important;
}

#timeEntryDialog .te-types .time-absence-pill {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

#timeEntryDialog .te-types .checkbox {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  background: var(--panel-solid);
}

#timeEntryDialog .te-types .checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

#timeEntryDialog .te-types .checkbox:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-solid));
  color: var(--accent);
}

#timeEntryDialog .te-types .time-absence-full-day.hidden {
  display: none !important;
}

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

#timeEntryDialog .te-span-2 {
  grid-column: 1 / -1;
}

/* Zeitblock */
#timeEntryDialog .te-time {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 10px 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 4%, var(--panel-solid));
}

#timeEntryDialog .te-arrow {
  padding-bottom: 12px;
  color: var(--muted);
  font-size: 18px;
}

#timeEntryDialog .te-time .time-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}

#timeEntryDialog .te-time .time-stepper input[type="time"] {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#timeEntryDialog .te-time .time-stepper .ghost {
  flex: 0 0 auto;
  width: 38px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

#timeEntryDialog .te-quick {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

#timeEntryDialog .te-quick span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-right: 4px;
}

#timeEntryDialog .te-quick button {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-solid) !important;
  color: var(--text) !important;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  touch-action: manipulation;
}

#timeEntryDialog .te-quick button:hover {
  border-color: var(--accent);
  color: var(--accent) !important;
}

#timeEntryDialog .cm-actions {
  padding: 12px 18px !important;
}

@media (max-width: 600px) {
  #timeEntryDialog .te-grid {
    grid-template-columns: 1fr;
  }
  #timeEntryDialog .te-time {
    grid-template-columns: 1fr;
  }
  #timeEntryDialog .te-arrow {
    display: none;
  }
  #timeEntryDialog .te-range {
    display: none;
  }
  #timeEntryDialog.te-modern > form {
    width: 100%;
    max-height: none;
    height: 100%;
  }
}

/* Handy: Platz für die fixe untere Leiste (.mobile-dialog-nav) freihalten -
   die generische Regel (form padding-bottom) verliert gegen das
   "padding: 0" oben (ID-Spezifität), sonst liegen die letzten Felder
   (Ort der Fahrt) unerreichbar hinter der Leiste. */
body.is-standalone-client #timeEntryDialog.te-modern > form {
  box-sizing: border-box;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

/* Zeiterfassung: Sa/So-Umschalter + Zurück aus dem Urlaubskalender */
.tm-mode.is-on {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-solid)) !important;
  color: var(--accent) !important;
}

.vy-back {
  height: 36px;
  font-weight: 600;
}

/* ===== Handy: Tab-Leiste Start · Zeit · Aufgaben · Chat · Mehr ===== */
body.is-standalone-client .mobile-bottom-nav {
  min-height: calc(54px + env(safe-area-inset-bottom)) !important;
}

body.is-standalone-client .main-area {
  padding-bottom: calc(54px + env(safe-area-inset-bottom)) !important;
}

body.is-standalone-client .mobile-bottom-nav-item {
  flex: 1 1 0 !important;
  gap: 2px;
  padding: 6px 2px 4px !important;
}

/* Beschriftung unter dem Symbol wieder sichtbar (Tab-Leiste) */
body.is-standalone-client .mobile-bottom-nav-item > span:not(.nav-icon) {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

body.is-standalone-client .mobile-bottom-nav-item .nav-icon svg {
  width: 22px;
  height: 22px;
}

/* Startseite: Bereichs-Raster liegt jetzt unter "Mehr" */
body.is-standalone-client .mh-section-label,
body.is-standalone-client #mobileHomeLauncher .mobile-home-grid {
  display: none !important;
}

/* "+" oben auf der Startseite */
.mh-quick {
  display: none;
}

body.is-standalone-client .mh-quick {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mh-quick svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
}

body.is-standalone-client .mh-header {
  gap: 10px;
}

/* "Mehr"-Blatt */
.mh-more {
  max-height: 78vh;
  overflow-y: auto;
}

.mh-more .mh-sheet-item {
  padding: 9px 8px;
}

.mh-more-label {
  flex: 1 1 auto;
  text-align: left;
}

.mh-more-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.mh-more-chevron {
  font-size: 20px;
  color: var(--muted);
  margin-left: 4px;
}

.mh-more-settings {
  margin-top: 6px;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 12px 12px !important;
  padding-top: 12px !important;
}

.mh-more-settings.hidden {
  display: none !important;
}

body.theme-dark .mh-sheet {
  background: #1d2623;
}

body:not(.theme-dark) .mh-sheet {
  background: #ffffff;
}

body.is-standalone-client .mh-hello {
  font-size: 1.3rem;
}

/* ===== Handy-Start aufgeräumt (2026-09-29) =====
   - Blitzsuche nur noch als Lupe oben (das breite Suchfeld gehört zum
     Desktop-Dashboard und blieb am Handy zusätzlich stehen).
   - Kopfzeile: Lupe dezent (wie die Symbolknöpfe in Protokoll/Zeit),
     "+" als einziger farbiger Knopf, daneben der Avatar.
   - Kennzahlen als ruhiges 3er-Raster statt seitlich wischbarer Leiste,
     kompakt wie die Kennzahlen der Zeiterfassung. */
body.is-standalone-client #qsDashboardTrigger {
  display: none !important;
}

body.is-standalone-client .mh-header {
  gap: 8px;
}

body.is-standalone-client .mh-quick.qs-mobile-trigger {
  width: 40px;
  height: 40px;
  background: var(--panel-solid) !important;
  border: 1px solid var(--border);
  color: var(--text) !important;
  box-shadow: none;
}

body.is-standalone-client .mh-quick.qs-mobile-trigger svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.2;
}

body.is-standalone-client .qs-mobile-trigger + #mobileHomeQuickAdd {
  margin-left: 0;
}

body.is-standalone-client .mh-date {
  font-size: 12.5px;
}

body.is-standalone-client .mh-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}

body.is-standalone-client .mh-stat {
  min-width: 0;
  gap: 1px;
  padding: 9px 10px 10px;
  border-left-width: 3px;
  border-radius: 12px;
}

body.is-standalone-client .mh-stat strong {
  font-size: 1.3rem;
}

body.is-standalone-client .mh-stat span {
  max-width: 100%;
  font-size: 11px;
  line-height: 1.25;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Protokoll-Editor modern: Kopfkarte + Punkte als Karten ===== */
#protocolEntriesPanel .protocol-form-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: end;
  gap: 12px 18px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-solid);
}

#protocolEntriesPanel .protocol-form-top .input-row.inline {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

#protocolEntriesPanel .protocol-form-top .input-row.inline > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

#protocolEntriesPanel .protocol-form-top input[type="date"],
#protocolEntriesPanel .protocol-form-top #protocolTitleSelect {
  height: 40px;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  width: 100%;
}

#protocolEntriesPanel .protocol-number-display {
  margin: 0;
  align-self: center;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.pe-stats {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pe-stats:empty {
  display: none;
}

.pe-stats .pl-status {
  font-size: 12.5px;
  padding: 3px 10px;
}

/* Werkzeugleiste: Filter + Suche + Aktionen */
#protocolEntriesPanel .protocol-entry-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px 10px;
  padding: 10px 0;
}

.pe-filters {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-solid);
}

.pe-filter {
  height: 30px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.pe-filter.is-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
  color: var(--accent) !important;
}

.pe-search {
  position: relative;
  flex: 0 1 240px;
  min-width: 160px;
}

.pe-search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  pointer-events: none;
}

.pe-search input {
  width: 100%;
  height: 36px;
  padding: 0 10px 0 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-solid);
  font-size: 13.5px;
}

#protocolEntriesPanel .protocol-autosave-status {
  margin-left: auto;
}

/* Gruppen + Karten */
.pe-group {
  margin-top: 14px;
  overflow: visible !important;
}

.pe-group-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}

.pe-group-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.pe-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pe-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.pe-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.pe-card.is-sub {
  margin-left: 34px;
}

.pe-card.is-overdue {
  border-left: 4px solid #dc2626;
}

.pe-card.is-done {
  opacity: 0.62;
}

.pe-card.is-done .pe-text {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent);
}

/* Abhaken als Kreis */
.pe-check {
  flex: 0 0 auto;
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  cursor: pointer;
}

.pe-check input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.pe-check span {
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid color-mix(in srgb, var(--muted) 60%, transparent);
  border-radius: 999px;
  transition: all 0.12s ease;
}

.pe-check input:checked + span {
  border-color: #16a34a;
  background: #16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.pe-check input:focus-visible + span {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.pe-check input:disabled + span {
  opacity: 0.4;
}

.pe-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pe-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.pe-num {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.pe-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.pe-text p {
  margin: 0 0 4px;
}

.pe-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.pe-meta:empty {
  display: none;
}

.pe-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.pe-chip-person {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: transparent;
  color: var(--accent);
}

button.pe-attach {
  cursor: pointer;
  box-shadow: none;
}

.pe-attach svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.pe-done-label {
  font-size: 12px;
  color: #16a34a;
  font-weight: 600;
}

.pe-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  opacity: 0.55;
  transition: opacity 0.12s ease;
}

.pe-card:hover .pe-actions,
.pe-card:focus-within .pe-actions {
  opacity: 1;
}

@media (hover: none) {
  .pe-actions {
    opacity: 1;
  }
}

@media (max-width: 760px) {
  #protocolEntriesPanel .protocol-form-top {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .pe-search {
    flex: 1 1 100%;
  }
  .pe-card {
    flex-wrap: wrap;
    gap: 10px;
  }
  .pe-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: -4px;
  }
  .pe-card.is-sub {
    margin-left: 16px;
  }
}

#protocolForm #protocolEntrySearch {
  width: 100% !important;
  height: 36px !important;
  min-height: 0 !important;
  padding: 0 12px 0 34px !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  background: var(--panel-solid) !important;
  font-size: 14px !important;
  line-height: normal !important;
  box-shadow: none !important;
}

#protocolForm #protocolEntrySearch:focus {
  outline: none;
  border-color: var(--accent) !important;
}

#protocolForm #protocolMeetingDate,
#protocolForm #protocolNextMeetingDate {
  height: 40px !important;
  min-height: 0 !important;
  padding: 0 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--panel-solid) !important;
  font-size: 15px !important;
  line-height: normal !important;
  width: 100% !important;
  max-width: 260px;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  #protocolForm #protocolMeetingDate,
  #protocolForm #protocolNextMeetingDate {
    height: 44px !important;
    max-width: none;
  }
  #protocolEntriesPanel .protocol-entry-actions {
    gap: 8px;
  }
  .pe-filters {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pe-filters::-webkit-scrollbar {
    display: none;
  }
  #protocolEntriesPanel .protocol-autosave-status {
    flex: 1 1 100%;
    margin-left: 0;
  }
  #protocolEntriesPanel .protocol-entry-actions #protocolEntryDialogOpen {
    flex: 1 1 auto;
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
  }
}

/* Datumsfelder im Protokoll-Kopf nicht vertikal strecken (Flex-Spalte) */
#protocolForm #protocolMeetingDate,
#protocolForm #protocolNextMeetingDate,
#protocolForm #protocolTitleSelect {
  flex: 0 0 auto !important;
}

@media (max-width: 760px) {
  .pe-card {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 4px;
  }
  .pe-card .pe-actions {
    grid-column: 1 / -1;
  }
}

/* ===== Protokoll am Handy: kompakter Kopf, Symbolknöpfe, Plus-Knopf =====
   Desktop unverändert (Symbole ausgeblendet, Texte sichtbar). Am Handy:
   Kopfkarte zweispaltig (Nummer oben, beide Daten nebeneinander, Zähler
   darunter), Filter als gleich breite Segmente, Suche + Drucken/E-Mail/
   Schließen als Symbole in EINER Zeile, "Neuer Punkt" als schwebender
   Plus-Knopf über der unteren Leiste. */
.pe-tool-btn svg,
.pe-new-btn svg {
  display: none;
}

@media (max-width: 760px) {
  #protocolEntriesPanel .protocol-form-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 8px 10px;
    padding: 12px;
    border-radius: 14px;
  }
  #protocolEntriesPanel .protocol-form-top #protocolTitleRow,
  #protocolEntriesPanel .protocol-form-top .pe-stats {
    grid-column: 1 / -1;
  }
  #protocolEntriesPanel .protocol-number-display {
    grid-column: 1 / -1;
    order: -1;
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  #protocolEntriesPanel .protocol-number-display:empty {
    display: none;
  }
  #protocolEntriesPanel .protocol-form-top .input-row.inline {
    min-width: 0;
    gap: 3px;
  }
  #protocolEntriesPanel .protocol-form-top .input-row.inline > label {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* iOS gibt Datumsfeldern eine Mindestbreite und zentriert den Wert -
     dadurch ragten sie rechts aus der Karte. */
  #protocolForm #protocolMeetingDate,
  #protocolForm #protocolNextMeetingDate {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0 !important;
    max-width: 100%;
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 15px !important;
    font-weight: 600;
    text-align: left;
  }
  #protocolForm #protocolMeetingDate::-webkit-date-and-time-value,
  #protocolForm #protocolNextMeetingDate::-webkit-date-and-time-value {
    text-align: left;
  }
  #protocolEntriesPanel .pe-stats {
    gap: 5px;
  }
  #protocolEntriesPanel .pe-stats .pl-status {
    font-size: 12px;
    padding: 2px 9px;
  }

  /* Werkzeugleiste: Zeile 1 Filter, Zeile 2 Suche + Symbole */
  #protocolEntriesPanel .protocol-entry-actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
  }
  #protocolEntriesPanel .pe-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 1 1 100%;
    width: 100%;
    box-sizing: border-box;
  }
  #protocolEntriesPanel .pe-filter {
    padding: 0 4px;
    font-size: 13px;
  }
  #protocolEntriesPanel .pe-search {
    flex: 1 1 0;
    min-width: 0;
  }
  #protocolEntriesPanel .protocol-entry-actions .print-preview-btn,
  #protocolEntriesPanel .protocol-entry-actions .pe-tool-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 0 !important;
    border-radius: 999px;
  }
  #protocolEntriesPanel .protocol-entry-actions .pe-tool-btn.hidden {
    display: none;
  }
  #protocolEntriesPanel .protocol-entry-actions .print-preview-btn svg,
  #protocolEntriesPanel .pe-tool-btn svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  #protocolEntriesPanel .pe-tool-btn span,
  #protocolEntriesPanel .pe-new-btn span {
    display: none;
  }
  /* Speicherstatus: "Gespeichert" nur als grüner Haken hinter der Suche,
     andere Zustände (Fehler, Speichert …) als kleine eigene Zeile. */
  #protocolEntriesPanel .protocol-autosave-status {
    order: 5;
    flex: 1 1 100%;
    margin: -2px 0 0;
    font-size: 11.5px;
  }
  #protocolEntriesPanel .protocol-autosave-status:empty,
  #protocolEntriesPanel .protocol-autosave-status[data-status="saved"] {
    display: none;
  }

  /* Neuer Punkt: schwebender Plus-Knopf über der unteren Leiste */
  #protocolEntriesPanel .protocol-entry-actions #protocolEntryDialogOpen.pe-new-btn {
    position: fixed;
    right: 18px;
    bottom: calc(54px + env(safe-area-inset-bottom) + 16px);
    z-index: 600;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    min-height: 0;
    padding: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  }
  #protocolEntriesPanel .protocol-entry-actions #protocolEntryDialogOpen.pe-new-btn svg {
    display: block;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
  }
  #protocolEntriesPanel .protocol-entry-actions #protocolEntryDialogOpen.pe-new-btn:disabled {
    opacity: 0.45;
  }
  /* Platz, damit der Plus-Knopf die Knöpfe der letzten Karte nicht verdeckt */
  #protocolEntriesPanel #protocolEntriesTables {
    padding-bottom: 88px;
  }
}

/* ===== Protokoll: Beteiligte Firmen als Karten ===== */
#protocolPartiesPanel .protocol-party-status-legend {
  display: none;
}

.pp-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 12px;
}

.pp-summary .pl-status {
  font-size: 12.5px;
  padding: 3px 10px;
}

.pp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pp-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
}

.pp-card.pp-status-present { border-left-color: #16a34a; }
.pp-card.pp-status-absent { border-left-color: #dc2626; }

.pp-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pp-badge {
  flex: 0 0 auto;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #0ea5e9 14%, var(--panel-solid));
  color: #0369a1;
  font-weight: 700;
  font-size: 13px;
}

.pp-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pp-title strong {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-title span {
  font-size: 12.5px;
  color: var(--muted);
}

.pp-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
}

.pp-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 110px;
  gap: 10px;
}

.pp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pp-field > span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

#protocolPartiesPanel .pp-field input,
#protocolPartiesPanel .pp-field select {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--panel-solid) !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

.pp-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pp-segment {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.pp-seg,
.pp-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.pp-seg input,
.pp-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.pp-seg-present:has(input:checked) {
  background: rgba(22, 163, 74, 0.16);
  color: #15803d;
}

.pp-seg-absent:has(input:checked) {
  background: rgba(220, 38, 38, 0.14);
  color: #dc2626;
}

.pp-toggle {
  border: 1px solid var(--border);
}

.pp-toggle:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.pp-toggle:has(input:disabled) {
  opacity: 0.4;
  cursor: default;
}

.pp-seg:has(input:focus-visible),
.pp-toggle:has(input:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

@media (max-width: 760px) {
  .pp-fields {
    grid-template-columns: minmax(0, 1fr) 96px;
  }
  .pp-field-wide {
    grid-column: 1 / -1;
    order: -1;
  }
}

#protocolPartiesList.protocol-parties-list {
  display: block !important;
}

#protocolPartiesPanel .pp-field,
#protocolPartiesPanel .pp-seg {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

#protocolPartiesPanel .pp-seg {
  padding: 0 12px !important;
}

#protocolPartiesPanel .pp-seg-present:has(input:checked) {
  background: rgba(22, 163, 74, 0.16) !important;
}

#protocolPartiesPanel .pp-seg-absent:has(input:checked) {
  background: rgba(220, 38, 38, 0.14) !important;
}

#protocolPartiesPanel .pp-toggle {
  margin: 0 !important;
  background: transparent !important;
  padding: 0 12px !important;
}

#protocolPartiesPanel .pp-toggle:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
}

#protocolPartiesPanel .pp-field > span {
  text-align: left;
}

#protocolPartiesPanel .pp-field > span {
  align-self: flex-start;
  text-align: left !important;
  width: auto !important;
}

/* ===== Punkt-Fenster (Protokoll) modern ===== */
#protocolEntryDialog .ped-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

#protocolEntryDialog .ped-head-main {
  flex: 1 1 auto;
  min-width: 0;
}

#protocolEntryDialog .ped-head-main .eyebrow {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}

#protocolEntryDialog .protocol-entry-dialog-title {
  margin: 2px 0 0;
  font-size: 1.2rem;
}

#protocolEntryDialog .protocol-entry-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
}

.ped-quick,
.ped-lots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.ped-quick button,
.ped-lot {
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-solid) !important;
  color: var(--text) !important;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.ped-quick button:hover,
.ped-lot:hover {
  border-color: var(--accent);
  color: var(--accent) !important;
}

.ped-quick button[hidden] {
  display: none;
}

.ped-lot.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-solid)) !important;
  color: var(--accent) !important;
}

.ped-lot:disabled {
  opacity: 0.5;
  cursor: default;
}

.ped-lots[hidden] {
  display: none;
}

#protocolEntryDialog select.ped-select-hidden {
  display: none !important;
}

/* Handy: "Hinzufügen" als Hauptaktion hervorheben */
body.no-sidebar-nav #protocolEntryDialog #protocolAddEntry {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

#protocolEntryDialog .ped-head-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-solid));
  color: var(--accent);
}

#protocolEntryDialog .ped-head-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#protocolEntryDialog .ped-head {
  padding-bottom: 12px !important;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

/* Protokoll-Übersicht: kompakte Leiste wie in den anderen Listen */
.protocols-hero:has(.pl-toolbar) {
  padding: 10px 12px !important;
}

/* ===== Seitenleiste (modern, 2026-09-26): Gruppen, Akzent-Fläche für den
   aktiven Punkt, Zähler als Pille rechts. Gilt für alle Seitenleisten
   (Haupt-, AVA-, Einstellungs-, Auswertungs- und Protokoll-Leiste). ===== */
.sidebar-nav {
  gap: 2px;
}

.sidebar-nav .ghost,
body.theme-light .sidebar-nav .ghost {
  min-height: 36px;
  padding: 7px 10px;
  border: none;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
}

.sidebar-nav .ghost .nav-icon {
  opacity: 0.75;
}

.sidebar-nav .ghost:hover,
body.theme-light .sidebar-nav .ghost:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: none;
}

.sidebar-nav .ghost[data-active-view="true"],
body.theme-light .sidebar-nav .ghost[data-active-view="true"] {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-weight: 600;
  border: none;
}

.sidebar-nav .ghost[data-active-view="true"] .nav-icon {
  opacity: 1;
}

/* Der frühere Strich links entfällt - die Fläche markiert den aktiven Punkt */
.sidebar-nav .ghost[data-active-view="true"]::before {
  display: none;
}

.sidebar-nav .ghost .assignment-notif-badge {
  margin-left: auto;
  min-width: 20px;
  height: 18px;
  font-size: 10.5px;
}

/* Hauptleiste: Gruppen mit kleinen Überschriften, Einstellungen unten */
#sidebarMainNav.sidebar-nav-modern {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  gap: 14px;
}

.sidebar-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Gruppe ohne sichtbaren Punkt (Rollenrechte) samt Überschrift ausblenden */
.sidebar-nav-group:not(:has(> .ghost:not(.hidden))) {
  display: none;
}

#sidebarMainNav .sidebar-nav-section-label {
  padding: 0 10px 4px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

.sidebar-nav-group-bottom {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.sidebar-foot {
  padding-top: 8px;
}

/* Eingeklappt: nur Symbole, Überschriften weg, Zähler als Punkt oben rechts */
.sidebar.collapsed .sidebar-nav-section-label {
  display: none;
}

.sidebar.collapsed #sidebarMainNav.sidebar-nav-modern {
  gap: 8px;
}

.sidebar.collapsed .sidebar-nav .ghost {
  padding: 8px 0;
}

.sidebar.collapsed .sidebar-nav .ghost .assignment-notif-badge:not(.hidden) {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 9.5px;
}

@media (max-width: 640px) {
  .sidebar.collapsed.mobile-open .sidebar-nav-section-label {
    display: block;
  }
  .sidebar.collapsed.mobile-open .sidebar-nav .ghost .assignment-notif-badge:not(.hidden) {
    position: static;
  }
}


.sidebar.collapsed .sidebar-copyright {
  display: none;
}

/* ===== Protokoll: Beteiligte hinzufügen (modern, Fly-over) ===== */
#protocolPartyPickerDialog.party-picker-modern > form {
  width: min(620px, 96vw);
  height: min(760px, 88vh);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

#protocolPartyPickerDialog .bm-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px 12px !important;
}

#protocolPartyPickerDialog .bm-avatar svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#protocolPartyPickerDialog .pp-search {
  position: relative;
  flex: 0 0 auto;
  padding: 0 20px 12px;
  border-bottom: 1px solid var(--border);
}

#protocolPartyPickerDialog .pp-search .search-icon {
  position: absolute;
  left: 32px;
  top: calc(50% - 6px);
  transform: translateY(-50%);
  margin: 0;
  display: flex;
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
}

#protocolPartyPickerDialog .pp-search .search-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

#protocolPartyPickerDialog .pp-search input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 40px;
  border-radius: 10px;
  font-size: 14px;
}

#protocolPartyPickerDialog .pp-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: block;
  padding: 8px 12px !important;
}

#protocolPartyPickerDialog .protocol-party-picker-list {
  max-height: none;
  overflow: visible;
  gap: 2px;
}

#protocolPartyPickerDialog .protocol-party-picker-group {
  padding: 2px 0;
  border-bottom: none;
}

#protocolPartyPickerDialog .protocol-party-picker-contacts {
  padding-left: 30px;
  gap: 2px;
}

#protocolPartyPickerDialog .pp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  transition: background 120ms ease;
}

#protocolPartyPickerDialog .pp-row:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

#protocolPartyPickerDialog .pp-row.is-selected {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

#protocolPartyPickerDialog .pp-row:focus-visible {
  outline: none;
}

#protocolPartyPickerDialog .pp-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset: -2px;
}

#protocolPartyPickerDialog .pp-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-solid));
  color: var(--accent);
}

#protocolPartyPickerDialog .pp-avatar.is-company {
  border-radius: 10px;
  background: color-mix(in srgb, #0ea5e9 14%, var(--panel-solid));
  color: #0369a1;
}

#protocolPartyPickerDialog .pp-contact {
  font-size: 13px;
  font-weight: 500;
  padding-top: 5px;
  padding-bottom: 5px;
}

#protocolPartyPickerDialog .pp-contact .pp-avatar {
  width: 26px;
  height: 26px;
  font-size: 10px;
  background: color-mix(in srgb, var(--muted) 14%, var(--panel-solid));
  color: var(--muted);
}

#protocolPartyPickerDialog .pp-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

#protocolPartyPickerDialog .pp-name,
#protocolPartyPickerDialog .pp-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#protocolPartyPickerDialog .pp-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

/* A-Z-Abschnitte, beim Scrollen oben stehend */
#protocolPartyPickerDialog .pp-letter {
  position: sticky;
  top: -8px;
  z-index: 1;
  margin: 6px 0 2px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--panel-solid);
}

#protocolPartyPickerDialog .pp-letter:first-child {
  margin-top: 0;
}

/* "2 Ansprechpartner ›" zum Auf-/Zuklappen */
#protocolPartyPickerDialog .pp-more,
body.theme-light #protocolPartyPickerDialog .pp-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  min-height: 0;
  padding: 0 8px;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
}

#protocolPartyPickerDialog .pp-more:hover {
  color: var(--text);
}

#protocolPartyPickerDialog .pp-more span {
  display: inline-block;
  transition: transform 120ms ease;
}

#protocolPartyPickerDialog .pp-more.is-open span {
  transform: rotate(90deg);
}

/* Ausgewählte Einträge als Chips über der Liste */
#protocolPartyPickerDialog .pp-chips {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 88px;
  overflow-y: auto;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
}

#protocolPartyPickerDialog .pp-chips.hidden {
  display: none;
}

#protocolPartyPickerDialog .pp-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 2px 4px 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

#protocolPartyPickerDialog .pp-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#protocolPartyPickerDialog .pp-chip button,
body.theme-light #protocolPartyPickerDialog .pp-chip button {
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
}

#protocolPartyPickerDialog .pp-chip button:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

#protocolPartyPickerDialog .pp-code {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

#protocolPartyPickerDialog .pp-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid color-mix(in srgb, var(--muted) 60%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#protocolPartyPickerDialog .pp-row.is-selected .pp-check {
  background: var(--accent);
  border-color: var(--accent);
}

#protocolPartyPickerDialog .pp-row.is-selected .pp-check::after {
  content: "";
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

#protocolPartyPickerDialog .pp-empty {
  margin: 24px 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

#protocolPartyPickerDialog .cm-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px !important;
  border-top: 1px solid var(--border);
}

#protocolPartyPickerDialog .pp-selected-info {
  margin-right: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

#protocolPartyPickerDialog #confirmProtocolPartyPickerDialog:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 700px) {
  #protocolPartyPickerDialog.party-picker-modern > form {
    width: 100%;
    height: 100%;
  }
}

/* ===== Protokoll-Seitenleiste (modern) ===== */
#sidebarProtocolFocusNav {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* Zurück/Hauptseite: dezenter Link mit Trennlinie statt normaler Menüpunkt */
#sidebarProtocolFocusNav .ava-focus-back-button,
body.theme-light #sidebarProtocolFocusNav .ava-focus-back-button {
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 6px;
  border-radius: 10px;
  box-shadow: inset 0 -1px 0 var(--border);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#sidebarProtocolFocusNav .ava-focus-back-button:hover {
  color: var(--text);
}

#sidebarProtocolFocusNav .sidebar-nav-section-label {
  padding: 10px 10px 4px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

/* Kontext-Karte "aktuelles Protokoll" */
#sidebarProtocolFocusNav .pf-context {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 5%, var(--panel-solid));
  font-size: 12px;
  color: var(--muted);
  max-width: 220px;
}

#sidebarProtocolFocusNav .pf-context strong {
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sidebarProtocolFocusNav .pf-context span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sidebarProtocolFocusNav .pf-context .pf-context-flag {
  align-self: flex-start;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  color: #b45309;
  font-size: 11px;
  font-weight: 600;
}

/* Zähler rechts im Menüpunkt */
#sidebarProtocolFocusNav .pf-count {
  margin-left: auto;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}

#sidebarProtocolFocusNav .pf-count:empty {
  display: none;
}

#sidebarProtocolFocusNav .ghost[data-active-view="true"] .pf-count {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

/* Projekteinstellungen unten abgesetzt, wie Einstellungen in der Hauptleiste */
#sidebarProtocolFocusNav #protocolFocusProjectSettingsButton {
  margin-top: auto;
}

#sidebarProtocolFocusNav #protocolFocusProjectSettingsButton::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  border-top: 1px solid var(--border);
}

.sidebar.collapsed #sidebarProtocolFocusNav .pf-context,
.sidebar.collapsed #sidebarProtocolFocusNav .pf-count {
  display: none;
}

/* ===== Protokoll: aus dem Vorgängerprotokoll übernommene Punkte ===== */
.pe-card .pe-chip.pe-carried {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--muted);
  border-color: transparent;
  font-size: 11px;
}

.pe-card.is-carried .pe-text {
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}

.ped-carried-hint {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
  background: color-mix(in srgb, #f59e0b 10%, transparent);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}

.ped-carried-hint[hidden] {
  display: none;
}

/* Gesperrte Felder im Punkt-Fenster sichtbar ausgrauen */
.protocol-entry-dialog.is-carried .protocol-entry-text-editor,
.protocol-entry-dialog.is-carried #protocolEntryLotChips,
.protocol-entry-dialog.is-carried #protocolEntryLot,
.protocol-entry-dialog.is-carried #protocolEntryResponsibleButton,
.protocol-entry-dialog.is-carried #protocolEntryAttachmentDropzone {
  opacity: 0.6;
  pointer-events: none;
}

.protocol-entry-dialog.is-carried #protocolEntryText {
  cursor: default;
}

/* Kalender-Symbol am Knopf "Fertigstellungsdatum ändern" (übernommene Punkte) */
.pe-actions .pe-icon-svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pe-card .pe-chip.pe-carried {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pe-card .pe-chip.pe-carried svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== AVA / Ausschreibung: moderne Kopfleiste im LV-Editor ===== */
.ava-editor-head.ava-head-modern {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px 18px 12px;
}

.ava-head-modern .ava-head-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ava-head-modern .ava-back-to-list-button,
body.theme-light .ava-head-modern .ava-back-to-list-button {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-solid);
  box-shadow: none;
  color: var(--text);
}

.ava-head-modern .ava-back-to-list-button:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid));
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.ava-head-modern .ava-back-to-list-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ava-head-modern .ava-editor-head-title {
  min-width: 0;
  text-align: left;
}

.ava-head-modern .ava-editor-head-title h3 {
  font-size: 1.3rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ava-head-modern .ava-active-lv-subtitle {
  font-size: 13px;
}

/* Werkzeugleiste: links Ansicht/Prüfung/Ausgabe, rechts Suche + Neu */
.ava-head-modern .ava-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
}

.ava-head-modern .ava-tb-group,
.ava-head-modern .ava-tb-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 0 1 auto;
  min-width: 0;
}

.ava-head-modern .ava-tb-right {
  margin-left: auto;
}

.ava-head-modern .ava-tb-btn,
body.theme-light .ava-head-modern .ava-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
  white-space: nowrap;
}

.ava-head-modern .ava-tb-btn.ghost,
body.theme-light .ava-head-modern .ava-tb-btn.ghost {
  border: 1px solid var(--border);
  background: var(--panel-solid);
  color: var(--text);
}

.ava-head-modern .ava-tb-btn.ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-solid));
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.ava-head-modern .ava-tb-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Noch nicht umgesetzte Funktionen nicht als ausgegraute Platzhalter zeigen */
.ava-head-modern .ava-tb-placeholder,
.ava-head-modern .ava-dropdown:has(> #avaExtrasButton:disabled) {
  display: none !important;
}

.ava-head-modern .ava-tb-icon,
.ava-head-modern .ava-tb-chevron,
.ava-head-modern .ava-tb-search-icon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.ava-head-modern .ava-tb-icon {
  width: 16px;
  height: 16px;
  stroke-width: 1.9;
  opacity: 0.8;
}

.ava-head-modern .ava-tb-chevron {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
  margin-right: -3px;
  opacity: 0.6;
}

.ava-head-modern .ava-tb-primary,
body.theme-light .ava-head-modern .ava-tb-primary {
  padding: 0 12px 0 10px;
}

.ava-head-modern .ava-tb-primary .ava-tb-icon,
.ava-head-modern .ava-tb-primary .ava-tb-chevron {
  opacity: 1;
}

.ava-head-modern .ava-icon-button,
body.theme-light .ava-head-modern .ava-icon-button {
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-solid);
  box-shadow: none;
}

/* Suchfeld mit eigenem Lupen-Symbol */
.ava-head-modern .ava-tree-filter {
  margin-left: 0;
}

.ava-head-modern .ava-tb-search-icon {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  stroke-width: 2;
  color: var(--muted);
  pointer-events: none;
}

.ava-head-modern .ava-tree-filter input,
body.theme-light .ava-head-modern .ava-tree-filter input {
  width: 220px;
  height: 34px;
  min-height: 34px;
  padding: 0 12px 0 34px !important;
  border-radius: 10px;
  font-size: 13px;
  background-image: none;
}

@media (max-width: 700px) {
  .ava-head-modern .ava-tb-right {
    width: 100%;
  }
  .ava-head-modern .ava-tree-filter {
    flex: 1 1 auto;
  }
  .ava-head-modern .ava-tree-filter input {
    width: 100%;
  }
}

/* ===== AVA: "Positionen kopieren" im modernen Stil (Tabelle unverändert) ===== */
.ava-copy-modern .ava-copy-positions-dialog-card {
  padding: 0;
  border-radius: 16px;
}

.ava-copy-modern .bm-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px 14px !important;
  border-bottom: 1px solid var(--border);
}

.ava-copy-modern .bm-avatar svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ava-copy-modern .dialog-body {
  padding: 16px 20px 12px !important;
}

/* Filter: Beschriftung klein über dem Feld, 2x2 Raster */
.ava-copy-modern .ava-copy-filter-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin-bottom: 16px;
}

.ava-copy-modern .ava-copy-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  margin: 0;
}

.ava-copy-modern .ava-copy-field > span:first-child {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.ava-copy-modern .ava-copy-field select,
.ava-copy-modern .ava-copy-field input {
  width: 100%;
  height: 38px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
}

.ava-copy-modern .ava-copy-search {
  position: relative;
  display: flex;
  align-items: center;
}

.ava-copy-modern .ava-copy-search svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.ava-copy-modern .ava-copy-field .ava-copy-search input {
  padding-left: 36px;
}

.ava-copy-modern .ava-copy-table-wrapper {
  border-radius: 12px;
}

/* Fußzeile: Auswahl links, Aktionen rechts */
.ava-copy-modern .ava-copy-positions-footer {
  padding: 12px 20px !important;
  border-top: 1px solid var(--border);
  gap: 8px;
}

.ava-copy-modern .ava-copy-selected-count {
  flex: 1;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.ava-copy-modern #avaCopyInsertButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 700px) {
  .ava-copy-modern .ava-copy-filter-grid {
    grid-template-columns: 1fr;
  }
}

.ava-copy-modern .ava-copy-selected-count.has-selection {
  color: var(--accent);
}

/* ===== AVA: Kopfzeile der Projekt-/LV-Liste (modern) ===== */
.ava-panel-head-modern .project-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.ava-panel-head-modern .ava-lv-panel-head-title {
  gap: 12px;
  min-width: 0;
}

.ava-panel-head-modern .ava-back-to-overview-button,
body.theme-light .ava-panel-head-modern .ava-back-to-overview-button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-solid);
  box-shadow: none;
  color: var(--text);
}

.ava-panel-head-modern .ava-back-to-overview-button:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid));
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.ava-panel-head-modern .ava-back-to-overview-button svg,
.ava-panel-head-modern .ava-panel-btn svg,
.ava-panel-head-modern .ava-panel-search svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.ava-panel-head-modern .ava-lv-panel-title-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ava-panel-head-modern .ava-lv-panel-title-wrap .eyebrow {
  margin: 0;
}

.ava-panel-head-modern .ava-lv-panel-title {
  font-size: 1.35rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ava-panel-head-modern .ava-lv-panel-head-actions {
  gap: 8px;
  flex-wrap: wrap;
}

.ava-panel-head-modern .ava-panel-search {
  position: relative;
  display: flex;
  align-items: center;
}

.ava-panel-head-modern .ava-panel-search svg {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}

.ava-panel-head-modern .ava-panel-search input,
body.theme-light .ava-panel-head-modern .ava-panel-search input {
  width: 240px;
  height: 36px;
  min-height: 36px;
  padding: 0 12px 0 34px;
  border-radius: 10px;
  font-size: 13.5px;
}

.ava-panel-head-modern .ava-panel-btn,
body.theme-light .ava-panel-head-modern .ava-panel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  min-height: 36px;
  padding: 0 14px 0 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: none;
  white-space: nowrap;
}

.ava-panel-head-modern .ava-panel-btn.ghost,
body.theme-light .ava-panel-head-modern .ava-panel-btn.ghost {
  border: 1px solid var(--border);
  background: var(--panel-solid);
  color: var(--text);
}

.ava-panel-head-modern .ava-panel-btn.ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-solid));
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.ava-panel-head-modern .ava-panel-btn svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 700px) {
  .ava-panel-head-modern .ava-lv-panel-head-actions,
  .ava-panel-head-modern .ava-panel-search {
    width: 100%;
  }
  .ava-panel-head-modern .ava-panel-search input {
    width: 100%;
  }
}

/* Schloss-Symbol (Linien-Stil) in Status-Chips und Hinweisbalken statt Emoji */
.pl-status svg,
.lock-ico {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  vertical-align: -1px;
}

.pl-status:has(> svg) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ava-kk-locked-banner .lock-ico,
.ava-kk-editlock-banner .lock-ico,
#avaLvReadonlyBanner .lock-ico {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
}

/* ===== Einheitliche Aktions-Symbole (Bearbeiten, Kopieren, Plus, Löschen):
   gleiche Größe, Strichstärke und runde Enden in allen Listen ===== */
.pl-icon-btn svg,
.icon-ghost svg,
.inline-reminder-btn svg,
.payments-action-button .icon svg,
.pe-actions .pe-icon-svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.payments-action-button .icon {
  display: inline-flex;
}

/* ===== AVA-Seitenleiste (modern): Projekt-Karte + Ablauf-Schritte ===== */
#sidebarAvaFocusNav.ava-nav-modern {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

#sidebarAvaFocusNav .ava-focus-back-button,
body.theme-light #sidebarAvaFocusNav .ava-focus-back-button {
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 6px;
  box-shadow: inset 0 -1px 0 var(--border);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#sidebarAvaFocusNav .ava-focus-back-button:hover {
  color: var(--text);
}

#sidebarAvaFocusNav .sidebar-nav-section-label {
  padding: 10px 10px 4px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

/* Projekt-Karte */
#sidebarAvaFocusNav .ava-nav-project {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 6px 0 4px;
  padding: 9px 12px;
  max-width: 220px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 5%, var(--panel-solid));
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

#sidebarAvaFocusNav .ava-nav-project:hover,
#sidebarAvaFocusNav .ava-nav-project:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  outline: none;
}

#sidebarAvaFocusNav .ava-nav-project small {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

#sidebarAvaFocusNav .ava-nav-project strong {
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ablauf-Schritte: Symbol im Kreis, verbunden durch eine feine Linie */
#sidebarAvaFocusNav .ava-step {
  position: relative;
  min-height: 44px;
}

#sidebarAvaFocusNav .ava-step .nav-icon {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--muted) 45%, transparent);
  background: var(--panel-solid);
  opacity: 1;
}

#sidebarAvaFocusNav .ava-step .nav-icon svg {
  width: 15px;
  height: 15px;
}

/* Verbindungslinie zum nächsten Schritt */
#sidebarAvaFocusNav .ava-step:not(.hidden) ~ .ava-step:not(.hidden)::after {
  content: "";
  position: absolute;
  left: 23px;
  top: -10px;
  height: 20px;
  z-index: 2;
  border-left: 1.5px solid color-mix(in srgb, var(--muted) 55%, transparent);
}

#sidebarAvaFocusNav .ava-step[data-active-view="true"] .nav-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

#sidebarAvaFocusNav .ava-step:disabled .nav-icon {
  border-style: dashed;
}

/* Status rechts (im HTML vor der Beschriftung, per order nach rechts) */
#sidebarAvaFocusNav .ava-step-meta {
  order: 3;
  margin-left: auto;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}

#sidebarAvaFocusNav .ava-step-meta:empty {
  display: none;
}

#sidebarAvaFocusNav .ava-step-meta:has(> svg) {
  background: transparent;
  padding: 0;
}

#sidebarAvaFocusNav .ava-step-meta svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#sidebarAvaFocusNav .ava-step[data-active-view="true"] .ava-step-meta {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

/* Gesperrter Schritt: lesbar, aber zurückhaltend (statt stark ausgegraut) */
#sidebarAvaFocusNav .ava-step:disabled,
body.theme-light #sidebarAvaFocusNav .ava-step:disabled {
  opacity: 0.6;
}

/* Einstellungen unten abgesetzt */
#sidebarAvaFocusNav .ava-nav-settings {
  margin-top: auto;
}

#sidebarAvaFocusNav .ava-nav-settings::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  border-top: 1px solid var(--border);
}

.sidebar.collapsed #sidebarAvaFocusNav .ava-nav-project,
.sidebar.collapsed #sidebarAvaFocusNav .ava-step-meta,
.sidebar.collapsed #sidebarAvaFocusNav .ava-step::after {
  display: none;
}

/* ===== Einstellungen › Rollen (modern): Rollenliste + Schalter je Menü ===== */
.rv-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.rv-roles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 12px;
}

.rv-role,
body.theme-light .rv-role {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.rv-role:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.rv-role.is-active,
body.theme-light .rv-role.is-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.rv-role-avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-solid));
  color: var(--accent);
}

.rv-role-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.rv-role-main strong {
  font-size: 14px;
}

.rv-role-main small {
  font-size: 12px;
  color: var(--muted);
}

.rv-role-count {
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--muted);
}

.rv-role.is-active .rv-role-count {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}

.rv-detail {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
  padding: 16px 18px 8px;
  min-width: 0;
}

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

.rv-detail-head .eyebrow {
  margin: 0;
}

.rv-detail-head h3 {
  margin: 2px 0;
  font-size: 1.3rem;
}

.rv-summary {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.rv-users {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 360px;
}

.rv-user {
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  font-size: 12px;
  font-weight: 600;
}

.rv-user-none {
  font-weight: 500;
  color: var(--muted);
}

/* Spaltenköpfe Desktop / Handy */
.rv-columns,
.rv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 90px;
  align-items: center;
}

.rv-columns {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 0 4px;
  background: var(--panel-solid);
}

.rv-col {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.rv-col svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rv-group {
  padding: 8px 0 10px;
}

.rv-group + .rv-group {
  border-top: 1px solid var(--border);
}

.rv-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 4px;
}

.rv-group-head h4 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.rv-group-toggle,
body.theme-light .rv-group-toggle {
  height: 24px;
  min-height: 0;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.rv-group-toggle:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.rv-row {
  min-height: 40px;
  border-radius: 8px;
}

.rv-row:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.rv-row-label {
  padding-left: 8px;
  font-size: 14px;
  font-weight: 500;
}

.rv-row.is-child .rv-row-label {
  position: relative;
  padding-left: 30px;
  font-size: 13px;
  color: var(--muted);
}

.rv-row.is-child .rv-row-label::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 9px;
  border-top: 1.5px solid color-mix(in srgb, var(--muted) 45%, transparent);
}

/* Unterpunkt, dessen Hauptmenü aus ist: wirkt ohnehin nicht */
.rv-row.is-muted {
  opacity: 0.5;
}

.rv-cell {
  display: flex;
  justify-content: center;
}

.rv-na {
  color: var(--muted);
  opacity: 0.6;
}

/* Schalter */
.rv-switch {
  position: relative;
  display: inline-flex;
  width: 38px;
  height: 22px;
  cursor: pointer;
}

.rv-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.rv-switch span {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  transition: background 140ms ease;
  position: relative;
  pointer-events: none;
}

.rv-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
  transition: transform 140ms ease;
}

.rv-switch input:checked + span {
  background: var(--accent);
}

.rv-switch input:checked + span::after {
  transform: translateX(16px);
}

.rv-switch input:focus-visible + span {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .rv-layout {
    grid-template-columns: 1fr;
  }
  .rv-roles {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .rv-roles .rv-role,
  body.theme-light .rv-roles .rv-role {
    flex: 0 0 auto;
    width: auto;
  }
  .rv-roles .rv-role-count {
    display: none;
  }
  .rv-columns,
  .rv-row {
    grid-template-columns: minmax(0, 1fr) 64px 64px;
  }
  .rv-users {
    justify-content: flex-start;
  }
}

/* ===== Stammdaten › Artikel (modern) ===== */
/* Kopf mit Titel und Reitern scrollt mit, die Werkzeugleiste bleibt oben kleben */
#articlesShell #articlesTabHero.articles-head-modern {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 20px 0;
  background: transparent;
  backdrop-filter: none;
}

body.theme-light #articlesShell #articlesTabHero.articles-head-modern {
  background: transparent;
}

#articlesShell #articlesToolbar,
#articlesShell #templatesToolbar,
#articlesShell #regieHeader {
  top: 56px;
}

.articles-head-title .eyebrow {
  margin: 0;
}

.articles-head-title h2 {
  margin: 2px 0 0;
  font-size: 1.5rem;
}

#articlesShell .articles-tabs {
  padding: 0;
}

#articlesShell .articles-tabs .settings-tab,
body.theme-light #articlesShell .articles-tabs .settings-tab {
  position: relative;
  background: transparent !important;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 12px 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted) !important;
}

#articlesShell .articles-tabs .settings-tab:hover {
  color: var(--text) !important;
}

#articlesShell .articles-tabs .settings-tab[data-active="true"] {
  color: var(--accent) !important;
}

#articlesShell .articles-tabs .settings-tab[data-active="true"]::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}

/* Artikel-Fenster */
#articleModal.article-modal-modern > form {
  width: min(820px, 96vw);
  max-height: min(860px, 92vh);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

#articleModal .bm-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px 12px !important;
  border-bottom: 1px solid var(--border);
}

#articleModal .bm-avatar svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#articleModal .cm-body {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px !important;
}

#articleModal .article-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
}

#articleModal .article-grid .cm-span-2 {
  grid-column: 1 / -1;
}

#articleModal .article-grid .input-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

#articleModal .article-grid .input-row > label {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

#articleModal .article-grid input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
}

#articleModal .article-grid input[readonly] {
  background: color-mix(in srgb, var(--muted) 8%, transparent);
}

#articleModal .article-text-row .rich-editor {
  border-radius: 12px;
}

#articleModal .article-text-row .rich-input {
  min-height: 180px;
}

#articleModal .cm-actions {
  padding: 10px 20px !important;
  border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
  #articleModal.article-modal-modern > form {
    width: 100%;
    max-height: none;
    height: 100%;
  }
  #articleModal .article-grid {
    grid-template-columns: 1fr 1fr;
  }
  #articleModal .bm-avatar {
    display: none;
  }
}

/* ===== Formatierungsleisten (modern): einheitliche Linien-Symbole ===== */
.rich-toolbar:has(.rt-btn) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px 6px;
}

.rich-toolbar .rt-btn.rt-btn,
body.theme-light .rich-toolbar .rt-btn.rt-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: none !important;
  border-radius: 8px;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  cursor: pointer;
}

.rich-toolbar .rt-btn.rt-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  color: var(--text) !important;
}

.rich-toolbar .rt-btn.rt-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.rich-toolbar .rt-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Trenner vor der Farbwahl */
.rich-toolbar .rt-color.rt-color {
  margin-left: 6px;
}

.rich-toolbar .rt-color.rt-color::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 7px;
  bottom: 7px;
  border-left: 1px solid var(--border);
}

.rich-toolbar .rt-color .rt-icon {
  margin-top: -4px;
}

/* Farbbalken unter dem "A" statt schwarzem Kästchen */
.rich-toolbar .rt-color .color-swatch,
body.theme-light .rich-toolbar .rt-color .color-swatch {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  width: auto;
  height: 3px;
  border: none;
  border-radius: 2px;
}

/* ===== Vorlagen & Regieposition (modern) ===== */
#articlesShell #regieHeader {
  position: static;
  background: transparent;
  backdrop-filter: none;
}

body.theme-light #articlesShell #regieHeader {
  background: transparent;
}

.regie-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-size: 13px;
  line-height: 1.45;
}

.regie-info p {
  margin: 0;
}

.regie-info-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
}

.pl-item.pl-item-static {
  cursor: default;
}

/* Vorlagen-Fenster */
#templateModal.template-modal-modern > form {
  width: min(900px, 96vw);
  height: min(820px, 92vh);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

#templateModal .bm-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px 12px !important;
  border-bottom: 1px solid var(--border);
}

#templateModal .bm-avatar svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#templateModal .cm-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 18px 20px !important;
}

#templateModal .input-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

#templateModal .input-row > label {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

#templateModal #templateNameInput {
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
}

#templateModal .template-articles-row {
  flex: 1 1 auto;
  min-height: 0;
}

#templateModal .template-articles-row .table-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border-radius: 12px;
}

#templateModal .cm-actions {
  padding: 10px 20px !important;
  border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
  #templateModal.template-modal-modern > form {
    width: 100%;
    height: 100%;
  }
  #templateModal .bm-avatar {
    display: none;
  }
}

/* Formatierungs-Symbole etwas kräftiger */
.rich-toolbar .rt-btn.rt-btn,
body.theme-light .rich-toolbar .rt-btn.rt-btn {
  color: color-mix(in srgb, var(--text) 72%, transparent) !important;
}

.rich-toolbar .rt-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.3;
}

/* Vorlagen-Fenster: Artikelauswahl als saubere Tabelle */
#templateModal .template-articles-row table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

#templateModal .template-articles-row th,
#templateModal .template-articles-row td {
  padding: 9px 10px;
  text-align: left;
  font-size: 13.5px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#templateModal .template-articles-row th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-solid);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

#templateModal .template-articles-row th:nth-child(1),
#templateModal .template-articles-row td:nth-child(1) { width: 52px; text-align: center; }
#templateModal .template-articles-row th:nth-child(2),
#templateModal .template-articles-row td:nth-child(2) { width: 90px; color: var(--accent); font-weight: 600; }
#templateModal .template-articles-row th:nth-child(3),
#templateModal .template-articles-row td:nth-child(3) { width: auto; }
#templateModal .template-articles-row th:nth-child(4),
#templateModal .template-articles-row td:nth-child(4) { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
#templateModal .template-articles-row th:nth-child(5),
#templateModal .template-articles-row td:nth-child(5) { width: 70px; }

#templateModal .template-articles-row tbody tr {
  cursor: pointer;
}

#templateModal .template-articles-row tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

#templateModal .template-articles-row tbody tr:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

#templateModal .template-articles-row thead th:first-child {
  font-size: 0;
}

#templateModal .template-articles-row th:nth-child(2) {
  color: var(--muted);
  font-weight: 700;
}

/* ===== Einstellungen › Bürokosten (modern): Kennzahlen, Berechnungsgrundlage,
   Posten als Liste statt Tabelle ===== */
.oc-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.oc-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
}

.oc-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.oc-stat strong {
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oc-stat small {
  font-size: 12px;
  color: var(--muted);
}

.oc-stat.is-total {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-solid));
}

.oc-stat.is-total strong {
  color: var(--accent);
}

/* Berechnungsgrundlage */
.oc-params {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
}

.oc-params-head h3,
.oc-list-head h3 {
  margin: 0;
  font-size: 15px;
}

.oc-params-head p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.oc-params-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.oc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* Eingabefeld mit Einheit rechts drinnen (h / Monat, €) */
.oc-input-unit {
  position: relative;
  display: flex;
  align-items: center;
}

body.settings-page .oc-view .oc-input-unit input {
  width: 100%;
  padding-right: 64px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body.settings-page .oc-params .oc-input-unit input {
  width: 150px;
  font-size: 15px;
}

body.settings-page .oc-row .oc-input-unit input {
  padding-right: 28px;
}

.oc-input-unit em {
  position: absolute;
  right: 10px;
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  pointer-events: none;
}

/* Hinweis freie Mitarbeiter */
.oc-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-size: 13px;
  line-height: 1.45;
}

.oc-info p {
  margin: 0;
}

.oc-info-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Postenliste */
.oc-list {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
  padding: 14px 16px 10px;
}

.oc-list-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
}

.oc-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.oc-columns,
.oc-row {
  display: grid;
  grid-template-columns: 32px minmax(180px, 1fr) 150px 150px 140px 120px 36px;
  gap: 10px;
  align-items: center;
}

.oc-columns {
  padding: 8px 8px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.oc-list.is-empty .oc-columns {
  display: none;
}

.oc-right {
  text-align: right;
}

.oc-row {
  padding: 6px 8px;
  border-radius: 10px;
}

.oc-row + .oc-row {
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.oc-row:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.oc-index {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

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

.oc-cell-label {
  display: none;
}

body.settings-page .oc-row input,
body.settings-page .oc-row select {
  width: 100%;
  min-width: 0;
}

.oc-row .office-due-note {
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

.oc-row .office-due-note:empty {
  display: none;
}

.oc-monthly {
  align-items: flex-end;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Bei monatlichen Posten ist "je Monat" = Betrag, daher nur dezent */
.oc-monthly .is-same {
  font-weight: 500;
  color: var(--muted);
}

.oc-row .delete-column {
  justify-self: end;
}

.oc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 28px 12px;
  text-align: center;
}

.oc-empty span {
  max-width: 440px;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .oc-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Schmal: jeder Posten als eigene Karte, Beschriftung je Feld */
@media (max-width: 860px) {
  .oc-columns {
    display: none;
  }
  .oc-list {
    padding: 12px;
  }
  .oc-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "text text"
      "freq month"
      "amount monthly";
    position: relative;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .oc-row + .oc-row {
    margin-top: 10px;
    border-top: 1px solid var(--border);
  }
  .oc-row .oc-index {
    display: none;
  }
  .oc-row .oc-cell-text { grid-area: text; padding-right: 40px; }
  .oc-row .oc-cell-freq { grid-area: freq; }
  .oc-row .oc-cell-month { grid-area: month; }
  .oc-row .oc-cell-amount { grid-area: amount; }
  .oc-row .oc-monthly { grid-area: monthly; align-items: flex-start; }
  .oc-row .delete-column {
    position: absolute;
    top: 12px;
    right: 12px;
  }
  .oc-cell-label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .oc-params-fields,
  .oc-field {
    width: 100%;
  }
  body.settings-page .oc-params .oc-input-unit input {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .oc-stats {
    gap: 8px;
  }
  .oc-stat {
    padding: 12px;
  }
  .oc-stat strong {
    font-size: 1.15rem;
  }
}

/* ===== Einstellungen › Feiertage (modern): Erfassen-Karte + Jahre als
   aufklappbare Karten. Nutzt .oc-info / .oc-field / .oc-empty aus Bürokosten. ===== */
.hd-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hd-add {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
}

.hd-add-head h3 {
  margin: 0;
  font-size: 15px;
}

.hd-add-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
}

.hd-field-date {
  flex: 0 0 180px;
}

.hd-field-name {
  flex: 1 1 260px;
  max-width: 480px;
}

body.settings-page .hd-add .oc-field input {
  width: 100%;
  font-size: 15px;
}

.hd-years {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hd-year {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
  overflow: hidden;
}

.hd-year-toggle,
body.theme-light .hd-year-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
  padding: 12px 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.hd-year-toggle:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.hd-year-toggle strong {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.hd-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(90deg);
  transition: transform 140ms ease;
}

.hd-year.is-collapsed .hd-chevron {
  transform: none;
}

.hd-year-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.hd-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.hd-chip.is-accent {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

.hd-list {
  padding: 4px 8px 8px;
  border-top: 1px solid var(--border);
}

.hd-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
}

.hd-row + .hd-row {
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.hd-row:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

/* Datum als kleine Kalender-Kachel */
.hd-date {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-solid));
  color: var(--accent);
}

.hd-date strong {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.hd-date small {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hd-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hd-main strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hd-main small {
  font-size: 12px;
  color: var(--muted);
}

.hd-row.is-past .hd-date {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--muted);
}

.hd-row.is-past .hd-main strong {
  font-weight: 500;
  color: var(--muted);
}

.hd-row.is-next {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

@media (max-width: 860px) {
  .hd-field-date,
  .hd-field-name {
    flex: 1 1 100%;
    max-width: none;
  }
  .hd-add-fields .primary {
    width: 100%;
  }
  .hd-year-toggle .hd-chip {
    display: none;
  }
}

/* ===== Einstellungen › Firma (modern): Firmendaten, Logo und Fußzeile als
   Abschnitte in einem Reiter (Logo/Fußzeile waren früher eigene Reiter) ===== */
.cf-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.cf-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
  scroll-margin-top: 12px;
}

.cf-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cf-section-head h3 {
  margin: 0;
  font-size: 15px;
}

.cf-section-head p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.cf-section-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-solid));
  color: var(--accent);
}

.cf-section-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cf-field > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.cf-field > small {
  font-size: 12px;
  color: var(--muted);
}

body.settings-page .cf-field > input[type="text"] {
  width: 100%;
  max-width: 360px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.cf-view .rich-editor {
  min-height: 110px;
}

.cf-view #footerText {
  min-height: 90px;
}

/* Logo: Vorschau als "Briefkopf", Logo an der gewählten Position */
.cf-logo-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 120px;
  padding: 18px 20px;
  border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent);
  border-radius: 12px;
  background: #ffffff;
}

.cf-logo-stage[data-position="left"] {
  justify-content: flex-start;
}

.cf-logo-stage[data-position="center"] {
  justify-content: center;
}

.cf-logo-stage img {
  max-height: 76px; /* ~2 cm bei 96 dpi */
  max-width: 100%;
  width: auto;
}

.cf-logo-empty {
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: #8a8f98;
}

.cf-logo-stage.has-logo .cf-logo-empty {
  display: none;
}

.cf-logo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.cf-file-input,
.cf-hidden-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cf-upload {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.cf-upload:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}

.cf-upload:focus-within {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}

.cf-upload svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cf-segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.cf-segmented button,
body.theme-light .cf-segmented button {
  min-height: 0;
  height: 30px;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.cf-segmented button:hover {
  color: var(--text);
}

.cf-segmented button.is-active,
body.theme-light .cf-segmented button.is-active {
  background: var(--panel-solid);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

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

@media (max-width: 480px) {
  .cf-section {
    padding: 14px;
  }
  .cf-logo-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cf-upload {
    justify-content: center;
  }
  .cf-segmented {
    display: flex;
  }
  .cf-segmented button {
    flex: 1 1 0;
  }
}

/* ===== Einstellungen: Formatierungsleisten (modern) - Linien-Symbole wie im
   Hauptprogramm, Leiste und Textfeld als ein zusammenhängender Editor ===== */
body.settings-page .rich-toolbar:has(.rt-btn) {
  gap: 2px;
  margin: 0;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-bottom-color: color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

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

body.settings-page .rich-toolbar:has(.rt-btn) + .rich-editor {
  margin-top: 0;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

body.settings-page .rich-toolbar .rt-btn.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
  color: var(--accent) !important;
}

/* Textgröße: schlanke Auswahl rechts neben der Farbe, mit Trennstrich */
body.settings-page .rich-toolbar:has(.rt-btn) .rich-size-select {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
  height: 30px;
  min-height: 30px;
  margin-left: 8px;
  padding: 0 26px 0 10px;
  border: none;
  border-left: 1px solid var(--border);
  border-radius: 0 8px 8px 0;
  background-color: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

body.settings-page .rich-toolbar:has(.rt-btn) .rich-size-select:hover,
body.settings-page .rich-toolbar:has(.rt-btn) .rich-size-select:focus {
  color: var(--text);
  background-color: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ===== Einstellungen › Firma: Firmenzeile/Fußzeile als "Briefpapier" =====
   Gleiche Grundschrift wie im Druck (main.js: LETTERHEAD_STYLES) - bei
   Änderung beide Stellen anpassen. Weißer Hintergrund in beiden Designs,
   Textbreite = Blattbreite minus Ränder (--letterhead-width aus settings.js). */
body.settings-page .rich-editor.letterhead-editor,
body.settings-page.theme-light .rich-editor.letterhead-editor {
  background: #ffffff;
  font-family: "Manrope", Arial, sans-serif;
  white-space: pre-wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}

body.settings-page .rich-editor.letterhead-editor-company {
  font-size: 11.5px;
  line-height: 1.3;
  color: #111111;
  text-align: left;
  padding-left: 14px;
  padding-right: max(14px, calc(100% - var(--letterhead-width, 17.4cm) - 14px));
}

body.settings-page .rich-editor.letterhead-editor-footer {
  font-size: 9.5px;
  line-height: 1.25;
  color: #555555;
  text-align: center;
  padding-left: max(14px, calc((100% - var(--letterhead-width, 17.4cm)) / 2));
  padding-right: max(14px, calc((100% - var(--letterhead-width, 17.4cm)) / 2));
}

body.settings-page .rich-editor.letterhead-editor:empty::before {
  color: #9ca3af;
}

.cf-paper-hint {
  font-size: 12px;
  color: var(--muted);
}

/* ===== Mahnfenster (modern): Historie als Karten, Mahnstufe/Spesenart als
   Knopfleisten, Summenbox. Felder nutzen .flyover-fields wie das Zahlungsfenster. ===== */
#billingReminderDialog .dialog-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#billingReminderDialog .rm-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

#billingReminderDialog .rm-section-head h3 {
  margin: 0;
  font-size: 15px;
}

#billingReminderDialog .rm-form .flyover-fields {
  margin-top: 0;
}

.rm-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.rm-form {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Farbe je Mahnstufe: Erinnerung blau, 1. gelb, 2. orange, Letzte rot */
[data-stage-tone="0"] { --rm-tone: var(--accent); }
[data-stage-tone="1"] { --rm-tone: #d97706; }
[data-stage-tone="2"] { --rm-tone: #ea580c; }
[data-stage-tone="3"] { --rm-tone: #dc2626; }

.rm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rm-empty {
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.rm-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--rm-tone, var(--accent));
  border-radius: 12px;
  background: var(--panel-solid);
}

.rm-stage {
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rm-tone, var(--accent)) 15%, transparent);
  color: var(--rm-tone, var(--accent));
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.rm-item-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rm-item-main strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rm-item-main small {
  font-size: 12px;
  color: var(--muted);
}

.rm-item-main .rm-item-note {
  font-style: italic;
}

.rm-item-amount {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rm-item-actions {
  display: inline-flex;
  gap: 4px;
}

#billingReminderDialog .rm-item-actions .icon-ghost {
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

#billingReminderDialog .rm-item-actions svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#billingReminderDialog .rm-item-actions .reminder-action-delete:hover {
  color: var(--danger, #dc2626);
}

/* Knopfleisten (Mahnstufe, Spesenart) */
.rm-hidden-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.rm-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

#billingReminderDialog .rm-segmented button {
  flex: 1 1 0;
  min-height: 0;
  height: 34px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

#billingReminderDialog .rm-segmented button:hover:not(:disabled) {
  color: var(--text);
}

#billingReminderDialog .rm-segmented button.is-active {
  background: var(--panel-solid);
  color: var(--rm-tone, var(--accent));
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

#billingReminderDialog .rm-segmented button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Eingabe mit Einheit (€, %) */
.rm-input-unit {
  position: relative;
  display: flex;
  align-items: center;
}

#billingReminderDialog .rm-input-unit input {
  padding-right: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rm-input-unit em {
  position: absolute;
  right: 12px;
  font-style: normal;
  font-size: 13px;
  color: var(--muted);
  pointer-events: none;
}

/* Summenbox */
.rm-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid var(--border);
}

.rm-totals > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rm-totals span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.rm-totals strong {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.rm-totals .is-sum strong {
  font-size: 17px;
  color: var(--accent);
}

.rm-totals-hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

/* Texteditor: Leiste oben, Text darunter in einem Rahmen */
#billingReminderDialog .rm-editor {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-solid);
}

#billingReminderDialog .rm-editor .rich-toolbar {
  margin: 0;
  padding: 4px 6px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

#billingReminderDialog .rm-editor .rich-input {
  min-height: 150px;
  padding: 12px 14px;
  border: none;
  outline: none;
  line-height: 1.5;
}

body.no-sidebar-nav .rm-item {
  grid-template-columns: minmax(0, 1fr) auto;
}

body.no-sidebar-nav .rm-item .rm-stage {
  grid-column: 1 / -1;
  justify-self: start;
}

body.no-sidebar-nav .rm-item-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

body.no-sidebar-nav .rm-totals {
  grid-template-columns: 1fr;
}

/* Ausrichtungs-Knöpfe (Fußzeile): mit Trennstrich von B/I/U abgesetzt */
.rich-toolbar .rt-align-first.rt-align-first {
  margin-left: 6px;
}

.rich-toolbar .rt-align-first.rt-align-first::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 7px;
  bottom: 7px;
  border-left: 1px solid var(--border);
}

/* ===== Einstellungen › Rechnung / Mahnung / Angebote (modern) =====
   Texteditoren als "Papier" mit der Druckschrift des jeweiligen Dokuments
   (main.js: buildInvoicePrintHtml .intro-text/.closing-text, buildOfferPrintHtml,
   buildReminderPrintHtml .document-copy) - bei Änderung dort hier nachziehen. */
body.settings-page .rich-editor.doc-editor,
body.settings-page.theme-light .rich-editor.doc-editor {
  min-height: 140px;
  background: #ffffff;
  color: #111111;
  font-family: "Manrope", Arial, sans-serif;
  white-space: break-spaces;
  tab-size: 4;
  word-spacing: 0.12em;
  padding: 14px max(14px, calc(100% - var(--letterhead-width, 17.4cm) - 14px)) 14px 14px;
}

body.settings-page .rich-editor.doc-editor[data-doc="invoice"] {
  font-size: 12px;
  line-height: normal;
}

body.settings-page .rich-editor.doc-editor[data-doc="offer"] {
  font-size: 12.5px;
  line-height: 1.5;
}

body.settings-page .rich-editor.doc-editor[data-doc="reminder"] {
  font-size: 13px;
  line-height: 1.45;
  min-height: 220px;
}

body.settings-page .rich-editor.doc-editor:empty::before {
  color: #9ca3af;
}

/* Kurze Zahlenfelder mit Einheit (MwSt., Mahnspesen) */
body.settings-page .dt-unit-short {
  max-width: 160px;
}

body.settings-page .cf-view .oc-input-unit input {
  width: 100%;
}

/* Mahnstufen-Knöpfe (gleiche Optik wie im Mahnfenster) */
body.settings-page .dt-stage-segments button {
  flex: 1 1 0;
  min-height: 0;
  height: 34px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

body.settings-page .dt-stage-segments button:hover {
  color: var(--text);
}

body.settings-page .dt-stage-segments button.is-active {
  background: var(--panel-solid);
  color: var(--rm-tone, var(--accent));
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

/* Platzhalter-Chips */
.dt-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.dt-chips-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

body.settings-page .dt-chip {
  min-height: 0;
  height: 26px;
  padding: 0 10px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

body.settings-page .dt-chip:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-style: solid;
}

/* Seitenaufbau: Felder + Mini-A4 */
.dt-layout {
  display: grid;
  grid-template-columns: minmax(0, 260px) 210px;
  justify-content: start;
  gap: 32px;
  align-items: start;
}

.dt-layout-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dt-layout-field > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dt-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--dt-tone);
}

[data-layout-key="address"] { --dt-tone: #3b82f6; }
[data-layout-key="info"] { --dt-tone: #8b5cf6; }
[data-layout-key="subject"] { --dt-tone: #f59e0b; }
[data-layout-key="body"] { --dt-tone: #10b981; }
[data-layout-key="signature"] { --dt-tone: #ef4444; }

.dt-page {
  position: relative;
  width: 210px;
  aspect-ratio: 21 / 29.7;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 8px 24px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.dt-page-header {
  position: absolute;
  top: 0;
  left: 8.5%;
  right: 8.5%;
  border-bottom: 1.5px solid #111;
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(15, 23, 42, 0.05) 6px 12px);
}

.dt-block {
  position: absolute;
  left: 8.5%;
  right: 8.5%;
  display: flex;
  align-items: flex-start;
  padding: 2px 5px;
  border-radius: 3px;
  border-left: 3px solid var(--dt-tone);
  background: color-mix(in srgb, var(--dt-tone) 16%, #ffffff);
  box-sizing: border-box;
  overflow: hidden;
  transition: top 160ms ease, height 160ms ease;
}

.dt-block span {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  color: color-mix(in srgb, var(--dt-tone) 70%, #111);
  white-space: nowrap;
}

.dt-block[data-layout-key="address"] { right: 45%; }
.dt-block[data-layout-key="signature"] { right: 55%; }

@media (max-width: 860px) {
  .dt-layout {
    grid-template-columns: 1fr;
  }
  .dt-page {
    justify-self: center;
  }
  body.settings-page .dt-stage-segments {
    flex-wrap: wrap;
  }
  body.settings-page .dt-stage-segments button {
    flex: 1 1 40%;
  }
}

/* ===== Einstellungen › Design (modern): Farben je Modus (Hell/Dunkel) als
   Kacheln ohne Farbcodes, Live-Vorschau, eigene CSS-Regel eingeklappt ===== */
.ds-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.ds-mode {
  flex: 0 0 auto;
}

body.settings-page .ds-mode button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

body.settings-page .ds-mode button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.settings-page .ds-mode button.is-active {
  background: var(--panel-solid);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.ds-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

.ds-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.ds-group h4 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.ds-swatch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-solid);
  min-width: 0;
}

.ds-swatch.is-custom {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

/* Farbfeld: Klick öffnet die Farbwahl; Karomuster zeigt Transparenz */
.ds-chip {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: repeating-conic-gradient(#d4d4d8 0 25%, #ffffff 0 50%) 0 0 / 10px 10px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.15);
}

.ds-chip-fill {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.ds-chip:hover {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}

.ds-chip input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}

.ds-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-right: 22px;
}

.ds-text strong {
  font-size: 13px;
}

.ds-text small {
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-swatch.is-custom .ds-text strong::after {
  content: "geändert";
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  vertical-align: 1px;
}

body.settings-page .ds-swatch-reset {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  cursor: pointer;
}

body.settings-page .ds-swatch-reset:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.ds-swatch-reset svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Vorschau: kleines Programmfenster mit den Farben des gewählten Modus */
.ds-preview-wrap {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ds-preview-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.ds-preview {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  height: 230px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow);
  font-family: inherit;
}

.ds-pv-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
}

.ds-pv-logo {
  width: 26px;
  height: 26px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: var(--accent);
}

.ds-pv-nav {
  width: 30px;
  height: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--muted) 45%, transparent);
}

.ds-pv-nav.is-active {
  background: var(--accent);
}

.ds-pv-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  min-width: 0;
}

.ds-pv-title {
  font-size: 15px;
  font-weight: 700;
}

.ds-pv-card {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
}

.ds-pv-card-title {
  font-size: 13px;
  font-weight: 700;
}

.ds-pv-card-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}

.ds-pv-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.ds-pv-btn {
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--accent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

.ds-pv-btn.is-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.ds-pv-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
  font-size: 10px;
  font-weight: 700;
}

.ds-pv-time {
  display: flex;
  gap: 4px;
}

.ds-pv-time span {
  flex: 1 1 0;
  height: 8px;
  border-radius: 4px;
}

body.settings-page .ds-reset {
  align-self: flex-start;
  font-size: 13px;
}

/* Erweitert: eigene CSS-Regel (eingeklappt) */
.ds-advanced > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.ds-advanced > summary::-webkit-details-marker {
  display: none;
}

.ds-advanced > summary > span:last-child {
  display: flex;
  flex-direction: column;
}

.ds-advanced > summary strong {
  font-size: 15px;
}

.ds-advanced > summary small {
  font-size: 13px;
  color: var(--muted);
}

.ds-advanced > summary::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 140ms ease;
}

.ds-advanced[open] > summary::after {
  transform: rotate(225deg);
}

.ds-advanced .custom-css-editor {
  width: 100%;
  min-height: 140px;
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 13px;
}

@media (max-width: 1000px) {
  .ds-layout {
    grid-template-columns: 1fr;
  }
  .ds-preview-wrap {
    position: static;
    order: -1;
  }
}

/* ===== Fenster "Darstellung" (persönlich): Hell/Dunkel/Automatisch + eigene
   Farben. Farbkacheln nutzen die .ds-*-Klassen aus Einstellungen › Design. ===== */
#appearanceDialog > form {
  width: min(760px, 96vw);
  max-height: min(860px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#appearanceDialog .ap-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ap-section h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

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

#appearanceDialog .ap-modes button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 0;
  height: auto;
  padding: 10px 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
  box-shadow: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

#appearanceDialog .ap-modes button:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

#appearanceDialog .ap-modes button.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

.ap-modes strong {
  margin-top: 8px;
  font-size: 14px;
}

.ap-modes small {
  font-size: 12px;
  color: var(--muted);
}

/* Mini-Vorschau je Option: Leiste + Karte */
.ap-mode-preview {
  position: relative;
  display: block;
  width: 100%;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.12);
}

.ap-mode-preview span:first-child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 26%;
}

.ap-mode-preview span:last-child {
  position: absolute;
  top: 14px;
  left: 34%;
  right: 10%;
  height: 26px;
  border-radius: 6px;
}

.ap-mode-preview.is-light { background: #f7f7f5; }
.ap-mode-preview.is-light span:first-child { background: #ffffff; border-right: 1px solid #e5e2d8; }
.ap-mode-preview.is-light span:last-child { background: #ffffff; border: 1px solid #e5e2d8; }
.ap-mode-preview.is-dark { background: #1f2a26; }
.ap-mode-preview.is-dark span:first-child { background: #26332e; }
.ap-mode-preview.is-dark span:last-child { background: #2d3b35; }
/* Automatisch: links hell, rechts dunkel */
.ap-mode-preview.is-auto span:first-child { width: 50%; background: #f7f7f5; }
.ap-mode-preview.is-auto span:last-child { top: 0; left: 50%; right: 0; height: 100%; border-radius: 0; background: #1f2a26; }

.ap-colors-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 12px;
}

.ap-colors-head h3 {
  margin-bottom: 2px;
}

.ap-colors-head .tagline {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

#appearanceDialog .ap-edit-mode button {
  min-height: 0;
  height: 32px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

#appearanceDialog .ap-edit-mode button.is-active {
  background: var(--panel-solid);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

#appearanceDialog .ds-swatch-reset {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  cursor: pointer;
}

#appearanceDialog .ds-swatch-reset:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

#appearanceDialog .ds-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

#appearanceDialog .dialog-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.no-sidebar-nav #appearanceDialog .ap-modes {
  grid-template-columns: 1fr;
}

body.no-sidebar-nav #appearanceDialog .ap-modes button {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
}

body.no-sidebar-nav #appearanceDialog .ap-mode-preview {
  grid-row: 1 / 3;
  height: 48px;
}

body.no-sidebar-nav #appearanceDialog .ap-modes strong {
  margin-top: 0;
}

/* ===== Einstellungen › Stundensätze (modern): Karte je Kategorie mit
   aktuellem Satz im Kopf und Verlauf darunter ===== */
.rc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px;
}

.rc-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
}

.rc-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rc-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-solid));
  color: var(--accent);
}

.rc-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rc-title h3 {
  margin: 0;
  font-size: 15px;
}

.rc-title small {
  font-size: 12px;
  color: var(--muted);
}

.rc-current {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: end;
  gap: 4px 24px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.rc-current > div {
  display: flex;
  flex-direction: column;
}

.rc-current span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.rc-current strong {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
}

.rc-current strong em {
  font-style: normal;
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.rc-current-main strong em {
  font-size: 1.5rem;
  color: var(--accent);
}

.rc-current small {
  justify-self: end;
  align-self: center;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

.rc-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.rc-history-head > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

body.settings-page .rc-add {
  min-height: 0;
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

body.settings-page .rc-add:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.rc-cols,
.rc-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
}

.rc-cols {
  padding: 0 6px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.rc-card .rate-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: none;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: none;
}

.rc-card .rate-rows .rc-row {
  padding: 4px 6px;
  border: none;
  border-radius: 10px;
}

body.settings-page .rc-row input,
body.theme-light.settings-page .rc-row input {
  background: var(--panel-solid);
}

.rc-empty {
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.rc-card .rate-rows:has(.rc-row) .rc-empty {
  display: none;
}

.rc-row.is-current {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.rc-row.is-past input {
  color: var(--muted);
}

.rc-date {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rc-status {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.1;
  padding-left: 2px;
}

.rc-status:empty {
  display: none;
}

.rc-row.is-current .rc-status {
  color: var(--accent);
}

.rc-row.is-future .rc-status {
  color: #d97706;
}

body.settings-page .rc-row input {
  width: 100%;
  min-width: 0;
}

body.settings-page .rc-row .oc-input-unit input {
  padding-right: 26px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .rc-grid {
    grid-template-columns: 1fr;
  }
  /* Handy: Datum eigene Zeile, darunter Extern | Intern | Löschen */
  .rc-cols {
    display: none;
  }
  .rc-card .rate-rows .rc-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px;
    grid-template-areas:
      "date date date"
      "ext int del";
    padding: 8px;
    border: 1px solid var(--border);
  }
  .rc-row .rc-date { grid-area: date; }
  .rc-row .oc-input-unit:nth-of-type(2) { grid-area: ext; }
  .rc-row .oc-input-unit:nth-of-type(3) { grid-area: int; }
  .rc-row .remove-rate { grid-area: del; }
  .rc-current {
    grid-template-columns: auto auto;
  }
  .rc-current small {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
  }
}

.rc-history:not(:has(.rc-row)) .rc-cols {
  display: none;
}

/* ===== Rollen & Stundensatz-Kategorien bearbeitbar: Namen direkt im Kopf ===== */
body.settings-page .rv-name-input,
body.settings-page .rc-name-input {
  width: 100%;
  max-width: 340px;
  min-height: 0;
  margin: 2px 0;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-weight: 700;
  margin-left: -8px;
}

body.settings-page .rv-name-input {
  height: 36px;
  font-size: 1.3rem;
}

body.settings-page .rc-name-input {
  height: 28px;
  font-size: 15px;
}

body.settings-page .rv-name-input:hover,
body.settings-page .rc-name-input:hover {
  border-color: var(--border);
}

body.settings-page .rv-name-input:focus,
body.settings-page .rc-name-input:focus {
  border-color: var(--accent);
  background: var(--panel-solid);
  outline: none;
}

.rv-base {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 4px;
}

.rv-base label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

body.settings-page .rv-base select {
  width: auto;
  min-height: 0;
  height: 32px;
  padding: 0 28px 0 10px;
  font-size: 13px;
}

body.settings-page .rv-delete-role {
  min-height: 0;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--danger);
}

body.settings-page .rv-add-role,
body.theme-light.settings-page .rv-add-role {
  margin-top: 6px;
  min-height: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

body.settings-page .rv-add-role:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.rc-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.rc-head .rc-delete {
  flex: none;
  opacity: 0.6;
}

.rc-card:hover .rc-head .rc-delete {
  opacity: 1;
}

@media (max-width: 860px) {
  .rv-roles .rv-add-role {
    flex: 0 0 auto;
    margin-top: 0;
    white-space: nowrap;
  }
}


/* ===== Einstellungen › Mitarbeiter (modern): Übersicht mit Suche/Filter ===== */
.em-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.em-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  max-width: 420px;
}

.em-search svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

body.settings-page .em-search input,
body.settings-page .settings-card .em-search input[type="search"] {
  width: 100%;
  padding-left: 38px;
}

body.settings-page .em-filter button {
  min-height: 0;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

body.settings-page .em-filter button span {
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  font-size: 11px;
}

body.settings-page .em-filter button.is-active {
  background: var(--panel-solid);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.em-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.em-empty {
  padding: 24px 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.em-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-solid);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.em-row:hover,
.em-row:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--panel-solid));
  outline: none;
}

.em-row.is-exited {
  opacity: 0.65;
}

.em-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--em-color, var(--accent)) 22%, var(--panel-solid));
  color: color-mix(in srgb, var(--em-color, var(--accent)) 75%, var(--text));
  border: 1px solid color-mix(in srgb, var(--em-color, var(--accent)) 40%, transparent);
}

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

.em-main strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.em-main small,
.em-status small {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.em-role {
  justify-self: start;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.em-role[data-base="admin"] { background: color-mix(in srgb, #dc2626 12%, transparent); color: #dc2626; }
.em-role[data-base="geschaeftsfuehrer"] { background: color-mix(in srgb, #8b5cf6 14%, transparent); color: #8b5cf6; }
.em-role[data-base="techniker"] { background: color-mix(in srgb, #d97706 14%, transparent); color: #d97706; }

.em-category {
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.em-exited {
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.em-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 860px) {
  .em-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    grid-template-areas:
      "av main act"
      "av role role";
    row-gap: 6px;
  }
  .em-avatar { grid-area: av; align-self: start; }
  .em-main { grid-area: main; }
  .em-actions { grid-area: act; }
  .em-role { grid-area: role; }
  .em-category,
  .em-status { display: none; }
}

/* ===== Mitarbeiterfenster (modern): Kopf, Reiter, Felder ===== */
#userModal.um-dialog > form {
  width: min(900px, 96vw);
  height: min(820px, 92vh);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  font-size: 13px;
}

#userModal .um-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px 12px;
}

#userModal .um-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  background: color-mix(in srgb, var(--um-color, var(--accent)) 22%, var(--panel-solid));
  color: color-mix(in srgb, var(--um-color, var(--accent)) 75%, var(--text));
  border: 1px solid color-mix(in srgb, var(--um-color, var(--accent)) 40%, transparent);
}

#userModal .um-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

#userModal .um-head-text h2 {
  margin: 0;
  font-size: 1.3rem;
}

#userModal .um-head-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}

#userModal .um-head-sub:empty {
  display: none;
}

#userModal .um-tabs {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

#userModal .um-tabs button,
body.theme-light #userModal .um-tabs button {
  flex: none;
  min-height: 0;
  height: 40px;
  padding: 0 14px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

#userModal .um-tabs button:hover {
  color: var(--text);
}

#userModal .um-tabs button.is-active,
body.theme-light #userModal .um-tabs button.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

#userModal .um-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: block;
  padding: 18px 20px;
}

#userModal .um-pane {
  display: none;
  flex-direction: column;
  gap: 18px;
}

#userModal .um-pane.is-active {
  display: flex;
}

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

#userModal .um-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

#userModal .um-wide {
  grid-column: 1 / -1;
}

#userModal .um-field > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

#userModal .um-field > small,
#userModal .um-color small {
  font-size: 12px;
  color: var(--muted);
}

#userModal .um-field input:not([type="checkbox"]):not([type="color"]):not([type="file"]),
#userModal .um-field select {
  width: 100%;
  min-height: 40px;
  font-size: 14px;
}

#userModal .um-field input[readonly] {
  opacity: 0.7;
}

#userModal .um-check {
  justify-content: flex-end;
}

#userModal .um-check .board-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

#userModal .um-color {
  display: flex;
  align-items: center;
  gap: 10px;
}

#userModal .um-color input[type="color"] {
  width: 44px;
  height: 40px;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-solid);
  cursor: pointer;
}

#userModal .um-signature {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

#userModal .um-signature .signature-preview {
  max-height: 60px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid var(--border);
}

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

#userModal .um-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
}

#userModal .um-block.hidden {
  display: none;
}

#userModal .um-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#userModal .um-block-head h3 {
  margin: 0;
  font-size: 14px;
}

#userModal .um-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

#userModal .um-hint:empty {
  display: none;
}

#userModal .um-add,
body.theme-light #userModal .um-add {
  min-height: 0;
  height: 30px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

#userModal .um-add:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

#userModal .um-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#userModal .um-short {
  width: 120px;
}

#userModal .oc-input-unit input {
  padding-right: 44px;
  text-align: right;
}

#userModal .table-wrapper,
#userModal .table-wrapper.daily-hours,
#userModal .table-wrapper.analytics,
body.theme-light #userModal .table-wrapper.analytics {
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  max-height: none;
  overflow-x: auto;
}

#userModal .daily-hours-table,
#userModal .um-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
}

#userModal .daily-hours-table th,
#userModal .um-table th {
  padding: 2px 4px;
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}

#userModal .daily-hours-table td,
#userModal .um-table td {
  padding: 0 3px;
  background: none;
  border: none;
}

#userModal .daily-hours-table input,
#userModal .um-table input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 4px 6px;
  font-size: 13px;
}

@media (max-width: 640px) {
  #userModal .um-grid {
    grid-template-columns: 1fr;
  }
  #userModal .um-spacer {
    display: none;
  }
}

/* Mitarbeiterfenster: Hintergrund aus dem Design (statt festem Blau der alten Vorlage) */
#userModal.um-dialog > form,
body.theme-light #userModal.um-dialog > form {
  background: var(--panel-solid);
  border: 1px solid var(--border);
}

/* Kategorie mit Buchungen: Löschen gesperrt (Klick erklärt warum) */
.rc-head .rc-delete.is-locked,
.rc-card:hover .rc-head .rc-delete.is-locked {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ===== Stundensätze einer Adresse / eines Projekts (Fly-over, modern) ===== */
.ro-dialog > form {
  width: min(860px, 96vw);
  height: min(800px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.ro-dialog .dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 20px 16px;
}

.ro-dialog .ro-close {
  flex: none;
}

.ro-hint {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-size: 13px;
  line-height: 1.45;
}

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

.ro-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-solid);
}

.ro-toolbar-label {
  font-size: 13px;
  font-weight: 600;
}

.ro-dialog .ro-toolbar input[type="date"] {
  width: 170px;
  min-height: 36px;
}

.ro-dialog .ro-agreement-add {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.ro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 12px;
}

.ro-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
  min-width: 0;
}

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

.ro-card-head strong {
  font-size: 14px;
}

.ro-dialog .ro-add,
body.theme-light .ro-dialog .ro-add {
  min-height: 0;
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ro-dialog .ro-add:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.ro-current {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-size: 13px;
  color: var(--muted);
}

.ro-current strong {
  font-size: 16px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.ro-current small {
  margin-left: auto;
  font-size: 12px;
}

.ro-cols,
.ro-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 30px;
  gap: 6px;
  align-items: center;
}

.ro-cols {
  padding: 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.ro-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ro-row {
  padding: 3px 4px;
  border-radius: 10px;
}

.ro-row.is-current {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.ro-row.is-past input {
  color: var(--muted);
}

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

.ro-status {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.1;
  padding-left: 2px;
}

.ro-status:empty {
  display: none;
}

.ro-row.is-current .ro-status { color: var(--accent); }
.ro-row.is-future .ro-status { color: #d97706; }

.ro-unit {
  position: relative;
  display: flex;
  align-items: center;
}

.ro-dialog .ro-row input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  font-size: 13px;
}

.ro-dialog .ro-unit input {
  padding-right: 24px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ro-unit em {
  position: absolute;
  right: 8px;
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
}

.ro-dialog .ro-remove {
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ro-dialog .ro-remove svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ro-dialog .ro-remove:hover {
  color: var(--danger);
}

.ro-inherited-note {
  display: none;
  margin: 0;
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.ro-card.is-inherited .ro-inherited-note {
  display: block;
}

.ro-card.is-inherited .ro-cols {
  display: none;
}

.ro-empty {
  font-size: 13px;
  color: var(--muted);
}

body.no-sidebar-nav .ro-grid {
  grid-template-columns: 1fr;
}

body.no-sidebar-nav .ro-cols {
  display: none;
}

body.no-sidebar-nav .ro-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px;
  grid-template-areas:
    "date date date"
    "ext int del";
  padding: 6px;
  border: 1px solid var(--border);
}

body.no-sidebar-nav .ro-row .ro-date { grid-area: date; }
body.no-sidebar-nav .ro-row .ro-unit:nth-of-type(2) { grid-area: ext; }
body.no-sidebar-nav .ro-row .ro-unit:nth-of-type(3) { grid-area: int; }
body.no-sidebar-nav .ro-row .ro-remove { grid-area: del; }

/* alte Tabellen-Regel (max-height 320px) für den neuen Aufbau aufheben */
.ro-dialog #projectRateOverrides.ro-container,
.ro-dialog #customerRateOverrides.ro-container {
  max-height: none;
  overflow: visible;
  flex: none;
}

.ro-dialog .ro-row .ro-unit input,
.ro-dialog .ro-row .ro-date input {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
}

/* ===== Zahlenfelder ohne Auf/Ab-Pfeile (Zahlen werden immer getippt, die
   Pfeile überdeckten z. B. das €-Zeichen) - außer in der Zeiterfassung ===== */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#timeShell input[type="number"],
#timeEntryDialog input[type="number"] {
  -moz-appearance: auto;
  appearance: auto;
}

#timeShell input[type="number"]::-webkit-inner-spin-button,
#timeEntryDialog input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button;
}

/* Satz-Zeilen (Adresse/Projekt + Einstellungen › Kategorien): Felder oben
   bündig und gleich hoch - der Hinweis "aktuell"/"geplant" unter dem Datum
   schob sonst die Felder daneben aus der Linie. */
.ro-cols,
.ro-row,
.rc-cols,
.rc-row {
  align-items: start;
}

.ro-dialog .ro-row input,
body.settings-page .rc-row input {
  height: 36px;
  min-height: 36px;
  box-sizing: border-box;
}

.ro-dialog .ro-remove,
body.settings-page .rc-row .remove-rate {
  margin-top: 3px;
}

.ro-status,
.rc-status {
  margin-top: 2px;
}

.ro-dialog .ro-row .ro-unit input {
  padding-right: 26px;
}

/* alte ID-Regel der früheren Tabelle (padding 2px 6px) übersteuern */
.ro-dialog #customerRateOverrides .ro-unit input,
.ro-dialog #projectRateOverrides .ro-unit input {
  padding: 4px 26px 4px 8px;
}

.ro-dialog #customerRateOverrides .ro-date input,
.ro-dialog #projectRateOverrides .ro-date input {
  padding: 4px 8px;
}

/* Adresse: ungespeicherte Stundensätze */
.cm-rates-pending {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #d97706;
}

.ro-footer-note {
  font-size: 12px;
  color: var(--muted);
}

/* Stundensätze nur ansehen (ohne Recht "Stundensätze bearbeiten") */
.ro-locked {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #d97706 40%, transparent);
  background: color-mix(in srgb, #d97706 9%, transparent);
  font-size: 13px;
  font-weight: 600;
}

.ro-container.is-readonly .ro-row input:disabled {
  opacity: 1;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 3%, transparent);
  cursor: default;
}

.ro-container.is-readonly .ro-row.is-past input:disabled {
  color: var(--muted);
}

.ro-container.is-readonly .ro-cols,
.ro-container.is-readonly .ro-row {
  grid-template-columns: minmax(140px, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
}

/* ===== Projektfenster › Konditionen: wie bei der Adresse (Zahlungs-
   bedingungen + Stundensätze), alte 68-px-Regeln des Projektfensters übersteuern ===== */
#projectModalHome .pm-terms {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#projectModalHome .pm-terms .cm-terms {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 16px;
}

#projectModalHome .pm-terms .payment-terms-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

#projectModalHome .pm-terms .payment-terms-fields label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

#projectModalHome .pm-terms .payment-terms-fields input {
  width: 100%;
  max-width: none;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-solid);
  font-size: 14px;
  text-align: left;
}

#projectModalHome .pm-terms .payment-terms-fields input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

#projectModalHome .pm-terms-hint {
  margin: 6px 0 0;
  font-size: 12px;
}

#projectModalHome .pm-terms .cm-rates button {
  flex: none;
}

@media (max-width: 720px) {
  #projectModalHome .pm-terms .cm-terms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #projectModalHome .pm-terms .cm-rates {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Projekt-Stundensätze stehen jetzt im Reiter "Konditionen" - Zeile im
   Stammdaten-Raster entfernen (sonst leerer Streifen) */
#projectModalHome .pm-pane .project-field-grid {
  grid-template-areas:
    "number status"
    "name bezeichnung"
    "customer responsible"
    "date folderpath"
    "note note";
}

@media (max-width: 980px) {
  #projectModalHome .pm-pane .project-field-grid {
    grid-template-areas:
      "number" "status" "name" "bezeichnung" "customer" "responsible"
      "date" "folderpath" "note";
  }
}

/* Projekt: Hinweis auf neuere Stundensätze der Adresse */
.pm-rates-info {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #d97706 40%, transparent);
  background: color-mix(in srgb, #d97706 9%, transparent);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.ro-dialog .pm-rates-info {
  margin: 0;
}

.ro-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
}

.ro-source {
  margin-top: 2px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
}

/* ===== Einstellungen › Tätigkeiten (modern): Reihenfolge per ▲/▼ ===== */
.act-add {
  display: flex;
  gap: 10px;
}

body.settings-page .act-add input {
  flex: 1 1 auto;
  max-width: 460px;
  min-height: 40px;
  font-size: 14px;
}

.act-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 720px;
}

.act-empty {
  padding: 20px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

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

.act-row:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.act-pos {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

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

.act-main strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.act-main small {
  font-size: 12px;
  color: var(--muted);
}

.act-move {
  display: inline-flex;
  gap: 4px;
}

body.settings-page .act-btn,
body.theme-light.settings-page .act-btn {
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  cursor: pointer;
}

body.settings-page .act-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

body.settings-page .act-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.act-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.act-row .delete-column.is-locked {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ===== Einstellungen › Druck: Hochformat + Querformat mit Blattvorschau ===== */
.pg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.pg-body {
  display: flex;
  align-items: center;
  gap: 20px;
}

.pg-fields {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

body.settings-page .pg-fields .oc-input-unit input {
  width: 100%;
}

.pg-paper {
  position: relative;
  flex: none;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 8px 20px rgba(15, 23, 42, 0.12);
}

.pg-paper.pg-portrait {
  width: 120px;
  aspect-ratio: 21 / 29.7;
}

.pg-paper.pg-landscape {
  width: 170px;
  aspect-ratio: 29.7 / 21;
}

/* bedruckbarer Bereich innerhalb der Ränder */
.pg-area {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px;
  padding: 3px 4px;
  border: 1px dashed color-mix(in srgb, var(--accent) 70%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, #ffffff);
  box-sizing: border-box;
  transition: top 140ms ease, right 140ms ease, bottom 140ms ease, left 140ms ease;
}

.pg-head,
.pg-foot {
  font-size: 7px;
  font-weight: 700;
  color: color-mix(in srgb, var(--accent) 70%, #111);
  white-space: nowrap;
  overflow: hidden;
}

.pg-foot {
  border-top: 1px solid rgba(15, 23, 42, 0.35);
  padding-top: 1px;
}

.pg-lines {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.pg-lines i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(15, 23, 42, 0.14);
}

.pg-lines i:nth-child(2n) {
  width: 80%;
}

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

@media (max-width: 520px) {
  .pg-body {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .pg-paper {
    align-self: center;
  }
}

/* ===== Druck: Definition Kopfzeile/Fußzeile ===== */
.pg-defs {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  font-size: 12.5px;
  line-height: 1.45;
}

.pg-defs div {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 8px;
}

.pg-defs dt {
  font-weight: 700;
}

.pg-defs dd {
  margin: 0;
  color: var(--muted);
}

.pg-defs dd strong {
  color: var(--text);
}

/* Blattvorschau: Kopf- und Fußband */
.pg-head-band {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  border-bottom: 1px solid rgba(15, 23, 42, 0.35);
  box-sizing: border-box;
}

.pg-logo {
  height: 100%;
  max-height: 100%;
  aspect-ratio: 2 / 1;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 22%, #ffffff);
  color: color-mix(in srgb, var(--accent) 80%, #111);
  font-style: normal;
  font-size: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pg-foot {
  flex: none;
  box-sizing: border-box;
}

.pg-paper.pg-portrait .pg-area,
.pg-paper.pg-landscape .pg-area {
  justify-content: flex-start;
}

.pg-paper .pg-lines {
  padding: 3px 0;
}

/* Firma › Fußzeile: Grenze der Fußzeilenhöhe im Editor + Warnung */
body.settings-page .rich-editor.letterhead-editor-footer,
body.settings-page.theme-light .rich-editor.letterhead-editor-footer {
  background-image: linear-gradient(
    to bottom,
    transparent calc(14px + var(--footer-limit, 1.8cm)),
    rgba(220, 38, 38, 0.55) calc(14px + var(--footer-limit, 1.8cm)),
    rgba(220, 38, 38, 0.55) calc(15px + var(--footer-limit, 1.8cm)),
    transparent calc(15px + var(--footer-limit, 1.8cm))
  );
}

body.settings-page .rich-editor.letterhead-editor-footer.is-over-limit {
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.6);
}

.cf-footer-limit {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.cf-footer-limit.is-warning {
  color: #dc2626;
  font-weight: 600;
}

/* Druck: unbedruckte Ränder oben/unten in der Blattvorschau schraffiert */
.pg-margin {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  background: repeating-linear-gradient(135deg, rgba(15, 23, 42, 0.08) 0 3px, transparent 3px 6px);
  pointer-events: none;
}

.pg-margin-top {
  top: 0;
  border-bottom: 1px dotted rgba(15, 23, 42, 0.25);
}

.pg-margin-bottom {
  bottom: 0;
  border-top: 1px dotted rgba(15, 23, 42, 0.25);
}

.pg-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

/* Einstellungen › Rechnung/Angebote: Anschrift (Position ab oberem Rand, Textgröße) */
.ad-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  gap: 12px 20px;
}
.ad-hint {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.dt-layout-sub {
  margin-top: -4px;
  padding-left: 15px;
}
@media (max-width: 520px) {
  .ad-fields { grid-template-columns: 1fr; }
}
.ad-group + .ad-group { margin-top: 14px; }
.ad-group-title {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.ad-group-title small { font-weight: 500; color: var(--muted); }
.ad-side { height: 42px; box-sizing: border-box; align-items: stretch; }
body.settings-page .ad-side button { height: auto; }

/* Rechnungsdialog: Leistungszeitraum und Sperre nach Freigabe */
.bm-period-hint {
  margin: -4px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.bm-locked-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 20px 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent);
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  color: var(--text);
  font-size: 13px;
}
.bm-locked-note svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: #f59e0b;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bm-locked-note.hidden { display: none; }
#billingModal.is-locked [contenteditable] { pointer-events: none; }
#billingModal.is-locked button[type="submit"] { display: none; }
#billingModal.is-locked .cm-body button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

/* ===== Einstellungen › Datenbank (modern) ===== */
.db-auto {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  --db-tone: var(--muted);
}
.db-auto[data-state="ok"] { --db-tone: #10b981; }
.db-auto[data-state="error"] { --db-tone: #ef4444; border-color: color-mix(in srgb, #ef4444 45%, transparent); }
.db-auto[data-state="running"] { --db-tone: #3b82f6; }
.db-auto-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--db-tone);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--db-tone) 20%, transparent);
}
.db-auto[data-state="running"] .db-auto-dot { animation: db-pulse 1.2s ease-in-out infinite; }
@keyframes db-pulse { 50% { opacity: 0.35; } }
.db-auto-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.db-auto-text strong { font-size: 14px; color: var(--text); }
.db-auto-text small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.db-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.db-file { flex: 1 1 320px; min-width: 0; }
body.settings-page .db-file input { width: 100%; font-variant-numeric: tabular-nums; }
.db-row > button { height: 42px; padding: 0 18px; white-space: nowrap; }
.db-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent);
  background: color-mix(in srgb, #f59e0b 10%, transparent);
  font-size: 13px;
  color: var(--text);
}
.db-warning svg,
.db-danger .cf-section-icon svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: #f59e0b;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.db-danger .cf-section-icon { background: color-mix(in srgb, #f59e0b 14%, transparent); }
body.settings-page .db-danger-btn {
  background: #dc2626;
  border: 1px solid #dc2626;
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
}
body.settings-page .db-danger-btn:hover:not(:disabled) { background: #b91c1c; }
body.settings-page .db-danger-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.db-feedback { display: grid; gap: 10px; }
.db-status { margin: 0; font-size: 13px; color: var(--muted); }
.db-status:empty { display: none; }
.db-status[data-status="success"] { color: #10b981; }
.db-status[data-status="error"] { color: #ef4444; }
@media (max-width: 560px) {
  .db-auto { flex-wrap: wrap; }
  .db-row > button { flex: 1 1 auto; }
}

/* ===== Auswertung (modern): Werkzeugleiste, Kennzahlen, ruhige Tabellen ===== */
#analyticsShell main {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#analyticsShell section.analytics-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 2px 12px !important;
}
#analyticsShell .an-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 0 4px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-solid);
}
#analyticsShell .an-toolbar .pl-search { flex: 1 1 260px; min-width: 200px; }
#analyticsShell .an-toolbar .pl-search .inline-search-field { flex: 1 1 auto; min-width: 0; }
#analyticsShell .an-toolbar .pl-search .inline-search-field input { width: 100%; }
#analyticsShell .an-toolbar .an-icon-tool {
  width: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#analyticsShell .an-toolbar .an-icon-tool svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
#analyticsShell .an-toolbar > button.pl-tool:not(.an-icon-tool) { padding: 0 16px; font-weight: 600; }
/* Umschalter (Checkbox als Chip) */
.an-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.an-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.an-toggle:hover { color: var(--text); }
.an-toggle:has(input:checked) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
/* Kennzahlen */
#analyticsShell .an-stats {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 10px 0 14px;
}
#analyticsShell .an-stats:empty { display: none; }
#analyticsShell .an-stats .mw-stat strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
#analyticsShell .an-stats .mw-stat-hint { overflow-wrap: anywhere; }
/* Tabellen */
#analyticsShell .table-wrapper.analytics {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-solid);
  overflow: auto;
  max-height: calc(100vh - 290px);
  padding: 0;
}
#analyticsShell .table-wrapper.analytics .analytics-table {
  border: none;
  background: transparent;
  border-collapse: separate;
  border-spacing: 0;
}
#analyticsShell .analytics-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel-solid) !important;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 -1px 0 var(--border);
}
#analyticsShell .analytics-table thead th .sort-btn {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
#analyticsShell .analytics-table thead th .sort-arrow { opacity: 0.45; }
#analyticsShell .analytics-table tbody tr,
#analyticsShell .analytics-table tbody tr:nth-child(even),
#analyticsShell .analytics-table tbody tr > td {
  background: transparent !important;
}
#analyticsShell .analytics-table tbody td {
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
#analyticsShell .analytics-table tbody tr:last-child > td { border-bottom: none; }
#analyticsShell .analytics-table tbody tr:hover > td {
  background: color-mix(in srgb, var(--accent) 7%, transparent) !important;
}
#analyticsShell .analytics-table tbody tr.is-selected > td,
#analyticsShell .analytics-table tbody tr.menu-row-selected > td {
  background: color-mix(in srgb, #38bdf8 22%, transparent) !important;
}
#analyticsShell .analytics-table td.tagline {
  text-align: center;
  color: var(--muted);
  padding: 28px 12px;
}
#analyticsShell .analytics-table td.money,
#analyticsShell .analytics-table th.money { text-align: right; }
#analyticsShell .analytics-table .table-link {
  color: var(--accent);
  font-weight: 700;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
/* Summenzeile */
#analyticsShell .analytics-table tbody tr.an-sum-row > td {
  position: sticky;
  bottom: 0;
  background: var(--panel-solid) !important;
  border-top: 1px solid var(--border);
  font-weight: 700;
}
/* Status "Fakturiert" als Pill */
#analyticsShell .analytics-table td.fakturiert-yes,
#analyticsShell .analytics-table td.fakturiert-no,
#analyticsShell .analytics-table td.fakturiert-manual {
  font-size: 0;
}
#analyticsShell .analytics-table td.fakturiert-yes::after,
#analyticsShell .analytics-table td.fakturiert-no::after,
#analyticsShell .analytics-table td.fakturiert-manual::after {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
#analyticsShell .analytics-table td.fakturiert-yes::after {
  content: "Verrechnet";
  color: #10b981;
  background: color-mix(in srgb, #10b981 14%, transparent);
}
#analyticsShell .analytics-table td.fakturiert-manual::after {
  content: "Manuell";
  color: #0ea5e9;
  background: color-mix(in srgb, #0ea5e9 14%, transparent);
}
#analyticsShell .analytics-table td.fakturiert-no::after {
  content: "Offen";
  color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 16%, transparent);
}
/* Projekte: Ergebnis farbig statt ganzer Zeile */
#analyticsProjectReportSection .analytics-table tbody tr.project-negative > td:last-child { color: #ef4444; font-weight: 700; }
#analyticsProjectReportSection .analytics-table tbody tr.project-positive > td:last-child { color: #10b981; font-weight: 700; }
#analyticsProjectReportSection .analytics-table tbody tr[data-project-id] > td:nth-child(n+5) { text-align: right; }
#analyticsProjectReportSection .analytics-table thead th:nth-child(n+5) { text-align: right; }
#analyticsProjectReportSection .analytics-table thead th:nth-child(n+5) .sort-btn { justify-content: flex-end; }
#analyticsOrdersSection .analytics-table td:first-child { font-weight: 700; color: var(--accent); }
#analyticsOrdersSection .analytics-table td:last-child,
#analyticsOrdersSection .analytics-table th:last-child { text-align: right; }
#analyticsShell .an-muted-cell { color: var(--muted) !important; }
#analyticsShell .analytics-table td.delta-positive { color: #10b981; font-weight: 700; }
#analyticsShell .analytics-table td.delta-negative { color: #ef4444; font-weight: 700; }
/* Produktivität als Balken */
#analyticsShell .an-meter-cell { white-space: nowrap; }
#analyticsShell .an-meter-cell > span:last-child { display: inline-block; min-width: 38px; text-align: right; }
.an-meter {
  display: inline-block;
  width: 90px;
  height: 6px;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  overflow: hidden;
}
.an-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6, #10b981);
}
/* Mitarbeiter: Ansicht-Umschalter */
.an-staff-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.an-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-solid);
}
.an-seg button {
  height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: 9px;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.an-seg button:hover { color: var(--text) !important; }
.an-seg button.is-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
  color: var(--accent) !important;
}
/* Monatsauswertung */
.an-monthly-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-solid);
}
.an-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--muted); }
.an-legend span { display: inline-flex; align-items: center; gap: 6px; }
.an-legend i { display: inline-block; width: 18px; height: 8px; border-radius: 999px; }
.an-legend .an-legend-expected { background: linear-gradient(90deg, #38bdf8, #6ee7b7); }
.an-legend .an-legend-invoices { background: linear-gradient(90deg, #ea580c, #f59e0b); }
.an-legend .an-legend-paid { background: #c2410c; }
.an-legend .an-legend-target { width: 3px; height: 14px; border-radius: 2px; background: var(--text); }
#analyticsShell .an-monthly-summary { margin: 0; }
#analyticsShell .analytics-monthly-chart {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-solid);
  padding: 10px 16px 14px;
}
@media (max-width: 760px) {
  #analyticsShell .an-toolbar { border-radius: 14px; }
  #analyticsShell .an-toolbar .pl-push-right { margin-left: 0; }
  .an-toggle { flex: 1 1 auto; justify-content: center; }
  .an-seg { width: 100%; }
  .an-seg button { flex: 1 1 0; padding: 0 8px; }
  #analyticsShell .table-wrapper.analytics { max-height: none; }
}
/* Auswertung: Feinschliff */
#analyticsShell .an-toolbar > * { order: 0; }
#analyticsShell .an-toolbar .pl-push-right,
#analyticsShell .an-toolbar .an-tools { margin-left: auto; }
#analyticsShell .an-tools { display: inline-flex; align-items: center; gap: 8px; }
#analyticsShell .analytics-table thead th { white-space: nowrap; }
#analyticsShell #analyticsHoursPanel .analytics-table { table-layout: auto; min-width: 0; }
#analyticsShell #analyticsHoursPanel .analytics-table th,
#analyticsShell #analyticsHoursPanel .analytics-table td { width: auto; max-width: none; }
#analyticsShell #analyticsHoursPanel .analytics-table tr:not(.an-sum-row) > td:nth-child(2) { min-width: 200px; white-space: normal; }
#analyticsShell #analyticsHoursPanel .analytics-table td:nth-child(3),
#analyticsShell #analyticsHoursPanel .analytics-table td:nth-child(4),
#analyticsShell #analyticsHoursPanel .analytics-table td:nth-child(5) { white-space: nowrap; }
#analyticsShell #analyticsHoursPanel .analytics-table tr:not(.an-sum-row) > td:nth-child(10) { min-width: 160px; white-space: normal; }
#analyticsShell .analytics-table tbody tr.an-sum-row > td {
  position: static;
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
}
#analyticsShell .an-wrap-cell { white-space: normal !important; min-width: 220px; }
#analyticsOrdersSection .analytics-table td:last-child { white-space: nowrap; }
#analyticsShell .analytics-table thead th {
  background: color-mix(in srgb, var(--panel-solid) 100%, var(--bg, #0b1020) 0%) !important;
  backdrop-filter: blur(8px);
}
@media (max-width: 760px) {
  #analyticsShell .an-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #analyticsShell .an-stats .mw-stat { padding: 10px 12px; }
  #analyticsShell .an-stats .mw-stat strong { font-size: 1.1rem; }
  #analyticsShell .an-stats .mw-stat-label { font-size: 10px; }
  #analyticsShell .an-stats .mw-stat-hint { font-size: 11px; }
}
/* Monatsauswertung: überfälliger Anteil im Balken "Erwartet" */
.analytics-monthly-bar-overdue-overlay {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0 6px, rgba(185, 28, 28, 0.95) 6px 12px);
}
.an-legend .an-legend-overdue { background: repeating-linear-gradient(135deg, #ef4444 0 4px, #b91c1c 4px 8px); }
.analytics-monthly-detail-item.is-overdue small { color: #ef4444; font-weight: 600; }

/* Projektauswertung (Vollkosten) */
#analyticsProjectReportSection .an-pr-table td.num,
#analyticsProjectReportSection .an-pr-table th.num { text-align: right; white-space: nowrap; }
#analyticsProjectReportSection .an-pr-table th.num .sort-btn { justify-content: flex-end; width: 100%; }
#analyticsProjectReportSection .an-pr-table td small,
#analyticsProjectReportSection .an-pr-title small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
#analyticsProjectReportSection .an-pr-title { white-space: normal; min-width: 220px; }
#analyticsProjectReportSection .an-pr-title strong { font-weight: 600; }
#analyticsProjectReportSection .an-pr-table td.an-strong { font-weight: 800; }
#analyticsShell .analytics-table td.an-neg { color: #ef4444; }
#analyticsShell .analytics-table td.an-pos { color: #10b981; }
#analyticsShell .an-costinfo .an-neg { color: #ef4444; font-weight: 700; }
#analyticsShell .an-costinfo .an-pos { color: #10b981; font-weight: 700; }
/* Ergebnis-Spalte nicht mehr über :last-child färben (neue Spaltenfolge) */
#analyticsProjectReportSection .analytics-table tbody tr.project-negative > td:last-child,
#analyticsProjectReportSection .analytics-table tbody tr.project-positive > td:last-child { font-weight: inherit; }
#analyticsProjectReportSection .analytics-table tbody tr[data-project-id] > td:nth-child(n+5) { text-align: right; }
.an-costinfo {
  display: grid;
  gap: 3px;
  margin: -4px 0 12px;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  font-size: 12px;
  color: var(--muted);
}
.an-costinfo:empty { display: none; }
.an-costinfo strong { color: var(--text); margin-right: 6px; }
/* Beleg: Zuordnung Projekt / Bürokosten */
.rc-alloc { width: fit-content; }
.rc-alloc-hint { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
#receiptListModern .mw-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ===== Programm-Info (Fly-over, modern) ===== */
#userInfoDialog.pi-modern > .dialog-card {
  width: min(820px, 96vw);
  max-height: min(860px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  min-width: 0;
}
#userInfoDialog .pi-avatar svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
#userInfoDialog .pi-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
#userInfoDialog .user-info-changelog {
  max-height: none;
  overflow: visible;
  margin: 0;
  display: block;
}
.pi-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pi-summary strong { font-size: 16px; }
.pi-summary span { font-size: 12px; color: var(--muted); }
.pi-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}
.pi-group {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
  padding: 14px 16px;
}
.pi-group h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 14px;
}
.pi-group ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.pi-group li {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}
.pi-group li::marker { color: var(--accent); }
#userInfoDialog .pi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#userInfoDialog .pi-copy { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  .pi-groups { grid-template-columns: 1fr; }
}
#userInfoDialog.pi-modern > .dialog-card {
  border: none;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  pointer-events: auto;
}
#userInfoDialog .pi-summary { margin-top: 2px; }
/* feste Grundfarbe unter der (im Dunkelmodus halbtransparenten) Panelfarbe */
#userInfoDialog.pi-modern > .dialog-card {
  background: linear-gradient(var(--panel), var(--panel)), var(--bg);
}

/* ===== Handy-App (installiert) im hellen Modus: die fest dunklen Flächen
   (#1f2a26 - Schutz gegen helle Streifen am iPhone) folgen jetzt dem Theme ===== */
html:has(body.is-standalone-client.theme-light),
body.is-standalone-client.theme-light,
body.is-standalone-client.theme-light .app-layout,
body.is-standalone-client.theme-light #homeShell.app-shell:not(.hidden) {
  background: var(--bg);
}
body.is-standalone-client.theme-light .mobile-bottom-nav,
body.is-standalone-client.theme-light .dialog .mobile-dialog-nav {
  background: #ffffff;
  border-top: 1px solid var(--border);
}
body.is-standalone-client.theme-light .mobile-bottom-nav-quick {
  border-color: var(--bg);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}
body.is-standalone-client.theme-light .chat-layout.chat-mobile-show-thread #chatComposeForm,
body.is-standalone-client.theme-light .chat-layout.chat-mobile-show-thread .chat-message-panel-head,
body.is-standalone-client.theme-light .chat-layout.chat-mobile-show-list .chat-thread-panel-head {
  background: var(--bg);
}
body.is-standalone-client.theme-light #mobileSettingsTabSelect,
body.is-standalone-client.theme-light #mobileAnalyticsTabSelect {
  background: #ffffff;
  color: var(--text);
}

/* ===== Anmeldeseite (modern): Markenseite + Anmeldekarte ===== */
.login-overlay.lg-modern {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr);
  place-items: stretch;
  background-color: #111a17;
  background-image: none;
  color: #f7f7f5;
  font-family: "Inter", system-ui, sans-serif;
}
.login-overlay.lg-modern.hidden { display: none; }
.lg-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 56px;
  overflow: hidden;
  background-color: #16211d;
  background-image:
    linear-gradient(160deg, rgba(17, 26, 23, 0.55) 0%, rgba(17, 26, 23, 0.86) 55%, rgba(17, 26, 23, 0.96) 100%),
    var(--app-daily-bg-wide, none);
  background-size: cover;
  background-position: center;
}
.lg-brand::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(104, 255, 199, 0.16), transparent 65%);
  pointer-events: none;
}
.lg-brand-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.lg-logo { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.lg-wordmark {
  font-family: "Montserrat", "Inter", sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lg-brand-main { position: relative; z-index: 1; max-width: 560px; }
.lg-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6ee7b7;
}
.lg-brand h1 {
  margin: 0 0 26px;
  font-family: "Montserrat", "Inter", sans-serif;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.lg-brand h1 span { color: #8ef0c1; }
.lg-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lg-features li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #d9e2dd; }
.lg-feature-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(142, 240, 193, 0.1);
  border: 1px solid rgba(142, 240, 193, 0.18);
}
.lg-feature-icon svg,
.lg-field svg,
.lg-eye svg,
.lg-submit svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lg-feature-icon svg { color: #8ef0c1; }
.lg-brand-foot { position: relative; z-index: 1; font-size: 12px; color: rgba(247, 247, 245, 0.55); }
/* rechte Seite */
.lg-panel {
  display: grid;
  place-items: center;
  padding: 32px 24px;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(99, 102, 241, 0.12), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(104, 255, 199, 0.08), transparent 60%),
    #111a17;
}
.lg-stage { display: grid; width: min(400px, 100%); }
.lg-stage > .login-intro-video,
.lg-stage > .login-card { grid-column: 1; grid-row: 1; width: 100%; }
.lg-stage > .login-intro-video { align-self: center; }
.login-overlay.lg-modern .login-card {
  background: rgba(24, 34, 30, 0.9);
  border: 1px solid rgba(216, 213, 201, 0.12);
  border-radius: 22px;
  padding: 30px 28px 22px;
  gap: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px);
}
.lg-card-logo { display: none; width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 4px; }
.lg-card-head { margin-bottom: 8px; }
.lg-card-head .lg-eyebrow { display: none; }
.login-overlay.lg-modern .login-card h2 {
  margin: 0;
  font-family: "Montserrat", "Inter", sans-serif;
  font-size: 26px;
  font-weight: 800;
}
.lg-sub { margin: 4px 0 0; font-size: 14px; color: rgba(247, 247, 245, 0.6); }
.login-overlay.lg-modern .login-card label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(247, 247, 245, 0.7);
}
.lg-field { position: relative; display: flex; align-items: center; }
.lg-field > svg {
  position: absolute;
  left: 14px;
  color: rgba(247, 247, 245, 0.45);
  pointer-events: none;
}
.login-overlay.lg-modern .lg-field input {
  height: 48px;
  padding: 0 44px 0 44px;
  border-radius: 12px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(216, 213, 201, 0.16);
}
.login-overlay.lg-modern .lg-field input::placeholder { color: rgba(247, 247, 245, 0.32); }
.login-overlay.lg-modern .lg-field input:focus {
  border-color: rgba(142, 240, 193, 0.7);
  box-shadow: 0 0 0 3px rgba(142, 240, 193, 0.14);
  background: rgba(255, 255, 255, 0.07);
}
.lg-field:focus-within > svg { color: #8ef0c1; }
.lg-eye {
  position: absolute;
  right: 6px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none !important;
  border-radius: 10px;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(247, 247, 245, 0.5) !important;
  cursor: pointer;
  padding: 0;
}
.lg-eye:hover, .lg-eye.is-active { color: #8ef0c1 !important; }
.lg-caps { margin: 0; font-size: 12px; font-weight: 600; color: #fbbf24; }
.lg-caps.hidden { display: none; }
.login-overlay.lg-modern .lg-submit {
  margin-top: 10px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #0c1511;
  background: linear-gradient(135deg, #8ef0c1, #5fd3a3);
  box-shadow: 0 10px 24px rgba(142, 240, 193, 0.22);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.login-overlay.lg-modern .lg-submit:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 14px 30px rgba(142, 240, 193, 0.3); }
.login-overlay.lg-modern .lg-submit svg { transition: transform 120ms ease; }
.login-overlay.lg-modern .lg-submit:hover:not(:disabled) svg { transform: translateX(3px); }
.login-overlay.lg-modern .login-card .error:empty { display: none; }
.login-overlay.lg-modern .login-card .error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  font-size: 13px;
}
.lg-card-foot { display: none; margin: 6px 0 0; text-align: center; font-size: 11px; color: rgba(247, 247, 245, 0.4); }
.login-overlay.lg-modern #loginPassword:-webkit-autofill,
.login-overlay.lg-modern #loginUsername:-webkit-autofill {
  box-shadow: 0 0 0 1000px #1c2723 inset !important;
}
/* schmale Bildschirme / Handy: nur die Karte, Logo und Begrüßung darin */
@media (max-width: 900px) {
  .login-overlay.lg-modern { grid-template-columns: 1fr; }
  .lg-brand { display: none; }
  .lg-panel {
    padding: calc(24px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
    background:
      linear-gradient(rgba(17, 26, 23, 0.86), rgba(17, 26, 23, 0.94)),
      var(--app-daily-bg-wide, none) center / cover no-repeat,
      #111a17;
  }
  .lg-card-logo { display: block; }
  .lg-card-head { text-align: center; }
  .lg-card-head .lg-eyebrow { display: block; margin-bottom: 6px; }
  .lg-card-foot { display: block; }
  .login-overlay.lg-modern .login-card { padding: 26px 20px 18px; }
}

/* Monatsauswertung: Monat als Überschrift über "Erwartet/Rechnungen",
   dadurch keine eigene Monatsspalte mehr vor den Balken */
#analyticsShell .analytics-monthly-bar-row,
#analyticsShell .analytics-monthly-scale-row {
  grid-template-columns: 1fr;
  gap: 4px;
  min-width: calc(var(--analytics-monthly-track-min-width, 220px) + 180px);
}
#analyticsShell .analytics-monthly-bar-row { padding: 8px 0 10px; }
#analyticsShell .analytics-monthly-label {
  padding-top: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
#analyticsShell .analytics-monthly-scale-title { display: none; }
#analyticsShell .analytics-monthly-bars { gap: 4px; }
#analyticsShell .analytics-monthly-bar-wrap { gap: 8px; }
#analyticsShell .analytics-monthly-legend { width: 72px; flex: 0 0 72px; }
#analyticsShell .analytics-monthly-value { min-width: 92px; flex: 0 0 92px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  #analyticsShell .analytics-monthly-bar-row,
  #analyticsShell .analytics-monthly-scale-row {
    grid-template-columns: 1fr;
    min-width: 0;
  }
  /* Bezeichnung und Betrag untereinander in einer schmalen Spalte */
  #analyticsShell .analytics-monthly-bar-wrap {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 0;
    align-items: center;
  }
  #analyticsShell .analytics-monthly-legend {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    font-size: 10px;
    line-height: 1.2;
  }
  #analyticsShell .analytics-monthly-value {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
  }
  #analyticsShell .analytics-monthly-track,
  #analyticsShell .analytics-monthly-scale-track {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
  }
  #analyticsShell .analytics-monthly-scale-spacer { height: 0; }
}
@media (max-width: 640px) {
  #analyticsShell .analytics-monthly-scale-tick { font-size: 9px; }
  #analyticsShell .analytics-monthly-scale-tick-last { display: none; }
}

/* Anmeldung ohne Intro-Video: Logo pulsiert während des Ladens, danach
   blendet die Anmeldeseite weich aus */
.login-overlay.lg-modern { transition: opacity 300ms ease; }
.login-overlay.lg-modern.lg-leaving { opacity: 0; pointer-events: none; }
.login-overlay.lg-modern .login-card.is-loading .lg-card-logo {
  display: block;
  animation: lg-pulse 1.1s ease-in-out infinite;
}
.login-overlay.lg-modern .login-card.is-loading .lg-card-head,
.login-overlay.lg-modern .login-card.is-loading label,
.login-overlay.lg-modern .login-card.is-loading .lg-field,
.login-overlay.lg-modern .login-card.is-loading .lg-submit {
  opacity: 0.45;
  transition: opacity 200ms ease;
}
.login-overlay.lg-modern .login-progress-bar {
  background: linear-gradient(90deg, #8ef0c1, #5fd3a3);
}
@keyframes lg-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(142, 240, 193, 0.35); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(142, 240, 193, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .login-overlay.lg-modern .login-card.is-loading .lg-card-logo { animation: none; }
  .login-overlay.lg-modern { transition: none; }
}

/* Fly-over-Fenster: im Dunkelmodus ist --panel halbtransparent (90 %),
   ohne Abdunkelung dahinter schien die Seite durch - feste Grundfarbe darunter */
.dialog.ava-floating-dialog > form,
.dialog.ava-floating-dialog > .dialog-card,
.dialog.ava-floating-dialog > div:not(.login-time-notice) {
  background-color: var(--bg);
  background-image: linear-gradient(var(--panel), var(--panel));
}

/* ===== Stunden auswählen (Rechnung) - modern ===== */
#billingHoursDialog.hp-modern > form {
  width: min(980px, 96vw);
  max-height: min(820px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
#billingHoursDialog .hp-avatar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hp-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
}
.hp-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.hp-all input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border) !important;
  border-radius: 999px;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.hp-chip span { font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums; }
.hp-chip.is-some { color: var(--text) !important; border-style: dashed !important; }
.hp-chip.is-all {
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
}
#billingHoursDialog .hp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0; }
#billingHoursDialog .hp-table-wrap { border: none; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
#billingHoursDialog .hp-table { width: 100%; border-collapse: separate; border-spacing: 0; }
#billingHoursDialog .hp-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-solid);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
#billingHoursDialog .hp-table thead th.money { text-align: right; }
#billingHoursDialog .hp-table tbody td {
  padding: 9px 12px;
  font-size: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  vertical-align: middle;
  background: transparent;
}
#billingHoursDialog .hp-table tbody tr { cursor: pointer; }
#billingHoursDialog .hp-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
#billingHoursDialog .hp-table tbody tr:not(.is-selected) td:not(.hp-col-check) { opacity: 0.55; }
#billingHoursDialog .hp-table tbody tr.is-selected td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
#billingHoursDialog .hp-col-check { width: 44px; text-align: center; padding-left: 18px !important; }
#billingHoursDialog .hp-col-check input { width: 17px; height: 17px; accent-color: var(--accent); }
#billingHoursDialog .hp-date strong { display: block; font-weight: 600; }
#billingHoursDialog .hp-date small,
#billingHoursDialog .hp-note { display: block; font-size: 11px; color: var(--muted); }
#billingHoursDialog .hp-time { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
#billingHoursDialog .hp-user { white-space: nowrap; }
.hp-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hp-color) 30%, transparent);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}
.hp-activity {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  font-size: 12px;
  font-weight: 600;
}
#billingHoursDialog .hp-hours { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 20px !important; }
#billingHoursDialog .hp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}
.hp-sum { font-size: 13px; color: var(--muted); }
.hp-sum strong { font-size: 16px; color: var(--text); margin-right: 2px; }
@media (max-width: 640px) {
  #billingHoursDialog .hp-time,
  #billingHoursDialog .hp-table thead th:nth-child(3) { display: none; }
  #billingHoursDialog .hp-user { white-space: normal; }
}

/* ===== Beleg auslesen ===== */
.rc-scan {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  --rc-tone: var(--accent);
  background: color-mix(in srgb, var(--rc-tone) 10%, transparent);
  border-color: color-mix(in srgb, var(--rc-tone) 40%, transparent);
}
.rc-scan.hidden { display: none; }
.rc-scan[data-state="ok"] { --rc-tone: #10b981; }
.rc-scan[data-state="warn"] { --rc-tone: #f59e0b; }
.rc-scan[data-state="error"] { --rc-tone: #ef4444; }
.rc-scan[data-state="info"],
.rc-scan[data-state="running"] { --rc-tone: #3b82f6; }
.rc-scan-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--rc-tone);
}
.rc-scan[data-state="running"] .rc-scan-icon {
  background: transparent;
  border: 2px solid color-mix(in srgb, var(--rc-tone) 30%, transparent);
  border-top-color: var(--rc-tone);
  animation: rc-spin 0.8s linear infinite;
}
@keyframes rc-spin { to { transform: rotate(360deg); } }
#receiptModal .input-row.rc-autofilled input,
#receiptModal .input-row.rc-autofilled .inline-search-field input {
  border-color: color-mix(in srgb, #10b981 65%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #10b981 14%, transparent) !important;
}
#receiptModal .input-row.rc-autofilled > label::after {
  content: " · gelesen";
  color: #10b981;
  font-weight: 600;
}
.rc-scan-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
}
.rc-scan-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* kurze Meldung "nicht am Server abgelegt" */
.archive-notice {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 40000;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: 12px;
  background: #7f1d1d;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.archive-notice.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.archive-notice.is-success { background: #065f46; }

/* ===== Vergabe / Preisspiegel: moderner Kopf ===== */
.ava-vergabe-detail-head.vg-head {
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--panel-solid)), var(--panel-solid));
  flex-wrap: wrap;
}
.vg-back {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vg-back svg,
.vg-head-icon svg,
.vg-print svg,
.bd-import button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vg-head-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-solid));
  color: var(--accent);
}
.vg-head-icon svg { width: 22px; height: 22px; }
.vg-head-main { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.vg-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.vg-head .vg-head-main h3 {
  font-size: 1.25rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vg-head-meta { font-size: 13px; color: var(--muted); }
.vg-head-meta:empty, .vg-head-stats:empty { display: none; }
.vg-head-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.vg-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-solid);
  min-width: 110px;
}
.vg-stat span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.vg-stat strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.vg-stat small {
  font-size: 11.5px;
  color: var(--muted);
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vg-stat-best { border-color: color-mix(in srgb, #16a34a 45%, var(--border)); background: color-mix(in srgb, #16a34a 8%, var(--panel-solid)); }
.vg-stat-best strong { color: #15803d; }
.vg-stat-spread strong { color: #d97706; }
.vg-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.vg-print {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vg-add { border-radius: 10px; }
@media (max-width: 720px) {
  .vg-head-icon { display: none; }
  .vg-head-main { flex: 1 1 0; }
  .vg-head-stats { order: 5; width: 100%; }
  .vg-stat { flex: 1 1 0; min-width: 0; }
}

/* ===== Bieter-Dialog: moderner Kopf ===== */
.bd-modern .cm-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.bd-modern .bd-avatar svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bd-head-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-right: 8px;
  white-space: nowrap;
}
.bd-head-total-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.bd-head-total strong { font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bd-head-total small { font-size: 11px; color: var(--muted); }
.bd-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 12px 14px;
  padding-top: 14px;
}
#avaBidderDialog.bd-modern .ava-bidder-price-table-wrapper { margin-top: 0; }
#avaBidderDialog.bd-modern .error:empty { display: none; }
.bd-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bd-field > label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.bd-field.ava-bidder-import-row { grid-column: 1 / -1; }
.bd-discount { display: flex; gap: 6px; }
.bd-discount input { flex: 1 1 auto; min-width: 0; }
.bd-modern .bd-field > input, .bd-modern .bd-field > select, .bd-modern .bd-discount input, .bd-modern .bd-discount select { height: 38px; min-height: 38px; box-sizing: border-box; margin: 0; padding-top: 0; padding-bottom: 0; }
.bd-discount select { flex: 0 0 64px; }
.bd-import { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bd-import button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-style: dashed;
  border-radius: 10px;
}
@media (max-width: 640px) {
  .bd-fields { grid-template-columns: 1fr; }
  .bd-head-total-label, .bd-head-total small { display: none; }
  .bd-head-total strong { font-size: 1.05rem; }
}

/* ===== Preisspiegel: PDF-Dialog ===== */
.ps-modern > form { width: min(640px, calc(100vw - 32px)); }
.ps-modern .bd-fields { grid-template-columns: 1fr 1fr; }
.ps-modern .bd-field-wide { grid-column: 1 / -1; }
.ps-hint { font-size: 11.5px; color: var(--muted); }
.ps-hint:empty { display: none; }
.ps-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.bd-field label.ps-check,
.ps-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  cursor: pointer;
}
.bd-field > label.ps-check-title { font-weight: 700; }
.ps-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.ps-logo {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.ps-logo.is-disabled { opacity: 0.45; pointer-events: none; }
.ps-logo-preview {
  height: 48px;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ps-logo-preview img { max-width: 100%; max-height: 44px; object-fit: contain; }
.ps-logo-preview span { font-size: 11px; color: #888; }
.ps-logo select { height: 38px; min-width: 0; }
.ps-logo-scale { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ps-logo-scale input { width: 72px; height: 38px; box-sizing: border-box; }
@media (max-width: 640px) {
  .ps-modern .bd-fields, .ps-check-grid { grid-template-columns: 1fr; }
  .ps-logo { grid-template-columns: 1fr; }
}

/* Ausgabe-Knopf im Preisspiegel-Kopf: gleiche Optik wie in der Ausschreibung (.ava-head-modern) */
.vg-head .ava-tb-btn,
body.theme-light .vg-head .ava-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
  white-space: nowrap;
}
.vg-head .ava-tb-btn.ghost,
body.theme-light .vg-head .ava-tb-btn.ghost {
  border: 1px solid var(--border);
  background: var(--panel-solid);
  color: var(--text);
}
.vg-head .ava-tb-btn.ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-solid));
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.vg-head .ava-tb-icon,
.vg-head .ava-tb-chevron {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.vg-head .ava-tb-icon { width: 16px; height: 16px; stroke-width: 1.9; opacity: 0.8; }
.vg-head .ava-tb-chevron { width: 14px; height: 14px; stroke-width: 2.2; margin-right: -3px; opacity: 0.6; }
.vg-stat-warn { border-color: color-mix(in srgb, #dc2626 40%, var(--border)); background: color-mix(in srgb, #dc2626 7%, var(--panel-solid)); }
.vg-stat-warn strong { color: #dc2626; }
#avaKostenanalyseDetail .vg-head { flex-shrink: 0; }

/* ===== Auftrag ===== */
.ava-vergabe-bidder-col.is-awarded { background: color-mix(in srgb, #16a34a 14%, var(--panel-solid)); box-shadow: inset 0 3px 0 #16a34a; }
.ava-vergabe-awarded-badge {
  display: inline-block;
  margin-bottom: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.au-list-sum { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-variant-numeric: tabular-nums; }
.au-list-sum strong { font-size: 14px; }
.au-list-sum small { font-size: 11.5px; color: var(--muted); }
.vg-stat .au-company { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#avaAuftragLangtextToggle.is-active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid)); }
.ava-auftrag-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ava-auftrag-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel-solid);
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.ava-auftrag-table td { padding: 6px 10px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); vertical-align: top; }
.ava-auftrag-table .au-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; width: 1%; }
.ava-auftrag-table th.au-num { text-align: right; }
.ava-auftrag-table .au-oz { white-space: nowrap; width: 1%; color: var(--muted); font-variant-numeric: tabular-nums; }
.ava-auftrag-table .au-eh { width: 1%; white-space: nowrap; color: var(--muted); }
.ava-auftrag-table tr.au-group td { font-weight: 700; background: color-mix(in srgb, var(--accent) 7%, var(--panel-solid)); color: var(--text); }
.ava-auftrag-table tr.au-group.au-depth-0 td { background: color-mix(in srgb, var(--accent) 13%, var(--panel-solid)); }
.ava-auftrag-table tr.au-pos.has-langtext { cursor: pointer; }
.ava-auftrag-table tr.au-pos.has-langtext:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ava-auftrag-table tr.au-pos.has-langtext .au-kurztext::after { content: " ▾"; color: var(--muted); font-size: 10px; }
.ava-auftrag-table tr.au-pos.is-open .au-kurztext::after { content: " ▴"; }
.ava-auftrag-table tr.is-excluded td { color: var(--muted); font-style: italic; }
.au-tag { margin-left: 8px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); font-size: 10.5px; font-style: normal; color: var(--muted); }
.au-langtext { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--muted); white-space: normal; cursor: text; }
.ava-auftrag-table tfoot td { padding: 7px 10px; border-bottom: none; }
.ava-auftrag-table tfoot tr.au-sum td { color: var(--muted); }
.ava-auftrag-table tfoot tr.au-total td { font-weight: 800; border-top: 1px solid var(--border); }
.ava-auftrag-table tfoot td:first-child { text-align: right; }
.ava-auftrag-compare .au-kurztext.is-toggle { cursor: pointer; }
.ava-auftrag-compare .au-kurztext.is-toggle::after { content: " ▾"; color: var(--muted); font-size: 10px; }
.ava-auftrag-compare .au-langtext { margin-top: 6px; font-weight: 400; font-size: 12.5px; line-height: 1.45; color: var(--muted); white-space: normal; }
.ava-auftrag-compare .au-bidder-name { cursor: default; }
.ava-auftrag-compare .au-group-sum { font-weight: 700; }
.ava-auftrag-compare tfoot tr.au-foot-sub td { font-weight: 500; color: var(--muted); }
.ava-auftrag-compare th.ava-vergabe-bidder-col { min-width: 220px; }
.ava-auftrag-compare tfoot tr + tr td { border-top: 1px solid var(--border); }

/* ===== AVA: Abrechnung (Aufmaßblätter) ===== */
.abr-list-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 120px; }
.abr-list-progress small { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.abr-progress { display: block; width: 120px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--border) 70%, transparent); overflow: hidden; }
.abr-progress-bar { display: block; height: 100%; border-radius: inherit; background: #16a34a; }
.abr-progress-bar.is-warn { background: #f59e0b; }
.abr-progress-bar.is-alert { background: #ef4444; }

.ava-abr-table th.abr-blatt-col,
.ava-abr-table td.abr-blatt-col,
.ava-abr-table th.abr-total-col,
.ava-abr-table td.abr-total-col { border-left: 2px solid color-mix(in srgb, var(--border) 100%, var(--text) 12%); }
.ava-abr-table thead th[data-abr-blatt] { cursor: pointer; text-transform: none; letter-spacing: 0; min-width: 170px; }
.ava-abr-table thead th[data-abr-blatt]:hover { background: color-mix(in srgb, var(--accent) 8%, var(--panel-solid)); }
.abr-blatt-head { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 0.8rem; }
.abr-blatt-head .abr-status { font-size: 10.5px; padding: 1px 7px; }
.abr-blatt-sub { font-weight: 500; font-size: 0.68rem; color: var(--muted); margin-top: 2px; }
.abr-blatt-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ava-abr-table th.abr-blatt-empty { text-transform: none; font-weight: 500; letter-spacing: 0; color: var(--muted); font-style: italic; }
.ava-abr-table th.abr-total-col[colspan] { color: var(--text); }
.ava-abr-table td.abr-text-col { white-space: normal; min-width: 260px; }
.ava-abr-table td.abr-cell { cursor: pointer; min-width: 80px; }
.ava-abr-table td.abr-cell:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -1px; }
.ava-abr-table td.abr-cell.is-empty:hover::after { content: "+"; color: var(--accent); font-weight: 700; }
.ava-abr-table td.abr-cell.is-corrected { color: #b45309; font-weight: 600; }
.abr-eingereicht { display: block; font-size: 0.62rem; font-weight: 400; color: var(--muted); text-decoration: line-through; line-height: 1.1; }
.ava-abr-table td.abr-cell-sum { color: var(--muted); }
.ava-abr-table td.abr-pct-warn { color: #d97706; font-weight: 700; }
.ava-abr-table td.abr-pct-alert { color: #ef4444; font-weight: 700; }
.ava-abr-table td.abr-empty-row { text-align: center; color: var(--muted); padding: 18px; font-style: italic; }
.ava-abr-table .badge { margin-left: 6px; }

.ava-abr-editor-card {
  width: min(1240px, 97vw);
  max-height: 90vh;
  min-width: 720px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}
body.theme-light .ava-abr-editor-card { background: #ffffff; }
.ava-abr-editor-card .dialog-head h2 { display: flex; align-items: center; gap: 10px; }
.ava-abr-editor-card .dialog-head h2 .pl-status { font-size: 11px; }
.ava-abr-editor-meta { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.ava-abr-editor-toolbar { display: flex; align-items: center; gap: 10px; padding: 0 20px 12px; border-bottom: 1px solid var(--border); }
.ava-abr-editor-filter { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 11px; border-radius: 999px; font-size: 0.8rem; background: color-mix(in srgb, var(--accent) 12%, transparent); max-width: 520px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dialog .ava-abr-editor-filter button.ghost { min-height: 22px; height: 22px; width: 22px; padding: 0; border-radius: 999px; }
.ava-abr-editor-grid-wrap { margin: 12px 20px 6px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ava-abr-editor-head,
.ava-abr-row { display: grid; grid-template-columns: 150px 1.3fr 1.5fr 64px 96px 1.1fr 96px 36px; gap: 8px; align-items: center; }
.ava-abr-editor-head { padding: 9px 12px; background: var(--panel-solid); border-bottom: 1px solid var(--border); font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.ava-abr-editor-head .num, .ava-abr-row .num { text-align: right; font-family: monospace; font-variant-numeric: tabular-nums; }
.ava-abr-editor-rows { flex: 1 1 auto; min-height: 60px; max-height: 55vh; overflow-y: auto; scrollbar-width: thin; }
.ava-abr-row { padding: 5px 12px; border-bottom: 1px solid var(--border); }
.ava-abr-row:last-child { border-bottom: none; }
.ava-abr-row.is-draft { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.ava-abr-row input { width: 100%; min-width: 0; margin: 0; }
.ava-abr-row input.is-invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 1px #ef4444 inset; }
.ava-abr-row .abr-pos { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ava-abr-row .abr-pos-text { font-size: 0.68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ava-abr-row .abr-in-faktor { text-align: right; }
.ava-abr-row .abr-in-pruef::placeholder { font-style: italic; }
.ava-abr-row.is-corrected .abr-out-anerkannt { color: #b45309; font-weight: 700; }
.ava-abr-row.is-corrected .abr-out-erg { text-decoration: line-through; color: var(--muted); }
.ava-abr-editor-hint { margin: 0 20px 8px; font-size: 0.74rem; color: var(--muted); }
.ava-abr-editor-hint code { font-size: 0.72rem; padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, var(--border) 50%, transparent); }
.ava-abr-editor-sums { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--muted); }
.ava-abr-editor-sums strong { color: var(--text); font-variant-numeric: tabular-nums; }
.ava-abr-blatt-dialog form { width: min(760px, 94vw); }
.bd-fields.abr-blatt-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.abr-blatt-fields .abr-span-3 { grid-column: span 3; }
.abr-blatt-fields .abr-span-4 { grid-column: 1 / -1; }
.abr-blatt-fields textarea { width: 100%; box-sizing: border-box; resize: vertical; }
@media (max-width: 700px) {
  .bd-fields.abr-blatt-fields { grid-template-columns: 1fr 1fr; }
  .abr-blatt-fields .abr-span-3 { grid-column: 1 / -1; }
}

/* ===== AVA: Nachträge ===== */
.au-nt-chip { display: inline-flex; align-items: center; margin-right: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; color: #7c3aed; background: rgba(124, 58, 237, 0.14); vertical-align: middle; }
.au-nt-chip.is-rejected { color: var(--muted); background: color-mix(in srgb, var(--border) 60%, transparent); text-decoration: line-through; }
.au-nt-section { margin: 8px 12px 12px; }
.au-nt-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 6px 2px; }
.au-nt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.au-nt-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-solid); min-width: 0; }
.au-nt-card.is-beauftragt { border-color: color-mix(in srgb, #16a34a 40%, var(--border)); }
.au-nt-card.is-abgelehnt { opacity: 0.65; }
.au-nt-card-top { display: flex; align-items: center; gap: 6px; }
.au-nt-card-top .au-nt-chip { margin-right: 0; }
.au-nt-card-top .pl-status { font-size: 11px; padding: 1px 8px; }
.au-nt-sum { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 14px; }
.au-nt-card-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-nt-card-hint { font-size: 12px; color: var(--muted); min-height: 1em; }
.au-nt-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.au-nt-card-actions button { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.pl-status-muted { background: color-mix(in srgb, var(--border) 60%, transparent); color: var(--muted); }
.ava-abr-table tr.abr-nt-row td { background: rgba(124, 58, 237, 0.08); border-top: 2px solid rgba(124, 58, 237, 0.35); font-size: 0.75rem; }
.ava-abr-table tr.abr-nt-row .au-nt-chip { margin-right: 0; }
.abr-nt-meta { color: var(--muted); font-weight: 500; margin-left: 6px; }

/* ===== AVA: KGR-Zuordnung ===== */
.ava-kgr-card { width: min(1000px, 96vw); max-height: 90vh; min-width: 640px; min-height: 360px; display: flex; flex-direction: column; border-radius: var(--radius); background: var(--panel); color: var(--text); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18); }
body.theme-light .ava-kgr-card { background: #ffffff; }
.ava-kgr-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; padding: 0 20px 10px; }
.ava-kgr-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.ava-kgr-field select, .ava-kgr-field input { text-transform: none; font-weight: 400; letter-spacing: 0; min-width: 220px; }
.ava-kgr-search input { min-width: 200px; }
.ava-kgr-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; padding-bottom: 8px; }
.ava-kgr-hint { margin: 0 20px 8px; font-size: 0.78rem; color: var(--muted); }
.ava-kgr-grid-wrap { margin: 0 20px 6px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ava-kgr-head, .ava-kgr-row { display: grid; grid-template-columns: 30px 110px minmax(0, 1fr) 120px 150px 70px; gap: 8px; align-items: center; }
.ava-kgr-head { padding: 9px 12px; background: var(--panel-solid); border-bottom: 1px solid var(--border); font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.ava-kgr-head .num, .ava-kgr-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.ava-kgr-rows { flex: 1 1 auto; min-height: 80px; max-height: 50vh; overflow-y: auto; scrollbar-width: thin; }
.ava-kgr-row { padding: 4px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size: 0.84rem; min-height: 32px; }
.ava-kgr-row.is-sum { font-weight: 700; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ava-kgr-row.is-checked { background: color-mix(in srgb, #16a34a 9%, transparent); }
.ava-kgr-row .kgr-code { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ava-kgr-row .kgr-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ava-kgr-row .kgr-amount { width: 100%; text-align: right; margin: 0; min-height: 28px; height: 28px; }
.ava-kgr-row .kgr-pct { color: var(--muted); font-size: 0.78rem; }
.ava-kgr-card .error:empty { display: none; }
.ava-kgr-card .error { margin: 4px 20px; }
.kgr-rest-open strong { color: #d97706; }
.kgr-rest-ok strong { color: #16a34a; }

/* ===== KGR-Status (LV-Paket / vergeben / entfällt) + Prüfliste ===== */
.kk-status-chip { display: inline-flex; align-items: center; margin-left: 8px; padding: 0 7px; height: 17px; border-radius: 999px; font-size: 10.5px; font-weight: 600; white-space: nowrap; vertical-align: 1px; cursor: help; }
.kk-status-chip.is-ausgeschrieben { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.kk-status-chip.is-vergeben { background: rgba(124, 58, 237, 0.13); color: #7c3aed; }
.kk-status-chip.is-abgerechnet { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.kk-status-chip.is-entfaellt { background: color-mix(in srgb, var(--border) 75%, transparent); color: var(--muted); }
body:not(.theme-light) .kk-status-chip.is-ausgeschrieben { color: #fbbf24; }
body:not(.theme-light) .kk-status-chip.is-vergeben { color: #a78bfa; }
body:not(.theme-light) .kk-status-chip.is-abgerechnet { color: #4ade80; }
.ava-kk-label .kk-status-chip { font-style: normal; }
.kk-pruef-btn { align-self: center; }
.kk-pruef-btn .abr-tab-count { background: rgba(245, 158, 11, 0.2); color: #b45309; margin-left: 2px; }
.kk-pruef-card { width: min(980px, 96vw); }
.kk-pruef-body { overflow: auto; padding: 4px 20px 8px; display: flex; flex-direction: column; gap: 16px; min-height: 0; flex: 1 1 auto; max-height: 66vh; }
.kk-pruef-body h3 { margin: 0 0 6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); display: flex; gap: 10px; align-items: baseline; }
.kk-pruef-body h3 span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.kk-pruef-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(260px, auto); gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 10px; margin-bottom: 6px; background: var(--panel-solid); font-size: 0.85rem; }
.kk-pruef-row.is-warn { border-color: rgba(245, 158, 11, 0.55); background: color-mix(in srgb, #f59e0b 6%, var(--panel-solid)); }
.kk-pruef-row.is-muted { opacity: 0.85; }
.kk-pruef-main { min-width: 0; }
.kk-pruef-code { font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 4px; }
.kk-pruef-flag { margin-left: 8px; font-size: 10.5px; font-weight: 700; color: #b45309; background: rgba(245, 158, 11, 0.16); padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.kk-pruef-grund { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.kk-pruef-sum { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.kk-pruef-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.kk-pruef-actions select { min-width: 170px; height: 32px; }
.kk-pruef-actions button { min-height: 32px; height: 32px; padding: 0 12px; }
.kk-pruef-note { font-size: 0.76rem; color: var(--muted); justify-content: flex-start; }
.kk-pruef-empty { margin: 0; padding: 10px 12px; color: var(--muted); font-size: 0.84rem; }
.kk-entfaellt-hint { margin: 0 0 12px; font-size: 0.84rem; color: var(--muted); }
.kk-entfaellt-dialog form { width: min(560px, 94vw); }
.kk-entfaellt-dialog .error:empty { display: none; }
/* KGR-Dialog im Paket-Modus: keine Betragsspalten */
.ava-kgr-dialog.is-paket .ava-kgr-head,
.ava-kgr-dialog.is-paket .ava-kgr-row { grid-template-columns: 30px 110px minmax(0, 1fr) 130px; }
.ava-kgr-dialog.is-paket .ava-kgr-head > :nth-child(n+5),
.ava-kgr-dialog.is-paket .ava-kgr-row > :nth-child(n+5) { display: none; }
.kgr-belegt { margin-left: 8px; font-size: 10.5px; font-weight: 600; color: #b45309; background: rgba(245, 158, 11, 0.15); padding: 1px 7px; border-radius: 999px; white-space: nowrap; }

/* ===== Konditionen + Freigabeblatt ===== */
.kond-dialog form { width: min(640px, 94vw); }
.kond-subtitle { font-size: 0.78rem; font-weight: 700; margin-bottom: 8px; }
.kond-subtitle span { font-weight: 400; color: var(--muted); }
.bd-fields.kond-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kond-warn { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: rgba(245, 158, 11, 0.12); color: #b45309; font-size: 0.84rem; }
.kond-note { margin: 0; color: var(--muted); font-size: 0.86rem; }
.kond-dialog .error:empty { display: none; }
.rg-fields .bd-field.is-fixed > label::after { content: " · lt. Auftrag"; color: var(--accent); text-transform: none; letter-spacing: 0; font-weight: 600; }
.bd-modern .rg-fields .bd-field.is-fixed > input { background: color-mix(in srgb, var(--accent) 7%, var(--panel-solid)); border-style: dashed; color: var(--text); cursor: not-allowed; opacity: 1; -webkit-text-fill-color: var(--text); }
.abr-rg-table .abr-rg-pdf { width: 30px; height: 30px; min-height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.abr-rg-pdf svg, #avaRechnungFreigabeButton svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
.au-kond-stat strong { font-size: 13px; }
.rg-manuell { border: 1px dashed var(--border); border-radius: 12px; padding: 10px 12px; }
.rg-blaetter { border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--accent) 3%, transparent); }
.rg-blaetter-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.rg-blaetter-head .rg-subtitle { margin: 0; color: var(--text); }
.rg-blatt-quick { display: inline-flex; gap: 4px; }
.rg-blatt-quick button { min-height: 26px; height: 26px; padding: 0 10px; font-size: 0.76rem; border-radius: 999px; }
.rg-blatt-summary { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
.rg-blatt-summary strong { color: var(--text); font-variant-numeric: tabular-nums; }
.rg-blatt-summary .rg-blatt-open { color: #b45309; }
.rg-blatt-summary:empty { display: none; }
.rg-manuell .rg-subtitle span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.bd-fields.rg-manuell-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Kostenanalyse: Felder aus einem beauftragten LV (nicht editierbar) */
.ava-kk-row input.ava-kk-from-lv { color: #7c3aed !important; font-weight: 600; cursor: help; opacity: 1; -webkit-text-fill-color: #7c3aed; }
.ava-kk-row .ava-kk-nachtragsumme.ava-kk-from-lv { color: #7c3aed; font-weight: 600; cursor: help; }

/* ===== AVA: Rechnungen ===== */
.abr-tabs { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-solid); }
.abr-tab { border: none; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; padding: 6px 14px; border-radius: 999px; cursor: pointer; min-height: 0; display: inline-flex; align-items: center; gap: 6px; }
.abr-tab.is-active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.abr-tab-count:empty { display: none; }
.abr-tab-count { font-size: 11px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); }
.abr-rechnungen { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; padding: 4px 12px 12px; min-height: 0; overflow: auto; }
.abr-rechnungen > * { flex: 0 0 auto; }
.abr-rg-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.abr-rg-empty { padding: 28px; }
.abr-rg-table-wrap { border: 1px solid var(--border); border-radius: 14px; overflow-x: auto; background: var(--panel-solid); box-shadow: var(--shadow); }
.abr-rg-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.abr-rg-table th { background: var(--panel-solid); text-align: left; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--border); white-space: normal; line-height: 1.25; vertical-align: bottom; }
.abr-rg-table td { padding: 12px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); white-space: nowrap; vertical-align: top; }
.abr-rg-table tbody tr:last-child td { border-bottom: none; }
.abr-rg-table .abr-rg-sub { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.abr-rg-table td.num strong { font-size: 0.92rem; }
.abr-rg-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.abr-rg-table tbody tr { cursor: pointer; }
.abr-rg-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.abr-rg-table small { display: block; font-size: 0.68rem; }
.abr-rg-diff { color: #d97706; font-weight: 600; }
.abr-rg-diff-ok { color: #16a34a; }
.abr-rg-table .pl-status svg, .abr-rg-chip svg { width: 11px; height: 11px; vertical-align: -1px; margin-right: 3px; }
.abr-rg-chip { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.abr-rg-chip.is-locked { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.ava-abr-editor-dialog.is-locked .ava-abr-row input { opacity: 0.75; }
.ava-abr-editor-dialog.is-locked [data-abr-delete] { visibility: hidden; }

.ava-rechnung-card { width: min(1180px, 97vw); max-height: 92vh; display: flex; flex-direction: column; }
.rg-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 18px; overflow: auto; }
.rg-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bd-fields.rg-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rg-subtitle, .rg-sheet-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; }
.rg-blatt-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rg-blatt { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 120px; gap: 8px; align-items: center; padding: 7px 10px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size: 0.84rem; cursor: pointer; }
.rg-blatt:last-child { border-bottom: none; }
.rg-blatt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-blatt-sum { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.rg-blatt .pl-status { font-size: 10.5px; padding: 1px 7px; }
.rg-empty { margin: 0; padding: 10px; color: var(--muted); font-size: 0.84rem; }
.rg-sheet { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: var(--panel-solid); align-self: start; position: sticky; top: 0; }
.rg-line { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.rg-line span:last-child { white-space: nowrap; }
.rg-line.is-sub { color: var(--muted); }
.rg-line.is-total { border-top: 1px solid var(--border); font-weight: 600; }
.rg-line.is-strong { font-weight: 800; }
.rg-line.is-pay { margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: rgba(22, 163, 74, 0.12); font-weight: 800; font-size: 1rem; color: #15803d; }
body:not(.theme-light) .rg-line.is-pay { color: #4ade80; }
.rg-compare { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.rg-line.is-diff span:last-child { color: #d97706; font-weight: 700; }
.rg-line.is-ok span:last-child { color: #16a34a; font-weight: 700; }
.rg-warn { margin: 10px 0 0; font-size: 0.78rem; color: #d97706; }
.ava-rechnung-card .error:empty { display: none; }
@media (max-width: 900px) {
  .rg-body { grid-template-columns: 1fr; }
  .bd-fields.rg-fields { grid-template-columns: 1fr 1fr; }
  .abr-rg-tiles { grid-template-columns: 1fr 1fr; }
}

/* ===== Einstellungen › Firma › Geschäftsbedingungen ===== */
.cf-terms-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cf-terms-button { display: inline-flex; align-items: center; gap: 8px; }
.cf-terms-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cf-terms-status { font-size: 13px; color: var(--muted); }
.cf-terms-status.is-set { color: #16a34a; font-weight: 600; }
dialog.terms-dialog > form { width: min(1000px, calc(100vw - 32px)); max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
dialog.terms-dialog .dialog-body { overflow: auto; }
/* Blattbreite A4 (Inhalt ~18 cm), Grundschrift wie im Druck (9 px) - zum
   Bearbeiten 140 % vergrößert angezeigt */
body.settings-page .rich-editor.terms-editor,
body.settings-page.theme-light .rich-editor.terms-editor {
  width: 18cm;
  max-width: 100%;
  min-height: 55vh;
  margin: 0 auto;
  padding: 10mm 8mm;
  box-sizing: border-box;
  background: #fff;
  color: #111;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 9px;
  line-height: 1.4;
  zoom: 1.4;
  border-radius: 6px;
  white-space: normal;
}
.terms-editor p { margin: 0 0 1.2mm; }
.terms-editor ul, .terms-editor ol { margin: 0 0 1.2mm; padding-left: 5mm; }
.terms-hint { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }
.offer-terms-hint { color: #d97706; font-size: 12px; }
.offer-terms-hint:empty { display: none; }

/* Positions-Dialog: Auswahl "Lücke einfügen" in der Textleiste */
.rich-toolbar .ava-gap-insert { height: 28px; min-height: 28px; padding: 0 8px; font-size: 0.78rem; border-radius: 8px; max-width: 190px; margin-left: 4px; }

/* Bilder zu LV-Positionen */
.ava-pos-bilder-section { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.ava-pos-bilder-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ava-pos-bilder-head label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.ava-pos-bilder-head button { min-height: 30px; height: 30px; padding: 0 12px; font-size: 0.8rem; }
.ava-pos-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ava-pos-bild { position: relative; margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel-solid); }
.ava-pos-bild img { display: block; width: 100%; height: 100px; object-fit: cover; }
.ava-pos-bild input { width: 100%; border: none; border-top: 1px solid var(--border); border-radius: 0; font-size: 0.78rem; padding: 5px 8px; background: transparent; margin: 0; }
.ava-pos-bild-del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; min-height: 24px; padding: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.55) !important; color: #fff !important; border: none !important; }
.ava-pos-bilder-empty { margin: 0; font-size: 0.82rem; color: var(--muted); grid-column: 1 / -1; }
.ava-main-with-bild { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ava-main-with-bild > input { flex: 1 1 auto; min-width: 0; }
.ava-bild-badge { flex: 0 0 auto; min-height: 20px; height: 20px; padding: 0 6px; font-size: 11px; border-radius: 999px; line-height: 1; }

/* Preisspiegel: ABC-Analyse */
.abc-card { width: min(1300px, 97vw); }
.abc-toolbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 0 20px 10px; }
.abc-toolbar input { width: 70px; min-width: 70px !important; }
.abc-filter { margin-left: auto; }
.abc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 20px 10px; }
.abc-tile { display: flex; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--panel-solid); font-size: 0.86rem; }
.abc-tile small { display: block; color: var(--muted); font-size: 0.76rem; margin-top: 2px; }
.abc-out-count { color: #dc2626; }
.abc-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font-weight: 800; font-size: 12px; color: #fff; }
.abc-tile .abc-badge { width: 34px; height: 34px; font-size: 16px; border-radius: 10px; }
.abc-a { background: #dc2626; }
.abc-b { background: #f59e0b; }
.abc-c { background: #64748b; }
.abc-table-wrap { margin: 0 20px 8px; border: 1px solid var(--border); border-radius: 12px; overflow: auto; max-height: 52vh; }
.abc-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.abc-table th { position: sticky; top: 0; background: var(--panel-solid); text-align: left; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--border); white-space: nowrap; z-index: 1; }
.abc-table td { padding: 6px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); white-space: nowrap; vertical-align: top; }
.abc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.abc-table td small { display: block; font-size: 0.68rem; opacity: 0.85; }
.abc-table .abc-text { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.abc-table .abc-bidder { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.abc-table td.abc-hi, .abc-leg.abc-hi { color: #dc2626; font-weight: 700; background: rgba(220, 38, 38, 0.07); }
.abc-table td.abc-lo, .abc-leg.abc-lo { color: #15803d; font-weight: 700; background: rgba(22, 163, 74, 0.08); }
.abc-table tr.is-out td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.abc-table .abc-muted { color: var(--muted); }
.abc-table .abc-empty { text-align: center; color: var(--muted); padding: 20px; }
.abc-leg { padding: 0 6px; border-radius: 4px; margin-left: 6px; }
/* Positionsdialog mit Bilder-Bereich: Langtext behält eine brauchbare
   Mindesthöhe, der Bereich scrollt, statt den Langtext zu überdecken */
.ava-position-attrs-panel { overflow-y: auto; }
.ava-position-attrs-langtext-row { min-height: 160px; }
.ava-position-attrs-langtext-row .rich-input { min-height: 90px; }
.ava-pos-bilder-section { flex-shrink: 0; }
.abc-card .dialog-actions .ava-abr-editor-sums { align-items: center; }
.abc-leg { display: inline-block; line-height: 1.6; align-self: center; }

/* Auftrag/Abrechnung: Eventualposition anordnen, gesperrte Zeilen */
.au-ep-toggle { display: block; margin: 3px 0 0 auto; min-height: 20px; height: 20px; padding: 0 8px; font-size: 10.5px; border-radius: 999px; font-style: normal; }
.au-ep-toggle.is-on { color: #15803d; border-color: rgba(22, 163, 74, 0.5); background: rgba(22, 163, 74, 0.1); }
.ava-abr-table tr.abr-locked-row td { color: var(--muted); font-style: italic; opacity: 0.75; }
.abr-locked-note { margin-left: 8px; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--border) 70%, transparent); font-style: normal; white-space: nowrap; }

/* Abrechnung: Mengenprognose */
.ava-abr-table th.abr-prog-col, .ava-abr-table td.abr-prog-col { border-left: 2px solid color-mix(in srgb, #7c3aed 35%, var(--border)); }
.ava-abr-table thead th.abr-prog-col { color: #7c3aed; }
.ava-abr-table td.abr-prog-cell { cursor: pointer; }
.ava-abr-table td.abr-prog-cell:hover { outline: 1px solid color-mix(in srgb, #7c3aed 50%, transparent); outline-offset: -1px; background: rgba(124, 58, 237, 0.06); }
.ava-abr-table td.abr-prog-cell.is-override { color: #7c3aed; font-weight: 700; }
.ava-abr-table td.abr-prog-cell.is-override::before { content: "✎ "; font-size: 9px; }
.ava-abr-table td.abr-prog-cell.is-mehr, .ava-abr-table td.abr-prog-mehr { color: #d97706; font-weight: 700; }
.abr-prog-foot { color: #7c3aed; font-weight: 700; white-space: nowrap; }
.kk-head-controls { display: inline-flex; align-items: center; gap: 6px; align-self: center; flex-wrap: wrap; }
.kk-stufe-select { height: 34px; min-height: 34px; font-size: 0.82rem; border-radius: 999px; padding: 0 10px; max-width: 170px; }
.kk-budget-btn.is-active { color: #b45309; border-color: rgba(245, 158, 11, 0.6); background: rgba(245, 158, 11, 0.12); }
.kk-budget-star { font-size: 14px; line-height: 1; }
.kk-budget-chip { margin-left: 8px; font-size: 10.5px; font-weight: 700; color: #b45309; background: rgba(245, 158, 11, 0.15); padding: 1px 8px; border-radius: 999px; }
.ava-kk-einsparung.is-negative { color: #dc2626 !important; }

/* Rechnungen: Zahlung */
.rg-zahlung { border: 1px dashed color-mix(in srgb, #16a34a 45%, var(--border)); border-radius: 12px; padding: 10px 12px; }
.rg-zahlung .rg-subtitle span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.rg-zahlung-row { display: flex; gap: 6px; }
.rg-zahlung-row input { flex: 1 1 auto; min-width: 0; }
.rg-zahlung-row button { white-space: nowrap; min-height: 38px; }
.abr-rg-paid { color: #15803d; font-weight: 600; }
.abr-rg-unpaid { color: #b45309; }
.kk-head-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
.kk-head-controls .vg-actions { margin: 0; }

/* ----- AVA-Einstellungen: Objektdaten im modernen Stil (wie Kostenanalyse-Kopf) ----- */
.od-panel { max-width: 860px; }
.od-head { margin-bottom: 14px; }
.od-eyebrow { margin: 0 0 2px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.ava-settings-panel.od-panel .od-head h2 { margin: 0; font-size: 1.45rem; font-weight: 800; }
.od-sub { margin: 4px 0 0; color: var(--muted); font-size: 0.85rem; max-width: 620px; }
.od-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.od-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.od-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; cursor: text; }
.od-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.od-label b { color: var(--text); font-weight: 800; margin-left: 2px; }
.od-input { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--text) 3%, transparent); transition: border-color 0.15s, box-shadow 0.15s; }
.od-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.od-input input { flex: 1 1 auto; min-width: 0; border: none !important; background: transparent !important; box-shadow: none !important; padding: 10px 12px; font-size: 1.05rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; outline: none; }
.od-input em { font-style: normal; color: var(--muted); font-weight: 600; padding: 0 12px 0 2px; }
.od-ratios { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.od-ratio { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); min-width: 150px; }
.od-ratio span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.od-ratio strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.od-ratio small { font-size: 0.72rem; color: var(--muted); }
.od-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.od-status { margin: 0 auto 0 0; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 720px) {
  .od-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ===================== PM / Terminplanung (terminplan.js) ===================== */
/* Seitenleiste: Projektkarte + Bereiche wie bei AVA */
#pmProjectNav { display: flex; flex-direction: column; gap: 2px; }
#pmProjectNav.hidden { display: none; }
#pmProjectNav .ava-nav-project {
  display: flex; flex-direction: column; gap: 1px; margin: 6px 0 4px; padding: 9px 12px; max-width: 220px;
  border-radius: 12px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 5%, var(--panel-solid)); cursor: pointer;
}
#pmProjectNav .ava-nav-project:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
#pmProjectNav .ava-nav-project small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
#pmProjectNav .ava-nav-project strong { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pmProjectNav .pm-step { position: relative; min-height: 44px; }
#pmProjectNav .pm-step .nav-icon {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--muted) 45%, transparent); background: var(--panel-solid); opacity: 1;
}
#pmProjectNav .pm-step .nav-icon svg { width: 15px; height: 15px; }
#pmProjectNav .pm-step + .pm-step::after {
  content: ""; position: absolute; left: 23px; top: -10px; height: 20px; z-index: 2;
  border-left: 1.5px solid color-mix(in srgb, var(--muted) 55%, transparent);
}
#pmProjectNav .pm-step[data-active-view="true"] .nav-icon { background: var(--accent); border-color: var(--accent); color: #fff; }
#pmProjectNav .pm-step-meta { order: 3; margin-left: auto; min-width: 20px; font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; }
#pmProjectNav .pm-step-meta:empty { display: none; }

/* Ansicht */
.terminplan { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 16px; min-width: 0; }
.terminplan.hidden { display: none; }
.tp-loading { padding: 40px; color: var(--muted); }
.tp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.tp-head-title { min-width: 0; flex: 1 1 320px; }
.tp-eyebrow { margin: 0 0 2px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.tp-head h2 { margin: 0; font-size: 1.45rem; font-weight: 800; }
.tp-title-input {
  width: 100%; max-width: 560px; font: inherit; font-size: 1.45rem; font-weight: 800; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 2px 6px; margin-left: -6px;
}
.terminplan .tp-title-input { border: 1px solid transparent !important; background: transparent !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; }
.terminplan .tp-title-input:hover:not(:disabled) { border-color: var(--border) !important; }
.terminplan .tp-title-input:focus { outline: none; border-color: var(--accent) !important; }
.tp-head-meta { display: flex; align-items: center; gap: 10px; }
.tp-rev-select { min-width: 150px; }
.tp-save-status { font-size: 0.8rem; color: var(--muted); min-width: 90px; text-align: right; }
.tp-save-status[data-kind="saved"] { color: #16a34a; }
.tp-save-status[data-kind="error"] { color: #dc2626; }
.tp-locked-note { padding: 8px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--border)); background: color-mix(in srgb, #f59e0b 10%, transparent); font-size: 0.88rem; }

.tp-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tp-tool-group { display: inline-flex; align-items: center; gap: 4px; }
.tp-tool-spacer { flex: 1 1 auto; }
.tp-btn { min-height: 36px; padding: 6px 12px; }
.tp-icon-btn { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.tp-icon-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tp-danger:not(:disabled):hover { color: #dc2626; }
.tp-seg { padding: 3px; border: 1px solid var(--border); border-radius: 999px; gap: 2px; }
.tp-seg button { border: none; background: transparent; color: var(--text); font-weight: 600; font-size: 0.85rem; padding: 5px 12px; border-radius: 999px; min-height: 0; box-shadow: none; }
.tp-seg button.is-active { background: var(--accent); color: #fff; }
.tp-seg button[data-tp-zoom] { min-width: 34px; padding: 5px 10px; }
.tp-scale { gap: 2px; align-items: center; }
.tp-scale .tp-icon-btn { width: 32px; height: 32px; }
.tp-zoom-pct { border: none; background: transparent; box-shadow: none; min-height: 0; padding: 4px 6px; min-width: 42px; font-size: 0.8rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; border-radius: 8px; cursor: pointer; }
.tp-zoom-pct:hover { color: var(--text); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.tp-attach { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); white-space: nowrap; }

/* Board: Tabelle links (fixiert), Balkenplan rechts, gemeinsames Scrollen */
.tp-board {
  --tp-pane-w: 720px;
  position: relative; overflow: auto; max-height: calc(100vh - 250px); min-height: 260px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--card);
}
.tp-grid { position: relative; width: calc(var(--tp-pane-w) + var(--tp-chart-width, 600px)); min-width: 100%; }
.tp-grid-head { position: sticky; top: 0; z-index: 6; display: flex; background: var(--panel-solid); border-bottom: 1px solid var(--border); }
/* Sichtbarer Tabellenausschnitt (--tp-pane-w, per Trennlinie ziehbar) mit
   fester Inhaltsbreite innen, verschoben über --tp-tscroll (eigener
   Scrollbalken unter der Tabelle, terminplan.js tpWireTablePane) */
.tp-cells { display: block; width: var(--tp-pane-w); flex: 0 0 var(--tp-pane-w); overflow: hidden; }
.tp-cells-inner { display: flex; align-items: stretch; width: var(--tp-table-w, 720px); height: 100%; transform: translateX(calc(-1px * var(--tp-tscroll, 0))); }
.tp-cells-head { position: sticky; left: 0; z-index: 7; background: linear-gradient(var(--panel-solid), var(--panel-solid)), var(--panel-solid); border-right: 1px solid var(--border); overflow: hidden; }
.tp-cells-head .tp-cells-inner { align-items: flex-end; }
.tp-cells-head .tp-c { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 0 6px 8px; white-space: nowrap; }
/* Köpfe exakt über den Daten: gleiche Innenabstände wie die Felder (Rahmen 1px + 5px) */
.tp-cells-head .tp-c-nr { justify-content: center; padding-left: 0; padding-right: 0; }
.tp-cells-head .tp-c-name { padding-left: 4px; gap: 6px; align-items: flex-end; }
/* Ebenen ein-/aufklappen im Tabellenkopf (wie im LV) */
.tp-level-nav { display: inline-flex; gap: 3px; margin-bottom: -2px; }
.tp-level-nav .ava-vergabe-level-btn { text-transform: none; letter-spacing: 0; }
.tp-cells-head .tp-c-num { justify-content: flex-end; }
.tp-cells-head .tp-c-date { padding-left: 5px; }
.terminplan .tp-row .tp-c-resp { padding: 0 6px !important; }
/* Trennlinie zum Ziehen */
.tp-cells-head { position: sticky; }
.tp-splitter { position: absolute; top: 0; bottom: 0; right: 0; width: 9px; cursor: col-resize; z-index: 9; }
.tp-splitter::after { content: ""; position: absolute; top: 6px; bottom: 6px; left: 3px; width: 4px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 35%, transparent); opacity: 0; transition: opacity 120ms ease; }
.tp-cells-head:hover .tp-splitter::after, .tp-splitter:hover::after, body.tp-resizing .tp-splitter::after { opacity: 1; background: var(--accent); }
body.tp-resizing, body.tp-resizing * { cursor: col-resize !important; user-select: none; }
/* eigener waagrechter Scrollbalken der Tabelle, bleibt unten sichtbar */
.tp-table-hscroll { position: sticky; left: 0; bottom: 0; z-index: 8; width: var(--tp-pane-w); height: 14px; overflow-x: auto; overflow-y: hidden; background: var(--panel-solid); border-top: 1px solid var(--border); border-right: 1px solid var(--border); display: none; }
.tp-table-hscroll.is-needed { display: block; }
.tp-table-hscroll-inner { width: var(--tp-table-w, 720px); height: 1px; }
.tp-c { box-sizing: border-box; display: flex; align-items: center; min-width: 0; }
.tp-c-nr { width: 38px; justify-content: center; color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.tp-c-name { flex: 1 1 0; min-width: 0; gap: 2px; } /* Basis 0: gleiche Breite in Kopf und Zeilen */
.tp-c-resp { width: 74px; }
.tp-c-date { width: 110px; }
.tp-c-num { width: 52px; }
.tp-c-pred { width: 78px; }
.tp-timeline-head { position: relative; flex: 0 0 auto; }
.tp-tl-row { position: relative; height: 22px; }
.tp-tl-months { height: 24px; }
.tp-tl-days { height: 26px; }
.tp-tl-month, .tp-tl-week, .tp-tl-day { position: absolute; top: 0; bottom: 0; box-sizing: border-box; border-left: 1px solid var(--border); overflow: hidden; white-space: nowrap; }
.tp-tl-month { padding: 5px 6px 0; font-size: 0.76rem; font-weight: 800; color: var(--text); }
.tp-tl-week { display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; color: var(--muted); border-top: 1px solid var(--border); }
.tp-tl-day { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.62rem; color: var(--muted); border-top: 1px solid var(--border); line-height: 1.05; }
.tp-tl-day small { font-size: 0.66rem; color: var(--text); }
.tp-tl-day.is-off { background: color-mix(in srgb, var(--muted) 10%, transparent); }

.tp-grid-body { position: relative; }
.tp-chart { position: absolute; top: 0; left: var(--tp-pane-w); }
.tp-shade { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--muted) 8%, transparent); }
.tp-week-line { position: absolute; top: 0; bottom: 0; border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.tp-today { position: absolute; top: 0; bottom: 0; border-left: 2px solid #ef4444; z-index: 1; }
.tp-bars { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tp-bars .tp-bar { pointer-events: auto; }
.tp-links { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; overflow: visible; }
.tp-link-hit { fill: none; stroke: transparent; stroke-width: 11; pointer-events: stroke; cursor: context-menu; }
.tp-link-g:hover .tp-link, .tp-link-g:hover .tp-link-head { stroke: var(--accent); stroke-width: 2.2; }
.tp-link-temp { position: absolute; top: 0; left: 0; z-index: 6; pointer-events: none; overflow: visible; }
.tp-temp-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; }
.tp-temp-line.is-invalid { stroke: #dc2626; }
.tp-temp-dot { fill: var(--accent); }
.tp-temp-label { font-size: 11px; font-weight: 800; fill: var(--accent); }
.tp-link { fill: none; stroke: color-mix(in srgb, var(--muted) 80%, transparent); stroke-width: 1.3; }
.tp-link-head { fill: none; stroke: color-mix(in srgb, var(--muted) 90%, transparent); stroke-width: 1.5; }

.tp-row { position: absolute; left: 0; width: 100%; height: 34px; pointer-events: none; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); box-sizing: border-box; }
/* Zeilen decken auch die 1px-Trennlinie ab (sonst scheinen Verknüpfungslinien,
   die beim Scrollen unter die Tabelle laufen, dort durch) und zeichnen sie selbst */
.tp-row .tp-cells { position: sticky; left: 0; z-index: 4; height: calc(100% + 1px); pointer-events: auto; background: var(--card); border-right: 1px solid var(--border); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--border) 60%, transparent); }
.tp-row.is-selected { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tp-row.is-selected .tp-cells { background: color-mix(in srgb, var(--accent) 9%, var(--card)); box-shadow: inset 3px 0 0 var(--accent), inset 0 -1px 0 color-mix(in srgb, var(--border) 60%, transparent); }
.tp-row.tp-level-1.is-summary .tp-cells { font-weight: 800; }
.tp-row.tp-level-1.is-summary:not(.is-selected) .tp-cells { background: color-mix(in srgb, var(--accent) 4%, var(--card)); }
/* Deckender Zellhintergrund: --card ist im Dunkelmodus ein halbtransparenter
   Verlauf (color-mix damit ungültig) - beim seitlichen Scrollen schienen die
   Balken sonst durch die Tabelle. Oberste Schicht = Tönung, darunter deckend. */
.tp-row .tp-cells { --tp-cell-base: linear-gradient(var(--panel-solid), var(--panel-solid)), var(--panel-solid); background: linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)), var(--tp-cell-base); }
.tp-row.is-selected .tp-cells { background: linear-gradient(color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)), var(--tp-cell-base); }
.tp-row.tp-level-1.is-summary:not(.is-selected) .tp-cells { background: linear-gradient(color-mix(in srgb, var(--accent) 5%, transparent), color-mix(in srgb, var(--accent) 5%, transparent)), var(--tp-cell-base); }
.tp-row.tp-level-2.is-summary .tp-cells { font-weight: 700; }
.tp-row.tp-level-3.is-summary .tp-cells { font-weight: 650; }
/* Schlanke Tabellenfelder - bewusst mit !important gegen den allgemeinen
   Feldstil des Programms (Rahmen, 16px Schrift, Innenabstand). */
.terminplan .tp-row input {
  width: 100% !important; min-width: 0 !important; height: 26px !important; min-height: 0 !important; box-sizing: border-box !important;
  font-family: inherit !important; font-size: 13px !important; font-weight: inherit; line-height: 26px !important; color: var(--text);
  background: transparent !important; border: 1px solid transparent !important; border-radius: 6px !important; padding: 0 5px !important;
  box-shadow: none !important; margin: 0 !important;
}
.terminplan .tp-row input:hover:not(:disabled) { border-color: var(--border) !important; }
.terminplan .tp-row input:focus { outline: none; border-color: var(--accent) !important; background: var(--panel-solid) !important; }
.terminplan .tp-row input[type="date"] { font-size: 12.5px !important; padding: 0 2px 0 4px !important; font-variant-numeric: tabular-nums; }
.terminplan .tp-row input[type="date"]::-webkit-calendar-picker-indicator { margin: 0; padding: 0; width: 12px; opacity: 0.55; }
.terminplan .tp-row input[type="date"]:disabled::-webkit-calendar-picker-indicator { display: none; }
.tp-row input:disabled { color: inherit; opacity: 1; -webkit-text-fill-color: currentColor; }
.tp-row .tp-c-date input:disabled { color: var(--muted); -webkit-text-fill-color: var(--muted); }
.tp-row .tp-c-num input { text-align: right; font-variant-numeric: tabular-nums; }
.terminplan .tp-row input.is-error { border-color: #dc2626 !important; }
.tp-row .tp-c-name input { font-weight: inherit; }
.tp-c-resp { justify-content: flex-start; border: none; background: transparent; color: #2563eb; font-weight: 700; font-size: 0.8rem; padding: 0 6px; min-height: 0; box-shadow: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; text-align: left; }
.tp-c-resp:disabled { cursor: default; color: var(--muted); }
.tp-c-resp.has-color, .tp-c-resp.has-color:disabled { color: var(--tp-resp-color); -webkit-text-fill-color: var(--tp-resp-color); }
.tp-toggle, .tp-toggle-spacer { flex: 0 0 18px; width: 18px; height: 18px; }
.tp-toggle { border: none; background: transparent; padding: 0; min-height: 0; box-shadow: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tp-toggle svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; transition: transform 120ms ease; }
.tp-toggle.is-collapsed svg { transform: rotate(-90deg); }
.tp-ms-icon { color: var(--text); font-size: 0.72rem; margin-right: 2px; }

/* Balken */
/* Trefferfläche = sichtbarer Balken (16px), nicht die ganze Zeile - sonst
   fangen Balken Klicks auf Verknüpfungslinien ab, die durch die Zeile laufen */
.tp-bar { position: absolute; height: 16px; margin-top: 9px; box-sizing: border-box; }
.tp-task::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; border-radius: 5px; background: #60a5fa; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15); }
.tp-task.tp-task-3::before { background: #93c5fd; }
.tp-task b { position: absolute; left: 0; top: 0; height: 16px; border-radius: 5px 0 0 5px; background: #1d4ed8; max-width: 100%; }
.tp-task b[style*="width:100%"] { border-radius: 5px; }
.tp-task.is-draggable { cursor: grab; }
.tp-task.is-dragging { cursor: grabbing; opacity: 0.85; }
.tp-bar-resize { position: absolute; right: 0; top: -2px; width: 7px; height: 20px; cursor: ew-resize; z-index: 2; }
/* Verknüpfungspunkte: knapp außerhalb des Balkens (am Balkenende sitzt der
   Griff zum Verlängern), beim Überfahren bzw. während des Verknüpfens sichtbar */
.tp-handle {
  position: absolute; top: 1px; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%;
  background: var(--panel-solid); border: 2px solid var(--accent); opacity: 0; z-index: 3; cursor: crosshair; pointer-events: none;
  transition: opacity 100ms ease, transform 100ms ease;
}
.tp-h-start { left: -17px; }
.tp-h-end { right: -17px; }
.tp-ms .tp-h-start { left: -26px; right: auto; }
.tp-ms .tp-h-end { left: 12px; right: auto; }
/* Unsichtbare Zone um den Balken bis über die Punkte hinaus: der Balken bleibt
   "überfahren", während man vom Balken zum Punkt fährt (sonst verschwand der
   Punkt in der Lücke zwischen Balken und Punkt). */
.tp-hover-zone { position: absolute; left: -26px; right: -26px; top: -7px; bottom: -7px; z-index: 0; }
.tp-ms .tp-hover-zone { left: -30px; right: auto; width: 60px; }
.tp-bar.has-handles:hover .tp-handle,
body.tp-linking .tp-bar.has-handles .tp-handle,
.tp-bar.is-link-source .tp-handle { opacity: 1; pointer-events: auto; }
.tp-handle:hover { transform: scale(1.3); background: var(--accent); }
.tp-bar.is-link-start .tp-h-start, .tp-bar.is-link-end .tp-h-end { opacity: 1; transform: scale(1.4); background: var(--accent); }
.tp-bar.is-link-target::before, .tp-ms.is-link-target i { outline: 2px solid var(--accent); outline-offset: 2px; }
.tp-bar.is-link-invalid::before, .tp-ms.is-link-invalid i { outline-color: #dc2626; }
body.tp-linking, body.tp-linking * { cursor: crosshair !important; user-select: none; }
.tp-bar-label { position: absolute; left: calc(100% + 20px); top: 0; line-height: 16px; font-size: 0.74rem; font-weight: 600; color: var(--text); white-space: nowrap; pointer-events: none; }
.tp-sum::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 8px; background: #1e293b; }
.tp-sum::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 13px; background: linear-gradient(135deg, #1e293b 50%, transparent 50%) left / 7px 13px no-repeat, linear-gradient(225deg, #1e293b 50%, transparent 50%) right / 7px 13px no-repeat; }
.tp-sum b { position: absolute; left: 0; top: 5px; height: 4px; background: #60a5fa; max-width: 100%; }
.tp-sum.tp-sum-2::before, .tp-sum.tp-sum-2::after { filter: opacity(0.75); }
.tp-sum.tp-sum-3::before, .tp-sum.tp-sum-3::after { filter: opacity(0.6); }
body:not(.theme-light) .tp-sum::before { background: #cbd5e1; }
body:not(.theme-light) .tp-sum::after { background: linear-gradient(135deg, #cbd5e1 50%, transparent 50%) left / 7px 13px no-repeat, linear-gradient(225deg, #cbd5e1 50%, transparent 50%) right / 7px 13px no-repeat; }
.tp-ms { width: 0; }
.tp-ms i { position: absolute; left: -8px; top: 1px; width: 14px; height: 14px; transform: rotate(45deg); background: var(--text); border-radius: 2px; }
.tp-ms .tp-bar-label { left: 28px; }
.tp-bar.is-selected::before { outline: 2px solid var(--accent); outline-offset: 2px; }
.tp-ms.is-selected i { outline: 2px solid var(--accent); outline-offset: 2px; }
.tp-grid-empty { padding: 24px; color: var(--muted); }

/* Info beim Überfahren */
.tp-tip { position: fixed; z-index: 3000; min-width: 220px; max-width: 320px; padding: 10px 12px; border-radius: 12px; background: var(--panel-solid); border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22); pointer-events: none; font-size: 0.82rem; }
.tp-tip[hidden] { display: none; }
.tp-tip-kind { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
.tp-tip-title { font-weight: 800; font-size: 0.95rem; margin: 2px 0 8px; color: var(--text); }
.tp-tip-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.tp-tip-grid span { color: var(--muted); }
.tp-tip-grid b { font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.tp-tip-meter { display: inline-block; width: 70px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 25%, transparent); overflow: hidden; }
.tp-tip-meter i { display: block; height: 100%; background: #1d4ed8; }

/* Zuständig-Auswahl */
.tp-picker { position: fixed; z-index: 3000; width: 290px; max-height: 360px; overflow: auto; padding: 6px; border-radius: 12px; background: var(--panel-solid); border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22); }
.tp-picker-head { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; }
.tp-picker-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.tp-picker-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tp-picker-code { min-width: 34px; font-weight: 800; color: #2563eb; font-size: 0.8rem; }
.tp-picker-name { display: flex; flex-direction: column; font-size: 0.86rem; color: var(--text); min-width: 0; }
.tp-picker-name small { color: var(--muted); font-size: 0.74rem; }
.tp-picker-empty { padding: 12px; color: var(--muted); font-size: 0.86rem; }

/* Legende + leerer Zustand */
.tp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 0.78rem; color: var(--muted); }
.tp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tp-legend span[hidden] { display: none; }
/* Firmenliste in der Legende (Kürzel + Name) */
.tp-legend span.tp-legend-firms { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.tp-legend-firms em { font-style: normal; font-weight: 800; font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; }
.tp-legend-firms b { color: var(--text); font-weight: 800; }
.tp-legend i { display: inline-block; }
.tp-lg-bar { width: 22px; height: 9px; border-radius: 3px; background: #60a5fa; }
.tp-lg-progress { width: 22px; height: 9px; border-radius: 3px; background: #1d4ed8; }
.tp-lg-sum { width: 22px; height: 5px; background: #1e293b; }
body:not(.theme-light) .tp-lg-sum { background: #cbd5e1; }
.tp-lg-ms { width: 9px; height: 9px; transform: rotate(45deg); background: var(--text); }
.tp-lg-today { width: 2px; height: 12px; background: #ef4444; }
.tp-legend-hint { flex-basis: 100%; }
.tp-legend span.tp-legend-hint { display: block; }
.tp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 20px; border: 1px dashed var(--border); border-radius: 16px; }
.tp-empty h3 { margin: 0; }
.tp-empty p { margin: 0; max-width: 520px; color: var(--muted); }
.tp-empty-icon svg { width: 44px; height: 44px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; }
.tp-back { margin: 0 0 4px -6px; }
@media (max-width: 720px) {
  .tp-board { max-height: calc(100vh - 220px); }
  .tp-attach { display: none; }
}

/* Kontextmenü Verknüpfung + Hinweis im Tooltip */
.tp-tip-hint { margin-top: 6px; font-size: 0.74rem; color: var(--muted); }
.tp-menu { position: fixed; z-index: 3100; min-width: 220px; max-width: 340px; padding: 6px; border-radius: 12px; background: var(--panel-solid); border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25); }
.tp-menu-head { padding: 6px 8px 8px; font-size: 0.78rem; color: var(--muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.tp-menu button { display: block; width: 100%; text-align: left; border: none; background: transparent; color: #dc2626; font-weight: 600; padding: 8px; border-radius: 8px; min-height: 0; box-shadow: none; cursor: pointer; }
.tp-menu button:hover { background: color-mix(in srgb, #dc2626 10%, transparent); }

/* Kritischer Pfad (terminplan.js tpCriticalAnalysis) */
.tp-task.is-critical::before { background: #fca5a5; }
.tp-task.is-critical b { background: #dc2626; }
.tp-ms.is-critical i { background: #dc2626; }
.tp-link-g.is-critical .tp-link, .tp-link-g.is-critical .tp-link-head { stroke: #dc2626; stroke-width: 1.8; }
.tp-row.is-critical .tp-c-nr { color: #dc2626; font-weight: 800; }
.tp-row.is-critical .tp-c-nr::before { content: ""; width: 3px; height: 16px; border-radius: 2px; background: #dc2626; margin-right: 5px; }
.tp-crit-toggle.is-active { color: #dc2626; border-color: color-mix(in srgb, #dc2626 50%, var(--border)); background: color-mix(in srgb, #dc2626 8%, transparent); }
.tp-lg-crit { width: 22px; height: 9px; border-radius: 3px; background: #fca5a5; box-shadow: inset 8px 0 0 #dc2626; }
.tp-tip-crit { font-style: normal; color: #dc2626; font-weight: 800; }

/* Puffer (terminplan.js, Umschalter "Puffer"): Linie vom Balkenende bis zum spätesten Ende */
.tp-float { position: absolute; height: 2px; margin-top: 24px; background: #14b8a6; border-radius: 1px; pointer-events: none; }
.tp-float::after { content: ""; position: absolute; right: 0; top: -3px; width: 2px; height: 8px; border-radius: 1px; background: #14b8a6; }
.tp-float-toggle.is-active { color: #0d9488; border-color: color-mix(in srgb, #14b8a6 50%, var(--border)); background: color-mix(in srgb, #14b8a6 8%, transparent); }
.tp-lg-float { width: 22px; height: 2px; border-radius: 1px; background: #14b8a6; }
.tp-c-float { justify-content: flex-end; padding-right: 8px; font-size: 0.8rem; font-variant-numeric: tabular-nums; color: #0d9488; font-weight: 700; }
.tp-c-float.is-zero { color: #dc2626; }

/* Einschränkung "Anfang nicht früher als" (terminplan.js tpOpenBarMenu) */
.tp-nbf { position: absolute; left: -6px; top: -3px; width: 4px; height: 22px; box-sizing: border-box; border: 2px solid #14b8a6; border-right: none; border-radius: 2px 0 0 2px; pointer-events: none; }
.tp-row .tp-c-date input.is-constrained { color: #0d9488; -webkit-text-fill-color: #0d9488; font-weight: 700; }
.tp-bar-menu { min-width: 260px; }
.tp-menu-field { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px 2px; font-size: 0.78rem; font-weight: 700; color: var(--text); }
.tp-menu-field input { font: inherit; font-weight: 600; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-solid); color: var(--text); }
.tp-menu-note { padding: 6px 8px; font-size: 0.74rem; color: var(--muted); line-height: 1.35; }
.tp-menu-actions { display: flex; gap: 6px; padding: 4px 8px 6px; }
.tp-menu .tp-menu-actions button { width: auto; display: inline-block; }
.tp-menu .tp-menu-apply { background: var(--accent, #2563eb); color: #fff; }
.tp-menu .tp-menu-apply:hover { background: var(--accent, #2563eb); filter: brightness(1.08); }
.tp-menu .tp-menu-plain { color: var(--muted); }
.tp-menu .tp-menu-plain:hover { background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--text); }

/* Terminplan: Ansichtsleiste, Soll-Ist, Fortschritt, Stichtage, Endtermin,
   Bauferien, Farben je Firma, Filter, Plan-Einstellungen, Taktplanung */
.tp-viewbar { gap: 6px; }
.tp-viewbar-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.tp-view-select { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px 0 10px; border-radius: 10px; border: 1px solid var(--border); font-size: 0.86rem; font-weight: 600; color: var(--text); }
.tp-view-select select, .tp-view-select input[type="date"] { border: none; background: transparent; color: inherit; font: inherit; font-weight: 600; min-height: 30px; padding: 0 4px; box-shadow: none; }
.tp-view-select > span { white-space: nowrap; }
/* Firmenfilter schmal: nur die gewählte Firma, volle Namen in der Liste */
.tp-toolbar #tpFilterSelect { width: 120px; max-width: 120px; text-overflow: ellipsis; padding-right: 2px; }
.tp-toolbar .tp-view-select:has(#tpFilterSelect) { gap: 2px; padding-left: 8px; }
.tp-view-select.is-active { border-color: color-mix(in srgb, var(--accent, #2563eb) 50%, var(--border)); background: color-mix(in srgb, var(--accent, #2563eb) 8%, transparent); }
.tp-progress-ctl { padding: 0; border: none; gap: 2px; }
.tp-progress-ctl.is-active { background: transparent; }
.tp-progress-ctl input[type="date"] { border: 1px solid var(--border); border-radius: 10px; min-height: 36px; padding: 0 8px; }
.tp-progress-ctl input[hidden] { display: none; }
.tp-progress-toggle.is-active { color: #dc2626; border-color: color-mix(in srgb, #dc2626 50%, var(--border)); background: color-mix(in srgb, #dc2626 8%, transparent); }
.tp-end-note { padding: 7px 12px; border-radius: 10px; font-size: 0.86rem; border: 1px solid color-mix(in srgb, #7c3aed 40%, var(--border)); background: color-mix(in srgb, #7c3aed 8%, transparent); }
.tp-end-note.is-late { border-color: color-mix(in srgb, #dc2626 50%, var(--border)); background: color-mix(in srgb, #dc2626 10%, transparent); color: #dc2626; }

/* Soll-Balken der Vergleichsrevision */
.tp-base { position: absolute; height: 4px; margin-top: 27px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 55%, transparent); pointer-events: auto; }
.tp-base.is-summary { height: 3px; background: color-mix(in srgb, var(--muted) 40%, transparent); }
.tp-base-ms { width: 7px; height: 7px; margin: 25px 0 0 -3.5px; border-radius: 1px; transform: rotate(45deg); background: none; border: 1.5px solid color-mix(in srgb, var(--muted) 80%, transparent); }
.tp-c-var { justify-content: flex-end; padding-right: 8px; font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }
.tp-c-var.is-late { color: #dc2626; }
.tp-c-var.is-early { color: #16a34a; }

/* Stichtag, Endtermin, Bauferien */
.tp-deadline { position: absolute; width: 0; height: 0; margin: 1px 0 0 -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #16a34a; pointer-events: auto; z-index: 1; }
.tp-deadline.is-missed { border-top-color: #dc2626; }
.tp-enddate { position: absolute; top: 0; bottom: 0; border-left: 2px dashed #7c3aed; z-index: 1; pointer-events: none; }
.tp-enddate.is-late { border-left-color: #dc2626; }
.tp-enddate span { position: absolute; top: 2px; left: 4px; font-size: 0.66rem; font-weight: 800; color: #7c3aed; white-space: nowrap; }
.tp-enddate.is-late span { color: #dc2626; }
.tp-nonwork { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 14%, transparent) 0 6px, transparent 6px 12px); border-left: 1px solid color-mix(in srgb, var(--muted) 30%, transparent); border-right: 1px solid color-mix(in srgb, var(--muted) 30%, transparent); overflow: hidden; }
.tp-nonwork span { position: sticky; top: 0; display: inline-block; margin: 3px 4px; font-size: 0.64rem; font-weight: 800; color: var(--muted); white-space: nowrap; }

/* Einschränkung "Muss anfangen am" + Konflikt */
.tp-nbf.is-must { border-color: #8b5cf6; border-width: 3px; }
.tp-row .tp-c-date input.is-constrained.is-must { color: #7c3aed; -webkit-text-fill-color: #7c3aed; }
.tp-task.is-conflict::before { box-shadow: 0 0 0 2px #dc2626; }
.tp-lg-nbf { width: 5px; height: 14px; border: 2px solid #14b8a6; border-right: none; border-radius: 2px 0 0 2px; box-sizing: border-box; }
.tp-lg-must { width: 6px; height: 14px; border: 3px solid #8b5cf6; border-right: none; border-radius: 2px 0 0 2px; box-sizing: border-box; }
.tp-lg-base { width: 22px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 55%, transparent); }
.tp-lg-progline { width: 22px; height: 2px; background: #dc2626; }
.tp-lg-deadline { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #16a34a; }
.tp-lg-enddate { width: 0; height: 14px; border-left: 2px dashed #7c3aed; }
.tp-lg-resp { width: 22px; height: 9px; border-radius: 3px; }

/* Farbe je Firma (Zuständigem) */
.tp-task.has-color::before { background: var(--tp-bar-color); }
.tp-task.has-color b { background: color-mix(in srgb, var(--tp-bar-color) 55%, #0f172a); }
.tp-task.has-color.is-critical::before { background: #fca5a5; }
.tp-task.has-color.is-critical b { background: #dc2626; }

/* Kürzel im Balken (rechtsbündig) */
.tp-bar-code { position: absolute; right: 6px; top: 0; z-index: 1; line-height: 16px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.02em; color: #0f172a; white-space: nowrap; pointer-events: none; }
.tp-bar-code.is-on-progress { color: #fff; }

/* Knopf + Fenster "Darstellung" */
.tp-view-btn { position: relative; }
.tp-view-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tp-view-badge { position: absolute; top: -4px; right: -4px; display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent, #2563eb); color: #fff; font-size: 0.64rem; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px var(--panel-solid, #0f172a); pointer-events: none; }
.tp-view-menu { padding: 8px; }
.tp-view-menu .tp-set-check { align-items: flex-start; }
.tp-view-menu .tp-set-check input { margin-top: 3px; }
.tp-view-menu .tp-set-check small { display: block; font-size: 0.74rem; color: var(--muted); font-weight: 500; }
.tp-view-menu .tp-set-row select, .tp-view-menu .tp-set-row input { font: inherit; font-weight: 500; padding: 5px 7px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-solid); color: var(--text); }
.tp-view-menu .tp-set-sub { padding-top: 2px; color: var(--muted); font-weight: 600; }

/* Filter: Schnittstellen zu anderen Firmen blass */
.tp-row.is-context { opacity: 0.5; }
.tp-bar.is-context { opacity: 0.4; }

/* Fortschrittslinie */
.tp-progsvg { position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; overflow: visible; }
.tp-pl-path { fill: none; stroke: #dc2626; stroke-width: 2; stroke-linejoin: round; }
.tp-pl-dot.is-behind { fill: #dc2626; }
.tp-pl-dot.is-ahead { fill: #16a34a; }
.tp-pl-label { font-size: 10px; font-weight: 800; fill: #dc2626; }

/* Menüs: Abschnitte, Radio, Zeitraum, Plan-Einstellungen */
.tp-menu-section { padding: 8px 8px 2px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.tp-menu-radio { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 0.84rem; cursor: pointer; }
.tp-menu-radio input { margin: 0; }
.tp-menu-field textarea { font: inherit; font-weight: 500; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-solid); color: var(--text); resize: vertical; }
.tp-menu-inline { flex-direction: row; align-items: center; justify-content: space-between; }
.tp-menu-inline input { width: 80px; }
.tp-menu-range { flex-direction: row; align-items: center; gap: 6px; }
.tp-menu-range input { flex: 1 1 0; min-width: 0; }
.tp-menu-range span { font-weight: 600; color: var(--muted); }
.tp-print-menu { min-width: 280px; }
.tp-print-menu > .tp-menu-plain { color: var(--text); font-weight: 600; }
.tp-takt { width: min(420px, calc(100vw - 16px)); }
.tp-settings { padding: 8px; }
.tp-set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 8px; font-size: 0.86rem; font-weight: 600; }
.tp-set-row input, .tp-set-period input { font: inherit; font-weight: 500; padding: 5px 7px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-solid); color: var(--text); }
.tp-set-note { margin: 2px 8px 6px; font-size: 0.74rem; color: var(--muted); line-height: 1.35; }
.tp-set-check { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 0.86rem; cursor: pointer; }
.tp-set-sub { padding: 6px 8px 4px; font-size: 0.78rem; font-weight: 700; }
.tp-set-period { display: grid; grid-template-columns: 1fr 132px 132px 26px; gap: 4px; align-items: center; padding: 2px 8px; }
.tp-set-period input { min-width: 0; font-size: 0.8rem; }
.tp-set-add { margin: 4px 8px 6px; min-height: 30px; }

/* Protokoll-Vorschau: "Terminplan anhängen" (Kopfleiste ist immer dunkel) */
.protocol-tp-attach { display: inline-flex; align-items: center; gap: 7px; margin-right: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); color: #f1f5f9; font-size: 0.86rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.protocol-tp-attach[hidden] { display: none; }
.protocol-tp-attach input { margin: 0; accent-color: var(--accent); }
/* Zuständig-Auswahl: eigene Einträge */
.tp-picker-add { display: flex; gap: 6px; padding: 8px 6px 4px; border-top: 1px solid var(--border); margin-top: 4px; }
.tp-picker-add input { flex: 1 1 auto; min-width: 0; height: 32px !important; min-height: 0 !important; font-size: 13px !important; padding: 0 8px !important; }
.tp-picker-add button { min-height: 0; height: 32px; width: 34px; padding: 0; }
.tp-picker-del { margin-left: auto; border: none; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; padding: 2px 6px; min-height: 0; box-shadow: none; cursor: pointer; border-radius: 6px; }
.tp-picker-del:hover { color: #dc2626; background: color-mix(in srgb, #dc2626 10%, transparent); }
.tp-picker-item { position: relative; }
.tp-project-picker { width: 320px; max-height: 420px; display: flex; flex-direction: column; }
.tp-project-search { margin: 0 6px 6px; height: 34px !important; min-height: 0 !important; font-size: 13px !important; }
.tp-project-list { overflow: auto; }
.tp-project-item { display: block; width: 100%; text-align: left; border: none; background: transparent; color: var(--text); padding: 8px; border-radius: 8px; min-height: 0; box-shadow: none; font-size: 0.88rem; cursor: pointer; }
.tp-project-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* Scrollbalken der Terminplanung immer sichtbar (macOS blendet sie sonst aus) */
.tp-board, .tp-table-hscroll { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 55%, transparent) transparent; }
.tp-board::-webkit-scrollbar, .tp-table-hscroll::-webkit-scrollbar { width: 10px; height: 10px; }
.tp-board::-webkit-scrollbar-track, .tp-table-hscroll::-webkit-scrollbar-track { background: color-mix(in srgb, var(--muted) 10%, transparent); }
.tp-board::-webkit-scrollbar-thumb, .tp-table-hscroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 55%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.tp-board::-webkit-scrollbar-thumb:hover, .tp-table-hscroll::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }
.tp-board::-webkit-scrollbar-corner { background: transparent; }
.tp-table-hscroll { height: 14px; }
/* Balken immer sichtbar (macOS blendet Scrollbalken sonst aus) */
.tp-table-hscroll::-webkit-scrollbar { height: 12px; }
.tp-table-hscroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 70%, transparent); min-width: 40px; }
/* Meilenstein = Fixtermin; Verzug der Vorgänger (terminplan.js r.conflict) */
.tp-ms.is-draggable i { cursor: grab; }
.tp-ms.is-conflict i { background: #dc2626; box-shadow: 0 0 0 3px color-mix(in srgb, #dc2626 25%, transparent); }
.tp-ms-conflict { margin-left: 8px; color: #dc2626; font-weight: 800; }

/* Protokoll-Vorschau: Auswahl der anzuhängenden Terminpläne */
.protocol-tp-attach-wrap { position: relative; }
.protocol-tp-attach-wrap[hidden] { display: none; }
button.protocol-tp-attach { background: transparent; box-shadow: none; min-height: 0; }
.protocol-tp-attach-wrap.is-on .protocol-tp-attach { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.protocol-tp-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 280px; padding: 6px; border-radius: 12px; background: var(--panel-solid); border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.3); color: var(--text); }
.protocol-tp-menu[hidden] { display: none; }
.protocol-tp-menu-head { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; }
.protocol-tp-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.protocol-tp-menu-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.protocol-tp-menu-item span { display: flex; flex-direction: column; }
.protocol-tp-menu-item small { font-weight: 500; color: var(--muted); font-size: 0.76rem; }
/* Terminplan-Übersicht */
.tp-new-form { display: flex; gap: 8px; }
.tp-new-form input { width: 260px; }
@media (max-width: 720px) { .tp-new-form input { width: 100%; } .tp-new-form { flex: 1 1 100%; } }
.tp-new-form { align-items: center; }
.tp-new-form button { white-space: nowrap; }
.tp-msp-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tp-msp-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tp-head-meta:has(#tpImportMsp) { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.terminplan .tp-new-form input { height: 40px !important; min-height: 0 !important; box-sizing: border-box; }
/* PM-Liste: "+ Neuer Terminplan" direkt links neben "+ Neues Protokoll" */
.pl-toolbar #openTerminplanCreate { order: 8; margin-left: auto; flex: 0 0 auto; height: 40px; padding: 0 16px; font-size: 14px; font-weight: 600; white-space: nowrap; border-radius: 12px; }
.pl-toolbar:has(#openTerminplanCreate) .pl-primary { margin-left: 0; }
@media (max-width: 900px) {
  .pl-toolbar #openTerminplanCreate { order: 0; margin-left: 0; flex: 1 1 100%; }
}

/* ===================== Blitzsuche (quicksearch.js, Test) ===================== */
.qs-overlay { position: fixed; inset: 0; z-index: 5000; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(3px); }
.qs-overlay[hidden] { display: none; }
.qs-panel { width: min(680px, 100%); max-height: 72vh; display: flex; flex-direction: column; border-radius: 16px; background: var(--panel-solid); border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35); overflow: hidden; }
.qs-input-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.qs-icon { width: 20px; height: 20px; flex: 0 0 auto; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; }
.qs-crumb { flex: 0 1 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.qs-crumb[hidden] { display: none; }
.qs-panel .qs-input { flex: 1 1 auto; min-width: 0; border: none !important; background: transparent !important; box-shadow: none !important; outline: none; font-size: 1.05rem !important; padding: 6px 0 !important; color: var(--text); }
.qs-kbd, .qs-foot kbd, .qs-dashboard-trigger kbd { font-family: inherit; font-size: 0.72rem; font-weight: 700; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border); color: var(--muted); background: color-mix(in srgb, var(--muted) 8%, transparent); }
.qs-list { overflow: auto; padding: 6px; }
.qs-section { padding: 10px 10px 4px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.qs-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.qs-item.is-active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.qs-item-icon { flex: 0 0 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: color-mix(in srgb, var(--muted) 10%, transparent); font-size: 14px; }
.qs-item-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.qs-item-title { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-item-sub { font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-item mark { background: color-mix(in srgb, #facc15 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.qs-item-go { color: var(--muted); font-size: 20px; line-height: 1; }
.qs-empty { padding: 26px; text-align: center; color: var(--muted); }
.qs-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 0.74rem; color: var(--muted); }
.qs-foot b { color: var(--text); font-weight: 700; }
.qs-dashboard-trigger { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); color: var(--muted); font-size: 0.95rem; text-align: left; cursor: text; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); min-height: 0; }
.qs-dashboard-trigger:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.qs-dashboard-trigger svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; flex: 0 0 auto; }
.qs-dashboard-trigger span { flex: 1 1 auto; }
.qs-close { display: none; }
@media (max-width: 720px) {
  .qs-overlay { padding: 0; align-items: stretch; }
  /* Vollbild am Handy: Suchfeld unter die Statusleiste (Uhr/Akku) schieben,
     sonst liegt es dahinter und lässt sich nicht antippen; Hintergrund
     deckend statt der leicht durchsichtigen --panel-solid. */
  .qs-panel { max-height: none; height: 100%; border-radius: 0; border: none; padding-top: env(safe-area-inset-top); background: #18201d; }
  body.theme-light .qs-panel { background: #ffffff; }
  .qs-foot { display: none; }
  .qs-kbd { display: none; }
  .qs-close { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 36px; padding: 0 4px; border: none; background: transparent; color: var(--accent); font-weight: 600; font-size: 1rem; cursor: pointer; }
  .qs-dashboard-trigger kbd { display: none; }
}
/* PM-Liste: Anzahl Terminpläne je Projekt */
.pl-status.pl-status-tp { color: #1d4ed8; background: color-mix(in srgb, #3b82f6 14%, transparent); }
body:not(.theme-light) .pl-status.pl-status-tp { color: #93c5fd; }

/* ===== Terminplan: Handy-Ansicht (terminplan.js tpRenderMobile) ===== */
.tp-m-head { flex-direction: column; align-items: stretch; gap: 8px; }
.tp-m-head .tp-head-title { flex: 0 0 auto; }
.tp-m-title { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.tp-m-headrow { display: flex; align-items: center; gap: 6px; }
.tp-m-headrow .tp-rev-select { min-width: 0; }
.tp-m-controls { display: flex; gap: 8px; align-items: center; }
.tp-m-seg { flex: 0 0 auto; }
.tp-m-firm { flex: 1 1 auto; min-width: 0; min-height: 36px; border-radius: 10px; }
.tp-m-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.tp-m-chips::-webkit-scrollbar { display: none; }
.tp-m-chip { flex: 0 0 auto; min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 0.84rem; font-weight: 600; box-shadow: none; }
.tp-m-chip.is-active { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: #fff; }
.tp-m-list { display: flex; flex-direction: column; gap: 8px; }
.tp-m-group { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 0 2px; font-weight: 800; font-size: 0.95rem; }
.tp-m-group small { font-weight: 600; color: var(--muted); font-size: 0.76rem; white-space: nowrap; }
.tp-m-group-2 { font-size: 0.88rem; padding-left: 8px; }
.tp-m-group-3, .tp-m-group-4 { font-size: 0.82rem; padding-left: 16px; color: var(--muted); }
.tp-m-group.is-late span { color: #dc2626; }
.tp-m-card { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; width: 100%; padding: 10px 12px 10px 16px; text-align: left; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-solid); color: var(--text); box-shadow: none; font: inherit; cursor: pointer; }
.tp-m-card::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 3px 3px 0; background: var(--tp-m-color); }
.tp-m-card.is-context { opacity: 0.5; }
.tp-m-card.is-done .tp-m-name { color: var(--muted); }
.tp-m-card-top { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tp-m-name { font-weight: 700; font-size: 0.95rem; min-width: 0; }
.tp-m-ms { font-style: normal; margin-right: 4px; }
.tp-m-resp { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; color: var(--tp-m-color); border: 1px solid color-mix(in srgb, var(--tp-m-color) 55%, transparent); }
.tp-m-path { grid-column: 1 / -1; font-size: 0.74rem; color: var(--muted); }
.tp-m-when { grid-column: 1 / -1; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tp-m-progress { align-self: center; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 22%, transparent); overflow: hidden; }
.tp-m-progress i { display: block; height: 100%; border-radius: 3px; background: var(--tp-m-color); }
.tp-m-pct { font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-m-badges { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.tp-m-badge { padding: 1px 7px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }
.tp-m-badge.is-crit { background: color-mix(in srgb, #dc2626 14%, transparent); color: #dc2626; }
.tp-m-badge.is-warn { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.tp-m-badge.is-ok { background: color-mix(in srgb, #16a34a 14%, transparent); color: #16a34a; }
.tp-m-badge.is-float { background: color-mix(in srgb, #14b8a6 14%, transparent); color: #0d9488; }
.tp-m-empty { padding: 28px 12px; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: 12px; }
.tp-m-hint { margin: 6px 2px 0; font-size: 0.76rem; color: var(--muted); }
/* Detailblatt */
.tp-m-sheet { max-height: 88vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; z-index: 1001; }
.tp-m-sheet-backdrop { z-index: 1000; }
.tp-m-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tp-m-sheet-head small { display: block; color: var(--muted); font-size: 0.74rem; font-weight: 600; }
.tp-m-sheet-head strong { font-size: 1.1rem; }
.tp-m-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.tp-m-field input[type="date"], .tp-m-field input[type="text"] { font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--text); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-solid); min-height: 42px; }
.tp-m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tp-m-prog b { color: var(--text); font-size: 1rem; margin-left: 6px; }
.tp-m-prog input[type="range"] { width: 100%; accent-color: var(--accent, #2563eb); height: 28px; }
.tp-m-quick { display: flex; gap: 6px; }
.tp-m-quick button { flex: 1 1 0; min-height: 38px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text); font-weight: 700; box-shadow: none; }
.tp-m-quick button.is-active { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: #fff; }
.tp-m-respbtn { min-height: 42px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-weight: 600; box-shadow: none; }
.tp-m-info { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 0.84rem; }
.tp-m-info dt { color: var(--muted); font-weight: 600; }
.tp-m-info dd { margin: 0; font-weight: 600; }
@media (max-width: 720px) {
  .tp-view-menu { left: 8px !important; right: 8px; width: auto !important; }
  .tp-picker { z-index: 3100; }
}

/* Terminplan: Titelleiste wie in Office - eine flache Zeile (Zurück, Titel,
   Revision/Projekt klein, rechts Speicherstatus + Revisionsauswahl) */
.tp-titlebar { display: flex; align-items: center; gap: 8px; min-height: 36px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.tp-titlebar .tp-tb-back { width: 30px; height: 30px; flex: 0 0 auto; }
.tp-titlebar .tp-tb-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.terminplan .tp-titlebar .tp-title-input { width: auto; max-width: 42vw; flex: 0 1 auto; font-size: 1.05rem; font-weight: 700; padding: 3px 6px; margin-left: 0; }
.tp-tb-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.tp-titlebar .tp-rev-select { min-width: 0; width: auto; min-height: 30px; height: 30px; padding: 2px 28px 2px 10px; font-size: 0.82rem; }
.tp-titlebar .tp-save-status { min-width: 0; font-size: 0.76rem; }
.tp-end-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: #7c3aed; border: 1px solid color-mix(in srgb, #7c3aed 40%, var(--border)); background: color-mix(in srgb, #7c3aed 8%, transparent); }
.tp-end-chip.is-late { color: #dc2626; border-color: color-mix(in srgb, #dc2626 50%, var(--border)); background: color-mix(in srgb, #dc2626 10%, transparent); }
.tp-print-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; }
.tp-print-menu { max-height: calc(100vh - 16px); overflow-y: auto; }

/* Markierte bearbeiten + Hinweis-Einblendung */
.tp-bulk { width: min(360px, calc(100vw - 16px)); }
.tp-bulk .tp-menu-inline select, .tp-bulk .tp-menu-inline input { width: 190px; font: inherit; font-weight: 500; padding: 5px 7px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-solid); color: var(--text); }
.tp-bulk-row { flex-wrap: wrap; padding-top: 0; }
.tp-bulk-row .tp-menu-plain { color: var(--text) !important; border: 1px solid var(--border) !important; }
.tp-flash { position: fixed; left: 50%; bottom: 28px; z-index: 3200; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 9px 16px; border-radius: 999px; background: #0f172a; color: #fff; font-size: 0.86rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: opacity .15s, transform .15s; }
.tp-flash.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Zeilen an der Nummer ziehen */
.terminplan .tp-row .tp-c-nr { cursor: grab; }
.tp-row-dragging, .tp-row-dragging * { cursor: grabbing !important; user-select: none; }
.tp-drop-line { position: absolute; left: 0; width: var(--tp-pane-w, 720px); height: 3px; border-radius: 2px; background: var(--accent, #2563eb); z-index: 9; pointer-events: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #2563eb) 25%, transparent); }

/* Handy: kompakter Balkenplan (tpMobileView = "gantt") */
.tp-m-viewseg { display: inline-flex; align-items: center; }
.tp-m-viewseg button { padding: 4px 8px; display: inline-flex; align-items: center; }
.tp-m-viewseg svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tp-m-board { max-height: calc(100vh - 250px); max-height: calc(100dvh - 250px); touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.tp-m-board .tp-splitter, .tp-m-board .tp-table-hscroll { display: none !important; }
.tp-m-cells { width: 100%; }
.tp-m-cname { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.tp-m-rowname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; }
.tp-row.is-summary .tp-m-rowname { font-weight: 800; }
.tp-cells-head .tp-m-cname { gap: 6px; }

/* Name nur per Doppelklick bearbeiten; Bemerkung-Symbol */
.terminplan .tp-row .tp-c-name input[readonly] { cursor: default; caret-color: transparent; }
.terminplan .tp-row .tp-c-name input[readonly]:focus { outline: none; }
.tp-note-ic { flex: 0 0 auto; width: 20px; height: 20px; min-height: 0; padding: 0; margin-left: 2px; border: none; background: transparent; color: #f59e0b; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tp-note-ic svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.tp-tip-note { white-space: pre-wrap; font-weight: 500; max-width: 280px; }
.tp-bar-menu textarea { font: inherit; font-weight: 500; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-solid); color: var(--text); resize: vertical; min-height: 54px; }
.tp-m-field textarea { font: inherit; font-size: 0.92rem; font-weight: 500; color: var(--text); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-solid); resize: vertical; }
.tp-m-note { grid-column: 1 / -1; font-size: 0.78rem; color: var(--muted); font-style: italic; white-space: pre-wrap; }
/* Trennlinie Tabelle/Balken auch mit dem Finger ziehbar (iPad) */
.tp-splitter { touch-action: none; }
@media (pointer: coarse) {
  .tp-splitter { width: 24px; right: 0; }
  .tp-splitter::after { opacity: 1; left: auto; right: 2px; }
}

/* ===== Kostenanalyse: kompakter Kopf (eine Zeile) - mehr Platz für die Tabelle ===== */
@media (min-width: 721px) {
  #avaKostenanalyseDetail .vg-head.ava-vergabe-detail-head { padding: 6px 12px; gap: 10px; align-items: center; row-gap: 6px; }
  #avaKostenanalyseDetail .vg-head-icon { display: none; }
  #avaKostenanalyseDetail .vg-back { width: 30px; height: 30px; min-height: 30px; border-radius: 8px; }
  #avaKostenanalyseDetail .vg-head.ava-vergabe-detail-head { flex-wrap: nowrap; }
  #avaKostenanalyseDetail .vg-head-main { flex: 1 1 0; min-width: 160px; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; overflow: hidden; }
  #avaKostenanalyseDetail .vg-eyebrow { white-space: nowrap; }
  #avaKostenanalyseDetail .vg-head-meta { flex: 1 1 0; }
  #avaKostenanalyseDetail .vg-head-main h3 { order: -1; flex: 1 0 100%; margin: 0; font-size: 1.02rem; line-height: 1.25; }
  #avaKostenanalyseDetail .vg-eyebrow { font-size: 10px; letter-spacing: 0.05em; }
  #avaKostenanalyseDetail .vg-head-meta { font-size: 11.5px; min-width: 0; max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #avaKostenanalyseDetail .vg-head-stats { gap: 6px; flex-wrap: nowrap; margin-left: auto; flex: 0 0 auto; }
  #avaKostenanalyseDetail .vg-stat { padding: 3px 10px; border-radius: 10px; min-width: 0; gap: 0; }
  #avaKostenanalyseDetail .vg-stat span { font-size: 9.5px; white-space: nowrap; }
  #avaKostenanalyseDetail .vg-stat strong { font-size: 13.5px; white-space: nowrap; line-height: 1.25; }
  #avaKostenanalyseDetail .vg-stat small { display: none; }
  #avaKostenanalyseDetail .vg-stat-delta { font-style: normal; font-weight: 800; margin-left: 4px; letter-spacing: 0; text-transform: none; }
  #avaKostenanalyseDetail .vg-stat-warn .vg-stat-delta { color: #dc2626; }
  #avaKostenanalyseDetail .vg-stat-best .vg-stat-delta { color: #15803d; }
  #avaKostenanalyseDetail .kk-head-controls { margin-left: 4px; gap: 5px; flex-wrap: nowrap; flex: 0 0 auto; }
  #avaKostenanalyseDetail .kk-head-controls .context-menu.hidden { display: none; }
  #avaKostenanalyseDetail .kk-stufe-select { height: 32px; min-height: 32px; max-width: 140px; }
  #avaKostenanalyseDetail .vg-head .ava-tb-btn { height: 32px; min-height: 32px; padding: 0 10px; }
  /* Budget, Prüfliste, Ausgabe als Symbole (Text im Tooltip) */
  #avaKostenanalyseDetail .kk-budget-btn > span:not(.kk-budget-star),
  #avaKostenanalyseDetail .kk-pruef-btn > span:not(.abr-tab-count),
  #avaKostenanalyseDetail .vg-output > span { display: none; }
  #avaKostenanalyseDetail .kk-budget-btn, #avaKostenanalyseDetail .kk-pruef-btn { padding: 0 9px; }
  #avaKostenanalyseDetail .vg-output { padding: 0 8px; gap: 2px; }
}
@media (min-width: 721px) and (max-width: 1180px) {
  #avaKostenanalyseDetail .vg-head.ava-vergabe-detail-head { flex-wrap: wrap; }
  #avaKostenanalyseDetail .vg-head-stats { order: 5; flex: 1 1 100%; margin-left: 0; overflow-x: auto; }
}

/* Chat: Videos (direkt hochgeladen, Wiedergabe im Verlauf) */
.chat-attachment-video-wrap { position: relative; display: inline-block; max-width: 100%; }
.chat-attachment-video { display: block; max-width: 280px; max-height: 320px; width: 100%; border-radius: var(--radius-sm); background: #000; }
.chat-attachment-video-wrap .chat-attachment-image-download { z-index: 1; }
.chat-attachment-draft-chip video { width: 22px; height: 22px; object-fit: cover; border-radius: 50%; background: #000; }

/* ===================== Chat im WhatsApp-Stil (2026-09-28) =====================
   Gruppierte Blasen mit Uhrzeit + Haken in der Blase, Datumstrenner,
   Antworten/Reaktionen, Menü, Sprung nach unten, Sprachnachrichten. */
#chatShell {
  --chat-bg: rgba(0, 0, 0, 0.18);
  --chat-in: #23302b;
  --chat-out: #145a4c;
  --chat-bubble-text: #eef1ef;
  --chat-meta: rgba(238, 241, 239, 0.62);
  --chat-read: #53bdeb;
  --chat-quote-bg: rgba(0, 0, 0, 0.2);
  --chat-pill: rgba(20, 28, 25, 0.92);
}
body.theme-light #chatShell {
  --chat-bg: #efeae2;
  --chat-in: #ffffff;
  --chat-out: #d9fdd3;
  --chat-bubble-text: #111b21;
  --chat-meta: rgba(17, 27, 33, 0.5);
  --chat-read: #1d9bd1;
  --chat-quote-bg: rgba(0, 0, 0, 0.05);
  --chat-pill: rgba(255, 255, 255, 0.95);
}

/* --- Chat-Liste --- */
.chat-thread-item {
  padding: 9px 14px;
  gap: 12px;
  border-bottom: none;
}
.chat-thread-item-icon {
  width: 46px;
  height: 46px;
}
.chat-thread-item-icon svg {
  width: 21px;
  height: 21px;
}
.chat-thread-item-body {
  gap: 3px;
  padding-bottom: 9px;
  margin-bottom: -9px;
  border-bottom: 1px solid var(--border);
}
.chat-thread-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.chat-thread-item-row .chat-thread-item-title,
.chat-thread-item-row .chat-thread-item-preview {
  flex: 1;
  min-width: 0;
}
.chat-thread-item-title {
  font-weight: 500;
}
.chat-thread-item-time {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--muted);
}
.chat-thread-item-preview {
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  gap: 3px;
}
.chat-thread-item-preview > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-thread-item-preview b {
  font-weight: 500;
  flex-shrink: 0;
}
.chat-thread-item.is-unread .chat-thread-item-title {
  font-weight: 700;
}
.chat-thread-item.is-unread .chat-thread-item-time {
  color: var(--accent);
  font-weight: 600;
}
.chat-thread-item.is-unread .chat-thread-item-preview {
  color: var(--text);
}
.chat-thread-item-badge {
  background: var(--accent);
  color: #fff;
}
.chat-typing-text {
  color: var(--accent);
  font-style: italic;
}

/* --- Kopfzeile --- */
.chat-message-panel-head {
  justify-content: flex-start;
  padding: 8px 12px;
}
.chat-head-title {
  flex: 1;
  min-width: 0;
}
.chat-head-title h3 {
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-head-avatar {
  width: 40px;
  height: 40px;
}
.chat-active-thread-subtitle {
  margin: 0;
  font-size: 0.76rem;
}
.chat-active-thread-subtitle.chat-subtitle-online {
  color: var(--muted);
  font-weight: 400;
}
.chat-active-thread-subtitle.chat-subtitle-typing {
  color: var(--accent);
  font-style: italic;
}
.chat-head-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-head-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Nachrichtenliste --- */
.chat-message-panel-active {
  position: relative;
}
.chat-message-panel-active.is-drop-target::after {
  content: "Dateien hier ablegen";
  position: absolute;
  inset: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: 600;
  pointer-events: none;
  z-index: 20;
}
.chat-messages-list {
  gap: 0;
  padding: 8px clamp(10px, 5%, 64px) 14px;
  background: var(--chat-bg);
  overscroll-behavior: contain;
}
.chat-day-separator {
  position: sticky;
  top: 4px;
  z-index: 3;
  display: flex;
  justify-content: center;
  margin: 10px 0 6px;
  pointer-events: none;
}
.chat-day-separator span {
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--chat-pill);
  color: var(--muted);
  font-size: 0.74rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.chat-unread-divider {
  margin: 10px calc(-1 * clamp(10px, 5%, 64px));
  padding: 5px;
  text-align: center;
  background: color-mix(in srgb, var(--chat-pill) 70%, transparent);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 600;
}
.chat-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 2px;
  position: relative;
}
.chat-row.is-first {
  margin-top: 8px;
}
.chat-row--own {
  align-items: flex-end;
}
.chat-row.is-pending {
  opacity: 0.85;
}
.chat-row.is-highlight .chat-bubble {
  animation: chat-highlight 1.6s ease;
}
@keyframes chat-highlight {
  0%,
  40% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 70%, transparent);
  }
  100% {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.13);
  }
}
.chat-row.is-swipe-ready .chat-bubble {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
}
.chat-bubble {
  position: relative;
  max-width: min(75%, 560px);
  min-width: 70px;
  align-self: auto;
  padding: 6px 8px 7px 9px;
  border: none;
  border-radius: 10px;
  background: var(--chat-in);
  color: var(--chat-bubble-text);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.13);
  font-size: 0.93rem;
  line-height: 1.38;
}
.chat-row--own .chat-bubble {
  background: var(--chat-out);
}
.chat-row--other.is-first .chat-bubble {
  border-top-left-radius: 3px;
}
.chat-row--own.is-first .chat-bubble {
  border-top-right-radius: 3px;
}
.chat-bubble--media {
  padding: 3px;
}
.chat-bubble-sender {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--chat-sender, var(--accent));
  margin: 0 0 1px;
}
.chat-bubble--media .chat-bubble-sender {
  padding: 3px 6px 2px;
}
.chat-bubble-text {
  white-space: normal;
  overflow-wrap: anywhere;
}
.chat-bubble-text a {
  color: var(--chat-read);
}
.chat-meta {
  float: right;
  position: relative;
  top: 6px;
  margin: 0 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  line-height: 1;
  color: var(--chat-meta);
  white-space: nowrap;
  user-select: none;
}
.chat-meta-row {
  display: flow-root;
}
.chat-meta-row .chat-meta {
  top: 0;
  margin-top: 2px;
}
.chat-edited {
  font-style: italic;
}
.chat-upload-progress {
  font-weight: 600;
}
.chat-media-meta .chat-meta {
  position: absolute;
  float: none;
  top: auto;
  right: 8px;
  bottom: 7px;
  padding: 3px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}
.chat-ticks {
  display: inline-flex;
}
.chat-ticks svg {
  height: 11px;
  width: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-ticks.is-pending svg {
  height: 12px;
}
.chat-ticks.is-read {
  color: var(--chat-read);
}
.chat-media-meta .chat-ticks.is-read {
  color: #7fd6ff;
}
.chat-thread-item-preview .chat-ticks {
  color: var(--muted);
  flex-shrink: 0;
}
.chat-thread-item-preview .chat-ticks.is-read {
  color: var(--chat-read, #53bdeb);
}
.chat-bubble-menu-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 24px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 0 8px 0 12px;
  background: inherit;
  color: var(--chat-meta);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  cursor: pointer;
  transition: opacity 120ms ease;
}
.chat-bubble-menu-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-bubble--media .chat-bubble-menu-btn {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  top: 6px;
  right: 6px;
  border-radius: 50%;
}
@media (hover: hover) {
  .chat-row:hover .chat-bubble-menu-btn {
    opacity: 1;
  }
}
.chat-forwarded {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  font-style: italic;
  color: var(--chat-meta);
  margin-bottom: 2px;
}
.chat-bubble--media .chat-forwarded {
  padding: 2px 6px 0;
}
.chat-forwarded svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-quote {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  margin: 2px 0 5px;
  padding: 5px 9px;
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: var(--chat-quote-bg);
  font-size: 0.82rem;
  cursor: pointer;
}
.chat-quote b {
  color: var(--accent);
  font-weight: 600;
}
.chat-quote span {
  color: var(--chat-meta);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.chat-quote.is-deleted {
  font-style: italic;
  cursor: default;
}
.chat-quote.is-edit {
  cursor: default;
}
.chat-atts {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chat-atts.is-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.chat-bubble:not(.chat-bubble--media) .chat-atts {
  margin-bottom: 4px;
}
.chat-atts .chat-attachment-image {
  display: block;
  width: min(300px, 62vw);
  max-width: 100%;
  max-height: 380px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(127, 127, 127, 0.18);
}
.chat-atts.is-grid .chat-attachment-image {
  width: min(150px, 31vw);
  aspect-ratio: 1 / 1 !important;
}
.chat-atts .chat-attachment-image img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
}
.chat-atts .chat-attachment-video-wrap {
  display: block;
  width: min(300px, 62vw);
  max-width: 100%;
  border-radius: 7px;
  overflow: hidden;
  background: #000;
}
.chat-atts .chat-attachment-video {
  width: 100%;
  height: 100%;
  max-height: 380px;
  display: block;
}
.chat-atts .chat-attachment-file {
  min-width: min(260px, 60vw);
  margin: 0;
  padding: 8px 10px;
  border: none;
  background: var(--chat-quote-bg);
  color: inherit;
  gap: 10px;
}
.chat-attachment-file-icon {
  position: relative;
  color: var(--accent);
}
.chat-attachment-file-icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.4;
}
.chat-attachment-file-icon em {
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 700;
}
.chat-attachment-file-name {
  display: flex;
  flex-direction: column;
  font-size: 0.86rem;
}
.chat-attachment-file-name small {
  color: var(--chat-meta);
  font-size: 0.72rem;
}
.chat-attachment-file-download svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-audio {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(260px, 62vw);
  padding: 4px 2px 0;
}
.chat-audio-play {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-audio-play svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.chat-audio .i-pause,
.chat-audio.is-playing .i-play {
  display: none;
}
.chat-audio.is-playing .i-pause {
  display: block;
}
.chat-audio-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--chat-meta) 45%, transparent);
  cursor: pointer;
  position: relative;
}
.chat-audio-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 2px;
  background: var(--accent);
}
.chat-audio-time {
  font-size: 0.72rem;
  color: var(--chat-meta);
  min-width: 30px;
}
.chat-reactions {
  display: flex;
  gap: 3px;
  margin: -5px 8px 2px;
  position: relative;
  z-index: 1;
}
.chat-reaction {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--chat-pill);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.2;
  cursor: pointer;
}
.chat-reaction span {
  font-size: 0.7rem;
  color: var(--muted);
}
.chat-reaction.is-mine {
  border-color: var(--accent);
}

/* --- Sprung nach unten --- */
.chat-jump-button {
  position: absolute;
  right: 16px;
  bottom: 84px;
  z-index: 6;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--chat-pill);
  color: var(--muted);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-jump-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-jump-count {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Menü einer Nachricht --- */
.chat-msg-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
}
.chat-msg-menu {
  position: fixed;
  z-index: 10001;
  min-width: 210px;
  padding: 6px 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-solid);
  color: var(--text);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
  animation: chat-menu-in 120ms ease;
}
@keyframes chat-menu-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
.chat-msg-menu-reactions {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  padding: 2px 8px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.chat-msg-menu-reactions button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 1.3rem;
  cursor: pointer;
  transition: transform 100ms ease;
}
.chat-msg-menu-reactions button:hover {
  transform: scale(1.18);
}
.chat-msg-menu-reactions button.is-mine {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.chat-msg-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 16px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.chat-msg-menu-item:hover {
  background: var(--row-hover-bg);
}
.chat-msg-menu-item svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}
.chat-msg-menu-item.is-danger {
  color: var(--danger);
}

/* --- Eingabe --- */
.chat-compose-bar {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 10px;
}
.chat-compose-context {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.chat-compose-context .chat-quote {
  flex: 1;
  margin: 0;
  cursor: default;
}
#chatComposeText {
  min-height: 40px;
  max-height: 140px;
  padding: 9px 14px;
  border-radius: 20px;
  line-height: 1.35;
  font-size: 0.95rem;
  overflow-y: auto;
}
.chat-send-button,
.chat-attach-button {
  width: 40px;
  height: 40px;
}
.chat-compose-bar.is-recording > :not(.chat-recording):not(.chat-compose-context) {
  display: none !important;
}
.chat-recording {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}
.chat-recording-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e53e3e;
  animation: chat-rec-pulse 1s ease-in-out infinite;
}
@keyframes chat-rec-pulse {
  50% {
    opacity: 0.25;
  }
}
.chat-recording-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.chat-recording-hint {
  flex: 1;
  color: var(--muted);
  font-size: 0.85rem;
}
.chat-attachment-drafts {
  padding: 8px 12px 0;
}
.chat-attachment-draft-chip img,
.chat-attachment-draft-chip video {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  object-fit: cover;
}

/* --- Suche im Chat --- */
.chat-search-bar {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.chat-search-bar input {
  width: 100%;
}
.chat-search-results {
  max-height: 40vh;
  overflow-y: auto;
}
.chat-search-results button {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 4px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.chat-search-results button:hover {
  background: var(--row-hover-bg);
}
.chat-search-results small {
  color: var(--muted);
  font-size: 0.72rem;
}
.chat-search-results mark {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: inherit;
  border-radius: 2px;
}
.chat-search-empty {
  margin: 8px 4px 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* --- Weiterleiten --- */
.chat-forward {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
}
.chat-forward-box {
  width: min(420px, 100%);
  max-height: min(600px, 90vh);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--panel-solid);
  color: var(--text);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.chat-forward-box header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 6px 16px;
}
.chat-forward-box input {
  margin: 0 12px 8px;
}
.chat-forward-list {
  flex: 1;
  overflow-y: auto;
}
.chat-forward-list .chat-thread-item-icon {
  width: 38px;
  height: 38px;
}

/* --- Hinweis unten --- */
.chat-toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  z-index: 10003;
  transform: translate(-50%, 10px);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(20, 28, 25, 0.92);
  color: #fff;
  font-size: 0.86rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.chat-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --- Galerie --- */
.chat-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-lightbox-nav.is-prev {
  left: 14px;
}
.chat-lightbox-nav.is-next {
  right: 14px;
}
.chat-lightbox-nav svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-lightbox-counter {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.9rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

@media (max-width: 860px) {
  #chatComposeText {
    min-height: 40px;
  }
  .chat-bubble {
    max-width: 84%;
  }
  .chat-messages-list {
    padding-left: 8px;
    padding-right: 8px;
  }
  .chat-unread-divider {
    margin-left: -8px;
    margin-right: -8px;
  }
  .chat-jump-button {
    bottom: 76px;
    right: 12px;
  }
  .chat-thread-panel,
  .chat-message-panel {
    border-radius: 0;
  }
}
@media (pointer: coarse) {
  /* langes Drücken öffnet das Menü (Kopieren ist dort) - keine Textauswahl/Lupe */
  .chat-bubble {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}
.chat-msg-menu {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
@media (pointer: coarse) {
  .chat-msg-menu-backdrop {
    background: rgba(0, 0, 0, 0.3);
  }
}

/* ===== Einstellungen › Abo (nur Administratoren) ===== */
.abo-view { gap: 16px; }
.abo-loading, .abo-hint { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.abo-note { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; font-size: 14px; }
.abo-note-error { border-color: color-mix(in srgb, #ef4444 45%, transparent); color: #ef4444; }
.abo-status { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; --abo-tone: #10b981; }
.abo-status.is-cancelled { --abo-tone: #f59e0b; border-color: color-mix(in srgb, #f59e0b 45%, transparent); }
.abo-status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--abo-tone); box-shadow: 0 0 0 4px color-mix(in srgb, var(--abo-tone) 20%, transparent); flex: none; }
.abo-status strong { display: block; font-size: 15px; }
.abo-status small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.abo-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.abo-stats > div { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.abo-stats span { display: block; font-size: 12px; color: var(--muted); }
.abo-stats strong { display: block; margin-top: 4px; font-size: 20px; }
.abo-stats small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.abo-table-wrap { overflow-x: auto; }
.abo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.abo-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.abo-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.abo-table tr:last-child td { border-bottom: 0; }
.abo-table td small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.abo-table .abo-num { text-align: right; white-space: nowrap; }
.abo-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); }
.abo-tag.is-ok { background: color-mix(in srgb, #10b981 16%, transparent); color: #10b981; }
.abo-pdf { display: inline-block; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 12px; }
.abo-reason textarea { width: 100%; resize: vertical; }
.abo-confirm { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.abo-actions { display: flex; justify-content: flex-end; }
@media (max-width: 700px) { .abo-stats { grid-template-columns: 1fr; } }
.abo-switch { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.abo-switch input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.abo-switch strong { display: block; font-size: 14px; }
.abo-switch small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.em-row.is-system { cursor: default; opacity: .85; }
.em-row.is-system .em-role { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.um-invite { grid-column: 1 / -1; display: grid; gap: 6px; }
.um-invite-check { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.um-invite-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.um-invite-check[hidden], #userInviteNow[hidden] { display: none; }
#userInviteNow { justify-self: start; }