/* Self-hosted Plus Jakarta Sans (DSGVO: no external Google Fonts requests) */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   LEVIAPAY Dashboard — Design System
   White / Black / Violet · light + dark · 3 directions
   Font: Plus Jakarta Sans (geometric, friendly)
   ============================================================ */

/* Scoped to .lp-app so the redesign font/reset does NOT bleed onto the
   landing page or not-yet-restyled legacy screens (Task 7). */
.lp-app, .lp-app *, .lp-app *::before, .lp-app *::after{box-sizing:border-box}
.lp-app{
  font-family:var(--font, "Plus Jakarta Sans"),system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.lp-app button{font-family:inherit}
.lp-app ::selection{background:color-mix(in srgb,var(--accent) 26%,transparent)}

/* ---------- THEME TOKENS ---------- */
.lp-app{
  --accent:#6d28d9;
  --accent-ink:#ffffff;
  --success:#15875a;
  --danger:#d8362a;
  --warn:#b45309;
  /* solid monochrome primary (v2 black-button language); inverts in dark */
  --solid:#111111;
  --solid-ink:#ffffff;
  --solid-hover:#2a2a2e;

  --side-w:258px;
  --d:1;                 /* density multiplier (tweak) */
  --font:"Plus Jakarta Sans";

  --fs-display:30px;
  --fs-h1:21px;
  --fs-h2:15.5px;
  --fs-body:14px;
  --fs-sm:13px;
  --fs-xs:11px;
}

/* LIGHT */
.lp-app.theme-light{
  --bg:#ffffff;
  --card:#ffffff;
  --ink:#0e0e14;
  --ink-2:#5b5b67;
  --ink-3:#9a9aa6;
  --line:rgba(14,14,20,.10);
  --line-2:rgba(14,14,20,.16);
  --field:#ffffff;
  --field-2:#ffffff;
  --hover:rgba(14,14,20,.045);
  --hover-2:rgba(14,14,20,.07);
  --shadow:0 1px 2px rgba(14,14,20,.05), 0 1px 0 rgba(14,14,20,.02);
  --shadow-lg:0 12px 32px -8px rgba(14,14,20,.16), 0 2px 6px rgba(14,14,20,.05);
  --sidebar-bg:#ffffff;
  --sidebar-ink:#5b5b67;
  --sidebar-line:rgba(14,14,20,.09);
  --grid-line:rgba(14,14,20,.07);
}
/* DARK */
.lp-app.theme-dark{
  --bg:#09090c;
  --card:#121218;
  --ink:#f3f3f7;
  --ink-2:#a0a0ac;
  --ink-3:#6c6c78;
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.15);
  --field:#16161d;
  --field-2:#1b1b23;
  --hover:rgba(255,255,255,.05);
  --hover-2:rgba(255,255,255,.08);
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 16px 40px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  --sidebar-bg:#0c0c11;
  --sidebar-ink:#9a9aa6;
  --sidebar-line:rgba(255,255,255,.07);
  --grid-line:rgba(255,255,255,.07);
  --accent:#8b5cf6;
  --warn:#d99421;
  --solid:#f3f3f7;
  --solid-ink:#09090c;
  --solid-hover:#d8d8de;

  /* ── style.css var bridge ─────────────────────────────────────────
     Legacy surfaces inside the dashboard (modals, toasts, profile menu,
     forms, tables — styled by style.css) resolve their custom properties
     from the nearest scope. Redefining the legacy var names here flips
     those surfaces to dark without touching style.css itself. */
  --surface:#121218;
  --surface-elevated:#1b1b23;
  --accent-hover:#7c4ddc;
  --accent-light:rgba(139,92,246,.16);
  --accent-50:rgba(139,92,246,.09);
  --destructive-light:rgba(239,68,68,.14);
  --warning-light:rgba(242,156,6,.14);
  --success-light:rgba(16,185,129,.14);
  --text-primary:#f3f3f7;
  --text-secondary:#a0a0ac;
  --text-tertiary:#6c6c78;
  --divider:rgba(255,255,255,.085);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 12px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35);
  --shadow-card-bold:20px 24px 32px rgba(0,0,0,.5);
  --shadow-card:21px 28px 66px rgba(0,0,0,.4);
}

/* ---------- DIRECTIONS ---------- */
.lp-app.dir-klar{
  --r-card:14px; --r-ctl:9px; --r-pill:999px; --r-chip:8px;
  --pad-card:22px; --gap:18px;
}
.lp-app.dir-raster{
  --r-card:5px; --r-ctl:5px; --r-pill:5px; --r-chip:4px;
  --pad-card:20px; --gap:14px;
}
.lp-app.dir-kontrast{
  --r-card:18px; --r-ctl:11px; --r-pill:999px; --r-chip:10px;
  --pad-card:24px; --gap:20px;
  --fs-display:40px; --fs-h1:25px;
}
/* Kontrast: black sidebar regardless of theme */
.lp-app.dir-kontrast{
  --sidebar-bg:#0c0c11;
  --sidebar-ink:rgba(255,255,255,.62);
  --sidebar-line:rgba(255,255,255,.10);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.lp-app{display:flex;min-height:100vh;width:100%;background:var(--bg);color:var(--ink)}

.lp-side{
  width:var(--side-w);flex:0 0 var(--side-w);
  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-line);
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  padding:18px 14px 14px;
  transition:width .22s ease, transform .22s ease;
  z-index:30;
}
.lp-side.collapsed{width:74px;flex-basis:74px}
.lp-side.collapsed .nav-label,
.lp-side.collapsed .nav-chev,
.lp-side.collapsed .side-foot-label,
.lp-side.collapsed .brand-word{opacity:0;pointer-events:none}

.lp-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}

/* ---------- BRAND ---------- */
.brand{display:flex;align-items:center;justify-content:space-between;
  padding:4px 8px 18px;gap:8px}
.brand-mark{display:flex;align-items:center;gap:11px;min-width:0}
/* real LEVIAPAY logo (same icon as the old dashboard), swapped per theme */
.brand-logo-icon{width:32px;height:32px;flex:0 0 32px;object-fit:contain;display:block}
.theme-dark .brand-logo-icon{content:url("../img/logo-icon-white.png")}
.lp-side.collapsed .brand-logo-icon{margin:0 auto}
/* full LEVIAPAY wordmark when expanded; icon-only when collapsed */
.brand-logo-full-img{height:34px;width:auto;max-width:180px;object-fit:contain;display:block}
.theme-dark .brand-logo-full-img{content:url("../img/logo-full-white.png")}
.brand-mark .brand-logo-icon{display:none}
.lp-side.collapsed .brand-logo-full-img{display:none}
.lp-side.collapsed .brand-mark .brand-logo-icon{display:block;margin:0 auto;width:32px;height:32px}
.brand-tile{width:36px;height:36px;border-radius:10px;flex:0 0 36px;
  background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;
  font-weight:800;font-size:19px;letter-spacing:-.02em}
.dir-raster .brand-tile{border-radius:5px}
/* logo — recolored PNGs swapped by theme (robust, no mask) */
.brand-logo{background-repeat:no-repeat;background-position:left center;background-size:contain}
.brand-logo-full{height:23px;width:93px}
.brand-logo-mark{height:28px;width:27px;background-position:center}
/* theme swaps live on .brand-logo-full-img/.brand-logo-icon (img/ files);
   the old assets/-based background swaps pointed at files that never
   existed and were removed. */
.brand-word{font-weight:800;font-size:16px;letter-spacing:-.02em;
  color:var(--sidebar-ink-strong,inherit);white-space:nowrap}
.dir-kontrast .brand-word,.dir-kontrast .brand-burger{color:#fff}
.theme-light:not(.dir-kontrast) .brand-word{color:var(--ink)}
.theme-dark .brand-word{color:var(--ink)}
.brand-burger{appearance:none;border:0;background:transparent;cursor:pointer;
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  color:var(--sidebar-ink)}
.brand-burger:hover{background:var(--hover)}
/* collapsed: stack logo + toggle vertically so the expander stays reachable */
.lp-side.collapsed .brand{flex-direction:column;gap:12px;padding:4px 0 18px}
.lp-side.collapsed .brand-word{display:none}
.lp-side.collapsed .brand-burger{width:40px;height:34px}

/* ---------- NAV ---------- */
.nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;
  margin:0 -4px;padding:0 4px;scrollbar-width:none;-ms-overflow-style:none}
.nav::-webkit-scrollbar{display:none;width:0;height:0}
/* sidebar footer email removed in all states */
.user-email{display:none}
/* collapsed sidebar: hide section labels ("Erweiterungen") */
.lp-side.collapsed .nav-section{display:none}
.nav-sep{height:1px;background:var(--sidebar-line);margin:12px 8px}

.nav-item{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:calc(9px*var(--d)) 10px;border-radius:var(--r-ctl);
  color:var(--sidebar-ink);cursor:pointer;border:0;background:transparent;
  width:100%;text-align:left;font-size:var(--fs-body);font-weight:500;
  letter-spacing:-.005em;transition:background .14s,color .14s;
}
.nav-item:hover{background:var(--hover);color:var(--ink)}
.nav-item .nav-ic{flex:0 0 20px;display:grid;place-items:center;color:inherit;opacity:.85}
.nav-label{flex:1;white-space:nowrap;transition:opacity .15s}
.nav-chev{color:var(--ink-3);transition:transform .18s,opacity .15s}
.nav-chev.open{transform:rotate(90deg)}

.nav-item.active{color:var(--accent);font-weight:700;background:var(--hover)}
.nav-group{font-weight:700}
.nav-group .nav-label{color:var(--sidebar-ink)}
.theme-light:not(.dir-kontrast) .nav-group .nav-label{color:var(--ink)}
.theme-dark .nav-group .nav-label{color:var(--ink)}
.dir-kontrast .nav-group .nav-label{color:#fff}
.dir-kontrast .nav-item.active{color:#fff;background:rgba(255,255,255,.08)}
.nav-item.active::before{
  content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--accent)}
.dir-raster .nav-item.active::before{border-radius:0;height:100%;top:0;transform:none}
.dir-kontrast .nav-item.active::before{background:#fff}

.nav-sub{display:flex;flex-direction:column;gap:2px;margin:2px 0 2px 0;
  padding-left:16px;overflow:hidden}
.nav-subitem{
  display:flex;align-items:center;gap:11px;padding:calc(8px*var(--d)) 10px;
  border-radius:var(--r-ctl);color:var(--sidebar-ink);cursor:pointer;border:0;
  background:transparent;width:100%;text-align:left;font-size:var(--fs-sm);
  font-weight:500;position:relative;transition:background .14s,color .14s}
.nav-subitem .nav-ic{flex:0 0 18px;display:grid;place-items:center;opacity:.8}
.nav-subitem:hover{background:var(--hover);color:var(--ink)}
.nav-subitem.active{color:var(--accent);font-weight:700;background:var(--hover)}
.dir-kontrast .nav-subitem.active{color:#fff;background:rgba(255,255,255,.08)}

.side-foot{margin-top:8px;padding-top:10px;border-top:1px solid var(--sidebar-line)}

/* sidebar section heading (e.g. Erweiterungen) — bold + high contrast */
.nav-section{font-size:var(--fs-xs);font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sidebar-ink);padding:8px 10px 5px;margin:0}
.theme-light:not(.dir-kontrast) .nav-section{color:var(--ink)}
.theme-dark .nav-section{color:var(--ink)}
.dir-kontrast .nav-section{color:#fff}

/* "Vorschau" tag on superAdmin-only preview nav items */
.nav-preview-tag{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);background:var(--hover);
  border:1px solid var(--sidebar-line);border-radius:var(--r-pill);padding:2px 7px;line-height:1.4}
.dir-raster .nav-preview-tag{border-radius:var(--r-chip)}
.nav-item.active .nav-preview-tag{color:var(--accent);border-color:transparent}

/* defeat legacy style.css nav bleed inside the redesign sidebar (class collisions:
   legacy .nav-group sets flex-direction:column; legacy .nav-sub sets height:36px) */
.lp-side .nav-group{flex-direction:row;align-items:center}
.lp-side .nav-sub{height:auto;max-height:none;overflow:visible;padding-left:0}
/* open-dropdown indicator: light-grey vertical guide rail in the gutter,
   spanning the open submenu (active item's accent overlays it in accent colour) */
.lp-side .nav-sub{position:relative}
.lp-side .nav-sub::before{content:"";position:absolute;left:-1px;top:3px;bottom:3px;
  width:2px;border-radius:2px;background:var(--line)}
/* payment brand / cash icons (transactions list, detail, breakdown) */
.pay-ico{height:20px;width:auto;vertical-align:middle}
.theme-dark .pay-ico-cash{filter:invert(1) brightness(1.5)}

/* ============================================================
   TOPBAR
   ============================================================ */
.lp-topbar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:26px 30px 18px;position:sticky;top:0;background:var(--bg);z-index:20;
}
.lp-topbar-l{min-width:0}
.page-title{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.03em;margin:0;
  line-height:1.1}
.page-sub{font-size:var(--fs-sm);color:var(--ink-2);margin:6px 0 0;font-weight:500}
.lp-topbar-r{display:flex;align-items:center;gap:10px;flex-shrink:0}
/* Monochrome brand accent for the merchant dashboard (was an inline style
   on #dashboard, which blocked theming). Inverts in dark like --solid. */
#dashboard.lp-app{--accent:#111111;--accent-ink:#ffffff}
#dashboard.lp-app.theme-dark{--accent:#f3f3f7;--accent-ink:#09090c}

/* Legacy tooltip bubble: bg is var(--text-primary), which flips light in
   dark mode — flip the hardcoded white text along with it */
.lp-app.theme-dark .field-tip::after{color:#09090c}

/* Skeleton loading — shimmer placeholders while onSnapshot views load */
.lp-skel{position:relative;overflow:hidden;background:var(--hover);
  border-radius:var(--r-chip)}
.lp-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--hover-2),transparent);
  animation:lp-skel-sweep 1.2s infinite}
