/* ==========================================================================
   Odevina -- Design-Tokens (Farben, Typografie, Abstaende)
   Farben/Schrift 1:1 aus der Design-Vorlage uebernommen (odelina-backend.html
   von David, "Claude Design"): Jost als Schrift, Aubergine/Lavendel/Violett
   als Markenfarben. Siehe auch Farben-und-Einsatz.txt im Logo-Ordner.
   ========================================================================== */
:root {
  --color-bg: #FAF8FC;
  --color-surface: #FFFFFF;
  --color-surface-sunken: #F1EBF8;
  --color-border: #ECE6F2;
  --color-border-strong: #E3DCEB;
  --color-ink: #2B1B3F;
  --color-muted: #6B6177;

  --color-primary: #261837; /* Buttons und Seitenleiste: gleicher Ton */
  --color-sidebar: var(--color-primary); /* Grundton von Seitenleiste und Anmeldeseite */
  --color-primary-hover: #3E2C55;
  --color-accent: #6E56C9;
  --color-accent-soft: #F1EBF8;
  --color-lavendel: #A996E3;

  --color-success: #1F6B45;
  --color-success-soft: #E6F4EC;
  --color-info: #5B45B0;
  --color-info-soft: #F1EBF8;
  --color-warning: #8A5210;
  --color-warning-soft: #FDF1E3;
  --color-danger: #C0453B;
  --color-danger-soft: #FBE7E5;

  --font-display: "Jost", system-ui, sans-serif;
  --font-body: "Jost", system-ui, sans-serif;

  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;

  --shadow-card: 0 10px 28px rgba(43, 27, 63, 0.08);
}

/* Leistungs-Kategorien im Kalender: fixe Palette, wird dynamisch pro
   Kategorie zugewiesen (siehe getCategoryColor() in calendar.js), damit z.B.
   alle "Farbe"-Termine ueberall dieselbe Farbe haben. */
:root {
  --cat-1-bg: #E4DAF8; --cat-1-fg: #4B3B70;
  --cat-2-bg: #F9DDE9; --cat-2-fg: #7A3A55;
  --cat-3-bg: #D5EEE4; --cat-3-fg: #1F6B55;
  --cat-4-bg: #FBE9C8; --cat-4-fg: #8A5210;
  --cat-5-bg: #DCEAFB; --cat-5-fg: #1B4E87;
  --cat-6-bg: #F3E0D8; --cat-6-fg: #8A4A2E;
}

/* ==========================================================================
   Basis / Reset
   ========================================================================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-bg);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0 0 0.4rem;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.15rem; margin-top: 2rem; }

p { color: var(--color-muted); margin-top: 0; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-ink); }

.page-subtitle {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
button, .btn {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-ink);
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

button:hover { border-color: var(--color-accent); }
button:active { transform: translateY(1px); }

button.btn-primary, .btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}
button.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

button.btn-danger-text {
  background: transparent;
  border: none;
  color: var(--color-danger);
  padding: 0.3rem 0.6rem;
}
button.btn-danger-text:hover { background: var(--color-danger-soft); border-color: transparent; }

/* ==========================================================================
   Formulare
   ========================================================================== */
label {
  display: block;
  font-weight: 500;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
}

input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.error {
  color: var(--color-danger);
  font-size: 0.85rem;
}

/* ==========================================================================
   Karten / Badges
   ========================================================================== */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}
.pill-success { background: var(--color-success-soft); color: var(--color-success); }
.pill-info { background: var(--color-info-soft); color: var(--color-info); }
.pill-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.pill-neutral { background: var(--color-bg); color: var(--color-muted); }

/* ==========================================================================
   App-Rahmen: Sidebar + Topbar
   Struktur (siehe layout.js): .app-shell > .sidebar + .content(.topbar + .main-content)
   ========================================================================== */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 248px;
  flex-shrink: 0;
  /* Grundton plus schimmernde Flecken: unten links (wie auf der Anmeldeseite) und oben rechts (hinter dem Logo) */
  background: radial-gradient(150px 150px at 100% 0%, rgba(138, 99, 235, .55), transparent 70%), radial-gradient(320px 280px at 0% 100%, rgba(138, 99, 235, .5), transparent 70%), var(--color-sidebar);
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  transition: width 0.18s ease, padding 0.18s ease;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.app-shell.sidebar-collapsed .sidebar { width: 76px; padding: 28px 10px; }
/* Eingeklappt ist die Leiste schmal: die Leuchtflecken kleiner, damit sie nicht groesser wirken als ausgeklappt */
.app-shell.sidebar-collapsed .sidebar {
  background: radial-gradient(150px 150px at 100% 0%, rgba(138, 99, 235, .55), transparent 70%), radial-gradient(160px 150px at 0% 100%, rgba(138, 99, 235, .5), transparent 70%), var(--color-sidebar);
}
/* Beim Laden einer Seite soll die Leiste nicht sichtbar zusammen-/auseinanderfahren */
.app-shell.no-anim .sidebar { transition: none; }

.sidebar .brand-mark {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sidebar .brand-mark img { width: auto; }
.sidebar .brand-mark .brand-mark-full { display: flex; flex-direction: column; gap: 5px; width: 172px; }
.sidebar .brand-mark .brand-mark-full img { display: block; width: 100%; height: auto; }
.brand-tagline { display: block; font-size: 8.4px; font-weight: 500; line-height: 1; letter-spacing: .12em; margin-right: -.12em; text-transform: uppercase; text-align: justify; text-align-last: justify; white-space: nowrap; color: #DDD3F0; }
.sidebar .brand-mark img.brand-mark-icon { display: none; height: 34px; border-radius: 8px; }
.app-shell.sidebar-collapsed .sidebar .brand-mark-full { display: none; }
.app-shell.sidebar-collapsed .sidebar img.brand-mark-icon { display: block; height: 50px; }

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar nav a {
  height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #CFC4DD;
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar nav a svg { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; }

.sidebar nav a:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; }

.sidebar nav a.active {
  background: var(--color-primary-hover);
  color: #FFFFFF;
  font-weight: 500;
}
.sidebar nav a.active svg { stroke: var(--color-lavendel); }

.app-shell.sidebar-collapsed .sidebar nav a { justify-content: center; padding: 0; }
.app-shell.sidebar-collapsed .sidebar nav a .label { display: none; }

.sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
/* Nur fuer Inhaber:innen: Umsaetze und Einstellungen sitzen unten, direkt ueber der Salon-Karte */
/* Team: Mitarbeiterakte (nur Inhaber:innen) und kleine Ansicht fuer Mitarbeitende */
/* Das (!) neben dem Titel der Akte: ein Ausrufezeichen statt (i), ohne Pulsieren */
.info-tip.tip-bang { font-style: normal; font-weight: 700; }
/* Der Akte-Knopf steht etwas abgesetzt von Bearbeiten und Loeschen (Personaldaten, nur Inhaber:in) */
.file-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; color: var(--color-accent); border-color: var(--color-accent); }
#employees-table td button { vertical-align: middle; }
.file-btn::after { content: ''; position: absolute; right: -9px; top: 18%; height: 64%; border-right: 1px solid var(--color-border-strong); }
/* Akte: Reiter und Verfuegbarkeit */
.file-tabs { display: flex; gap: 4px; margin: 12px 0 14px; border-bottom: 1px solid var(--color-border); }
.file-tab { border: 0; border-radius: 8px 8px 0 0; background: none; padding: 9px 16px; font: inherit; font-weight: 500; color: var(--color-muted); cursor: pointer; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.file-tab:hover { color: var(--color-ink); background: var(--color-accent-soft); }
.file-tab.active { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.file-pane { min-height: 400px; }
.file-pane[hidden] { display: none; }
.file-address-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.file-avail-head, .file-avail-row { display: grid; grid-template-columns: 96px 110px 1fr 1fr; gap: 10px; align-items: center; }
.file-avail-head { margin-bottom: 4px; font-size: 0.8rem; color: var(--color-muted); }
.file-avail-row { margin-bottom: 6px; }
.file-avail-row input[type="time"] { margin: 0; min-width: 0; }
.file-avail-off { display: flex; justify-content: center; margin: 0; }
.file-avail-off input { width: auto; margin: 0; }
/* Dienstplan (Inhaber:in): Regelverstoss und Stunden gegen das Soll */
.schedule-table td.sched-violation { background: var(--color-danger-soft); box-shadow: inset 0 0 0 1px var(--color-danger); position: relative; }
.schedule-table td.sched-violation::after { content: '!'; position: absolute; top: 4px; right: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-danger); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 14px; text-align: center; }
.schedule-table td.sched-hours { white-space: nowrap; font-weight: 500; font-size: 0.9rem; text-align: left; }
.ts-off-note { margin: -0.6rem 0 1rem; font-size: 0.85rem; }
.schedule-table td.sched-hours-diff { color: var(--color-warning); }
.file-person { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; font-weight: 500; font-size: 1.05rem; }
.file-section-title { margin: 16px 0 8px; font-weight: 500; }
.file-wage-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.file-wage-row input { width: 140px; margin: 0; }
.schedule-readonly { white-space: nowrap; font-size: 0.9rem; }

.sidebar-nav-owner { margin-bottom: 19px; padding: 6px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; }

.sidebar-salon-card {
  padding: 12px;
  border-radius: 12px;
  background: var(--color-primary-hover);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebar-salon-card-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sidebar-salon-card .avatar { background: var(--color-lavendel); flex-shrink: 0; }
.sidebar-salon-card .info { display: flex; flex-direction: column; min-width: 0; }
.sidebar-salon-card .name { font-size: 15px; font-weight: 500; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-salon-card .address { font-size: 13px; color: #CFC4DD; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-salon-card .logout-link {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; color: var(--color-lavendel);
}
.sidebar-salon-card .logout-link svg { width: 18px; height: 18px; flex-shrink: 0; }

.app-shell.sidebar-collapsed .sidebar-salon-card { padding: 10px; align-items: center; }
.app-shell.sidebar-collapsed .sidebar-salon-card-top { justify-content: center; }
.app-shell.sidebar-collapsed .sidebar-salon-card .info { display: none; }
.app-shell.sidebar-collapsed .sidebar-salon-card .logout-link { justify-content: center; }
.app-shell.sidebar-collapsed .sidebar-salon-card .logout-link .label { display: none; }

.sidebar-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  background: none;
  color: #A89BB8;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  border-radius: 10px;
}
.sidebar-toggle:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
.sidebar-toggle svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.18s ease; }
.app-shell.sidebar-collapsed .sidebar-toggle { justify-content: center; }
.app-shell.sidebar-collapsed .sidebar-toggle .label { display: none; }
.app-shell.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

/* ---------- Content-Bereich: Topbar + Hauptinhalt ---------- */
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  flex-shrink: 0;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 32px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.global-search { position: relative; width: 360px; flex-shrink: 0; }
.global-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin: 0;
  font-weight: 400;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  color: var(--color-muted);
}
.global-search-field svg { flex-shrink: 0; }
.global-search-field input {
  border: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
  color: var(--color-ink);
  background: transparent;
}
.global-search-field input:focus { outline: none; }
.global-search-panel {
  position: absolute; top: calc(100% + 6px); left: 0;
  width: 380px; max-width: calc(100vw - 72px);
  max-height: 60vh; overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 8px;
  z-index: 50;
  display: none;
}
.global-search-panel.open { display: block; }
.global-search-group-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  padding: 6px 8px 2px;
}
.global-search-result {
  display: block;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--color-ink);
  text-decoration: none;
  font-size: 0.85rem;
}
.global-search-result:hover, .global-search-result.active { background: var(--color-accent-soft); }
.global-search-result .gs-main { display: block; }
.global-search-result .gs-sub { display: block; font-size: 0.75rem; color: var(--color-muted); margin-top: 1px; }
.global-search-result mark { background: rgba(110, 86, 201, 0.22); color: inherit; border-radius: 3px; padding: 0 1px; }
.global-search-empty { padding: 10px 8px; font-size: 0.8rem; color: var(--color-muted); }

.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }

.header-icon-btn {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.header-support-btn {
  height: 44px; padding: 0 16px;
  display: flex; align-items: center; gap: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 0.9rem; font-weight: 600;
  text-decoration: none;
}
.header-support-btn:hover { color: var(--color-ink); border-color: var(--color-accent); }
.header-icon-btn .dot {
  position: absolute; top: 9px; right: 10px;
  width: 8px; height: 8px; border-radius: 4px;
  background: var(--color-accent);
}

.header-notif-panel {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 260px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 14px;
  font-size: 0.85rem;
  color: var(--color-muted);
  z-index: 50;
  display: none;
}
.header-notif-panel.open { display: block; }

.header-profile { display: flex; align-items: center; gap: 10px; padding-left: 8px; }
.header-profile .who { display: flex; flex-direction: column; }
.header-profile .name { font-size: 14px; font-weight: 500; color: var(--color-ink); }
.header-profile .role { font-size: 12px; color: var(--color-muted); }

.main-content {
  flex: 1;
  padding: 32px 32px 76px; /* unten Platz fuer den schwebenden Wunsch-Knopf */
  overflow-y: auto;
}

.page-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.page-head h1 { margin: 0; }
.page-head .count { font-size: 15px; color: var(--color-muted); }

.filter-tabs {
  display: flex;
  padding: 4px;
  border-radius: 12px;
  background: var(--color-accent-soft);
  gap: 2px;
}
.filter-tab {
  height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #5E5470;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.filter-tab.active { background: var(--color-surface); color: var(--color-ink); font-weight: 600; }

/* ==========================================================================
   Tabellen
   ========================================================================== */
table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}

th {
  font-size: 0.75rem;
  color: var(--color-muted);
  background: transparent;
  font-weight: 500;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--color-bg); }

td.numeric { font-variant-numeric: tabular-nums; }

/* Filterzeile unter der Tabellenkopfzeile (Kunden) */
tr.filter-row th { padding: 6px 8px; background: var(--color-bg); font-weight: 400; }
tr.filter-row input, tr.filter-row select { width: 100%; height: 32px; margin: 0; padding: 0 8px; font-size: 0.8rem; border-radius: 8px; box-sizing: border-box; }
tr.filter-row input[type="number"] { min-width: 52px; }
tbody tr.filler:hover td { background: transparent; }

/* Avatar + Name in einer Tabellenzelle (die Zelle selbst bleibt table-cell, sonst verrutschen die Spaltenlinien) */
.cell-person { display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; }

/* ==========================================================================
   Formular-Karte
   ========================================================================== */
.form-card {
  max-width: 460px;
}

.checkbox-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.checkbox-pills label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  font-size: 0.85rem;
  margin: 0;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  cursor: pointer;
  background: var(--color-surface);
}

.checkbox-pills input { width: auto; margin: 0; }
.checkbox-pills label.pill-all { background: var(--color-accent-soft); border-color: var(--color-lavendel); }

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-accent-soft);
  flex-shrink: 0;
}

/* ==========================================================================
   Kalender: Tagesansicht mit Spalten pro Mitarbeiter
   ========================================================================== */
.calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.calendar-toolbar label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.calendar-toolbar input { width: auto; margin: 0; }

