/* Dunkles Design in Schwarz und Grau. Alle Grundtöne tragen den Farbton der
     Firmenfarbe #45545b (199°) in sehr geringer Sättigung – das Schwarz ist
     dadurch minimal blau unterlegt statt neutral. Der Akzent ist dieselbe
     Hausfarbe, aufgehellt, weil #45545b auf Schwarz zu dunkel wäre. */
  html{touch-action:manipulation;}
  :root{
    color-scheme:dark;
    --bg:#0d1113; --card:#191f22; --card2:#131a1d; --fg:#f2f5f6; --muted:#9aa7ad;
    /* Eine Stufe heller als die Karten: Tasten und Kacheln sollen aufliegen. */
    --raise:#222b2f; --raise2:#1a2226;
    /* Seitenleiste und Fußleiste dunkler als der Inhalt – das gibt Tiefe. */
    --chrome:#121719; --chrome2:#0e1315;
    --accent:#a3cddf; --accent2:#5289a3; --accent-fg:#07110f;
    --ok:#5fc7a1; --warn:#efb653; --danger:#f4746b;
    --border:#2b3439; --hover:#222b2f; --glass:rgba(255,255,255,.07);
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--fg);}
  a{color:inherit;}
  button{font-family:inherit;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
  button *{user-select:none;-webkit-user-select:none;}
  .hidden{display:none !important;}

  /* Login */
  #login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
    background:radial-gradient(1000px 500px at 50% -10%,color-mix(in srgb,var(--accent) 18%,transparent),transparent),var(--bg);}
  .login-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:34px;box-shadow:0 20px 60px rgba(0,0,0,.25);}
  .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;margin-bottom:22px;}
  .brand .mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-size:19px;}
  label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px;font-weight:600;}
  input{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--border);background:var(--card2);color:var(--fg);font-size:15px;}
  input:focus{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);border-color:transparent;}
  .btn{width:100%;margin-top:20px;padding:12px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:700;font-size:15px;}
  .btn:active{transform:translateY(1px);}
  .err{color:var(--danger);font-size:13px;margin-top:12px;min-height:16px;}

  /* App layout */
  #app{display:grid;grid-template-columns:230px 1fr;min-height:100vh;}
  aside{background:var(--card);border-right:1px solid var(--border);padding:20px 14px;display:flex;flex-direction:column;}
  aside .brand{padding:0 8px;}
  nav{margin-top:18px;display:flex;flex-direction:column;gap:3px;flex:1;}
  .navlink{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--muted);font-weight:600;font-size:14px;border:none;background:none;text-align:left;}
  .navlink:hover{background:var(--hover);color:var(--fg);}
  .navlink.active{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--fg);}
  .navlink .ic{font-size:17px;width:20px;text-align:center;}
  .navlink.back{color:var(--muted);font-weight:600;}
  .navgroup{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);
    font-weight:700;padding:14px 12px 6px;}
  .brand{border:none;background:none;color:inherit;font-weight:800;font-size:19px;padding:0 8px;cursor:pointer;
    display:flex;align-items:center;gap:11px;text-align:left;}

  /* Startseite mit den Modulkacheln */
  .homehead{margin-bottom:22px;}
  .homehead h2{font-size:22px;margin:0 0 4px;}
  .homehead p{color:var(--muted);font-size:14px;margin:0;}
  /* Schmal genug, dass auf dem Handy zwei Karten nebeneinander passen. */
  .modgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;}
  .modcard{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;
    -webkit-touch-callout:none;
    background:var(--card);border:1px solid var(--border);border-radius:15px;padding:15px 14px 14px;color:var(--fg);
    transition:transform .12s,border-color .12s,box-shadow .12s;}
  .modcard:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.22);}
  /* Anordnen: die gezogene Kachel liegt oben, die übrigen rücken weich nach. */
  .modgrid.sorting{touch-action:none;}
  .modgrid.sorting .modcard{transition:transform .14s ease;}
  .modcard.dragging{z-index:5;opacity:.95;transform:none;cursor:grabbing;
    border-color:var(--accent);box-shadow:0 22px 48px rgba(0,0,0,.55);transition:none !important;}
  .modcard:active{transform:translateY(-1px);}
  .modcard .mi{font-size:23px;line-height:1;}
  .modcard .mn{font-size:15px;font-weight:800;}
  /* Zwei Zeilen reichen – der Rest wird gekürzt, damit die Karten gleich hoch bleiben. */
  .modcard .md{font-size:11.5px;color:var(--muted);line-height:1.4;max-width:100%;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .modcard .mv{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px;}
  .modcard .chip{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--card2);
    border:1px solid var(--border);border-radius:999px;padding:3px 8px;cursor:pointer;transition:.12s;}
  .modcard .chip:hover{border-color:var(--accent);color:var(--fg);background:var(--hover);}
  .modcard .mstat{font-size:11.5px;font-weight:700;color:var(--accent);min-height:0;margin-top:5px;}
  .homefoot{margin-top:26px;font-size:12px;color:var(--muted);text-align:center;min-height:16px;}
  .modcard .mwho{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;min-height:0;}
  .modcard .who{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
    color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent);
    border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);border-radius:999px;padding:3px 9px;}
  .modcard .who.me{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);
    border-color:color-mix(in srgb,var(--accent) 35%,transparent);}
  .modcard .who .dot{width:6px;height:6px;border-radius:50%;background:currentColor;
    animation:pulse 2s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  .userbox{border-top:1px solid var(--border);padding-top:14px;margin-top:10px;font-size:13px;color:var(--muted);}
  .logout{margin-top:10px;width:100%;padding:9px;border:1px solid var(--border);background:none;color:var(--fg);border-radius:9px;font-weight:600;font-size:13px;}

  main{padding:30px 34px;overflow:auto;min-width:0;}
  .topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:24px;}
  h1{font-size:23px;margin:0;}
  .sub{color:var(--muted);font-size:14px;margin-top:3px;}
  select{padding:8px 12px;border-radius:9px;border:1px solid var(--border);background:var(--card2);color:var(--fg);font-size:14px;}

  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px;}
  .kpi{background:var(--card);border:1px solid var(--border);border-radius:15px;padding:18px 20px;}
  .kpi .k{font-size:13px;color:var(--muted);font-weight:600;}
  .kpi .v{font-size:27px;font-weight:800;margin-top:8px;letter-spacing:-.5px;}
  .kpi .v.small{font-size:22px;}

  .grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:16px;}
  .panel{background:var(--card);border:1px solid var(--border);border-radius:15px;padding:20px;}
  .panel h2{font-size:15px;margin:0 0 16px;}
  .chart{width:100%;height:200px;}
  .bar{fill:url(#g);transition:opacity .2s;}
  .bar:hover{opacity:.8;}

  table{width:100%;border-collapse:collapse;font-size:14px;}
  th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--border);}
  th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px;}
  td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;}
  .rowlist{display:flex;flex-direction:column;gap:10px;}
  .rowitem{display:flex;align-items:center;justify-content:space-between;font-size:14px;}
  .rowitem .lbl{color:var(--muted);} .rowitem .val{font-weight:700;font-variant-numeric:tabular-nums;}
  .pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;}
  .pill.free{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok);}
  .pill.occ{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn);}
  .tables-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;}
  .tcard{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center;}
  .tcard .tn{font-size:20px;font-weight:800;}
  .empty{color:var(--muted);font-size:14px;padding:16px 0;text-align:center;}
  .loading{color:var(--muted);font-size:14px;}

  /* Kasse (POS) */
  .posbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
  .pos{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start;}
  @media(max-width:900px){.pos{grid-template-columns:minmax(0,1fr);}}
  .prodgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--prodsize,140px),1fr));gap:10px;}
  .prodbtn{min-height:var(--prodmin,76px);}
  /* Bereiche: Segmentleiste in einer Zeile. */
  .segbar{display:flex;width:fit-content;gap:3px;padding:3px;margin-bottom:8px;min-width:0;max-width:100%;
    background:var(--card2);border:1px solid var(--border);border-radius:12px;overflow-x:auto;
    scrollbar-width:none;box-shadow:inset 0 1px 0 var(--glass);}
  .segbar::-webkit-scrollbar{display:none;}
  .seg{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:none;background:none;
    color:var(--muted);font-weight:700;font-size:14px;padding:9px 16px;border-radius:9px;}
  .seg:hover{color:var(--fg);}
  .seg.on{color:var(--accent-fg);background:linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3);}

  /* Kategorien: ein Streifen zum Wischen statt einer Wand aus Knöpfen. */
  .catstrip{display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    min-width:0;max-width:100%;
    padding:2px 0 8px;margin-bottom:6px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%);}
  .catstrip::-webkit-scrollbar{display:none;}
  .chipbtn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:0 0 auto;
    padding:9px 16px;border:1px solid var(--border);border-radius:999px;font-weight:700;font-size:14px;
    background:linear-gradient(180deg,var(--raise),var(--raise2));color:var(--fg);box-shadow:inset 0 1px 0 var(--glass);}
  .chipbtn:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);}
  .chipbtn.on{border-color:transparent;color:var(--accent-fg);
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
  .seg .cnt,.chipbtn .cnt{font-size:11.5px;font-weight:800;opacity:.65;font-variant-numeric:tabular-nums;}
  .prodpane{display:flex;flex-direction:column;gap:18px;min-width:0;}
  #catBar{min-width:0;max-width:100%;}
  .prodgroup .pgh{display:flex;align-items:baseline;gap:10px;font-size:13px;font-weight:800;
    letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:9px;
    padding-bottom:7px;border-bottom:1px solid var(--border);}
  .prodgroup .pga{font-size:11px;font-weight:600;letter-spacing:.4px;color:var(--accent);
    background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:999px;padding:2px 9px;text-transform:none;}
  .listrow.sub{padding-left:14px;}
  .implist{max-height:42vh;overflow:auto;margin:6px 0 4px;}
  .imparea{border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--card2);}
  .imparea .impname{font-weight:800;font-size:14px;margin-bottom:4px;}
  .impcats{margin-top:10px;display:flex;flex-direction:column;gap:4px;}
  .impcat summary{cursor:pointer;font-size:13px;font-weight:700;padding:5px 0;}
  .impcat summary .sub{display:inline;}
  .impcat .rowlist{padding:4px 0 8px 14px;}
  .impwarn{border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent);
    border-radius:10px;padding:10px 14px;font-size:12.5px;margin-bottom:12px;}
  .impwarn ul{margin:6px 0 0;padding-left:18px;color:var(--muted);}
  .costnote{border:1px solid color-mix(in srgb,var(--warn) 55%,transparent);
    background:color-mix(in srgb,var(--warn) 12%,transparent);border-radius:10px;
    padding:12px 14px;font-size:13px;line-height:1.55;margin-bottom:14px;}
  .costnote b{color:var(--warn);}
  code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;
    background:var(--card2);border:1px solid var(--border);border-radius:5px;padding:1px 5px;}
  .impwarn li{margin:2px 0;}
  input[type=file]{padding:9px 11px;font-size:14px;}
  .listrow .tree{color:var(--muted);margin-right:7px;}
  .prodbtn{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:14px 13px;text-align:left;color:var(--fg);display:flex;flex-direction:column;gap:6px;min-height:76px;transition:.12s;
    position:relative;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
  /* Favoriten: Stern an der Kachel, langes Antippen legt ab und nimmt weg. */
  .prodbtn.isfav{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));}
  .prodbtn.isfav::after{content:"★";position:absolute;top:7px;right:9px;font-size:12px;line-height:1;color:var(--accent);}
  .seg.fav{font-size:15px;color:var(--accent);}
  .seg.fav.on{color:var(--accent-fg);}
  .prodbtn:hover{border-color:var(--accent);background:var(--hover);}
  .prodbtn:active{transform:scale(.97);}
  .prodbtn .pn{font-weight:700;line-height:1.25;min-width:0;max-width:100%;
    font-size:clamp(11.5px,calc(10px + var(--prodsize,140px)*.029),19px);
    overflow-wrap:anywhere;hyphens:auto;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
  .prodbtn .pp{color:var(--muted);font-variant-numeric:tabular-nums;
    font-size:clamp(10.5px,calc(9px + var(--prodsize,140px)*.024),16px);}
  /* Das Bestellfenster spannt sich über die Fensterhöhe: die Positionen
     scrollen in sich, Summe und Knöpfe bleiben immer sichtbar. */
  .order{background:var(--card);border:1px solid var(--border);border-radius:15px;padding:18px;position:sticky;top:16px;
    display:flex;flex-direction:column;height:calc(100vh - 32px);}
  .orderbody{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;overflow:auto;}
  /* Zusammenfassung – am Rechner nicht nötig, dort steht das Panel ohnehin daneben. */
  /* Eingeklappt: eine Zeile mit dem zuletzt gebuchten Artikel, Summe und PUSH. */
  /* Gruppen in der Bestellung: neue Runde oben, Gesendetes darunter. */
  .olgroup+.olgroup{margin-top:13px;}
  .olgh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;
    padding-bottom:5px;border-bottom:1px solid var(--border);
    font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);}
  .olgroup.fresh .olgh{color:var(--accent);border-bottom-color:color-mix(in srgb,var(--accent) 38%,var(--border));}
  .olgh .olgs{font-size:12.5px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--fg);
    font-variant-numeric:tabular-nums;}
  .reagain{margin-left:7px;font-size:10.5px;font-weight:800;color:var(--accent);white-space:nowrap;
    background:color-mix(in srgb,var(--accent) 14%,transparent);border-radius:999px;padding:1px 7px;}
  .lbtn[disabled]{opacity:.35;}
  .ordersum{display:none;width:100%;align-items:center;gap:9px;padding:9px 12px;}
  .osmain{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:9px;
    background:none;border:none;padding:0;color:var(--fg);text-align:left;}
  .ordersum .oschev{flex:0 0 auto;color:var(--muted);font-size:12px;width:12px;}
  .ordersum .osl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-weight:700;font-size:14.5px;}
  .ordersum .osl .q{color:var(--muted);font-weight:800;}
  .ordersum .osl .osempty{color:var(--muted);font-weight:600;}
  .ordersum .osmore{margin-left:7px;font-size:11px;font-weight:800;color:var(--muted);
    background:var(--hover);border:1px solid var(--border);border-radius:999px;padding:1px 7px;}
  .ordersum .ostot{flex:0 0 auto;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;}
  .ordersum .ospush{flex:0 0 auto;padding:9px 14px;border:none;border-radius:11px;font-weight:800;font-size:13px;
    color:var(--accent-fg);background:linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3);}
  /* Kurzes Aufleuchten, wenn etwas gebucht wurde – ohne aufzuklappen. */
  @keyframes osflash{from{background:color-mix(in srgb,var(--accent) 22%,transparent);}to{background:transparent;}}
  .ordersum.flash{animation:osflash .7s ease-out;}
  .order h2{font-size:15px;margin:0 0 4px;}
  .orderlines{display:flex;flex-direction:column;gap:9px;margin:14px 0;flex:1 1 auto;min-height:64px;overflow:auto;}
  .ol{display:flex;justify-content:space-between;gap:10px;font-size:14px;}
  .ol .q{color:var(--muted);}
  .ordertotal{display:flex;justify-content:space-between;font-size:21px;font-weight:800;border-top:1px solid var(--border);padding-top:13px;margin-top:6px;font-variant-numeric:tabular-nums;}
  .posactions{display:flex;gap:8px;margin-top:15px;}
  .paybtn{flex:1;padding:14px;border:none;border-radius:12px;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-weight:800;font-size:16px;}
  .paybtn:disabled{opacity:.45;cursor:not-allowed;}
  .clearbtn{padding:14px 15px;border:1px solid var(--border);background:none;color:var(--fg);border-radius:12px;font-weight:600;}
  .clearbtn:disabled{opacity:.45;cursor:not-allowed;}
  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#16a34a;color:#fff;padding:13px 22px;border-radius:12px;font-weight:700;box-shadow:0 12px 34px rgba(0,0,0,.32);z-index:50;font-size:15px;}
  .ol{align-items:center;}
  .olname{flex:1;min-width:0;}
  .olright{display:flex;align-items:center;gap:6px;}
  .olprice{min-width:62px;text-align:right;font-variant-numeric:tabular-nums;}
  .lbtn{width:26px;height:26px;border:1px solid var(--border);background:var(--card2);color:var(--fg);border-radius:7px;font-size:15px;line-height:1;display:grid;place-items:center;padding:0;}
  .lbtn:hover{border-color:var(--accent);}
  .lbtn.rm{color:var(--danger);border-color:transparent;background:none;}
  .paysec{margin-top:12px;border-top:1px solid var(--border);padding-top:12px;}
  .methods{display:flex;gap:8px;margin-bottom:10px;}
  .mbtn{flex:1;padding:9px;border:1px solid var(--border);background:var(--card2);color:var(--fg);border-radius:9px;font-weight:600;}
  .mbtn.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);}
  .given{display:flex;align-items:center;gap:10px;font-size:14px;}
  .given input{width:110px;padding:8px 10px;}
  .given label{color:var(--muted);}
  #posChange{color:var(--ok);font-weight:700;margin-left:auto;}

  /* Verwaltung: Werkzeugleiste, Aktionen, Dialoge */
  .toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px;}
  .toolbar .grp{display:flex;gap:8px;flex-wrap:wrap;}
  .btn2{padding:10px 15px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:700;font-size:14px;}
  .btn2:active{transform:translateY(1px);}
  .btn2:disabled{opacity:.5;cursor:not-allowed;}
  .btn-ghost{padding:7px 12px;border:1px solid var(--border);background:var(--card2);color:var(--fg);border-radius:9px;font-weight:600;font-size:13px;}
  .btn-ghost:hover{border-color:var(--accent);}
  .btn-danger{color:var(--danger);}
  .btn-danger:hover{border-color:var(--danger);}
  .actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;}
  td .sub{font-size:12px;margin-top:2px;}
  .pill.off{background:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger);}
  .pill.neutral{background:var(--hover);color:var(--muted);}

  .modal-bg{position:fixed;inset:0;background:rgba(3,7,18,.62);display:grid;place-items:center;padding:20px;z-index:60;}
  .modal{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;width:100%;max-width:500px;max-height:88vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.4);}
  .modal h3{margin:0 0 4px;font-size:17px;}
  /* Auswahl weiterer Kassenfunktionen */
  .fnlist{display:flex;flex-direction:column;gap:9px;margin-top:16px;}
  .fnitem{display:flex;align-items:center;gap:13px;width:100%;padding:13px 14px;text-align:left;
    border:1px solid var(--border);border-radius:13px;background:var(--card2);color:var(--fg);}
  .fnitem:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent);}
  .fnitem.soon{opacity:.62;}
  .fnic{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;font-size:19px;
    border-radius:11px;background:var(--card);border:1px solid var(--border);}
  .fntx{display:flex;flex-direction:column;gap:3px;min-width:0;}
  .fnn{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .fnd{color:var(--muted);font-size:12.5px;line-height:1.4;}
  .soonbadge{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);
    border:1px solid var(--border);border-radius:999px;padding:2px 8px;}
  .modal label{margin-top:13px;}
  .modal label:first-of-type{margin-top:8px;}
  .fields2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
  @media(max-width:520px){.fields2{grid-template-columns:1fr;}}
  .modal select{width:100%;padding:11px 13px;font-size:15px;border-radius:10px;}
  .modal-actions{display:flex;gap:8px;margin-top:22px;}
  .modal-actions>*{flex:1;margin-top:0;padding:11px;}
  .checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
  .chk{display:flex;align-items:center;gap:7px;font-size:13px;background:var(--card2);border:1px solid var(--border);padding:8px 12px;border-radius:9px;font-weight:600;color:var(--fg);margin:0;}
  .chk input{width:auto;padding:0;}
  .hint{font-size:12px;color:var(--muted);margin-top:7px;}
  .listrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
  .listrow .nm{flex:1;font-weight:600;font-size:14px;}
  .tcard .tmeta{font-size:12px;color:var(--muted);margin-top:3px;}
  .tcard .actions{margin-top:9px;justify-content:center;}

  /* Grafischer Tischplan */
  .plan{position:relative;background:var(--card2);border:1px solid var(--border);border-radius:12px;overflow:auto;padding:12px;}
  .plan-canvas{position:relative;min-height:120px;}
  .ptable{position:absolute;width:96px;height:96px;border-radius:14px;border:2px solid var(--border);background:var(--card);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--fg);padding:6px;text-align:center;}
  .ptable.circle{border-radius:50%;}
  .ptable .pl{font-size:20px;font-weight:800;line-height:1.05;max-width:100%;overflow-wrap:anywhere;text-align:center;}
  .ptable .ps{font-size:11px;color:var(--muted);line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ptable .pt{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--warn);}
  .ptable.free{border-color:color-mix(in srgb,var(--ok) 50%,transparent);}
  .ptable.occ{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--card));}
  .ptable.book{cursor:pointer;transition:transform .12s,border-color .12s;}
  .ptable.book:hover{border-color:var(--accent);transform:translateY(-2px);}
  .ptable.book:active{transform:scale(.96);}
  .ptable.drag{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;}
  .ptable.dragging{opacity:.85;z-index:5;cursor:grabbing;box-shadow:0 14px 34px rgba(0,0,0,.38);}
  .ptable .del{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:1px solid var(--border);
    background:var(--card);color:var(--danger);font-size:12px;line-height:1;display:grid;place-items:center;padding:0;}
  /* Tisch mit Positionen, die noch nicht an Küche oder Theke gegangen sind. */
  .ptable.unpushed{border-color:var(--accent);border-style:dashed;
    box-shadow:inset 0 1px 0 var(--glass),0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent);}
  .ptable .nbadge{position:absolute;top:-9px;right:-9px;min-width:23px;height:23px;padding:0 6px;border-radius:999px;
    display:grid;place-items:center;font-size:12px;font-weight:800;
    background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-fg);
    box-shadow:0 4px 12px -4px color-mix(in srgb,var(--accent) 70%,transparent);}
  .ptable .tpush{margin-top:6px;padding:4px 12px;border:none;border-radius:8px;font-size:11px;font-weight:800;
    letter-spacing:.8px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-fg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3);}
  .ptable .tpush:active{transform:scale(.94);}
  .plan-canvas{transform-origin:top left;}
  /* Umbruchmodus: Tische untereinander statt maßstäblich – nur wenn es sonst
     seitlich hinausliefe. Die Positionsangaben stehen inline, daher !important. */
  .plan.reflow{overflow-x:hidden;}
  .plan.reflow .plan-canvas{position:static;display:flex;flex-wrap:wrap;gap:10px;
    width:auto !important;height:auto !important;transform:none !important;}
  .plan.reflow .ptable{position:static !important;left:auto !important;top:auto !important;
    width:var(--tile,96px) !important;height:var(--tile,96px) !important;
    padding:4px;overflow:hidden;}
  .plan.reflow .ptable .pl{font-size:clamp(11px,calc(var(--tile,96px)*.21),26px);}
  .plan.reflow .ptable .ps{font-size:clamp(8px,calc(var(--tile,96px)*.115),13px);}
  .plan.reflow .ptable .pt{font-size:clamp(9px,calc(var(--tile,96px)*.135),15px);}
  .plan.reflow .ptable .tpush{font-size:clamp(8px,calc(var(--tile,96px)*.105),12px);
    padding:3px calc(var(--tile,96px)*.09);margin-top:calc(var(--tile,96px)*.05);}
  .plan.reflow .ptable .nbadge{transform:scale(clamp(.7,calc(var(--tile,96px)/96),1));transform-origin:top right;}
  /* Der Regler wird selten gebraucht: zugeklappt bleibt nur ein kleiner Knopf,
     aufgeklappt wird daraus die gewohnte Zeile. */
  .zoomrow{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:8px;}
  .zoomrow.open{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px 12px;}
  .zoomfields{display:none;align-items:center;gap:12px;flex:1 1 auto;min-width:0;}
  .zoomrow.open .zoomfields{display:flex;}
  .sizebtn{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;font-size:14px;
    border:1px solid var(--border);border-radius:9px;background:var(--card2);color:var(--muted);}
  .sizebtn:hover{color:var(--fg);border-color:color-mix(in srgb,var(--accent) 55%,transparent);}
  .sizebtn.on{color:var(--accent-fg);border-color:transparent;
    background:linear-gradient(135deg,var(--accent),var(--accent2));}
  .zoomrow .zl{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;}
  .zoomrow .zv{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;min-width:52px;text-align:right;}
  .zoomrow input[type=range]{flex:1;width:auto;padding:0;accent-color:var(--accent);background:none;border:none;height:26px;}
  .plan[data-zoomable]{overflow-x:hidden;}
  .planhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
  .planhead h2{margin:0;}
  .segbar.mini{margin-bottom:0;}
  .segbar.mini .seg{font-size:12.5px;padding:6px 13px;gap:5px;}
  /* Tische als Liste – dieselben Zustände wie im Plan, nur untereinander. */
  .tlist{display:flex;flex-direction:column;gap:8px;}
  .tlrow{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;text-align:left;
    border:1px solid var(--border);border-radius:13px;background:var(--card2);color:var(--fg);}
  .tlrow:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent);}
  .tlrow:active{transform:scale(.995);}
  .tlrow .tlnum{flex:0 0 auto;min-width:48px;height:42px;padding:0 10px;display:grid;place-items:center;
    border:2px solid var(--border);border-radius:11px;background:var(--card);font-size:18px;font-weight:800;}
  .tlrow.free .tlnum{border-color:color-mix(in srgb,var(--ok) 50%,transparent);}
  .tlrow.occ .tlnum{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--card));}
  .tlrow.unpushed .tlnum{border-color:var(--accent);border-style:dashed;}
  .tlrow .tlmid{flex:1 1 auto;min-width:0;}
  .tlrow .tlname{font-weight:700;font-size:14.5px;}
  .tlrow .tlsub{color:var(--muted);font-size:12.5px;margin-top:2px;}
  .tlrow .tltot{flex:0 0 auto;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;color:var(--warn);}
  .tlrow .tpush{flex:0 0 auto;padding:7px 14px;border:none;border-radius:9px;font-size:11.5px;font-weight:800;
    letter-spacing:.8px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-fg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3);}
  .tlrow .tpush:active{transform:scale(.94);}

  /* Kasse: Kopfzeile des aktiven Vorgangs */
  .posheader{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
  .posheader .tag{font-size:18px;font-weight:800;}
  .ol.fired .olname{color:var(--muted);}
  .firedmark{font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--border);border-radius:5px;padding:1px 5px;margin-left:6px;}
  .sendbtn{flex:1;padding:14px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;font-weight:800;font-size:16px;letter-spacing:1.2px;}
  .sendbtn:disabled{opacity:.45;cursor:not-allowed;}
  .splitnote{font-size:12px;color:var(--accent);font-weight:700;text-align:center;margin-top:4px;}
  .splitbtn{flex:1;padding:12px;border:1px solid var(--border);background:var(--card2);color:var(--fg);
    border-radius:12px;font-weight:700;font-size:14px;}
  .splitbtn.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);}
  .ol.paid{opacity:.55;}
  .ol.pick{cursor:pointer;border-radius:8px;padding:4px 6px;margin:-4px -6px;}
  .ol.pick:hover{background:var(--hover);}
  .ol.sel{background:color-mix(in srgb,var(--accent) 14%,transparent);}
  .ol .cbx{display:inline-grid;place-items:center;width:19px;height:19px;border:1.5px solid var(--border);
    border-radius:5px;margin-right:8px;font-size:12px;font-weight:800;color:var(--accent);vertical-align:-4px;}
  .ol.sel .cbx{border-color:var(--accent);}

  /* Bon-Darstellung – bewusst wie Thermopapier, in beiden Themes hell */
  .bonsheet{width:100%;max-width:min(780px,96vw);}
  .bonwrap{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;max-height:74vh;overflow:auto;padding:6px 2px 14px;}
  .bon{width:320px;background:#fff;color:#15181d;padding:22px 20px 24px;position:relative;flex:0 0 auto;
    font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:12.5px;line-height:1.5;
    box-shadow:0 18px 46px rgba(0,0,0,.45);}
  .bon::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:7px;
    background:linear-gradient(45deg,transparent 33.333%,#fff 33.333%,#fff 66.667%,transparent 66.667%) 0 0/13px 13px repeat-x,
               linear-gradient(-45deg,transparent 33.333%,#fff 33.333%,#fff 66.667%,transparent 66.667%) 0 0/13px 13px repeat-x;}
  .bonhead{text-align:center;font-size:17px;font-weight:800;letter-spacing:2px;text-transform:uppercase;}
  .bonsub{text-align:center;font-size:11px;color:#5b6472;letter-spacing:1px;text-transform:uppercase;margin-top:2px;}
  .bonrule{border-top:1px dashed #9aa3b0;margin:10px 0;}
  .bonrule.double{border-top:3px double #6b7482;}
  .bonmeta{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:#3a424e;}
  .bonitem{display:flex;gap:8px;align-items:baseline;margin-top:5px;}
  .bonitem .q{font-weight:800;min-width:30px;}
  .bonitem .n{flex:1;font-weight:700;}
  .bonitem .a{font-variant-numeric:tabular-nums;font-weight:700;}
  .bonnote{font-size:11px;color:#5b6472;padding-left:38px;}
  .bontotal{display:flex;justify-content:space-between;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;margin:4px 0;}
  .bonsec{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#5b6472;margin:8px 0 4px;}
  .bonqr{font-size:8.5px;color:#6b7482;word-break:break-all;line-height:1.35;margin-top:5px;}
  .bonfoot{text-align:center;font-size:11px;color:#3a424e;margin-top:12px;}
  .bonwarn{text-align:center;font-size:10px;color:#a4442f;border:1px solid #e0b4a8;padding:4px;margin-top:10px;}
  .bonbig{text-align:center;font-size:22px;font-weight:800;letter-spacing:1px;margin:4px 0 2px;}
  .bonfree{font-size:12px;color:#15181d;line-height:1.5;white-space:pre-wrap;}
  .bonsign{margin-top:22px;font-size:10.5px;color:#5b6472;text-align:center;}
  .bonsign .sline{border-top:1px solid #15181d;margin:0 12px 5px;height:1px;}
  .sheetactions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;justify-content:center;}
  .sheetactions button{padding:11px 16px;}
  .clickrow{cursor:pointer;}
  .clickrow:hover{background:var(--hover);}

  /* ── Serverübersicht (nur Betreiber) ── */
  /* Ampel über allem: Farbe des Rahmens und der Lampe sagt den Zustand. */
  .sysampel{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);
    border-radius:15px;padding:14px 16px;margin-bottom:14px;}
  .sysampel .lampe{width:12px;height:12px;border-radius:50%;background:var(--ok);flex:0 0 auto;
    box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent);}
  .sysampel.warnung{border-color:color-mix(in srgb,var(--warn) 45%,var(--border));}
  .sysampel.warnung .lampe{background:var(--warn);box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 22%,transparent);}
  .sysampel.kritisch{border-color:color-mix(in srgb,var(--danger) 55%,var(--border));}
  .sysampel.kritisch .lampe{background:var(--danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 25%,transparent);}
  .sysampel .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
  .sysampel .txt b{font-size:16px;}
  .sysampel .txt span{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;}
  .sysampel .stand{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px;white-space:nowrap;}

  .syswarn{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
  .syswarn div{display:flex;gap:10px;align-items:baseline;padding:10px 13px;border-radius:11px;font-size:13.5px;
    background:color-mix(in srgb,var(--warn) 11%,var(--card));border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);}
  .syswarn div.kritisch{background:color-mix(in srgb,var(--danger) 12%,var(--card));
    border-color:color-mix(in srgb,var(--danger) 40%,transparent);}
  .syswarn b{flex:0 0 auto;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);}

  .sysgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px;}
  .syscard{background:var(--card);border:1px solid var(--border);border-radius:15px;padding:14px 15px;}
  .syscard .k{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.7px;}
  .syscard .v{font-size:27px;font-weight:800;margin:4px 0 9px;font-variant-numeric:tabular-nums;}
  .syscard .sub{font-size:12px;margin-top:8px;line-height:1.45;}
  .syscard.warn{border-color:color-mix(in srgb,var(--warn) 40%,var(--border));}
  .syscard.krit{border-color:color-mix(in srgb,var(--danger) 50%,var(--border));}

  .sysbar{height:7px;border-radius:5px;background:var(--card2);overflow:hidden;}
  .sysbar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accent2),var(--accent));
    transition:width .5s ease;}
  .sysbar i.warn{background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 70%,#000),var(--warn));}
  .sysbar i.krit{background:linear-gradient(90deg,color-mix(in srgb,var(--danger) 70%,#000),var(--danger));}

  .syscharts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}
  .syscharts h3{font-size:13px;font-weight:700;color:var(--muted);margin:0 0 8px;}
  .syschart svg{width:100%;height:110px;display:block;background:var(--card2);border-radius:11px;}
  .syschart svg line{stroke:var(--border);stroke-width:.5;}
  .syschart .achse{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:5px;
    font-variant-numeric:tabular-nums;}
  .syschart .legende{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px;font-size:12px;color:var(--muted);}
  .syschart .legende i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;}
  .syschart .legende b{color:var(--fg);font-variant-numeric:tabular-nums;}

  .syscols{display:flex;align-items:flex-end;gap:2px;height:70px;background:var(--card2);border-radius:11px;padding:6px;}
  .syscols i{flex:1;background:var(--accent2);border-radius:2px;min-height:1px;}
  .syscols i.fehler{background:var(--danger);}

  .syscols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;}

  .sysrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;
    border-bottom:1px solid var(--border);font-size:13.5px;}
  .sysrow:last-child{border-bottom:none;}
  .sysrow span:first-child{color:var(--muted);}
  .sysrow b{font-variant-numeric:tabular-nums;text-align:right;}
  .sysrow .sub{font-weight:400;font-size:12px;}

  .sysleer{color:var(--muted);font-size:13px;padding:14px 0;}
  .syshint{margin-top:11px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.5;
    background:var(--card2);border:1px solid var(--border);color:var(--muted);}
  .syshint code{background:var(--bg);padding:1px 5px;border-radius:5px;font-size:12px;color:var(--fg);}

  .sysseg{display:inline-flex;gap:3px;background:var(--card2);border-radius:10px;padding:3px;}
  .sysseg button{border:none;background:none;color:var(--muted);font-weight:700;font-size:12.5px;
    padding:6px 13px;border-radius:8px;}
  .sysseg button.an{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-fg);}

  /* Die Kacheln sind Tasten: dahinter liegt die Aufschlüsselung. */
  .syscard{display:block;width:100%;text-align:left;color:var(--fg);font-family:inherit;}
  .syscard[data-detail]:hover{background:var(--hover);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));}
  .syscard[data-detail]:active{transform:translateY(1px);}
  .syscard .k{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
  .syscard .mehr{font-size:10.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--accent);opacity:0;
    transition:opacity .15s;}
  .syscard[data-detail]:hover .mehr{opacity:1;}

  /* Fenster mit der Aufschlüsselung */
  .modal.weit{max-width:860px;}
  .systab{width:100%;border-collapse:collapse;font-size:13px;}
  .systab th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);
    font-weight:700;padding:6px 8px;border-bottom:1px solid var(--border);}
  .systab th.num,.systab td.num{text-align:right;font-variant-numeric:tabular-nums;}
  .systab td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:top;
    word-break:break-all;}
  .systab tr:last-child td{border-bottom:none;}
  .systab .sub{font-size:11.5px;}
  .systab .chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;
    background:var(--card2);color:var(--muted);}
  /* Der Balken sitzt unter der Zahl und macht Verhältnisse auf einen Blick klar. */
  .sysanteil{display:block;height:3px;border-radius:3px;background:var(--card2);margin-top:4px;overflow:hidden;}
  .sysanteil i{display:block;height:100%;background:var(--accent2);border-radius:3px;}

  /* Verbundene Geräte */
  .clver{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:7px;
    background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);white-space:nowrap;}
  .clver.alt{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);}
  .clok{font-size:12px;font-weight:700;color:var(--ok);}
  .clfehl{font-size:12px;font-weight:700;color:var(--danger);}
  .clkopf{display:flex;align-items:center;gap:14px;padding:14px;border-radius:13px;
    background:var(--card2);border:1px solid var(--border);}
  .clkopf .art{font-size:30px;line-height:1;}
  .clkopf b{font-size:15px;}

  /* Statuszeile auf der Startseite */
  .sysband{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin:0 0 18px;
    background:var(--card);border:1px solid var(--border);border-radius:13px;padding:11px 14px;color:var(--fg);}
  .sysband:hover{background:var(--hover);}
  .sysband .lampe{width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:var(--muted);}
  .sysband.ok .lampe{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent);}
  .sysband.warnung .lampe{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent);}
  .sysband.kritisch .lampe{background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 25%,transparent);}
  .sysband.warnung{border-color:color-mix(in srgb,var(--warn) 40%,var(--border));}
  .sysband.kritisch{border-color:color-mix(in srgb,var(--danger) 50%,var(--border));}
  .sysband .txt{display:flex;align-items:baseline;gap:9px;font-size:13.5px;flex:0 0 auto;}
  .sysband .txt .sub{font-size:12px;}
  .sysband .werte{margin-left:auto;display:flex;gap:16px;font-size:12.5px;color:var(--muted);
    font-variant-numeric:tabular-nums;white-space:nowrap;}
  .sysband .werte b{color:var(--fg);}

  /* Druckausgabe: nur die Belege, ohne Oberfläche drumherum */
  /* Ab hier die schmalen Displays. Der Block steht bewusst am Ende:
     gleich starke Regeln weiter unten gewinnen, sonst greifen die
     mobilen Überschreibungen nicht. */
  @media(max-width:900px){
    /* Serverübersicht: alles untereinander, Statuszeile umbrechen lassen. */
    .sysampel{flex-wrap:wrap;}
    .sysampel .stand{width:100%;justify-content:space-between;}
    .sysgrid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
    .syscard .v{font-size:23px;}
    .syscharts{grid-template-columns:1fr;}
    .syscols2{grid-template-columns:1fr;}
    .sysband{flex-wrap:wrap;}
    .sysband .werte{margin-left:0;width:100%;justify-content:space-between;gap:8px;}
    .sysband .nurbreit{display:none;}
    /* Auf dem Handy stehen die Filter untereinander statt gequetscht. */
    .filterbar input,.filterbar select{flex:1 1 100%;min-width:0;}
    .filterbar .sub{margin-left:0;}
    /* Auf dem Handy werden die Tabellen zu Zeilenblöcken – sonst wandern
       fünf Spalten aus dem Bild. */
    .systab thead{display:none;}
    .systab tr{display:block;border-bottom:1px solid var(--border);padding:6px 0;}
    .systab td{display:flex;justify-content:space-between;gap:12px;border:none;padding:3px 0;text-align:right;}
    .systab td::before{content:attr(data-l);color:var(--muted);font-size:11.5px;flex:0 0 auto;text-align:left;}
    .systab td.num{text-align:right;}
    .sysanteil{width:100%;}
    .grid2{grid-template-columns:1fr;}
    #app{grid-template-columns:1fr;}
    aside{flex-direction:row;align-items:center;justify-content:space-between;border-right:none;
      border-bottom:1px solid var(--border);padding:10px 12px;gap:8px;overflow:visible;}
    aside .brand{margin-bottom:0;white-space:nowrap;font-size:16px;}
    /* Die Ansichten des Moduls sitzen als feste Leiste am unteren Rand –
       in einer Kopfzeile scrollen sie auf schmalen Displays aus dem Bild. */
    #mainNav{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;flex:none;
      flex-direction:row;gap:2px;align-items:stretch;
      background:var(--card);border-top:1px solid var(--border);
      padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
      box-shadow:0 -6px 20px rgba(0,0,0,.16);overflow-x:auto;}
    #mainNav .navlink{flex:1 1 0;min-width:66px;flex-direction:column;justify-content:center;gap:3px;
      padding:7px 4px;font-size:11px;line-height:1.2;text-align:center;white-space:nowrap;border-radius:10px;}
    #mainNav .navlink .ic{width:auto;font-size:20px;}
    #mainNav .navgroup{display:none;}
    .userbox{border-top:none;padding-top:0;margin-top:0;padding-left:8px;}
    .userbox #userName{display:none;}
    .logout{margin-top:0;width:auto;white-space:nowrap;}
    main{padding:20px 16px calc(88px + env(safe-area-inset-bottom,0px));}
    /* Die Bestellung bleibt immer im Bild: einzeilige Leiste über der
       Navigation, per Tipp auf die volle Höhe ausklappbar. */
    .order{position:fixed;top:auto;left:0;right:0;bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:35;
      height:auto;padding:0;border-radius:16px 16px 0 0;border-left:none;border-right:none;border-bottom:none;
      box-shadow:0 -12px 32px rgba(0,0,0,.5);}
    .ordersum{display:flex;}
    .orderbody{display:none;padding:0 16px 16px;}
    /* Aufgeklappt bis fast an den oberen Rand – mehr Platz für die Positionen. */
    .order.open{top:calc(env(safe-area-inset-top,0px) + 10px);border-radius:16px;}
    .order.open .orderbody{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:auto;}
    .order.open .ordersum{border-bottom:1px solid var(--border);}
    .orderlines{flex:0 0 auto;min-height:0;overflow:visible;}
    /* Platz, damit die letzten Artikelkacheln nicht unter der Leiste liegen. */
    .prodpane{padding-bottom:76px;}
    /* Tabellen sind auf schmalen Displays zu breit – jede Zeile wird zur Karte,
       die Spaltenüberschrift wandert als Beschriftung vor den Wert. */
    .panel{padding:12px;}
    .panel table,.panel tbody,.panel tr,.panel td{display:block;width:auto;}
    .panel thead{display:none;}
    .panel tr{border:1px solid var(--border);border-radius:12px;background:var(--card2);
      padding:12px 14px;margin-bottom:10px;}
    .panel tr:last-child{margin-bottom:0;}
    .panel td{border:none;padding:4px 0;display:flex;justify-content:space-between;
      align-items:baseline;gap:14px;text-align:left;}
    .panel td::before{content:attr(data-l);color:var(--muted);font-size:12px;font-weight:600;
      flex:0 0 auto;white-space:nowrap;}
    .panel td:not([data-l])::before{content:none;}
    .panel td.num{text-align:right;}
    .panel td.cellhead{display:block;font-size:15px;padding:0 0 8px;margin-bottom:6px;
      border-bottom:1px dashed var(--border);}
    .panel td.cellmain{font-size:16px;font-weight:800;}
    .panel td.cellact{display:block;padding-top:10px;}
    .panel td.cellact .actions{justify-content:flex-start;}
    .panel td.cellact .btn-ghost{flex:1 1 auto;text-align:center;}
    .toast{bottom:calc(96px + env(safe-area-inset-bottom,0px));}
  }

  @media print{
    body>*{display:none !important;}
    body>.modal-bg{display:block !important;position:static !important;background:none !important;padding:0 !important;}
    .modal-bg .bonsheet{max-width:none;}
    .modal-bg .bonwrap{max-height:none;overflow:visible;display:block;padding:0;}
    .modal-bg .bon{box-shadow:none;width:auto;max-width:76mm;margin:0 auto 12mm;page-break-inside:avoid;}
    .modal-bg .bon::after{display:none;}
    .sheetactions,.modal-actions{display:none !important;}
  }
  /* ── Feinschliff des dunklen Designs ── */
  .panel,.kpi,.modcard,.order,.tcard,.login-card{
    background:linear-gradient(180deg,var(--card),var(--card2));
    box-shadow:inset 0 1px 0 var(--glass),0 1px 3px rgba(0,0,0,.5);
  }
  .prodbtn,.ptable{
    background:linear-gradient(180deg,var(--raise),var(--raise2));
    box-shadow:inset 0 1px 0 var(--glass),0 1px 3px rgba(0,0,0,.5);
  }
  aside,#mainNav{background:linear-gradient(180deg,var(--chrome),var(--chrome2));}
  .panel{border-radius:18px;}
  .modcard{border-radius:15px;}
  main{background:
    radial-gradient(1100px 460px at 12% -10%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 68%),
    radial-gradient(760px 380px at 100% 0%,color-mix(in srgb,var(--accent2) 9%,transparent),transparent 62%),
    linear-gradient(180deg,color-mix(in srgb,#ffffff 2.5%,transparent),transparent 340px);}

  .btn,.btn2,.sendbtn{
    color:var(--accent-fg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
               0 10px 26px -10px color-mix(in srgb,var(--accent) 55%,transparent);
    letter-spacing:.2px;
  }
  .btn:active,.btn2:active,.sendbtn:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
  /* Kassieren bleibt grün – Geld nehmen soll sich nicht wie jeder andere Knopf anfühlen. */
  .paybtn{
    background:linear-gradient(135deg,var(--ok),color-mix(in srgb,var(--ok) 55%,#0a1a14));
    color:#06130f;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 26px -10px color-mix(in srgb,var(--ok) 50%,transparent);
  }
  .btn-ghost,.clearbtn,.splitbtn,.logout,.mbtn,.sizebtn,.seg,.lbtn,.tlrow,.fnitem,.rowitem{
    background:linear-gradient(180deg,var(--raise),var(--raise2));
    box-shadow:inset 0 1px 0 var(--glass);
  }
  /* Die Segmentleiste bleibt eingelassen, damit ihre Knöpfe daraus hervortreten. */
  .segbar,.zoomrow.open{background:linear-gradient(180deg,var(--card2),var(--card));}
  .seg{border:1px solid transparent;}
  .seg.on{border-color:transparent;}
  .navlink.active{
    background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,transparent),
                                      color-mix(in srgb,var(--accent2) 14%,transparent));
    box-shadow:inset 0 1px 0 var(--glass);
  }
  .brand .mark{color:var(--accent-fg);box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent);}

  h1,.modcard .mn,.kpi .v,.ordertotal{letter-spacing:-.4px;}
  .kpi .v,.ordertotal,td.num,.olprice{font-variant-numeric:tabular-nums;}
  th{letter-spacing:.8px;}

  .ptable.free{border-color:color-mix(in srgb,var(--ok) 40%,transparent);}
  .ptable.occ{
    border-color:color-mix(in srgb,var(--warn) 65%,transparent);
    background:linear-gradient(180deg,color-mix(in srgb,var(--warn) 10%,var(--card)),var(--card2));
  }
  .ptable.book:hover{
    box-shadow:0 12px 30px -14px color-mix(in srgb,var(--accent) 70%,transparent),inset 0 1px 0 var(--glass);
  }
  .modcard:hover{box-shadow:inset 0 1px 0 var(--glass),0 18px 40px -18px color-mix(in srgb,var(--accent) 55%,transparent);}

  .modal-bg{background:rgba(4,6,6,.72);backdrop-filter:blur(10px) saturate(120%);}
  .modal{background:linear-gradient(180deg,var(--card),var(--card2));border-radius:20px;
    box-shadow:inset 0 1px 0 var(--glass),0 30px 80px rgba(0,0,0,.7);}
  input,select{background:linear-gradient(180deg,#0f1416,#131a1d);box-shadow:inset 0 1px 2px rgba(0,0,0,.45);}
  input:focus,select:focus{outline:2px solid color-mix(in srgb,var(--accent) 50%,transparent);}

  /* Der Verlauf im Diagramm ist im SVG fest verdrahtet – daher flächig im Akzent. */
  .bar{fill:var(--accent);opacity:.85;}
  .bar:hover{opacity:1;}
  .toast{background:linear-gradient(135deg,var(--ok),color-mix(in srgb,var(--ok) 55%,#0a1a14));color:#06130f;}

/* ── Gutscheine ─────────────────────────────────────────────────────────── */
/* Schnellwahl der Beträge im Verkaufsdialog. */
.vpresets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.vpreset{flex:1 1 80px;padding:14px 10px;border:1px solid var(--border);border-radius:12px;font-weight:800;font-size:16px;
  background:linear-gradient(180deg,var(--raise),var(--raise2));color:var(--fg);box-shadow:inset 0 1px 0 var(--glass);}
.vpreset:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);}
.vpreset.on{border-color:transparent;color:var(--accent-fg);background:linear-gradient(135deg,var(--accent),var(--accent2));}

/* Eingesetzte Gutscheine im Kassierbereich. */
.vpay{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;}
.vpayrow{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:11px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));
  background:color-mix(in srgb,var(--accent) 9%,transparent);font-size:13.5px;}
.vpayrow .vpn{font-weight:800;white-space:nowrap;}
.vpayrow .vpb{color:var(--muted);font-size:12px;margin-left:auto;white-space:nowrap;}
.vpayrow .vpa{font-weight:800;font-variant-numeric:tabular-nums;}
.vpadd{width:100%;text-align:center;}
.vpsum{display:flex;justify-content:space-between;font-weight:800;font-size:15px;padding-top:4px;}

/* Kamerafenster zum Scannen. */
.scanbg{padding:0;}
.scansheet{position:relative;width:100%;max-width:520px;background:#000;border-radius:18px;overflow:hidden;}
.scansheet video{width:100%;max-height:70vh;display:block;object-fit:cover;background:#000;}
.scanframe{position:absolute;left:50%;top:44%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);
  border:3px solid var(--accent);border-radius:18px;box-shadow:0 0 0 100vmax rgba(0,0,0,.45);}
.scanhint{position:absolute;left:0;right:0;bottom:74px;text-align:center;color:#fff;font-weight:700;font-size:14px;
  text-shadow:0 2px 8px rgba(0,0,0,.8);}
.scansheet .modal-actions{position:absolute;left:0;right:0;bottom:0;justify-content:center;padding:14px;margin:0;}
.vscan{width:100%;margin-bottom:14px;}

/* Gutscheinbon. */
.voucherbon{text-align:center;}
.voucherbon .vbamount{font-size:34px;font-weight:800;letter-spacing:-1px;margin:14px 0 4px;}
.voucherbon .vbcode{font-size:15px;font-weight:700;letter-spacing:2px;margin-bottom:12px;}
.voucherbon .vbqr{display:flex;justify-content:center;margin:10px 0 14px;}
.voucherbon .vbqr svg{width:170px;height:170px;}
.voucherbon .bonlines{text-align:left;}
.voucherbon .vbnote{margin-top:10px;font-size:11px;font-weight:700;}

/* Gutscheinmodul: Liste und Akte. */
.vcode{font-weight:800;letter-spacing:.6px;font-variant-numeric:tabular-nums;}
.vchip{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.4px;padding:3px 9px;border-radius:999px;
  border:1px solid var(--border);background:var(--card2);color:var(--muted);white-space:nowrap;}
.vchip.v-ACTIVE{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);
  background:color-mix(in srgb,var(--ok) 12%,transparent);}
.vchip.v-PARTIALLY_REDEEMED{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);}
.vchip.v-BLOCKED,.vchip.v-CANCELED{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent);
  background:color-mix(in srgb,var(--danger) 10%,transparent);}
.vchip.v-EXPIRED,.vchip.v-REPLACED,.vchip.v-PENDING_PAYMENT{color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent);}

.vfile{max-width:620px;}
.vfhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.vfcode{font-size:19px;font-weight:800;letter-spacing:1px;}
.vfstatus{margin-top:6px;color:var(--muted);font-size:12.5px;}
.vfbal{text-align:right;line-height:1.1;}
.vfbal span{font-size:27px;font-weight:800;font-variant-numeric:tabular-nums;}
.vfbal small{display:block;color:var(--muted);font-size:12px;margin-top:3px;}
.vfbar{height:7px;border-radius:999px;background:var(--card2);border:1px solid var(--border);overflow:hidden;margin:14px 0 16px;}
.vfbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));}
.vfmeta{display:flex;flex-direction:column;gap:6px;font-size:13.5px;}
.vfmeta div{display:flex;justify-content:space-between;gap:14px;}
.vfmeta span{color:var(--muted);}
.vfh{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin:20px 0 8px;}
.vledger{display:flex;flex-direction:column;gap:6px;max-height:34vh;overflow:auto;}
.vlrow{display:grid;grid-template-columns:1fr auto auto;gap:4px 12px;align-items:baseline;
  padding:8px 11px;border:1px solid var(--border);border-radius:11px;background:var(--card2);font-size:13px;}
