/* Grundbausteine 1:1 aus Spesen/Zeiterfassung übernommen (Farben, Schriften,
   Topbar, Reiter, Karten, Felder, Tool-Menü), damit alle Tools wie aus einem
   Guss wirken. CRM-eigene Teile stehen ganz unten. */
:root {
  --bg: #141414;
  --panel: #1C1C1C;
  --panel-2: #232323;
  --border: #2E2E2E;
  --text: #ECECEC;
  --text-dim: #999999;
  --text-faint: #6B6B6B;
  --amber: #E3A548;
  --pink: #D9578B;
  --blue: #5B8DEF;
  --red: #E2574C;
  --green: #4FAE8E;
  --radius: 10px;
  --hover-bg: #2C2C2C;
}
/* Heller Modus - über das Zahnrad umschaltbar (Klasse auf <html>, nicht nur
   <body>, damit z.B. auch der Overscroll-Bereich auf iOS korrekt hell
   bleibt), gleiche Werte wie im Projektmanager: nur Hintergrund/Rahmen/Text
   ändern sich, die Akzentfarben (Blau/Rot/Grün/…) bleiben gleich. */
html.light {
  --bg: #EFF1F3;
  --panel: #FFFFFF;
  --panel-2: #F5F6F8;
  --border: #DDE1E6;
  --text: #1B1D21;
  --text-dim: #5B616B;
  --text-faint: #8B909A;
  --hover-bg: #E7E9ED;
}
* { box-sizing: border-box; }
/* Der graue/schwarze "Tap-Highlight"-Blitz, den mobile Browser standardmäßig
   beim Antippen von Buttons/Links/Kacheln zeigen, wird abgeschaltet - die
   :active-Regeln unten übernehmen die (blaue) Rückmeldung stattdessen.
   Zusätzlich direkt auf den interaktiven Elementen selbst gesetzt (nicht
   nur über "*"), da einzelne mobile Browser das sonst nicht zuverlässig
   übernehmen. */
*, html, body, button, select, a, summary, .entry-summary, .tabs button,
.icon-btn, .theme-toggle button, .settings-row-clickable, .settings-logout-btn,
.trash-btn, .delete-confirm-yes, .delete-confirm-no {
  -webkit-tap-highlight-color: transparent;
}
html { background: var(--bg); }
body {
  margin: 0;
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
#app { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
h1, h2, h3 { font-family: 'Avenir Next', 'Proxima Nova', sans-serif; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 18px; margin: 0; letter-spacing: 0.01em; }
.topbar .brand { display: flex; align-items: center; gap: 12px; }
.topbar .brand img { height: 32px; width: auto; }
/* Logo ist dunkel gezeichnet - im Dunkelmodus zu Weiß invertiert, im
   Hellmodus unverändert (gleiches Prinzip wie im Projektmanager). */
html:not(.light) .logo-invert { filter: brightness(0) invert(1); }
.topbar .who { font-size: 12.5px; color: var(--text-dim); }
.topbar .actions { display: flex; align-items: center; gap: 12px; position: relative; }

.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
  padding: 0; text-decoration: none; box-sizing: border-box;
}
.icon-btn:hover, .icon-btn:active, .icon-btn.active { color: var(--text); background: var(--panel-2); }
/* Eckiger (nicht pillenförmiger) Umschalter, passend zur restlichen,
   kantigen Formensprache der App (z.B. Tabs) - wird sowohl im
   "Darstellung"-Bereich der Einstellungen verwendet als auch (mit
   .theme-toggle-inline, ohne festen Außenabstand) in dessen Zeile. */
