/* BONDI Lounge App – gemeinsames Design (Kunde, Kasse, Admin) */
@font-face { font-family: Poppins; font-weight: 300; font-display: swap; src: url(../fonts/poppins-Light.woff) format('woff'); }
@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url(../fonts/poppins-Regular.woff) format('woff'); }
@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url(../fonts/poppins-Medium.woff) format('woff'); }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url(../fonts/poppins-Bold.woff) format('woff'); }

:root {
  --bg: #141210;
  --bg2: #1a1714;
  --card: #201c18;
  --card2: #2a251f;
  --line: rgba(240, 235, 222, .10);
  --line2: rgba(240, 235, 222, .2);
  --text: #f0ebde;
  --muted: #a59d8c;
  --dim: #6f685b;
  --gold: #EFC21C;
  --gold2: #c99a0e;
  --gold-soft: rgba(var(--gold-rgb), .12);
  --green: #84c46e;
  --red: #e0674f;
  --blue: #6fa8dc;
  --on-gold: #141210;
  --gold-rgb: 239, 194, 28;
  --bg-rgb: 20, 18, 16;
  --text-rgb: 240, 235, 222;
  --r: 0px;
  --fs: 1;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --font: Poppins, "Segoe UI", system-ui, -apple-system, "Noto Sans Arabic", "Geeza Pro", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 400 calc(15px * var(--fs, 1))/1.5 var(--font); }
body { min-height: 100vh; min-height: 100dvh; overscroll-behavior-y: none; }
[dir=rtl] { --font: "Noto Sans Arabic", "Geeza Pro", Tahoma, Poppins, system-ui, sans-serif; }
img { max-width: 100%; display: block; }
a { color: var(--gold); }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
.hidden { display: none !important; }

/* ---------- Typo-Bausteine ---------- */
.eyebrow { font-size: calc(10.5px * var(--fs, 1)); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
[dir=rtl] .eyebrow { letter-spacing: 0; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: calc(13px * var(--fs, 1)); }
.tiny { font-size: calc(11.5px * var(--fs, 1)); }
.price { font-weight: 700; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.title-xl { font-size: calc(28px * var(--fs, 1)); line-height: 1.15; }
.title-l { font-size: calc(21px * var(--fs, 1)); line-height: 1.2; }
.title-m { font-size: calc(17px * var(--fs, 1)); }
.center { text-align: center; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.between { justify-content: space-between; }

/* ---------- Buttons ---------- */
.btn { appearance: none; border: 1px solid var(--line2); background: transparent; color: var(--text); padding: 12px 18px; font-weight: 600; font-size: calc(14px * var(--fs, 1));
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; min-height: 46px; transition: background .15s, border-color .15s, transform .08s; }
.btn:active { transform: scale(.98); }
.btn:hover { border-color: var(--gold); }
.btn.gold { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.btn.gold:hover { background: #ffd23a; }
.btn.ghost { border-color: transparent; }
.btn.danger { border-color: rgba(224, 103, 79, .5); color: #ffb4a4; }
.btn.ok { border-color: rgba(132, 196, 110, .5); color: #c4ecb5; }
.btn.block { width: 100%; }
.btn.sm { padding: 7px 12px; min-height: 36px; font-size: calc(13px * var(--fs, 1)); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.icon-btn { appearance: none; border: 1px solid var(--line2); background: rgba(var(--bg-rgb), .5); width: 40px; height: 40px; display: inline-grid; place-items: center; cursor: pointer; color: var(--text); flex: none; }
.icon-btn:hover { border-color: var(--gold); }
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Formulare ---------- */
.field { display: block; }
.field > span { display: block; font-size: calc(12px * var(--fs, 1)); color: var(--muted); margin-bottom: 5px; font-weight: 500; }
.input, select.input, textarea.input { width: 100%; background: var(--card); border: 1px solid var(--line); color: var(--text); font: inherit; padding: 12px 13px; border-radius: 0; min-height: 46px; }
textarea.input { min-height: 90px; resize: vertical; }
.input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: calc(13.5px * var(--fs, 1)); color: var(--muted); cursor: pointer; }
.check input { accent-color: var(--gold); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { opacity: 0; position: absolute; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; background: var(--card2); border: 1px solid var(--line2); transition: .15s; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--muted); transition: .15s; }
.switch input:checked + i { background: var(--gold-soft); border-color: var(--gold); }
.switch input:checked + i::after { transform: translateX(20px); background: var(--gold); }

/* ---------- Karten / Listen ---------- */
.card { background: var(--card); border: 1px solid var(--line); padding: 16px; }
.card.gold { border-color: rgba(var(--gold-rgb), .45); background: linear-gradient(160deg, rgba(var(--gold-rgb), .1), rgba(var(--gold-rgb), 0) 60%), var(--card); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: calc(11px * var(--fs, 1)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--line2); white-space: nowrap; }
.pill.gold { color: var(--gold); border-color: rgba(var(--gold-rgb), .5); }
.pill.green { color: var(--green); border-color: rgba(132, 196, 110, .5); }
.pill.red { color: var(--red); border-color: rgba(224, 103, 79, .5); }
.pill.blue { color: var(--blue); border-color: rgba(111, 168, 220, .5); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; flex: none; }
.dot.off { background: var(--red); }
.divider { height: 1px; background: var(--line); margin: 18px 0; }
.empty { text-align: center; color: var(--muted); padding: 36px 16px; }
.empty .sun { width: 56px; height: 56px; margin: 0 auto 14px; opacity: .85; }

/* ---------- Toast & Modal ---------- */
#toasts { position: fixed; left: 50%; top: calc(70px + var(--safe-t)); transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { background: #2d2721; border: 1px solid var(--line2); border-left: 3px solid var(--gold); padding: 12px 14px; font-size: calc(14px * var(--fs, 1)); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: toastIn .2s ease-out; }
.toast.err { border-left-color: var(--red); }
.toast.ok { border-left-color: var(--green); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }
.modal-bg { position: fixed; inset: 0; background: rgba(8, 7, 6, .72); z-index: 90; display: flex; align-items: flex-end; justify-content: center; animation: fade .15s; backdrop-filter: blur(3px); }
@media (min-width: 700px) { .modal-bg { align-items: center; } }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--bg2); border: 1px solid var(--line2); width: min(100%, 560px); max-height: 92vh; max-height: 92dvh; overflow: auto; padding: 22px 20px calc(22px + var(--safe-b)); animation: up .2s ease-out; }
.modal.wide { width: min(100%, 860px); }
@keyframes up { from { transform: translateY(24px); opacity: .5; } }
.modal-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.modal-head h2 { flex: 1; font-size: calc(19px * var(--fs, 1)); }

/* ---------- Bilder-Fallback ---------- */
.ph { width: 100%; height: 100%; }
.area .ph, .hero .ph, .contest .img .ph, .cat-banner .ph { position: absolute; inset: 0; }
.ph-sun { width: 34%; max-width: 90px; aspect-ratio: 1; background: url(../img/bondi-sun.png) center/contain no-repeat; opacity: .5; }
.ph { background: radial-gradient(circle at 70% 30%, rgba(var(--gold-rgb), .28), rgba(var(--gold-rgb), 0) 55%), linear-gradient(135deg, #2a241d, #17140f); display: grid; place-items: center; color: rgba(var(--gold-rgb), .7); font-weight: 700; }
.spinner { width: 22px; height: 22px; border: 2px solid var(--line2); border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: grid; place-items: center; padding: 60px 0; }

/* =====================================================================
   KUNDEN-APP
   ===================================================================== */
.k-app { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; padding-bottom: calc(84px + var(--safe-b)); position: relative; }
@media (min-width: 600px) { .k-app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
.k-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--safe-t)) 16px 10px; background: rgba(var(--bg-rgb), .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.k-top img.wm { height: 22px; width: auto; }
.k-top .grow { min-width: 0; }
.k-section { padding: 22px 16px; }
.k-section + .k-section { padding-top: 6px; }

.k-tabbar { position: fixed; z-index: 30; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 560px); display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(var(--bg-rgb), .96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding-bottom: var(--safe-b); }
.k-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px 8px; font-size: calc(10.5px * var(--fs, 1)); font-weight: 500; color: var(--dim); text-decoration: none; position: relative; }
.k-tabbar a.on { color: var(--gold); }
.k-tabbar a.on::before { content: ''; position: absolute; top: -1px; left: 30%; right: 30%; height: 2px; background: var(--gold); }
.k-tabbar .badge { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 16px; height: 16px; border-radius: 8px; background: var(--gold); color: var(--on-gold); font-size: calc(10px * var(--fs, 1)); font-weight: 700; display: grid; place-items: center; padding: 0 4px; }

/* Hero */
.hero { position: relative; height: 440px; overflow: hidden; background: #23201a; }
.hero > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--bg-rgb), .55) 0%, rgba(var(--bg-rgb), 0) 28%, rgba(var(--bg-rgb), .2) 52%, rgba(var(--bg-rgb), .88) 84%, #141210 100%); }
.hero-inner { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 0 20px 22px; }
.hero-inner img.wm { height: 48px; width: auto; }
.hero-top { position: absolute; z-index: 2; top: calc(14px + var(--safe-t)); left: 14px; right: 14px; display: flex; justify-content: space-between; gap: 10px; }
.glass { background: rgba(var(--bg-rgb), .55); backdrop-filter: blur(8px); border: 1px solid rgba(var(--text-rgb), .18); padding: 8px 11px; display: inline-flex; align-items: center; gap: 7px; font-size: calc(10.5px * var(--fs, 1)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.quick { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.quick a { background: var(--card); border: 1px solid var(--line); padding: 14px 8px 12px; text-align: center; text-decoration: none; color: var(--text); font-size: calc(12.5px * var(--fs, 1)); font-weight: 500; display: grid; gap: 6px; justify-items: center; }
.quick a .icon { color: var(--gold); width: 24px; height: 24px; }
.quick a:hover { border-color: var(--gold); }

.hscroll { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 6px; margin: 0 -16px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.area { flex: none; width: 62%; max-width: 260px; scroll-snap-align: start; position: relative; aspect-ratio: 4/5; background: var(--card); overflow: hidden; }
.area img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.area::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, rgba(var(--bg-rgb), .92)); }
.area > .txt { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; }

.hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: calc(14px * var(--fs, 1)); }
.hours .today { color: var(--gold); font-weight: 600; }

/* Karte */
.sec-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: calc(61px + var(--safe-t)); z-index: 15; }
.sec-tabs button { appearance: none; background: none; border: 0; padding: 14px 6px 12px; font-weight: 600; font-size: calc(13.5px * var(--fs, 1)); color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.sec-tabs button.on { color: var(--gold); border-bottom-color: var(--gold); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; scrollbar-width: none; position: sticky; top: calc(108px + var(--safe-t)); z-index: 14; background: rgba(var(--bg-rgb), .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 8px 14px; border: 1px solid var(--line2); background: transparent; color: var(--text); font-size: calc(12.5px * var(--fs, 1)); font-weight: 600; cursor: pointer; white-space: nowrap; }
.chip.on { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.cat-head { position: relative; margin: 22px 16px 10px; }
.cat-banner { height: 130px; overflow: hidden; position: relative; margin: 0 0 14px; background: var(--card); }
.cat-banner img { width: 100%; height: 100%; object-fit: cover; }
.cat-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--bg-rgb), .85), rgba(var(--bg-rgb), .1)); }
.cat-banner > .txt { position: absolute; z-index: 1; left: 16px; bottom: 14px; right: 16px; }
.items { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.item { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--bg); cursor: pointer; }
.item:hover { background: var(--bg2); }
.item .thumb { width: 64px; height: 64px; flex: none; background: var(--card); overflow: hidden; display: grid; place-items: center; }
.item .thumb img { width: 100%; height: 100%; object-fit: contain; }
.item .thumb.cover img { object-fit: cover; }
.item h3 { font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.item p { margin: 2px 0 0; font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); line-height: 1.4; }
.item.off { opacity: .45; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line2); }
.qty button { appearance: none; background: none; border: 0; width: 34px; height: 34px; cursor: pointer; font-size: calc(18px * var(--fs, 1)); color: var(--gold); display: grid; place-items: center; }
.qty span { min-width: 22px; text-align: center; font-weight: 700; font-size: calc(14px * var(--fs, 1)); }
.add-btn { appearance: none; width: 36px; height: 36px; border: 1px solid var(--gold); background: transparent; color: var(--gold); cursor: pointer; display: grid; place-items: center; flex: none; }
.add-btn:hover { background: var(--gold); color: var(--on-gold); }

.cartbar { position: fixed; z-index: 25; left: 50%; transform: translateX(-50%); bottom: calc(66px + var(--safe-b)); width: min(calc(100% - 24px), 536px); background: var(--gold); color: var(--on-gold);
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 34px rgba(0, 0, 0, .5); border: 0; font-size: calc(15px * var(--fs, 1)); }
.cartbar.bump { animation: bump .35s ease-out; }
@keyframes bump { 40% { transform: translateX(-50%) scale(1.04); } }
.cartbar .n { background: #141210; color: var(--gold); min-width: 26px; height: 26px; display: grid; place-items: center; font-size: calc(13px * var(--fs, 1)); }
.tablebar { background: var(--gold-soft); border-bottom: 1px solid rgba(var(--gold-rgb), .35); padding: 10px 16px; display: flex; align-items: center; gap: 10px; font-size: calc(13.5px * var(--fs, 1)); }

.detail-img { margin: -22px -20px 18px; height: 280px; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(var(--gold-rgb), .16), transparent 60%), var(--card); }
.detail-img img { max-height: 260px; width: auto; }
.detail-img.cover img { width: 100%; height: 100%; max-height: none; object-fit: cover; }

/* Status-Timeline */
.status-steps { display: flex; gap: 6px; margin-top: 10px; }
.status-steps i { flex: 1; height: 3px; background: var(--card2); }
.status-steps i.on { background: var(--gold); }

/* Gewinnspiel */
.contest { position: relative; overflow: hidden; border: 1px solid rgba(var(--gold-rgb), .4); background: var(--card); }
.contest .img { aspect-ratio: 16/9; background: var(--card2); overflow: hidden; }
.contest .img img { width: 100%; height: 100%; object-fit: cover; }
.contest .body { padding: 16px; }

/* QR-Scanner */
.scanner { position: relative; aspect-ratio: 1; background: #000; overflow: hidden; }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scanner::after { content: ''; position: absolute; inset: 18%; border: 2px solid var(--gold); box-shadow: 0 0 0 999px rgba(0, 0, 0, .45); }
.codebox { font: 700 calc(28px * var(--fs, 1))/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .25em; text-align: center; padding: 14px; background: var(--card); border: 1px dashed rgba(var(--gold-rgb), .5); color: var(--gold); }

/* Altersabfrage */
.gate { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: grid; place-items: center; padding: 24px; text-align: center; }
.gate .sun { width: 120px; height: 120px; margin: 0 auto 26px; }
.gate .wm { height: 40px; width: auto; margin: 0 auto 20px; }

/* =====================================================================
   KASSE & ADMIN
   ===================================================================== */
.s-app { min-height: 100vh; display: flex; flex-direction: column; }
.s-top { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--bg2); position: sticky; top: 0; z-index: 20; }
.s-top img.wm { height: 26px; width: auto; }
.s-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.s-top { flex-wrap: wrap; }
.s-tabs a { padding: 9px 14px; font-weight: 600; font-size: calc(13.5px * var(--fs, 1)); color: var(--muted); text-decoration: none; border: 1px solid transparent; white-space: nowrap; position: relative; }
.s-tabs a.on { color: var(--text); border-color: var(--line2); background: var(--card); }
.s-tabs a .badge { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; background: var(--gold); color: var(--on-gold); font-size: calc(11px * var(--fs, 1)); border-radius: 10px; margin-left: 6px; }
.s-main { flex: 1; padding: 20px 18px 40px; }
.clock { font: 700 calc(20px * var(--fs, 1))/1 var(--font); font-variant-numeric: tabular-nums; }

/* Bestell-Board */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .board { grid-template-columns: 1fr; } }
.col-head { display: flex; align-items: center; gap: 10px; padding: 0 2px 10px; border-bottom: 2px solid var(--line2); margin-bottom: 12px; }
.col-head.new { border-color: var(--gold); }
.col-head.progress { border-color: var(--blue); }
.col-head.served { border-color: var(--green); }
.ocard { background: var(--card); border: 1px solid var(--line); margin-bottom: 12px; }
.ocard.new { border-color: var(--gold); animation: pulse 1.6s ease-in-out 4; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .25); } }
.ocard header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ocard .tbl { font-size: calc(22px * var(--fs, 1)); font-weight: 700; color: var(--gold); line-height: 1; }
.ocard ul { list-style: none; margin: 0; padding: 10px 14px; }
.ocard li { display: flex; gap: 10px; padding: 4px 0; font-size: calc(15px * var(--fs, 1)); }
.ocard li b { min-width: 28px; color: var(--gold); }
.ocard footer { display: flex; gap: 8px; padding: 10px 14px 14px; flex-wrap: wrap; }
.ocard .note { margin: 0 14px 10px; padding: 8px 10px; background: var(--gold-soft); font-size: calc(13px * var(--fs, 1)); }

.tbl-list { width: 100%; border-collapse: collapse; }
.tbl-list th { text-align: left; font-size: calc(11px * var(--fs, 1)); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line2); }
.tbl-list td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: calc(14px * var(--fs, 1)); }
.tbl-list tr:hover td { background: rgba(255, 255, 255, .015); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--card); border: 1px solid var(--line); padding: 16px; }
.kpi b { display: block; font-size: calc(28px * var(--fs, 1)); line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi.link { cursor: pointer; text-decoration: none; color: inherit; }
.kpi.link:hover { border-color: var(--gold); }
.page-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: calc(24px * var(--fs, 1)); }
.page-head .grow { min-width: 200px; }
.split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.side-list { background: var(--card); border: 1px solid var(--line); }
.side-list button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 12px 14px; cursor: pointer; color: var(--text); font-size: calc(14px * var(--fs, 1)); }
.side-list button.on { background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold); }
.side-list button:hover { background: rgba(255, 255, 255, .03); }
.adm-items .item { background: var(--card); }
.drag { cursor: grab; color: var(--dim); padding: 4px; touch-action: none; }

