/* ===================================================
   TimeDesk – Design System
   Indigo palette · Inter + JetBrains Mono · Sidebar layout
   =================================================== */

/* ── 0. Local Fonts ──────────────────────────────────── */
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/jetbrains-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/jetbrains-mono-600.woff2') format('woff2'); }

/* ── 1. Reset + CSS Variables ──────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

:root {
  /* Backgrounds */
  --bg:        oklch(0.985 0.003 90);
  --surface:   #ffffff;
  --surface-2: oklch(0.975 0.004 90);
  --surface-3: oklch(0.955 0.005 90);

  /* Text */
  --ink:       oklch(0.22 0.012 270);
  --ink-2:     oklch(0.42 0.012 270);
  --ink-3:     oklch(0.58 0.010 270);
  --ink-4:     oklch(0.75 0.008 270);

  /* Lines */
  --line:      oklch(0.92 0.006 270);
  --line-2:    oklch(0.88 0.008 270);

  /* Accent – Indigo */
  --accent:      oklch(0.55 0.18 265);
  --accent-2:    oklch(0.62 0.16 265);
  --accent-soft: oklch(0.96 0.04 265);
  --accent-ink:  oklch(0.38 0.18 265);

  /* Semantic */
  --ok:        oklch(0.62 0.14 155);
  --ok-soft:   oklch(0.96 0.04 155);
  --ok-ink:    oklch(0.42 0.14 155);

  --warn:      oklch(0.72 0.14 75);
  --warn-soft: oklch(0.96 0.05 80);
  --warn-ink:  oklch(0.45 0.14 65);

  --danger:      oklch(0.60 0.18 25);
  --danger-soft: oklch(0.96 0.04 25);
  --danger-ink:  oklch(0.45 0.16 25);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20,22,40,.04), 0 1px 1px rgba(20,22,40,.03);
  --shadow:    0 1px 2px rgba(20,22,40,.04), 0 8px 24px -8px rgba(20,22,40,.10);
  --shadow-lg: 0 4px 12px -4px rgba(20,22,40,.10), 0 24px 48px -12px rgba(20,22,40,.18);

  /* Radius */
  --radius:    10px;
  --radius-sm: 7px;
  --radius-lg: 14px;

  /* Fonts */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Legacy aliases (JS inline styles reference these) */
  --blue:      var(--accent);
  --blue-dark: oklch(0.48 0.18 265);
  --blue-deep: oklch(0.42 0.18 265);
  --green:     var(--ok-ink);
  --green-bg:  var(--ok-soft);
  --red:       var(--danger-ink);
  --red-bg:    var(--danger-soft);
  --orange:    var(--warn-ink);
  --gray-100:  var(--surface-2);
  --gray-200:  var(--surface-3);
  --gray-300:  var(--line);
  --gray-400:  var(--line-2);
  --gray-500:  var(--ink-4);
  --gray-600:  var(--ink-3);
  --gray-700:  var(--ink);
  --white:     var(--surface);
}

/* ── 2. Base ─────────────────────────────────────────── */
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; outline: none; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--accent-soft); color: var(--accent-ink); }

#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.screen { display: contents; }
.hidden { display: none !important; }

/* ── 3. App Shell (Sidebar + Main Grid) ───────────────── */
.app-shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── 4. Sidebar ──────────────────────────────────────── */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; }

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 18px;
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 13px; letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px -1px oklch(0.55 0.18 265 / 0.35);
}
.brand-name { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; }
.brand-name small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }

.nav-label {
  font-size: 10.5px; font-weight: 700; color: var(--ink-4);
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 14px 10px 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  width: 100%; text-align: left;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.nav-item .ico { width: 17px; height: 17px; flex-shrink: 0; opacity: .75; }
.nav-item.active .ico { opacity: 1; }
.nav-count {
  margin-left: auto;
  font-size: 11px; font-weight: 600;
  color: var(--ink-4);
  background: var(--surface-3);
  padding: 1px 6px; border-radius: 10px;
  font-variant-numeric: tabular-nums;
  min-width: 22px; text-align: center;
}
.nav-item.active .nav-count { background: var(--accent); color: #fff; }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 12px; }

/* Zalaris Sync Card */
.sync-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
  background: var(--surface);
}
.sync-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-4);
  flex-shrink: 0;
  transition: background .25s, box-shadow .25s;
}
.sync-text { flex: 1; min-width: 0; }
.sync-label-btn {
  font-size: 12px; font-weight: 600; color: var(--ink);
  text-align: left; padding: 0;
  display: block; width: 100%;
}
.sync-label-btn:hover { color: var(--accent); }
.sync-sub { font-size: 10.5px; color: var(--ink-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-btn {
  width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center;
  color: var(--ink-3); flex-shrink: 0;
}
.sync-btn:hover { background: var(--surface-2); color: var(--ink); }
.sync-btn svg.spinning { animation: spin .75s linear infinite; }

/* Zalaris states → dot color */
.zalaris-state-ok .sync-dot    { background: var(--ok);     box-shadow: 0 0 0 3px var(--ok-soft); }
.zalaris-state-warn .sync-dot  { background: var(--warn);   box-shadow: 0 0 0 3px var(--warn-soft); }
.zalaris-state-auth-err .sync-dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.zalaris-state-auth .sync-dot  { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.zalaris-state-off .sync-dot   { background: var(--ink-4);  box-shadow: none; }

/* User Card */
.user-wrap { position: relative; }
.user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  width: 100%; text-align: left;
  transition: background .12s;
}
.user-card:hover { background: var(--surface-2); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.7 0.12 320), oklch(0.55 0.18 265));
  color: #fff; font-weight: 700; font-size: 12px; letter-spacing: -0.02em;
  display: grid; place-items: center; flex-shrink: 0;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-card-text { flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-mail { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chevron { color: var(--ink-4); flex-shrink: 0; }

/* User Dropdown (positioned above) */
.user-dropdown {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 6px; display: none; flex-direction: column; z-index: 60;
}
.user-wrap.open .user-dropdown { display: flex; }
.user-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  font-size: 13px; color: var(--ink); text-align: left;
  width: 100%;
}
.user-dropdown-item:hover { background: var(--surface-2); }
.user-dropdown-item svg { color: var(--ink-3); flex-shrink: 0; }
.user-dropdown-item.danger { color: var(--danger-ink); }
.user-dropdown-item.danger svg { color: var(--danger-ink); }
.user-dropdown-sep { height: 1px; background: var(--line); margin: 4px 2px; }

/* ── 5. Main + Topbar ────────────────────────────────── */
.main { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }

.topbar {
  height: 64px; flex-shrink: 0;
  display: flex; align-items: center;
  padding: 0 24px; gap: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: relative; z-index: 10;
}
.topbar-nav { display: flex; align-items: center; gap: 2px; }
.topbar-title { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.topbar-bookings-head { display: flex; align-items: center; gap: 14px; }
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }

/* Month display */
.month-display-btn {
  background: transparent; border: none;
  font-family: var(--font); font-size: 15px; font-weight: 600;
  color: var(--ink); min-width: 148px; text-align: center;
  padding: 5px 12px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background .12s, color .12s;
  letter-spacing: -0.01em;
}
.month-display-btn:hover { background: var(--surface-2); color: var(--accent); }
.month-picker-anchor { position: relative; }
.month-picker {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  z-index: 200; width: 280px; overflow: hidden;
}
.month-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
}
#picker-year { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.month-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px 14px 14px; }
.picker-month {
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 13px; font-weight: 500;
  color: var(--ink-2); padding: 8px 4px; cursor: pointer;
  text-align: center; transition: background .12s, border-color .12s, color .12s;
}
.picker-month:hover { background: var(--surface-2); color: var(--ink); }
.picker-month.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Filter tabs (Offen / Abgeschlossen) */
.tabs {
  display: flex; align-items: center;
  background: var(--surface-2); padding: 3px;
  border-radius: 9px; border: 1px solid var(--line); gap: 2px;
}
.tab {
  height: 28px; padding: 0 14px;
  border-radius: 6px; font-size: 12.5px; font-weight: 500;
  color: var(--ink-2); transition: all .12s;
}
.tab:hover { color: var(--ink); }
.tab.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }

/* ── 6. Workspace + Views ────────────────────────────── */
.workspace { flex: 1; overflow: auto; padding: 20px 24px 28px; display: flex; flex-direction: column; }
.view { display: none; flex-direction: column; }
.view.active { display: flex; flex-direction: column; }

/* ── Bookings Toolbar ─────────────────────────────── */
.bkg-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.bkg-toolbar-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bkg-toolbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.bkg-filter-tabs {
  display: inline-flex;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 3px; gap: 2px;
}
.bkg-filter-tabs .tab {
  height: 30px; padding: 0 14px; border-radius: 5px;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .12s;
}
.bkg-filter-tabs .tab:hover { color: var(--ink); }
.bkg-filter-tabs .tab.active {
  background: var(--surface); color: var(--ink);
  font-weight: 600; box-shadow: var(--shadow-sm);
}
.bkg-tab-count {
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  background: var(--surface-3); border-radius: 10px;
  padding: 0 6px; min-width: 18px; text-align: center;
}
.bkg-filter-tabs .tab.active .bkg-tab-count {
  background: var(--accent-soft); color: var(--accent-ink);
}

.bkg-search {
  position: relative; display: flex; align-items: center;
}
.bkg-search svg {
  position: absolute; left: 10px; color: var(--ink-3); pointer-events: none;
}
.bkg-search input {
  height: 36px; padding: 0 12px 0 34px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); font: inherit; color: var(--ink);
  font-size: 13px; width: 280px;
  transition: border-color .12s, box-shadow .12s;
}
.bkg-search input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.bkg-search input::placeholder { color: var(--ink-4); }

/* Bookings-Karte */
.bkg-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Kalender-Karte */
.cal-panel {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.cal-panel-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--surface);
}
#topbar-calendar-actions {
  display: flex;
  justify-content: flex-end;
}
#calendar {
  flex: 1; min-height: 0; overflow: auto;
}