/* Tag wechseln: Heute, Pfeile, Datum mit Monatsauswahl */
.day-nav { display: flex; align-items: center; gap: 6px; }
.day-nav button { padding: 0.5rem 0.9rem; }
.day-nav .day-nav-arrow { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.day-nav .day-nav-arrow svg { width: 18px; height: 18px; }
.day-nav .day-nav-today.is-current { color: var(--color-muted); }
.day-nav-pick { position: relative; margin-left: 6px; }
.day-nav .day-nav-label { min-width: 17.5em; text-align: center; font-weight: 600; }
.rev-nav .day-nav-label { min-width: 15em; }
.rev-pop-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.rev-nav .day-nav-today.is-current { color: var(--color-muted); }
.day-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 296px; padding: 12px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.day-pop[hidden] { display: none; }
.day-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.day-pop-head strong { font-size: 0.95rem; }
.day-pop-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
/* Datumsfeld mit eigener Monatsauswahl (date-field.js) */
.datef { position: relative; display: block; margin-top: 0.35rem; }
.datef-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0.6rem 0.7rem; font-size: 0.95rem; font-weight: 400; text-align: left; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.datef-btn svg { width: 18px; height: 18px; flex: none; color: var(--color-accent); }
.datef-btn.empty .datef-text { color: var(--color-muted); }
.datef-btn:disabled { opacity: 0.6; cursor: default; }
.datef-pop { text-align: left; font-weight: 400; }
.datef .day-nav-arrow { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.datef .day-nav-arrow svg { width: 18px; height: 18px; }
.datef-quick { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.datef-quick button { flex: 1; padding: 6px 0; font-size: 0.85rem; }
.day-pop-wd { text-align: center; font-size: 0.72rem; color: var(--color-muted); padding: 4px 0; }
.day-nav .day-pop-day, .datef .day-pop-day { padding: 0; height: 36px; border: 0; background: transparent; font-weight: 500; border-radius: 8px; }
.day-nav .day-pop-day:hover, .datef .day-pop-day:hover { background: var(--color-accent-soft); }
.day-nav .day-pop-day.other, .datef .day-pop-day.other { color: var(--color-muted); opacity: 0.55; }
.day-nav .day-pop-day.today, .datef .day-pop-day.today { box-shadow: inset 0 0 0 1.5px var(--color-accent); }
.day-nav .day-pop-day.selected, .datef .day-pop-day.selected { background: var(--color-primary); color: #fff; opacity: 1; }
@media (max-width: 640px) { .day-nav { flex-wrap: wrap; } .day-nav .day-nav-label { min-width: 0; } }

.calendar-legend { display: flex; gap: 14px; font-size: 13px; color: var(--color-muted); margin-left: auto; flex-wrap: wrap; }
.calendar-legend .swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }

.calendar-wrapper {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  /* Der Kalender scrollt in sich (Hoehe setzt calendar.js passend zum Fenster), damit die Kopfzeile mit den Namen oben stehen
     bleibt und man beim Scrollen immer sieht, welche Spalte zu wem gehoert. */
  overflow: auto;
  margin-bottom: 0;
}

.calendar-header-row, .calendar-body { width: max-content; min-width: 100%; }

.calendar-header-row {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.calendar-time-gutter {
  width: 64px;
  flex-shrink: 0;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}

.calendar-employee-header {
  flex: 1;
  min-width: 160px;
  padding: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.calendar-employee-header > div { display: flex; flex-direction: column; min-width: 0; }
.calendar-employee-header .count { font-size: 12px; color: var(--color-muted); display: block; }

.calendar-body {
  display: flex;
  position: relative;
}

.calendar-hour-labels {
  width: 64px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--color-surface);
}

.calendar-hour-label {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  font-size: 0.72rem;
  color: var(--color-muted);
  text-align: center;
}

.calendar-column {
  flex: 1;
  min-width: 160px;
  position: relative;
  border-right: 1px solid var(--color-border);
  background-image: linear-gradient(var(--color-border) 1px, transparent 1px);
}

.calendar-column:last-child { border-right: none; }

.calendar-now-line {
  position: absolute;
  left: 64px; right: 0;
  height: 2px;
  background: var(--color-accent);
  z-index: 3;
}
.calendar-now-line .now-label {
  position: absolute; left: -8px; top: 50%; transform: translate(-100%, -50%);
  padding: 2px 6px; border-radius: 6px;
  background: var(--color-accent); color: #fff;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}

.appointment-block {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 8px;
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.3;
  overflow: hidden;
  cursor: pointer;
}

.appointment-block strong { display: block; font-size: 0.82rem; font-weight: 500; }

.appointment-block.cancelled {
  opacity: 0.45;
  text-decoration: line-through;
}
/* Der Termin unter dem Mauszeiger hebt sich ab: Rahmen in der Textfarbe der Leistung, Schatten, nach vorn */
.appointment-block { transition: box-shadow 0.1s ease, filter 0.1s ease; }
.appointment-block:hover, .appointment-block.nested:hover, .appointment-block.side:hover { box-shadow: 0 0 0 2px currentColor, 0 6px 16px rgba(43, 27, 63, 0.22); filter: saturate(1.15) brightness(0.97); z-index: 6; }
.appointment-block.cancelled:hover { opacity: 0.9; }
/* Stornierter Termin im schmalen Streifen neben einem neuen Termin zur selben Zeit */
.appointment-block.cancelled.side { padding: 0.25rem 0.3rem; opacity: 0.6; z-index: 1; }
.appointment-block.cancelled.side strong { font-size: 0.7rem; line-height: 1.25; overflow-wrap: anywhere; }

.calendar-empty-state {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--color-muted);
}

/* ==========================================================================
   Leistungen & Preise: nach Kategorie gruppiert
   ========================================================================== */

/* ==========================================================================
   Team: Dienstplan
   ========================================================================== */
.schedule-table { width: 100%; border-collapse: collapse; }
.schedule-table th, .schedule-table td { padding: 0.6rem 0.7rem; font-size: 0.85rem; }
.schedule-table .day-inputs { display: flex; align-items: center; gap: 6px; }
.schedule-table .day-inputs input[type="time"] { width: 92px; margin: 0; padding: 0.4rem 0.5rem; font-size: 0.8rem; }
.schedule-table .day-off-label { display: flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 400; margin: 0; white-space: nowrap; }
.schedule-table .day-off-label input { width: auto; margin: 0; }

/* ==========================================================================
   Kunden
   ========================================================================== */
/* Das Profil rechts ist immer so hoch wie die Liste links (stretch); sein Inhalt scrollt bei Bedarf darin,
   damit die Liste beim Wechsel zwischen Kunden nicht waechst oder schrumpft (contain: size). */
.customers-layout { display: flex; gap: 20px; align-items: stretch; }
.customer-row-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.customer-row-name .who { display: flex; flex-direction: column; min-width: 0; }
.customer-row-name .full-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.customer-row-name .contact { font-size: 12px; color: var(--color-muted); }

/* Kundenakte: Fenster von rechts mit Reitern (Uebersicht, Termine, Verlauf) */
dialog.cust-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto; margin: 0;
  width: min(540px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; border-radius: 16px 0 0 16px; overflow: hidden;
  background: var(--color-surface); color: var(--color-ink);
  box-shadow: -12px 0 40px rgba(43, 27, 63, 0.25);
}
dialog.cust-drawer[open] { display: flex; flex-direction: column; animation: cd-in 0.16s ease-out; }
dialog.cust-drawer::backdrop { background: rgba(43, 27, 63, 0.45); }
@keyframes cd-in { from { transform: translateX(36px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.cust-drawer[open] { animation: none; } }
.cd-head { flex: none; padding: 22px 24px 0; }
.cd-title { flex: 1; min-width: 0; }
.cd-title .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-close { flex: none; width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border-color: transparent; background: transparent; color: var(--color-muted); }
.cd-close:hover { background: var(--color-accent-soft); color: var(--color-ink); border-color: transparent; }
.cd-close svg { width: 18px; height: 18px; }
.cd-actions { flex: none; padding: 16px 24px 0; }
.cd-tabs { flex: none; display: flex; gap: 4px; padding: 14px 24px 0; border-bottom: 1px solid var(--color-border); }
.cd-tab { padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--color-muted); font-weight: 500; margin-bottom: -1px; }
.cd-tab:hover { color: var(--color-ink); border-color: transparent; }
.cd-tab.active { color: var(--color-ink); border-bottom-color: var(--color-primary); }
.cd-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 28px; }
.cd-panel { display: flex; flex-direction: column; gap: 18px; }
.cd-panel[hidden] { display: none; }
@media (max-width: 640px) { dialog.cust-drawer { border-radius: 0; } }
.customer-profile-head { display: flex; align-items: center; gap: 14px; }
.customer-profile-head .avatar { width: 56px; height: 56px; font-size: 18px; background: var(--color-lavendel); }
.customer-profile-head .name { font-size: 20px; font-weight: 500; display: block; }
.customer-profile-head .since { font-size: 13px; color: var(--color-muted); }
.cp-contact-label { display: inline-block; min-width: 3.6em; font-size: 12px; color: var(--color-muted); }
.customer-profile-contact { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.customer-profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.customer-profile-stats > div { padding: 10px 12px; border-radius: 10px; background: var(--color-bg); display: flex; flex-direction: column; }
.customer-profile-stats .value { font-size: 18px; font-weight: 500; }
.customer-profile-stats .label { font-size: 12px; color: var(--color-muted); }
.customer-profile-section { display: flex; flex-direction: column; gap: 8px; }
.customer-profile-section .section-label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--color-muted); }
.customer-profile-section .box { padding: 12px; border-radius: 10px; background: var(--color-accent-soft); font-size: 14px; line-height: 1.45; }
.customer-profile-section .box.note { background: var(--color-warning-soft); color: #5C3A0C; }
.customer-profile-visit { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; padding: 4px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; }
.customer-profile-visit:hover, .customer-profile-visit:focus-visible { background: var(--color-accent-soft); outline: none; }
.customer-profile-visit .who { color: var(--color-muted); flex: none; }
.customer-profile-visit.cancelled .what { text-decoration: line-through; color: var(--color-muted); }
.customer-profile-visit .pill { font-size: 11px; }

/* Verlauf im Kundenprofil */
.cp-hist-entry { padding: 8px 0; border-top: 1px solid var(--color-border); font-size: 13px; }
.cp-hist-entry:first-of-type { border-top: 0; }
.cp-hist-head { display: flex; align-items: center; gap: 8px; }
.cp-hist-head .pill { font-size: 11px; flex: none; }
.cp-hist-what { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-hist-meta { color: var(--color-muted); font-size: 12px; margin: 2px 0 4px; }
.cp-hist-change { line-height: 1.45; overflow-wrap: anywhere; }
.cp-hist-field { color: var(--color-muted); }
.cp-hist-before { text-decoration: line-through; color: var(--color-muted); }
.cp-hist-after { font-weight: 500; }
#cp-hist-more[hidden] { display: none; }
.cp-hist-toggle { align-self: flex-start; padding: 4px 10px; font-size: 12px; }
.customer-profile-actions { display: flex; gap: 10px; }
.customer-profile-empty { color: var(--color-muted); font-size: 0.9rem; padding: 2rem 0; text-align: center; }

/* ==========================================================================
   Umsaetze
   ========================================================================== */
.revenue-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.revenue-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.revenue-kpi .label { font-size: 14px; color: var(--color-muted); }
.revenue-kpi .value { font-size: 30px; font-weight: 500; font-variant-numeric: tabular-nums; }
.revenue-kpi .sub { font-size: 13px; color: var(--color-muted); }

.revenue-split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.revenue-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px 24px;
}
.revenue-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 14px; }
.revenue-bar-row .name { width: 140px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.revenue-bar-track { flex: 1; height: 10px; border-radius: 5px; background: var(--color-bg); overflow: hidden; }
.revenue-bar-fill { height: 100%; background: var(--color-accent); }
.revenue-bar-row .amount { width: 90px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Einstellungen
   ========================================================================== */
.settings-section { margin-bottom: 1.5rem; }
.opening-hours-row { display: flex; align-items: center; gap: 12px; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); }
.opening-hours-row:last-child { border-bottom: none; }
.opening-hours-row .day-name { width: 110px; flex-shrink: 0; font-size: 0.85rem; font-weight: 500; }
.opening-hours-row input[type="time"] { width: 110px; margin: 0; }
.opening-hours-row label.closed-label { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 400; margin: 0; margin-left: auto; }
.opening-hours-row label.closed-label input { width: auto; margin: 0; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0; }
.toggle-row label { margin: 0; }
.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.settings-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.settings-form-grid label { margin: 0; }

.toggle-switch {
  width: 44px; height: 26px; flex-shrink: 0;
  padding: 3px;
  border: none; border-radius: 13px;
  background: var(--color-border-strong);
  display: flex; justify-content: flex-start;
  cursor: pointer;
}
.toggle-switch span {
  width: 20px; height: 20px; border-radius: 10px;
  background: #FFFFFF; box-shadow: 0 1px 2px rgba(43, 27, 63, 0.25);
  transition: transform 0.15s ease;
}
.toggle-switch.on { background: var(--color-accent); }
.toggle-switch.on span { transform: translateX(18px); }

/* ==========================================================================
   Dashboard-Kacheln (Uebersicht)
   ========================================================================== */
.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.dash-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 116px;
  min-width: 0;
}
.dash-kpi .label { font-size: 14px; color: var(--color-muted); }
.dash-kpi .value { font-family: var(--font-display); font-size: 32px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.dash-kpi .sub { font-size: 13px; color: var(--color-muted); }
.dash-kpi .sub.positive { color: var(--color-success); }
.dash-kpi-bar { flex-grow: 1; height: 8px; border-radius: 4px; background: var(--color-accent-soft); display: flex; margin: 0 12px; }
.dash-kpi-bar > span { height: 8px; border-radius: 4px; background: var(--color-accent); display: block; }

.dash-main-row { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: stretch; }

.dash-upcoming-card {
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dash-upcoming-head {
  height: 60px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
}
.dash-upcoming-head h2 { margin: 0; }
.dash-upcoming-row {
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--color-border);
}
.dash-upcoming-row:last-child { border-bottom: none; }
.dash-upcoming-row[data-appt-id] { cursor: pointer; transition: background 0.12s ease; }
.dash-upcoming-row[data-appt-id]:hover, .dash-upcoming-row[data-appt-id]:focus-visible { background: var(--color-accent-soft); outline: none; }
.dash-upcoming-row .time-col { width: 64px; flex-shrink: 0; display: flex; flex-direction: column; }
.dash-upcoming-row .time-col .time { font-size: 16px; font-weight: 600; }
.dash-upcoming-row .time-col .duration { font-size: 12px; color: var(--color-muted); }
.dash-upcoming-row .who-col { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.dash-upcoming-row .who-col .customer { font-size: 15px; font-weight: 500; }
.dash-upcoming-row .who-col .service { font-size: 13px; color: var(--color-muted); }
.dash-upcoming-row .employee-col { width: 150px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.dash-upcoming-row .employee-col .avatar { width: 28px; height: 28px; font-size: 12px; }
.dash-upcoming-empty { padding: 2rem 24px; color: var(--color-muted); text-align: center; }

.dash-utilization-card {
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dash-utilization-head { display: flex; align-items: baseline; justify-content: space-between; }
.dash-utilization-head h2 { margin: 0; }
.dash-utilization-bars { flex-grow: 1; display: flex; align-items: flex-end; gap: 12px; padding-top: 8px; min-height: 160px; }
.dash-utilization-bar-col { flex-grow: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.dash-utilization-bar-col .pct { font-size: 12px; color: var(--color-muted); }
.dash-utilization-bar-col .bar { width: 100%; border-radius: 6px 6px 2px 2px; background: var(--color-accent-soft); }
.dash-utilization-bar-col.today .bar { background: var(--color-primary); }
.dash-utilization-bar-col .day { font-size: 13px; color: var(--color-ink); }

/* Feste Spalten fuer die angepasste Anordnung: ein ausgeblendeter oder leerer Platz bleibt als Luecke stehen.
   --dash-col setzt dashboard-layout.js; auf schmalen Bildschirmen gilt stattdessen die Reihenfolge (order). */
@media (min-width: 901px) {
  .dash-kpi-row > [data-widget],
  .dash-main-row > [data-widget] { grid-column: var(--dash-col, auto); grid-row: 1; }
}

/* ==========================================================================
   Dashboard anpassen (Button + Fenster mit Mini-Monitor)
   ========================================================================== */
.dash-customize-btn { margin-left: auto; padding: 9px 11px; background: transparent; line-height: 0; }
.dash-customize-btn svg { width: 18px; height: 18px; }
.dash-customize-btn:hover { background: var(--color-accent-soft); }

.dash-settings-backdrop {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(43, 27, 63, 0.2);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.dash-settings-backdrop.open { opacity: 1; pointer-events: auto; }

/* Panel von unten, mittig, oben abgerundet, halbtransparentes Glas */
.dash-settings-panel {
  position: fixed; left: 50%; bottom: 0; z-index: 121;
  width: 820px; max-width: 94vw; max-height: 92vh;
  display: flex; flex-direction: column;
  border: 1px solid var(--color-border); border-bottom: none;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 32px rgba(43, 27, 63, 0.18);
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  transform: translate(-50%, 100%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.dash-settings-panel.open { transform: translate(-50%, 0); visibility: visible; transition: transform 0.25s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) {
  .dash-settings-backdrop, .dash-settings-panel, .dash-settings-panel.open { transition: none; }
}

.dash-settings-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 20px 28px 8px; }
.dash-settings-head h2 { margin: 0; }
.dash-settings-close { padding: 7px; line-height: 0; background: transparent; border-color: transparent; }
.dash-settings-close:hover { background: var(--color-accent-soft); border-color: transparent; }
.dash-settings-close svg { width: 18px; height: 18px; }
.dash-settings-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 28px 36px; scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
.dash-settings-foot { flex: none; padding: 14px 28px 20px; border-top: 1px solid var(--color-border); display: flex; gap: 10px; }
.dash-settings-hint { margin: 0 0 16px; font-size: 0.85rem; line-height: 1.5; color: var(--color-muted); }

/* Mini-Monitor: dunkler Rahmen mit Standfuss, darin das Schema des Dashboards */
.dash-monitor {
  position: relative; max-width: 700px; margin: 4px auto 34px;
  padding: 22px 22px 28px; border-radius: 20px;
  background: linear-gradient(180deg, var(--color-primary-hover), var(--color-primary));
  box-shadow: 0 12px 26px rgba(43, 27, 63, 0.28);
}
.dash-monitor::before {
  content: ""; position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%);
  width: 20px; height: 20px; background: var(--color-primary);
}
.dash-monitor::after {
  content: ""; position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  width: 110px; height: 8px; border-radius: 5px; background: var(--color-primary);
}
.dash-monitor-screen { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 10px; background: var(--color-surface-sunken); }
.dm-card-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dm-card-row .dm-slot { height: 52px; }
.dm-kpi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dm-main-row { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.dm-kpi-row .dm-slot { height: 62px; }
.dm-main-row .dm-slot { height: 120px; }
.dm-greeting { height: 40px; }

.dm-slot-empty {
  width: 100%; height: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--color-border-strong); border-radius: 8px;
  font-size: 11px; font-weight: 600; color: var(--color-muted);
}
.dm-tile {
  position: relative; box-sizing: border-box; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 6px 8px; line-height: 1.3;
  border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface);
  font-size: 13px; font-weight: 600; color: var(--color-ink);
  cursor: grab; user-select: none;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
.dm-tile:active { cursor: grabbing; }
.dm-tile.dragging { opacity: 0.3; }
.dm-tile.dm-fixed { cursor: default; color: var(--color-muted); background: var(--color-surface-sunken); border-style: dashed; border-color: var(--color-border-strong); }
/* Waehrend des Ziehens: alle passenden Plaetze in der Akzentfarbe, der Platz unter der Maus staerker */
.dm-slot.drop-target .dm-tile,
.dm-slot.drop-target .dm-slot-empty { box-shadow: inset 0 0 0 1.5px var(--color-accent); background: var(--color-accent-soft); }
.dm-slot.drag-over .dm-tile,
.dm-slot.drag-over .dm-slot-empty { box-shadow: inset 0 0 0 3px var(--color-accent); }

/* Ablage "Ausgeblendet" */
.dm-shelf-section { margin-top: 2px; padding-top: 12px; border-top: 1px dashed var(--color-border-strong); }
.dm-shelf-label { margin-bottom: 9px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-muted); }
.dm-hidden-shelf {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-start; align-content: flex-start;
  min-height: 78px; padding: 8px; border-radius: 9px;
  transition: background 0.15s ease;
}
.dm-hidden-shelf.drag-over { background: var(--color-accent-soft); }
.dm-tile.dm-chip { width: auto; height: auto; padding: 9px 14px; opacity: 0.85; }
.dm-tile.dm-chip:hover { opacity: 1; }
.dm-shelf-hint { padding: 5px 3px; font-size: 14px; font-weight: 500; color: var(--color-muted); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .dash-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .dash-main-row { grid-template-columns: 1fr; }
  .revenue-kpis { grid-template-columns: repeat(2, 1fr); }
  .revenue-split-row { grid-template-columns: 1fr; }
  .customers-layout { flex-direction: column; }
}

@media (max-width: 800px) {
  .app-shell { flex-direction: column; }
  .app-shell.sidebar-collapsed .sidebar { width: 100%; padding: 28px 16px; }
  .sidebar { width: 100%; height: auto; position: static; overflow-y: visible; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-toggle { display: none; }
  .topbar { padding: 0 1.2rem; height: auto; flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .global-search { width: 100%; order: 2; }
  .header-actions { order: 1; margin-left: 0; }
  .header-profile .who { display: none; }
  .main-content { padding: 1.2rem; }
}

/* ==========================================================================
   Einstellungen: Bereichs-Karten (wie bei Fresha), fuehren zu eigenen Seiten
   ========================================================================== */
/* Immer drei gleich breite Karten pro Reihe (breit genug, dass auch lange Titel
   wie "Buchungsprofil / Digitale Visitenkarte" in einer Zeile bleiben); auf
   schmalen Fenstern zwei bzw. eine Spalte. */
.settings-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 2rem;
}
@media (max-width: 1260px) { .settings-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .settings-cards { grid-template-columns: minmax(0, 1fr); } }
.settings-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.settings-card:hover { border-color: var(--color-lavendel); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.settings-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.settings-card .sc-icon { width: 26px; height: 26px; color: var(--color-accent); margin-bottom: 14px; }
.settings-card .sc-title { font-size: 1rem; font-weight: 500; }
.settings-card .sc-desc { font-size: 0.9rem; line-height: 1.4; color: var(--color-muted); }
.settings-card .sc-status { margin-top: 10px; }
.back-link { display: inline-block; margin-bottom: 10px; font-size: 0.9rem; color: var(--color-muted); text-decoration: none; }
.back-link:hover { color: var(--color-accent); text-decoration: underline; }

/* ==========================================================================
   Buchungsprofil / Digitale Visitenkarte (Editor)
   ========================================================================== */
.bp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.bp-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.bp-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; }
.bp-card h2 { margin: 0 0 4px; }
.bp-card .hint { font-size: 0.85rem; color: var(--color-muted); margin: 0 0 16px; }
.bp-card label { margin-bottom: 0; }
.bp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.bp-grid .full { grid-column: 1 / -1; }
.bp-count { float: right; font-weight: 400; color: var(--color-muted); font-size: 0.78rem; }
.bp-field-note { font-size: 0.8rem; margin-top: 4px; min-height: 1em; }
.bp-field-note.ok { color: var(--color-success); }
.bp-field-note.bad { color: var(--color-danger); }

.bp-images { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: start; }
.bp-logo-box, .bp-cover-box {
  position: relative; border: 1.5px dashed var(--color-border-strong); border-radius: 14px; background: var(--color-surface-sunken) center / cover no-repeat;
  display: grid; place-items: center; color: var(--color-muted); font-size: 0.8rem; text-align: center; cursor: pointer; overflow: hidden;
}
.bp-logo-box { width: 110px; height: 110px; }
.bp-cover-box { height: 150px; }
.bp-logo-box:hover, .bp-cover-box:hover { border-color: var(--color-accent); }
.bp-image-label { font-size: 0.85rem; font-weight: 500; margin-bottom: 6px; }
.bp-image-actions { display: flex; gap: 8px; margin-top: 8px; }
.bp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 8px; }
.bp-thumb, .bp-add { aspect-ratio: 1; border-radius: 12px; overflow: hidden; position: relative; }
.bp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-thumb button {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 0;
  background: rgba(43, 27, 63, 0.75); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
}
.bp-add { border: 1.5px dashed var(--color-border-strong); background: var(--color-surface-sunken); color: var(--color-muted); display: grid; place-items: center; cursor: pointer; font-size: 0.8rem; text-align: center; }
.bp-add:hover { border-color: var(--color-accent); color: var(--color-accent); }
.bp-uploading { opacity: 0.55; pointer-events: none; }

.swatches { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.swatch { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--color-border-strong); cursor: pointer; }
.swatch.sel { box-shadow: 0 0 0 2px var(--color-ink); }
.swatch-custom { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--color-muted); margin-left: 6px; }
.swatch-custom input { width: 40px; height: 34px; padding: 0; margin: 0; border-radius: 8px; cursor: pointer; }

.bp-team-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.bp-team-row:last-child { border-bottom: 0; }
.bp-team-row .who { width: 160px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; font-weight: 500; min-width: 0; }
.bp-team-row .who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-team-row input { margin: 0; flex: 1; min-width: 0; }
.bp-team-row .warn { font-size: 0.78rem; color: var(--color-warning); }

.bp-url { display: flex; align-items: stretch; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.bp-url span { background: var(--color-surface-sunken); padding: 0 10px; display: flex; align-items: center; color: var(--color-muted); font-size: 0.8rem; white-space: nowrap; }
.bp-url input { border: 0; margin: 0; border-radius: 0; min-width: 0; }
.bp-url input:focus { outline-offset: -2px; }
.bp-publish-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 14px; }
.bp-publish-row b { display: block; }
.bp-publish-row small { color: var(--color-muted); }

.bp-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.88rem; }
.bp-checklist li { display: flex; align-items: center; gap: 10px; }
.bp-checklist .dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); display: grid; place-items: center; flex-shrink: 0; font-size: 12px; color: #fff; }
.bp-checklist li.done .dot { background: var(--color-success); border-color: var(--color-success); }
.bp-checklist li.done { color: var(--color-muted); }
.bp-checklist a { margin-left: auto; font-size: 0.8rem; }

.bp-mini { border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; background: #fff; }
.bp-mini .cover { height: 96px; background: var(--bp-brand, #6E56C9) center / cover no-repeat; }
.bp-mini .body { padding: 0 14px 14px; }
.bp-mini .logo { width: 52px; height: 52px; border-radius: 14px; border: 3px solid #fff; margin-top: -26px; background: var(--bp-brand, #6E56C9) center / cover no-repeat; color: var(--bp-ink, #fff); display: grid; place-items: center; font-weight: 700; box-shadow: var(--shadow-card); }
.bp-mini h3 { margin: 8px 0 2px; font-size: 1.05rem; }
.bp-mini p { margin: 0; font-size: 0.82rem; }
.bp-mini .btn-fake { display: block; margin-top: 12px; text-align: center; padding: 9px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; background: var(--bp-brand, #6E56C9); color: var(--bp-ink, #fff); }
.bp-embed { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 0.75rem; min-height: 96px; resize: vertical; }
.bp-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--color-ink); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 0.9rem; z-index: 50; box-shadow: var(--shadow-card); }
.bp-toast.err { background: var(--color-danger); }

@media (max-width: 1100px) {
  .bp-layout { grid-template-columns: 1fr; }
  .bp-side { position: static; }
}
@media (max-width: 700px) {
  .bp-grid, .bp-images { grid-template-columns: 1fr; }
  .bp-team-row { flex-wrap: wrap; }
}

/* Kennzeichnung im Kalender: Termin wurde von Kunden online gebucht */
.online-badge {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; vertical-align: 1px;
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.65); color: inherit;
}

/* ==========================================================================
   Vorlagen-Auswahl im Buchungsprofil
   ========================================================================== */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.tpl { display: flex; flex-direction: column; gap: 8px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); padding: 12px; cursor: pointer; background: var(--color-surface); margin: 0; position: relative; }
.tpl:hover { border-color: var(--color-accent); }
.tpl.sel { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.tpl input { position: absolute; opacity: 0; pointer-events: none; }
.tpl:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tpl-sketch { display: block; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; line-height: 0; }
.tpl-sketch svg { width: 100%; height: auto; display: block; }
.tpl-name { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tpl-desc { font-size: 0.82rem; font-weight: 400; color: var(--color-muted); line-height: 1.4; }
.tpl-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.tpl-actions .btn { text-decoration: none; display: inline-block; }

/* Das HTML-Attribut "hidden" muss immer gewinnen (sonst zeigen z.B. Datei-Felder durch die Formular-Styles) */
[hidden] { display: none !important; }

/* Bestaetigung beim Wechseln der Vorlage */
.tpl-confirm { flex: 1; background: var(--color-warning-soft); border: 1px solid #F0D9B5; border-radius: var(--radius-md); padding: 14px 16px; }
.tpl-confirm p { margin: 0 0 12px; color: var(--color-ink); font-size: 0.9rem; }
.tpl-confirm-buttons { display: flex; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   Abwesenheiten (Einstellungen + Kalender)
   ========================================================================== */
.muted { color: var(--color-muted); }
.abs-notice { background: var(--color-warning-soft); border: 1px solid #F0D9B5; border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 1.5rem; font-size: 0.9rem; color: var(--color-ink); }
.abs-notice ul { margin: 8px 0 0; padding-left: 20px; }
.abs-notice a { color: var(--color-accent); }
.abs-form { max-width: 520px; margin-bottom: 1.5rem; }
.abs-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.abs-check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.abs-check input { width: auto; margin: 0; }
.abs-holidays { margin-bottom: 1.5rem; }
.abs-holidays .abs-dates { max-width: 420px; }
.abs-holiday-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2px 24px; margin-top: 8px; }
.abs-holiday { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 0; font-weight: 400; font-size: 0.9rem; }
.abs-holiday input { width: auto; margin: 0; }
.abs-holiday-date { min-width: 118px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.abs-holiday.done { opacity: 0.6; }
.abs-who { display: inline-flex; align-items: center; gap: 8px; }
.abs-empty { padding: 1rem 0 1.5rem; }
.calendar-notice { background: var(--color-warning-soft); border: 1px solid #F0D9B5; border-radius: var(--radius-md); padding: 10px 16px; margin-bottom: 1rem; font-size: 0.9rem; color: var(--color-warning); }
.calendar-employee-header .count.absent { color: var(--color-warning); font-weight: 500; }
.absence-block {
  position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(43, 27, 63, 0.05) 0 8px, rgba(43, 27, 63, 0.10) 8px 16px);
  border-left: 3px solid var(--color-lavendel);
  padding: 6px 8px; font-size: 0.75rem; font-weight: 500; color: var(--color-muted); overflow: hidden;
}
.appointment-block { z-index: 2; }

/* Abwesenheiten: zwei getrennte Bereiche */
.abs-section { margin-bottom: 2.5rem; }
.abs-section + .abs-section { padding-top: 2rem; border-top: 1px solid var(--color-border); }
.abs-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 1.5rem; }
.abs-section-head h2 { margin: 0 0 4px; }
.abs-section-head p { margin: 0; font-size: 0.9rem; max-width: 84ch; text-wrap: balance; }
.abs-section-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.abs-section h3 { font-size: 1.05rem; }

/* Einstellungen: Suchfeld */
.settings-search { position: relative; max-width: 520px; margin-bottom: 1.5rem; }
.settings-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-muted); pointer-events: none; }
.settings-search input { margin: 0; padding-left: 42px; }
.settings-empty { margin-top: -0.5rem; }

/* Deaktivierte Feiertage: sichtbar, aber ausgegraut */
/* Deaktivierte Eintraege: leicht roetlich und mit durchgehender roter Linie durch die ganze Zeile (ohne Knopf-Spalte) */
.abs-table tbody tr.abs-disabled td {
  background-color: rgba(192, 69, 59, 0.05);
  color: var(--color-muted);
}
.abs-table tbody tr.abs-disabled td:not(.abs-actions-cell) {
  background-image: linear-gradient(transparent calc(50% - 0.5px), rgba(192, 69, 59, 0.6) calc(50% - 0.5px), rgba(192, 69, 59, 0.6) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* Vergangene Eintraege: grau hinterlegt, Text gedaempft */
.abs-table tbody tr.abs-past td { background-color: #F1EFF4; color: var(--color-muted); }
.abs-table tbody tr.abs-past.abs-disabled td { background-color: #F1EFF4; }

/* Abwesenheiten: feste Spaltenbreiten, damit beim Aktivieren/Deaktivieren nichts rutscht */
.abs-table-wrap { overflow-x: auto; }
table.abs-table { table-layout: fixed; min-width: 940px; }
.abs-table .c-period { width: 222px; }
.abs-table .c-who { width: 15%; }
.abs-table .c-kind { width: 12%; }
.abs-table .c-status { width: 60px; }
.abs-table .c-actions { width: 262px; }
.abs-table th, .abs-table td { padding: 0.7rem 0.75rem; }
.abs-table td { overflow-wrap: anywhere; vertical-align: middle; }
.abs-table td:nth-child(1), .abs-table td:nth-child(3) { white-space: nowrap; }
.abs-table .abs-status-cell { text-align: center; }
.abs-check-icon { width: 20px; height: 20px; color: var(--color-success); vertical-align: middle; }
/* Knoepfe: immer gleich breit und an derselben Stelle, auch wenn "Deaktivieren" zu "Aktivieren" wird */
.abs-actions { display: flex; justify-content: flex-end; gap: 8px; }
.abs-actions button { width: 120px; padding-left: 0; padding-right: 0; text-align: center; white-space: nowrap; }
.abs-actions button.edit-btn { width: 108px; }

/* Bestaetigungs-Fenster (private/js/dialog.js) */
dialog.confirm-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: 0 24px 60px rgba(43, 27, 63, 0.35);
}
dialog.confirm-dialog::backdrop { background: rgba(43, 27, 63, 0.5); }
.confirm-dialog form { padding: 28px 28px 24px; text-align: center; }
.confirm-dialog .cd-icon {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-warning-soft); color: var(--color-warning);
  margin: 0 auto 14px;
}
.confirm-dialog .cd-icon svg { width: 24px; height: 24px; }
.confirm-dialog.tone-danger .cd-icon { background: var(--color-danger-soft); color: var(--color-danger); }
.confirm-dialog h2 { margin: 0 0 6px; font-size: 1.25rem; line-height: 1.3; }
.confirm-dialog .cd-subject { margin: 0 0 16px; font-size: 1rem; font-weight: 500; line-height: 1.35; color: var(--color-muted); overflow-wrap: anywhere; }
.confirm-dialog .cd-text {
  margin: 0 0 10px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--color-warning-soft); color: var(--color-ink); font-size: 0.95rem; font-weight: 500; line-height: 1.4; white-space: pre-line;
}
.confirm-dialog.tone-danger .cd-text { background: var(--color-danger-soft); }
.confirm-dialog .cd-note { margin: 0; font-size: 0.85rem; color: var(--color-muted); }
/* Blinkender Hinweis, damit er auffaellt */
.confirm-dialog .cd-highlight { margin: 0 0 10px; font-size: 0.9rem; font-weight: 500; color: var(--color-warning); animation: warn-blink 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .confirm-dialog .cd-highlight { animation: none; } }
.confirm-dialog .cd-buttons { display: flex; justify-content: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.confirm-dialog .cd-confirm { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.confirm-dialog .cd-confirm:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.confirm-dialog.tone-danger .cd-confirm { background: var(--color-danger); border-color: var(--color-danger); }

/* Team & Benutzerkonten + Mein Konto */
a.header-profile { text-decoration: none; color: inherit; border-radius: var(--radius-md); }
a.header-profile:hover .name { color: var(--color-accent); }
.acc-credentials { background: var(--color-success-soft); border: 1px solid #BFE0CE; border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 1.5rem; max-width: 640px; }
.acc-credentials h3 { margin: 0 0 10px; }
.acc-credentials dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 10px; font-size: 0.95rem; }
.acc-credentials dt { color: var(--color-muted); }
.acc-credentials dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.acc-password { font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; letter-spacing: 0.04em; user-select: all; }
.acc-password-row { display: flex; gap: 8px; align-items: stretch; }
.acc-password-row input { flex: 1; font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.04em; }
.acc-password-row button { margin-top: 0.35rem; white-space: nowrap; }
.acc-danger-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
#slot .form-card { max-width: 560px; margin-bottom: 1.5rem; }
table.acc-table { table-layout: fixed; min-width: 1000px; }
.acc-table .c-name { width: 200px; }
.acc-table .c-access { width: 260px; }
.acc-table .c-actions { width: 390px; }
.acc-table th, .acc-table td { padding: 0.7rem 0.75rem; vertical-align: middle; }
.acc-table td { overflow-wrap: anywhere; }
.acc-actions { display: flex; justify-content: flex-end; gap: 8px; }
.acc-actions button { width: 120px; padding-left: 0; padding-right: 0; text-align: center; white-space: nowrap; }
.acc-actions button:nth-child(2) { width: 150px; }
.acc-actions button:nth-child(3) { width: 90px; }
.acc-email { margin-top: 4px; font-size: 0.85rem; color: var(--color-muted); }
.acc-others { margin-top: 2.5rem; }
.account-card { max-width: 520px; margin-bottom: 1.5rem; }
/* Mein Konto: Reiter, Unternehmensdaten, Rechnungen (nur Inhaber:innen) */
.acc-layout { display: block; max-width: 1400px; }
.acc-layout.has-nav { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.acc-nav { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); position: sticky; top: 16px; }
.acc-nav[hidden] { display: none; }
button.acc-nav-item { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--color-ink); text-align: left; font: inherit; cursor: pointer; }
button.acc-nav-item:hover { background: var(--color-accent-soft); }
button.acc-nav-item.active { background: var(--color-accent-soft); box-shadow: inset 3px 0 0 var(--color-primary); }
.acc-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--color-muted); }
.acc-nav-item.active svg { color: var(--color-primary); }
.acc-nav-title { display: block; font-weight: 600; font-size: 0.97rem; }
.acc-nav-sum { display: block; margin-top: 2px; font-size: 0.82rem; line-height: 1.35; color: var(--color-muted); }
.acc-content { min-width: 0; }
.acc-card { max-width: none; margin-bottom: 1.5rem; }
/* Anmeldedaten: ohne Navigation (Mitarbeitende) und mit: die beiden Karten stehen nebeneinander, wenn Platz ist */
[data-panel="login"]:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 24px; align-items: start; }
.acc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; }
@media (max-width: 1100px) { .acc-grid-3 { grid-template-columns: 1fr 1fr; } .acc-grid .acc-span2 { grid-column: 1 / -1; } }
@media (max-width: 860px) {
  .acc-layout.has-nav { grid-template-columns: 1fr; gap: 16px; }
  .acc-nav { position: static; flex-direction: row; overflow-x: auto; }
  button.acc-nav-item { width: auto; flex: 0 0 auto; }
  .acc-nav-sum { display: none; }
}
.acc-lead { margin: 0 0 1.1rem; font-size: 0.92rem; line-height: 1.45; }
.acc-note { margin: 0 0 1.1rem; padding: 10px 12px; border-radius: 10px; background: var(--color-warning-soft); color: var(--color-warning); font-size: 0.9rem; line-height: 1.4; }
.acc-grid .acc-span { grid-column: 1 / -1; }
.acc-grid .acc-span2 { grid-column: span 2; }
.acc-group { grid-column: 1 / -1; margin: 6px 0 12px; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.acc-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 560px) { .acc-grid-3 { grid-template-columns: 1fr; } .acc-grid .acc-span2 { grid-column: auto; } }
.acc-table-wrap { overflow-x: auto; }
table.acc-invoices { margin-bottom: 0; min-width: 560px; }
.acc-inv-desc { margin-top: 2px; font-size: 0.8rem; font-weight: 400; color: var(--color-muted); }
table.acc-invoices th, table.acc-invoices td { padding: 12px 10px; }
table.acc-invoices td { vertical-align: top; }
table.acc-invoices td:first-child { min-width: 170px; }
table.acc-invoices td:first-child strong, table.acc-invoices td:nth-child(2) { white-space: nowrap; }
table.acc-invoices td.numeric { min-width: 80px; }
.acc-inv-action { text-align: right; white-space: nowrap; }
.acc-pdf { font-size: 0.88rem; font-weight: 500; }
.acc-empty { padding: 28px 16px; border: 1px dashed var(--color-border); border-radius: 12px; text-align: center; color: var(--color-muted); font-size: 0.92rem; }
.account-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; font-size: 0.95rem; }
.account-facts dt { color: var(--color-muted); }
.account-facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.acc-loginlink { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 760px; padding: 14px 18px; margin-bottom: 1.5rem; background: var(--color-accent-soft); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.acc-loginlink > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 0.9rem; }
.acc-loginlink code { font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; overflow-wrap: anywhere; user-select: all; }

/* ==========================================================================
   Feedback-Button (unten rechts) + Ticket-Fenster -- siehe private/js/feedback.js
   Alle Farben aus den Design-Variablen oben.
   ========================================================================== */
.fb-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 55;
  display: flex; align-items: center; justify-content: center; gap: 0;
  width: 44px; height: 44px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-surface);
  text-align: left;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-ink) 16%, transparent);
  opacity: 0.94;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
/* Normal nur die kleine Gluehbirne (stoert keine Inhalte); beim Darueberfahren klappt der Text auf. */
.fb-fab:hover, .fb-fab:focus-visible {
  width: auto; height: auto; max-width: 268px; padding: 13px 16px; border-radius: 14px; gap: 12px; align-items: flex-start; justify-content: flex-start;
  opacity: 1;
  transform: translateY(-2px);
  background: var(--color-primary-hover);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--color-ink) 16%, transparent);
}
.fb-fab svg { flex-shrink: 0; }
.fb-fab:hover svg, .fb-fab:focus-visible svg { margin-top: 1px; }
.fb-fab-text { display: none; flex-direction: column; gap: 3px; }
.fb-fab:hover .fb-fab-text, .fb-fab:focus-visible .fb-fab-text { display: flex; }
.fb-fab-title { font-size: 13px; font-weight: 700; line-height: 1.3; }
.fb-fab-sub { font-size: 11.5px; font-weight: 500; line-height: 1.35; opacity: 0.85; }

.fb-overlay { position: fixed; inset: 0; z-index: 80; background: color-mix(in srgb, var(--color-ink) 50%, transparent); }
.fb-overlay[hidden], .fb-modal[hidden], .fb-modal [hidden] { display: none !important; }

.fb-modal {
  position: fixed; top: 50%; left: 50%; z-index: 81;
  transform: translate(-50%, -50%);
  width: 968px; max-width: 94vw; max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--color-surface);
  color: var(--color-ink);
  border-radius: 9px;
  box-shadow: 0 24px 64px color-mix(in srgb, var(--color-ink) 28%, transparent);
  animation: fb-in 0.18s ease;
}
@keyframes fb-in {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .fb-modal { animation: none; }
  .fb-fab { transition: none; }
}