/* Grundriss */
.floor-wrap { background: var(--card); border: 1px solid var(--line); padding: 12px; overflow: auto; }
.floor { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.floor .grid-line { stroke: rgba(var(--text-rgb), .05); stroke-width: .04; }
.floor .zone rect { fill: rgba(var(--gold-rgb), .05); stroke: rgba(var(--gold-rgb), .35); stroke-width: .06; stroke-dasharray: .3 .2; }
.floor .zone text { fill: rgba(var(--gold-rgb), .75); font-size: .62px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.floor .tbl-shape { fill: #2f2922; stroke: rgba(var(--text-rgb), .45); stroke-width: .07; }
.floor .t.sel .tbl-shape, .floor .zone.sel rect { stroke: var(--gold); stroke-width: .14; }
.floor .t text { fill: var(--text); font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.floor .t .seats { fill: var(--muted); font-weight: 500; }
.floor .t.busy .tbl-shape { fill: rgba(var(--gold-rgb), .3); stroke: var(--gold); }
.floor .t.reserved .tbl-shape { fill: rgba(111, 168, 220, .22); stroke: var(--blue); }
.floor .handle { fill: var(--gold); cursor: nwse-resize; }
.floor .t, .floor .zone { cursor: move; }
.floor.readonly .t, .floor.readonly .zone { cursor: pointer; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); margin-top: 10px; }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--line2); }

/* Druckansicht Tisch-QR */
.print-sheet { display: none; }
@media print {
  body > *:not(.print-sheet) { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .print-sheet { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0; }
  .qr-card { break-inside: avoid; border: 1px dashed #bbb; padding: 10mm 8mm; text-align: center; height: 135mm; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4mm; font-family: Poppins, sans-serif; background: #141210 !important; color: #f0ebde !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .qr-card img { height: 12mm; width: auto; }
  .qr-card .q { background: #fff; padding: 3mm; }
  .qr-card .q svg { width: 55mm; height: 55mm; display: block; }
  .qr-card h2 { font-size: 22pt; margin: 0; color: #EFC21C !important; }
  .qr-card p { margin: 0; font-size: 10pt; }
  @page { size: A4; margin: 8mm; }
}

/* =====================================================================
   v1.1 – Bildschirmfüllendes Layout für Kasse & Admin (Seite scrollt nicht)
   ===================================================================== */
.version { font-size: calc(11px * var(--fs, 1)); color: var(--dim); letter-spacing: .02em; }
.k-version { display: block; margin-top: 8px; }
.s-app { height: 100vh; height: 100dvh; overflow: hidden; }
.s-top { flex: none; flex-wrap: nowrap; padding: 8px 14px; gap: 10px; }
.s-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.s-tabs::-webkit-scrollbar { display: none; }
.s-tabs a { padding: 8px 11px; font-size: calc(13px * var(--fs, 1)); }
.s-main { flex: 1; min-height: 0; overflow: hidden; padding: 14px 16px; display: flex; flex-direction: column; }
.s-main > * { flex: none; }
.s-main > .fill, .s-main > .floor-editor, .s-main > .board, .s-main > .split, .s-main > .scroll { flex: 1; min-height: 0; }
.s-foot { flex: none; display: flex; gap: 12px; align-items: center; padding: 5px 16px; border-top: 1px solid var(--line); background: var(--bg2); font-size: calc(11px * var(--fs, 1)); color: var(--dim); }
.scroll { overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--card2) transparent; }
.page-head { margin-bottom: 12px; }
.page-head h1 { font-size: calc(21px * var(--fs, 1)); }
.page-head p { font-size: calc(13px * var(--fs, 1)); }
/* Bestell-Board: jede Spalte scrollt für sich */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.board > section { display: flex; flex-direction: column; min-height: 0; }
.board > section > .scroll { flex: 1; padding-right: 4px; }
@media (max-width: 1000px) { .board { grid-template-columns: repeat(3, minmax(240px, 1fr)); overflow-x: auto; } }
.split { align-items: stretch; }
.split > * { min-height: 0; }
.side-list { overflow-y: auto; }
/* Grundriss füllt den freien Platz */
.floor-editor { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 14px; }
.floor-main { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.floor-panel { overflow-y: auto; align-self: start; max-height: 100%; }
.floor-wrap.fit { flex: 1; min-height: 0; padding: 8px; display: flex; overflow: hidden; }
.floor-wrap.fit .floor { width: 100%; height: 100%; }
.plan-fit { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 900px) { .floor-editor { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; } .floor-panel { max-height: 40vh; } }
.floor .room { fill: rgba(255, 255, 255, .015); stroke: rgba(var(--text-rgb), .25); stroke-width: .08; }
.floor .obj rect { fill: #5a4320; stroke: #c99a0e; stroke-width: .1; }
.floor .obj text { fill: #ffe7a3; font-weight: 700; text-anchor: middle; dominant-baseline: central; text-transform: uppercase; letter-spacing: .05em; pointer-events: none; }
.floor .obj.sel rect { stroke: var(--gold); stroke-width: .18; }
.floor .wall .stroke { stroke: #d9d2c3; stroke-width: .32; stroke-linecap: round; }
.floor .wall .hit { stroke: transparent; stroke-width: 1; cursor: move; }
.floor .wall.sel .stroke { stroke: var(--gold); }
.floor .wall.out .stroke { stroke: #9fc58f; stroke-dasharray: .5 .3; stroke-width: .22; }
.floor .wall-draft { stroke: var(--gold); stroke-width: .32; stroke-linecap: round; stroke-dasharray: .4 .25; pointer-events: none; }
.floor.wallmode { cursor: crosshair; }
.floor.wallmode * { cursor: crosshair !important; }
.floor circle.handle { fill: var(--gold); cursor: grab; }
.floor .zone.out rect { fill: rgba(132, 196, 110, .06); stroke: rgba(132, 196, 110, .55); }
.floor .zone.out text { fill: rgba(160, 214, 140, .85); }
.floor .t.out .tbl-shape { stroke: #9fc58f; stroke-dasharray: .35 .2; }
.floor .t.disabled .tbl-shape { fill: transparent; stroke: rgba(var(--text-rgb), .25); stroke-dasharray: .2 .2; }
.floor .t.disabled text { fill: var(--dim); }
.floor .off { opacity: .32; }
.legend i.lg-bar { background: #5a4320; border-color: #c99a0e; }
.legend i.lg-wall { background: #d9d2c3; height: 4px; vertical-align: 3px; }
.legend i.lg-out { border: 1px dashed #9fc58f; background: rgba(132, 196, 110, .1); }
.legend i.lg-dis { border: 1px dashed var(--dim); }
.season { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid var(--line2); font-size: calc(13px * var(--fs, 1)); font-weight: 600; }
.season.on { border-color: rgba(132, 196, 110, .6); }
/* Kompaktere Formulare im Admin */
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .cols2 { grid-template-columns: 1fr; } }
.chart-bar { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; gap: 10px; align-items: center; font-size: calc(13px * var(--fs, 1)); padding: 4px 0; }
.chart-bar .bar { height: 14px; background: var(--card2); position: relative; }
.chart-bar .bar i { position: absolute; inset: 0 auto 0 0; background: var(--gold); }
.chart-bar .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-bar .val { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 64px; text-align: right; }
.cols-chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding-top: 10px; }
.cols-chart div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; font-size: calc(10.5px * var(--fs, 1)); color: var(--muted); }
.cols-chart b { display: block; width: 100%; background: var(--gold); min-height: 2px; }
/* Stempelkarte */
.stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 14px 0 6px; }
.stamp { aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(var(--gold-rgb), .45); display: grid; place-items: center; color: var(--dim); font-size: calc(12px * var(--fs, 1)); font-weight: 700; }
.stamp.on { border: 0; background: url(../img/bondi-sun.png) center/cover; box-shadow: 0 0 0 2px rgba(var(--gold-rgb), .25); color: transparent; animation: stampIn .3s ease-out; }
.stamp.goal { border-style: solid; border-color: var(--gold); color: var(--gold); }
@keyframes stampIn { from { transform: scale(.6) rotate(-20deg); opacity: 0; } }
.progress:not(.col-head):not(.st-chip) { height: 8px; background: var(--card2); margin-top: 10px; }
.progress i { display: block; height: 100%; background: var(--gold); }
.reward-pick { border: 1px solid rgba(var(--gold-rgb), .5); background: var(--gold-soft); padding: 12px; display: flex; gap: 10px; align-items: center; cursor: pointer; }
.reward-pick.on { background: var(--gold); color: var(--on-gold); }
.k-tabbar { grid-template-columns: repeat(6, 1fr); }
.k-tabbar a { font-size: calc(10px * var(--fs, 1)); padding-left: 0; padding-right: 0; }
.flexcol { display: flex; flex-direction: column; min-height: 0; }
.flexcol > * { flex: none; }
.flexcol > .fill { flex: 1; min-height: 0; }
.kpis.small .kpi { padding: 10px 12px; }
.kpis.small .kpi b { font-size: calc(20px * var(--fs, 1)); }
tr.click { cursor: pointer; }
tr.click:hover td { background: rgba(var(--gold-rgb), .05) !important; }
.card.dim { opacity: .6; }
@media (max-width: 1500px) { .s-top > .eyebrow { display: none; } .s-tabs a { padding: 8px 8px; font-size: calc(12.5px * var(--fs, 1)); } }
.card .kpis.small, .modal .kpis.small { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* =====================================================================
   v1.4 – iPhone: Kamerainsel / Home-Balken, Stationen, Kellner-Ruf, Tischwahl
   ===================================================================== */
/* Personal-Oberflächen: Inhalt beginnt unter der Statusleiste/Kamerainsel und endet über dem Home-Balken */
html[data-app] body { padding: var(--safe-t) env(safe-area-inset-right, 0px) var(--safe-b) env(safe-area-inset-left, 0px); }
html[data-app] .s-app { height: calc(100vh - var(--safe-t) - var(--safe-b)); height: calc(100dvh - var(--safe-t) - var(--safe-b)); }
.gate { padding-top: calc(24px + var(--safe-t)); padding-bottom: calc(24px + var(--safe-b)); }
.modal { max-height: calc(92vh - var(--safe-t)); max-height: calc(92dvh - var(--safe-t)); }
html[data-app] .modal-bg { padding-top: var(--safe-t); }
.s-main .scroll { padding-bottom: 24px; }
@media (max-width: 700px) {
  .s-top { padding: 6px 10px; }
  .s-top > .eyebrow { display: none; }
  .s-main { padding: 10px; }
  .page-head { gap: 8px; }
  .page-head .grow { min-width: 0; flex-basis: 100%; }
  .page-head p { display: none; }
  .grid2 { grid-template-columns: 1fr; }
  .s-foot { display: none; }
  .s-top { flex-wrap: wrap; row-gap: 4px; }
  .s-top > .s-tabs { order: 9; flex: 1 0 100%; }
}

/* Kunden-App: Aktionen auf der Startseite */
.action-row .btn.action { min-height: 64px; flex-direction: column; gap: 4px; font-size: calc(13.5px * var(--fs, 1)); }
.action-row .btn.action .icon { width: 24px; height: 24px; }
.call-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.call-opt { min-height: 86px; flex-direction: column; gap: 8px; font-size: calc(14px * var(--fs, 1)); }
.call-opt .icon { width: 28px; height: 28px; color: var(--gold); }
.call-card { border-color: rgba(var(--gold-rgb), .5); }
.call-card .icon { color: var(--gold); }
.call-card.ack { border-color: rgba(111, 168, 220, .6); }
.call-card.done { border-color: rgba(132, 196, 110, .5); opacity: .8; }
.call-card.open .icon { animation: ring 1.4s ease-in-out infinite; }
@keyframes ring { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } }
.topics { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.topics > .topic { cursor: pointer; }
.wish-btn { justify-content: flex-start; border-style: dashed; }
.wish-btn.on { border-style: solid; border-color: var(--gold); color: var(--gold); }

/* Tischwahl auf Foto */
.res-photo { position: relative; width: 100%; background: var(--card); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.res-photo > img { width: 100%; height: auto; display: block; }
.res-photo.edit.armed { cursor: crosshair; outline: 2px dashed var(--gold); outline-offset: -2px; }
.spot { position: absolute; transform: translate(-50%, -50%); min-width: 44px; min-height: 44px; padding: 4px 7px; border-radius: 22px; border: 2px solid #fff;
  display: grid; place-items: center; line-height: 1.05; background: rgba(132, 196, 110, .92); color: #10200a; box-shadow: 0 3px 12px rgba(0, 0, 0, .5); cursor: pointer; font: inherit; touch-action: none; }
.spot b { font-size: calc(14px * var(--fs, 1)); }
.spot small { font-size: calc(9px * var(--fs, 1)); font-weight: 600; white-space: nowrap; }
.spot.taken { background: rgba(60, 55, 50, .85); color: #bbb; border-color: rgba(255, 255, 255, .35); cursor: not-allowed; }
.spot.small { background: rgba(60, 55, 50, .85); color: #ddd; border-color: rgba(255, 255, 255, .35); cursor: not-allowed; }
.spot.picked { background: var(--gold); color: var(--on-gold); transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .35), 0 3px 12px rgba(0, 0, 0, .5); }
.picker-tabs { position: static; padding: 0; border: 0; background: none; backdrop-filter: none; }
.picker-legend i.lg-free { background: rgba(132, 196, 110, .92); border-radius: 50%; }
.picker-legend i.lg-taken { background: #3c3732; border-radius: 50%; }
.picker-legend i.lg-picked { background: var(--gold); border-radius: 50%; }
.res-plan { padding: 6px; }
.res-plan .floor { max-height: 62vh; }
.floor .t.free .tbl-shape { fill: rgba(132, 196, 110, .25); stroke: #9fc58f; }
.floor .t.taken, .floor .t.small { opacity: .35; }
.floor .t.picked .tbl-shape { fill: var(--gold); stroke: var(--gold); }
.floor .t.picked text { fill: #141210; }
.photo-ed { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .photo-ed { grid-template-columns: 1fr; } }

/* Stationen & Kellner-Rufe */
.calls-strip { display: grid; gap: 8px; margin-bottom: 12px; }
.call-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(var(--gold-rgb), .14); border: 1px solid var(--gold); }
.call-item .icon { color: var(--gold); width: 24px; height: 24px; }
.call-item.open { animation: pulse 1.6s ease-in-out infinite; }
.call-item.ack { background: rgba(111, 168, 220, .12); border-color: var(--blue); }
.call-item.ack .icon { color: var(--blue); }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 14px 10px; }
.st-chip { font-size: calc(11px * var(--fs, 1)); font-weight: 600; padding: 3px 8px; border: 1px solid var(--line2); }
.st-chip.progress { border-color: var(--blue); color: var(--blue); }
.st-chip.ready { border-color: var(--green); color: var(--green); }
.st-chip.served { opacity: .5; }
.st-card.done { opacity: .5; }
.st-card .btn:not(.sm) { min-height: 50px; font-size: calc(15px * var(--fs, 1)); flex: 1; }

/* Team-App */
.team-app { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(80px + var(--safe-b)); }
.team-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(var(--bg-rgb), .95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.team-view { padding: 16px; max-width: 1200px; margin: 0 auto; }
.shift.on .dot { margin-right: 4px; }
.team-tabs { width: 100%; max-width: none; left: 0; transform: none; }
.team-tabs a { font-size: calc(11px * var(--fs, 1)); }
.team-tabs .badge.hidden { display: none; }
.team-view .st-board { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
.team-view .st-board > section > .scroll { overflow: visible; }
@media (max-width: 760px) { .team-view .st-board { grid-template-columns: 1fr; } }

/* v1.5 – Sprachwahl mit Flaggen */
.flag { display: block; width: 24px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); flex: none; }
.lang-btn { appearance: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 10px; border: 1px solid var(--line2); background: rgba(var(--bg-rgb), .55); color: var(--text); font: 600 calc(12.5px * var(--fs, 1)) var(--font); cursor: pointer; flex: none; backdrop-filter: blur(8px); }
.lang-btn:hover { border-color: var(--gold); }
.lang-btn .caret { font-size: calc(10px * var(--fs, 1)); color: var(--muted); }
.lang-btn.wide { padding: 0 14px; }
.lang-menu { position: fixed; z-index: 300; background: var(--bg2); border: 1px solid var(--line2); box-shadow: 0 14px 40px rgba(0, 0, 0, .55); padding: 6px; min-width: 200px; max-height: 70vh; overflow-y: auto; animation: fade .12s; }
.lang-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; background: none; border: 0; color: var(--text); font: 500 calc(15px * var(--fs, 1)) var(--font); cursor: pointer; text-align: start; }
.lang-menu button:hover { background: rgba(255, 255, 255, .04); }
.lang-menu button.on { background: var(--gold-soft); color: var(--gold); }
.wallet-box { text-align: start; }
.wallet-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; background: #000; color: #fff; border: 1px solid #555; border-radius: 10px; font-weight: 600; font-size: calc(15px * var(--fs, 1)); text-decoration: none; }
.wallet-btn:hover { border-color: #aaa; }
.wallet-btn .wl { display: grid; }

/* =====================================================================
   v1.5 – Endgeräte-Optimierung: kein seitliches Scrollen auf dem Handy
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
img, svg, video, canvas { max-width: 100%; }
.input, select.input, textarea.input { min-width: 0; max-width: 100%; }
.grid2 > *, .cols2 > *, .row > *, .stack > * { min-width: 0; }
.pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.contest .pill, .card .pill.gold { white-space: normal; }
/* iPhone vergrößert die Seite beim Tippen in Felder unter 16 px – danach ließe sie sich seitlich verschieben */
@media (pointer: coarse), (max-width: 700px) {
  .input, select.input, textarea.input, .lang-menu button { font-size: max(16px, calc(16px * var(--fs, 1))); }
}
/* Gäste-App auf großen Bildschirmen (Tablet quer, Desktop): mittig, etwas breiter */
@media (min-width: 900px) { .k-app { max-width: 620px; } .k-tabbar { width: min(100%, 620px); } .cartbar { width: min(calc(100% - 24px), 596px); } }
/* Sehr schmale Handys (iPhone SE / mini) */
@media (max-width: 360px) {
  .k-section { padding-left: 12px; padding-right: 12px; }
  .hscroll { margin: 0 -12px; padding: 0 12px 6px; }
  .k-tabbar a { font-size: calc(9px * var(--fs, 1)); }
  .title-xl { font-size: calc(24px * var(--fs, 1)); }
  .quick a { font-size: calc(11.5px * var(--fs, 1)); padding: 12px 4px 10px; }
  .call-opt { min-height: 76px; font-size: calc(13px * var(--fs, 1)); }
  .tablebar { flex-wrap: wrap; }
  .hero { height: 400px; }
}
/* Personal-Oberflächen auf dem Handy */
@media (max-width: 700px) {
  html[data-app] .s-main .row:not(.nowrap) { flex-wrap: wrap; }
  html[data-app] .page-head > * { flex-shrink: 1; }
  .adm-items .item { flex-wrap: wrap; }
  .adm-items .item > .grow { flex-basis: calc(100% - 80px); }
  /* Tabellen als Karten untereinander statt breiter Tabelle */
  .tbl-list:not(.matrix), .tbl-list:not(.matrix) tbody, .tbl-list:not(.matrix) tr, .tbl-list:not(.matrix) td { display: block; width: 100%; }
  .tbl-list:not(.matrix) thead { display: none; }
  .tbl-list:not(.matrix) tr { border: 1px solid var(--line); background: var(--card); margin-bottom: 8px; padding: 6px 4px; }
  .tbl-list:not(.matrix) td { border: 0; padding: 4px 10px; text-align: start !important; }
  .tbl-list:not(.matrix) td:empty { display: none; }
  .tbl-list.matrix th:first-child, .tbl-list.matrix td:first-child { position: sticky; left: 0; background: var(--bg); z-index: 1; min-width: 150px; }
  /* Bestell-Board: Spalten untereinander */
  .board { grid-template-columns: 1fr !important; overflow-x: hidden !important; overflow-y: auto; align-content: start; }
  .board > section { min-height: auto; }
  .board > section > .scroll { overflow: visible; }
  .chart-bar { grid-template-columns: minmax(90px, 40%) 1fr auto; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card .kpis.small, .modal .kpis.small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal.wide { width: 100%; }
  .split { grid-template-columns: 1fr; }
  .side-list { max-height: 30vh; }
}
@media (max-width: 700px) {
  .an-grid { grid-template-columns: 1fr !important; grid-template-rows: none !important; overflow-y: auto; }
  .an-grid > .card { min-height: 220px !important; }
}

/* =====================================================================
   v1.5 – Kasse aufgeräumt, größer für Tablets (iPad) und Touch
   ===================================================================== */
html[data-app="kasse"] body { font-size: max(16px, calc(16px * var(--fs, 1))); }
html[data-app="kasse"] .s-top { flex-wrap: wrap; padding: 10px 16px 8px; row-gap: 10px; }
html[data-app="kasse"] .s-top > .eyebrow { display: none; }
html[data-app="kasse"] #top-extra { margin-inline-start: auto; gap: 8px; }
html[data-app="kasse"] .s-top > .s-tabs { order: 9; flex: 1 0 100%; gap: 8px; }
html[data-app="kasse"] .s-tabs a { font-size: calc(15px * var(--fs, 1)); padding: 11px 18px; border: 1px solid var(--line2); background: var(--card); color: var(--text); min-height: 46px; display: inline-flex; align-items: center; }
html[data-app="kasse"] .s-tabs a.on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
html[data-app="kasse"] .s-tabs a.on .badge { background: #141210; color: var(--gold); }
html[data-app="kasse"] .s-tabs a .badge { min-width: 22px; height: 22px; font-size: calc(12px * var(--fs, 1)); border-radius: 11px; }
html[data-app="kasse"] .clock { font-size: calc(22px * var(--fs, 1)); }
html[data-app="kasse"] .s-main { padding: 14px 16px; }
html[data-app="kasse"] .page-head h1 { font-size: calc(24px * var(--fs, 1)); }
html[data-app="kasse"] .page-head p, html[data-app="kasse"] .small { font-size: calc(14px * var(--fs, 1)); }
html[data-app="kasse"] .tiny { font-size: calc(12.5px * var(--fs, 1)); }
/* Bestellkarten */
.board-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: calc(13px * var(--fs, 1)); color: var(--muted); margin-bottom: 10px; }
.board-meta b { color: var(--text); }
html[data-app="kasse"] .col-head .title-m { font-size: calc(18px * var(--fs, 1)); }
html[data-app="kasse"] .col-head .pill { font-size: calc(13px * var(--fs, 1)); padding: 3px 9px; }
html[data-app="kasse"] .ocard header { padding: 12px 14px; gap: 12px; }
html[data-app="kasse"] .ocard .tbl { font-size: calc(30px * var(--fs, 1)); min-width: 58px; letter-spacing: -.02em; }
html[data-app="kasse"] .ocard header b { font-size: calc(15.5px * var(--fs, 1)); }
html[data-app="kasse"] .ocard header .price { font-size: calc(15px * var(--fs, 1)); color: var(--muted); font-weight: 600; }
html[data-app="kasse"] .ocard li { font-size: calc(17px * var(--fs, 1)); padding: 5px 0; }
html[data-app="kasse"] .ocard li b { min-width: 34px; }
html[data-app="kasse"] .ocard .note { font-size: calc(14.5px * var(--fs, 1)); }
html[data-app="kasse"] .ocard footer { align-items: center; padding: 10px 14px 14px; }
html[data-app="kasse"] .ocard footer .btn:not(.ghost) { flex: 1; min-height: 52px; font-size: max(16px, calc(16px * var(--fs, 1))); }
html[data-app="kasse"] .ocard footer .btn.ghost { min-height: 44px; flex: none; }
html[data-app="kasse"] .st-chips { margin: 0 14px 10px; }
html[data-app="kasse"] .st-chip { font-size: calc(12.5px * var(--fs, 1)); padding: 4px 9px; }
html[data-app="kasse"] .call-item { padding: 12px 14px; font-size: calc(15px * var(--fs, 1)); }
html[data-app="kasse"] .call-item .btn { min-height: 46px; }
html[data-app="kasse"] .ocard.new { animation: none; box-shadow: 0 0 0 1px var(--gold); }
/* Hochformat (iPad hoch): Spalten schmaler, Texte ohne Umbruch-Chaos */
@media (max-width: 1000px) and (min-width: 701px) {
  html[data-app="kasse"] .board { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: hidden; gap: 10px; }
  html[data-app="kasse"] .ocard header { flex-wrap: wrap; }
  html[data-app="kasse"] .ocard header .grow { flex-basis: 0; }
  html[data-app="kasse"] .ocard .tbl { font-size: calc(26px * var(--fs, 1)); min-width: 48px; }
  html[data-app="kasse"] .ocard li { font-size: max(16px, calc(16px * var(--fs, 1))); }
}
/* Sperrbildschirm größer */
html[data-app="kasse"] .lock-scan { font-size: calc(17px * var(--fs, 1)) !important; min-height: 54px; max-width: 420px !important; }
html[data-app="kasse"] .ocard header .tiny { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.team-pinbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(var(--gold-rgb), .14); border-bottom: 1px solid var(--gold); font-size: calc(13.5px * var(--fs, 1)); }

/* =====================================================================
   v1.5.3 – Tablets quer: Personal-Oberflächen immer bildschirmfüllend
   ===================================================================== */
/* Die Oberfläche hängt direkt an den vier Bildschirmrändern (statt an 100vh/Seitenbreite) –
   so füllt sie auch nach dem Drehen des iPads sofort die volle Breite und Höhe. */
html[data-app] .s-app { position: fixed; top: var(--safe-t); bottom: var(--safe-b); left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px); width: auto; height: auto; max-width: none; margin: 0; }
html[data-app] .s-top, html[data-app] .s-main, html[data-app] .s-foot { width: 100%; max-width: none; }
html[data-app="kasse"], html[data-app="kasse"] body { width: 100%; overscroll-behavior: none; touch-action: manipulation; }
/* Breite Bildschirme: Reservierungen nebeneinander, Fenster größer */
@media (min-width: 1000px) {
  html[data-app="kasse"] .res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 12px; }
  html[data-app="kasse"] .res-grid > .card { margin: 0; }
  html[data-app="kasse"] .modal { width: min(100%, 720px); }
  html[data-app="kasse"] .board { gap: 18px; }
}
/* Sehr breit (iPad Pro 13" quer, Monitor): Spalten bekommen mehr Luft, Karten mehrspaltig */
@media (min-width: 1300px) {
  html[data-app="kasse"] .s-main { padding: 16px 22px; }
  html[data-app="kasse"] .s-top { padding-inline: 22px; }
}
/* Querformat mit wenig Höhe (iPad mini / 11" quer): Kopfzeile etwas flacher, mehr Platz für Bestellungen */
@media (orientation: landscape) and (max-height: 840px) and (min-width: 1000px) {
  html[data-app="kasse"] .s-top { padding-block: 6px 6px; row-gap: 6px; }
  html[data-app="kasse"] .s-tabs a { min-height: 42px; padding-block: 8px; }
  html[data-app="kasse"] .page-head h1 { font-size: calc(21px * var(--fs, 1)); }
}

/* v1.6 – Gäste ändern/stornieren */
.ocard .edited { margin: 0 14px 6px; padding: 5px 9px; font-size: calc(13px * var(--fs, 1)); font-weight: 600; color: var(--on-gold); background: var(--gold); display: inline-block; }
.guest-cancel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 10px; border: 1px solid var(--red, #d9534f); background: rgba(217, 83, 79, .1); font-size: calc(14px * var(--fs, 1)); }
.guest-cancel svg { width: 16px; height: 16px; color: var(--red, #d9534f); }
.order-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.order-actions .btn { flex: 1 1 140px; }
.edit-hint { font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); margin-top: 8px; }
.cartbar.edit { background: var(--text); }
.edit-banner { display: flex; align-items: center; gap: 10px; margin: 10px 16px 0; padding: 10px 12px; border: 1px solid var(--gold); background: rgba(240, 196, 25, .1); font-size: calc(14px * var(--fs, 1)); }
.edit-banner .grow { min-width: 0; }

/* =====================================================================
   v1.7 – Updates, Standort, Gastbestellung im Bar-WLAN
   ===================================================================== */
.update-banner { position: fixed; z-index: 120; left: 50%; transform: translateX(-50%); top: calc(10px + var(--safe-t)); width: min(calc(100% - 24px), 480px);
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--gold); color: var(--on-gold); border: 0; font: inherit; font-size: calc(15px * var(--fs, 1)); text-align: start; cursor: pointer; box-shadow: 0 8px 30px rgba(0, 0, 0, .45); }
.update-banner .icon { width: 20px; height: 20px; flex: none; }
.geo-card, .wifi-hint { display: flex; align-items: center; gap: 12px; margin: 10px 16px 0; padding: 12px; border: 1px solid var(--line2); background: var(--card); }
.geo-card > .icon, .wifi-hint > .icon { width: 24px; height: 24px; flex: none; color: var(--gold); }
.geo-card .grow, .wifi-hint .grow { min-width: 0; }
.geo-card.bad { border-color: rgba(224, 103, 79, .6); }
.geo-card.bad > .icon { color: var(--red); }
.wifi-hint { flex-wrap: wrap; }
.wifi-hint .mono, .mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; }
.geo-ico { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 4px; border-radius: 50%; background: rgba(240, 196, 25, .12); color: var(--gold); }
.geo-ico .icon { width: 28px; height: 28px; }
.guest-box { margin-top: 14px; padding: 12px; border: 1px solid var(--gold); background: rgba(240, 196, 25, .07); }
.guest-box .row .icon { color: var(--gold); }
.pill.guest-pill { margin-inline-start: 8px; color: var(--on-gold); background: #8fc3ff; border-color: #8fc3ff; vertical-align: 2px; }
.notice { padding: 10px 12px; border-inline-start: 3px solid var(--gold); background: rgba(240, 196, 25, .07); color: var(--muted); }

/* =====================================================================
   v1.8 – Fenster auf dem iPhone: Knöpfe nie unter dem Rand
   ===================================================================== */
/* Fenster nur so hoch wie der tatsächlich sichtbare Bereich (ohne Safari-Leiste, Home-Balken, Tastatur) */
.modal-bg { top: var(--vv-top, 0px); bottom: auto; height: var(--app-h, 100dvh); }
.modal { max-height: calc(var(--app-h, 100dvh) - var(--safe-t) - 12px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (min-width: 700px) { .modal { max-height: calc(var(--app-h, 100dvh) - var(--safe-t) - 48px); } }
/* Knopfleiste am Ende eines Fensters (Speichern, Löschen …) bleibt immer sichtbar unten im Fenster */
.modal > .stack > .row:last-child:has(> .btn), .modal > .stack > div:last-child > .row:last-child:has(> .btn.gold) {
  position: sticky; bottom: calc(-22px - var(--safe-b)); z-index: 3; margin: 6px -20px calc(-22px - var(--safe-b));
  padding: 12px 20px calc(14px + var(--safe-b)); background: var(--bg2); border-top: 1px solid var(--line); flex-wrap: wrap;
}
.modal > .stack > .row:last-child:has(> .btn) > .btn { min-height: 46px; }
/* Gäste-App: „Jetzt bestellen“ im Warenkorb ebenfalls immer sichtbar */
.modal > div:not(.modal-head) > .btn.gold.block:last-child {
  position: sticky; bottom: calc(12px + var(--safe-b)); z-index: 3;
  box-shadow: 0 0 0 14px var(--bg2), 0 calc(14px + var(--safe-b)) 0 14px var(--bg2);
}

/* v1.8 – NFC */
.nfc-ico { display: inline-flex; width: 22px; height: 22px; }
.nfc-ico svg { width: 100%; height: 100%; }
.nfc-ico.big { width: 64px; height: 64px; color: var(--gold); margin: 0 auto 6px; }
.nfc-ico.big.wait { animation: nfcpulse 1.2s ease-in-out infinite; }
.nfc-ico.big.ok { color: var(--green); }
.nfc-ico.big.bad { color: var(--red); }
.nfc-status { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 12px 0; }
@keyframes nfcpulse { 50% { transform: scale(1.12); opacity: .6; } }
.print-list { display: none; }
@media print {
  .qr-card .nfc-hint { display: grid; justify-items: center; gap: 1mm; font-size: 10pt; }
  .qr-card .nfc-hint b { font-size: 13pt; color: #EFC21C !important; }
  .qr-card .nfc-ico { width: 14mm; height: 14mm; color: #f0ebde !important; }
  .qr-card.nfc { gap: 3mm; }
  .print-sheet.print-list { display: block !important; font-family: Poppins, sans-serif; color: #000 !important; }
  .print-list h1 { font-size: 15pt; margin: 0 0 3mm; }
  .print-list p { font-size: 9.5pt; margin: 0 0 5mm; }
  .print-list table { width: 100%; border-collapse: collapse; font-size: 10pt; }
  .print-list th, .print-list td { border: 1px solid #999; padding: 2mm 3mm; text-align: left; vertical-align: middle; }
  .print-list tr { break-inside: avoid; }
  .print-list td svg { width: 26mm; height: 26mm; display: block; }
  .print-list code { font-size: 10pt; word-break: break-all; }
}
/* v1.8 – „So geht's“ */
.howto-link { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; font: inherit; color: inherit; cursor: pointer; }
.howto-link > .icon:first-child { color: var(--gold); width: 22px; height: 22px; flex: none; }
.howto-step { display: flex; gap: 14px; align-items: flex-start; }
.howto-step .howto-n { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font-weight: 800; font-size: calc(19px * var(--fs, 1)); display: grid; place-items: center; }
.howto-step b { display: block; font-size: max(16px, calc(16px * var(--fs, 1))); margin: 2px 0 2px; }
.howto-tip { display: flex; gap: 10px; align-items: flex-start; font-size: calc(14px * var(--fs, 1)); line-height: 1.4; }
.howto-tip .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--gold); }

/* v1.8.1 – Fenster am iPhone: nur der Fensterinhalt scrollt, die Seite dahinter bleibt stehen */
html.modal-open, html.modal-open body { overflow: hidden; overscroll-behavior: none; }
.modal { touch-action: pan-y; overscroll-behavior: contain; }
.modal-bg { overscroll-behavior: contain; }
/* v1.9 – Freischaltung */
.feat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.feat-row .grow { min-width: 220px; }
.seg { display: inline-flex; border: 1px solid var(--line2); }
.seg button { font: inherit; font-size: calc(14px * var(--fs, 1)); font-weight: 600; padding: 10px 14px; min-height: 44px; background: transparent; color: var(--muted); border: 0; border-inline-start: 1px solid var(--line2); cursor: pointer; }
.seg button:first-child { border-inline-start: 0; }
.seg button.on.off { background: rgba(224, 103, 79, .18); color: var(--text); }
.seg button.on.pilot { background: rgba(240, 196, 25, .2); color: var(--gold); }
.seg button.on.all { background: rgba(132, 196, 110, .2); color: var(--green); }
.pilot-link { padding: 8px 10px; background: var(--bg); border: 1px solid var(--line2); font-size: calc(13px * var(--fs, 1)); word-break: break-all; }

/* v1.9 – kompakte, quadratische Tischkarten */
@media print {
  .print-sheet.fmt-square, .print-sheet.fmt-small { grid-template-columns: repeat(var(--cols), var(--card)); grid-auto-rows: var(--card); justify-content: center; align-content: start; }
  .print-sheet.fmt-square { --cols: 2; --card: 90mm; }
  .print-sheet.fmt-small { --cols: 3; --card: 64mm; }
  .print-sheet.fmt-large { grid-template-columns: repeat(2, 97mm); justify-content: center; }
  .qr-card.f-square, .qr-card.f-small { width: var(--card); height: var(--card); box-sizing: border-box; border: .2mm dashed #888; gap: 1.6mm; }
  .qr-card.f-square { padding: 4mm 5mm; }
  .qr-card.f-square img { height: 7mm; }
  .qr-card.f-square h2 { font-size: 17pt; line-height: 1; }
  .qr-card.f-square .q { padding: 2mm; }
  .qr-card.f-square .q svg { width: 50mm; height: 50mm; }
  .qr-card.f-square p { font-size: 8pt; line-height: 1.2; }
  .qr-card.f-square .nfc-hint { font-size: 7.5pt; gap: .5mm; }
  .qr-card.f-square .nfc-hint b { font-size: 9.5pt; }
  .qr-card.f-square .nfc-ico { width: 7mm; height: 7mm; }
  .qr-card.f-square.nfc .q svg { width: 44mm; height: 44mm; }
  .qr-card.f-small { padding: 2.5mm 3mm; gap: 1mm; }
  .qr-card.f-small img { height: 4.5mm; }
  .qr-card.f-small h2 { font-size: 12pt; line-height: 1; }
  .qr-card.f-small .q { padding: 1.5mm; }
  .qr-card.f-small .q svg { width: 39mm; height: 39mm; }
  .qr-card.f-small p { font-size: 6.5pt; line-height: 1.15; }
  .qr-card.f-small p:last-child { display: none; }
  .qr-card.f-small .nfc-hint { display: flex; align-items: center; gap: 1mm; font-size: 6.5pt; }
  .qr-card.f-small .nfc-hint span:not(.nfc-ico) { display: none; }
  .qr-card.f-small .nfc-hint b { font-size: 7pt; }
  .qr-card.f-small .nfc-ico { width: 5mm; height: 5mm; }
  .qr-card.f-small.nfc .q svg { width: 36mm; height: 36mm; }
}
.seg.wrap { flex-wrap: wrap; }

/* v1.9 – Grundriss: Anfasser an allen Ecken, greifbare Mauerenden */
.floor .handle-hit { fill: transparent; stroke: none; cursor: grab; pointer-events: all; }
.floor .handle-hit:hover + .handle, .floor .handle:hover { fill: #fff; }
.floor rect.handle { fill: var(--gold); stroke: #141210; stroke-width: .08; cursor: nwse-resize; }
.floor rect.handle.c-ne, .floor rect.handle.c-sw { cursor: nesw-resize; }
.floor circle.handle { fill: var(--gold); stroke: #141210; stroke-width: .1; cursor: grab; }
.floor .measure rect { fill: #141210; stroke: var(--gold); stroke-width: .06; }
.floor .measure text { fill: var(--gold); font-size: .75px; font-weight: 700; text-anchor: middle; }
.floor { touch-action: none; }

/* „So geht's“ als eigene Seite: scrollt zuverlässig auf jedem Handy, kompakte Abstände */
.howto-screen { position: fixed; inset: 0; z-index: 95; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; animation: fade .15s; }
.howto-inner { max-width: 520px; min-height: 100%; box-sizing: border-box; margin: 0 auto; padding: calc(12px + var(--safe-t)) 18px calc(24px + var(--safe-b)); display: flex; flex-direction: column; gap: 12px; }
.howto-head { display: flex; align-items: center; gap: 12px; }
.howto-head h2 { flex: 1; margin: 0; }
.howto-sub { margin: -4px 0 2px; font-size: calc(14px * var(--fs, 1)); }
.howto-screen .howto-step { gap: 12px; }
.howto-screen .howto-step .howto-n { width: 34px; height: 34px; font-size: calc(17px * var(--fs, 1)); }
.howto-screen .howto-step b { font-size: calc(15.5px * var(--fs, 1)); margin: 0 0 1px; }
.howto-screen .howto-step .small { font-size: calc(13.5px * var(--fs, 1)); line-height: 1.4; }
.howto-tips-head { margin-top: 4px; }
.howto-screen .howto-tip { font-size: calc(13.5px * var(--fs, 1)); }
.howto-go { margin-top: auto; min-height: 52px; }
@media (max-height: 600px) { .howto-inner { gap: 9px; } .howto-sub { display: none; } }

/* =====================================================================
   v1.9 – Großzügigere Ansichten
   Team-App: fürs iPhone (große Schrift, große Symbole unten, große Tippflächen), auf iPad/PC volle Breite.
   Kasse/Admin: volle Fläche im Querformat. Gäste-App bleibt Handy-optimiert, nur kräftigere Leiste/Schrift.
   Grundregel überall: nichts Antippbares direkt am unteren Rand (mind. 14–22 px Abstand + Home-Balken).
   ===================================================================== */
:root { --bottom-gap: max(var(--safe-b), 12px); }

/* ---------- Team-App ---------- */
html[data-app="team"] body { font-size: max(16px, calc(16px * var(--fs, 1))); }
html[data-app="team"] .team-app { padding-bottom: calc(110px + var(--bottom-gap)); }
html[data-app="team"] .team-top { padding: 10px 16px; min-height: 60px; }
html[data-app="team"] .team-top img { height: 28px !important; }
html[data-app="team"] .shift .small { font-size: calc(15px * var(--fs, 1)); }
html[data-app="team"] .shift .btn.sm { min-height: 44px; padding-inline: 16px; font-size: calc(15px * var(--fs, 1)); }
html[data-app="team"] .team-view { max-width: none; padding: 18px 16px; }
/* Leiste unten: immer volle Breite, große Symbole und Texte, Abstand zum Home-Balken */
html[data-app="team"] .k-tabbar.team-tabs { left: 0; right: 0; width: 100%; max-width: none; transform: none; padding: 0 env(safe-area-inset-right, 0px) var(--bottom-gap) env(safe-area-inset-left, 0px); }
html[data-app="team"] .team-tabs a { font-size: calc(12.5px * var(--fs, 1)); font-weight: 600; gap: 5px; padding: 12px 2px 10px; min-height: 68px; justify-content: center; min-width: 0; white-space: nowrap; }
html[data-app="team"] .team-tabs a .tl { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
html[data-app="team"] .team-tabs a .icon { width: 28px; height: 28px; stroke-width: 1.8; }
html[data-app="team"] .team-tabs a.on::before { height: 3px; left: 25%; right: 25%; }
html[data-app="team"] .team-tabs .badge { top: 6px; left: calc(50% + 8px); min-width: 22px; height: 22px; border-radius: 11px; font-size: calc(12.5px * var(--fs, 1)); }
/* Bestellkarten: groß lesbar, große Knöpfe */
html[data-app="team"] .page-head h1, html[data-app="team"] .team-view h1 { font-size: calc(26px * var(--fs, 1)); }
html[data-app="team"] .col-head .title-m { font-size: calc(19px * var(--fs, 1)); }
html[data-app="team"] .col-head .pill { font-size: calc(14px * var(--fs, 1)); padding: 3px 10px; }
html[data-app="team"] .ocard header { padding: 14px 16px; gap: 12px; }
html[data-app="team"] .ocard .tbl { font-size: calc(32px * var(--fs, 1)); min-width: 60px; }
html[data-app="team"] .ocard header b { font-size: calc(17px * var(--fs, 1)); }
html[data-app="team"] .ocard header .tiny { font-size: calc(13.5px * var(--fs, 1)); }
html[data-app="team"] .ocard li { font-size: calc(18px * var(--fs, 1)); padding: 6px 0; }
html[data-app="team"] .ocard li b { min-width: 38px; }
html[data-app="team"] .ocard .note { font-size: max(16px, calc(16px * var(--fs, 1))); }
html[data-app="team"] .st-card .btn:not(.sm) { min-height: 58px; font-size: calc(17px * var(--fs, 1)); }
html[data-app="team"] .st-card .btn.sm, html[data-app="team"] .ocard footer .btn.ghost { min-height: 48px; font-size: calc(15px * var(--fs, 1)); padding-inline: 16px; }
html[data-app="team"] .st-chip { font-size: calc(13px * var(--fs, 1)); padding: 4px 10px; }
html[data-app="team"] .call-item { padding: 14px 16px; font-size: calc(17px * var(--fs, 1)); gap: 12px; }
html[data-app="team"] .call-item .icon { width: 28px; height: 28px; }
html[data-app="team"] .call-item .btn { min-height: 50px; font-size: max(16px, calc(16px * var(--fs, 1))); padding-inline: 18px; }
html[data-app="team"] .team-pinbar .btn { min-height: 44px; }
/* Tablet/PC: drei Spalten nebeneinander über die ganze Breite */
@media (min-width: 761px) {
  html[data-app="team"] .team-view { padding: 18px 22px; }
  html[data-app="team"] .team-view .st-board { gap: 18px; }
  html[data-app="team"] .team-tabs a { flex-direction: row; gap: 10px; font-size: calc(15px * var(--fs, 1)); min-height: 62px; }
  html[data-app="team"] .team-tabs .badge { position: static; margin-inline-start: 2px; }
}
/* sehr breite Bildschirme: Karten in der Spalte nebeneinander, wenn genug Platz */
@media (min-width: 1500px) {
  html[data-app="team"] .team-view .st-board > section > .scroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; align-items: start; }
  html[data-app="team"] .team-view .st-board > section > .scroll > * { margin: 0; }
}
/* iPhone quer: niedrige Höhe – Leiste kompakter, Inhalt bleibt sichtbar */
@media (orientation: landscape) and (max-height: 500px) {
  html[data-app="team"] .team-tabs a { min-height: 52px; padding-block: 6px; flex-direction: row; gap: 8px; }
  html[data-app="team"] .team-tabs .badge { position: static; }
  html[data-app="team"] .team-app { padding-bottom: calc(80px + var(--bottom-gap)); }
  html[data-app="team"] .team-top { position: static; }
}

/* ---------- Gäste-App: kräftigere Leiste unten ---------- */
html:not([data-app]) .k-tabbar, html[data-app="kunde"] .k-tabbar { padding-bottom: var(--bottom-gap); }
html:not([data-app]) .k-tabbar a, html[data-app="kunde"] .k-tabbar a { font-size: calc(11.5px * var(--fs, 1)); font-weight: 600; padding: 10px 2px 9px; gap: 4px; }
html:not([data-app]) .k-tabbar a .icon, html[data-app="kunde"] .k-tabbar a .icon { width: 25px; height: 25px; }
html:not([data-app]) .k-app, html[data-app="kunde"] .k-app { padding-bottom: calc(92px + var(--bottom-gap)); }
html:not([data-app]) .cartbar, html[data-app="kunde"] .cartbar { bottom: calc(76px + var(--bottom-gap)); }
@media (max-width: 360px) { html:not([data-app]) .k-tabbar a, html[data-app="kunde"] .k-tabbar a { font-size: calc(10px * var(--fs, 1)); } }

/* ---------- Fenster: Knopfleiste nie direkt am Rand ---------- */
.modal > .stack > .row:last-child:has(> .btn), .modal > .stack > div:last-child > .row:last-child:has(> .btn.gold) {
  padding-bottom: calc(14px + var(--bottom-gap)); bottom: calc(-22px - var(--safe-b)); }

/* ---------- Admin am Handy: Eingaben volle Breite, Reiter gut tippbar ---------- */
@media (max-width: 700px) {
  html[data-app="admin"] .s-main .input { width: 100%; max-width: none; }
  html[data-app="admin"] .s-tabs a { min-height: 44px; display: inline-flex; align-items: center; }
  html[data-app="admin"] .s-main { padding-bottom: calc(40px + var(--bottom-gap)); }
}
/* Admin/Kasse auf großen Bildschirmen: Einstellungs-Karten in zwei bis drei Spalten statt langer Liste */
@media (min-width: 1400px) {
  html[data-app="admin"] .cols2 { gap: 18px; }
}
/* Kasse: auf großen Querformat-Bildschirmen etwas mehr Luft und größere Karten */
@media (min-width: 1300px) {
  html[data-app="kasse"] .board { gap: 20px; }
  html[data-app="kasse"] .ocard li { font-size: calc(18px * var(--fs, 1)); }
}
@media (min-width: 1700px) {
  html[data-app="kasse"] .board > section > .scroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start; }
  html[data-app="kasse"] .board > section > .scroll > * { margin: 0; }
}
/* Kellner-Rufe am Handy: Text oben, Knöpfe darunter in voller Breite (nichts läuft aus dem Bild) */
@media (max-width: 600px) {
  .call-item { flex-wrap: wrap; }
  .call-item > .grow { flex: 1 1 calc(100% - 46px); min-width: 0; }
  .call-item > .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
}
/* Admin-Einstellungen: am PC/iPad quer zwei Spalten statt einer schmalen Liste */
.settings-cols { max-width: 900px; }
@media (min-width: 1300px) {
  .settings-cols { max-width: none; columns: 2 560px; column-gap: 18px; }
  .settings-cols > section { break-inside: avoid; width: 100%; }
}

/* =====================================================================
   v1.9.1 – iPhone/iPad als App vom Home-Bildschirm: Statusleiste & Home-Balken
   Uhrzeit, Empfang und Akku liegen über der Seite. Meldet iOS keinen Abstand, gelten Mindestwerte.
   ===================================================================== */
html.ios-pwa { --safe-t: max(env(safe-area-inset-top, 0px), 20px); --safe-b: max(env(safe-area-inset-bottom, 0px), 10px); }
html.ios-pwa.ipad { --safe-t: max(env(safe-area-inset-top, 0px), 24px); --safe-b: max(env(safe-area-inset-bottom, 0px), 20px); }
/* Admin/Kasse: Höhe aus der tatsächlich sichtbaren Fläche – Fußzeile immer ganz im Bild */
html[data-app] .s-app { min-height: 0; }
html.ios-pwa[data-app] .s-app { bottom: auto; height: calc(var(--fit-h, 100dvh) - var(--safe-t) - var(--safe-b)); }
/* Statuszeile über dem Home-Balken: etwas mehr Luft */
html.ios-pwa[data-app] .s-foot { padding-bottom: 7px; }
/* Team-App: Kopfzeile bleibt beim Scrollen unter der Statusleiste; Streifen hinter Uhrzeit/Akku deckt den Inhalt ab */
html[data-app="team"] .team-top { top: var(--safe-t); }
html[data-app]::before { content: ''; position: fixed; z-index: 90; top: 0; left: 0; right: 0; height: var(--safe-t); background: var(--bg); pointer-events: none; }

/* v1.9.5 – Stand der automatischen Aktualisierung in der Statuszeile */
.live-stamp { font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap; }
.live-stamp.off { color: var(--red); }
@media (max-width: 520px) { .live-stamp { display: none; } }

/* =====================================================================
   v2.0 – Anlass-Skins der Gäste-App (Deko über dem Titelbild, Gruß-Banner, Partikel)
   Alles ohne Klick-Wirkung (pointer-events: none) und dezent, damit Lesbarkeit & Tippflächen bleiben.
   ===================================================================== */
.skin-hero { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.skin-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--skin-tint) 34%, transparent), transparent 70%); mix-blend-mode: screen; }
.skin-hero svg { position: absolute; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
.skin-hero .sk-corner { width: 34%; max-width: 170px; top: calc(46px + var(--safe-t)); opacity: .9; }
.skin-hero .sk-corner.l { left: -6px; }
.skin-hero .sk-corner.r { right: -6px; }
.skin-hero .sk-orn { width: 58px; opacity: .92; }
.skin-hero .o0 { right: 8%; top: 44%; width: 66px; transform: rotate(-8deg); }
.skin-hero .o1 { left: 6%; top: 40%; width: 48px; transform: rotate(10deg); }
.skin-hero .o2 { right: 30%; top: 30%; width: 38px; opacity: .75; }
.skin-hero .o3 { left: 30%; top: 22%; width: 34px; opacity: .7; }
.skin-hero .o4 { right: 4%; top: 64%; width: 40px; opacity: .8; }
.skin-hero .sk-custom { position: absolute; right: 6%; top: 34%; width: 96px; height: 96px; opacity: .92; }
.skin-hero .sk-custom svg { position: static; width: 100%; height: 100%; }
.hero-inner, .hero-top { z-index: 2; }
.skin-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--gold); background: linear-gradient(90deg, var(--gold-soft), transparent); }
.skin-banner .sk-emoji { font-size: calc(26px * var(--fs, 1)); line-height: 1; }
.skin-banner b { font-weight: 600; font-size: calc(15px * var(--fs, 1)); }
/* Partikel: fallen langsam über die Seite (unter Kopfzeile, Leiste und Fenstern) */
.skin-particles { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.skin-particles i { position: absolute; top: -40px; width: calc(18px * var(--s)); height: calc(18px * var(--s)); animation: sk-fall var(--d) linear var(--delay) infinite; opacity: .8; }
.skin-particles i svg { width: 100%; height: 100%; display: block; }
.skin-particles .dot { display: block; width: 60%; height: 60%; margin: 20%; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .8); }
.skin-particles .conf { display: block; width: 50%; height: 80%; border-radius: 1px; }
.skin-particles .petal { display: block; width: 70%; height: 50%; border-radius: 80% 0 80% 0; opacity: .85; }
.skin-particles .bubble { display: block; width: 70%; height: 70%; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); }
.skin-particles.p-bubbles i { animation-name: sk-rise; top: auto; bottom: -40px; }
.skin-particles.p-stars i { animation-name: sk-twinkle; top: auto; }
.skin-particles.p-stars i:nth-child(odd) { top: 12%; } .skin-particles.p-stars i:nth-child(even) { top: 40%; } .skin-particles.p-stars i:nth-child(3n) { top: 70%; }
@keyframes sk-fall { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(var(--sway), 55vh) rotate(180deg); } 100% { transform: translate(0, 110vh) rotate(360deg); } }
@keyframes sk-rise { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .7; } 100% { transform: translate(var(--sway), -110vh); opacity: 0; } }
@keyframes sk-twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: .9; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .skin-particles { display: none; } }
/* Admin: Auswahl & Vorschau */
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.skin-opt { appearance: none; text-align: center; border: 1px solid var(--line2); background: var(--card); color: var(--text); padding: 8px 6px; cursor: pointer; font: inherit; font-size: calc(12.5px * var(--fs, 1)); display: grid; gap: 6px; justify-items: center; min-height: 92px; }
.skin-opt.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.sk-swatch { display: flex; gap: 2px; height: 44px; align-items: center; justify-content: center; }
.sk-swatch svg { width: 38px; height: 38px; }
.skin-preview { width: 234px; height: 470px; border: 8px solid #2a251f; border-radius: 28px; overflow: hidden; background: #000; flex: none; }
.skin-preview iframe { width: 390px; height: 784px; border: 0; transform: scale(.6); transform-origin: 0 0; pointer-events: none; }
html.preview #toasts, html.preview .update-banner { display: none !important; }

/* v2.1 – reservierbare Tische, Erinnerung, Kohle-Timer */
.floor .resv-dot { fill: var(--gold); stroke: var(--bg); stroke-width: .08; pointer-events: none; }
.legend i.lg-resv { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 0; }
.floor .t.off { opacity: .28; }
.floor .t.off .tbl-shape { stroke-dasharray: .25 .2; }
.spot.off { background: rgba(60, 55, 50, .7); color: #9a948a; border-color: rgba(255, 255, 255, .2); border-style: dashed; cursor: not-allowed; opacity: .75; }
.picker-legend i.lg-off { background: transparent; border: 1px dashed #8a847a; border-radius: 50%; }
.attend-box { margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(var(--gold-rgb), .45); background: var(--gold-soft); }
.call-item.timer { border-style: dashed; }

/* v2.1 – Darstellung der Team-Apps (nur Kasse, Team, Admin; die Gäste-App hat kein data-app) */
html[data-app] .btn, html[data-app] .icon-btn, html[data-app] .chip, html[data-app] .input, html[data-app] .card, html[data-app] .kpi,
html[data-app] .modal, html[data-app] .s-tabs a, html[data-app] .seg, html[data-app] .seg > button, html[data-app] .notice, html[data-app] .call-item { border-radius: var(--r); }
html[data-app] .pill { border-radius: calc(var(--r) * .7); }
html[data-app] .seg { overflow: hidden; }
html[data-app][data-depth="1"] .btn, html[data-app][data-depth="1"] .icon-btn {
  background-image: linear-gradient(180deg, rgba(var(--text-rgb), .07), rgba(var(--text-rgb), .015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 6px rgba(0, 0, 0, .28); }
html[data-app][data-depth="1"] .card, html[data-app][data-depth="1"] .kpi { box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
html[data-app][data-depth="2"] .btn, html[data-app][data-depth="2"] .icon-btn {
  background-color: var(--card2); background-image: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 60%);
  border-color: rgba(var(--text-rgb), .16); border-bottom-color: rgba(0, 0, 0, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 0 rgba(0, 0, 0, .45), 0 6px 14px rgba(0, 0, 0, .3);
  transition: transform .08s, box-shadow .08s, background-color .15s; }
html[data-app][data-depth="2"] .btn:active, html[data-app][data-depth="2"] .icon-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(0, 0, 0, .45), 0 2px 5px rgba(0, 0, 0, .3); }
html[data-app][data-depth="2"] .btn.gold { background-color: var(--gold); border-color: var(--gold); border-bottom-color: var(--gold2);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 58%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--gold2), 0 6px 16px rgba(var(--gold-rgb), .22); }
html[data-app][data-depth="2"] .btn.gold:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 0 var(--gold2), 0 2px 6px rgba(var(--gold-rgb), .2); }
html[data-app][data-depth="2"] .btn.ok { background-color: rgba(132, 196, 110, .14); }
html[data-app][data-depth="2"] .btn.danger { background-color: rgba(224, 103, 79, .12); }
html[data-app][data-depth="2"] .btn.ghost { background: transparent; box-shadow: none; border-color: transparent; }
html[data-app][data-depth="2"] .card, html[data-app][data-depth="2"] .kpi { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 4px 16px rgba(0, 0, 0, .28); }
html[data-app][data-depth="2"] .chip.on, html[data-app][data-depth="2"] .seg > button.on { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 0 rgba(0, 0, 0, .35); }
html[data-app][data-depth] .input:focus { box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .3); }
html[data-app][data-glow] .btn.gold { box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(var(--gold-rgb), .45); }
html[data-app][data-glow] .card { border-color: rgba(var(--gold-rgb), .18); }
/* Helles Schema: Signalfarben dunkler, damit sie auf hellem Grund lesbar bleiben (gleicher Farbton) */
html[data-app][data-scheme="light"] { --green: #2e7d32; --red: #c0392b; --blue: #2a6db0; color-scheme: light; }
html[data-app][data-scheme="light"] .btn.danger { color: #b3261e; border-color: rgba(192, 57, 43, .5); }
html[data-app][data-scheme="light"] .btn.ok { color: #2e7d32; border-color: rgba(46, 125, 50, .5); }
html[data-app][data-scheme="light"][data-depth="2"] .btn { border-bottom-color: rgba(0, 0, 0, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 3px 0 rgba(0, 0, 0, .14), 0 6px 14px rgba(0, 0, 0, .1); }
html[data-app][data-scheme="light"] .card, html[data-app][data-scheme="light"] .kpi { box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
/* Großer Kontrast: größere Schrift und Tippflächen */
html[data-app][data-size="l"] body { font-size: calc(17px * var(--fs, 1)); }
html[data-app][data-size="l"] .btn { min-height: 52px; font-size: max(16px, calc(16px * var(--fs, 1))); }
html[data-app][data-size="l"] .btn.sm { min-height: 44px; font-size: calc(15px * var(--fs, 1)); padding: 9px 14px; }
html[data-app][data-size="l"] .small { font-size: calc(15px * var(--fs, 1)); }
html[data-app][data-size="l"] .tiny { font-size: calc(13px * var(--fs, 1)); }
html[data-app][data-size="l"] .card, html[data-app][data-size="l"] .btn { border-width: 2px; }

/* Admin: Auswahl der Team-Designs */
.look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.look-opt { appearance: none; text-align: start; border: 1px solid var(--line2); background: var(--card); color: var(--text); padding: 10px; cursor: pointer; display: grid; gap: 8px; font: inherit; font-size: calc(13px * var(--fs, 1)); font-weight: 600; position: relative; border-radius: var(--r); }
.look-opt.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.look-opt .sw { height: 54px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; align-items: center; }
.look-opt .sw i { display: block; height: 24px; }
.look-opt .del { position: absolute; top: 4px; right: 4px; min-height: 30px; padding: 4px 8px; }
.look-frame { width: 100%; max-width: 520px; border: 1px solid var(--line2); padding: 14px; display: grid; gap: 10px; }

/* v2.1 – Bildeditor */
.ie-stage { display: grid; place-items: center; background: repeating-conic-gradient(rgba(var(--text-rgb), .06) 0 25%, transparent 0 50%) 0 0 / 18px 18px; padding: 8px; min-height: 160px; }
.ie-canvas { display: block; touch-action: none; cursor: grab; max-width: 100%; box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .6), 0 6px 24px rgba(0, 0, 0, .4); }
.ie-canvas:active { cursor: grabbing; }
.ie-tabs { display: flex; }
.ie-tabs > button { flex: 1; }
.ie-panel { display: grid; gap: 10px; min-height: 120px; }
.ie-chips { position: static; padding: 0; background: none; border: 0; backdrop-filter: none; flex-wrap: wrap; }
.ie-range { display: grid; gap: 4px; font-size: calc(13px * var(--fs, 1)); font-weight: 600; }
.ie-range input, .ie-frow input { width: 100%; accent-color: var(--gold); }
.ie-fgrid { display: flex; flex-wrap: wrap; gap: 6px; }
.ie-fgrid .chip { display: inline-flex; align-items: center; gap: 4px; }
.ie-fgrid .chip .icon { width: 14px; height: 14px; }
.ie-stack { display: grid; gap: 6px; }
.ie-frow { display: grid; grid-template-columns: minmax(90px, auto) 1fr 44px 36px 36px; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); background: var(--card); }
.ie-frow.off { opacity: .5; }
.ie-frow .icon-btn { width: 36px; height: 36px; }
.ie-foot { gap: 8px; }
@media (max-width: 520px) { .ie-frow { grid-template-columns: 1fr 44px 36px 36px; } .ie-frow > b { grid-column: 1 / -1; } }
.preview-note { position: sticky; top: 0; z-index: 40; background: var(--gold); color: var(--on-gold); font-size: calc(12px * var(--fs, 1)); font-weight: 600; padding: 6px 12px; text-align: center; }
/* Admin: Vorschau aller Seiten im iPhone-Rahmen */
.pv-wrap { display: grid; gap: 8px; justify-items: center; }
.pv-row { display: flex; align-items: center; gap: 6px; }
.pv-dots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; max-width: 280px; }
.pv-dots button { appearance: none; border: 0; background: var(--line2); width: 10px; height: 10px; border-radius: 50%; padding: 0; cursor: pointer; }
.pv-dots button.on { background: var(--gold); transform: scale(1.25); }
.pv-label { font-size: calc(12.5px * var(--fs, 1)); font-weight: 600; }
/* v2.1 – Skin Galaxie-Nacht: funkelnde Sterne, ab und zu eine Sternschnuppe */
.skin-particles.p-shooting i { animation-name: sk-twinkle; top: auto; }
.skin-particles.p-shooting i:nth-child(odd) { top: 8%; } .skin-particles.p-shooting i:nth-child(even) { top: 34%; } .skin-particles.p-shooting i:nth-child(3n) { top: 62%; }
.skin-particles.p-shooting i .dot { width: 30%; height: 30%; margin: 35%; }
.skin-particles.p-shooting i:nth-child(-n+3) { top: 6%; width: 90px; height: 2px; animation: sk-shoot 9s ease-in calc(var(--delay) * -1) infinite; opacity: 0; }
.skin-particles.p-shooting i:nth-child(2) { animation-duration: 13s; top: 18%; } .skin-particles.p-shooting i:nth-child(3) { animation-duration: 17s; top: 3%; }
.skin-particles .shoot { display: block; width: 100%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff); box-shadow: 0 0 6px #fff; }
@keyframes sk-shoot { 0%, 88% { opacity: 0; transform: translate(0, 0) rotate(28deg); } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(260px, 140px) rotate(28deg); } }
/* v2.1: lange Stationsnamen („Shisha-Küche“) passen auch am schmalen iPhone in die Leiste */
@media (max-width: 420px) { html[data-app="team"] .team-tabs a { padding-inline: 0; letter-spacing: -.02em; } }

/* =====================================================================
   v2.2 – Admin am Handy, iPad und PC
   ===================================================================== */
/* Navigation: Seitenleiste ab 1024 px, sonst Leiste unten + „Mehr“ */
html[data-app="admin"] .s-app--nav .s-tabs { display: none; }
.s-title { display: none; margin: 0; font-size: calc(17px * var(--fs, 1)); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-side { display: none; }
.s-bottom { display: none; }
.badge.hidden { display: none !important; }
@media (min-width: 1024px) {
  html[data-app="admin"] .s-app--nav { display: grid; grid-template-columns: 228px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  html[data-app="admin"] .s-app--nav > .s-top { grid-column: 1 / -1; }
  html[data-app="admin"] .s-app--nav > .s-foot { grid-column: 1 / -1; }
  html[data-app="admin"] .s-app--nav .s-top > .eyebrow { display: inline; }
  .s-side { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: 1px solid var(--line); background: var(--bg2); overflow-y: auto; }
  .side-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: calc(14px * var(--fs, 1)); border-radius: var(--r); min-height: 44px; }
  .side-link .icon { width: 20px; height: 20px; flex: none; }
  .side-link:hover { background: var(--card); color: var(--text); }
  .side-link.on { background: var(--card2); color: var(--text); box-shadow: inset 3px 0 0 var(--gold); }
  .side-link .badge { position: static; }
}
@media (max-width: 1023.98px) {
  html[data-app="admin"] .s-app--nav .s-top { gap: 8px; padding: 8px 12px; flex-wrap: nowrap; }
  html[data-app="admin"] .s-app--nav .s-top > .eyebrow { display: none; }
  html[data-app="admin"] .s-app--nav .s-top img.wm { height: 20px; }
  .s-title { display: block; flex: 1; min-width: 0; }
  html[data-app="admin"] .s-app--nav .s-foot { display: none; }
  .s-bottom { display: flex; flex: none; border-top: 1px solid var(--line); background: var(--bg2); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
  .bn { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: 6px 2px;
    color: var(--muted); text-decoration: none; font: inherit; font-size: calc(11.5px * var(--fs, 1)); font-weight: 600; background: none; border: 0; cursor: pointer; position: relative; }
  .bn.on { color: var(--gold); }
  .bn.on::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; background: var(--gold); border-radius: 0 0 3px 3px; }
  .bn-ic { position: relative; display: grid; place-items: center; }
  .bn-ic .icon { width: 24px; height: 24px; }
  .bn-ic .badge { position: absolute; top: -6px; left: 14px; min-width: 18px; height: 18px; font-size: calc(10.5px * var(--fs, 1)); padding: 0 5px; border-radius: 9px; background: var(--gold); color: var(--on-gold); display: grid; place-items: center; }
  .bn-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.more-tile { display: grid; justify-items: center; gap: 8px; padding: 16px 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); text-decoration: none; font-weight: 600; font-size: calc(13px * var(--fs, 1)); text-align: center; position: relative; min-height: 92px; }
.more-tile .icon { width: 26px; height: 26px; color: var(--gold); }
.more-tile.on { border-color: var(--gold); }
.more-tile .badge { position: absolute; top: 8px; right: 8px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--gold); color: var(--on-gold); font-size: calc(11px * var(--fs, 1)); display: grid; place-items: center; padding: 0 6px; }
/* Kopfzeile: Symbole mit Beschriftung */
.top-btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 520px) { .top-btn .tl { display: none; } }

/* Fenster: am Handy als Blatt von unten, Knopfzeile bleibt sichtbar */
.modal .grab { display: none; }
.modal-actions { position: sticky; bottom: -1px; background: var(--bg2); padding-top: 12px; padding-bottom: 4px; margin-top: 6px; z-index: 2; box-shadow: 0 -10px 14px -10px rgba(0, 0, 0, .5); justify-content: flex-end; }
@media (max-width: 700px) {
  html[data-app] .modal-bg { align-items: flex-end; padding: 0; }
  html[data-app] .modal { width: 100%; max-width: none; max-height: 92dvh; border-radius: calc(var(--r) + 8px) calc(var(--r) + 8px) 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); animation: sheet-in .22s ease-out; }
  html[data-app] .modal .grab { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line2); margin: -4px auto 10px; touch-action: none; }
  html[data-app] .modal-head { touch-action: none; }
  html[data-app] .modal-actions { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  html[data-app] .modal-actions .btn { flex: 1; }
}
@keyframes sheet-in { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html[data-app] .modal { animation: none; } }
/* Einstellungen: zuklappbare Abschnitte, Inhaltsverzeichnis, feste Speichern-Leiste */
.settings-layout { display: grid; gap: 14px; }
.settings-layout .settings-cols { columns: auto; max-width: 900px; }
details.sec { margin-bottom: 12px; padding: 0; }
details.sec > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; cursor: pointer; min-height: 56px; }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary .title-m { margin: 0; font-size: max(16px, calc(16px * var(--fs, 1))); }
details.sec > summary .icon { transform: rotate(90deg); transition: transform .15s; color: var(--muted); flex: none; }
details.sec[open] > summary .icon { transform: rotate(-90deg); }
details.sec > .sec-body { padding: 0 18px 18px; }
.sec-toc { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.sec-toc::-webkit-scrollbar { display: none; }
.sec-toc a { white-space: nowrap; padding: 8px 12px; border: 1px solid var(--line2); border-radius: 999px; color: var(--muted); text-decoration: none; font-size: calc(13px * var(--fs, 1)); font-weight: 600; }
.sec-toc a:hover { color: var(--text); border-color: var(--gold); }
@media (min-width: 1024px) {
  .settings-layout { grid-template-columns: 210px minmax(0, 1fr); align-items: start; }
  .sec-toc { flex-direction: column; position: sticky; top: 0; overflow: visible; gap: 2px; }
  .sec-toc a { border: 0; border-radius: var(--r); padding: 8px 10px; white-space: normal; }
}
.savebar { position: sticky; bottom: 0; z-index: 30; display: none; align-items: center; gap: 10px; padding: 12px 14px; margin-top: 8px; background: var(--card2);
  border: 1px solid var(--gold); border-radius: var(--r); box-shadow: 0 -6px 24px rgba(0, 0, 0, .45); }
.savebar.on { display: flex; animation: sheet-in .18s ease-out; }
/* Übersicht: Jetzt zu tun + Schnellaktionen */
.todo { display: grid; gap: 14px; margin-bottom: 16px; border-color: rgba(var(--gold-rgb), .45); }
.todo-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 18px; }
.quick-btn { display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 52px; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); color: var(--text); text-decoration: none; font-weight: 600; font-size: calc(14px * var(--fs, 1)); }
.quick-btn .icon { color: var(--gold); flex: none; }
.quick-btn:hover { border-color: var(--gold); }
@media (max-width: 520px) { .quick { grid-template-columns: 1fr 1fr; } }
/* Lesbarkeit am Handy: nichts unter 12 px */
@media (max-width: 700px) { html[data-app="admin"] .tiny { font-size: calc(12px * var(--fs, 1)); } html[data-app="admin"] .bars .tiny, html[data-app="admin"] .chart text { font-size: calc(12px * var(--fs, 1)); } }
@media (max-width: 1023.98px) { html[data-app="admin"] .page-head h1.same { display: none; } html[data-app="admin"] .page-head { gap: 8px; } }
/* Grundriss-Editor: Zoom, Kontextmenü, Touch */
.floor.zoomed { cursor: grab; }
.floor { touch-action: none; }
.floor.readonly { touch-action: auto; }
@media (pointer: coarse) { .floor .handle { transform-box: fill-box; transform-origin: center; transform: scale(1.35); } }
.ctx-menu { position: fixed; z-index: 120; min-width: 210px; background: var(--card2); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); padding: 4px; display: grid; }
.ctx-menu button { appearance: none; background: none; border: 0; color: var(--text); font: inherit; font-size: calc(14px * var(--fs, 1)); text-align: start; padding: 9px 12px; border-radius: var(--r); cursor: pointer; white-space: pre; }
.ctx-menu button:hover { background: var(--card); }
.ctx-menu button.danger { color: var(--red); }
.kbd-hint { display: none; }
@media (pointer: fine) and (min-width: 1024px) { .kbd-hint { display: inline; } }
.floor-tools .tl { display: none; }
@media (min-width: 1280px) { .floor-tools .tl { display: inline; } }
/* Tische am Handy (Hochformat): Liste + Dreh-Hinweis */
.rotate-card { appearance: none; width: 100%; display: flex; align-items: center; gap: 14px; text-align: start; font: inherit; color: var(--text); cursor: pointer; border-color: rgba(var(--gold-rgb), .5); margin-bottom: 12px; }
.rot-phone { width: 46px; height: 46px; display: grid; place-items: center; color: var(--gold); flex: none; }
.rot-phone .icon { width: 34px; height: 34px; animation: rot-hint 2.6s ease-in-out infinite; }
@keyframes rot-hint { 0%, 25% { transform: rotate(0); } 55%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .rot-phone .icon { animation: none; transform: rotate(-90deg); } }
.tlist { gap: 8px; margin-top: 8px; }
.tl-row { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; padding: 12px 14px; }
.tl-row.off { opacity: .6; }
.tl-name { display: grid; }
.tl-sws { grid-column: 1 / -1; display: flex; gap: 18px; flex-wrap: wrap; }
.tl-sw { display: inline-flex; align-items: center; gap: 8px; font-size: calc(14px * var(--fs, 1)); font-weight: 600; }
.fe-step { display: inline-flex; align-items: center; gap: 8px; justify-self: end; }
.fe-step .btn { min-width: 44px; min-height: 44px; font-size: calc(20px * var(--fs, 1)); padding: 0; }
.page-head .tl { display: inline; }
@media (max-width: 700px) { html[data-app="admin"] .page-head .btn .tl { display: none; } }
/* Vollbild-Editor (Handy quer) */
html.fe-open, html.fe-open body { overflow: hidden; }
.fe-full { position: fixed; inset: 0; z-index: 85; background: var(--bg); display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.fe-rail { display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--bg2); overflow-y: auto; scrollbar-width: none; }
.fe-rail::-webkit-scrollbar { display: none; }
.fe-left { border-right: 1px solid var(--line); }
.fe-right { border-left: 1px solid var(--line); }
.fe-cap { font-size: calc(10px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); text-align: center; padding: 2px 0 4px; }
.fe-tool { appearance: none; display: grid; justify-items: center; gap: 1px; width: 62px; min-height: 44px; padding: 4px 2px; border: 1px solid var(--line); background: var(--card);
  color: var(--text); font: inherit; font-size: calc(11px * var(--fs, 1)); font-weight: 600; border-radius: var(--r); cursor: pointer; flex: none; }
.fe-tool .icon { width: 20px; height: 20px; }
.fe-tool:disabled { opacity: .35; }
.fe-tool.on { border-color: var(--gold); color: var(--gold); }
.fe-save { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.fe-save:disabled { background: var(--card); color: var(--muted); border-color: var(--line); opacity: 1; }
.fe-center { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.fe-center .floor-wrap { padding: 4px; min-height: 0; display: flex; }
.fe-center .floor { width: 100%; height: 100%; }
.fe-strip { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-top: 1px solid var(--line); background: var(--bg2); min-height: 56px; overflow-x: auto; scrollbar-width: none; }
.fe-strip::-webkit-scrollbar { display: none; }
.fe-strip > * { flex: none; }
.fe-label { display: flex; align-items: center; gap: 6px; font-size: calc(13px * var(--fs, 1)); font-weight: 600; }
.fe-label .input { width: 64px; min-height: 40px; padding: 6px 8px; }
.fe-strip .fe-step .btn { min-width: 40px; min-height: 40px; }
.fe-chk { display: inline-flex; align-items: center; gap: 6px; }
.fe-drawer { position: absolute; right: 0; top: 0; bottom: 0; width: min(360px, 70vw); background: var(--bg2); border-left: 1px solid var(--line2); box-shadow: -12px 0 30px rgba(0, 0, 0, .5);
  transform: translateX(105%); transition: transform .2s; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 12px; overflow-y: auto; display: grid; gap: 10px; align-content: start; z-index: 3; }
.fe-drawer.on { transform: none; }
.fe-drawer .floor-panel { border: 0; padding: 0; background: none; max-height: none; }
.fe-rotate { display: none; }
@media (orientation: portrait) {
  .fe-rotate { display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; position: absolute; inset: 0; background: var(--bg); z-index: 5; padding: 24px; }
  .fe-rotate .rot-phone { width: 90px; height: 90px; }
  .fe-rotate .rot-phone .icon { width: 64px; height: 64px; }
}
/* Karte im Admin: Kategorien als Reiter am Handy, Ziehen zum Sortieren, „Verfügbar/Ausverkauft“ */
.cat-chips { display: none; }
@media (max-width: 899.98px) {
  html[data-app="admin"] .cat-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; position: static; margin: 0 0 10px; padding: 0 0 4px; background: none; border: 0; backdrop-filter: none; flex: none; }
  html[data-app="admin"] .menu-split { grid-template-columns: 1fr; }
  html[data-app="admin"] .menu-split > .side-list { display: none; }
}
.drag-handle { appearance: none; background: none; border: 0; color: var(--dim); width: 36px; min-height: 44px; display: grid; place-items: center; cursor: grab; flex: none; touch-action: none; padding: 0; border-radius: var(--r); }
.drag-handle:hover, .drag-handle:focus-visible { color: var(--text); background: var(--card2); }
.sorting { user-select: none; -webkit-user-select: none; }
.dragging { position: relative; z-index: 5; box-shadow: 0 12px 28px rgba(0, 0, 0, .5); background: var(--card2) !important; transition: none !important; cursor: grabbing; }
.adm-items .item { gap: 10px; }
.adm-items .item.soldout .thumb, .adm-items .item.soldout h3 { opacity: .5; }
.avail { display: inline-flex; align-items: center; gap: 8px; font-size: calc(13px * var(--fs, 1)); font-weight: 600; min-width: 128px; cursor: pointer; }
.item.soldout .avail-l { color: var(--red); }
.adm-items .btn .tl { display: none; }
@media (min-width: 1280px) { .adm-items .btn .tl { display: inline; } }
@media (max-width: 600px) {
  html[data-app="admin"] .adm-items .item { display: grid; grid-template-columns: 36px 56px 1fr auto; grid-template-areas: "h t n p" "h t a e"; align-items: center; row-gap: 6px; }
  html[data-app="admin"] .adm-items .item > .drag-handle { grid-area: h; }
  html[data-app="admin"] .adm-items .item > .thumb { grid-area: t; width: 56px; height: 56px; }
  html[data-app="admin"] .adm-items .item > .grow { grid-area: n; min-width: 0; }
  html[data-app="admin"] .adm-items .item > .grow p { display: none; }
  html[data-app="admin"] .adm-items .item > .price { grid-area: p; }
  html[data-app="admin"] .adm-items .item > .avail { grid-area: a; min-width: 0; }
  html[data-app="admin"] .adm-items .item > .btn { grid-area: e; justify-self: end; }
}
/* Kundenliste: Mehrfachauswahl (PC/iPad) und Karten (Handy) */
.bulkbar { display: none; position: sticky; top: 0; z-index: 4; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 8px; background: var(--card2); border: 1px solid var(--gold); border-radius: var(--r); }
.bulkbar.on { display: flex; }
.users-tbl .selc { width: 40px; text-align: center; }
.sel-box { width: 20px; height: 20px; accent-color: var(--gold); cursor: pointer; }
@media (max-width: 700px) {
  html[data-app] .users-tbl thead { display: none; }
  html[data-app] .users-tbl, html[data-app] .users-tbl tbody { display: block; }
  html[data-app] .users-tbl tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 14px; margin-bottom: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
  html[data-app] .users-tbl td { display: block; padding: 0; border: 0; }
  html[data-app] .users-tbl td.selc { display: none; }
  html[data-app] .users-tbl td:nth-child(2) { grid-column: 1; }
  html[data-app] .users-tbl td:nth-child(4) { grid-column: 2; grid-row: 1; justify-self: end; }
  html[data-app] .users-tbl td:nth-child(3) { grid-column: 1 / -1; }
  html[data-app] .users-tbl td:nth-child(5) { display: none; }
  html[data-app] .users-tbl td:nth-child(6) { grid-column: 1 / -1; }
  html[data-app] .users-tbl td:nth-child(6) .row { justify-content: flex-start !important; }
}
@media (pointer: coarse) and (min-width: 701px) { .users-tbl .selc { width: 52px; } .sel-box { width: 26px; height: 26px; } }
/* Reservierungen: Wischen (Touch) und Wochenansicht (PC/iPad quer) */
.swipeable { position: relative; will-change: transform; }
.swipe-hint { position: absolute; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: calc(14px * var(--fs, 1)); opacity: 0; pointer-events: none; white-space: nowrap; }
.swipe-hint.r { right: calc(100% + 14px); opacity: .6; } .swipe-hint.l { left: calc(100% + 14px); opacity: .6; }
.swipe-hint.go { opacity: 1; }
.swipe-hint.ok { color: var(--green); } .swipe-hint.bad { color: var(--red); }
.res-mode { display: none; }
@media (min-width: 1024px) { .res-mode { display: inline-flex; } }
.week { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 8px; overflow-x: auto; }
.week-day { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; display: grid; gap: 6px; align-content: start; min-height: 220px; }
.week-day.today { border-color: var(--gold); }
.week-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.week-res { appearance: none; text-align: start; display: grid; gap: 1px; padding: 6px 8px; border: 1px solid var(--line2); border-left: 4px solid var(--dim); background: var(--card2); color: var(--text); font: inherit; font-size: calc(12.5px * var(--fs, 1)); border-radius: var(--r); cursor: pointer; }
.week-res span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-res.pending { border-left-color: var(--gold); }
.week-res.confirmed { border-left-color: var(--green); }
.week-res.declined, .week-res.cancelled, .week-res.noshow { opacity: .5; }
.week-res.clash { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.week-res:hover { border-color: var(--gold); }
.img-drop { outline: none; border-radius: var(--r); }
.img-drop:focus-visible, .img-drop.over { box-shadow: 0 0 0 2px var(--gold); }
.img-drop.over > div:first-child { opacity: .6; }
.res-photo.edit { touch-action: none; }
.lupe { display: none; position: absolute; z-index: 10; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 8px 24px rgba(0, 0, 0, .6); background-repeat: no-repeat; pointer-events: none; }
.lupe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #000; }
.tap-tip { position: fixed; z-index: 130; max-width: 280px; padding: 8px 12px; background: var(--card2); border: 1px solid var(--gold); color: var(--text); font-size: calc(13px * var(--fs, 1)); font-weight: 600; border-radius: var(--r); box-shadow: 0 8px 20px rgba(0, 0, 0, .5); pointer-events: none; animation: fade .15s; }
@media (hover: none) { .cols-chart > div[title], .chart-bar[title] { cursor: pointer; } }
@media (max-width: 700px) { html[data-app="admin"] .chart-bar .lbl, html[data-app="admin"] .chart-bar .val, html[data-app="admin"] .cols-chart span { font-size: calc(12px * var(--fs, 1)); } }
kbd { font: 600 calc(12px * var(--fs, 1)) ui-monospace, monospace; padding: 2px 7px; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 4px; background: var(--card); }

/* =====================================================================
   v2.2.1 – iPad/iPhone: Oberfläche hängt fest an allen vier Kanten (keine berechnete Höhe mehr).
   Statusleiste oben und Home-Balken unten werden nur innen freigehalten – kein leerer Streifen.
   ===================================================================== */
html[data-app] .s-app, html.ios-pwa[data-app] .s-app {
  position: fixed; top: 0; bottom: 0; left: 0; right: 0; height: auto; min-height: 0; max-height: none;
  padding: var(--safe-t) env(safe-area-inset-right, 0px) var(--safe-b) env(safe-area-inset-left, 0px); box-sizing: border-box; background: var(--bg2);
}
html[data-app] .s-app > .s-main { background: var(--bg); }
html, body { height: 100%; }
/* Anzeige-Prüfung: ?layout=1 an die Adresse hängen */
.layout-debug { position: fixed; z-index: 999; left: 8px; bottom: 8px; background: rgba(0, 0, 0, .85); color: #0f0; font: calc(12px * var(--fs, 1))/1.4 ui-monospace, monospace; padding: 8px 10px; border: 1px solid #0f0; white-space: pre; pointer-events: none; }
/* Admin ab Tablet quer: Fußzeile (Version, Stand, Benutzer) unten in der Seitenleiste statt eigener Zeile */
@media (min-width: 1024px) {
  html[data-app="admin"] .s-app--nav > .s-foot { display: none; }
  html[data-app="admin"] .s-app--nav { grid-template-rows: auto minmax(0, 1fr); }
  .side-foot { display: grid; gap: 2px; padding: 10px 12px 2px; border-top: 1px solid var(--line); font-size: calc(11.5px * var(--fs, 1)); color: var(--dim); }
  .side-foot > * { display: block; white-space: normal; }
}
/* Flache Bildschirme (iPad quer, iPad mini, Laptop): kompaktere Kopfzeilen und Abstände */
@media (orientation: landscape) and (max-height: 900px) and (min-width: 900px) {
  html[data-app] .s-top { padding-top: 6px; padding-bottom: 6px; }
  html[data-app] .s-main { padding-top: 12px; }
  html[data-app] .page-head { margin-bottom: 10px; }
  html[data-app] .page-head p.muted { font-size: calc(13px * var(--fs, 1)); }
  html[data-app="admin"] .floor-tools { gap: 6px; }
  html[data-app="admin"] .floor-tools .btn.sm { min-height: 36px; padding: 6px 10px; }
  html[data-app="kasse"] .s-foot { padding-top: 3px; padding-bottom: 3px; }
}
/* v2.2.1: Vollbild-Editor – Plan mit Abstand zum oberen Rand (auch unter Safari-Leiste/Notch) */
.fe-full { padding-top: max(env(safe-area-inset-top, 0px), 6px); }
.fe-center .floor-wrap { padding: 10px 6px 6px; }
/* v2.2.1: Querformat-Aufteilungen und Höhen-Stufen */
.home-cols { display: block; }
@media (min-width: 1180px) {
  html[data-app="admin"] .home-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  html[data-app="admin"] .home-right .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
  html[data-app="admin"] .home-left .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-app="admin"] .res-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
  html[data-app="admin"] .res-cols > .card { margin: 0; }
}
/* Artikel/Kategorie bearbeiten als Seitenleiste rechts (Liste bleibt sichtbar) */
.modal-bg.side-bg { justify-content: flex-end; align-items: stretch; background: rgba(8, 7, 6, .35); backdrop-filter: none; }
.modal.side { width: min(480px, 42vw); max-width: none; max-height: none; height: 100%; border-width: 0 0 0 1px; animation: side-in .2s ease-out; padding-top: calc(18px + var(--safe-t)); }
@keyframes side-in { from { transform: translateX(30px); opacity: .5; } to { transform: none; opacity: 1; } }
/* Kasse: Statuszeile in der Kopfzeile statt eigener Zeile unten */
html[data-app="kasse"] .s-top > .s-foot.foot-inline { order: 99; margin-left: auto; padding: 0; border: 0; background: none; font-size: calc(11px * var(--fs, 1)); color: var(--dim); width: auto; gap: 10px; flex: none; white-space: nowrap; }
html[data-app="kasse"] .s-top > .s-foot.foot-inline > * { margin: 0; }
@media (max-width: 1100px) { html[data-app="kasse"] .s-top > .s-foot.foot-inline .ver, html[data-app="kasse"] .s-top > .s-foot.foot-inline > :first-child { display: none; } }
/* Viel Höhe (iPad Pro 13″ quer/hoch, große Monitore): mehr Luft und mehr Spalten */
@media (min-height: 1000px) and (min-width: 1300px) {
  html[data-app] .s-main { padding: 20px 26px; }
  html[data-app="admin"] .home-right .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-app="kasse"] .card { padding: 16px 18px; }
}
@media (orientation: portrait) and (min-height: 1100px) and (min-width: 1000px) { html[data-app="admin"] .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html[data-app="kasse"] .s-top:has(> .foot-inline) > .s-tabs { flex: 1 0 calc(100% - 250px); min-width: 0; }
html[data-app="kasse"] .s-top > .s-foot.foot-inline { order: 10; display: grid; gap: 0; text-align: right; line-height: 1.35; max-width: 220px; overflow: hidden; }
html[data-app="kasse"] .s-top > .s-foot.foot-inline > :first-child, html[data-app="kasse"] .s-top > .s-foot.foot-inline > .grow { display: none; }
html[data-app="kasse"] .s-top > .s-foot.foot-inline > span { overflow: hidden; text-overflow: ellipsis; }

/* =====================================================================
   v2.3 – Bestellungen aufnehmen (Service)
   ===================================================================== */
.svc { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; position: relative; }
.svc-head { display: flex; align-items: center; gap: 10px; flex: none; }
.svc-head h2 { margin: 0; font-size: calc(19px * var(--fs, 1)); flex: 1; }
.svc-steps { font-size: calc(11px * var(--fs, 1)); font-weight: 600; color: var(--dim); white-space: nowrap; }
.svc-steps b { color: var(--gold); }
.svc-seg { display: flex; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); padding: 3px; gap: 3px; flex: none; }
.svc-seg button { flex: 1; appearance: none; border: 0; background: none; color: var(--muted); font: inherit; font-size: calc(13px * var(--fs, 1)); font-weight: 600; padding: 9px 4px; border-radius: max(0px, calc(var(--r) - 3px)); cursor: pointer; }
.svc-seg button.on { background: var(--gold); color: var(--on-gold); box-shadow: 0 2px 0 var(--gold2); }
.svc-pick { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.svc-pickbody { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
/* Zahlenräder */
.svc-wheels { display: grid; gap: 8px; flex: 1; min-height: 220px; }
.svc-wheel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; overflow: hidden; position: relative; min-height: 0; }
.svc-wheel.act { border-color: var(--gold); }
.svc-wheel h3 { margin: 0; font-size: calc(11px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); text-align: center; padding: 10px 4px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-wheel.act h3 { color: var(--gold); }
.svc-drum { flex: 1; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); }
.svc-drum::-webkit-scrollbar { display: none; }
.svc-pad { height: calc(50% - 28px); }
.svc-num { height: 56px; display: grid; place-items: center; scroll-snap-align: center; font-size: calc(22px * var(--fs, 1)); font-weight: 600; color: var(--dim); cursor: pointer; transition: font-size .12s, color .12s; }
.svc-num.sel { font-size: calc(40px * var(--fs, 1)); font-weight: 700; color: var(--text); }
.svc-wheel.act .svc-num.sel { color: var(--gold); }
.svc-band { position: absolute; left: 6px; right: 6px; top: calc(50% + 17px); height: 56px; margin-top: -28px; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); background: rgba(var(--text-rgb), .04); border-radius: 10px; pointer-events: none; }
.svc-wheel.act .svc-band { border-color: rgba(var(--gold-rgb), .6); background: rgba(var(--gold-rgb), .08); }
.svc-go { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card2); border: 1px solid var(--gold); border-radius: var(--r); }
.svc-go .big { font-size: calc(26px * var(--fs, 1)); font-weight: 700; color: var(--gold); white-space: nowrap; }
.btn.xl { min-height: 54px; font-size: max(16px, calc(16px * var(--fs, 1))); padding: 12px 20px; }
/* Nummer */
.svc-display { text-align: center; font-size: calc(72px * var(--fs, 1)); font-weight: 700; line-height: 1.05; color: var(--gold); min-height: 80px; }
.svc-cur { display: inline-block; width: 3px; height: 58px; background: var(--gold); margin-left: 4px; vertical-align: -4px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.svc-sugg { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; min-height: 38px; }
.svc-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; }
.svc-keys button { min-height: 62px; font-size: calc(26px * var(--fs, 1)); font-weight: 600; }
.svc-keys.sm button { min-height: 50px; font-size: calc(22px * var(--fs, 1)); }
/* Grundriss */
.svc-plans { display: grid; gap: 8px; overflow-y: auto; min-height: 0; flex: 1; align-content: start; }
.svc-zplan { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 8px 8px; }
.svc-zplan h3 { margin: 0 0 2px; font-size: calc(11px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.svc-zplan svg.floor { width: 100%; height: 132px; display: block; }
.svc-plan { flex: 1; min-height: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 6px; display: flex; }
.svc-plan svg.floor { width: 100%; height: 100%; }
.svc .floor .t { cursor: pointer; }
.svc .floor .t.busy .tbl-shape { fill: rgba(var(--gold-rgb), .22); stroke: var(--gold); stroke-width: .14; }
.svc .floor .t.pick .tbl-shape { fill: var(--gold); stroke: var(--gold2); }
.svc .floor .t.pick text { fill: var(--on-gold) !important; }
.svc-legend { display: flex; gap: 14px; font-size: calc(12px * var(--fs, 1)); color: var(--muted); flex-wrap: wrap; flex: none; }
.svc-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.svc-legend i.f { background: var(--card2); border: 1px solid var(--line2); } .svc-legend i.b { background: rgba(var(--gold-rgb), .3); border: 1px solid var(--gold); } .svc-legend i.p { background: var(--gold); }
/* Bestellen */
.svc-order { display: flex; flex-direction: column; gap: 9px; flex: 1; min-height: 0; }
.svc-orderhead { display: flex; align-items: center; gap: 8px; flex: none; }
.svc-tchip { display: inline-flex; align-items: baseline; gap: 8px; background: var(--gold); color: var(--on-gold); font-weight: 700; padding: 6px 12px; border-radius: 999px; font-size: calc(15px * var(--fs, 1)); white-space: nowrap; }
.svc-tchip small { font-weight: 600; opacity: .75; font-size: calc(12px * var(--fs, 1)); }
.svc-viewsw { display: flex; gap: 4px; margin-left: auto; }
.svc-viewsw button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line2); background: var(--card); color: var(--muted); border-radius: 10px; cursor: pointer; }
.svc-viewsw button.on { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
.svc-searchbox { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); padding: 0 12px; min-height: 44px; color: var(--dim); flex: none; }
.svc-search { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: inherit; font-size: max(16px, calc(16px * var(--fs, 1))); outline: none; padding: 8px 0; }
.svc-already { font-size: calc(12px * var(--fs, 1)); color: var(--muted); background: rgba(var(--text-rgb), .04); border: 1px dashed var(--line2); border-radius: 10px; padding: 7px 10px; flex: none; }
.svc-already b { color: var(--text); }
.svc-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; padding-bottom: 2px; }
.svc-cats::-webkit-scrollbar { display: none; }
.svc-cats button { white-space: nowrap; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line2); font: inherit; font-size: calc(13px * var(--fs, 1)); font-weight: 600; color: var(--muted); background: none; cursor: pointer; }
.svc-cats button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.svc-items { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 2px 90px; }
.svc-grp, .svc-lhead { font-size: calc(11px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .1em; color: var(--gold); font-weight: 700; margin: 10px 0 6px; }
.svc-grp:first-child { margin-top: 0; }
.svc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
.svc-tile { position: relative; background-color: var(--card2); border: 1px solid rgba(var(--text-rgb), .14); border-bottom-color: rgba(0, 0, 0, .55); border-radius: var(--r); min-height: 76px; padding: 9px 9px 8px;
  display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 3px 0 rgba(0, 0, 0, .45); transition: transform .08s; }
.svc-tile b { font-size: calc(13px * var(--fs, 1)); line-height: 1.2; }
.svc-tile em { font-style: normal; font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.svc-tile .cnt { position: absolute; top: -7px; right: -6px; min-width: 26px; height: 26px; border-radius: 13px; background: var(--gold); color: var(--on-gold); font-weight: 700; font-size: calc(14px * var(--fs, 1)); display: grid; place-items: center; padding: 0 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.svc-tile .note { font-size: calc(10.5px * var(--fs, 1)); color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-tile.has { border-color: rgba(var(--gold-rgb), .7); }
.svc-tile.out, .svc-lrow.out, .svc-icard.out { opacity: .38; }
.svc-tile.out em::after { content: " · aus"; color: var(--red); }
.svc-tile.press { transform: scale(.96); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .5); }
.svc-lrow { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line); min-height: 50px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.svc-lrow .nm { flex: 1; font-size: calc(14px * var(--fs, 1)); font-weight: 600; min-width: 0; } .svc-lrow .nm small { color: var(--gold); font-weight: 500; }
.svc-lrow .pr { font-size: calc(13px * var(--fs, 1)); color: var(--muted); width: 58px; text-align: right; }
.svc-lrow.has .nm { color: var(--gold); }
.svc-lhead { position: sticky; top: -8px; background: var(--bg); padding: 8px 2px 4px; margin: 0; border-bottom: 1px solid var(--line); z-index: 1; }
.svc-step { display: flex; align-items: center; gap: 4px; flex: none; }
.svc-step .btn { width: 40px; height: 40px; min-height: 40px; padding: 0; font-size: calc(20px * var(--fs, 1)); }
.svc-step b { width: 26px; text-align: center; font-size: max(16px, calc(16px * var(--fs, 1))); }
.svc-std { display: grid; gap: 8px; }
.svc-icard { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; align-items: center; }
.svc-icard .th { width: 64px; height: 64px; border-radius: 10px; flex: none; overflow: hidden; background: var(--card2); }
.svc-icard .th img { width: 100%; height: 100%; object-fit: cover; }
.svc-icard h4 { margin: 0; font-size: calc(15px * var(--fs, 1)); } .svc-icard p { margin: 2px 0 0; font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); }
.svc-icard .pz { font-weight: 700; color: var(--gold); margin-top: 4px; font-size: calc(14px * var(--fs, 1)); }
.svc-cartbar { position: absolute; left: 0; right: 0; bottom: 4px; appearance: none; border: 0; font: inherit; display: flex; align-items: center; gap: 12px; background: var(--gold); color: var(--on-gold); border-radius: 16px; padding: 14px 16px; font-weight: 700; font-size: max(16px, calc(16px * var(--fs, 1))); box-shadow: 0 4px 0 var(--gold2), 0 10px 24px rgba(0, 0, 0, .4); cursor: pointer; }
.svc-cartbar .pill { background: var(--on-gold); color: var(--gold); padding: 2px 9px; border-radius: 999px; font-size: calc(13px * var(--fs, 1)); }
.svc-cartbar span.grow { flex: 1; text-align: left; }
/* Bearbeiten-Blatt */
.svc-qtyrow { display: flex; align-items: center; justify-content: center; gap: 18px; }
.svc-qtyrow .q { font-size: calc(54px * var(--fs, 1)); font-weight: 700; min-width: 90px; text-align: center; color: var(--gold); border-bottom: 2px solid var(--gold); line-height: 1.1; }
.svc-qtyrow .btn { width: 62px; height: 62px; font-size: calc(30px * var(--fs, 1)); padding: 0; }
.svc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* Prüfen */
.svc-review { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; flex: 1; padding-bottom: 10px; }
.svc-oline { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.svc-oline .q { font-weight: 700; color: var(--gold); width: 30px; font-size: max(16px, calc(16px * var(--fs, 1))); }
.svc-oline .nm { flex: 1; min-width: 0; } .svc-oline .nm b { display: block; font-size: calc(15px * var(--fs, 1)); } .svc-oline .nm small { color: var(--gold); font-size: calc(12px * var(--fs, 1)); }
.svc-oline .st { font-size: calc(10.5px * var(--fs, 1)); color: var(--muted); border: 1px solid var(--line2); border-radius: 6px; padding: 1px 6px; margin-top: 3px; display: inline-block; }
.svc-sum { display: flex; justify-content: space-between; font-size: calc(18px * var(--fs, 1)); font-weight: 700; padding: 4px 0; }
.svc-cust { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--line2); border-radius: var(--r); font-size: calc(13.5px * var(--fs, 1)); color: var(--muted); }
.svc-cust b { color: var(--text); }
/* Kasse/iPad: alles nebeneinander */
.svc-wide { display: grid; grid-template-columns: minmax(230px, 270px) minmax(0, 1fr) minmax(280px, 340px); gap: 0; height: 100%; }
.svc-col { min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 4px 14px; }
.svc-left { border-right: 1px solid var(--line); padding-left: 0; }
.svc-right { border-left: 1px solid var(--line); padding-right: 0; }
.svc-wide .svc-tiles { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.svc-wide .svc-items { padding-bottom: 12px; }
.svc-wide .svc-display { font-size: calc(52px * var(--fs, 1)); min-height: 58px; } .svc-wide .svc-cur { height: 42px; }
.svc-wide .svc-keys button { min-height: 50px; font-size: calc(22px * var(--fs, 1)); }
.team-view .svc { padding-bottom: 6px; }
.svc-drumwrap { position: relative; flex: 1; min-height: 0; }
.svc-drumwrap > .svc-drum { position: absolute; inset: 0; }
.svc-band { top: 50%; }
/* Team-App: „Aufnehmen“ füllt die Höhe, Liste scrollt innen, Leiste „Prüfen & senden“ immer sichtbar */
html[data-app="team"] .team-view:has(> .svc) { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 8px; }
html[data-app="team"] .team-view > .svc { flex: 1; min-height: 0; height: auto; }
html[data-app="team"] .team-app:has(.svc) { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
html[data-app="kasse"] .s-main > .fill:has(> .svc) { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
html[data-app="kasse"] .s-main > .fill > .svc { flex: 1; min-height: 0; height: auto; }
.svc, .svc-order { min-width: 0; overflow-x: hidden; }
button.svc-tchip { appearance: none; border: 0; font-family: inherit; cursor: pointer; min-width: 0; max-width: 62%; overflow: hidden; text-overflow: ellipsis; }
.svc-tchip .chg { font-size: calc(13px * var(--fs, 1)); opacity: .7; margin-left: 2px; }
.svc-already { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* v2.3 – Tischkarten im BONDI-Stil (Druck): dunkle Karte, Goldlinie, QR auf Hellgrund, Tischnummer in der Sonne */
@media print {
  .qr-card.brand { position: relative; background: #141210 !important; color: #f0ebde !important; border: 0 !important; border-radius: 3mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; gap: 2mm; overflow: hidden; }
  .print-sheet:has(.qr-card.brand) { gap: 4mm; }
  .qr-card.brand::before { content: ""; position: absolute; inset: 2.2mm; border: .35mm solid rgba(239, 194, 28, .55); border-radius: 2mm; pointer-events: none; }
  .qr-card.brand img.wm { height: 7.5mm; width: auto; }
  .qr-card.brand .q { background: none !important; padding: 0 !important; }
  .qr-card.brand .q svg { width: 56mm; height: 56mm; display: block; }
  .qr-card.brand .hint { font-size: 8pt; letter-spacing: .14em; text-transform: uppercase; color: #EFC21C !important; font-weight: 600; margin: 0; }
  .qr-card.brand .sub { font-size: 6.8pt; color: rgba(240, 235, 222, .7) !important; margin: -.6mm 0 0; display: flex; align-items: center; gap: 1.2mm; }
  .qr-card.brand .sub .nfc-ico { width: 4mm; height: 4mm; color: #f0ebde !important; }
  .qr-card.brand .code { font-size: 5.8pt; color: rgba(240, 235, 222, .45) !important; margin: 0; }
  .qr-card.brand.f-square .q svg { width: 56mm; height: 56mm; }
  .qr-card.brand.f-square.nfc .q svg { width: 52mm; height: 52mm; }
  .qr-card.brand.f-small { gap: 1mm; }
  .qr-card.brand.f-small img.wm { height: 4.6mm; }
  .qr-card.brand.f-small .q svg { width: 40mm; height: 40mm; }
  .qr-card.brand.f-small .hint { font-size: 5.6pt; letter-spacing: .1em; }
  .qr-card.brand.f-small .sub { font-size: 5pt; }
  .qr-card.brand.f-small .code { display: none; }
  .qr-card.brand.f-large { gap: 4mm; }
  .qr-card.brand.f-large img.wm { height: 11mm; }
  .qr-card.brand.f-large .q svg { width: 72mm; height: 72mm; }
  .qr-card.brand.f-large .hint { font-size: 11pt; }
  .qr-card.brand.f-large .sub { font-size: 8.5pt; }
}
@media print { html, body { background: #fff !important; background-color: #fff !important; color-scheme: light; } html::before, body::before { display: none !important; } }
@media print { :root, html { color-scheme: light only !important; } }

/* =====================================================================
   v2.4 – Zusatzfunktionen
   ===================================================================== */
.occ-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line2); border-radius: 999px; background: var(--card); align-self: flex-start; font-size: calc(14px * var(--fs, 1)); }
.occ-badge .dot, .occ-chip .dot, .occ-pick .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); display: inline-block; flex: none; }
.occ-badge.good .dot, .occ-chip.good .dot, .occ-pick.good .dot { background: var(--gold); }
.occ-badge.full .dot, .occ-chip.full .dot, .occ-pick.full .dot { background: var(--red); box-shadow: 0 0 0 4px rgba(224, 103, 79, .2); }
.occ-chip { display: inline-flex; align-items: center; gap: 6px; }
.occ-pick { justify-content: flex-start; gap: 10px; }
.event-card { display: grid; gap: 8px; }
.event-card.compact { padding: 12px 14px; }
.event-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }
.event-date { display: grid; justify-items: center; min-width: 64px; padding: 6px 8px; border: 1px solid rgba(var(--gold-rgb), .5); border-radius: 10px; color: var(--gold); font-size: calc(12px * var(--fs, 1)); text-align: center; }
.event-date b { font-size: calc(13px * var(--fs, 1)); white-space: nowrap; }
.wait-card { border-style: dashed; }
.wait-row { border-top: 1px solid var(--line); padding-top: 8px; }
.reorder-list { gap: 10px; }
.reorder-card { min-width: 230px; max-width: 260px; display: grid; gap: 6px; align-content: space-between; }
.bday-card .bday-ico { font-size: calc(30px * var(--fs, 1)); }
.voucher-card .voucher-qr { background: #fff; padding: 4px; border-radius: 8px; flex: none; }
.voucher-card .voucher-qr svg { display: block; width: 96px; height: 96px; }
.voucher-row .btn .icon { margin: 0; }
.svc-last { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: none; padding: 6px 8px; border: 1px solid rgba(var(--gold-rgb), .5); border-radius: 10px; background: var(--gold-soft); }
.svc-lastbtn { appearance: none; border: 1px solid var(--line2); background: var(--card); color: var(--text); font: inherit; font-size: calc(12.5px * var(--fs, 1)); padding: 6px 10px; border-radius: 999px; cursor: pointer; text-align: left; }
@media print {
  .qr-card.voucher-print .vp-value { font-size: 20pt; font-weight: 700; color: #EFC21C !important; line-height: 1.1; text-align: center; padding: 0 6mm; }
  .qr-card.voucher-print .q svg { width: 44mm !important; height: 44mm !important; }
}
/* v2.4: Service – Auswahl per Symbol, Gruppierung nach Raum/Bereich */
.svc-tools { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; }
.svc-iconseg { display: inline-flex; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); padding: 3px; gap: 3px; }
.svc-iconseg button { appearance: none; border: 0; background: none; color: var(--muted); width: 46px; height: 40px; display: grid; place-items: center; border-radius: max(0px, calc(var(--r) - 3px)); cursor: pointer; }
.svc-iconseg button .icon { width: 22px; height: 22px; }
.svc-iconseg button.on { background: var(--gold); color: var(--on-gold); box-shadow: 0 2px 0 var(--gold2); }
.svc-picklabel { font-size: calc(12px * var(--fs, 1)); color: var(--muted); font-weight: 600; margin-left: auto; }
.svc-wide .svc-picklabel { display: none; }
/* v2.4: Sprachbedienung */
.voice-btn .icon { width: 20px; height: 20px; }
.voice-input { flex: 1; min-width: 0; font-size: max(16px, calc(16px * var(--fs, 1))); }
.voice-mic { flex: none; }
.voice-mic.on { animation: voice-pulse 1.2s ease-in-out infinite; }
@keyframes voice-pulse { 50% { box-shadow: 0 0 0 8px rgba(var(--gold-rgb), .25); } }
.voice-row { padding: 10px 12px; }
.voice-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + var(--safe-b, 0px)); z-index: 140; display: flex; align-items: center; gap: 12px; max-width: min(560px, 92vw);
  background: var(--card2); border: 1px solid var(--gold); color: var(--text); padding: 10px 12px 10px 16px; border-radius: var(--r); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: calc(14px * var(--fs, 1)); font-weight: 600; }
/* v2.4: PIN-Eingabe an der Kasse – skaliert mit dem Bildschirm (iPad deutlich größer) */
.pin-box { display: grid; justify-items: center; }
.pin-dots { display: flex; gap: 14px; justify-content: center; margin: 8px 0 16px; }
.pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--gold); background: transparent; transition: background .1s, transform .1s; }
.pin-dot.on { background: var(--gold); transform: scale(1.08); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; justify-content: center; }
.pin-key { height: 64px; font-size: calc(22px * var(--fs, 1)); font-weight: 600; padding: 0; }
.modal:has(.pin-pad) { width: min(100%, 420px); }
@media (min-width: 700px) and (min-height: 600px) {
  .modal:has(.pin-pad) { width: min(94vw, 560px); padding: 26px 30px 30px; }
  .modal:has(.pin-pad) .modal-head h2 { font-size: calc(24px * var(--fs, 1)); }
  .pin-dots { gap: 20px; margin: 14px 0 22px; }
  .pin-dot { width: 22px; height: 22px; border-width: 2.5px; }
  .pin-pad { grid-template-columns: repeat(3, clamp(96px, 12vw, 132px)); gap: clamp(12px, 1.6vw, 18px); }
  .pin-key { height: clamp(78px, 11vh, 104px); font-size: clamp(28px, 3.4vh, 38px); }
}

@media print { :root, html { --fs: 1 !important; } }
/* v2.4.1: Kachelgröße in der Aufnahme-Ansicht */
.svc-viewsw { flex-wrap: nowrap; align-items: center; }
.svc-sep { width: 1px; height: 26px; background: var(--line2); margin: 0 2px; flex: none; }
.svc-viewsw button.svc-sz { width: 34px; height: 34px; }
.svc-viewsw button.svc-sz .icon { width: 16px; height: 16px; }
.svc-tilesall.sz-s .svc-tiles { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 7px; }
.svc-tilesall.sz-s .svc-tile { min-height: 58px; padding: 7px; }
.svc-tilesall.sz-s .svc-tile b { font-size: calc(11.5px * var(--fs, 1)); }
.svc-tilesall.sz-s .svc-tile em { font-size: calc(11px * var(--fs, 1)); }
.svc-tilesall.sz-l .svc-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.svc-tilesall.sz-l .svc-tile { min-height: 104px; padding: 12px 12px 10px; }
.svc-tilesall.sz-l .svc-tile b { font-size: calc(16px * var(--fs, 1)); }
.svc-tilesall.sz-l .svc-tile em { font-size: calc(14px * var(--fs, 1)); }
.svc-wide .svc-tilesall.sz-s .svc-tiles { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.svc-wide .svc-tilesall.sz-l .svc-tiles { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
@media (max-width: 420px) { .svc-orderhead { gap: 6px; } .svc-viewsw button { width: 36px; height: 36px; } .svc-viewsw button.svc-sz { width: 30px; height: 30px; } }
.font-seg button { line-height: 1.1; }
.font-choose .font-a { min-width: 44px; font-weight: 700; }
/* v2.4.1: Statuszeile mit Anzahl in Listen */
.count-bar { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 12px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); }
.count-bar b { color: var(--text); }
.count-bar .sep { color: var(--dim); }
.count-bar.top { position: static; margin: 0 0 8px; padding: 4px 2px; background: none; border: 0; }

/* v2.4.2: Service – Räume als Reiter, große Tische, Zuletzt, Details, Rückgängig */
.svc-recent { display: flex; align-items: center; gap: 6px; flex: none; overflow-x: auto; scrollbar-width: none; }
.svc-recent::-webkit-scrollbar { display: none; }
.svc-recent .lbl { font-size: calc(10.5px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; flex: none; }
.svc-rchip { appearance: none; flex: none; display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--text); font: inherit; font-weight: 700; font-size: calc(15px * var(--fs, 1)); cursor: pointer; }
.svc-rchip i { font-style: normal; font-size: calc(11px * var(--fs, 1)); color: var(--gold); }
.svc-rchip.hl { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.svc-rooms { display: flex; gap: 6px; flex: none; overflow-x: auto; scrollbar-width: none; }
.svc-rooms::-webkit-scrollbar { display: none; }
.svc-rooms button { flex: 1 0 auto; min-width: 96px; appearance: none; font: inherit; text-align: center; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--line2); background: none; color: var(--muted); font-size: calc(13px * var(--fs, 1)); font-weight: 700; cursor: pointer; line-height: 1.25; }
.svc-rooms button small { display: block; font-size: calc(10.5px * var(--fs, 1)); font-weight: 600; opacity: .8; }
.svc-rooms button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.svc-planbox { flex: 1; min-height: 180px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); display: flex; overflow: hidden; touch-action: pan-y; }
.svc-roomsvg { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.svc-roomsvg .wall { stroke: rgba(var(--text-rgb), .38); stroke-width: .25; stroke-linecap: round; }
.svc-roomsvg .bar { fill: #5a4320; stroke: #c99a0e; stroke-width: .08; }
.svc-roomsvg .barlbl { font-size: .85px; font-weight: 700; fill: #EFC21C; text-anchor: middle; font-family: var(--font); }
.svc-roomsvg .t { cursor: pointer; outline: none; }
.svc-roomsvg .t .shape { fill: var(--card2); stroke: rgba(var(--text-rgb), .35); stroke-width: .08; transition: transform .08s; }
.svc-roomsvg .t.out .shape { stroke-dasharray: .3 .2; }
.svc-roomsvg .t .lbl { font-size: 1.35px; font-weight: 700; fill: var(--text); text-anchor: middle; font-family: var(--font); pointer-events: none; }
.svc-roomsvg .t.busy .shape { fill: rgba(var(--gold-rgb), .16); stroke: var(--gold); stroke-width: .14; }
.svc-roomsvg .t.pick .shape { fill: var(--gold); stroke: var(--gold2); }
.svc-roomsvg .t.pick .lbl { fill: var(--on-gold); }
.svc-roomsvg .t.press .shape, .svc-roomsvg .t:focus-visible .shape { stroke: var(--gold); stroke-width: .22; }
.svc-roomsvg .badge { fill: var(--gold); }
.svc-roomsvg .badgetxt { font-size: .62px; font-weight: 700; fill: var(--on-gold); text-anchor: middle; font-family: var(--font); pointer-events: none; }
.svc-roomsvg .call { fill: var(--red); stroke: var(--bg); stroke-width: .12; }
.svc-dots { display: flex; gap: 6px; justify-content: center; flex: none; }
.svc-dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--line2); }
.svc-dots i.on { background: var(--gold); width: 18px; }
.svc-legend i.c { background: var(--red); border-radius: 50%; }
.svc-details .svc-dline { display: flex; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: calc(14px * var(--fs, 1)); }
.svc-details .svc-dline b { color: var(--gold); width: 28px; }
.svc-details .svc-dline small { color: var(--gold); }
.svc-callrow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(224, 103, 79, .5); border-radius: var(--r); background: rgba(224, 103, 79, .08); }
.svc-undo { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + var(--safe-b, 0px)); z-index: 140; display: flex; align-items: center; gap: 10px; width: min(92vw, 480px);
  background: var(--card2); border: 1px solid var(--gold); border-radius: var(--r); padding: 10px 12px; font-weight: 600; font-size: calc(14px * var(--fs, 1)); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); animation: sheet-in .2s ease-out; }
.svc-undo .icon { color: var(--green); flex: none; }
/* v2.4.2: Aufnahme-Ansicht nie breiter als der Bildschirm (Reiter/Chips scrollen innen) */
html[data-app="team"] .team-view:has(> .svc) { min-width: 0; width: 100%; max-width: 100vw; box-sizing: border-box; }
.svc, .svc > *, .svc-order, .svc-order > *, .svc-pick, .svc-pick > *, .svc-pickbody > * { min-width: 0; max-width: 100%; }
.svc-cats, .svc-rooms, .svc-recent { max-width: 100%; }
.svc-items > div { min-width: 0; }
.svc-planbox.pan { overflow: auto; touch-action: pan-x pan-y; display: block; -webkit-overflow-scrolling: touch; }
.svc-planbox.pan .svc-roomsvg { margin: auto; max-width: none !important; max-height: none !important; }
/* v2.4.2: Impressum/Datenschutz auf Altersabfrage und Anmeldeseiten */
.legal-links { display: flex; justify-content: center; gap: 2px; margin-top: 18px; font-size: calc(12.5px * var(--fs, 1)); color: var(--dim); }
.legal-links a { color: var(--muted); }
/* v2.4.2: Team-Reiter – auch bei 5–6 Reitern passt „Aufnehmen“ am iPhone */
@media (max-width: 430px) { html[data-app="team"] .team-tabs a .tl { letter-spacing: -.045em; } html[data-app="team"] .team-tabs { padding-left: 2px; padding-right: 2px; } }

/* v2.4.2: Kasse auf schmalen Bildschirmen (iPhone, iPad im Split View)
   Zeile 1: Logo · Benutzer · Sperren   Zeile 2: Werkzeuge (wischbar)   Zeile 3: nur die Ansichten (volle Breite) */
@media (max-width: 899.98px) {
  html[data-app="kasse"] .s-top { flex-wrap: wrap; row-gap: 8px; column-gap: 8px; align-items: center; }
  html[data-app="kasse"] .s-top > .wm { order: 0; }
  html[data-app="kasse"] .s-top > .s-foot.foot-inline { order: 1; flex: 1 1 auto; min-width: 0; max-width: none; margin-left: auto; text-align: right; }
  html[data-app="kasse"] .s-top > .s-foot.foot-inline > span { white-space: nowrap; }
  html[data-app="kasse"] .s-top > button { order: 2; flex: none; }
  html[data-app="kasse"] .s-top > #top-extra { order: 3; flex: 1 0 100%; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; padding-bottom: 2px; }
  html[data-app="kasse"] .s-top > #top-extra::-webkit-scrollbar { display: none; }
  html[data-app="kasse"] .s-top > #top-extra > * { flex: none; }
  html[data-app="kasse"] .s-top > .s-tabs, html[data-app="kasse"] .s-top:has(> .foot-inline) > .s-tabs { order: 4; flex: 1 0 100%; max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  html[data-app="kasse"] .s-top > .s-tabs::-webkit-scrollbar { display: none; }
}
@media (max-width: 899.98px) {
  html[data-app="kasse"] .s-top > #top-extra, html[data-app="kasse"] .s-top > .s-tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 24px; }
}
/* v2.4.2: „klein“ = 4 Kacheln pro Reihe auch am iPhone */
.svc-tilesall.sz-s .svc-tiles { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
/* v2.5: Kassen-Anmeldung */
.kdev { gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.kdev.this { background: var(--gold-soft); border-radius: var(--r); padding: 8px; }
.lock-tile { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.lock-tile .lock-hint { font-size: calc(10.5px * var(--fs, 1)); color: var(--muted); font-weight: 500; max-width: 160px; white-space: normal; }
.voice-pick { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

/* v2.5: Statuszeile mit Anzahl – am Handy fest direkt über der unteren Leiste, Liste reicht bis knapp darüber */
@media (max-width: 1023.98px) {
  html[data-app="admin"] .s-app--nav .s-main { padding-bottom: 0; }
  html[data-app="admin"] .s-app--nav .s-main > .scroll.fill { padding-bottom: 8px; }
  html[data-app="admin"] .s-app--nav .s-main > .scroll.fill:has(.count-bar:not(.top)) { padding-bottom: 56px; }
  html[data-app="admin"] .s-app--nav .count-bar:not(.top) { position: fixed; left: 12px; right: 12px; margin: 0; z-index: 25;
    bottom: calc(59px + env(safe-area-inset-bottom, 0px) + var(--safe-b, 0px) + 6px); box-shadow: 0 -6px 18px rgba(0, 0, 0, .35); }
  html[data-app="admin"] .s-app--nav .modal-bg ~ * .count-bar { z-index: 1; }
}
@media (max-width: 1023.98px) {
  html[data-app="admin"] .s-app--nav .s-main .scroll:has(.count-bar:not(.top)) { padding-bottom: 84px; }
}
/* v2.5.1: Impressum */
.imprint { display: grid; gap: 0; }
.imprint .imp-sub { font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); margin: -4px 0 12px; }
.imprint .imp-sec { padding: 12px 0; border-top: 1px solid var(--line); }
.imprint .imp-sec:first-of-type { border-top: 0; padding-top: 4px; }
.imprint .imp-h { font-size: calc(11px * var(--fs, 1)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.imprint .imp-l { font-weight: 600; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.imprint a { color: var(--gold); }
.imp-preview { border: 1px dashed var(--line2); border-radius: var(--r); padding: 14px 16px; background: var(--bg); }
.imp-more summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.imprint .imp-t { line-height: 1.5; color: var(--text); font-weight: 400; }

/* v2.6: App-Firewall, Protokoll, Warte-Bildschirm */
.fw-dev { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.fw-dev.wait { border-color: var(--red); background: rgba(224, 103, 79, .06); }
.fw-dev.blocked { opacity: .7; }
.fw-dev.this { border-color: rgba(var(--gold-rgb), .6); }
.fw-acts { gap: 6px; margin-top: 6px; }
.fw-acts .input { max-width: 220px; min-height: 38px; }
.audit-filters { gap: 8px; margin-bottom: 10px; }
.audit-filters .input { width: auto; min-width: 140px; flex: 1 1 140px; max-width: 260px; }
.audit-tbl .audit-det { min-width: 220px; }
.dev-pending { text-align: left; }
.dev-pending .dev-ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold); }
.dev-pending .dev-ico .icon { width: 28px; height: 28px; }
.dev-self summary { cursor: pointer; font-size: calc(13px * var(--fs, 1)); color: var(--muted); font-weight: 600; }
/* v2.6: Fußzeile unten links in der Seitenleiste – zwei saubere Zeilen statt Umbruch-Salat */
#side > .s-foot { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 6px; row-gap: 2px;
  margin-top: auto; padding: 10px 12px 6px; border-top: 1px solid var(--line); background: none; position: static; width: auto; font-size: calc(11px * var(--fs, 1)); color: var(--dim); line-height: 1.35; }
#side > .s-foot > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
#side > .s-foot > .version { grid-column: 1 / -1; }
#side > .s-foot > .grow { display: none; }
#side > .s-foot > .live-stamp { color: var(--muted); }
#side > .s-foot > span:last-child::before { content: "· "; }
/* v2.6.1: Karte steckt im zuklappbaren Abschnitt – eigene Überschrift ausblenden (steht schon im Abschnittskopf) */
.sec-body > .sec-card { display: grid; gap: 12px; }
.sec-body > .sec-card > h2.title-m:first-child, .sec-body > .sec-card > .row:first-child > h2.title-m { display: none; }

/* v2.6.3: Auswertung scrollt als Ganzes; Diagramme fester Höhe statt gestaucht */
.an-body { padding-bottom: 8px; }
.an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.an-card { display: flex; flex-direction: column; }
.an-chart { overflow-x: auto; overflow-y: hidden; }
@media (max-width: 1100px) { .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .an-grid { grid-template-columns: 1fr; } }

/* v2.7 – Aufnehmen: Optionen-Knöpfe (Shisha genau eine, Softdrinks an/aus), Kommentarfeld oben; WLAN-Hinweis Team-App */
.svc-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 104px), 1fr)); gap: 8px; }
.svc-opts .chip { min-height: 46px; padding: 8px 10px; font-size: calc(14px * var(--fs, 1)); white-space: normal; text-align: center; line-height: 1.15; }
.svc-opts .chip.on { background: var(--gold); border-color: var(--gold); color: var(--on-gold, #111); }
.svc-edit .svc-notefield .input { font-size: max(16px, calc(16px * var(--fs, 1))); }
.svc-edit .svc-qtyrow .q { font-size: calc(44px * var(--fs, 1)); }
@media (max-width: 699px) {
  .svc-edit { gap: 10px; }
  .svc-edit .svc-qtyrow .btn { width: 54px; height: 54px; }
  .svc-edit .svc-keys.sm { gap: 8px; }
  .svc-edit .svc-keys.sm button { min-height: 44px; font-size: calc(20px * var(--fs, 1)); }
}
@media (max-width: 699px) {
  .svc-opts.one { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .svc-opts.one .chip { padding: 6px 4px; font-size: calc(12.5px * var(--fs, 1)); min-height: 48px; }
  .svc-edit .svc-keys.sm button { height: 48px; min-height: 0; padding: 0; }
  .svc-edit > .row .btn { padding-inline: 14px; }
  .svc-edit > .row .btn.xl { font-size: calc(17px * var(--fs, 1)); }
}
@media (max-width: 699px) and (max-height: 760px) {
  .svc-edit { gap: 8px; }
  .svc-edit .svc-keys.sm { gap: 6px; }
  .svc-edit .svc-keys.sm button { height: 40px; font-size: calc(19px * var(--fs, 1)); }
  .svc-edit .svc-qtyrow .btn { width: 46px; height: 46px; }
  .svc-edit .svc-qtyrow .q { font-size: calc(34px * var(--fs, 1)); min-width: 70px; }
}
.team-wlan { min-height: 100%; display: flex; align-items: center; padding: calc(var(--safe-t, 0px) + 16px) 16px calc(var(--safe-b, 0px) + 16px); }
.team-wlan .card { width: 100%; }
.fw-wlan { padding-bottom: 4px; }
/* v2.7: Knopfleiste im Bearbeiten-Fenster – „Übernehmen“ nie abgeschnitten */
.svc-edit > .row { gap: 10px; flex-wrap: nowrap; }
.svc-edit > .row > .grow { display: none; }
.svc-edit > .row > .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; justify-content: center; }
.svc-edit > .row > .btn.xl { flex-grow: 1.6; }
/* v2.7: kleine iPhones (SE, mini) – Reiter und Schicht-Anzeige in einer Zeile */
.team-top .shift .small { white-space: nowrap; }
@media (max-width: 380px) {
  html[data-app="team"] .team-tabs a { font-size: calc(11px * var(--fs, 1)); letter-spacing: -.01em; }
  .team-top .shift { gap: 8px; }
  .team-top .shift .small { font-size: calc(11.5px * var(--fs, 1)); }
}
/* v2.7: Admin-Übersicht am iPhone – Schnellzugriffe umbrechen statt nach rechts hinauszulaufen */
html[data-app] .quick { grid-auto-flow: row; grid-auto-columns: auto; }
.quick-btn { min-width: 0; }
.quick-btn span { overflow: hidden; text-overflow: ellipsis; }
/* v2.7: Seiten-Vorschau bei sehr schmalen Displays (320 px) */
.pv-wrap { min-width: 0; max-width: 100%; }
.pv-row { max-width: 100%; min-width: 0; }
.pv-row .skin-preview { min-width: 0; flex: 0 1 auto; }
.pv-wrap > .tiny { text-align: center; max-width: 100%; }
@media (max-width: 340px) { .pv-row .icon-btn { width: 32px; min-width: 32px; padding: 0; } }