@keyframes lp-skel-sweep{100%{transform:translateX(100%)}}
.lp-skel-row{height:52px;margin-bottom:10px}
.lp-skel-card{height:118px;margin-bottom:12px}

/* Global controls cluster — ONE fixed-position node (top right), identical
   on every page. Width: 38+38+230+38 + 3×10 gap = 374px (≈384 w/ edge gap). */
.lp-global-controls{
  position:fixed;top:26px;right:30px;z-index:60;
  display:flex;align-items:center;gap:10px;
  /* SOLID backing: the cluster floats over scrolling content. A translucent
     or blurred backing still lets moving content show through (blurred motion
     still reads as movement), so use a fully opaque page-colored backing —
     scrolled content disappears completely behind it. No color-mix/backdrop-
     filter so it works regardless of browser support. padding+negative margin
     extend the backing without moving the icons. */
  padding:6px 8px;margin:-6px -8px;
  background:var(--bg);
  border-radius:16px;
}
/* RESERVE the cluster's gutter so NO page content slides under it. Standard
   headers reserve via .lp-topbar-r (the right action group) — every section
   header uses it, so this is the default. Bespoke headers that don't use
   .lp-topbar-r add the .lp-reserve-r utility (padding-right, works on any
   container). Widths track the cluster, which sheds the search (≤1100) then
   the news button (≤760) at breakpoints. */
.lp-app .main-content .lp-topbar-r{margin-right:384px}
.lp-app .main-content .lp-reserve-r{padding-right:384px}
#dashboard.sa-mode .lp-global-controls{display:none}
@media (max-width:1100px){
  .lp-global-controls .lp-search{display:none}
  .lp-app .main-content .lp-topbar-r{margin-right:154px}
  .lp-app .main-content .lp-reserve-r{padding-right:154px}
}
@media (max-width:760px){
  .lp-global-controls #overview-news-btn{display:none}
  .lp-app .main-content .lp-topbar-r{margin-right:106px}
  .lp-app .main-content .lp-reserve-r{padding-right:106px}
}

.lp-search{display:flex;align-items:center;gap:9px;height:38px;padding:0 13px;
  border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--field);
  color:var(--ink-3);min-width:230px}
.lp-search input{border:0;background:transparent;outline:0;color:var(--ink);
  font-size:var(--fs-sm);width:100%;font-family:inherit}
.lp-search input::placeholder{color:var(--ink-3)}

.lp-avatar{width:38px;height:38px;border-radius:var(--r-pill);background:var(--accent);
  color:var(--accent-ink);display:grid;place-items:center;font-weight:700;font-size:14px;flex:0 0 38px}
.lp-icon-btn{appearance:none;border:1px solid var(--line);background:var(--card);
  width:38px;height:38px;border-radius:var(--r-ctl);display:grid;place-items:center;
  color:var(--ink-2);cursor:pointer;transition:background .14s,color .14s}
.lp-icon-btn:hover{background:var(--hover);color:var(--ink)}

.lp-content{padding:6px 30px 48px;display:flex;flex-direction:column;gap:var(--gap)}

/* "Vorschau" banner shown atop UI-only preview sections (demo data) */
.lp-app .lp-preview-banner{background:color-mix(in srgb,var(--accent) 8%,transparent);
  border:1px solid var(--line);border-radius:var(--r-card);padding:10px 14px;
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);margin-bottom:14px}

/* Events — "Veranstaltungsmodus" banner */
.lp-app .ev-mode-banner{display:flex;align-items:center;gap:14px}
.lp-app .ev-mode-icon{flex:0 0 44px;width:44px;height:44px;border-radius:12px;
  background:var(--ink);color:var(--card);display:grid;place-items:center}
.lp-app .ev-mode-text{flex:1;min-width:0}
.lp-app .ev-mode-over{font-size:11px;letter-spacing:.1em;font-weight:600;
  text-transform:uppercase;color:var(--ink-3)}
.lp-app .ev-mode-title{font-size:15px;font-weight:700;color:var(--ink);margin-top:2px}

/* Events — card grid */
.lp-app .ev-card{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  cursor:pointer;background:var(--card);transition:box-shadow .14s,border-color .14s}
.lp-app .ev-card:hover{border-color:var(--ink-3);box-shadow:0 4px 16px rgba(0,0,0,.07)}
.lp-app .ev-poster{position:relative;height:118px;display:flex;align-items:center;
  justify-content:center;background:repeating-linear-gradient(45deg,var(--hover),var(--hover) 10px,var(--hover-2) 10px,var(--hover-2) 20px)}
.lp-app .ev-poster-lbl{font-size:11px;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.lp-app .ev-badge{position:absolute;top:10px;right:10px;font-size:11px;font-weight:600;
  padding:2px 9px;border-radius:999px}
.lp-app .ev-cap-bar{height:6px;border-radius:3px;background:var(--line);margin-top:8px;overflow:hidden}
.lp-app .ev-cap-fill{height:100%;border-radius:3px}

/* ============================================================
   PRIMITIVES
   ============================================================ */
.lp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow)}
.lp-card-pad{padding:calc(var(--pad-card)*var(--d))}
.lp-card-h{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:18px}
.lp-card-title{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.015em;margin:0;white-space:nowrap}
.lp-card-meta{font-size:var(--fs-sm);color:var(--ink-3);font-weight:500;white-space:nowrap;flex-shrink:0}

/* buttons — compact by default */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:36px;padding:0 14px;border-radius:var(--r-ctl);border:1px solid transparent;
  font-size:var(--fs-sm);font-weight:600;letter-spacing:-.01em;cursor:pointer;
  white-space:nowrap;transition:background .14s,border-color .14s,color .14s,transform .04s;
  font-family:inherit}
.lp-btn:active{transform:translateY(.5px)}
.lp-btn-sm{height:31px;padding:0 11px;font-size:var(--fs-xs);font-weight:600}
.lp-btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.lp-btn-primary:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}
.lp-btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line-2)}
.lp-btn-ghost:hover{background:var(--hover)}
.lp-btn-quiet{background:transparent;color:var(--ink-2);border-color:transparent}
.lp-btn-quiet:hover{background:var(--hover);color:var(--ink)}
.lp-btn-danger{background:transparent;color:var(--danger);border-color:var(--line-2)}
.lp-btn-danger:hover{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent)}

/* segmented control */
.lp-seg{display:inline-flex;padding:3px;gap:2px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--card)}
.dir-raster .lp-seg{border-radius:var(--r-chip)}
.lp-seg-i{appearance:none;border:0;background:transparent;cursor:pointer;
  padding:0 14px;height:30px;border-radius:calc(var(--r-pill) - 2px);
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);font-family:inherit;
  transition:background .14s,color .14s;display:inline-flex;align-items:center}
.dir-raster .lp-seg-i{border-radius:var(--r-chip)}
.lp-seg-i:hover{color:var(--ink)}
.lp-seg-i.active{background:var(--accent);color:var(--accent-ink)}

/* chip / filter pill */
.chip{appearance:none;border:1px solid var(--line);background:var(--card);
  height:34px;padding:0 14px;border-radius:var(--r-pill);font-size:var(--fs-sm);
  font-weight:600;color:var(--ink-2);cursor:pointer;font-family:inherit;
  transition:background .14s,color .14s,border-color .14s}
.dir-raster .chip{border-radius:var(--r-chip)}
.chip:hover{background:var(--hover);color:var(--ink)}
.chip.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chip.outline-active{background:transparent;color:var(--accent);border-color:var(--accent)}

/* status — dot + label, NO fill */
.lp-status{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);
  font-weight:600;color:var(--ink-2);white-space:nowrap}
.lp-status .lp-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.lp-status.ok{color:var(--success)} .lp-status.ok .lp-dot{background:var(--success)}
.lp-status.bad{color:var(--danger)} .lp-status.bad .lp-dot{background:var(--danger)}
.lp-status.lp-muted{color:var(--ink-3)} .lp-status.lp-muted .lp-dot{background:var(--ink-3)}
.lp-status.warn{color:#b9770b} .lp-status.warn .lp-dot{background:#d9870e}

/* tag (category color dot label) */
.tagdot{width:9px;height:9px;border-radius:3px;flex:0 0 9px}

/* inputs */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:var(--fs-sm);color:var(--ink-2);font-weight:600}
.input,select.input{height:42px;padding:0 14px;border:1px solid var(--line-2);
  border-radius:var(--r-ctl);background:var(--field);color:var(--ink);
  font-size:var(--fs-body);font-family:inherit;outline:0;width:100%}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.input::placeholder{color:var(--ink-3)}

/* mono */
.lp-mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.lp-neg{color:var(--danger)}
.lp-strike{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--danger) 60%,transparent)}

/* grids */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.two-col{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--gap)}
@media(max-width:1180px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}}
@media(max-width:760px){.kpi-grid{grid-template-columns:1fr}}

/* KPI */
.kpi{display:flex;flex-direction:column;gap:14px}
.kpi-top{display:flex;align-items:center;gap:11px}
.kpi-ic{width:38px;height:38px;border-radius:var(--r-chip);display:grid;place-items:center;
  color:var(--accent);border:1px solid var(--line);flex:0 0 38px}
.dir-kontrast .kpi-ic{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.kpi-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.kpi-val{font-size:var(--fs-display);font-weight:800;letter-spacing:-.03em;line-height:1}
.kpi-delta{font-size:var(--fs-sm);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.kpi-delta.up{color:var(--success)} .kpi-delta.down{color:var(--danger)}

/* list rows */
.lp-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.lp-row:first-child{border-top:0}
.lp-row-ic{width:40px;height:40px;border-radius:var(--r-pill);flex:0 0 40px;
  display:grid;place-items:center;border:1px solid var(--line);color:var(--ink-2)}
.dir-raster .lp-row-ic{border-radius:var(--r-chip)}
.lp-row-main{flex:1;min-width:0}
.lp-row-t{font-size:var(--fs-body);font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:center;gap:9px}
.lp-row-s{font-size:var(--fs-sm);color:var(--ink-3);margin-top:3px;font-weight:500}
.lp-row-r{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}
.lp-amt{font-size:var(--fs-body);font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.lp-row-t{flex-wrap:wrap}
.rank .lp-amt{margin-left:auto}

/* rank list */
.rank{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line)}
.rank:first-child{border-top:0}
.rank-n{width:26px;height:26px;border-radius:var(--r-chip);flex:0 0 26px;display:grid;
  place-items:center;font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);
  border:1px solid var(--line)}
.rank-1 .rank-n{background:var(--accent);color:var(--accent-ink);border-color:transparent}

/* table */
.tbl{width:100%}
.tbl-head{display:grid;align-items:center;padding:0 0 12px;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--line)}
.tbl-row{display:grid;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);
  transition:background .12s}