.fb-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border);
}
.fb-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-muted); }
.fb-title { margin: 2px 0 0; font-family: var(--font-display); font-size: 18px; font-weight: 500; }
.fb-modal button.fb-close {
  padding: 4px; border: none; background: transparent; color: var(--color-muted); line-height: 0;
}
.fb-modal button.fb-close:hover { color: var(--color-ink); }

.fb-body { padding: 22px 24px; overflow-y: auto; }
#fb-form { display: flex; flex-direction: column; gap: 16px; }
.fb-field label {
  display: block; margin: 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-muted);
}
.fb-modal input, .fb-modal select, .fb-modal textarea {
  display: block; width: 100%; margin-top: 6px;
  padding: 7px 9px;
  font-family: var(--font-body); font-size: 14px;
  border: 1px solid var(--color-border-strong); border-radius: 9px;
  background: var(--color-surface); color: var(--color-ink);
}
.fb-modal textarea { resize: vertical; }
.fb-modal input:focus, .fb-modal select:focus, .fb-modal textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.fb-info {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 8px;
  background: var(--color-accent-soft);
  font-size: 13px; line-height: 1.5; color: var(--color-muted);
}
.fb-info svg { flex-shrink: 0; margin-top: 1px; color: var(--color-accent); }
.fb-info p { margin: 0; }
.fb-error { margin: 0; font-size: 12.5px; color: var(--color-danger); }

