/* ── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --background: #fafafa;
  --card:       #ffffff;

  /* Text */
  --foreground:       #0a0a0a;
  --muted-foreground: #71717a;

  /* Interactive (overridable via theme settings) */
  --primary:            #18181b;
  --primary-foreground: #fafafa;

  /* Secondary */
  --secondary:            #f4f4f5;
  --secondary-foreground: #18181b;
  --muted: #f4f4f5;

  /* Borders & inputs */
  --border: #e4e4e7;
  --input:  #e4e4e7;
  --ring:   #a1a1aa;
  --radius: 0.5rem;

  /* Semantic (fixed, not user-configurable) */
  --danger:  #dc2626;
  --success: #16a34a;
  --warning: #ca8a04;

  /* Legacy aliases so existing templates keep working */
  --bg:            var(--background);
  --bg-elevated:   var(--card);
  --text:          var(--foreground);
  --text-muted:    var(--muted-foreground);
  --border-subtle: var(--border);
  --accent:        var(--primary);
  --accent-soft:   rgba(0,0,0,.07);
}

.dark {
  --background: #09090b;
  --card:       #111113;

  --foreground:       #fafafa;
  --muted-foreground: #a1a1aa;

  --primary:            #fafafa;
  --primary-foreground: #09090b;

  --secondary:            #27272a;
  --secondary-foreground: #fafafa;
  --muted: #27272a;

  --border: #27272a;
  --input:  #27272a;
  --ring:   #52525b;

  --danger:  #f87171;
  --success: #4ade80;
  --warning: #fbbf24;

  --accent-soft: rgba(255,255,255,.07);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background: var(--background);
  color: var(--foreground);
  min-height: 100vh;
  line-height: 1.5;
}
a { color: var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; }