.theme-toggle { display: flex; gap: 6px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 4px; margin: 0 6px 10px; }
.theme-toggle.theme-toggle-inline { margin: 0; flex-shrink: 0; width: 178px; }
.theme-toggle button { flex: 1; min-width: 0; background: transparent; color: var(--text-dim); font-weight: 700; padding: 7px 6px; font-size: 13px; white-space: nowrap; }
.theme-toggle button:hover, .theme-toggle button:active { background: transparent; }
.theme-toggle button.active { background: var(--blue); color: #fff; }

/* ---------- Einstellungen: eigene, vollflächige Seite statt kleinem
   Dropdown (Zahnrad öffnet diese Seite, siehe renderEinstellungen()). ---------- */

.settings-header-title { font-size: 17px; font-weight: 700; margin-bottom: 18px; }
.settings-body { max-width: 480px; margin: 0 auto; }
/* Die 480px-Begrenzung ist nur am PC gewollt (Stempeluhr so schmal wie die
   Einstellungen). Am Handy - auch quer, oder bei größeren Geräten knapp
   über 480px - soll die Stempeluhr stattdessen die volle Breite ausfüllen,
   genau wie "Meine Zeiten" es bereits tut. */
@media (max-width: 680px) {
  .settings-body { max-width: none; margin: 0; }
}
.settings-profile-card {
  display: flex; align-items: center; gap: 14px; padding: 18px 16px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 22px;
}
.settings-avatar {
  width: 52px; height: 52px; border-radius: 50%; background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; flex-shrink: 0;
}
.settings-profile-info { min-width: 0; }
.settings-profile-name { font-size: 16px; font-weight: 700; }
.settings-profile-email { font-size: 12.5px; color: var(--text-faint); margin: 2px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-section-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); margin: 0 4px 8px; }
.settings-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 22px; }
.settings-row { display: flex; align-items: center; gap: 12px; padding: 14px; }
.settings-row + .settings-row { border-top: 1px solid var(--border); }
.settings-row-clickable { cursor: pointer; }
.settings-row-clickable:hover, .settings-row-clickable:active { background: var(--panel-2); }
.settings-row-icon { display: flex; color: var(--text-dim); flex-shrink: 0; }
.settings-row-label { flex-grow: 1; font-size: 13px; font-weight: 600; }
.settings-row-hint { font-size: 12px; color: var(--text-faint); }
.settings-row-chevron { color: var(--text-faint); flex-shrink: 0; }
.settings-logout-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border-radius: 12px; border: 1px solid #3a2323;
  background: rgba(226,87,76,0.08); color: var(--red); font-size: 13px; font-weight: 700;
}
.settings-logout-btn:hover, .settings-logout-btn:active { background: var(--red); color: #fff; border-color: var(--red); }
html.light .settings-logout-btn { border-color: rgba(226,87,76,0.35); }

/* Segmentierte Tab-Leiste: eckig, ohne Lücken - ein Button geht direkt in
   den nächsten über (gemeinsame Trennlinie statt Abstand). Der aktive Tab
   ist farblich voll hinterlegt, mit invertierter (heller) Schrift statt nur
   einer dünnen Unterstreichung. Bricht auf schmalen Bildschirmen nicht um,
   sondern lässt sich (wie die Tabellen) horizontal durchscrollen. */
.tabs { display: flex; gap: 0; padding: 0; background: var(--panel); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button {
  border: none; border-right: 1px solid var(--border); border-radius: 0; background: transparent;
  /* flex-basis 0 statt "auto": alle Tabs gleich breit, unabhängig von der
     Textlänge (vorher bekam z.B. "Team" viel weniger Platz als "Übersicht &
     Export"). */
  padding: 14px 18px; font-size: 13px; cursor: pointer; flex: 1 1 0;
  color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: 'Proxima Nova', sans-serif; font-weight: 700;
  transition: color 0.15s ease, background 0.15s ease;
}
.tabs button:last-child { border-right: none; }
.tabs button:hover { color: var(--text); background: var(--panel-2); }
.tabs button.active { color: #fff; background: var(--blue); }

/* Auf dem Handy sind gleich breite Tabs bei 8 Stück viel zu schmal (Text
   nur noch "..."). Dort wieder wie früher: jeder Tab so breit wie sein Text
   braucht, dafür lässt sich die Leiste horizontal durchscrollen.
   Bei nur 2 Tabs (Mitarbeiter-/vereinfachte Ansicht: Stempeluhr + Meine
   Zeiten, Klasse .tabs-few) gilt das NICHT - die sollen sich weiterhin
   gemeinsam die volle Breite je zur Hälfte teilen, mittig beschriftet. */
@media (max-width: 680px) {
  .tabs:not(.tabs-few) button { flex: 0 0 auto; padding: 12px 14px; }
}

/* Unter-Navigation INNERHALB eines Reiters (z.B. "Verwaltung": Externe
   Projekte/Interne Projekte/Tätigkeiten) - bewusst kleiner/dezenter als die
   Haupt-Tabs oben, damit die Hierarchie (Hauptreiter > Unterseite) klar
   bleibt. Scrollt auf schmalen Bildschirmen horizontal statt umzubrechen. */
/* Unter-Navigation (z.B. Verwaltung: Externe/Interne Projekte, Tätigkeiten).
   Bewusst keine eigene Button-Optik mehr - nutzt dieselben Klassen wie
   überall sonst (aktiv = normaler blauer Button, inaktiv = .secondary), für
   ein einheitliches Bild mit den übrigen Buttons der App. Kein eigenes
   horizontales Padding - .content drumherum hat schon 22px, dadurch sitzen
   die Buttons bündig mit der Kartenkante darunter statt zusätzlich
   eingerückt. */
.subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

.content { flex: 1; padding: 22px; width: 100%; }
/* Am PC nicht die komplette Bildschirmbreite ausfüllen (wirkt bei breiten
   Monitoren unnötig auseinandergezogen) - stattdessen eine angenehme
   Lesebreite, mittig zentriert. Topbar/Tabs bleiben davon unberührt (liegen
   außerhalb von .content) und bleiben über die volle Breite. Am Handy (wo
   ohnehin fast alles untereinander steht) weiterhin volle Breite. */
@media (min-width: 860px) {
  .content { max-width: 760px; margin: 0 auto; }
}

.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
/* Formulare (z.B. "Neue Reise"): etwas mehr Luft als die sonst eher dichten
   Karten, plus spürbarer Abstand zwischen den einzelnen Abschnitten statt
   einer einzigen vollgestopften Box - wirkt dadurch deutlich entspannter. */
.form-card { padding: 22px 24px; margin-bottom: 20px; }
.form-card:last-of-type { margin-bottom: 22px; }
.form-card-route .section-block-title { margin-bottom: 16px; }
.form-submit-btn { padding: 11px 22px; }

button {
  cursor: pointer; border: none; border-radius: 8px; padding: 9px 16px; font-size: 13px;
  font-family: 'Proxima Nova', sans-serif; font-weight: 700;
  background: var(--blue); color: #fff;
}
button:hover, button:active { background: var(--blue); }
button.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
/* Hover und Antippen zeigen dieselbe blaue Rückmeldung (weiße Schrift) wie
   bei allen anderen Buttons - vorher wurde der Button (z.B. "Statistik")
   beim Hovern fast schwarz. */
button.secondary:hover, button.secondary:active { background: var(--hover-bg); color: var(--text); }
button.secondary.hover-lock:hover { background: var(--panel-2); color: var(--text); }
button.danger { background: var(--red); }
button.danger:hover, button.danger:active { background: #c9483e; }
button:disabled { opacity: .5; cursor: not-allowed; }
/* Segmentierte Tab-Leiste: beim Antippen (mobil) soll der Button genau wie
   im ausgewählten Zustand aussehen (blau, weiße Schrift) statt kurz zu
   schwarz zu "blitzen". */
.tabs button:active { color: #fff; background: var(--blue); }

/* Löschen exakt wie im Projektmanager: kleiner Papierkorb-Button (Hover rot),
   danach inline "Wirklich löschen?" mit "Ja" / "Abbrechen". */
.delete-action { display: inline-flex; align-items: center; gap: 6px; }
.trash-btn svg { display: block; }
.trash-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 9px; flex-shrink: 0;
  border-radius: 7px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text-dim);
}
.trash-btn:hover, .trash-btn:active { background: var(--panel-2); color: var(--red); border-color: var(--red); }
.delete-confirm-text { font-size: 0.8em; color: var(--text-dim); white-space: nowrap; }
.delete-confirm-yes {
  background: var(--red); color: #2A0E0C; border: 1px solid var(--red); border-radius: 8px;
  padding: 9px 16px; font-size: 13px; font-weight: 700;
}
.delete-confirm-yes:hover, .delete-confirm-yes:active { background: var(--red); }
.delete-confirm-no {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 16px; font-size: 13px; font-weight: 700;
}
.delete-confirm-no:hover, .delete-confirm-no:active { background: var(--panel-2); color: var(--text); }

input, select, textarea {
  /* iOS Safari zoomt beim Fokussieren eines Feldes automatisch rein, sobald
     dessen Schriftgröße unter 16px liegt (z.B. beim Passwort-Login) - und
     zoomt danach nicht von selbst wieder raus. 16px ist die kleinste
     Schriftgröße, bei der Safari das nicht auslöst. */
  font-size: 16px; font-family: 'Proxima Nova', sans-serif; padding: 9px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel-2); color: var(--text); width: 100%;
}
/* Browser rendern <select> von Haus aus oft etwas höher/niedriger als
   <input> - trotz gleichem Padding -, daher hier eine feste, gemeinsame
   Höhe statt nur Padding, damit Dropdowns (z.B. Projekt/Tätigkeit) und
   Text-/Datumsfelder exakt gleich hoch sind. */
input, select { height: 40px; }
/* Buttons und Dropdowns/Auswahlfelder haben überall dieselbe Schriftgröße
   (13px wie "Bearbeiten"); Ausnahme sind nur Einstempeln/Ausstempeln/
   Startzeit anpassen (.clock-big). Freie Textfelder bleiben bei 16px. */
select, input[type="date"], input[type="datetime-local"], input[type="time"] { font-size: 13px; }
/* Der gewählte Wert im Dropdown hat dieselbe Schrift wie Datum/Uhrzeit (fett); die aufgeklappte Liste bleibt normal. */
select { font-weight: 700; }
select option { font-weight: 400; }
/* Mobile Browser rendern Datum-/Zeit-Felder von Haus aus mit eigener,
   nicht per Padding/Höhe kontrollierbarer Optik (iOS Safari zeigt z.B. ein
   komplett natives Steuerelement mit eigener Mindesthöhe). "appearance:
   none" schaltet diese native Optik ab, damit das Feld sich wie ein
   normales Text-/Dropdown-Feld verhält und exakt so groß wird wie
   Projekt/Tätigkeit. */
input[type="date"], input[type="datetime-local"], input[type="time"] {
  -webkit-appearance: none; appearance: none;
  padding-top: 0; padding-bottom: 0; line-height: 38px;
  text-align: left;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  padding: 0; margin-left: 4px;
}
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit {
  padding: 0;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); }
label { font-size: 11.5px; color: var(--text-dim); display: block; margin-bottom: 4px; }
.field { margin-bottom: 14px; }
/* Checkbox + Text (z.B. "Aktiv"): label ist sonst überall block (siehe
   oben) - hier stattdessen ein Flex-Zeile, damit Häkchen und Text exakt auf
   gleicher Höhe stehen statt der Text gegenüber dem Häkchen verschoben zu
   sein. */
.checkbox-field {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text); margin-bottom: 0; cursor: pointer;
}
.checkbox-field input[type="checkbox"] { width: auto; margin: 0; flex-shrink: 0; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > .field { flex: 1; min-width: 160px; }

.error { position: sticky; top: 8px; z-index: 30; color: var(--text); background: rgba(226, 87, 76, 0.18); border: 1px solid rgba(226, 87, 76, 0.7); border-radius: 9px; padding: 10px 14px; font-size: 13px; margin: 0 0 12px; line-height: 1.45; }
.notice { color: var(--green); font-size: 12.5px; margin: 8px 0; line-height: 1.4; }
.hint { color: var(--text-dim); font-size: 12.5px; }

.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; background: var(--panel-2); color: var(--text-dim); border: 1px solid var(--border); }
.pill.admin { background: rgba(91,141,239,0.15); color: var(--blue); border-color: rgba(91,141,239,0.35); }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 20px; width: 100%; max-width: 480px; max-height: 90vh; overflow: auto; }
.modal h3 { margin-top: 0; font-size: 16px; }
/* flex-wrap: die Löschen-Bestätigung ("Wirklich löschen? Ja Abbrechen") ist
   deutlich breiter als der Papierkorb-Button, den sie ersetzt - ohne Umbruch
   würde sie zusammen mit Abbrechen/Speichern über den Modal-Rand hinaus
   laufen statt sauber in eine zweite Zeile zu rutschen. */
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 16px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
/* Chips sehen aus wie die übrigen (sekundären) Buttons der App: gleiche Schrift,
   Größe, Höhe und Ecken. */