.fb-success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 0; }
.fb-success-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-success); color: var(--color-surface);
}
.fb-success h3 { margin: 14px 0 8px; font-size: 19px; }
.fb-success p { margin: 0; max-width: 400px; font-size: 15px; line-height: 1.55; color: var(--color-ink); }

.fb-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
}
.fb-modal button.fb-btn {
  height: 37px; padding: 0 16px;
  border-radius: 10px; border: 1px solid var(--color-border-strong);
  background: var(--color-surface); color: var(--color-ink);
  font-size: 13px; font-weight: 600;
}
.fb-modal button.fb-btn:hover { border-color: var(--color-accent); }
.fb-modal button.fb-btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-surface); }
.fb-modal button.fb-btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.fb-modal button.fb-btn:disabled { opacity: 0.6; cursor: default; }

/* Support-Seite: Ticketliste */
table.sup-table { table-layout: fixed; min-width: 760px; }
.sup-table .c-nr { width: 100px; }
.sup-table .c-type { width: 190px; }
.sup-table .c-status { width: 130px; }
.sup-table .c-date { width: 150px; }
.sup-table td { vertical-align: top; overflow-wrap: anywhere; }
.sup-subject { font-weight: 500; }
.sup-desc { margin-top: 2px; font-size: 0.85rem; color: var(--color-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sup-author { margin-top: 2px; font-size: 0.8rem; color: var(--color-muted); }

/* Allgemeine Einstellungen */
.gs-note { display: block; font-size: 0.8rem; font-weight: 400; margin-top: 4px; }

/* Auswahl mit Suchfeld (Zeitzone in den Allgemeinen Einstellungen) */
.gs-field-label { display: block; font-weight: 500; font-size: 0.85rem; }
.combo { position: relative; margin-top: 0.35rem; }
.combo-button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 0.6rem 0.7rem; text-align: left;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 400;
  background: var(--color-surface); color: var(--color-ink);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  cursor: pointer;
}
.combo-button .combo-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-button svg { flex-shrink: 0; color: var(--color-muted); }
.combo-panel {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: 8px;
}
.combo-panel[hidden] { display: none; }
.combo-search { margin: 0 0 6px; }
.combo-list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.combo-list li[role="option"] { padding: 7px 10px; border-radius: 6px; font-size: 0.9rem; cursor: pointer; }
.combo-list li[role="option"]:hover, .combo-list li.active { background: var(--color-accent-soft); }
.combo-list li[aria-selected="true"] { font-weight: 600; color: var(--color-accent); }
.combo-separator { height: 0; margin: 6px 4px; border-top: 1px solid var(--color-border-strong); }
.combo-empty { margin: 8px 10px; font-size: 0.9rem; }

/* Karten ohne Link (z.B. geplante Erweiterungen): kein Hover-Effekt */
.settings-card.sc-static:hover { border-color: var(--color-border); box-shadow: none; transform: none; }

/* ==========================================================================
   Dienstleistungen (Einstellungen): Kategorien links, Dienstleistungen rechts
   ========================================================================== */
.svc-head-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.svc-banner { margin: 0 0 1rem; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--color-danger-soft); font-weight: 500; }
.svc-banner[hidden] { display: none; }
.svc-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .svc-layout { grid-template-columns: minmax(0, 1fr); } }

.svc-cats { padding: 20px; position: sticky; top: 20px; }
.svc-cats h2 { margin: 0 0 12px; font-size: 1.15rem; }
.svc-cat-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
button.svc-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 9px 12px; border: none; border-radius: 8px; background: transparent; text-align: left; font-weight: 400;
}
button.svc-cat:hover { background: var(--color-bg); }
button.svc-cat.active { background: var(--color-accent-soft); font-weight: 500; }
.svc-count { min-width: 24px; padding: 1px 8px; border-radius: 12px; background: var(--color-bg); color: var(--color-muted); font-size: 0.75rem; text-align: center; }
button.svc-link { border: none; background: transparent; padding: 6px 12px; color: var(--color-accent); font-weight: 500; }
button.svc-link:hover { text-decoration: underline; }

.svc-search { position: relative; margin-bottom: 18px; }
.svc-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.svc-search input { margin: 0; padding-left: 40px; border-radius: 24px; }

.svc-category { margin-bottom: 28px; }
.svc-category-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.svc-category-head h2 { margin: 0; font-size: 1.15rem; }
.svc-menu { position: relative; }
.svc-menu summary {
  list-style: none; cursor: pointer; padding: 6px 14px; border: 1px solid var(--color-border-strong);
  border-radius: 20px; background: var(--color-surface); font-size: 0.85rem; font-weight: 500;
}
.svc-menu summary::-webkit-details-marker { display: none; }
.svc-menu summary::after { content: " ▾"; color: var(--color-muted); }
.svc-menu-list {
  position: absolute; z-index: 10; right: 0; top: calc(100% + 4px); min-width: 220px; padding: 6px;
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.svc-menu-list button { border: none; background: transparent; text-align: left; padding: 8px 10px; border-radius: 6px; font-weight: 400; font-size: 0.9rem; }
.svc-menu-list button:hover:not(:disabled) { background: var(--color-bg); }
.svc-menu-list button:disabled { color: var(--color-muted); opacity: 0.55; cursor: default; }
.svc-menu-list button.danger { color: var(--color-danger); }
.svc-menu-sep { width: 100%; height: 1px; margin: 6px 0; border: 0; background: var(--color-border); }
.svc-options-menu .svc-menu-list { min-width: 300px; }
.svc-options-menu summary { padding: 0.6rem 1.2rem; border-radius: var(--radius-sm); }

/* Ausdruck der Dienstleistungsliste: beim Drucken zeigt die Seite nur diesen Bereich */
#svc-print { display: none; }
@page { margin: 16mm; }
@media print {
  body.svc-printing > *:not(#svc-print) { display: none !important; }
  body.svc-printing #svc-print { display: block; color: #000; font-size: 11pt; }
  #svc-print h1 { margin: 0 0 2pt; font-size: 20pt; }
  #svc-print .svc-print-sub { margin: 0 0 14pt; color: #555; font-size: 10pt; }
  #svc-print h2 { margin: 16pt 0 6pt; padding: 4pt 8pt; background: #F1EBF8; font-size: 12pt; break-after: avoid; }
  #svc-print table { width: 100%; margin: 0; border: 0; border-collapse: collapse; background: none; }
  #svc-print th, #svc-print td { padding: 5pt 6pt; border-bottom: 0.5pt solid #ccc; font-size: 10pt; text-align: left; vertical-align: top; }
  #svc-print th { color: #555; font-size: 8.5pt; font-weight: 600; }
  #svc-print th.num, #svc-print td.num { text-align: right; white-space: nowrap; }
  #svc-print tr { break-inside: avoid; }
  #svc-print .svc-print-detail { margin-top: 1pt; color: #555; font-size: 8.5pt; }
}

.svc-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 6px 10px 6px 0;
  background: var(--color-surface); border: 1px solid var(--color-border); border-left: 6px solid var(--color-lavendel); border-radius: var(--radius-sm);
}
button.svc-row-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: none; background: transparent; padding: 10px 6px 10px 14px; text-align: left;
}
button.svc-row-main:hover { background: transparent; }
.svc-name { font-weight: 500; overflow-wrap: anywhere; }
.svc-meta { font-size: 0.85rem; color: var(--color-muted); }
.svc-price { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-weight: 500; white-space: nowrap; }
.svc-price .pill[data-hover] { cursor: help; }
.svc-row-actions { display: flex; gap: 4px; }
.svc-row-actions button { padding: 0.35rem 0.8rem; font-size: 0.85rem; }
.svc-empty { padding: 14px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-muted); font-size: 0.9rem; }
.svc-welcome { max-width: 520px; }
.svc-welcome h2 { margin-top: 0; }

/* Formular-Fenster (Dienstleistung / Kategorie) */
dialog.form-dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0;
  border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink);
  box-shadow: 0 24px 60px rgba(43, 27, 63, 0.35); overflow: hidden;
}
dialog.form-dialog-small { width: min(420px, calc(100vw - 32px)); }
dialog.form-dialog::backdrop { background: rgba(43, 27, 63, 0.5); }
/* Dreiteilig: Titel oben und Knoepfe unten bleiben stehen, nur die Mitte scrollt. */
.form-dialog form { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.form-dialog h2 { flex: none; margin: 0; padding: 24px 28px 14px; font-size: 1.3rem; }
.form-dialog-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 28px 8px;
  /* Duenner, unauffaelliger Scrollbalken */
  scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent;
}
.form-dialog-body::-webkit-scrollbar { width: 8px; }
.form-dialog-body::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 8px; }
.form-dialog-body::-webkit-scrollbar-thumb:hover { background: var(--color-lavendel); }
.form-dialog-body::-webkit-scrollbar-track { background: transparent; }
.form-dialog-foot { flex: none; padding: 14px 28px 20px; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.form-dialog-foot .error { margin: 0 0 10px; }
.form-dialog-buttons { display: flex; justify-content: flex-end; gap: 10px; }
.svc-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.svc-team { border: none; margin: 0 0 12px; padding: 0; min-width: 0; }
.svc-team legend { padding: 0; margin-bottom: 8px; font-size: 0.85rem; font-weight: 500; }
.svc-check { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-weight: 400; font-size: 0.95rem; cursor: pointer; }
.svc-check input { width: auto; margin: 0; }
.svc-check-all { font-weight: 500; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.svc-check[hidden] { display: none; }

.page-head-text { flex: 1 1 320px; min-width: 0; }

/* Hinweis im Kalender-Formular: fuer die Leistung ist ein Patch-Test noetig */
.patch-hint { margin: -0.4rem 0 1rem; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--color-warning-soft); color: var(--color-warning); font-size: 0.85rem; font-weight: 500; line-height: 1.4; }
.patch-hint[hidden] { display: none; }

/* Pakete (Bundles) in den Dienstleistungen */
.svc-add-menu summary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; padding: 0.6rem 1.2rem; border-radius: var(--radius-sm); }
.svc-add-menu summary::after { color: rgba(255, 255, 255, 0.7); }
.svc-add-menu .svc-menu-list { min-width: 200px; }
.svc-row-bundle { border-left-color: var(--color-accent); }
.svc-old-price { color: var(--color-muted); font-weight: 400; font-size: 0.85rem; margin-right: 4px; }

/* ==========================================================================
   Paket (Bundle) bearbeiten: eigene Seite /bundle
   ========================================================================== */
.bnd-bar {
  position: sticky; top: 0; z-index: 5; margin: -32px -32px 24px; padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--color-bg); border-bottom: 1px solid var(--color-border);
}
.bnd-bar h1 { margin: 0; font-size: 1.15rem; }
.bnd-bar-actions { display: flex; gap: 10px; }
.bnd-page { max-width: 640px; margin: 0 auto; }
.bnd-banner { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--color-danger-soft); font-weight: 500; }
.bnd-card { padding: 26px 28px; margin-bottom: 20px; }
.bnd-card h2 { margin: 0 0 14px; font-size: 1.3rem; }
.bnd-lead { margin: -8px 0 16px; font-size: 0.9rem; }
.bnd-note { display: block; margin-top: 4px; font-size: 0.8rem; font-weight: 400; }
.bnd-label-row { display: flex; gap: 6px; align-items: baseline; }
.bnd-count { margin-left: auto; font-size: 0.8rem; font-weight: 400; }

.bnd-item { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 10px 10px 10px 14px; border: 1px solid var(--color-border); border-left: 5px solid var(--color-lavendel); border-radius: var(--radius-sm); background: var(--color-surface); }
.bnd-item-name { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.bnd-item-name small { display: block; font-weight: 400; color: var(--color-muted); font-size: 0.85rem; }
.bnd-item-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; white-space: nowrap; }
.bnd-item-price s { color: var(--color-muted); font-size: 0.85rem; }
.bnd-item-actions { display: flex; gap: 2px; }
.bnd-item-actions button { padding: 4px 9px; border: none; background: transparent; }
.bnd-item-actions button:hover:not(:disabled) { background: var(--color-bg); }

.bnd-add { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.bnd-total { display: flex; align-items: baseline; gap: 14px; font-size: 0.9rem; }
.bnd-total-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.bnd-total-price s { color: var(--color-muted); font-size: 0.85rem; }
.bnd-total-price b { font-size: 1rem; }

.bnd-picker { margin-top: 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-card); padding: 8px; }
.bnd-picker input { margin: 0 0 6px; }
.bnd-picker-list { max-height: 280px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
.bnd-picker-cat { padding: 8px 10px 4px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); }
button.bnd-picker-row { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border: none; border-radius: 6px; background: transparent; text-align: left; font-weight: 400; }
button.bnd-picker-row:hover { background: var(--color-accent-soft); }
.bnd-picker-row small { display: block; color: var(--color-muted); font-size: 0.8rem; }

.bnd-price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
@media (max-width: 640px) { .bnd-price-grid { grid-template-columns: minmax(0, 1fr); } }
.bnd-input-wrap { position: relative; display: block; }
.bnd-input-wrap input { margin-top: 0.35rem; }
.bnd-affix { position: absolute; top: 50%; transform: translateY(-50%); color: var(--color-muted); font-size: 0.9rem; pointer-events: none; font-weight: 400; }
#bnd-prefix { left: 12px; }
#bnd-suffix { right: 14px; }
#bnd-prefix:not([hidden]) ~ input { padding-left: 30px; }
#bnd-suffix:not([hidden]) ~ input { padding-right: 34px; }
.bnd-sellprice { margin: 6px 0 0; font-size: 1.05rem; }
@media (max-width: 640px) { .bnd-bar { margin: -20px -16px 16px; padding: 12px 16px; } }

/* Auf dieser Seite scrollt das ganze Fenster, damit die Leiste mit Schliessen/Speichern oben stehen bleibt. */
.main-content.bnd-main { overflow: visible; }

/* Paket: Dienstleistungen per Maus verschieben (Griff links in jeder Zeile) */
button.bnd-handle { flex: none; padding: 6px 4px; border: none; background: transparent; color: var(--color-muted); cursor: grab; touch-action: none; display: flex; align-items: center; border-radius: 6px; }
button.bnd-handle:hover { color: var(--color-ink); background: var(--color-bg); }
.bnd-item { position: relative; user-select: none; }
.bnd-item.dragging { z-index: 3; cursor: grabbing; box-shadow: 0 10px 26px rgba(43, 27, 63, 0.2); border-color: var(--color-lavendel); }
.bnd-item.dragging .bnd-handle { cursor: grabbing; }