.tbl-row:hover{background:var(--hover)}
.tbl-row:last-child{border-bottom:0}

/* product card grid */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:1100px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.prod-grid{grid-template-columns:1fr}}
.prod{display:flex;flex-direction:column;gap:14px;padding:18px}
.prod-top{display:flex;align-items:flex-start;gap:13px}
.prod-thumb{width:46px;height:46px;border-radius:var(--r-chip);flex:0 0 46px;
  border:1px solid var(--line);background:var(--field);display:grid;place-items:center;
  color:var(--ink-3);overflow:hidden}
.lp-prod-name{font-size:var(--fs-body);font-weight:700;letter-spacing:-.01em}
.lp-prod-cat{font-size:var(--fs-sm);color:var(--ink-3);margin-top:3px;display:flex;
  align-items:center;gap:7px;font-weight:500}
.lp-prod-price{font-size:var(--fs-h2);font-weight:800;color:var(--accent);letter-spacing:-.02em}
.lp-prod-actions{display:flex;gap:8px;padding-top:14px;border-top:1px solid var(--line)}

/* empty state */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:60px 20px;text-align:center;color:var(--ink-3)}
.empty-ic{width:54px;height:54px;border-radius:var(--r-card);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-3)}

/* segmented toggle for view (grid/list) */
.viewtog{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden}
.viewtog button{appearance:none;border:0;background:var(--card);width:38px;height:36px;
  display:grid;place-items:center;color:var(--ink-3);cursor:pointer}
.viewtog button.active{background:var(--accent);color:var(--accent-ink)}

/* misc */
.flex{display:flex;align-items:center}
.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}
.spacer{flex:1}
.lp-muted{color:var(--ink-3)}
.section-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin:6px 0 2px}
.hint{font-size:var(--fs-sm);color:var(--ink-2);margin:0 0 4px;max-width:760px;line-height:1.5;font-weight:500}
.fade-in{}
@keyframes fade{from{opacity:1}to{opacity:1}}

/* ============================================================
   MODALS
   ============================================================ */
.lp-modal-scrim{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;
  justify-content:center;padding:48px 20px;overflow-y:auto;
  background:color-mix(in srgb,#06060a 52%,transparent);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  animation:scrimIn .16s ease}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
.lp-modal{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-lg);width:100%;display:flex;flex-direction:column;
  max-height:calc(100vh - 96px);margin:auto;animation:modalIn .19s cubic-bezier(.2,.7,.3,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.lp-modal-sm{max-width:440px}.lp-modal-md{max-width:580px}.lp-modal-lg{max-width:760px}.lp-modal-xl{max-width:940px}
.lp-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:22px 24px;border-bottom:1px solid var(--line);flex-shrink:0}
.lp-modal-head.no-border{border-bottom:0;padding-bottom:6px}
.lp-modal-eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin:0 0 7px}
.lp-modal-title{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.025em;margin:0;line-height:1.15}
.lp-modal-sub{font-size:var(--fs-sm);color:var(--ink-2);margin:6px 0 0;font-weight:500;line-height:1.5}
.lp-modal-close{appearance:none;border:1px solid var(--line);background:var(--card);
  width:34px;height:34px;border-radius:var(--r-ctl);display:grid;place-items:center;
  color:var(--ink-2);cursor:pointer;flex:0 0 34px;transition:background .14s,color .14s}
.lp-modal-close:hover{background:var(--hover);color:var(--ink)}
.lp-modal-body{padding:22px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}
.lp-modal-body::-webkit-scrollbar{width:8px}
.lp-modal-body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.lp-modal-foot{display:flex;align-items:center;gap:10px;justify-content:flex-end;
  padding:18px 24px;border-top:1px solid var(--line);flex-shrink:0;flex-wrap:wrap}
.lp-modal-foot.split{justify-content:space-between}

/* Event-Detail body: wide sales/dots panel + narrow actions sidebar (per design).
   Stacks to one column on narrow viewports. */
.ev-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--gap);margin-top:var(--gap)}
@media(max-width:900px){.ev-detail-grid{grid-template-columns:1fr}}

