@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600;700;800&display=swap');
/* ═══════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0e0f13; --surface: #16181f; --surface2: #1e2028;
  --border: #252830; --accent: #c9a96e; --accent2: #6e9ec9;
  --text: #e8e6e0; --text2: #6b6d78; --text3: #4a5060;
  --green: #4caf88; --yellow: #eab308; --blue: #6e9ec9;
  --gray: #6b7280; --red: #e06b6b; --orange: #f97316;
  --radius: 8px; --font: 'DM Sans', sans-serif;
  /* Status-Balken Dark */
  --s-confirmed-bg: #1a2e1a; --s-confirmed-fg: #86efac; --s-confirmed-br: #4caf8866;
  --s-pending-bg:   #2e2a1a; --s-pending-fg:   #fde68a; --s-pending-br:   #eab30866;
  --s-checkin-bg:   #1f3550; --s-checkin-fg:   #bfdbfe; --s-checkin-br:   #60a5fa88;
  --s-checkout-bg:  #1e2028; --s-checkout-fg:  #9ca3af; --s-checkout-br:  #6b728066;
  --s-cancelled-bg: #2e1a1a; --s-cancelled-fg: #fca5a5; --s-cancelled-br: #e06b6b66;
  --s-paid-bg:      #3a1f22; --s-paid-fg:      #fecaca; --s-paid-br:      #fca5a588;
  --s-debtor-bg:    #2c2218; --s-debtor-fg:    #d4a373; --s-debtor-br:    #a1620788;
  /* Tooltip Dark */
  --tooltip-bg: #0a0c10;
  /* Weekend / hover overlays */
  --weekend-overlay: rgba(255,255,255,.025);
  --row-hover: rgba(255,255,255,.02);
  --today-overlay: rgba(201,169,110,.12);
  --today-overlay2: rgba(201,169,110,.08);
  --slot-hover: rgba(201,169,110,.08);
  --loading-overlay: rgba(14,15,19,.7);
}

/* ═══════════ LIGHT MODE ═══════════ */
:root[data-theme="light"] {
  --bg:       #f5f3ef;
  --surface:  #ffffff;
  --surface2: #f0ede8;
  --border:   #d4cfc5;
  --accent:   #a07d3f;
  --accent2:  #4a7cb5;
  --text:     #1e1c18;
  --text2:    #6b6560;
  --text3:    #a09888;
  --green:    #3a9470;
  --yellow:   #b8900a;
  --blue:     #4a7cb5;
  --gray:     #64748b;
  --red:      #c85050;
  --orange:   #d4650f;
  /* Status-Balken Light */
  --s-confirmed-bg: #e8f5e9; --s-confirmed-fg: #1b5e20; --s-confirmed-br: #3a9470;
  --s-pending-bg:   #fff8e1; --s-pending-fg:   #5d4037; --s-pending-br:   #b8900a;
  --s-checkin-bg:   #dbeafe; --s-checkin-fg:   #1e40af; --s-checkin-br:   #60a5fa;
  --s-checkout-bg:  #f0ede8; --s-checkout-fg:  #5d5550; --s-checkout-br:  #a09888;
  --s-cancelled-bg: #fce4ec; --s-cancelled-fg: #5d1a1a; --s-cancelled-br: #c85050;
  --s-paid-bg:      #fee2e2; --s-paid-fg:      #991b1b; --s-paid-br:      #fca5a5;
  --s-debtor-bg:    #f3e8d8; --s-debtor-fg:    #6b3f1a; --s-debtor-br:    #a16207;
  /* Tooltip Light */
  --tooltip-bg: #1e1c18;
  /* Overlays für Light Mode */
  --weekend-overlay: rgba(0,0,0,.03);
  --row-hover: rgba(0,0,0,.02);
  --today-overlay: rgba(160,125,63,.1);
  --today-overlay2: rgba(160,125,63,.06);
  --slot-hover: rgba(160,125,63,.07);
  --loading-overlay: rgba(245,243,239,.8);
}
body { font-family: var(--font); background: var(--bg); color: var(--text);
  height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* ═══════════════════════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════════════════════ */
#loginScreen { display: flex; align-items: center; justify-content: center;
  height: 100vh; background: var(--bg); }
.login-box { background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 40px; width: 360px; text-align: center; }
.login-box h1 { font-family: 'DM Serif Display', serif; font-size: 28px; margin-bottom: 8px; color: var(--accent); letter-spacing: .03em; }
.login-box h1 span { color: var(--text); }
.login-box p { color: var(--text2); margin-bottom: 32px; font-size: 14px; }
.login-logo { margin-bottom: 20px; }
.login-logo img { max-width: 280px; max-height: 120px; object-fit: contain; }
.field-wrap { position: relative; margin-bottom: 16px; text-align: left; }
.field-wrap label { display: block; font-size: 12px; color: var(--text2);
  margin-bottom: 6px; font-weight: 500; }
.field-wrap input { width: 100%; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 40px 10px 12px; color: var(--text);
  font-size: 14px; outline: none; transition: border-color .2s; }
.field-wrap input:focus { border-color: var(--accent); }
.eye-btn { position: absolute; right: 10px; bottom: 10px; background: none;
  border: none; color: var(--text2); cursor: pointer; padding: 2px; font-size: 16px; }
.btn-primary { width: 100%; background: var(--accent); border: none;
  border-radius: var(--radius); padding: 12px; color: #000;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity .2s; }
.btn-primary:hover { opacity: .85; }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }
#loginError { color: var(--red); font-size: 13px; margin-top: 12px; display: none; }

/* ═══════════════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════════════ */
#app { display: none; flex-direction: column; height: 100vh; overflow: hidden; }
/* Anti-Flicker: Gesamte Tab-Leiste unsichtbar bis Permissions.applyUI() */
#app .tab-scroll-wrap { opacity: 0; }
#app.permissions-ready .tab-scroll-wrap { opacity: 1; transition: opacity .15s ease; }
.topbar { background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 0 20px; display: flex; align-items: center; gap: 12px;
  height: 52px; flex-shrink: 0; }
.topbar h1 { font-family: 'DM Serif Display', serif; font-size: 16px; font-weight: 700; color: var(--accent);
  white-space: nowrap; margin-right: 8px; }
.tab-btn { background: none; border: none; color: var(--text2); padding: 6px 10px;
  border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500;
  transition: all .2s; white-space: nowrap; }
.tab-btn:hover { background: var(--surface2); color: var(--text); }
.tab-btn.active { background: var(--accent); color: #000; }
.tab-scroll-wrap .kbd { display:none; }
.tab-scroll-wrap { display:flex; align-items:center; gap:2px; overflow-x:auto; overflow-y:hidden;
  flex:1; min-width:0; scrollbar-width:thin; scrollbar-color: var(--border) transparent; }
.tab-scroll-wrap::-webkit-scrollbar { height:3px; }
.tab-scroll-wrap::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.tab-scroll-wrap::-webkit-scrollbar-track { background:transparent; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink:0; }
.date-display { font-size: 12px; color: var(--text2); white-space: nowrap; }
.icon-btn { background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 10px; color: var(--text2); cursor: pointer;
  font-size: 12px; transition: all .2s; white-space: nowrap; }
.icon-btn:hover { background: var(--border); color: var(--text); }

/* ═══════════════════════════════════════════════════════════
   TOOLBAR
═══════════════════════════════════════════════════════════ */
.toolbar { background: var(--surface2); border-bottom: 1px solid var(--border);
  padding: 8px 20px; display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; flex-wrap: wrap; }
.toolbar-btn { background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 12px; color: var(--text2); cursor: pointer;
  font-size: 12px; transition: all .2s; display: flex; align-items: center; gap: 5px; }
.toolbar-btn:hover { background: var(--border); color: var(--text); }
.toolbar-btn.active { background: var(--accent); border-color: var(--accent); color: #000; }
.toolbar-sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
.toolbar-date { background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; font-size: 12px; color: var(--text); font-family: inherit; cursor: pointer; }
.toolbar-date:hover { border-color: var(--accent); }
.toolbar-date:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(166,138,86,.25); }
.zoom-wrap { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); }
#zoomSlider { width: 80px; accent-color: var(--accent); }
.restaurant-select { background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 10px; color: var(--text); font-size: 12px;
  cursor: pointer; outline: none; }
