/* GENERIERT von scripts/build-css.js aus assets/css/admin/ — NICHT von Hand aendern, sondern die Teildateien. */
/* ══ 01-tokens.css ══ */
/* ═══════════════════════════════════════════════════════════════════════════
   01 · Design-Tokens — EINZIGE Stelle fuer Farben, Masse und Radien.
   Hell = :root, Dunkel = html[data-bs-theme="dark"] (gesetzt vom Kopf-Skript in layout.ejs
   aus localStorage «admin-theme»). Komponenten benutzen NUR var(--c-*) / var(--sb-*) /
   var(--brand-*) — nie Hex-Werte. Neue Farbe noetig? Hier als Token anlegen, nicht im View.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Flaechen */
  --c-bg:         #f1f5f9;   /* Seitenhintergrund */
  --c-surface:    #ffffff;   /* Karten, Eingaben, Menues */
  --c-surface-2:  #f8fafc;   /* leicht abgesetzt: Hover, Kopfzeilen, Zusammenfassungen */
  --c-surface-3:  #f1f5f9;   /* Chips, Pillen, Tabellenkopf, Schalter-Hintergrund */
  --c-surface-4:  #e2e8f0;   /* Balken-Hintergrund, Trennflaechen, Nummern-Kreise */
  --c-border:     #e2e8f0;
  --c-border-2:   #cbd5e1;   /* kraeftiger: Eingaben, gestrichelte Rahmen */
  --c-shadow-rgb: 15,23,42;  /* fuer rgba(var(--c-shadow-rgb), .08) */

  /* Text */
  --c-text:       #0f172a;   /* Ueberschriften, Werte */
  --c-text-2:     #334155;   /* Fliesstext, Menuepunkte */
  --c-text-3:     #475569;   /* Nebentext */
  --c-muted:      #64748b;   /* Hinweise, Labels */
  --c-faint:      #94a3b8;   /* Platzhalter, Pfeile */
  --c-faint-2:    #cbd5e1;   /* Icons in leeren Vorschauen */
  --c-on-accent:  #ffffff;   /* Text auf gefuellten Akzent-/Status-Flaechen — in beiden Modi weiss */

  /* Akzent (neutrales Blau; die Mandantenfarbe ist --brand-primary) */
  --c-accent:       #2563eb; /* Fuellung, Rahmen */
  --c-accent-fg:    #2563eb; /* Text auf Flaeche (dunkel: heller) */
  --c-accent-deep:  #1e40af; /* dunkler Text auf getoenter Flaeche */
  --c-accent-soft:  #93c5fd; /* Hover-Rahmen */
  --c-accent-tint:  #dbeafe; /* getoente Flaeche, Fokus-Ring */
  --c-accent-bg:    #eff6ff; /* ganz leichte Toenung */

  /* Status: X = Fuellung · X-fg = Text auf Flaeche · X-deep = dunkler Text auf X-bg · X-bg = getoente Flaeche */
  --c-success: #16a34a; --c-success-fg: #16a34a; --c-success-deep: #166534; --c-success-bg: #dcfce7; --c-success-bg-2: #f0fdf4;
  --c-warn:    #f59e0b; --c-warn-fg:    #d97706; --c-warn-deep:    #92400e; --c-warn-bg:    #fef3c7; --c-warn-bg-2:    #fffbeb;
  --c-danger:  #dc2626; --c-danger-fg:  #dc2626; --c-danger-deep:  #991b1b; --c-danger-bg:  #fee2e2; --c-danger-bg-2:  #fef2f2;
  --c-orange:  #f97316; --c-orange-fg:  #ea580c; --c-orange-deep:  #9a3412; --c-orange-bg:  #ffedd5; --c-orange-bg-2:  #fff7ed;
  --c-violet:  #7c3aed; --c-violet-fg:  #7c3aed; --c-violet-deep:  #5b21b6; --c-violet-bg:  #ede9fe; --c-violet-bg-2:  #f5f3ff;
  --c-console: #1e1e1e; --c-console-text: #f8f8f2;   /* Log-Konsole, Code */

  /* Seitenleiste — in beiden Modi dunkel */
  --sb-bg: #1a1d23; --sb-border: #2d3748; --sb-text: #9ca3af; --sb-hover: #2d3748; --sb-hover-text: #e2e8f0;
  --sb-section: rgba(255,255,255,.4); --sb-line: rgba(255,255,255,.08);

  /* Marke — die Werte je Mandant setzt layout.ejs in einem 4-Zeilen-<style> (einzige erlaubte Inline-CSS) */
  --brand-primary: #2563eb; --brand-primary-dark: #1d4ed8; --brand-primary-light: #dbeafe; --brand-secondary: #2563eb;
  --sidebar-active: var(--brand-primary);

  /* Masse */
  --sidebar-width: 240px; --topbar-h: 56px; --rad-card: 14px; --rad-ctl: 10px; --help-drawer-w: 400px;
  --font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

html[data-bs-theme="dark"] {
  --c-bg: #0f1216; --c-surface: #171b22; --c-surface-2: #1c222b; --c-surface-3: #242b36; --c-surface-4: #2a313c;
  --c-border: #2a313c; --c-border-2: #475569; --c-shadow-rgb: 0,0,0;
  --c-text: #f1f5f9; --c-text-2: #e5e7eb; --c-text-3: #cbd5e1; --c-muted: #9aa4b2; --c-faint: #6b7280; --c-faint-2: #4b5563;
  --c-accent: #3b82f6; --c-accent-fg: #93c5fd; --c-accent-deep: #bfdbfe; --c-accent-soft: #3b82f6; --c-accent-tint: rgba(59,130,246,.28); --c-accent-bg: rgba(59,130,246,.16);
  --c-success: #22c55e; --c-success-fg: #4ade80; --c-success-deep: #86efac; --c-success-bg: rgba(34,197,94,.18); --c-success-bg-2: rgba(34,197,94,.10);
  --c-warn:    #f59e0b; --c-warn-fg:    #fbbf24; --c-warn-deep:    #fcd34d; --c-warn-bg:    rgba(245,158,11,.20); --c-warn-bg-2: rgba(245,158,11,.10);
  --c-danger:  #ef4444; --c-danger-fg:  #f87171; --c-danger-deep:  #fca5a5; --c-danger-bg:  rgba(239,68,68,.18);  --c-danger-bg-2: rgba(239,68,68,.10);
  --c-orange:  #f97316; --c-orange-fg:  #fb923c; --c-orange-deep:  #fdba74; --c-orange-bg:  rgba(249,115,22,.18); --c-orange-bg-2: rgba(249,115,22,.10);
  --c-violet:  #8b5cf6; --c-violet-fg:  #a78bfa; --c-violet-deep:  #c4b5fd; --c-violet-bg:  rgba(124,58,237,.22); --c-violet-bg-2: rgba(124,58,237,.12);
  --sb-bg: #0b0e12; --sb-border: #1c222b;
  color-scheme: dark;

  /* Bootstrap 5.3 auf die Tokens gebrueckt */
  --bs-body-bg: var(--c-bg); --bs-body-bg-rgb: 15,18,22;
  --bs-body-color: var(--c-text-2); --bs-body-color-rgb: 229,231,235;
  --bs-secondary-bg: var(--c-surface); --bs-tertiary-bg: var(--c-surface-2);
  --bs-secondary-color: var(--c-muted); --bs-tertiary-color: var(--c-faint);
  --bs-border-color: var(--c-border); --bs-border-color-translucent: rgba(255,255,255,.08);
  --bs-emphasis-color: var(--c-text); --bs-link-color: var(--c-accent-fg); --bs-link-hover-color: var(--c-accent-deep);
}

/* ══ 02-base.css ══ */
/* Grundgeruest: Reset, Seite, Rahmen (#content), Inhaltsbereich. Sidebar/Topbar in 03-shell/. */

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--c-bg);
  font-family: var(--font-ui);
  font-feature-settings: 'cv11', 'ss01', 'tnum';
  font-size: 14px;
}

/* ── Outer wrapper ─────────────────────────────────────── */
.wrapper { display: flex; min-height: 100vh; }

/* ── Main content area ──────────────────────────────────── */
#content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Content padding ────────────────────────────────────── */
.content-area { padding: 24px; }

/* Kein waagrechtes Scrollen (Bootstrap-Zeilen mit negativem Rand). overflow-x: clip statt hidden — hidden macht .wrapper/#content zum Scroll-Container und position:sticky der .top-bar greift nicht mehr (Damir 09.10.2026). */
html, body, .wrapper, #content { overflow-x: clip; }
.wrapper { max-width: 100vw; }

/* ══ 03-shell/sidebar.css ══ */
/* Seitenleiste (immer dunkel, Tokens --sb-*), Abschnitte ein-/ausklappbar (html.sb-collapsed-<key>), Handy: off-canvas. */
/* ── Sidebar ────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--sb-bg);
  color: var(--sb-text);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 200;
  overflow-y: auto;
  /* Slim dark-theme scrollbar — visible only while scrolling on macOS,
     thin gutter on Linux/Win. Replaces the default ~16 px chrome bar. */
  scrollbar-width: thin;
  scrollbar-color: #2d3748 transparent;
}
#sidebar::-webkit-scrollbar       { width: 6px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.2s;
}
#sidebar:hover::-webkit-scrollbar-thumb { background: var(--sb-hover); }
#sidebar::-webkit-scrollbar-thumb:hover { background: var(--c-text-3); }

.sidebar-brand {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--sb-border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-on-accent);
  white-space: nowrap;
}
.sidebar-brand i { font-size: 20px; color: var(--sidebar-active); flex-shrink: 0; }

.sidebar-nav {
  list-style: none;
  padding: 10px 8px;
  margin: 0;
  flex: 1;
}
.sidebar-nav li { margin-bottom: 2px; }
.sidebar-nav li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--sb-text);
  text-decoration: none;
  transition: background 0.13s, color 0.13s;
  white-space: nowrap;
}
.sidebar-nav li a i { font-size: 16px; flex-shrink: 0; }
.sidebar-nav li a:hover  { background: var(--sb-hover); color: var(--sb-hover-text); }
.sidebar-nav li.active a { background: var(--sidebar-active); color: var(--c-on-accent); }

.sidebar-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--sb-border);
}
.sidebar-footer a {
  color: var(--sb-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.sidebar-footer a:hover { color: var(--c-on-accent); }

/* ── Desktop sidebar collapse (>= 768px) ────────────────── */
/* html.sb-hidden is set pre-paint from localStorage (layout.ejs) and
   toggled by #sidebarToggle — frees the full viewport width for content
   on tablets/small laptops. Mobile (<768px) keeps the off-canvas flow. */
@media (min-width: 768px) {
  html.sb-hidden #sidebar { display: none; }
  html.sb-hidden #content { margin-left: 0; }
}

/* ── Mobile responsive (< 768px) ───────────────────────── */
/* Hamburger button — desktop: collapses the sidebar for more content
   width (persisted, pre-paint class on <html>); mobile: off-canvas. */
.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--c-text-2);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  margin-right: 10px;
}

/* Overlay behind open sidebar on mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 199;
}
.sidebar-overlay.active { display: block; }

@media (max-width: 767.98px) {
  /* Show hamburger */
  .sidebar-toggle { display: inline-flex; align-items: center; }

  /* Sidebar slides off-screen by default */
  #sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  /* Slide in when open */
  #sidebar.open {
    transform: translateX(0);
  }

  /* Content fills full width */
  #content {
    margin-left: 0;
  }

  /* Tighter padding on small screens */
  .content-area { padding: 14px; }
  .top-bar { padding: 0 14px; }

  /* Make tables scroll horizontally */
  .table-responsive-force { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Stat cards: 2 per row on mobile */
  .stat-row { flex-wrap: wrap; }
  .stat-row .col-md-3 { flex: 0 0 50%; max-width: 50%; }

  /* Login card full width */
  .login-card { width: 100%; max-width: 380px; margin: 16px; }
}

    #sbBrandWordmark { display:none; height:30px; flex:1 1 auto; min-width:0; max-width:200px; }
    .sidebar-brand.has-wordmark #sbBrandWordmark { display:block; }
    .sidebar-brand.has-wordmark #sbBrandLogo, .sidebar-brand.has-wordmark #sbBrandIcon, .sidebar-brand.has-wordmark #sbBrandName { display:none !important; }
  
#sidebar .sidebar-nav li.active a            { background: var(--brand-primary); color: var(--c-on-accent); }
#sidebar .sidebar-nav li a:hover             { background: var(--brand-primary-dark); color: var(--sb-hover-text); }
#sidebar .sidebar-nav li.sidebar-section {
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.4);
      padding: 14px 16px 6px 16px;
      margin-top: 4px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      user-select: none;
      transition: color 120ms;
    }
#sidebar .sidebar-nav li.sidebar-section:first-of-type {
      border-top: none;
      margin-top: 0;
    }
#sidebar .sidebar-nav li.sidebar-section:hover {
      color: rgba(255, 255, 255, 0.7);
    }
#sidebar .sidebar-nav li.sidebar-section .section-chevron {
      font-size: 0.85rem;
      transition: transform 160ms ease;
      opacity: 0.55;
    }
html.sb-collapsed-catalog #sidebar .sidebar-nav li[data-belongs-to="catalog"],
    html.sb-collapsed-sales #sidebar .sidebar-nav li[data-belongs-to="sales"],
    html.sb-collapsed-devices_team #sidebar .sidebar-nav li[data-belongs-to="devices_team"],
    html.sb-collapsed-account #sidebar .sidebar-nav li[data-belongs-to="account"],
    html.sb-collapsed-system #sidebar .sidebar-nav li[data-belongs-to="system"],
    html.sb-collapsed-superadmin #sidebar .sidebar-nav li[data-belongs-to="superadmin"],
    html.sb-collapsed-webshop #sidebar .sidebar-nav li[data-belongs-to="webshop"],
    html.sb-collapsed-hotel #sidebar .sidebar-nav li[data-belongs-to="hotel"],
    html.sb-collapsed-members #sidebar .sidebar-nav li[data-belongs-to="members"],
    html.sb-collapsed-lieferservice #sidebar .sidebar-nav li[data-belongs-to="lieferservice"],
    html.sb-collapsed-access_roles #sidebar .sidebar-nav li[data-belongs-to="access_roles"] {
      display: none;
    }
html.sb-collapsed-catalog #sidebar .sidebar-nav li.sidebar-section[data-section-key="catalog"] > .section-chevron,
    html.sb-collapsed-sales #sidebar .sidebar-nav li.sidebar-section[data-section-key="sales"] > .section-chevron,
    html.sb-collapsed-devices_team #sidebar .sidebar-nav li.sidebar-section[data-section-key="devices_team"] > .section-chevron,
    html.sb-collapsed-account #sidebar .sidebar-nav li.sidebar-section[data-section-key="account"] > .section-chevron,
    html.sb-collapsed-system #sidebar .sidebar-nav li.sidebar-section[data-section-key="system"] > .section-chevron,
    html.sb-collapsed-superadmin #sidebar .sidebar-nav li.sidebar-section[data-section-key="superadmin"] > .section-chevron,
    html.sb-collapsed-webshop #sidebar .sidebar-nav li.sidebar-section[data-section-key="webshop"] > .section-chevron,
    html.sb-collapsed-hotel #sidebar .sidebar-nav li.sidebar-section[data-section-key="hotel"] > .section-chevron,
    html.sb-collapsed-members #sidebar .sidebar-nav li.sidebar-section[data-section-key="members"] > .section-chevron,
    html.sb-collapsed-lieferservice #sidebar .sidebar-nav li.sidebar-section[data-section-key="lieferservice"] > .section-chevron,
    html.sb-collapsed-access_roles #sidebar .sidebar-nav li.sidebar-section[data-section-key="access_roles"] > .section-chevron {
      transform: rotate(-90deg);
    }
#sidebar .sidebar-nav li.sidebar-dashboard-row {
      display: flex;
      align-items: stretch;
      padding: 0;
    }
#sidebar .sidebar-nav li.sidebar-dashboard-row > a {
      flex: 1;
      min-width: 0;
    }
#sidebar .sidebar-nav li.sidebar-dashboard-row button.sidebar-collapse-all-btn {
      flex-shrink: 0;
      background: transparent;
      border: none;
      color: rgba(255, 255, 255, 0.45);
      cursor: pointer;
      width: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: color 120ms, background 120ms;
      border-left: 1px solid rgba(255, 255, 255, 0.06);
    }
#sidebar .sidebar-nav li.sidebar-dashboard-row button.sidebar-collapse-all-btn:hover {
      color: rgba(255, 255, 255, 0.95);
      background: rgba(255, 255, 255, 0.06);
    }
#sidebar .sidebar-nav li.sidebar-dashboard-row button.sidebar-collapse-all-btn i {
      font-size: 1rem;
    }
#sidebar .sidebar-brand i                    { color: var(--brand-primary-light); }
#sidebar                                     { border-right: 3px solid color-mix(in srgb, var(--brand-primary) 20%, transparent); }

/* ══ 03-shell/topbar.css ══ */
/* Kopfzeile: Titel, Gruppen-Pille (Mandant · Hilfe · Theme · Sprache · Datum) und Benutzer-Pille. */
/* ── Top bar ────────────────────────────────────────────── */
.top-bar {
  height: var(--topbar-h);
  background: rgba(255,255,255,.86); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--c-border);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.top-bar-left  { display: flex; align-items: center; gap: 12px; min-width: 0; }
.top-bar-right { display: flex; align-items: center; gap: 10px; }
.topbar-group, .topbar-user-pill {
      display: inline-flex; align-items: stretch; height: 38px; position: relative;
      background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }
.topbar-group > .dropdown { display: flex; position: relative; }
.topbar-group > * + * > .tb-seg, .topbar-group > * + .tb-seg { border-left: 1px solid var(--c-border); }
.topbar-group > :first-child > .tb-seg, .topbar-group > .tb-seg:first-child { border-radius: 11px 0 0 11px; }
.topbar-group > :last-child  > .tb-seg, .topbar-group > .tb-seg:last-child  { border-radius: 0 11px 11px 0; }
.tb-seg {
      display: inline-flex; align-items: center; gap: 8px; height: 100%;
      padding: 0 12px; margin: 0; background: transparent; border: 0;
      font-size: 13px; color: var(--c-text-2); white-space: nowrap; text-decoration: none;
      transition: background 120ms;
    }
button.tb-seg, button.tb-user { cursor: pointer; }
button.tb-seg:hover, button.tb-seg[aria-expanded="true"], a.tb-seg:hover { background: var(--c-surface-2); }
button.tb-seg:focus-visible, button.tb-user:focus-visible, a.tb-seg:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
a.tb-help { color: var(--c-muted); }
a.tb-help:hover { color: var(--c-text-2); }
.tb-seg .tb-text { font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.tb-caret { color: var(--c-faint); font-size: 0.65rem; }
.tb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-faint); box-shadow: 0 0 0 3px var(--c-border); flex-shrink: 0; }
.tb-tenant .tb-text { color: var(--c-muted); }
.tb-tenant.active .tb-dot { background: var(--c-orange); box-shadow: 0 0 0 3px var(--c-orange-bg); }
.tb-tenant.active .tb-text { color: var(--c-orange-deep); font-weight: 600; }
.tb-loc .tb-text { color: var(--c-muted); }
.tb-loc.active .tb-dot { background: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-tint); }
.tb-loc.active .tb-text { color: var(--c-accent-deep); font-weight: 600; }
.tb-loc.locked { cursor: default; }
.loc-menu .tm-row.is-active { background: var(--c-accent-bg); }
.loc-menu .tm-row.is-active .tm-name { color: var(--c-accent-deep); }
.loc-menu .tm-check { color: var(--c-accent-fg); }
.tb-lang .tb-text { font-weight: 650; letter-spacing: 0.06em; font-size: 12px; color: var(--c-text-3); }
.tb-date { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.topbar-user-pill { background: var(--c-surface-2); }
.tb-user {
      display: inline-flex; align-items: center; gap: 9px; height: 100%;
      padding: 0 10px 0 5px; margin: 0; border: 0; background: transparent; border-radius: 11px;
      font-size: 13px; color: var(--c-text-2); white-space: nowrap; transition: background 120ms;
    }
button.tb-user:hover, button.tb-user[aria-expanded="true"] { background: var(--c-surface-3); }
.tb-user .avatar {
      width: 28px; height: 28px; border-radius: 50%; position: relative; flex-shrink: 0;
      background: var(--brand-primary); color: var(--c-on-accent); font-weight: 700; font-size: 0.8rem;
      display: inline-flex; align-items: center; justify-content: center;
    }
.tb-user .tb-id { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.tb-user .email { font-size: 12.5px; font-weight: 600; color: var(--c-text-2); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-user .role  { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--brand-primary-dark); }
.tb-user .role.super { color: var(--c-warn-fg); }
.tb-user .tb-caret { margin-left: 2px; }
.tb-user .online-dot {
      position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%;
      border: 2px solid var(--c-surface-2); background: var(--c-faint); transition: background 0.25s ease;
    }
.tb-user .online-dot.online  { background: var(--c-success); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); animation: dot-pulse 2.4s ease-in-out infinite; }
.tb-user .online-dot.offline { background: var(--c-danger); }
@keyframes dot-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
      70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
      100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    }
@media (max-width: 991.98px) {
      .tb-tenant .tb-text, .tb-loc .tb-text, .tb-user .tb-id { display: none; }
      .tb-seg { padding: 0 10px; }
      .tb-user { padding: 0 8px 0 5px; }
    }
@media (max-width: 767.98px) {
      .top-bar { flex-wrap: nowrap; height: var(--topbar-h); min-height: 0; gap: 8px; padding: 0 10px; }
      .top-bar-left { flex: 1 1 auto; min-width: 0; gap: 6px; }
      .top-bar-left .sidebar-toggle { margin-right: 0; padding: 4px 6px; flex-shrink: 0; }
      .top-bar-left h6 { flex: 1 1 auto; min-width: 0; max-width: none; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .top-bar-right { flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
      .topbar-group, .topbar-user-pill { height: 34px; }
      .tb-seg { padding: 0 8px; gap: 6px; }
      .tb-user { padding: 0 7px 0 4px; gap: 6px; }
      .tb-user .avatar { width: 26px; height: 26px; font-size: 0.75rem; }
    }
@media (max-width: 400px) {
      .tb-tenant .tb-caret { display: none; }
      .top-bar-left h6 { font-size: 13px; }
    }
.topbar-user-dropdown .dropdown-menu { min-width: 250px; padding: 8px 0; }
.topbar-user-dropdown .dropdown-meta { padding: 8px 14px; font-size: 0.8rem; line-height: 1.4; }
.topbar-user-dropdown .dropdown-meta .label {
      font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
      color: var(--c-faint); display: block; margin-top: 4px;
    }
.topbar-user-dropdown .dropdown-meta .value { color: var(--c-text-2); word-break: break-all; }
.topbar-user-dropdown .dropdown-meta .value:first-of-type { margin-top: 0; }
.topbar-lang-dropdown .dropdown-menu form { width: 100%; }
.topbar-lang-dropdown .dropdown-item { cursor: pointer; }
.topbar-lang-dropdown .dropdown-item.active { background: rgba(37, 99, 235, 0.1); color: var(--c-accent-deep); }
html[data-bs-theme="dark"] .top-bar { background: rgba(23,27,34,.86); }

/* ══ 03-shell/tenant-menu.css ══ */
/* Mandanten-/Standort-Umschalter (Dropdown mit Suche) */
.tenant-menu { width: 340px; max-width: calc(100vw - 24px); padding: 0; border: 1px solid var(--c-border); border-radius: 14px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06); overflow: hidden; }
.tm-head { padding: 12px 12px 10px; border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
.tm-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.tm-count { font-variant-numeric: tabular-nums; background: var(--c-surface-3); color: var(--c-text-3); border-radius: 999px; padding: 1px 8px; font-size: 11px; letter-spacing: 0; }
.tm-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; margin: 0;
      border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-surface-2); color: var(--c-faint); }
.tm-search:focus-within { border-color: var(--brand-primary); background: var(--c-surface); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.tm-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13.5px; color: var(--c-text); }
.tm-search input::placeholder { color: var(--c-faint); }
.tm-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tm-list { max-height: min(60vh, 440px); overflow-y: auto; padding: 6px; }
.tm-row-form { margin: 0; }
.tm-row-form[hidden] { display: none; }
.tm-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px;
      background: transparent; text-align: left; color: var(--c-text-2); cursor: pointer; transition: background 100ms; }
.tm-row:hover, .tm-row:focus-visible { background: var(--c-surface-2); outline: 0; }
.tm-row.is-active { background: var(--c-orange-bg-2); }
.tm-row.is-active .tm-name { color: var(--c-orange-deep); }
.tm-avatar { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
      font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; }
.tm-avatar-logo { background: var(--c-surface); border: 1px solid var(--c-border); overflow: hidden; }
.tm-avatar-logo img { width: 100%; height: 100%; object-fit: contain; }
.tm-avatar-none { background: var(--c-surface-3); color: var(--c-faint); font-size: 14px; }
.tm-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.tm-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-sub { font-size: 11.5px; color: var(--c-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-muted); background: var(--c-surface-3); border-radius: 6px; padding: 2px 6px; flex-shrink: 0; }
.tm-row.is-inactive .tm-name { color: var(--c-muted); font-weight: 500; }
.tm-check { color: var(--c-orange-fg); font-size: 16px; flex-shrink: 0; }
.tm-none .tm-name { color: var(--c-muted); font-weight: 500; }
.tm-sep { height: 1px; background: var(--c-surface-3); margin: 6px 4px; }
.tm-empty { padding: 18px 10px; text-align: center; color: var(--c-faint); font-size: 13px; }
@media (max-width: 575.98px) { .tenant-menu { width: calc(100vw - 20px); } }