.chip {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 700;
  font-family: 'Proxima Nova', sans-serif; text-align: center;
}
.chip:hover, .chip:active { background: var(--hover-bg); color: var(--text); }
.chip.active { background: var(--blue); border-color: var(--blue); color: #fff; }

.error { display: flex; align-items: center; gap: 10px; z-index: 30; }
.error-text { flex: 1; }
.error-x { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; margin: -4px -6px -4px 0; min-height: 0; padding: 0; line-height: 1; font-size: 18px; background: transparent; border: 0; color: var(--text); cursor: pointer; border-radius: 6px; }
.error-x:hover { background: rgba(255,255,255,.12); }

/* Tool-Menü als Bottom-Sheet (am PC mittig als Karte) */
.appsw-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,0); display: flex; align-items: flex-end; justify-content: center; transition: background .18s; }
.appsw-overlay.show { background: rgba(0,0,0,.6); }
.appsw-sheet { width: 100%; max-width: 480px; background: var(--panel); border: 1px solid var(--border); border-radius: 22px 22px 0 0; padding: 10px 14px calc(18px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .2s ease; box-shadow: 0 -12px 40px rgba(0,0,0,.4); }
.appsw-overlay.show .appsw-sheet { transform: none; }
.appsw-grab { width: 40px; height: 4px; background: var(--text-faint, #666); border-radius: 2px; margin: 0 auto 12px; opacity: .6; }
.appsw-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint, #888); padding: 2px 10px 8px; }
.appsw-row { display: flex; align-items: center; gap: 14px; padding: 11px 10px; border-radius: 12px; text-decoration: none; color: var(--text); }
.appsw-row:hover, .appsw-row:active { background: var(--panel-2); }
.appsw-row.current { background: var(--panel-2); }
.appsw-ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
.appsw-row.current .appsw-ic { background: var(--blue); border-color: var(--blue); color: #fff; }
.appsw-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.appsw-tx b { font-size: 15px; font-weight: 700; }
.appsw-tx small { font-size: 12.5px; color: var(--text-dim); }
.appsw-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: none; }
@media (min-width: 721px) {
  .appsw-overlay { align-items: center; }
  .appsw-sheet { border-radius: 20px; max-width: 400px; transform: translateY(14px) scale(.98); opacity: 0; transition: transform .18s, opacity .18s; padding-bottom: 16px; }
  .appsw-overlay.show .appsw-sheet { transform: none; opacity: 1; }
  .appsw-grab { display: none; }
}

/* =====================================================================
   CRM
   ===================================================================== */
.content.crm-wide { max-width: 1100px; }
@media (min-width: 1240px) {
  body.crm-panel-open .content.crm-wide { margin-right: 580px; margin-left: 22px; max-width: none; }
}
.crm-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.crm-search { flex: 1; position: relative; }
.crm-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.crm-search input { padding-left: 36px; }
.crm-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.crm-pill { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.crm-pill:hover { background: var(--hover-bg); }
.crm-pill small { font-weight: 400; opacity: .7; }
.crm-pill.active, .crm-pill.active:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.crm-list { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.crm-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) 130px; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; cursor: pointer; }
.crm-row:last-child { border-bottom: none; }
.crm-row:hover { background: var(--hover-bg); }
.crm-row.sel { box-shadow: inset 3px 0 0 var(--blue); background: var(--hover-bg); }
.crm-row.head { cursor: default; font-size: 11px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 9px 14px; }
.crm-row.head:hover { background: transparent; }
.crm-name b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-name small { display: block; color: var(--text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-row.gone .crm-name b { color: var(--text-dim); text-decoration: line-through; }
.crm-chips { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.crm-chip { height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--c, #8B909A) 45%, transparent); background: color-mix(in srgb, var(--c, #8B909A) 15%, transparent); color: var(--text); }
.crm-chip .x { background: transparent; border: 0; padding: 0; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); border-radius: 50%; font-size: 13px; line-height: 1; }
.crm-chip .x:hover { color: var(--red); background: transparent; }
.crm-chip-add { height: 22px; width: 22px; border-radius: 999px; border: 1px dashed var(--text-faint); color: var(--text-dim); background: transparent; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; }
.crm-chip-add:hover { color: var(--text); border-color: var(--text-dim); background: transparent; }
.crm-due { font-size: 12.5px; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.crm-due.late { color: var(--amber); font-weight: 700; }
.crm-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-faint); margin-top: 10px; }
.crm-foot .ok { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.crm-foot .bad { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.crm-empty { padding: 28px 18px; text-align: center; color: var(--text-dim); font-size: 13.5px; }
@media (max-width: 680px) {
  .crm-row { grid-template-columns: minmax(0, 1fr) auto; }
  .crm-row .crm-chips { display: none; }
  .crm-row.head { display: none; }
}

/* Freelancer-Vorschläge */
.crm-sugg { background: rgba(227,165,72,.10); border: 1px solid rgba(227,165,72,.45); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; font-size: 13.5px; }
.crm-sugg-head { display: flex; align-items: center; gap: 10px; }
.crm-sugg-head b { flex: 1; }
.crm-sugg-item { padding: 10px 0; border-top: 1px solid rgba(227,165,72,.3); margin-top: 10px; }
.crm-sugg-item > b { display: block; }
.crm-sugg-item > small { color: var(--text-dim); font-size: 12px; }
.crm-sugg-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.crm-sugg-acts button { padding: 7px 12px; font-size: 12.5px; }

/* Seitenfenster rechts (wie in Spesen) */
.crm-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 60; background: var(--panel); border-left: 1px solid var(--border); box-shadow: -12px 0 40px rgba(0,0,0,.45); overflow-y: auto; padding: 22px 26px 40px; }
.crm-panel.anim { animation: crmSlide .18s ease; }
@keyframes crmSlide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 680px) { .crm-panel { padding: 16px 16px 40px; } }
.crm-ph { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.crm-ph h2 { margin: 4px 0 0; font-size: 20px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.crm-x { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); display: flex; align-items: center; justify-content: center; padding: 0; flex: none; }
.crm-x:hover, .crm-x:active { background: var(--red); border-color: var(--red); color: #fff; }
.crm-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; position: relative; }
.crm-lx { height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid var(--border); color: var(--text-dim); display: inline-flex; align-items: center; }
.crm-info { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 7px 12px; font-size: 13.5px; margin: 16px 0 4px; }
.crm-info > span { color: var(--text-dim); }
.crm-info a { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.crm-info a:hover { color: var(--blue); }
.crm-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 24px 0 10px; font-size: 14px; font-weight: 700; }
.crm-link { background: transparent; border: 0; padding: 0; color: var(--blue); font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
.crm-link:hover, .crm-link:active { background: transparent; color: var(--blue); text-decoration: underline; }
.crm-note { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.crm-warn { background: rgba(227,165,72,.12); border: 1px solid rgba(227,165,72,.45); border-radius: 9px; padding: 9px 12px; font-size: 12.5px; margin: 10px 0; line-height: 1.45; }
.crm-typepop { position: absolute; z-index: 5; top: 28px; left: 0; min-width: 200px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.35); padding: 6px; }
.crm-typepop button { display: flex; width: 100%; align-items: center; gap: 8px; background: transparent; color: var(--text); text-align: left; padding: 8px 10px; font-weight: 600; }
.crm-typepop button:hover { background: var(--panel-2); }
.crm-typepop .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.crm-typepop small { color: var(--text-faint); font-weight: 400; margin-left: auto; font-size: 11px; }

/* Aufgaben */
.crm-task { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.crm-task:first-child { border-top: 0; }
.crm-ck { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--text-faint); background: transparent; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.crm-ck:hover { border-color: var(--green); background: transparent; }
.crm-ck.late { border-color: var(--amber); }
.crm-ck.done, .crm-ck.done:hover { background: var(--green); border-color: var(--green); }
.crm-task-tx { flex: 1; min-width: 0; }
.crm-task-tx b { display: block; font-weight: 700; overflow-wrap: anywhere; }
.crm-task-tx small { color: var(--text-dim); font-size: 12.5px; }
.crm-task.done .crm-task-tx b { text-decoration: line-through; color: var(--text-dim); }
.crm-task-date { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm-task-date.late { color: var(--amber); font-weight: 700; }
.crm-task.box { padding: 12px 14px; border-top: 1px solid var(--border); }
.crm-task.box:first-child { border-top: 0; }
.crm-taskcard { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.crm-group { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 20px 2px 8px; }
.crm-group.late { color: var(--amber); }
.crm-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.crm-form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crm-form-row > input[type="date"] { width: 160px; flex: none; }
.crm-form-row > .grow { flex: 1; min-width: 0; }
.crm-form-row > .crm-name.grow { min-width: 160px; }
.crm-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.crm-quick button { padding: 6px 10px; font-size: 12px; }
textarea.crm-text { min-height: 72px; resize: vertical; font-size: 14px; line-height: 1.45; }

/* Verlauf */
.crm-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.crm-kinds button { padding: 6px 12px; font-size: 12.5px; }
.crm-ev { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13.5px; align-items: start; }
.crm-ev > i { font-style: normal; color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.crm-ev-tx { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.crm-ev-tx b { font-weight: 700; }
.crm-ev-tx small { display: block; color: var(--text-dim); font-size: 12px; margin-top: 3px; white-space: normal; }
.crm-ev-acts { display: flex; gap: 4px; }
.crm-ibtn { width: 30px; height: 30px; padding: 0; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--text-faint); display: inline-flex; align-items: center; justify-content: center; }
.crm-ibtn:hover, .crm-ibtn:active { background: var(--panel-2); color: var(--text); border-color: var(--border); }
.crm-ibtn.del:hover, .crm-ibtn.del:active { color: var(--red); border-color: var(--red); background: var(--panel-2); }
.crm-confirm { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.crm-confirm span { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.crm-confirm button { padding: 6px 10px; font-size: 12px; }

/* Projekte */
.crm-proj { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; text-decoration: none; color: var(--text); }
.crm-proj:first-child { border-top: 0; }
.crm-proj:hover b { color: var(--blue); }
.crm-proj b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-proj i { font-style: normal; color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.crm-st { height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; }
.crm-st.run { background: rgba(91,141,239,.15); border-color: rgba(91,141,239,.4); color: var(--blue); }

/* Einstellungen */
.settings-body.crm-settings { max-width: 560px; }
.crm-trow { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.crm-trow + .crm-trow { border-top: 1px solid var(--border); }
.crm-trow.dragging { opacity: .4; }
.crm-trow.over { box-shadow: inset 0 2px 0 var(--blue); }
.crm-grip { color: var(--text-faint); cursor: grab; display: flex; }
.crm-trow input[type="color"] { width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: transparent; flex: none; cursor: pointer; }
.crm-trow input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.crm-trow input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.crm-trow .nm { flex: 1; min-width: 0; }
.crm-trow .nm input { height: 34px; font-size: 14px; font-weight: 700; background: transparent; border-color: transparent; padding: 0 8px; }
.crm-trow .nm input:hover { border-color: var(--border); }
.crm-trow .nm input:focus { background: var(--panel-2); border-color: var(--blue); }
.crm-trow .tag { height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; }
.crm-trow .cnt { color: var(--text-dim); font-size: 12.5px; width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.crm-trow.add { color: var(--blue); font-weight: 700; font-size: 13px; }
.crm-trow.add input { height: 34px; font-size: 14px; }
.crm-statusline { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.crm-statusline.ok { color: var(--green); }
.crm-statusline.off { color: var(--amber); }
.crm-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.settings-hint { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin: -12px 6px 22px; }

/* Herkunft, Beziehungen, Dateien */
.crm-origin { width: 100%; }
.crm-rel, .crm-file { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.crm-rel:first-of-type, .crm-file:first-of-type { border-top: 0; }
.crm-rel i { font-style: normal; color: var(--text-dim); font-size: 12px; min-width: 112px; }
.crm-rel-name { flex: 1; min-width: 0; text-align: left; background: transparent; border: 0; padding: 0; color: var(--text); font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.crm-rel-name:hover, .crm-rel-name:active { background: transparent; color: var(--blue); }
.crm-pick { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.crm-pick button { display: flex; align-items: baseline; gap: 8px; text-align: left; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; font-weight: 400; }
.crm-pick button b { font-weight: 700; }
.crm-pick button small { color: var(--text-dim); font-size: 12px; }
.crm-pick button:hover { border-color: var(--blue); }
.crm-fi { width: 32px; height: 36px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel-2); font-size: 9px; font-weight: 700; color: var(--text-dim); display: flex; align-items: center; justify-content: center; flex: none; }
.crm-file-tx { flex: 1; min-width: 0; }
.crm-file-tx a { display: block; color: var(--text); text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-file-tx a:hover { color: var(--blue); }
.crm-file-tx small { display: block; color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.drag { outline: 2px dashed var(--blue); outline-offset: 4px; border-radius: 10px; }

/* Ansprechpartner */
.crm-persons .crm-sec { margin-top: 16px; }
.crm-person { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.crm-person:first-of-type { border-top: 0; }
.crm-person-tx { flex: 1; min-width: 0; }
.crm-person-tx b { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.crm-person-tx small { display: block; color: var(--text-dim); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.crm-person-tx small a { color: var(--text-dim); text-decoration: none; }
.crm-person-tx small a:hover { color: var(--blue); }