/* Der Platz fuer den Scrollbalken ist immer reserviert: Seiten mit und ohne Balken sind gleich breit,
   und nichts springt seitlich, wenn der Balken verschwindet (z. B. bei einem offenen Fenster). */
html { scrollbar-gutter: stable; }

/* Solange ein Fenster (Dialog oder Feedback-Fenster) offen ist, scrollt die Seite dahinter nicht. */
html:has(dialog[open]), html:has(.fb-overlay:not([hidden])) {
  overflow: hidden;
}
/* Scrollt statt der Seite der Inhaltsbereich selbst, gilt dasselbe. */
body:has(dialog[open]) .main-content, body:has(.fb-overlay:not([hidden])) .main-content {
  overflow: hidden;
}

/* Paket: Einwirkzeit-Haken je Dienstleistung und Terminplanung */
.bnd-item { flex-wrap: wrap; }
.bnd-item-wait { flex: 1 0 calc(100% - 30px); box-sizing: border-box; display: flex; align-items: center; gap: 8px; margin: 4px 0 0 30px; padding-top: 8px; border-top: 1px dashed var(--color-border-strong); font-size: 0.85rem; font-weight: 400; color: var(--color-ink); cursor: pointer; user-select: none; }
.bnd-item-wait input { width: auto; margin: 0; }
.bnd-schedule { margin-top: 1.2rem; }
.bnd-schedule p { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.45; }

/* Dienstleistung: Einwirkzeit (Vorbereitung / Einwirkzeit / Fertigstellung) */
.svc-processing { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg); }
.svc-processing[hidden] { display: none; }
.svc-processing-head { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.svc-processing p { margin: 4px 0 12px; font-size: 0.85rem; line-height: 1.4; }
.svc-form-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.svc-form-grid3 label { margin-bottom: 8px; }
@media (max-width: 520px) { .svc-form-grid3 { grid-template-columns: minmax(0, 1fr); } }
button.svc-add-time { margin: 0 0 14px; padding: 0.45rem 0.9rem; font-size: 0.9rem; border-radius: 20px; background: var(--color-surface); }
button.svc-add-time[hidden] { display: none; }

/* Kalender: Einwirkzeit (Person frei) hell schraffiert hinter dem Text; ein Termin in der Einwirkzeit
   steht rechts davor, damit beide lesbar bleiben */
.appointment-block .wait-part {
  position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0 6px, rgba(255, 255, 255, 0.25) 6px 12px);
}
.appointment-block .wait-label { position: absolute; right: 5px; bottom: 2px; padding: 0 4px; border-radius: 4px; font-size: 0.62rem; font-weight: 500; line-height: 1.35; letter-spacing: 0.02em; opacity: 0.85; background: rgba(255, 255, 255, 0.6); }
.appointment-block.nested { left: 46%; right: 4px; z-index: 3; box-shadow: 0 2px 8px rgba(43, 27, 63, 0.18); }
p.svc-time-note { margin: 0; font-size: 0.85rem; }

/* Hinweisfeld (i) neben einer Beschriftung; Text erscheint beim Darueberfahren oder per Tastatur-Fokus */
.svc-label-with-tip { display: inline-flex; align-items: center; gap: 6px; }
.info-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid var(--color-muted); border-radius: 50%; font-size: 0.7rem; font-weight: 500; font-style: italic; color: var(--color-muted); cursor: help; }
.info-tip:hover, .info-tip:focus-visible { color: var(--color-ink); border-color: var(--color-ink); outline: none; }
.info-tip::after {
  content: attr(data-tip); position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: 270px; padding: 10px 12px; border-radius: 8px; background: var(--color-ink); color: #fff;
  font-size: 0.8rem; font-weight: 400; font-style: normal; line-height: 1.4; text-align: left; white-space: normal;
  opacity: 0; pointer-events: none; transition: opacity 0.12s;
}
.info-tip:hover::after, .info-tip:focus-visible::after { opacity: 1; }
/* Hinweis, der nach rechts aufklappt (Symbol sitzt am linken Rand eines Bereichs, sonst wird der Text abgeschnitten) */
.info-tip.tip-right::after { left: -8px; transform: none; }
/* Hinweis, der nach links aufklappt (Symbol sitzt in der rechten Spalte, sonst wird der Text am Fensterrand abgeschnitten) */
.info-tip.tip-left::after { left: auto; right: -8px; transform: none; }
/* Hinweis, der nach unten aufklappt (wenn oberhalb kein Platz ist) */
.info-tip.tip-below::after { bottom: auto; top: calc(100% + 8px); }
/* Auffaelliger Hinweis (Ausrufezeichen, pulsiert, bis man ihn anschaut); Zeilenumbrueche im Text bleiben erhalten */
.info-tip.tip-alert { background: var(--color-warning); border-color: var(--color-warning); color: #fff; font-style: normal; font-weight: 700; animation: tip-pulse 1.3s ease-in-out infinite; }
.info-tip.tip-alert:hover, .info-tip.tip-alert:focus-visible { background: var(--color-warning); border-color: var(--color-warning); color: #fff; animation: none; }
.info-tip.tip-alert::after { width: 330px; white-space: pre-line; display: none; } /* nicht im Layout, sonst ragt der unsichtbare Text ueber den Rand und erzeugt eine Scroll-Leiste */
.info-tip.tip-alert:hover::after, .info-tip.tip-alert:focus-visible::after { display: block; }
@keyframes tip-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(138, 82, 16, 0.5); }
  50% { opacity: 0.55; box-shadow: 0 0 0 6px rgba(138, 82, 16, 0); }
}
@media (prefers-reduced-motion: reduce) { .info-tip.tip-alert { animation: none; } }

/* Nur-Lesen-Ansicht fuer Mitarbeiter:innen (Dienstleistungen): ausgeblendete Teile bleiben wirklich weg */
.svc-head-actions[hidden], .back-link[hidden], button.svc-link[hidden] { display: none; }
div.svc-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 6px 10px 14px; text-align: left; }

/* ==========================================================================
   Mehrere Standorte: Standortwechsel (Seitenleiste + Kopfzeile) und Standort-Uebersicht
   ========================================================================== */
.avatar.has-image { background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent; }

/* Foto-Auswahl im Teammitglied-Formular (employee-photo.js) */
.photo-field { display: flex; align-items: center; gap: 16px; margin-bottom: 1rem; }
.photo-field .photo-preview .avatar { width: 72px; height: 72px; font-size: 24px; }
.photo-field .photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.photo-field .photo-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-field .photo-hint { font-size: 0.8rem; }
.photo-field .error { margin: 0; }

/* Zuschneide-Fenster fuer das Foto: Bild verschieben und zoomen, runder Rahmen */
.photo-crop-note { margin: 0 0 12px; font-size: 0.9rem; }
.photo-crop-stage { display: block; margin: 0 auto; border-radius: 12px; background: #1d1427; touch-action: none; cursor: grab; }
.photo-crop-stage:active { cursor: grabbing; }
.photo-crop-zoom { display: flex; align-items: center; gap: 12px; margin: 14px 0 12px; font-size: 0.85rem; }
.photo-crop-zoom input { flex: 1; margin: 0; }

/* Standortkarte in der Seitenleiste wird zum Wechsel-Knopf, sobald es mehrere Standorte gibt */
.sidebar-salon-card-top.switchable { cursor: pointer; border-radius: 8px; margin: -4px; padding: 4px; }
.sidebar-salon-card-top.switchable:hover, .sidebar-salon-card-top.switchable[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08); }
.sidebar-salon-card-top.switchable:focus-visible { outline: 2px solid var(--color-lavendel); outline-offset: 1px; }
.sidebar-salon-card-top .loc-chevron { width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; color: var(--color-lavendel); }
.app-shell.sidebar-collapsed .sidebar-salon-card-top .loc-chevron { display: none; }

/* Kopfzeile: Standort neben dem Benutzerkonto */
.header-loc-btn {
  height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 8px; max-width: 220px;
  border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-surface);
  color: var(--color-ink); font-size: 0.9rem; font-weight: 600;
}
.header-loc-btn[hidden] { display: none; }
.header-loc-btn svg { flex-shrink: 0; color: var(--color-accent); }
.header-loc-btn svg.chev { color: var(--color-muted); }
.header-loc-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .header-loc-btn span { display: none; } }

/* Das aufklappende Menue (haengt am Seitenende, position: fixed) */
.loc-menu {
  position: fixed; z-index: 100; max-height: min(420px, calc(100vh - 32px)); overflow-y: auto; padding: 6px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(43, 27, 63, 0.22);
}
.loc-menu-title { padding: 8px 10px 6px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); }
button.loc-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; border-radius: 8px;
  background: transparent; text-align: left; font-weight: 400;
}
button.loc-menu-item:hover { background: var(--color-accent-soft); }
button.loc-menu-item.active { background: var(--color-accent-soft); }
.loc-menu-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.loc-menu-name { font-size: 0.95rem; font-weight: 500; color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-menu-address { font-size: 0.8rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-menu-check { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-accent); }
a.loc-menu-manage { display: block; margin-top: 4px; padding: 10px 10px 8px; border-top: 1px solid var(--color-border); font-size: 0.85rem; font-weight: 500; }

/* Einstellungen -> Informationen zum Unternehmen: Standort-Karten */
.loc-section-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 28px 0 14px; }
.loc-section-head h2 { margin: 0; }
.loc-section-head .count { color: var(--color-muted); font-size: 0.95rem; }
.loc-section-head button { margin-left: auto; }
.loc-legal-note { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.loc-legal-note p { margin: 0; font-size: 0.92rem; }
.loc-legal-note a.btn-primary { display: inline-block; padding: 10px 18px; text-decoration: none; white-space: nowrap; }
.loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.loc-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.loc-card.is-active { border-color: var(--color-lavendel); box-shadow: 0 0 0 2px var(--color-lavendel), 0 6px 18px rgba(60, 40, 100, 0.12); }
.loc-card-image { position: relative; }
.loc-current-badge {
  position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px 5px 8px; border-radius: 999px; background: var(--color-ink); color: #fff;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.loc-current-badge svg { width: 14px; height: 14px; }
/* Nicht gewaehlte Standorte treten leicht zurueck, so sieht man auf einen Blick, wo man gerade arbeitet */
.loc-grid:has(.is-active) .loc-card:not(.is-active) .loc-card-image { filter: saturate(0.55) opacity(0.85); }
.loc-card-image {
  height: 132px; display: grid; place-items: center; background: var(--color-surface-sunken) center / cover no-repeat;
  color: #fff; font-size: 2.2rem; font-weight: 600; letter-spacing: 0.02em;
}
.loc-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 6px; flex: 1; }
.loc-card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.loc-card-title h3 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.loc-card-address { margin: 0; font-size: 0.9rem; }
.loc-meta { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 0.88rem; }
.loc-meta li { display: flex; align-items: flex-start; gap: 8px; color: var(--color-ink); }
.loc-meta svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--color-muted); }
.loc-meta .warn { color: var(--color-warning); font-weight: 500; }
.loc-meta .warn svg { color: var(--color-warning); }
.hours-draft-note { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-md, 10px); background: var(--color-warning-bg, #fdf3e1); color: var(--color-warning); font-size: 0.88rem; line-height: 1.4; }
.loc-meta .blink { animation: warn-blink 1.3s ease-in-out infinite; }
@keyframes warn-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .loc-meta .blink { animation: none; } }
/* Alle Karten haben dieselben Knoepfe an derselben Stelle (zwei Reihen + Loeschen), egal wie lang der Text oben ist */
.loc-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 18px 18px; margin-top: auto; }
.loc-card-actions button { padding: 0.45rem 0.6rem; font-size: 0.88rem; white-space: nowrap; }
.loc-card-actions .ghost { visibility: hidden; }
.loc-card-actions .spacer { display: none; }
.loc-card-actions button:nth-of-type(3) { grid-column: 1; grid-row: 2; }
.loc-card-actions button:nth-of-type(4) { grid-column: 2; grid-row: 2; }
.loc-card-actions .btn-danger-text { grid-column: 1 / -1; grid-row: 3; justify-self: end; }

/* Bild-Feld im Standort-Fenster */
.loc-field-label { margin: 0 0 0.35rem; font-size: 0.85rem; font-weight: 500; }
.loc-copy-field { display: flex; align-items: center; height: 64px; margin: 0 0 14px; }
.loc-copy-field select { margin: 0; }
.loc-image-field { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.loc-image-preview { width: 96px; height: 64px; flex-shrink: 0; border-radius: 10px; background: var(--color-surface-sunken) center / cover no-repeat; border: 1px solid var(--color-border); }
.loc-image-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.loc-image-buttons button { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
/* Standort-Fenster: festes Raster, damit alle Felder in Zeilen auf einer Linie stehen und nichts gescrollt werden muss */
dialog.loc-dialog { width: min(820px, calc(100vw - 32px)); }
.loc-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
.loc-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
@media (max-width: 720px) {
  .loc-fields, .loc-rules { grid-template-columns: minmax(0, 1fr); }
}
.loc-dialog-section { margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.loc-dialog-section h3 { margin: 0 0 10px; font-size: 1rem; }
.loc-hours-dialog-row { display: flex; align-items: center; gap: 12px; padding: 0.5rem 0; min-height: 62px; box-sizing: border-box; border-bottom: 1px solid var(--color-border); } /* feste Hoehe: beim Ein-/Ausschalten eines Tages rutscht nichts */
.loc-hours-dialog-row:last-child { border-bottom: none; }
.loc-hours-dialog-row .day-name { width: 100px; flex-shrink: 0; font-size: 0.9rem; font-weight: 500; }
.loc-hours-dialog-row input[type="time"] { width: 110px; margin: 0; }
.loc-hours-dialog-row .closed-note { color: var(--color-muted); font-size: 0.88rem; }

/* Dienstleistungs-Fenster: Bereiche links (mit Kurzinfo), Inhalt rechts. Feste Hoehe, damit beim Wechseln nichts springt. */
dialog.svc-dialog { width: min(920px, calc(100vw - 32px)); }
.svc-dialog form { height: min(790px, calc(100vh - 32px)); }
.svc-dialog-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); border-top: 1px solid var(--color-border); }
.svc-dnav { overflow-y: auto; border-right: 1px solid var(--color-border); background: var(--color-bg); }
button.svc-dnav-item {
  display: block; width: 100%; text-align: left; padding: 16px 18px; border: 0; border-left: 4px solid transparent;
  border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; font-weight: 400;
}
button.svc-dnav-item:hover { background: var(--color-accent-soft); border-color: transparent; border-bottom-color: var(--color-border); }
button.svc-dnav-item.active { background: var(--color-surface); border-left-color: var(--color-primary); }
.svc-dnav-item[hidden] { display: none; }
.svc-dnav-title { display: block; font-size: 1rem; font-weight: 600; color: var(--color-ink); }
.svc-dnav-sum { display: block; margin-top: 4px; font-size: 0.85rem; line-height: 1.35; color: var(--color-muted); overflow-wrap: anywhere; }
.svc-dnav-sum:empty { display: none; }
.svc-dpanels { padding: 22px 28px 12px; }
.svc-dpanels > section[hidden] { display: none; }
.svc-panel-title { margin: 0 0 14px; font-size: 1rem; font-weight: 600; }
.svc-team-search { margin: 0 0 10px; }
.svc-team-search[hidden] { display: none; }
.svc-team-count { margin-left: auto; font-weight: 400; }
.svc-team-note { margin: 12px 0 0; font-size: 0.85rem; }
.svc-team-note[hidden] { display: none; }
.svc-dpanels .svc-check-all { display: flex; }
@media (max-width: 720px) {
  .svc-dialog-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .svc-dnav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--color-border); }
  button.svc-dnav-item { width: auto; flex: 0 0 auto; padding: 12px 16px; border-left: 0; border-bottom: 3px solid transparent; }
  button.svc-dnav-item.active { border-bottom-color: var(--color-primary); }
  .svc-dnav-sum { display: none; }
}

/* Dienstleistungen: "Angeboten an" (private/js/location-offer.js) und Standort-Filter */
.loc-offer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
.loc-offer-row .svc-check { margin: 0; }
.loc-offer-price { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.85rem; font-weight: 400; color: var(--color-muted); }
.loc-offer-price.off { visibility: hidden; } /* Platz bleibt reserviert, damit beim Anklicken nichts verrutscht */
.loc-offer-price input { width: 165px; margin: 0; padding: 0.35rem 0.6rem; }
.loc-offer-note { margin: 8px 0 0; font-size: 0.82rem; }
.svc-locbar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.svc-locbar[hidden] { display: none; }
.svc-locbar select { width: auto; margin: 0; min-width: 220px; }
.svc-locs { font-size: 0.82rem; color: var(--color-muted); }
.pill-warn-soft { background: var(--color-warning-soft); color: var(--color-warning); }

/* Adressfeld mit Google-Vorschlaegen (private/js/address-autocomplete.js) */
.addr-wrap { position: relative; }
.addr-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(43, 27, 63, 0.18);
}
.addr-list[hidden] { display: none; }
.addr-item { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.addr-item:hover, .addr-item.active { background: var(--color-accent-soft); }
.addr-main { font-size: 0.95rem; font-weight: 500; color: var(--color-ink); }
.addr-secondary { font-size: 0.82rem; color: var(--color-muted); }
.addr-credit { padding: 6px 10px 4px; font-size: 0.72rem; color: var(--color-muted); text-align: right; }
.addr-status { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.8rem; font-weight: 400; color: var(--color-success); }
.addr-status[hidden] { display: none; }
.addr-status svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Team-Formular: Standorte der Person */
.team-locations { margin: 0 0 14px; }
.team-locations[hidden] { display: none; }
.team-locations .hint { margin: 6px 0 0; font-size: 0.82rem; }
.team-location-label { margin: 0 0 8px; color: var(--color-muted); font-size: 0.9rem; }

/* Geschlossene Standorte: ausgegraut unter den aktiven; Hinweisleiste auf jeder Seite, wenn man einen ansieht */
.loc-closed-section { margin-top: 2rem; }
.loc-closed-note { margin: -4px 0 14px; font-size: 0.9rem; max-width: 720px; }
.loc-card.is-closed { background: var(--color-bg); }
.loc-card.is-closed .loc-card-image { filter: grayscale(1); }
.loc-card.is-closed .loc-card-body h3 { color: var(--color-muted); }

/* Drei-Punkte-Menue oben rechts im Standortbild */
.loc-card-menu { position: absolute; top: 10px; right: 10px; z-index: 2; }
button.loc-card-menu-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--color-ink); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); cursor: pointer; }
button.loc-card-menu-btn:hover, button.loc-card-menu-btn[aria-expanded="true"] { background: #fff; }
.loc-card-menu-btn svg { width: 18px; height: 18px; }
.loc-card-menu-list { position: absolute; top: 38px; right: 0; min-width: 190px; padding: 4px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 10px 28px rgba(40, 20, 70, 0.22); }
.loc-card-menu-list[hidden] { display: none; }
.loc-card-menu-list button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--color-ink); font-size: 0.9rem; font-weight: 500; text-align: left; cursor: pointer; }
.loc-card-menu-list button:hover { background: var(--color-accent-soft); }
.loc-card-menu-list button.danger { color: var(--color-danger); }
.loc-card-menu-list button.danger:hover { background: var(--color-danger-soft); }