.vlrow .vlt{font-weight:700;}
.vlrow .vla{font-weight:800;font-variant-numeric:tabular-nums;}
.vlrow .vla.pos{color:var(--ok);} .vlrow .vla.neg{color:var(--danger);}
.vlrow .vlb{color:var(--muted);font-variant-numeric:tabular-nums;}
.vlrow .vld{grid-column:1/-1;color:var(--muted);font-size:11.5px;}
.vlrow .vlr{grid-column:1/-1;color:var(--muted);font-size:12px;font-style:italic;}
.vfactions{flex-wrap:wrap;}

/* Gutscheinauswertung. */
.hint{margin-top:12px;font-size:12.5px;color:var(--muted);line-height:1.5;}
.agchart{display:flex;align-items:flex-end;gap:8px;height:190px;padding-top:8px;}
.agcol{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%;}
.agbar{position:relative;width:100%;max-width:64px;min-height:3px;border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 26%,transparent),color-mix(in srgb,var(--accent) 10%,transparent));
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-bottom:none;overflow:hidden;}
.agbar .agopen{position:absolute;left:0;right:0;bottom:0;display:block;
  background:linear-gradient(180deg,var(--accent),var(--accent2));}
.aglabel{font-size:11px;color:var(--muted);text-align:center;white-space:nowrap;}
.agval{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;}
.serchart{display:flex;align-items:flex-end;gap:2px;height:150px;}
.sercol{position:relative;display:flex;align-items:flex-end;gap:1px;height:100%;}
.sercol i{display:block;flex:1;min-height:2px;border-radius:3px 3px 0 0;}
.sersold{background:linear-gradient(180deg,var(--accent),var(--accent2));}
.serred{background:linear-gradient(180deg,var(--ok),color-mix(in srgb,var(--ok) 45%,#0a1a14));}
.serlegend{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--muted);}
.serlegend span{display:flex;align-items:center;gap:6px;}
.serlegend i{width:11px;height:11px;border-radius:3px;display:inline-block;}
.upgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.upgrid div{background:var(--card2);border:1px solid var(--border);border-radius:13px;padding:14px;}
.upgrid div.hi{border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);}
.upgrid span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;}
.upgrid b{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;}
.upgrid small{display:block;margin-top:4px;font-size:11px;color:var(--muted);}