/* Preiszonen card rows (tiered events): dot · name/price-sold · revenue. */
.ev-pz-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line)}
.ev-pz-main{min-width:0;flex:1}
.ev-pz-name{font-weight:700;font-size:var(--fs-sm);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-pz-sub{font-size:var(--fs-xs);color:var(--ink-3);margin-top:1px;font-variant-numeric:tabular-nums}
.ev-pz-rev{font-weight:800;font-size:var(--fs-md);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ── Teilnehmer & Einlass (event check-in) — launcher button + modal ─────── */
/* Smaller, lighter close button than the shared 34px one (scoped to this modal). */
.modal .ev-att-modal .lp-modal-close{width:28px;height:28px;flex:0 0 28px;font-size:16px}
.ev-att-launch{justify-content:flex-start;gap:9px}
.ev-att-launch-count{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;
  font-size:var(--fs-xs);background:rgba(255,255,255,.18);border-radius:var(--r-pill);padding:2px 9px}
.ev-att-stat{border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px;background:var(--field)}
.ev-att-stat-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
.ev-att-stat-val{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-top:4px;
  font-variant-numeric:tabular-nums}
.ev-att-stat-val .pct{color:var(--ink-3);font-weight:700;font-size:var(--fs-md)}
.ev-att-bar{height:8px;border-radius:99px;background:var(--line-2);overflow:hidden;margin-top:13px}
.ev-att-bar-fill{height:100%;background:var(--success);border-radius:99px;transition:width .3s ease}
.ev-att-search-row{display:flex;gap:10px;align-items:center}
.ev-att-search{flex:1;min-width:0}
.ev-att-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 2px;border-top:1px solid var(--line)}
.ev-att-row:first-child{border-top:0}
.ev-att-id{min-width:0}
.ev-att-name{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-att-src{font-size:var(--fs-sm);color:var(--ink-3);margin-top:1px}
.ev-att-act{display:flex;align-items:center;gap:12px;flex-shrink:0}
.ev-att-when{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--success);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ev-att-open{color:var(--ink-3)}
.ev-att-foot-note{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-3);min-width:0}

/* Cancel-event confirm modal — ticket/refund summary. */
.ev-cancel-stat{border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden;margin-top:16px}
.ev-cancel-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 14px;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.ev-cancel-row:first-child{border-top:0}
.ev-cancel-row span{color:var(--ink-3)}
.ev-cancel-row strong{font-variant-numeric:tabular-nums;color:var(--ink)}
.ev-cancel-row.hl{background:var(--field)}
.ev-cancel-row.hl strong{font-size:var(--fs-md);font-weight:800}
.ev-cancel-warn{margin-top:12px;font-size:var(--fs-xs);line-height:1.5;color:#92500e;
  background:#FFFBEB;border:1px solid #F59E0B55;border-radius:8px;padding:9px 12px}
.theme-dark .ev-cancel-warn{color:#fbbf24;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35)}

/* modal form helpers */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mgrid .full{grid-column:1 / -1}
@media(max-width:560px){.mgrid{grid-template-columns:1fr}}
.mlabel{font-size:var(--fs-sm);color:var(--ink-2);font-weight:600;display:block;margin-bottom:7px}
.mhelp{font-size:var(--fs-xs);color:var(--ink-3);margin-top:6px;font-weight:500;line-height:1.45}
textarea.input{height:auto;padding:11px 14px;resize:vertical;line-height:1.5;min-height:84px}

/* swatch picker */
.swatches{display:flex;gap:9px;flex-wrap:wrap}
.swatch{width:30px;height:30px;border-radius:var(--r-chip);cursor:pointer;border:2px solid transparent;
  position:relative;transition:transform .1s}
.swatch:hover{transform:scale(1.08)}
.swatch.sel{border-color:var(--ink);box-shadow:0 0 0 2px var(--card) inset}

/* toggle pill (shared) */
.tgl{width:46px;height:27px;border-radius:999px;border:0;cursor:pointer;position:relative;
  flex:0 0 46px;background:var(--line-2);transition:background .16s}
.tgl.on{background:var(--accent)}
.tgl span{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;transition:left .16s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tgl.on span{left:22px}

/* line item rows inside modals */
.mrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.mrow:first-child{border-top:0}
.mrow-main{flex:1;min-width:0}
.mrow-t{font-weight:700;font-size:var(--fs-body)}
.mrow-s{font-size:var(--fs-sm);color:var(--ink-3);margin-top:2px;font-weight:500}

/* info / warning callout */
.callout{display:flex;gap:12px;padding:14px 15px;border-radius:var(--r-chip);
  border:1px solid var(--line-2);background:var(--field);font-size:var(--fs-sm);
  line-height:1.5;font-weight:500;color:var(--ink-2)}
.callout .callout-ic{flex:0 0 20px;color:var(--accent);margin-top:1px}
.callout.warn{border-color:color-mix(in srgb,#d9870e 45%,transparent);background:color-mix(in srgb,#d9870e 7%,transparent)}
.callout.warn .callout-ic{color:#b9770b}
.callout.danger{border-color:color-mix(in srgb,var(--danger) 40%,transparent);background:color-mix(in srgb,var(--danger) 6%,transparent)}
.callout.danger .callout-ic{color:var(--danger)}

/* radio/select cards */
.optcards{display:flex;flex-direction:column;gap:10px}
.optcard{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid var(--line-2);
  border-radius:var(--r-chip);cursor:pointer;transition:border-color .14s,background .14s}
.optcard:hover{background:var(--hover)}
.optcard.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.optcard-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);flex:0 0 20px;
  display:grid;place-items:center}
.optcard.sel .optcard-radio{border-color:var(--accent)}
.optcard.sel .optcard-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}

/* big number / summary */
.summ{display:flex;align-items:baseline;justify-content:space-between;padding:14px 0}
.summ-total{border-top:2px solid var(--line-2);margin-top:4px;padding-top:16px}
.summ-total .summ-v{font-size:24px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}

/* receipt */
.receipt{background:var(--field);border:1px solid var(--line);border-radius:var(--r-chip);
  padding:26px 24px;font-variant-numeric:tabular-nums}
.receipt-dash{border-top:1px dashed var(--line-2);margin:14px 0}

/* QR */
.qrbox{width:200px;height:200px;border-radius:var(--r-chip);border:1px solid var(--line);
  background:#fff;/* stays white in dark — QR codes need a white quiet zone */
  padding:14px;margin:0 auto}

/* avatar lg */
.lp-avatar-lg{width:64px;height:64px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-weight:700;font-size:24px;flex:0 0 64px}
.dir-raster .lp-avatar-lg{border-radius:var(--r-card)}

/* perm matrix */
.permrow{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;
  padding:12px 0;border-top:1px solid var(--line)}
.permrow:first-child{border-top:0}
.perm-h{font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;width:54px}

/* segmented inside modal */
.chk{width:22px;height:22px;border-radius:var(--r-chip);border:2px solid var(--line-2);
  display:grid;place-items:center;cursor:pointer;color:transparent;flex:0 0 22px}
.chk.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ============================================================
   TEST-PHASE BANNER
   ============================================================ */
/* Single-line bar: it reserves the fixed global-controls gutter (padding-right
   below), so it must NOT wrap — otherwise the reserved width squeezes the row at
   laptop widths (~1100–1400) and the "Tarif wählen" button drops to a second line,
   stranded with a gap before the cluster. nowrap + ellipsis keeps it one line. */
.testbar{display:flex;align-items:center;gap:14px;padding:11px 30px;
  border-bottom:1px solid var(--line);background:var(--card);flex-wrap:nowrap}
.testbar-badge{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;
  border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);
  font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;flex:0 0 auto}
.dir-raster .testbar-badge{border-radius:var(--r-chip)}
.testbar-txt{font-size:var(--fs-sm);font-weight:600;color:var(--ink);
  flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.testbar-txt b{font-weight:800}
.testbar-sub{font-size:var(--fs-sm);color:var(--ink-3);font-weight:500;
  flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Sub is decorative (the button already says "Tarif wählen"). Hide it before the
   reserved gutter squeezes the row, so the primary message + button stay inline. */
@media(max-width:1400px){.testbar-sub{display:none}}
@media(max-width:760px){.testbar{padding:10px 18px}}

/* addon group panel */
.addon-row .lp-row-ic{transition:background .15s,color .15s,border-color .15s}
.lp-app #section-addons .addon-row{display:flex;align-items:center;gap:14px;
  padding:14px 0;border-top:1px solid var(--line)}
.lp-app #section-addons .addon-row:first-child{border-top:0}
.lp-app #section-addons .addon-row .lp-row-t{flex-wrap:wrap}
.lp-app #section-addons .addon-row .tgl{margin-left:4px}
/* sticky cart bar */
.lp-app .lp-addons-cart{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);width:min(720px,calc(100% - 96px));z-index:1000;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 22px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:0 16px 48px color-mix(in srgb,#06060a 28%,transparent)}
.lp-app .lp-addons-cart-summary{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.lp-app .lp-addons-cart-actions{display:flex;align-items:center;gap:8px}

/* hover tooltip */
.tt-wrap{position:relative;display:inline-flex;align-items:center;cursor:help;outline:0}
.tt-dot{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
  color:var(--ink-3);background:var(--hover);transition:background .14s,color .14s}
.tt-wrap:hover .tt-dot,.tt-wrap:focus .tt-dot{background:var(--accent);color:var(--accent-ink)}
/* warning variant — amber triangle */
.tt-warn .tt-dot{background:transparent;color:#c9870b}
.tt-warn:hover .tt-dot,.tt-warn:focus .tt-dot{background:color-mix(in srgb,#d9870e 16%,transparent);color:#b9770b}
.tt-warn .tt-pop{background:#7a4d00}
.tt-warn .tt-pop::after{border-top-color:#7a4d00}
.tt-pop{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);
  width:300px;max-width:78vw;z-index:60;background:var(--ink);color:var(--card);
  font-size:12.5px;line-height:1.55;font-weight:500;letter-spacing:0;text-transform:none;
  padding:11px 13px;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s,transform .14s;white-space:normal}
.tt-pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--ink)}
.tt-wrap:hover .tt-pop,.tt-wrap:focus .tt-pop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* flip near right edge handled by max-width + viewport clamp */

/* ============================================================
   VENUE / RAUMPLAN EDITOR
   ============================================================ */
.ve-areas{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-card);padding:7px}.ve-areatab{height:38px;padding:0 18px;border:1px solid var(--line-2);background:var(--card);
  color:var(--ink-2);border-radius:var(--r-ctl);font:inherit;font-size:var(--fs-sm);font-weight:700;
  cursor:pointer;transition:all .14s}
.ve-areatab:hover{background:var(--hover)}
.ve-areatab.active{background:var(--ink);color:var(--card);border-color:var(--ink)}
.ve-areaadd{display:inline-flex;align-items:center;gap:6px;border-style:dashed;color:var(--ink-3);font-weight:600}

.ve-grid{display:grid;grid-template-columns:1fr 320px;gap:var(--gap);align-items:start}
@media(max-width:1040px){.ve-grid{grid-template-columns:1fr}}

.ve-stage-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.ve-toolbar{display:flex;gap:6px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:7px}
.ve-tool{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border:1px solid transparent;
  background:transparent;color:var(--ink-2);border-radius:var(--r-ctl);font:inherit;font-size:var(--fs-sm);
  font-weight:600;cursor:pointer;transition:all .13s;white-space:nowrap}
.ve-tool:hover{background:var(--hover);color:var(--ink)}
.ve-tool.active{background:var(--accent);color:var(--accent-ink)}
.ve-tool-danger:hover{color:var(--danger)}
.ve-tool-danger.active{background:var(--danger);color:#fff}

.ve-paintbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-sm)}
.ve-paintbar-l{color:var(--ink-2);font-weight:600}
.ve-zchip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);font:inherit;font-size:var(--fs-sm);
  font-weight:600;cursor:pointer}
.ve-zchip.active{border-color:var(--ink);color:var(--ink);background:var(--hover)}
.ve-zdot{width:11px;height:11px;border-radius:50%;flex:0 0 11px}

.ve-canvas{position:relative;height:540px;border:1px solid var(--line-2);border-radius:var(--r-card);
  background-color:var(--field);overflow:auto;
  background-image:radial-gradient(circle,var(--line-2) 1.1px,transparent 1.1px);
  background-size:22px 22px;background-position:11px 11px;min-width:0;user-select:none;touch-action:none}
.ve-canvas.ve-tool-table,.ve-canvas.ve-tool-chair,.ve-canvas.ve-tool-decor{cursor:crosshair}
.ve-canvas.ve-tool-delete{cursor:not-allowed}
.ve-canvas-hint{position:sticky;bottom:0;left:0;float:left;margin-top:506px;padding:5px 10px;font-size:var(--fs-xs);
  font-weight:600;color:var(--ink-3);background:color-mix(in srgb,var(--field) 86%,transparent);border-radius:0 var(--r-chip) 0 0;pointer-events:none}

.ve-node{position:absolute;cursor:grab}
.ve-node:active{cursor:grabbing}
.ve-sel{z-index:5}
.ve-sel>*{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent)!important}

.ve-chair{width:32px;height:32px;border-radius:9px 9px 7px 7px;border:1.6px solid;display:grid;place-items:center;
  font-size:10.5px;font-weight:800;letter-spacing:-.02em}
.ve-stool{width:28px;height:28px;border-radius:50%;border:1.6px solid;display:grid;place-items:center;
  font-size:9.5px;font-weight:800;color:var(--ink-2)}
.ve-table{position:relative;width:64px;height:64px;border-radius:50%;border:2px solid;display:grid;place-items:center}
.ve-table-lbl{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.ve-table-seats{position:absolute;bottom:11px;font-size:9px;font-weight:700;color:var(--ink-3)}
.ve-seatdot{position:absolute;width:10px;height:10px;border-radius:50%;border:1.6px solid;background:var(--card)}
.ve-decor{width:100%;height:100%;border-radius:7px;background:var(--hover-2);border:1px dashed var(--line-2);
  display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.04em}
.ve-stage{background:var(--ink);color:var(--card);border:0;letter-spacing:.22em;font-weight:800;font-size:13px}

/* right panel */
.ve-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;
  display:flex;flex-direction:column;gap:14px;position:sticky;top:8px}
.ve-panel-seg{width:100%}.ve-panel-seg .lp-seg-i{flex:1}
.ve-empty{text-align:center;padding:24px 8px;color:var(--ink-2)}
.ve-empty-ic{width:42px;height:42px;border-radius:var(--r-chip);background:var(--hover);display:grid;
  place-items:center;margin:0 auto 12px;color:var(--ink-3)}

.ve-insp{display:flex;flex-direction:column;gap:14px}
.ve-insp-head{display:flex;align-items:center;justify-content:space-between}
.ve-insp-type{font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ve-stepper{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-ctl);overflow:hidden;height:42px;width:fit-content}
.ve-stepper button{width:44px;height:100%;border:0;background:var(--card);color:var(--ink);font-size:20px;cursor:pointer;line-height:1}
.ve-stepper button:hover{background:var(--hover)}
.ve-stepper span{min-width:48px;text-align:center;font-weight:800;font-size:16px}
.ve-range{width:100%;accent-color:var(--accent)}

.ve-zone-picker{display:flex;flex-direction:column;gap:8px}
.ve-zopt{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line-2);
  border-radius:var(--r-chip);background:var(--card);cursor:pointer;font:inherit;transition:all .13s}
.ve-zopt:hover{background:var(--hover)}
.ve-zopt.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.ve-zopt-name{font-weight:700;font-size:var(--fs-sm);color:var(--ink)}
.ve-zopt-price{margin-left:auto;color:var(--ink-2);font-weight:700;font-size:var(--fs-sm)}

.ve-zonepanel{display:flex;flex-direction:column;gap:12px}
.ve-zonecard{border:1px solid var(--line);border-radius:var(--r-chip);padding:13px}
.ve-zonename{border:0;background:transparent;font:inherit;font-weight:800;font-size:var(--fs-body);color:var(--ink);outline:0;width:120px;border-bottom:1px solid transparent}
.ve-zonename:focus{border-bottom-color:var(--line-2)}
.ve-swatch{width:18px;height:18px;border-radius:50%;border:0;cursor:pointer;padding:0}
.ve-zoneprice{display:flex;align-items:center;gap:9px}
.ve-zoneprice label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}

.ve-rowpreview{display:flex;gap:7px;justify-content:center;align-items:flex-end;flex-wrap:wrap;
  padding:18px;background:var(--field);border:1px solid var(--line);border-radius:var(--r-chip)}

/* ---- reservations & events ---- */
.lp-status.info{color:#2f6df0} .lp-status.info .lp-dot{background:#2f6df0}
.rpill{display:inline-flex;align-items:center;gap:6px;height:25px;padding:0 11px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:700;white-space:nowrap}
.dir-raster .rpill{border-radius:var(--r-chip)}
.rpill.ok{color:var(--success);background:color-mix(in srgb,var(--success) 14%,transparent)}
.rpill.bad{color:var(--danger);background:color-mix(in srgb,var(--danger) 13%,transparent)}
.rpill.info{color:#2f6df0;background:color-mix(in srgb,#2f6df0 13%,transparent)}
.rpill.warn{color:#b9770b;background:color-mix(in srgb,#d9870e 16%,transparent)}
.rpill.lp-muted{color:var(--ink-3);background:var(--hover-2)}

.cap-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden;width:100%}
.cap-bar>span{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .3s}

.turn-tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:620px){.turn-tabs{grid-template-columns:1fr}}
.turn-tab{text-align:left;border:1px solid var(--line-2);background:var(--card);border-radius:var(--r-card);
  padding:15px 17px;cursor:pointer;font:inherit;transition:all .14s;display:flex;flex-direction:column;gap:11px}
.turn-tab:hover{background:var(--hover)}
.turn-tab.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.turn-tab-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.turn-tab-name{font-weight:800;font-size:16px;letter-spacing:-.01em}
.turn-tab-time{font-weight:800;font-family:var(--mono,monospace)}
.turn-tab-cap{display:flex;justify-content:space-between;font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);margin-bottom:5px;white-space:nowrap}

.res-grid{display:grid;grid-template-columns:1fr 280px;gap:var(--gap);align-items:start}
@media(max-width:1100px){.res-grid{grid-template-columns:1fr}}
.miniplan{background:var(--field);border:1px solid var(--line);border-radius:var(--r-chip);padding:14px;
  position:relative;height:220px;background-image:radial-gradient(circle,var(--line-2) 1px,transparent 1px);
  background-size:18px 18px}
.miniplan-stage{position:absolute;left:14%;right:14%;top:12px;height:22px;background:var(--ink);color:var(--card);
  border-radius:5px;display:grid;place-items:center;font-size:9px;font-weight:800;letter-spacing:.18em}

/* events */
.ev-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--gap)}
.ev-card{border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);overflow:hidden;
  cursor:pointer;transition:border-color .15s,box-shadow .15s;display:flex;flex-direction:column}
.ev-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm,0 4px 14px rgba(0,0,0,.05))}
.ev-poster{height:128px;position:relative;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,var(--hover),var(--hover) 11px,var(--hover-2) 11px,var(--hover-2) 22px)}
.ev-poster-tag{font-family:var(--mono,monospace);font-size:10px;font-weight:700;letter-spacing:.12em;
  color:var(--ink-3);text-transform:uppercase}
.ev-poster .rpill{position:absolute;top:11px;right:11px}
.ev-body{padding:15px 16px;display:flex;flex-direction:column;gap:11px;flex:1}
.ev-title{font-weight:800;font-size:var(--fs-body);letter-spacing:-.01em}
.ev-series{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;color:var(--accent)}

