.card.dragging { opacity: .6; outline: 2px dashed var(--accent); }

/* public/style.css – mobile bottom nav + larger default tiles */
:root{
  --ok:#16a34a; --ok-bg:#e9f7ef;
  --bad:#dc2626; --bad-bg:#fdeaea;
  --warn-bg:#fef9c3; --warn-fg:#854d0e; --warn-border:#fde047;
  --bg:#e9eaee; --card:#f7f8fb;
  --fg:#0f172a; --muted:#475569;
  --border:#d6d8dd; --accent:#22c55e;
  --tile-scale: 1.25;
  --tile-min: 260px;
}
[data-theme="dark"]{
  --ok:#10b981; --ok-bg:rgba(16,185,129,.12);
  --bad:#ef4444; --bad-bg:rgba(239,68,68,.12);
  --warn-bg:#422006; --warn-fg:#fef9c3; --warn-border:#a16207;
  --bg:#0b1020; --card:#121a2d;
  --fg:#e5e7eb; --muted:#cbd5e1;
  --border:rgba(255,255,255,.12); --accent:#34d399;
}
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; font-family:system-ui,Segoe UI,Roboto,Ubuntu,Arial; background:var(--bg); color:var(--fg); }
body{ display:flex; min-height:100dvh; background-image:
    radial-gradient(color-mix(in oklab, var(--border) 70%, transparent) 1px, transparent 1px),
    radial-gradient(color-mix(in oklab, var(--border) 70%, transparent) 1px, transparent 1px);
  background-position: 0 0, 10px 10px; background-size: 20px 20px; }
.page{ display:flex; flex-direction:column; min-height:100dvh; width:100%; }
main{ flex:1; }
a{ color:#0ea5e9; text-decoration:none; }

.container{ padding:16px clamp(12px,2vw,24px); width:100%; margin:0; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(calc(var(--tile-min)*var(--tile-scale)),1fr)); gap:16px; }
.card{ background:var(--card); border-radius:16px; padding:18px; box-shadow:0 4px 12px rgba(15,23,42,.08); border:1px solid var(--border); }

.name{ font-size:calc(1.0rem * var(--tile-scale)); font-weight:800; margin:0 0 8px; line-height:1.2; }
.timer{ font-feature-settings:"tnum" on, "lnum" on; font-variant-numeric:tabular-nums; font-size:calc(1.0rem * var(--tile-scale)); color:var(--muted); }
.small{ opacity:.95; font-size:.9rem; color:var(--muted); }
.form{ background:var(--card); padding:16px; border-radius:16px; border:1px solid var(--border); }

.input, .btn{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#fff; color:#0f172a; }
[data-theme="dark"] .input, [data-theme="dark"] .btn{ background:#0b1324; color:var(--fg); border:1px solid color-mix(in oklab, var(--border) 70%, transparent); }
.btn{ cursor:pointer; font-weight:700; }
.row{ display:flex; gap:8px; flex-wrap:wrap; }

.badge{ display:inline-block; padding:6px 10px; border-radius:999px; font-weight:700; }
.bad{ background:var(--bad-bg); color:var(--bad); border:1px solid color-mix(in oklab, var(--bad) 30%, transparent); animation:pulse 1s infinite; }
.ok{ background:var(--ok-bg); color:var(--ok); border:1px solid color-mix(in oklab, var(--ok) 30%, transparent); }
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--bad) 30%, transparent)}70%{box-shadow:0 0 0 12px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}

code{ white-space:pre-wrap; word-break:break-word; }

.topbar{ position: sticky; top:0; z-index:50; backdrop-filter: blur(6px);
  background: color-mix(in oklab, var(--card) 92%, transparent); border-bottom: 1px solid var(--border); }
.topbar-inner{ display:flex; align-items:center; gap:12px; padding:10px clamp(12px,2vw,24px); width:100%; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.brand .accent{ color:var(--accent); }
.brand .apple svg{ width:20px; height:20px; }
.actions{ display:flex; gap:8px; align-items:center; flex-wrap:nowrap; overflow-x:auto; min-width:0; }
.iconbtn.menubtn{ display:none; }
.actions::-webkit-scrollbar{ display:none; }
.iconbtn{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--border); background:#fff;
  transition:transform .12s ease, background .2s ease, border-color .2s ease; flex:0 0 auto; }