/* Ressourcen (Einstellungen) */
.res-toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 1rem; }
.res-toolbar select { width: auto; min-width: 220px; margin: 0; }
.res-toolbar .res-search { flex: 1 1 240px; max-width: 360px; margin: 0; }
.res-table-card { padding: 0; overflow-x: auto; }
table.res-table { width: 100%; }
.res-table th, .res-table td { padding: 0.8rem 1rem; vertical-align: middle; }
.res-table .res-name { font-weight: 500; }
.res-table tr.res-archived td { background-color: #F1EFF4; color: var(--color-muted); }
.res-actions { display: flex; justify-content: flex-end; gap: 8px; }
.res-actions button { white-space: nowrap; }
.res-empty { max-width: 520px; margin: 3rem auto 0; text-align: center; }
.res-empty svg { width: 96px; height: 96px; color: var(--color-lavendel); }
.res-empty h2 { margin: 1rem 0 0.4rem; }
.res-empty p { margin: 0 0 1.4rem; font-size: 0.92rem; }
dialog.res-dialog { width: min(560px, calc(100vw - 32px)); }
.res-kind { display: flex; align-items: center; gap: 22px; height: 42px; margin: 2px 0 8px; }
.res-kind .loc-field-label { margin: 0; }
dialog.res-dialog .abs-check { margin: 0; }
.res-online { margin-bottom: 6px; }
.res-all { padding-bottom: 8px; border-bottom: 1px solid var(--color-border); margin-bottom: 6px; font-weight: 500; }
.res-group { margin-top: 10px; }
.res-group-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); margin-bottom: 4px; }
.res-group .abs-check { padding: 5px 0; }
.res-service-search { max-width: none; margin: 0 0 10px; }
.res-service-none { margin: 6px 0 0; font-size: 0.9rem; }
.res-desc { margin-top: 2px; font-size: 0.82rem; font-weight: 400; color: var(--color-muted); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ressourcen-Fenster: nur die Liste der Dienstleistungen scrollt, der Rest bleibt stehen */
dialog.res-dialog { width: min(600px, calc(100vw - 32px)); }
dialog.res-dialog .form-dialog-body { display: flex; flex-direction: column; }
dialog.res-dialog .form-dialog-body > * { flex: none; }
dialog.res-dialog .loc-dialog-section { flex: 1 1 auto; min-height: 150px; display: flex; flex-direction: column; }
dialog.res-dialog .loc-dialog-section > * { flex: none; }
#res-services { flex: 1 1 auto; min-height: 0; max-height: 340px; overflow-y: auto; padding-right: 6px; }
#res-services::-webkit-scrollbar { width: 8px; }
#res-services::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 8px; }
#res-services::-webkit-scrollbar-track { background: transparent; }
dialog.res-dialog .res-online { margin-bottom: 14px; }

/* Ressourcen: Platz fuer Personen, Mitarbeiter:in */
.res-capacity { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; font-weight: 400; }
.res-capacity.off { visibility: hidden; }
.res-capacity input { width: 70px; margin: 0; padding: 6px 8px; text-align: center; }
.res-staff-employee { display: block; margin: 0 0 14px 26px; }
.res-staff-employee select { margin: 4px 0 0; }
.res-staff-employee.is-disabled { opacity: 0.5; }
dialog.res-dialog .res-online { margin-bottom: 8px; }

/* Kalender: Ressourcen-Spalte */
.avatar.avatar-resource { background: var(--color-accent-soft); color: var(--color-accent); border-radius: 10px; }
.avatar.avatar-resource svg { width: 20px; height: 20px; }

/* Team-Fenster: auf kleinen Bildschirmen bildschirmfuellend (wie eine eigene Seite in der App) */
dialog.team-dialog { width: min(600px, calc(100vw - 32px)); }
@media (max-width: 640px) {
  dialog.team-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  dialog.team-dialog form { height: 100%; max-height: 100dvh; }
}

/* Fenster fuer Abwesenheit und Neuer Termin; auf kleinen Bildschirmen bildschirmfuellend */
dialog.abs-dialog, dialog.appt-dialog { width: min(600px, calc(100vw - 32px)); }
.appt-day { margin: 0 0 12px; font-size: 0.92rem; }
.form-dialog-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Termin bearbeiten (appointment-editor.js): feste Zeilen, damit beim Wechseln nichts springt */
/* Rueckmeldung unten in der Mitte (z. B. "Termin angelegt") */
.toast { position: fixed; inset: auto auto 28px 50%; margin: 0; border: 0; transform: translateX(-50%); z-index: 3000; max-width: calc(100vw - 32px); padding: 11px 18px; border-radius: 12px; background: var(--color-primary); color: #fff; font-size: 0.9rem; font-weight: 500; box-shadow: 0 10px 28px rgba(43, 27, 63, 0.3); animation: toast-in 0.18s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* Kundenauswahl (customer-picker.js) */
.cpk-field { margin-bottom: 1rem; }
.cpk-label { display: block; font-weight: 500; font-size: 0.85rem; margin-bottom: 0.35rem; }
.cpk-search { position: relative; }
.cpk-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-muted); pointer-events: none; }
.cpk-input { margin: 0; padding-left: 38px; padding-right: 38px; }
.cpk-erase, .cpk-remove { border: 0; background: transparent; color: var(--color-muted); padding: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: none; }
.cpk-erase:hover, .cpk-remove:hover { background: var(--color-accent-soft); color: var(--color-ink); border-color: transparent; }
.cpk-erase { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.cpk-erase[hidden], .cpk-chosen[hidden], .cpk-new[hidden], .cpk-search[hidden], .cpk-list[hidden] { display: none; }
.cpk-erase svg, .cpk-remove svg { width: 16px; height: 16px; }
.cpk-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; }
.cpk-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--color-border); }
.cpk-item:last-child { border-bottom: 0; }
.cpk-item:hover, .cpk-item.active { background: var(--color-accent-soft); }
.cpk-item .avatar, .cpk-chosen .avatar { width: 34px; height: 34px; font-size: 12px; flex: none; }
.cpk-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cpk-who strong { font-weight: 500; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpk-sub { font-size: 0.78rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpk-hint { font-size: 0.72rem; color: var(--color-muted); font-style: italic; }
.cpk-list mark { background: rgba(110, 86, 201, 0.22); color: inherit; border-radius: 3px; padding: 0 1px; }
.cpk-add { color: var(--color-accent); }
.cpk-add .cpk-who strong { color: var(--color-accent); }
.cpk-plus { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; }
.cpk-empty { padding: 12px; color: var(--color-muted); font-size: 0.85rem; }
.cpk-chosen { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); }
.cpk-chosen .cpk-who { flex: 1; }
.cpk-new { border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 8px 12px 0 12px; }
.cpk-new-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cpk-new label { margin-bottom: 0.7rem; }

/* Kalender: freie Stelle unter dem Mauszeiger = Klick legt dort einen Termin an */
.calendar-column { cursor: pointer; }
.calendar-slot-ghost { position: absolute; left: 4px; right: 4px; height: 30px; z-index: 1; display: flex; align-items: center; padding: 0 8px; border: 1.5px dashed rgba(110, 86, 201, 0.4); border-radius: 8px; background: rgba(110, 86, 201, 0.07); color: rgba(110, 86, 201, 0.85); font-size: 0.75rem; font-weight: 500; white-space: nowrap; overflow: hidden; pointer-events: none; }
.calendar-slot-ghost[hidden] { display: none; }
.ae-name-wrap { display: flex; gap: 8px; margin-top: 0.35rem; }
.ae-name-wrap input { margin-top: 0; flex: 1; min-width: 0; }
.ae-customer-btn { flex: none; width: 42px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--color-accent); }
.ae-customer-btn svg { width: 20px; height: 20px; }
.ae-customer-btn[hidden] { display: none; }
.ae-hours { margin: -0.6rem 0 1rem; min-height: 2.6em; font-size: 0.82rem; line-height: 1.4; color: var(--color-warning); }
.ae-hours:not(:empty)::before { content: '⚠ '; }
.special-badge { display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 999px; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.02em; vertical-align: middle; border: 1px solid currentColor; background: rgba(255, 255, 255, 0.55); }
.ae-info { margin: -0.4rem 0 1rem; min-height: 2.8em; font-size: 0.85rem; line-height: 1.4; color: var(--color-muted); }
.appt-dialog .ae-cancel-appt { margin-right: auto; }
.appt-dialog .ae-cancel-appt[hidden] { display: none; }
.appt-dialog textarea { width: 100%; resize: vertical; }
.appt-dialog .form-dialog-body input[type="hidden"] { display: none; }
.form-dialog-body label.abs-check { margin-bottom: 16px; }
@media (max-width: 640px) {
  dialog.abs-dialog, dialog.appt-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  dialog.abs-dialog form, dialog.appt-dialog form { height: 100%; max-height: 100dvh; }
  .form-dialog-grid2 { grid-template-columns: 1fr; }
}
/* Abwesenheiten: die Knoepfe oben rechts sind alle gleich gross */
.abs-section-actions button { width: 256px; height: 42px; padding-top: 0; padding-bottom: 0; text-align: center; white-space: nowrap; }
@media (max-width: 640px) { .abs-section-actions button { width: 100%; } }

/* Feiertage: Angabe "Bundesweit" / "Nur Bayern" unter dem Namen */
.abs-table td .pill { margin-top: 3px; font-size: 0.72rem; white-space: nowrap; }

.abs-tip { position: fixed; z-index: 2000; max-width: 280px; padding: 7px 11px; border-radius: 8px; background: var(--color-primary); color: #fff; font-size: 0.8rem; line-height: 1.35; box-shadow: 0 6px 18px rgba(43, 27, 63, 0.3); pointer-events: none; }
.abs-tip[hidden] { display: none; }
/* Sofort-Hinweis aus layout.js (data-instant-tip): mehrzeilig, mit Pfeil zum Element */
.abs-tip.instant-tip { max-width: 320px; padding: 9px 13px; border-radius: 10px; }
.instant-tip .tip-head { display: block; font-weight: 600; }
.instant-tip .tip-line { display: block; color: rgba(255, 255, 255, 0.82); }
.instant-tip .tip-big { display: block; font-size: 1.2rem; font-weight: 600; margin: 2px 0 1px; }
.instant-tip .tip-muted { display: block; color: rgba(255, 255, 255, 0.62); font-size: 0.75rem; }
.instant-tip::after { content: ''; position: absolute; left: var(--ax, 50%); bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--color-primary); border-bottom: 0; }
.instant-tip.below::after { bottom: auto; top: -6px; border-top: 0; border-bottom: 6px solid var(--color-primary); }