.evmap-zone{margin-bottom:14px}.evmap-seats{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.evseat{width:12px;height:12px;border-radius:3px;border:1.5px solid}

/* venue picker */
.vp{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.vp-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}
.vp-control{position:relative}
.vp-trigger{display:flex;align-items:center;gap:11px;min-width:300px;height:52px;padding:0 12px;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-card);cursor:pointer;
  font:inherit;text-align:left;transition:border-color .14s,box-shadow .14s}
.vp-trigger:hover{border-color:var(--ink-3)}
.vp-trigger.open{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.vp-ic{width:36px;height:36px;flex:0 0 36px;border-radius:var(--r-chip);background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.vp-ic-sm{width:32px;height:32px;flex:0 0 32px;border-radius:9px;background:var(--hover);color:var(--ink-2);display:grid;place-items:center}
.vp-trigger-main{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px}
.vp-name{font-weight:800;font-size:var(--fs-body);letter-spacing:-.01em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-meta{font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);white-space:nowrap}
.vp-chev{color:var(--ink-3);flex:0 0 auto}
.vp-rename{width:300px;height:52px;padding:0 14px;border:1px solid var(--accent);box-shadow:0 0 0 1px var(--accent);
  border-radius:var(--r-card);background:var(--card);color:var(--ink);font:inherit;font-size:var(--fs-body);font-weight:800;outline:0}

.vp-menu{position:absolute;top:60px;left:0;z-index:40;width:300px;background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r-card);box-shadow:var(--shadow-lg,0 16px 40px rgba(0,0,0,.16));
  padding:7px;opacity:1;animation:vp-pop .12s ease}
@keyframes vp-pop{from{transform:translateY(-5px)}to{transform:none}}
.vp-menu-h{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:8px 10px 6px}
.vp-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;background:transparent;
  border-radius:var(--r-chip);cursor:pointer;font:inherit;text-align:left;color:var(--ink)}
.vp-item:hover,.vp-item.active{background:var(--hover)}
.vp-item-main{display:flex;flex-direction:column;min-width:0;flex:1}
.vp-item-name{font-weight:700;font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-menu-foot{margin-top:6px;padding-top:7px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:1px}
.vp-mi{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;background:transparent;
  border-radius:var(--r-chip);cursor:pointer;font:inherit;font-weight:600;font-size:var(--fs-sm);color:var(--ink-2);text-align:left;white-space:nowrap}
.vp-mi:hover{background:var(--hover);color:var(--ink)}
.vp-mi svg{color:var(--ink-3);flex:0 0 auto}
.vp-create{color:var(--accent);font-weight:700}
.vp-create:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent)}
.vp-create svg{color:var(--accent)}
.vp-del{color:var(--danger)}
.vp-del:hover{background:color-mix(in srgb,var(--danger) 8%,transparent);color:var(--danger)}
.vp-del svg{color:var(--danger)}

/* event hosting-mode strip */
.mode-strip{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:13px 16px;box-shadow:var(--shadow)}
.mode-strip-ic{width:40px;height:40px;border-radius:var(--r-chip);flex:0 0 40px;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink)}
.mode-strip-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.mode-strip-name{font-weight:800;font-size:var(--fs-body);letter-spacing:-.01em;margin-top:2px}

/* bezahlmodal (payment widget) */
.pay-grid{display:grid;grid-template-columns:1fr 340px;gap:var(--gap);align-items:start}
@media(max-width:1080px){.pay-grid{grid-template-columns:1fr}}
.code-block{margin:0;background:#0e0e16;color:#e7e7f0;border-radius:var(--r-chip);padding:16px 18px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.6;overflow-x:auto;
  white-space:pre;border:1px solid rgba(255,255,255,.08)}
.code-block code{font-family:inherit}

.pm-preview{border:1px solid var(--line-2);border-radius:var(--r-card);overflow:hidden;background:var(--bg)}
.pm-preview-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--hover);border-bottom:1px solid var(--line)}
.pm-preview-bar>span{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.pm-preview-url{margin-left:10px;font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-preview-body{padding:18px}
.pm-powered{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:13px;
  font-size:var(--fs-xs);font-weight:600;color:var(--ink-3)}

/* embedded checkout modal */
.ck{position:relative}
.ck-close{position:absolute;top:14px;right:14px;z-index:2}
.ck-head{padding:30px 26px 22px;text-align:center;border-bottom:1px solid var(--line);background:var(--hover)}
.ck-merch{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}
.ck-amount{font-size:34px;font-weight:800;letter-spacing:-.03em;margin-top:8px}
.ck-item{font-size:var(--fs-sm);color:var(--ink-3);margin-top:4px;font-weight:500}
.ck-form{padding:22px 26px 24px;display:flex;flex-direction:column;gap:14px}
.ck-cardrow{position:relative}
.ck-marks{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;gap:5px}
.ck-success{padding:40px 28px;text-align:center;display:flex;flex-direction:column;align-items:center}
.ck-check{width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,var(--success) 14%,transparent);
  color:var(--success);display:grid;place-items:center;margin-bottom:16px}

/* mobile sidebar */
.scrim{display:none}
@media(max-width:900px){
  .lp-side{position:fixed;left:0;top:0;transform:translateX(-100%)}
  .lp-side.mobile-open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .scrim.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:25}
  .lp-topbar{padding:18px 18px 14px}.lp-content{padding:6px 18px 40px}
}

/* ============================================================
   ÜBERSICHT (overview) — Raster redesign content.
   The overview section lives inside legacy .main-content (padding:32px 40px,
   overflow-y:auto). The redesigned .lp-topbar / .lp-content carry their own
   edge padding and the topbar is sticky, so we cancel the wrapper's padding
   for this section only and let the topbar pin to the scroll container top.
   ============================================================ */