/* Kunden. */
.cfile{max-width:660px;}
.cstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:16px 0 4px;}
.cstats div{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:11px 13px;}
.cstats span{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px;}
.cstats b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;}
.cfav{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;}
.cfav div{background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:9px 12px;}
.cfav b{display:block;font-size:13.5px;}
.cfav span{font-size:11.5px;color:var(--muted);}
.cweek{display:flex;align-items:flex-end;gap:6px;height:80px;}
.cweek div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%;}
.cweek i{display:block;width:100%;min-height:3px;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--accent),var(--accent2));}
.cweek span{font-size:10.5px;color:var(--muted);}
.cbtn{margin-left:auto;}
.cbtn.on{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent);}
.cpick{display:flex;flex-direction:column;gap:7px;margin-top:12px;max-height:44vh;overflow:auto;}
.cpickrow{display:block;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--border);border-radius:12px;
  background:linear-gradient(180deg,var(--raise),var(--raise2));color:var(--fg);}
.cpickrow:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);}
.cpickrow b{display:block;font-size:14px;}
.cpickrow span{display:block;font-size:12px;color:var(--muted);margin-top:2px;}
.cpickrow small{display:block;font-size:11px;color:var(--muted);margin-top:3px;}
.checkline{display:flex;align-items:flex-start;gap:9px;margin-top:14px;font-size:13.5px;cursor:pointer;}
.checkline input{width:auto;margin-top:2px;}