/* Umsaetze: Balken-Diagramm, jede Spalte reagiert auf den Mauszeiger */
.rev-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 6px; cursor: default; }
.rev-col .rev-value { flex: none; align-self: center; margin-bottom: 3px; font-size: 11px; font-weight: 600; color: var(--color-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rev-col:hover { background: var(--color-accent-soft); }
.rev-col .rev-bar { width: 100%; border-radius: 4px 4px 0 0; }
.rev-col:hover .rev-bar { filter: brightness(0.9); }

/* Dauer blinkt kurz rot, wenn sie sich durch die Einwirkzeit-Aufteilung aendert */
select.flash-change { animation: flash-change 0.5s ease-in-out 4; }
@keyframes flash-change {
  0%, 100% { border-color: var(--color-border-strong); color: inherit; background-color: transparent; }
  50% { border-color: #D93025; color: #D93025; background-color: rgba(217, 48, 37, 0.14); }
}
@media (prefers-reduced-motion: reduce) { select.flash-change { animation: none; border-color: #D93025; color: #D93025; } }

/* Felder, die sich durch eine Auswahl von selbst geaendert haben (z. B. Von/Bis beim Zeitraum): kurz hervorgehoben */
input.flash-field { animation: flash-field 0.5s ease-in-out 3; }
@keyframes flash-field {
  0%, 100% { border-color: var(--color-border-strong); background-color: transparent; }
  50% { border-color: var(--color-primary, #7A5CA8); background-color: var(--color-accent-soft); }
}
@media (prefers-reduced-motion: reduce) { input.flash-field { animation: none; border-color: var(--color-primary, #7A5CA8); } }

/* Dienstleistung: Kategorie, Dauer und Preis in einer Zeile; der Platz fuer "Zeit aufteilen" ist immer reserviert,
   damit beim Aufklappen nichts nach unten rutscht und kein Scrollbalken entsteht */
.svc-split-slot { min-height: 128px; }
.svc-split-slot .svc-add-time { margin-bottom: 0; }
.svc-processing { position: relative; margin-bottom: 0; padding: 12px 16px 6px; }
.svc-processing-head { position: absolute; top: 8px; right: 12px; }
.svc-processing-head button { padding: 0.1rem 0.3rem; font-size: 0.85rem; }
.svc-split-slot { min-height: 100px; margin-bottom: 14px; }
/* Preis-Hinweis: oeffnet nach links (Preis steht rechts in der Zeile); untereinander wieder nach rechts */
@media (max-width: 520px) { #price-tip.tip-left::after { left: -8px; right: auto; } }
/* Kurzinfo links bei "Allgemein": Platz fuer bis zu vier Zeilen (Name, Preis/Dauer, zwei Abweichungen) ist reserviert,
   damit die Reiter darunter nicht springen, wenn z. B. "Nicht online buchbar" dazukommt */
@media (min-width: 641px) { #sum-general { min-height: 5.4em; } }
@media (min-width: 641px) { #sum-locations { min-height: 2.7em; } }
/* Angaben mit Hinweis beim Daraufzeigen (z. B. "3 von 10 Standorten") */
[data-hover] { cursor: help; }

/* Alle Formular-Fenster: auf kleinen Bildschirmen (Handy) bildschirmfuellend, wie eine eigene Seite in der App */
@media (max-width: 640px) {
  dialog.form-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  dialog.form-dialog form { height: 100%; max-height: 100dvh; }
}
@media (max-width: 640px) { .svc-split-slot { min-height: 0; } }

/* ==========================================================================
   Massenbearbeitung der Dienstleistungen: eigene Seite /services-bulk
   ========================================================================== */
.bulk-page h1 { margin: 0 0 6px; font-size: 1.8rem; }
.bulk-lead { margin: 0 0 20px; }
.bulk-bar-note { font-size: 0.9rem; }
.bnd-bar:has(.bulk-bar-note) { justify-content: flex-end; }
.bnd-bar .bulk-bar-note { margin-right: auto; }

.bulk-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; }
.bulk-toolbar .svc-search { margin: 0; flex: 0 1 300px; }
.bulk-toolbar select { width: auto; max-width: 220px; margin: 0; border-radius: 20px; padding: 0.55rem 0.9rem; }
.bulk-selection { display: flex; align-items: center; gap: 10px; padding-left: 12px; border-left: 1px solid var(--color-border-strong); font-size: 0.9rem; font-weight: 500; }
.bulk-selection[hidden] { display: none; }
.bulk-history { margin-left: auto; display: flex; gap: 6px; }
button.bulk-icon-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: var(--color-surface); }
button.bulk-icon-btn svg { width: 18px; height: 18px; }
button.bulk-icon-btn:disabled { opacity: 0.4; cursor: default; }
button.bulk-icon-btn:disabled:hover { border-color: var(--color-border-strong); }

/* Tabelle: waagerecht scrollbar, Kopfzeile und erste Spalte bleiben stehen */
.bulk-scroll { overflow: auto; max-height: calc(100vh - 330px); min-height: 280px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.bulk-table { width: max-content; min-width: 100%; margin: 0; border: 0; border-radius: 0; border-collapse: separate; border-spacing: 0; overflow: visible; }
.bulk-table th, .bulk-table td { padding: 10px 8px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); white-space: nowrap; vertical-align: middle; }
.bulk-table thead th { position: sticky; top: 0; z-index: 2; color: var(--color-ink); font-size: 0.82rem; font-weight: 600; }
.bulk-table tbody tr:last-child td { border-bottom: 0; }
.bulk-table .bulk-sticky { position: sticky; left: 0; z-index: 1; width: 300px; min-width: 300px; max-width: 300px; padding-left: 14px; border-right: 1px solid var(--color-border); box-shadow: 6px 0 8px -8px rgba(43, 27, 63, 0.25); }
.bulk-table thead .bulk-sticky { z-index: 3; }
.bulk-table tbody tr.is-selected td { background: var(--color-accent-soft); }
.bulk-first { display: flex; align-items: center; gap: 12px; white-space: normal; }
.bulk-table input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--color-accent); }
.bulk-who { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.bulk-who strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; }
.bulk-who .muted { font-size: 0.8rem; }
.bulk-row-error { color: var(--color-danger); font-size: 0.8rem; white-space: normal; }
.bulk-row-error[hidden] { display: none; }
.bulk-table tr.is-invalid .bulk-who strong { color: var(--color-danger); }
.bulk-table tr.is-invalid td[data-cell] input, .bulk-table tr.is-invalid td[data-cell] select { border-color: var(--color-danger); }

.bulk-table td[data-cell] input[type="text"], .bulk-table td[data-cell] select { width: 100%; margin: 0; padding: 0.5rem 0.65rem; font-size: 0.9rem; }
.bulk-table td[data-cell="name"] { min-width: 230px; }
.bulk-table td[data-cell="categoryId"] { min-width: 180px; }
.bulk-table td[data-cell="price"] { min-width: 110px; }
.bulk-table td[data-cell="duration"] { min-width: 140px; }
.bulk-table td[data-cell="prep"], .bulk-table td[data-cell="wait"] { min-width: 120px; }
.bulk-table td[data-cell="description"] { min-width: 260px; }
.bulk-table td[data-cell="price"] input { text-align: right; font-variant-numeric: tabular-nums; }
.bulk-table select:disabled { background: var(--color-bg); color: var(--color-muted); }
.bulk-table th.bulk-center, .bulk-table td.bulk-center { text-align: center; }
.bulk-table td.bulk-center .toggle-switch { margin: 0 auto; }

/* Geaenderte Felder */
.bulk-table td.changed input, .bulk-table td.changed select { border-color: var(--color-accent); background: var(--color-accent-soft); }
.bulk-table td.changed .toggle-switch { box-shadow: 0 0 0 3px var(--color-lavendel); }
.bulk-table td.changed .bulk-team-btn { border-color: var(--color-accent); background: var(--color-accent-soft); }

button.bulk-team-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 180px; padding: 0.5rem 0.65rem; border-radius: var(--radius-sm); background: var(--color-surface); font-size: 0.9rem; font-weight: 400; text-align: left; }
button.bulk-team-btn span { color: var(--color-accent); font-weight: 500; }
.bulk-empty { padding: 40px 14px; text-align: center; color: var(--color-muted); }
.bulk-foot { margin: 12px 2px 0; font-size: 0.85rem; line-height: 1.45; }
@media (max-width: 640px) {
  .bulk-toolbar .svc-search { flex-basis: 100%; }
  .bulk-selection { border-left: 0; padding-left: 0; }
}

/* Massenbearbeitung: Ansicht Standardpreis / Standort */
.bulk-toolbar label.bulk-view { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.9rem; font-weight: 500; white-space: nowrap; }
.bulk-toolbar label.bulk-view[hidden] { display: none; }
.bulk-toolbar label.bulk-view select { max-width: 260px; }
.bulk-view-note { margin: 0 2px 12px; font-size: 0.88rem; }
.bulk-view-note[hidden] { display: none; }
.bulk-offered-col { display: none; }
.bulk-table.is-location .bulk-offered-col { display: table-cell; }
.bulk-table tr.is-off td[data-cell]:not([data-cell="offered"]):not([data-cell="price"]) { opacity: 0.55; }
.bulk-table tr.is-off .bulk-who { opacity: 0.6; }
.bulk-table td[data-cell="price"] input::placeholder { font-size: 0.8rem; }
.bulk-table td[data-cell="price"] { min-width: 150px; }
.svc-menu-list button[hidden] { display: none; }

/* Dienstleistung: Zeile unter dem Preis (wo angeboten, abweichende Preise) und das zweite Fenster "Preise je Standort" */
.svc-price-locs { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 14px; padding: 4px 4px 4px 12px; border-radius: var(--radius-sm); background: var(--color-bg); font-size: 0.85rem; color: var(--color-muted); }
.svc-price-locs[hidden] { display: none; }
.svc-price-locs button.svc-link { flex: none; padding: 6px 10px; font-size: 0.85rem; }
dialog.price-dialog { width: min(540px, calc(100vw - 32px)); }
.price-dialog-inner { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
@media (max-width: 640px) { .price-dialog-inner { height: 100%; max-height: 100dvh; } }
.price-dialog-teaser[hidden] { display: none; }
.price-dialog-teaser p { margin: 0 0 14px; line-height: 1.5; }
a.price-dialog-link { color: var(--color-accent); font-weight: 500; }

/* Dienstleistung: Reiter "Ressourcen" (Raum / Geraet erforderlich) */
.svc-res-intro { margin: -6px 0 14px; font-size: 0.88rem; line-height: 1.45; }
.svc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
button.svc-chip { padding: 0.45rem 1rem; border-radius: 20px; background: var(--color-surface); font-size: 0.88rem; font-weight: 400; }
button.svc-chip[aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-info); font-weight: 500; }
.svc-res-block[hidden] { display: none; }
.svc-res-loc { margin: 10px 0 4px; font-size: 0.8rem; font-weight: 600; color: var(--color-muted); letter-spacing: 0.02em; }
.svc-res-note { margin: 10px 0 0; font-size: 0.85rem; line-height: 1.45; }

/* Aktivitaetenlog (Mein Konto) */
.pill-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.act-filters { margin: 0 0 18px; }
.act-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin: 0 0 12px; }
.act-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.act-grid label { margin: 0; font-size: 0.8rem; font-weight: 500; color: var(--color-muted); }
.act-grid label:has(select[hidden]) { display: none; }
.act-grid select, .act-grid input { margin-top: 5px; padding: 0.55rem 0.7rem; font-size: 0.92rem; color: var(--color-ink); }
.act-export summary { padding: 0.5rem 1.1rem; }
@media (max-width: 900px) { .act-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .act-grid { grid-template-columns: minmax(0, 1fr); } }
.act-day { margin: 22px 0 6px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-muted); text-transform: none; }
.act-day:first-child { margin-top: 0; }
.act-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.act-time { padding-top: 2px; font-size: 0.85rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.act-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; line-height: 1.4; overflow-wrap: anywhere; }
.act-type { color: var(--color-muted); }
.act-meta { margin-top: 2px; font-size: 0.82rem; color: var(--color-muted); }
.act-changes { margin-top: 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--color-bg); font-size: 0.88rem; }
.act-change { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 4px 14px; padding: 3px 0; }
.act-field { color: var(--color-muted); }
.act-values { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; overflow-wrap: anywhere; }
.act-before { color: var(--color-muted); text-decoration: line-through; text-decoration-color: rgba(107, 97, 119, 0.5); }
.act-after { font-weight: 500; }
.act-arrow, .act-none { color: var(--color-muted); }
.act-more-wrap { margin-top: 16px; text-align: center; }
.act-more-wrap button[hidden] { display: none; }
@media (max-width: 640px) {
  .act-item { grid-template-columns: 1fr; gap: 4px; }
  .act-change { grid-template-columns: 1fr; }
  .act-filters select, .act-filters input[type="search"] { width: 100%; max-width: none; }
}

/* Aktivitaetenlog: Zeitraum, Export, Ausdruck */
#act-print { display: none; }
@media print {
  body.act-printing > *:not(#act-print) { display: none !important; }
  body.act-printing #act-print { display: block; color: #000; font-size: 10pt; }
  #act-print h1 { margin: 0 0 2pt; font-size: 18pt; }
  #act-print .act-print-sub { margin: 0 0 12pt; color: #555; font-size: 9pt; }
  #act-print table { width: 100%; margin: 0; border: 0; border-collapse: collapse; background: none; }
  #act-print th, #act-print td { padding: 4pt 6pt; border-bottom: 0.5pt solid #ccc; font-size: 9pt; text-align: left; vertical-align: top; }
  #act-print th { color: #555; font-weight: 600; }
  #act-print td.nw { white-space: nowrap; color: #555; }
  #act-print tr { break-inside: avoid; }
  #act-print .act-print-changes { margin-top: 2pt; padding-left: 8pt; color: #333; font-size: 8.5pt; }
}

/* Eigene Seite des Aktivitaetenlogs */
.act-page-card { padding: 24px 28px; }
.act-page-card .act-day { margin-top: 26px; }
a.acc-nav-item { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 10px; color: var(--color-ink); text-decoration: none; }
a.acc-nav-item:hover { background: var(--color-accent-soft); }
@media (max-width: 900px) { a.acc-nav-item { width: auto; flex: 0 0 auto; } }
@media (max-width: 640px) { .act-page-card { padding: 16px; } }

.closed-banner { margin: 0 0 1.25rem; padding: 12px 16px; border-radius: 12px; background: var(--color-warning-soft); color: var(--color-warning); font-size: 0.92rem; line-height: 1.45; }
.closed-banner a { font-weight: 600; color: inherit; text-decoration: underline; }

/* Stechuhr in der Kopfzeile (timeclock.js) */
.clock-widget { position: relative; }
.clock-btn { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; min-width: 132px; justify-content: center; font-weight: 600; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.clock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border-strong); flex: none; }
.clock-btn.running { border-color: var(--color-success); background: var(--color-success-soft); color: var(--color-success); }
.clock-btn.running .clock-dot { background: var(--color-success); }
.clock-btn.on-break { border-color: var(--color-warning); background: var(--color-warning-soft); color: var(--color-warning); }
.clock-btn.on-break .clock-dot { background: var(--color-warning); }
.clock-widget.is-late .clock-btn:not(.running):not(.on-break) { border-color: var(--color-warning); }
.clock-widget.is-late .clock-btn:not(.running):not(.on-break) .clock-dot { background: var(--color-warning); }
.clock-panel {
  position: absolute; top: calc(100% + 6px); right: 0; width: 310px; max-width: calc(100vw - 24px);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: 16px; font-size: 0.9rem; z-index: 50; display: none;
}
.clock-panel.open { display: block; }
.clock-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.clock-head .muted { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clock-shift { margin: 0 0 12px; }
.clock-big { font-size: 2.2rem; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; margin: 4px 0 0; }
.clock-sub { text-align: center; margin: 0 0 12px; font-size: 0.8rem; }
.clock-banner { margin: 0 0 12px; padding: 8px 12px; background: var(--color-warning-soft); border: 1px solid #F0D9B5; border-radius: var(--radius-sm); color: var(--color-warning); font-size: 0.85rem; }
.clock-actions { display: flex; flex-direction: column; gap: 8px; }
.clock-actions button { width: 100%; height: 44px; }
.clock-totals { margin: 12px 0 0; font-size: 0.8rem; text-align: center; }
.clock-error { margin: 10px 0 0; }
@media (max-width: 700px) { .clock-btn { min-width: 0; padding: 0 10px; } .clock-btn .clock-label { font-size: 0.85rem; } }

/* Arbeitszeiten (timesheets.js) */
.ts-switch { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; margin-bottom: 1.5rem; }
.ts-running { margin-bottom: 1.6rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--color-border); }
.ts-running h2 { margin: 0 0 10px; font-size: 1.1rem; }
.ts-running.collapsed h2 { margin-bottom: 0; }
.ts-running-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 8px 4px 2px; border: 0; background: none; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; border-radius: 8px; }
.ts-running-toggle:hover { background: var(--color-accent-soft); }
.ts-running-arrow { flex: none; color: var(--color-muted); transition: transform 0.15s; }
.ts-running.collapsed .ts-running-arrow { transform: rotate(-90deg); }
.ts-running-count { color: var(--color-muted); font-weight: 400; }
.ts-running-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 8px; background: var(--color-success-soft); border: 1px solid #CDE6D8; border-radius: var(--radius-md); font-size: 0.9rem; }
.ts-running-row button { margin-left: auto; }
.ts-filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1.5rem; }
.ts-filters label { margin: 0; min-width: 170px; }
.ts-table { width: 100%; min-width: 860px; margin-bottom: 1.5rem; }
.ts-table th, .ts-table td { padding: 0.65rem 0.75rem; vertical-align: middle; }
.ts-table .nowrap { white-space: nowrap; }
.ts-table .ts-actions { text-align: right; white-space: nowrap; }
.ts-table tr.ts-forgotten td { background: var(--color-danger-soft); }
.ts-breaks-head { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 8px; font-weight: 500; }
.ts-break-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.ts-break-row input { margin: 0; min-width: 0; }
dialog.ts-dialog { width: min(640px, calc(100vw - 32px)); }
@media (max-width: 700px) { .ts-break-row { grid-template-columns: 1fr 1fr; } .ts-break-row span { display: none; } }

/* Hinweis auf einem gesperrten Knopf: der Rahmen faengt das Daraufzeigen ab (gesperrte Knoepfe melden es selbst nicht) */
.clock-tip-wrap { display: block; }
.clock-tip-wrap button:disabled { pointer-events: none; }

/* Stempel-Terminal am Salon-Tablet (private/js/clock-terminal.js) */
body.ct-open { overflow: hidden; }
.ct-overlay { position: fixed; inset: 0; z-index: 90; background: var(--color-bg); display: flex; flex-direction: column; padding: 20px 28px 24px; gap: 18px; user-select: none; -webkit-user-select: none; }
.ct-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ct-time { font-size: 2.6rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.ct-date { margin-top: 4px; }
.ct-place { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.ct-place strong { font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ct-place .muted { font-size: 0.8rem; }
.ct-close { height: 44px; padding: 0 18px; }
.ct-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 20px; }
.ct-people { overflow-y: auto; margin: 0; padding: 20px 22px; }
.ct-people h2 { margin: 0 0 12px; font-size: 1.2rem; }
.ct-people h3 { margin: 18px 0 8px; font-size: 0.85rem; color: var(--color-muted); font-weight: 500; text-transform: none; }
.ct-none { margin: 4px 0 8px; }
.ct-row { display: flex; align-items: center; gap: 14px; padding: 9px 4px; border-bottom: 1px solid var(--color-border); }
.ct-row:last-child { border-bottom: 0; }
.ct-row .avatar { width: 44px; height: 44px; font-size: 15px; flex: none; }
.ct-row.away { opacity: 0.6; }
.ct-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-who strong { font-weight: 500; }
.ct-info { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 0.85rem; flex: none; }
.ct-state { color: var(--color-muted); }
.ct-state.ok { color: var(--color-success); font-weight: 500; }
.ct-state.pause { color: var(--color-warning); font-weight: 500; }
.ct-dur { font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--color-muted); }
.ct-pad { margin: 0; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 0; }
.ct-pad h2 { margin: 0 0 4px; font-size: 1.3rem; }
.ct-hint { margin: 0 0 14px; font-size: 0.9rem; }
.ct-dots { display: flex; gap: 14px; justify-content: center; margin: 4px 0 10px; }
.ct-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-border-strong); background: transparent; transition: background 0.1s; }
.ct-dot.on { background: var(--color-ink); border-color: var(--color-ink); }
.ct-msg { min-height: 1.4em; margin: 0 0 12px; font-size: 0.9rem; }
.ct-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 330px; }
.ct-key { height: 68px; font-size: 1.6rem; font-weight: 500; border-radius: 14px; touch-action: manipulation; }
.ct-key-small { font-size: 0.95rem; font-weight: 400; color: var(--color-muted); }
.ct-person { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; }
.ct-bigavatar .avatar { width: 96px; height: 96px; font-size: 32px; margin-bottom: 10px; }
.ct-line { margin: 0 0 6px; color: var(--color-ink); }
.ct-acts { display: flex; flex-direction: column; gap: 10px; width: 100%; margin: 8px 0 12px; }
.ct-act { height: 88px; font-size: 1.4rem; border-radius: 16px; width: 100%; touch-action: manipulation; }
.ct-cancel { border: 0; background: transparent; color: var(--color-muted); }
.ct-done h2 { margin-top: 8px; }
.ct-check { width: 84px; height: 84px; border-radius: 50%; background: var(--color-success-soft); color: var(--color-success); display: flex; align-items: center; justify-content: center; }
@media (max-width: 820px) {
  .ct-overlay { padding: 14px 16px 16px; overflow-y: auto; }
  .ct-body { display: flex; flex-direction: column; flex: none; }
  .ct-pad { order: -1; }
  .ct-people { overflow: visible; }
  .ct-time { font-size: 2rem; }
  .ct-key { height: 60px; }
}

/* Einstellungen -> Arbeitszeiten: Stempel-Codes */
.ts-codes { margin-bottom: 2rem; }
.ts-codes-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.ts-codes h2 { margin: 0 0 4px; }
.ts-code-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.9rem; }
.ts-code-row .abs-who { flex: 1; min-width: 200px; }
.ts-code-row .ts-code-actions { display: flex; gap: 8px; margin-left: auto; }
.ts-code-new { font-size: 1.5rem; font-weight: 600; letter-spacing: 0.25em; font-variant-numeric: tabular-nums; padding: 4px 14px; background: var(--color-warning-soft); border: 1px solid #F0D9B5; border-radius: var(--radius-sm); color: var(--color-ink); }
.ts-code-hint { font-size: 0.8rem; }
.ts-code-places { font-size: 0.8rem; }
.ts-code-sep { margin: 14px 0 8px; font-size: 0.85rem; color: var(--color-muted); }
.ts-switch + .ts-switch { margin-top: -1rem; }

/* Team & Benutzerkonten: Zugang fuer das Rezeptions-Tablet */
.abs-section-actions button.acc-tablet-btn { display: flex; align-items: center; justify-content: center; gap: 8px; border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-soft); }
.abs-section-actions button.acc-tablet-btn:hover { background: var(--color-surface); }
.acc-tablet-note { margin: 0 0 14px; padding: 10px 14px; background: var(--color-accent-soft); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-size: 0.88rem; color: var(--color-ink); }

/* Team & Benutzerkonten: Zugangsdaten im Fenster */
.cred-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 4px 0 14px; font-size: 0.95rem; }
.cred-list dt { color: var(--color-muted); }
.cred-list dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
/* Login: Hinweis, wenn ohne Anmelde-Link ein Benutzername eingegeben wird */
.login-hint { display: flex; flex-direction: column; gap: 3px; margin: 0 0 16px; padding: 12px 14px; background: var(--color-warning-soft); border: 1px solid var(--color-warning); border-radius: var(--radius-md); font-size: 0.88rem; color: var(--color-ink); }
.login-hint strong { color: var(--color-warning); }
.login-hint[hidden] { display: none; }
.acc-tablet-note p { margin: 0; color: var(--color-ink); }
.acc-tablet-note p + p { margin-top: 8px; }

/* Einstellungen -> Arbeitszeiten: Pausenregel */
.ts-breaks { padding: 16px 20px; margin-bottom: 1.5rem; }
.ts-break-options { display: flex; flex-direction: column; gap: 10px; }
.ts-break-option { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; }
.ts-break-option:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.ts-break-option input { width: auto; margin: 3px 0 0; flex: none; }
.ts-break-option > span { display: flex; flex-direction: column; gap: 3px; font-size: 0.9rem; }
.ts-break-option > span .muted { font-size: 0.85rem; }
.ts-break-note { margin: 10px 0 0; font-size: 0.8rem; }

/* Pausen-Karte blinkt kurz (die ganze Karte), wenn die Stechuhr eingeschaltet wird */
@keyframes ts-attention {
  0%, 100% { background-color: var(--color-surface); border-color: var(--color-border); box-shadow: 0 0 0 0 rgba(110, 86, 201, 0); }
  16%, 50%, 84% { background-color: #E4DAF8; border-color: var(--color-accent); box-shadow: 0 0 0 6px rgba(110, 86, 201, 0.35); }
  33%, 67% { background-color: var(--color-surface); border-color: var(--color-border); box-shadow: 0 0 0 0 rgba(110, 86, 201, 0); }
}
.ts-breaks.ts-attention { animation: ts-attention 2.4s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) { .ts-breaks.ts-attention { animation: none; } }

/* ==========================================================================
   Dienstplan pro Datum (Wochenansicht) und Reiter Team / Dienstplan
   ========================================================================== */
.page-tabs { display: flex; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--color-border); }
.page-tabs a { padding: 9px 16px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--color-muted); font-weight: 500; text-decoration: none; border-radius: 8px 8px 0 0; }
.page-tabs a:hover { color: var(--color-ink); background: var(--color-accent-soft); }
.page-tabs a.active { color: var(--color-ink); border-bottom-color: var(--color-accent); }