.lp-app .main-content:has(> #section-overview:not(.hidden)){padding:0}
/* fallback for browsers without :has — neutralize wrapper padding via negative
   margins on the overview section so the topbar/content reach the edges */
.lp-app #section-overview{margin:-32px -40px}
.lp-app .main-content:has(> #section-overview:not(.hidden)) #section-overview{margin:0}
/* sticky topbar pins against the scrolling .main-content */
.lp-app #section-overview .lp-topbar{position:sticky;top:0;z-index:20}

/* Addons: same full-bleed treatment as overview — cancel the wrapper's 32/40
   padding so content sits at the standard 30px section gutter (not 40+30=70). */
.lp-app .main-content:has(> #section-addons:not(.hidden)){padding:0}
.lp-app #section-addons{margin:-32px -40px}
.lp-app .main-content:has(> #section-addons:not(.hidden)) #section-addons{margin:0}
.lp-app #section-addons .lp-topbar{position:sticky;top:0;z-index:20}
/* Trial banner is full-bleed at the very top; reserve the global-controls
   footprint (right:30 + cluster width) + gap so its "Tarif wählen" button and
   subtitle never sit under the fixed cluster. Larger than .lp-reserve-r because
   the banner reaches the viewport edge (no 40px wrapper padding). */
.lp-app .main-content .testbar{padding-right:420px}
@media(max-width:1100px){.lp-app .main-content .testbar{padding-right:180px}}
@media(max-width:760px){.lp-app .main-content .testbar{padding-right:132px}}
/* empty-state note sits flush inside the redesigned card */
.lp-app #section-overview .widget-note{color:var(--ink-3);font-size:var(--fs-sm);padding:6px 0}
/* topbar avatar carries the legacy id #topbar-avatar (App._setAvatarImage may
   inject an <img>); keep it clickable and let the image fill the circle */
.lp-app #topbar-avatar{cursor:pointer;overflow:hidden}
.lp-app #topbar-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
@media(max-width:900px){
  .lp-app #section-overview{margin:-24px -18px}
  .lp-app .main-content:has(> #section-overview:not(.hidden)) #section-overview{margin:0}
}

/* ============================================================
   TRANSAKTIONEN — Raster redesign content.
   Same wrapper-padding cancel + sticky topbar as Übersicht.
   ============================================================ */
.lp-app .main-content:has(> #section-transactions:not(.hidden)){padding:0}
.lp-app #section-transactions{margin:-32px -40px}
.lp-app .main-content:has(> #section-transactions:not(.hidden)) #section-transactions{margin:0}
.lp-app #section-transactions .lp-topbar{position:sticky;top:0;z-index:20}

/* DATEV export grid (Von / Bis / button) */
.lp-app #section-transactions .tx-datev-grid{display:grid;
  grid-template-columns:1fr 1fr auto;gap:16px;align-items:end}
.lp-app #section-transactions .tx-datev-btn{height:42px}
.lp-app #section-transactions .tx-datev-status{font-size:var(--fs-sm);
  margin-top:10px;min-height:18px;font-weight:500}

/* filter toolbar */
.lp-app #section-transactions .lp-tx-toolbar{display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;justify-content:flex-start;margin-bottom:20px}
.lp-app #section-transactions .lp-tx-toolbar-sep{width:1px;height:24px;
  background:var(--line);margin:0 4px}
.lp-app #section-transactions .tx-search{min-width:200px}
/* active status filter uses the outlined (not filled) chip look from the design */
.lp-app #section-transactions .lp-tx-toolbar .chip.active{background:transparent;
  color:var(--accent);border-color:var(--accent)}

/* table column template: Bestellung / Status / Betrag */
.lp-app #section-transactions .tx-tbl-cols{grid-template-columns:1.6fr .8fr .9fr}
.lp-app #section-transactions .tbl-row{cursor:pointer}

@media(max-width:900px){
  .lp-app #section-transactions{margin:-24px -18px}
  .lp-app .main-content:has(> #section-transactions:not(.hidden)) #section-transactions{margin:0}
  .lp-app #section-transactions .tx-datev-grid{grid-template-columns:1fr 1fr}
  .lp-app #section-transactions .tx-datev-btn{grid-column:1 / -1}
}

/* ════════════════════════════════════════════════════════════
   KATALOG — Produkte / Kategorien / Modifikatoren (Raster)
   Scoped under .lp-app so legacy globals never bleed in.
   ════════════════════════════════════════════════════════════ */

/* wrapper-padding cancel + sticky topbar (same as Übersicht/Transaktionen) */
.lp-app .main-content:has(> #section-products:not(.hidden)),
.lp-app .main-content:has(> #section-categories:not(.hidden)),
.lp-app .main-content:has(> #section-modifiers:not(.hidden)){padding:0}
.lp-app #section-products,
.lp-app #section-categories,
.lp-app #section-modifiers{margin:-32px -40px}
.lp-app .main-content:has(> #section-products:not(.hidden)) #section-products,
.lp-app .main-content:has(> #section-categories:not(.hidden)) #section-categories,
.lp-app .main-content:has(> #section-modifiers:not(.hidden)) #section-modifiers{margin:0}
.lp-app #section-products .lp-topbar,
.lp-app #section-categories .lp-topbar,
.lp-app #section-modifiers .lp-topbar{position:sticky;top:0;z-index:20}
@media(max-width:900px){
  .lp-app #section-products,
  .lp-app #section-categories,
  .lp-app #section-modifiers{margin:-24px -18px}
  .lp-app .main-content:has(> #section-products:not(.hidden)) #section-products,
  .lp-app .main-content:has(> #section-categories:not(.hidden)) #section-categories,
  .lp-app .main-content:has(> #section-modifiers:not(.hidden)) #section-modifiers{margin:0}
}

/* product thumbnail image fills the tile */
.lp-app #section-products .prod-thumb img,
.lp-app #section-modifiers .prod-thumb img,
.lp-app .prodcat-thumb img{width:100%;height:100%;object-fit:cover}

/* product flags (Favorit / 86'd) shown inline after the category */
.lp-app .lp-prod-flags{display:inline-flex;gap:6px;margin-left:4px}
.lp-app .lp-prod-flag{font-size:var(--fs-xs);font-weight:700;line-height:1;
  padding:3px 7px;border-radius:var(--r-pill);letter-spacing:.01em}
.lp-app .lp-prod-flag.fav{color:#b9770b;background:color-mix(in srgb,#d9870e 14%,transparent)}
.lp-app .lp-prod-flag.sold{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}

/* category cards */
.lp-app .cat-card{display:flex;flex-direction:column;gap:18px}
.lp-app .cat-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lp-app .cat-card-name{font-weight:700;font-size:var(--fs-h2);letter-spacing:-.015em}
.lp-app .cat-card-count{font-size:12px}

/* modifier group cards */
.lp-app .modgrp-card{display:flex;flex-direction:column;gap:16px}
.lp-app .modgrp-head{display:flex;flex-direction:column;gap:7px}
.lp-app .modgrp-name{font-weight:700;font-size:var(--fs-h2);letter-spacing:-.015em}
.lp-app .modgrp-opts{display:flex;flex-direction:column;gap:0}
.lp-app .modgrp-opt{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.lp-app .modgrp-opt:first-child{border-top:0}
.lp-app .modgrp-opt-name{font-weight:500}

/* products list (by-category) view — card-wrapped tables */
.lp-app #products-list-by-category{display:flex;flex-direction:column;gap:var(--gap)}
.lp-app .prodcat-head{margin-bottom:6px}
.lp-app .prodcat-thumb{width:36px;height:36px;flex:0 0 36px;border-radius:var(--r-chip)}
.lp-app .prodcat-tbl{width:100%;border-collapse:collapse}
.lp-app .prodcat-tbl thead th{text-align:left;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  padding:0 0 12px;border-bottom:1px solid var(--line)}
.lp-app .prodcat-tbl thead th:nth-child(2){text-align:right}
.lp-app .prodcat-tbl tbody td{padding:13px 0;border-top:1px solid var(--line);
  font-size:var(--fs-body);vertical-align:middle}
.lp-app .prodcat-tbl tbody tr:first-child td{border-top:0}
.lp-app .prodcat-tbl td.lp-prod-price{text-align:right}
.lp-app .prodcat-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}

/* ── catalog modals (reuse legacy .modal/.active shell) ── */
.lp-app .lp-modal-card,
.modal .lp-modal-card{padding:0;max-width:520px;border-radius:var(--r-card);
  display:flex;flex-direction:column;max-height:90vh}
.modal .lp-modal-card-lg{max-width:680px}
.modal .lp-modal-card .lp-modal-head{padding:24px 24px 18px}
.modal .lp-modal-card .lp-modal-body{padding:22px 24px;gap:18px}
.modal .lp-modal-close{appearance:none;border:1px solid var(--line);background:var(--card);
  width:34px;height:34px;border-radius:var(--r-chip);display:grid;place-items:center;
  color:var(--ink-3);cursor:pointer;font-size:20px;line-height:1;flex:0 0 34px}
.modal .lp-modal-close:hover{background:var(--hover);color:var(--ink)}

/* field that spans full width inside a modal body */
.lp-app .lp-field-full,.modal .lp-field-full{display:block}

/* footer placed inside a form (not a separate flex child) */
.modal .lp-modal-foot-in{border-top:1px solid var(--line);padding-top:18px;margin-top:4px}

/* toggle-style row inside modals (Favorit, Pflichtauswahl …) */
.modal .lp-modrow{display:flex;align-items:center;justify-content:space-between;gap:16px}
.modal .lp-modrow-sep{border-top:1px solid var(--line);padding-top:16px}

/* checkbox styled as the design's check pill */
.modal .lp-chkbox{position:relative;display:inline-flex;cursor:pointer}
.modal .lp-chkbox input{position:absolute;opacity:0;width:0;height:0}
.modal .lp-chkbox span{width:24px;height:24px;border-radius:var(--r-chip);
  border:2px solid var(--line-2);background:var(--card);display:grid;place-items:center;
  transition:.15s}
.modal .lp-chkbox input:checked + span{background:var(--accent);border-color:var(--accent)}
.modal .lp-chkbox input:checked + span::after{content:"";width:11px;height:6px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
  margin-top:-2px}

/* sub-form (add variant / add modifier) */
.modal .lp-subform{display:flex;flex-direction:column;gap:14px;
  border-top:1px solid var(--line);padding-top:18px;margin-top:4px}

/* row list (existing variants / modifiers) */
.modal .lp-rowlist{display:flex;flex-direction:column;gap:0}
.modal .lp-rowitem{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-top:1px solid var(--line)}
.modal .lp-rowlist .lp-rowitem:first-child{border-top:0}
.modal .lp-rowitem-name{font-weight:600;flex:1;min-width:0}
.modal .lp-rowitem-price{font-weight:600}
.modal .lp-rowitem-del{flex:0 0 auto;color:var(--ink-3)}
.modal .lp-rowitem-del:hover{color:var(--danger)}

/* product image upload row inside the modal */
.modal .lp-prod-imgrow{display:flex;align-items:center;gap:12px}

/* ════════════════════════════════════════════════════════════
   TEAM — Teammitglieder / Einladungen / Rollen & Berechtigungen
   Scoped under .lp-app so legacy globals never bleed in.
   ════════════════════════════════════════════════════════════ */

/* wrapper-padding cancel + sticky topbar (same as Katalog) */
.lp-app .main-content:has(> #section-staff:not(.hidden)){padding:0}
.lp-app #section-staff{margin:-32px -40px}
.lp-app .main-content:has(> #section-staff:not(.hidden)) #section-staff{margin:0}
.lp-app #section-staff .lp-topbar{position:sticky;top:0;z-index:20}
@media(max-width:900px){
  .lp-app #section-staff{margin:-24px -18px}
  .lp-app .main-content:has(> #section-staff:not(.hidden)) #section-staff{margin:0}
}

/* small avatar used in member/invite rows */
.lp-app #section-staff .lp-avatar-sm{width:34px;height:34px;flex:0 0 34px;font-size:13px}

/* table column template: Name / E-Mail / Rolle / Status / Aktionen */
.lp-app #section-staff .lp-team-tbl .tbl-head,
.lp-app #section-staff .lp-team-tbl .tbl-row{
  grid-template-columns:1.3fr 1.8fr .9fr .8fr auto;gap:14px}
.lp-app #section-staff .lp-tar{text-align:right}

.lp-app #section-staff .lp-team-name{display:flex;align-items:center;gap:12px;min-width:0}
.lp-app #section-staff .lp-team-nm{font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-app #section-staff .lp-team-email{font-size:13px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.lp-app #section-staff .lp-team-actions{display:flex;gap:8px;justify-content:flex-end}
.lp-app #section-staff .lp-team-inactive{opacity:.55}
.lp-app #section-staff .lp-team-empty{justify-content:center;text-align:center;
  display:block;padding:26px 0}

/* role chip — outlined accent look (non-interactive) */
.lp-app .lp-team-rolechip{height:27px;pointer-events:none;color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 35%,transparent)}

/* ── Rollen & Berechtigungen modal ── */
.modal .lp-perm-grid{display:flex;flex-direction:column;gap:0}
.modal .lp-perm-toggle{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:13px 0;border-top:1px solid var(--line);cursor:pointer}
.modal .lp-perm-grid .lp-perm-toggle:first-child{border-top:0}
.modal .lp-perm-name{font-weight:600}

.modal .lp-team-rolelist{display:flex;flex-direction:column}
.modal .lp-team-rolerow{padding:13px 0}
.modal .lp-team-permwrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.modal .lp-team-permchip{height:25px;font-size:var(--fs-xs);pointer-events:none;
  color:var(--ink-2)}
.modal .lp-team-roleform{border-top:1px solid var(--line);padding-top:18px;
  margin-top:4px;display:flex;flex-direction:column;gap:16px}

/* inline modal error text */
.modal .lp-modal-error{color:var(--danger);font-size:var(--fs-sm);
  font-weight:500;margin:0;min-height:0}
.modal .lp-modal-error:empty{display:none}

/* ════════════════════════════════════════════════════════════
   Gebühren (#section-fees) — Raster restyle
   ════════════════════════════════════════════════════════════ */
.lp-app #section-fees .lp-fee-stats{display:grid;
  grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:880px){.lp-app #section-fees .lp-fee-stats{grid-template-columns:1fr}}
.lp-app #section-fees .lp-fee-stats .kpi-val{font-size:var(--fs-h1)}

/* fee-invoice table: Rechnungsnr / Zeitraum / LEVIAPAY / Stripe / Download */
.lp-app #section-fees .lp-fee-tbl .tbl-head,
.lp-app #section-fees .lp-fee-tbl .tbl-row{
  grid-template-columns:1.2fr 1.2fr 1fr 1fr auto;gap:14px}
.lp-app #section-fees .lp-fee-num{font-weight:700;letter-spacing:-.01em}
.lp-app #section-fees .lp-fee-dl{display:flex;justify-content:flex-end}
.lp-app #section-fees .lp-fee-dl svg{margin-right:5px;vertical-align:-2px}

/* ════════════════════════════════════════════════════════════
   Zahlungslinks (#section-payment-links) — Raster restyle
   ════════════════════════════════════════════════════════════ */
.lp-app #section-payment-links .lp-pl-form{display:flex;gap:14px;
  flex-wrap:wrap;align-items:flex-end}
.lp-app #section-payment-links .lp-field{flex:1;min-width:150px;display:block}
.lp-app #section-payment-links .lp-pl-form-desc{flex:2;min-width:220px}
.lp-app #section-payment-links .lp-pl-create{height:42px;white-space:nowrap}
.lp-app #section-payment-links #pl-error{color:var(--danger);
  font-size:var(--fs-sm);font-weight:500;margin:12px 0 0}

/* payment-link table: Beschreibung / Betrag / Datum / Status / Aktionen */
.lp-app #section-payment-links .lp-link-tbl .tbl-head,
.lp-app #section-payment-links .lp-link-tbl .tbl-row{
  grid-template-columns:1.8fr .9fr .9fr 1fr auto;gap:14px}
.lp-app #section-payment-links .lp-link-desc{display:flex;align-items:center;
  gap:12px;min-width:0}
.lp-app #section-payment-links .lp-link-ic{width:36px;height:36px;flex:0 0 36px;
  color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.lp-app #section-payment-links .lp-link-nm{font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-app #section-payment-links .lp-link-actions{display:flex;gap:8px;
  justify-content:flex-end}

/* shared empty-row for the Raster fee/link tables */
.lp-app #section-fees .lp-tbl-empty,
.lp-app #section-payment-links .lp-tbl-empty{display:block;justify-content:center;
  text-align:center;padding:26px 0}

/* ════════════════════════════════════════════════════════════
   SCHICHTEN (#section-shifts) — Raster restyle
   ════════════════════════════════════════════════════════════ */
.lp-app .main-content:has(> #section-shifts:not(.hidden)){padding:0}
.lp-app #section-shifts{margin:-32px -40px}
.lp-app .main-content:has(> #section-shifts:not(.hidden)) #section-shifts{margin:0}
.lp-app #section-shifts .lp-topbar{position:sticky;top:0;z-index:20}

/* week-nav + publish toolbar */
.lp-app #section-shifts .lp-shifts-toolbar{display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between;margin-bottom:20px}
.lp-app #section-shifts .lp-shifts-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lp-app #section-shifts .lp-shifts-kw{font-weight:700;font-size:var(--fs-sm);
  letter-spacing:.04em;padding:0 12px;height:32px;display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-chip);background:var(--card)}
.lp-app #section-shifts .lp-shifts-range{color:var(--ink-3);font-size:var(--fs-sm);font-weight:500}

/* grid wrapper scrolls horizontally on small screens */
.lp-app #section-shifts .lp-shifts-card{overflow-x:auto}
.lp-app #section-shifts .lp-shifts-grid{display:grid;
  grid-template-columns:repeat(7,minmax(110px,1fr));gap:10px;min-width:820px}
.lp-app #section-shifts .lp-shift-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.lp-app #section-shifts .lp-shift-col-head{display:flex;align-items:baseline;
  justify-content:space-between;gap:6px;padding:0 4px 10px;
  border-bottom:1px solid var(--line);margin-bottom:2px}
.lp-app #section-shifts .lp-shift-day-name{font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.lp-app #section-shifts .lp-shift-col.today .lp-shift-day-name{color:var(--accent)}
.lp-app #section-shifts .lp-shift-day-date{font-size:12px;color:var(--ink-3);font-weight:600}

/* shift cell */
.lp-app #section-shifts .lp-shift-cell{border:1px solid var(--line);
  border-left:3px solid var(--ink-3);border-radius:var(--r-chip);background:var(--card);
  padding:9px 10px;cursor:pointer;display:flex;flex-direction:column;gap:3px;
  position:relative;transition:background .12s,border-color .12s}
.lp-app #section-shifts .lp-shift-cell:hover{background:var(--hover);border-color:var(--line-2)}
.lp-app #section-shifts .lp-shift-cell.draft{border-style:dashed;background:var(--hover-2)}
.lp-app #section-shifts .lp-shift-cell-type{font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.lp-app #section-shifts .lp-shift-cell-name{font-weight:700;font-size:13px;
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-app #section-shifts .lp-shift-unassigned{color:var(--ink-3);font-weight:500;font-style:italic}
.lp-app #section-shifts .lp-shift-cell-time{font-size:12.5px;font-weight:600;color:var(--accent)}
.lp-app #section-shifts .lp-shift-cell-bar{font-size:11.5px;color:var(--ink-3)}
.lp-app #section-shifts .lp-shift-draft-badge{align-self:flex-start;margin-top:2px;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:2px 7px;
  border-radius:var(--r-pill);color:#b9770b;background:color-mix(in srgb,#d9870e 14%,transparent)}

@media(max-width:900px){
  .lp-app #section-shifts{margin:-24px -18px}
  .lp-app .main-content:has(> #section-shifts:not(.hidden)) #section-shifts{margin:0}
}

/* ── shift modals (reuse legacy .modal/.active shell) ── */
.modal .lp-time-inputs{display:flex;align-items:center;gap:8px}
.modal .lp-time-input{width:72px;text-align:center}
.modal .lp-time-inputs span{color:var(--ink-3);font-weight:700}
.modal .lp-mt8{margin-top:10px}
.modal .lp-inline-select{width:auto;min-width:170px}
/* checkbox row (label + check pill; pill itself styled by catalog .lp-chkbox rules) */
.modal .lp-chkbox-row{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-weight:600;font-size:var(--fs-body)}

/* shift detail rows */
.modal .lp-shift-detail-list{display:flex;flex-direction:column}
.modal .lp-shift-detail-row{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.modal .lp-shift-detail-row:first-child{border-top:0}
.modal .lp-shift-detail-l{color:var(--ink-3);font-weight:600;font-size:var(--fs-sm)}
.modal .lp-shift-detail-v{font-weight:700;text-align:right;min-width:0}
.modal .lp-shift-pending{display:block}
.modal .lp-shift-pending-text{margin:0 0 10px;font-weight:600}
.modal .lp-shift-pending-actions{display:flex;gap:8px}
.modal .lp-shift-assign{display:flex;gap:8px;align-items:center}
.modal .lp-shift-assign .input{flex:1}

/* shift template list rows */
.modal .lp-shift-tmpl-row{display:flex;align-items:center;gap:12px;
  padding:13px 0;border-top:1px solid var(--line)}
.modal .lp-shift-tmpl-row:first-child{border-top:0}
.modal .lp-shift-tmpl-info{flex:1;min-width:0}
.modal .lp-shift-tmpl-name{font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.modal .lp-shift-tmpl-meta{font-size:var(--fs-sm);color:var(--ink-3);margin-top:3px}
.modal .lp-shift-tmpl-actions{display:flex;gap:8px;flex-shrink:0}
.modal .lp-shift-empty{text-align:center;color:var(--ink-3);padding:26px 0;font-size:var(--fs-sm)}

/* shift settings rows */
.modal .lp-settings-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.modal .lp-settings-row .input{flex:1}
.modal .lp-color-input{flex:0 0 44px;width:44px;height:42px;padding:4px;
  border:1px solid var(--line);border-radius:var(--r-chip);background:var(--card);cursor:pointer}

/* ════════════════════════════════════════════════════════════
   ANWESENHEIT (#section-attendance) — Raster restyle
   ════════════════════════════════════════════════════════════ */
.lp-app .main-content:has(> #section-attendance:not(.hidden)){padding:0}
.lp-app #section-attendance{margin:-32px -40px}
.lp-app .main-content:has(> #section-attendance:not(.hidden)) #section-attendance{margin:0}
.lp-app #section-attendance .lp-topbar{position:sticky;top:0;z-index:20}

/* legally-required disclaimer keeps full prominence */
.lp-app #section-attendance .lp-att-disclaimer{line-height:1.55}

.lp-app #section-attendance .lp-att-filter{display:flex;gap:10px;margin-bottom:4px}
.lp-app #section-attendance .lp-att-range{width:auto;min-width:140px}

/* clock-entry table */
.lp-app #section-attendance .lp-att-tbl .tbl-head,
.lp-app #section-attendance .lp-att-tbl .tbl-row{
  grid-template-columns:1.3fr .9fr .7fr .7fr .7fr .8fr 1fr}
.lp-app #section-attendance .lp-att-who{display:flex;align-items:center;gap:12px;min-width:0}
.lp-app #section-attendance .lp-avatar-sm{width:30px;height:30px;flex:0 0 30px;font-size:12px}
.lp-app #section-attendance .lp-att-nm{font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-app #section-attendance .lp-att-hours{font-weight:700}
.lp-app #section-attendance .lp-att-empty{display:block;text-align:center;
  color:var(--ink-3);padding:26px 0}

/* QR modal */
.modal .lp-att-qr-body{align-items:center;text-align:center}
.modal .lp-att-qr-canvas{display:block;margin:8px auto;max-width:100%}
.modal .lp-att-qr-foot{width:100%}

@media(max-width:900px){
  .lp-app #section-attendance{margin:-24px -18px}
  .lp-app .main-content:has(> #section-attendance:not(.hidden)) #section-attendance{margin:0}
  .lp-app #section-attendance .lp-att-tbl .tbl-head,
  .lp-app #section-attendance .lp-att-tbl .tbl-row{
    grid-template-columns:1.2fr .8fr .6fr .6fr .6fr .7fr}
  .lp-app #section-attendance .lp-att-tbl .tbl-head>div:last-child,
  .lp-app #section-attendance .lp-att-tbl .tbl-row>div:last-child{display:none}
}

/* ════════════════════════════════════════════════════════════
   BUCHUNGSKALENDER (#section-bookings) — Raster restyle
   ════════════════════════════════════════════════════════════ */
.lp-app .main-content:has(> #section-bookings:not(.hidden)){padding:0}
.lp-app #section-bookings{margin:-32px -40px}
.lp-app .main-content:has(> #section-bookings:not(.hidden)) #section-bookings{margin:0}
.lp-app #section-bookings .lp-topbar{position:sticky;top:0;z-index:20}

/* date nav + count toolbar */
.lp-app #section-bookings .lp-bk-toolbar{display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between;margin-bottom:20px}
.lp-app #section-bookings .lp-bk-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lp-app #section-bookings .lp-bk-date{font-weight:700;font-size:var(--fs-sm);
  letter-spacing:-.01em;padding:0 4px;color:var(--ink)}
.lp-app #section-bookings .lp-bk-badge{font-size:var(--fs-sm);color:var(--ink-3);font-weight:500}
.lp-app #section-bookings .lp-bk-badge strong{color:var(--ink);font-weight:700}

/* booking rows */
.lp-app #section-bookings .lp-bk-container{display:flex;flex-direction:column}
.lp-app #section-bookings .lp-bk-row{display:flex;align-items:center;gap:16px;
  padding:15px 0;border-top:1px solid var(--line)}
.lp-app #section-bookings .lp-bk-row:first-child{border-top:0}
.lp-app #section-bookings .lp-bk-time{flex:0 0 130px;font-weight:700;
  font-size:var(--fs-sm);color:var(--accent);letter-spacing:-.01em}
.lp-app #section-bookings .lp-bk-main{flex:1;min-width:0}
.lp-app #section-bookings .lp-bk-who{font-weight:700;font-size:var(--fs-body);
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-app #section-bookings .lp-bk-sub{font-size:var(--fs-sm);color:var(--ink-3);
  margin-top:3px;font-weight:500}
.lp-app #section-bookings .lp-bk-phone{flex:0 0 auto;font-size:var(--fs-sm);
  color:var(--ink-3);font-weight:500;white-space:nowrap}

@media(max-width:900px){
  .lp-app #section-bookings{margin:-24px -18px}
  .lp-app .main-content:has(> #section-bookings:not(.hidden)) #section-bookings{margin:0}
  .lp-app #section-bookings .lp-bk-time{flex-basis:96px}
  .lp-app #section-bookings .lp-bk-phone{display:none}
}

/* ════════════════════════════════════════════════════════════
   KÜCHE (#section-kitchen) — Raster restyle
   ════════════════════════════════════════════════════════════ */
.lp-app .main-content:has(> #section-kitchen:not(.hidden)){padding:0}
.lp-app #section-kitchen{margin:-32px -40px}
.lp-app .main-content:has(> #section-kitchen:not(.hidden)) #section-kitchen{margin:0}
.lp-app #section-kitchen .lp-topbar{position:sticky;top:0;z-index:20}
.lp-app #section-kitchen .lp-kds-badge{font-size:var(--fs-sm);color:var(--ink-3);
  font-weight:500;display:inline-flex;align-items:center;gap:6px}
.lp-app #section-kitchen .lp-kds-badge strong{color:var(--ink);font-weight:700}

/* order-card queue grid */
.lp-app #section-kitchen .lp-kds-container{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--gap)}
.lp-app #section-kitchen .lp-kds-card{display:flex;flex-direction:column;gap:14px;
  border-left:3px solid var(--ink-3)}
.lp-app #section-kitchen .lp-kds-card.status-sent{border-left-color:var(--accent)}
.lp-app #section-kitchen .lp-kds-card.status-preparing{border-left-color:#d9870e}
.lp-app #section-kitchen .lp-kds-card.status-ready{border-left-color:var(--success)}
.lp-app #section-kitchen .lp-kds-card.status-served{border-left-color:var(--line-2);opacity:.6}

.lp-app #section-kitchen .lp-kds-head{display:flex;align-items:flex-start;
  justify-content:space-between;gap:12px}
.lp-app #section-kitchen .lp-kds-order{font-weight:800;font-size:var(--fs-body);
  letter-spacing:-.01em}
.lp-app #section-kitchen .lp-kds-table{font-size:var(--fs-sm);color:var(--ink-3);
  margin-top:3px;font-weight:500}

/* item lines */
.lp-app #section-kitchen .lp-kds-items{border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:4px 0}
.lp-app #section-kitchen .lp-kds-line{display:flex;align-items:baseline;gap:12px;
  padding:8px 0;flex-wrap:wrap}
.lp-app #section-kitchen .lp-kds-qty{font-weight:800;color:var(--accent);
  flex:0 0 32px;font-size:var(--fs-body)}