.restaurant-select:focus { border-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   CONTENT AREAS
═══════════════════════════════════════════════════════════ */
.content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.tab-panel { display: none; flex: 1; overflow: hidden; flex-direction: column; }
.tab-panel.active { display: flex; }

/* ═══════════════════════════════════════════════════════════
   HOTEL GANTT (bestehend)
═══════════════════════════════════════════════════════════ */
.gantt-wrap { flex: 1; overflow: auto; position: relative; }
.gantt-grid { display: flex; flex-direction: column; min-width: max-content; }
.gantt-header-row { display: flex; position: sticky; top: 0; z-index: 10;
  background: var(--surface); border-bottom: 2px solid var(--border); }
/* ── Sticky linke Namensspalte (30.05.2026) ──────────────────────────────────
   Alle linken Zellen bleiben beim Horizontal-Scrollen stehen (position:sticky;
   left:0). Jede braucht einen UNDURCHSICHTIGEN, theme-sicheren Hintergrund =
   ihr echter Zeilengrund, sonst scrollen Reservierungsbalken / Verfuegbarkeits-
   zahlen sichtbar dahinter durch: Zimmerzeile = --bg, Ecke = --surface,
   Haus-/Etagen-Kopf = --surface2.
   z-index: res-bar(2) < res-bar:hover(5) < Namenszelle(6) < Header-Ecke(12).   */
.gantt-sidebar-cell { width: 160px; min-width: 160px; flex-shrink: 0;
  padding: 8px 12px; font-size: 11px; font-weight: 600; color: var(--text2);
  border-right: 2px solid var(--border); display: flex; align-items: center;
  position: sticky; left: 0; z-index: 12; background: var(--surface); }
.gantt-month-row { display: flex; border-bottom: 1px solid var(--border); }
.gantt-month-label { font-size: 11px; font-weight: 700; color: var(--text2);
  padding: 4px 0; text-align: center; border-right: 1px solid var(--border2, #1e2235); }
.gantt-day-headers { display: flex; }
.gantt-day-cell { display: flex; flex-direction: column; align-items: center;
  justify-content: center; border-right: 1px solid var(--border);
  font-size: 10px; flex-shrink: 0; }
.gantt-day-cell.weekend { background: var(--weekend-overlay); }
.gantt-day-cell.today { background: var(--today-overlay); }
.gantt-day-name { color: var(--text2); font-size: 9px; }
.gantt-day-num { font-weight: 700; font-size: 12px; }
.gantt-row { display: flex; border-bottom: 1px solid var(--border); position: relative; }
.gantt-row:hover { background: var(--row-hover); }
.gantt-label { width: 160px; min-width: 160px; flex-shrink: 0; padding: 0 12px;
  font-size: 12px; border-right: 2px solid var(--border); display: flex;
  align-items: center; gap: 8px; height: var(--gantt-row-h, 40px);
  position: sticky; left: 0; z-index: 6; background: var(--bg); }
.gantt-label .room-num { font-weight: 700; color: var(--accent); font-size: 13px; }
.gantt-label .room-name { color: var(--text2); font-size: 11px; }
.floor-header { background: var(--surface2); height: 28px; padding: 0 12px;
  font-size: 11px; font-weight: 700; color: var(--text2); letter-spacing: .5px; }
/* Etagen-Trenner: das 160px-Label-div (erstes Kind) sticky fixieren. position/
   left/z-index/background sind im Inline-style des div NICHT gesetzt -> greifen. */
.gantt-row.floor-header > div:first-child {
  position: sticky; left: 0; z-index: 6; background: var(--surface2); }
/* Property-Header (Haus-Gruppe) */
/* Kategorie-Header (HotelGantt im Kategorie-Modus) — subtiles Gold-Akzent. */
.property-header.category-header { background: rgba(201,169,110,.16) !important; color: var(--accent) !important; border-top: 2px solid var(--accent) !important; }
.property-header.category-header:hover { background: rgba(201,169,110,.24) !important; }
.property-header.category-header .ph-name { color: var(--accent) !important; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; font-size: 12px; }
.property-header.category-header .ph-count { color: var(--accent) !important; background: rgba(201,169,110,.22) !important; font-weight: 700; }
.property-header.category-header .ph-arrow { color: var(--accent) !important; }
.property-header.category-header .avail-cell { color: var(--accent) !important; font-weight: 800; }
.property-header { background: var(--surface2); border-bottom: 2px solid var(--border);
  display: flex; cursor: pointer; user-select: none; position: relative; }
.property-header:hover { background: var(--slot-hover); }
.property-label { width: 160px; min-width: 160px; flex-shrink: 0;
  padding: 0 10px; border-right: 2px solid var(--border);
  display: flex; align-items: center; gap: 6px; height: 34px;
  position: sticky; left: 0; z-index: 6; background: var(--surface2); }
/* Kategorie-Kopf: Label braucht denselben (undurchsichtigen) Gold-Grund wie die
   Banner-Zeile (.16 Gold ueber --bg), sonst Farb-Bruch beim Sticky-Fixieren. */
.property-header.category-header .property-label {
  background: linear-gradient(rgba(201,169,110,.16), rgba(201,169,110,.16)), var(--bg); }
.property-label .ph-arrow { font-size: 10px; color: var(--accent); transition: transform .2s; }
.property-label .ph-arrow.open { transform: rotate(90deg); }
.property-label .ph-name { font-weight: 700; font-size: 12px; color: var(--text1); }
.property-label .ph-count { font-size: 10px; color: var(--text3);
  background: var(--surface); padding: 1px 5px; border-radius: 3px; }
/* Verfügbarkeits-Zahlen in der Haus-Kopfzeile */
.avail-cells { display: flex; flex: 1; height: 34px; }
.avail-cell { flex-shrink: 0; border-right: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; }
.avail-cell.full  { color: var(--red); }
.avail-cell.low   { color: var(--yellow); }
.avail-cell.ok    { color: var(--green); }
.avail-cell.we    { background: var(--weekend-overlay); }
.gantt-cells { display: flex; position: relative; flex: 1; height: var(--gantt-row-h, 40px); }
.gantt-cell { border-right: 1px solid var(--border); flex-shrink: 0;
  height: 100%; }
.gantt-cell.weekend { background: var(--weekend-overlay); }
.gantt-cell.today { background: var(--slot-hover); }
.res-bar { position: absolute; top: 4px; height: calc(var(--gantt-row-h, 40px) - 8px); border-radius: 5px;
  cursor: pointer; overflow: hidden; display: flex; align-items: center;
  padding: 0 8px; font-size: 11px; font-weight: 600; white-space: nowrap;
  transition: filter .15s; user-select: none; z-index: 2; }
/* Gastname clippt IMMER an der Pillen-Kante (auch wenn die Bar selbst
   overflow:visible bekommt, damit Badges aussen sichtbar bleiben).
   Voller Name erscheint beim Hover via Tooltip.attach(). */
.res-bar > .res-bar__label { flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-bar:hover { filter: brightness(1.15); z-index: 5; }
.res-bar.dragging  { opacity: .75; z-index: 100; }
.res-bar.resizing  { opacity: .85; z-index: 100; cursor: ew-resize; }
.rg-bar.resizing   { opacity: .85; z-index: 100; cursor: ew-resize; }
.rg-cells.drag-target { background: rgba(201,169,110,.10); outline: 2px dashed var(--accent); outline-offset: -2px; }
.gantt-cells.drag-target { background: rgba(201,169,110,.10); outline: 2px dashed var(--accent); outline-offset: -2px; }
.resize-handle {
  position: absolute; right: 0; top: 0; bottom: 0; width: 8px;
  cursor: ew-resize; z-index: 10; border-radius: 0 5px 5px 0;
  background: transparent; transition: background .15s;
}
.resize-handle:hover { background: rgba(255,255,255,.28); }
.status-confirmed  { background: var(--s-confirmed-bg); color: var(--s-confirmed-fg); border: 1px solid var(--s-confirmed-br); }
.status-pending    { background: var(--s-pending-bg);   color: var(--s-pending-fg);   border: 1px solid var(--s-pending-br);   }
.status-tentative  { background: var(--s-pending-bg);   color: var(--s-pending-fg);   border: 1px solid var(--s-pending-br);   }
.status-checked_in { background: var(--s-checkin-bg);   color: var(--s-checkin-fg);   border: 1px solid var(--s-checkin-br);   }
.status-checked_out{ background: var(--s-checkout-bg);  color: var(--s-checkout-fg);  border: 1px solid var(--s-checkout-br);  }
.status-cancelled  { background: var(--s-cancelled-bg); color: var(--s-cancelled-fg); border: 1px solid var(--s-cancelled-br); }
.status-paid       { background: var(--s-paid-bg);      color: var(--s-paid-fg);      border: 1px solid var(--s-paid-br);      }
.status-debtor     { background: var(--s-debtor-bg);    color: var(--s-debtor-fg);    border: 1px solid var(--s-debtor-br);    }
.today-line { position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--accent); opacity: .6; pointer-events: none; z-index: 3; }

/* ═══════════════════════════════════════════════════════════
   RESTAURANT GANTT – TAGESPLAN
═══════════════════════════════════════════════════════════ */
.rg-wrap { flex: 1; overflow: auto; position: relative; }
.rg-grid { min-width: max-content; }
.rg-header { display: flex; position: sticky; top: 0; z-index: 10;
  background: var(--surface); border-bottom: 2px solid var(--border); }
.rg-sidebar-cell { width: var(--rg-label-w, 180px); min-width: 80px; flex-shrink: 0; position: sticky; left: 0; z-index: 3; user-select: none;
  padding: 8px 12px; font-size: 11px; font-weight: 600; color: var(--text2);
  border-right: 2px solid var(--border); display: flex; align-items: center; background: var(--bg); }
.rg-hour-cell { flex-shrink: 0; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--text2); }
.rg-hour-cell.current-hour { background: var(--today-overlay);
  color: var(--accent); }
.rg-row { display: flex; border-bottom: 1px solid var(--border); position: relative; }
.rg-row:hover { background: var(--row-hover); }

.rg-label { width: var(--rg-label-w, 180px); min-width: 80px; flex-shrink: 0; overflow: hidden;
  white-space: nowrap; font-size: 12px; border-right: 2px solid var(--border);
  display: flex; align-items: center; gap: 4px; height: var(--rg-row-h, 44px); padding: 0 8px;
  position: sticky; left: 0; z-index: 3; background: var(--bg); }
.rg-label .tbl-num { font-weight: 700; color: var(--accent2); font-size: 13px; }
.rg-label .tbl-cap { font-size: 10px; color: var(--text3);
  background: var(--surface2); padding: 1px 5px; border-radius: 3px; }
.rg-cells { display: flex; position: relative; flex: 1; height: var(--rg-row-h, 44px); }
.rg-slot { flex-shrink: 0; border-right: 1px solid var(--border);
  height: 100%; cursor: pointer; transition: background .15s; }
.rg-slot:hover { background: var(--slot-hover); }
.rg-slot.current-hour { background: rgba(79,124,255,.05); /* slot-current */ }
.rg-bar { position: absolute; top: 5px; height: calc(var(--rg-row-h, 44px) - 10px); border-radius: 5px;
  cursor: pointer; overflow: hidden; display: flex; align-items: center;
  padding: 0 8px; font-size: 11px; font-weight: 600; white-space: nowrap;
  transition: filter .15s; z-index: 2; }
.rg-bar:hover { filter: brightness(1.1); z-index: 5; }
:root[data-theme="light"] .rg-bar:hover { filter: brightness(.92); }
.rg-bar .bar-time { font-size: 9px; font-weight: 400; opacity: .8; margin-left: 4px; }
.rg-current-line { position: absolute; top: 0; bottom: 0; width: 2px;
  background: #f97316; opacity: .7; pointer-events: none; z-index: 3; }
/* Theater-Blockierung (Scheune) */
.rg-bar.theater-block { background: #7c3aed33; color: #7c3aed; border: 1px dashed #7c3aed88;
  cursor: default; font-weight: 600; pointer-events: auto; }
.rg-bar.theater-block:hover { filter: none; }
.rw-res-chip.theater-block { background: #7c3aed22; color: #7c3aed; border: 1px dashed #7c3aed55;
  font-weight: 600; cursor: default; }
/* Theater-Hinweiszone fuer Sonnenhof Gastraum: blass-lila Hintergrund ab 15:00 an Theater-Tagen.
   Sitzt unter den Reservierungs-Bars (z-index: 0 < .rg-bar z-index: 2) und schluckt keine Klicks. */
.rg-theater-zone { position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  background: rgba(124, 58, 237, 0.08);
  border-left: 2px dashed rgba(124, 58, 237, 0.35);
  border-right: 1px dashed rgba(124, 58, 237, 0.18); }
:root[data-theme="light"] .rg-theater-zone { background: rgba(124, 58, 237, 0.06); }
/* Wochenplan-Variante: blass-lila Slot-Hintergrund */
.rw-day-slot.rw-theater-zone { background: rgba(124, 58, 237, 0.10); }
.rw-day-slot.rw-theater-zone.today { background: rgba(124, 58, 237, 0.18); }
.rw-day-slot.rw-theater-zone:hover { background: rgba(124, 58, 237, 0.18); }

/* ── Catering-Bars / -Chips ───────────────────────────────────
   Eigener Look (Gold-Akzent statt Status-Tinte der Tisch-Bars), damit der
   Mitarbeiter Tisch- und Catering-Eintraege auf einen Blick unterscheiden kann.
   Status-Varianten: angefragt (gelb), bestaetigt (gruen), durchgefuehrt (blau), storniert (rot/durchgestrichen). */
.rg-bar.catering-bar {
  background: rgba(201,169,110,.18); color: var(--accent, #c9a96e);
  border: 1px solid rgba(201,169,110,.55); font-weight: 600;
}
.rg-bar.catering-bar:hover { filter: brightness(1.08); }
.rg-bar.catering-bar.status-angefragt     { background: rgba(253,224,71,.22);  color:#92400e; border-color: rgba(217,119,6,.55); }
.rg-bar.catering-bar.status-bestaetigt    { background: rgba(187,247,208,.40); color:#166534; border-color: rgba(22,101,52,.55); }
.rg-bar.catering-bar.status-durchgefuehrt { background: rgba(191,219,254,.40); color:#1e3a8a; border-color: rgba(30,58,138,.45); }
.rg-bar.catering-bar.status-storniert     { background: rgba(254,202,202,.40); color:#7f1d1d; border-color: rgba(127,29,29,.45); text-decoration: line-through; opacity:.75; }
.rg-bar.catering-bar .cat-todo-badge {
  margin-left: 6px; font-size: 9px; font-weight: 700; padding: 1px 5px;
  border-radius: 8px; background: rgba(0,0,0,.12); color: inherit;
}

/* Wochenplan-Catering-Chips */
.rw-res-chip.catering-chip { background: rgba(201,169,110,.22); color:#92400e; border:1px solid rgba(201,169,110,.55); }
.rw-res-chip.catering-chip.status-bestaetigt    { background: rgba(187,247,208,.45); color:#166534; border-color: rgba(22,101,52,.55); }
.rw-res-chip.catering-chip.status-durchgefuehrt { background: rgba(191,219,254,.45); color:#1e3a8a; border-color: rgba(30,58,138,.45); }
.rw-res-chip.catering-chip.status-storniert     { background: rgba(254,202,202,.45); color:#7f1d1d; border-color: rgba(127,29,29,.45); text-decoration: line-through; opacity:.75; }

/* Catering-Modal: gleiche Basis wie Booking-Modal; spezifische Notiz-Textareas grosszuegig */
.modal-catering #cNotes,
.modal-catering #cInternalNotes { width: 100%; min-height: 110px; resize: vertical; font-family: inherit; font-size: 13px; }
.modal-catering #cTodoList:empty::before {
  content: 'Noch keine Aufgaben — neue unten hinzufuegen.';
  color: var(--text3); font-size: 11px; font-style: italic;
}
.modal-catering #cateringStatusBadge:empty { display: none; }

/* Toggle-Menue beim Klick auf Catering-Zeile */
#cateringChoiceMenu > div:hover { background: var(--surface2); }

/* Gruppen-Badge auf Buchungsbalken */
.group-badge { position: absolute; top: -1px; right: 22px; width: 8px; height: 8px;
  border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); z-index: 6;
  pointer-events: none; }
:root[data-theme="light"] .group-badge { border-color: rgba(0,0,0,.25); }
/* Gruppen-Karte im Panel */
.group-card { background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; cursor: pointer; transition: border-color .15s; }
.group-card:hover { border-color: var(--accent); }
.group-card .gc-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.group-card .gc-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text2); }
.group-card .gc-badge { padding: 2px 7px; border-radius: 10px; font-size: 10px;
  font-weight: 600; background: var(--surface); }
.group-card .gc-links { margin-top: 6px; font-size: 11px; color: var(--text3); }
/* Verknüpfte Buchung im Formular */
.linked-res { background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px; font-size: 12px;
  display: flex; align-items: center; gap: 8px; }
.rg-section-header { background: var(--surface2); height: 26px;
  font-size: 11px; font-weight: 700; color: var(--text2); letter-spacing: .5px; }
/* Aufklappbarer Property-Header im Restaurant-Gantt */
/* Super-Header (Oberkategorie: Haus · Innenbereich / Biergarten / …)
   Subtiles Gold-Akzent (brand-konform), Schrift in Akzent-Farbe — lesbar, dezent. */
.rg-super-header { background: rgba(201,169,110,.16) !important; color: var(--accent) !important; border-top: 2px solid var(--accent) !important; border-bottom: 1px solid rgba(201,169,110,.32) !important; }
.rg-super-header:hover { background: rgba(201,169,110,.24) !important; }
.rg-super-header .rph-name { color: var(--accent) !important; font-weight: 800 !important; font-size: 12px !important; letter-spacing: .4px; text-transform: uppercase; }
.rg-super-header .rph-count { color: var(--accent) !important; background: rgba(201,169,110,.22) !important; font-weight: 700; }
.rg-super-header .rph-arrow { color: var(--accent) !important; }
.rg-super-header .rg-avail-cell, .rg-super-header .rw-avail-cell { color: var(--accent) !important; font-weight: 800; }
.rg-super-header .rg-property-label { background: transparent !important; }
/* WICHTIG: kein padding-left auf dem Container, sonst verschieben sich die Avail-Cells (Stunden-Spalten) */
.rg-sub-header { background: var(--surface2); }
.rg-sub-header .rph-name { font-size: 11px; color: var(--text2); font-weight: 600; padding-left: 14px; }
.rg-property-header { background: var(--surface2); border-bottom: 2px solid var(--border);
  display: flex; cursor: pointer; user-select: none; }
.rg-property-header:hover { background: var(--slot-hover); }
.rg-property-label { width: var(--rg-label-w, 180px); min-width: 80px; flex-shrink: 0; position: sticky; left: 0; z-index: 3;
  padding: 0 10px; border-right: 2px solid var(--border); background: var(--bg);
  display: flex; align-items: center; gap: 6px; height: 32px; white-space: nowrap; overflow: hidden; }
.rg-property-label .rph-arrow { font-size: 10px; color: var(--accent); transition: transform .2s; }
.rg-property-label .rph-arrow.open { transform: rotate(90deg); }
.rg-property-label .rph-name { font-weight: 700; font-size: 12px; color: var(--text1);
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rg-property-label .rph-count { font-size: 10px; color: var(--text3);
  background: var(--surface); padding: 1px 5px; border-radius: 3px; }
/* Sitzplatz-Verfügbarkeit in der Stunden-Übersicht */
.rg-avail-cells { display: flex; flex: 1; height: 32px; }
.rg-avail-cell { flex-shrink: 0; border-right: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; }
.rg-avail-cell.full { color: #ef4444; }
.rg-avail-cell.low  { color: #f59e0b; }
.rg-avail-cell.ok   { color: #22c55e; }
/* Wochenplan: Verfügbarkeit pro Tag */
.rw-avail-cell { flex-shrink: 0; border-right: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; }
.rw-avail-cell.full { color: #ef4444; }
.rw-avail-cell.low  { color: #f59e0b; }
.rw-avail-cell.ok   { color: #22c55e; }

/* ═══════════════════════════════════════════════════════════
   RESTAURANT GANTT – WOCHENPLAN
═══════════════════════════════════════════════════════════ */
.rw-wrap { flex: 1; overflow: auto; position: relative; }
.rw-grid { min-width: max-content; }
.rw-header { display: flex; position: sticky; top: 0; z-index: 10;
  background: var(--surface); border-bottom: 2px solid var(--border); }
.rw-sidebar-cell { width: var(--rg-label-w, 180px); min-width: 80px; flex-shrink: 0; position: sticky; left: 0; z-index: 3; user-select: none;
  padding: 8px 12px; font-size: 11px; font-weight: 600; color: var(--text2);
  border-right: 2px solid var(--border); display: flex; align-items: center; background: var(--surface); }
.rw-day-cell { flex-shrink: 0; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 4px; }
.rw-day-cell.today { background: var(--today-overlay); }
.rw-day-cell.weekend { background: var(--row-hover); }
.rw-day-name { font-size: 10px; color: var(--text2); }
.rw-day-num { font-size: 13px; font-weight: 700; }
.rw-day-date { font-size: 9px; color: var(--text3); }
.rw-row { display: flex; border-bottom: 1px solid var(--border); }
.rw-label { width: var(--rg-label-w, 180px); min-width: 80px; flex-shrink: 0; overflow: hidden;
  white-space: nowrap; font-size: 12px; border-right: 2px solid var(--border);
  display: flex; align-items: center; gap: 4px; padding: 0 8px;
  position: sticky; left: 0; z-index: 3; background: var(--bg); }
.rw-label .tbl-num { font-weight: 700; color: var(--accent2); font-size: 12px; }
.rw-label .tbl-cap { font-size: 10px; color: var(--text3); margin-left: 4px; }

.rw-day-slot { flex-shrink: 0; border-right: 1px solid var(--border);
  padding: 4px; min-height: 44px; display: flex; flex-direction: column; gap: 2px;
  cursor: pointer; transition: background .15s; vertical-align: top; }
.rw-day-slot:hover { background: var(--slot-hover); }
.rw-day-slot.today { background: rgba(79,124,255,.05); /* slot-current */ }
.rw-res-chip { border-radius: 4px; padding: 2px 6px; font-size: 10px;
  font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; line-height: 1.4; }
.rw-res-chip:hover { filter: brightness(1.2); }

/* ═══════════════════════════════════════════════════════════
   MODAL / FORMS
═══════════════════════════════════════════════════════════ */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; display: none; }
.modal-overlay.open { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 28px; width: 480px; max-width: 95vw;
  max-height: 92vh; overflow-y: auto; }
.modal-wide { width: 680px; }
.modal h2 { font-family: 'DM Serif Display', serif; font-size: 18px; margin-bottom: 20px; display: flex;
  align-items: center; gap: 8px; }

/* Kompaktes Buchungsformular – 3 Spalten, kein Scrollen */
.modal-booking { width: 680px; max-width: 96vw; padding: 20px 24px 18px; transition: all .3s ease; }
.modal-booking h2 { margin-bottom: 14px; font-size: 16px; display:flex; align-items:center; gap:8px; }
.modal-booking h2 .modal-fullscreen-btn { margin-left:auto; background:none; border:1px solid var(--border);
  border-radius:6px; padding:4px 8px; cursor:pointer; font-size:14px; color:var(--text2);
  transition:all .2s; line-height:1; flex-shrink:0; }
.modal-booking h2 .modal-fullscreen-btn:hover { background:var(--surface2); border-color:var(--accent); color:var(--text); }
.modal-booking h2 .modal-close-btn { background:none; border:1px solid var(--border);
  border-radius:6px; padding:4px 9px; cursor:pointer; font-size:14px; color:var(--text2);
  transition:all .2s; line-height:1; flex-shrink:0; margin-left:6px; font-weight:600; }
.modal-booking h2 .modal-close-btn:hover { background:#7f1d1d; border-color:#ef4444; color:#fff; }
.modal-booking #bResNumberRow,
.modal-booking #tbResNumberRow { margin-top:14px; padding:10px 12px !important; background:var(--surface2);
  border:1px solid var(--border); border-radius:8px; }
.modal-booking #bResNumberRow:empty,
.modal-booking #tbResNumberRow:empty { display:none !important; }
.modal-booking.fullscreen { width:96vw; max-width:96vw; height:92vh; max-height:92vh; padding:28px 40px;
  display:flex; flex-direction:column; }
.modal-booking.fullscreen .form-grid-3 { grid-template-columns:repeat(4, 1fr); gap:16px 20px; flex:1; align-content:start; }
.modal-booking.fullscreen .form-grid-3 .full3 { grid-column: 1 / -1; }
.modal-booking.fullscreen .form-grid-3 input,
.modal-booking.fullscreen .form-grid-3 select { padding:10px 12px !important; font-size:14px !important; }
.modal-booking.fullscreen .form-grid-3 textarea { min-height:120px !important; padding:10px 12px !important; font-size:14px !important; }
.modal-booking.fullscreen .form-grid-3 label { font-size:13px; }
.modal-booking.fullscreen h2 { font-size:20px; margin-bottom:20px; }
.modal-booking.fullscreen .form-actions { margin-top:auto; padding-top:16px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.form-grid-3 .full3 { grid-column: 1 / -1; }
.form-grid-3 .span2  { grid-column: span 2; }
.form-grid-3 .form-group { gap: 3px; }
.form-grid-3 label { font-size: 11px; }
.form-grid-3 input, .form-grid-3 select {
  padding: 6px 8px !important; font-size: 12px !important; }
.form-grid-3 textarea { min-height: 46px !important; padding: 6px 8px !important;
  font-size: 12px !important; resize: none; }
/* ── Tisch-Reservierung: Notiz-Felder beim Anklicken (Fokus) auf Schreibgroesse
   aufklappen, nach dem Bearbeiten (Blur) wieder auf Originalhoehe schrumpfen.
   Da .form-grid-3 textarea resize:none hat, ersetzt dies das manuelle Vergroessern.
   ID + !important schlaegt die Default-min-height (46px / fullscreen 120px / mobile 32px). ── */
#tbNotes, #tbResInternalNotes { transition: min-height .18s ease; }
#tbNotes:focus, #tbResInternalNotes:focus { min-height: 180px !important; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full, .form-grid .full2 { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-group label { font-size: 12px; color: var(--text2); font-weight: 500; }
.form-group input, .form-group select, .form-group textarea {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px; color: var(--text);
  font-size: 13px; outline: none; font-family: var(--font);
  box-sizing: border-box; }
/* Volle Breite nur fuer Inputs als direkte Kinder von .form-group;
   eingebettete Flex-Container (Input + Button nebeneinander) duerfen ihre
   eigene flex-Logik behalten, sonst kollabieren Inputs gegen 100%-Buttons. */
.form-group > input, .form-group > select, .form-group > textarea {
  width: 100%; max-width: 100%; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent); }
.form-group textarea { resize: vertical; min-height: 70px; }
.form-actions { display: flex; gap: 10px; margin-top: 16px; justify-content: flex-end; }
.modal-booking .form-actions { margin-top: 12px; }
.btn-save { background: var(--accent); border: none; border-radius: 6px;
  padding: 9px 20px; color: #000; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: opacity .2s; }
.btn-save:hover { opacity: .85; }
.btn-cancel { background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; padding: 9px 16px; color: var(--text2);
  font-size: 13px; cursor: pointer; transition: all .2s; }
.btn-cancel:hover { background: var(--border); }
.btn-delete { background: var(--red); border: none; border-radius: 6px;
  padding: 9px 16px; color: #fff; font-size: 13px; cursor: pointer;
  margin-right: auto; transition: opacity .2s; }
.btn-delete:hover { opacity: .85; }
.status-badge { display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   TOOLTIP
═══════════════════════════════════════════════════════════ */
#tooltip { position: fixed; background: var(--tooltip-bg); color: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; font-size: 12px; pointer-events: none;
  z-index: 9999; display: none; max-width: 260px; line-height: 1.6; }
#tooltip .tt-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; color: #fff; }
#tooltip .tt-row { display: flex; gap: 6px; color: rgba(255,255,255,.75); }
#tooltip .tt-row span { color: #fff; }
/* Interne Gast-Notiz im Tooltip: heller Notiz-Block mit dunklem Text fuer Lesbarkeit */
#tooltip .tt-row.tt-intern { background: #fef3c7; color: #451a03; padding: 4px 8px; border-radius: 4px; margin-top: 4px; border: 1px solid #fde68a; }
#tooltip .tt-row.tt-intern span,
#tooltip .tt-row.tt-intern strong { color: #451a03; }

/* ═══════════════════════════════════════════════════════════
   SEARCH
═══════════════════════════════════════════════════════════ */
#searchOverlay { position: fixed; inset: 0; background: rgba(0,0,0,.7);
  display: none; z-index: 500; align-items: flex-start; justify-content: center;
  padding-top: 80px; }
#searchOverlay.open { display: flex; }
.search-box { background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; width: 560px; max-width: 95vw; overflow: hidden; }
.search-input-wrap { display: flex; align-items: center; padding: 14px 16px; gap: 10px;
  border-bottom: 1px solid var(--border); }
.search-input-wrap input { flex: 1; background: none; border: none; color: var(--text);
  font-size: 16px; outline: none; }
.search-results { max-height: 340px; overflow-y: auto; }
.search-item { padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; transition: background .15s; }
.search-item:hover { background: var(--surface2); }
.search-item-icon { font-size: 18px; }
.search-item-main { flex: 1; }
.search-item-title { font-size: 13px; font-weight: 600; }
.search-item-sub { font-size: 11px; color: var(--text2); }
.search-empty { padding: 20px; text-align: center; color: var(--text2); font-size: 13px; }

/* ═══════════════════════════════════════════════════════════
   MISC
═══════════════════════════════════════════════════════════ */
.kbd { background: var(--surface2); border: 1px solid var(--border); border-radius: 3px;
  padding: 1px 5px; font-size: 10px; color: var(--text2); }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay { position: absolute; inset: 0; background: var(--loading-overlay);
  display: flex; align-items: center; justify-content: center; z-index: 50;
  font-size: 13px; color: var(--text2); gap: 10px; }

/* ═══════════════════════════════════════════════════════════
   DRAG-TO-CREATE GHOST
═══════════════════════════════════════════════════════════ */
.drag-create-ghost {
  position: absolute; top: 4px; height: calc(var(--gantt-row-h, 40px) - 8px); border-radius: 5px;
  background: rgba(79,124,255,.25); border: 2px dashed #4f7cff;
  pointer-events: none; z-index: 10;
  display: flex; align-items: center; padding: 0 8px;
  font-size: 11px; color: #4f7cff; font-weight: 700;
  white-space: nowrap; transition: width .05s;
}
.drag-create-ghost-rg {
  position: absolute; top: 5px; height: calc(var(--rg-row-h, 44px) - 10px); border-radius: 5px;
  background: rgba(124,79,255,.25); border: 2px dashed #7c4fff;
  pointer-events: none; z-index: 10;
  display: flex; align-items: center; padding: 0 8px;
  font-size: 11px; color: #a78bfa; font-weight: 700;
  white-space: nowrap;
}
/* Cursor-Hinweis auf leeren Zellen */
.gantt-cells { cursor: crosshair; }
.rg-cells    { cursor: crosshair; }

/* ═══════════════════════════════════════════════════════════
   PREISMODUL
═══════════════════════════════════════════════════════════ */
.price-wrap { flex: 1; overflow: auto; padding: 20px; }
.price-property-block { margin-bottom: 32px; }
.price-property-title {
  font-size: 14px; font-weight: 700; color: var(--accent);
  padding: 8px 0; margin-bottom: 12px;
  border-bottom: 2px solid var(--accent);
  display: flex; align-items: center; gap: 10px;
}
.price-table { width: 100%; border-collapse: collapse; font-size: 12px;
  background: var(--surface); border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.price-table th { background: var(--surface2); color: var(--text2);
  font-weight: 600; padding: 8px 12px; text-align: center;
  border-bottom: 2px solid var(--border); font-size: 11px; }
.price-table th.room-col { text-align: left; width: 180px; }
.price-table td { padding: 7px 12px; border-bottom: 1px solid var(--border);
  text-align: center; color: var(--text); }
.price-room-badge { display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#000; font-weight:800; font-size:12px;
  min-width:30px; height:20px; padding:0 6px; border-radius:4px; line-height:1; }
.price-room-type { display:block; font-size:11px; color:var(--text2); margin-top:3px;
  font-weight:500; line-height:1.3; }
.price-table tr:last-child td { border-bottom: none; }
.price-table tr:hover td { background: var(--surface2); }
.price-cell { cursor: pointer; border-radius: 4px; transition: all .15s;
  padding: 4px 8px !important; position:relative; }
.price-cell:hover { background: var(--accent) !important; color: #fff !important; }
.price-add-btn { display:none; position:absolute; bottom:2px; right:2px; width:18px; height:18px;
  border-radius:50%; background:var(--accent); color:#000; border:none; font-size:13px;
  font-weight:700; line-height:18px; text-align:center; cursor:pointer; padding:0; z-index:2; }
.price-add-btn:hover { opacity:.85; }
.price-cell:hover .price-add-btn { display:block; background:#fff; color:var(--accent); }
.perm-readonly .price-add-btn { display:none !important; }
.price-cell.has-weekend { position: relative; }
.price-val { display: block; font-weight: 700; font-size: 12px; }
.price-we  { display: block; font-size: 10px; color: var(--orange); margin-top: 1px; }
.price-na  { color: var(--text3); font-size: 11px; }
/* Read-only Modus (RBAC) */
.perm-readonly .price-cell { cursor: default; }
.perm-readonly .price-cell:hover { background: transparent !important; color: inherit !important; }
/* ═══ HOUSEKEEPING ═══ */
/* Statistik Dashboard */
.stats-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px}
.stats-kpi{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 20px;
  display:flex;flex-direction:column;gap:4px}
.stats-kpi .kpi-label{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}
.stats-kpi .kpi-value{font-size:24px;font-weight:700;color:var(--text);font-family:'DM Serif Display',serif}
.stats-kpi .kpi-sub{font-size:11px;color:var(--text2)}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stats-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px}
.stats-card h3{font-size:13px;color:var(--text2);margin:0 0 12px;font-weight:600}
.stats-card canvas{max-height:280px}
.stats-top-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;
  border-bottom:1px solid var(--border);font-size:13px}
.stats-top-row:last-child{border-bottom:none}
.stats-top-row .rank{color:var(--text2);width:24px;font-weight:600}
.stats-top-row .name{flex:1;color:var(--text)}
.stats-top-row .amount{font-weight:600;color:var(--accent)}
@media(max-width:900px){.stats-grid{grid-template-columns:1fr}}

.hk-wrap { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.hk-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.hk-header-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hk-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hk-stats { display: flex; gap: 12px; font-size: 12px; color: var(--text2); }
.hk-stats strong { color: var(--text); }
.hk-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.hk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.hk-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s; }
.hk-card:hover { border-color: var(--accent); }
.hk-card.prio-urgent  { border-left: 4px solid var(--red); }
.hk-card.prio-clean   { border-left: 4px solid var(--yellow); }
.hk-card.prio-prepare { border-left: 4px solid var(--green); }
.hk-card.prio-none    { border-left: 4px solid var(--border); }
.hk-card.status-inspected { opacity: .55; }
.hk-card-top { display: flex; justify-content: space-between; align-items: center; }
.hk-card-room { font-size: 18px; font-weight: 700; }
.hk-card-type { font-size: 11px; color: var(--text2); margin-left: 6px; }
.hk-card-prio { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.hk-prio-urgent  { background: var(--red); color: #fff; }
.hk-prio-clean   { background: var(--yellow); color: #000; }
.hk-prio-prepare { background: var(--green); color: #fff; }
.hk-prio-none    { background: var(--surface2); color: var(--text2); }
.hk-card-guest { font-size: 12px; color: var(--text2); }
.hk-card-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hk-status-btn { font-size: 11px; padding: 3px 10px; border-radius: 12px; font-weight: 600; cursor: pointer; border: 1px solid; background: transparent; }
.hk-status-btn.active { font-weight: 800; color: #fff !important; }
.hk-card.status-inspected { opacity: .65; border-color: var(--blue); }
.hk-status-dirty       { color: var(--red);    border-color: var(--red); }
.hk-status-dirty.active       { background: var(--red); }
.hk-status-in_progress { color: var(--yellow); border-color: var(--yellow); }
.hk-status-in_progress.active { background: var(--yellow); color: #000 !important; }
.hk-status-clean       { color: var(--green);  border-color: var(--green); }
.hk-status-clean.active       { background: var(--green); }
.hk-status-inspected   { color: var(--blue);   border-color: var(--blue); }
.hk-status-inspected.active   { background: var(--blue); }
.hk-timer { font-family: monospace; font-size: 13px; letter-spacing: .5px; }
.hk-progress { height: 4px; background: var(--surface2); border-radius: 2px; overflow: hidden; flex: 1; }
.hk-progress-bar { height: 100%; background: var(--green); transition: width .3s; }
.hk-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.hk-card-actions button { font-size: 11px; padding: 4px 10px; }
.hk-section { margin-top: 12px; }
.hk-section-title { font-size: 14px; font-weight: 600; padding: 6px 0; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.hk-checklist label { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--surface2); cursor: pointer; font-size: 13px; }
.hk-checklist input[type=checkbox] { width: 18px; height: 18px; }
.hk-minibar-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--surface2); font-size: 13px; }
.hk-minibar-row input { width: 50px; text-align: center; }
@media (max-width: 640px) { .hk-grid { grid-template-columns: 1fr; } .hk-header { flex-direction: column; align-items: stretch; } }
/* Edit Modal */
.price-edit-modal { width: 460px; max-height:85vh; overflow-y:auto; }
.price-edit-modal h2 { font-size: 16px; }
.price-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.price-hint { font-size: 11px; color: var(--text2); margin-top: 8px; line-height: 1.5; }
.price-season-section { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; position:relative; }
.price-season-title { font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 10px; display:flex; align-items:center; justify-content:space-between; }
.price-season-section .price-edit-grid { margin-top: 0; }
.pe-row-remove { background:none; border:none; color:var(--red); cursor:pointer; font-size:16px; padding:2px 6px; border-radius:4px; opacity:.7; }
.pe-row-remove:hover { opacity:1; background:rgba(224,107,107,.1); }
.pe-add-row { display:flex; align-items:center; gap:6px; background:none; border:1px dashed var(--border);
  border-radius:var(--radius); padding:10px 16px; color:var(--accent); cursor:pointer; font-size:12px;
  font-weight:600; width:100%; margin-bottom:12px; transition:all .2s; }
.pe-add-row:hover { border-color:var(--accent); background:rgba(201,169,110,.06); }
.pe-add-row .pe-add-icon { width:22px; height:22px; border-radius:50%; background:var(--accent); color:#000;
  display:inline-flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; }
.price-season-badge { font-size: 9px; color: var(--accent); display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-cell .min-stay-badge { font-size: 9px; color: var(--text2); display: block; }
/* ─── Massenverwaltung ─── */
.price-mass-toolbar { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 16px; margin-bottom:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.price-mass-toolbar label { font-size:11px; color:var(--text2); font-weight:600; }
.price-mass-toolbar select, .price-mass-toolbar input[type="number"] { background:var(--surface2);
  border:1px solid var(--border); border-radius:6px; padding:5px 10px; color:var(--text);
  font-size:12px; outline:none; }
.price-mass-toolbar select:focus, .price-mass-toolbar input:focus { border-color:var(--accent); }
.price-mass-group { display:flex; align-items:center; gap:6px; }
.price-mass-apply { background:var(--accent); color:#000; border:none; border-radius:6px;
  padding:6px 16px; font-size:12px; font-weight:600; cursor:pointer; transition:opacity .2s; }
.price-mass-apply:hover { opacity:.85; }

/* ═══════════════════════════════════════════════════════════
   RECHNUNGSMODUL
═══════════════════════════════════════════════════════════ */
.inv-wrap { flex: 1; overflow: auto; padding: 20px; }
.inv-toolbar { display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; }
/* Rechnungsliste */
.inv-list-item { background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 18px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  transition: all .15s; }
.inv-list-item:hover { border-color: var(--accent); background: var(--surface2); }
.inv-num { font-weight: 700; font-size: 13px; color: var(--accent); min-width: 120px; }
.inv-guest { flex: 1; font-size: 13px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inv-guest-main { font-size: 13px; }
.inv-guest-recip { font-size: 11px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-stay { font-size: 11px; color: var(--text2); min-width: 180px; white-space: nowrap; }
.inv-property { font-size: 11px; color: var(--text2); min-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-cashier { font-size: 11px; color: var(--text2); min-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-date { font-size: 11px; color: var(--text2); min-width: 90px; }
.inv-total { font-weight: 700; font-size: 14px; min-width: 80px; text-align: right; }
.inv-status-badge { padding: 2px 9px; border-radius: 10px; font-size: 11px;
  font-weight: 600; min-width: 80px; text-align: center; }
.inv-status-draft     { background: var(--surface2); color: var(--text2); border: 1px solid var(--border); }
.inv-status-sent      { background: #dbeafe; color: #1e3a8a; }
.inv-status-paid      { background: #dcfce7; color: #14532d; }
.inv-status-cancelled { background: #fee2e2; color: #7f1d1d; }
:root[data-theme="light"] .inv-status-sent { background: #dbeafe; }

/* Rechnungs-Editor Modal */
.modal-invoice { width: 780px; max-width: 97vw; padding: 22px 26px 18px; }
.modal-invoice h2 { margin-bottom: 12px; font-size: 15px; }
.inv-header-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.inv-header-grid .span2 { grid-column: span 2; }
.inv-header-grid .form-group { gap: 3px; }
.inv-header-grid label { font-size: 11px; }
.inv-header-grid input, .inv-header-grid select, .inv-header-grid textarea {
  padding: 6px 8px !important; font-size: 12px !important; }
/* Positionen-Tabelle */
.inv-items-wrap { margin: 14px 0; }
.inv-items-label { font-size: 11px; font-weight: 600; color: var(--text2);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
.inv-items-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.inv-items-table th { background: var(--surface2); color: var(--text2);
  padding: 6px 8px; text-align: left; font-size: 11px; font-weight: 600;
  border-bottom: 2px solid var(--border); }
.inv-items-table th.num { text-align: right; }
.inv-items-table td { padding: 5px 6px; border-bottom: 1px solid var(--border);
  vertical-align: middle; }
.inv-items-table tr:last-child td { border-bottom: none; }
.inv-items-table input { background: var(--surface2); border: 1px solid transparent;
  border-radius: 4px; padding: 4px 6px; color: var(--text); font-size: 12px;
  width: 100%; outline: none; }
.inv-items-table input:focus { border-color: var(--accent); background: var(--surface); }
.inv-items-table .td-pos { width: 30px; text-align: center; color: var(--text3); font-size: 11px; }
.inv-items-table .td-desc { }
.inv-items-table .td-qty  { width: 70px; }
.inv-items-table .td-unit { width: 70px; }
.inv-items-table .td-price{ width: 90px; }
.inv-items-table .td-total{ width: 90px; font-weight: 600; text-align: right;
  color: var(--text); padding-right: 8px; }
.inv-items-table .td-vat  { width: 52px; text-align: center; }
.inv-items-table .td-vat select { width: 48px; padding: 2px 2px; font-size: 11px;
  border: 1px solid var(--border); border-radius: 4px; background: var(--surface2);
  color: var(--text); cursor: pointer; }
.inv-items-table .td-del  { width: 28px; text-align: center; }
/* MwSt-Aufschlüsselung im Modal */
.inv-vat-box { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.inv-vat-row { display: flex; justify-content: flex-end; gap: 20px;
  font-size: 12px; color: var(--text2); padding: 2px 0; }
.inv-vat-row.subtotal { color: var(--text); }
.inv-vat-row.grand-total { font-size: 14px; font-weight: 700; color: var(--accent);
  border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; }
/* Rabatt-Zeilen in Rechnungstabelle */
.discount-row td { border-top: 1px dashed var(--border); font-style: italic; }
.discount-row .td-total { color: var(--green); }
.discount-row .td-desc input { color: var(--green); font-style: italic; }

/* ── Split-Modus (Side-by-Side) ───────────────────── */
.modal-invoice { transition: width .3s ease; }
.modal-invoice.split-active { width: 1400px; }
.inv-split-container { display: flex; gap: 0; }
.inv-panel-left { flex: 1; min-width: 0; }
.inv-panel-right { flex: 1; min-width: 0; padding-left: 20px; border-left: 2px solid var(--accent);
  display: none; overflow-y: auto; }
.modal-invoice.split-active .inv-panel-left { padding-right: 20px; }
.modal-invoice.split-active .inv-panel-right { display: block; }
/* Split-Header */
.inv-split-header { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--accent); }
.inv-split-header h3 { font-size: 15px; font-weight: 700; color: var(--accent); margin: 0; }
/* Empfänger-Bereich */
.inv-panel-right .inv-split-recipient { margin-bottom: 14px; }
.inv-panel-right .inv-split-recipient .split-row { display: flex; gap: 10px; margin-bottom: 8px; }
.inv-panel-right .inv-split-recipient .split-row > div { flex: 1; }
.inv-panel-right .inv-split-recipient label { font-size: 11px; font-weight: 600; color: var(--text2);
  display: block; margin-bottom: 3px; text-transform: uppercase; letter-spacing: .5px; }
.inv-panel-right .inv-split-recipient input { width: 100%; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 12px; background: var(--bg); color: var(--text); box-sizing: border-box; }
/* Items Drop-Zone */
.inv-split-items-wrap { margin: 10px 0; min-height: 80px; border-radius: 8px;
  transition: background .2s, border-color .2s; }
.inv-split-items-wrap.drag-over { background: color-mix(in srgb, var(--accent) 8%, transparent);
  outline: 2px dashed var(--accent); outline-offset: -2px; }
.inv-split-drop-hint { text-align: center; padding: 28px 12px; color: var(--text3);
  font-size: 12px; font-style: italic; border: 2px dashed var(--border); border-radius: 8px;
  background: var(--surface2); }
/* Summen */
.inv-split-summary { border-top: 2px solid var(--border); padding-top: 8px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; }
/* Zahlungsart */
.inv-panel-right .inv-split-pay { margin-top: 14px; }
.inv-panel-right .inv-split-pay-label { font-size: 11px; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: 8px; }
.inv-panel-right .split-pay-row { display: flex; gap: 8px; flex-direction: row; }
.inv-panel-right .split-pay-row .inv-pay-btn { flex: 1; min-width: 0; padding: 8px 6px; font-size: 11px; }
/* Aktions-Buttons */
.inv-panel-right .inv-split-actions { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border); flex-wrap: wrap; }
/* Vorgang schliessen */
.inv-close-row { margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--border); text-align: center; }
.inv-close-row .btn-cancel { font-size: 13px; padding: 8px 24px; }
/* Move-Buttons */
.inv-items-table .td-move { width: 32px; text-align: center; }
.inv-move-btn { background: none; border: 1px solid var(--border); color: var(--accent);
  cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px;
  transition: all .15s; font-weight: 700; line-height: 1; }
.inv-move-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Drag-Styles */
.inv-items-table tr[draggable="true"] { cursor: grab; }
.inv-items-table tr[draggable="true"]:active { cursor: grabbing; }
.inv-items-table tr.dragging { opacity: .4; }
.inv-items-wrap.drag-over { background: color-mix(in srgb, var(--accent) 6%, transparent);
  outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: 8px; }
/* Responsive */
@media (max-width: 900px) {
  .modal-invoice.split-active { width: 97vw; }
  .inv-split-container { flex-direction: column; }
  .modal-invoice.split-active .inv-panel-left { padding-right: 0; padding-bottom: 16px; }
  .inv-panel-right { padding-left: 0; padding-top: 16px; border-left: none; border-top: 2px solid var(--accent); }
}

/* ── Schichtabrechnung Modal ────────────────────────── */
.shift-close-modal { max-width: 720px; width: 95vw; max-height: 90vh; display: flex; flex-direction: column; }
.sc-toolbar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.sc-field { display: flex; flex-direction: column; gap: 3px; }
.sc-field label { font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; }
.sc-field input, .sc-field select { padding: 6px 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: 13px; }
.sc-report-area { flex: 1; overflow-y: auto; min-height: 200px; max-height: 55vh; }
.sc-placeholder { text-align: center; color: var(--text3); font-size: 13px; padding: 40px 0; }
.sc-actions { display: flex; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
/* Report-Tabelle */
.sc-report { font-size: 12px; color: var(--text); }
.sc-report h3 { font-size: 14px; font-weight: 700; color: var(--accent); margin: 18px 0 8px;
  padding-bottom: 4px; border-bottom: 2px solid var(--accent); }
.sc-report h3:first-child { margin-top: 0; }
.sc-report table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.sc-report th { text-align: left; font-size: 10px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.sc-report td { padding: 4px 6px; border-bottom: 1px solid var(--border); }
.sc-report td.r, .sc-report th.r { text-align: right; }
.sc-report .sc-subtotal { font-weight: 700; background: var(--surface2); }
.sc-report .sc-pay-split { font-size: 11px; color: var(--text2); padding: 4px 6px; margin-bottom: 14px; }
.sc-grand { background: var(--surface2); border-radius: 8px; padding: 14px; margin-top: 16px; }
.sc-grand h3 { margin: 0 0 10px; border: none; padding: 0; }
.sc-grand-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; }
.sc-grand-row.total { font-size: 16px; font-weight: 700; color: var(--accent);
  border-top: 2px solid var(--border); padding-top: 8px; margin-top: 6px; }
.sc-grand-row .label { color: var(--text2); }
.sc-vat-block { margin: 8px 0 14px; padding: 8px 10px; background: var(--surface2); border-radius: 6px; font-size: 12px; }
.sc-vat-label { font-weight: 700; font-size: 11px; text-transform: uppercase; color: var(--text3);
  letter-spacing: 0.5px; margin-bottom: 4px; }
.sc-vat-row { display: grid; grid-template-columns: auto 80px auto 80px auto 80px; gap: 4px 8px;
  padding: 2px 0; align-items: center; }
.sc-vat-row span:nth-child(odd) { color: var(--text2); font-size: 11px; }
.sc-vat-row span:nth-child(even) { text-align: right; font-weight: 600; }
.sc-vat-row.sc-vat-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; font-weight: 700; }
.sc-vat-row.sc-vat-total span:nth-child(odd) { color: var(--text1); }
.sc-signature { margin-top: 30px; display: flex; gap: 40px; }
.sc-signature div { flex: 1; border-top: 1px solid var(--text3); padding-top: 6px;
  font-size: 11px; color: var(--text3); text-align: center; }
.inv-vat-row span:last-child { min-width: 90px; text-align: right; }
.inv-del-btn { background: none; border: none; color: var(--text3); cursor: pointer;
  font-size: 14px; padding: 2px 4px; border-radius: 3px; transition: all .15s; }
.inv-del-btn:hover { color: var(--red); background: var(--surface2); }
.inv-add-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* Summenzeile */
.inv-summary { border-top: 2px solid var(--border); padding-top: 10px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-size: 13px; }
.inv-summary .inv-sum-row { display: flex; gap: 24px; justify-content: flex-end; }
.inv-summary .inv-sum-row.total { font-weight: 700; font-size: 15px; color: var(--accent);
  border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; }

/* Zahlungsart */
.inv-payment-row { display: flex; gap: 8px; }

/* ── FOLLOW-UP BADGE ────────────────────────────────────── */
.followup-badge { background: #ef4444; color: #fff; border-radius: 10px;
  padding: 1px 6px; font-size: 10px; font-weight: 700; margin-left: 4px; }

/* ── FOLLOW-UP POPUP (persistent, always on top) ────────── */
.followup-popup { position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  width: 320px; background: var(--surface); border: 1px solid var(--accent);
  border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.35);
  animation: fup-slide-in .3s ease; }
@keyframes fup-slide-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.fup-header { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 8px; border-bottom: 1px solid var(--border); }
.fup-title { font-weight: 700; font-size: 13px; color: var(--accent); }
.fup-close { background: none; border: none; color: var(--text2); cursor: pointer;
  font-size: 14px; padding: 2px 4px; border-radius: 4px; }
.fup-close:hover { background: var(--surface2); }
.fup-content { padding: 10px 14px; font-size: 13px; }
.fup-guest { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.fup-detail { font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.fup-note { font-size: 12px; background: var(--surface2); border-radius: 6px;
  padding: 6px 8px; color: var(--text); font-style: italic; }
.fup-counter { font-size: 11px; color: var(--text2); margin-top: 6px; }
.fup-snooze-row { display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.fup-snooze-btn { background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer;
  color: var(--text); transition: all .15s; }
.fup-snooze-btn:hover { border-color: var(--accent); color: var(--accent); }
.fup-nav-row { display: flex; justify-content: space-between; align-items: center;
  padding: 4px 12px; font-size: 11px; color: var(--text2); }
.fup-nav-btn { background: none; border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 8px; cursor: pointer; color: var(--text2); font-size: 11px; }
.fup-nav-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── LISTEN MENÜ ────────────────────────────────────────── */
.lists-menu-modal { max-width: 780px; width: 95vw; }
.lists-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 640px) { .lists-menu-grid { grid-template-columns: 1fr; } }
.lm-section { background: var(--surface2); border-radius: 10px; padding: 12px; }
.lm-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text2); margin-bottom: 8px; }
.lm-item { width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 7px; cursor: pointer; margin-bottom: 6px; transition: all .15s;
  text-align: left; color: var(--text); }
.lm-item:last-child { margin-bottom: 0; }
.lm-item:hover { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent); }
.lm-item.lm-highlight { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lm-item.lm-disabled { opacity: .5; cursor: not-allowed; }
.lm-item.lm-disabled:hover { border-color: var(--border); background: var(--surface); }
.lm-icon { font-size: 15px; flex-shrink: 0; }
.lm-label { flex: 1; font-size: 13px; }
.lm-kbd { font-size: 10px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 3px; padding: 1px 5px; color: var(--text2); }

/* Listen-Inhalt Tabelle */
.lists-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lists-table th { background: var(--surface2); padding: 8px 10px; text-align: left;
  font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text2);
  border-bottom: 2px solid var(--border); position: sticky; top: 0; }
.lists-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); }
.lists-table tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.lists-table tr:last-child td { border-bottom: none; }
.lt-status { display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; }
.lt-link { color: var(--accent); cursor: pointer; font-weight: 600; }
.lt-link:hover { text-decoration: underline; }

/* ── GRUPPEN-RECHNUNGS-DIALOG ───────────────────────────── */
.gi-prop-row { background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; }
.gi-prop-info { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.gi-prop-info strong { font-size: 14px; }
.gi-prop-sub { font-size: 11px; color: var(--text2); }
.gi-prop-rooms { display: flex; flex-wrap: wrap; gap: 5px; }
.gi-room-chip { background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 7px; font-size: 11px; color: var(--text2); }
.inv-pay-btn { flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 10px 8px; background: var(--surface2);
  border: 2px solid var(--border); border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text); transition: all .15s; }
.inv-pay-btn:hover { border-color: var(--accent); }
.inv-pay-btn.active { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); }
.inv-pay-sub { font-size: 10px; font-weight: 400; color: var(--text2);
  letter-spacing: .02em; }
.inv-pay-btn.active .inv-pay-sub { color: var(--accent); opacity: .75; }

/* ── SETTINGS SUB-NAVIGATION ────────────────────────────── */
.settings-subnav { display: flex; gap: 4px; margin-bottom: 20px;
  border-bottom: 2px solid var(--border); padding-bottom: 0; flex-wrap: wrap; }
.snav-btn { background: none; border: none; border-bottom: 3px solid transparent;
  margin-bottom: -2px; padding: 8px 16px; cursor: pointer; font-size: 13px;
  color: var(--text2); transition: all .15s; border-radius: 6px 6px 0 0; }
.snav-btn:hover  { color: var(--text); background: var(--surface2); }
.snav-btn.active { color: var(--accent); border-bottom-color: var(--accent);
  font-weight: 600; }
.settings-page { display: none; }
.settings-page.active { display: block; }

/* ── BENUTZER-LISTE ─────────────────────────────────────── */
.user-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.user-table th { background: var(--surface2); padding: 8px 12px; text-align: left;
  font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text2);
  border-bottom: 2px solid var(--border); }
.user-table td { padding: 10px 12px; border-bottom: 1px solid var(--border);
  vertical-align: middle; }
.user-table tr:hover td { background: color-mix(in srgb,var(--accent) 4%,transparent); }
.user-role-badge { display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; }
.role-admin    { background:#fef3c7;color:#92400e; }
.role-manager  { background:#dbeafe;color:#1e40af; }
.role-rezeption{ background:#dcfce7;color:#166534; }
.role-service  { background:#f3e8ff;color:#6b21a8; }
.user-inactive { opacity: .45; }
.user-edit-btn { font-size: 12px; padding: 3px 10px; }

/* ── GÄSTE-TAB ──────────────────────────────────────────── */
.guests-wrap { margin: 0 auto; padding: 16px 20px; height: 100%; display: flex; flex-direction: column; }
.guests-header { margin-bottom: 12px; flex-shrink: 0; }
.guests-search-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px; }
.guests-search-box { flex: 1; min-width: 220px; display: flex; align-items: center;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 0 12px; gap: 8px; }
.guests-search-box input { flex: 1; background: none; border: none; outline: none;
  padding: 10px 0; color: var(--text); font-size: 14px; }
.guests-search-icon { font-size: 14px; color: var(--text2); }
.guests-filter-row { display: flex; gap: 6px; }
.gc-filter-btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--surface2); color: var(--text2); cursor: pointer; font-size: 12px;
  transition: all .15s; }
.gc-filter-btn.active, .gc-filter-btn:hover { background: var(--accent);
  color: #fff; border-color: var(--accent); }
.guests-stats-bar { display: flex; gap: 20px; flex-wrap: wrap; }
.gs-stat { font-size: 12px; color: var(--text2); }
.gs-stat strong { color: var(--accent); font-size: 16px; margin-right: 3px; }

/* Gästeliste */
.guests-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 12px; }
.guest-card { background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: all .15s;
  display: flex; gap: 12px; align-items: flex-start; }
.guest-card:hover { border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.guest-card-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  font-weight: 700; background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent); }
.guest-card-info { flex: 1; min-width: 0; }
.gc-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.gc-vip { font-size: 11px; }
.gc-sub { font-size: 11px; color: var(--text2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-meta-row { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.gc-stat-pill { font-size: 11px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; color: var(--text2); }
.gc-stat-pill.highlight { color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ── Gäste Hybrid-Layout ─────────────────────────────────── */
.guests-content { display: flex; gap: 0; flex: 1; min-height: 0; overflow: hidden; }
.guest-table-wrap { flex: 1; min-width: 0; overflow: auto; border: 1px solid var(--border);
  border-radius: var(--radius); }
.guest-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.guest-table thead { position: sticky; top: 0; z-index: 2; }
.guest-table th { background: var(--surface); padding: 8px 10px; text-align: left;
  font-weight: 600; font-size: 11px; color: var(--text2); border-bottom: 2px solid var(--border);
  cursor: pointer; user-select: none; white-space: nowrap; }
.guest-table th:hover { color: var(--accent); }
.guest-table th .sort-arrow { font-size: 10px; margin-left: 3px; opacity: .4; }
.guest-table th.sorted .sort-arrow { opacity: 1; color: var(--accent); }
.guest-table td { padding: 7px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.guest-table tbody tr { cursor: pointer; transition: background .1s; }
.guest-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.guest-table tbody tr.active { background: color-mix(in srgb, var(--accent) 14%, transparent);
  outline: 2px solid var(--accent); outline-offset: -2px; }
.guest-type-badge { display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.guest-type-badge.private { background: var(--surface); color: var(--text2); border: 1px solid var(--border); }
.guest-type-badge.company { background: color-mix(in srgb, #3b82f6 18%, transparent);
  color: #60a5fa; border: 1px solid #3b82f680; }
.guest-type-badge.tour_operator { background: color-mix(in srgb, #22c55e 18%, transparent);
  color: #4ade80; border: 1px solid #22c55e80; }
.guest-type-badge.master { background: color-mix(in srgb, #eab308 18%, transparent);
  color: #facc15; border: 1px solid #eab30880; }

/* Detail-Panel */
.guest-detail-panel { width: 440px; flex-shrink: 0; border-left: 2px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden; background: var(--surface2); }
.guest-detail-panel.hidden { display: none; }
.gdp-header { padding: 16px 20px 12px; border-bottom: 1px solid var(--border);
  display: flex; gap: 12px; align-items: flex-start; flex-shrink: 0; }
.gdp-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  font-weight: 700; background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent); }
.gdp-info { flex: 1; min-width: 0; }
.gdp-name { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.gdp-contact { font-size: 11px; color: var(--text2); margin-top: 2px; }
.gdp-close { background: none; border: none; font-size: 18px; color: var(--text2);
  cursor: pointer; padding: 4px; }
.gdp-close:hover { color: var(--text); }
.gdp-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.gdp-tab { padding: 8px 16px; font-size: 12px; font-weight: 600; color: var(--text2);
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; transition: all .15s; }
.gdp-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.gdp-tab:hover { color: var(--text); }
.gdp-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.gdp-toolbar { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border);
  flex-shrink: 0; flex-wrap: wrap; }
.gdp-toolbar .btn-primary { flex: 1; }
.gdp-toolbar .btn-sm { font-size: 11px; }

/* Profil-Formular im Detail-Panel */
.gdp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gdp-form label { font-size: 11px; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: .3px; }
.gdp-form input:not([type="checkbox"]), .gdp-form select, .gdp-form textarea { width: 100%; padding: 7px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-size: 13px; }
.gdp-form input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.gdp-form textarea { resize: vertical; min-height: 50px; }
.gdp-form .span2 { grid-column: span 2; }
.gdp-form .company-row { grid-column: span 2; display: none; }
.gdp-form .company-row.show { display: block; }
.gdp-section-title { font-size: 11px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .5px; margin: 10px 0 4px; grid-column: span 2;
  border-top: 1px solid var(--border); padding-top: 10px; }

/* Aufenthalte/Rechnungen im Detail */
.gdp-stay-list, .gdp-inv-list { display: flex; flex-direction: column; gap: 8px; }
.gdp-stay-item, .gdp-inv-item { background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px; font-size: 12px; }
.gdp-stay-item strong { font-size: 13px; }
.gdp-stay-meta { color: var(--text2); margin-top: 4px; }
.gdp-empty { text-align: center; color: var(--text2); font-size: 13px; padding: 30px 10px; }

/* ── Mail/Dokumente Tab ─────────────────────────────────── */
.gdp-doc-list { display: flex; flex-direction: column; gap: 8px; }
.gdp-doc-item {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px; font-size: 12px;
}
.gdp-doc-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; margin-top: 2px; }
.gdp-doc-body { flex: 1; min-width: 0; }
.gdp-doc-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.gdp-doc-label { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gdp-doc-recipient { font-size: 11px; color: var(--text2); margin-top: 2px; }
.gdp-doc-user { font-size: 11px; color: var(--text3); margin-top: 4px; }
.gdp-doc-time { margin-left: auto; font-size: 10px; color: var(--text3); white-space: nowrap; flex-shrink: 0; }
.gdp-doc-badge {
  display: inline-block; padding: 2px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .3px; white-space: nowrap; flex-shrink: 0;
}
.gdp-doc-badge--confirmation { background: color-mix(in srgb, #22c55e 15%, transparent); color: #22c55e; border: 1px solid color-mix(in srgb, #22c55e 35%, transparent); }
.gdp-doc-badge--offer { background: color-mix(in srgb, #eab308 15%, transparent); color: #eab308; border: 1px solid color-mix(in srgb, #eab308 35%, transparent); }
.gdp-doc-badge--invoice { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.gdp-doc-badge--meldeschein { background: color-mix(in srgb, #a855f7 15%, transparent); color: #a855f7; border: 1px solid color-mix(in srgb, #a855f7 35%, transparent); }
.gdp-doc-badge--arrivals, .gdp-doc-badge--departures, .gdp-doc-badge--other {
  background: var(--surface2); color: var(--text2); border: 1px solid var(--border);
}

/* ── Protokoll-Ansicht (Einstellungen) ──────────────────── */
.log-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.log-filters .form-group { margin: 0; }
.log-filters label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text2); margin-bottom: 3px; display: block; }
.log-filters select, .log-filters input[type="date"] { font-size: 12px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); }
.log-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.log-table th { text-align: left; padding: 8px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text2); border-bottom: 2px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 1; }
.log-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.log-table tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.log-action-icon { margin-right: 4px; }
.log-load-more { text-align: center; padding: 12px; }

/* ── MailComposer Dialog ──────────────────────────────────── */
.mc-modal { max-width: 700px; width: 95vw; max-height: 90vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.mc-header { display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.mc-header h2 { margin: 0; font-size: 16px; }
.mc-form { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.mc-field label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
  color: var(--text2); display: block; margin-bottom: 3px; }
.mc-field input, .mc-field textarea { width: 100%; padding: 8px 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 13px;
  font-family: inherit; box-sizing: border-box; }
.mc-field textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.mc-preview-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
  color: var(--text2); margin-bottom: -4px; }
.mc-preview { max-height: 300px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: var(--radius); background: #fff; padding: 16px; font-size: 12px; color: #1e293b; }
.mc-attachment { display: flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--radius); padding: 8px 12px; font-size: 12px; color: var(--accent); font-weight: 600; }
.mc-footer { display: flex; align-items: center; gap: 8px; padding: 14px 20px;
  border-top: 1px solid var(--border); flex-shrink: 0; }
.mc-status { flex: 1; font-size: 13px; min-height: 20px; }
.mc-sending { display: inline-block; animation: mc-spin 1s linear infinite; }
@keyframes mc-spin { to { transform: rotate(360deg); } }

/* ── EMAIL TEMPLATE ADMIN ───────────────────────────────── */
.eta-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.eta-controls select { padding: 7px 10px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: 13px; min-width: 160px; }
.eta-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .eta-editor { grid-template-columns: 1fr; } }
.eta-edit-col, .eta-preview-col { display: flex; flex-direction: column; }
.eta-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
  color: var(--text2); margin-bottom: 4px; }
.eta-input { width: 100%; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: 13px; }
.eta-textarea { width: 100%; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: 12px; font-family: monospace; resize: vertical; line-height: 1.5; }
.eta-vars { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 10px; }
.eta-var-label { font-size: 11px; color: var(--text2); margin-right: 4px; }
.eta-chip { padding: 3px 8px; font-size: 11px; background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 12px; cursor: pointer; font-family: monospace; }
.eta-chip:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.eta-actions { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.eta-preview { min-height: 300px; max-height: 500px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 0; }
.eta-preview iframe { width: 100%; height: 400px; border: none; border-radius: 8px; }
/* Promo-Blöcke */
.eta-promo-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; }
.eta-promo-card .eta-promo-name { flex: 1; font-weight: 600; font-size: 13px; }
.eta-promo-card .eta-promo-meta { font-size: 11px; color: var(--text2); }
.eta-promo-badge { padding: 2px 8px; font-size: 10px; background: var(--accent); color: #fff;
  border-radius: 10px; white-space: nowrap; }
.eta-promo-edit { border: 1px solid var(--border); border-radius: 8px; padding: 16px;
  background: var(--surface); margin-bottom: 12px; }
.eta-promo-edit label { display: block; font-size: 11px; font-weight: 600; color: var(--text2);
  margin-bottom: 4px; margin-top: 10px; text-transform: uppercase; }
.eta-promo-edit label:first-child { margin-top: 0; }
.eta-promo-edit input, .eta-promo-edit select, .eta-promo-edit textarea {
  width: 100%; padding: 7px 10px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: 12px; }
.eta-promo-edit textarea { min-height: 80px; font-family: monospace; resize: vertical; }

/* ── GÄSTEKARTE MODAL ───────────────────────────────────── */
.guest-card-modal { max-width: 700px; width: 95vw; max-height: 90vh;
  display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.gcm-header { display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.gcm-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  font-weight: 700; background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent); }
.gcm-title-block { flex: 1; min-width: 0; }
.gcm-contact-line { font-size: 12px; color: var(--text2); margin-top: 3px; }
.gcm-vip-badge { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;
  border-radius: 12px; padding: 2px 10px; font-size: 11px; font-weight: 700;
  white-space: nowrap; }
.gcm-stats-row { display: flex; gap: 0; border-bottom: 1px solid var(--border);
  flex-shrink: 0; }
.gcm-stat { flex: 1; text-align: center; padding: 12px 8px; border-right: 1px solid var(--border); }
.gcm-stat:last-child { border-right: none; }
.gcm-stat-value { font-family: 'DM Serif Display', serif; font-size: 20px; font-weight: 700; color: var(--accent); }
.gcm-stat-label { font-size: 11px; color: var(--text2); margin-top: 2px; }
.gcm-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.gcm-tab { flex: 1; padding: 10px; background: none; border: none;
  border-bottom: 3px solid transparent; cursor: pointer; font-size: 13px;
  color: var(--text2); transition: all .15s; }
.gcm-tab.active { color: var(--accent); border-bottom-color: var(--accent);
  font-weight: 600; }
.gcm-body { flex: 1; overflow-y: auto; }
.gcm-tab-panel { display: none; padding: 16px 24px; }
.gcm-tab-panel.active { display: block; }

/* Aufenthalte Timeline */
.stay-item { display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--border); }
.stay-item:last-child { border-bottom: none; }
.stay-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  flex-shrink: 0; margin-top: 5px; }
.stay-info { flex: 1; }
.stay-title { font-weight: 600; font-size: 13px; }
.stay-meta { font-size: 11px; color: var(--text2); margin-top: 2px; }
.stay-prop { font-size: 11px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 7px; }
.stay-status { font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: var(--surface2); }

/* Rechnungen in Karte */
.gcm-invoice-row { display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.gcm-invoice-row:hover { color: var(--accent); }
.gcm-invoice-row:last-child { border-bottom: none; }
.gcm-inv-num { font-weight: 600; font-size: 13px; min-width: 90px; }
.gcm-inv-date { font-size: 12px; color: var(--text2); }
.gcm-inv-total { font-weight: 700; color: var(--accent); margin-left: auto; }
.gcm-inv-status { font-size: 11px; }

/* Profil-Grid */
.gcm-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── PRINT DIALOG ──────────────────────────────────────── */
.pd-modal { width: 540px; max-width: 96vw; }
.pd-layout { display: flex; gap: 16px; }
.pd-types { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pd-right { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pd-types-label { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text2); margin-bottom: 4px; }
.pd-type-btn { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--surface2); border: 2px solid var(--border); border-radius: 8px;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text);
  transition: all .15s; text-align: left; }
.pd-type-btn:hover { border-color: var(--accent); background: var(--bg); }
.pd-type-btn.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.pd-type-icon { font-size: 20px; flex-shrink: 0; }
.pd-action-radio { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text);
  transition: background .15s; }
.pd-action-radio:hover { background: var(--border); }
.pd-action-radio input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; }
.pd-info { margin-top: 8px; padding: 10px 12px; background: var(--surface2);
  border-radius: 8px; font-size: 12px; color: var(--text2); min-height: 60px; line-height: 1.6; }

/* ── SETTINGS TAB ─────────────────────────────────────── */
.settings-wrap { padding: 24px; max-width: 1100px; width: 100%; box-sizing: border-box; }
.settings-header { margin-bottom: 24px; }
.settings-header h2 { font-family: 'DM Serif Display', serif; font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.settings-hint { font-size: 13px; color: var(--text2); margin: 0; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(600px, 1fr)); gap: 20px; }
.settings-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.settings-card-title { font-size: 15px; font-weight: 700; margin-bottom: 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; }
.settings-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.settings-form-grid .span2 { grid-column: span 2; }
.settings-form-grid label { font-size: 11px; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; display: block; }
.settings-form-grid input, .settings-form-grid textarea {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg); color: var(--text); font-size: 13px; box-sizing: border-box; }
.settings-form-grid textarea { resize: vertical; min-height: 60px; font-family: inherit; }
.settings-form-grid input:focus, .settings-form-grid textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.settings-save-row { margin-top: 14px; display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.settings-saved-msg { font-size: 12px; color: #22c55e; opacity: 0; transition: opacity .4s; }
.settings-saved-msg.visible { opacity: 1; }
.settings-upload-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  transition: background .15s; width: fit-content;
}
.settings-upload-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Admin-Tabellen (Zimmer/Tische-Verwaltung) ── */
.admin-section { margin-bottom: 24px; }
.admin-section-header { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0; }
.admin-section-header h3 { font-size: 14px; margin: 0; }
.admin-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border);
  border-top: none; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; font-size: 13px; }
.admin-table th { background: var(--surface); padding: 8px 10px; text-align: left;
  font-weight: 600; font-size: 11px; color: var(--text2); border-bottom: 1px solid var(--border); }
.admin-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--row-hover); }
.admin-table .inactive-row td { opacity: .5; }
.admin-actions { display: flex; gap: 4px; }
.admin-actions button { background: none; border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; padding: 3px 7px; font-size: 12px; color: var(--text2); transition: all .15s; }
.admin-actions button:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.admin-actions button.del:hover { background: var(--red); border-color: var(--red); }
.btn-sm { padding: 5px 12px; font-size: 12px; font-weight: 600; border-radius: 6px;
  border: none; cursor: pointer; background: var(--accent); color: #fff; transition: opacity .15s; }
.btn-sm:hover { opacity: .85; }
.admin-toggle { width: 36px; height: 20px; border-radius: 10px; border: none;
  cursor: pointer; position: relative; transition: background .2s;
  background: var(--border); }
.admin-toggle.on { background: var(--green); }
.admin-toggle::after { content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.admin-toggle.on::after { transform: translateX(16px); }
.admin-empty { padding: 20px; text-align: center; color: var(--text3); font-size: 13px;
  border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); }

/* ── PRINT / PDF STYLES ─────────────────────────────────── */
@media print {
  body { background: #fff !important; }
  body > *:not(#invoicePrintArea) { display: none !important; }
  #invoicePrintArea { display: block !important; background: #fff !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .list-print-body table { width: 100%; border-collapse: collapse; font-size: 11px; }
  .list-print-body th { background: #f1f5f9 !important; color: #1e293b !important; padding: 6px 8px; text-align: left; border-bottom: 2px solid #cbd5e1; }
  .list-print-body td { padding: 5px 8px; border-bottom: 1px solid #e2e8f0; }
  .list-print-body tr:nth-child(even) td { background: #f8fafc !important; }
  .list-print-body button, .list-print-body .toolbar-btn { display: none !important; }
}
#invoicePrintArea {
  display: none;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #1e293b;
  padding: 40px;
  max-width: 800px;
  margin: 0 auto;
}
.ipr-header { display: flex; justify-content: space-between;
  align-items: flex-start; margin-bottom: 32px; }
.ipr-logo { font-size: 22px; font-weight: 800; color: var(--accent); }
.ipr-company { font-size: 11px; color: #64748b; margin-top: 4px; line-height: 1.6; }
.ipr-meta { text-align: right; font-size: 12px; color: #475569; line-height: 1.7; }
.ipr-meta strong { color: #1e293b; }
.ipr-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.ipr-recipient { background: #f8fafc; border-left: 3px solid #2563eb;
  padding: 12px 16px; margin-bottom: 24px; font-size: 12px; line-height: 1.6; }
.ipr-table { width: 100%; border-collapse: collapse; margin-bottom: 20px;
  font-size: 12px; }
.ipr-table th { background: #1e3a8a; color: #fff; padding: 8px 12px;
  text-align: left; font-size: 11px; }
.ipr-table th.r { text-align: right; }
.ipr-table td { padding: 8px 12px; border-bottom: 1px solid #e2e8f0; }
.ipr-table td.r { text-align: right; }
.ipr-table tr:nth-child(even) td { background: #f8fafc; }
.ipr-totals { display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; font-size: 13px; margin-bottom: 24px; }
.ipr-total-row { display: flex; gap: 32px; }
.ipr-total-row.grand { font-weight: 700; font-size: 16px; color: #2563eb;
  border-top: 2px solid #2563eb; padding-top: 8px; margin-top: 4px; }
.ipr-tax-row { display: flex; gap: 32px; font-size: 11px; color: #64748b; }
.ipr-tax-row + .ipr-total-row.grand { margin-top: 8px; }
.ipr-notes { font-size: 11px; color: #64748b; border-top: 1px solid #e2e8f0;
  padding-top: 16px; margin-top: 16px; }
.ipr-payment-block { font-size: 11px; color: #475569; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px 12px;
  margin-top: 12px; }
.ipr-footer { margin-top: 40px; font-size: 10px; color: #94a3b8;
  text-align: center; border-top: 1px solid #e2e8f0; padding-top: 12px; }

/* ── TSE (Technische Sicherheitseinrichtung) auf Rechnung ── */
.ipr-tse { margin-top: 16px; padding: 10px 12px; border: 1px solid #cbd5e1;
  border-radius: 6px; font-size: 9px; color: #475569; display: flex;
  gap: 12px; align-items: flex-start; background: #f8fafc; }
.ipr-tse-qr { flex-shrink: 0; }
.ipr-tse-qr svg { width: 80px; height: 80px; }
.ipr-tse-data { flex: 1; line-height: 1.6; }
.ipr-tse-data strong { color: #334155; }
.ipr-tse-label { display: inline-block; width: 100px; font-weight: 600; color: #64748b; }
.ipr-tse-title { font-size: 10px; font-weight: 700; color: #334155; margin-bottom: 4px; }

/* ── Lexware / DATEV Export ── */
.lx-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 12px; background: var(--surface2); border-radius: 8px; margin-bottom: 12px; }
.lx-toolbar label { font-size: 12px; color: var(--text2); font-weight: 600; }
.lx-toolbar input[type="date"], .lx-toolbar select { font-size: 12px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); }
.lx-toolbar .lx-radio { display: flex; gap: 12px; align-items: center; font-size: 12px; }
.lx-toolbar .lx-radio label { cursor: pointer; display: flex; align-items: center; gap: 3px; }
.lx-stats { font-size: 12px; color: var(--text2); padding: 8px 12px; background: var(--surface2);
  border-radius: 6px; margin-bottom: 12px; display: flex; gap: 16px; align-items: center; }
.lx-stats strong { color: var(--text); }
.lx-preview { max-height: 500px; overflow: auto; border: 1px solid var(--border);
  border-radius: 6px; margin-bottom: 12px; }
.lx-preview table { width: 100%; border-collapse: collapse; font-size: 11px; }
.lx-preview th { background: var(--surface2); position: sticky; top: 0; text-align: left;
  padding: 6px 8px; font-weight: 600; color: var(--text2); border-bottom: 2px solid var(--border); }
.lx-preview td { padding: 4px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.lx-preview tr:hover td { background: var(--surface2); }
.lx-actions { display: flex; gap: 10px; }
.lx-actions button { padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: none; }
.lx-btn-download { background: var(--accent); color: #fff; }
.lx-btn-download:hover { filter: brightness(1.1); }
.lx-btn-email { background: var(--surface2); color: var(--text); border: 1px solid var(--border) !important; }
.lx-btn-email:hover { background: var(--surface3); }
.lx-empty { text-align: center; padding: 40px; color: var(--text2); font-size: 14px; }

/* ═══════════ LIGHT MODE EXTRAS ═══════════ */
/* Scrollbars */
:root[data-theme="light"] ::-webkit-scrollbar { width: 8px; height: 8px; }
:root[data-theme="light"] ::-webkit-scrollbar-track { background: var(--surface2); }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Form Inputs im Light Mode */
:root[data-theme="light"] .form-group input,
:root[data-theme="light"] .form-group select,
:root[data-theme="light"] .form-group textarea,
:root[data-theme="light"] .field-wrap input {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #1e293b;
}
:root[data-theme="light"] .form-group select option { background: #fff; color: #1e293b; }

/* res-bar hover im Light Mode: dunkeln statt aufhellen */
:root[data-theme="light"] .res-bar:hover { filter: brightness(.92); }

/* Topbar Schatten im Light Mode */
:root[data-theme="light"] .topbar { box-shadow: 0 1px 4px rgba(0,0,0,.08); }
:root[data-theme="light"] .toolbar { box-shadow: 0 1px 3px rgba(0,0,0,.06); }

/* Gantt-Header etwas stärker abheben */
:root[data-theme="light"] .gantt-header-row { box-shadow: 0 2px 4px rgba(0,0,0,.06); }

/* Balken-Schatten für mehr Tiefe */
:root[data-theme="light"] .res-bar,
:root[data-theme="light"] .rg-bar { box-shadow: 0 1px 3px rgba(0,0,0,.15); }

/* ═══ Document Section in Reservation Modals ═══ */
.doc-section { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.doc-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.doc-section-title { font-size: 13px; font-weight: 600; color: var(--text2); }
.doc-list { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.doc-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
  background: var(--surface2, rgba(255,255,255,.04)); font-size: 12px; cursor: pointer; transition: background .15s; }
.doc-item:hover { background: var(--border); }
.doc-item-icon { font-size: 16px; flex-shrink: 0; }
.doc-item-body { flex: 1; min-width: 0; }
.doc-item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-item-meta { font-size: 10px; color: var(--text3); margin-top: 1px; }
.doc-item-del { color: var(--red); background: none; border: none; font-size: 14px; cursor: pointer;
  opacity: 0; transition: opacity .15s; padding: 2px 4px; }
.doc-item:hover .doc-item-del { opacity: 1; }
.doc-qr-wrap { display: flex; align-items: center; gap: 12px; margin-top: 8px;
  padding: 10px; background: var(--surface2, rgba(255,255,255,.04)); border-radius: 8px; }
.doc-qr-text { font-size: 11px; color: var(--text2); line-height: 1.6; }
.doc-upload-btn { padding: 4px 10px; border-radius: 6px; border: 1px dashed var(--border);
  background: transparent; color: var(--accent); font-size: 12px; cursor: pointer; font-weight: 600; }
.doc-upload-btn:hover { border-color: var(--accent); background: rgba(201,169,110,.08); }

/* ── Room Overview Table (Visbook-Style) ── */
#bRoomOverviewBody { overflow: visible; }
.room-overview-table { width: 100%; font-size: 12px; border-collapse: collapse; table-layout: fixed; }
.room-overview-table th {
  text-align: left; padding: 6px 8px; font-size: 11px; font-weight: 600;
  color: var(--text3); text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 2px solid var(--border); white-space: nowrap;
}
.room-overview-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.room-overview-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.room-overview-table td.bold { font-weight: 600; }
/* Column widths */
.room-overview-table th:nth-child(1),
.room-overview-table td:nth-child(1) { width: 150px; }
.room-overview-table th:nth-child(3),
.room-overview-table td:nth-child(3),
.room-overview-table th:nth-child(4),
.room-overview-table td:nth-child(4) { width: 80px; }
.room-overview-table th:nth-child(6),
.room-overview-table td:nth-child(6),
.room-overview-table th:nth-child(9),
.room-overview-table td:nth-child(9) { width: 85px; }
.room-overview-table th:nth-child(7),
.room-overview-table td:nth-child(7),
.room-overview-table th:nth-child(8),
.room-overview-table td:nth-child(8) { width: 55px; }

.room-overview-room-row { background: var(--surface2, rgba(255,255,255,.04)); }
.room-overview-room-row:hover { background: var(--border); }
.room-overview-extra-row { color: var(--text2); }
.room-overview-extra-row:hover { background: rgba(201,169,110,.04); }
.room-overview-room-cell { position: relative; overflow: visible; }

/* Dropdown Button */
.room-overview-dropdown-btn {
  background: var(--accent); color: #fff; border: none; border-radius: 5px;
  padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: opacity .15s;
}
.room-overview-dropdown-btn:hover { opacity: .85; }

/* Dropdown Menu — fixed position to escape modal overflow */
.room-overview-dropdown {
  display: none; position: fixed; z-index: 99999;
  min-width: 210px; background: var(--bg, #fff); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.22);
  padding: 4px 0;
}
.room-overview-dropdown.open { display: block; }
.room-overview-dd-item {
  padding: 7px 14px; font-size: 13px; cursor: pointer;
  white-space: nowrap; transition: background .1s;
}
.room-overview-dd-item:hover { background: var(--accent-light, rgba(139,92,246,.08)); }
.room-overview-dd-danger { color: var(--red, #e74c3c); }
.room-overview-dd-danger:hover { background: rgba(231,76,60,.08); }
.doc-empty { font-size: 11px; color: var(--text3); padding: 4px; }

/* ═══ Textbausteine (Settings + Snippet-Picker) ═══ */
.tb-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.tb-filter-row { display:flex; gap:8px; flex:1; min-width:200px; }
.tb-filter-row select, .tb-filter-row input { padding:6px 10px; border:1px solid var(--border); border-radius:6px;
  background:var(--bg); color:var(--text); font-size:12px; }
.tb-filter-row input { flex:1; }
.tb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; }
.tb-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px;
  cursor:pointer; transition:border-color .15s, box-shadow .15s; position:relative; }
.tb-card:hover { border-color:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.12); }
.tb-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:6px; }
.tb-card-name { font-weight:600; font-size:13px; }
.tb-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:600; }
.tb-badge-item { background:rgba(59,130,246,.15); color:#3b82f6; }
.tb-badge-footer { background:rgba(168,85,247,.15); color:#a855f7; }
.tb-card-text { font-size:12px; color:var(--text2); line-height:1.5; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tb-card-meta { font-size:10px; color:var(--text3); margin-top:6px; display:flex; gap:8px; }
.tb-card-inactive { opacity:.5; }
.tb-card-actions { position:absolute; top:8px; right:8px; display:flex; gap:4px; opacity:0; transition:opacity .15s; }
.tb-card:hover .tb-card-actions { opacity:1; }
.tb-card-actions button { background:none; border:none; cursor:pointer; font-size:14px; padding:2px; }

/* Snippet Editor Modal */
.tb-editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tb-editor-grid .form-group { margin-bottom:0; }
.tb-editor-full { grid-column:1/-1; }
.tb-item-defaults { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:12px;
  background:var(--surface2,rgba(255,255,255,.04)); border-radius:8px; margin-top:4px; }
.tb-item-defaults label { font-size:10px; font-weight:600; color:var(--text2); display:block; margin-bottom:3px; }
.tb-item-defaults input, .tb-item-defaults select { width:100%; padding:5px 8px; border:1px solid var(--border);
  border-radius:5px; background:var(--bg); color:var(--text); font-size:12px; }
.tb-translations { margin-top:12px; border-top:1px solid var(--border); padding-top:10px; }
.tb-trans-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.tb-trans-flag { font-size:16px; width:24px; text-align:center; }
.tb-trans-text { flex:1; font-size:12px; color:var(--text2); padding:6px 8px; background:var(--surface2,rgba(255,255,255,.04));
  border-radius:6px; min-height:20px; }
.tb-trans-btn { background:none; border:none; cursor:pointer; font-size:13px; padding:2px 4px; }
.tb-trans-btn:hover { transform:scale(1.2); }
.tb-trans-spinner { display:inline-block; width:14px; height:14px; border:2px solid var(--border);
  border-top-color:var(--accent); border-radius:50%; animation:spin .6s linear infinite; }

/* Snippet Picker Dropdown (für Invoice/PrintDialog) */
.snippet-picker-wrap { position:relative; display:inline-block; }
.snippet-picker-btn { padding:4px 10px; border-radius:6px; border:1px dashed var(--accent);
  background:transparent; color:var(--accent); font-size:12px; cursor:pointer; font-weight:600;
  transition:background .15s; }
.snippet-picker-btn:hover { background:rgba(201,169,110,.1); }
.snippet-picker-dd { position:absolute; top:100%; left:0; z-index:9999; min-width:300px; max-height:280px;
  overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.25); display:none; }
.snippet-picker-dd.open { display:block; }
.snippet-picker-dd .sp-search { width:100%; padding:8px 10px; border:none; border-bottom:1px solid var(--border);
  background:transparent; color:var(--text); font-size:12px; outline:none; }
.snippet-picker-dd .sp-item { padding:8px 12px; cursor:pointer; font-size:12px; transition:background .1s;
  display:flex; justify-content:space-between; align-items:center; }
.snippet-picker-dd .sp-item:hover { background:var(--border); }
.snippet-picker-dd .sp-item-name { font-weight:500; }
.snippet-picker-dd .sp-item-badge { font-size:9px; padding:1px 6px; border-radius:8px;
  background:rgba(201,169,110,.15); color:var(--accent); }
.snippet-picker-dd .sp-empty { padding:16px; text-align:center; font-size:11px; color:var(--text3); }

/* ── Channel Manager – Verfügbarkeits-Cockpit ── */
.cm-toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.cm-toolbar select, .cm-toolbar button { padding:6px 12px; border:1px solid var(--border); border-radius:6px;
  background:var(--surface); font-size:12px; cursor:pointer; }
.cm-toolbar button:hover { background:var(--border); }
.cm-toolbar .cm-zoom-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.cm-toolbar .cm-date-info { font-size:12px; color:var(--text2); min-width:180px; text-align:center; }
.cm-wrap { flex:1; overflow:auto; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
.cm-grid { display:flex; flex-direction:column; min-width:max-content; }
.cm-month-row { display:flex; position:sticky; top:0; z-index:11; background:var(--surface2); }
.cm-month-cell { padding:4px 0; text-align:center; font-size:10px; font-weight:600; color:var(--text2);
  border-bottom:1px solid var(--border); border-right:1px solid var(--border); }
.cm-day-row { display:flex; position:sticky; top:24px; z-index:10; background:var(--surface); }
.cm-day-cell { width:38px; min-width:38px; text-align:center; padding:3px 0; font-size:10px; color:var(--text2);
  border-bottom:2px solid var(--border); border-right:1px solid rgba(0,0,0,.04); }
.cm-day-cell .cm-day-name { font-size:9px; color:var(--text3); }
.cm-day-cell .cm-day-num { font-weight:600; }
.cm-day-cell.weekend { background:var(--weekend-overlay); }
.cm-day-cell.today { background:var(--today-overlay); }
.cm-sidebar { width:200px; min-width:200px; }
.cm-prop-header { display:flex; align-items:center; background:var(--surface2); border-bottom:1px solid var(--border);
  cursor:pointer; font-weight:600; font-size:13px; }
.cm-prop-header:hover { filter:brightness(0.95); }
.cm-prop-label { width:200px; min-width:200px; padding:6px 10px; display:flex; align-items:center; gap:6px; }
.cm-prop-arrow { transition:transform .2s; font-size:10px; }
.cm-prop-arrow.open { transform:rotate(90deg); }
.cm-prop-cells { display:flex; }
.cm-prop-cell { width:38px; min-width:38px; text-align:center; font-size:11px; font-weight:600; padding:5px 0;
  border-right:1px solid rgba(0,0,0,.04); }
.cm-row { display:flex; border-bottom:1px solid rgba(0,0,0,.04); }
.cm-row:hover { background:var(--row-hover); }
.cm-row.cm-total-row { background:var(--surface2); border-bottom:1px solid var(--border); }
.cm-label { width:200px; min-width:200px; padding:5px 10px 5px 24px; font-size:12px; color:var(--text1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-total-row .cm-label { font-weight:600; padding-left:10px; }
.cm-cells { display:flex; }
.cm-cell { width:38px; min-width:38px; text-align:center; font-size:11px; padding:5px 0;
  border-right:1px solid rgba(0,0,0,.04); cursor:default; }
.cm-cell.full { background:rgba(239,68,68,.15); color:#dc2626; font-weight:600; }
.cm-cell.low { background:rgba(234,179,8,.12); color:#a16207; }
.cm-cell.ok { background:rgba(34,197,94,.08); color:#16a34a; }
.cm-total-row .cm-cell { font-weight:600; }
.cm-row.expandable { cursor:pointer; }
.cm-row.expandable:hover { background:rgba(37,99,235,.06); }
.cm-row.expandable .cm-label::before { content:'▸ '; font-size:9px; color:var(--text3); }
.cm-row.expanded { background:rgba(37,99,235,.08); }
.cm-row.expanded .cm-label::before { content:'▾ '; }
.cm-detail { padding:10px 10px 10px 24px; background:rgba(37,99,235,.03); border-bottom:1px solid var(--border); }
.cm-price-grid { border-collapse:collapse; font-size:12px; width:auto; }
.cm-price-grid th { padding:4px 8px; font-size:10px; font-weight:600; color:var(--text2);
  border-bottom:2px solid var(--border); text-align:center; }
.cm-price-grid td { padding:4px 6px; border-bottom:1px solid rgba(0,0,0,.05); vertical-align:middle; }
.cm-price-grid td:first-child { font-weight:500; white-space:nowrap; min-width:120px; }
.cm-price-input { width:60px; padding:3px 4px; border:1px solid var(--border); border-radius:4px;
  text-align:center; font-size:11px; background:var(--surface); }
.cm-price-input:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 2px rgba(201,169,110,.2); }
.cm-price-we { font-style:italic; opacity:.7; }
.cm-price-ref { font-size:9px; color:var(--text3); display:block; text-align:center; }
.cm-price-cell { text-align:center; }
.cm-season-dates { display:flex; gap:4px; align-items:center; }
.cm-season-dates input[type="date"] { font-size:10px; padding:2px 4px; border:1px solid var(--border);
  border-radius:4px; background:var(--surface); }
.cm-detail-actions { display:flex; gap:8px; margin-top:10px; align-items:center; }
.cm-detail-actions button { padding:5px 14px; border-radius:6px; border:1px solid var(--border);
  font-size:11px; cursor:pointer; }
.cm-detail-actions .cm-btn-save { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.cm-detail-actions .cm-btn-save:hover { filter:brightness(1.1); }
.cm-detail-actions .cm-btn-season { background:var(--surface); }
.cm-detail-actions .cm-btn-season:hover { background:var(--border); }
.cm-detail-actions .cm-saved-msg { font-size:11px; color:#16a34a; display:none; }
/* ── Mobile Topbar ──────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   RESPONSIVE – TABLET (≤ 768px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Topbar ── */
  .topbar { height: auto; min-height: 44px; padding: 6px 8px; gap: 6px; flex-wrap: wrap; align-items: center; }
  .topbar h1 { font-size: 13px; margin-right: 0; }
  /* Action-Buttons: eigene Zeile, horizontale Reihe, scrollbar bei Bedarf */
  .topbar-right {
    order: 1;
    flex: 0 0 100%;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: flex-start;
    margin-left: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .topbar-right::-webkit-scrollbar { display: none; }
  .topbar-right .icon-btn {
    padding: 5px 9px;
    font-size: 11px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .topbar-right .date-display { font-size: 10px; flex-shrink: 0; white-space: nowrap; }
  .topbar-right .kbd, .tab-btn .kbd { display: none; }
  /* Tabs: eigene Zeile darunter */
  .tab-scroll-wrap { order: 2; flex-basis: 100%; min-height: 30px; }
  .tab-btn { padding: 4px 8px; font-size: 11px; }
  /* ── Toolbar ── */
  .toolbar { padding: 6px 8px; gap: 6px; flex-wrap: wrap; }
  .toolbar .toolbar-btn { font-size: 11px; padding: 3px 6px; }
  .zoom-wrap { gap: 4px; }
  #zoomSlider { width: 60px; }
  /* ── Modals ── */
  .modal { width: 95vw !important; max-height: 90vh; padding: 16px !important; }
  .modal-booking { width: 95vw !important; padding: 14px 16px 12px !important; }
  .modal-booking.fullscreen { width: 98vw !important; height: 95vh !important; padding: 16px 20px !important; }
  .modal-invoice { padding: 14px 16px !important; }
  /* ── Dashboard ── */
  .dashboard-banner { padding: 6px 8px; gap: 6px; }
  .db-card { padding: 5px 10px; min-width: 0; }
  .db-card .db-val { font-size: 13px; }
  .db-card .db-label { font-size: 10px; }
  .db-list-table th, .db-list-table td { padding: 6px 6px; font-size: 11px; }
  /* ── Gantt (Hotel) ── */
  .gantt-grid { font-size: 11px; }
  .gantt-sidebar-cell, .gantt-label { width: 110px; min-width: 110px; }
  .gantt-label .room-num { font-size: 12px; }
  .gantt-label .room-name { font-size: 10px; }
  .property-label { width: 110px; min-width: 110px; }
  /* ── Restaurant Gantt ── */
  .rg-sidebar-cell, .rg-label, .rg-property-label { width: 110px; min-width: 80px; }
  .rw-sidebar-cell, .rw-label { width: 110px; min-width: 80px; }
  /* ── Calendar/Preise ── */
  .cm-sidebar, .cm-prop-label, .cm-label { width: 140px; min-width: 100px; }
  /* ── Settings ── */
  .settings-wrap { padding: 12px; }
  .settings-page { padding: 10px; }
  .settings-card { padding: 14px; }
  .snav-btn { font-size: 11px; padding: 6px 10px; }
  /* ── Stats ── */
  .stats-kpis { grid-template-columns: repeat(2, 1fr); }
  /* ── Guests ── */
  .guests-header { flex-wrap: wrap; gap: 8px; }
  .guests-search-box { min-width: 180px; }
  .guest-cards-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
  /* Gäste-Panel als Overlay auf Tablet */
  .guests-content { position: relative; }
  .guest-detail-panel { width: 360px; }
  .guest-table { font-size: 12px; }
  .guest-table th, .guest-table td { padding: 6px 8px; }
  /* ── Forms ── */
  .form-grid-3 { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .form-group label { font-size: 11px; }
  .form-group input, .form-group select, .form-group textarea { font-size: 13px; padding: 7px 10px; }
  /* ── Invoice ── */
  .inv-header-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  /* ── Shift Close ── */
  .shift-close-modal { max-width: 95vw; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE – PHONE (≤ 480px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* ── Topbar ── */
  .topbar { padding: 4px 6px; }
  .topbar h1 { font-size: 12px; }
  .topbar-right { gap: 2px; }
  #shiftCloseBtn, #dateDisplay { display: none; }
  .tab-btn { padding: 3px 6px; font-size: 10px; }
  /* ── Toolbar ── */
  .toolbar { padding: 4px 6px; gap: 4px; }
  .toolbar .toolbar-btn { font-size: 10px; padding: 2px 5px; }
  .toolbar-sep { display: none; }
  .zoom-wrap { display: none; }
  .toolbar-date { font-size: 11px; padding: 3px 6px; }
  /* ── Dashboard ── */
  .dashboard-banner { flex-direction: column; gap: 4px; padding: 4px 6px; }
  .db-card { width: 100%; padding: 6px 10px; }
  .db-card .db-val { font-size: 16px; }
  .db-card .db-label { font-size: 9px; }
  /* ── Stats ── */
  .stats-kpis { grid-template-columns: 1fr; }
  .stats-wrap { padding: 10px !important; }
  /* ── Gantt (Hotel) ── */
  .gantt-sidebar-cell, .gantt-label { width: 80px; min-width: 80px; padding: 0 6px; }
  .gantt-label .room-num { font-size: 11px; }
  .gantt-label .room-name { display: none; }
  .gantt-row { height: 34px; }
  .property-label { width: 80px; min-width: 80px; }
  .property-label .ph-name { font-size: 11px; }
  .floor-header { font-size: 10px; height: 22px; }
  /* ── Restaurant Gantt ── */
  .rg-sidebar-cell, .rg-label, .rg-property-label { width: 80px; min-width: 70px; font-size: 10px; }
  .rw-sidebar-cell, .rw-label { width: 80px; min-width: 70px; font-size: 10px; }
  .rg-hour-cell, .rw-hour-cell { font-size: 9px; }
  /* ── Calendar/Preise ── */
  .cm-sidebar, .cm-prop-label, .cm-label { width: 100px; min-width: 80px; font-size: 10px; }
  .cm-day-cell { width: 30px; min-width: 30px; font-size: 9px; padding: 2px 0; }
  .cm-prop-cell, .cm-cell { width: 30px; min-width: 30px; font-size: 10px; }
  .cm-toolbar { flex-wrap: wrap; gap: 6px; }
  .cm-toolbar .cm-date-info { min-width: 140px; font-size: 11px; }
  /* ── Modals ── */
  .modal { padding: 12px !important; border-radius: 10px !important; }
  .modal-booking { padding: 10px 12px 10px !important; }
  .modal-booking.fullscreen { padding: 12px 14px !important; }
  .modal h3, .modal-booking h3 { font-size: 16px; }
  .modal-overlay .modal { max-height: 94vh; }
  /* ── Forms ── */
  .form-grid-3 { grid-template-columns: 1fr !important; gap: 6px; }
  .form-group input, .form-group select { padding: 6px 8px; font-size: 13px; min-height: 36px; }
  .field-wrap input { padding: 8px 36px 8px 10px; }
  /* ── Settings ── */
  .settings-wrap { padding: 8px; }
  .settings-card { padding: 10px; }
  .settings-card h3 { font-size: 14px; }
  #settingsSubnav { gap: 2px; flex-wrap: wrap; }
  .snav-btn { font-size: 10px; padding: 4px 8px; }
  /* ── Guests ── */
  .guests-header { padding: 8px; }
  .guests-search-box { min-width: 100%; }
  .guest-cards-grid { grid-template-columns: 1fr !important; gap: 8px; padding: 8px; }
  .guest-card { padding: 10px; }
  .guest-card-name { font-size: 13px; }
  .guest-card-info span { font-size: 11px; }
  /* ── Guest Detail Panel: Full-Width Overlay auf Phone ── */
  .guest-detail-panel { position: absolute; inset: 0; width: 100% !important; z-index: 5;
    background: var(--bg); border-left: none !important; }
  .guests-content { position: relative; }
  .guest-table { font-size: 11px; }
  .guest-table th, .guest-table td { padding: 5px 6px; white-space: nowrap; }
  .guest-table-wrap { overflow-x: auto; }
  .gdp-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .gdp-info h3 { font-size: 16px; }
  /* ── Guest Card Modal ── */
  .gcm-tabs { flex-wrap: wrap; gap: 4px; }
  .gcm-tab { font-size: 11px; padding: 6px 10px; }
  .gcm-tab-panel { padding: 10px 12px; }
  /* ── Invoices ── */
  .inv-header-grid { grid-template-columns: 1fr !important; }
  .inv-list-item { flex-wrap: wrap; gap: 4px; padding: 8px; }
  .inv-num { min-width: auto; font-size: 12px; }
  .inv-stay { min-width: auto; white-space: normal; font-size: 10px; }
  .inv-property { min-width: auto; white-space: normal; font-size: 10px; }
  .inv-cashier { min-width: auto; white-space: normal; font-size: 10px; }
  .inv-date { min-width: auto; }
  .inv-total { min-width: auto; }
  .modal-invoice { padding: 10px 12px !important; }
  .inv-items-table { font-size: 11px; }
  .inv-items-table th, .inv-items-table td { padding: 4px 4px; }
  /* ── Housekeeping ── */
  .hk-grid { grid-template-columns: 1fr !important; }
  .hk-header { flex-direction: column; align-items: stretch; gap: 6px; }
  /* ── Booking Form inline styles ── */
  .tb-filter-row { min-width: 100% !important; flex-wrap: wrap; }
  /* ── Login ── */
  .login-box { width: 90vw; padding: 24px 20px; }
  .login-box h1 { font-size: 22px; }
  /* ── Toast ── */
  .toast-container { top: 10px; right: 10px; left: 10px; }
  .toast { min-width: auto; max-width: 100%; font-size: 12px; }
  /* ── Lists Menu ── */
  .lists-menu-grid { grid-template-columns: 1fr !important; }
  /* ── Dynamic Pricing Grid (7→4 Spalten) ── */
  #dynPricingGrid { grid-template-columns: repeat(4, 1fr) !important; }
  /* ── Zeiten Grid ── */
  #zeitenGrid { grid-template-columns: 1fr !important; }
  /* ── Booking form grid 2-col → 1-col ── */
  .form-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE – SMALL PHONE (≤ 375px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  .topbar h1 { font-size: 11px; }
  .tab-btn { font-size: 9px; padding: 3px 5px; }
  .db-card .db-val { font-size: 14px; }
  .gantt-sidebar-cell, .gantt-label { width: 70px; min-width: 70px; }
  .gantt-label .room-num { font-size: 10px; }
  .cm-sidebar, .cm-prop-label, .cm-label { width: 80px; min-width: 70px; font-size: 9px; }
  .cm-day-cell, .cm-prop-cell, .cm-cell { width: 26px; min-width: 26px; }
  .modal { padding: 10px !important; }
  .form-group label { font-size: 10px; }
  .settings-card h3 { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════
   TOUCH-FRIENDLY – Minimum Tap Targets
═══════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .tab-btn { min-height: 36px; display: inline-flex; align-items: center; }
  .toolbar-btn { min-height: 32px; }
  .icon-btn { min-height: 32px; min-width: 32px; display: inline-flex; align-items: center; justify-content: center; }
  .snav-btn { min-height: 36px; }
  .gantt-row { min-height: 38px; }
  .rg-bar, .rw-bar { min-height: calc(var(--rg-row-h, 44px) - 10px); }
  .form-group input, .form-group select, .form-group textarea { min-height: 40px; }
  .btn-primary, .btn-cancel { min-height: 44px; font-size: 15px; }
  .login-box .btn-primary { min-height: 48px; }
  /* Bessere Scroll-Hinweise */
  .gantt-wrap, .rg-wrap, .rw-wrap, .cm-grid { -webkit-overflow-scrolling: touch; }
  .gantt-wrap::-webkit-scrollbar, .rg-wrap::-webkit-scrollbar { height: 4px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE UX ENHANCEMENTS
═══════════════════════════════════════════════════════════ */
/* ── Tab-Bar Scroll-Fade (zeigt an, dass mehr Tabs vorhanden) ── */
@media (max-width: 768px) {
  .tab-scroll-wrap {
    mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 24px), transparent);
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
  }
  .tab-scroll-wrap .tab-btn { scroll-snap-align: start; }
}

/* ── Booking-Modal: Full-Screen auf Phone ── */
@media (max-width: 480px) {
  .modal-booking {
    width: 100vw !important; height: 100vh !important;
    max-height: 100vh !important; border-radius: 0 !important;
    position: fixed; inset: 0; margin: 0;
  }
  .modal-booking .modal-body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }
  /* Close-Button oben rechts prominenter */
  .modal-booking .modal-close,
  .modal-booking [onclick*="close"] { font-size: 24px !important; min-width: 44px; min-height: 44px; }
}

/* ── Gantt Scroll-Hinweis auf Mobile ── */
@media (max-width: 768px) {
  .gantt-wrap::after, .rg-wrap::after, .rw-wrap::after {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 20px;
    background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
    pointer-events: none; z-index: 2;
  }
  .gantt-wrap, .rg-wrap, .rw-wrap { position: relative; }
}

/* ── Bessere Lesbarkeit auf kleinen Screens ── */
@media (max-width: 480px) {
  /* Reservierungs-Bars größer */
  .gantt-bar { min-height: 28px; font-size: 10px; padding: 2px 6px;
    display: flex; align-items: center; border-radius: 4px; }
  /* Dashboard-Karten: Werte prominenter */
  .db-card { text-align: center; }
  .db-card .db-val { font-size: 18px; font-weight: 800; }
  /* Settings: Cards volle Breite */
  .settings-grid { grid-template-columns: 1fr !important; }
  /* Stats Charts Container */
  .stats-chart-wrap { overflow-x: auto; }
  /* Floating Action Button für neue Buchung */
  #fabNewBooking { display: flex !important; }
}

/* ── Floating Action Button (Neue Buchung) ── */
#fabNewBooking {
  display: none; /* nur auf Mobile via Media Query sichtbar */
  position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); right: 16px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #000; border: none;
  font-size: 28px; font-weight: 300; box-shadow: 0 4px 12px rgba(0,0,0,.3);
  align-items: center; justify-content: center; z-index: 50;
  transition: transform .2s;
}
#fabNewBooking:active { transform: scale(.9); }

/* ── Pull-to-Refresh Indicator ── */
@media (pointer: coarse) {
  .gantt-wrap { scroll-behavior: smooth; }
  /* Scroll-Snap für Gantt (Tag-weise scrollen) */
  .gantt-body-scroll { scroll-snap-type: x proximity; }
}
/* ── LiveSync Toast ─────────────────────────────────────── */
#liveSyncToast {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(100px);
  background:var(--burgundy,#6b1f2b); color:#fff; padding:8px 20px; border-radius:20px;
  font-size:13px; z-index:99999; opacity:0; transition:transform .3s,opacity .3s; pointer-events:none;
}
#liveSyncToast.visible { transform:translateX(-50%) translateY(0); opacity:1; }

/* ═══ TOAST NOTIFICATIONS ═══ */
.toast-container{position:fixed;top:20px;right:20px;z-index:999999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;min-width:280px;max-width:420px;padding:12px 16px;
  border-radius:10px;font-size:13px;line-height:1.4;color:#fff;box-shadow:0 4px 20px rgba(0,0,0,.25);
  transform:translateX(120%);transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s;opacity:0}
.toast.show{transform:translateX(0);opacity:1}
.toast.hide{transform:translateX(120%);opacity:0}
.toast-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.toast-body{flex:1}
.toast-title{font-weight:700;font-size:13px;margin-bottom:2px}
.toast-msg{font-size:12px;opacity:.92}
.toast-close{background:none;border:none;color:rgba(255,255,255,.7);font-size:16px;cursor:pointer;padding:0 0 0 8px;flex-shrink:0}
.toast-close:hover{color:#fff}
.toast.toast-success{background:linear-gradient(135deg,#2d6a4f,#40916c)}
.toast.toast-error{background:linear-gradient(135deg,#9b1c31,#c0392b)}
.toast.toast-warning{background:linear-gradient(135deg,#b45309,#d97706)}
.toast.toast-info{background:linear-gradient(135deg,#1e40af,#3b82f6)}

/* ═══ DASHBOARD BANNER ═══ */
.dashboard-banner{display:flex;gap:10px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;flex-shrink:0}
.dashboard-banner:empty{display:none}
.db-card{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:8px;font-size:12px;background:var(--surface2);border:1px solid var(--border)}
.db-card .db-icon{font-size:16px}
.db-card .db-val{font-weight:700;font-size:15px;color:var(--text)}
.db-card .db-label{color:var(--text2);font-size:11px}
.db-card.db-checkin{border-left:3px solid #2d6a4f}
.db-card.db-checkout{border-left:3px solid #A68A56}
.db-card.db-occupancy{border-left:3px solid #3b82f6}
.db-card.db-pending{border-left:3px solid #f59e0b}
.db-clickable{cursor:pointer;transition:transform .15s,box-shadow .15s}
.db-clickable:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.1)}
.db-clickable:active{transform:translateY(0)}

.db-list-table{width:100%;border-collapse:collapse;font-size:13px}
.db-list-table th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--border);font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.3px}
.db-list-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.db-list-table tr:hover{background:var(--surface2)}
.db-list-actions{white-space:nowrap;display:flex;gap:4px;align-items:center}
.db-list-btn{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-size:12px;cursor:pointer;color:var(--text);transition:background .15s}
.db-list-btn:hover{background:var(--border)}
.db-list-btn-action{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.db-list-btn-action:hover{opacity:.85}

/* ═══════════════════════════════════════════════════════════════════════
 * Migriert aus booking.html Stufe D 2026-05-23
 * Inline-Styles aus booking.html migriert (Stufe D, 2026-05-23)
 * Vorher inline im <style>-Block direkt nach <link rel="stylesheet">
 * Cascade-Reihenfolge erhalten (folgt nun unten in der CSS).
 * ═══════════════════════════════════════════════════════════════════════ */

  /* Render-Performance: Browser rendert nur sichtbare Zeilen — fuer Gaeste-Tab mit 21k+ Zeilen entscheidend.
     content-visibility:auto + contain-intrinsic-size erspart Layout/Paint fuer off-screen Rows.
     Chrome/Edge ab v85 unterstuetzt; in aelteren Browsern faellt's einfach auf normales Rendering zurueck. */
  #guestTableBody tr { content-visibility: auto; contain-intrinsic-size: 0 38px; }
  /* Pro-Zimmer-Counter: Browser-Spinner ausblenden (sonst doppelt mit −/+) */
  .rc-pill .rc-input::-webkit-inner-spin-button,
  .rc-pill .rc-input::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
  .rc-pill .rc-input { -moz-appearance: textfield; appearance: textfield; }
  /* Kundenstamm-Box: zart gelb hinterlegt + Rahmen, gruppiert alle Gast-/Anschrift-Felder */
  .guest-data-box { background:rgba(252,211,77,0.10); border:1px solid rgba(252,211,77,0.45); border-radius:8px; padding:6px 9px; }
  [data-theme="light"] .guest-data-box { background:#fffbeb; border-color:#fcd34d; }
  .guest-data-box > .form-grid-3 { gap:5px 9px; }
  /* Interne Gast-Notiz inline neben "Ort" statt voller Breite */
  .form-grid-3 .note-inline { grid-column: span 2; }
  .modal-booking.fullscreen .form-grid-3 .note-inline { grid-column: span 3; }
  .note-inline label { font-size:10px; }
  .note-inline textarea { min-height:24px !important; padding:4px 8px !important; font-size:11px !important; resize:vertical; }
  /* 16.05.2026: Kompakter Layout-Modus fuer "Neue Hotelreservierung"-Modal,
     damit bei 1-2 Zimmern alles ohne Scrollen auf 1080p-Bildschirme passt. */
  .modal-booking .form-group label { margin-bottom:2px; }
  .modal-booking .rc-pill { height:26px !important; padding:2px 5px !important; }
  .modal-booking .rc-pill > button { width:20px !important; height:20px !important; font-size:12px !important; }
  .modal-booking .rc-pill .rc-input { width:28px !important; font-size:12px !important; }
  .modal-booking #bResInternalNotes,
  .modal-booking #tbResInternalNotes { min-height:32px; resize:vertical; }
  /* 16.05.2026 (Iteration 2): Modal wird IMMER im Fullscreen-Modus geoeffnet
     (BookingForm.open Z. 13015). Die externe booking.css definiert dafuer
     gap:16px 20px / padding:10px 12px / textarea min-height:120px — daher
     muessen die kompakten Werte explizit auf der .fullscreen-Spezifitaet
     ueberschrieben werden, sonst greifen sie nicht. */
  .modal-booking.fullscreen .form-grid-3 { gap:6px 12px !important; }
  .modal-booking.fullscreen .form-grid-3 input,
  .modal-booking.fullscreen .form-grid-3 select { padding:6px 9px !important; font-size:13px !important; }
  .modal-booking.fullscreen .form-grid-3 textarea { min-height:32px !important; padding:6px 9px !important; font-size:13px !important; resize:vertical !important; }
  .modal-booking.fullscreen .form-grid-3 label { font-size:11px !important; margin-bottom:2px !important; }
  /* .note-inline Textareas behalten ihre eigene noch kompaktere Mindesthoehe,
     da sie als Gast/Reservierungs-Notiz oft leer bleiben. */
  .modal-booking.fullscreen .form-grid-3 .note-inline textarea { min-height:24px !important; padding:4px 8px !important; font-size:11px !important; }
  .modal-booking.fullscreen h2 { font-size:18px !important; margin-bottom:10px !important; }
  /* Zimmeruebersicht: Person- und Notiz-Felder beim Klick aufklappen, damit lange Namen/Notizen komplett sichtbar werden */
  .room-overview-table tbody td { position: relative; }
  .room-overview-guest-input,
  .room-overview-note-input {
    transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
  }
  .room-overview-guest-input:focus,
  .room-overview-note-input:focus {
    position: absolute;
    z-index: 50;
    top: 50%;
    transform: translateY(-50%);
    width: 380px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 80px);
    min-height: 38px;
    font-size: 14px !important;
    padding: 8px 12px !important;
    border: 2px solid var(--accent) !important;
    background: var(--surface) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
    outline: none;
  }
  .room-overview-guest-input:focus { left: 4px; right: auto; }
  .room-overview-note-input:focus  { right: 4px; left: auto; }

/* ═══════════════════════════════════════════════════════════════════════
 * MOBILE PASS 2026-05-25
 * Ziele:
 *  1) Tische-Tab: Strg-Hint weg, Floating-FABs fuer "Verschieben" + "?"
 *  2) Uebernachtung-Tab: Bars lesbar (groessere Zeilenhoehe, groessere Schrift)
 *  3) Dashboard-Stat-Boxen: 2-spaltig statt 1-spaltig (weniger Scroll)
 *  4) Mobile-Hilfe-Modal Styles
 * Greift ausschliesslich via @media (max-width:768/480px) — Desktop unberuehrt.
 * ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Strg-/Shift-Hint im Tischplan komplett aus — am Handy unsinnig */
  #tpHint { display: none !important; }
  /* Uebernachtung-Gantt: Bars lesbarer */
  .gantt-row { min-height: 42px; }
  .gantt-cells { min-height: 42px; }
  .gantt-day-num { font-size: 13px !important; }
  .gantt-day-name { font-size: 10px !important; }
  .res-bar { font-size: 12px !important; padding: 4px 6px !important; min-height: 30px !important; line-height: 1.2 !important; }
  .res-bar__label { font-size: 12px !important; font-weight: 600 !important; }
  /* Restaurant-Tagesplan-Bars genauso */
  .rg-bar, .rw-bar { font-size: 12px !important; }
}

/* Phone: Stat-Boxen 2-spaltig (User-Feedback 25.05.2026: vertikales Stapeln frisst zu viel Platz) */
@media (max-width: 480px) {
  .dashboard-banner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    flex-direction: initial !important;
  }
  .db-card {
    width: auto !important;
    padding: 8px 10px !important;
    min-height: 52px;
    gap: 6px !important;
  }
  .db-card .db-val { font-size: 14px !important; text-align: left !important; }
  .db-card .db-label { font-size: 10px !important; }
  .db-card .db-icon { font-size: 18px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * MOBILE WELLE 2 — 2026-05-25
 *  1) Header-Burger statt 7 Original-Buttons
 *  2) #dateDisplay weg (Datum steht im Gantt-Header)
 *  3) Tischplan: Verschiebe-FAB weg (nur ? bleibt), Default-Zoom kleiner
 * ═══════════════════════════════════════════════════════════════════════ */

/* Burger-Button: Desktop aus, Mobile an */
.topbar-burger { display: none; }
.topbar-dropdown { display: none; }

@media (max-width: 768px) {
  /* Datum aus — steht im Gantt-Header */
  #dateDisplay { display: none !important; }
  /* Original-Icon-Buttons aus — werden durch Burger ersetzt. Glocke bleibt (Kellner-Workflow). */
  .topbar-right .icon-btn:not(.topbar-burger):not(.bell-icon) { display: none !important; }
  .topbar-right { gap: 6px; }
  /* Burger sichtbar */
  .topbar-burger {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 8px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
  }
  .topbar-burger:active { background: var(--border); }
  /* Dropdown unter Burger */
  .topbar-dropdown {
    display: none;
    position: fixed;
    top: 56px;
    right: 6px;
    left: 6px;
    max-width: 320px;
    margin-left: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    z-index: 200;
    padding: 6px;
  }
  .topbar-dropdown.open { display: flex; flex-direction: column; gap: 2px; }
  .topbar-dropdown .td-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    width: 100%;
    text-decoration: none;
    min-height: 44px;
  }
  .topbar-dropdown .td-item:active { background: var(--surface2); }
  .topbar-dropdown .td-item .td-icon { font-size: 18px; flex-shrink: 0; width: 22px; text-align: center; }
  .topbar-dropdown .td-sep { height: 1px; background: var(--border); margin: 4px 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * RESERVIERTSCHILD-BENACHRICHTIGUNG — Revierkellner-Workflow
 * Banner-Stack oben unter Topbar + Glocken-Icon mit Haus-Auswahl-Dropdown
 * Quelle: hh_kassen_popups INSERT/UPDATE via Supabase Realtime
 * ═══════════════════════════════════════════════════════════════════════ */

/* Banner-Container: sticky unter Topbar, stapelt mehrere Banner */
#resiBannerStack {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px 0;
  pointer-events: none;
}
#resiBannerStack:empty { display: none; }
#resiBannerStack .resi-banner { pointer-events: auto; }

.resi-banner {
  background: linear-gradient(135deg, #c9a96e, #b08e54);
  color: #fff;
  border-radius: 10px;
  padding: 10px 12px 10px 14px;
  box-shadow: 0 4px 16px rgba(176,142,84,.35);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.35;
  border: 1px solid rgba(255,255,255,.12);
  animation: resiSlideIn .25s ease-out;
}
@keyframes resiSlideIn {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.resi-banner__icon { font-size: 22px; flex-shrink: 0; }
.resi-banner__body { flex: 1; min-width: 0; }
.resi-banner__title { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.resi-banner__details { font-size: 12px; opacity: .95; }
.resi-banner__actions { display: flex; gap: 6px; flex-shrink: 0; }
.resi-banner__btn {
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-height: 38px;
  white-space: nowrap;
}
.resi-banner__btn--primary { background: rgba(0,0,0,.35); }
.resi-banner__btn:active { transform: scale(.97); }

/* Eskalation Stufe 1 (5 Min): goldener Puls */
.resi-banner.escalating {
  animation: resiSlideIn .25s ease-out, resiPulseGold 1.4s ease-in-out infinite alternate;
}
@keyframes resiPulseGold {
  from { box-shadow: 0 4px 16px rgba(176,142,84,.35); }
  to   { box-shadow: 0 4px 28px rgba(201,169,110,.85); }
}

/* Eskalation Stufe 2 (15 Min): rot blinkend */
.resi-banner.alarm {
  background: linear-gradient(135deg, #b91c1c, #991b1b);
  animation: resiSlideIn .25s ease-out, resiPulseRed 1.0s ease-in-out infinite alternate;
}
@keyframes resiPulseRed {
  from { box-shadow: 0 4px 16px rgba(185,28,28,.45); }
  to   { box-shadow: 0 4px 32px rgba(239,68,68,.95); }
}

/* Mobile: Banner kompakter */
@media (max-width: 480px) {
  .resi-banner {
    flex-wrap: wrap;
    padding: 8px 10px;
  }
  .resi-banner__body { flex: 1 0 calc(100% - 36px); }
  .resi-banner__actions { width: 100%; justify-content: flex-end; margin-top: 2px; }
}

/* Glocken-Icon im Header — sichtbar Desktop + Mobile */
.bell-icon {
  position: relative;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; min-width: 40px;
}
.bell-icon:hover { background: var(--border); }
.bell-icon.has-alerts { background: rgba(201,169,110,.18); border-color: var(--accent); color: var(--accent); }
.bell-icon.has-alerts .bell-count { display: flex; }
.bell-count {
  display: none;
  position: absolute;
  top: -4px; right: -4px;
  background: #dc2626;
  color: #fff;
  border-radius: 9px;
  min-width: 18px; height: 18px;
  font-size: 10px; font-weight: 800;
  align-items: center; justify-content: center;
  padding: 0 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  animation: bellPulse 1.5s ease-in-out infinite;
}
@keyframes bellPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* Glocken-Dropdown (Haus-Auswahl) */
.bell-dropdown {
  display: none;
  position: fixed;
  top: 56px;
  right: 6px;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  z-index: 200;
  padding: 10px;
}
.bell-dropdown.open { display: block; }
.bell-dropdown h4 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text2);
}
.bell-dropdown .bd-house {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  min-height: 40px;
}
.bell-dropdown .bd-house:hover { background: var(--surface2); }
.bell-dropdown .bd-house input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; }
.bell-dropdown .bd-house .bd-house-name { flex: 1; }
.bell-dropdown .bd-house .bd-house-count {
  font-size: 11px;
  color: var(--text2);
  background: var(--surface2);
  border-radius: 10px;
  padding: 1px 7px;
}
.bell-dropdown .bd-info {
  font-size: 11px;
  color: var(--text2);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  line-height: 1.45;
}
.bell-dropdown .bd-mode-switch {
  display: flex; gap: 4px; margin-bottom: 8px;
}
.bell-dropdown .bd-mode-btn {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
  cursor: pointer;
}
.bell-dropdown .bd-mode-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Pulse-Badge am Tab-Label "Tische" */
.tab-btn { position: relative; }
.tab-btn .tab-new-badge {
  display: none;
  position: absolute;
  top: 2px; right: 2px;
  background: #dc2626;
  color: #fff;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 800;
  align-items: center; justify-content: center;
  padding: 0 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  animation: bellPulse 1.5s ease-in-out infinite;
}
.tab-btn.has-new .tab-new-badge { display: inline-flex; }

/* ═══════════════════════════════════════════════════════════════════════
 * MOBILE WELLE 3 — 2026-05-25 — Stats-Boxen hinter Button verstecken
 * Auf Mobile sind die 7 Stat-Karten (Zuletzt/Anreisen/Abreisen/...) zu
 * platzraubend. Sie werden default ausgeblendet und per 📊-Button als
 * Overlay direkt unter der Topbar eingeklappt. Der Button toggelt das
 * jeweils aktive Tab-Dashboard (#dashboardBanner fuer Hotel,
 * #restaurantDashboard fuer Tische).
 * ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Default: beide Dashboard-Banner aus */
  #dashboardBanner, #restaurantDashboard {
    display: none !important;
  }
  /* Mit .mobile-open: als Overlay einblenden */
  #dashboardBanner.mobile-open, #restaurantDashboard.mobile-open {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: initial !important;
    gap: 6px !important;
    padding: 10px !important;
    position: absolute;
    top: 56px;
    left: 6px;
    right: 6px;
    z-index: 95;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    animation: statsSlideIn .2s ease-out;
  }
  @keyframes statsSlideIn {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  /* Stats-Button im Header */
  .stats-icon {
    position: relative;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 36px; min-width: 40px;
  }
  .stats-icon:active { background: var(--border); }
  .stats-icon.has-due {
    background: rgba(220,38,38,.12);
    border-color: #dc2626;
    color: #dc2626;
  }
}
/* Desktop: Stats-Button immer aus */
.stats-icon { display: none; }
@media (max-width: 768px) {
  .stats-icon { display: inline-flex !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * MOBILE WELLE 4 — 2026-05-25 — Tischplan-Hilfe-Button (?) in die Toolbar
 * Statt rechts oben im Tischplan-View (verdeckte rechte Haus-Pillen) liegt
 * der ? jetzt direkt neben dem Tischplan-Button. Sichtbar NUR auf Mobile
 * und NUR wenn der Tischplan-View aktiv ist (Tischplan.toggle setzt
 * body.tp-active). Desktop kennt den Button gar nicht.
 * ═══════════════════════════════════════════════════════════════════════ */
#tpMobileHelpBtn { display: none !important; }
@media (max-width: 768px) {
  body.tp-active #tpMobileHelpBtn {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 36px; height: 36px;
    min-width: 36px;
    padding: 0;
    margin-left: 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
  }
  body.tp-active #tpMobileHelpBtn:active { background: var(--surface2); }
}

/* ── Mobile-Hilfe-Modal (Tischplan) ── */
#tpMobileHelpOverlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 10001;
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
}
#tpMobileHelpOverlay.open { display: flex; }
#tpMobileHelpOverlay .tp-help-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  color: var(--text);
}
#tpMobileHelpOverlay h3 { margin: 0 0 12px; font-size: 16px; color: var(--accent); }
#tpMobileHelpOverlay ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
#tpMobileHelpOverlay ul li { margin-bottom: 6px; }
#tpMobileHelpOverlay ul li strong { color: var(--accent); }
#tpMobileHelpOverlay .tp-help-actions { margin-top: 14px; display: flex; justify-content: flex-end; }
#tpMobileHelpOverlay .tp-help-actions button {
  background: var(--accent); color: #fff; border: none;
  border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 600;
  cursor: pointer; min-height: 40px;
}

/* ── Querformat-Support Tischplan (02.06.2026) ──────────────────────────────
 * Der Strg+Maus-Hinweis (#tpHint) ist auf Touch-Geräten nutzlos und verdeckt
 * nur Plan-Fläche. Auf dem Handy (Hoch- UND Querformat) ausblenden. !important
 * übersteuert das inline display:flex aus Tischplan.toggle(). Der Mobile-Hilfe-
 * Button (?) ersetzt ihn. Body-Klasse kommt aus dem Viewport-Modul (booking.html). */
body.is-handset #tpHint { display: none !important; }

/* ── Querformat-Support Modals (03.06.2026) ────────────────────────────────
 * PROBLEM: Im Handy-Querformat (~390px hoch) greifen die bestehenden
 * Mobile-Regeln NICHT — sie hängen an @media(max-width:768px), ein modernes
 * Handy ist quer aber ~844px BREIT. Gleichzeitig schrumpft die Höhe: ein
 * .modal (max-height 85–92vh) wird ~330px hoch und scrollt als EIN Block; die
 * Button-Leiste (.form-actions / .modal-actions) sitzt ganz unten und ist nur
 * durch Scrollen erreichbar — oft unbemerkt ("Speichern-Button weg").
 *
 * LÖSUNG: volle Höhe (100dvh) + Kopf (h2) klebt oben + Button-Leiste klebt
 * unten (position:sticky), der Inhalt dazwischen scrollt. Das VERTIKALE
 * Innenpadding des Modals wird auf 0 gesetzt, damit Kopf/Fuß bündig am Rand
 * kleben und kein Inhalt im Padding-Streifen durchscheint; den Innenabstand
 * stellen Kopf/Fuß über ihr EIGENES padding wieder her. Seitliches Padding
 * bleibt erhalten — die horizontalen Margins sind 0 (kein Überstand → nie ein
 * horizontaler Scrollbalken). Der Modal-Hintergrund (var(--surface)) ist opak
 * und verdeckt den durchscrollenden Inhalt hinter Kopf/Fuß.
 *
 * Das padding:0 ist BEWUSST ohne !important: kleine, zentrierte Dialoge
 * (confirmDialog/stornoMailDialog) tragen ihr Padding inline → werden NICHT
 * überschrieben und behalten ihre Optik. Flex-Column-Modals (eigener innerer
 * Scroll, z.B. mc-modal/shift-close/roomMove) ignorieren sticky folgenlos;
 * flex hält Kopf/Fuß dort ohnehin fix.
 *
 * Trigger: body.is-handset-landscape aus dem Viewport-Modul (booking.html) —
 * dieselbe Single-Source-of-Truth wie der Tischplan. Große Tablets quer
 * (Höhe>600px) sind KEIN Handset → behalten unverändert die Desktop-Ansicht.
 * '> ' (direktes Kind) trifft nur die echte Kopf-/Fußzeile. :not(.fullscreen)
 * lässt den Vollbild-Modus des Buchungsformulars (eigenes Flex-Layout) in Ruhe.
 * Rest-Hinweis: sehr kleine Alt-Handys (<768px BREIT quer) behalten via
 * @768-Regel 16px Innenpadding → minimaler kosmetischer Rest, bewusst belassen. */
body.is-handset-landscape .modal:not(.fullscreen) {
  max-height: 100vh !important;   /* Fallback für Browser ohne dvh */
  max-height: 100dvh !important;
  border-radius: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
}
/* Kopf bleibt beim Scrollen oben sichtbar */
body.is-handset-landscape .modal:not(.fullscreen) > h2 {
  position: sticky; top: 0; z-index: 6;
  background: var(--surface);
  margin: 0 0 10px;
  padding: 12px 0 8px;
}
/* Button-Leiste bleibt beim Scrollen unten sichtbar */
body.is-handset-landscape .modal:not(.fullscreen) > .form-actions,
body.is-handset-landscape .modal:not(.fullscreen) > .modal-actions {
  position: sticky; bottom: 0; z-index: 6;
  background: var(--surface);
  margin: 8px 0 0;
  padding: 10px 0 12px;
  box-shadow: 0 -8px 16px -8px rgba(0,0,0,.5);
}

/* ── Querformat-Support Vollbild-Buchungsformular (Task #2, 03.06.2026) ─────
 * Hotel- + Tisch-Buchungsformular öffnen IMMER mit .fullscreen
 * (BookingForm.open ~Z.17298, TableBookingForm.open ~Z.14396) → der generische
 * Modal-Block oben greift dort NICHT (er ist :not(.fullscreen)). Und das
 * Kompakt-Raster (gap/font/4 Spalten, weiter oben global definiert) ist für
 * 1080p-Desktop gedacht. .modal-booking.fullscreen ist ein flex-column-Layout
 * mit height:92vh und einem form-grid-3 (flex:1) OHNE eigenen overflow → bei
 * wenig Höhe (Handy quer ~390px) läuft der Inhalt über und das GANZE Modal
 * scrollt: Kopf UND Button-Leiste verschwinden mit.
 *
 * Fix im Handy-Quer: das Vollbild wie ein normales Scroll-Modal behandeln.
 * display:block hebt das flex-column auf → der von .modal geerbte overflow-y:auto
 * scrollt als EIN Block; Kopf (h2) klebt oben, Button-Leiste (.form-actions)
 * klebt unten (dieselbe sticky-Technik wie der generische Block). display:block
 * ist robuster als "nur das Grid scrollen lassen": unabhängig von der inneren
 * Struktur (verschachtelte form-grid-3, Zusatzzeilen wie bResNumberRow/bChangelog)
 * und ohne overflow auf den verschachtelten Grids. Raster zusätzlich auf 2
 * Spalten (touch-freundlich, wie das Hochformat Z.1871); .note-inline (im
 * Vollbild span 3, Z.2168) wird im 2er-Raster auf volle Breite gesetzt.
 * Verlässt der Nutzer das Vollbild (⛶), greift automatisch der generische
 * :not(.fullscreen)-Block. NUR Handy-Quer (is-handset-landscape) — Desktop und
 * große Tablets behalten das kompakte Vollbild-Raster unverändert. open/toggle/
 * close setzen NUR die Klasse (keine inline-Styles) → !important genügt. */
body.is-handset-landscape .modal-booking.fullscreen {
  display: block;
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  max-height: 100vh !important;   /* Fallback für Browser ohne dvh */
  max-height: 100dvh !important;
  border-radius: 0 !important;
  padding: 0 14px !important;      /* vertikal 0 → Kopf/Fuß bringen den Abstand selbst */
}
body.is-handset-landscape .modal-booking.fullscreen > h2 {
  position: sticky; top: 0; z-index: 6;
  background: var(--surface);
  margin: 0 0 8px;
  padding: 10px 0 8px;
  font-size: 16px !important;
}
body.is-handset-landscape .modal-booking.fullscreen > .form-actions {
  position: sticky; bottom: 0; z-index: 6;
  background: var(--surface);
  margin: 8px 0 0;
  padding: 8px 0 10px;
  box-shadow: 0 -8px 16px -8px rgba(0,0,0,.5);
}
body.is-handset-landscape .modal-booking.fullscreen .form-grid-3 {
  grid-template-columns: 1fr 1fr !important;   /* 4 → 2 Spalten, touch-freundlich */
}
body.is-handset-landscape .modal-booking.fullscreen .form-grid-3 .note-inline {
  grid-column: 1 / -1 !important;   /* statt span 3 (Z.2168) im 2-Spalten-Raster */
}

/* ── Querformat-Support Gäste-Detailpanel als Overlay (Task #4, 03.06.2026) ──
 * Im Handy-Quer das Gast-Detail-Panel nicht als 2. Spalte neben der Liste,
 * sondern als Vollflächen-Overlay ÜBER der Liste zeigen (identisch zur bereits
 * vorhandenen @max-width:480-Regel Z.1946, die im Querformat >480px breit aber
 * nicht greift). Schließen über den vorhandenen ✕-Button (.gdp-close →
 * GuestModule.closeDetail()). Große Tablets quer (kein Handset) behalten das
 * komfortable 2-Spalten-Layout. */
body.is-handset-landscape .guests-content { position: relative; }
body.is-handset-landscape .guest-detail-panel {
  position: absolute; inset: 0; width: 100% !important; z-index: 5;
  background: var(--bg); border-left: none !important;
}

/* ── Querformat-Support Tischplan-Ansicht aufräumen (Task #11, 03.06.2026) ──
 * Im Handy-Quer UND nur wenn der Tischplan aktiv ist (body.tp-active, gesetzt
 * von Tischplan.toggle()) die nicht zwingende Bedien-Chrome ausblenden, damit
 * der Plan maximale Fläche bekommt. Es BLEIBEN: Restaurant-Auswahl, Datum,
 * +Tischreservierung, der Plan selbst und ⤢ (Auto-Einpassen).
 * AUSGEBLENDET: Dashboard-Banner (#restaurantDashboard, rein informativ),
 * Tagesplan-Zoom-Slider (#rgZoomWrap, im Tischplan sinnlos), Tischplan-Zoom-
 * Slider (.tp-zoom-controls — ⤢ ersetzt sie), Auto-Schließen-/Vergangene-
 * freigeben-Toggles (#tpAutoCloseBtn / #tpFinishPastBtn, am Handy selten nötig).
 * .tp-zoom-wrap / .tp-zoom-controls / #tpFinishPastBtn sind JS-Hooks aus
 * Tischplan._buildTabs. Scope body.tp-active → andere Restaurant-Ansichten
 * (Tagesplan/Wochenplan) und Desktop/große Tablets bleiben unberührt. */
body.is-handset-landscape.tp-active #restaurantDashboard,
body.is-handset-landscape.tp-active #rgZoomWrap,
body.is-handset-landscape.tp-active .tp-zoom-controls,
body.is-handset-landscape.tp-active #tpAutoCloseBtn,
body.is-handset-landscape.tp-active #tpFinishPastBtn { display: none !important; }
/* ⤢ rechtsbündig, da der margin-left:auto-Träger (#tpAutoCloseBtn) nun aus ist */
body.is-handset-landscape.tp-active .tp-zoom-wrap { margin-left: auto !important; }

/* ── Querformat-Support Tischplan: komplette Restaurant-Toolbar ausblenden
 * (03.06.2026, User-Wunsch) ─────────────────────────────────────────────────
 * Im Handy-Quer-Tischplan die ganze obere Toolbar #toolbarRestaurant ausblenden
 * (Betrieb-Dropdown, großes Datum, Tages-/Wochenplan, Heute/◀▶, Datums-Eingabe,
 * +Tischreservierung, Hilfe-? und den Tagesplan-Zoom) → maximale Planfläche.
 * Das Datum bleibt über die globale Topbar sichtbar. Da #btnTischplan (Rück-
 * Umschalter) Teil dieser Toolbar ist, übernimmt der JS-Button .tp-back-btn in
 * der bleibenden Tischplan-Leiste (#tpObjektTabs, ruft Tischplan.toggle()) den
 * Rückweg. .tp-back-btn ist global versteckt und NUR hier sichtbar — auf
 * Desktop/Tagesplan steht weiterhin die normale Toolbar zur Verfügung.
 * Scope body.tp-active → Tagesplan/Wochenplan/Desktop unberührt. */
.tp-back-btn { display: none; }
body.is-handset-landscape.tp-active #toolbarRestaurant { display: none !important; }
body.is-handset-landscape.tp-active .tp-back-btn { display: inline-flex !important; }