/* ══ 03-shell/brand.css ══ */
/* Mandantenfarbe auf Bootstrap-Bauteile (Werte: --brand-primary/-dark/-light aus layout.ejs) */
.btn-primary                                 { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; }
.btn-primary:hover, .btn-primary:focus       { background-color: var(--brand-primary-dark) !important; border-color: var(--brand-primary-dark) !important; }
.btn-outline-primary                         { color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; }
.btn-outline-primary:hover                   { background-color: var(--brand-primary) !important; color: var(--c-on-accent) !important; }
.badge.bg-primary, .badge.text-bg-primary    { background-color: var(--brand-primary) !important; }
.form-control:focus, .form-select:focus      { border-color: var(--brand-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-primary-light) 50%, transparent); }
.page-item.active .page-link                 { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.page-link                                   { color: var(--brand-primary); }
.page-link:hover                             { color: var(--brand-primary-dark); }
.nav-pills .nav-link.active                  { background-color: var(--brand-primary); }
.nav-tabs  .nav-link.active                  { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.text-primary                                { color: var(--brand-primary) !important; }
.stat-icon.bg-primary                        { background-color: var(--brand-primary) !important; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--brand-primary); }

/* ══ 03-shell/help-drawer.css ══ */
/* ── Handbuch-Schublade rechts ── */
:root { --help-drawer-w: 400px; }

  .help-drawer {
    position: fixed; inset: 0 0 0 auto; width: var(--help-drawer-w); max-width: 100vw;
    z-index: 210; display: flex; flex-direction: column;
    background: var(--c-surface); border-left: 1px solid var(--c-border);
    box-shadow: -6px 0 28px rgba(15, 23, 42, .10);
    /* Closed = visibility:hidden, not display:none, so the panel can slide.
       The delayed visibility transition keeps it focusable until it is gone. */
    visibility: hidden; transform: translateX(100%);
    transition: transform 170ms ease, visibility 0s linear 170ms;
  }
  html.help-open .help-drawer {
    visibility: visible; transform: none;
    transition: transform 170ms ease, visibility 0s;
  }

  .help-drawer-scrim {
    position: fixed; inset: 0; z-index: 205; background: rgba(15, 23, 42, .35);
    opacity: 0; visibility: hidden; transition: opacity 170ms ease, visibility 0s linear 170ms;
  }
  html.help-open .help-drawer-scrim { opacity: 1; visibility: visible; transition: opacity 170ms ease, visibility 0s; }

  /* Wide screens read the article BESIDE the page — that is the whole point,
     so the content column gives way instead of being covered. Below 1200 px
     there is no room for both and the panel overlays with a scrim. */
  @media (min-width: 1200px) {
    #content { transition: margin-right 170ms ease; }
    html.help-open #content { margin-right: var(--help-drawer-w); }
    .help-drawer-scrim { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .help-drawer, .help-drawer-scrim, #content { transition: none; }
  }

  .help-drawer-head {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    height: var(--topbar-h, 56px); padding: 0 8px 0 14px;
    border-bottom: 1px solid var(--c-border); background: var(--c-surface);
  }
  .help-drawer-head > .bi-question-circle { color: var(--c-muted); flex-shrink: 0; }
  .help-drawer-title {
    font-size: 13px; font-weight: 600; color: var(--c-text-2); flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .help-drawer-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0; padding: 0; border: 0; border-radius: 7px;
    background: transparent; color: var(--c-muted); text-decoration: none; cursor: pointer;
    transition: background 120ms, color 120ms;
  }
  .help-drawer-icon:hover { background: var(--c-surface-3); color: var(--c-text-2); }
  .help-drawer-icon:focus-visible { outline: 2px solid var(--sidebar-active, var(--c-accent)); outline-offset: -2px; }

  .help-drawer-search { flex-shrink: 0; padding: 10px 14px; border-bottom: 1px solid var(--c-border); }
  .help-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 14px 32px; }
  .help-drawer-body:focus { outline: none; }

  /* Articles written for a 62 rem page have to survive a 400 px column. */
  .help-prose-drawer { max-width: none; font-size: .9rem; line-height: 1.6; }
  .help-prose-drawer h1 { font-size: 1.2rem; }
  .help-prose-drawer h2 { font-size: 1.02rem; margin-top: 1.4rem; }
  .help-prose-drawer h3 { font-size: .94rem; }
  .help-prose-drawer table { font-size: .82rem; display: block; overflow-x: auto; }
  .help-prose-drawer pre { font-size: .8rem; }

  .help-frag-section h6 { letter-spacing: .04em; }
  .help-frag-section ul li { padding: 2px 0; }
  .help-frag-hit {
    display: block; padding: 8px 10px; margin-bottom: 4px; border-radius: 8px;
    color: inherit; text-decoration: none; border: 1px solid var(--c-border);
  }
  .help-frag-hit:hover { background: var(--c-surface-2); }

/* ── Handbuch-Inhalt (.help-prose; frueher views/help/_styles.ejs, in Schublade und auf /admin/help) ── */
.help-prose { max-width: 62rem; line-height: 1.65; }
  .help-prose h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: .75rem; }
  .help-prose h2 { font-size: 1.15rem; font-weight: 700; margin-top: 1.75rem; margin-bottom: .5rem; }
  .help-prose h3 { font-size: 1rem; font-weight: 600; margin-top: 1.25rem; margin-bottom: .4rem; }
  .help-prose p, .help-prose ul, .help-prose ol { margin-bottom: .85rem; }
  .help-prose li { margin-bottom: .25rem; }
  .help-prose code { background: var(--bs-secondary-bg, #f1f3f5); padding: .1rem .35rem; border-radius: .25rem; font-size: .875em; }
  .help-prose pre { background: var(--bs-secondary-bg, #f1f3f5); padding: .75rem 1rem; border-radius: .375rem; overflow-x: auto; }
  .help-prose pre code { background: none; padding: 0; }
  .help-prose blockquote { border-left: 3px solid var(--bs-warning, #ffc107); padding: .5rem .9rem; margin: 1rem 0;
                           background: var(--bs-warning-bg-subtle, #fff8e1); border-radius: 0 .375rem .375rem 0; }
  .help-prose blockquote p:last-child { margin-bottom: 0; }
  /* Diagramme: skalieren in der 400-px-Spalte des Panels ebenso wie auf der
     ganzen Seite. Ohne max-width laufen sie im Panel seitlich hinaus. */
  .help-prose img { max-width: 100%; height: auto; display: block; margin: 1rem 0; }
  .help-prose table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; font-size: .925rem; }
  .help-prose th, .help-prose td { border: 1px solid var(--bs-border-color, #dee2e6); padding: .4rem .6rem; text-align: left; vertical-align: top; }
  .help-prose th { background: var(--bs-secondary-bg, #f8f9fa); font-weight: 600; }
  .help-section-card .list-group-item { border-left: 0; border-right: 0; }
  .help-section-card .list-group-item:first-child { border-top: 0; }
  .help-search-hit mark { padding: 0 .1rem; }

/* ══ 03-shell/tabbar.css ══ */
/* Handy < 768px: feste Tab-Leiste unten, «Menü» oeffnet die Seitenleiste */
.mobile-tabbar { display: none; }
@media (max-width: 767.98px) {
  .mobile-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 198; height: calc(60px + env(safe-area-inset-bottom, 0px)); padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 2px;
    background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-top: 1px solid var(--c-border); box-shadow: 0 -4px 18px rgba(15,23,42,.06); }
  .mobile-tabbar .mtb { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent; border-radius: 12px; padding: 4px 2px; color: var(--c-muted); text-decoration: none; font-size: 10.5px; font-weight: 600; line-height: 1.1; }
  .mobile-tabbar .mtb .bi { font-size: 1.25rem; line-height: 1; }
  .mobile-tabbar .mtb span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-tabbar .mtb.active { color: var(--c-on-accent); background: var(--brand-primary, var(--c-accent)); }
  .mobile-tabbar .mtb:active { background: var(--c-surface-3); }
  .mobile-tabbar .mtb.active:active { background: var(--brand-primary, var(--c-accent)); }
  body.has-tabbar #content { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar #sidebar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ══ 03-shell/responsive.css ══ */
/* Responsive-Durchgaenge (Tablet/Handy), Spalten-Ausblender je Seite (.page-<name>) — strukturell, aus dem alten admin.css uebernommen. */

@media (max-width: 767.98px) {
  /* Prevent Bootstrap .row from bleeding outside viewport */
  .content-area .row { margin-left: 0; margin-right: 0; }
  .content-area .row > [class*='col-'] { padding-left: 6px; padding-right: 6px; }

  /* Smaller table text on mobile */
  .table td, .table th { font-size: 12px; padding: 6px 8px; }

  /* Filter form: stack inputs vertically */
  .card .row.g-2 { flex-direction: column; }
  .card .row.g-2 > [class*='col-'] { width: 100%; max-width: 100%; flex: 0 0 100%; }

  /* Shorten badge/monospace serials */
  .badge.font-monospace { font-size: 10px; word-break: break-all; }
}

/* ── Mobile fix pass 2 ─────────────────────────────────────────── */

/* ── Mobile fix pass 2 ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Page header rows: allow button to wrap below title */
  .content-area .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Force ALL filter/control rows inside card-body to stack */
  .card-body .row {
    flex-direction: column !important;
  }
  .card-body .row > [class*='col-'] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Stat icon + value: shrink CHF text if too wide */
  .stat-card .fw-bold.fs-5 {
    font-size: 13px !important;
  }

  /* Two stat cards per row on small phones */
  .content-area > .row > [class*='col-'] {
    padding-left: 6px;
    padding-right: 6px;
  }
}

@media (max-width: 767.98px) {
  .content-area .d-flex.justify-content-between { flex-wrap: wrap; gap: 8px; }
  .card-footer .pagination { flex-wrap: wrap; }
}

/* ── Pure-CSS column hiders per page (no JS = no flash) ────────── */
/* Replaces the JS applyResponsiveTables() function entirely        */

@media (max-width: 767.98px) {

  /* products: Name | Kategorie | Preis | MwSt | SKU | Lager | Aktiv | Actions
     Keep: 1 (Name), 3 (Preis), 8 (Actions)                                    */
  /* products (layout 2026-08: checkbox | Name | Kategorie | Preis | Lager |
     Aktiv | actions) — old rule predated the checkbox column and hid NAME.
     Keep: Name, Preis, actions. */
  .page-products .table th:nth-child(1),
  .page-products .table td:nth-child(1),
  .page-products .table th:nth-child(3),
  .page-products .table td:nth-child(3),
  .page-products .table th:nth-child(5),
  .page-products .table td:nth-child(5),
  .page-products .table th:nth-child(6),
  .page-products .table td:nth-child(6) { display: none !important; }

  /* terminals (layout 2026-08: checkbox | Gerät | [Tenant] | Heute | Gesamt | actions)
     Keep: Gerät, Heute, actions. The old index-based hiders predated the
     checkbox column and hid the DEVICE column itself on phones. Tenant is
     conditional → hidden via .col-tenant class; Gesamt via nth-last-child
     so the optional column can't shift it. */
  .page-terminals .tbl-terminals-main th:nth-child(1),
  .page-terminals .tbl-terminals-main td:nth-child(1),
  .page-terminals .tbl-terminals-main th.col-tenant,
  .page-terminals .tbl-terminals-main td.col-tenant,
  .page-terminals .tbl-terminals-main th.col-gesamt,
  .page-terminals .tbl-terminals-main td.col-gesamt,
  .page-terminals .tbl-terminals-main th.col-loc,
  .page-terminals .tbl-terminals-main td.col-loc { display: none !important; }

  /* transactions (layout 2026-08: Beleg+Datum | Gerät | Kellner | Status | Betrag | actions)
     Keep: Beleg, Status, Betrag, actions — the old index rule (pre-merge
     8-column layout) hid Status AND Betrag on phones. */
  .page-transactions .table th:nth-child(2),
  .page-transactions .table td:nth-child(2),
  .page-transactions .table th:nth-child(3),
  .page-transactions .table td:nth-child(3) { display: none !important; }

  /* categories: Name | Farbe | Icon | Reihenfolge | Produkte | Actions
     Keep: 1 (Name), 5 (Produkte), 6 (Actions)                                 */
  /* categories (layout 2026-08: checkbox | Name | [Tenant] | Reihenfolge |
     Produkte | actions) — old rule hid NAME. Keep: Name, Produkte, actions.
     Tenant is conditional → class; Reihenfolge indexed from the END (no
     trailing conditional columns here, unlike terminals). */
  .page-categories .table th:nth-child(1),
  .page-categories .table td:nth-child(1),
  .page-categories .table th.col-tenant,
  .page-categories .table td.col-tenant,
  .page-categories .table th:nth-last-child(3),
  .page-categories .table td:nth-last-child(3) { display: none !important; }

  /* dashboard recent transactions: Beleg | Datum | Methode | Status | Betrag
     Keep: 1 (Beleg), 2 (Datum), 4 (Status), 5 (Betrag)                        */
  .page-dashboard .table th:nth-child(3),
  .page-dashboard .table td:nth-child(3) { display: none !important; }

  /* Action column (always last): never wrap edit+delete buttons */
  .table td:last-child { white-space: nowrap !important; }
  .table th:last-child { white-space: nowrap !important; }
}

@media (max-width: 767.98px) {
  /* Numeric and badge columns: never wrap */
  .page-terminals  .table th:nth-child(3),
  .page-terminals  .table td:nth-child(3),
  .page-products   .table th:nth-child(3),
  .page-products   .table td:nth-child(3),
  .page-transactions .table th:nth-child(7),
  .page-transactions .table td:nth-child(7) { white-space: nowrap; }

  /* First column (serial/badge): allow badge to shrink but not break */
  .page-terminals  .table td:nth-child(1) { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

  /* Column headers: keep on one line */
  .table th { white-space: nowrap; }
}

/* ── Language switcher ────────────────────────────────────────────── */
.lang-switcher {
  padding: 12px 12px 4px;
  border-top: 1px solid var(--sb-border);
  margin-top: auto;
}

.lang-switcher-label {
  font-size: 11px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.lang-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.lang-form { margin: 0; padding: 0; }

.lang-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--sb-text);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-size: 10px;
  line-height: 1;
}

.lang-btn:hover {
  background: var(--sb-hover);
  color: var(--sb-hover-text);
  border-color: var(--c-border-2);
}

.lang-btn-active {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-accent);
}

.lang-flag { font-size: 18px; line-height: 1; }
.lang-code { font-size: 9px; font-weight: 600; letter-spacing: .04em; }

/* ── Responsive pass 3 (2026-05-13) ───────────────────────────────────
   Fixes top-bar chip overflow + per-page table column hiders for the
   QR Provisioning index. Without these the right-side chip cluster
   (tenant + lang + date + user) overflows a phone viewport, pushing the
   hamburger out of sight; and /admin/provision had no column-hide rule
   so STATUS would clip off the right edge. */
@media (max-width: 767.98px) {
  /* Top-bar: tighter horizontal padding + smaller gap, allow wrap */
  .top-bar     { padding: 0 10px; gap: 8px; flex-wrap: wrap; height: auto; min-height: var(--topbar-h); }
  .top-bar-right { gap: 6px; flex-wrap: wrap; }
  .top-bar-left h6 { font-size: 14px; max-width: 56vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Tenant chip: icon-only on phone */
  .topbar-tenant-chip            { padding: 6px 8px; }
  .topbar-tenant-chip .tenant-name,
  .topbar-tenant-chip .caret     { display: none; }

  /* Lang chip: flag-only on phone */
  .topbar-lang-chip              { padding: 6px 8px; }
  .topbar-lang-chip .lang-code,
  .topbar-lang-chip .caret       { display: none; }

  /* User chip: avatar-only on phone (email + role badge consume too much
     horizontal space; still reachable via dropdown). */
  .topbar-user-chip              { padding: 4px; gap: 4px; }
  .topbar-user-chip .email,
  .topbar-user-chip .role-badge,
  .topbar-user-chip .caret       { display: none; }
}

/* Provision list: Label/Merchant | MODE | EXPIRES | STATUS | Actions.
   "Created" date is already shown inside the label cell, so hiding the
   EXPIRES column is safe; MODE is technical detail not needed on phone. */
@media (max-width: 767.98px) {
  .page-provision .table th:nth-child(2),
  .page-provision .table td:nth-child(2),
  .page-provision .table th:nth-child(3),
  .page-provision .table td:nth-child(3) { display: none !important; }

  /* Status badge column: keep narrow */
  .page-provision .table th:nth-child(4),
  .page-provision .table td:nth-child(4) { white-space: nowrap; width: 1%; }

  /* Provision: tighter card padding on phone */
  .page-provision .table-card .card-body { padding: 0; }
}

/* ── Responsive pass 4 (2026-05-13) — full admin sweep ──────────────
   Per-page column hiders for every list/index that has a table, plus
   a few table-identifier classes for pages whose body class is shared
   between multiple lists (tenants list vs tenants/terminals, the three
   tables under page-loyalty).

   All rules live in /dist/css/main.css → loaded once in <head> → safe
   under Turbo Drive (sidebar `data-turbo-permanent`, head not re-parsed).
   No JS resize listeners; no body <style>. */

/* ── Transactions tablet band (768–1199.98px) ───────────────────────
   Six columns of stacked cell content (Beleg+date+tenant, serial+PSP+card…)
   squeeze into wrapping towers on small monitors. Give the table a scroll
   floor (the .table-responsive wrapper takes over) and drop the Kellner
   column on the tighter half — Beleg, Status and Betrag stay in view. */
@media (max-width: 1199.98px) and (min-width: 992px) {
  .page-transactions .table { min-width: 860px; }
}
@media (max-width: 991.98px) and (min-width: 768px) {
  .page-transactions .table { min-width: 700px; }
  .page-transactions .table th:nth-child(3),
  .page-transactions .table td:nth-child(3) { display: none !important; }
}

/* ── Hotel phone toolbars (<768px) ──────────────────────────────────
   The hotel pages share a header pattern: back-button + inline search
   form in a non-wrapping flex with a fixed-width search input — on a
   phone the input ran off the right edge (Damir screenshot 31.08).
   Let the toolbar wrap and the inputs breathe. */
@media (max-width: 767.98px) {
  [class*='page-hotel'] .content-area .d-flex { flex-wrap: wrap; }
  [class*='page-hotel'] form.d-flex { flex: 1 1 100%; }
  [class*='page-hotel'] form.d-flex input[type='search'] {
    width: auto !important; flex: 1 1 150px; min-width: 0;
  }
  [class*='page-hotel'] form.d-flex input[type='date'] { flex: 0 1 auto; }
}

/* QR-Provisioning phone: the list is wider than the viewport and the
   STATUS badges clipped at the edge — scroll it in its own container. */
@media (max-width: 767.98px) {
  .page-provision .table-card .card-body { overflow-x: auto; }
  .page-provision .table { min-width: 540px; }
}

/* ── Topbar tablet band (768–1199.98px) ─────────────────────────────
   Below 768px the chips already collapse to icons; ABOVE that there were
   no rules, so a narrow desktop window crammed tenant name + date + full
   email + role badge into one row (Damir 2026-08-30 screenshot). Degrade
   progressively instead. */
@media (max-width: 1199.98px) {
  /* Date is redundant chrome — drop it first. */
  .top-bar-right > small { display: none; }
  .topbar-user-chip .email {
    max-width: 140px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-tenant-chip .tenant-name {
    max-width: 120px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 991.98px) and (min-width: 768px) {
  /* Tight tablet: avatar+badge for the user, icon-only tenant, flag-only
     lang — same look the phone band uses, one step earlier. */
  .topbar-user-chip .email   { display: none; }
  .topbar-tenant-chip .tenant-name,
  .topbar-tenant-chip .caret { display: none; }
  .topbar-lang-chip .lang-code,
  .topbar-lang-chip .caret   { display: none; }
  .top-bar-right { gap: 8px; }
}

/* ── Tablet polish (≤991.98px) — between desktop and phone ─────────── */
@media (max-width: 991.98px) {
  .content-area                                  { padding: 18px; }
  .content-area > .d-flex.justify-content-between.align-items-center,
  .content-area > .d-flex.justify-content-between.align-items-start  {
    flex-wrap: wrap; gap: 10px;
  }
  /* Stat cards: 2 per row instead of 4 */
  .stat-row > [class*="col-md-3"] {
    flex: 0 0 50%; max-width: 50%;
  }
  /* Compact card-header titles */
  .card-header h5, .card-header h6 { font-size: 0.95rem; }
}

/* ── Phone breakpoint (≤767.98px) — heavy responsive treatment ───── */
@media (max-width: 767.98px) {

  /* ── Per-page column hiders ─────────────────────────────────────
     Body class is `page-<active>` (see layout.ejs). For each table-bearing
     route we hide low-priority columns; first col (label/name) + last col
     (actions) always stay; status badge stays where it exists.        */

  /* Billing — Nr | Tenant | Period | Terminals | Amount | Status | Created | Actions */
  .page-billing       .table th:nth-child(1),
  .page-billing       .table td:nth-child(1),
  .page-billing       .table th:nth-child(3),
  .page-billing       .table td:nth-child(3),
  .page-billing       .table th:nth-child(4),
  .page-billing       .table td:nth-child(4),
  .page-billing       .table th:nth-child(7),
  .page-billing       .table td:nth-child(7),

  /* Catalog import — Name | Kategorie | Preis | MwSt | Checkbox */
  .page-catalog-import .table th:nth-child(2),
  .page-catalog-import .table td:nth-child(2),
  .page-catalog-import .table th:nth-child(4),
  .page-catalog-import .table td:nth-child(4),

  /* Lager — Product | Category | Unit | … | … */
  .page-lager         .table th:nth-child(2),
  .page-lager         .table td:nth-child(2),
  .page-lager         .table th:nth-child(3),
  .page-lager         .table td:nth-child(3),

  /* Locations — Handle | Color | Name | Description | Default | Sort | Actions */
  .page-locations     .table th:nth-child(1),
  .page-locations     .table td:nth-child(1),
  .page-locations     .table th:nth-child(2),
  .page-locations     .table td:nth-child(2),
  .page-locations     .table th:nth-child(4),
  .page-locations     .table td:nth-child(4),
  .page-locations     .table th:nth-child(6),
  .page-locations     .table td:nth-child(6),

  /* Releases — File | ARM | ARM64 | Date — drop ARM, keep ARM64 only */
  .page-releases      .table th:nth-child(2),
  .page-releases      .table td:nth-child(2),

  /* Table Groups — Handle | Color | Name | Description | Count | Actions */
  .page-table-groups  .table th:nth-child(1),
  .page-table-groups  .table td:nth-child(1),
  .page-table-groups  .table th:nth-child(2),
  .page-table-groups  .table td:nth-child(2),
  .page-table-groups  .table th:nth-child(4),
  .page-table-groups  .table td:nth-child(4),

  /* Tables — ColorBar | Name | Group | Terminals | … | … | Actions */
  .page-tables        .table th:nth-child(1),
  .page-tables        .table td:nth-child(1),
  .page-tables        .table th:nth-child(3),
  .page-tables        .table td:nth-child(3),
  .page-tables        .table th:nth-child(4),
  .page-tables        .table td:nth-child(4),
  .page-tables        .table th:nth-child(5),
  .page-tables        .table td:nth-child(5),
  .page-tables        .table th:nth-child(6),
  .page-tables        .table td:nth-child(6),

  /* Users — Avatar | Name | Role | Status | Active Session | Actions */
  .page-users         .table th:nth-child(1),
  .page-users         .table td:nth-child(1),
  .page-users         .table th:nth-child(3),
  .page-users         .table td:nth-child(3),
  .page-users         .table th:nth-child(5),
  .page-users         .table td:nth-child(5),

  /* Vouchers — Code | Amount | Remaining | Status | Issued | Until | Actions */
  .page-vouchers      .table th:nth-child(5),
  .page-vouchers      .table td:nth-child(5),
  .page-vouchers      .table th:nth-child(6),
  .page-vouchers      .table td:nth-child(6),

  /* ── Shared-body-class pages — target the table by per-table class ── */

  /* Tenants list — Name/Slug | Active | Stats | APK | Color | Actions */
  .tbl-tenants-list   th:nth-child(2),
  .tbl-tenants-list   td:nth-child(2),
  .tbl-tenants-list   th:nth-child(3),
  .tbl-tenants-list   td:nth-child(3),
  .tbl-tenants-list   th:nth-child(5),
  .tbl-tenants-list   td:nth-child(5),

  /* Tenant terminals — Serial | Status | Today | Total | Actions */
  .tbl-tenant-terminals th:nth-child(3),
  .tbl-tenant-terminals td:nth-child(3),
  .tbl-tenant-terminals th:nth-child(4),
  .tbl-tenant-terminals td:nth-child(4),

  /* Loyalty wallet audit — Time | Provider | Status | Action | Customer | Program | Detail */
  #walletAuditTable    th:nth-child(2),
  #walletAuditTable    td:nth-child(2),
  #walletAuditTable    th:nth-child(5),
  #walletAuditTable    td:nth-child(5),
  #walletAuditTable    th:nth-child(6),
  #walletAuditTable    td:nth-child(6),
  #walletAuditTable    th:nth-child(7),
  #walletAuditTable    td:nth-child(7),

  /* Loyalty programs — Name | Stamps required | Reward | Status | Actions */
  .tbl-loy-programs    th:nth-child(2),
  .tbl-loy-programs    td:nth-child(2),
  .tbl-loy-programs    th:nth-child(3),
  .tbl-loy-programs    td:nth-child(3),

  /* Loyalty customers — Name | Phone | (Tenant) | Programs | Stamps | QR | Actions */
  .tbl-loy-customers   th:nth-child(2),
  .tbl-loy-customers   td:nth-child(2),
  .tbl-loy-customers   th:nth-child(3),
  .tbl-loy-customers   td:nth-child(3),
  .tbl-loy-customers   th:nth-child(5),
  .tbl-loy-customers   td:nth-child(5),
  .tbl-loy-customers   th:nth-child(6),
  .tbl-loy-customers   td:nth-child(6)  { display: none !important; }

  /* ── Page-specific layout overrides ───────────────────────────── */

  /* Logs live — control bar wraps; search input goes full-width */
  .page-logs-live > .d-flex.align-items-center.gap-3 { flex-wrap: wrap; }
  .page-logs-live #textFilter { width: 100% !important; flex-basis: 100%; }
  .page-logs-live #levelFilter { flex: 1; min-width: 140px; }

  /* Logs archive — file list + viewer stack vertically */
  .page-logs .row > .col-md-3,
  .page-logs .row > .col-md-9 { width: 100%; max-width: 100%; flex: 0 0 100%; }
  .page-logs .col-md-9 .card { margin-top: 12px; }

  /* Visibility matrix — checkbox grids reflow tighter */
  .page-visibility .row.g-2 > [class*="col-"]   { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
  .page-visibility .card-body                   { padding: 12px; }

  /* Visibility terminals picker — cards full-width */
  .page-visibility .row.g-3 > [class*="col-"]   { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }

  /* Tables/menus — header chip + button stack */
  .page-tables .d-flex.align-items-center.gap-3.mb-3.pb-3 { flex-wrap: wrap; }

  /* Daily report — multiple wide tables: force horizontal scroll on each card */
  .page-transactions .card .card-body { overflow-x: auto; }

  /* Tenants form — uppercase color label is fine; ensure color pickers don't stretch out of row */
  .page-tenants .form-control-color { width: 100%; max-width: 64px; }

  /* Card header label of dark theme (we set bg-dark text-white on each card)
     — ensure title doesn't overflow; ellipsis it. */
  .card-header.text-white h6,
  .card-header.text-white h5 {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
  }

  /* Page-header rows with title + button — let button drop below cleanly */
  .content-area > .d-flex.justify-content-between {
    flex-wrap: wrap; gap: 10px;
  }
  .content-area > .d-flex.justify-content-between > * {
    flex: 0 1 auto;
  }

  /* Compact buttons in action columns: stack icons tighter */
  .table td .d-flex.gap-1, .table td .d-flex.gap-2 {
    flex-wrap: nowrap; gap: 4px !important;
  }
  .table td .btn-sm { padding: 4px 7px; font-size: 12px; }

  /* Pagination wraps to second line if needed */
  .pagination { flex-wrap: wrap; }
}

/* ── Extra-small phones (≤480px) — final shrink pass ──────────────── */
@media (max-width: 480px) {
  .top-bar-left h6 { font-size: 13px; max-width: 40vw; }
  .topbar-tenant-chip i,
  .topbar-lang-chip .lang-flag-emoji,
  .topbar-user-chip .avatar { font-size: 0.9rem; }
  .content-area    { padding: 10px; }
  .table td, .table th { font-size: 11px; padding: 5px 6px; }
  .card-header   { padding: 10px 12px; }
  .card-body     { padding: 12px; }
  /* Page header h4/h5 don't dominate the viewport */
  .content-area h4 { font-size: 1.1rem; }
  .content-area h5 { font-size: 1rem; }
}

/* ===== Administratoren (Benutzerverwaltung) — responsive bands =====
   Class-based (NOT nth-child) because the Mandant column is conditional.
   The wide band starts already at <992px: with the sidebar open the content
   area is ~230px narrower than the viewport, so the table starves long
   before a phone-sized window. 2FA + Letzter Login live on the edit page. */
@media (max-width: 991.98px) {
  .tbl-admins .col-2fa,
  .tbl-admins .col-lastlogin { display: none; }
  .tbl-admins .btn-sm { padding: 3px 9px; font-size: 12px; }
  .tbl-admins td .d-inline-flex { flex-direction: column; align-items: stretch; }
  /* envelope/Löschen sit inside <form> wrappers — stretch reaches the form,
     not the button, so force full width on both levels for equal buttons */
  .tbl-admins td .d-inline-flex form { display: block; }
  .tbl-admins td .d-inline-flex form .btn,
  .tbl-admins td .d-inline-flex > .btn,
  .tbl-admins td .d-inline-flex > a.btn { width: 100%; }
  .tbl-admins td:first-child { word-break: break-word; }
}
@media (max-width: 640px) {
  .tbl-admins .col-name,
  .tbl-admins .col-active { display: none; }
}
@media (max-width: 480px) {
  .tbl-admins .col-tenant { display: none; }
}

/* ══ 04-components/cards.css ══ */
/* Karten, Kennzahlen, Tabellen-Karte, runde Ecken (Darstellungsschicht nach Ivans Redesign v6) */
/* ── Cards ──────────────────────────────────────────────── */
.stat-card,
.table-card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.table-card .card-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  border-radius: 12px 12px 0 0 !important;
  padding: 14px 20px;
}
.table-card .card-footer {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  border-radius: 0 0 12px 12px !important;
  padding: 10px 16px;
}

/* ── Stat icon bubble ───────────────────────────────────── */
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

/* ── Small action buttons ───────────────────────────────── */
.btn-action { padding: 3px 9px; font-size: 13px; }

/* ── Table tweaks ───────────────────────────────────────── */
.table th { font-size: 12px; font-weight: 600; text-transform: uppercase;
            letter-spacing: .04em; color: var(--c-muted); }
.table td { vertical-align: middle; }

:root { --rad-card: 14px; --rad-ctl: 10px; }
.card { border-radius: var(--rad-card); border-color: var(--c-border); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.card .card-header:first-child { border-top-left-radius: calc(var(--rad-card) - 1px); border-top-right-radius: calc(var(--rad-card) - 1px); }
.btn { border-radius: var(--rad-ctl); }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-top-left-radius: var(--rad-ctl); border-bottom-left-radius: var(--rad-ctl); }
.btn-group > .btn:last-child { border-top-right-radius: var(--rad-ctl); border-bottom-right-radius: var(--rad-ctl); }
.form-control, .form-select { border-radius: var(--rad-ctl); }
.input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .btn:last-child, .input-group > .input-group-text:last-child { border-top-right-radius: var(--rad-ctl); border-bottom-right-radius: var(--rad-ctl); }

/* ══ 04-components/hero.css ══ */
/* Dashboard-Hero: Umsatz heute, 7-Tage-Balken, Kacheln, Schnellzugriffe */
/* ── Dashboard-Hero ───────────────────────────────────────────────────── */
.hero-card { background: linear-gradient(135deg, var(--brand-primary, var(--c-accent)) 0%, color-mix(in srgb, var(--brand-primary, var(--c-accent)) 55%, var(--c-violet)) 100%); color: var(--c-on-accent); border: 0; box-shadow: 0 10px 30px color-mix(in srgb, var(--brand-primary, var(--c-accent)) 30%, transparent); }
.hero-card .hero-k { font-size: 13px; font-weight: 600; opacity: .85; }
.hero-card .hero-v { font-size: clamp(1.8rem, 4.5vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-card .hero-d { font-size: 13px; font-weight: 600; margin-top: 4px; opacity: .95; }
.hero-card .hero-d.down { opacity: .85; }
.hero-bars { display: flex; align-items: flex-end; gap: 8px; height: 76px; margin-top: 16px; }
.hero-bars .hb { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.hero-bars .hb i { display: block; border-radius: 7px; background: rgba(255,255,255,.28); min-height: 4px; transition: height .3s; }
.hero-bars .hb.today i { background: var(--c-surface); }
.hero-bars .hb small { font-size: 10.5px; text-align: center; margin-top: 5px; opacity: .8; }
.hero-tile { height: 100%; }
.hero-tile .hero-k { font-size: 12.5px; color: var(--bs-secondary-color); font-weight: 600; }
.hero-tile .hero-v { font-size: 1.6rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
a.hero-tile { text-decoration: none; color: inherit; display: block; }
a.hero-tile:hover { border-color: var(--brand-primary, var(--c-accent)); }
.hero-qa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; height: 100%; text-decoration: none; color: inherit; font-size: 12.5px; font-weight: 600; text-align: center; }
.hero-qa .bi { font-size: 1.25rem; color: var(--brand-primary, var(--c-accent-fg)); }
.hero-qa:hover { border-color: var(--brand-primary, var(--c-accent)); color: inherit; }
html[data-bs-theme="dark"] .hero-card .hero-k, html[data-bs-theme="dark"] .hero-card .hero-d { color: var(--c-on-accent); }

/* ══ 04-components/tones.css ══ */
/* Status-Toene: Pille/Kachel mit getoentem Hintergrund + passender Textfarbe (ersetzt style="background:#dcfce7;color:#16a34a") */
.tone-success{background:var(--c-success-bg);color:var(--c-success-fg)}
.tone-info{background:var(--c-accent-tint);color:var(--c-accent-fg)}
.tone-warn{background:var(--c-warn-bg-2);color:var(--c-warn-fg)}
.tone-danger{background:var(--c-danger-bg);color:var(--c-danger-fg)}
.tone-orange{background:var(--c-orange-bg);color:var(--c-orange-fg)}
.tone-violet{background:var(--c-violet-bg);color:var(--c-violet-fg)}
.tone-muted{background:var(--c-surface-3);color:var(--c-muted)}
/* Icon-Blase in Mandantenfarbe: <span class="icon-bubble" style="--bubble:<%= tenantPrimary %>"> — die Farbe ist Daten, kein Stil */
.icon-bubble{--bubble:var(--brand-primary);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:10px;width:40px;height:40px;background:color-mix(in srgb,var(--bubble) 13%,transparent);color:var(--bubble)}
.icon-bubble.sm{width:36px;height:36px;border-radius:8px}
.icon-bubble.round{border-radius:50%}
/* Farbfeld (Kategorie-/Standortfarbe): <i class="color-dot" style="--dot:<%= l.color %>"> */
.color-dot{--dot:var(--c-faint);display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--dot);flex-shrink:0}
.color-swatch{--dot:var(--c-surface-3);background:var(--dot)}

/* ══ 04-components/seg-toggle.css ══ */
/* Segment-Umschalter (z.B. Sichtbarkeit: Nach Terminal / Nach Standort) */
.seg-toggle { display:inline-flex; gap:4px; padding:4px; background:var(--c-surface-3); border-radius:12px; }
.seg-toggle > a { display:inline-flex; align-items:center; gap:7px; padding:8px 18px; border-radius:9px; font-weight:600; font-size:.875rem; color:var(--c-muted); text-decoration:none; transition:background .15s,color .15s,box-shadow .15s; white-space:nowrap; }
.seg-toggle > a:hover { color:var(--c-text-2); }
.seg-toggle > a.active { background:var(--c-surface); color:var(--brand-primary); box-shadow:0 1px 2px rgba(15,23,42,.12); }

/* ══ 04-components/subnav.css ══ */
/* ── Unternavigation .tnav-* (Pills im Seitenkopf; Modi list/show/hub; Handy-Liste) ── */
/* __TNAV_v2__ waagrechte Terminal-Leiste (Pills) im Seitenkopf */
/* Design 3a-Form, Palette «Tamno siva»: Akzent + helle Tönung als Variablen (Petrol: #0f766e / #e3f4f1) */
.tnav{--tnav-accent:#1f2937;--tnav-tint:#e9ecf0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
@media (min-width:768px){ .tnav-listwrap{padding:16px 24px 0} }
@media (min-width:768px) and (max-width:1399.98px){ .tnav .tnav-switch{flex-basis:100%} .tnav .tnav-sep{display:none} .tnav.tnav{gap:6px} .tnav .tnav-item{padding:0 10px;font-size:13px;height:36px;gap:6px} }
.tnav-switch{position:relative;flex:none}
.tnav-switch-btn{height:40px;min-width:200px;max-width:280px;padding:0 12px;border:1px solid var(--c-border-2);border-radius:8px;background:var(--c-surface);color:var(--c-text-2);display:flex;align-items:center;gap:10px;font-size:14px;text-align:left;cursor:pointer;font-family:inherit}
.tnav-switch-btn:hover{border-color:var(--c-border-2);background:var(--c-surface-2)}
.tnav[data-tnav-mode="list"]:not(.has-last) .tnav-switch-btn{border-color:var(--tnav-accent);box-shadow:0 0 0 3px var(--tnav-tint)}
.tnav-switch-btn .tnav-caret{margin-left:auto;color:var(--c-faint);font-size:11px}
.tnav-switch-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.tnav[data-tnav-mode="list"]:not(.has-last) .tnav-switch-name{color:var(--c-text-2);font-weight:400}
.tnav-dot{width:8px;height:8px;border-radius:50%;background:var(--c-faint);flex:none}
.tnav-dot.on{background:var(--c-success)}
.tnav-menu{min-width:280px;max-height:60vh;overflow-y:auto;font-size:13px;padding:4px;border-radius:10px;box-shadow:0 12px 28px -10px rgba(15,23,42,.25)}
.tnav-menu .dropdown-item{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:.4rem .7rem;border-radius:6px;white-space:normal}
.tnav-menu .dropdown-item .tnav-mname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tnav-menu .dropdown-item small{flex-basis:100%;padding-left:16px;color:var(--c-faint);font-family:ui-monospace,Menlo,monospace;font-size:11px;line-height:1.2}
.tnav-menu .dropdown-item.active{background:var(--c-accent);color:var(--c-on-accent)}
.tnav-menu .dropdown-item.active small{color:var(--c-accent-tint)}
.tnav-sep{width:1px;height:28px;background:var(--c-surface-4);flex:none;margin:0 2px}
.tnav-list{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.tnav-item{height:40px;padding:0 14px;border:1px solid var(--c-border);border-radius:8px;background:var(--c-surface);color:var(--c-text-2);font-size:14px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .12s,border-color .12s}
.tnav-item:hover{background:var(--c-surface-2);border-color:var(--c-border-2);color:var(--c-text)}
.tnav-item.active{background:var(--tnav-tint);border-color:var(--tnav-accent);color:var(--tnav-accent);font-weight:600}
.tnav[data-tnav-mode="list"]:not(.has-last) .tnav-item{opacity:.45}
.tnav[data-tnav-mode="list"]:not(.has-last) .tnav-item:hover{opacity:.8}
.tnav-ico{display:inline-flex;font-size:14px;line-height:1}
.tnav-txt{display:inline-flex;min-width:0}
.tnav-short,.tnav-chev,.tnav-back{display:none}
/* Terminal-Seite: Kopf + Abschnitte */
.tnav-wrap{margin:-24px}
.tnav-pagehead{padding:14px 24px 12px;border-bottom:1px solid var(--c-border);background:var(--c-surface);display:flex;flex-direction:column;gap:10px}
.tnav-crumbs{font-size:12px;color:var(--c-muted)}
.tnav-crumbs a{color:inherit;text-decoration:none}
.tnav-crumbs a:hover{color:var(--c-accent-fg)}
.tnav-title{font-size:20px;font-weight:600;margin:0;color:var(--c-text);line-height:1.25;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tnav-title .tnav-status{font-size:12px;font-weight:400;color:var(--c-muted);display:inline-flex;align-items:center;gap:6px}
.tnav-sectitle{font-size:16px;font-weight:600;color:var(--c-text);margin:0 0 14px}
.tnav-body{padding:24px}
.tnav-sec{display:none}
.tnav-sec.active{display:block}
@media (max-width:767.98px){
  /* Liste: Leiste scrollt waagrecht */
  /* Listenseiten (Terminals/Produkte/Kategorien): auf dem Handy nur der Wechsler — Abschnitte gibt es erst auf der Detailseite (2d-Liste), kein Seitwärts-Scrollen */
  .tnav[data-tnav-mode="list"]{flex-wrap:wrap;width:100%;overflow:visible;gap:0}
  .tnav[data-tnav-mode="list"] .tnav-list,.tnav[data-tnav-mode="list"] .tnav-sep{display:none}
  .tnav[data-tnav-mode="list"] .tnav-switch{width:100%}
  .tnav[data-tnav-mode="list"] .tnav-switch-btn{width:100%;max-width:none;height:44px;border-radius:10px;font-size:14px}
  /* Terminal-Seite: Liste der Abschnitte statt Inhalt (Tippen öffnet den Abschnitt) */
  .tnav-wrap{margin:-14px}
  .tnav[data-tnav-mode="show"]{flex-direction:column;align-items:stretch;gap:14px}
  .tnav[data-tnav-mode="show"] .tnav-switch-btn{height:44px;max-width:none;width:100%;border-radius:10px;font-size:14px}
  .tnav[data-tnav-mode="show"] .tnav-sep{display:none}
  .tnav[data-tnav-mode="show"] .tnav-list{flex-direction:column;align-items:stretch;gap:0;border:1px solid var(--c-border);border-radius:12px;background:var(--c-surface);overflow:hidden}
  .tnav[data-tnav-mode="show"] .tnav-item{height:auto;min-height:64px;padding:12px 14px;border:0;border-top:1px solid var(--c-border);border-radius:0;gap:14px;white-space:normal;text-align:left}
  .tnav[data-tnav-mode="show"] .tnav-item:first-child{border-top:0}
  .tnav[data-tnav-mode="show"] .tnav-item.active,.tnav[data-tnav-mode="show"] .tnav-item:hover{background:var(--c-surface-2);color:var(--c-text-2);font-weight:400}
  .tnav[data-tnav-mode="show"] .tnav-ico{width:34px;height:34px;flex:none;border-radius:9px;background:var(--c-accent-bg);color:var(--c-accent-fg);align-items:center;justify-content:center;font-size:16px}
  .tnav[data-tnav-mode="show"] .tnav-txt{flex:1;flex-direction:column;gap:3px}
  .tnav[data-tnav-mode="show"] .tnav-lbl{font-size:15px;font-weight:500;color:var(--c-text)}
  .tnav[data-tnav-mode="show"] .tnav-short{display:block;font-size:12.5px;color:var(--c-muted)}
  .tnav[data-tnav-mode="show"] .tnav-chev{display:block;margin-left:auto;color:var(--c-faint);font-size:14px}
  .tnav-wrap.tnav-open .tnav-listwrap{display:none}
  .tnav-wrap.tnav-open .tnav-title{display:none}
  .tnav-wrap:not(.tnav-open) .tnav-body{display:none}
  .tnav-wrap:not(.tnav-open) .tnav-back{display:none}
  .tnav-wrap:not(.tnav-open) .tnav-mobtitle{display:none}
  .tnav-pagehead{flex-direction:row;align-items:center;gap:6px;padding:8px 12px;position:sticky;top:var(--topbar-h,56px);z-index:5;flex-wrap:wrap}
  .tnav-back{display:inline-flex;align-items:center;border:0;background:transparent;color:var(--c-accent-fg);font-size:14px;padding:6px 8px 6px 2px;font-family:inherit;cursor:pointer}
  .tnav-back .bi{font-size:18px;line-height:1}
  .tnav-crumbs{display:none}
  .tnav-mobtitle{font-size:16px;font-weight:600;margin:0;color:var(--c-text)}
  .tnav-listwrap{padding:14px}
  .tnav-sectitle{display:none}
  .tnav-body{padding:14px}
}
@media (min-width:768px){ .tnav-mobtitle{display:none} .tnav-back{display:none} }
/* Hub-Leiste (Geräte-Einstellungen): Pills sind Links */
a.tnav-item{text-decoration:none}
.tnav-hubtitle{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--c-text);padding:0 4px;white-space:nowrap}
.tnav-hubtitle .bi{color:var(--c-accent-fg);font-size:16px}
.tnav-hubtitle .tnav-hubcur,.tnav-hubtitle .tnav-hubcaret{display:none}
@media (max-width:767.98px){
  /* Geräte-Einstellungen auf dem Handy: eine Zeile «Geräte-Einstellungen · aktueller Tab ▾», Tippen klappt die 2d-Liste auf */
  .tnav[data-tnav-mode="hub"]{flex-direction:column;align-items:stretch;flex-wrap:wrap;gap:10px;overflow:visible}
  .tnav[data-tnav-mode="hub"] .tnav-sep{display:none}
  .tnav[data-tnav-mode="hub"] .tnav-hubtitle{display:flex;height:44px;border:1px solid var(--c-border-2);border-radius:10px;background:var(--c-surface);padding:0 12px;cursor:pointer;white-space:nowrap;overflow:hidden}
  .tnav[data-tnav-mode="hub"] .tnav-hubtitle .tnav-hubcur{display:inline;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:var(--c-text-3)}
  .tnav[data-tnav-mode="hub"] .tnav-hubtitle .tnav-hubcaret{display:inline;color:var(--c-muted);font-size:12px;transition:transform .15s}
  .tnav[data-tnav-mode="hub"].open .tnav-hubtitle .tnav-hubcaret{transform:rotate(180deg)}
  .tnav[data-tnav-mode="hub"] .tnav-list{display:none;flex-direction:column;align-items:stretch;gap:0;border:1px solid var(--c-border);border-radius:12px;background:var(--c-surface);overflow:hidden}
  .tnav[data-tnav-mode="hub"].open .tnav-list{display:flex}
  .tnav[data-tnav-mode="hub"] .tnav-item{height:auto;min-height:52px;padding:12px 14px;border:0;border-top:1px solid var(--c-border);border-radius:0;gap:14px;white-space:normal;text-align:left;background:var(--c-surface);color:var(--c-text-2)}
  .tnav[data-tnav-mode="hub"] .tnav-item:first-child{border-top:0}
  .tnav[data-tnav-mode="hub"] .tnav-item.active{background:var(--c-surface-2);color:var(--c-text);font-weight:600}
  .tnav[data-tnav-mode="hub"] .tnav-ico{width:34px;height:34px;flex:none;border-radius:9px;background:var(--c-accent-bg);color:var(--c-accent-fg);align-items:center;justify-content:center;font-size:16px}
  .tnav[data-tnav-mode="hub"] .tnav-txt{flex:1}
  .tnav[data-tnav-mode="hub"] .tnav-lbl{font-size:15px;white-space:normal}
  .tnav[data-tnav-mode="hub"] .tnav-chev{display:block;margin-left:auto;color:var(--c-faint);font-size:14px}
}
html[data-bs-theme="dark"] .tnav, html[data-bs-theme="dark"] .tnav-switch-btn { --tnav-accent: var(--c-accent); --tnav-tint: var(--c-accent-tint); }

/* ══ 04-components/wizard.css ══ */
/* ── Assistenten .wz-* (Schritte, Kacheln, Swatches, Zusammenfassung, Hub) ── */
.wz-wrap{max-width:860px;margin:0 auto}
.wz-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.wz-title{font-size:18px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px}
.wz-title .bi{color:var(--c-accent-fg)}
.wz-steps{display:grid;gap:6px;margin-bottom:16px}
.wz-step{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--c-border);background:var(--c-surface);font-size:13px;color:var(--c-muted);min-width:0}
.wz-step b{width:22px;height:22px;border-radius:50%;background:var(--c-surface-4);color:var(--c-text-3);display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:none}
.wz-step span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wz-step.active{border-color:var(--c-accent);color:var(--c-text);font-weight:600}.wz-step.active b{background:var(--c-accent);color:var(--c-on-accent)}
.wz-step.done{color:var(--c-success-deep);cursor:pointer}.wz-step.done b{background:var(--c-success);color:var(--c-on-accent)}
.wz-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:14px;padding:22px 24px}
.wz-pane{display:none}.wz-pane.active{display:block}
.wz-h{font-size:17px;font-weight:700;margin:0 0 4px}
.wz-sub{font-size:13.5px;color:var(--c-muted);margin-bottom:16px}
.wz-err{display:none;font-size:13px;color:var(--c-danger-deep);background:var(--c-danger-bg-2);border:1px solid var(--c-danger-bg);border-radius:8px;padding:8px 10px;margin-bottom:12px}.wz-err.show{display:block}
.wz-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--c-border)}
/* Auswahl-Kacheln (Radio) */
.wz-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-bottom:12px}
.wz-tiles.sm{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.wz-tile{position:relative}
.wz-tile input{position:absolute;opacity:0;pointer-events:none}
.wz-tile label{display:flex;align-items:center;gap:8px;border:1px solid var(--c-border);border-radius:10px;padding:10px 12px;cursor:pointer;font-size:13.5px;color:var(--c-text);background:var(--c-surface);min-width:0;margin:0}
.wz-tile label span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wz-tile label .bi,.wz-tile label .wz-emo{color:var(--c-faint);flex:none;font-size:16px}
.wz-tile label .wz-emo{font-size:20px;line-height:1}
.wz-tile input:checked + label{border-color:var(--c-text-2);background:var(--c-surface-2);box-shadow:inset 0 0 0 1px var(--c-text-2)}
.wz-tile.dashed label{border-style:dashed}.wz-tile.dashed input:checked + label{border-style:solid}
.wz-tile label small{display:block;color:var(--c-muted);font-size:11.5px;white-space:normal}
/* Farb-/Emoji-Swatches */
.wz-swatches{display:flex;flex-wrap:wrap;gap:8px}
.wz-sw{position:relative}.wz-sw input{position:absolute;opacity:0;pointer-events:none}
.wz-sw label{width:38px;height:38px;border-radius:10px;border:2px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;margin:0;background:var(--c-surface-2)}
.wz-sw input:checked + label{border-color:var(--c-text-2);box-shadow:0 0 0 2px var(--c-surface) inset}
/* Eingeblendete Teile */
.wz-reveal{display:none;margin-top:8px}.wz-reveal.show{display:block}
/* Bild-Upload */
.wz-img{display:flex;align-items:center;gap:14px}
.wz-img-prev{width:84px;height:84px;border-radius:12px;background:var(--c-surface-3);border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;color:var(--c-faint-2);font-size:28px;overflow:hidden;flex:none}
.wz-img-prev img{width:100%;height:100%;object-fit:cover}
/* Zusammenfassung */
.wz-sum{display:grid;grid-template-columns:170px 1fr;gap:8px 16px;font-size:14px;margin:0}
.wz-sum dt{color:var(--c-muted);font-weight:500;margin:0}.wz-sum dd{margin:0;color:var(--c-text);font-weight:600;overflow-wrap:anywhere}
/* Erfolg */
.wz-done{text-align:center;padding:30px 10px}
.wz-done .bi-check-circle-fill{font-size:54px;color:var(--c-success-fg)}
.wz-done h4{font-weight:700;margin-top:12px}
.wz-done .btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
/* Hub */
.wz-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.wz-hubcard{display:flex;gap:12px;align-items:flex-start;background:var(--c-surface);border:1px solid var(--c-border);border-radius:12px;padding:14px 16px;text-decoration:none;color:inherit}
.wz-hubcard:hover{border-color:var(--c-accent-soft);box-shadow:0 8px 20px -14px rgba(15,23,42,.3)}
.wz-hubcard .wz-hubico{width:40px;height:40px;border-radius:10px;background:var(--c-accent-bg);color:var(--c-accent-fg);display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.wz-hubcard b{display:block;font-size:14.5px;color:var(--c-text)}
.wz-hubcard small{color:var(--c-muted);font-size:12.5px;line-height:1.4}
@media (max-width:575.98px){.wz-steps{grid-template-columns:repeat(2,1fr)!important}.wz-card{padding:16px 14px}.wz-sum{grid-template-columns:1fr;gap:2px 0}.wz-sum dt{margin-top:8px}}

/* __EINORDNEN_ASSISTENT__ Produktliste im Assistenten «Produkte einordnen» (10.10.2026) */
.ew-list{max-height:52vh;overflow:auto}
.ew-row{cursor:pointer}
.ew-row:has(.ew-cb:checked){background:var(--c-accent-bg,rgba(37,99,235,.08))}

/* ══ 04-components/setup-checklist.css ══ */
/* ── Einrichtungs-Checkliste auf dem Dashboard ── */
.su-card{border:1px solid var(--c-accent-tint);background:linear-gradient(180deg,var(--c-surface-2) 0%,var(--c-surface) 100%)}
.su-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 18px 10px}
.su-title{font-size:16px;font-weight:700;color:var(--c-text);margin:0;display:flex;align-items:center;gap:8px}
.su-title .bi{color:var(--c-accent-fg)}
.su-sub{font-size:13px;color:var(--c-muted);margin-top:2px}
.su-prog{display:flex;align-items:center;gap:10px;min-width:220px}
.su-bar{flex:1;height:8px;border-radius:999px;background:var(--c-surface-4);overflow:hidden}
.su-bar > span{display:block;height:100%;background:var(--c-accent);border-radius:999px}
.su-pct{font-size:13px;font-weight:700;color:var(--c-accent-deep);white-space:nowrap}
.su-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;padding:6px 18px 16px}
.su-item{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border:1px solid var(--c-border);border-radius:10px;background:var(--c-surface);text-decoration:none;color:inherit;min-width:0}
a.su-item:hover{border-color:var(--c-accent-soft);background:var(--c-surface-2)}
.su-item.done{opacity:.72}
.su-item.done .su-lbl{text-decoration:line-through;color:var(--c-text-3)}
.su-ck{width:22px;height:22px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:13px;border:2px solid var(--c-border-2);color:var(--c-on-accent);margin-top:1px}
.su-item.done .su-ck{background:var(--c-success);border-color:var(--c-success)}
.su-item.next .su-ck{border-color:var(--c-accent)}
.su-item.next{border-color:var(--c-accent);box-shadow:0 0 0 2px var(--c-accent-tint)}
.su-txt{min-width:0;flex:1}
.su-lbl{font-size:13.5px;font-weight:600;color:var(--c-text);line-height:1.3}
.su-hint{font-size:12px;color:var(--c-muted);line-height:1.35}
.su-opt{font-size:10.5px;font-weight:600;color:var(--c-muted);background:var(--c-surface-3);border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.su-go{color:var(--c-accent-fg);font-size:14px;flex:none;margin-top:2px}
.su-foot{display:flex;justify-content:flex-end;gap:8px;padding:0 18px 14px}
@media (max-width:575.98px){.su-list{grid-template-columns:1fr;padding:6px 12px 12px}.su-head{padding:14px 12px 8px}.su-foot{padding:0 12px 12px}}

/* ══ 04-components/tenant-picker.css ══ */
/* ── Mandanten-Wahl-Leiste (Super-Admin in Formularen) ── */
.tenant-picker-bar {
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid var(--c-warn);
    background: linear-gradient(135deg, var(--c-warn-bg-2) 0%, var(--c-warn-bg) 100%);
    box-shadow: 0 2px 8px rgba(245,158,11,.12);
  }
  .tenant-picker-inner { padding: 0; }
  .tenant-picker-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--c-warn);
    color: var(--c-on-accent);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .tenant-picker-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.7);
    animation: tpPulse 2s ease-in-out infinite;
  }
  @keyframes tpPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(.7); }
  }
  .tenant-picker-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
  }
  .tenant-picker-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(245,158,11,.15);
    color: var(--c-warn-fg);
    display:flex; align-items:center; justify-content:center;
    font-size: 1rem;
    flex-shrink: 0;
  }
  .tenant-picker-text {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-width: 0;
  }
  .tenant-picker-title {
    font-size: .8rem;
    font-weight: 700;
    color: var(--c-warn-deep);
    line-height: 1.2;
  }
  .tenant-picker-sub {
    font-size: .7rem;
    color: var(--c-warn-deep);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tenant-picker-select {
    flex: 1;
    min-width: 0;
    border: 1.5px solid var(--c-warn-bg);
    border-radius: 8px;
    padding: 7px 32px 7px 12px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-text-2);
    background: var(--c-surface) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a16207' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right .75rem center / 14px 10px;
    appearance: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
  }
  .tenant-picker-select:focus {
    border-color: var(--c-warn);
    box-shadow: 0 0 0 3px rgba(245,158,11,.2);
  }
  @media (max-width: 576px) {
    .tenant-picker-body { flex-wrap: wrap; }
    .tenant-picker-sub { display: none; }
  }

/* ══ 04-components/product-preview.css ══ */
/* ── Produkt-Textvorschau (Kachel/Bon/Rechnung) ── */
.ppv{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin-top:16px;padding-top:14px;border-top:1px solid var(--c-border)}
.ppv-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c-muted);margin-bottom:6px}
.ppv-tile{width:118px;height:96px;border:1px solid var(--c-border);border-radius:12px;background:var(--c-surface);box-shadow:0 1px 3px rgba(0,0,0,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px;text-align:center}
.ppv-emoji{font-size:22px;line-height:1.1}
.ppv-name{font-weight:600;font-size:14px;line-height:1.2;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%}
.ppv-tile.ppv-compact .ppv-name{-webkit-line-clamp:3;font-size:15px}
.ppv-price{font-size:11px;font-weight:600;color:var(--c-text-3)}
.ppv-lines{display:flex;flex-direction:column;gap:5px;min-width:220px;flex:1 1 220px}
.ppv-line{display:flex;gap:8px;align-items:baseline;font-size:.85rem}
.ppv-line b{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--c-muted);flex:none;width:76px}
.ppv-line span{font-weight:600;overflow-wrap:anywhere}
.ppv-cut{font-size:.78rem;color:var(--c-warn-fg)}

/* ══ 04-components/inventur.css ══ */
/* ── Inventur: Zaehlmaske ── */
.inv-s-neutral{--inv-c:#94a3b8;--inv-bg:#f8fafc}
.inv-s-orange{--inv-c:#f59e0b;--inv-bg:#fffbeb}
.inv-s-green{--inv-c:#16a34a;--inv-bg:#f0fdf4}
.inv-s-violet{--inv-c:#7c3aed;--inv-bg:#f5f3ff}
.inv-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--inv-c);flex:none}
.inv-state{border-left:4px solid var(--inv-c)}
.inv-chip{display:inline-block;padding:2px 10px;border-radius:999px;border:1px solid var(--inv-c);background:var(--inv-bg);color:var(--c-text-2);font-size:13px;text-decoration:none;white-space:nowrap}
.inv-chip:hover{filter:brightness(.97);color:var(--c-text)}
.inv-count td,.inv-count th{vertical-align:middle}
.inv-count tr.inv-sep td{background:var(--c-surface-3);font-weight:600;font-size:13px;padding-top:2px;padding-bottom:2px}
.inv-cell{display:flex;align-items:center;gap:6px;min-width:150px}
.inv-cell.inv-off{opacity:.45}
.inv-cell .inv-in{width:72px;text-align:right}
.inv-cell .inv-calls{font-size:12px;color:var(--c-text-3);white-space:nowrap}
.inv-cell .inv-sum{font-weight:600;min-width:34px;text-align:right}
.inv-cell .inv-target{font-size:12px;color:var(--c-accent-fg);white-space:nowrap}
.inv-cell .inv-clear{border:0;background:none;color:var(--c-faint);padding:0 2px;line-height:1}
.inv-cell .inv-clear:hover{color:var(--c-danger-fg)}
.inv-pk{display:flex;gap:4px}
.inv-pk input{width:58px;text-align:right}
.inv-grip-cell{width:18px;padding-left:0!important;padding-right:0!important}
.inv-count tr.inv-row-done td{background:var(--c-success-bg-2)}
.inv-count .inv-in.inv-has{font-weight:600}
.inv-chips{display:inline-flex;flex-wrap:wrap;gap:4px}
.inv-chip-v{display:inline-flex;align-items:center;gap:2px;padding:1px 4px 1px 8px;border-radius:999px;background:var(--c-surface-3);font-weight:600;font-size:13px}
.inv-chip-v button{border:0;background:none;color:var(--c-faint);padding:0 3px;line-height:1}
.inv-chip-v button:hover{color:var(--c-danger-fg)}
.inv-soll{font-size:12px;color:var(--c-accent-fg);white-space:nowrap}
.inv-assign{font-size:11px;font-weight:600;color:var(--c-violet-fg);background:var(--c-violet-bg-2);border:1px solid var(--c-violet-bg);border-radius:999px;padding:0 6px;white-space:nowrap}
.inv-total{white-space:nowrap;min-width:56px}
.inv-bar{position:sticky;bottom:0;background:var(--c-surface);border-top:1px solid var(--c-border);padding:10px 0;display:flex;flex-wrap:wrap;gap:8px;z-index:5}

/* ── Inventur: Sortieren per Griff ── */
.inv-grip{cursor:grab;color:var(--c-faint);touch-action:none}
.inv-grip:active{cursor:grabbing}
.inv-ghost{opacity:.4}
input.inv-done{width:1.15em;height:1.15em;cursor:pointer}

/* ══ 04-components/swatches.css ══ */
/* Farbwahl-Kreise (Kategorie/Standort/Produkt/Tischgruppe/Benutzer): <label class="swatch <%= aktiv ? 'is-active' : '' %>" style="--dot:<%= farbe %>"> */
.swatch{--dot:var(--c-surface-3);width:36px;height:36px;border-radius:50%;background:var(--dot);border:3px solid transparent;cursor:pointer;flex-shrink:0;position:relative;display:inline-block;transition:transform .12s,border-color .12s,box-shadow .12s,background .12s}
.swatch.is-active{border-color:var(--bs-primary);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.swatch-custom:not(.is-active){border:2px dashed var(--c-border-2)}
.swatch-inherit{background:repeating-linear-gradient(45deg,var(--c-surface-3),var(--c-surface-3) 4px,var(--c-surface) 4px,var(--c-surface) 8px)}
.swatch-inherit:not(.is-active){border-color:var(--c-border-2)}
.swatch-user{border-color:var(--c-border)}.swatch-user.is-active{border-color:var(--c-text);box-shadow:none}
.swatch-lbl{color:var(--c-muted);font-size:1rem;font-weight:700}.swatch-lbl.is-active{color:#fff;font-size:.95rem;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.swatch-inherit-ico{color:var(--c-faint-2);font-size:1rem}.swatch-inherit-ico.is-active{color:var(--c-muted)}
.swatch-box{border:2px solid var(--c-border);transition:border-color .12s,background .12s,transform .12s}
/* Farbpunkte (Standort-/Kategoriefarbe) */
.color-dot.dot-6{width:6px;height:6px}.color-dot.dot-8{width:8px;height:8px}.color-dot.dot-10{width:10px;height:10px}.color-dot.dot-12{width:12px;height:12px}.color-dot.dot-14{width:14px;height:14px}.color-dot.dot-18{width:18px;height:18px}.color-dot.dot-22{width:22px;height:22px}.color-dot.dot-24{width:24px;height:24px}.color-dot.dot-42{width:42px;height:42px}
.color-dot.ring{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}.color-dot.ring-surface{border:2px solid var(--c-surface);box-shadow:0 0 0 1px rgba(0,0,0,.1)}
/* Dynamische Farbe als Daten: --dot / --chip / --bubble */
.bg-dyn{background:var(--dot)}.color-dyn{color:var(--dot)}.border-start-dyn{border-left:5px solid var(--dot)}
.user-chip{--chip:var(--c-muted);background:color-mix(in srgb,var(--chip) 12%,transparent);color:var(--chip);border:1px solid var(--chip)}
.icon-bubble.lg{width:48px;height:48px;border-radius:12px}.icon-bubble.xl{width:52px;height:52px;border-radius:12px}
.icon-bubble.is-success{--bubble:#10b981}.icon-bubble.is-muted{--bubble:var(--c-muted)}
/* Diagramm-Palette nach Index */
.pal-0{background:#2563eb}.pal-1{background:#7c3aed}.pal-2{background:#db2777}.pal-3{background:#ea580c}.pal-4{background:#16a34a}.pal-5{background:#0891b2}.pal-6{background:#ca8a04}.pal-7{background:#64748b}
/* Hinweiskaesten */
.callout-ok{border-color:var(--c-success-bg)!important;background:var(--c-success-bg-2)}.callout-bad{border-color:var(--c-danger-bg)!important;background:var(--c-danger-bg-2)}
.callout-warn{background:var(--c-warn-bg);border:1px solid var(--c-warn)}.callout-warn-soft{background:var(--c-warn-bg-2);border-left:4px solid var(--c-warn)!important}
.panel-brand{border-radius:16px;background:var(--c-surface-2);border-left:4px solid var(--brand-primary)!important}
.card-topbar{height:4px;background:linear-gradient(90deg,var(--brand-primary),color-mix(in srgb,var(--brand-primary) 67%,transparent))}.card-topbar.success{background:linear-gradient(90deg,var(--c-success),#57cc99)}
.chip-brand{display:inline-flex;align-items:center;gap:4px;background:color-mix(in srgb,var(--brand-primary) 8%,transparent);color:var(--brand-primary);border:1px solid color-mix(in srgb,var(--brand-primary) 20%,transparent);border-radius:20px;padding:3px 10px;font-size:.75rem}
.cat-tile{--dot:#6366f1;background:var(--dot);width:104px;height:104px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;font-weight:700;font-size:.78rem;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.12);padding:6px;transition:background .15s}
.cat-pill{--dot:#6366f1;background:var(--dot);display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:50px;font-weight:600;font-size:.9rem;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.12);transition:background .15s;max-width:100%}
.tone-success-on-dark{background:rgba(16,185,129,.13);color:#34d399;border:1px solid rgba(16,185,129,.33)}.bar-track-on-dark{background:rgba(255,255,255,.08);height:4px}
.grad-indigo{background:linear-gradient(135deg,#6366f1,#4338ca)}
.bg-violet{background:var(--c-violet)}.bg-brand{background:var(--brand-primary)}
.border-accent-tint{border:1px solid var(--c-accent-tint)}.border-danger-soft{border:1px solid var(--c-danger-bg)}.border-color-token{border-color:var(--c-border)!important}.border-color-muted{border-color:var(--c-muted)!important}.border-dashed-muted{border-style:dashed;border-color:var(--c-muted)}.border-top-token-2{border-top:2px solid var(--c-border)}
.log-console{max-height:600px;padding:16px;color:#d4d4d4;border-radius:0 0 8px 8px}

/* ══ 04-components/page-info.css ══ */
/* __PAGE_INFO__ Kontext-Info «i» neben dem Seitentitel in der Kopfzeile (Partial views/partials/page-info.ejs, Schlüssel in src/lib/pageInfo.js). */
.pi-wrap { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.pi-btn { width: 20px; height: 20px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); border: 0; font: italic 800 .74rem Georgia, serif; line-height: 1; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pi-btn:hover, .pi-btn[aria-expanded="true"] { filter: brightness(1.08); box-shadow: 0 0 0 3px rgba(var(--c-accent-rgb, 37, 99, 235), .18); }
.pi-pop { position: absolute; top: calc(100% + 14px); left: -8px; z-index: 1050; width: min(420px, calc(100vw - 32px)); background: var(--c-surface); border: 1px solid var(--c-border-2); border-radius: 12px; box-shadow: 0 8px 24px rgba(var(--c-shadow-rgb), .14); padding: 14px 16px; text-align: left; white-space: normal; font-weight: 400; }
.pi-pop dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pi-pop dt { font-weight: 700; font-size: .85rem; color: var(--c-accent-fg); margin-bottom: 2px; }
.pi-pop dd { margin: 0; color: var(--c-muted); font-size: .85rem; line-height: 1.5; }
.pi-help { display: inline-flex; gap: 6px; align-items: center; margin-top: 12px; font-size: .8rem; font-weight: 600; color: var(--c-accent-fg); text-decoration: none; }
.pi-help:hover { text-decoration: underline; color: var(--c-accent-fg); }
@media (max-width: 767.98px) {
  .pi-pop { position: fixed; top: calc(var(--topbar-h, 56px) + 8px); left: 16px; right: auto; width: calc(100vw - 32px); }
}

/* ══ 04-components/page-head.css ══ */
/* __PAGE_HEAD__ Einheitlicher Seitenkopf: Icon-Badge + Titel + Untertitel (+ Aktionen rechts). Gleiche Grösse in Kopfzeile (klein) und Seite. Markup: .ph > .ph-main (.ph-icon + .ph-text: h1.ph-title, .ph-sub) + .ph-actions */
:root { --ph-size: 1.35rem; --ph-weight: 700; }
.ph { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ph-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ph-text { min-width: 0; }
.ph-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--c-accent-tint); color: var(--c-accent-fg); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; line-height: 1; }
.ph-icon-sm { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
.ph-title { font-size: var(--ph-size); font-weight: var(--ph-weight); margin: 0; letter-spacing: -.01em; line-height: 1.25; color: var(--c-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ph-title .badge { font-size: .72rem; font-weight: 600; }
.ph-sub { color: var(--c-muted); font-size: .86rem; margin-top: 2px; line-height: 1.45; }
.ph-sub a { color: inherit; }
.ph-back { display: inline-block; font-size: .8rem; margin-bottom: 2px; text-decoration: none; color: var(--c-muted); }
.ph-back:hover { color: var(--c-text); }
.ph-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Bestehende Kopf-Varianten auf dieselbe Schrift bringen */
.wg-h1 { font-size: var(--ph-size); font-weight: var(--ph-weight); }
.tnav-title { font-size: var(--ph-size); font-weight: var(--ph-weight); gap: 12px; }
.tnav-title > i.bi:first-child { width: 36px; height: 36px; border-radius: 10px; background: var(--c-accent-tint); color: var(--c-accent-fg) !important; display: inline-flex; align-items: center; justify-content: center; font-size: 18px !important; flex-shrink: 0; }
.wz-title { font-size: var(--ph-size); font-weight: var(--ph-weight); gap: 12px; }
.wz-title > .bi { width: 36px; height: 36px; border-radius: 10px; background: var(--c-accent-tint); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.ws-head h4 { font-size: var(--ph-size); font-weight: var(--ph-weight); display: flex; align-items: center; gap: 12px; }
.ws-head h4 > .bi { width: 36px; height: 36px; border-radius: 10px; background: var(--c-accent-tint); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; margin: 0 !important; }
@media (max-width: 767.98px) { :root { --ph-size: 1.15rem; } .ph-icon { width: 32px; height: 32px; font-size: 16px; } }

/* ══ 05-utilities.css ══ */
/* ═══════════════════════════════════════════════════════════════════════════
   05 · Utilities — ersetzen die frueheren style="…"-Attribute in den Views.
   Bootstrap hat schon: d-none/d-flex, fw-*, text-nowrap, rounded-circle, w-100, mw-100, overflow-*, position-*, opacity-*, lh-1, align-middle …
   Hier nur, was Bootstrap nicht hat. Namensschema: <eigenschaft>-<wert>.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Breiten in px (Tabellenspalten, Eingaben) */
.w-px-34{width:34px}.w-px-36{width:36px}.w-px-40{width:40px}.w-px-44{width:44px}.w-px-48{width:48px}.w-px-56{width:56px}.w-px-64{width:64px}.w-px-70{width:70px}.w-px-80{width:80px}.w-px-90{width:90px}
.w-px-100{width:100px}.w-px-110{width:110px}.w-px-120{width:120px}.w-px-130{width:130px}.w-px-140{width:140px}.w-px-150{width:150px}.w-px-160{width:160px}.w-px-180{width:180px}.w-px-200{width:200px}.w-px-220{width:220px}.w-px-260{width:260px}
.w-px-6{width:6px}.w-px-32{width:32px}.w-px-38{width:38px}.w-px-58{width:58px}.w-px-60{width:60px}.w-px-72{width:72px}.w-px-84{width:84px}.w-px-210{width:210px}.w-rem-6{width:6rem}
.h-px-32{height:32px}.h-px-38{height:38px}.h-px-34{height:34px}.h-px-36{height:36px}.h-px-40{height:40px}.h-px-42{height:42px}.h-px-44{height:44px}.h-px-56{height:56px}.h-px-72{height:72px}.mh-px-44{max-height:44px}.mh-px-200{max-height:200px}.mh-px-220{max-height:220px}.mh-px-260{max-height:260px}
/* Max-/Min-Breiten */
.mw-px-90{max-width:90px}.mw-px-120{max-width:120px}.mw-px-140{max-width:140px}.mw-px-160{max-width:160px}.mw-px-170{max-width:170px}.mw-px-200{max-width:200px}.mw-px-220{max-width:220px}.mw-px-240{max-width:240px}.mw-px-260{max-width:260px}.mw-px-280{max-width:280px}
.mw-px-300{max-width:300px}.mw-px-320{max-width:320px}.mw-px-340{max-width:340px}.mw-px-360{max-width:360px}.mw-px-420{max-width:420px}.mw-px-480{max-width:480px}.mw-px-520{max-width:520px}.mw-px-640{max-width:640px}.mw-px-380{max-width:380px}.mw-px-760{max-width:760px}.mw-px-900{max-width:900px}.mw-px-980{max-width:980px}
.minw-0{min-width:0}.minw-px-22{min-width:22px}.minw-px-110{min-width:110px}.minw-px-120{min-width:120px}.minw-px-130{min-width:130px}.minw-px-150{min-width:150px}.minw-px-170{min-width:170px}.minw-px-230{min-width:230px}.minw-px-700{min-width:700px}.minw-px-900{min-width:900px}
/* Schriftgroessen (px-Skala; rem-Werte der Views wurden auf den naechsten Schritt gerundet) */
.fs-8{font-size:8px}.fs-10{font-size:10px}.fs-11{font-size:11px}.fs-12{font-size:12px}.fs-13{font-size:13px}.fs-14{font-size:14px}.fs-15{font-size:15px}.fs-16{font-size:16px}.fs-17{font-size:17px}.fs-18{font-size:18px}.fs-19{font-size:19px}.fs-20{font-size:20px}.fs-22{font-size:22px}.fs-24{font-size:24px}.fs-26{font-size:26px}.fs-32{font-size:32px}.fs-36{font-size:36px}
/* Radien, die Bootstrap nicht hat */
.rounded-10{border-radius:10px}.rounded-12{border-radius:12px}.rounded-14{border-radius:14px}
/* Laufweite (Kleinkapitel-Labels) */
.ls-1{letter-spacing:.04em}.ls-2{letter-spacing:.08em}.ls-0{letter-spacing:0}
/* Zeiger, Umbruch, Scrollen */
.cursor-pointer{cursor:pointer}.cursor-grab{cursor:grab}.cursor-default{cursor:default}
.pre-wrap{white-space:pre-wrap}.pre-line{white-space:pre-line}.break-all{word-break:break-all}.break-word{overflow-wrap:anywhere}
.scroll-x{overflow-x:auto}.scroll-y{overflow-y:auto}
.resize-none{resize:none}
/* Unsichtbare Datei-Eingabe hinter einem gestylten Button */
.input-hidden{opacity:0;position:absolute;width:0;height:0;pointer-events:none}
/* Abstand unter der Topbar fuer sticky Elemente */
.sticky-below-topbar{position:sticky;top:var(--topbar-h)}
/* Semantische Farb-Utilities (Token-basiert, dunkel automatisch) */
.bg-surface{background:var(--c-surface)}.bg-surface-2{background:var(--c-surface-2)}.bg-surface-3{background:var(--c-surface-3)}.bg-accent-soft{background:var(--c-accent-bg)}.bg-console{background:var(--c-console);color:var(--c-console-text)}
.text-accent{color:var(--c-accent-fg)}.text-accent-deep{color:var(--c-accent-deep)}.text-soft{color:var(--c-text-3)}.text-faint{color:var(--c-faint)}.text-warn{color:var(--c-warn-fg)}.text-success-fg{color:var(--c-success-fg)}.text-danger-fg{color:var(--c-danger-fg)}.text-violet{color:var(--c-violet-fg)}
.border-token{border:1px solid var(--c-border)}.border-token-2{border:1px solid var(--c-border-2)}.border-top-token{border-top:1px solid var(--c-border)}.border-bottom-token{border-bottom:1px solid var(--c-border)}
.bg-success-soft{background:var(--c-success-bg)}.bg-danger-soft{background:var(--c-danger-bg)}.bg-warn-soft{background:var(--c-warn-bg)}.bg-orange-soft{background:var(--c-orange-bg)}.bg-violet-soft{background:var(--c-violet-bg)}.bg-accent-tint{background:var(--c-accent-tint)}
.text-orange{color:var(--c-orange-fg)}.text-orange-deep{color:var(--c-orange-deep)}.text-warn-deep{color:var(--c-warn-deep)}.text-success-deep{color:var(--c-success-deep)}.text-danger-deep{color:var(--c-danger-deep)}
.border-start-warn{border-left:4px solid var(--c-warn)}.border-start-accent{border-left:4px solid var(--c-accent)}.border-start-success{border-left:4px solid var(--c-success)}.border-start-danger{border-left:4px solid var(--c-danger)}
.text-on-dark{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}

/* ══ 06-pages/categories-form.css ══ */
/* ── Seite categories/form.ejs — gilt nur auf body.page-categories (frueher <style> im View; globale Selektoren wie .form-control duerfen nicht auf andere Seiten durchschlagen) ── */
/* Local-only fine-tuning. Everything else uses Bootstrap. */
  /* Color swatch sizing is inline; <style> only provides hover. */
  .page-categories .color-swatch:hover{ transform: scale(1.1) !important; }

  /* Icon-tile state hooks — sizing/layout is inline so it never breaks. */
  .page-categories .icon-tile:hover{ border-color: var(--bs-primary) !important; background: var(--c-accent-bg) !important; transform: translateY(-1px); }
  .page-categories .icon-tile.active{ border-color: var(--bs-primary) !important; background: var(--c-accent-bg) !important; box-shadow: 0 0 0 2px rgba(37, 99, 235, .15); }
  .page-categories .icon-tile.active .material-icons{ color: var(--bs-primary) !important; }

  .page-categories .pt-tile{
    cursor: pointer;
    transition: border-color .12s, background .12s;
  }
  .page-categories .pt-tile.active{
    border-color: var(--bs-primary) !important;
    background: var(--c-accent-bg);
  }
  .page-categories .pt-tile input{ position: absolute; opacity: 0; pointer-events: none; }

  .page-categories .cat-preview{
    position: sticky;
    top: 80px;
  }
  .page-categories .cat-preview-chip{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--c-on-accent);
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    transition: background .15s;
  }
  .page-categories .cat-preview-chip .material-icons{ font-size: 1.3rem; }
  .page-categories .cat-preview-tile{
    width: 96px; height: 96px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--c-on-accent);
    font-weight: 700;
    font-size: .82rem;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    transition: background .15s;
    margin: 0 auto;
  }
  .page-categories .cat-preview-tile .material-icons{ font-size: 2.1rem; }

/* ══ 06-pages/hotel-rooms.css ══ */
/* ── Seite hotel/rooms.ejs — gilt nur auf body.page-hotel/page-hotel-rooms (frueher <style> im View; globale Selektoren wie .form-control duerfen nicht auf andere Seiten durchschlagen) ── */
/* __HOTEL_ROOMS_v2__ */
.page-hotel .hr-count, .page-hotel-rooms .hr-count{font-size:11.5px;font-weight:600;line-height:1;padding:3px 7px;border-radius:999px;background:var(--c-surface-3);color:var(--c-text-3)}
.page-hotel .tnav-item.active .hr-count, .page-hotel-rooms .tnav-item.active .hr-count{background:var(--c-surface);color:var(--c-text-2)}
.page-hotel .hr-card, .page-hotel-rooms .hr-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:12px;overflow:hidden}
.page-hotel .hr-toolbar, .page-hotel-rooms .hr-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.page-hotel .hr-search, .page-hotel-rooms .hr-search{position:relative;flex:0 1 260px;min-width:180px}
.page-hotel .hr-search .bi, .page-hotel-rooms .hr-search .bi{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--c-faint);font-size:14px;pointer-events:none}
.page-hotel .hr-search input, .page-hotel-rooms .hr-search input{padding-left:32px;height:36px;border-radius:8px;font-size:14px}
.page-hotel .hr-chips, .page-hotel-rooms .hr-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 320px;min-width:0}
.page-hotel .hr-chip, .page-hotel-rooms .hr-chip{height:32px;padding:0 12px;border:1px solid var(--c-border);border-radius:999px;background:var(--c-surface);color:var(--c-text-3);font-size:13px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;white-space:nowrap}
.page-hotel .hr-chip:hover, .page-hotel-rooms .hr-chip:hover{border-color:var(--c-border-2);background:var(--c-surface-2)}
.page-hotel .hr-chip.active, .page-hotel-rooms .hr-chip.active{background:var(--c-text-2);border-color:var(--c-text-2);color:var(--c-on-accent)}
.page-hotel .hr-chip span, .page-hotel-rooms .hr-chip span{opacity:.65;font-weight:600;font-size:12px}
.page-hotel .hr-newpanel, .page-hotel-rooms .hr-newpanel{background:var(--c-surface);border:1px solid var(--c-border-2);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.page-hotel .hr-newpanel .form-label, .page-hotel-rooms .hr-newpanel .form-label, .page-hotel .hr-form .form-label, .page-hotel-rooms .hr-form .form-label{font-size:12px;color:var(--c-muted);margin-bottom:3px}
.page-hotel .hr-addbtn, .page-hotel-rooms .hr-addbtn{min-width:150px}
.page-hotel .hr-paneltitle, .page-hotel-rooms .hr-paneltitle{font-size:14px;font-weight:600;color:var(--c-text);margin:0 0 10px;display:flex;align-items:center;gap:8px}
/* Zeilen-Raster (Zimmer, Saisonpreise, iCal) */
.page-hotel .hr-grid, .page-hotel-rooms .hr-grid{display:grid;gap:10px;align-items:center;padding:8px 16px}
.page-hotel .hr-grid-rooms, .page-hotel-rooms .hr-grid-rooms{grid-template-columns:minmax(120px,1.3fr) minmax(150px,1.5fr) minmax(80px,.6fr) minmax(150px,1fr) 60px 38px}
.page-hotel .hr-grid-rates, .page-hotel-rooms .hr-grid-rates{grid-template-columns:minmax(140px,1.4fr) minmax(120px,1.2fr) 150px minmax(130px,1fr) 110px 76px}
.page-hotel .hr-grid-ical, .page-hotel-rooms .hr-grid-ical{grid-template-columns:minmax(120px,170px) minmax(0,1fr) minmax(0,1fr) 92px;padding:12px 16px}
.page-hotel .hr-head, .page-hotel-rooms .hr-head{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--c-muted);font-weight:600;border-bottom:1px solid var(--c-border);padding-top:10px;padding-bottom:10px}
.page-hotel .hr-group, .page-hotel-rooms .hr-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 16px;background:var(--c-surface-2);border-bottom:1px solid var(--c-border);font-size:13px;color:var(--c-muted)}
.page-hotel .hr-g + .hr-g .hr-group, .page-hotel-rooms .hr-g + .hr-g .hr-group{border-top:1px solid var(--c-border)}
.page-hotel .hr-group strong, .page-hotel-rooms .hr-group strong{color:var(--c-text);font-size:14px}
.page-hotel .hr-group .hr-gcount, .page-hotel-rooms .hr-group .hr-gcount{margin-left:auto}
.page-hotel .hr-row, .page-hotel-rooms .hr-row{border-bottom:1px solid var(--c-border);margin:0}
.page-hotel .hr-g:last-child .hr-row:last-child, .page-hotel-rooms .hr-g:last-child .hr-row:last-child, .page-hotel .hr-list > .hr-row:last-child, .page-hotel-rooms .hr-list > .hr-row:last-child{border-bottom:0}
.page-hotel .hr-row[hidden], .page-hotel-rooms .hr-row[hidden], .page-hotel .hr-g[hidden], .page-hotel-rooms .hr-g[hidden]{display:none}
.page-hotel .hr-row.is-off, .page-hotel-rooms .hr-row.is-off{background:var(--c-surface-2)}
.page-hotel .hr-row.is-off input[type=text], .page-hotel-rooms .hr-row.is-off input[type=text], .page-hotel .hr-row.is-off select, .page-hotel-rooms .hr-row.is-off select, .page-hotel .hr-row.is-off .hr-fade, .page-hotel-rooms .hr-row.is-off .hr-fade{opacity:.55}
.page-hotel .hr-row.dirty, .page-hotel-rooms .hr-row.dirty{background:var(--c-warn-bg-2)}
.page-hotel .hr-row.dirty .hr-save, .page-hotel-rooms .hr-row.dirty .hr-save{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent)}
.page-hotel .hr-row .form-control, .page-hotel-rooms .hr-row .form-control, .page-hotel .hr-row .form-select, .page-hotel-rooms .hr-row .form-select{border-color:var(--c-border)}
.page-hotel .hr-row .form-control:focus, .page-hotel-rooms .hr-row .form-control:focus, .page-hotel .hr-row .form-select:focus, .page-hotel-rooms .hr-row .form-select:focus{border-color:var(--c-accent-soft)}
.page-hotel .hr-c-act, .page-hotel-rooms .hr-c-act{display:flex;align-items:center;justify-content:center}
.page-hotel .hr-c-act .form-check-input, .page-hotel-rooms .hr-c-act .form-check-input{display:block}
.page-hotel .hr-save, .page-hotel-rooms .hr-save{width:34px;height:31px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.page-hotel .hr-hkw, .page-hotel-rooms .hr-hkw{position:relative;display:block}
.page-hotel .hr-hkw .hr-dot, .page-hotel-rooms .hr-hkw .hr-dot{position:absolute;left:10px;top:50%;margin-top:-4px;pointer-events:none}
.page-hotel .hr-hkw select, .page-hotel-rooms .hr-hkw select{padding-left:26px}
.page-hotel .hr-dot, .page-hotel-rooms .hr-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c-faint);flex:none}
.page-hotel .hr-dot[data-hk="clean"], .page-hotel-rooms .hr-dot[data-hk="clean"]{background:var(--c-success)}
.page-hotel .hr-dot[data-hk="dirty"], .page-hotel-rooms .hr-dot[data-hk="dirty"]{background:var(--c-warn)}
.page-hotel .hr-dot[data-hk="cleaning"], .page-hotel-rooms .hr-dot[data-hk="cleaning"]{background:var(--c-accent)}
.page-hotel .hr-dot[data-hk="out_of_order"], .page-hotel-rooms .hr-dot[data-hk="out_of_order"]{background:var(--c-danger)}
.page-hotel .hr-ml, .page-hotel-rooms .hr-ml{display:none;font-size:11px;color:var(--c-muted);margin-bottom:2px}
.page-hotel .hr-empty, .page-hotel-rooms .hr-empty{padding:28px 16px;text-align:center;color:var(--c-muted);font-size:14px}
.page-hotel .hr-empty .bi, .page-hotel-rooms .hr-empty .bi{display:block;font-size:28px;color:var(--c-faint-2);margin-bottom:6px}
.page-hotel .hr-rname, .page-hotel-rooms .hr-rname{font-weight:600;color:var(--c-text)}
.page-hotel .hr-rprice, .page-hotel-rooms .hr-rprice{font-weight:600;color:var(--c-text);white-space:nowrap}
.page-hotel .hr-delta, .page-hotel-rooms .hr-delta{font-size:11.5px;font-weight:600;color:var(--c-muted);background:var(--c-surface-3);border-radius:6px;padding:2px 6px;margin-left:6px}
.page-hotel .hr-acts, .page-hotel-rooms .hr-acts{display:flex;gap:6px;justify-content:flex-end}
.page-hotel .hr-acts .btn, .page-hotel-rooms .hr-acts .btn{width:32px;height:31px;padding:0;display:inline-flex;align-items:center;justify-content:center}
/* Kategorien-Karten */
.page-hotel .hr-cats, .page-hotel-rooms .hr-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.page-hotel .hr-cat, .page-hotel-rooms .hr-cat{position:relative;background:var(--c-surface);border:1px solid var(--c-border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .12s,box-shadow .12s}
.page-hotel a.hr-cat, .page-hotel-rooms a.hr-cat{text-decoration:none;color:inherit}
.page-hotel a.hr-cat:hover, .page-hotel-rooms a.hr-cat:hover{border-color:var(--c-border-2);box-shadow:0 8px 20px -12px rgba(15,23,42,.25)}
.page-hotel .hr-cat-img, .page-hotel-rooms .hr-cat-img{height:132px;background:var(--c-surface-3);display:flex;align-items:center;justify-content:center;color:var(--c-faint-2);font-size:34px;position:relative}
.page-hotel .hr-cat-img img, .page-hotel-rooms .hr-cat-img img{width:100%;height:100%;object-fit:cover;display:block}
.page-hotel .hr-cat-img .hr-imgn, .page-hotel-rooms .hr-cat-img .hr-imgn{position:absolute;right:8px;bottom:8px;font-size:11.5px;color:var(--c-on-accent);background:rgba(15,23,42,.6);border-radius:6px;padding:2px 7px;display:inline-flex;gap:5px;align-items:center}
.page-hotel .hr-cat-body, .page-hotel-rooms .hr-cat-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.page-hotel .hr-cat-top, .page-hotel-rooms .hr-cat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.page-hotel .hr-cat-name, .page-hotel-rooms .hr-cat-name{font-size:16px;font-weight:600;color:var(--c-text);line-height:1.25;margin:0}
.page-hotel .hr-cat-edit, .page-hotel-rooms .hr-cat-edit{color:var(--c-faint);font-size:14px}
.page-hotel a.hr-cat:hover .hr-cat-edit, .page-hotel-rooms a.hr-cat:hover .hr-cat-edit{color:var(--c-accent-fg)}
.page-hotel .hr-price, .page-hotel-rooms .hr-price{font-size:20px;font-weight:700;color:var(--c-text);line-height:1.1}
.page-hotel .hr-price small, .page-hotel-rooms .hr-price small{font-size:12px;color:var(--c-muted);font-weight:400}
.page-hotel .hr-meta, .page-hotel-rooms .hr-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.page-hotel .hr-tag, .page-hotel-rooms .hr-tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--c-text-3);background:var(--c-surface-3);border-radius:6px;padding:3px 8px;white-space:nowrap}
.page-hotel .hr-info, .page-hotel-rooms .hr-info{display:flex;gap:12px;align-items:flex-start;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:12px;padding:12px 16px;font-size:13px;color:var(--c-text-3);margin-bottom:14px}
.page-hotel .hr-info .bi, .page-hotel-rooms .hr-info .bi{font-size:18px;color:var(--c-accent-fg);line-height:1.2}
.page-hotel .hr-url, .page-hotel-rooms .hr-url{font-family:ui-monospace,Menlo,monospace;font-size:11.5px}
.page-hotel .hr-iroom, .page-hotel-rooms .hr-iroom{display:flex;flex-direction:column;gap:3px;min-width:0}
.page-hotel .hr-iroom small, .page-hotel-rooms .hr-iroom small{color:var(--c-muted)}
/* Schmale Inhaltsbreite (Handy, Tablet mit Sidebar): Zeilen werden zu Karten — Container-Query, damit die Sidebar keine Rolle spielt */
.page-hotel .hr-sec, .page-hotel-rooms .hr-sec{container-type:inline-size;container-name:hrsec}
@container hrsec (max-width:719.98px){
  .page-hotel .hr-head, .page-hotel-rooms .hr-head{display:none}
  .page-hotel .hr-ml, .page-hotel-rooms .hr-ml{display:block}
  .page-hotel .hr-grid, .page-hotel-rooms .hr-grid{padding:12px 14px}
  .page-hotel .hr-grid-rooms, .page-hotel-rooms .hr-grid-rooms{grid-template-columns:minmax(0,1fr) 64px 44px;grid-template-areas:"name floor floor" "cat cat cat" "hk act save";align-items:end}
  .page-hotel .hr-grid-rooms .hr-c-name, .page-hotel-rooms .hr-grid-rooms .hr-c-name{grid-area:name}.page-hotel .hr-grid-rooms .hr-c-floor, .page-hotel-rooms .hr-grid-rooms .hr-c-floor{grid-area:floor}.page-hotel .hr-grid-rooms .hr-c-cat, .page-hotel-rooms .hr-grid-rooms .hr-c-cat{grid-area:cat}
  .page-hotel .hr-grid-rooms .hr-c-hk, .page-hotel-rooms .hr-grid-rooms .hr-c-hk{grid-area:hk}.page-hotel .hr-grid-rooms .hr-c-act, .page-hotel-rooms .hr-grid-rooms .hr-c-act{grid-area:act;flex-direction:column;align-items:center;gap:5px;padding-bottom:3px}.page-hotel .hr-grid-rooms .hr-c-save, .page-hotel-rooms .hr-grid-rooms .hr-c-save{grid-area:save}
  .page-hotel .hr-save, .page-hotel-rooms .hr-save{width:44px;height:34px}
  .page-hotel .hr-grid-rates, .page-hotel-rooms .hr-grid-rates{grid-template-columns:1fr auto;grid-template-areas:"name state" "cat price" "period acts";gap:6px 10px}
  .page-hotel .hr-grid-rates .hr-c-name, .page-hotel-rooms .hr-grid-rates .hr-c-name{grid-area:name}.page-hotel .hr-grid-rates .hr-c-state, .page-hotel-rooms .hr-grid-rates .hr-c-state{grid-area:state;text-align:right}.page-hotel .hr-grid-rates .hr-c-cat, .page-hotel-rooms .hr-grid-rates .hr-c-cat{grid-area:cat}
  .page-hotel .hr-grid-rates .hr-c-price, .page-hotel-rooms .hr-grid-rates .hr-c-price{grid-area:price;text-align:right}.page-hotel .hr-grid-rates .hr-c-period, .page-hotel-rooms .hr-grid-rates .hr-c-period{grid-area:period}.page-hotel .hr-grid-rates .hr-c-acts, .page-hotel-rooms .hr-grid-rates .hr-c-acts{grid-area:acts}
  .page-hotel .hr-grid-ical, .page-hotel-rooms .hr-grid-ical{grid-template-columns:1fr auto;grid-template-areas:"room sync" "exp exp" "imp imp"}
  .page-hotel .hr-grid-ical .hr-c-room, .page-hotel-rooms .hr-grid-ical .hr-c-room{grid-area:room}.page-hotel .hr-grid-ical .hr-c-sync, .page-hotel-rooms .hr-grid-ical .hr-c-sync{grid-area:sync}.page-hotel .hr-grid-ical .hr-c-exp, .page-hotel-rooms .hr-grid-ical .hr-c-exp{grid-area:exp}.page-hotel .hr-grid-ical .hr-c-imp, .page-hotel-rooms .hr-grid-ical .hr-c-imp{grid-area:imp}
  .page-hotel .hr-search, .page-hotel-rooms .hr-search{flex:1 1 100%}
  .page-hotel .hr-chips, .page-hotel-rooms .hr-chips{flex-basis:100%}
  .page-hotel .hr-toolbar .hr-newbtn, .page-hotel-rooms .hr-toolbar .hr-newbtn{order:-1;width:100%}
}
@media (max-width:767.98px){
  .page-hotel .hr-addbtn, .page-hotel-rooms .hr-addbtn{width:100%}
  .page-hotel .hr-chips, .page-hotel-rooms .hr-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
}

/* ══ 06-pages/info.css ══ */
/* ── Seite info/index.ejs — gilt nur auf body.page-info (frueher <style> im View; globale Selektoren wie .form-control duerfen nicht auf andere Seiten durchschlagen) ── */
/* __SUPPORT_REQUESTS__ */
.page-info .sr-count{font-size:11.5px;font-weight:600;line-height:1;padding:3px 7px;border-radius:999px;background:var(--c-surface-3);color:var(--c-text-3)}
.page-info .tnav-item.active .sr-count{background:var(--c-surface);color:var(--c-text-2)}
.page-info .sr-count.is-open{background:var(--c-warn-bg);color:var(--c-warn-deep)}
.page-info .sr-btn{white-space:nowrap;font-size:12.5px;padding:3px 9px;border-radius:8px}
.page-info .sr-btn .bi{font-size:12px}
.page-info .sr-row-act{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.page-info .sr-list .list-group-item{gap:10px}
.page-info .sr-list .sr-btn{opacity:.75}
.page-info .sr-list .list-group-item:hover .sr-btn, .page-info .table tr:hover .sr-btn{opacity:1}
.page-info .sr-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.6rem;letter-spacing:.06em;line-height:1.2}
.page-info .sr-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px 28px}
.page-info .sr-kv-i{display:grid;grid-template-columns:130px minmax(0,1fr);gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--c-border);min-width:0}
.page-info .sr-kv-i dt{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--c-muted);font-weight:600;margin:0}
.page-info .sr-kv-i dd{margin:0;min-width:0;overflow-wrap:anywhere;font-size:14px;color:var(--c-text)}
.page-info .sr-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;padding:14px 16px}
.page-info .sr-tile{display:flex;align-items:center;gap:10px;border:1px solid var(--c-border);border-radius:10px;padding:9px 10px 9px 12px;background:var(--c-surface);min-width:0}
.page-info .sr-tile:hover{border-color:var(--c-border-2)}
.page-info .sr-tile-ico{width:32px;height:32px;border-radius:8px;background:var(--c-surface-3);color:var(--c-text-3);display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:15px}
.page-info .sr-tile-txt{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.page-info .sr-tile-lbl{font-weight:600;color:var(--c-text);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-info .sr-tile-sub{font-size:11.5px;color:var(--c-muted);white-space:nowrap}
.page-info .sr-tile .sr-btn{flex:none;opacity:.7}.page-info .sr-tile:hover .sr-btn{opacity:1}
/* Offcanvas-Formular */
.page-info #srPanel{--bs-offcanvas-width:520px}
.page-info #srPanel .offcanvas-body{display:flex;flex-direction:column;gap:14px}
.page-info .sr-chip{display:inline-flex;align-items:center;gap:8px;background:var(--c-surface-3);border:1px solid var(--c-border);border-radius:10px;padding:8px 12px;font-size:13.5px;color:var(--c-text);max-width:100%}
.page-info .sr-chip .bi{color:var(--c-accent-fg)}
.page-info .sr-chip strong{font-weight:600}
.page-info .sr-chip small{color:var(--c-muted);font-family:ui-monospace,Menlo,monospace;font-size:11.5px}
.page-info .sr-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.page-info .sr-seg input{position:absolute;opacity:0;pointer-events:none}
.page-info .sr-seg label{display:flex;flex-direction:column;gap:2px;border:1px solid var(--c-border);border-radius:10px;padding:9px 10px;cursor:pointer;font-size:13px;color:var(--c-text-2);background:var(--c-surface);transition:border-color .12s,background .12s}
.page-info .sr-seg label b{font-weight:600;color:var(--c-text);display:flex;align-items:center;gap:6px}
.page-info .sr-seg label small{color:var(--c-muted);font-size:11.5px;line-height:1.3}
.page-info .sr-seg input:checked + label{border-color:var(--c-text-2);background:var(--c-surface-2);box-shadow:inset 0 0 0 1px var(--c-text-2)}
.page-info .sr-seg input[value=down]:checked + label{border-color:var(--c-danger);box-shadow:inset 0 0 0 1px var(--c-danger)}
.page-info .sr-seg input[value=down] + label b .bi{color:var(--c-danger-fg)}.page-info .sr-seg input[value=minor] + label b .bi{color:var(--c-warn-fg)}.page-info .sr-seg input[value=question] + label b .bi{color:var(--c-accent-fg)}
.page-info .sr-auto{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--c-text-3)}
.page-info .sr-auto .bi{color:var(--c-success-fg);margin-right:4px}
.page-info .sr-auto ul{margin:4px 0 0;padding-left:18px}
.page-info .sr-files{font-size:12.5px;color:var(--c-muted)}
.page-info #srToast{min-width:320px}
.page-info #srToast .toast-body{font-size:14px;line-height:1.45}
.page-info #srToast .toast-body b{display:block;font-size:15px;margin-bottom:2px}
.page-info .sr-req.is-new{background:var(--c-warn-bg-2);animation:srflash 2.4s ease-out 1}
@keyframes srflash{0%{background:var(--c-warn-bg)}100%{background:var(--c-warn-bg-2)}}
.page-info .sr-err{display:none;font-size:13px;color:var(--c-danger-deep);background:var(--c-danger-bg-2);border:1px solid var(--c-danger-bg);border-radius:8px;padding:8px 10px}
.page-info .sr-err.show{display:block}
/* Anfragen-Liste */
.page-info .sr-req{border-bottom:1px solid var(--c-border);padding:12px 16px;display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:6px 14px;align-items:center}
.page-info .sr-req:last-child{border-bottom:0}
.page-info .sr-req .sr-num{font-family:ui-monospace,Menlo,monospace;font-weight:600;color:var(--c-text);font-size:13px}
.page-info .sr-req .sr-date{font-size:11.5px;color:var(--c-muted)}
.page-info .sr-req .sr-sub{font-weight:600;color:var(--c-text);font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-info .sr-req .sr-desc{font-size:12.5px;color:var(--c-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-info .sr-req .sr-desc.open{white-space:pre-wrap;color:var(--c-text-2)}
.page-info .sr-req .sr-state{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.page-info .sr-badge{font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 9px;white-space:nowrap}
.page-info .sr-badge.open{background:var(--c-warn-bg);color:var(--c-warn-deep)}.page-info .sr-badge.closed{background:var(--c-success-bg);color:var(--c-success-deep)}
.page-info .sr-badge.down{background:var(--c-danger-bg);color:var(--c-danger-deep)}.page-info .sr-badge.minor{background:var(--c-warn-bg);color:var(--c-warn-deep)}.page-info .sr-badge.question{background:var(--c-accent-tint);color:var(--c-accent-deep)}
.page-info .sr-badge.mailfail{background:var(--c-danger-bg);color:var(--c-danger-deep)}
.page-info .sr-att a{font-size:12px;margin-right:8px}
.page-info .sr-empty{padding:34px 16px;text-align:center;color:var(--c-muted);font-size:14px}
.page-info .sr-empty .bi{display:block;font-size:30px;color:var(--c-faint-2);margin-bottom:6px}
.page-info .sr-sec{container-type:inline-size;container-name:srsec}
@container srsec (max-width:639.98px){
  .page-info .sr-kv-i{grid-template-columns:1fr;gap:2px}
  .page-info .sr-tiles{grid-template-columns:1fr;padding:10px 12px}
  .page-info .sr-req{grid-template-columns:1fr auto;grid-template-areas:"num state" "sub sub" "desc desc"}
  .page-info .sr-req .sr-numwrap{grid-area:num}.page-info .sr-req .sr-main{grid-area:sub}.page-info .sr-req .sr-state{grid-area:state}
  .page-info .sr-seg{grid-template-columns:1fr}
}
@media (max-width:575.98px){.page-info #srPanel{--bs-offcanvas-width:100vw}}
.page-info .info-hero-grad{background:linear-gradient(135deg,var(--bs-primary) 0%,color-mix(in srgb,var(--bs-primary) 60%,#000) 100%)}

/* ══ 06-pages/login.css ══ */
/* Anmeldeseite (auth/login.ejs laedt main.css + admin.css) */
/* ── Login page ─────────────────────────────────────────── */
.login-wrapper {
  min-height: 100vh;
  background: var(--sb-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  width: 380px;
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.login-card .card-body { padding: 40px 36px; }

/* ══ 06-pages/logs-db.css ══ */
/* ── Seite logs/db_index.ejs — gilt nur auf body.page-logs (frueher <style> im View; globale Selektoren wie .form-control duerfen nicht auf andere Seiten durchschlagen) ── */
/* ─── Level pill colors (consistent with Live Logs palette) ───── */
  .page-logs .lvl-pill{
    padding:3px 8px; font-weight:600; font-size:11px; letter-spacing:.3px;
    border:1px solid transparent; user-select:none;
  }
  .page-logs .lvl-pill.lvl-error{ background:var(--c-danger); color:var(--c-on-accent); border-color:var(--c-danger); }
  .page-logs .lvl-pill.lvl-warn{ background:var(--c-warn); color:var(--c-text-2); border-color:#d97706; }
  .page-logs .lvl-pill.lvl-info{ background:#0ea5e9; color:var(--c-on-accent); border-color:#0369a1; }
  .page-logs .lvl-pill.lvl-debug{ background:var(--c-text-3); color:#e5e7eb; border-color:#334155; }

  /* ─── Source pill colors ──────────────────────────────────────── */
  .page-logs .src-pill{
    padding:3px 8px; font-weight:600; font-size:11px; letter-spacing:.3px;
    border:1px solid transparent; text-transform:uppercase;
  }
  .page-logs .src-pill.src-backend{ background:var(--c-accent-tint); color:var(--c-accent-deep); border-color:var(--c-accent-tint); }
  .page-logs .src-pill.src-pos{ background:var(--c-success-bg); color:var(--c-success-deep); border-color:var(--c-success-bg); }
  .page-logs .src-pill.src-webhook{ background:#f3e8ff; color:#581c87; border-color:#e9d5ff; }
  .page-logs .src-pill.src-sse{ background:var(--c-orange-bg); color:#7c2d12; border-color:#fed7aa; }
  .page-logs .src-pill.src-cron{ background:#cffafe; color:#155e75; border-color:#a5f3fc; }
  .page-logs .src-pill.src-payment{ background:var(--c-orange-bg); color:var(--c-orange-deep); border-color:#fdba74; }

  /* ─── Filter match highlight inside message column ────────────── */
  .page-logs table .log-msg-cell mark{
    background:#fde047; color:var(--c-text-2); padding:0 1px; border-radius:2px;
    font-weight:600;
  }

  /* ─── Row hover ────────────────────────────────────────────────── */
  .page-logs .log-row:hover{ background-color: rgba(37,99,235,.04) !important; }

  /* ─── Time column — relative + absolute tooltip ──────────────── */
  .page-logs .log-time{ font-variant-numeric: tabular-nums; }

  /* ─── Sparkline ───────────────────────────────────────────────── */
  .page-logs #logsSparkline svg{ background:var(--c-surface-2); border-radius:4px; }

/* ══ 06-pages/logs-live.css ══ */
/* ── Seite logs/live.ejs — gilt nur auf body.page-logs/page-logs-live (frueher <style> im View; globale Selektoren wie .form-control duerfen nicht auf andere Seiten durchschlagen) ── */
/* ─── Container ─────────────────────────────────────────────────── */
  .page-logs .mono-log, .page-logs-live .mono-log{
    background:#0b1020; color:#cdd9e5;
    font-family:'JetBrains Mono', 'Fira Code', Menlo, monospace;
    font-size:12px; line-height:1.5; padding:12px; border-radius:8px;
    height:70vh; overflow:auto; white-space:pre-wrap; word-break:break-all;
  }
  .page-logs .mono-log:focus-within, .page-logs-live .mono-log:focus-within{ outline: 2px solid rgba(59,130,246,.5); }

  /* ─── Per-line layout + hover ──────────────────────────────────── */
  .page-logs .log-line, .page-logs-live .log-line{
    padding:2px 6px 2px 8px;
    border-left:3px solid transparent;
    border-radius:2px;
    transition: background-color .08s;
  }
  .page-logs .log-line:hover, .page-logs-live .log-line:hover{ background: rgba(255,255,255,.04); }

  /* ─── Level palette ────────────────────────────────────────────── */
  .page-logs .log-DEBUG, .page-logs-live .log-DEBUG{ color:var(--c-faint); border-left-color:#475569; }
  .page-logs .log-INFO, .page-logs-live .log-INFO{ color:#cdd9e5; border-left-color:transparent; }
  .page-logs .log-WARN, .page-logs-live .log-WARN{ color:#fbbf24; border-left-color:var(--c-warn); background:rgba(251,191,36,.06); }
  .page-logs .log-ERROR, .page-logs-live .log-ERROR{ color:#fca5a5; border-left-color:var(--c-danger); background:rgba(239,68,68,.10); }

  /* ─── Inline elements ──────────────────────────────────────────── */
  .page-logs .log-meta, .page-logs-live .log-meta{ color:var(--c-muted); font-weight:400; }
  .page-logs .log-app, .page-logs-live .log-app{ color:var(--c-accent-soft); font-weight:500; }
  .page-logs .log-lvl, .page-logs-live .log-lvl{ font-weight:700; letter-spacing:.5px; }
  .page-logs .log-lvl.lvl-DEBUG, .page-logs-live .log-lvl.lvl-DEBUG{ color:var(--c-muted); }
  .page-logs .log-lvl.lvl-INFO, .page-logs-live .log-lvl.lvl-INFO{ color:#38bdf8; }
  .page-logs .log-lvl.lvl-WARN, .page-logs-live .log-lvl.lvl-WARN{ color:var(--c-warn-fg); }
  .page-logs .log-lvl.lvl-ERROR, .page-logs-live .log-lvl.lvl-ERROR{ color:#f87171; }

  /* ─── Source detection badges (inline pill in the line text) ───── */
  .page-logs .log-src, .page-logs-live .log-src{
    display:inline-block;
    padding:0 6px;
    border-radius:3px;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.3px;
    margin-right:4px;
    vertical-align:1px;
    text-transform:uppercase;
  }
  .page-logs .src-backend, .page-logs-live .src-backend{ background:var(--c-accent-deep); color:#bfdbfe; }   /* blue   */
  .page-logs .src-pos, .page-logs-live .src-pos{ background:#14532d; color:#bbf7d0; }   /* green  */
  .page-logs .src-webhook, .page-logs-live .src-webhook{ background:#581c87; color:#e9d5ff; }   /* purple */
  .page-logs .src-sse, .page-logs-live .src-sse{ background:#7c2d12; color:#fed7aa; }   /* orange */
  .page-logs .src-cron, .page-logs-live .src-cron{ background:#155e75; color:#a5f3fc; }   /* teal   */
  .page-logs .src-http, .page-logs-live .src-http{ background:#374151; color:#d1d5db; }   /* gray   */
  .page-logs .src-payment, .page-logs-live .src-payment{ background:#9a3412; color:#fed7aa; }   /* amber/orange */

  /* ─── Filter highlight on matched substring ────────────────────── */
  .page-logs .log-line mark, .page-logs-live .log-line mark{
    background:#fde047; color:#0b1020; padding:0 1px;
    border-radius:2px; font-weight:600;
  }

  /* ─── Counter chips at top ─────────────────────────────────────── */
  .page-logs .lvl-chip, .page-logs-live .lvl-chip{
    display:inline-flex; align-items:center; gap:6px;
    padding:2px 10px; border-radius:12px;
    font-weight:600; font-size:11px; letter-spacing:.4px;
    border:1px solid transparent; user-select:none; cursor:pointer;
  }
  .page-logs .lvl-chip .cnt, .page-logs-live .lvl-chip .cnt{ font-variant-numeric:tabular-nums; }
  .page-logs .lvl-chip.lvl-ERROR, .page-logs-live .lvl-chip.lvl-ERROR{ color:var(--c-on-accent);     background:var(--c-danger); border-color:var(--c-danger); }
  .page-logs .lvl-chip.lvl-WARN, .page-logs-live .lvl-chip.lvl-WARN{ color:var(--c-text-2);  background:var(--c-warn); border-color:#d97706; }
  .page-logs .lvl-chip.lvl-INFO, .page-logs-live .lvl-chip.lvl-INFO{ color:var(--c-on-accent);     background:#0ea5e9; border-color:#0369a1; }
  .page-logs .lvl-chip.lvl-DEBUG, .page-logs-live .lvl-chip.lvl-DEBUG{ color:#e5e7eb;  background:var(--c-text-3); border-color:#334155; }
  .page-logs .lvl-chip.dimmed, .page-logs-live .lvl-chip.dimmed{ opacity:.35; }
  .page-logs .lvl-chip:hover, .page-logs-live .lvl-chip:hover{ filter:brightness(1.1); }

/* ══ 06-pages/products-form.css ══ */
/* ── Seite products/form.ejs — gilt nur auf body.page-products (frueher <style> im View; globale Selektoren wie .form-control duerfen nicht auf andere Seiten durchschlagen) ── */
.page-products .pt-opt{ display:flex; align-items:center; gap:.55rem; padding:.55rem .9rem; border:1px solid var(--c-border); border-radius:.75rem; cursor:pointer; background:var(--c-surface); margin:0; min-width:150px; transition:border-color .12s, background .12s; }
  .page-products .pt-opt:hover{ border-color:var(--c-border-2); }
  .page-products .pt-opt.active{ border-color:var(--c-accent); background:var(--c-accent-bg); }
  .page-products .pt-opt .form-check-input{ margin:0; flex:0 0 auto; width:1.15em; height:1.15em; cursor:pointer; }
  .page-products .pt-opt .bi{ font-size:1.05rem; color:var(--c-text-3); }
  .page-products .pt-opt.active .bi{ color:var(--c-accent-fg); }
  .page-products .pt-opt small{ display:block; color:var(--c-muted); line-height:1.1; }

/* ══ 06-pages/provision.css ══ */
/* ── Seite provision/new.ejs — gilt nur auf body.page-provision (frueher <style> im View; globale Selektoren wie .form-control duerfen nicht auf andere Seiten durchschlagen) ── */
@keyframes urlFlash {
    0%   { background: var(--c-accent-tint); border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
    100% { background: ''; border-color: ''; box-shadow: none; }
  }
  .page-provision .url-flashed{ animation: urlFlash .6s ease forwards; }
  .page-provision .prov-choice{
    border: 2px solid var(--c-border);
    border-radius: 14px;
    padding: 18px 14px 14px;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    background: var(--c-surface);
    text-align: center;
  }
  .page-provision .prov-choice:hover{ border-color: var(--c-accent-soft); background: var(--c-accent-bg); }
  .page-provision .prov-choice.selected{
    border-color: var(--c-accent);
    background: var(--c-accent-bg);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  }
  .page-provision .prov-choice input[type=radio]{ display: none; }
  .page-provision .prov-choice .pc-icon{ font-size: 2rem; line-height: 1; margin-bottom: 6px; }
  .page-provision .prov-choice .pc-label{ font-weight: 700; font-size: .9rem; color: var(--c-text-2); margin: 0; }
  .page-provision .prov-choice .pc-sub{ font-size: .75rem; color: var(--c-muted); margin-top: 2px; }

  .page-provision .form-section-label{
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--c-faint);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .page-provision .form-section-label::after{
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-surface-4);
  }

  .page-provision .summary-card{
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 24px;
    position: sticky;
    top: 80px;
  }
  .page-provision .summary-row{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--c-border);
    font-size: .83rem;
  }
  .page-provision .summary-row:last-child{ border-bottom: none; }
  .page-provision .summary-row .sr-key{ color: var(--c-faint); font-weight: 500; }
  .page-provision .summary-row .sr-val{ color: var(--c-text-2); font-weight: 600; text-align: right; max-width: 60%; word-break: break-all; }

  .page-provision .psp-section{ animation: fadeIn .18s ease; }
  @keyframes fadeIn { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:translateY(0) } }

  .page-provision .info-box{
    background: var(--c-accent-bg);
    border: 1px solid var(--c-accent-tint);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: .82rem;
    color: var(--c-accent-deep);
    display: flex;
    gap: 10px;
  }
  .page-provision .info-box i{ flex-shrink: 0; margin-top: 1px; }

  .page-provision .form-label{ font-weight: 600; font-size: .82rem; color: var(--c-text-2); margin-bottom: 5px; }
  .page-provision .form-control, .page-provision .form-select{ font-size: .875rem; border-radius: 10px; }
  .page-provision .form-control:focus, .page-provision .form-select:focus{ border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

/* ══ 06-pages/releases.css ══ */
/* ── Seite releases/index.ejs — gilt nur auf body.page-releases (frueher <style> im View; globale Selektoren wie .form-control duerfen nicht auf andere Seiten durchschlagen) ── */
.page-releases .drop-zone{
  border: 2px dashed var(--c-border);
  border-radius: 8px;
  padding: 22px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.page-releases .drop-zone:hover, .page-releases .drop-zone.dragover{ border-color: var(--c-accent); background: rgba(13,110,253,.04); }
.page-releases .drop-zone.has-file{ border-color: var(--c-success); background: rgba(25,135,84,.04); }
.page-releases .drop-zone .dz-icon{ font-size: 1.8rem; color: var(--c-faint); }
.page-releases .drop-zone .dz-label{ font-size: .8rem; color: var(--c-muted); margin-top: 4px; }
.page-releases .drop-zone.has-file .dz-label{ color: var(--c-success-fg); font-weight: 500; }

/* ══ 06-pages/reservations-stats.css ══ */
/* ── Seite reservations/stats.ejs — gilt nur auf body.page-reservations (frueher <style> im View; globale Selektoren wie .form-control duerfen nicht auf andere Seiten durchschlagen) ── */
.page-reservations .rst-bar{ height: 10px; border-radius: 5px; background: var(--c-surface-3); overflow: hidden; }
  .page-reservations .rst-bar > span{ display: block; height: 100%; background: var(--c-accent); border-radius: 5px; }
  .page-reservations .rst-kpi{ font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
  .page-reservations .rst-lbl{ font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; }
  .page-reservations .rst-row{ display: grid; grid-template-columns: 90px 1fr 40px; gap: .6rem; align-items: center; font-size: .85rem; margin-bottom: .45rem; }
  .page-reservations .rst-row.h{ grid-template-columns: 50px 1fr 40px; }

/* ══ 06-pages/reservations-timeline.css ══ */
/* ── Seite reservations/timeline.ejs — gilt nur auf body.page-reservations (frueher <style> im View; globale Selektoren wie .form-control duerfen nicht auf andere Seiten durchschlagen) ── */
.page-reservations .rtl-wrap{ overflow-x: auto; }
  .page-reservations .rtl-grid{ min-width: 720px; }
  .page-reservations .rtl-row{ display: flex; align-items: stretch; border-top: 1px solid var(--c-border); }
  .page-reservations .rtl-row:last-child{ border-bottom: 1px solid var(--c-border); }
  .page-reservations .rtl-name{ flex: 0 0 150px; padding: .45rem .6rem; font-size: .85rem; background: var(--c-surface-2); border-right: 1px solid var(--c-border); }
  .page-reservations .rtl-lane{ flex: 1 1 auto; position: relative; min-height: 44px; background:
      repeating-linear-gradient(to right, transparent 0, transparent calc(100% / var(--hours) - 1px), var(--c-surface-3) calc(100% / var(--hours) - 1px), var(--c-surface-3) calc(100% / var(--hours))); }
  .page-reservations .rtl-band{ position: absolute; top: 0; bottom: 0; background: rgba(13,110,253,.05); pointer-events: none; }
  .page-reservations .rtl-head .rtl-lane{ min-height: 26px; background: none; }
  .page-reservations .rtl-tick{ position: absolute; top: 4px; transform: translateX(-50%); font-size: .7rem; color: var(--c-muted); }
  .page-reservations .rtl-tick:first-child{ transform: none; }
  .page-reservations .rtl-blk{ position: absolute; top: 6px; height: 32px; border-radius: 6px; border: 1px solid; padding: 0 .45rem; font-size: .78rem;
             line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; text-align: left; width: 100%; }
  .page-reservations .rtl-blk.joined{ border-style: dashed; }
  .page-reservations .rtl-blk.option{ border-style: dotted; border-width: 2px; }
  .page-reservations .rtl-blk[draggable="true"]{ cursor: grab; }
  .page-reservations .rtl-blk.dragging{ opacity: .45; }
  .page-reservations .rtl-lane.drop-ok{ outline: 2px dashed var(--c-accent); outline-offset: -2px; background-color: rgba(13,110,253,.06); }
  .page-reservations .rtl-ghost{ position: absolute; top: 6px; height: 32px; border-radius: 6px; border: 2px dashed var(--c-accent); background: rgba(13,110,253,.12); pointer-events: none; font-size: .72rem; padding: 0 .35rem; line-height: 30px; color: var(--c-accent-fg); white-space: nowrap; }
  .page-reservations .rtl-legend span{ display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid; vertical-align: -1px; margin-right: 4px; }
  .page-reservations .rtl-now{ position: absolute; top: 0; bottom: 0; width: 2px; background: var(--c-danger); opacity: .7; pointer-events: none; }
  /* Runde 8 (nach Guestplan): geschlossene Zeiten grau, Zaehlerzeile, Auslastungs-Minikarte */
  .page-reservations .rtl-closed{ position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, var(--c-surface-3) 0, var(--c-surface-3) 6px, var(--c-surface-3) 6px, var(--c-surface-3) 12px); pointer-events: none; }
  .page-reservations .rtl-cnt .rtl-lane{ min-height: 30px; background: none; }
  .page-reservations .rtl-slot{ position: absolute; top: 3px; bottom: 3px; border-left: 1px solid var(--c-border); font-size: .66rem; line-height: 1.1; padding: 1px 2px; color: var(--c-muted); overflow: hidden; }
  .page-reservations .rtl-slot b{ display: block; color: var(--c-text); }
  .page-reservations .rtl-slot.hot b{ color: var(--c-accent-fg); }
  .page-reservations .rtl-mini{ display: block; width: 100%; height: 64px; }

/* ══ 06-pages/support.css ══ */
/* ── Seite support/index.ejs — gilt nur auf body.page-support (frueher <style> im View; globale Selektoren wie .form-control duerfen nicht auf andere Seiten durchschlagen) ── */
.page-support .sp-filter .btn{border-radius:999px}
.page-support .sp-req{border-bottom:1px solid var(--c-border);padding:14px 16px;display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:6px 16px;align-items:start}
.page-support .sp-req:last-child{border-bottom:0}
.page-support .sp-req.closed{background:var(--c-surface-2)}
.page-support .sp-num{font-family:ui-monospace,Menlo,monospace;font-weight:600;color:var(--c-text);font-size:13px}
.page-support .sp-date{font-size:11.5px;color:var(--c-muted)}
.page-support .sp-tenant{font-weight:700;color:var(--c-text);font-size:14px}
.page-support .sp-tenant small{font-weight:400;color:var(--c-muted);font-family:ui-monospace,Menlo,monospace;font-size:11.5px}
.page-support .sp-sub{font-size:13.5px;color:var(--c-text);margin-top:2px}
.page-support .sp-from{font-size:12.5px;color:var(--c-muted);margin-top:2px}
.page-support .sp-desc{white-space:pre-wrap;font-size:13px;color:var(--c-text-2);background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:8px;padding:8px 10px;margin-top:8px}
.page-support .sp-ctx{font-size:12px;color:var(--c-text-3);margin-top:8px}
.page-support .sp-ctx summary{cursor:pointer;color:var(--c-accent-fg)}
.page-support .sp-ctx pre{white-space:pre-wrap;font-size:11.5px;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:8px;padding:8px 10px;margin:6px 0 0;max-height:360px;overflow:auto}
.page-support .sp-att a{font-size:12px;margin-right:10px}
.page-support .sp-badge{font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 9px;white-space:nowrap;display:inline-block}
.page-support .sp-badge.open{background:var(--c-warn-bg);color:var(--c-warn-deep)}.page-support .sp-badge.closed{background:var(--c-success-bg);color:var(--c-success-deep)}
.page-support .sp-badge.down{background:var(--c-danger-bg);color:var(--c-danger-deep)}.page-support .sp-badge.minor{background:var(--c-warn-bg);color:var(--c-warn-deep)}.page-support .sp-badge.question{background:var(--c-accent-tint);color:var(--c-accent-deep)}
.page-support .sp-badge.mailfail{background:var(--c-danger-bg);color:var(--c-danger-deep)}.page-support .sp-badge.pos{background:var(--c-violet-bg);color:var(--c-violet-deep)}
.page-support .sp-state{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.page-support .sp-empty{padding:40px 16px;text-align:center;color:var(--c-muted)}
.page-support .sp-empty .bi{display:block;font-size:30px;color:var(--c-faint-2);margin-bottom:6px}
@media (max-width:767.98px){.page-support .sp-req{grid-template-columns:1fr auto;grid-template-areas:"num state" "main main"}.page-support .sp-req .sp-numwrap{grid-area:num}.page-support .sp-req .sp-main{grid-area:main}.page-support .sp-req .sp-state{grid-area:state}}

/* ══ 06-pages/tables-floorplan.css ══ */
/* ── Seite tables/floorplan.ejs — gilt nur auf body.page-tables (frueher <style> im View; globale Selektoren wie .form-control duerfen nicht auf andere Seiten durchschlagen) ── */
.page-tables .fp-m .fp-x{display:none;position:absolute;top:-8px;right:-8px;width:18px;height:18px;border-radius:50%;background:var(--c-danger);color:var(--c-on-accent);font-size:12px;line-height:18px;text-align:center;font-weight:700;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.4);z-index:2}
  .page-tables .fp-m:hover .fp-x{display:block}
  .page-tables .fp-m.fp-sel{outline:3px solid var(--c-warn);outline-offset:2px}
  .page-tables .fp-m .fp-lbl{display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;border-radius:inherit}
.page-tables .fp-canvas{aspect-ratio:16/10;min-height:420px;border:1px dashed var(--c-border-2);background-color:var(--c-surface);background-image:linear-gradient(var(--c-surface-3) 1px,transparent 1px),linear-gradient(90deg,var(--c-surface-3) 1px,transparent 1px);background-size:32px 32px}

/* ══ 06-pages/terminals-show.css ══ */
/* ── Seite terminals/show.ejs — gilt nur auf body.page-terminals (frueher <style> im View; globale Selektoren wie .form-control duerfen nicht auf andere Seiten durchschlagen) ── */
.page-terminals .term-confirm-modal .modal-content{
    border: 0;
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .28);
  }
  .page-terminals .term-confirm-modal .modal-header{
    border-bottom: 0;
    padding: 1rem 1.15rem .55rem;
  }
  .page-terminals .term-confirm-modal .modal-body{
    padding: 0 1.15rem 1rem;
  }
  .page-terminals .term-confirm-title{
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--c-text);
    margin: 0;
  }
  .page-terminals .term-confirm-sub{
    color: var(--c-muted);
    font-size: .9rem;
    line-height: 1.45;
  }
  .page-terminals .term-confirm-icon{
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: .65rem;
    background: var(--c-accent-bg);
    color: var(--c-accent-fg);
    font-size: 1.15rem;
  }

/* ══ 06-pages/warengruppen.css ══ */
/* __WG_PHASE3__ Warengruppen nach Alans Prototyp (warengruppen.html): Karte (WG) › graues Nest (UG) › weisses Nest (Produkte).
   Farben aus 01-tokens.css (hell/dunkel über --c-*). */
.wg-page { max-width: 980px; }
.wg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.wg-title-row { display: flex; align-items: center; gap: 11px; position: relative; }
.wg-icon-badge { width: 36px; height: 36px; border-radius: 10px; background: var(--c-accent-tint); color: var(--c-accent-fg); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.wg-h1 { font-size: 1.45rem; margin: 0; letter-spacing: -.01em; font-weight: 700; }
.wg-info-btn { width: 20px; height: 20px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); border: 0; font: italic 800 .74rem Georgia, serif; line-height: 1; padding: 0; cursor: pointer; }
.wg-info-pop { position: absolute; top: calc(100% + 10px); left: 0; z-index: 40; width: min(380px, calc(100vw - 32px)); background: var(--c-surface); border: 1px solid var(--c-border-2); border-radius: 12px; box-shadow: 0 8px 24px rgba(var(--c-shadow-rgb), .12); padding: 14px 16px; }
.wg-info-pop dl { margin: 0; display: flex; flex-direction: column; gap: 10px; } .wg-info-pop dt { font-weight: 700; font-size: .85rem; color: var(--c-accent-fg); margin-bottom: 2px; } .wg-info-pop dd { margin: 0; color: var(--c-muted); font-size: .85rem; line-height: 1.5; }
.wg-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wg-btn { background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border-2); border-radius: 9px; padding: 9px 15px; font-weight: 700; font-size: .86rem; display: inline-flex; gap: 7px; align-items: center; cursor: pointer; white-space: nowrap; text-decoration: none; }
.wg-btn:hover { background: var(--c-surface-2); color: var(--c-text); } .wg-btn.icon-only { padding: 9px 11px; }
.wg-menu-wrap { position: relative; }
.wg-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 260px; background: var(--c-surface); border: 1px solid var(--c-border-2); border-radius: 12px; box-shadow: 0 8px 24px rgba(var(--c-shadow-rgb), .12); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.wg-menu-item { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 9px 10px; font-weight: 600; font-size: .86rem; color: var(--c-text); text-decoration: none; white-space: nowrap; }
.wg-menu-item svg, .wg-menu-item i { color: var(--c-muted); width: 15px; text-align: center; } .wg-menu-item:hover { background: var(--c-surface-2); color: var(--c-text); }
.wg-hint-banner { background: var(--c-warn-bg); color: var(--c-warn-deep); border-radius: 9px; padding: 8px 12px; font-size: .85rem; margin-bottom: 14px; }
.wg-list { display: flex; flex-direction: column; gap: 10px; }
.wg-empty { color: var(--c-muted); padding: 20px; }
.wg-card { border: 1px solid var(--c-accent-soft); border-radius: 13px; background: var(--c-accent-bg); overflow: hidden; }
.wg-card.none { border-color: var(--c-border-2); background: var(--c-surface-3); }
.wg-row { display: flex; align-items: center; gap: 11px; padding: 6px 14px; min-height: 42px; }
.wg-row.level1 .wg-name { font-weight: 700; font-size: .94rem; }
.wg-row.level2 .wg-name { font-weight: 600; font-size: .89rem; }
.wg-row.product { border-top: 1px solid var(--c-border); padding-left: 52px; min-height: 40px; }
.wg-row.product:first-child { border-top: 0; }
.wg-row.product .wg-name { font-weight: 500; font-size: .87rem; }
.wg-row.product.inactive .wg-name { color: var(--c-faint); text-decoration: line-through; }
.wg-body { padding: 0 0 0 0; }
.wg-nest { position: relative; margin: 0 10px 10px 22px; border-radius: 10px; }
.wg-nest.sub { background: var(--c-surface-2); border: 1px solid var(--c-border-2); }
.wg-nest.products { background: var(--c-surface); border: 1px solid var(--c-border-2); }
.wg-nest.sub > .wg-nest.products { margin: 0 10px 10px 22px; }
.wg-card.none > .wg-nest.products { margin: 0 10px 10px 22px; }
.wg-handle { cursor: grab; color: var(--c-faint); flex-shrink: 0; display: flex; padding: 2px; } .wg-handle.ghost { visibility: hidden; }
.wg-chev { background: none; border: 0; padding: 0; width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--c-muted); cursor: pointer; border-radius: 5px; }
.wg-chev:hover { background: var(--c-surface-4); } .wg-chev svg { transition: transform .15s ease; } .wg-chev.open svg { transform: rotate(90deg); } .wg-chev.ghost { visibility: hidden; }
.wg-name { flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; margin-left: 4px; color: var(--c-text); }
.wg-mid { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%); }
.wg-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.wg-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700; padding: 3px 8px 3px 7px; border-radius: 999px; background: var(--c-surface-4); color: var(--c-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wg-badge svg { flex-shrink: 0; opacity: .85; }
.wg-badge.inherit { background: transparent; border: 1px dashed var(--c-border-2); color: var(--c-muted); font-weight: 600; }
.wg-badge.outline { background: transparent; border: 1px solid var(--c-accent); color: var(--c-accent-fg); padding: 2px 8px 2px 7px; }
.wg-badge.tag { background: var(--c-accent); color: var(--c-on-accent); }
.wg-count { color: var(--c-faint); font-size: .8rem; flex-shrink: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wg-kopf-tag { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--c-accent-fg); border: 1px solid var(--c-accent-soft); background: var(--c-accent-tint); border-radius: 5px; padding: 1px 6px; flex-shrink: 0; white-space: nowrap; }
.wg-variant-tag { font-size: .63rem; font-weight: 600; color: var(--c-muted); border: 1px dashed var(--c-border-2); border-radius: 5px; padding: 1px 6px; flex-shrink: 0; white-space: nowrap; }
.wg-override-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .63rem; font-weight: 700; color: var(--c-warn-fg); border: 1px solid var(--c-warn-fg); border-radius: 5px; padding: 1px 6px; flex-shrink: 0; white-space: nowrap; }
.wg-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; margin-left: auto; }
.wg-icon-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--c-surface); border: 1px solid var(--c-border-2); color: var(--c-muted); padding: 6px 8px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.wg-icon-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.wg-icon-btn.primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); } .wg-icon-btn.primary:hover { filter: brightness(1.08); color: var(--c-on-accent); }
.wg-icon-btn.edit { background: var(--c-accent-bg); border-color: var(--c-accent); color: var(--c-accent-fg); }
.wg-switch { position: relative; display: inline-flex; width: 36px; height: 21px; flex-shrink: 0; cursor: pointer; margin: 0; }
.wg-switch.placeholder { visibility: hidden; pointer-events: none; }
.wg-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.wg-switch .track { position: absolute; inset: 0; background: var(--c-border-2); border-radius: 999px; transition: background .15s; }
.wg-switch .thumb { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.wg-switch input:checked ~ .track { background: var(--c-accent); } .wg-switch input:checked ~ .track .thumb { transform: translateX(15px); }
/* Picker */
.wg-overlay { position: fixed; inset: 0; background: rgba(10,12,16,.5); display: flex; align-items: center; justify-content: center; z-index: 1090; padding: 20px; }
.wg-overlay[hidden] { display: none; }
.wg-modal { background: var(--c-surface); border-radius: 13px; padding: 22px 24px; max-width: 460px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,.3); border: 1px solid var(--c-border); }
.wg-picker-head { border-bottom: 1px solid var(--c-border); padding-bottom: 14px; margin-bottom: 14px; }
.wg-picker-head h3 { margin: 0 0 4px; font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; } .wg-picker-head p { margin: 0; font-size: .83rem; color: var(--c-muted); }
.wg-picker-list { display: flex; flex-direction: column; gap: 9px; margin: 0 0 12px; max-height: min(52vh, 400px); overflow-y: auto; padding: 2px; }
.wg-picker-item { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; font: inherit; color: inherit; padding: 12px 14px; border: 1px solid var(--c-border-2); border-radius: 11px; background: var(--c-surface); cursor: pointer; }
.wg-picker-item:hover { background: var(--c-surface-2); border-color: var(--c-accent); }
.wg-picker-item .swatch { width: 4px; align-self: stretch; min-height: 30px; border-radius: 3px; flex-shrink: 0; background: var(--c-border-2); }
.wg-picker-item .body { flex: 1; min-width: 0; } .wg-picker-item .title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .wg-picker-item .nm { font-weight: 700; font-size: .93rem; }
.wg-picker-item .meta { color: var(--c-muted); font-size: .79rem; margin-top: 5px; line-height: 1.45; } .wg-picker-item .chev-r { flex-shrink: 0; color: var(--c-faint); display: flex; }
.wg-picker-add { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 12px; border: 1.5px dashed var(--c-border-2); border-radius: 11px; background: transparent; color: var(--c-muted); font-weight: 700; font-size: .86rem; cursor: pointer; margin-bottom: 18px; text-decoration: none; }
.wg-picker-add:hover { background: var(--c-surface-2); color: var(--c-text); }
.wg-picker-empty { color: var(--c-muted); font-size: .87rem; padding: 6px 2px 14px; }
.wg-modal-actions { display: flex; justify-content: flex-end; gap: 22px; } .wg-modal-actions button { background: none; border: 0; font-weight: 700; font-size: .87rem; cursor: pointer; color: var(--c-accent-fg); padding: 4px; }
@media (max-width: 620px) { .wg-name { max-width: 140px; } .wg-row.product { padding-left: 28px; } .wg-nest { margin-left: 10px; } }
/* Stammdaten + Erfassen (Tabs/Tabellen) */
.wg3-dev { color: var(--c-warn-deep); background: var(--c-warn-bg); border-radius: 4px; padding: 0 5px; font-variant-numeric: tabular-nums; }
.wg3-own { color: var(--c-orange-fg); border-bottom: 1px dashed var(--c-orange-fg); }
.wg3-val { color: var(--c-violet-fg); font-weight: 600; }
.wg3-mode { cursor: pointer; border: 2px solid transparent; } .wg3-mode.active { border-color: var(--c-accent); }
.wg3-gangno { font-variant-numeric: tabular-nums; }
.wg3-table .form-control-sm, .wg3-table .form-select-sm { min-height: 28px; padding-top: 2px; padding-bottom: 2px; }
.wg3-erf input.form-control-sm { min-height: 30px; } .wg3-erf-done td { color: var(--c-text-2); }
.btn-xs { font-size: 11px; line-height: 1.2; }
/* Runde 3: volle Breite, Kachelfarbe als Akzent, Inline-Panels nach Alans Prototyp */
.wg-page { max-width: none; }
.wg-card.has-accent { border-left-width: 4px; border-left-color: var(--card-accent); }
.wg-nest.sub.inactive > .wg-row .wg-name { color: var(--c-faint); text-decoration: line-through; }
.wg-draft-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--c-faint); border: 1px dashed var(--c-border-2); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.wg-icon-btn.edit.active { background: var(--c-accent); color: var(--c-on-accent); }
.wg-panel { border-top: 1px solid var(--c-border); background: var(--c-surface-2); padding: 18px; }
.wg-panel-form { display: flex; flex-direction: column; gap: 16px; }
.wg-panel-head { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin: -4px 0 -4px; }
.wg-del-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--c-danger); color: var(--c-danger-fg); border-radius: 8px; padding: 6px 12px; font-size: .8rem; font-weight: 700; cursor: pointer; }
.wg-del-btn:hover { background: var(--c-danger-bg); }
.wg-field { display: flex; flex-direction: column; gap: 6px; }
.wg-flabel { display: flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); margin: 0; }
.wg-ficon { display: inline-flex; color: var(--c-muted); }
.wg-input, .wg-panel select.wg-input, .wg-panel textarea.wg-input { width: 100%; border: 1px solid var(--c-border-2); border-radius: 7px; padding: 8px 9px; font-size: .85rem; background: var(--c-surface); color: var(--c-text); font-family: inherit; }
.wg-input[hidden] { display: none; }
.wg-static { padding: 8px 9px; border: 1px solid var(--c-border); border-radius: 7px; background: var(--c-surface); color: var(--c-muted); font-size: .85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; }
.wg-static[hidden] { display: none; }
.wg-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--c-border-2); display: inline-block; }
.wg-tagrow { display: flex; flex-wrap: wrap; gap: 8px; }
.wg-tag-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--c-border-2); background: var(--c-surface); color: var(--c-muted); cursor: pointer; font-family: inherit; margin: 0; }
.wg-tag-badge:hover { border-color: var(--c-accent); } .wg-tag-badge.selected { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); } .wg-tag-badge.static { cursor: default; }
.wg-tag-badge.check input { display: none; }
.wg-tag-empty { font-size: .78rem; color: var(--c-faint); font-style: italic; }
.wg-istack { display: flex; flex-direction: column; gap: 16px; } .wg-ipair { display: flex; gap: 16px; } .wg-ipair > .wg-ifield { flex: 1; min-width: 0; }
.wg-ifield { display: flex; flex-direction: column; gap: 6px; } .wg-irow { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; min-height: 38px; } .wg-vslot { flex: 1 1 120px; min-width: 90px; }
.wg-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; flex: 0 0 auto; } .wg-toggle-text { font-size: .72rem; line-height: 1.3; color: var(--c-faint); max-width: 110px; }
.wg-accent-grid { display: flex; flex-wrap: wrap; gap: 8px; } .wg-accent-grid[hidden] { display: none; }
.wg-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--c-border-2); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; color: #fff; font-size: 13px; font-weight: 700; }
.wg-swatch.none { background: var(--c-surface); border-style: dashed; color: var(--c-muted); }
.wg-hint { color: var(--c-faint); font-size: .74rem; line-height: 1.5; }
.wg-panel-actions { display: flex; gap: 10px; align-items: center; }
.wg-save { background: var(--c-accent); color: var(--c-on-accent); border: 0; border-radius: 7px; padding: 9px 16px; font-weight: 700; font-size: .83rem; cursor: pointer; }
.wg-cancel { background: transparent; border: 1px solid var(--c-border-2); border-radius: 7px; padding: 9px 16px; font-weight: 700; font-size: .83rem; color: var(--c-muted); text-decoration: none; } .wg-cancel.small { padding: 5px 10px; font-size: .78rem; }
.wg-prow { display: flex; gap: 16px; flex-wrap: wrap; } .wg-pcol { flex: 1 1 260px; display: flex; flex-direction: column; gap: 12px; } .wg-pcol.preview { flex: 0 0 220px; }
.wg-tile { width: 104px; height: 104px; border-radius: 14px; border: 1px solid var(--c-border-2); background: var(--c-surface-3); color: var(--c-text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; text-align: center; overflow: hidden; }
.wg-tile-line { font-size: .8rem; font-weight: 700; line-height: 1.2; word-break: break-word; } .wg-tile-chip { padding: 2px 8px; border-radius: 999px; font-size: .62rem; font-weight: 700; background: #fff; color: #1b1e27; box-shadow: 0 1px 2px rgba(0,0,0,.25); } .wg-tile-chip[hidden] { display: none; }
.wg-prev-lines { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; } .wg-prev-line { display: flex; gap: 6px; align-items: baseline; font-size: .78rem; } .wg-prev-line b { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--c-faint); width: 72px; flex-shrink: 0; } .wg-prev-line span { color: var(--c-text); font-weight: 600; }
.wg-section { border: 1px solid var(--c-border); border-radius: 10px; padding: 14px 16px; background: var(--c-surface); display: flex; flex-direction: column; gap: 10px; }
.wg-section-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .86rem; color: var(--c-text); }
.wg-vrow { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(90px, 3fr) minmax(70px, 1fr) minmax(70px, 1fr) minmax(120px, 1.4fr); align-items: center; gap: 8px; }
.wg-chips { display: flex; align-items: center; gap: 4px; overflow-x: auto; min-width: 0; scrollbar-width: none; } .wg-chip { flex: 0 0 auto; border: 1px solid var(--c-border-2); border-radius: 999px; padding: 3px 9px; font-size: .7rem; font-weight: 600; background: var(--c-surface); color: var(--c-muted); cursor: pointer; } .wg-chip.selected { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.wg-money { display: flex; align-items: center; gap: 6px; } .wg-money span { font-size: .75rem; color: var(--c-muted); font-weight: 700; }
.wg-breadcrumb { font-size: .78rem; color: var(--c-muted); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; padding: 8px 11px; } .wg-breadcrumb b { color: var(--c-text); }
.wg-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wg-check { display: flex; align-items: center; gap: 8px; font-size: .85rem; cursor: pointer; margin: 0; }
@media (max-width: 760px) { .wg-ipair { flex-direction: column; } .wg-vrow { grid-template-columns: 1fr 1fr; } .wg-grid3 { grid-template-columns: 1fr; } }

/* __WG_ASSIGN_DROPDOWN__ «Ohne Warengruppe»: Spalte Warengruppe mit Dropdown (nur Super-Admin) */
.wg-assign-head { display: flex; align-items: center; gap: 11px; padding: 10px 14px 10px 52px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-faint); }
.wg-assign-head .wg-assign-h1 { flex: 1 1 auto; }
.wg-assign-head .wg-assign-h2 { flex: 0 0 300px; }
.wg-assign-head .wg-assign-h3 { flex: 0 0 82px; }
.wg-assign-list .wg-row.product:first-of-type { border-top: 1px solid var(--c-border); }
.wg-assign-cell { flex: 0 0 300px; min-width: 0; }
.wg-assign-cell .wg-assign { width: 100%; }
.wg-assign-ok { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--bs-success, #198754); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wg-row.wg-assigned { opacity: .5; transition: opacity 1.2s ease; }
@media (max-width: 760px) { .wg-assign-head .wg-assign-h2, .wg-assign-cell { flex-basis: 170px; } .wg-assign-head { padding-left: 28px; } }
/* __WG_ASSIGN_MOVE__ eben einsortierte Zeile kurz hervorheben */
.wg-row.wg-moved { animation: wgMoved 2.6s ease-out; }
@keyframes wgMoved { 0%, 35% { background: rgba(25, 135, 84, .16); } 100% { background: transparent; } }

/* ══ 06-pages/designer.css ══ */
/* __POS_DESIGNER__ (18.10.2026) Kassen-Designer — Stil aus Alans bf-pos-designer.html (08.10.), auf .dzx begrenzt.
   Umbenannt wegen Bootstrap: .btn → .dz-btn, .toast → .dz-toast; Farben über Admin-Tokens (Dark Mode des Admins). */
.dzx{--accent:var(--c-accent,#2f5fd0);--bg:var(--c-bg,#f1f4f9);--surface:var(--c-surface,#fff);--line:var(--c-border,#e1e5ec);--fg:var(--c-text,#1d2330);--muted:var(--c-muted,#5d6574);--live:#e0663a;color:var(--fg);font-size:14px}
.dzx *{box-sizing:border-box}
.dzx [hidden]{display:none!important}
.dzx button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.dzx svg.bi{width:18px;height:18px;fill:currentColor;flex:none}
.dzx .dot{width:8px;height:8px;border-radius:50%;background:var(--live)}
.dzx .dz-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:8px;border:1px solid var(--fg);background:var(--surface)}
.dzx .dz-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.dzx .dz-btn.outline{border-color:var(--accent);color:var(--accent)}
.dzx .dz-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--fg);color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;z-index:50}
.dzx .dz{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr) minmax(240px,290px);grid-template-areas:"list stage props";gap:20px;align-items:start}
.dzx .dz-list{grid-area:list}
.dzx .dz-center{grid-area:stage}
.dzx .dz-props{grid-area:props}
.dzx .dz-list,.dzx .dz-box{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;min-width:0}
.dzx .dz-props{display:grid;gap:16px;min-width:0}
.dzx .dz-box .pp:last-child{margin-bottom:0}
.dzx .dz-props{position:sticky;top:0}
.dzx .dz-h{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.dzx .dz-in{font:inherit;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--fg)}
.dzx .pp-ta{resize:none;height:auto;line-height:1.35;font-family:inherit}
.dzx .dz-hint{color:var(--muted);font-size:12.5px;margin:8px 0 10px;line-height:1.45}
.dzx .dz-arts{display:block;max-height:600px;overflow-y:auto;margin-top:8px;border-top:1px solid var(--line)}
.dzx .dz-arts.over{background:#fdecec;outline:2px dashed #e0353b}
.dzx .dz-art{display:flex;align-items:center;gap:8px;padding:5px 2px 5px 4px;border-bottom:1px solid var(--line);cursor:grab;font-size:13px;line-height:1.3}
.dzx .dz-art:hover{background:#f3f6fb}
.dzx .dz-art .dot{width:7px;height:7px;border-radius:50%;flex:none}
.dzx .dz-art .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dzx .dz-art .p{color:var(--muted);font-variant-numeric:tabular-nums}
.dzx .dz-add{padding:1px 4px;visibility:hidden;border-radius:5px;color:var(--accent)}
.dzx .dz-add:hover{background:#e9effb}
.dzx .dz-art:hover .dz-add{visibility:visible}
.dzx .dz-add svg.bi{width:13px;height:13px}
.dzx .dz-stage{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;align-self:stretch}
.dzx .dz-dev{max-width:none;background:#fbfbf9;border:1px solid #d8d8d2;border-radius:40px;padding:34px 12px 40px;box-shadow:0 10px 30px rgba(20,30,50,.12)}
.dzx .dz-scr{display:flex;flex-direction:column;background:#e7ecf3;border-radius:6px;overflow:hidden;font-family:Roboto,"Inter",Arial,sans-serif;color:#1f2329}
.dzx .dz-cap{color:var(--muted);font-size:12.5px}
.dzx .ps-bar{display:flex;justify-content:space-between;padding:6px 14px 0;font-size:12px;color:#444}
.dzx .ps-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 12px}
.dzx .ps-head b{font-size:21px}
.dzx .ps-head svg.bi{width:22px;height:22px}
.dzx .ps-cats{display:flex;align-items:stretch;overflow-x:auto;margin:2px 0 0;border-top:3px solid var(--band);border-bottom:3px solid var(--band);--band:#2f5878}
.dzx .pc{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:50px;min-width:64px;padding:0 12px;font-size:12px;font-weight:600;color:#3a4250;white-space:nowrap;background:none}
.dzx .pc+.pc::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:1.5px;background:var(--band)}
.dzx .pc span{white-space:nowrap}
.dzx .pc svg.bi{width:18px;height:18px;flex:none}
.dzx .pc.only-i svg.bi{width:19px;height:19px}
.dzx .pc.on{color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.dzx .pc.sel{box-shadow:inset 0 0 0 2px var(--c)}
.dzx .pc.over{background:color-mix(in srgb,var(--accent) 15%,transparent)}
.dzx .pc.add{color:#7a8291;font-weight:500;font-size:12px}
.dzx .dz-scr.dark .ps-cats{--band:#5b7a96}
.dzx .dz-scr.dark .pc{color:#d9dce2}
.dzx .dz-scr.dark .pc.on{color:color-mix(in srgb,var(--c) 70%,#fff)}
.dzx .dz-scr.dark .pc.add{color:#8a909b}
.dzx .ps-grid{flex:1;overflow-y:auto;display:grid;margin-top:2px;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:8px;padding:12px 8px 20px;align-content:start;align-items:start}
.dzx .ps-grid.over{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.dzx .pt{position:relative;display:flex;flex-direction:column;gap:4px;height:var(--th);overflow:hidden;container-type:inline-size;padding:10px 8px 10px 11px;background:#f6f7f9;border-radius:14px;border-left:5px solid var(--c);box-shadow:0 1px 2px rgba(0,0,0,.06);cursor:pointer;overflow-wrap:normal;word-break:normal;min-width:0}
.dzx .pt b{white-space:pre-line;font-size:clamp(11px,12.5cqi,13.5px);line-height:1.25;font-weight:700;color:#23272e;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:100%;flex:none}
.dzx .pt .pr{margin-top:auto;font-weight:700;font-size:clamp(10px,14cqi,14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--c);font-variant-numeric:tabular-nums}
.dzx .pt svg.bi{width:20px;height:20px;color:var(--c);flex:none}
.dzx .pt.np b{-webkit-line-clamp:2}
.dzx .pt.fill{border-left:0;padding-left:12px}
.dzx .pt.fill b,.dzx .pt.fill .pr,.dzx .pt.fill svg.bi{color:#fff}
.dzx .pt.sel{outline:3px solid #1d2330;outline-offset:2px}
.dzx .pt.dragging{opacity:.35}
.dzx .pt-empty{grid-column:1/-1;border:2px dashed #b9c1cf;border-radius:14px;padding:40px 10px;text-align:center;color:#7a8291}
.dzx .ps-note{font-size:12px;color:#7a8291;text-align:center;margin:0 0 14px}
.dzx .pp{margin-bottom:14px}
.dzx .pp>label{display:block;color:var(--muted);font-size:12.5px;margin-bottom:6px}
.dzx .pp-t{font-weight:600;margin-bottom:14px}
.dzx .pp-t span{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:2px}
.dzx .sw{display:flex;flex-wrap:wrap;gap:7px}
.dzx .sw button{width:26px;height:26px;border-radius:7px}
.dzx .sw button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px #1d2330}
.dzx .dz-center{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.dzx .dz-devsel{display:flex;align-items:center;gap:8px}
.dzx .dz-devsel select{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--fg);min-width:240px}
.dzx .dz-plus{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--accent)}
.dzx .dz-plus:hover{border-color:var(--accent)}
.dzx .dz-newp{width:100%;justify-content:center;margin-bottom:14px}
.dzx .pt-ghost{height:var(--th);border-radius:14px;background:rgba(40,50,70,.035);border:1.5px dashed rgba(40,50,70,.10)}
.dzx .dz-info{padding:1px 3px;border-radius:5px;color:var(--muted);line-height:0}
.dzx .dz-info:hover{color:var(--accent);background:#e9effb}
.dzx .dz-info svg.bi{width:14px;height:14px}
.dzx .dz-art.used .dz-info{opacity:1}
.dzx .mi-h{display:flex;align-items:center;gap:10px}
.dzx .mi-h h3{margin:0;flex:1;font-size:17px}
.dzx .mi-h .dot,.dzx .mi-r .dot{width:10px;height:10px;border-radius:50%;display:inline-block;vertical-align:middle}
.dzx .mi-x{padding:4px;border-radius:6px;color:var(--muted);line-height:0}
.dzx .mi-x:hover{background:var(--bg)}
.dzx .mi-l{border-top:1px solid var(--line);margin-top:6px}
.dzx .mi-r{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.dzx .mi-r span{color:var(--muted)}
.dzx .mi-r b{font-weight:600;text-align:right}
.dzx .mi-pl{font-size:13.5px;display:grid;gap:4px}
.dzx .mi-no{color:var(--muted)}
.dzx .ps-subs{margin-top:0;border-top:0}
.dzx .ps-cats{position:relative}
.dzx .mi-d{margin:8px 0 2px;font-size:13.5px;color:var(--fg);line-height:1.4}
.dzx .dz-park{flex:none;margin-top:14px}
.dzx .dz-stage.pk-left{flex-direction:row;align-items:flex-start;justify-content:center;gap:24px}
.dzx .dz-stage.pk-left .dz-park{order:-1;margin-top:34px}
.dzx .dz-stage.pk-left .pk-h span{display:none}
.dzx .pk-h{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.dzx .pk-h svg.bi{width:17px;height:17px}
.dzx .pk-h span{margin-left:auto;font-weight:400;letter-spacing:0;text-transform:none;font-size:14px}
.dzx .dz-park .pt-ghost{background:rgba(40,50,70,.05);border-color:rgba(40,50,70,.16)}
.dzx .pk-grid{display:grid;grid-template-columns:repeat(var(--cols),var(--pw,110px));gap:var(--gap,8px);justify-content:center;border-radius:12px;padding:4px;margin:-4px}
.dzx .dz-park .pt{cursor:grab}
.dzx .dz-park.square .pt,.dzx .dz-park.square .pt-ghost{border-radius:3px}
.dzx .dz-park.over .pk-grid{background:color-mix(in srgb,var(--accent) 10%,transparent);outline:2px dashed var(--accent)}
.dzx .dz-scr{user-select:none;-webkit-user-select:none}
.dzx .pp-mix{color:var(--muted);font-weight:400}
.dzx .ps-body{display:flex;flex:1;min-height:0}
.dzx .ps-left{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.dzx .ps-bon{flex:none;width:var(--bon);display:flex;flex-direction:column;background:#f9fafb;border-left:1px solid #cfd6e0;font-size:13px;color:#2a3039;position:relative}
.dzx .pb-h{display:flex;justify-content:space-between;align-items:baseline;padding:14px 14px 10px;border-bottom:1px solid #e1e5eb}
.dzx .pb-h span{color:#7a8291;font-size:12px}
.dzx .pb-l{flex:1;padding:6px 14px;overflow:hidden}
.dzx .pb-r{display:grid;grid-template-columns:26px 1fr auto;gap:4px;padding:7px 0;border-bottom:1px dashed #e1e5eb}
.dzx .pb-t{display:flex;justify-content:space-between;padding:12px 14px;border-top:1px solid #e1e5eb;font-size:14px}
.dzx .pb-b{margin:0 12px 12px;padding:12px;border-radius:10px;background:#22a05a;color:#fff;text-align:center;font-weight:700}
.dzx .pb-x{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#b4bcc8;pointer-events:none}
.dzx .dz-scr.dark .ps-bon{background:#1c1f24;border-color:#3a3f48;color:#e6e8ec}
.dzx .dz-scr.dark .pb-h,.dzx .dz-scr.dark .pb-t,.dzx .dz-scr.dark .pb-r{border-color:#3a3f48}
.dzx .pf{right:calc(var(--bon,0px) + 14px)!important}
.dzx .lines1 .pt:not(.folder){flex-direction:row;align-items:center;gap:8px;padding-top:6px;padding-bottom:6px}
.dzx .lines1 .pt b{-webkit-line-clamp:1!important;white-space:nowrap;flex:1 1 auto;min-width:0;text-overflow:ellipsis}
.dzx .lines1 .pt .pr{margin-top:0;margin-left:auto;flex:none;max-width:none}
.dzx .lines1 .pt svg.bi{width:16px;height:16px}
.dzx .lines1 .pt{gap:10px;padding-left:12px;padding-right:12px}
.dzx .lines1 .pt.tx{justify-content:center}
.dzx .lines1 .pt.tx b{flex:0 1 auto}
.dzx .lines1 .pt.folder b{white-space:nowrap}
.dzx .dz-scr.dark .pt.sel{outline:4px solid #fff;outline-offset:3px;box-shadow:0 0 0 10px rgba(90,140,255,.75)}
.dzx .dz-scr.dark .pc.sel{box-shadow:inset 0 0 0 2px #fff}
.dzx .dz-scr.dark .pt-ghost.sel{border-color:#fff;background:rgba(255,255,255,.08)}
.dzx .m-back{position:fixed;inset:0;background:rgba(20,25,35,.35);z-index:60}
.dzx .m-box{position:fixed;z-index:61;top:50%;left:50%;transform:translate(-50%,-50%);width:min(380px,calc(100vw - 32px));background:var(--surface);border-radius:12px;padding:20px;box-shadow:0 20px 50px rgba(0,0,0,.25);display:grid;gap:8px}
.dzx .m-box h3{margin:0 0 6px}
.dzx .m-box label{color:var(--muted);font-size:12.5px}
.dzx .dz-m2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dzx .dz-m2>div{display:grid;gap:6px}
.dzx .m-col{width:100%;height:36px}
.dzx .m-act{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.dzx .dz-sep{border:0;border-top:1px solid var(--line);margin:4px 0 16px}
.dzx .pp.std{margin-bottom:10px}
.dzx .dz-scr.dark{background:#15171b;color:#e8eaee}
.dzx .dz-scr.dark .ps-bar{color:#aab0bb}
.dzx .dz-scr.dark .pt{background:#23262c;box-shadow:none}
.dzx .dz-scr.dark .pt b{color:#eef0f3}
.dzx .dz-scr.dark .pt .pr{color:color-mix(in srgb,var(--c) 75%,#fff)}
.dzx .dz-scr.dark .pt.fill .pr,.dzx .dz-scr.dark .pt.fill b{color:#fff}
.dzx .dz-scr.dark .pt-ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10)}
.dzx .dz-scr.dark .pt-empty,.dzx .dz-scr.dark .ps-note{color:#8a909b;border-color:#3a3f48}
.dzx .dz-scr.square .pt,.dzx .dz-scr.square .pt-ghost,.dzx .dz-scr.square .pt-empty{border-radius:3px}
.dzx .dz-scr{position:relative}
.dzx .pt.tx{justify-content:center;align-items:center;text-align:center}
.dzx .pt.folder{gap:5px}
.dzx .fmini{display:grid;grid-template-columns:repeat(2,12px);gap:3px;flex:none}
.dzx .fmini i{width:12px;height:12px;border-radius:3px;background:rgba(40,50,70,.12)}
.dzx .pt.fill .fmini i:not([style]){background:rgba(255,255,255,.3)}
.dzx .dz-scr.compact .fmini{grid-template-columns:repeat(4,9px);gap:3px}
.dzx .dz-scr.compact .fmini i{width:9px;height:9px;border-radius:2px}
.dzx .dz-scr.compact .pt.folder{justify-content:center;align-items:center;text-align:center}
.dzx .fcount{position:absolute;top:8px;right:9px;font-size:11px;font-weight:600;color:#7a8291}
.dzx .pt.folder b{-webkit-line-clamp:2}
.dzx .pt.fill .fcount{color:rgba(255,255,255,.85)}
.dzx .dz-scr.square .fmini i{border-radius:1px}
.dzx .pf-back{position:absolute;inset:0;background:rgba(20,25,35,.45);backdrop-filter:blur(2px);z-index:2}
.dzx .pf{position:absolute;left:14px;right:14px;top:120px;max-height:calc(100% - 150px);overflow-y:auto;z-index:3;background:#eef1f6;border-radius:20px;padding:12px;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.dzx .pf.over{outline:3px dashed var(--accent)}
.dzx .pf-h{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 10px}
.dzx .pf-h b{font-size:16px}
.dzx .pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start}
.dzx .pf-hint{margin:10px 0 0;text-align:center;font-size:11.5px;color:#7a8291}
.dzx .dz-scr.dark .pf{background:#1e2126}
.dzx .dz-scr.square .pf{border-radius:6px}
.dzx .dz-devsel{flex-wrap:wrap;justify-content:center}
.dzx .dz-devb{display:flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:13.5px}
.dzx .dz-devb small{color:var(--muted);font-size:11.5px}
.dzx .dz-devb:hover{border-color:#b9c4d8}
.dzx .dz-devb.on{background:var(--fg);border-color:var(--fg);color:#fff}
.dzx .dz-devb.on small{color:#c9cfda}
.dzx .m-box{max-height:calc(100vh - 40px);overflow-y:auto;width:min(440px,calc(100vw - 32px))}
.dzx .m-devs{display:grid;gap:2px;max-height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.dzx .m-dg{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:8px 0 2px}
.dzx .m-dev{display:flex;align-items:center;gap:8px;padding:4px 0;color:var(--fg)!important;font-size:13.5px!important;cursor:pointer}
.dzx .m-dev small{margin-left:auto;color:var(--muted)}
.dzx .ps-cats{scrollbar-width:thin;overscroll-behavior-x:contain}
.dzx .ps-grid{scrollbar-width:thin}
.dzx .pt-ghost[data-slot]{cursor:copy}
.dzx .dz-dev{position:relative}
.dzx .ps-grid{position:relative}
.dzx .ins-layer{position:absolute;inset:0;pointer-events:none;z-index:5}
.dzx .ins{position:absolute;left:0;top:0;width:0;height:0}
.dzx .ins-row{left:0}
.dzx .ins-del{left:0}
.dzx .ins-hot.del{background:#d64545}
.dzx .del-band{position:absolute;background:rgba(214,69,69,.18);border:2px dashed #d64545;border-radius:10px;opacity:0;transition:opacity .12s;box-sizing:border-box}
.dzx .ins-del:has(.ins-hot:hover) .del-band{opacity:1}
.dzx .ins-col{top:0}
.dzx .ins-line{position:absolute;background:var(--accent);opacity:0;transition:opacity .12s;border-radius:2px}
.dzx .ins-row .ins-line{top:-1.5px;height:3px}
.dzx .ins-col .ins-line{left:-1.5px;width:3px}
.dzx .ins-hot{position:absolute;pointer-events:auto;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;border:2px solid #fff;opacity:0;transition:opacity .12s,transform .12s;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.dzx .ins-col .ins-hot{margin:-15px 0 0 -15px}
.dzx .ins-hot svg.bi{width:15px;height:15px;color:#fff}
.dzx .ins-hot::before{content:"";position:absolute;inset:-10px;border-radius:50%}
.dzx .ins:has(.ins-hot:hover) .ins-line,.dzx .ins .ins-hot:hover,.dzx .ins .ins-hot:focus-visible{opacity:1}
.dzx .ins .ins-hot:hover{transform:scale(1.08)}
.dzx .ins:has(.ins-hot:hover){z-index:2}
.dzx .dz-scr.square .ps-grid{gap:3px;padding:4px 4px 12px}
.dzx .dz-scr.square .pf-grid{gap:3px}
.dzx .pt-ghost{display:grid;place-items:center}
.dzx .g-fold{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:rgba(40,50,70,.22)}
.dzx .g-fold svg.bi{width:20px;height:20px}
.dzx .g-fold:hover{color:rgba(40,50,70,.55);background:rgba(40,50,70,.05)}
.dzx .dz-scr.dark .g-fold{color:rgba(255,255,255,.18)}
.dzx .dz-scr.dark .g-fold:hover{color:rgba(255,255,255,.5);background:rgba(255,255,255,.05)}
.dzx .dz-scr.compact .g-fold{width:28px;height:28px}
.dzx .pt.folder svg.bi{width:20px;height:20px}
.dzx .pt-ghost[data-gsel]{cursor:pointer}
.dzx .pt-ghost.sel{border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.dzx .pc[draggable]{cursor:grab}
.dzx .pc.dragging,.dzx .psc.dragging{opacity:.4}
.dzx .pc.ins-l{box-shadow:inset 3px 0 0 var(--accent)}
.dzx .pc.ins-r{box-shadow:inset -3px 0 0 var(--accent)}
.dzx .dz-art.used{opacity:.42;cursor:pointer}
.dzx .dz-art.used:hover{opacity:.7}
@keyframes dz-flash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 45%,transparent)}}
.dzx .pt.flash{animation:dz-flash .9s ease 1}
.dzx .dz-art.used .dz-add{visibility:hidden}
.dzx .dz-cols{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;font-size:13px;color:var(--muted)}
.dzx .dz-cols .seg2{background:var(--surface)}
.dzx .dz-cols .seg2 button{flex:none;min-width:38px}
.dzx .dz-cols small{font-size:12px}
.dzx .drag-del-hint{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:none;align-items:center;gap:8px;background:#b42318;color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;z-index:70;pointer-events:none}
.dzx .drag-del-hint svg.bi{color:#fff}
body.dz-drag-out .dzx .drag-del-hint{display:flex}
.dzx .cf .sw{margin-bottom:8px}
.dzx .cf-more{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--accent);padding:2px 0;margin-bottom:8px}
.dzx .cf-more svg.bi{width:12px;height:12px;transition:transform .15s}
.dzx .cf-more svg.bi.up{transform:rotate(180deg)}
.dzx .cf-rgb{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dzx .cf-pick{width:34px;height:30px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.dzx .cf-rgb label{display:flex;align-items:center;gap:3px;font-size:11.5px;color:var(--muted)}
.dzx .cf-rgb input[type=number]{width:46px;font:inherit;font-size:12.5px;padding:5px 4px;border:1px solid var(--line);border-radius:6px}
.dzx .cf-hex{width:76px;font:inherit;font-size:12.5px;padding:5px 6px;border:1px solid var(--line);border-radius:6px;font-family:ui-monospace,Menlo,monospace}
.dzx .seg2{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.dzx .seg2 button{flex:1;padding:7px 8px;border-left:1px solid var(--line);font-size:13px}
.dzx .seg2 button:first-child{border-left:0}
.dzx .seg2 button.on{background:var(--fg);color:#fff}
.dzx .icp{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.dzx .icp button{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px}
.dzx .icp button.on{border-color:var(--accent);background:#e9effb;color:var(--accent)}
.dzx .pp>label.tg,.dzx .tg{display:flex;align-items:center;gap:10px;padding:5px 0;margin:0;cursor:pointer;color:var(--fg);font-size:14px;position:relative}
.dzx .tg input{position:absolute;opacity:0}
.dzx .tg span{width:34px;height:20px;border-radius:10px;background:#c9cfda;position:relative;transition:background .15s;flex:none}
.dzx .tg span::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.dzx .tg input:checked+span{background:var(--accent)}
.dzx .tg input:checked+span::after{transform:translateX(14px)}
.dzx .tg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.dzx .dz-btn.sm{padding:6px 10px;font-size:13px;width:100%;justify-content:center}
.dzx .dz-btn.danger{border-color:#d9a3a3;color:#b42318}
@media (max-width:1100px){.dzx .dz{grid-template-columns:minmax(220px,270px) minmax(0,1fr);grid-template-areas:"list stage" "props stage"}.dzx .dz-center{position:sticky;top:0}.dzx .dz-props{position:static}.dzx .dz-arts{max-height:340px}.dzx .dz-devb small{display:none}.dzx .dz-devb{padding:6px 10px}}
@media (max-width:700px){.dzx .dz{grid-template-columns:1fr;grid-template-areas:"stage" "props" "list"}.dzx .dz-center{position:static}}
/* Admin-Rahmen: Kopfzeile ist sticky → Abstand oben; Ziel-Leiste mit Gruppen; Hinweisbanner; Speichern-Leiste */
.dzx .dz-props{top:calc(var(--topbar-h,56px) + 12px)}
@media (max-width:1100px){.dzx .dz-center{top:calc(var(--topbar-h,56px) + 8px)}}
.dzx .dz-devsel .dz-grp{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dzx .dz-devsel .dz-grp+.dz-grp{padding-left:10px;margin-left:2px;border-left:1px solid var(--line)}
.dzx .dz-grp-l{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.dzx .dz-devb .st{width:7px;height:7px;border-radius:50%;background:#b8bfca;flex:none}
.dzx .dz-devb .st.on{background:#22a05a}
.dzx .dz-devb .own{font-size:10.5px;font-weight:700;color:var(--accent)}
.dzx .dz-devb.on .own{color:#9ec0ff}
.dzx .dz-devb.dirty::after{content:"";width:6px;height:6px;border-radius:50%;background:#f08c00;margin-left:2px}
.dzx .dz-banner{display:flex;align-items:flex-start;gap:8px;max-width:760px;font-size:13px;line-height:1.4;padding:8px 12px;border-radius:8px;background:color-mix(in srgb,var(--accent) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));color:var(--fg)}
.dzx .dz-banner.warn{background:color-mix(in srgb,#f08c00 10%,var(--surface));border-color:color-mix(in srgb,#f08c00 40%,var(--line))}
.dzx .dz-banner svg.bi{width:16px;height:16px;margin-top:1px;color:var(--accent)}
.dzx .dz-banner.warn svg.bi{color:#c26a00}
.dzx .dz-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.dzx .dz-bar .dz-btn{width:auto;padding:7px 12px}
.dzx .dz-bar .dz-state{font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.dzx .dz-bar .dz-state.dirty{color:#c26a00;font-weight:600}
.dzx .dz-bar .dz-state.dirty::before{content:"";width:8px;height:8px;border-radius:50%;background:#f08c00}
.dzx .dz-btn:disabled{opacity:.5;cursor:default}
.dzx .dz-btn.primary:disabled{background:var(--accent);border-color:var(--accent)}
.dzx .dz-tlist{display:grid;gap:4px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.dzx .dz-tlist label{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--fg)}
.dzx .dz-tlist small{margin-left:auto;color:var(--muted)}
.dzx .pt .em{font-size:18px;line-height:1}
.dzx .dz-art .em{width:18px;text-align:center;flex:none}
.dzx .dz-filter{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.dzx .dz-filter button{font-size:12px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.dzx .dz-filter button.on{background:var(--fg);border-color:var(--fg);color:#fff}
.dzx .dz-btn{color:var(--fg)}
.dzx .dz-btn.primary{color:#fff}
html[data-bs-theme="dark"] .dzx .dz-art:hover{background:rgba(255,255,255,.04)}
html[data-bs-theme="dark"] .dzx .dz-dev{background:#2a2d33;border-color:#3a3f48}
html[data-bs-theme="dark"] .dzx .dz-devb.on{background:#e6e8ec;color:#15171b;border-color:#e6e8ec}
html[data-bs-theme="dark"] .dzx .dz-devb.on small{color:#4a505b}
html[data-bs-theme="dark"] .dzx .seg2 button.on{background:#e6e8ec;color:#15171b}
html[data-bs-theme="dark"] .dzx .icp button.on,html[data-bs-theme="dark"] .dzx .dz-add:hover,html[data-bs-theme="dark"] .dzx .dz-info:hover{background:rgba(120,160,255,.15)}
/* 20.10.2026: inaktiver Artikel (Kasse zeigt ihn nicht), Zähler «Nicht platziert», Gerät mit Design in «Meine Geräte» */
.dzx .pt.off{opacity:.5;filter:grayscale(1)}
.dzx .dz-filter .dz-cnt{display:inline-block;min-width:18px;padding:0 5px;margin-left:2px;border-radius:9px;background:rgba(40,50,70,.08);font-size:11px;font-weight:600}
.dzx .m-dev .own{color:var(--accent);font-size:10px;vertical-align:1px}

/* __DZ_ADOPT__ Knopf «Vorschlag übernehmen» rechts im Hinweis; .dz-btn.sm hat sonst width:100% (Text wurde zur Spalte gequetscht, 21.10.) */
.dzx .dz-banner{align-items:center;flex-wrap:wrap}
.dzx .dz-banner > span{flex:1 1 260px;min-width:0}
.dzx .dz-banner .dz-adopt{width:auto;flex:0 0 auto;margin-left:auto;white-space:nowrap}

/* __DZ_CHROME__ Kopfzeile, Pfand-Knopf und Menü ☰ wie auf der Kasse */
.dzx .dz-scr{position:relative}
.dzx .ps-head .ps-menu{border:0;background:none;padding:0;margin:0;color:inherit;cursor:pointer;display:inline-flex;line-height:0}
.dzx .ps-head b{flex:1 1 auto;text-align:center}
.dzx .ps-head .ps-acts{display:inline-flex;align-items:center;gap:14px;min-width:22px;justify-content:flex-end}
.dzx .ps-head .ps-acts i.bi{font-size:20px;line-height:1}
.dzx .ps-pfand{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 14px 10px;padding:10px 12px;border-radius:12px;background:#e0603f;color:#fff;font-weight:600;font-size:13px}
.dzx .ps-pfand svg.bi,.dzx .ps-pfand i.bi{width:16px;height:16px;font-size:16px;color:#fff}
.dzx .ps-drawer-wrap{position:absolute;inset:0;z-index:6;background:rgba(0,0,0,.38);display:flex}
.dzx .ps-drawer{width:80%;max-width:304px;height:100%;overflow:auto;background:#fff;color:#1f2430;padding:12px 0 14px;box-shadow:4px 0 18px rgba(0,0,0,.18)}
.dzx .dz-scr.dark .ps-drawer{background:#1f2430;color:#e8eaf0}
.dzx .pd-head{display:flex;flex-direction:column;gap:2px;padding:8px 18px 12px;margin-bottom:6px;border-bottom:1px solid rgba(127,127,127,.25)}
.dzx .pd-head small{opacity:.6}
.dzx .pd-item{display:flex;align-items:center;gap:14px;padding:10px 18px;font-size:14px}
.dzx .pd-item svg.bi,.dzx .pd-item i.bi{width:18px;height:18px;font-size:18px;line-height:1}
.dzx .pd-item.exit{color:#c62828}
.dzx .pd-sep{height:1px;margin:6px 16px;background:rgba(127,127,127,.25)}
.dzx .pd-note{margin:10px 18px 0;font-size:11px;opacity:.6}

/* ══ 07-print.css ══ */
/* Drucken aus dem Admin (Beleg-Ansicht, Transaktion) — Chrome entfernt, Inhalt bleibt */
@media print {
  .no-print, nav, .navbar, .sidebar, aside, [class*="sidebar"], .btn, .modal, .alert, .card-header .btn, #refundModal, .mobile-tabbar, .help-drawer, .help-drawer-scrim { display: none !important; }
  body { background: #fff !important; font-size: 13px; }
  .card { border: none !important; box-shadow: none !important; }
  .card-header { background: none !important; border-bottom: 1px solid #ccc !important; }
  .col-lg-4 { display: none !important; }
  .col-lg-8 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
  .print-receipt-title { display: block !important; }
}
.print-receipt-title { display: none; }

/* ══ 08-dark.css ══ */
/* ═══════════════════════════════════════════════════════════════════════════
   08 · Dark Mode — nur noch Bootstrap-Bauteile, die ihre Farben nicht ueber unsere Tokens beziehen.
   Eigene Komponenten brauchen hier NICHTS: sie benutzen var(--c-*), und 01-tokens.css schaltet die Werte um.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-bs-theme="dark"] body { background: var(--c-bg); }
html[data-bs-theme="dark"] .card { box-shadow: 0 1px 2px rgba(0,0,0,.4); }
html[data-bs-theme="dark"] .bg-white, html[data-bs-theme="dark"] .bg-light { background-color: var(--c-surface) !important; }
html[data-bs-theme="dark"] .text-dark, html[data-bs-theme="dark"] .text-black { color: var(--c-text-2) !important; }
html[data-bs-theme="dark"] .text-muted { color: var(--c-muted) !important; }
html[data-bs-theme="dark"] .border, html[data-bs-theme="dark"] .border-top, html[data-bs-theme="dark"] .border-bottom, html[data-bs-theme="dark"] .border-start, html[data-bs-theme="dark"] .border-end { border-color: var(--c-border) !important; }
html[data-bs-theme="dark"] .badge.text-bg-light, html[data-bs-theme="dark"] .badge.bg-light, html[data-bs-theme="dark"] .text-bg-light { background-color: var(--c-surface-3) !important; color: var(--c-text-3) !important; }
html[data-bs-theme="dark"] .btn-outline-dark { color: var(--c-text-2); border-color: var(--c-border-2); }
html[data-bs-theme="dark"] .btn-outline-dark:hover { background: var(--c-surface-4); border-color: var(--c-border-2); color: #fff; }
html[data-bs-theme="dark"] .btn-light { background: var(--c-surface-3); border-color: var(--c-border); color: var(--c-text-2); }
html[data-bs-theme="dark"] .btn-outline-secondary { color: var(--c-text-3); border-color: var(--c-border-2); }
html[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--c-text-2); --bs-table-border-color: var(--c-border); --bs-table-striped-bg: rgba(255,255,255,.03); --bs-table-hover-bg: rgba(255,255,255,.05); }
html[data-bs-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: inherit; }
html[data-bs-theme="dark"] .table th { color: var(--c-muted); }
html[data-bs-theme="dark"] .table-light, html[data-bs-theme="dark"] .table-light > * { --bs-table-bg: var(--c-surface-2); background-color: var(--c-surface-2); color: var(--c-text-3); }
html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select, html[data-bs-theme="dark"] .input-group-text { background: var(--c-bg); border-color: var(--c-border); color: var(--c-text-2); }
html[data-bs-theme="dark"] .form-control::placeholder { color: var(--c-faint); }
html[data-bs-theme="dark"] .form-check-input:not(:checked) { background-color: var(--c-bg); border-color: var(--c-border-2); }
html[data-bs-theme="dark"] .dropdown-menu { background: var(--c-surface); border-color: var(--c-border); --bs-dropdown-color: var(--c-text-2); --bs-dropdown-link-color: var(--c-text-2); --bs-dropdown-link-hover-bg: var(--c-surface-3); --bs-dropdown-link-hover-color: #fff; }
html[data-bs-theme="dark"] .modal-content, html[data-bs-theme="dark"] .offcanvas, html[data-bs-theme="dark"] .toast { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text-2); }
html[data-bs-theme="dark"] .nav-tabs { border-color: var(--c-border); }
html[data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--c-muted); }
html[data-bs-theme="dark"] .nav-tabs .nav-link.active { background: var(--c-surface); border-color: var(--c-border) var(--c-border) var(--c-surface); }
html[data-bs-theme="dark"] .list-group-item { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text-2); }
html[data-bs-theme="dark"] .alert-light, html[data-bs-theme="dark"] .alert-secondary { background: var(--c-surface-2); border-color: var(--c-border); color: var(--c-text-3); }
html[data-bs-theme="dark"] .page-link { background: var(--c-surface); border-color: var(--c-border); }
html[data-bs-theme="dark"] .stat-icon { filter: saturate(.9) brightness(.92); }
html[data-bs-theme="dark"] hr { border-color: var(--c-border); opacity: 1; }
html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--c-surface-4); }
/* Berichte zum Drucken bleiben hell — sie gehen auf Papier */
html[data-bs-theme="dark"] .page-daily_report, html[data-bs-theme="dark"] .page-weekly_report, html[data-bs-theme="dark"] .page-receipt { color-scheme: light; }

/* ══ 06-pages/settings.css ══ */
/* __MAIL_DESIGN__ Einstellungen → E-Mails an Kunden: Vorschau-Rahmen */
.mail-preview-frame{width:100%;height:720px;border:1px solid var(--c-border);border-radius:12px;background:#eef2f8}
.mail-preview-wrap{position:sticky;top:76px}