.lp-app #section-kitchen .lp-kds-name{font-weight:600;letter-spacing:-.01em}
.lp-app #section-kitchen .lp-kds-mods{flex-basis:100%;padding-left:44px;
  font-size:var(--fs-sm);color:var(--ink-3);font-style:italic}

/* card footer */
.lp-app #section-kitchen .lp-kds-foot{display:flex;align-items:center;
  justify-content:space-between;gap:12px}
.lp-app #section-kitchen .lp-kds-elapsed{font-size:var(--fs-sm)}

@media(max-width:900px){
  .lp-app #section-kitchen{margin:-24px -18px}
  .lp-app .main-content:has(> #section-kitchen:not(.hidden)) #section-kitchen{margin:0}
}

/* ═══════════════════════════════════════════════════════════
   Hardware (#section-hardware) — Raster redesign
   ═══════════════════════════════════════════════════════════ */
.lp-app #section-hardware .lp-tar{text-align:right}

/* rental card grid */
.lp-app #section-hardware .lp-hw-grid{display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:18px}
.lp-app #section-hardware .lp-hw-empty{grid-column:1/-1}

.lp-app #section-hardware .lp-hw-card{display:flex;flex-direction:column;gap:14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:18px}
.lp-app #section-hardware .lp-hw-card-head{display:flex;align-items:center;gap:12px}
.lp-app #section-hardware .lp-hw-card-id{min-width:0}
.lp-app #section-hardware .lp-hw-card-title{font-weight:700;font-size:var(--fs-body);
  letter-spacing:-.01em}
.lp-app #section-hardware .lp-hw-card-status{margin-top:4px}