/* Hinweis auf dünne Datenlage – gehört über die Zahlen, nicht darunter. */
.cover{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;padding:13px 15px;border-radius:13px;
  border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);
  background:color-mix(in srgb,var(--warn) 10%,transparent);}
.cover b{font-size:14px;color:var(--warn);}
.cover span{font-size:12.5px;color:var(--muted);line-height:1.5;}
.cover.low{border-color:color-mix(in srgb,var(--danger) 40%,transparent);
  background:color-mix(in srgb,var(--danger) 9%,transparent);}
.cover.low b{color:var(--danger);}

/* Plattformverwaltung. */
.pfile{max-width:680px;}
/* Im Formular sollen die beiden Spalten gleich breit sein – die Aufteilung
   1,6 zu 1 stammt aus dem Seitenlayout und passt hier nicht. */
.pfile .grid2{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:0;}
.pfile .sysseg{display:flex;width:100%;}
.pfile .sysseg button{flex:1;text-align:center;}
.pfile .systab{margin-top:4px;}
.pfile .systab td{vertical-align:middle;}
.pfile .actions{display:flex;gap:8px;flex-wrap:wrap;}
/* Unwiderrufliches sieht auch so aus. */
.btn-ghost.gefahr{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--border));}
.btn-ghost.gefahr:hover{background:color-mix(in srgb,var(--danger) 12%,transparent);}
.btn-ghost.schmal{padding:4px 10px;font-size:12.5px;}
/* Kennungen sollen sich abheben, ohne die Zeile zu sprengen. */
code.klein{font-size:11px;background:var(--card2);padding:2px 6px;border-radius:5px;word-break:break-all;}
/* Abweichende Preise je Standort: Name links, im Haus und außer Haus daneben. */
.sprices{display:flex;flex-direction:column;gap:7px;margin-top:6px;}
.sprice{display:grid;grid-template-columns:1fr 90px 90px;gap:8px;align-items:center;}
.sprice .nm{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sprice input{padding:8px 10px;font-size:14px;text-align:right;}
/* Kopfzeile über den beiden Preisspalten – ohne sie war nicht zu erkennen,
   welches Feld „im Haus" und welches „außer Haus" meint. */
.sprice.kopf{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700;}
.sprice.kopf span:not(.nm){text-align:right;padding-right:10px;}
/* Steht kein eigener Preis drin, zeigt das Feld den des Betriebs – deutlich
   blasser, damit ein Vorschlag nicht wie ein gesetzter Wert aussieht. */
input::placeholder{color:var(--muted);opacity:.55;}
.sprice input::placeholder{font-style:italic;}

/* Filterleiste der Artikelübersicht */
.filterbar{gap:8px;flex-wrap:wrap;}
.filterbar input,.filterbar select{width:auto;flex:0 1 auto;min-width:150px;padding:9px 11px;font-size:14px;}
.filterbar input{flex:1 1 240px;}
.filterbar .sub{margin-left:auto;white-space:nowrap;}
/* Abweichende Preise unter dem allgemeinen – klein, aber lesbar. */
td .sub.abw{font-size:11.5px;line-height:1.5;margin-top:3px;color:var(--warn);}
/* Filterleiste der Artikelübersicht */
.filterbar{gap:8px;flex-wrap:wrap;}
.filterbar input,.filterbar select{width:auto;flex:0 1 auto;min-width:150px;padding:9px 11px;font-size:14px;}
.filterbar input{flex:1 1 240px;}
.filterbar .sub{margin-left:auto;white-space:nowrap;}
/* Abweichende Preise unter dem allgemeinen – klein, aber lesbar. */
td .sub.abw{font-size:11.5px;line-height:1.5;margin-top:3px;color:var(--warn);}
tr.inaktiv{opacity:.55;}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px;margin:12px 0 4px;}
.mtile{display:flex;flex-direction:column;gap:4px;padding:13px;border-radius:13px;text-align:left;
  border:1px solid var(--border);background:linear-gradient(180deg,var(--raise),var(--raise2));color:var(--fg);}