/* ── 7. Buttons ──────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; height: 36px; padding: 0 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 13px; font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn-primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(20,22,40,.08), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-primary:active { background: oklch(0.48 0.18 265); }
.btn-primary:disabled { background: var(--ink-4); border-color: var(--ink-4); cursor: default; }

.btn-ghost { color: var(--ink-2); border-color: var(--line); background: var(--surface); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:disabled { color: var(--ink-4); cursor: default; }

.btn-icon {
  width: 36px; height: 36px; padding: 0;
  justify-content: center;
  color: var(--ink-2); border-color: transparent; background: transparent;
}
.btn-icon:hover { background: var(--surface-2); color: var(--ink); }

.btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn-large { height: 42px; padding: 0 22px; font-size: 14.5px; font-weight: 600; }

.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: oklch(0.52 0.18 25); }

/* ── 8. Inputs + Form Controls ───────────────────────── */
.input, input[type="text"].input, input[type="email"].input,
input[type="number"].input, input[type="password"].input, textarea.input {
  height: 36px; padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 14px;
  color: var(--ink); background: var(--surface);
  transition: border-color .12s, box-shadow .12s;
  width: 100%;
}
textarea.input { height: auto; padding: 9px 12px; resize: vertical; line-height: 1.5; }
.input:focus, textarea.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input::placeholder { color: var(--ink-4); }
select.input {
  height: 36px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 13px; color: var(--ink);
  background: var(--surface);
  cursor: pointer;
}
select.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Checkbox + Radio */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ── 9. Badges + Pills ───────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  border-radius: 11px;
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.badge .bd { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge.received { background: var(--accent-soft); color: var(--accent-ink); }
.badge.progress  { background: var(--ok-soft);     color: var(--ok-ink); }
.badge.open      { background: var(--warn-soft);   color: var(--warn-ink); }
.badge.completed { background: var(--surface-3);   color: var(--ink-3); }
.badge.urgent    { background: var(--danger-soft); color: var(--danger-ink); }

/* booking badges (JS-generated class names) */
.booking-badge--received { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap; }
.booking-badge--progress { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--ok-soft); color: var(--ok-ink); white-space: nowrap; }
.booking-badge--open     { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--warn-soft); color: var(--warn-ink); white-space: nowrap; }
.booking-badge--default  { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--surface-3); color: var(--ink-3); white-space: nowrap; }
.booking-badge--urgent   { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--danger-soft); color: var(--danger-ink); white-space: nowrap; }

/* ── 10. Loading Screen ──────────────────────────────── */
#loading-screen {
  display: flex; align-items: center; justify-content: center;
  flex: 1; background: var(--bg);
}
.loading-center { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.loading-spinner {
  width: 44px; height: 44px;
  border: 3px solid var(--line-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-checkmark {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ok); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700;
  animation: pop .3s ease-out;
}
@keyframes pop { 0% { transform: scale(.5); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.loading-text { font-size: 14px; color: var(--ink-3); text-align: center; max-width: 320px; line-height: 1.55; }

/* ── 11. Login Screen (Microsoft-style) ──────────────── */
#login-screen {
  display: flex; align-items: center; justify-content: center;
  flex: 1; background: var(--bg);
}
.ms-login-card {
  background: var(--surface); width: 440px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg);
  border-radius: 6px;
  border: 1px solid var(--line);
}
.ms-slider-viewport { overflow: hidden; width: 100%; }
.ms-slider { display: flex; width: 300%; transition: transform .32s cubic-bezier(.4,0,.2,1); will-change: transform; }
.ms-slider[data-step="1"] { transform: translateX(0); }
.ms-slider[data-step="2"] { transform: translateX(calc(-100% / 3)); }
.ms-slider[data-step="3"] { transform: translateX(calc(-200% / 3)); }
.ms-panel {
  flex: 0 0 calc(100% / 3); width: calc(100% / 3);
  padding: 44px 44px 40px; display: flex; flex-direction: column;
  gap: 20px; min-height: 360px;
}
.ms-panel-mfa { align-items: center; text-align: center; }
.ms-brand { display: flex; align-items: center; gap: 9px; }
.ms-brand-name { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.ms-heading { font-size: 24px; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.2; }
.ms-email-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 3px;
  background: none; cursor: pointer; font-size: 13px; color: var(--ink);
  max-width: 100%; text-align: left; font-family: inherit;
  transition: border-color .15s, background .15s;
}
.ms-email-pill:hover { border-color: var(--accent); background: var(--accent-soft); }
.ms-email-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.ms-input {
  width: 100%; border: none; border-bottom: 1px solid var(--line-2);
  padding: 8px 0; font-size: 15px; font-family: inherit;
  color: var(--ink); background: transparent; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ms-input:focus { border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
.ms-checkbox-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink); cursor: pointer;
}
.ms-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.ms-btn {
  align-self: flex-end; padding: 9px 20px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 3px;
  font-size: 15px; font-family: inherit; font-weight: 500;
  cursor: pointer; transition: background .15s;
}
.ms-btn:hover { background: var(--accent-2); }
.ms-btn:active { background: oklch(0.48 0.18 265); }
.ms-btn:disabled { background: var(--ink-4); cursor: default; }
.ms-error {
  background: var(--danger-soft); border-left: 3px solid var(--danger);
  padding: 8px 12px; font-size: 13px; color: var(--danger-ink); border-radius: 3px;
}
.ms-mfa-tile {
  width: 120px; height: 120px;
  border: 2px solid var(--line-2); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); margin: 4px auto;
}
.ms-mfa-spin {
  width: 40px; height: 40px;
  border: 3px solid var(--line-2); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}
.ms-mfa-num {
  font-size: 48px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.02em; animation: pop .25s ease-out;
}
.ms-mfa-desc { font-size: 14px; color: var(--ink); margin: 0; }
.ms-mfa-hint { font-size: 13px; color: var(--ink-3); margin: 0; }
.ms-success-overlay {
  position: absolute; inset: 0; background: var(--surface);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 20px; animation: fadeIn .3s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.ms-success-check {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--ok); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 700;
  animation: pop .4s .05s ease-out both;
}
.ms-success-text { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0; }

/* ── 12. No-tab Screen ───────────────────────────────── */
#no-tab-screen {
  display: flex; align-items: center; justify-content: center;
  flex: 1; background: var(--bg);
}
.center-card {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 48px 56px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  text-align: center; max-width: 420px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.center-icon { font-size: 44px; }
.center-card h2 { font-size: 20px; font-weight: 600; color: var(--ink); }
.center-card p  { color: var(--ink-3); font-size: 14px; line-height: 1.55; }

/* ── 13. Calendar ────────────────────────────────────── */
#calendar {
  display: flex; flex-direction: column;
  min-width: 900px;
  background: var(--surface);
}

/* Header row */
.calendar-header {
  display: grid; grid-template-columns: 68px repeat(7, 1fr);
  position: sticky; top: 0; z-index: 5;
  background: var(--surface-2);
}
.week-label-header, .day-header {
  font-size: 10.5px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em;
  text-align: center; padding: 8px 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.calendar-header > :last-child { border-right: none; }

/* Week row */
.week-row { display: grid; grid-template-columns: 68px repeat(7, 1fr); }
.week-row > :last-child { border-right: none; }
.week-row:last-child > * { border-bottom: none; }

/* KW label */
.week-label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8px 4px; gap: 5px;
}
.week-label.kw-undertime { background: var(--warn-soft); }
.week-label.kw-undertime .week-number { color: var(--warn-ink); }
.week-number { font-size: 10.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* Glass fill progress bar */
.week-progress-outer {
  width: 14px; height: 48px;
  border-radius: 4px;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  overflow: hidden; position: relative;
  box-shadow: inset 0 1px 1px rgba(20,22,40,.04);
}
.week-progress-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--accent) 76%, white) 0%,
    var(--accent) 100%);
  border-radius: 3px 3px 0 0;
  transition: height .35s cubic-bezier(.4,0,.2,1);
}
.week-label.pct-full  .week-progress-bar { background: linear-gradient(180deg, color-mix(in oklch, var(--ok) 76%, white) 0%, var(--ok) 100%); }
.week-label.pct-high  .week-progress-bar { background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 76%, white) 0%, var(--accent) 100%); }
.week-label.pct-mid   .week-progress-bar { background: linear-gradient(180deg, color-mix(in oklch, var(--warn) 76%, white) 0%, var(--warn) 100%); }
.week-label.pct-low   .week-progress-bar { background: linear-gradient(180deg, color-mix(in oklch, var(--danger) 76%, white) 0%, var(--danger) 100%); }
.week-label.kw-undertime .week-progress-bar { background: linear-gradient(180deg, color-mix(in oklch, var(--warn) 76%, white) 0%, var(--warn) 100%); }