[data-theme="dark"] .iconbtn{ background:#0b1324; }
.iconbtn:hover{ transform:translateY(-1px); border-color:color-mix(in oklab, var(--border) 50%, #aaa); }
.iconbtn svg{ width:18px; height:18px; }
.iconbtn svg *{ fill:none; stroke:#0f172a; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
[data-theme="dark"] .iconbtn svg *{ stroke:var(--fg); }
.iconbtn.primary{ background:#eefaf3; border-color:color-mix(in oklab, var(--ok) 35%, transparent); }
.iconbtn.primary svg *{ stroke:var(--accent); }
.iconbtn.danger{ background:#fff1f1; border-color:color-mix(in oklab, var(--bad) 35%, transparent); }
.iconbtn.danger svg *{ stroke:var(--bad); }

.codewrap{ background:#1e293b; color:#e2e8f0; border-radius:10px; padding:10px; border:1px solid rgba(255,255,255,.1);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.9rem; white-space:pre; overflow:auto; }
[data-theme="light"] .codewrap{ background:#f1f5f9; color:#1e293b; border:1px solid var(--border); }
.copybar{ display:flex; gap:8px; align-items:center; margin-top:8px; }
.copybtn{ padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:#fff; color:#0f172a; cursor:pointer; }
[data-theme="dark"] .copybtn{ background:#0b1324; color:#e5e7eb; }
.copybtn:hover{ background:color-mix(in oklab, var(--card) 80%, transparent); }

.footer{ margin-top:auto; width:100%; padding:8px clamp(12px,2vw,24px); color:var(--muted); font-size:.85rem;
  display:flex; justify-content:space-between; border-top:1px dashed var(--border); }
.footer .left{ font-weight:600; }
.footer .right{ opacity:.9; }

/* Mobile Bottom Nav */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; height:58px; display:none;
  background:var(--card); border-top:1px solid var(--border); z-index:60;
  align-items:center; justify-content:space-around; padding:0 8px;
}
.bn-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-decoration:none; color:var(--fg); font-size:.72rem; }
.bn-btn .icon{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; }
.bn-btn .icon svg{ width:20px; height:20px; }
.bn-btn .icon svg *{ fill:none; stroke:#0f172a; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
[data-theme="dark"] .bn-btn .icon svg *{ stroke:var(--fg); }

@media (max-width: 900px){
  .container{ padding:12px; }
  main.container{ padding-bottom:72px; }   /* Platz für Bottom Nav */
  .grid{ gap:12px; grid-template-columns: repeat(auto-fill, minmax(calc(210px*var(--tile-scale)),1fr)); }
  .actions label[for=tileScale]{ display:none; }
  .range{ width:100px; }
  .bottomnav{ display:flex; }
  /* Handy/Tablet (Dashboard): Aktionen hinter dem Menü-Knopf, aufgeklappt als Liste mit Beschriftung */
  .topbar.has-menu .topbar-inner{ position:relative; }
  .topbar.has-menu .iconbtn.menubtn{ display:inline-flex; }
  .topbar.has-menu .actions{ display:none; }
  .topbar.has-menu.menu-offen .actions{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:absolute; right:clamp(12px,2vw,24px); top:calc(100% - 4px); width:min(300px, calc(100vw - 24px));
    max-height:calc(100vh - 140px); overflow-y:auto; padding:8px;
    background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:0 12px 32px rgba(15,23,42,.18); z-index:70;
  }
  .topbar.has-menu.menu-offen .actions .iconbtn{ width:100%; height:44px; justify-content:flex-start; gap:12px; padding:0 12px; border:0; background:transparent; color:var(--fg); text-decoration:none; font-size:.95rem; }
  .topbar.has-menu.menu-offen .actions .iconbtn::after{ content:attr(title); }
  .topbar.has-menu.menu-offen .actions .iconbtn:hover{ background:color-mix(in oklab, var(--border) 45%, transparent); transform:none; }
  .topbar.has-menu.menu-offen .actions .iconbtn.danger{ color:var(--bad); }
  .topbar.has-menu.menu-offen .actions label.small{ display:flex; align-items:center; min-height:40px; margin:0 !important; padding:0 12px; font-size:.95rem; color:var(--fg); }
  .topbar.has-menu.menu-offen .actions .range{ width:auto; margin:6px 12px 10px; }
  .topbar.has-menu.menu-offen .actions label[for=tileScale]{ display:flex; }
}
.range{ appearance:none; height:6px; border-radius:999px; background:color-mix(in oklab, var(--border) 70%, transparent); outline:none; width:130px; }
.range::-webkit-slider-thumb{ appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); cursor:pointer; border:1px solid color-mix(in oklab, var(--accent) 40%, #000); }
.range::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--accent); border:none; cursor:pointer; }

.table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.table th,.table td{ padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; }
.table th{ font-weight:700; color:var(--muted); }
.table tbody tr:last-child td{ border-bottom:none; }

/* Jumbo-Ansicht für "Nächster Kunde" */
.card.jumbo {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; min-height: 220px;
}
.jumbo-title {
  font-weight: 800; letter-spacing:.3px; opacity:.85;
  font-size: clamp(18px, 3.2vw, 28px);
}
.jumbo-number {
  font-weight: 900; line-height: .95; margin: 6px 0 10px;
  font-size: clamp(56px, 12vw, 180px);
}
.jumbo-note {
  font-size: clamp(12px, 2.4vw, 16px); color: var(--muted);
}