.mtile b{font-size:14.5px;}
.mtile span{font-size:11.5px;color:var(--muted);}
.mtile.on{border-color:transparent;color:var(--accent-fg);
  background:linear-gradient(135deg,var(--accent),var(--accent2));}
.mtile.on span{color:color-mix(in srgb,var(--accent-fg) 75%,transparent);}
.mtile[disabled]{opacity:.6;cursor:default;}
.storegrid{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.storerow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--card2);}
.storerow .sname{font-weight:700;font-size:13.5px;}
.sflags{display:flex;gap:6px;}
.sflag{display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:9px;font-size:11.5px;font-weight:800;
  border:1px solid var(--border);background:var(--card);color:var(--muted);}
.sflag i{font-style:normal;}
.sflag.an{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);
  background:color-mix(in srgb,var(--ok) 12%,transparent);}
.sflag.aus{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent);
  background:color-mix(in srgb,var(--danger) 10%,transparent);}

/* Support-Modus: unübersehbar, weil hier fremde Daten bearbeitet werden. */
.enteredbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;
  justify-content:center;gap:14px;padding:9px 16px calc(9px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(135deg,var(--warn),color-mix(in srgb,var(--warn) 60%,#3a2a06));
  color:#1a1204;font-weight:800;font-size:13.5px;box-shadow:0 -8px 24px rgba(0,0,0,.4);}
.enteredbar b{font-weight:900;}
.enteredbar .ebleave{padding:6px 14px;border-radius:9px;border:1px solid rgba(0,0,0,.35);
  background:rgba(0,0,0,.15);color:#1a1204;font-weight:800;font-size:12.5px;}
body.entered main{padding-bottom:80px;}
@media(max-width:900px){
  .enteredbar{bottom:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:9px;}
  .enteredbar .ebtext{font-size:12.5px;}
  /* Auf dem Handy stehen die Filter untereinander statt gequetscht.
     Dieser Block ist der letzte der Datei – nur hier gewinnen gleich starke
     Regeln gegen die Grundregeln weiter oben. */
  .filterbar input,.filterbar select{flex:1 1 100%;min-width:0;}
  .filterbar .sub{margin-left:0;}
  .sprice{grid-template-columns:1fr 80px 80px;}
}