.sp-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.sp-nav, .sp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-nav button, .sp-actions button { margin: 0; }
.sp-nav button:first-child, .sp-nav button:nth-child(3) { display: inline-flex; align-items: center; justify-content: center; width: 42px; padding: 0; height: 42px; }
.sp-range { min-width: 190px; padding: 10px 16px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); text-align: center; font-weight: 500; }
.sp-link { color: var(--color-accent); font-weight: 500; text-decoration: none; padding: 0 6px; }
.sp-link:hover { text-decoration: underline; }
.sp-card { padding: 8px 12px 12px; }
.sp-scroll { overflow-x: auto; }
.sp-grid { width: 100%; min-width: 880px; table-layout: fixed; border-collapse: separate; border-spacing: 6px; }
.sp-grid th, .sp-grid td { padding: 0; border: 0; background: none; vertical-align: middle; text-align: center; }
.sp-grid th:first-child { width: 210px; }
.sp-grid th.sp-week { text-align: left; padding: 0 4px; }
.sp-grid th.sp-week { vertical-align: bottom; }
.sp-grid caption.sp-title { caption-side: top; text-align: left; padding: 2px 4px 4px; font-size: 1.15rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-week span { font-size: 0.8rem; color: var(--color-muted); font-weight: 400; }
.sp-day { padding: 6px 2px; }
.sp-day-number { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 4px; border-radius: 15px; font-size: 1.15rem; font-weight: 600; }
.sp-day.sp-today .sp-day-number { background: var(--color-primary); color: #fff; }
.sp-day-name, .sp-day-hours { display: block; font-size: 0.85rem; font-weight: 400; color: var(--color-ink); }
.sp-day-hours { min-height: 1.2em; font-size: 0.75rem; color: var(--color-muted); }
.schedule-table td.sched-hours span { display: block; }
.schedule-table td.sched-hours .sched-hours-net { font-weight: 500; }
.sp-grid th.sp-person { text-align: left; padding: 4px 4px 4px 0; font-weight: 400; }
.sp-person .cell-person { font-weight: 500; }
.sp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-hours { display: block; margin: 2px 0 0 78px; font-size: 0.78rem; color: var(--color-muted); cursor: default; }
.sp-hours-diff { color: var(--color-warning); font-weight: 500; }
.sp-cell { position: relative; display: block; width: 100%; min-height: 48px; padding: 4px; border: 0; border-radius: 10px; background: #F6F4F9; font: inherit; color: inherit; text-align: center; }
button.sp-cell { cursor: pointer; transition: background 0.12s; }
button.sp-cell:hover { background: var(--color-accent-soft); box-shadow: inset 0 0 0 1px var(--color-lavendel); }
.sp-cell-inner { display: flex; flex-direction: column; gap: 3px; justify-content: center; min-height: 40px; }
.sp-plus { position: absolute; right: 6px; top: 4px; display: none; font-size: 0.9rem; color: var(--color-accent); }
button.sp-cell:hover .sp-plus { display: block; }
.sp-chip { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 6px; border-radius: 8px; font-size: 0.82rem; font-weight: 500; white-space: nowrap; }
.sp-shift { background: color-mix(in srgb, var(--color-accent) 24%, var(--color-surface)); color: var(--color-ink); }
.sp-repeat { flex: none; color: var(--color-accent); }
.sp-absent { background: var(--color-danger-soft); color: var(--color-danger); }
.sp-partial { font-size: 0.74rem; font-weight: 500; }
.sp-off, .sp-none { font-size: 0.82rem; color: var(--color-muted); }
.sp-cell.sp-violation { box-shadow: inset 0 0 0 1.5px var(--color-danger); }
.sp-cell.sp-violation::after { content: '!'; position: absolute; top: 3px; right: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-danger); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 14px; text-align: center; }
button.sp-cell.sp-violation:hover .sp-plus { display: none; }
.sp-empty { padding: 28px 0; }
.sp-legend { display: flex; align-items: center; gap: 6px; margin: 10px 4px 0; font-size: 0.8rem; flex-wrap: wrap; }

/* Fenster: Dienst eines Tages */
.sp-dialog-note { margin: 0 0 12px; font-size: 0.85rem; }
.sp-notice { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--color-danger-soft); color: var(--color-ink); font-size: 0.85rem; }
.sp-notice-warn { background: var(--color-warning-soft); margin: 12px 0 0; }
.sp-shift-row { display: grid; grid-template-columns: 1fr 1fr 36px; gap: 10px; align-items: end; margin-bottom: 10px; }
.sp-shift-row label { margin: 0; font-size: 0.85rem; font-weight: 500; }
.sp-shift-row input { margin: 4px 0 0; min-width: 0; }
.sp-revert-btn { white-space: nowrap; }
.sp-remove { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 42px; padding: 0; border-radius: var(--radius-sm); color: var(--color-danger); }
.sp-dialog-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 12px; }
.sp-dialog-line button { margin: 0; }
.sp-free { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; cursor: pointer; }
.sp-free input { width: auto; margin: 0; }

/* Reiter nur fuer Inhaber:innen: Mitarbeitende sehen sie nie, auch nicht kurz beim Laden */
html:not([data-role="owner"]) [data-owner-tab] { display: none; }
.ts-diff-plus { color: var(--color-success); font-weight: 500; }
.ts-diff-minus { color: var(--color-warning); font-weight: 500; }
.sp-print-title { display: none; }
@media print {
  .sidebar, .topbar, .page-tabs, .sp-toolbar, .sp-legend, .fb-fab, .fb-overlay, .sp-plus, .page-head, .abs-tip { display: none !important; }
  .app-shell { display: block; }
  .main-content { padding: 0; }
  .sp-print-title { display: block; margin: 0 0 8px; font-size: 1.1rem; font-weight: 600; }
  .sp-card { box-shadow: none; border: 0; padding: 0; }
  .sp-scroll { overflow: visible; }
  .sp-grid { min-width: 0; width: 100%; border-spacing: 3px; }
  .sp-grid th:first-child { width: 150px; }
  .sp-chip { padding: 3px 4px; font-size: 0.72rem; }
  .sp-cell { min-height: 0; }
  .sp-cell-inner { min-height: 0; }
  .sp-hours, .sp-day-hours { font-size: 0.68rem; }
  /* Die Personenspalte ist beim Druck schmal: Stunden ohne Einrueckung und ohne Zeilenumbruch */
  .sp-hours { margin-left: 0; white-space: nowrap; }
  body { background: #fff; }
  .sp-grid, .sp-grid * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==========================================================================
   Uebersicht: Karten fuer den Alltag (dashboard-cards.js)
   ========================================================================== */
.dash-card-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; align-items: stretch; }
.dash-card-row > [data-widget] { grid-column: var(--dash-col, auto); grid-row: var(--dash-row, auto); }
.dash-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 18px 22px 14px; display: flex; flex-direction: column; min-width: 0; }
.dash-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dash-card-head h2 { margin: 0; font-size: 1.05rem; }
.dash-card-sub { flex: 1; font-size: 12px; color: var(--color-muted); }
.dash-card-gear { align-self: center; margin-left: auto; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--color-muted); }
.dash-card-gear:hover { background: var(--color-accent-soft); color: var(--color-ink); }
.dash-card-gear svg { width: 17px; height: 17px; }
/* Die Karte waechst mit ihrem Inhalt (bis max-height) und fuellt den Platz im Raster; gescrollt wird nur, wenn es wirklich nicht reicht. */
.dash-card { max-height: 620px; }
.dash-card-body { flex: 1; min-height: 120px; overflow-y: auto; }
.dc-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--color-border); text-decoration: none; color: inherit; }
.dc-row:first-child { border-top: 0; }
.dc-row.dc-top { align-items: flex-start; }
.dc-row.dc-click { cursor: pointer; border-radius: 8px; }
.dc-row.dc-click:hover { background: var(--color-accent-soft); box-shadow: 0 0 0 6px var(--color-accent-soft); }
.dc-row .avatar { width: 32px; height: 32px; font-size: 11px; flex: none; }
.dc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.dc-main strong { font-weight: 500; font-size: 0.92rem; }
.dc-who { font-weight: 400; }
.dc-who.muted { color: var(--color-muted); }
.dc-sub { font-size: 0.78rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-sub.faint { font-size: 0.72rem; opacity: 0.8; }
.dc-aside { flex: none; font-size: 0.8rem; color: var(--color-muted); white-space: nowrap; }
.dc-time { flex: none; width: 44px; font-weight: 600; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.dc-line { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-height: 22px; min-width: 0; }
.dc-line > * { min-width: 0; }
.dc-line .dc-chip, .dc-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-line .dc-sub { flex: none; max-width: 100%; } /* gleich hoch mit und ohne Schild (Stechuhr), damit die Zeilen beim Umschalten nicht zusammenrücken */
.dc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 2px 1px 4px; background: var(--color-border-strong); }
.dc-dot.busy { background: var(--color-success); }
.dc-dot.free { background: var(--color-lavendel); }
.dc-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 500; background: var(--color-bg); color: var(--color-muted); white-space: nowrap; }
.dc-chip.ok { background: var(--color-success-soft); color: var(--color-success); }
.dc-chip.warn { background: var(--color-warning-soft); color: var(--color-warning); }
.dc-chip.danger { background: var(--color-danger-soft); color: var(--color-danger); }
.dc-flag { display: block; margin-top: 3px; padding: 4px 9px; border-radius: 8px; font-size: 0.78rem; line-height: 1.35; background: var(--color-warning-soft); color: #5C3A0C; }
.dc-flag.warn { background: var(--color-danger-soft); color: var(--color-danger); font-weight: 500; }
.dc-flag.formula { background: var(--color-accent-soft); color: var(--color-ink); }
.dc-empty { padding: 18px 4px; text-align: center; color: var(--color-muted); font-size: 0.88rem; }
.dc-more { padding: 8px 0 0; font-size: 0.78rem; color: var(--color-muted); text-align: center; }
.dc-ticket { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-board-add { display: flex; gap: 8px; margin-bottom: 6px; }
.dc-board-add input { margin: 0; flex: 1; min-width: 0; padding: 0.5rem 0.7rem; font-size: 0.88rem; }
.dc-board-add button { width: 38px; padding: 0; font-size: 1.2rem; line-height: 1; }
.dc-note { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--color-border); }
.dc-note:first-child { border-top: 0; }
.dc-note .dc-text { font-size: 0.9rem; overflow-wrap: anywhere; }
.dc-note.done .dc-text { text-decoration: line-through; color: var(--color-muted); }
.dc-check { flex: none; width: 22px; height: 22px; margin-top: 1px; padding: 0; border-radius: 6px; border: 1.5px solid var(--color-border-strong); background: var(--color-surface); color: #fff; font-size: 13px; line-height: 1; }
.dc-note.done .dc-check { background: var(--color-success); border-color: var(--color-success); }
.dc-del { flex: none; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--color-muted); font-size: 18px; line-height: 1; border-radius: 50%; opacity: 0; }
.dc-note:hover .dc-del, .dc-del:focus-visible { opacity: 1; }
.dc-del:hover { background: var(--color-danger-soft); color: var(--color-danger); border-color: transparent; }
.dc-pop { position: fixed; z-index: 2500; width: 270px; padding: 12px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.dc-pop-title { font-weight: 600; font-size: 0.85rem; margin-bottom: 8px; }
.dc-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 6px 0; font-weight: 400; font-size: 0.88rem; }
.dc-pop-row.check { justify-content: flex-start; }
.dc-pop-row input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--color-primary); }
.dc-pop-row select { width: auto; margin: 0; padding: 0.3rem 0.5rem; font-size: 0.85rem; }
@media (max-width: 1200px) {
  .dash-card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-card-row > [data-widget] { grid-column: auto; grid-row: auto; }
}
@media (max-width: 700px) { .dash-card-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Uebersicht: gemeinsames Raster fuer alle grossen Kacheln (frei tauschbar, siehe dashboard-layout.js)
   ========================================================================== */
.dash-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.dash-grid > [data-widget] { grid-column: var(--dash-col, auto); grid-row: var(--dash-row, auto); min-width: 0; }
@media (max-width: 1200px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid > [data-widget] { grid-column: auto; grid-row: auto; }
  .dash-grid > .is-wide-slot { grid-column: 1 / -1; }
}
@media (max-width: 700px) { .dash-grid { grid-template-columns: 1fr; } }
.dm-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.dm-grid .dm-slot { height: 54px; }

/* Kacheln passen sich an die Breite ihres Platzes an (sie koennen jetzt auf breiten und schmalen Plaetzen stehen) */
.dash-upcoming-card, .dash-utilization-card, .dash-card { container-type: inline-size; }
@container (max-width: 560px) {
  .dash-upcoming-row { gap: 12px; padding: 0 16px; }
  .dash-upcoming-row .employee-col { width: auto; }
  .dash-upcoming-row .employee-col > span:last-child:not(.avatar) { display: none; }
  .dash-upcoming-row > .pill { display: none; }
  .dash-upcoming-head { padding-left: 16px; padding-right: 16px; }
}

/* ==========================================================================
   Analyse (nur Inhaber:innen, private/analysis.html + js/analysis.js)
   ========================================================================== */
.an-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 8px; }
.an-kpis .revenue-kpi { cursor: default; }
.revenue-kpi .sub.pos { color: var(--color-success); }
.revenue-kpi .sub.neg { color: var(--color-danger); }
.an-more { margin: 0 0 20px; font-size: 13px; color: var(--color-muted); min-height: 1.4em; }
.an-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.an-card-head h2 { margin: 0; }
.an-hint { font-size: 12px; color: var(--color-muted); }
.an-table-card { margin-bottom: 20px; padding-bottom: 12px; }
.an-table-wrap { overflow-x: auto; }
.an-table { width: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; border-collapse: collapse; min-width: 900px; }
.an-table th { padding: 8px 12px; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; user-select: none; color: var(--color-muted); }
.an-table th:hover { color: var(--color-ink); }
.an-table th.sorted { color: var(--color-ink); }
.an-table th.num, .an-table td.num { text-align: right; }
.an-table td { padding: 10px 12px; font-size: 14px; vertical-align: middle; font-variant-numeric: tabular-nums; }
.an-table td.num { white-space: nowrap; }
.an-table tbody tr:hover td { background: var(--color-bg); }
.an-table tfoot td { border-top: 2px solid var(--color-border-strong); border-bottom: 0; font-weight: 600; }
.an-table tr.an-muted td { color: var(--color-muted); }
.an-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.an-who .avatar { width: 32px; height: 32px; font-size: 11px; flex: none; }
.an-who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.an-who strong { font-weight: 500; }
.an-sub { display: block; font-size: 11.5px; font-weight: 400; color: var(--color-muted); }
.an-sub.neg { color: var(--color-danger); }
span.an-sub { display: inline; margin-left: 6px; }
.an-table td.num .an-sub { display: block; margin-left: 0; }
.an-minibar { display: block; height: 5px; margin-top: 4px; margin-left: auto; width: 72px; border-radius: 3px; background: var(--color-bg); overflow: hidden; }
.an-minibar > span { display: block; height: 100%; background: var(--color-accent); }
.an-columns { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding-top: 4px; }
.an-col { flex: 1; min-width: 0; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 6px; }
.an-col-track { display: flex; align-items: flex-end; min-height: 0; }
.an-col-track .an-col-bar { width: 100%; }
.an-col:hover { background: var(--color-accent-soft); }
.an-col-bar { display: block; border-radius: 4px 4px 0 0; background: var(--color-lavendel); }
.an-col:hover .an-col-bar { filter: brightness(0.9); }
.an-col-value { text-align: center; font-size: 11px; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-col-label { text-align: center; font-size: 11px; color: var(--color-muted); margin-top: 6px; }
.an-empty { padding: 24px 4px; text-align: center; color: var(--color-muted); font-size: 0.9rem; }
@media (max-width: 900px) { .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Support: Antworten von vonSeide unter dem Ticket */
.sup-reply { margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--accent, #6e56c9); background: rgba(110, 86, 201, .07); border-radius: 0 8px 8px 0; white-space: pre-wrap; font-size: .9rem; }
.sup-reply-head { font-size: .76rem; color: #7a7288; margin-bottom: 3px; }

/* Kleine Zahl neben "Support" in der Kopfzeile: neue Antworten vom Support */
.header-support-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-accent); color: #fff; font-size: 0.72rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.header-support-count[hidden] { display: none; }
.pill.pill-new { background: var(--color-accent); color: #fff; }

/* Support: Ticket-Fenster mit Gespraech, Spalte "Angelegt von" */
.sup-table .c-by { width: 150px; }
.sup-row { cursor: pointer; }
.sup-row:hover td, .sup-row:focus-visible td { background: var(--color-bg); }
.sup-row:focus-visible { outline: none; }
.sup-count { margin-top: 3px; font-size: 0.8rem; color: var(--color-muted); }
dialog.sup-dialog { width: min(640px, calc(100vw - 32px)); }
.sup-dialog-head { display: flex; align-items: flex-start; gap: 12px; }
.sup-dialog-head h2 { flex: 1; min-width: 0; }
.sup-x { flex: none; margin: 18px 18px 0 0; background: transparent; border: 0; color: var(--color-muted); font-size: 1.6rem; line-height: 1; padding: 0 6px; cursor: pointer; }
.sup-x:hover { color: var(--color-ink); }
.sup-meta { margin: 0 0 12px; font-size: 0.85rem; color: var(--color-muted); }
.sup-thread { max-height: min(46vh, 420px); overflow-y: auto; padding-right: 4px; }
.sup-msg { max-width: 90%; margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; border-top-left-radius: 3px; background: var(--color-bg); white-space: pre-wrap; overflow-wrap: anywhere; }
.sup-msg-us { margin-left: auto; border-top-left-radius: 12px; border-top-right-radius: 3px; background: rgba(110, 86, 201, .12); }
.sup-msg-head { margin-bottom: 3px; font-size: 0.76rem; color: var(--color-muted); }
.form-dialog-foot textarea { width: 100%; resize: vertical; min-height: 74px; margin-bottom: 10px; box-sizing: border-box; }
dialog.sup-dialog:focus { outline: none; }
.sup-x { border-radius: 8px; }
.sup-x:focus-visible { outline: 2px solid rgba(110, 86, 201, .45); outline-offset: 1px; }