/* progress bar */
.lp-app #section-hardware .lp-hw-progress{display:flex;flex-direction:column;gap:7px}
.lp-app #section-hardware .lp-hw-progress-label{display:flex;align-items:baseline;
  justify-content:space-between;font-size:var(--fs-sm);color:var(--ink-2);font-weight:600}
.lp-app #section-hardware .lp-hw-progress-bar{height:6px;border-radius:var(--r-pill);
  background:var(--hover-2,var(--hover));overflow:hidden}
.lp-app #section-hardware .lp-hw-progress-fill{height:100%;background:var(--accent);
  border-radius:var(--r-pill)}

.lp-app #section-hardware .lp-hw-card-pay{font-size:var(--fs-sm);color:var(--ink-2)}
.lp-app #section-hardware .lp-hw-card-foot{display:flex}
.lp-app #section-hardware .lp-hw-card-actions{display:flex;gap:8px;
  border-top:1px solid var(--line);padding-top:14px}
.lp-app #section-hardware .lp-hw-card-actions .lp-btn{flex:1}

/* order + invoice tables */
.lp-app #section-hardware .lp-hw-order-row{grid-template-columns:1fr 2fr 1fr 1fr}
.lp-app #section-hardware .lp-hw-inv-row{grid-template-columns:1fr 2fr 1fr 1fr}
.lp-app #section-hardware .lp-hw-order-addr{font-size:var(--fs-xs);color:var(--ink-3);
  margin-top:3px}
.lp-app #section-hardware .lp-hw-order-desc{font-weight:600}

/* buyout / cancel modal internals */
.lp-app .lp-hw-modal-name{font-size:var(--fs-body);font-weight:600}
.lp-app .lp-hw-buyout-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lp-app .lp-hw-stat{display:flex;flex-direction:column;gap:4px}
.lp-app .lp-hw-stat strong{font-size:var(--fs-body)}
.lp-app .lp-hw-buyout-summ{border-top:1px solid var(--line);padding-top:6px}
.lp-app .lp-hw-modal-cta{width:100%}
.lp-app .lp-hw-modal-success{text-align:center;padding:8px 0;color:var(--success);
  font-weight:600}
.lp-app .lp-hw-modal-success p{margin-top:6px;font-weight:500}
.lp-app .lp-hw-cancel-check{display:flex;align-items:center;gap:10px;cursor:pointer;
  font-size:var(--fs-sm)}
.lp-app .lp-hw-cancel-done{text-align:center;display:flex;flex-direction:column;gap:12px}
.lp-app .lp-hw-cancel-done-t{color:var(--success);font-weight:700}
.lp-app .lp-hw-return-box{text-align:left;font-size:var(--fs-sm);padding:14px 16px;
  background:var(--hover);border-radius:var(--r-chip)}
.lp-app .lp-hw-return-box ol{margin-top:8px;padding-left:20px;display:flex;
  flex-direction:column;gap:4px}

/* payment timeline */
.lp-app .lp-hw-timeline{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column}
.lp-app .lp-hw-tl-item{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.lp-app .lp-hw-tl-item:last-child{border-bottom:0}
.lp-app .lp-hw-tl-month{flex:0 0 64px;font-weight:700;font-size:var(--fs-sm)}
.lp-app .lp-hw-tl-date{flex:1;font-size:var(--fs-sm)}
.lp-app .lp-hw-tl-amt{flex:0 0 84px;text-align:right;font-size:var(--fs-sm)}
.lp-app .lp-hw-tl-status{flex:0 0 104px;text-align:right;font-size:var(--fs-sm);
  color:var(--ink-2)}
.lp-app .lp-hw-timeline-load,.lp-app .lp-hw-timeline-err{text-align:center;
  padding:24px;color:var(--ink-3)}
.lp-app .lp-hw-timeline-err{color:var(--danger)}

/* solid destructive CTA (lp-btn-danger is outline-only) */
.lp-app .lp-btn-danger-solid{background:var(--danger);color:#fff;border-color:var(--danger)}
.lp-app .lp-btn-danger-solid:hover{background:color-mix(in srgb,var(--danger) 88%,#000)}

/* ═══════════════════════════════════════════════════════════
   Rechnungen (#section-invoices) — Raster redesign
   ═══════════════════════════════════════════════════════════ */
.lp-app #section-invoices .lp-tar{text-align:right}
.lp-app #section-invoices .lp-inv-stats{grid-template-columns:repeat(3,1fr)}
.lp-app #section-invoices .lp-inv-tbl .tbl-head,
.lp-app #section-invoices .lp-inv-tbl .tbl-row{
  grid-template-columns:1fr 1.6fr 1fr 1fr auto}
.lp-app #section-invoices .lp-inv-num{display:flex;align-items:center;gap:12px}
.lp-app #section-invoices .lp-inv-customer{font-weight:600}
.lp-app #section-invoices .lp-inv-tbl .lp-tbl-empty{display:block}
.lp-app #section-invoices .lp-inv-tbl .lp-tbl-empty .lp-muted{padding:8px 0}
.lp-app #section-invoices .lp-inv-filters{flex-shrink:0}

@media(max-width:760px){
  .lp-app #section-invoices .lp-inv-stats{grid-template-columns:1fr}
  .lp-app #section-hardware .lp-hw-buyout-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════
   Einstellungen (#section-settings) — Raster redesign
   ═══════════════════════════════════════════════════════════ */
.lp-app #section-settings .lp-topbar{position:sticky;top:0;z-index:20}
.lp-app #section-settings .lp-set-desc{font-size:var(--fs-sm);color:var(--ink-2);
  margin:0 0 16px;font-weight:500;line-height:1.55}
.lp-app #section-settings .lp-set-desc .lp-link,
.lp-app #section-settings .lp-set-desc a{color:var(--accent);font-weight:600;text-decoration:none}
.lp-app #section-settings .lp-set-desc .lp-link:hover,
.lp-app #section-settings .lp-set-desc a:hover{text-decoration:underline}
.lp-app #section-settings .lp-card-h{margin-bottom:4px}
/* settings forms: stack fieldgroups with consistent gap */
.lp-app #section-settings .lp-set-form{display:flex;flex-direction:column;gap:16px}
.lp-app #section-settings .lp-set-actions{display:flex;justify-content:flex-start;
  padding-top:4px}
.lp-app #section-settings .lp-set-sep{border-top:1px solid var(--line);margin:22px 0}
/* soft / danger framing cards */
.lp-app #section-settings .lp-set-soft{background:var(--hover)}
.lp-app #section-settings .lp-set-danger{
  border-color:color-mix(in srgb,var(--danger) 40%,transparent);
  background:color-mix(in srgb,var(--danger) 5%,transparent)}
.lp-app #section-settings .lp-set-danger .lp-card-title{color:var(--danger)}
/* legacy field-tip pill restyled to fit Raster */
.lp-app #section-settings .field-tip{display:inline-flex;align-items:center;
  justify-content:center;width:16px;height:16px;border-radius:999px;
  background:var(--hover-2);color:var(--ink-2);font-size:10px;font-weight:700;
  font-style:normal;cursor:help;margin-left:5px;vertical-align:middle}
.lp-app #section-settings .label-with-tip{display:inline-flex;align-items:center}
/* legacy widgets rendered by catalog.js coexist inside lp-cards: give breathing room */
.lp-app #section-settings #stripe-onboarding-container,
.lp-app #section-settings #cash-registers-list{color:var(--ink)}

/* tax-confirm modal body (inside .lp-app, .modal shell) */
.lp-app .lp-taxconfirm-box{border:1px solid var(--line);border-radius:var(--r-chip);
  padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--hover)}
.lp-app .lp-taxconfirm-row{display:flex;justify-content:space-between;
  align-items:center;gap:14px}
.lp-app .lp-taxconfirm-label{font-size:var(--fs-sm);color:var(--ink-2);font-weight:500}
.lp-app .lp-taxconfirm-val{font-size:var(--fs-body);font-weight:700;color:var(--ink)}
.lp-app .lp-taxconfirm-total{border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.lp-app .lp-taxconfirm-federal{font-size:var(--fs-h2);color:var(--accent)}
.lp-app .lp-link{color:var(--accent);font-weight:600;text-decoration:none}
.lp-app .lp-link:hover{text-decoration:underline}

/* ═══════════════════════════════════════════════════════════
   Admin / Super-Admin (#section-admin) — Raster retheme
   The sa-* design system (style.css) is fully token-driven; remap its
   tokens onto the Raster palette + typography so the whole admin shell
   (sidebar, cards, tables, tabs, badges, forms, detail panels) is
   visually consistent — without rewriting admin.js (4300 lines).
   ═══════════════════════════════════════════════════════════ */
.lp-app #section-admin{
  font-family:var(--font,"Plus Jakarta Sans"),system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* surfaces */
  --sa-bg:var(--bg);
  --sa-card:var(--card);
  --sa-border:var(--line);
  --sa-border-light:var(--line);
  --sa-text:var(--ink);
  --sa-text-secondary:var(--ink-2);
  --sa-text-label:var(--ink-3);
  /* accent → Raster accent */
  --sa-accent:var(--accent);
  --sa-accent-light:color-mix(in srgb,var(--accent) 12%,transparent);
  --sa-success:var(--success);
  --sa-success-light:color-mix(in srgb,var(--success) 12%,transparent);
  --sa-warning:#b9770b;
  --sa-warning-light:color-mix(in srgb,#d9870e 14%,transparent);
  --sa-error:var(--danger);
  --sa-error-light:color-mix(in srgb,var(--danger) 12%,transparent);
  /* sidebar follows the Raster sidebar surface */
  --sa-sidebar-bg:var(--sidebar-bg);
  --sa-sidebar-active:var(--hover-2);
  --sa-sidebar-text:var(--sidebar-ink);
  --sa-sidebar-muted:var(--ink-3);
  --sa-sidebar-group:var(--ink-3);
  /* radii → Raster direction radii */
  --sa-radius:var(--r-card);
  --sa-radius-sm:var(--r-chip);
}
.lp-app #section-admin *{font-family:inherit}
/* font sizes / weights aligned to Raster scale */
.lp-app #section-admin .sa-page-title{font-size:var(--fs-h1);font-weight:800;
  letter-spacing:-.03em}
.lp-app #section-admin .sa-page-subtitle{font-size:var(--fs-sm);font-weight:500}
.lp-app #section-admin .sa-card{box-shadow:var(--shadow)}
.lp-app #section-admin .sa-card-header h3{font-size:var(--fs-h2);font-weight:700;
  letter-spacing:-.01em}
.lp-app #section-admin .sa-table thead th{background:var(--hover);
  border-bottom-color:var(--line);font-size:var(--fs-xs)}
.lp-app #section-admin .sa-table tbody tr:hover{background:var(--hover)}
.lp-app #section-admin .sa-tab{font-size:var(--fs-sm)}
.lp-app #section-admin .sa-tab.active{font-weight:700}
.lp-app #section-admin .sa-badge{font-weight:700;letter-spacing:.01em}
.lp-app #section-admin .sa-sidebar-logo span,
.lp-app #section-admin .sa-mobile-title{letter-spacing:-.01em}
/* keep dark sidebar legible against Raster light sidebar surface */
.lp-app.theme-light #section-admin{--sa-sidebar-bg:#0f0f13;--sa-sidebar-text:#cfcfd6;
  --sa-sidebar-muted:#8a8a93;--sa-sidebar-group:#8a8a93;--sa-sidebar-active:#1c1c24}
/* buttons / inputs: use accent-mix hovers + Raster focus ring instead of
   the hardcoded violet/grey from the legacy sa-* rules */
.lp-app #section-admin .sa-btn-primary{color:var(--accent-ink)}
.lp-app #section-admin .sa-btn-primary:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}
.lp-app #section-admin .sa-btn-secondary:hover{background:var(--hover)}
.lp-app #section-admin .sa-form-group input,
.lp-app #section-admin .sa-form-group select,
.lp-app #section-admin .sa-form-group textarea,
.lp-app #section-admin .sa-search{background:var(--field);color:var(--ink)}
.lp-app #section-admin .sa-form-group input:focus,
.lp-app #section-admin .sa-form-group select:focus,
.lp-app #section-admin .sa-form-group textarea:focus,
.lp-app #section-admin .sa-search:focus{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}