/* Week pct label */
.week-pct { font-size: 10px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.week-pct.pct-full { color: var(--ok-ink); }
.week-pct.pct-high { color: var(--accent-ink); }
.week-pct.pct-mid  { color: var(--warn-ink); }
.week-pct.pct-low  { color: var(--danger-ink); }

/* Day cells */
.day-cell {
  background: var(--surface);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 10px 8px;
  min-height: 112px; cursor: pointer;
  transition: background .12s;
  display: flex; flex-direction: column; gap: 5px;
  user-select: none; position: relative;
}
.day-cell:hover { background: var(--surface-2); }
.day-cell.today { box-shadow: inset 0 0 0 2px var(--accent); }
.day-cell.weekend { background: var(--surface-2); }
.day-cell.other-month { background: var(--surface-2); cursor: default; opacity: .5; }
.day-cell.other-month:hover { background: var(--surface-2); }
.day-cell.zalaris-holiday { background: linear-gradient(135deg, var(--warn-soft), var(--surface)); }
.day-cell.zalaris-absence { background: linear-gradient(135deg, var(--accent-soft), var(--surface)); }
.day-cell.zalaris-holiday:hover { background: var(--warn-soft); }
.day-cell.zalaris-absence:hover { background: var(--accent-soft); }
.day-cell.day-undertime { background: var(--surface); }

/* Day cell header */
.day-header-cell { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.day-name { font-size: 10px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .06em; }
.day-date {
  font-size: 15px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.day-cell.today .day-date {
  color: #fff; background: var(--accent);
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
}
.day-total {
  margin-left: auto;
  font-size: 12px; font-weight: 700; color: var(--ok-ink);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.day-total--undertime { color: var(--warn-ink); }

/* Zalaris day tags */
.zalaris-tag { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; white-space: nowrap; margin-left: auto; }
.holiday-tag { background: var(--warn-soft); color: var(--warn-ink); }
.absence-tag { background: var(--accent-soft); color: var(--accent-ink); }
.nonworking-tag { background: var(--surface-3); color: var(--ink-3); }

/* Timeline in day cells */
.timeline-container {
  height: 18px; border-radius: 4px;
  background: var(--surface-3); position: relative;
  overflow: hidden; flex-shrink: 0;
}
.timeline-empty { height: 100%; }
.timeline-block {
  position: absolute; top: 0; bottom: 0;
  background: var(--accent); border-radius: 2px;
  opacity: .85;
}
.timeline-block--pending { background: var(--warn); }
.timeline-block--free    { background: var(--ink-4); }

/* Day entries list */
.day-entries-list {
  font-size: 11px; color: var(--ink-3);
  line-height: 1.4; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}

/* ── 14. Bookings Table ──────────────────────────────── */
.bookings-table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.bookings-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.bookings-table thead th {
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.bookings-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.bookings-table tbody tr { transition: background .1s; }
.bookings-table tbody tr:hover { background: var(--surface-2); }
.bookings-table tbody tr:last-child td { border-bottom: none; }

/* Booking-specific cells */
.bt-num {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--accent-ink); font-weight: 600;
}
.bt-entry-link {
  font-size: 10.5px; color: var(--ink-3);
  text-decoration: none; padding: 1px 4px;
  border-radius: 4px; border: 1px solid var(--line);
  display: inline-block; margin-left: 2px;
  transition: color .12s, border-color .12s, background .12s;
}
.bt-entry-link:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.col-hours {
  font-family: var(--mono); font-weight: 700; font-size: 13px;
  color: var(--ink); font-variant-numeric: tabular-nums; text-align: right;
  white-space: nowrap;
}
.col-hours.no-hours { color: var(--ink-4); font-weight: 400; }
.hours-link { cursor: pointer; text-decoration: underline dotted; }
.hours-link:hover { color: var(--accent); }
.booking-category-header td {
  background: var(--surface-2);
  font-size: 11px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 8px 14px;
}
.booking-expand-btn {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 5px; font-size: 10px; padding: 2px 6px;
  color: var(--ink-3); cursor: pointer;
  transition: background .12s, color .12s;
}
.booking-expand-btn:hover { background: var(--accent-soft); color: var(--accent-ink); }
.booking-expand-spacer { display: inline-block; width: 26px; }
.booking-expand-row td { padding: 6px 14px 6px 28px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.booking-action-btn {
  width: 28px; height: 28px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 16px;
  transition: background .12s, color .12s;
}
.booking-action-btn:hover { background: var(--surface-3); color: var(--ink); }
.error-msg { padding: 24px; text-align: center; color: var(--danger-ink); font-size: 13px; }
.loading { padding: 48px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* ── 15. Overlay + Modal System ──────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: oklch(0.2 0.01 270 / 0.45);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 24px;
}
.modal-overlay.hidden { display: none !important; }
.modal-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  width: min(640px, 96vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: slideUp .18s ease;
}
.modal-card.stoerung-card { width: min(780px, 96vw); }
.modal-card.progress-card { width: min(500px, 96vw); }
@keyframes slideUp { from { transform: translateY(6px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-shrink: 0;
}
.modal-header h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.modal-body {
  padding: 22px; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 16px;
}
.modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; flex-shrink: 0;
}

.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.field-required { color: var(--danger-ink); margin-left: 2px; }

/* ── 16. Settings Modal ──────────────────────────────── */
#settings-modal {
  position: fixed; inset: 0;
  background: oklch(0.2 0.01 270 / 0.45);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 24px;
}
#settings-modal.hidden { display: none !important; }

.settings-modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  width: min(960px, 96vw);
  height: min(720px, 92vh);
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "head head"
    "nav  body"
    "foot foot";
  overflow: hidden;
  animation: slideUp .18s ease;
}

.settings-head {
  grid-area: head;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px;
}
.settings-head h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.settings-head .sub { font-size: 12px; color: var(--ink-3); }
.settings-head-spacer { flex: 1; }

.settings-nav {
  grid-area: nav;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 1px;
  overflow-y: auto;
}
.settings-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  text-align: left; width: 100%;
  transition: background .12s, color .12s;
}
.settings-nav-item:hover { background: var(--surface); color: var(--ink); }
.settings-nav-item.active { background: var(--surface); color: var(--accent-ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.settings-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .75; }
.settings-nav-item.active svg { color: var(--accent); opacity: 1; }

.settings-body {
  grid-area: body;
  padding: 24px 28px 28px;
  overflow-y: auto;
}
.settings-pane { display: none; flex-direction: column; gap: 20px; }
.settings-pane.active { display: flex; animation: fadeUp .2s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.settings-pane-head {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.settings-pane-head h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.settings-pane-head p { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }

.settings-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px; align-items: start;
  padding: 4px 0;
}
.settings-row.stack { grid-template-columns: 1fr; gap: 8px; }
.settings-row .lbl { font-size: 13px; font-weight: 600; color: var(--ink); padding-top: 8px; }
.settings-row.stack .lbl { padding-top: 0; }
.settings-row .lbl small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11.5px; margin-top: 2px; line-height: 1.45; }
.settings-row .ctrl { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* Setting groups (used in settings panes) */
.setting-group {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.setting-group:last-child { border-bottom: none; }
.setting-group > label {
  font-size: 13px; font-weight: 600; color: var(--ink);
}

/* Range input */
.range-input { display: flex; align-items: center; gap: 8px; }
.range-input .input.short { width: 100px; }
.range-input .input.tiny  { width: 72px; }
.range-input .unit { font-size: 12px; color: var(--ink-3); }
.range-input .sep  { font-size: 13px; color: var(--ink-3); }

/* Workday picker */
.daypick { display: flex; gap: 6px; flex-wrap: wrap; }
.daypick label { position: relative; cursor: pointer; }
.daypick input { position: absolute; opacity: 0; pointer-events: none; }
.daypick span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 13px; font-weight: 600;
  color: var(--ink-2); transition: all .12s; user-select: none;
}
.daypick label:hover span { border-color: var(--line-2); background: var(--surface-2); }
.daypick input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }

/* Switch toggle */
.switch-label {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.switch-label input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track {
  width: 36px; height: 20px; border-radius: 11px;
  background: var(--surface-3); border: 1px solid var(--line);
  position: relative; transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.switch-track::after {
  content: ''; position: absolute; top: 1px; left: 1px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: transform .15s;
}
.switch-label input:checked ~ .switch-track { background: var(--accent); border-color: var(--accent); }
.switch-label input:checked ~ .switch-track::after { transform: translateX(16px); }
.switch-text { font-size: 13px; color: var(--ink); }
.switch-text small { display: block; color: var(--ink-3); font-size: 11.5px; margin-top: 1px; }

/* Settings checkboxes (legacy) */
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--ink); }
.workdays-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.workday-label { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.workday-label input[type="checkbox"] { accent-color: var(--accent); }

/* Slot rows (Zeitblöcke) */
.slot-rows { display: flex; flex-direction: column; gap: 6px; }
.slot-row-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.slot-row-item input[type="text"] { flex: 1; font-weight: 600; }
.slot-row-item input[type="time"] {
  font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 4px 8px; background: var(--surface); height: 32px;
}
.slot-row-item input[type="time"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.slot-row-item .slot-del {
  width: 28px; height: 28px; border-radius: 6px;
  display: grid; place-items: center; color: var(--ink-3);
  transition: background .12s, color .12s;
}
.slot-row-item .slot-del:hover { background: var(--danger-soft); color: var(--danger-ink); }

/* Multi-tag fields */
.multi-tag-field { display: flex; flex-direction: column; gap: 8px; }
.multi-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.multi-tag-item {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 4px 0 10px; border-radius: 13px;
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: 12px; font-weight: 600;
}
.multi-tag-item .tag-x {
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; opacity: .7;
}
.multi-tag-item .tag-x:hover { opacity: 1; background: rgba(255,255,255,.5); }
.multi-tag-add-row { position: relative; }

/* ── Settings inline checklists (Gebiete / Niederlassungen) ── */
.settings-checklist {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.settings-checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  user-select: none;
  transition: background 0.1s;
}
.settings-checklist-item:hover { background: var(--surface-2); }
.settings-checklist-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}
.settings-checklist-loading,
.settings-checklist-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}

/* NL picker (legacy panels – bleiben versteckt, nur Modal-Overlay wird genutzt) */
.nl-picker-panel { display: none !important; }
.nl-tags-bar { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 26px; }
.nl-multi-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nl-option { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; }
.nl-option:hover { background: var(--surface-2); }
.nl-option input[type="checkbox"] { accent-color: var(--accent); }

/* Niederlassung Tags (Pill-Style) */
.nl-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 6px 3px 10px;
  background: var(--accent-soft); color: var(--accent-ink);
  border-radius: 999px; font-size: 12px; font-weight: 500;
  border: 1px solid oklch(0.55 0.18 265 / 0.2);
  white-space: nowrap; line-height: 1.4;
}
.nl-tag--all {
  background: var(--surface-2); color: var(--ink-3);
  border-color: var(--line); font-style: italic;
  padding: 3px 10px;
}
.nl-tag-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  font-size: 10px; line-height: 1;
  color: var(--accent-ink); opacity: 0.5;
  background: none; border: none; cursor: pointer;
  border-radius: 50%; padding: 0;
  transition: opacity .12s, background .12s;
}
.nl-tag-remove:hover { opacity: 1; background: oklch(0.55 0.18 265 / 0.15); }

/* ── NL / Gebiet Picker Modal ─────────────────────────── */
.nl-picker-modal-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  width: min(520px, 92vw);
  max-height: min(85vh, 820px);
  overflow: hidden;
}
.nl-picker-modal-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
  flex-shrink: 0;
}
.nl-picker-modal-header h3 {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.nl-picker-modal-search-wrap {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.nl-picker-modal-search-wrap .input {
  width: 100%;
}
.nl-picker-modal-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
  min-height: 100px;
}
.nl-picker-modal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  user-select: none;
  transition: background 0.1s;
}
.nl-picker-modal-item:hover { background: var(--surface-2); }
.nl-picker-modal-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}
.nl-picker-modal-name { flex: 1; min-width: 0; }
.nl-picker-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  flex-shrink: 0;
}
.nl-picker-modal-footer .nl-picker-selection-hint {
  flex: 1;
  font-size: 12px;
  color: var(--ink-3);
}
.nl-picker-modal-loading,
.nl-picker-modal-empty {
  padding: 36px 16px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
  font-style: italic;
}

/* Lookup */
.lookup-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.lookup-selected { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--accent-soft); border-radius: var(--radius-sm); }
.lookup-selected-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.lookup-clear { color: var(--accent-ink); opacity: .7; font-size: 14px; }
.lookup-clear:hover { opacity: 1; }
.lookup-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  max-height: 240px; overflow-y: auto; z-index: 200;
}
.lookup-item { padding: 9px 12px; font-size: 13px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; border-bottom: 1px solid var(--line); }
.lookup-item:last-child { border-bottom: none; }
.lookup-item:hover { background: var(--accent-soft); }
.lookup-item:hover .lookup-item-main { color: var(--accent-ink); }
.lookup-item:hover .lookup-item-sub { color: var(--accent-ink); opacity: 0.75; }
.lookup-item--disabled { opacity: .5; cursor: default; }
.lookup-item--disabled:hover { background: none; }
.lookup-item-main { font-weight: 600; color: var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lookup-item-sub { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lookup-status { padding: 10px 12px; font-size: 13px; color: var(--ink-3); font-style: italic; }
.search-row-with-btn { display: flex; gap: 8px; align-items: center; }
.btn-expand-lookup {
  height: 36px; width: 36px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink-2); font-size: 14px;
}
.btn-expand-lookup:hover { background: var(--surface-2); }

/* Credentials */
.cred-list { display: flex; flex-direction: column; gap: 6px; }
.cred-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
}
.cred-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex-shrink: 0; }
.cred-text { flex: 1; min-width: 0; }
.cred-mail { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cred-meta { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; margin-top: 1px; }
.cred-actions { display: flex; gap: 4px; }
.cred-empty { padding: 18px; border: 1px dashed var(--line); border-radius: var(--radius); font-size: 13px; color: var(--ink-3); text-align: center; }

/* Signature */
.sig-preview {
  height: 130px; background: var(--surface-2);
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 12.5px; position: relative;
}
.sig-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface-2); font-size: 12px; color: var(--ink-3);
}
.sig-foot .spacer { flex: 1; }

/* Settings footer */
.settings-foot {
  grid-area: foot;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  display: flex; align-items: center; gap: 10px;
}
.settings-foot .save-state { font-size: 12px; color: var(--ink-3); }
.settings-foot .save-state.saved { color: var(--ok-ink); font-weight: 600; }
.settings-foot .spacer { flex: 1; }

