@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; src: url("/vendor/fonts/poppins-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; src: url("/vendor/fonts/poppins-latin-500-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; src: url("/vendor/fonts/poppins-latin-600-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; src: url("/vendor/fonts/poppins-latin-700-normal.woff2") format("woff2"); font-display: swap; }
:root {
  --primary: #ff8f00;
  --primary-dunkel: #d97600;
  --primary-tint: rgba(255,143,0,.1);
  --bg: #f9fbfd;
  --karte: #ffffff;
  --text: #53535f;
  --muted: #8a8f9c;
  --rand: #e7e9ee;
  --rot: #c0392b;
  --gruen: #27ae60;
  --gelb: #f1c40f;
  --lila: #8e44ad;
  --blau: #2b5f8a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 14px; color: var(--text); background: var(--bg); }
.hidden { display: none !important; }

/* Links tragen die Schriftfarbe ihrer Umgebung und sind nicht unterstrichen — kein blaues
   Browser-Standardaussehen. Sie bleiben klickbar und fuehren weiter; erst beim Ueberfahren
   zeigt eine Unterstreichung, dass es weitergeht. Gilt app-weit, damit das nicht je Reiter
   auseinanderlaeuft. Elemente mit eigener Farbe (Knoepfe, Chips, Navigation) sind spezifischer
   und bleiben unberuehrt. */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Icon-System (lucide-static SVGs, inline eingebettet) */
.icon { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; flex-shrink: 0; vertical-align: middle; color: currentColor; }
.icon svg { width: 100%; height: 100%; }

/* Login */
#login-overlay { position: fixed; inset: 0; background: linear-gradient(135deg,#2c2f38,#4a4f5c); display: flex; align-items: center; justify-content: center; z-index: 100; }
.login-box { background: #fff; padding: 36px; border-radius: 14px; width: 340px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.login-logo { display: block; height: 110px; margin: 0 auto 6px; }
.login-sub { color: var(--muted); margin: 4px 0 18px; text-align: center; }
.login-box input { width: 100%; padding: 11px 12px; margin-bottom: 10px; border: 1px solid var(--rand); border-radius: 8px; font-size: 15px; }
.login-error { color: var(--rot); font-size: 13px; min-height: 18px; margin-bottom: 8px; }

/* Layout */
#app { display: flex; height: 100vh; }
#sidebar { width: 230px; background: #fff; border-right: 1px solid var(--rand); display: flex; flex-direction: column; flex-shrink: 0; }
.logo { padding: 16px; text-align: center; }
.logo img { height: 86px; }
#nav { flex: 1; overflow-y: auto; padding: 6px 0; }
#nav a { display: flex; align-items: center; gap: 10px; padding: 10px 18px; color: var(--text); text-decoration: none; font-size: 14px; border-left: 3px solid transparent; }
#nav a:hover, .nav-gruppe-titel:hover { background: #f5f6f9; }
#nav a.aktiv { background: var(--primary-tint); border-left-color: var(--primary); color: var(--primary-dunkel); font-weight: 600; }
#nav a.nav-flach .icon, #nav a.nav-flach { color: var(--muted); }
#nav a.nav-flach.aktiv, #nav a.nav-flach.aktiv .icon { color: var(--primary-dunkel); }
.nav-gruppe-titel { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 18px; border: none; background: none; border-left: 3px solid transparent;
  color: var(--muted); font-size: 14px; font-family: inherit; cursor: pointer; text-align: left; }
.nav-gruppe-titel .nav-label { flex: 1; }
.nav-chevron { transition: transform .15s; }
.nav-gruppe.offen .nav-chevron { transform: rotate(180deg); }
.nav-gruppe-inhalt { max-height: 0; overflow: hidden; transition: max-height .18s ease; }
.nav-gruppe.offen .nav-gruppe-inhalt { max-height: 260px; }
.nav-gruppe-inhalt a { padding-left: 46px; font-size: 13.5px; border-left: 3px solid transparent; }
.nav-gruppe.offen .nav-gruppe-titel { color: var(--text); font-weight: 600; }
.sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--rand); display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#topbar { background: #fff; border-bottom: 1px solid var(--rand); padding: 10px 20px; display: flex; align-items: center; gap: 16px; }
#burger { display: none; }
.topbar-right { margin-left: auto; position: relative; display: flex; align-items: center; gap: 8px; }
.badge { position: absolute; top: -4px; right: -6px; background: var(--rot); color: #fff; font-size: 10px; border-radius: 9px; padding: 1px 5px; }
#bell { position: relative; font-size: 17px; }

/* Topbar: globale Suche */
.topbar-suche { position: relative; display: flex; align-items: center; margin-left: 8px; }
.topbar-suche input { width: 220px; padding: 7px 10px; border: 1px solid var(--rand); border-radius: 8px 0 0 8px; border-right: none; font-size: 13.5px; }
.topbar-suche select { padding: 7px 6px; border: 1px solid var(--rand); border-radius: 0 8px 8px 0; font-size: 13px; background: #faf8f4; color: var(--muted); }
.topbar-suche-ergebnisse { position: absolute; top: calc(100% + 4px); left: 0; width: 320px; background: #fff; border: 1px solid var(--rand); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 70; max-height: 360px; overflow-y: auto; }
.topbar-suche-ergebnisse a { display: block; padding: 9px 12px; font-size: 13.5px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--rand); }
.topbar-suche-ergebnisse a:last-child { border-bottom: none; }
.topbar-suche-ergebnisse a:hover { background: #faf8f4; }
.topbar-suche-ergebnisse .kategorie-label { font-size: 10.5px; text-transform: uppercase; color: var(--muted); letter-spacing: .03em; }
.topbar-suche-ergebnisse .leer { padding: 12px; color: var(--muted); font-size: 13px; }

/* Topbar: Dropdowns (Schnellerstellung, Profil) */
.topbar-schnell, .topbar-profil { position: relative; }
#schnell-btn { font-size: 18px; }
#profil-btn { width: 32px; height: 32px; border-radius: 50%; padding: 0; overflow: hidden; }
.topbar-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1px solid var(--rand); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 70; min-width: 200px; padding: 6px; }
.topbar-dropdown button, .topbar-dropdown a { display: block; width: 100%; text-align: left; padding: 9px 10px; border: none; background: none; border-radius: 6px;
  font-size: 13.5px; color: var(--text); text-decoration: none; cursor: pointer; box-sizing: border-box; }
.topbar-dropdown button:hover, .topbar-dropdown a:hover { background: #faf8f4; }
.topbar-profil-info { padding: 6px 10px 10px; border-bottom: 1px solid var(--rand); margin-bottom: 6px; }
.topbar-profil-info small { color: var(--muted); }

@media (max-width: 1100px) {
  .topbar-suche { display: none; }
}
#content { flex: 1; overflow-y: auto; padding: 22px 26px; }

/* Komponenten */
h2.seitentitel { margin: 0 0 18px; font-size: 21px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kachel { background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; padding: 18px; display: flex; align-items: center; gap: 14px; transition: box-shadow .15s, transform .15s; }
.kachel .zahl { font-size: 26px; font-weight: 700; }
.kachel .label { color: var(--muted); font-size: 13px; }
.kachel .icon { background: #e8f0f6; color: #2b5f8a; border-radius: 50%; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kachel .icon svg { width: 22px; height: 22px; }
.kachel .icon.icon-pink { background: #fdeaf0; color: #d84a7f; }
.kachel .icon.icon-tuerkis { background: #e3f7f5; color: #17a398; }
.kachel .icon.icon-gruen { background: #e8f6ec; color: #2e9e52; }
.kachel .icon.icon-rot { background: #fdeaea; color: #c0392b; }
.kachel .icon.icon-orange { background: #fff2e0; color: var(--primary-dunkel); }
.card { background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.card h3 { margin: 0 0 12px; font-size: 16px; }
.grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
.grid2eq { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }

/* Tickets-Übersicht: Tabelle + rechtes Infopanel (Mehrfachauswahl), wie im Original */
.tickets-layout { display: flex; gap: 16px; align-items: flex-start; }
.tickets-layout .card:first-child { flex: 1; min-width: 0; }
.tickets-panel { width: 280px; flex-shrink: 0; font-size: 13.5px; color: var(--muted); }
.tickets-panel p { margin: 0 0 10px; }
.ticket-frist-alert { color: var(--text); }
.ticket-frist-alert.ueberfaellig { color: var(--rot); font-weight: 600; }
.ticket-alter-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.ticket-alter-punkt.gruen { background: var(--gruen); }
.ticket-alter-punkt.orange { background: var(--primary); }
.ticket-alter-punkt.rot { background: var(--rot); }

/* Klick-zum-Bearbeiten: Stift-Icon erst beim Hovern über die Zeile sichtbar — wie im Original (Klasse "hover-edit") */
.hover-edit-stift { opacity: 0; cursor: pointer; color: var(--muted); transition: opacity .15s; }
.hover-edit-zeile:hover .hover-edit-stift { opacity: 1; }
/* Original umschließt Titel/Tags beim Hovern zusätzlich mit einem Rahmen (nicht nur der Stift blendet ein) */
.hover-edit-box { border: 1px solid transparent; border-radius: 5px; padding: 4px 6px; margin: -4px -6px; transition: border-color .15s; cursor: pointer; }
.hover-edit-box:hover { border-color: #1e90ff; }
.hover-edit-box:hover .hover-edit-stift { opacity: 1; }

/* Ticket-Detailseite: Karten wie im Original (kleinerer Radius, mehr Innenabstand als unsere Standard-.card) */
.card-td { background: var(--karte); border: 1px solid #edf2f9; border-radius: 4px; padding: 24px; margin-bottom: 20px; }
.card-td h4 { margin: 0 0 14px; font-size: 19px; font-weight: 500; color: #2a2a2a; display: flex; align-items: center; gap: 6px; }

/* Farbpunkte für Status/Priorität, wie im Original */
.punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.punkt-rot { background: #c40000; }
.punkt-gelb { background: #f1c40f; }
.punkt-magenta { background: #ab005b; }
.punkt-gruen { background: #3dc966; }
.punkt-grau { background: #95a5a6; }
.punkt-blau { background: #2b5f8a; }
.punkt-orange { background: var(--primary); }

/* Eigene Dropdown-Knöpfe für Status/Priorität/Frist auf der Ticket-Detailseite (Original nutzt keine nativen <select>) */
.td-dropdown { position: relative; display: inline-block; }
.td-dropdown-btn { border: 1px solid #edf2f9; background: #fff; color: var(--text); padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; }
.td-dropdown-btn.leer { color: var(--primary); border: none; background: none; padding: 8px 4px; }
.td-dropdown-liste { position: absolute; top: calc(100% + 6px); left: 0; background: #fff; border: 1px solid var(--rand); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 70; min-width: 190px; padding: 6px; }
.td-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13.5px; white-space: nowrap; }
.td-dropdown-item:hover { background: #faf8f4; }
.td-dropdown-frist { display: flex; gap: 8px; align-items: center; padding: 4px; min-width: 220px; }

/* Fotokarussell auf der Ticket-Detailseite */
.td-karussell { position: relative; }
.td-karussell-bild { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 4px; display: block; }
.td-karussell-punkte { display: flex; justify-content: center; gap: 4px; margin-top: 8px; }
.karussell-punkt { width: 8px; height: 3px; border-radius: 2px; background: var(--rand); cursor: pointer; border: none; padding: 0; }
.karussell-punkt.aktiv { background: var(--primary); width: 18px; }

/* Roter Zähler-Kreis neben Tab-Label (Dateien & Bilder), wie im Original statt "(n)"-Text */
.tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px;
  background: var(--rot); color: #fff; font-size: 10px; margin-left: 4px; vertical-align: middle; }

/* Ticket-Detailseite 1:1: Knöpfe im Original haben Radius 4px und Rahmenfarbe #edf2f9 statt unserer sonstigen 8px/var(--rand) */
.td-original .btn { border-radius: 4px; border-color: #edf2f9; }
.td-original .btn.primary { border-color: var(--primary); }

/* Chip-Mehrfachauswahl mit Tipp-Filter (Bearbeitende Manager / Zugewiesene Mitarbeiter), wie im Original */
.cm-zeile { display: flex; align-items: flex-start; gap: 0; }
.cm-label { flex: 0 0 37.5%; font-size: 14px; color: #53535f; padding-top: 12px; }
.cm-zeile > div:last-child { flex: 1; min-width: 0; }
.cm-feld { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 43px;
  padding: 5px 26px 5px 6px; border: 1.25px solid #d9d9d9; border-radius: 2px; background: #fff; cursor: text; }
.cm-feld:focus-within { border-color: #40a9ff; }
.cm-feld.cm-deaktiviert { background: #f5f5f5; cursor: default; }
.cm-chip { display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 4px 0 8px; background: #f5f5f5;
  border: 1.25px solid #f0f0f0; border-radius: 2px; font-size: 13px; color: #53535f; white-space: nowrap; }
.cm-chip-weg { display: inline-flex; cursor: pointer; color: rgba(0,0,0,.45); }
.cm-chip-weg:hover { color: rgba(0,0,0,.75); }
.cm-input { flex: 1; width: auto; min-width: 60px; border: none; outline: none; padding: 2px 0; font-size: 14px; background: transparent; }
.cm-input:disabled { background: transparent; }
.cm-pfeil { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: rgba(0,0,0,.25); pointer-events: none; }
.cm-liste { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border-radius: 2px; padding: 4px;
  box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05); z-index: 80;
  max-height: 256px; overflow-y: auto; }
.cm-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding: 5px 12px;
  border-left: 3.75px solid transparent; font-size: 14px; color: #53535f; cursor: pointer; }
.cm-opt:hover, .cm-opt.aktiv { background: rgba(255,143,0,.1); }
.cm-opt.gewaehlt { color: var(--primary); font-weight: 500; border-left-color: var(--primary); }
.cm-opt.gewaehlt .icon { color: var(--primary); }
.cm-leer { padding: 8px 12px; font-size: 13px; color: var(--muted); }

/* Häkchen im Original-Look statt nativer Checkbox-Optik — höhere Selektor-Spezifität als die allgemeine
   "input[type=checkbox]{width:auto}"-Regel weiter unten, damit die feste Größe nicht überschrieben wird */
input[type=checkbox].cb-original { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 4px;
  border: 1.25px solid #b3b5b7; background: #fff; cursor: pointer; flex-shrink: 0; }
input[type=checkbox].cb-original:checked { background: var(--primary) 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%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color: var(--primary); }

/* Beobachter-Glocke im Ticket-Detail-Kopf */
.td-beobachten-gruppe { display: inline-flex; }
.td-beobachten-btn { border-radius: 2px 0 0 2px !important; }
.td-beobachten-btn.aktiv { color: var(--primary); }
.td-beobachten-zahl { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 12px;
  border: 1.25px solid #edf2f9; border-left: none; background: #fff; font-size: 14px; color: var(--text); }

/* Beschreibung: eigener Speichern-Knopf, nur sichtbar wenn geändert */
.td-beschr-fuss { text-align: right; }

/* Reiter "Dateien & Bilder": Ablage-Fläche + Tabelle 1:1 */
.td-ablage { border: 1.25px dashed #edf2f9; border-radius: 4px; background: #fafafa; padding: 22px 20px; text-align: center; cursor: pointer; }
.td-ablage:hover, .td-ablage.bereit { border-color: var(--primary); background: var(--primary-tint); }
.td-ablage .icon { color: var(--muted); }
.td-ablage p { margin: 8px 0 4px; font-size: 14px; color: var(--text); }
.td-ablage select { display: inline; width: auto; border: none; background: transparent; font-weight: 700; color: #53535f; padding: 0 4px; font-size: 14px; }
.td-ablage small { color: var(--muted); font-size: 11.5px; }
.td-dateien-tabelle td { vertical-align: top; }
.td-datei-thumb { display: inline-block; width: 60px; height: 60px; background-size: cover; background-position: center; cursor: pointer; }
.td-datei-icon { display: inline-flex; width: 60px; height: 60px; align-items: center; justify-content: center; color: var(--muted); }
.td-dateiname { margin: 0 0 6px; font-size: 14px; color: var(--muted); word-break: break-all; }
.td-groesse { display: inline-block; padding: 2px 10px; border-radius: 50px; border: 1.25px solid #edf2f9; background: #fff; font-size: 12px; color: #53535f; }
.td-datei-info { color: #53535f; }
.td-datei-beschr { color: var(--muted); }
.btn-rund { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1.25px solid #edf2f9; background: #fff; color: var(--text); cursor: pointer; text-decoration: none; margin-left: 6px; }
.btn-rund.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-rund:hover { opacity: .88; }

/* Ausrichtung im Rich-Text-Editor als Klappmenü statt drei Einzelknöpfen, wie im Original */
.richtext-align { position: relative; display: inline-block; }
.richtext-align-btn { display: inline-flex !important; align-items: center; gap: 2px; }
.richtext-align-liste { position: absolute; top: 100%; left: 0; display: flex; background: #fff; border: 1px solid var(--rand);
  border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 3px; z-index: 60; }

.klickbar { cursor: pointer; }
.kachel.klickbar:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-1px); border-color: var(--primary); }
.dash-kopf { display: flex; justify-content: space-between; align-items: end; margin-bottom: 18px; flex-wrap: wrap; gap: 8px; }
.dash-datum { color: var(--muted); font-size: 13.5px; }
.dash-section { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 6px 0 12px; }

/* Knopfform am Original abgenommen: 4px Radius, normales Schriftgewicht (nicht halbfett). */
.btn { border: 1px solid var(--rand); background: #fff; color: var(--text); padding: 8px 14px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.btn:hover { background: #faf6ef; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-dunkel); }
.btn.danger { color: var(--rot); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }

table.liste { width: 100%; border-collapse: collapse; }
table.liste th { text-align: left; font-size: 12.5px; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--rand); }
table.liste td { padding: 10px; border-bottom: 1px solid var(--rand); font-size: 14px; vertical-align: middle; }
table.liste tr:hover td { background: #faf8f4; }
tr.klickbar { cursor: pointer; }

.tag { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; background: #eef; margin: 2px 3px 2px 0; white-space: nowrap; }
.tag.orange { background: #fdf3e3; color: #c96f0a; }
.tag.gruen { background: #e8f8ef; color: #1d8348; }
.tag.rot { background: #fdecea; color: var(--rot); }
.tag.gelb { background: #fef9e7; color: #9a7d0a; }
.tag.grau { background: #eee; color: #666; }
.tag.blau { background: #eaf2fb; color: #2471a3; }
.tag.magenta { background: #fde8f1; color: #ab005b; }

.prio-Hoch { background: #e8871e; color: #fff; }
.prio-Mittel { background: #5dade2; color: #fff; }
.prio-Normal { background: var(--gruen); color: #fff; }
.prio-Niedrig { background: #aab7b8; color: #fff; }

/* Grundregel: das Kürzel steht für sich. Das frühere margin-right:-6px war nur für die
   überlappenden Avatar-Stapel gedacht, wirkte aber überall und liess Kürzel und Namen
   aneinanderkleben — die Überlappung hängt jetzt an .avatar-stapel. */
.avatar { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; align-items: center; justify-content: center; border: 2px solid #fff; vertical-align: middle; flex-shrink: 0; }
/* Mehrere Zuständige nebeneinander: bewusst überlappend, wie bisher. */
.avatar-stapel { display: inline-flex; vertical-align: middle; }
.avatar-stapel .avatar, .abfuhr-avatare .avatar { margin-right: -6px; }
/* Ein Mensch mit Namen — überall in der App dieselbe Darstellung (siehe person() in app.js). */
.person { display: inline-flex; align-items: center; gap: 14px; }
.person > b { font-weight: 600; font-size: 14.5px; }
.person > small { color: var(--muted); font-size: 12px; }
.person .avatar, .ze-name .avatar, .ma-chip .avatar, .abw-ma .avatar, .abw-name .avatar {
  width: 34px; height: 34px; font-size: 12.5px; }
.avatar.avatar-manager { box-shadow: 0 0 0 2px var(--blau); } /* Bearbeitende Manager vs. zugewiesene Mitarbeiter bei Tickets, wie im Original per Farbring unterscheidbar */

/* Bild-Lightbox für Ticket-Dateien */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.lightbox-bild { max-width: 90vw; max-height: 88vh; border-radius: 6px; }
.lightbox-schliessen { position: absolute; top: 18px; right: 22px; background: none; border: none; color: #fff; cursor: pointer; padding: 6px; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); border: none; color: #fff; border-radius: 50%; width: 44px; height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox-nav:hover { background: rgba(255,255,255,.3); }
.lightbox-zurueck { left: 18px; }
.lightbox-vor { right: 18px; }
.lightbox-zaehler { position: absolute; bottom: 18px; color: #fff; font-size: 13px; }

.tag-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.th-sortierbar { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sortierbar .icon { vertical-align: middle; opacity: .55; }

/* Formulare */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .voll { grid-column: 1 / -1; }
label.feld { display: block; font-size: 13px; color: var(--muted); }
label.feld > span { display: block; margin-bottom: 4px; }
input, select, textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--rand); border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; color: var(--text); }
textarea { resize: vertical; min-height: 70px; }
input[type=checkbox], input[type=radio] { width: auto; }
.checkzeile { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }

/* Modal */
#modal-root .modal-bg { position: fixed; inset: 0; background: rgba(30,30,40,.5); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 50; overflow-y: auto; }
.modal { background: #fff; border-radius: 14px; padding: 24px; width: 100%; max-width: 760px; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
.modal h3 { margin: 0 0 16px; }
.modal-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Toast */
#toast-root { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #2c2f38; color: #fff; padding: 12px 18px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: rein .25s; max-width: 360px; }
.toast.fehler { background: var(--rot); }
@keyframes rein { from { transform: translateY(12px); opacity: 0; } }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--rand); margin-bottom: 16px; flex-wrap: wrap; }
.tabs button { border: none; background: none; padding: 10px 14px; cursor: pointer; font-size: 14px; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs button.aktiv { color: var(--primary-dunkel); border-bottom-color: var(--primary); font-weight: 600; }

/* Kalender */
.kal-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.kal-woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.kal-tag { background: #fff; border: 1px solid var(--rand); border-radius: 10px; min-height: 150px; padding: 8px; }
.kal-tag.heute { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.kal-tag .datum { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.kal-eintrag { border-radius: 7px; padding: 5px 7px; font-size: 12px; margin-bottom: 5px; cursor: grab; color: #fff; position: relative; }
.kal-eintrag.erledigt { opacity: .45; text-decoration: line-through; }
.kal-eintrag .objekt { display: block; font-size: 10.5px; opacity: .85; }

/* --- Aufgaben-Kalender (Event Calendar) ---
   Maße und Farben aus der Referenz-App ausgemessen (Schaltflächen 32 px hoch, Icons 40×40). */
.kal-leiste { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.kal-titel { font-size: 22px; font-weight: 600; color: var(--primary); margin: 0 10px 0 2px; white-space: nowrap; }

/* Runde Icon-Schaltflächen (Neu laden, Navigation, Vollbild) */
.kal-rund { width: 40px; height: 40px; border-radius: 50%; border: none; background: none; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.kal-rund:hover { background: rgba(0,0,0,.05); }
.kal-orange { color: var(--primary); }
/* Randlose Textschaltflächen ("Anzeige", "Heute") */
.kal-flach { border: none; background: none; font-family: inherit; font-size: 14px; height: 32px; padding: 0 10px;
  border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.kal-flach:hover { background: rgba(0,0,0,.05); }
#kal-anzeige { color: var(--primary); }

/* Umrandete Toolbar-Schaltflächen (Backlog, Filter, Mehr) */
.kal-tb { height: 32px; font-size: 14px; border-radius: 4px; padding: 0 12px; }
.kal-segmented { display: inline-flex; background: #dedede; border-radius: 9px; padding: 2px; }
.kal-segmented button { border: none; background: none; padding: 4px 13px; font-size: 14px; font-family: inherit;
  color: var(--text); cursor: pointer; border-radius: 7px; }
.kal-segmented button.aktiv { background: #fff; font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.kal-badge { background: #f5222d; color: #fff; border-radius: 10px; padding: 0 6px; font-size: 12px;
  font-weight: 500; margin-left: 6px; line-height: 18px; display: inline-block; }
.kal-filter { width: auto; min-width: 126px; max-width: 190px; padding: 0 10px; font-size: 14px; }
.kal-mehr { position: relative; }
.kal-mehr .topbar-dropdown { right: auto; left: 0; }
.kal-nav { display: flex; gap: 2px; align-items: center; margin-left: auto; }

.kal-karte { padding: 0; overflow: hidden; position: relative; }

/* Dialogfenster "Anzeige & Filter" — zwei Spalten wie in der Referenz */
.kal-dialog { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.kal-dialog h4 { margin: 18px 0 10px; font-size: 14px; font-weight: 600; padding-bottom: 7px; border-bottom: 1px solid var(--rand); }
.kal-dialog h4:first-child { margin-top: 0; }
.kal-dialog .checkzeile { margin-bottom: 9px; align-items: flex-start; }
.kal-dialog .feld { margin-top: 14px; }
.kal-hinweis { font-size: 12px; color: var(--muted); margin: -4px 0 10px 26px; }
.kal-ma-liste { max-height: 230px; overflow-y: auto; border: 1px solid var(--rand); border-radius: 8px; padding: 6px; }
.kal-ma-zeile { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 14px; cursor: pointer; border-radius: 6px; }
.kal-ma-zeile:hover { background: #f7f7f9; }
.kal-ma-zeile input { width: auto; flex-shrink: 0; }
.kal-ma-name { flex: 1; margin-left: 8px; }
.kal-ma-farbe { width: 4px; height: 20px; border-radius: 2px; flex-shrink: 0; }
@media (max-width: 900px) { .kal-dialog { grid-template-columns: 1fr; } }

/* --- Aufgaben-Dialog (Maße aus dem Original ausgemessen) --- */
.dlg-leiste { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; margin: 18px 0 12px;
  background: #f5f5f7; border-radius: 4px 4px 0 0; border-bottom: 1px solid var(--rand);
  font-size: 14px; font-weight: 500; color: #2a2a2a; }
.dlg-leiste:first-child { margin-top: 0; }
.dlg-leiste .icon { color: var(--muted); }
.dlg-leiste-rechts { margin-left: auto; }
.dlg-warnung { color: #de4436; font-size: 13px; margin: -6px 0 16px; }
.pflicht { color: #de4436; font-weight: 400; }
.dlg-zeile3 { display: grid; grid-template-columns: 2fr 1.3fr 1fr; gap: 12px; }
.dlg-zeile2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dlg-radiozeile { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.chip-reihe { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.feld-mit-knopf { display: flex; gap: 6px; }
.feld-mit-knopf input { flex: 1; }
.ma-chip { display: inline-flex; align-items: center; gap: 6px; background: #f0f0f3; border: 1px solid var(--rand);
  border-radius: 14px; padding: 3px 10px 3px 4px; font-size: 13px; }
.ma-chip-weg { cursor: pointer; color: var(--muted); font-weight: 700; margin-left: 2px; }
.ma-chip-weg:hover { color: var(--rot); }

/* Wiederholungs-Kasten */
.wdh-box { border: 1px solid var(--rand); border-radius: 8px; padding: 14px; margin-top: 10px; background: #fcfcfd; }
.wdh-reiter { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.wdh-reiter button { border: 1px solid transparent; background: none; padding: 6px 14px; border-radius: 6px;
  font-family: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; }
.wdh-reiter button.aktiv { border-color: var(--primary); color: var(--primary); font-weight: 500; }
.wdh-zeile { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 10px; }
.wdh-zeile input, .wdh-ende input[type=number] { width: 56px; text-align: center; padding: 5px; }
.wdh-tage { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wdh-tage .checkzeile { gap: 5px; font-size: 13px; }
.wdh-ende b { display: flex; align-items: center; gap: 5px; font-size: 13.5px; margin-bottom: 8px; }
.wdh-ende .checkzeile { padding: 8px 0; border-bottom: 1px solid var(--rand); gap: 8px; font-size: 13.5px; }
.wdh-ende .checkzeile:last-child { border-bottom: none; }
.wdh-ende input[type=date] { width: auto; padding: 5px 8px; }

/* Manuelle Leistungen */
.leist-liste { display: flex; flex-direction: column; gap: 6px; }
.leist-zeile { display: grid; grid-template-columns: 1fr 80px 90px auto; gap: 6px; align-items: center; }
.dlg-menue { position: relative; margin-top: 8px; }
.dlg-menue .topbar-dropdown { right: auto; left: 0; }
.dlg-link { border: none; background: none; color: var(--primary); font-family: inherit; font-size: 13.5px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; }
.dlg-link:hover { text-decoration: underline; }
.dlg-loeschen { color: #de4436; }
.dlg-linkzeile { display: flex; gap: 20px; }
.leer-zustand { text-align: center; color: var(--muted); padding: 22px 0; font-size: 13px; }
.leer-zustand .icon { opacity: .35; display: block; margin: 0 auto 6px; }
.kat-liste { max-height: 320px; overflow-y: auto; }
.kat-liste .checkzeile { padding: 6px 2px; }

/* --- Abfuhrpläne --- */
/* Durchsuchbare Objektauswahl (Suchfeld über der Liste) */
.objekt-waehler { display: grid; grid-template-columns: 240px 1fr; gap: 8px; }
.objekt-waehler input { min-width: 0; }
/* Auswahlmodus im Abfuhr-Kalender */
.abfuhr-auswahl-link { color: var(--primary); font-size: 13px; text-decoration: none; }
.abfuhr-auswahl-link:hover { text-decoration: underline; }
.abfuhr-anzahl { font-size: 13px; color: var(--muted); }
.abfuhr-alle { color: var(--primary); font-size: 10px; text-decoration: none; font-weight: 400; }
.abfuhr-alle:hover { text-decoration: underline; }
.abfuhr-pille .abfuhr-box { position: absolute; right: 2px; bottom: 2px; width: 13px; height: 13px; margin: 0; }
/* Nur die Kopfzellen sind eingefärbt — Farben in der Referenz ausgemessen */
.abfuhr-matrix .raus-kopf { background: #fff0f0; }
.abfuhr-matrix .rein-kopf { background: #e0ffe0; }
.abfuhr-matrix .raus-zelle, .abfuhr-matrix .rein-zelle { background: #fff; }
.abfuhr-matrix th.heute { color: #fff; background: var(--primary); border-radius: 4px; }
.abfuhr-matrix th small { font-weight: 400; color: var(--muted); }
.abfuhr-matrix th.heute small { color: rgba(255,255,255,.85); }
.abfuhr-pille { position: relative; display: flex; align-items: center; gap: 5px; margin: 2px 0;
  width: 100%; box-sizing: border-box; height: 24px; padding: 0 8px 0 5px; border-radius: 20px;
  font-size: 11.5px; font-weight: 500; cursor: pointer;
  background: color-mix(in srgb, var(--tonne) 20%, #fff); color: #000; border: 1px solid var(--tonne); }
.abfuhr-pille:hover { filter: brightness(.97); }
.abfuhr-pille.erledigt { opacity: .75; }
.abfuhr-pille.erledigt .abfuhr-name { text-decoration: line-through; }
.abfuhr-haken { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; display: inline-flex;
  align-items: center; justify-content: center; background: var(--tonne); color: #fff; }
.abfuhr-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abfuhr-avatare { position: absolute; top: -7px; right: -4px; display: flex; }
.abfuhr-avatare .avatar { width: 16px; height: 16px; font-size: 8px; border-width: 1.5px; margin-right: -5px; }
.abfuhr-fuss { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.abfuhr-seiten { display: flex; align-items: center; gap: 8px; }
.abfuhr-seite-nr { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
/* Schalter (an/aus) */
.schalter { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.schalter input { opacity: 0; width: 0; height: 0; position: absolute; }
.schalter span { position: absolute; inset: 0; background: #c9c9cf; border-radius: 22px; cursor: pointer; transition: background .15s; }
.schalter span::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .15s; }
.schalter input:checked + span { background: var(--primary); }
.schalter input:checked + span::before { transform: translateX(18px); }

/* --- Import-Assistent --- */
.assi-kopf { display: flex; align-items: center; gap: 8px; margin: 4px 0 20px; flex-wrap: wrap; }
.assi-schritt { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); flex: 1; }
.assi-schritt.aktiv { color: var(--text); font-weight: 500; }
.assi-nr { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--rand); display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.assi-schritt.aktiv .assi-nr { background: var(--primary); border-color: var(--primary); color: #fff; }
.assi-schritt.fertig .assi-nr { border-color: var(--primary); color: var(--primary); }
.assi-ablage { border: 1px dashed var(--rand); border-radius: 10px; padding: 40px 20px; text-align: center;
  cursor: pointer; background: #fafafb; color: var(--muted); }
.assi-ablage:hover, .assi-ablage.bereit { border-color: var(--primary); background: var(--primary-tint); }
.assi-ablage .icon { color: var(--primary); }
.assi-ablage p { margin: 10px 0 4px; color: var(--text); }
.assi-tabelle { max-height: 46vh; overflow-y: auto; }
.assi-titelzeile { font-size: 12.5px; color: var(--muted); padding-bottom: 6px; }
.assi-zeile { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; }
.assi-gruppe { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rand); align-items: center; }
.assi-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.assi-name { width: 130px; padding: 5px 8px; font-size: 13px; }
.assi-anzahl { color: #fff; border-radius: 12px; padding: 2px 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.assi-farben { display: flex; gap: 4px; }
.assi-farbe { width: 17px; height: 17px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.assi-farbe.aktiv { border-color: #333; }
.assi-versatz { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 5px; }
.assi-tage { width: 46px; padding: 4px; text-align: center; font-size: 12.5px; }
.assi-art { border: 1px solid transparent; background: none; padding: 4px 8px; border-radius: 4px;
  font-family: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
.assi-art.aktiv { border-color: var(--primary); color: var(--primary); }
.assi-liste { max-height: 48vh; overflow-y: auto; }
/* Ganzjahres-Kalender für manuelle Terminauswahl */
.jahres-kalender { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; max-height: 44vh; overflow-y: auto; }
.jk-monat b { display: block; font-size: 13px; margin-bottom: 5px; }
.jk-wochentage, .jk-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jk-wochentage span { text-align: center; font-size: 10px; color: var(--muted); }
.jk-tage button { border: none; background: none; font-family: inherit; font-size: 11.5px; padding: 3px 0;
  border-radius: 4px; cursor: pointer; color: var(--text); }
.jk-tage button:hover { background: var(--primary-tint); }
.jk-tage button.gewaehlt { background: var(--primary); color: #fff; font-weight: 600; }

/* Fußzeile: Löschen/Duplizieren links, Abbrechen/Speichern rechts (40 px hoch) */
.dlg-fuss { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rand); }
.dlg-fuss-luecke { flex: 1; }
.dlg-fuss .btn { height: 40px; border-radius: 4px; }
/* Zoom-Schalter schweben unten rechts über dem Raster */
.kal-zoom { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 4px; z-index: 5; }
.kal-zoom button { width: 34px; height: 34px; border: 1px solid var(--rand); background: #fff; border-radius: 6px;
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.kal-zoom button:hover { background: #f5f5f5; }

/* Farben/Schrift der Bibliothek an unser Design angleichen */
.ec {
  --ec-border-color: var(--rand);
  --ec-text-color: var(--text);
  --ec-bg-color: #fff;
  --ec-today-bg-color: rgba(255, 143, 0, .06);
  --ec-now-indicator-color: var(--primary);
  --ec-highlight-color: var(--primary-tint);
  /* Sichtbarer Zwischenraum, wenn mehrere Termine (dank slotEventOverlap:false) nebeneinander
     liegen — sonst wirken sie bei schmalen Spalten wie ein einziger Block. */
  --ec-event-col-gap: 3px;
  font-family: inherit;
  font-size: 13px;
  border: none;
  height: 100%;
}
.kal-karte.kal-fest { height: calc(100vh - 240px); min-height: 430px; }
.kal-karte.kal-fest > #kal-ziel { height: 100%; }
/* Mindestbreite je Tagesspalte: bei mehreren Mitarbeitern wird waagerecht gescrollt,
   statt die Spalten unlesbar schmal zu quetschen (wie in der Referenz-App).
   Die Bibliothek setzt die Variable als Inline-Style auf .ec-main — daher !important.
   200px gemessen an der Referenz (dort feste Spaltenbreite bei mehreren Mitarbeitern) —
   erst dabei bleiben 2 nebeneinanderliegende Termine (slotEventOverlap:false) noch lesbar;
   bei 100px landen sie bei ~49px und der Titel passt nicht mehr hinein. Timeline-Spalten
   sind Stunden, nicht Mitarbeiter, und bleiben deshalb bei 100px. */
/* position:relative dient nur als Bezugsrahmen für unsere eigene Jetzt-Linie (.kal-jetzt-*,
   position:absolute, per JS in app.js hinzugefügt) — verändert selbst nichts am Grid-Layout. */
.ec-resource.ec-time-grid .ec-main { --ec-col-width: minmax(200px, 1fr) !important; position: relative; }
.ec-timeline .ec-main { --ec-col-width: minmax(100px, 1fr) !important; }
.ec-time-grid, .ec-timeline { overflow: auto; }
.ec-header, .ec-all-day, .ec-sidebar { background: #faf9f7; }
/* Ganztägig-Zeile: feste Höhe statt unbegrenztem Wachstum. Ohne overflow wächst .ec-all-day
   mit jeder zusätzlichen ganztägigen Aufgabe weiter nach unten und verdrängt das normale
   Stundenraster darunter — stattdessen scrollt die Zeile intern, sobald sie voll ist.
   Die Höhe selbst wird per JS (kalGanztagHoehe-Einstellung) als Inline-Style gesetzt.
   overflow-x:hidden ist hier PFLICHT, nicht nur Kosmetik: setzt man nur overflow-y, erzwingt die
   CSS-Spezifikation für die andere Achse automatisch overflow-x:auto (eine Achse darf nicht scroll,
   die andere visible sein) — dadurch wurde .ec-all-day ungewollt ein EIGENER, von .ec-main
   unabhängiger horizontaler Scroll-Container. Live beobachteter Bug: das sticky "ganztägig"-Label
   (.ec-all-day .ec-sidebar) blieb beim horizontalen Scrollen von .ec-main auf der Stelle stehen
   (eigener scrollLeft blieb bei 0) und rutschte dadurch aus dem Sichtbereich, während Kopfzeile und
   Zeitraster-Sidebar (beide ohne eigenen Scroll-Container) korrekt synchron blieben. */
.ec-all-day { overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }
/* Zeit-/Ganztägig-Spalte (Spalte 1 des Grids) fest schmal halten. Die Bibliothek legt sie
   sonst per max-content auf die Breite ihres längsten Inhalts fest — und "ganztägig" ist
   länger als jedes Zeit-Label wie "06:00", sprengt also sonst die ganze Spalte auf.
   Referenz-App hält diese Spalte ebenfalls fest schmal (dort ~68px, andere Bibliothek/
   Innenabstände — 76px ist bei uns die knappste Breite ohne Textabschnitt). */
.ec-time-grid .ec-main { grid-template-columns: 76px repeat(var(--ec-grid-cols), var(--ec-col-width)) !important; }
.ec-time-grid .ec-sidebar { padding-inline: 6px; }
/* Mitarbeiter-Kopfzeile: 38 px hoch, 14 px/600, zentriert (gemessen) */
.ec-resource-title { font-weight: 600; font-size: 14px; }
/* Ziehgriff für die Spaltenbreite (siehe app.js, direkt nach EventCalendar.create) — unsichtbarer
   Streifen am rechten Rand jeder Mitarbeiter-Kopfzelle, wie im Original per Ziehen bedienbar statt
   nur über den Schieberegler im Anzeige-Dialog. */
.kal-spalte-griff { position: absolute; top: 0; right: -3px; bottom: 0; width: 6px; cursor: col-resize; z-index: 5; }
/* Tages-Kopfzeile und Zeitspalte */
.ec-header .ec-day { font-size: 16px; font-weight: 400; color: #000; }
.ec-time { font-size: 12px; color: #8c8c8c; }
/* "ganztägig"-Label: rechtsbündig, einzeilig, klein — wie im Original.
   .ec-sidebar-title existiert in der installierten Event-Calendar-Version nicht mehr,
   das Label liegt direkt in .ec-sidebar.
   ABER: dieses eingebaute position:sticky funktioniert hier nicht zuverlässig — .ec-all-day hat
   (s.o.) selbst overflow-y:auto (Pflicht für die Höhenbegrenzung), und JEDER von "visible"
   abweichende overflow-Wert auf EINER Achse macht ein Element zum eigenen Scroll-/Clip-Container
   auf BEIDEN Achsen. Dadurch stickt das Label gegen .ec-all-days eigene (nie bewegte) Box statt
   gegen das tatsächlich scrollende .ec-main — sichtbar als "rutscht beim Scrollen weg". Das
   Original-Element bleibt unsichtbar im Layout (Spaltenbreite bleibt erhalten), sichtbar ist
   stattdessen ein selbst gezeichnetes Pendant (.kal-ganztag-label, siehe unten + app.js
   kalGanztagEtikettZeichnen) — dasselbe Prinzip wie die bereits bewährte Jetzt-Linie.
   z-index:3 ist hier PFLICHT (anders als beim "+N"-Feld, das bewusst KEINEN eigenen z-index bekam):
   das Label ist Kind von .ec-main, aber .ec-header (sticky, enthält .ec-all-day) hat selbst
   z-index:2 mit undurchsichtigem Hintergrund (#faf9f7) — ohne einen höheren Wert hier verschwindet
   das Label komplett dahinter, obwohl seine Position korrekt berechnet ist (live beobachtet: Text
   nirgends sichtbar, aber getBoundingClientRect meldete trotzdem die richtige Stelle). Das "+N"-Feld
   ist dagegen selbst gescrollter INHALT und muss sich absichtlich WIE eine normale Termin-Kachel
   hinter dem Header verstecken, sobald es nach oben wegscrollt — umgekehrter Fall. */
.ec-all-day .ec-sidebar { visibility: hidden; }
.kal-ganztag-label { position: absolute; width: 76px; padding-inline: 6px; box-sizing: border-box;
  font-size: 12px; color: #8c8c8c; text-align: right; white-space: nowrap; z-index: 3;
  display: flex; align-items: center; justify-content: flex-end; pointer-events: none;
  /* Hatte bisher KEINEN eigenen Hintergrund — verließ sich stillschweigend auf den (bereits
     unsichtbar geschalteten) .ec-all-day .ec-sidebar darunter. Beim Scrollen auf eine Position,
     die nicht exakt auf eine Spaltengrenze fällt, schiebt sich dadurch ein ganztägiger Termin
     sichtbar unter das Etikett (vom Nutzer gemeldet und mit elementFromPoint bestätigt: an der
     Etikett-Position wurde tatsächlich die Termin-Kachel getroffen, nicht das Etikett). */
  background: #faf9f7; }
/* Termin-Kachel wie im Original: die volle Aufgaben-Farbe liegt als Hintergrund, ein halbtransparenter
   weißer Schleier darüber hellt sie zu einem Pastellton auf (dunkler Text bleibt dadurch überall
   lesbar, unabhängig davon wie satt die Ausgangsfarbe ist) — kein separater linker Akzentstreifen,
   nur rechts gerundet wie in der Referenz. Dünner heller Rand auf allen vier Seiten plus dezenter
   Schlagschatten, damit sowohl nebeneinander- als auch (das war bislang der Lücke im Original-
   Abgleich: live nachgemessen 0px Abstand, zwei zeitlich direkt aufeinanderfolgende Kacheln
   verschmolzen bei gleicher Farbe optisch zu einer) zeitlich direkt aufeinanderfolgende Kacheln klar
   als getrennt erkennbar bleiben. Im Original selbst kein harter Rand, sondern ein 1px-Padding-Spalt
   am Wrapper (nur oben/unten) plus weicher box-shadow auf der inneren Kachel — hier stattdessen die
   bereits bewährte, hier einfacher umsetzbare border-Technik (Bibliothek positioniert per Inline-
   Style/block-size, box-sizing:border-box ist global gesetzt, ein Rand geht davon einfach ab, ohne
   die Positionierung anzutasten). */
/* Schriftart der Aufgaben-Kacheln bewusst vom App-weiten Poppins abweichend, direkt aus dem
   Original übernommen (dort per getComputedStyle gemessen: -apple-system, "Segoe UI", Roboto,
   sans-serif) — 1:1-Nachbau gilt für die Kachel selbst, nicht für den Rest der App. */
.ec-event { border: 2px solid rgba(255,255,255,.75); border-radius: 0 3px 3px 0;
  box-shadow: 0 0 5px rgba(0,0,0,.3); font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 2px 4px 2px 6px; cursor: pointer; overflow: hidden; position: relative; }
.ec-event::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.5); pointer-events: none; }
.ec-event:hover { filter: brightness(.97); }
/* Zieh-Griffe: die Bibliothek liefert .ec-resizer (unten) / .ec-resizer.ec-start (oben) bereits
   strukturell (volle Breite, 8px hohe unsichtbare Zieh-Zone, cursor:ns-resize), aber ganz ohne
   eigene Optik — im Original (live gemessen) erscheint dafür erst beim Hover ein kleiner Kreis
   (8x8px, weiß, blauer Rand), diagonal versetzt: oberer Griff oben rechts, unterer Griff unten
   links. Im Original ragt der Kreis zur Hälfte über die Kachelkante hinaus (top:-4px) — bei uns
   nicht möglich, .ec-event braucht sein eigenes overflow:hidden (Textkürzung u.a.), das den Kreis
   sonst abschneiden würde (live geprüft: mit -4px komplett unsichtbar). Stattdessen flächenbündig
   mit der Kante (top:0/bottom:0) statt darüber hinausragend — sonst identisch. */
.ec-event:hover .ec-resizer::after { content: ''; position: absolute; width: 8px; height: 8px;
  background: #fff; border: 1.5px solid rgb(92, 131, 180); border-radius: 50%; pointer-events: none; }
.ec-event:hover .ec-resizer.ec-start::after { top: 0; right: 8px; }
.ec-event:hover .ec-resizer:not(.ec-start)::after { bottom: 0; left: 8px; }
/* Kacheln sind fokussierbar (ec-draggable, tabindex=0) — ohne eigene Regel zeigt der Browser dafür
   seinen kräftigen blauen Standard-Fokusring (in Chrome nur bei Tastatur-Fokus, in Firefox/Edge oft
   schon bei jedem Mausklick, siehe Nutzer-Screenshot: fiel besonders bei der schmalen "+N"-Spalte
   auf). Eigener, dezenter Ring in der App-Primärfarbe statt des harten Browser-Blaus — bleibt für
   Tastaturnutzung sichtbar, drängt sich aber nicht mehr auf. */
.ec-event:focus { outline: 2px solid rgba(43,95,138,.4); outline-offset: -2px; }
.ec-day.ec-today { background: var(--ec-today-bg-color); }
/* Jetzt-Linie: Die Bibliothek zeichnet pro Mitarbeiter-Spalte eine eigene, nur spaltenbreite
   (200px) Linie als normales Rasterelement — sichtbar ist ohnehin nur eine davon (Rest per
   ec-hidden ausgeblendet), und genau diese eine kurze Linie verschwindet vollständig, sobald in
   ihrer Spalte an der aktuellen Uhrzeit eine Aufgabe liegt. Deshalb bibliothekseigene Darstellung
   unsichtbar schalten (visibility statt display, sonst verschiebt sich das CSS-Grid) und durch
   eine selbst gebaute, durchgehende Linie über die volle Rasterbreite ersetzen (siehe .kal-jetzt-*
   weiter unten, Positionierung per JS in app.js aus dem hier nur versteckten Original-Element
   übernommen — keine eigene Zeit→Pixel-Umrechnung nötig). */
.ec-now-indicator { visibility: hidden; }
/* Durchgehende Linie über die volle Rasterbreite (ab der Zeitspalte), immer über den Kacheln,
   blockiert aber keine Klicks. top wird per JS gesetzt. */
.kal-jetzt-linie { position: absolute; left: 76px; right: 0; height: 1px; background: var(--primary);
  z-index: 25; pointer-events: none; }
/* Äußere Zeile nur für die vertikale Position (kein eigenes Icon/Höhe), das Etikett selbst sitzt
   sticky links in der Zeitspalte, damit es beim waagerechten Scrollen sichtbar bleibt — genau
   dort, wo der Nutzer die aktuelle Uhrzeit erwartet, statt frei über dem Raster zu schweben.
   Der runde Punkt hängt bewusst am (sticky positionierten) Etikett, NICHT mehr an .kal-jetzt-linie
   selbst: die Linie ist Teil des scrollenden Inhalts von .ec-main und verschwindet beim
   Horizontal-Scrollen zu einem anderen Mitarbeiter irgendwann aus dem Sichtbereich — der Punkt saß
   bisher als ::before AUF der Linie und verschwand dadurch mit (live vom Nutzer gemeldet). Das
   Etikett dagegen bleibt dank position:sticky immer sichtbar, der Punkt jetzt also auch. */
.kal-jetzt-label-zeile { position: absolute; left: 0; right: 0; height: 0; pointer-events: none; z-index: 26; }
.kal-jetzt-label { position: sticky; left: 6px; top: -9px; display: inline-flex; align-items: center; gap: 5px;
  pointer-events: auto; white-space: nowrap; font-size: 12px; font-weight: 600; color: #fff;
  background: var(--primary); padding: 2px 5px; border-radius: 3px; box-shadow: 0 0 0 2px #fff; }
.kal-jetzt-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; flex-shrink: 0; }

/* Aufbau eines Termin-Chips — Maße aus der Referenz: Titel 12 px/700, Zeit 10 px/700.
   Zeit-Zeile bewusst etwas kräftiger als in der Referenz (11px, volle Deckkraft, leichtes
   Badge) und direkt hinter dem Titel statt ganz unten platziert — sonst ist sie bei
   schmalen/kurzen Kacheln (mehrere Termine nebeneinander) das Erste, was verschwindet,
   obwohl sie am dringendsten gebraucht wird. */
.kal-chip { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; overflow: hidden;
  position: relative; z-index: 1; color: #000; }
/* Sprung aus der Suchleiste (#/kalender/aufgabe-<id>): kurzer Puls-Rahmen statt Farbwechsel,
   damit die eigentliche Aufgaben-Farbe erkennbar bleibt. */
.kal-chip.kal-hervorgehoben { animation: kal-puls 1s ease-in-out 2; z-index: 5; }
@keyframes kal-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,143,0,.9); }
  50% { box-shadow: 0 0 0 4px rgba(255,143,0,.9); }
}
/* Zeilen dürfen nicht gestaucht werden — bei kurzen Terminen wird lieber abgeschnitten */
.kal-chip > * { flex-shrink: 0; }
/* Original dimmt/durchstreicht eine erledigte Kachel NICHT (live geprüft: opacity:1,
   text-decoration:none) — einziges Erledigt-Signal ist die orange Füllung des Häkchens
   (.kal-haken.erledigt). Frühere eigene Zutat (opacity .6 + Durchstreichen) entfernt. */
.kal-chip b { font-weight: 700; font-size: 12px; display: flex; align-items: center; gap: 4px; }
.kal-chip b > .icon { color: #666; }
/* Titeltext kürzt mit "…" statt frei über die Kachel hinauszulaufen (allgemein nützlich,
   unabhängig vom "+N"-Feld — siehe .kal-mehr-feld/.kal-schmal unten).
   min-width:0 ist hier der entscheidende Teil: Flex-Kinder haben sonst min-width:auto und würden
   trotz overflow:hidden nicht unter ihre Inhaltsbreite schrumpfen (klassische Flexbox-Falle). */
.kal-titel-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kal-chip b svg { flex-shrink: 0; }
/* Häkchen sitzt links vor dem Titel (wie in der Referenz), nicht mehr absolut oben rechts.
   Maße/Radius/Randfarbe wie im Original gemessen (15x15, Radius 4px, Rand rgb(179,181,183),
   unerledigt ohne Füllung); erledigt = komplett orange gefüllt (exakt --primary, siehe unten). */
.kal-haken { width: 15px; height: 15px; flex-shrink: 0; border: 1px solid rgb(179,181,183); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; }
.kal-haken:hover { background: rgba(255,255,255,.9); }
.kal-haken.erledigt { background: var(--primary); border-color: var(--primary); color: #fff; }
.kal-zeile { font-size: 12px; font-weight: 500; opacity: .85; display: flex; align-items: center; gap: 3px; white-space: nowrap; overflow: hidden; }
/* Nur auf der Kachel selbst (nicht im "+N"-Popover, das ist eine eigene, separat vermessene
   Karten-Optik): Original rendert diese Zeile als <small> (12px * 0.8333 Browser-Standard =
   9.6px), fett, volle Deckkraft (per getComputedStyle bestätigt) — nicht wie zuvor angenommen
   dezent/grau. */
.kal-chip .kal-zeile { font-size: 9.6px; font-weight: 700; opacity: 1; }
.kal-zeit { font-size: 10px; font-weight: 700; color: #666; display: inline-block; width: fit-content; }
.kal-abw { font-size: 11px; font-weight: 600; opacity: .8; padding: 2px 5px; }
/* "+N"-Feld für Termine, die aus Platzgründen nicht mehr einzeln passen (siehe
   kalUeberlappungenGruppieren/kalMehrFelderZeichnen in app.js). Live im Original nachgemessen:
   dort bekommt die GANZE Spalte bei Überlauf einen ~24px schmaleren Container (nicht nur ein
   einzelnes Überlauf-Band) — eine allein stehende Kachel füllt den reservierten Bereich dann
   komplett aus, keine Lücke. Nachgebaut über --ec-event-col-gap: die Bibliothek berechnet Breite
   UND Position jeder Kachel aus `calc((100% - gap) / N * …)`, ein größerer Gap reserviert also
   spaltenweit einen Streifen rechts, ohne dass wir N oder den Kachel-Index selbst kennen müssen.
   (Basis-Gap 3px + 20px Streifen = 23px.) Frühere Versuche sind daran gescheitert, dass sie einen
   echten "+N"-Termin erzeugt haben — der zählte für die Bibliothek als weiterer Überlapper mit und
   blähte N auf, bzw. verschoben nur einzelne markierte Kacheln per !important und ließen
   unmarkierte Nachbarn auf der alten, vollen Breite stehen (echte Kollisionen). */
.kal-schmal { --ec-event-col-gap: 23px; }
/* "+N"-Feld selbst ist KEIN Termin mehr, sondern ein frei positioniertes Overlay (siehe
   kalMehrFelderZeichnen, analog zur bestehenden Jetzt-Linie) — klein, grau, zurückhaltend wie im
   Original (nicht dunkel/fett wie ein Warn-Badge). Klick öffnet weiterhin kalMehrPopover.
   KEIN hoher z-index: die sticky Kopfzeile (.ec-header) liegt bei z-index:2, die sticky Zeitspalte
   (.ec-sidebar, dort auch das "Ganztägig"-Etikett) bei z-index:1 — ein höherer Wert hier (vorher
   irrtümlich 4) lässt das Feld beim Scrollen ÜBER beide hinwegrutschen statt sich wie echte
   Termin-Kacheln (z-index 1–2) korrekt dahinter zu verstecken. Live beobachteter Bug: das Feld
   "durchbrach" beim vertikalen Scrollen die Ganztägig-Zeile und verdeckte beim horizontalen
   Scrollen das sticky "Ganztägig"-Etikett. Kein eigener Wert nötig (auto genügt, steht dank
   Anhänge-Reihenfolge in kalMehrFelderZeichnen ohnehin über den echten Kacheln). */
.kal-mehr-feld { position: absolute; width: 20px; display: flex; align-items: center; justify-content: center;
  background: #e4e4e4; color: #666; font-size: 10px; font-weight: 700; cursor: pointer; border-radius: 3px; }
/* "+N weitere"-Popover (siehe kalMehrPopover in app.js): kleine, am Badge verankerte Karte statt
   eines Vollbild-Dialogs — 1:1 wie in der Referenz-App. Der Hintergrund ist bewusst transparent
   (nur zum Schließen bei Klick daneben), kein abgedunkeltes Vollbild-Overlay. */
.kal-mehr-popover-bg { position: fixed; inset: 0; z-index: 900; }
.kal-mehr-popover { position: fixed; width: 280px; max-height: 70vh; overflow-y: auto;
  background: #fff; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,.22); padding: 6px; }
.kal-mehr-karte { border-left: 3px solid var(--primary); border-radius: 4px; background: var(--bg, #f7f7f7);
  padding: 8px 10px; cursor: pointer; }
.kal-mehr-karte:hover { filter: brightness(.98); }
.kal-mehr-karte + .kal-mehr-karte { margin-top: 6px; }
.kal-mehr-kopf { display: flex; align-items: flex-start; gap: 6px; }
.kal-mehr-kopf b { font-size: 13px; font-weight: 700; line-height: 1.3; }
.kal-mehr-kopf .kal-haken { margin-top: 1px; }
.kal-mehr-karte .kal-mehr-zeit { display: block; font-size: 11px; color: #666; margin: 3px 0 0 21px; }
.kal-mehr-karte .kal-zeile { margin: 3px 0 0 21px; color: var(--text); }
.kal-mehr-karte .kal-mehr-erledigt-info { color: var(--primary); }
.kal-mehr-namen { font-size: 11px; color: var(--muted); margin: 5px 0 0 21px; }
/* Vorschau-Rechteck beim Ziehen einer Aufgabe aus dem Popover (siehe kalMehrDragStarten) — folgt
   der Maus, zeigt Zielspalte/-zeit über die Position, kein eigener Klick-/Hover-Zustand nötig. */
.kal-drag-vorschau { position: fixed; z-index: 950; opacity: .55; border-radius: 3px; color: #fff;
  font-size: 11px; font-weight: 600; padding: 2px 4px; overflow: hidden; pointer-events: none;
  box-shadow: 0 0 0 2px #fff; }

.team-kalender { display: flex; flex-direction: column; gap: 12px; }
.team-zeile { display: flex; gap: 12px; align-items: flex-start; }
.team-name { width: 150px; flex-shrink: 0; font-weight: 600; font-size: 13.5px; padding-top: 8px; display: flex; align-items: center; gap: 6px; }
.team-woche { flex: 1; min-width: 0; }
.team-woche .kal-woche { overflow-x: auto; }
.team-woche .kal-tag { min-height: 70px; padding: 6px; }

/* Abfuhrpläne-Matrix */
.abfuhr-matrix { border-collapse: collapse; width: 100%; }
.abfuhr-matrix th, .abfuhr-matrix td { border: 1px solid var(--rand); padding: 6px; font-size: 12px; vertical-align: top; text-align: left; }
.abfuhr-matrix thead th { background: #faf8f4; text-align: center; font-size: 12px; }
.abfuhr-matrix thead th.heute { color: var(--primary-dunkel); }
.abfuhr-matrix .raus-kopf, .abfuhr-matrix .rein-kopf { font-weight: 400; font-size: 11px; }
.abfuhr-matrix .sticky-col { position: sticky; left: 0; background: #fff; z-index: 2; min-width: 190px; }
.abfuhr-matrix thead .sticky-col { background: #faf8f4; z-index: 3; }
.abfuhr-matrix .abfuhr-objekt-link { color: #ff8f00; font-weight: 600; text-decoration: none; }
.abfuhr-matrix .abfuhr-objekt-link:hover { text-decoration: underline; }

/* Stunden-Raster (Aufgaben-Kalender) */
.stunden-kalender { display: flex; border: 1px solid var(--rand); border-radius: 10px; background: #fff; overflow: auto; max-height: 620px; }
.stunden-scroll { flex: 1; min-width: 0; overflow-x: auto; }
.stunden-gutter { width: 54px; flex-shrink: 0; border-right: 1px solid var(--rand); background: #faf8f4; }
.stunden-gutter .ganztag-label { min-height: 34px; border-bottom: 2px solid var(--rand); display: flex; align-items: center; justify-content: center; font-size: 10.5px; color: var(--muted); writing-mode: vertical-rl; text-orientation: mixed; padding: 4px 0; }
.stunden-gutter-raster { position: relative; }
.stunde-label { font-size: 11px; color: var(--muted); text-align: right; padding-right: 6px; box-sizing: border-box; transform: translateY(-7px); }

.team-bloecke { display: flex; }
.team-block { flex-shrink: 0; }
.team-block-kopf { padding: 6px 10px; font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--rand); background: #faf8f4; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.stunden-tage { display: flex; }
.stunden-tag-spalte { width: 150px; flex-shrink: 0; border-right: 1px solid var(--rand); }
.stunden-tag-spalte:last-child { border-right: none; }
.stunden-tag-kopf { padding: 8px 4px; text-align: center; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--rand); background: #faf8f4; white-space: nowrap; }
.stunden-tag-kopf.heute { color: var(--primary-dunkel); }

.ganztag-zeile { border-bottom: 2px solid var(--rand); padding: 3px; min-height: 34px; }
.ganztag-eintrag { border-radius: 5px; padding: 3px 6px; font-size: 10.5px; color: #fff; margin-bottom: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ganztag-eintrag.erledigt { opacity: .5; text-decoration: line-through; }

.stunden-raster { position: relative; background-image: repeating-linear-gradient(to bottom, var(--rand) 0, var(--rand) 1px, transparent 1px, transparent 44px); }
.abwesenheit-hintergrund { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(192,57,43,.13) 0, rgba(192,57,43,.13) 6px, rgba(192,57,43,.05) 6px, rgba(192,57,43,.05) 12px);
  border-left: 3px solid var(--rot); }
.abwesenheit-label { position: absolute; top: 4px; left: 6px; font-size: 10px; font-weight: 700; color: var(--rot); z-index: 1; pointer-events: none; }
.stunden-jetzt-linie { position: absolute; left: 0; right: 0; height: 2px; background: #e8871e; z-index: 6; }
.stunden-jetzt-linie::before { content: ''; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #e8871e; }

.stunden-termin { position: absolute; border-radius: 6px; padding: 3px 5px; font-size: 10.5px; line-height: 1.35; color: #fff; overflow: hidden;
  cursor: grab; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.35); }
.stunden-termin b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stunden-termin.erledigt { opacity: .5; text-decoration: line-through; }
.stunden-termin .ort, .stunden-termin .zeit { display: block; font-size: 9.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stunden-raster.drop-ziel { outline: 2px dashed var(--primary); outline-offset: -2px; }

/* Kalender: Monatsansicht */
.monat-kopfzeile { display: grid; grid-template-columns: repeat(7, 1fr); }
.monat-kopfzeile div { text-align: center; font-size: 11px; color: var(--muted); padding: 6px 0; }
.monat-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--rand); border: 1px solid var(--rand); border-radius: 10px; overflow: hidden; }
.monat-tag { background: #fff; min-height: 108px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.monat-tag:hover { background: #faf8f4; }
.monat-tag.ausserhalb { background: #faf8f4; }
.monat-tag.ausserhalb .monat-tag-nr { color: var(--muted); }
.monat-tag-nr { font-size: 12px; font-weight: 600; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.monat-tag.heute .monat-tag-nr { background: var(--primary); color: #fff; }
.monat-chip { font-size: 10.5px; padding: 2px 5px; border-radius: 4px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.monat-chip.erledigt { opacity: .5; text-decoration: line-through; }
.monat-mehr { font-size: 10.5px; color: var(--muted); cursor: pointer; }
.monat-tag.drop-ziel { outline: 2px dashed var(--primary); outline-offset: -2px; }

/* Kalender: Timeline-Ansicht */
.timeline-tabelle { width: 100%; border-collapse: collapse; }
.timeline-tabelle th, .timeline-tabelle td { border: 1px solid var(--rand); padding: 6px; vertical-align: top; font-size: 12px; min-width: 120px; }
.timeline-tabelle td.drop-ziel { outline: 2px dashed var(--primary); outline-offset: -2px; }
.timeline-chip { display: block; border-radius: 4px; padding: 2px 6px; margin-bottom: 3px; color: #fff; font-size: 10.5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-chip.erledigt { opacity: .5; text-decoration: line-through; }

/* Kalender: Backlog-Seitenpanel */
/* Backlog steht links neben dem Kalender und schiebt ihn zur Seite — wie in der Referenz */
.kal-flaeche { display: flex; gap: 14px; align-items: flex-start; }
.kal-haupt { flex: 1 1 0; min-width: 0; }
.backlog-panel { display: none; flex: 0 0 268px; width: 268px; background: #fff; border: 1px solid var(--rand);
  border-radius: 8px; padding: 10px; max-height: calc(100vh - 130px); overflow-y: auto; }
.kal-flaeche.mit-backlog .backlog-panel { display: block; }
.backlog-aktualisieren { margin-bottom: 4px; }
.backlog-kopf { display: flex; align-items: center; gap: 6px; color: var(--muted); margin-bottom: 8px; }
.backlog-kopf h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
/* Karte: farbige BACKLOG-Marke links, Text rechts */
.backlog-chip { display: flex; align-items: stretch; border: 1px solid var(--rand); border-radius: 4px;
  margin-bottom: 6px; cursor: grab; font-size: 12px; overflow: hidden; background: #fff; position: relative; }
.backlog-chip:hover { box-shadow: 0 1px 6px rgba(0,0,0,.12); }
.backlog-marke { flex: 0 0 78px; color: #fff; font-weight: 700; font-size: 10px; letter-spacing: .4px;
  padding: 6px 6px; display: flex; flex-direction: column; gap: 2px; }
.backlog-marke small { font-weight: 400; letter-spacing: 0; opacity: .85; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.backlog-text { flex: 1 1 auto; min-width: 0; padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; }
.backlog-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backlog-text small { color: var(--muted); display: flex; align-items: center; gap: 5px; }
.backlog-text .avatar { width: 17px; height: 17px; font-size: 8px; }
.backlog-knoepfe { display: none; position: absolute; right: 4px; bottom: 4px; gap: 4px; }
.backlog-chip:hover .backlog-knoepfe { display: flex; }
/* Schwebende Kopie beim Ziehen ins Kalenderraster */
.backlog-geist { position: fixed; z-index: 200; width: 240px; pointer-events: none; opacity: .85;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); }

/* Mitarbeiter-Spaltenkopf mit Farb-Avatar */
.kal-res { display: inline-flex; align-items: center; gap: 6px; }
.kal-res .avatar { width: 20px; height: 20px; font-size: 9px; }

/* Globale Kalender-Einstellungen / Benachrichtigungen */
.kal-global { padding: 20px 22px 18px; }
.kal-global h3 { margin: 0 0 10px; }
.kg-warnung { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin: 0 0 16px; }
.kg-hinweis { font-size: 11.5px; color: var(--muted); margin: 4px 0 14px; }
.kg-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.kal-global .feld { display: block; margin-bottom: 6px; }
.kal-global .feld > span:first-child { display: block; font-size: 13.5px; color: #53535f; margin-bottom: 5px; }
.kal-global select[multiple] { width: 100%; }
.kg-fuss { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.kg-reset { border: none; background: none; color: #de4436; font-family: inherit; font-size: 14px; cursor: pointer; padding: 0; }

/* Leichtgewichtiger Rich-Text-Editor */
.richtext-toolbar { display: flex; flex-wrap: wrap; gap: 2px; border: 1px solid var(--rand); border-bottom: none; border-radius: 8px 8px 0 0; background: #faf8f4; padding: 4px; }
.richtext-toolbar button { border: 1px solid transparent; background: none; min-width: 28px; height: 28px; border-radius: 5px; cursor: pointer; font-size: 13px; color: var(--text); }
.richtext-toolbar button:hover { background: #fff; border-color: var(--rand); }
.richtext-editor { border: 1px solid var(--rand); border-radius: 0 0 8px 8px; padding: 10px 12px; min-height: 120px; background: #fff; font-size: 14px; line-height: 1.5; }
.richtext-editor:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.richtext-editor h1 { font-size: 20px; margin: 8px 0; }
.richtext-editor h2 { font-size: 16px; margin: 6px 0; }
.richtext-editor ul, .richtext-editor ol { margin: 6px 0; padding-left: 22px; }
.richtext-inhalt h1 { font-size: 20px; margin: 8px 0; }
.richtext-inhalt h2 { font-size: 16px; margin: 6px 0; }
.richtext-inhalt ul, .richtext-inhalt ol { margin: 6px 0; padding-left: 22px; }

/* Abwesenheiten Gantt */
.gantt { overflow-x: auto; }
.gantt table { border-collapse: collapse; }
.gantt th, .gantt td { border: 1px solid var(--rand); padding: 3px; font-size: 11px; text-align: center; min-width: 26px; }
.gantt .name-zelle { text-align: left; padding: 6px 10px; min-width: 140px; font-size: 13px; white-space: nowrap; }
.gantt .abw-Urlaub { background: #aed6f1; }
.gantt .abw-Krank { background: #f5b7b1; }
.gantt .abw-Sonstiges { background: #d7bde2; }
.gantt .wochenende { background: #f4f1ec; }

/* Karte */
#objekt-map, #form-map { height: 420px; border-radius: 4px; }
/* Die Karten-Seite nutzt die Fensterhoehe statt fester 420px — im Original ist die Karte
   ebenfalls fast so hoch wie das Fenster. min-height haelt sie auf kleinen Schirmen brauchbar. */
#karte-map { height: calc(100vh - 230px); min-height: 420px; }
#objekt-map { height: 240px; }
#form-map { height: 260px; }

/* Signatur */
#sig-canvas { border: 1px dashed var(--muted); border-radius: 8px; touch-action: none; background: #fff; width: 100%; height: 160px; }

/* Zeiterfassung */
.saldo-pos { color: var(--gruen); font-weight: 600; }
.saldo-neg { color: var(--rot); font-weight: 600; }
.fortschritt { height: 4px; background: #eee; border-radius: 2px; overflow: hidden; margin-top: 4px; }
.fortschritt > div { height: 100%; background: var(--gruen); }
.ze-festschreib-banner { display: flex; align-items: center; gap: 12px; background: var(--primary-tint); border: 1px solid var(--primary); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: 13.5px; color: var(--text); }
.ze-festschreib-banner .icon { color: var(--primary); flex-shrink: 0; }
.ze-festschreib-banner button { margin-left: auto; flex-shrink: 0; }
.ze-tage-tabelle .ze-caret { width: 20px; padding-right: 0; color: var(--muted); }
.ze-tage-tabelle .ze-caret .icon { transition: transform .15s; }
.ze-tage-tabelle .ze-caret.offen .icon { transform: rotate(90deg); }
.ze-det-zeile > td { background: #faf9f7; padding: 14px 16px; border-bottom: 1px solid var(--rand); }
.ze-detail-tabelle { background: #fff; border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; }
.ze-detail-tabelle th, .ze-detail-tabelle td { font-size: 13px; padding: 8px 10px; }

.filterzeile { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
/* Haken und Radios ausnehmen: sonst bekommt auch die Checkbox 150px Mindestbreite und
   steht weit von ihrer Beschriftung entfernt (fiel auf der Karten-Seite auf, betraf aber
   jede Filterzeile mit Haken). */
.filterzeile input:not([type=checkbox]):not([type=radio]), .filterzeile select { width: auto; min-width: 150px; }
.leer { color: var(--muted); text-align: center; padding: 30px; }
.foto-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; }
.detail-panel { position: sticky; top: 0; }
.notif { padding: 10px 12px; border-radius: 8px; background: #eef4f9; margin-bottom: 8px; }
.notif .zeit { font-size: 11.5px; color: var(--muted); }
.notif.gelesen { background: #f7f7f7; opacity: .75; }

/* ---------- Abwesenheiten-Plan ----------
   Maße aus der Referenz ausgemessen: Namensspalte 192 px (bei uns 220 px für längere Namen),
   Tagesspalte mindestens 72 px, Zeilenhöhe 52 px, Kopfzeilen 22/22/26 px, Wochenende #f1f1f1. */
.abw-scroll { overflow: auto; }
.abw-raster { display: grid; min-width: max-content; font-size: 14px; }
.abw-raster > * { border-right: 1px solid var(--rand); border-bottom: 1px solid var(--rand); min-width: 0; }
.abw-ecke { grid-row: 1 / span 3; grid-column: 1; position: sticky; left: 0; z-index: 4; background: #fff; }
.abw-monat, .abw-woche { display: flex; align-items: center; padding: 0 8px; white-space: nowrap; background: #fff; }
.abw-monat { font-weight: 700; }
.abw-tag { display: flex; align-items: center; padding: 0 8px; white-space: nowrap; background: #fff; }
.abw-tag.frei, .abw-zelle.frei { background: #f1f1f1; }
.abw-heute { background: var(--primary); color: #fff; border-radius: 3px; padding: 1px 8px; }
.abw-name { position: sticky; left: 0; z-index: 3; background: #fff; grid-column: 1;
  display: flex; align-items: center; gap: 10px; padding: 0 10px; overflow: hidden; }
.abw-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abw-zelle { background: #fff; cursor: cell; }
.abw-zelle.gezogen { background: #ffe9c7; }
/* Balken liegen über den Tageszellen im selben Rasterfeld */
.abw-balken { z-index: 2; align-self: center; margin: 0 2px; height: 26px; line-height: 26px;
  padding: 0 8px; border: none; border-radius: 3px; cursor: pointer; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; font-size: 13px; font-weight: 500;
  background: color-mix(in srgb, var(--f) 22%, #fff); color: var(--f); }
.abw-balken.offen { background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--f) 22%, #fff) 0 6px, color-mix(in srgb, var(--f) 10%, #fff) 6px 12px);
  box-shadow: inset 0 0 0 1px var(--f); }
.abw-antragskopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.abw-antragskopf h3 { margin: 0; }

/* Dialog „Abwesenheit" — 500 px breit wie im Original */
.abw-dlg { position: relative; padding: 22px 24px 24px; }
.abw-dlg .feld { display: block; margin-bottom: 16px; }
.abw-dlg .feld > span:first-child { display: block; font-size: 14px; font-weight: 500; color: #53535f; margin-bottom: 6px; }
.abw-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: none; background: none;
  color: #53535f; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.abw-x:hover { background: rgba(0,0,0,.05); }
.abw-zeile2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.abw-ma { display: flex; align-items: center; gap: 8px; height: 34px; }
.abw-dlg .checkzeile { white-space: nowrap; height: 34px; }
.abw-person { display: inline-flex; align-items: center; gap: 8px; }
.abw-anspruch { display: inline-block; font-size: 12px; color: #53535f; margin-right: 12px; }
.abw-datum { display: flex; align-items: center; gap: 6px; }
.abw-datum input { flex: 1 1 0; min-width: 0; }
.abw-status { display: inline-flex; }
.abw-status button { height: 40px; padding: 0 20px; font-family: inherit; font-size: 14px; background: #fff;
  border: 1.25px solid #edf2f9; margin-left: -1.25px; cursor: pointer; color: #53535f; display: inline-flex;
  align-items: center; gap: 6px; }
.abw-status button:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
.abw-status button:last-child { border-radius: 0 4px 4px 0; }
.abw-status button.aktiv { border-color: var(--primary); z-index: 1; }
.abw-status button.gruen.aktiv { color: #1d8348; border-color: #1d8348; }
.abw-status button.orange.aktiv { color: var(--primary); }
.abw-status button.rot.aktiv { color: #a10004; border-color: #a10004; }
.abw-status button i { font-style: normal; }
.abw-hinweis { font-size: 13px; color: var(--muted); }
.abw-dlg textarea { width: 100%; min-height: 54px; resize: vertical; }
.abw-speichern { width: 100%; height: 40px; border: none; border-radius: 4px; background: var(--primary);
  color: #fff; font-family: inherit; font-size: 14px; cursor: pointer; }
.abw-loeschen { width: 100%; height: 36px; margin-top: 10px; border: none; background: none;
  color: #de4436; font-family: inherit; font-size: 14px; cursor: pointer; }

@media (max-width: 900px) {
  #sidebar { position: fixed; z-index: 60; height: 100%; transform: translateX(-100%); transition: transform .2s; }
  #sidebar.offen { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  #burger { display: block; }
  .grid2, .grid2eq, .form-grid { grid-template-columns: 1fr; }
  .tickets-layout { flex-direction: column; }
  .tickets-panel { width: auto; }
  .kal-woche { grid-template-columns: 1fr; }
  .abw-zeile2 { grid-template-columns: 1fr; }
  .abw-status { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  #content { padding: 14px; }
}

/* Stempeluhr in der Topbar: nur Uhr-Icon + Zeit, die Aktionen liegen im Popover darunter
   (Aufbau und Maße am Original abgenommen: Auslöser 38px hoch, Popover 400px breit). */
.stempeluhr { position: relative; display: flex; align-items: center; }
.uhr-ausloeser { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 5px 15px;
  border: 0; border-radius: 4px; cursor: pointer; background: var(--primary-tint); color: var(--primary);
  font-size: 18px; font-family: inherit; font-variant-numeric: tabular-nums; }
.uhr-ausloeser:hover { background: rgba(255,143,0,.18); }
.uhr-ausloeser.laeuft { box-shadow: inset 0 0 0 1px var(--primary); }
.uhr-ausloeser.pruefung { background: #fdecea; color: var(--rot); box-shadow: inset 0 0 0 1px var(--rot); }
.uhr-popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 400px; max-width: calc(100vw - 24px);
  background: #fff; border-radius: 4px; padding: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.uhr-werte { display: flex; }
.uhr-wert-block { flex: 1; text-align: center; padding: 8px 4px; }
.uhr-wert-block + .uhr-wert-block { border-left: 1px solid var(--rand); }
.uhr-label { display: block; font-size: 14px; font-weight: 500; color: #2a2a2a; margin-bottom: 4px; }
.uhr-wert-block b { display: inline-flex; align-items: center; gap: 6px; font-size: 19px; color: #2a2a2a; font-variant-numeric: tabular-nums; }
.uhr-wert-block .icon { color: var(--muted); }
/* Eine breite Hauptaktion als Pille, die selteneren Aktionen kompakt nebeneinander darunter.
   Bewusst eigene Regeln statt .btn.ghost — das ist rahmen- und flächenlos und liess die
   Zweitaktionen wie blossen Text aussehen. */
.uhr-haupt-btn { display: block; width: 100%; margin-top: 8px; padding: 9px 20px; border-radius: 40px;
  border: 1px solid var(--primary); background: var(--primary); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.uhr-haupt-btn:hover { background: var(--primary-dunkel); border-color: var(--primary-dunkel); }
.uhr-neben { display: flex; gap: 8px; margin-top: 8px; }
.uhr-neben-btn { flex: 1; padding: 8px 6px; border-radius: 8px; border: 1px solid var(--rand);
  background: #fff; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.uhr-neben-btn:hover { border-color: var(--primary); color: var(--primary-dunkel); }
.uhr-warnung { display: flex; align-items: flex-start; gap: 8px; background: #fdecea; color: var(--rot);
  border-radius: 4px; padding: 8px 10px; font-size: 12.5px; line-height: 1.4; margin-bottom: 6px; }

/* Zeiterfassung — Übersicht aller Mitarbeiter */
.ze-gruppenkopf th { text-align: center; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--rand); }
.ze-gruppenkopf th + th { border-left: 1px solid var(--rand); }
/* Namensspalte: Farbstreifen, Kürzel und Name mit Luft dazwischen. Das globale .avatar trägt ein
   negatives margin-right für die überlappenden Avatar-Stapel bei Tickets — hier wird es aufgehoben,
   sonst klebt der Name direkt am Kürzel. */
.ze-name { display: flex; align-items: center; gap: 14px; }
.ze-name .avatar { margin-right: 0; width: 34px; height: 34px; font-size: 12.5px; }
.ze-name b { font-size: 14.5px; letter-spacing: .1px; }
.ze-farbstreifen { flex-shrink: 0; width: 4px; height: 34px; border-radius: 3px; }
.ze-uebersicht td { padding-top: 14px; padding-bottom: 14px; }
.ze-uebersicht th:first-child, .ze-uebersicht td:first-child { padding-left: 0; }
.ze-zeitkonto { font-variant-numeric: tabular-nums; }
.ze-laedt { color: var(--muted); }
.ze-aktionen { white-space: nowrap; }
.mitte { text-align: center; }
.tag.warnung { background: #fdf3e3; color: #c96f0a; }
.tag.verfallen { background: #fdecea; color: var(--rot); text-decoration: line-through; }
.btn-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.btn-link:hover { text-decoration: underline; }

/* Zeiterfassung — Werkzeugleiste der Stempelzeiten */
.ze-werkzeugleiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ze-userwahl { width: auto; min-width: 180px; }
.ze-ansicht { display: flex; align-items: center; gap: 0; }
.ze-ansicht-label { color: var(--muted); font-size: 13px; margin-right: 10px; }
.ze-ansicht-btn { height: 32px; padding: 0 16px; border: 1px solid var(--rand); background: #fff; color: var(--text);
  font: inherit; font-size: 13.5px; cursor: pointer; }
.ze-ansicht-btn:first-of-type { border-radius: 4px 0 0 4px; }
.ze-ansicht-btn:last-of-type { border-radius: 0 4px 4px 0; border-left: 0; }
.ze-ansicht-btn.aktiv { color: var(--primary); border-color: var(--primary); position: relative; z-index: 1; }
.ze-monat-anzeige { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 13.5px; color: var(--muted); }
.ze-export { position: relative; }
.ze-zeitkonto-kopf { margin-left: auto; font-weight: 700; font-size: 14px; white-space: nowrap; }

/* Zeiterfassung — Monatskarten (im Original 284x95 mit Saldo und Fortschrittsbalken) */
.ze-monatskarten { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; }
.ze-monatskarte { flex: 0 0 auto; width: 200px; text-align: left; background: var(--karte); border: 1px solid var(--rand);
  border-radius: 4px; padding: 10px; cursor: pointer; font: inherit; color: inherit; }
.ze-monatskarte:hover { border-color: var(--primary); }
.ze-monatskarte.aktiv { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.ze-monatskarte.zukunft { opacity: .55; cursor: default; }
.ze-mk-name { display: block; font-size: 14px; margin-bottom: 6px; }
.ze-mk-wert { display: block; font-size: 13.5px; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.ze-mk-wert .icon { color: var(--muted); vertical-align: -2px; }

/* Fortschrittsbalken (Spur #b7b7b7, Füllung orange bzw. türkis wenn das Soll erreicht ist) */
.ze-balken { height: 4px; border-radius: 4px; background: #b7b7b7; overflow: hidden; margin-top: 4px; }
.ze-balken-fuellung { height: 100%; background: var(--primary); border-radius: 4px; }
.ze-balken-fuellung.erfuellt { background: #00c9a7; }

/* Zeiterfassung — Zeitkonto-Korrekturen (aufklappbar über der Tagestabelle) */
.ze-korrekturen { padding: 0; margin-bottom: 14px; }
.ze-korr-kopf { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; background: none;
  border: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.ze-korr-kopf .icon { transition: transform .15s; color: var(--muted); }
.ze-korr-kopf.offen .icon { transform: rotate(90deg); }
.ze-korr-inhalt { padding: 0 16px 16px; }

/* Zeiterfassung — Tages- und Monatstabelle */
.ze-tage-tabelle .ze-heute td, .ze-monats-tabelle .ze-heute td { background: #fde1e1; }
.ze-tage-tabelle .ze-heute td:nth-child(2) { font-weight: 700; }
.ze-monats-tabelle .ze-monat-gesperrt td { background: #f4f4f6; }
.ze-summe { min-width: 150px; font-variant-numeric: tabular-nums; }
.ze-summe small { margin-left: 6px; font-size: 11.5px; }
.ze-diff-null { color: #c2c2c2; }
.ze-gesperrt-hinweis { display: flex; align-items: center; gap: 8px; background: #f4f4f6; border: 1px solid var(--rand);
  border-radius: 10px; padding: 10px 16px; margin-bottom: 14px; font-size: 13.5px; color: var(--muted); }

@media (max-width: 900px) {
  .uhr-popover { position: fixed; left: 12px; right: 12px; width: auto; top: 64px; }
  .ze-werkzeugleiste { gap: 8px; }
  .ze-zeitkonto-kopf { margin-left: 0; width: 100%; }
  .ze-monatskarte { width: 165px; }
}

/* Mitarbeiter → Reiter "Zeiterfassung": drei klar getrennte Abschnitte wie im Original,
   Wochentage als Kopfzeile über den Feldern statt Label und Feld in einem 64px-Kästchen. */
/* Kein fester Deckel: der Reiter nutzt die Seitenbreite, die Urlaubstabelle profitiert davon.
   Die Arbeitszeiten-Felder bleiben durch ihre eigene Breite ohnehin kompakt. */
.mt-ze { max-width: 1400px; }
.mt-ze-urlaub { max-width: 900px; }
.mt-ze-titel { margin: 0 0 12px; font-size: 16px; }
.mt-ze-titel:not(:first-child) { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rand); }
.mt-ze-woche { border-collapse: collapse; }
.mt-ze-woche th { padding: 0 10px 6px 0; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: .4px; }
.mt-ze-woche td { padding: 0 10px 0 0; }
.mt-ze-woche input { width: 68px; text-align: center; }
.mt-ze-summe { white-space: nowrap; font-size: 15px; padding-left: 6px !important; }
.mt-ze-schalter { margin-top: 10px; }
.mt-ze-hinweis { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 620px; }
.mt-ze-vorgabe { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.mt-ze-vorgabe input { width: 90px; }
.mt-ze-vorgabe small { color: var(--muted); }
.mt-ze-urlaub input[type=number] { width: 90px; }
.mt-ze-urlaub input[type=date] { width: 165px; }
.mt-ze-urlaub .mt-ua-leer td { color: var(--muted); }

/* Hinweis zur automatischen Pausenanpassung (§4 ArbZG) in der Tagesliste — reine CSS-Hover-Karte,
   kein zusätzliches Tooltip-Framework. */
.ze-pause-hinweis { position: relative; display: inline-flex; margin-left: 5px; color: var(--rot); cursor: help; vertical-align: -2px; }
.ze-hinweis-karte { display: none; position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  z-index: 70; width: 320px; background: #fff; border: 1px solid var(--rand); border-radius: 8px; padding: 12px 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.14); color: var(--text); font-size: 13px; text-align: left; cursor: default; }
.ze-pause-hinweis:hover .ze-hinweis-karte, .ze-pause-hinweis:focus .ze-hinweis-karte,
.ze-pause-hinweis:focus-within .ze-hinweis-karte { display: block; }
.ze-hinweis-karte > b { display: block; margin-bottom: 6px; }
.ze-hinweis-text { display: block; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.ze-hinweis-zeile { display: flex; justify-content: space-between; gap: 20px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.ze-hinweis-zeile.summe { border-top: 1px solid var(--rand); margin-top: 4px; padding-top: 6px; }

@media (max-width: 900px) {
  .mt-ze-woche { display: block; overflow-x: auto; }
  .ze-hinweis-karte { position: fixed; left: 12px; right: 12px; width: auto; transform: none; }
}

/* Freie Arbeitstage im Aufgabenkalender ausgrauen (Schalter je Mitarbeiter im Reiter
   Zeiterfassung). Nur background-color, damit die Rasterlinien der Kalender-Bibliothek
   (background-image) erhalten bleiben. */
.ec-day.kal-freier-tag { background-color: rgba(0,0,0,.045); }
.ec-col-head.kal-freier-tag { background-color: rgba(0,0,0,.045) !important; color: var(--muted); }

/* Zugestandene Zeit im Einstempel-Dialog (Summe der gewaehlten Leistungen) */
.st-summe { margin-top: 14px; padding: 10px 12px; border-radius: 4px; background: var(--primary-tint); font-size: 13.5px; }

/* Kopfzeile des Dialogs "Zeit ueberschritten" */
.begr-kopf { display: flex; flex-wrap: wrap; gap: 18px; background: #fdecea; border-radius: 4px; padding: 12px 14px; margin-bottom: 12px; }
.begr-kopf > div { display: flex; flex-direction: column; }
.begr-kopf span { font-size: 12px; color: var(--muted); }
.begr-kopf b { font-size: 15px; font-variant-numeric: tabular-nums; }


/* Zweispaltiger Seitenaufbau wie im Original: breite Hauptspalte, schmalere Nebenspalte.
   Ersetzt die frueheren festen max-width-Deckel, die die halbe Seite leer liessen. */
.seiten-zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.seiten-zweispaltig > div { min-width: 0; }
@media (max-width: 1100px) { .seiten-zweispaltig { grid-template-columns: 1fr; } }

/* Kartenraster: fuellt die verfuegbare Breite mit Karten statt sie untereinander zu stapeln. */
.karten-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; align-items: start; }
.karten-raster > .card { margin-bottom: 0; }
@media (max-width: 900px) { .karten-raster { grid-template-columns: 1fr; } }
/* In den breiten Spalten duerfen Formularfelder mitwachsen statt bei zwei Spalten zu bleiben. */
.seiten-zweispaltig .form-grid, .karten-raster .form-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Karten-Seite: Karte links ueber die volle Hoehe, Seitenspalte rechts mit Mitarbeitern und Objekten */
.karte-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.karte-seite { display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 230px); overflow: auto; }
.karte-seite .card { margin-bottom: 0; }
.karte-seite h3 { margin: 0 0 10px; font-size: 15px; }
.karte-eintrag { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px;
  border: 0; border-radius: 4px; background: none; font: inherit; color: inherit; cursor: pointer; }
.karte-eintrag:hover { background: #f5f6f9; }
.karte-eintrag span { display: flex; flex-direction: column; min-width: 0; }
.karte-eintrag small { color: var(--muted); font-size: 12px; }
.karte-eintrag b, .karte-eintrag small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karte-eintrag .icon { color: var(--muted); }
@media (max-width: 1100px) {
  .karte-layout { grid-template-columns: 1fr; }
  .karte-seite { max-height: none; }
  #karte-map { height: 60vh; }
}

/* ---------- Objekt-Detailseite ----------
   Infospalte links auf 25 % wie im Original (dort ant-col-6 neben ant-col-18), Reiterbereich
   rechts auf 75 %. Die Nebeninformationen liegen in Ausklappern, damit die Spalte nicht
   länger wird als der Reiterinhalt daneben — vorher war sie 1412 px hoch bei 223 px Inhalt. */
.objekt-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 18px; align-items: start; margin-top: 14px; }
.ausklapp { background: var(--karte, #fff); border: 1px solid #e8e8ee; border-radius: 4px; margin-bottom: 10px; padding: 0 14px; }
.ausklapp > summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 14px; list-style: none; display: flex; align-items: center; gap: 8px; }
.ausklapp > summary::-webkit-details-marker { display: none; }
.ausklapp > summary::before { content: '›'; display: inline-block; transition: transform .15s; font-size: 17px; color: var(--muted); }
.ausklapp[open] > summary::before { transform: rotate(90deg); }
.ausklapp[open] > summary { border-bottom: 1px solid #f0f0f4; }
.ausklapp > *:not(summary) { margin-bottom: 14px; }
.ausklapp > summary + * { margin-top: 12px; }
.anzahl-blase { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 10px; background: #eef1f6; color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; }

/* Kennzahlen über der Zeiten-Tabelle: was pro Woche und pro Einsatz anfällt, plus Erlös je Stunde */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kennzahl { background: #fff; border: 1px solid #e8e8ee; border-radius: 4px; padding: 12px 14px; }
.kennzahl span { display: block; font-size: 12.5px; color: var(--muted); }
.kennzahl b { display: block; font-size: 21px; font-weight: 600; margin-top: 2px; }
.kennzahl small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
/* ---------- Leitfaden „Neues Objekt" ----------
   Eine Zeile je Einrichtungsschritt, in der Reihenfolge, in der sie aufeinander aufbauen.
   Erledigtes tritt zurueck (Haken, blasse Schrift), Offenes traegt seine Nummer und den
   Hinweis, was dort zu tun ist. Der Knopf rechts fuehrt genau dorthin. */
.leitfaden { margin: 14px 0 4px; }
.leitfaden > summary b { font-weight: 600; color: var(--primary); }
.lf-liste { list-style: none; margin: 0; padding: 0; }
.lf-schritt { display: grid; grid-template-columns: 26px 1fr auto; gap: 0 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid #f2f2f6; }
.lf-schritt:last-child { border-bottom: none; }
.lf-nr { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; background: #eef1f6; color: var(--muted); }
.lf-schritt.fertig .lf-nr { background: rgba(39,174,96,.13); color: var(--gruen); }
.lf-schritt.pruefen .lf-nr { background: var(--primary-tint); color: var(--primary-dunkel); }
.lf-schritt.offen .lf-nr { background: var(--primary); color: #fff; }
.lf-text b { font-weight: 600; font-size: 14px; }
.lf-schritt.fertig .lf-text b { font-weight: 500; color: var(--muted); }
.lf-kurz { font-size: 13px; color: var(--muted); }
.lf-schritt.pruefen .lf-kurz { color: var(--primary-dunkel); }
.lf-hinweis { font-size: 12.5px; color: var(--muted); margin-top: 3px; max-width: 74ch; }
.lf-schritt.fertig .lf-knopf { opacity: .45; }
.lf-schritt.fertig:hover .lf-knopf { opacity: 1; }
@media (max-width: 700px) {
  .lf-schritt { grid-template-columns: 26px 1fr; row-gap: 6px; }
  .lf-knopf { grid-column: 2; justify-self: start; }
}
/* Zuordnung einer LV-Gruppe zu einer laufenden Aufgabe. Gruen heisst: die Punkte haben ihren
   Platz. Offen heisst: hier entsteht ein Entwurf, wenn du nichts zuordnest. */
.lv-zuordnung { font-size: 13.5px; padding: 7px 10px; border-radius: 4px; margin: 8px 0 4px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lv-zuordnung.ok { background: rgba(39,174,96,.1); color: #1f6b45; }
.lv-zuordnung.offen { background: var(--primary-tint); color: var(--primary-dunkel); }
.lv-zuordnung select { width: auto; font-size: 13.5px; }
.entwuerfe-anstoss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Aufgaben-Entwuerfe ----------
   Sie stehen am Objekt, aber noch nicht im Kalender. Der gestrichelte Rand sagt: das gilt noch
   nicht. Erst nach dem Bestaetigen wird daraus eine Aufgabe, die der Mitarbeiter sieht. */
.entwuerfe { border-left: none; }
.entwurf-hinweis { font-size: 13.5px; color: var(--muted); margin: -4px 0 12px; }
.entwurf { border: 1px dashed var(--linie-stark, #c0cddb); border-radius: 5px; padding: 11px 13px; margin-bottom: 9px; background: #fcfdfe; }
.entwurf-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.entwurf-kopf b { font-size: 14.8px; }
.entwurf-felder { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.entwurf-felder label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); }
.entwurf-felder select, .entwurf-felder input { width: auto; font-size: 14px; }
.entwurf-felder input[type=time] { width: 104px; }
/* Der Inhalt der Aufgabe steht offen im Entwurf — man soll vor dem Freigeben sehen, was
   drinsteht, ohne erst etwas aufklappen zu muessen. */
.entwurf-inhalt { margin: 0 0 10px; border-top: 1px solid #f0f0f4; }
.entwurf-inhalt > summary { cursor: pointer; padding: 8px 0; font-size: 13px; color: var(--muted); }
.entwurf-inhalt .lv-bereich { margin: 6px 0 10px; }
.entwurf-ersetzt { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px;
  color: var(--primary-dunkel); background: var(--primary-tint); padding: 7px 10px;
  border-radius: 4px; margin-bottom: 10px; }
.entwurf-ersetzt select { width: 100%; font-size: 13.5px; }

/* ---------- Positionen aus dem Leistungsverzeichnis ----------
   Abhakliste statt Tabelle: der Mitarbeiter will sehen, was heute gemacht wird. Je Turnus ein
   Block, weil daraus genau eine Aufgabe entsteht; die woechentliche steht offen, sie ist der
   Regelbetrieb. */
.lv-karte { border-left: 3px solid var(--primary); }
.lv-quelle { font-size: 13px; color: var(--muted); margin: -4px 0 10px; }
.lv-quelle code { font-size: 12.5px; }
.lv-block { border: 1px solid var(--rand); border-radius: 4px; margin-bottom: 8px; padding: 0 12px; }
.lv-block > summary { cursor: pointer; padding: 10px 0; list-style: none; display: flex;
  align-items: center; gap: 9px; font-size: 14.5px; }
.lv-block > summary::-webkit-details-marker { display: none; }
.lv-block > summary::before { content: '›'; font-size: 17px; color: var(--muted); transition: transform .15s; }
.lv-block[open] > summary::before { transform: rotate(90deg); }
.lv-block[open] > summary { border-bottom: 1px solid #f0f0f4; }
.lv-takt { font-size: 12.5px; color: var(--muted); }
.lv-bereich { margin: 10px 0 12px; }
.lv-bereich h5 { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); }
.lv-bereich ul { margin: 0; padding-left: 20px; font-size: 14.5px; }
.lv-bereich li { margin: 3px 0; }
.lv-bereich em { font-style: normal; font-weight: 600; color: var(--primary-dunkel); font-size: 13px; }

/* Herkunft des Stundensatzes: "angesetzt" heisst, im Vertrag steht keiner. Bewusst auffaellig,
   damit eine Annahme nicht wie eine Vertragszahl gelesen wird. */
.satz-quelle { font-size: 11px; font-weight: 600; padding: 1px 5px; border-radius: 3px; white-space: nowrap; cursor: help; }
.satz-quelle.angesetzt { background: var(--primary-tint); color: var(--primary-dunkel); }
.satz-quelle.beleg { background: #eef1f6; color: var(--muted); }
.filter-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.filter-info { font-size: 13px; color: var(--muted); }
/* Einspaltig: das Info-Panel darf nicht mehr kleben (schwebt sonst über dem Reiterinhalt), und
   die Spalte darf nicht über die Bildschirmbreite wachsen (1fr = minmax(auto, 1fr)) */
@media (max-width: 900px) { .objekt-layout { grid-template-columns: minmax(0, 1fr); } .detail-panel { position: static; } }

/* ---------- Karte: Objektarten unterscheiden ----------
   Statt 36 gleicher blauer Standardnadeln bekommt jede Objektart die Farbe ihres Tags
   (Pflegeheim grün, Hausmeister & Reinigung blau, Baustelle orange). Die Nadel ist ein
   um 45 Grad gedrehtes Quadrat mit runden Ecken — dieselbe Tropfenform wie die Leaflet-Nadel,
   aber einfärbbar, ohne für jede Farbe ein eigenes Bild zu brauchen. */
.karte-marke span { display: block; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.ka-punkt { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.ka-legende-zeile { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; font-size: 13.5px; }
.ka-legende-zeile input { flex: 0 0 auto; margin: 0; }
.ka-legende-name { flex: 1; }
.karte-eintrag .ka-punkt { margin-right: 2px; }

/* Fehlerzeile in Dialogen (Passwort ändern) */
.fehler-zeile { color: #c0392b; font-size: 13px; min-height: 18px; margin-top: 8px; }

/* ---------- Aufgaben auf dem Handy ----------
   Tagesliste statt Wochenraster. Greift erst ab 700 px, die Desktop-Ansicht bleibt unberührt.
   Alle Tippflächen mindestens 44 px hoch — darunter trifft man mit dem Daumen daneben. */
.handy-kal { padding-bottom: 30px; }
.handy-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.handy-zeitraum { flex: 1; text-align: center; font-size: 16px; }
.handy-pfeil { width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid #e8e8ee; background: #fff;
  border-radius: 4px; color: var(--primary); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.handy-schalter { display: flex; gap: 8px; margin-bottom: 10px; }
.handy-tab, .handy-heute { flex: 1; height: 44px; border: 1px solid #e8e8ee; background: #fff; border-radius: 4px;
  font-size: 15px; font-family: inherit; color: inherit; cursor: pointer; }
.handy-tab.aktiv { background: var(--primary); border-color: var(--primary); color: #fff; }
.handy-heute { color: var(--primary); }
.handy-nurmeine { display: flex; align-items: center; gap: 9px; padding: 10px 2px; font-size: 15px; }
.handy-nurmeine input { width: 20px; height: 20px; }

.handy-tag { margin-bottom: 18px; }
.handy-tag-kopf { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px;
  padding: 6px 2px; border-bottom: 2px solid #eceff4; margin-bottom: 8px; }
.handy-tag.heute .handy-tag-kopf { border-bottom-color: var(--primary); }
.handy-heute-marke { background: var(--primary); color: #fff; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px; }
.handy-tag-kopf .anzahl-blase { margin-left: auto; }

.handy-eintrag { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e8e8ee;
  border-radius: 4px; padding: 10px 12px 10px 0; margin-bottom: 8px; min-height: 56px; overflow: hidden; cursor: pointer; }
.handy-eintrag.erledigt { opacity: .55; }
.handy-eintrag.erledigt .handy-text b { text-decoration: line-through; }
.handy-farbe { flex: 0 0 5px; align-self: stretch; }
.handy-haken { flex: 0 0 auto; width: 30px; height: 30px; margin-left: 8px; border: 2px solid #cfd4dc;
  border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; padding: 0; }
.handy-haken.an { background: #27ae60; border-color: #27ae60; }
.handy-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.handy-text b { font-size: 15px; line-height: 1.3; }
.handy-text small { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.handy-leute { gap: 2px !important; }
.handy-zeit { flex: 0 0 auto; font-size: 13px; color: var(--muted); align-self: flex-start; padding-top: 2px; }

@media (max-width: 700px) {
  /* Bedienelemente, die auf dem Handy nur Platz kosten: Sammelaktionen, Exporte,
     Mehrfachauswahl und Druckknöpfe. Auf dem Desktop bleibt alles vorhanden. */
  .nur-desktop { display: none !important; }
  /* Tabellen brechen auf 375 px sonst aus dem Bild — waagerecht scrollbar im eigenen Rahmen */
  .card table.liste { display: block; overflow-x: auto; }
  /* Formularfelder und Knöpfe auf Daumengröße */
  .btn { min-height: 40px; }
  .btn.small { min-height: 34px; }
  input, select, textarea { font-size: 16px; }   /* verhindert das Hineinzoomen in iOS */
  .modal { width: 100%; max-width: 100%; border-radius: 0; }
  .filterzeile { gap: 8px; }
  .filterzeile input:not([type=checkbox]):not([type=radio]), .filterzeile select { min-width: 0; width: 100%; }
  /* Ticketliste: Mehrfachauswahl (1), Rollen (6) und Erstellt-Datum (7) braucht man auf dem
     Handy nicht — es bleiben Foto, Priorität, Nummer+Status, Titel, Zu erledigen, Aktionen.
     Die Spaltennummern gehören zur Kopfzeile in seiten.tickets; wird dort eine Spalte
     eingefügt, muss diese Regel mitwandern. */
  .tickets-tabelle th:nth-child(1), .tickets-tabelle td:nth-child(1),
  .tickets-tabelle th:nth-child(6), .tickets-tabelle td:nth-child(6),
  .tickets-tabelle th:nth-child(7), .tickets-tabelle td:nth-child(7) { display: none; }
}

/* Ein Satz statt vier Kacheln: die Kernaussage des Vertragsvergleichs im Klartext */
.vertrag-satz { background: #f4f7fb; border-left: 3px solid var(--primary); border-radius: 4px;
  padding: 12px 14px; margin-bottom: 14px; font-size: 15px; line-height: 1.5; }

/* Eine Leistung, die nicht mehr beauftragt ist: sie bleibt sichtbar, zählt aber nicht mehr mit. */
.liste tr.beendet td { color: var(--muted); }
.liste tr.beendet td:first-child { text-decoration: line-through; }
.beendet-grund { text-decoration: none; display: block; font-size: 12px; color: var(--muted); margin-top: 2px; max-width: 46ch; }

/* ---------- Was in einer Aufgabe aus dem Leistungsverzeichnis steht ----------
   Beim Öffnen der Aufgabe zuerst sichtbar: was zu tun ist und wie lange man dafür hat. */
.lv-in-aufgabe { border: 1px solid var(--rand); border-left: 3px solid var(--primary);
  border-radius: 4px; padding: 10px 14px 4px; margin: 0 0 14px; background: #fbfcfe; }
.lv-in-kopf { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; }
.lv-in-kopf svg { color: var(--primary); }
.lv-zeit { display: flex; flex-direction: column; gap: 1px; background: var(--primary-tint);
  border-radius: 4px; padding: 8px 11px; margin-bottom: 10px; font-size: 14px; }
.lv-zeit b { font-size: 16px; color: var(--primary-dunkel); }
.lv-zeit small, .entwurf-zeit small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.lv-zeit-offen { background: #f4f4f6; }
.lv-in-aufgabe .lv-bereich { margin: 0 0 10px; }

/* Dasselbe kompakt im Entwurf am Objekt */
.entwurf-zeit { display: flex; flex-direction: column; gap: 1px; background: var(--primary-tint);
  border-radius: 4px; padding: 7px 10px; margin-bottom: 10px; font-size: 13.5px; }
.entwurf-zeit b { color: var(--primary-dunkel); }
.entwurf-zeit-offen { background: #f4f4f6; }
.entwurf-kopf .e-vorschau { margin-left: auto; }
.entwurf-ersetzt label { display: flex; flex-direction: column; gap: 3px; }
.e-folge { margin: 6px 0 0; font-size: 12.5px; color: var(--primary-dunkel); line-height: 1.45; }
.dlg-warnung.dlg-entwurf { background: var(--primary-tint); color: var(--primary-dunkel); border-color: var(--primary); }

/* ---------- Reinigung und Hausmeister getrennt einteilen ---------- */
.lv-aufteilung { border: 1px solid var(--rand); border-radius: 4px; padding: 10px 13px; margin-bottom: 14px; background: #fbfcfe; }
.lv-aufteilung-text { margin: 4px 0 0 24px; font-size: 12.5px; color: var(--muted); max-width: 72ch; line-height: 1.45; }
.lv-bereich-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 6px 18px; margin: 12px 0 2px 24px; }
.lv-bereich-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid #f0f0f4; padding: 4px 0; font-size: 13px; }
.lv-bereich-zeile small { color: var(--muted); }
.lv-bereich-zeile select { width: auto; font-size: 12.5px; padding: 3px 6px; }
.gewerk-marke { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 3px; white-space: nowrap; }
.gewerk-marke.reinigung { background: #dff3f3; color: #12706f; }
.gewerk-marke.hausmeister { background: #e3edf6; color: #2b5f8a; }

/* ---------- Unterreiter im Aufgaben-Reiter des Objekts ----------
   Entwürfe, Kalender und Leistungsverzeichnis sind drei getrennte Dinge. Untereinander wurde
   die Seite zu lang — jetzt ist immer nur eines davon sichtbar. */
.unterreiter { display: flex; gap: 4px; border-bottom: 1px solid var(--rand); margin: 0 0 14px; flex-wrap: wrap; }
.unterreiter button { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 12px;
  font-size: 14px; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 7px; border-radius: 0; }
.unterreiter button:hover { color: var(--text); }
.unterreiter button.aktiv { color: var(--primary-dunkel); border-bottom-color: var(--primary); font-weight: 600; }
.unterreiter .anzahl-blase { font-size: 11.5px; }

/* Kopfzeile über den Unterreitern: Zeittopf und Aufteilung */
.aufg-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 10px 13px; margin: 14px 0 12px;
  border: 1px solid var(--rand); border-radius: 4px; background: #fbfcfe; }
.aufg-kopf-zeit { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); }
.aufg-kopf-zeit b { font-size: 16px; color: var(--text); }
.aufg-kopf-zeit svg { color: var(--primary); }
.aufg-kopf-teilung { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); }
.aufg-kopf-text { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; max-width: 78ch; }
.segment { display: inline-flex; border: 1px solid var(--rand); border-radius: 4px; overflow: hidden; background: #fff; }
.segment button { background: none; border: none; padding: 4px 12px; font-size: 13px; color: var(--muted); cursor: pointer; border-radius: 0; }
.segment button.aktiv { background: var(--primary); color: #fff; font-weight: 600; }
.lv-wer-macht-was { margin-bottom: 12px; }

/* ---------- Zeittöpfe: Basis, Gartenpflege, Winterdienst ---------- */
.topf-reihe { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; }
.topf-reihe.gross { margin: 0 0 8px; gap: 8px; }
.topf { font-size: 12px; padding: 2px 9px; border-radius: 3px; background: #eef1f6; color: var(--muted); white-space: nowrap; }
.topf b { color: var(--text); }
.topf small { opacity: .8; }
.topf.basis { background: #e3edf6; color: #2b5f8a; }
.topf.garten { background: #e4f1e6; color: #2f6b3f; }
.topf.winter { background: #e6eef7; color: #3c5f86; }
.topf-inkl { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }

/* Vergleich: was laeuft heute, was schlagen die Entwuerfe vor — Aufgabe fuer Aufgabe */
.vergleich { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-bottom: 6px; }
.vgl-seite { flex: 1 1 280px; border: 1px solid var(--rand); border-radius: 4px; padding: 9px 12px; background: #fff; }
.vgl-seite.neu { border-color: var(--primary); background: var(--primary-tint); }
.vgl-kopf { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.vgl-titel { flex-basis: 100%; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.vgl-kopf b { font-size: 21px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.vgl-einheit { font-size: 12.5px; color: var(--muted); }
.vgl-liste { list-style: none; margin: 0; padding: 0; }
.vgl-liste li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 5px 0; border-top: 1px solid #f0f0f4; font-size: 13px; }
.vgl-liste li:first-child { border-top: none; }
.vgl-liste li b { font-weight: 600; }
.vgl-liste li span { grid-column: 1; font-size: 12px; color: var(--muted); }
.vgl-liste li em { grid-row: 1; grid-column: 2; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vgl-liste li small { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.vgl-liste li.leer { color: var(--muted); }
.vgl-summe { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.vgl-pfeil { display: flex; align-items: center; color: var(--muted); }
.vgl-hinweis { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; max-width: 92ch; }

/* Zeitkonto je Objekt */
.zeitkonto .konto-kopf { margin-bottom: 12px; }
.konto-stand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 12px; border-radius: 4px; background: #f4f6f9; margin-top: 8px; }
.konto-stand span { font-size: 12.5px; color: var(--muted); }
.konto-stand b { font-size: 19px; font-variant-numeric: tabular-nums; }
.konto-stand small { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.konto-stand.plus { background: #e9f3ec; } .konto-stand.plus b { color: #2f6b3f; }
.konto-stand.minus { background: #fbeceb; } .konto-stand.minus b { color: #a8402c; }
.rollbar-x { overflow-x: auto; }
.konto-tabelle th, .konto-tabelle td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.konto-tabelle th:first-child, .konto-tabelle td:first-child { text-align: left; }
.konto-diff .plus { color: #2f6b3f; font-weight: 600; }
.konto-diff .minus { color: #a8402c; font-weight: 600; }

/* Monatlich: fester Kalendertag oder "am ersten Montag im Monat" */
.wdh-monat { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 2px; }
.wdh-monat select { width: auto; display: inline-block; margin: 0 3px; font-size: 13.5px; padding: 3px 6px; }
.wdh-monat .checkzeile { flex-wrap: wrap; gap: 4px; }

/* ---------- Abgleich: Kalender gegen Leistungsverzeichnis ----------
   Links die laufenden Aufgaben (unantastbar), rechts die Blöcke aus dem LV. Ein Block wird auf
   eine Aufgabe gezogen; Blöcke ohne Partner bekommen ein Anlegen-Formular. */
.abgl-hinweis { font-size: 13px; color: var(--muted); margin: 0 0 12px; max-width: 92ch; line-height: 1.5; }
.abgleich { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.abgl-seite h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.abgl-aufgabe { border: 1px solid var(--rand); border-radius: 4px; padding: 9px 12px; margin-bottom: 8px; background: #fff;
  transition: border-color .12s, background .12s; }
.abgl-aufgabe.drop-ziel { border-color: var(--primary); background: var(--primary-tint); box-shadow: 0 0 0 3px var(--primary-tint); }
.abgl-zeile1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.abgl-zeile2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-top: 5px;
  font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.abgl-zeile2 .wer { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.niemand { color: #a8402c; font-weight: 600; font-size: 13px; }
.abgl-traegt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.abgl-block-marke { font-size: 12.5px; padding: 2px 8px; border-radius: 3px; background: rgba(39,174,96,.12); color: #1f6b45; }
.abgl-frei { margin-top: 8px; font-size: 12px; color: var(--muted); border: 1px dashed var(--rand); border-radius: 3px; padding: 4px 8px; text-align: center; }
.abgl-block { border: 1px solid var(--primary); border-radius: 4px; padding: 9px 12px; margin-bottom: 8px; background: var(--primary-tint); cursor: grab; }
.abgl-block.zugeordnet { border-color: var(--rand); background: #fff; }
.abgl-block.ziehe { opacity: .45; }
.abgl-block:active { cursor: grabbing; }
.abgl-griff { color: var(--muted); letter-spacing: -3px; font-size: 15px; user-select: none; }
.abgl-zeit { font-size: 12.5px; font-weight: 600; color: var(--primary-dunkel); margin-left: auto; cursor: help; border-bottom: 1px dotted currentColor; }
.abgl-status { margin-top: 6px; font-size: 13px; }
.abgl-status.ok { color: #1f6b45; }
.abgl-status.offen { color: #a8402c; font-weight: 600; }
.abgl-punkte { margin-top: 6px; }
.abgl-punkte > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.abgl-punkte .lv-bereich { margin: 6px 0 8px; }
.abgl-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; font-size: 13px; }
.abgl-aktionen label { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); }
.abgl-aktionen select { width: auto; max-width: 260px; font-size: 13px; }
.abgl-oder { color: var(--muted); }
.abgl-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; padding: 10px; border: 1px solid var(--rand); border-radius: 4px; background: #fff; }
.abgl-form[hidden], .abgl-aktionen[hidden] { display: none; }
.abgl-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); margin: 0; }
.abgl-form select, .abgl-form input { width: auto; font-size: 14px; }
.abgl-form input[type=time] { width: 104px; }
.abgl-wer { border: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; flex-basis: 100%; }
.abgl-wer legend { font-size: 12px; color: var(--muted); padding: 0; margin-bottom: 3px; }
.abgl-wer label { flex-direction: row; align-items: center; gap: 5px; color: var(--text); font-size: 13px; }
.abgl-wer input { width: auto; margin: 0; }
.anzahl-blase.offen { background: #fbeceb; color: #a8402c; }
.abgl-offen { font-size: 12px; font-weight: 600; color: #a8402c; text-transform: none; letter-spacing: 0; }
.abgl-fertig { font-size: 12px; font-weight: 600; color: #1f6b45; text-transform: none; letter-spacing: 0; }
/* Marken: "LV" = von der App aus dem Leistungsverzeichnis angelegt, "Punkte ✓" = trägt einen Block */
.lv-marke { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 1px 5px; border-radius: 3px;
  background: var(--primary); color: #fff; vertical-align: middle; line-height: 1.5; }
.lv-punkte-marke { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 3px; background: rgba(39,174,96,.12); color: #1f6b45; vertical-align: middle; }
.kal-lv { display: inline-block; font-size: 9px; font-weight: 700; padding: 0 3px; margin-left: 4px; border-radius: 2px;
  background: rgba(255,255,255,.88); color: var(--primary-dunkel); vertical-align: middle; line-height: 1.5; }
.handy-eintrag .lv-marke { font-size: 9.5px; padding: 0 4px; margin-left: 4px; }
@media (max-width: 900px) {
  .abgleich { grid-template-columns: minmax(0, 1fr); }
  .abgl-griff { display: none; }
}

/* Abgleich, zweite Runde: Ersetzen-Frage, Namensfeld, "1 von 2", nicht planbare Blöcke */
.abgl-folge { display: block; margin-top: 5px; font-size: 12px; color: var(--primary-dunkel); }
.abgl-name { flex-basis: 100%; }
.abgl-name input { width: 100%; max-width: 420px; }
.abgl-ersetzt { flex-basis: 100%; margin: 0; font-size: 12.5px; color: #a8402c; }
.abgl-wahl-knoepfe { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; margin: 12px 0 6px; }
.abgl-wahl-knoepfe small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.abgl-np-titel { margin-top: 16px !important; }
.abgl-np { border: 1px dashed var(--rand); border-radius: 4px; padding: 9px 12px; margin-bottom: 8px; background: #fbfcfe; }
.abgl-np.garten { border-color: #9cc9a6; } .abgl-np.winter { border-color: #a9bfd8; }
.abgl-status.np { color: var(--muted); font-weight: 400; }
/* Kalender: "1 von 2" auf der Kachel und in der Handy-Liste */
.kal-folge { display: inline-block; font-size: 9.5px; padding: 0 4px; margin-left: 4px; border-radius: 2px; background: rgba(255,255,255,.75); color: var(--text); vertical-align: middle; line-height: 1.5; }
.handy-folge { font-size: 11px; color: var(--muted); font-weight: 400; }
/* Zeitkonto und Objektzeiten: Basis groß, Garten/Winter daneben */
.konto-was { font-size: 13px; font-weight: 400; color: var(--muted); }
.konto-daneben { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; padding: 8px 12px; border-radius: 4px; background: #f4f6f9; }
.konto-daneben-titel { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.konto-zusatz { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 13px; }
.konto-zusatz small { color: var(--muted); }
.konto-zusatz span { color: var(--muted); }
.konto-zusatz.garten b:first-child { color: #2f6b3f; } .konto-zusatz.winter b:first-child { color: #3c5f86; }
.vgl-daneben { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; padding: 8px 12px; border-radius: 4px; background: #f4f6f9; }

/* ---------- Handy-Kalender: ein Tag, Wochenleiste, Tonnen oben, gleichzeitige Aufgaben nebeneinander ---------- */
.handy-kopf .handy-zeitraum { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.handy-kopf .handy-heute { font-size: 13px; padding: 0; background: none; border: none; }
.handy-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 4px 0 8px; }
.handy-tagchip { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 5px; border: 1px solid var(--rand); border-radius: 8px;
  background: #fff; color: var(--text); font-size: 12px; line-height: 1.15; position: relative; }
.handy-tagchip small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.handy-tagchip b { font-size: 16px; }
.handy-tagchip.heute { border-color: var(--primary); }
.handy-tagchip.heute b { color: var(--primary); }
.handy-tagchip.aktiv { background: var(--primary); border-color: var(--primary); color: #fff; }
.handy-tagchip.aktiv small, .handy-tagchip.aktiv b { color: #fff; }
.handy-tagzahl { min-height: 14px; font-size: 10.5px; font-weight: 600; color: var(--primary-dunkel); }
.handy-tagchip.aktiv .handy-tagzahl { color: #fff; }
.handy-leiste { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 8px; }
.handy-leiste .handy-nurmeine { padding: 0; margin: 0; font-size: 13px; }
.handy-tonnen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; margin-bottom: 10px; border-radius: 8px; background: #f4f6f9; }
.handy-tonnen-titel { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 2px; }
.handy-tonnen-leer { font-size: 13px; color: var(--muted); }
.handy-tonne { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px 5px 6px; border: 1px solid var(--f); border-left-width: 5px; border-radius: 6px;
  background: #fff; font-size: 13px; font-weight: 600; color: var(--text); }
.handy-tonne small { font-weight: 400; color: var(--muted); }
.handy-tonne-haken { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--f); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.handy-tonne.erledigt { opacity: .55; text-decoration: line-through; }
.handy-tonne.erledigt .handy-tonne-haken { background: var(--f); }
.handy-reihe { display: grid; gap: 6px; margin-bottom: 6px; }
.handy-reihe.spalten-1 { grid-template-columns: minmax(0, 1fr); }
.handy-reihe.spalten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.handy-reihe.spalten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.handy-karte { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px 9px 8px; border: 1px solid var(--rand); border-left: 5px solid var(--f); border-radius: 8px; background: #fff; min-width: 0; }
.handy-karte .handy-haken { margin: 0; flex: 0 0 auto; }
.handy-karte-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.handy-karte-zeit { font-size: 12px; font-weight: 600; color: var(--primary-dunkel); font-variant-numeric: tabular-nums; }
.handy-karte b { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.handy-karte small { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 3px; overflow-wrap: anywhere; }
.handy-karte.erledigt { opacity: .55; }
.handy-karte.erledigt b { text-decoration: line-through; }
.spalten-2 .handy-karte, .spalten-3 .handy-karte { padding: 8px 7px 8px 6px; gap: 6px; }
.spalten-2 .handy-karte b, .spalten-3 .handy-karte b { font-size: 13px; }
.spalten-3 .handy-karte small { display: none; }
.spalten-3 .handy-karte-zeit { font-size: 11px; }
.handy-leer { padding: 40px 20px; line-height: 1.6; }

/* ---------- Kurzanleitung beim ersten Anmelden ---------- */
#guide { position: fixed; inset: 0; z-index: 5000; }
.guide-loch { position: absolute; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(20, 24, 32, .62); border: 2px solid var(--primary); pointer-events: none; transition: all .2s; }
.guide-box { position: absolute; left: 14px; right: 14px; background: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.guide-box b { display: block; font-size: 16px; margin-bottom: 4px; }
.guide-box p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--text); }
.guide-fuss { display: flex; align-items: center; gap: 8px; }
.guide-fuss span { flex: 1; font-size: 12px; color: var(--muted); }
.handy-tonnen:not(.offen) .handy-tonne.versteckt { display: none; }
.handy-tonnen-mehr { border: none; background: none; color: var(--primary-dunkel); font-size: 13px; font-weight: 600; padding: 4px 6px; }

/* Handy-Kalender: Zeitraster des Tages, gleichzeitige Aufgaben je in eigener Spalte */
.handy-als { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 0; }
.handy-als select { width: auto; font-size: 13px; padding: 4px 8px; }
.handy-raster { position: relative; margin: 6px 0 20px 44px; border-left: 1px solid var(--rand); }
.handy-stunde { position: absolute; left: -44px; right: 0; border-top: 1px solid #eceff3; pointer-events: none; }
.handy-stunde span { position: absolute; top: -8px; left: 0; width: 38px; font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.handy-bloecke { position: absolute; top: 0; bottom: 0; left: 6px; right: 2px; }
.handy-block { position: absolute; box-sizing: border-box; overflow: hidden; padding: 4px 22px 4px 8px; border-left: 4px solid var(--f); border-radius: 6px;
  background: color-mix(in srgb, var(--f) 14%, #fff); border-top: 1px solid color-mix(in srgb, var(--f) 40%, #fff); font-size: 12px; line-height: 1.2; display: flex; flex-direction: column; gap: 1px; }
.handy-block b { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.handy-block small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.handy-block-zeit { font-weight: 600; color: var(--primary-dunkel); font-size: 11px; font-variant-numeric: tabular-nums; }
.handy-block-haken { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--f); background: #fff; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.handy-block-haken.an { background: var(--f); }
.handy-block.erledigt { opacity: .55; }
.handy-block.erledigt b { text-decoration: line-through; }
.handy-jetzt { position: absolute; left: -4px; right: 0; border-top: 2px solid #e74c3c; pointer-events: none; }
.handy-jetzt::before { content: ''; position: absolute; left: -5px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: #e74c3c; }
/* Drei und mehr Spalten am Handy: nur die Uhrzeit, der Titel, kein Objekt */
.handy-block.eng { padding: 3px 20px 3px 6px; }
.handy-block.eng .handy-block-zeit { font-size: 10.5px; }
.handy-block.eng b { font-size: 11.5px; -webkit-line-clamp: 3; overflow-wrap: anywhere; }
.handy-block.eng small { display: none; }
.handy-block.eng .handy-block-haken { width: 16px; height: 16px; top: 3px; right: 3px; }
/* Das aufgeklappte Menü liegt über allem — auch über der Karte, deren Ebenen sonst durchscheinen */
#sidebar { z-index: 1100; }
.leaflet-container { z-index: 0; }
/* Aufgabe am Handy: Blatt zum Lesen und Abhaken */
.ah-blatt { display: flex; flex-direction: column; gap: 12px; }
.ah-kopf { border-left: 5px solid var(--f); padding: 2px 0 2px 12px; display: flex; flex-direction: column; gap: 3px; }
.ah-kopf h3 { margin: 0; font-size: 17px; line-height: 1.25; }
.ah-zeit { font-size: 12.5px; font-weight: 600; color: var(--primary-dunkel); font-variant-numeric: tabular-nums; }
.ah-objekt { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.ah-abschnitt h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.ah-ticket { border: 1px solid var(--rand); border-radius: 6px; padding: 8px 10px; }
.ah-ticket-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.ah-ticket small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.ah-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ah-aktionen .ah-haken { flex: 1 1 100%; padding: 12px; font-size: 15px; }
/* Gelbe Leiste, solange ein Admin die App als Mitarbeiter ansieht */
#vorschau-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300; display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: #fff3cd; color: #5a4300; font-size: 13px; border-top: 1px solid #f1d98a; }
#vorschau-leiste span { flex: 1; }
#vorschau-leiste button { border: 1px solid #b08a2e; background: #fff; color: #5a4300; border-radius: 4px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
body:has(#vorschau-leiste) main { padding-bottom: 48px; }
/* Was per hidden-Attribut versteckt ist, bleibt versteckt — auch wenn eine Stilregel display setzt.
   Ohne diese Zeile blieben ausgeblendete Menüpunkte (#nav a { display:flex }) sichtbar. */
[hidden] { display: none !important; }
/* GPS-Pflicht: Sperrbild, bis der Standort erlaubt ist */
#gps-sperre { position: fixed; inset: 0; z-index: 6000; background: rgba(20, 24, 32, .86); display: flex; align-items: center; justify-content: center; padding: 20px; }
.gps-sperre-box { background: #fff; border-radius: 12px; padding: 22px 20px; max-width: 360px; text-align: center; }
.gps-sperre-icon { color: var(--primary); margin-bottom: 6px; }
.gps-sperre-box h3 { margin: 0 0 8px; }
.gps-sperre-box p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.gps-sperre-hilfe { font-size: 12.5px; color: var(--muted); }
.standort-frage h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.standort-frage p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
/* Menü am Handy schließen: Kreuz oben, dunkler Schatten daneben (Tippen schließt) */
.sidebar-zu { display: none; position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 1px solid var(--rand); border-radius: 50%; background: #fff; font-size: 16px; line-height: 1; z-index: 1; }
#sidebar-schatten { display: none; position: fixed; inset: 0; background: rgba(20, 24, 32, .45); z-index: 1050; }
@media (max-width: 900px) {
  .sidebar-zu { display: inline-flex; align-items: center; justify-content: center; }
  #sidebar.offen ~ #sidebar-schatten { display: block; }
}

/* Adresse mit Navigations-Link im Handy-Aufgabenblatt */
.ah-adresse { display:flex; align-items:center; gap:10px; margin:0; padding:10px 12px; border:1px solid #e3e6ec; border-radius:6px; background:#fff; color:var(--text); text-decoration:none; }
.ah-adresse-text { flex:1; min-width:0; display:flex; flex-direction:column; font-weight:600; line-height:1.3; }
.ah-adresse > :not(.ah-adresse-text) { flex:0 0 auto; display:inline-flex; }
.ah-adresse small { font-weight:400; color:var(--muted); font-size:12px; }
.ah-adresse > :first-child { color:var(--primary); }