/* ── Typography ─────────────────────────────────────────────────────────── */
h1 { font-size:1.6rem; font-weight:700; letter-spacing:-.01em; }
h2 { font-size:1.1rem; font-weight:600; margin-bottom:.75rem; }
h3 { font-size:.95rem; font-weight:600; }
p  { color: var(--muted-foreground); font-size:.9rem; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.container { max-width:1280px; margin:0 auto; padding:0 1.5rem; }
.wrap      { max-width:560px; margin:0 auto; }

/* ── Panel / Card ────────────────────────────────────────────────────────── */
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 2.5);
  padding: 1.4rem 1.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
}
.dark .panel {
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.panel-title { font-size:.85rem; font-weight:600; margin-bottom:.75rem; }

.card {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .8rem 1rem;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border:none; border-radius: var(--radius);
  padding:.5rem 1.1rem; font-size:.875rem; font-weight:500;
  cursor:pointer; text-decoration:none;
  transition: opacity .15s, box-shadow .15s;
  white-space:nowrap; font-family:inherit;
}
.btn:hover   { opacity:.88; }
.btn:active  { opacity:.75; }
.btn-primary  {
  background: var(--primary);
  color: var(--primary-foreground);
}
.btn-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
}
.btn-success  { background:#15803d; color:#fff; }
.btn-danger   { background:#b91c1c; color:#fff; }
.btn-warning  { background:#92400e; color:#fff; }
.btn-sm       { padding:.3rem .75rem; font-size:.8rem; }
.btn-icon     { padding:.4rem; border-radius: var(--radius); background: var(--secondary);
                border:1px solid var(--border); }
.btn[disabled]{ opacity:.4; pointer-events:none; }

/* ── Formulare ───────────────────────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:.3rem; }
.form-row   { display:flex; flex-wrap:wrap; gap:.9rem; }
.form-row .form-group { flex:1; min-width:160px; }
label { font-size:.82rem; color: var(--muted-foreground); font-weight:500; }
input, select, textarea {
  width:100%; padding:.45rem .65rem;
  border-radius: var(--radius);
  border:1px solid var(--input);
  background: var(--background);
  color: var(--foreground);
  font-size:.9rem; font-family:inherit;
}
input:focus, select:focus, textarea:focus {
  outline:2px solid var(--ring); outline-offset:1px; border-color:transparent;
}
textarea { resize:vertical; min-height:80px; }
.form-hint { font-size:.75rem; color: var(--muted-foreground); margin-top:.2rem; }

/* ── Header / Nav ────────────────────────────────────────────────────────── */
.app-header {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.5rem;
  border-bottom:1px solid var(--border);
  background: var(--card);
  position:sticky; top:0; z-index:100;
}
.app-logo { font-size:1rem; font-weight:700; letter-spacing:-.01em; color: var(--foreground); }
.app-logo span { color: var(--primary); }
.nav-main { display:flex; gap:.15rem; align-items:center; }
.nav-link {
  padding:.38rem .75rem; border-radius: var(--radius); font-size:.83rem;
  color: var(--muted-foreground); transition:background .12s, color .12s;
}
.nav-link:hover { background: var(--secondary); color: var(--foreground); text-decoration:none; }
.nav-link.active { background: var(--secondary); color: var(--foreground); font-weight:500; }
.nav-user { font-size:.8rem; color: var(--muted-foreground); display:flex; align-items:center; gap:.6rem; }

/* ── Chips ───────────────────────────────────────────────────────────────── */
.chip {
  border-radius:999px; border:1px solid var(--border);
  background: var(--secondary); color: var(--secondary-foreground);
  padding:.28rem .8rem; font-size:.78rem; cursor:pointer;
  transition: background .12s;
}
.chip:hover { background: var(--muted); }
.chip-active, .chip.active {
  background: var(--primary); color: var(--primary-foreground);
  border-color: var(--primary);
}

/* ── Badges / Status ─────────────────────────────────────────────────────── */
.badge {
  display:inline-block; border-radius:999px; padding:.14rem .55rem;
  font-size:.72rem; border:1px solid var(--border);
}
.badge-accent   { border-color: var(--primary); color: var(--primary); }
.badge-success  { border-color:rgba(22,163,74,.5);  color: var(--success);  background:rgba(22,163,74,.08); }
.badge-warning  { border-color:rgba(202,138,4,.5);  color: var(--warning); background:rgba(202,138,4,.08); }
.badge-danger   { border-color:rgba(220,38,38,.5);  color: var(--danger);  background:rgba(220,38,38,.08); }
.badge-vip      { border-color:gold; color:goldenrod; background:rgba(255,215,0,.08); }

.status-badge { display:inline-block; border-radius:999px; padding:.14rem .55rem; font-size:.72rem; border:1px solid; }
.status-requested { border-color:rgba(202,138,4,.6);  color: var(--warning); background:rgba(202,138,4,.08); }
.status-confirmed { border-color:rgba(22,163,74,.6);  color: var(--success); background:rgba(22,163,74,.08); }
.status-seated    { border-color:rgba(79,70,229,.6);  color:#6366f1; background:rgba(79,70,229,.08); }
.status-noshow    { border-color:rgba(220,38,38,.6);  color: var(--danger);  background:rgba(220,38,38,.08); }
.status-cancelled { border-color:rgba(113,113,122,.5); color: var(--muted-foreground); }

/* ── KPI Karten ──────────────────────────────────────────────────────────── */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.8rem; }
.kpi-card {
  padding:.8rem 1rem; border-radius: calc(var(--radius) * 1.5);
  border:1px solid var(--border); background: var(--card);
  display:flex; flex-direction:column; gap:.2rem;
}
.kpi-label { font-size:.72rem; color: var(--muted-foreground); text-transform:uppercase; letter-spacing:.04em; font-weight:500; }
.kpi-value { font-size:1.6rem; font-weight:700; color: var(--foreground); }
.kpi-value.danger  { color: var(--danger); }
.kpi-value.success { color: var(--success); }
.kpi-value.warning { color: var(--warning); }
.kpi-sub   { font-size:.75rem; color: var(--muted-foreground); }

/* ── Reservierungsliste ──────────────────────────────────────────────────── */
.res-list { list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.res-card {
  border-radius: calc(var(--radius) * 1.5); padding:.75rem 1rem;
  background: var(--card);
  border:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem;
  transition:border-color .12s, box-shadow .12s;
}
.res-card:hover { border-color: var(--ring); }
.res-time { font-weight:600; font-size:.95rem; color: var(--foreground); }
.res-name { font-size:.9rem; color: var(--foreground); }
.res-meta { font-size:.78rem; color: var(--muted-foreground); display:flex; gap:.6rem; flex-wrap:wrap; }
.res-actions { display:flex; gap:.4rem; flex-shrink:0; }

/* ── Tischplan ───────────────────────────────────────────────────────────── */
.tablemap-area {
  background: var(--muted); border-radius: calc(var(--radius) * 2);
  border:1px solid var(--border); padding:1rem;
  position:relative; overflow:hidden;
}
.tablemap-canvas { position:relative; width:100%; min-height:420px; }
.table-token {
  position:absolute; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  font-size:.72rem; font-weight:600; cursor:pointer;
  transition:box-shadow .2s, transform .15s;
  user-select:none;
}
.table-token:hover { transform:scale(1.07); z-index:10; }
.table-token.shape-rect  { border-radius: var(--radius); }
.table-token.shape-round { border-radius:50%; }
.table-token.status-free     { background:rgba(22,163,74,.15);  border:2px solid rgba(22,163,74,.5); color: var(--success); }
.table-token.status-reserved { background:rgba(202,138,4,.15);  border:2px solid rgba(202,138,4,.6); color: var(--warning); }
.table-token.status-seated   { background:rgba(220,38,38,.15);  border:2px solid rgba(220,38,38,.6); color: var(--danger); }
.table-token .t-name { font-size:.65rem; }
.table-token .t-cap  { font-size:.55rem; color: var(--muted-foreground); }
.area-tabs { display:flex; gap:.4rem; margin-bottom:.8rem; flex-wrap:wrap; }

/* ── Timeline / Gantt ────────────────────────────────────────────────────── */
.timeline-wrap { overflow-x:auto; }
.timeline-grid {
  display:grid; border-radius: var(--radius); overflow:hidden;
  border:1px solid var(--border); min-width:700px;
}
.tl-header { display:flex; background: var(--muted); border-bottom:1px solid var(--border); }
.tl-label  { width:90px; flex-shrink:0; padding:.4rem .6rem; font-size:.72rem; color: var(--muted-foreground); border-right:1px solid var(--border); }
.tl-hours  { flex:1; display:flex; }
.tl-hour   { flex:1; padding:.4rem .2rem; font-size:.68rem; color: var(--muted-foreground); text-align:center; border-right:1px solid var(--border); }
.tl-row    { display:flex; border-bottom:1px solid var(--border); min-height:40px; background: var(--card); }
.tl-row:last-child { border-bottom:none; }
.tl-row-label { width:90px; flex-shrink:0; padding:.5rem .6rem; font-size:.78rem; border-right:1px solid var(--border); display:flex; align-items:center; color: var(--foreground); }
.tl-cells  { flex:1; position:relative; }
.tl-block  {
  position:absolute; top:4px; height:calc(100% - 8px);
  border-radius: var(--radius); font-size:.68rem; padding:.2rem .4rem;
  background:rgba(99,102,241,.25); border:1px solid rgba(99,102,241,.6);
  overflow:hidden; white-space:nowrap; cursor:pointer;
  transition:opacity .15s; color: var(--foreground);
}
.tl-block:hover { opacity:.8; z-index:5; }
.tl-block.status-requested { background:rgba(202,138,4,.2);   border-color:rgba(202,138,4,.6); }
.tl-block.status-confirmed { background:rgba(22,163,74,.15);  border-color:rgba(22,163,74,.5); }
.tl-block.status-seated    { background:rgba(79,70,229,.2);   border-color:rgba(79,70,229,.6); }
.tl-now    { position:absolute; top:0; bottom:0; width:2px; background: var(--danger); opacity:.7; pointer-events:none; }
.tl-block.tl-ghost { background:rgba(124,58,237,.15); border:2px dashed var(--accent); opacity:.7; pointer-events:none; cursor:default; }
.tl-block.tl-block-combo { border-style:dashed; }
.tl-block.tl-block-combo span::before { content:'⊞ '; }

/* ── Tischplan-Editor ────────────────────────────────────────────────────── */
.tablemap-editor-wrap {
  overflow: auto; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--background);
  max-height: 560px;
}
.tablemap-editor-canvas {
  position: relative; width: 960px; min-height: 520px;
  background-image: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 10px 10px;
}
.editor-token { cursor: grab; transition: box-shadow .1s; }
.editor-token:hover { transform: none; box-shadow: 0 0 0 2px var(--accent); z-index: 10; }
.editor-token.is-dragging { cursor: grabbing !important; opacity: .82; z-index: 100; box-shadow: 0 4px 16px rgba(0,0,0,.5); }

/* Kompakte Timeline-Variante (Dashboard + CTI) */
.cti-tl .tl-label     { width:70px; }
.cti-tl .tl-row-label { width:70px; font-size:.72rem; }
.cti-tl .tl-block     { font-size:.62rem; cursor:default; }
.cti-tl .tl-block:hover { opacity:.9; }

/* ── Dashboard-Kalender ─────────────────────────────────────────────────── */
.dash-cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.dash-cal-month { font-size:.88rem; font-weight:600; }
.dash-cal-grid { display:grid; grid-template-columns:repeat(14,1fr); gap:2px; }
.dash-cal-dow { text-align:center; font-size:.55rem; color:var(--muted-foreground); padding:.1rem 0; font-weight:600; text-transform:uppercase; }
.dash-cal-day {
  height:22px; display:flex; align-items:center; justify-content:center;
  border-radius:.2rem; font-size:.64rem; cursor:pointer; position:relative;
  transition:transform .1s; font-weight:500; user-select:none;
}
.dash-cal-day:hover:not(.occ-closed) { transform:scale(1.15); z-index:2; box-shadow:0 1px 6px rgba(0,0,0,.35); }
.dash-cal-day.today { box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); font-weight:700; }
.dash-cal-day.selected { outline:2px solid var(--accent); outline-offset:1px; }
.dash-cal-empty { height:22px; }
/* Farbcodes Auslastung */
.occ-closed { background:rgba(55,65,81,.25); color:var(--muted-foreground); cursor:default; opacity:.6; }
.occ-open   { background:rgba(22,163,74,.13); color:#4ade80; }
.occ-low    { background:rgba(22,163,74,.28); color:#86efac; }
.occ-med    { background:rgba(234,179,8,.32); color:#fde047; }
.occ-high   { background:rgba(249,115,22,.38); color:#fdba74; }
.occ-full   { background:rgba(239,68,68,.42); color:#fca5a5; }
/* Legende */
.dash-cal-legend { display:flex; gap:.9rem; flex-wrap:wrap; margin-top:.55rem; font-size:.72rem; color:var(--muted-foreground); }
.dash-cal-legend span { display:flex; align-items:center; gap:.3rem; }
.dash-cal-legend .dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }

/* ── Warteliste ──────────────────────────────────────────────────────────── */
.waitlist-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.waitlist-table th,
.waitlist-table td { padding:.5rem .7rem; border-bottom:1px solid var(--border); text-align:left; }
.waitlist-table th { color: var(--muted-foreground); font-weight:500; font-size:.75rem; text-transform:uppercase; }
.waitlist-table tr:hover td { background: var(--secondary); }

/* ── Gäste / CRM ─────────────────────────────────────────────────────────── */
.guest-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.8rem; }
.guest-card {
  padding:1rem; border-radius: calc(var(--radius) * 2); border:1px solid var(--border);
  background: var(--card); display:flex; flex-direction:column; gap:.4rem;
  cursor:pointer; transition:border-color .12s;
}
.guest-card:hover { border-color: var(--ring); }
.guest-name  { font-weight:600; font-size:.95rem; color: var(--foreground); }
.guest-meta  { font-size:.78rem; color: var(--muted-foreground); display:flex; flex-wrap:wrap; gap:.4rem; }
.guest-flags { display:flex; gap:.3rem; flex-wrap:wrap; }

/* ── Aktivitätsfeed ──────────────────────────────────────────────────────── */
.feed-list { list-style:none; display:flex; flex-direction:column; gap:.4rem; max-height:340px; overflow-y:auto; }
.feed-item { font-size:.8rem; display:flex; gap:.5rem; align-items:flex-start; }
.feed-dot  { width:.45rem; height:.45rem; border-radius:50%; background: var(--primary); margin-top:.3rem; flex-shrink:0; }
.feed-time { color: var(--muted-foreground); flex-shrink:0; min-width:3.5rem; }
.feed-msg  { color: var(--muted-foreground); }
.feed-msg strong { color: var(--foreground); }

/* ── Booking Wizard (öffentlich) ─────────────────────────────────────────── */
.booking-hero {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:2rem 1rem; background: var(--background);
}
.booking-card {
  width:100%; max-width:540px;
  background: var(--card); border:1px solid var(--border);
  border-radius: calc(var(--radius) * 3); padding:2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 24px rgba(0,0,0,.06);
}
.dark .booking-card { box-shadow: 0 4px 32px rgba(0,0,0,.5); }
.booking-logo { text-align:center; margin-bottom:1.5rem; }
.booking-logo h1 { font-size:1.4rem; color: var(--foreground); text-transform:none; letter-spacing:-.01em; }
.booking-logo p  { font-size:.85rem; margin-top:.3rem; }
.booking-steps { display:flex; justify-content:center; gap:.4rem; margin-bottom:1.8rem; flex-wrap:wrap; }
.booking-step-indicator { display:flex; align-items:center; gap:.35rem; font-size:.78rem; color: var(--muted-foreground); }
.step-num {
  width:1.5rem; height:1.5rem; border-radius:50%; border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; color: var(--muted-foreground);
}
.step-num.active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.step-num.done   { background: var(--success);  border-color: var(--success);  color:#fff; }
.step-connector  { width:24px; height:2px; background: var(--border); }
.step-connector.done { background: var(--success); }
.booking-step { display:none; }
.booking-step.active { display:block; }

.slot-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:.5rem; margin-top:.8rem; }
.slot-btn  {
  padding:.55rem .4rem; text-align:center; border-radius: var(--radius);
  border:1px solid var(--border); background: var(--secondary);
  cursor:pointer; font-size:.85rem; transition:border-color .12s, background .12s;
  color: var(--foreground);
}
.slot-btn:hover   { border-color: var(--ring); background: var(--muted); }
.slot-btn.selected{ border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.slot-btn.request { border-color:rgba(202,138,4,.6); color: var(--warning); }
.slot-btn .slot-status { font-size:.62rem; color: var(--muted-foreground); }

.occasion-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:.8rem; }
.occasion-btn  {
  padding:.75rem .4rem; text-align:center; border-radius: var(--radius);
  border:1px solid var(--border); background: var(--secondary);
  cursor:pointer; font-size:.78rem; transition:border-color .12s, background .12s;
  color: var(--foreground);
}
.occasion-btn:hover   { border-color: var(--ring); background: var(--muted); }
.occasion-btn.selected{ border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.occasion-btn .oc-icon{ font-size:1.4rem; display:block; margin-bottom:.3rem; }

/* ── Einstellungen ───────────────────────────────────────────────────────── */
.settings-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.settings-section-title {
  font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  color: var(--muted-foreground); margin-bottom:.8rem;
  padding-bottom:.4rem; border-bottom:1px solid var(--border); font-weight:600;
}
.hours-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.hours-table td { padding:.4rem .3rem; }
.hours-table td:first-child { color: var(--muted-foreground); width:80px; }

/* ── Toast / Alert ───────────────────────────────────────────────────────── */
.toast-container { position:fixed; top:4.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.5rem; pointer-events:none; }
.toast {
  min-width:240px; max-width:340px; padding:.75rem 1rem; border-radius: calc(var(--radius) * 1.5);
  border:1px solid var(--border); background: var(--card);
  font-size:.85rem; pointer-events:auto; color: var(--foreground);
  animation: toast-in .25s ease; box-shadow:0 4px 16px rgba(0,0,0,.12);
}
.toast-success { border-color:rgba(22,163,74,.4);  color: var(--success); }
.toast-error   { border-color:rgba(220,38,38,.4);  color: var(--danger); }
@keyframes toast-in { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }

.alert { padding:.75rem 1rem; border-radius: var(--radius); font-size:.88rem; margin-bottom:1rem; border:1px solid transparent; }
.alert-error   { background:rgba(220,38,38,.07);   border-color:rgba(220,38,38,.25);  color: var(--danger); }
.alert-success { background:rgba(22,163,74,.07);   border-color:rgba(22,163,74,.25);  color: var(--success); }
.alert-warning { background:rgba(202,138,4,.07);   border-color:rgba(202,138,4,.25);  color: var(--warning); }

/* ── Tabelle ─────────────────────────────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.data-table th { padding:.5rem .7rem; text-align:left; color: var(--muted-foreground); font-weight:500; font-size:.75rem; text-transform:uppercase; border-bottom:1px solid var(--border); }
.data-table td { padding:.55rem .7rem; border-bottom:1px solid var(--border); color: var(--foreground); }
.data-table tr:hover td { background: var(--secondary); }
.data-table tr:last-child td { border-bottom:none; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-backdrop {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px); z-index:500; align-items:center; justify-content:center;
}
.modal-backdrop.open { display:flex; }
.modal {
  background: var(--card); border:1px solid var(--border);
  border-radius: calc(var(--radius) * 2.5); padding:1.5rem;
  max-width:500px; width:100%; margin:1rem;
  box-shadow:0 8px 40px rgba(0,0,0,.15); max-height:90vh; overflow-y:auto;
}
.dark .modal { box-shadow:0 8px 48px rgba(0,0,0,.6); }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.modal-title  { font-size:1rem; font-weight:600; color: var(--foreground); }
.modal-close  { background:none; border:none; color: var(--muted-foreground); cursor:pointer; font-size:1.1rem; padding:.2rem; }
.modal-footer { display:flex; gap:.5rem; justify-content:flex-end; margin-top:1.2rem; }

/* ── Progress Bar ────────────────────────────────────────────────────────── */
.progress-bar  { background: var(--border); border-radius:999px; height:.5rem; overflow:hidden; }
.progress-fill { height:100%; border-radius:999px; background: var(--primary); transition:width .4s; }

/* ── Loader ──────────────────────────────────────────────────────────────── */
.spinner { display:inline-block; width:1.4rem; height:1.4rem; border:2px solid var(--border); border-top-color: var(--primary); border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-overlay { display:flex; align-items:center; justify-content:center; padding:2rem; }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.flex          { display:flex; }
.flex-col      { display:flex; flex-direction:column; }
.items-center  { align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-1 { gap:.4rem; } .gap-2 { gap:.8rem; } .gap-3 { gap:1.2rem; }
.mt-1  { margin-top:.4rem; }  .mt-2 { margin-top:.8rem; }  .mt-3 { margin-top:1.2rem; }
.mb-1  { margin-bottom:.4rem; } .mb-2 { margin-bottom:.8rem; } .mb-3 { margin-bottom:1.2rem; }
.text-muted    { color: var(--muted-foreground); }
.text-sm       { font-size:.82rem; }
.text-xs       { font-size:.72rem; }
.font-bold     { font-weight:700; }
.w-full        { width:100%; }
.truncate      { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.hidden        { display:none !important; }
.sr-only       { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ── Dashboard Layout ────────────────────────────────────────────────────── */
.dashboard-main  { display:grid; grid-template-columns:1fr 340px; gap:1.2rem; margin-top:1.2rem; }
.dashboard-left  { display:flex; flex-direction:column; gap:1.2rem; }
.dashboard-right { display:flex; flex-direction:column; gap:1.2rem; }

/* ── Mobile Nav ──────────────────────────────────────────────────────────── */
.nav-burger {
  display:none; background:none; border:1px solid var(--border);
  color: var(--foreground); border-radius: var(--radius); padding:.3rem .6rem;
  font-size:1.1rem; cursor:pointer; line-height:1;
}
.nav-drawer {
  display:none; flex-direction:column;
  background: var(--card); border-bottom:1px solid var(--border);
  padding:.5rem 1rem .75rem;
}
.nav-drawer.open { display:flex; }
.nav-drawer-link {
  padding:.65rem .5rem; font-size:.9rem; color: var(--muted-foreground);
  border-bottom:1px solid var(--border); text-decoration:none;
}
.nav-drawer-link:last-child { border-bottom:none; }
.nav-drawer-link:hover, .nav-drawer-link.active {
  color: var(--foreground); background: var(--secondary); border-radius: var(--radius);
}

/* ── Guest Autocomplete ──────────────────────────────────────────────────── */
.guest-ac-dropdown { list-style:none; margin:0; padding:4px 0; }
.guest-ac-item {
  padding:.5rem .75rem; cursor:pointer; display:block;
  border-radius: var(--radius); transition:background .12s;
  color: var(--foreground);
}
.guest-ac-item:hover, .guest-ac-item:focus {
  outline:none; background: var(--secondary);
}

/* ── Rollen-Badges ───────────────────────────────────────────────────────── */
.role-badge {
  display:inline-block; font-size:.68rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  padding:.15rem .45rem; border-radius:999px;
  border:1px solid currentColor; vertical-align:middle;
}
.role-admin       { color:#8b5cf6; background:rgba(139,92,246,.1); }
.role-user        { color: var(--primary); background: var(--accent-soft); }
.role-mitarbeiter { color: var(--muted-foreground); background: var(--muted); }

/* ── Theme mode toggle ───────────────────────────────────────────────────── */
.theme-mode-select { display:flex; gap:.5rem; }
.theme-mode-btn {
  flex:1; padding:.6rem; border-radius: var(--radius);
  border:2px solid var(--border); background: var(--secondary);
  color: var(--secondary-foreground); cursor:pointer; font-size:.85rem;
  font-weight:500; text-align:center; transition:border-color .12s, background .12s;
  font-family:inherit;
}
.theme-mode-btn.active {
  border-color: var(--primary); background: var(--primary);
  color: var(--primary-foreground);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1024px) {
  .dashboard-main { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .app-header { padding:.75rem 1rem; }
  .nav-main   { display:none; }
  .nav-burger { display:inline-flex; }
  .nav-username { display:none; }
  .kpi-grid   { grid-template-columns:repeat(2,1fr); }
  h1 { font-size:1.3rem; }
  .booking-card { padding:1.4rem; }
  .occasion-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px) {
  .container { padding:0 .75rem; }
  .slot-grid { grid-template-columns:repeat(3,1fr); }
  .panel { padding:1rem; }
}