/* ── 17. Day View Modal (dv-*) ───────────────────────── */
.dv-overlay {
  position: fixed; inset: 0;
  background: oklch(0.2 0.01 270 / 0.5);
  backdrop-filter: blur(4px);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.dv-card {
  background: var(--surface); border-radius: var(--radius-lg);
  width: min(1100px, 96vw); max-height: 92vh; height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  overflow: hidden; position: relative;
  animation: slideUp .18s ease;
}
.dv-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
  font-size: 15px; flex-shrink: 0; gap: 8px;
  background: var(--surface);
}
.dv-header strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }
.dv-time-filter-btn {
  font-size: 12px; padding: 4px 12px; border-radius: 999px;
  border: 1.5px solid var(--line-2); background: var(--surface-2);
  color: var(--ink-3); cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.dv-time-filter-btn:hover { background: var(--surface-3); border-color: var(--line-2); color: var(--ink); }
.dv-time-filter-btn--active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.dv-time-filter-btn--active:hover { background: var(--accent-soft); }
.dv-timeline-wrap { padding: 10px 20px 6px; flex-shrink: 0; }
.dv-ruler { position: relative; height: 26px; margin-bottom: 3px; user-select: none; }
.dv-ruler-tick { position: absolute; top: 2px; font-size: 11px; font-family: var(--mono); color: var(--ink-3); transform: translateX(-50%); white-space: nowrap; pointer-events: none; line-height: 1; }
.dv-ruler-tick--odd { top: auto; bottom: 2px; }
.dv-track {
  position: relative; height: 76px;
  background: var(--surface-3);
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  cursor: crosshair; user-select: none; overflow: hidden;
  touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.dv-track.dv-dragging { overflow: visible; }
.dv-track.dv-dragging .dv-sel-tooltip { display: none; }
.dv-hour-line { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,.07); pointer-events: none; }
.dv-slot-zone { position: absolute; top: 0; bottom: 0; background: oklch(0.55 0.18 265 / 0.08); border-left: 2px solid oklch(0.55 0.18 265 / 0.3); border-right: 2px solid oklch(0.55 0.18 265 / 0.3); pointer-events: none; }
.dv-slot-label { position: absolute; top: 4px; left: 6px; font-size: 10px; color: oklch(0.55 0.18 265 / 0.7); white-space: nowrap; pointer-events: none; }
.dv-entry-block {
  position: absolute; top: 20px; height: 56px;
  background: var(--accent); border-radius: 4px;
  display: flex; align-items: center; padding: 0 6px;
  overflow: hidden; cursor: default; min-width: 3px;
  box-sizing: border-box; z-index: 1;
}
.dv-entry-block span { font-size: 11px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.dv-entry-block--locked { top: 0; bottom: 0; height: auto; background: var(--dv-locked-color, var(--accent)); opacity: .9; cursor: not-allowed; border: none; border-radius: 3px; padding: 0; overflow: hidden; z-index: 2; }
.dv-entry-block--locked::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(0,0,0,.07) 6px, rgba(0,0,0,.07) 8px); pointer-events: none; }
.dv-entry-block--loading { top: 0; bottom: 0; height: auto; background: rgba(148,163,184,.22); border: 1px solid rgba(148,163,184,.4); border-radius: 3px; padding: 0; overflow: hidden; animation: dv-loading-pulse 1.6s ease-in-out infinite; cursor: default; z-index: 1; }
.dv-entry-block--loading span { display: none; }
.dv-entry-block--loading::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%); background-size: 200% 100%; animation: dv-loading-shimmer 1.6s ease-in-out infinite; }
.dv-entry-block--loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid rgba(100,116,139,.2); border-top-color: rgba(100,116,139,.7); border-radius: 50%; animation: dv-spin .75s linear infinite; }
@keyframes dv-loading-pulse { 0%,100%{opacity:.6} 50%{opacity:1} }
@keyframes dv-loading-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes dv-spin { to{transform:rotate(360deg)} }
.dv-entry-lbl-start,.dv-entry-lbl-end { position: absolute; font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; pointer-events: none; writing-mode: vertical-rl; line-height: 1; z-index: 4; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.dv-entry-lbl-start { left: 2px; bottom: 2px; transform: rotate(180deg); }
.dv-entry-lbl-end   { right: 2px; top: 2px;    transform: rotate(180deg); }
.dv-entry-lbl-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 10px; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 28px); pointer-events: none; z-index: 4; text-align: center; }
.dv-selection { position: absolute; top: 0; bottom: 0; background: var(--dv-sel-bg, oklch(0.72 0.14 75 / 0.25)); border: 2px solid var(--dv-sel-color, var(--warn)); border-radius: 3px; pointer-events: auto; z-index: 2; cursor: move; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; touch-action: none; -webkit-touch-callout: none; }
.dv-sel-floating { z-index: 20; box-shadow: 0 10px 24px rgba(0,0,0,.4); opacity: .86; cursor: grabbing; border-width: 2.5px; transition: none; animation: dv-float-wobble 1.6s ease-in-out infinite; }
@keyframes dv-float-wobble { 0%{transform:translateY(-8px) rotate(-1.2deg)} 20%{transform:translateY(-11px) rotate(0.8deg)} 45%{transform:translateY(-7px) rotate(1.4deg)} 65%{transform:translateY(-12px) rotate(-0.6deg)} 85%{transform:translateY(-7px) rotate(1.0deg)} 100%{transform:translateY(-8px) rotate(-1.2deg)} }
.dv-ctrl-hint { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: var(--warn); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 30; box-shadow: var(--shadow); animation: dv-hint-pop .15s ease-out; }
.dv-ctrl-hint::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--warn); }
.dv-edge-hint { position: absolute; bottom: calc(100% + 10px); background: var(--warn); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 30; box-shadow: var(--shadow); animation: dv-hint-pop-edge .15s ease-out; }
.dv-edge-hint--right { right: 0; }
.dv-edge-hint--right::after { content: ''; position: absolute; top: 100%; right: 8px; border: 5px solid transparent; border-top-color: var(--warn); }
.dv-edge-hint--left { left: 0; }
.dv-edge-hint--left::after { content: ''; position: absolute; top: 100%; left: 8px; border: 5px solid transparent; border-top-color: var(--warn); }
@keyframes dv-hint-pop { from{opacity:0;transform:translateX(-50%) scale(.85)} to{opacity:1;transform:translateX(-50%) scale(1)} }
@keyframes dv-hint-pop-edge { from{opacity:0;scale:.85} to{opacity:1;scale:1} }
.dv-sel-handle { position: absolute; top: -2px; bottom: -2px; width: 14px; background: transparent; cursor: ew-resize; z-index: 5; }
.dv-sel-handle-start { left: -2px; }
.dv-sel-handle-end   { right: -2px; }
.dv-sel-move-center  { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; background: transparent; cursor: move; z-index: 7; pointer-events: all; }
.dv-sel-tooltip { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 6; }
.dv-sel-lbl { position: absolute; top: 50%; font-size: 14px; font-weight: 700; color: var(--dv-sel-color, var(--warn)); white-space: nowrap; pointer-events: none; writing-mode: vertical-rl; line-height: 1; z-index: 4; }
.dv-sel-lbl-start { left: 2px; top: auto; bottom: 2px; transform: rotate(180deg); }
.dv-sel-lbl-end   { right: 2px; top: 2px; transform: rotate(180deg); }
.dv-time-popup-end   { position: absolute; bottom: calc(100% + 10px); right: 0; background: var(--dv-sel-color, var(--warn)); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 30; box-shadow: var(--shadow); animation: dv-hint-pop-edge .15s ease-out; }
.dv-time-popup-end::after { content: ''; position: absolute; top: 100%; right: -5px; border: 5px solid transparent; border-top-color: var(--dv-sel-color, var(--warn)); }
.dv-time-popup-start { position: absolute; top: calc(100% + 10px); left: 0; background: var(--dv-sel-color, var(--warn)); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 30; box-shadow: var(--shadow); animation: dv-hint-pop-edge .15s ease-out; }
.dv-time-popup-start::before { content: ''; position: absolute; bottom: 100%; left: -5px; border: 5px solid transparent; border-bottom-color: var(--dv-sel-color, var(--warn)); }
.dv-tooltip { position: absolute; top: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 5; }
.dv-ctx-menu { position: fixed; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 10000; min-width: 160px; padding: 4px 0; }
.dv-ctx-item { padding: 8px 14px; font-size: 13px; cursor: pointer; color: var(--ink); }
.dv-ctx-item:hover { background: var(--surface-2); }
.dv-hint { font-size: 11px; color: var(--ink-4); margin-top: 4px; text-align: center; }

/* ───────────────────────────────────────────────────────────
   Touch-Steuerleiste — virtuelle STRG-Taste für iPhone/iPad/Android
   Standard: ausgeblendet. Wird nur auf Touch-Geräten sichtbar.
   ─────────────────────────────────────────────────────────── */
.dv-touchbar { display: none; }
.dv-touchbar.dv-touchbar--force { display: flex; }
.dv-touch-ctrl-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 12px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer; user-select: none;
  font-family: inherit; font-size: 13px; color: var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 6px -2px rgba(20,22,40,.08);
  transition: background .18s, border-color .18s, box-shadow .18s, transform .12s;
  min-height: 56px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.dv-touch-ctrl-btn:active { transform: scale(.985); }
.dv-touch-ctrl-btn:hover { border-color: var(--line-2); }
.dv-touch-keycap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 36px; padding: 0 8px;
  font-family: var(--mono, ui-monospace, "SF Mono", "Roboto Mono", monospace);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--ink-2);
  background: linear-gradient(180deg, #fafbfd 0%, #e6e9f0 100%);
  border: 1px solid #c7ccd6;
  border-radius: 7px;
  box-shadow:
    0 1px 0 #fff inset,
    0 -1px 0 #b9bfca inset,
    0 2px 0 #b9bfca,
    0 3px 4px -1px rgba(20,22,40,.12);
  transition: transform .08s ease, box-shadow .08s ease, color .18s, background .18s, border-color .18s;
}
.dv-touch-ctrl-label {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  line-height: 1.15;
}
.dv-touch-ctrl-label-main { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.dv-touch-ctrl-label-sub  { font-size: 11px; color: var(--ink-3); }
.dv-touch-ctrl-led {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-2);
  box-shadow: 0 0 0 2px var(--surface-2);
  margin-left: auto;
  transition: background .25s, box-shadow .25s;
}
.dv-touch-ctrl-btn--active {
  background: linear-gradient(180deg, var(--warn-soft) 0%, color-mix(in oklch, var(--warn-soft) 60%, var(--warn) 8%) 100%);
  border-color: var(--warn);
  box-shadow:
    0 0 0 1px var(--warn) inset,
    0 0 0 4px color-mix(in oklch, var(--warn) 18%, transparent),
    0 2px 6px -2px color-mix(in oklch, var(--warn) 40%, transparent);
}
.dv-touch-ctrl-btn--active .dv-touch-keycap {
  transform: translateY(2px);
  color: var(--warn-ink);
  background: linear-gradient(180deg, color-mix(in oklch, var(--warn) 18%, #fff) 0%, color-mix(in oklch, var(--warn) 30%, #fff) 100%);
  border-color: var(--warn);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 color-mix(in oklch, var(--warn) 40%, transparent) inset,
    0 0 0 1px color-mix(in oklch, var(--warn) 25%, transparent),
    0 1px 2px rgba(20,22,40,.08);
}
.dv-touch-ctrl-btn--active .dv-touch-ctrl-label-main { color: var(--warn-ink); }
.dv-touch-ctrl-btn--active .dv-touch-ctrl-label-sub  { color: var(--warn-ink); opacity: .8; }
.dv-touch-ctrl-btn--active .dv-touch-ctrl-led {
  background: var(--warn);
  box-shadow: 0 0 0 2px var(--surface), 0 0 10px 2px color-mix(in oklch, var(--warn) 60%, transparent);
  animation: dv-touch-led-pulse 1.4s ease-in-out infinite;
}
@keyframes dv-touch-led-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 10px 2px color-mix(in oklch, var(--warn) 60%, transparent); }
  50%      { box-shadow: 0 0 0 2px var(--surface), 0 0 14px 4px color-mix(in oklch, var(--warn) 80%, transparent); }
}
.dv-touch-help {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin: 8px 0 0; padding: 0;
  font-size: 11.5px; color: var(--ink-3); line-height: 1.45;
}
.dv-touch-help-step b { color: var(--ink-2); font-weight: 700; margin-right: 4px; }

/* Aktivierung der Touch-Steuerleiste auf wirklich touch-fähigen Geräten */
@media (hover: none) and (pointer: coarse) {
  .dv-touchbar {
    display: flex; flex-direction: column;
    margin-top: 10px;
    padding: 10px 12px 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  /* Tastatur-Hinweis weg – die Schritte aus .dv-touch-help ersetzen ihn */
  .dv-hint { display: none; }
  /* Track höher für leichtes Treffen mit dem Finger */
  .dv-track { height: 92px; }
  /* Griffe deutlich breiter, damit sie unter dem Finger nicht weglaufen */
  .dv-sel-handle { width: 26px; }
  .dv-sel-handle-start { left: -6px; }
  .dv-sel-handle-end   { right: -6px; }
  /* Visuelle Spur des Griffs – damit der User weiß, wo er greifen muss */
  .dv-sel-handle::before {
    content: ''; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 3px; height: 28px; border-radius: 2px;
    background: var(--dv-sel-color, var(--warn));
    opacity: .55;
    pointer-events: none;
  }
  .dv-sel-move-center { width: 16px; height: 16px; }
  /* Zeit-Label in Mitte des Tooltips über/unter Block etwas größer */
  .dv-sel-tooltip { font-size: 11.5px; padding: 3px 8px; }
}

/* Auf schmalen Phone-Bildschirmen die Schritte untereinander */
@media (max-width: 540px) {
  .dv-touch-help { flex-direction: column; gap: 2px; }
  .dv-touch-ctrl-btn { padding: 10px 14px 10px 10px; }
  .dv-touch-ctrl-label-main { font-size: 13px; }
  .dv-touch-ctrl-label-sub  { font-size: 10.5px; }
}
.dv-panel-actions { display: flex; gap: 8px; margin-top: 4px; padding: 4px 0; justify-content: flex-end; }
.dv-bkl-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dv-bkl-header > span { font-size: 13px; font-weight: 700; color: var(--ink); }
.dv-bkl-search-btn, .dv-bkl-refresh-btn { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--ink-3); padding: 2px 4px; line-height: 1; border-radius: 4px; }
.dv-bkl-search-btn:hover, .dv-bkl-refresh-btn:hover { color: var(--ink); background: var(--surface-2); }
.dv-bkl-empty { font-size: 13px; color: var(--ink-3); text-align: center; padding: 12px 0; }
.dv-submit-progress { display: flex; flex-direction: column; gap: 10px; }
.dv-sp-title { font-size: 13px; font-weight: 700; color: var(--ink); padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.dv-submit-progress .progress-steps { gap: 0; max-height: none; overflow: visible; }
.dv-submit-progress .progress-step { padding: 8px 2px; font-size: 12px; }
.dv-submit-progress .step-icon { width: 22px; height: 22px; font-size: 11px; }
.dv-submit-progress .step-label { font-size: 12px; }
.dv-submit-progress .step-detail { font-size: 11px; min-height: 0; }
.dv-submit-progress .progress-success-banner { font-size: 13px; padding: 8px 12px; }
.dv-submit-progress .progress-error-banner { font-size: 12px; padding: 7px 12px; }
@keyframes dv-flash { 0%,100%{box-shadow:none} 40%{box-shadow:0 0 0 3px oklch(0.62 0.14 155 / 0.45)} }
.dv-flash-btn { animation: dv-flash .7s ease; }
.dv-btn-submit { transition: background .18s, color .18s, border-color .18s, opacity .18s; }
.dv-btn--saved     { background: var(--surface-3) !important; color: var(--ink-4) !important; border-color: var(--line) !important; cursor: default !important; }
.dv-btn--incomplete{ background: var(--warn-soft) !important; color: var(--warn-ink) !important; border-color: var(--warn) !important; cursor: pointer !important; }
.dv-btn--ready     { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; cursor: pointer !important; }
.dv-btn--ready:hover { background: var(--accent-2) !important; border-color: var(--accent-2) !important; }
.dv-btn-eintragen { transition: background .18s, color .18s, border-color .18s, opacity .18s; }
.dv-eintragen--idle    { background: var(--surface-3) !important; color: var(--ink-4) !important; border-color: var(--line) !important; cursor: default !important; }
.dv-eintragen--loading { background: var(--surface-3) !important; color: var(--ink-4) !important; border-color: var(--line) !important; cursor: default !important; }
.dv-eintragen--warning { background: var(--warn-soft) !important; color: var(--warn-ink) !important; border-color: var(--warn) !important; cursor: pointer !important; }
.dv-eintragen--ready   { background: var(--ok) !important; color: #fff !important; border-color: var(--ok) !important; cursor: pointer !important; }
.dv-eintragen--ready:hover { background: var(--ok-ink) !important; border-color: var(--ok-ink) !important; }
.dv-wartung-status { font-size: 10px; margin-top: 2px; display: block; white-space: nowrap; }
.dv-wartung-ok      { color: var(--ok-ink); }
.dv-wartung-warn    { color: var(--warn-ink); }
.dv-wartung-loading { color: var(--ink-4); }
@keyframes dv-row-flash { 0%,100%{background:transparent} 30%,70%{background:var(--warn-soft)} }
.dv-row-flash { animation: dv-row-flash .9s ease-in-out; }
.dv-eintragen-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.22); z-index: 200; border-radius: var(--radius-lg); }
.dv-eintragen-modal { background: var(--surface); border-radius: var(--radius-lg); padding: 20px 24px; min-width: 340px; max-width: 460px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.dv-eintragen-modal h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.dv-eintragen-modal .dv-em-bookings { font-size: 12px; color: var(--ink-2); padding: 4px 0; }
.dv-eintragen-modal label { font-size: 12px; color: var(--ink-2); display: block; margin-bottom: 3px; font-weight: 600; }
.dv-eintragen-modal textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; resize: vertical; min-height: 80px; font-family: inherit; color: var(--ink); }
.dv-eintragen-modal .dv-em-sig { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.dv-em-sig-ok      { color: var(--ok-ink); font-weight: 600; }
.dv-em-sig-missing { color: var(--danger-ink); font-weight: 600; }
.dv-eintragen-modal .dv-em-footer { display: flex; gap: 8px; justify-content: flex-end; }
.dv-em-warning { background: var(--warn-soft); border: 1px solid var(--warn); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12px; color: var(--warn-ink); line-height: 1.5; }
.dv-em-warning strong { color: var(--warn-ink); display: block; margin-bottom: 2px; font-weight: 700; }
@keyframes dv-field-flash { 0%,100%{border-color:var(--line);box-shadow:none} 30%{border-color:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)} 70%{border-color:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)} }
.dv-field-flash { animation: dv-field-flash .9s ease-in-out; }
.dv-progress-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.22); z-index: 200; border-radius: var(--radius-lg); }
.dv-progress-modal { background: var(--surface); border-radius: var(--radius-lg); padding: 20px 24px; min-width: 290px; max-width: 420px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.dv-progress-modal .dv-sp-title { font-size: 14px; font-weight: 700; color: var(--ink); padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.dv-unsaved-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); z-index: 20000; }
.dv-unsaved-modal { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line); padding: 24px 28px; min-width: 310px; max-width: 420px; box-shadow: var(--shadow-lg); }
.dv-unsaved-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.dv-unsaved-body  { font-size: 13px; color: var(--ink-3); margin-bottom: 20px; line-height: 1.55; }
.dv-unsaved-actions { display: flex; gap: 10px; justify-content: flex-end; }
.dv-slots-section { border-top: 1px solid var(--line); background: var(--ok-soft); padding: 6px 20px 2px; }
.dv-slots-header  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.dv-slots-header > span { font-size: 13px; font-weight: 700; color: var(--ok-ink); }
.dv-slots-wrap  { overflow-x: auto; margin-bottom: 6px; }
.dv-slots-empty { font-size: 12px; color: var(--ink-3); padding: 8px 0; text-align: center; font-style: italic; }
.dv-slots-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dv-slots-table thead th { padding: 4px 6px; text-align: left; font-size: 11px; font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.dv-slot-row { border-bottom: 1px solid oklch(0.62 0.14 155 / 0.2); }
.dv-slot-row td { padding: 4px 6px; vertical-align: middle; }
.dv-slot-color-bar { display: inline-block; width: 4px; height: 28px; border-radius: 3px; vertical-align: middle; }
.dv-slot-time { white-space: nowrap; }
.dv-slot-time strong { font-size: 12px; color: var(--ink); }
.dv-slot-dur { font-size: 10px; color: var(--ink-3); }
.dv-slot-name { font-size: 12px; color: var(--ink-2); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-slot-dropdown { padding: 3px 5px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 11px; font-family: inherit; max-width: 140px; background: var(--surface); color: var(--ink); }
.dv-slot-dropdown:focus { outline: none; border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft); }
/* Durchsuchbares Fehlercode-Dropdown (Combobox) */
.dv-ec-combo { display: inline-block; max-width: 140px; }
.dv-ec-trigger { width: 140px; max-width: 140px; box-sizing: border-box; text-align: left; padding: 3px 5px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 11px; font-family: inherit; background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-ec-trigger:hover { border-color: var(--ok); }
.dv-ec-trigger--open, .dv-ec-trigger:focus { outline: none; border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft); }
.dv-ec-trigger--empty { color: var(--ink-4); }
.dv-ec-pop { position: fixed; z-index: 10001; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; padding: 6px; box-sizing: border-box; min-width: 240px; }
.dv-ec-search { width: 100%; box-sizing: border-box; padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 12px; font-family: inherit; margin: 0 0 6px 0; background: var(--surface); color: var(--ink); }
.dv-ec-search:focus { outline: none; border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft); }
.dv-ec-list { max-height: 260px; overflow-y: auto; }
.dv-ec-item { padding: 5px 7px; font-size: 12px; color: var(--ink); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-ec-item:hover { background: var(--ok-soft); }
.dv-ec-item--active { background: oklch(0.62 0.14 155 / 0.15); font-weight: 600; }
.dv-ec-item--clear { color: var(--ink-4); font-style: italic; border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 2px; }
.dv-ec-empty { padding: 8px 7px; font-size: 12px; color: var(--ink-3); text-align: center; }
.dv-dropdown-loading { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--line-2); border-top-color: var(--ok); border-radius: 50%; animation: dv-spin .75s linear infinite; vertical-align: middle; margin: 2px 6px; }
.dv-slot-del { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--ink-4); padding: 0 3px; }
.dv-slot-del:hover { color: var(--danger-ink); }
.dv-nnb-header { font-size: 11px; white-space: nowrap; text-align: center; color: var(--ink-3); }
.dv-nnb-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--danger); }
.dv-slot-row--locked { background: var(--surface-2); }
.dv-slot-row--locked td { color: var(--ink-4); }
.dv-slot-row--locked .dv-slot-time strong,
.dv-slot-row--locked .dv-slot-name { color: var(--ink-4); }
.dv-slot-locked-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--ok-ink); font-weight: 600; white-space: nowrap; }
.dv-slot-time-edit-btn { background: none; border: none; cursor: pointer; color: var(--ink-4); font-size: 11px; padding: 0 2px; margin-left: 2px; line-height: 1; opacity: .7; vertical-align: middle; }
.dv-slot-time-edit-btn:hover { color: var(--accent); opacity: 1; }
.dv-time-editor { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.dv-time-input { width: 74px; font-size: 11px; padding: 2px 3px; border: 1px solid var(--ok); border-radius: 4px; font-family: inherit; }
.dv-time-confirm-btn, .dv-time-cancel-btn { background: none; border: 1px solid; border-radius: 4px; cursor: pointer; font-size: 11px; padding: 1px 5px; line-height: 1; }
.dv-time-confirm-btn { border-color: var(--ok); color: var(--ok-ink); }
.dv-time-confirm-btn:hover { background: var(--ok-soft); }
.dv-time-cancel-btn { border-color: var(--line); color: var(--ink-3); }
.dv-time-cancel-btn:hover { background: var(--surface-2); }
.dv-panel { padding: 6px 20px 8px; border-top: 1px solid var(--line); background: var(--surface-2); flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dv-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--line); margin-bottom: 6px; flex-shrink: 0; }
.dv-tab-btn { flex: 1; padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--ink-3); background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; text-align: center; margin-bottom: -2px; border-radius: 4px 4px 0 0; }
.dv-tab-btn:hover { color: var(--ink); background: var(--surface-3); }
.dv-tab-btn--active { color: var(--accent-ink); border-bottom-color: var(--accent); background: var(--accent-soft); }
.dv-tab-badge { display: inline-block; background: var(--surface-3); color: var(--ink-3); border-radius: 9px; font-size: 11px; padding: 1px 6px; margin-left: 4px; font-weight: 600; transition: background .15s, color .15s; }
.dv-tab-btn--active .dv-tab-badge { background: var(--accent-soft); color: var(--accent-ink); }
.dv-slot-art { font-size: 11px; font-weight: 600; white-space: nowrap; padding: 2px 5px; border-radius: 3px; display: inline-block; }
.dv-slot-art--stoerung { background: var(--danger-soft); color: var(--danger-ink); }
.dv-slot-art--auftrag  { background: var(--accent-soft); color: var(--accent-ink); }
.dv-slot-art--wartung  { background: var(--ok-soft); color: var(--ok-ink); }
.dv-slot-art--sonstiges{ background: var(--surface-3); color: var(--ink-3); }
.dv-bericht-btn { font-size: 10px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink-2); cursor: pointer; white-space: nowrap; line-height: 1.4; }
.dv-bericht-btn:hover { background: var(--surface-2); border-color: var(--line-2); }
.dv-bericht-btn--done { border-color: var(--ok) !important; background: var(--ok-soft) !important; color: var(--ok-ink) !important; }
.dv-bericht-btn--done:hover { background: var(--ok-soft) !important; }
.dv-rueckmeldung-btn { font-size: 10px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink-2); cursor: pointer; white-space: nowrap; line-height: 1.4; }
.dv-rueckmeldung-btn:hover { background: var(--surface-2); }
.dv-rueckmeldung-btn--done { border-color: var(--ok) !important; background: var(--ok-soft) !important; color: var(--ok-ink) !important; }
.dv-rueck-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.22); z-index: 200; border-radius: var(--radius-lg); }
.dv-rueck-modal { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line); padding: 20px 24px; min-width: 360px; max-width: 500px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 10px; max-height: 80vh; overflow-y: auto; }
.dv-rueck-modal h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.dv-rueck-info { font-size: 12px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.dv-rueck-info-row { display: flex; gap: 6px; align-items: baseline; }
.dv-rueck-info-label { font-weight: 600; min-width: 90px; color: var(--ink-3); flex-shrink: 0; font-size: 11px; }
.dv-rueck-info-val { color: var(--ink); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.dv-rueck-modal label { font-size: 12px; color: var(--ink-2); display: block; margin-bottom: 3px; font-weight: 600; }
.dv-rueck-modal textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; resize: vertical; min-height: 80px; font-family: inherit; }
.dv-rueck-footer { display: flex; gap: 8px; justify-content: flex-end; }
.dv-bkl-list { flex: 1; overflow-y: auto; }
.dv-avail-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dv-avail-table thead th { padding: 3px 6px; text-align: left; font-size: 11px; font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface-2); }
.dv-avail-cat-header td { padding: 4px 6px; font-size: 11px; font-weight: 700; color: var(--ink-2); background: var(--surface-3); letter-spacing: .04em; text-transform: uppercase; }
.dv-avail-row { cursor: pointer; }
.dv-avail-row:hover { background: var(--ok-soft); }
.dv-avail-row.dv-avail-selected { background: oklch(0.62 0.14 155 / 0.15); }
.dv-avail-row td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dv-avail-name { font-weight: 500; color: var(--ink); max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-avail-loc  { color: var(--ink-3); max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-avail-hours{ text-align: right; color: var(--ink-2); white-space: nowrap; padding-right: 10px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dv-bkl-search-input { display: none; width: 100%; box-sizing: border-box; margin: 0 0 6px 0; }
.progress-steps {
  display: flex; flex-direction: column;
  overflow-y: auto;
  max-height: min(380px, 55vh);
  scroll-behavior: smooth;
}
.progress-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid var(--line);
  font-size: 12px; transition: background .15s;
  border-radius: var(--radius-sm); flex-shrink: 0;
}
.progress-step:last-child { border-bottom: none; }

/* Aktiver Schritt hervorheben */
.step-working { background: var(--accent-soft); }
.step-working .step-label { color: var(--accent-ink); }

.step-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 11px; font-weight: 700; }

/* State via Parent-Klasse (korrekte Selektoren) */
.step-pending .step-icon { background: var(--surface-3); color: var(--ink-4); }
.step-working .step-icon {
  background: transparent;
  border: 2.5px solid oklch(0.55 0.18 265 / 0.25);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
.step-done  .step-icon { background: var(--ok-soft); color: var(--ok-ink); }
.step-error .step-icon { background: var(--danger-soft); color: var(--danger-ink); }

.step-label  { font-weight: 600; color: var(--ink); line-height: 1.3; }
.step-detail { font-size: 11px; color: var(--ink-3); margin-top: 3px; min-height: 15px; line-height: 1.4; }
.progress-success-banner { padding: 10px 14px; background: var(--ok-soft); color: var(--ok-ink); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; }
.progress-error-banner { padding: 10px 14px; background: var(--danger-soft); color: var(--danger-ink); border-radius: var(--radius-sm); font-size: 12px; border: 1px solid var(--danger); }

/* ── 18. Mini Calendar Overlay (Buchungskalender) ────── */
.booking-cal-overlay {
  position: fixed; inset: 0;
  background: oklch(0.2 0.01 270 / 0.45);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 5000;
}
.booking-cal-overlay.hidden { display: none !important; }
.booking-cal-modal {
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  min-width: 320px; max-width: 420px; width: 90vw;
  overflow: hidden;
}
.booking-cal-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.bco-month-label { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.bco-title { flex: 1; font-size: 12px; color: var(--ink-3); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bco-calendar { padding: 12px; }

/* ── 19. Picker Overlays ─────────────────────────────── */
.picker-overlay {
  position: fixed; inset: 0;
  background: oklch(0.2 0.01 270 / 0.45);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 5000; padding: 24px 16px;
}
.picker-overlay.hidden { display: none !important; }
.picker-modal {
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  width: min(760px, 96vw); max-height: 80vh;
  display: flex; flex-direction: column; overflow: hidden;
  animation: slideUp .18s ease;
}
.picker-header { padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
.picker-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.picker-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.picker-search-bar { display: flex; align-items: center; gap: 8px; }
.picker-search-status { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.picker-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.picker-hint { padding: 24px; text-align: center; color: var(--ink-3); font-size: 13px; font-style: italic; }
.picker-result-item { padding: 10px 18px; font-size: 13px; cursor: pointer; color: var(--ink); display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.picker-result-item:hover { background: var(--surface-2); }
.picker-result-item:last-child { border-bottom: none; }

/* Picker-Tabelle (Kontakt / Kundenanlage Suche) */
.picker-table { width: 100%; border-collapse: collapse; }
.picker-table thead { position: sticky; top: 0; background: var(--surface-2); z-index: 1; }
.picker-table th {
  padding: 9px 14px; text-align: left;
  font-size: 11px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.picker-table tbody tr { cursor: pointer; border-bottom: 1px solid var(--line); transition: background .1s; }
.picker-table tbody tr:last-child { border-bottom: none; }
.picker-table tbody tr:hover { background: var(--accent-soft); }
.picker-table td { padding: 10px 14px; font-size: 13px; vertical-align: middle; color: var(--ink); }
.picker-table td.col-main { font-weight: 600; }
.picker-table td.col-sub { color: var(--ink-3); font-size: 12px; }
.picker-table tbody tr:hover td { color: var(--accent-ink); }
.picker-table tbody tr:hover td.col-sub { opacity: 0.8; }
.picker-no-results { padding: 36px 24px; text-align: center; color: var(--ink-3); font-size: 13px; font-style: italic; }
.picker-row-selected { background: var(--ok-soft) !important; cursor: default !important; }
.picker-row-selected td { color: var(--ok-ink) !important; }

/* ── 20. Störung / Anfrage Modals ────────────────────── */
/* Lookup-Dropdowns müssen über nachfolgende Felder legen → overflow: visible */
.stoerung-card .modal-body { overflow: visible; }
#anfrage-modal .modal-body { overflow: visible; }

.stoerung-error { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger-ink); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; }
.anfrage-success { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; background: var(--ok-soft); border-radius: var(--radius-sm); font-size: 13px; color: var(--ok-ink); }

/* ── 21. Debug Overlay ───────────────────────────────── */
.debug-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.debug-card { background: var(--surface); border-radius: var(--radius-lg); max-width: 640px; width: 95%; max-height: 80vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.debug-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--ink); }
.debug-body { padding: 16px 18px; overflow-y: auto; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.debug-body code { background: var(--surface-2); padding: 1px 5px; border-radius: 3px; font-family: var(--mono); font-size: 12px; color: var(--accent-ink); }
.debug-body hr { border: none; border-top: 1px solid var(--line); margin: 12px 0; }

/* ── 22. Save Password Modal ─────────────────────────── */
#save-password-modal .modal-card { max-width: 420px; }

/* ── 23. Misc ────────────────────────────────────────── */
.error-banner { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger-ink); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; }
.success-banner { background: var(--ok-soft); color: var(--ok-ink); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; }

/* Technician modal and misc modals */
.technician-modal-card { width: min(640px, 96vw); }
.wartungen-modal-body { padding: 0 !important; }

/* ── 24. Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; border: 2px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }
::-webkit-scrollbar-track { background: transparent; }

/* ── 25. Auftragskoffer Modal ────────────────────────── */
.auftraege-modal {
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  width: min(700px, 96vw); max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden;
  animation: slideUp .18s ease;
}
.auftraege-header { padding: 20px 22px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.auftraege-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.auftraege-title-group { display: flex; align-items: center; gap: 12px; }
.auftraege-icon-wrap {
  width: 38px; height: 38px; background: var(--accent-soft); border-radius: 9px;
  display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0;
}
.auftraege-icon-wrap svg { width: 18px; height: 18px; }
.auftraege-title { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.auftraege-subtitle { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.auftraege-close {
  width: 30px; height: 30px; border: none; background: none; color: var(--ink-3);
  font-size: 16px; cursor: pointer; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
}
.auftraege-close:hover { background: var(--surface-3); color: var(--ink); }
.auftraege-search-row { display: flex; gap: 10px; align-items: center; }
.auftraege-search-wrap { flex: 1; position: relative; display: flex; align-items: center; }
.auftraege-search-icon { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--ink-4); pointer-events: none; }
.auftraege-search-input {
  width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); font-size: 13px; font-family: var(--font);
  color: var(--ink); background: var(--surface); outline: none; transition: border-color .15s;
}
.auftraege-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.55 0.18 265 / 0.12); }
.auftraege-search-input::placeholder { color: var(--ink-4); }
.auftraege-nl-filter { position: relative; flex-shrink: 0; }
.auftraege-nl-tags-hidden { display: none; }
.auftraege-nl-btn {
  display: flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-2); font-size: 13px;
  font-family: var(--font); cursor: pointer; transition: border-color .15s, background .15s; white-space: nowrap;
}
.auftraege-nl-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.auftraege-nl-btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.auftraege-nl-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 5px;
  background: var(--accent); color: #fff; border-radius: 9px;
  font-size: 11px; font-weight: 600; line-height: 1;
}
.auftraege-body { flex: 1; overflow-y: auto; min-height: 0; }
.auftraege-footer {
  padding: 12px 22px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.auftraege-count-label { font-size: 13px; color: var(--accent); font-weight: 500; }
.auftrag-item {
  display: grid; grid-template-columns: 110px 1fr auto auto;
  align-items: center; gap: 16px; padding: 14px 22px;
  border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s;
}
.auftrag-item:last-child { border-bottom: none; }
.auftrag-item:hover { background: var(--surface-2); }
.auftrag-item-left { display: flex; flex-direction: column; gap: 3px; }
.auftrag-item-wonr { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.auftrag-item-type { font-size: 11px; color: var(--ink-3); }
.auftrag-item-center { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.auftrag-item-title { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auftrag-item-meta { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auftrag-item-meta svg { flex-shrink: 0; color: var(--ink-4); }
.auftrag-item-date-col { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 64px; }
.auftrag-date { font-size: 14px; font-weight: 700; color: var(--ink-3); }
.auftrag-date--urgent { color: var(--warn-ink); }
.auftrag-date-label { font-size: 10px; font-weight: 700; color: var(--ink-4); letter-spacing: .04em; }
.auftrag-date-label--urgent { color: var(--warn-ink); }
.auftrag-add-btn {
  width: 32px; height: 32px; border: none; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff; font-size: 20px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .12s, transform .1s;
}
.auftrag-add-btn:hover { background: var(--accent-2); transform: scale(1.06); }
.auftrag-add-btn:disabled { background: var(--line-2); cursor: not-allowed; transform: none; }

/* ── 26. Wartungskoffer – Monatsgruppen & Items ──────── */
.wartung-group { margin-bottom: 2px; }
.wartung-group-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 22px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); cursor: pointer;
  user-select: none; transition: background .12s;
  position: sticky; top: 0; z-index: 1;
}
.wartung-group-header:hover { background: var(--surface-3); }
.wartung-expand-btn {
  width: 20px; height: 20px; border: none; background: none;
  color: var(--ink-4); font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0;
}
.wartung-group-month { font-size: 13px; font-weight: 700; color: var(--ink); flex: 1; }
.wartung-group-count {
  font-size: 11px; font-weight: 600; color: var(--ink-4);
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: 10px; padding: 1px 7px; min-width: 24px; text-align: center;
}
.wartung-month-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 10px;
}
.wartung-month-done { background: var(--ok-soft); color: var(--ok-ink); }
.wartung-month-todo { background: var(--warn-soft); color: var(--warn-ink); }
.wartung-items { }
.wartung-items.hidden { display: none; }
.wartung-item {
  display: grid; grid-template-columns: 110px 1fr auto auto;
  align-items: center; gap: 16px; padding: 12px 22px;
  border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s;
}
.wartung-item:last-child { border-bottom: none; }
.wartung-item:hover { background: var(--surface-2); }
.wartung-item-left { display: flex; flex-direction: column; gap: 3px; }
.wartung-item-wonr { font-size: 13px; font-weight: 600; color: var(--accent); }
.wartung-item-center { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wartung-item-title { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wartung-item-meta { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wartung-item-meta svg { flex-shrink: 0; color: var(--ink-4); }
.wartung-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 80px; }
.wartung-zyklus-badge {
  font-size: 11px; font-weight: 600; color: var(--accent-ink);
  background: var(--accent-soft); border-radius: 6px; padding: 2px 8px; white-space: nowrap;
}
.wartung-status-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 10px; white-space: nowrap;
}
.wartung-status--open    { background: var(--warn-soft); color: var(--warn-ink); }
.wartung-status--planned { background: var(--accent-soft); color: var(--accent-ink); }
.wartung-status--done    { background: var(--ok-soft); color: var(--ok-ink); }
.wartung-action-btn {
  width: 30px; height: 30px; border: none; border-radius: var(--radius-sm);
  background: var(--surface-3); border: 1px solid var(--line);
  color: var(--ink-3); font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .12s, color .12s;
}
.wartung-action-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.wartung-ctx-menu {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  overflow: hidden; z-index: 9000;
}
.wartung-ctx-item {
  display: block; width: 100%; padding: 10px 14px;
  border: none; background: none; text-align: left;
  font-size: 13px; font-family: var(--font); color: var(--ink);
  cursor: pointer; transition: background .1s;
}
.wartung-ctx-item:hover { background: var(--surface-2); }

/* ── 26. Wartungsbericht-Modal (wbr-*) ───────────────── */
/* Wird aus der Tagesansicht (z-index 9999) heraus geöffnet → muss darüber liegen. */
.wartungsbericht-overlay {
  position: fixed; inset: 0;
  background: oklch(0.2 0.01 270 / 0.45);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 20010; padding: 24px;
  animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.wartungsbericht-modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  width: min(560px, 96vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: slideUp .18s ease;
}
.wartungsbericht-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-shrink: 0;
}
.wartungsbericht-title { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.wartungsbericht-body {
  padding: 18px 20px; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 14px;
}
.wbr-hint { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.wbr-tasks { display: flex; flex-direction: column; gap: 10px; }
.wbr-task {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.wbr-task-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.wbr-task-info--done { opacity: .75; }
.wbr-task-name { font-size: 13px; font-weight: 600; color: var(--ink); word-break: break-word; }
.wbr-task-pct { font-size: 12px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wbr-task-pct--done { color: var(--ok-ink); }
.wbr-task .btn { flex-shrink: 0; white-space: nowrap; }
.wartungsbericht-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; flex-shrink: 0;
}

/* ── 27. Inspektionsformular-Modal (insp-*) ──────────── */
/* Wird über dem Wartungsbericht-Modal geöffnet → noch eine Ebene höher. */
.insp-overlay {
  position: fixed; inset: 0;
  background: oklch(0.2 0.01 270 / 0.45);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 20020; padding: 24px;
  animation: fadeIn .15s ease;
}
.insp-modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  width: min(640px, 96vw);
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: slideUp .18s ease;
}
.insp-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-shrink: 0;
}
.insp-header-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.insp-title { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.insp-subtitle { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.insp-body {
  padding: 18px 20px; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 14px;
}
.insp-task-name { margin: 0; font-size: 13px; color: var(--ink-2); }
.insp-task-name strong { color: var(--ink); }
.insp-form { display: flex; flex-direction: column; gap: 16px; }
.insp-field { display: flex; flex-direction: column; gap: 6px; }
.insp-field--hidden { display: none !important; }
.insp-section-header {
  font-size: 13px; font-weight: 700; color: var(--ink);
  padding-top: 8px; margin-top: 4px;
  border-top: 1px solid var(--line);
}
.insp-section-header:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.insp-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.insp-required { color: var(--danger-ink); margin-left: 2px; }
.insp-desc { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.insp-input, .insp-select, .insp-textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 13px; font-family: inherit;
  color: var(--ink); background: var(--surface);
  transition: border-color .12s, box-shadow .12s;
}
.insp-input:focus, .insp-select:focus, .insp-textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.insp-textarea { resize: vertical; min-height: 76px; }
.insp-radio-group { display: flex; gap: 12px; flex-wrap: wrap; }
.insp-radio-label { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; color: var(--ink); }
.insp-radio-label input[type="radio"] { accent-color: var(--accent); }
.insp-error { font-size: 12px; font-weight: 600; color: var(--danger-ink); }
.insp-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.insp-required-hint { font-size: 12px; color: var(--ink-3); margin-right: auto; }
.insp-required-hint .insp-required { margin-left: 0; margin-right: 2px; }

/* ── 28. Toast-Meldungen ─────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(12px);
  max-width: min(420px, 92vw);
  padding: 11px 16px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; line-height: 1.4;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 30000;
}
.toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--success { background: var(--ok-soft); border-color: var(--ok-ink); color: var(--ok-ink); }
.toast--error   { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-ink); }

/* ═══════════════════════════════════════════════════════════════════
   29. Mobile First / PWA Layer
   ───────────────────────────────────────────────────────────────────
   Bis 880px wird die Desktop-Sidebar zum Drawer, die Topbar zur
   nativen App-Bar mit Hamburger. Darüber bleibt alles unverändert.
   Safe-Area-Insets sorgen dafür, dass iPhone-Notch und Home-Indicator
   nicht in den Content schneiden.
   ═══════════════════════════════════════════════════════════════════ */

/* Globale Safe-Area-Variablen – fallback 0 für Browser ohne env() */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --mobile-topbar-h: 56px;
}

/* iOS bounce + Pinch-to-Zoom auf der App-Hülle deaktivieren,
   aber Inputs dürfen weiterhin scrollen. */
html, body {
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Mobile-Topbar + Avatar-Mini */
.mobile-topbar {
  display: none;
  align-items: center;
  gap: 10px;
  height: calc(var(--mobile-topbar-h) + var(--safe-top));
  padding: var(--safe-top) 14px 0 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklch, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  position: sticky; top: 0;
  z-index: 50;
}
.mobile-menu-btn,
.mobile-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid transparent; border-radius: 10px;
  color: var(--ink); background: transparent;
  cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.mobile-menu-btn:hover, .mobile-action-btn:hover { background: var(--surface-2); }
.mobile-menu-btn:active, .mobile-action-btn:active { background: var(--surface-3); }
.mobile-topbar-brand {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
}
.mobile-topbar-brand .brand-mark { width: 28px; height: 28px; border-radius: 7px; }
.mobile-topbar-title {
  font-size: 16px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.avatar.avatar--xs {
  width: 28px; height: 28px; font-size: 11px;
}

/* Drawer-Backdrop nur auf Mobile aktiv */
.drawer-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: oklch(0.2 0.01 270 / 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 89;
  opacity: 0;
  transition: opacity .22s ease;
}
.drawer-backdrop.visible { opacity: 1; }

/* Sidebar-Close-Button: per Default versteckt, nur Mobile sichtbar */
.sidebar-close-btn {
  display: none;
  margin-left: auto;
  width: 34px; height: 34px; border-radius: 8px;
  align-items: center; justify-content: center;
  color: var(--ink-2); background: transparent; border: 1px solid transparent;
  cursor: pointer; transition: background .15s, color .15s;
}
.sidebar-close-btn:hover { background: var(--surface-2); color: var(--ink); }

/* PWA Install-FAB */
.pwa-install-fab {
  position: fixed;
  right: calc(20px + var(--safe-right));
  bottom: calc(22px + var(--safe-bottom));
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px 0 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff; font-size: 13.5px; font-weight: 600;
  border: 1px solid color-mix(in oklch, var(--accent) 70%, white);
  box-shadow:
    0 6px 14px -4px oklch(0.55 0.18 265 / 0.45),
    0 1px 0 rgba(255,255,255,.25) inset;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  z-index: 800;
}
.pwa-install-fab:hover { transform: translateY(-1px); }
.pwa-install-fab:active { transform: translateY(0); }
.pwa-install-fab svg { color: #fff; }

/* iOS-Install-Hinweis – dezent oben angedockt */
.ios-install-hint {
  position: fixed;
  left: calc(12px + var(--safe-left));
  right: calc(12px + var(--safe-right));
  top: calc(var(--mobile-topbar-h) + var(--safe-top) + 8px);
  z-index: 700;
  animation: slideDownIn .26s ease both;
}
@keyframes slideDownIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ios-install-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.ios-install-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-ink);
}
.ios-install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ios-install-text strong { font-size: 13.5px; color: var(--ink); }
.ios-install-text span { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.ios-install-text em { color: var(--accent-ink); font-style: normal; font-weight: 600; }
.ios-install-close {
  position: absolute; right: 8px; top: 8px;
  width: 26px; height: 26px; border-radius: 7px;
  background: transparent; border: none;
  color: var(--ink-3); cursor: pointer;
  display: grid; place-items: center;
}
.ios-install-close:hover { background: var(--surface-2); color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════
   Breakpoint: Tablet hochkant + Phone (≤ 880px)
   Hier wird die Sidebar zum Drawer.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {

  /* Body-Scroll sperren, wenn Drawer offen */
  body.drawer-open { overflow: hidden; }

  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .mobile-topbar { display: flex; }
  .drawer-backdrop { display: block; pointer-events: none; }
  .drawer-backdrop.visible { pointer-events: auto; }

  /* Sidebar wird zum Off-Canvas-Drawer */
  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(86vw, 320px);
    padding: calc(var(--safe-top) + 14px) 14px calc(var(--safe-bottom) + 14px) calc(var(--safe-left) + 14px);
    z-index: 90;
    transform: translateX(-105%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow:
      0 0 0 1px var(--line),
      18px 0 48px -16px rgba(20,22,40,.18);
    will-change: transform;
  }
  .sidebar.open { transform: translateX(0); }

  /* Brand bekommt den Close-Button rechts */
  .sidebar-close-btn { display: inline-flex; }
  .brand { padding: 0 4px 14px; }

  /* Nav-Items größer = bessere Touch-Targets */
  .nav-item {
    padding: 11px 12px;
    font-size: 14.5px;
    min-height: 44px;
  }
  .nav-label {
    padding: 16px 12px 6px;
    font-size: 11px;
  }
  .user-dropdown {
    bottom: auto; top: calc(100% + 6px);
  }

  /* Main-Bereich nimmt jetzt volle Breite ein */
  .main {
    padding-bottom: var(--safe-bottom);
  }
  .workspace {
    padding: 14px 14px 24px;
  }

  /* Originale Desktop-Topbar (innerhalb der Views) bekommt mehr Luft */
  .topbar { display: none; }

  /* Kalender-Panel-Head bricht auf zwei Zeilen */
  .cal-panel-head {
    grid-template-columns: 1fr;
    grid-template-areas:
      "nav"
      "actions";
    gap: 8px;
    padding: 12px 14px;
  }
  .cal-panel-head > :first-child { display: none; }
  #topbar-calendar-nav  { grid-area: nav;     justify-self: center; }
  #topbar-calendar-actions { grid-area: actions; justify-content: flex-start; }
  .month-display-btn { font-size: 16px; min-width: 130px; }

  /* Kalender wird horizontal scrollbar */
  #calendar {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  /* Kompaktere Kalenderzeilen auf Mobile */
  .calendar-header,
  .week-row {
    grid-template-columns: 44px repeat(7, minmax(46px, 1fr));
    min-width: 600px;
  }
  .day-cell {
    min-height: 86px;
    padding: 7px 6px 6px;
    gap: 4px;
  }
  .day-date { font-size: 13.5px; }
  .day-cell.today .day-date { width: 20px; height: 20px; font-size: 11px; }
  .day-name { font-size: 9px; }
  .day-total { font-size: 10.5px; }
  .week-progress-outer { width: 10px; height: 38px; }

  /* Bookings-Toolbar stapelt */
  .bkg-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .bkg-toolbar-left,
  .bkg-toolbar-right {
    width: 100%;
    flex-wrap: wrap;
  }
  .bkg-toolbar-right { justify-content: flex-end; }
  .bkg-search { flex: 1; min-width: 0; }
  .bkg-search input { width: 100%; }
  .bkg-filter-tabs { width: 100%; }
  .bkg-filter-tabs .tab { flex: 1; justify-content: center; }

  /* Tabellen → horizontal scrollen */
  .bkg-panel { border-radius: 12px; }
  #bookings-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bookings-table thead th,
  .bookings-table tbody td { padding: 9px 10px; font-size: 12.5px; }

  /* Modals nehmen den ganzen Bildschirm minus Safe-Area */
  .modal-overlay,
  #settings-modal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .modal-card,
  .settings-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border-left: none; border-right: none;
    animation: slideUpFull .22s ease both;
  }
  @keyframes slideUpFull {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
  .modal-header,
  .settings-head {
    padding: calc(var(--safe-top) + 14px) 18px 14px 18px;
    position: sticky; top: 0;
    background: var(--surface);
    z-index: 4;
  }
  .modal-footer,
  .settings-foot {
    padding: 14px 18px calc(var(--safe-bottom) + 14px) 18px;
    position: sticky; bottom: 0;
    background: var(--surface);
    z-index: 4;
  }

  /* Settings: Nav-Spalte oben horizontal-scrollbar als Tab-Bar */
  .settings-modal {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "head"
      "nav"
      "body"
      "foot";
  }
  .settings-nav {
    border-right: none;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px;
    gap: 4px;
    scroll-snap-type: x mandatory;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav-item {
    flex-shrink: 0;
    padding: 8px 14px;
    scroll-snap-align: start;
    border: 1px solid transparent;
    border-radius: 999px;
  }
  .settings-nav-item.active {
    background: var(--accent-soft);
    color: var(--accent-ink);
    box-shadow: none;
    border-color: color-mix(in oklch, var(--accent) 30%, transparent);
  }
  .settings-body { padding: 18px 16px 18px; }
  .settings-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .settings-row .lbl { padding-top: 0; }

  /* Buttons mindestens 44px hoch (Apple HIG) */
  .btn { height: 44px; padding: 0 16px; font-size: 14px; }
  .btn-sm { height: 38px; padding: 0 12px; font-size: 13px; }
  .btn-icon { width: 44px; height: 44px; }

  /* Inputs etwas größer, damit iOS nicht zoomt (16px Schrift = no-zoom) */
  .input, input[type="text"].input, input[type="email"].input,
  input[type="number"].input, input[type="password"].input, textarea.input,
  select.input {
    font-size: 16px;
    height: 44px;
  }
  textarea.input { height: auto; min-height: 90px; }

  /* Login-Card auch auf Mobile gut zentriert */
  .ms-login-card {
    max-width: min(420px, 96vw);
    margin: max(env(safe-area-inset-top, 0px), 24px) auto;
  }

  /* Toast greift Safe-Area auf */
  .toast {
    bottom: calc(var(--safe-bottom) + 18px);
  }

  /* Debug-Overlay verträgt sich besser */
  .debug-card { width: 96vw; max-height: 88dvh; }

  /* User-Dropdown öffnet nach unten statt nach oben */
  .user-wrap.open .user-dropdown {
    bottom: auto; top: calc(100% + 6px);
  }

  /* Zalaris-Card etwas weniger Höhe */
  .sync-card { padding: 10px 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Breakpoint: Phone (≤ 540px)
   Detail-Layout, das den Drawer optimal nutzt
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {

  .workspace { padding: 10px 10px 22px; }

  /* Kalender: weniger Spalten-Padding */
  .day-cell { min-height: 76px; padding: 5px 4px 4px; }
  .day-entries-list { -webkit-line-clamp: 2; font-size: 10.5px; }

  /* Mini-Kalender Modal nimmt mehr Breite */
  .booking-cal-overlay .booking-cal-card { width: 96vw; }

  /* Filter-Tabs noch kompakter */
  .bkg-filter-tabs .tab { font-size: 12.5px; padding: 0 10px; }

  /* Modal-Header etwas kompakter */
  .modal-header h2,
  .settings-head h2 { font-size: 15.5px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Pointer- + Hover-Adjustments für reine Touch-Geräte
   ═══════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Tap-Highlight für Buttons sanfter */
  .nav-item:active { background: var(--accent-soft); }
  .btn:active { transform: scale(.99); }
}

/* PWA-Standalone-Modus: keine Browser-Chrome → mehr Platz im Topbar nutzen */
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
  .mobile-topbar { padding-top: var(--safe-top); }
  /* iOS-Statusbar-Tint-Reserve, falls notch tief */
  .ms-login-card { margin-top: max(var(--safe-top), 32px); }
}

/* Schmale Tablets (881–1080px): Sidebar etwas schmaler, sonst Desktop */
@media (min-width: 881px) and (max-width: 1080px) {
  .app-shell { grid-template-columns: 208px 1fr; }
  .workspace { padding: 18px 18px 26px; }
}