/* ===================================================================
   HOA GARDEN — base.css
   Struktur & Komponenten. Farben/Formen kommen aus themes.css (CSS-Variablen).
=================================================================== */
:root{
  --bg:#f7f5ef; --bg2:#eef1e8; --surface:#ffffff; --surface-2:#f4f2ea;
  --text:#20301f; --text-soft:#5b6b57; --accent:#1f6d43; --accent-2:#c9a45c;
  --border:#dfe3d5; --radius:18px; --radius-sm:10px; --shadow:0 10px 30px rgba(20,40,20,.10);
  --font-head:"Playfair Display", Georgia, serif; --font-body:"Inter","Segoe UI",sans-serif;
  --card-bg:var(--surface); --header-bg:rgba(247,245,239,.88);
  --pattern-opacity:.05; --safe-b: env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .6s ease,color .6s ease;
  /* Platz für die fest am unteren Bildschirmrand schwebende Fußleiste, damit sie nichts verdeckt */
  padding-bottom:calc(58px + env(safe-area-inset-bottom));
}
h1,h2,h3,h4{font-family:var(--font-head); color:var(--text); margin:0 0 .3em; font-weight:600;}
a{color:inherit;}
button{font-family:inherit;}
img{max-width:100%; display:block;}
.container{max-width:1180px; margin:0 auto; padding:0 20px;}
.hidden{display:none !important;}
.sr-only{position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* ---------- Intro / Lotus ---------- */
#lotus-intro{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  flex-direction:column; background:radial-gradient(ellipse at center, var(--bg2), var(--bg) 70%);
  transition:opacity 1.1s ease, visibility 1.1s ease;
}
#lotus-intro.fade-out{opacity:0; visibility:hidden; pointer-events:none;}
.lotus-logo{
  width:min(58vw,260px); margin:0 auto; display:block;
  animation:introLogoGrow 1.8s cubic-bezier(.16,.9,.28,1) both;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.18));
}
@keyframes introLogoGrow{
  0%{transform:scale(.22); opacity:0;}
  55%{opacity:1;}
  100%{transform:scale(1); opacity:1;}
}
.lotus-skip{margin-top:28px; opacity:0; animation:fadeUp 1s ease 1.2s forwards; background:none;border:1px solid var(--border);color:var(--text-soft);padding:10px 22px;border-radius:30px;cursor:pointer;font-size:.85rem;}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

/* ---------- Header ---------- */
header.site-header{
  position:sticky; top:0; z-index:500; backdrop-filter:blur(10px);
  background:var(--header-bg); border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:10px 20px; gap:14px;}
.brand{display:flex; align-items:center; gap:10px; cursor:pointer;}
.brand img{height:42px; width:42px; object-fit:contain;}
.brand-name{font-family:var(--font-head); font-size:1.15rem; line-height:1; color:var(--text);}
.brand-tag{font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2);}
nav.main-nav{display:flex; gap:4px; align-items:center; flex-wrap:wrap; justify-content:center; min-width:0;}
nav.main-nav button{
  background:none;border:none;color:var(--text-soft);font-size:.86rem;padding:9px 12px;
  border-radius:30px;cursor:pointer;transition:.25s;
}
nav.main-nav button.active,nav.main-nav button:hover{background:var(--surface-2); color:var(--accent);}
.header-actions{display:flex;align-items:center;gap:8px;}
.icon-btn{
  position:relative; width:40px;height:40px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface); display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:1.05rem; color:var(--text);
}
.icon-btn:hover{background:var(--surface-2);}
.badge{
  position:absolute; top:-5px; right:-5px; background:var(--accent); color:#fff; font-size:.68rem;
  min-width:18px; height:18px; border-radius:10px; display:flex;align-items:center;justify-content:center;
  padding:0 4px; font-weight:700;
}
.badge.blink{animation:blinkBadge 1s ease-in-out 3;}
@keyframes blinkBadge{0%,100%{transform:scale(1);}50%{transform:scale(1.35); box-shadow:0 0 0 6px rgba(31,109,67,.25);}}
/* Zähler-Badge im "📦 Bestellungen"-Nav-Button: steht mit im Textfluss
   (nicht wie die runden Icon-Badges oben absolut positioniert), da der
   Button hier Text+Icon statt nur ein Icon ist. */
nav.main-nav button .badge{position:static; margin-left:5px; vertical-align:middle;}
/* Zähler neben einem Tab-Namen (z.B. Admin "📦 Bestellungen") -- wie
   .badge oben, aber inline statt absolut positioniert, da hier kein reines
   Icon, sondern Text+Zähler in einem Button steht. */
.tab-count-badge{
  display:inline-flex; align-items:center; justify-content:center; margin-left:5px;
  background:var(--accent); color:#fff; font-size:.68rem; min-width:18px; height:18px;
  border-radius:10px; padding:0 4px; font-weight:700;
}
.tab-count-badge.hidden{display:none;}

/* ---------- Kellner: offene Abholung/Lieferung ("📦 Bestellungen") ---------- */
.pickup-order-row{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm,10px);
  padding:12px 14px; margin-bottom:10px;
}
.pickup-order-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.pickup-order-head b{font-size:.92rem;}
.pickup-order-amt{font-weight:700; color:var(--accent); white-space:nowrap;}
.pickup-order-meta{font-size:.78rem; color:var(--text-soft); margin-top:2px;}
.pickup-order-items{font-size:.85rem; margin-top:6px; color:var(--text);}

/* ---------- Rabatt: Summe vor Rabatt durchgestrichen ÜBER dem Endbetrag
   (nicht daneben -- auf schmalen Handys quetscht sich das sonst in eine
   Zeile und wirkt durcheinander), plus eine klar UNTEREINANDER stehende
   Aufschlüsselung (je eine eigene Zeile für Zwischensumme/Rabatt/Gesamt) --
   überall wiederverwendet, wo ein Betrag mit Rabatt gezeigt wird (Statistik,
   Bestellungen, Kassieren), damit für die Buchhaltung am Tagesende immer
   sowohl der volle Betrag vor Rabatt als auch der Rabatt selbst gut lesbar
   sind, nicht nur der reduzierte Endbetrag. */
.amount-stack{display:flex; flex-direction:column; align-items:flex-end; gap:1px; white-space:nowrap;}
.amount-strike{text-decoration:line-through; color:var(--text-soft); font-weight:400; font-size:.8em; white-space:nowrap;}
.discount-breakdown-line{font-size:.76rem; color:var(--text-soft); margin-top:5px; display:flex; flex-direction:column; gap:3px;}
.discount-breakdown-line b{color:var(--text); font-weight:600;}
.lang-select{border:1px solid var(--border); background:var(--surface); border-radius:20px; padding:7px 10px; font-size:.85rem; cursor:pointer;}

/* ---------- Sections / Hero ---------- */
main{min-height:60vh;}
.view{padding:38px 0 90px;}
.hero{
  position:relative; text-align:center; padding:70px 20px 50px; overflow:hidden; border-radius:0 0 40px 40px;
  background:linear-gradient(180deg, var(--surface-2), var(--bg));
}
.hero-emblem{width:120px;margin:0 auto 18px; animation:logoFloat 6s ease-in-out infinite;}
@keyframes logoFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);}
.hero p{color:var(--text-soft); max-width:560px; margin:14px auto 26px; font-size:1.02rem;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:30px; border:none;
  background:var(--accent); color:#fff; font-weight:600; cursor:pointer; font-size:.92rem;
  box-shadow:var(--shadow); transition:transform .2s ease, opacity .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn.outline{background:transparent; color:var(--accent); border:1.5px solid var(--accent); box-shadow:none;}
.btn.small{padding:8px 16px; font-size:.8rem;}
.btn.ghost{background:var(--surface); color:var(--text); border:1px solid var(--border); box-shadow:none;}
.hero-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px;}

.section-title{text-align:center; margin-bottom:8px;}
.section-sub{text-align:center; color:var(--text-soft); max-width:600px; margin:0 auto 30px; font-size:.94rem;}

/* ---------- Menu ---------- */
/* Suche + Filter schweben fest unter dem Header, damit man beim Scrollen
   durch die Speisekarte jederzeit suchen/wechseln kann, ohne hochzuscrollen. */
/* #view-menu bekommt weniger Abstand oben als die anderen Ansichten — die
   schwebenden Filter direkt unter dem Header sind hier der visuelle Anker,
   nicht eine große Überschrift, daher würde der übliche Abstand nur
   ungenutzten Platz verschenken (weniger Speisekarte sichtbar). */
#view-menu.view{padding-top:14px;}
.menu-filters-sticky{
  position:sticky; top:var(--header-h,64px); z-index:60;
  background:var(--bg); padding-top:8px; margin:0 -20px; padding-left:20px; padding-right:20px;
}
.search-box{
  display:flex; align-items:center; margin-bottom:8px;
  border:1px solid var(--border); border-radius:30px; background:var(--surface); padding:3px 5px 3px 0;
  position:relative;
}
.search-box input{
  flex:1; min-width:0; padding:7px 14px 7px 36px; border-radius:30px; border:none;
  background:none; color:var(--text); font-size:.88rem; outline:none;
}
.search-box svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); opacity:.5; width:15px; pointer-events:none;}
/* Checkbox neben der Suche: schaltet die Artikelnummer-Suche von "enthält"
   auf "genau diese Nummer" um (z.B. "1" findet dann nicht mehr "10"/"101"/
   "M1" mit). Reines Icon (kein Text/Label), damit auf schmalen Handys neben
   dem Eingabefeld nicht viel Platz verloren geht. */
.search-exact-toggle{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin-right:6px;
  border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--text-soft); font-size:.9rem;
  cursor:pointer; user-select:none;
}
.search-exact-toggle input{display:none;}
.search-exact-toggle:has(input:checked){border-color:var(--accent); background:var(--surface-2); color:var(--accent);}
/* Listen-/Kachelansicht + Kategorien in einer Zeile: der Umschalter ist nur
   noch ein Icon-Paar, fest am linken Rand (flex-shrink:0), während die
   Kategorien-Pills rechts davon unabhängig seitlich scrollen — der
   Umschalter bleibt dabei immer an derselben Stelle sichtbar. Spart eine
   ganze Zeile gegenüber vorher (Label-Umschalter auf eigener Zeile). */
.filter-row{display:flex; align-items:center; gap:8px; padding-bottom:8px;}
.view-toggle-inline{
  display:flex; flex-shrink:0; border:1px solid var(--border); border-radius:30px;
  background:var(--surface); padding:2px; gap:2px;
}
.view-toggle-inline button{
  border:none; background:none; cursor:pointer; color:var(--text-soft);
  display:flex; align-items:center; justify-content:center; padding:7px; border-radius:24px;
  width:30px; height:30px;
}
.view-toggle-inline button svg{width:15px; height:15px; flex-shrink:0;}
.view-toggle-inline button.active{background:var(--accent); color:#fff;}
.cat-tabs{display:flex; flex:1; min-width:0; gap:6px; overflow-x:auto; padding:2px 2px 2px; scrollbar-width:none;}
.cat-tabs::-webkit-scrollbar{display:none;}
.cat-tabs button{
  white-space:nowrap; border:1px solid var(--border); background:var(--surface); color:var(--text-soft);
  padding:6px 14px; border-radius:30px; cursor:pointer; font-size:.8rem;
}
.cat-tabs button.active{background:var(--accent); color:#fff; border-color:var(--accent);}
.subcat-title{margin:14px 0 8px; font-size:1.08rem; color:var(--accent); border-bottom:1px dashed var(--border); padding-bottom:5px;}

.menu-list .item-row{
  display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--border);
}
.menu-list .item-row img{width:54px;height:54px;border-radius:12px;object-fit:cover; flex-shrink:0;}
.item-thumb-empty{width:54px;height:54px;border-radius:12px;background:var(--surface-2); flex-shrink:0;}
.item-main{flex:1; min-width:0;}
.item-head{display:flex; justify-content:space-between; gap:10px; align-items:baseline;}
.item-name{font-weight:600; font-size:.98rem;}
.item-num{color:var(--accent-2); font-weight:700; margin-right:6px; font-size:.86rem;}
.item-allerg{font-size:.62rem; vertical-align:super; color:var(--accent-2); cursor:pointer;}
.item-price{font-weight:700; color:var(--accent); white-space:nowrap; font-size:.94rem;}
.item-desc{color:var(--text-soft); font-size:.83rem; margin-top:3px; line-height:1.4;}
.item-foot{display:flex; justify-content:space-between; align-items:center; margin-top:6px;}
.item-add{
  border:none; background:var(--accent); color:#fff; width:32px;height:32px;border-radius:50%;
  font-size:1.1rem; cursor:pointer; display:flex;align-items:center;justify-content:center; flex-shrink:0;
}
.item-tags{font-size:.7rem; color:#b0693f;}
.item-soldout{font-size:.72rem; color:#b23; font-weight:600;}
/* Hinweis-Badges, wenn ein Gericht laut Admin nicht für alle Bestellarten
   verfügbar ist (z.B. nur vor Ort, nicht zur Abholung) — rein informativ. */
.item-avail-badges{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px;}
.avail-badge-off{font-size:.66rem; font-weight:600; color:#b23; background:rgba(178,34,34,.08); border-radius:20px; padding:1px 7px; white-space:nowrap;}

.menu-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:10px;}
.tile{
  background:var(--card-bg); border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--border); display:flex; flex-direction:column; transition:transform .25s ease;
}
.tile:hover{transform:translateY(-4px);}
.tile img{width:100%; aspect-ratio:1/1; object-fit:cover;}
.tile .tile-noimg{width:100%; aspect-ratio:1/1; background:linear-gradient(135deg,var(--surface-2),var(--bg2)); display:flex;align-items:center;justify-content:center; font-size:1.5rem; color:var(--accent-2);}
.tile-body{padding:8px 9px 9px; display:flex; flex-direction:column; gap:4px; flex:1;}
.tile-body .item-head{align-items:flex-start;}
.tile-body .item-desc{flex:1; font-size:.72rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.tile .item-name{font-size:.82rem; line-height:1.25;}
.tile .item-price{font-size:.8rem;}
.tile .item-add{width:26px; height:26px; font-size:.95rem;}
/* Kachel ohne Foto: Artikelname mittig & gross, damit er gut lesbar bleibt */
.tile.no-photo .tile-body{align-items:center; text-align:center; justify-content:center; min-height:120px;}
.tile.no-photo .item-head{width:100%; justify-content:center;}
.tile.no-photo .item-name{font-size:1.05rem; font-weight:700; line-height:1.3;}

/* Admin-Schalter "Fotos in der Kachelansicht" aus: jede Kachel wird ein
   kompakter, quadratischer Button (kein Bild, keine Beschreibung) -> deutlich
   mehr Gerichte passen auf den Bildschirm. */
.tile.tile-square{aspect-ratio:1/1;}
.tile.tile-square .tile-body{
  padding:10px; align-items:center; justify-content:center; text-align:center; gap:3px; position:relative;
}
.tile.tile-square .item-num{font-size:.68rem; color:var(--text-soft);}
.tile.tile-square .item-name{font-size:.82rem; font-weight:700; line-height:1.2; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.tile.tile-square .item-price{font-size:.76rem; color:var(--accent-2); margin-top:2px;}
.tile.tile-square .item-add{position:absolute; bottom:6px; right:6px; width:24px; height:24px; font-size:.9rem;}

/* Allergene & Zusatzstoffe stehen jetzt als eigenes Modal (Icon unten neben
   dem Hinweis-Icon), statt als ausklappbare Fläche unter der Speisekarte. */
#allergen-modal .allergen-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px 14px; font-size:.82rem; color:var(--text-soft); margin-top:4px;}
#allergen-modal .allergen-grid b{color:var(--accent);}
#allergen-modal .allergen-legal{margin-top:16px; font-size:.76rem; color:var(--text-soft); font-style:italic; line-height:1.5;}

/* ---------- Floating buttons ---------- */
.fab-stack{position:fixed; right:18px; bottom:calc(18px + var(--safe-b)); display:flex; flex-direction:column; gap:12px; z-index:600;}
.fab{
  width:58px;height:58px;border-radius:50%; background:var(--accent); color:#fff; border:none; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.25); font-size:1.4rem; display:flex;align-items:center;justify-content:center;
  position:relative;
}
.fab.secondary{background:var(--surface); color:var(--accent); border:1.5px solid var(--accent); width:50px;height:50px; font-size:1.2rem;}
.fab .badge{top:-4px; right:-4px;}

/* ---------- Drawer / Modal ---------- */
.overlay{position:fixed; inset:0; background:rgba(10,20,10,.45); z-index:800; opacity:0; pointer-events:none; transition:opacity .3s;}
.overlay.open{opacity:1; pointer-events:auto;}
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--surface); z-index:900;
  box-shadow:-14px 0 40px rgba(0,0,0,.2); transform:translateX(100%); transition:transform .35s ease;
  display:flex; flex-direction:column;
}
.drawer.open{transform:translateX(0);}
.drawer-head{padding:18px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;}
.drawer-body{flex:1; overflow-y:auto; padding:16px 20px;}
.drawer-foot{padding:16px 20px; border-top:1px solid var(--border);}
.close-x{background:none;border:none;font-size:1.3rem;cursor:pointer; color:var(--text-soft);}

.modal{
  position:fixed; inset:0; z-index:950; display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.modal.open{opacity:1; pointer-events:auto;}
.modal-card{
  background:var(--surface); border-radius:var(--radius); max-width:480px; width:100%; max-height:88vh; overflow-y:auto;
  padding:24px; box-shadow:0 30px 60px rgba(0,0,0,.3); position:relative;
}
.modal-card h3{margin-bottom:14px;}
.modal-close{position:absolute; top:14px; right:14px; background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--text-soft);}

.field{margin-bottom:14px;}
.field label{display:block; font-size:.82rem; color:var(--text-soft); margin-bottom:5px;}
.field label .req{color:#c0392b;}
.field input[type=text],.field input[type=email],.field input[type=url],.field input[type=tel],.field input[type=date],.field input[type=time],.field input[type=number],.field input[type=password],.field textarea,.field select{
  width:100%; padding:11px 13px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:.92rem;
}
.field textarea{resize:vertical; min-height:70px;}
.pw-wrap{position:relative;}
.pw-wrap button{position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none;border:none;cursor:pointer;font-size:1rem;}
/* Kellner-Biometrie: pro Gerät hinterlegte Kellner als Chips zum schnellen,
   passwortlosen Anmelden (Face ID / Fingerabdruck) — vor allem bei einem
   gemeinsam genutzten Tablet können mehrere Kellner hier stehen. */
.staff-bio-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.staff-bio-chip{
  border:1.5px solid var(--accent); background:var(--surface-2); color:var(--accent);
  padding:9px 16px; border-radius:30px; font-size:.85rem; font-weight:600; cursor:pointer;
}
.option-row{display:flex; gap:10px; flex-wrap:wrap;}
.option-row label{
  flex:1; min-width:110px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px; text-align:center;
  cursor:pointer; font-size:.85rem; color:var(--text-soft);
}
.option-row input{display:none;}
.option-row input:checked + span{color:var(--accent); font-weight:700;}
.option-row label:has(input:checked){border-color:var(--accent); background:var(--surface-2);}

/* ---------- Varianten-Auswahl (Dropdown / Icon-Popup) ---------- */
.variant-select{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:.95rem; margin-bottom:12px;
}
.variant-price-live{text-align:center; font-size:1.3rem; font-weight:700; color:var(--accent);}
.variant-icon-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:10px;}
.variant-icon-card{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 8px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); background:var(--surface); cursor:pointer; color:var(--text);
}
.variant-icon-card .variant-icon{font-size:1.8rem;}
.variant-icon-card .variant-icon-name{font-size:.78rem; text-align:center; line-height:1.25;}
.variant-icon-card .variant-icon-price{font-size:.82rem; font-weight:700; color:var(--accent);}
.variant-icon-card.active{border-color:var(--accent); background:var(--surface-2); box-shadow:0 0 0 2px var(--accent) inset;}

/* ---------- Lightbox (Vollbild-Galerie) ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.92); display:none;
  align-items:center; justify-content:center; flex-direction:column;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw; max-height:78vh; object-fit:contain; border-radius:10px;}
.lightbox-cap{color:#fff; margin-top:14px; font-family:var(--font-head); font-size:1.05rem; text-align:center; padding:0 20px;}
.lightbox-close{position:absolute; top:16px; right:16px; background:rgba(255,255,255,.15); border:none; color:#fff; width:40px;height:40px; border-radius:50%; font-size:1.1rem; cursor:pointer;}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15); border:none; color:#fff;
  width:44px;height:44px; border-radius:50%; font-size:1.6rem; cursor:pointer; display:flex;align-items:center;justify-content:center;
}
.lightbox-nav.prev{left:12px;} .lightbox-nav.next{right:12px;}

.cart-item{padding:10px 0; border-bottom:1px solid var(--border);}
.cart-item-row{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.cart-item-name{font-weight:600; font-size:.9rem;}
.cart-item-sub{font-size:.76rem; color:var(--text-soft);}
.cart-item-note{
  width:100%; margin-top:8px; padding:7px 11px; border-radius:20px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:.78rem;
}
.cart-item-move{
  display:flex; align-items:center; gap:7px; width:100%; margin-top:8px;
  padding:6px 11px; border-radius:20px; border:1px dashed var(--border);
  background:var(--bg); font-size:.78rem; color:var(--text-soft); cursor:pointer;
}
.cart-item-move input{width:16px;height:16px; accent-color:var(--accent); cursor:pointer; flex:none;}
.cart-item-move:has(input:checked){border-style:solid; border-color:var(--accent); color:var(--text); font-weight:600;}
.qty-ctrl{display:flex; align-items:center; gap:8px;}
.qty-ctrl button{width:26px;height:26px;border-radius:50%;border:1px solid var(--border); background:var(--surface); cursor:pointer;}
.cart-subtotal-row{display:flex; justify-content:space-between; font-size:.85rem; color:var(--text-soft); margin-bottom:4px;}
.cart-discount-row{display:flex; justify-content:space-between; font-size:.88rem; color:var(--accent); font-weight:600; margin-bottom:8px;}
.cart-total-row{display:flex; justify-content:space-between; font-weight:700; font-size:1.05rem; margin-bottom:14px;}

/* ---------- Bonus / Rabatt: blinkendes Geschenk-Icon im Header ---------- */
/* Nur sichtbar, solange eine Aktion aktiv ist (Klasse wird per JS gesetzt) —
   blinkt dauerhaft (anders als der kurze 3x-Badge-Blink beim Warenkorb),
   damit es auffällt, ohne die restliche Speisekarte zu verändern. */
.gift-fab{color:var(--accent);}
.gift-fab.pulse{animation:giftPulse 1.6s ease-in-out infinite;}
@keyframes giftPulse{0%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(31,109,67,.35);} 50%{transform:scale(1.12); box-shadow:0 0 0 7px rgba(31,109,67,0);}}

/* ---------- Kunden werben Kunden: Header-Icon zur Konto-Seite ---------- */
.kwk-fab{color:var(--accent); text-decoration:none;}

/* ---------- Gallery ---------- */
.gallery-carousel{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/9; max-height:520px;}
.gallery-carousel img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease, filter 1.4s ease; filter:brightness(.85);}
.gallery-carousel img.active{opacity:1; filter:brightness(1);}
.gallery-cap{position:absolute; left:0; right:0; bottom:0; padding:22px; background:linear-gradient(0deg, rgba(0,0,0,.55), transparent); color:#fff; font-family:var(--font-head); font-size:1.1rem;}
.gallery-dots{display:flex; justify-content:center; gap:6px; margin-top:14px;}
.gallery-dots span{width:8px;height:8px;border-radius:50%; background:var(--border); cursor:pointer;}
.gallery-dots span.active{background:var(--accent); width:22px; border-radius:5px;}
.gallery-divider{display:flex; align-items:center; gap:14px; margin:32px 0 4px; color:var(--text-soft);}
.gallery-divider::before,.gallery-divider::after{content:""; flex:1; height:1px; background:var(--border);}
.gallery-divider span{font-size:1.05rem; opacity:.85;}
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:24px;}
.gallery-grid img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; cursor:pointer; transition:transform .25s;}
.gallery-grid img:hover{transform:scale(1.04);}

/* ---------- Theme Picker ---------- */
.theme-groups{display:flex; flex-direction:column; gap:26px;}
.swatch-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px;}
.swatch{
  border:2px solid var(--border); border-radius:14px; padding:10px; cursor:pointer; text-align:center; background:var(--surface);
  font-size:.78rem; color:var(--text-soft); transition:.2s;
}
.swatch.active{border-color:var(--accent); color:var(--accent); font-weight:700; background:var(--surface-2);}
.swatch .dot-row{display:flex; justify-content:center; gap:4px; margin-bottom:8px;}
.swatch .dot{width:16px;height:16px;border-radius:50%; border:1px solid rgba(0,0,0,.1);}
.toggle-row{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-top:1px solid var(--border);}
.switch{position:relative; width:44px;height:24px;}
.switch input{opacity:0;width:0;height:0;}
.switch .slider{position:absolute; inset:0; background:var(--border); border-radius:30px; cursor:pointer; transition:.2s;}
.switch .slider:before{content:"";position:absolute; width:18px;height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s;}
.switch input:checked + .slider{background:var(--accent);}
.switch input:checked + .slider:before{transform:translateX(20px);}

/* ---------- Footer (schwebt fest am unteren Bildschirmrand, analog zum Header oben) ---------- */
footer.site-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:500;
  background:var(--header-bg); backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  padding:7px 0; padding-bottom:calc(7px + env(safe-area-inset-bottom));
}
.footer-bar{
  display:flex; align-items:center; gap:10px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.footer-bar::-webkit-scrollbar{display:none;}
.footer-logo{flex:0 0 auto; display:flex; align-items:center; cursor:pointer;}
.footer-logo img{height:28px; display:block;}
.footer-hours-inline{
  flex:0 0 auto; font-size:.68rem; color:var(--text-soft); line-height:1.25; white-space:nowrap;
  padding-right:10px; margin-right:2px; border-right:1px solid var(--border);
}
.footer-hours-inline span{display:block; opacity:.8;}
.footer-hours-inline b{display:block; color:var(--text); font-weight:600;}
.footer-social{display:flex; gap:7px; flex:0 0 auto; align-items:center;}
.social-btn{
  flex:0 0 auto; width:32px;height:32px;border-radius:50%; background:var(--surface); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; font-size:.9rem; color:var(--accent); text-decoration:none;
  cursor:pointer; padding:0;
}
.social-btn svg{width:16px; height:16px;}
/* Original-Markenfarben, damit die Icons sofort als das jeweilige Netzwerk erkennbar sind */
.sb-call{color:#1f6d43;}
.sb-wa{color:#25D366;}
.sb-maps{color:#EA4335;}
.sb-review{color:#F4B400;}
.sb-ig{color:#C13584;}
.sb-fb{color:#1877F2;}
.sb-tiktok{color:#010101;}
.sb-share{color:var(--accent);}
.sb-info{font-size:.85rem;}
.sb-allergen{font-size:.85rem;}
.gear-btn{opacity:.55; filter:grayscale(.3);}
/* Der rechtliche Hinweis ist jetzt ein Modal (Info-Icon in der Leiste) statt einer
   ausklappbaren Fläche, damit die schwebende Fußleiste immer nur eine Zeile hoch bleibt. */
#legal-modal p{font-size:.85rem; color:var(--text-soft); line-height:1.6;}

@media(max-width:760px){
  .header-inner{flex-wrap:wrap; padding:8px 14px 6px; row-gap:6px;}
  /* Umbrechen statt seitlich scrollen: vorher waren im Kellner-Modus (7
     Buttons) "Speisekarte" und "Galerie" links abgeschnitten und nicht
     erreichbar (zentriert + overflow = linker Teil unerreichbar). Jetzt
     rutschen überzählige Buttons einfach in eine zweite Zeile. */
  nav.main-nav{
    order:3; width:100%; justify-content:center; gap:2px 2px;
    flex-wrap:wrap; overflow:visible;
  }
  nav.main-nav button{font-size:.72rem; padding:6px 10px; white-space:nowrap;}
}

/* ---------- Logo motion (random entrance) ---------- */
.logo-anim.motion-spin{animation:logoSpin 1.6s ease-out;}
.logo-anim.motion-grow{animation:logoGrow 1.1s cubic-bezier(.2,.8,.3,1);}
.logo-anim.motion-fadein{animation:logoFade 1.4s ease;}
.logo-anim.motion-blurin{animation:logoBlur 1.3s ease;}
.logo-anim.motion-fromright{animation:logoFromRight 1s cubic-bezier(.2,.8,.3,1);}
.logo-anim.motion-fromleft{animation:logoFromLeft 1s cubic-bezier(.2,.8,.3,1);}
@keyframes logoSpin{from{transform:rotate(-200deg) scale(.6); opacity:0;} to{transform:rotate(0) scale(1); opacity:1;}}
@keyframes logoGrow{from{transform:scale(.2); opacity:0;} to{transform:scale(1); opacity:1;}}
@keyframes logoFade{from{opacity:0;} to{opacity:1;}}
@keyframes logoBlur{from{filter:blur(14px); opacity:0;} to{filter:blur(0); opacity:1;}}
@keyframes logoFromRight{from{transform:translateX(80px); opacity:0;} to{transform:translateX(0); opacity:1;}}
@keyframes logoFromLeft{from{transform:translateX(-80px); opacity:0;} to{transform:translateX(0); opacity:1;}}

/* particle canvas layer */
#effect-layer{position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden;}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); background:var(--text); color:var(--bg);
  padding:12px 20px; border-radius:30px; font-size:.85rem; z-index:1200; opacity:0; transition:.3s; pointer-events:none;
}

/* ---------- Kellner-Funktionen ---------- */
.staff-badge{
  display:flex; align-items:center; gap:4px; font-size:.8rem; background:var(--surface-2); border:1px solid var(--border);
  border-radius:20px; padding:6px 12px; color:var(--accent); font-weight:600; white-space:nowrap;
}
#nav-tables-btn.hidden{display:none;}

/* Tischplan-Raster: grün = frei, rot = besetzt */
.table-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:12px; margin-top:10px;}
.table-tile{
  aspect-ratio:1/1; border-radius:var(--radius-sm); border:none; cursor:pointer; color:#fff; font-weight:700;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:1.05rem;
  box-shadow:var(--shadow); transition:transform .15s;
}
.table-tile:active{transform:scale(.94);}
.table-tile.free{background:linear-gradient(160deg,#3fae6b,#1f6d43);}
.table-tile.occupied{background:linear-gradient(160deg,#e2694f,#c0392b);}
.table-tile small{font-weight:500; font-size:.62rem; opacity:.9;}

/* Ziel-Auswahl-Modal im Listen-Modus (z.B. "Gericht zu welchem Kunden
   verschieben") -- statt der quadratischen Tisch-Kacheln eine einfache
   Liste, weil "Kunde 2" o.ä. als Text nicht in eine kleine Kachel passt. */
#move-target-grid.list-mode{display:flex; flex-direction:column; gap:8px;}
.move-list-btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:12px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--border);
  background:var(--surface); color:var(--text); font-weight:600; font-size:.92rem; cursor:pointer;
}
.move-list-btn:active{transform:scale(.98);}
.move-list-btn small{font-weight:500; color:var(--text-soft); font-size:.78rem;}

/* Tisch-Detail-Modal */
.modal-card.wide{max-width:640px;}
.cust-chip-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.cust-chip{
  border:1.5px solid var(--border); background:var(--surface); border-radius:20px; padding:7px 14px; font-size:.82rem;
  cursor:pointer; color:var(--text-soft); display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.cust-chip.active{border-color:var(--accent); background:var(--surface-2); color:var(--accent); font-weight:700;}
.cust-chip input[type=checkbox]{margin:0;}
.cust-chip .cust-chip-total{font-weight:600;}
.cust-item-row{display:flex; flex-direction:column; gap:8px; padding:9px 0; border-bottom:1px solid var(--border);}
.cust-item-row:last-child{border-bottom:none;}
.cust-item-row-main{display:flex; align-items:center; gap:10px;}
.cust-item-row .cust-item-meta{flex:1; min-width:0;}
.cust-item-row .cust-item-name{font-size:.9rem;}
.cust-item-row .cust-item-price{font-size:.78rem; color:var(--text-soft);}
.cust-item-new{display:inline-block; background:var(--accent); color:#fff; font-size:.62rem; font-weight:700; padding:2px 7px; border-radius:20px; vertical-align:middle; margin-left:4px;}
/* Rechte Spalte: Menge (+/-) direkt über dem Verschieben-Icon gestapelt,
   statt beides nebeneinander -- so bleibt mehr Platz für den Artikelnamen. */
.cust-item-side{display:flex; flex-direction:column; align-items:center; gap:6px; flex:none;}
.cust-item-move-btn{
  width:26px; height:26px; border-radius:8px; border:1px solid var(--border); background:var(--surface);
  color:var(--text-soft); font-size:.85rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.cust-item-move-btn:active{transform:scale(.92);}
.cust-actions{display:flex; gap:10px; margin-top:14px;}
.cust-actions .btn{flex:1; justify-content:center;}
.cust-move-btn{background:none;border:none;color:var(--text-soft);font-size:.82rem;cursor:pointer;padding:0 1px;}
.cust-pay-bar{margin-top:16px; padding-top:14px; border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:12px;}
.cust-remove-btn{background:none;border:none;color:var(--text-soft);font-size:.85rem;cursor:pointer;padding:0 2px;}
.cust-discount-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.cust-discount-row label{font-size:.85rem; color:var(--text-soft);}
.cust-discount-row select{
  padding:7px 10px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:.85rem;
}
.cust-discount-note{font-size:.78rem; color:#c0392b; margin:-6px 0 0;}
.cust-discount-note.hidden{display:none;}
/* Innerhalb der neuen Abrechnung steht dieselbe Info schon gut lesbar in
   billing-subtotal-row (siehe unten) -- der alte rote Hinweis bliebe sonst
   als doppelte/unübersichtliche Zeile stehen. Bleibt im DOM (Inhalt wird
   weiterhin von app.js gepflegt) nur rein visuell ausgeblendet. */
#billing-panel .cust-discount-note{display:none;}

/* ---------- Abrechnung (Kellner-Kasse am Tisch) ---------- */
/* Vor dem Antippen von "Abrechnung" ist von alldem hier nichts zu sehen --
   der Tisch sieht genau wie bisher aus (Artikelliste, Hinzufügen, Senden).
   Erst der Button öffnet die groß/deutlich lesbare Abrechnung darunter. */
.billing-open-btn{width:100%; justify-content:center; font-size:1rem; padding:14px 20px;}
.billing-panel{
  display:flex; flex-direction:column; gap:14px; margin-top:2px; padding:16px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2);
}
.billing-panel.hidden{display:none;}
.billing-panel-head{display:flex; align-items:center; justify-content:space-between;}
.billing-panel-head b{font-size:1rem;}
.billing-panel-close{border:none; background:none; font-size:1.1rem; color:var(--text-soft); cursor:pointer; padding:2px 6px;}
.billing-breakdown{display:flex; flex-direction:column; gap:4px; font-size:.85rem;}
.billing-breakdown-row{display:flex; justify-content:space-between; gap:10px; color:var(--text-soft);}
.billing-breakdown-row.extra span:first-child{color:var(--text);}
.billing-breakdown-row .rm{background:none;border:none;color:var(--text-soft);font-size:.8rem;cursor:pointer;padding:0 2px;}
.billing-breakdown-total{display:flex; justify-content:space-between; font-weight:700; padding-top:6px; border-top:1px dashed var(--border); color:var(--text);}
.billing-promo-badge{
  font-size:.8rem; font-weight:600; color:var(--accent); background:var(--bg);
  border:1px solid var(--accent); border-radius:20px; padding:6px 12px; text-align:center; margin:0;
}
.billing-promo-badge.hidden{display:none;}
/* Die Endsumme -- deutlich größer als der Rest der App, damit sie auch aus
   der Distanz gut lesbar ist, wenn dem Kunden das Handy/Tablet gezeigt wird. */
.billing-total-display{
  text-align:center; padding:16px 10px; border-radius:var(--radius); background:var(--bg);
  border:1px solid var(--border);
}
.billing-total-sub{font-size:.85rem; color:var(--text-soft); margin-bottom:4px; display:flex; flex-direction:column; gap:2px;}
.billing-total-final{font-family:var(--font-head); font-size:2.4rem; font-weight:700; color:var(--accent); line-height:1.15;}

/* NumPad -- gemeinsam genutzt von der Kellner-Abrechnung hier (Extra-Betrag
   eingeben) und dem Kunden-werben-Kunden-Kassieren-Modus in customer.html.
   Farben kommen komplett aus den Theme-Variablen, damit ein Themenwechsel
   im Admin-Bereich auch das NumPad mit umfärbt. */
.numpad-display{font-family:var(--font-head); font-size:2rem; text-align:center; padding:14px 0; color:var(--accent);}
.numpad-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.numpad-grid button{padding:16px 0; font-size:1.15rem; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer;}
.numpad-grid button:active{background:var(--surface-2);}
.numpad-grid button.numpad-clear{color:var(--accent-2, var(--accent));}

.form-error{font-size:.82rem; color:#c0392b; margin:4px 0 0;}
.form-error.hidden{display:none;}
.modal-actions{display:flex; gap:10px; margin-top:14px;}
.modal-actions .btn{flex:1; justify-content:center;}

/* Sobald die Abrechnung offen ist, wird die Artikelliste scrollbar begrenzt
   -- so passen Artikelliste UND Abrechnung zusammen auf den Bildschirm,
   statt dass die Abrechnung nach unten aus dem sichtbaren Bereich rutscht. */
#table-detail-modal.billing-open #cust-item-list{max-height:32vh; overflow-y:auto; -webkit-overflow-scrolling:touch;}

/* Wechselgeld-Rechner (kein Kopfrechnen mehr für den Kellner) */
.cash-calc{padding-top:12px; border-top:1px dashed var(--border);}
.cash-quick-chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px;}
.cash-quick-chips button{
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  padding:6px 13px; border-radius:20px; font-size:.78rem; cursor:pointer;
}
.cash-quick-chips button.cash-quick-exact{border-color:var(--accent); color:var(--accent); font-weight:700;}
.cash-input-row{display:flex; align-items:center; gap:10px;}
.cash-input-row input{
  flex:1; min-width:0; padding:9px 13px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:.9rem;
}
.cash-change-display{font-weight:700; font-size:.85rem; white-space:nowrap;}
.cash-change-display.positive{color:var(--accent);}
.cash-change-display.negative{color:#c0392b;}

.checkout-avail-warning{
  background:rgba(178,34,34,.08); border:1px solid rgba(178,34,34,.25); border-radius:10px;
  padding:10px 12px; font-size:.82rem; color:#b23; margin-bottom:14px; line-height:1.5;
}
.checkout-avail-warning b{display:block; margin-bottom:2px;}

/* Schwebende Leiste beim Zuweisen von Gerichten aus der Speisekarte zu einem Kellner-Kunden */
#waiter-assign-bar{
  position:fixed; left:0; right:0; bottom:calc(58px + env(safe-area-inset-bottom)); z-index:490;
  background:var(--accent); color:#fff; padding:10px 16px; display:flex; align-items:center; justify-content:space-between;
  font-size:.85rem; font-weight:600; box-shadow:0 -6px 16px rgba(0,0,0,.12);
}
#waiter-assign-bar .btn{background:#fff; color:var(--accent); padding:7px 14px;}
.toast.show{opacity:1; transform:translate(-50%,0);}

/* ===================== UPDATE 2026-09-26 ===================== */
/* Ganze Kachel / Zeile antippbar */
[data-item]{cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none;}
span.item-add{display:inline-flex; align-items:center; justify-content:center; pointer-events:none;}
.tap-flash{animation:tapFlash .35s ease;}
@keyframes tapFlash{0%{box-shadow:0 0 0 0 var(--accent);}50%{box-shadow:0 0 0 4px var(--accent); transform:scale(.985);}100%{box-shadow:0 0 0 0 transparent;}}
/* Varianten: mehrfach antippen */
.variant-hint{font-size:.76rem; color:var(--text-soft); margin:-6px 0 10px;}
.variant-icon-card{position:relative;}
.variant-icon-grid.as-list{grid-template-columns:1fr;}
.variant-icon-grid.as-list .variant-icon-card{flex-direction:row; justify-content:flex-start; gap:12px; padding:12px 14px; text-align:left;}
.variant-icon-grid.as-list .variant-icon-name{flex:1; text-align:left; font-size:.9rem;}
.variant-count{position:absolute; top:-7px; right:-7px; background:var(--accent); color:#fff; border-radius:20px; font-size:.72rem; font-weight:700; padding:2px 7px; box-shadow:0 2px 6px rgba(0,0,0,.2);}
.added-flash{animation:addedFlash .4s ease;}
@keyframes addedFlash{0%{transform:scale(1);}40%{transform:scale(.94); background:var(--surface-2);}100%{transform:scale(1);}}
/* Artikelnummer fett */
b.art-nr{font-weight:800; color:var(--accent); margin-right:4px;}
.order-lines{margin-top:8px; display:flex; flex-direction:column; gap:3px;}
.order-line{display:flex; align-items:baseline; gap:6px; font-size:.9rem; padding:3px 0; border-bottom:1px dashed var(--border);}
.order-line:last-child{border-bottom:none;}
.order-line .ol-qty{font-weight:700; min-width:28px;}
.order-line .ol-name{flex:1; min-width:0;}
.order-line .ol-price{white-space:nowrap; color:var(--text-soft); font-size:.82rem;}
.order-line-note{font-size:.78rem; color:var(--text-soft); margin:-2px 0 3px 34px;}
.cust-item-note{font-size:.76rem; color:var(--text-soft);}
/* Drag & Drop am Tisch */
.dnd-hint{font-size:.72rem; color:var(--text-soft); margin:-6px 0 8px;}
.drag-handle{color:var(--text-soft); font-size:1.1rem; flex:none; cursor:grab;}
.cust-item-row{-webkit-touch-callout:none; user-select:none;}
.cust-item-row.dragging{opacity:.45;}
.drag-ghost{position:fixed; z-index:5000; pointer-events:none; transform:translate(-50%,-120%); background:var(--surface); border:2px solid var(--accent); border-radius:12px; padding:8px 12px; box-shadow:0 10px 30px rgba(0,0,0,.25); font-size:.88rem; max-width:80vw;}
.cust-chip-row.drop-mode .cust-chip{outline:2px dashed var(--accent-2); outline-offset:2px;}
.cust-chip.drop-over{background:var(--accent) !important; color:#fff !important; transform:scale(1.06);}
/* Kunde verschieben */
.move-customer-box{margin-top:12px; border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:var(--surface-2);}
.move-customer-box b{font-size:.85rem;}
.move-customer-row{display:flex; gap:8px; align-items:center; margin-top:8px;}
.move-customer-row select{flex:1; min-width:0;}
/* Zahlart */
.pay-method-title{font-size:.8rem; color:var(--text-soft); margin:10px 0 6px; text-align:center;}
.pay-method-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.pay-method-btn{justify-content:center; font-weight:800; padding:14px 6px; font-size:.95rem;}
.pay-method-btn.pm-cash{background:#2e7d32;}
.pay-method-btn.pm-paypal{background:#0070ba;}
.pay-method-btn.pm-card{background:#5b3fa8;}
.pay-method-btn:disabled{opacity:.45;}
.tip-mode-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; font-size:.8rem;}
.tip-mode-row label{display:flex; align-items:center; gap:5px; border:1px solid var(--border); border-radius:20px; padding:4px 10px; cursor:pointer; background:var(--surface);}
.tip-mode-row label:has(input:checked){border-color:var(--accent); background:var(--surface-2); font-weight:600;}
.cash-change-display.tip{color:#b7791f; font-weight:800;}
/* Geschlossen / Pause */
.closed-banner{border:1px solid #e8cfa3; background:#fff7e8; color:#6b4a12; border-radius:14px; padding:12px 14px; margin:10px 0 14px; font-size:.88rem; display:flex; flex-direction:column; gap:6px; align-items:flex-start;}
html[data-design="friedliche-nacht"] .closed-banner{background:#2b2616; color:#f3e2b3; border-color:#5c4b1e;}
.closed-banner-head{font-weight:800; font-size:1rem;}
.open-dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-left:6px; background:#999; vertical-align:middle;}
.open-dot.open{background:#2ecc71; box-shadow:0 0 0 3px rgba(46,204,113,.25);}
.open-dot.pause{background:#f39c12;}
.open-dot.closed{background:#e74c3c;}
.hours-table{display:flex; flex-direction:column; gap:2px; margin-top:8px; width:100%;}
.hours-row{display:flex; justify-content:space-between; gap:10px; padding:6px 8px; border-radius:8px; font-size:.88rem;}
.hours-row.today{background:var(--surface-2); font-weight:700;}
.hours-status{font-weight:700;}
/* Reservierungen (Kellner) */
nav.main-nav button.res-blink{animation:resBlink 1s ease-in-out infinite;}
@keyframes resBlink{0%,100%{background:transparent;}50%{background:#f39c12; color:#fff;}}
.res-row{display:flex; gap:12px; align-items:flex-start; border:1px solid var(--border); border-radius:14px; padding:12px; margin-bottom:10px; background:var(--surface);}
.res-row.soon{border-color:#f39c12; box-shadow:0 0 0 2px rgba(243,156,18,.35); animation:resRowPulse 1.6s ease-in-out infinite;}
@keyframes resRowPulse{0%,100%{box-shadow:0 0 0 2px rgba(243,156,18,.35);}50%{box-shadow:0 0 0 6px rgba(243,156,18,.12);}}
.res-when{display:flex; flex-direction:column; min-width:108px; font-size:.82rem;}
.res-when .res-time{font-size:1.15rem; font-weight:800; color:var(--accent);}
.res-when small{color:var(--text-soft);}
.res-main{flex:1; min-width:0; font-size:.88rem;}
.res-meta,.res-note{font-size:.78rem; color:var(--text-soft); margin-top:2px;}
.res-actions{display:flex; flex-direction:column; gap:6px;}
.icon-btn-sm{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--surface);font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;color:var(--text);}
.icon-btn-sm.danger{color:#b23;border-color:#e2b3b3;}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
/* Trinkgeld */
.tips-toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
.tips-toolbar input{max-width:170px;}
#tips-master-btn.master-on{background:#b7791f; color:#fff; border-color:#b7791f;}
.tips-summary{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;}
.tips-sum-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px; text-align:center; display:flex; flex-direction:column;}
.tips-sum-card span{font-size:.75rem; color:var(--text-soft);}
.tips-sum-card b{font-size:1.4rem; font-family:var(--font-head);}
.tips-sum-card.open b{color:#b7791f;}
.tips-sum-by{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:4px;}
.tip-row{display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--border);}
.tip-row.shared{opacity:.6;}
.tip-main{flex:1; min-width:0; font-size:.9rem;}
.tip-meta{font-size:.74rem; color:var(--text-soft);}
.tips-share-card{margin-top:16px; border:1px solid var(--border); border-radius:14px; padding:14px; background:var(--surface);}
.tips-share-card h3{margin:0 0 4px;}
.tips-share-preview{margin-top:10px; display:flex; flex-wrap:wrap; gap:4px; font-size:.85rem;}
.tips-share-done{margin-top:12px; border:1px dashed var(--border); border-radius:12px; padding:10px 12px; font-size:.86rem;}
.tips-share-split{display:flex; flex-wrap:wrap; gap:4px; margin:6px 0;}
.pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.72rem;background:var(--surface-2);color:var(--text-soft);}
.pill.on{background:var(--accent);color:#fff;}
.chip-select{display:flex;flex-wrap:wrap;gap:6px;}
.chip-select label{border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:.8rem;cursor:pointer;}
.chip-select input{display:none;}
.chip-select label:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff;}
/* Zahlart-Icons in Listen */
.pm-icon{font-size:.9rem; margin-left:4px;}

/* ===== Update 2: Zahlung bestätigen (BAR / PAYPAL / KARTE) ===== */
.pay-confirm-card{max-width:420px;}
.pay-confirm-amount{font-family:var(--font-head); font-size:2.4rem; font-weight:800; text-align:center; color:var(--accent); margin:2px 0 10px;}
.pc-qr{display:flex; flex-direction:column; align-items:center; margin:4px auto 12px; background:#fff; border-radius:14px; padding:10px; width:min(260px,75vw);}
.pc-qr svg, .pc-qr img{width:100%; height:auto; display:block;}
.pc-qr small{color:#555; font-size:.7rem; margin-top:4px;}
.pc-row{display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px dashed var(--border); font-size:.88rem;}
.pc-row span{color:var(--text-soft); min-width:110px;}
.pc-row b{flex:1; word-break:break-all;}
.pc-iban{letter-spacing:.04em;}
.copy-btn{border:1px solid var(--border); background:var(--surface); border-radius:8px; padding:3px 7px; cursor:pointer; flex:none;}
.pc-hint{font-size:.76rem; color:var(--text-soft); margin:8px 0 0;}
.pc-warn{font-size:.82rem; color:#8a5a00; background:#fff4dc; border-radius:10px; padding:8px 10px;}
.pc-link{margin-top:8px; width:100%; justify-content:center;}
.pay-confirm-actions .btn.pm-cash-bg{background:#2e7d32;}
.pay-confirm-actions .btn.pm-paypal-bg{background:#0070ba;}
.pay-confirm-actions .btn.pm-card-bg{background:#5b3fa8;}
#pay-confirm-modal{z-index:1200;}
/* Trinkgeld-Gruppen */
.tip-group{border:1px solid var(--border); border-radius:12px; padding:8px 10px; margin-bottom:8px;}
.tip-group-head{display:flex; justify-content:space-between; gap:8px; font-size:.86rem; margin-bottom:6px;}
.tip-group .chip-select{align-items:center;}
.tip-group-row input{width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); font:inherit; font-size:.88rem;}

/* ===== Update 27.09.2026 ===== */
/* Artikelnummer + Variante: farbiges, fettes Kästchen -- nie mit dem Namen verwechselbar */
.hg-art{display:inline;line-height:1.5;}
.hg-code{display:inline-block;background:#c2410c;color:#fff !important;font-weight:900;border-radius:6px;padding:0 7px;margin-right:6px;letter-spacing:.02em;white-space:nowrap;font-size:.95em;line-height:1.45;}
.hg-code-manual{background:#6b21a8;}
.hg-name{font-weight:500;}
.hg-var{display:inline-block;background:#1e40af;color:#fff !important;font-weight:800;border-radius:6px;padding:0 7px;margin-left:6px;white-space:nowrap;font-size:.9em;line-height:1.45;}
.variant-letter-chip{display:inline-block;background:#c2410c;color:#fff;font-weight:900;border-radius:6px;padding:0 8px;margin-right:4px;}

/* Neue-Bestellung-Alarm (Admin + Kellner) */
.hg-order-alert{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:10050;width:min(520px,calc(100vw - 20px));max-height:calc(100vh - 20px);overflow:auto;background:#fff7ed;color:#1f2937;border:3px solid #ea580c;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.35);padding:12px 14px;animation:hgOaPulse 1.2s ease-in-out infinite;}
.hg-order-alert.hidden{display:none;}
@keyframes hgOaPulse{0%,100%{box-shadow:0 12px 40px rgba(234,88,12,.35);}50%{box-shadow:0 12px 50px rgba(234,88,12,.85);}}
.hg-oa-head{font-size:1.15rem;font-weight:800;display:flex;align-items:center;gap:6px;color:#9a3412;}
.hg-oa-bell{display:inline-block;animation:hgOaBell .6s ease-in-out infinite alternate;}
@keyframes hgOaBell{from{transform:rotate(-18deg);}to{transform:rotate(18deg);}}
.hg-oa-count{background:#ea580c;color:#fff;border-radius:999px;padding:0 9px;font-size:.9rem;}
.hg-oa-list{margin:8px 0;display:flex;flex-direction:column;gap:8px;}
.hg-oa-item{background:#fff;border:1px solid #fed7aa;border-radius:10px;padding:8px 10px;font-size:.88rem;}
.hg-oa-item-head{margin-bottom:4px;}
.hg-oa-lines{display:flex;flex-direction:column;gap:3px;}
.hg-oa-more{font-size:.8rem;color:#9a3412;}
.hg-oa-actions{display:flex;gap:8px;}
.hg-oa-actions button,.hg-oa-unlock{flex:1;border:0;border-radius:10px;padding:12px 10px;font-weight:800;font-size:.95rem;cursor:pointer;}
.hg-oa-open{background:#1e40af;color:#fff;}
.hg-oa-ack{background:#15803d;color:#fff;}
.hg-oa-unlock{width:100%;background:#b91c1c;color:#fff;margin-bottom:8px;}
.alarm-settings{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 12px;}

/* Manueller Betrag in der Abrechnung */
.manual-amount-box{border:2px dashed #6b21a8;border-radius:12px;padding:10px 12px;margin:8px 0 12px;background:rgba(107,33,168,.06);}
.manual-amount-box b.ma-title{display:block;margin-bottom:6px;color:#6b21a8;}
.manual-amount-row{display:flex;gap:8px;flex-wrap:wrap;}
.manual-amount-row input[type=text]{flex:2 1 160px;min-width:0;}
.manual-amount-row input[type=number]{flex:1 1 90px;min-width:0;}
.manual-amount-row button{flex:1 1 100%;justify-content:center;background:#6b21a8;}
.manual-amount-preview{font-size:.82rem;margin-top:6px;color:#6b21a8;font-weight:600;min-height:1em;}

/* Kassenabschluss (Statistik) */
.kasse-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;}
.kasse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;}
.kasse-card{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--surface);}
.kasse-card.total{border:2px solid #15803d;background:rgba(21,128,61,.06);grid-column:1/-1;}
.kasse-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;}
.kasse-head b{font-size:1.02rem;}
.kasse-head span{font-size:.75rem;color:var(--text-soft);}
.kasse-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:6px;margin-bottom:8px;}
.kasse-m{border-radius:10px;padding:7px 6px;text-align:center;color:#fff;}
.kasse-m.pm-cash{background:#2e7d32;} .kasse-m.pm-paypal{background:#0070ba;} .kasse-m.pm-card{background:#5b3fa8;} .kasse-m.pm-voucher{background:#b8860b;}
.kasse-m .l{font-size:.72rem;opacity:.95;}
.kasse-m .v{font-weight:800;font-size:1rem;white-space:nowrap;}
.kasse-m .s{font-size:.66rem;opacity:.9;white-space:nowrap;}
.kasse-sum div{display:flex;justify-content:space-between;gap:8px;padding:3px 0;font-size:.88rem;}
.kasse-sum .disc{color:#b45309;}
.kasse-sum .final{border-top:2px solid var(--border);margin-top:3px;padding-top:6px;font-size:1.02rem;font-weight:800;}
.kasse-sum .tip{color:var(--text-soft);font-size:.78rem;}
.kasse-card.total .kasse-m .v{font-size:1.15rem;}
.kasse-card:not(.total) .kasse-methods{grid-template-columns:1fr;}
.kasse-card:not(.total) .kasse-m{display:grid;grid-template-columns:auto 1fr;align-items:center;text-align:left;column-gap:10px;padding:6px 10px;}
.kasse-card:not(.total) .kasse-m .v{text-align:right;}
.kasse-card:not(.total) .kasse-m .s{grid-column:1/-1;text-align:right;}
@media (max-width:520px){.kasse-methods{grid-template-columns:1fr;}.kasse-m{display:grid;grid-template-columns:auto 1fr;align-items:center;text-align:left;column-gap:10px;}.kasse-m .v{text-align:right;}.kasse-m .s{grid-column:1/-1;text-align:right;}}

/* "Als App speichern"-Fenster (Kunden) */
#a2hs-sheet{position:fixed;inset:0;z-index:10040;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom));animation:a2hsFade .25s ease;}
@keyframes a2hsFade{from{opacity:0;}to{opacity:1;}}
.a2hs-card{position:relative;width:min(440px,100%);background:var(--surface,#fff);color:var(--text,#222);border-radius:20px;padding:18px 18px 14px;box-shadow:0 -8px 40px rgba(0,0,0,.3);animation:a2hsUp .3s ease;margin-bottom:56px;}
@keyframes a2hsUp{from{transform:translateY(40px);}to{transform:none;}}
.a2hs-x{position:absolute;top:10px;right:12px;border:0;background:none;font-size:1.1rem;color:var(--text-soft);cursor:pointer;}
.a2hs-head{display:flex;align-items:center;gap:12px;margin-bottom:6px;padding-right:24px;}
.a2hs-head img{width:52px;height:52px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.a2hs-head h3{margin:0;font-size:1.08rem;}
.a2hs-body{font-size:.88rem;color:var(--text-soft);margin:6px 0 10px;}
.a2hs-steps{margin:0 0 12px;padding-left:22px;font-size:.88rem;display:flex;flex-direction:column;gap:7px;}
.a2hs-steps li{line-height:1.45;}
.a2hs-ico{display:inline-block;vertical-align:-4px;color:#0a84ff;background:rgba(10,132,255,.1);border-radius:6px;padding:2px;box-sizing:content-box;}
.a2hs-actions{display:flex;gap:10px;justify-content:flex-end;}
.a2hs-actions .btn{flex:1;justify-content:center;}
#a2hs-arrow{position:fixed;left:50%;bottom:6px;transform:translateX(-50%);z-index:10041;font-size:2rem;animation:a2hsBounce .9s ease-in-out infinite;pointer-events:none;}
@keyframes a2hsBounce{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* Update 9: Navigation nur als Icons + seitlich wischbar (links/rechts).
   Passt alles, wird zentriert (::before/::after mit margin:auto); passt es
   nicht, beginnt die Leiste links -> "Speisekarte" ist nie abgeschnitten,
   der Rest ist per Wischen erreichbar. Gilt für jedes Design (themes.css). */
html nav.main-nav{
  flex-wrap:nowrap !important; overflow-x:auto !important; overflow-y:hidden !important;
  justify-content:flex-start !important; min-width:0; max-width:100%;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain;
}
html nav.main-nav::-webkit-scrollbar{display:none;}
html nav.main-nav::before,html nav.main-nav::after{content:""; margin:auto;}
html nav.main-nav button{flex:0 0 auto; display:inline-flex; align-items:center; gap:2px; padding:7px 11px; line-height:1;}
nav.main-nav .nav-ico{font-size:1.35rem; line-height:1;}
@media(max-width:760px){ html nav.main-nav button{padding:6px 9px;} nav.main-nav .nav-ico{font-size:1.25rem;} }

/* Sprache: nur die Flagge als runder Knopf (wie die Icon-Buttons daneben) */
.lang-select{
  -webkit-appearance:none; appearance:none; width:40px; height:40px; padding:0; border-radius:50%;
  font-size:1.25rem; line-height:1; text-align:center; text-align-last:center; background-image:none;
}
.lang-select option{font-size:1rem; text-align:left;}

/* Google-Bewertung: blinkender goldener Stern neben dem Geschenk */
.review-fab{color:#F4B400; text-decoration:none; animation:starPulse 1.6s ease-in-out infinite;}
.review-fab svg{width:20px; height:20px;}
@keyframes starPulse{0%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(244,180,0,.45);} 50%{transform:scale(1.14); box-shadow:0 0 0 7px rgba(244,180,0,0);}}
@media (prefers-reduced-motion: reduce){ .review-fab{animation:none;} }

/* ---- 🎟️ Gutschein in der Abrechnung ---- */
.pay-method-btn.pm-voucher{background:#b8860b;}
.pay-method-row{grid-template-columns:repeat(2,1fr);}
@media(min-width:620px){ .pay-method-row{grid-template-columns:repeat(4,1fr);} }
.pay-confirm-actions .btn.pm-voucher-bg{background:#b8860b;}
.pm-badge.pm-voucher{background:#b8860b; color:#fff;}
.vr-row{display:flex; gap:8px; align-items:center; margin:10px 0;}
.vr-row input{flex:1; min-width:0; font-size:1.05rem; letter-spacing:.1em; text-transform:uppercase; padding:10px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:var(--text);}
.vr-reader{width:100%; max-width:320px; margin:8px auto; border-radius:12px; overflow:hidden;}
.vr-info{margin-top:6px;}
.vr-amount{width:110px; text-align:right; font-weight:700; font-size:1rem; padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:var(--text);}
.vr-rest{margin-top:8px; padding:8px 10px; border-radius:10px; background:var(--surface-2);}
.vr-photo-btn{display:flex; justify-content:center; width:100%; box-sizing:border-box; margin-bottom:6px; cursor:pointer;}

/* ---- Update 14: Rabatt-Karte in der Abrechnung + 🔔 im Footer ---- */
.vr-calc{margin:8px 0; padding:8px 10px; border-radius:12px; background:var(--surface-2,#f4f2ea); border:1px solid var(--border,#dfe3d5);}
.vr-calc .vr-neg b{color:#c0392b;}
.vr-calc .vr-fin{border-top:1px solid var(--border,#dfe3d5); margin-top:4px; padding-top:6px; font-size:1.05rem;}
.social-btn.sb-notif.is-on{box-shadow:0 0 0 2px var(--accent,#1f6d43) inset;}

/* Mittagsgerichte außerhalb der Mittagszeit: nur Kellner sehen sie (markiert) */
.lunch-staff-note{margin:-2px 0 8px; padding:8px 12px; border-radius:12px; background:#fff3d6; color:#7a5200; font-size:.85rem; font-weight:600; border:1px dashed #d9a441;}
.lunch-staff-only{opacity:.55; outline:2px dashed #d9a441; outline-offset:-2px;}

/* ---- Update 17: Trinkgeld bei allen Zahlarten, PayPal-Gebühr ---- */
.pc-tipbox,.vr-tipbox{margin:10px 0; padding:10px 12px; border-radius:12px; background:var(--surface-2,#f4f2ea); border:1px solid var(--border,#dfe3d5);}
.pc-tipbox label[for],.vr-tipbox label[for]{display:block; font-size:.85rem; font-weight:700; margin-bottom:6px;}
.pc-tip-input{display:flex; gap:6px;} .pc-tip-input input,.vr-tipbox input[type=text]{flex:1; font-size:1.2rem; font-weight:700; padding:10px 12px; border-radius:10px; border:1px solid var(--border,#dfe3d5); width:100%; box-sizing:border-box;}
.pc-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.pc-chips button{border:1px solid var(--border,#dfe3d5); background:var(--surface,#fff); border-radius:999px; padding:6px 10px; font-size:.85rem; cursor:pointer;}
.pc-row.pc-tip b{color:#1f7a3a;} .pc-row.pc-neg b{color:#c0392b;}
.pc-fee{margin:8px 0; padding:8px 10px; border-radius:12px; border:1px dashed #0070ba; font-size:.86rem;}
.pc-fee div{display:flex; justify-content:space-between; gap:10px; padding:2px 0;}
.pc-fee .neg b{color:#c0392b;} .pc-fee .fin{border-top:1px solid var(--border,#dfe3d5); margin-top:3px; padding-top:5px; font-weight:700;}
.vr-tipbox .chip-select{margin-top:8px;}

/* ---- Update 18: Drag & Drop zuverlässiger ---- */
.cust-item-row{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}
.cust-item-row .drag-handle{touch-action:none; cursor:grab; font-size:1.35rem; padding:6px 8px; margin:-6px 2px -6px -6px; border-radius:8px; background:var(--surface-2,#f4f2ea);}
body.is-dragging{overflow:hidden;}
#drop-dock{position:fixed; left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom,0px)); z-index:4990; background:var(--surface,#fff); border:2px solid var(--accent,#1f6d43); border-radius:18px; padding:10px; box-shadow:0 -10px 40px rgba(0,0,0,.3);}
.drop-dock-title{font-weight:800; font-size:.9rem; margin:0 0 8px 4px;}
.drop-dock-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px;}
.drop-dock-btn{min-height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:14px; border:2px dashed var(--accent,#1f6d43); background:var(--surface-2,#f4f2ea); font-weight:800; font-size:1rem; transition:transform .1s;}
.drop-dock-btn small{font-weight:600; font-size:.75rem; opacity:.8;}
.drop-dock-btn.drop-over{background:var(--accent,#1f6d43) !important; color:#fff; transform:scale(1.05); border-style:solid;}
.drop-dock-cancel{margin-top:8px; text-align:center; font-size:.85rem; padding:10px; border-radius:12px; background:#fde2dd; color:#a3261a; font-weight:700;}

/* ---- Update 18: Abholzeit + Anruf/Vor-Ort ---- */
.checkout-channel{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;}
.checkout-channel label{display:block; cursor:pointer;}
.checkout-channel input{display:none;}
.checkout-channel span{display:flex; align-items:center; justify-content:center; text-align:center; min-height:54px; border-radius:14px; border:2px solid var(--border,#dfe3d5); font-weight:800; font-size:.95rem; background:var(--surface,#fff);}
.checkout-channel input:checked + span{border-color:var(--accent,#1f6d43); background:var(--accent,#1f6d43); color:#fff;}
#checkout-time{width:100%; font-size:1.05rem; padding:12px; border-radius:12px; font-weight:700;}
.checkout-time-hint{font-size:.78rem; color:var(--text-soft); margin:6px 0 0;}

.pickup-time-badge{margin:6px 0; padding:8px 12px; border-radius:12px; font-weight:800; font-size:1rem; background:#e6f4ea; color:#1e6b34;}
.pickup-time-badge.asap{background:#fff3c4; color:#7a4b00;}
.pickup-time-badge.soon{background:#ffedd5; color:#9a3412; animation:ptPulse 1.2s ease-in-out infinite;}
.pickup-time-badge.late{background:#fee2e2; color:#b91c1c; animation:ptPulse .8s ease-in-out infinite;}
@keyframes ptPulse{50%{opacity:.6;}}
.chan-badge{display:inline-block; font-size:.72rem; font-weight:800; padding:1px 8px; border-radius:999px; background:var(--surface-2,#f4f2ea); border:1px solid var(--border,#dfe3d5);}
.chan-badge.chan-phone{background:#e0f2fe; color:#075985;} .chan-badge.chan-walkin{background:#fef3c7; color:#92400e;} .chan-badge.chan-online{background:#ede9fe; color:#5b21b6;}

.pc-pptype{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0;}
.pc-pptype label{cursor:pointer;} .pc-pptype input{display:none;}
.pc-pptype span{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:58px; border-radius:14px; border:2px solid var(--border,#dfe3d5); font-weight:800; font-size:.88rem; padding:6px;}
.pc-pptype small{font-weight:600; font-size:.72rem; opacity:.8;}
.pc-pptype input:checked + span{border-color:#0070ba; background:#0070ba; color:#fff;}
/* Update 22: Kassenabschluss – Umsatz ohne Trinkgeld, Trinkgeld in BAR an Kellner */
.kasse-m .s.got{color:#fff;font-weight:700;line-height:1.35;margin-top:4px;background:rgba(0,0,0,.22);border-radius:8px;padding:3px 7px;display:inline-block;}
.kasse-sum .kasse-tipbox{display:block;margin-top:10px;padding:10px 12px;border-radius:12px;background:#fff8e6;border:1.5px solid #f0c24b;}
.kasse-sum .kasse-tipbox > div{display:flex;justify-content:space-between;gap:8px;padding:3px 0;font-size:.86rem;}
.kasse-sum .kasse-tipbox .h{display:block;font-weight:800;color:#8a5a00;margin-bottom:4px;font-size:.92rem;}
.kasse-sum .kasse-tipbox .fin{border-top:1.5px solid #f0c24b;margin-top:2px;padding-top:5px;font-weight:800;}
.kasse-sum .kasse-tipbox .fin small{font-weight:500;color:var(--text-soft);}
.kasse-sum .kasse-tipbox .pay{background:#1f6d43;color:#fff;border-radius:9px;padding:7px 9px;margin:6px 0;font-weight:800;font-size:.95rem;}
.kasse-sum .kasse-tipbox .sep{border-top:1px dashed #d9b35a;margin-top:6px;padding-top:7px;}
.kasse-sum b{white-space:nowrap;}

/* Update 23: Trinkgeld-Differenz */
.td-summary{overflow-x:auto;margin-bottom:10px;}
.td-summary table{width:100%;border-collapse:collapse;font-size:.85rem;}
.td-summary th{background:#1f6d43;color:#fff;text-align:left;padding:7px 8px;font-size:.78rem;}
.td-summary td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:top;}
.td-summary .num{text-align:right;white-space:nowrap;}
.td-summary .b{font-weight:800;color:#1f6d43;}
.td-summary small{color:var(--text-soft);font-weight:500;}
.td-summary tfoot td{background:#fff3cd;font-weight:800;border-top:2px solid #f0c24b;}
.td-details summary{cursor:pointer;font-weight:700;padding:6px 0;}
.td-item{border:1.5px solid #f0c24b;background:#fffaf0;border-radius:12px;padding:9px 11px;margin:8px 0;}
.td-head{font-size:.84rem;margin-bottom:6px;line-height:1.5;}
.td-calc > div{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:.88rem;}
.td-calc b{white-space:nowrap;text-align:right;}
.td-calc small{color:var(--text-soft);font-weight:500;}
.td-calc .diff{border-top:1.5px solid #f0c24b;margin-top:3px;padding-top:5px;font-weight:800;color:#8a5a00;}
.td-calc .pay{background:#1f6d43;color:#fff;border-radius:9px;padding:6px 9px;margin-top:5px;font-weight:800;}
.td-summary th{white-space:normal;line-height:1.2;} .td-summary table{font-size:.8rem;} .td-summary td,.td-summary th{padding:6px 5px;}
.td-wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-bottom:8px;}
.td-w{border:1.5px solid var(--border);border-radius:12px;padding:9px 11px;background:var(--card,#fff);}
.td-w.total{background:#fff3cd;border-color:#f0c24b;}
.td-w > div{display:flex;justify-content:space-between;gap:8px;padding:2px 0;font-size:.86rem;}
.td-w b{white-space:nowrap;}
.td-w .td-w-h{border-bottom:1px solid var(--border);margin-bottom:4px;padding-bottom:4px;}
.td-w .td-w-h span{color:var(--text-soft);font-size:.78rem;}
.td-w .pay{background:#1f6d43;color:#fff;border-radius:9px;padding:6px 8px;margin-top:4px;font-weight:800;}
.td-w .pay small{color:#d9f2e1;font-weight:500;}
/* Update 24 */
.kasse-sum .kasse-tipbox .fee,.td-calc .fee,.td-w .fee{color:#b42318;}
.pp-tipfee{margin-top:10px;padding:10px 12px;border-radius:12px;background:#fff8e6;border:1.5px solid #f0c24b;}
.pp-tipfee-main{display:flex;gap:8px;align-items:center;font-weight:700;font-size:.92rem;cursor:pointer;}
.pp-tipfee-main input{width:20px;height:20px;}
.pp-tipfee-ex{background:#fff;border-radius:8px;padding:6px 8px;margin-top:6px;}
/* ===== Update 25: Tischplan (Raumplan / Kacheln) ===== */
.hgt-wrap{display:block !important; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:4px 0 8px;}
.hgt-plan{position:relative; container-type:inline-size; min-width:260px; border-radius:14px; border:2px solid var(--border,#d9e2da);
  background-color:#fbfaf6; background-image:linear-gradient(rgba(31,109,67,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(31,109,67,.06) 1px,transparent 1px); background-size:10% 14.2857%;}
.hgt-t{position:absolute; border:0; padding:0; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer;
  font-weight:800; line-height:1.05; box-shadow:0 2px 6px rgba(0,0,0,.25); font-size:max(11px, var(--fs,14px)); overflow:hidden; transition:transform .12s;}
.hgt-t:active{transform:scale(.95);}
.hgt-t.hgt-round{border-radius:50%;} .hgt-t.hgt-square{border-radius:10%;}
.hgt-t small,.hgt-g small{display:block; font-size:max(9px, calc(var(--fs,14px) * .45)); font-weight:600; opacity:.95; max-width:95%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hgt-t.in-group{border-radius:6%;}
.hgt-g{position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px dashed rgba(0,0,0,.35); border-radius:10px;
  cursor:pointer; font-weight:800; font-size:max(11px, var(--fs,14px)); line-height:1.05; text-align:center; z-index:2; pointer-events:auto; background:transparent;}
.hgt-l{display:block; max-width:96%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hgt-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--tile,84px),1fr)); gap:12px;}
.hgt-tile{aspect-ratio:1; min-height:var(--tile,84px); border:0; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:800; font-size:calc(var(--tile,84px) * .3); line-height:1.05; box-shadow:0 3px 8px rgba(0,0,0,.2); cursor:pointer; padding:4px;}
.hgt-tile.round{border-radius:50%;}
.hgt-tile small{font-size:max(10px, calc(var(--tile,84px) * .13)); font-weight:600; max-width:95%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hgt-legend{display:flex; flex-wrap:wrap; gap:12px; font-size:.86rem; margin:4px 0 8px; color:var(--text-soft);}
.hgt-leg{display:inline-flex; align-items:center; gap:6px;} .hgt-leg i{width:16px; height:16px; border-radius:5px; display:inline-block; box-shadow:0 1px 3px rgba(0,0,0,.25);}
.toast-undo{margin-left:8px;border:0;border-radius:8px;padding:5px 10px;font-weight:800;background:#fff;color:#1f6d43;cursor:pointer;}
/* Update 25: Admin › 🪑 Tische (Editor) */
.tp-colors{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.tp-color{display:inline-flex; align-items:center; gap:8px; padding:6px 10px 6px 6px; border:1.5px solid var(--border); border-radius:12px; font-weight:700; font-size:.88rem; cursor:pointer;}
.tp-color input[type=color],.tp-area input[type=color]{width:38px; height:34px; border:0; padding:0; background:none; cursor:pointer;}
.tp-area{display:flex; gap:8px; align-items:center; margin-bottom:6px;}
.tp-area input[type=text]{flex:1; min-width:0;}
.tp-area-cnt{font-size:.75rem; color:var(--text-soft); white-space:nowrap;}
.tp-toolbar{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0;}
.tp-zoom{display:inline-flex; gap:6px; align-items:center; margin-left:auto;}
.tp-canvas-wrap{overflow:auto; border-radius:12px; border:2px solid #1f6d43; background:#eef3ee; -webkit-overflow-scrolling:touch; max-height:75vh;}
.tp-canvas{position:relative; container-type:inline-size; min-width:280px; background-color:#fbfaf6; touch-action:none;
  background-image:linear-gradient(rgba(31,109,67,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(31,109,67,.28) 1px,transparent 1px),linear-gradient(rgba(31,109,67,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(31,109,67,.08) 1px,transparent 1px);}
.tp-t{position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:grab; user-select:none; touch-action:none;
  box-shadow:0 2px 6px rgba(0,0,0,.3); font-size:max(10px,var(--fs,14px)); line-height:1.05; overflow:hidden; z-index:2;}
.tp-t b{font-weight:800;} .tp-t small{font-size:max(8px,calc(var(--fs,14px)*.42)); opacity:.9; white-space:nowrap;}
.tp-t.tp-round{border-radius:50%;} .tp-t.tp-square{border-radius:8%;}
.tp-t.sel{outline:3px solid #1d4ed8; outline-offset:2px; z-index:4;}
.tp-t.dragging{cursor:grabbing; opacity:.85; z-index:5;}
.tp-t.drop-target{outline:4px dashed #f59e0b; outline-offset:3px;}
.tp-g{position:absolute; border:2px dashed #1d4ed8; border-radius:10px; background:rgba(29,78,216,.06); z-index:1; pointer-events:none;}
.tp-g span{position:absolute; left:4px; top:-22px; background:#1d4ed8; color:#fff; font-size:.72rem; font-weight:700; padding:2px 7px; border-radius:7px; white-space:nowrap;}
.tp-g.sel{border-color:#f59e0b;}
.tp-props{margin-top:12px; padding:12px; border:2px solid #1d4ed8; border-radius:14px; background:#f5f8ff;}
.tp-props h4{margin:0 0 8px;}
.tp-props-group{padding:10px; border-radius:10px; background:#fff; border:1.5px dashed #1d4ed8; margin-bottom:10px;}
.tp-preview-phone{max-width:420px; border:10px solid #1d2a22; border-radius:26px; padding:10px; background:#fff; margin:0 auto;}
.modal-lite{position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px;}
.modal-lite.hidden{display:none;}
.modal-lite-card{background:#fff; border-radius:16px; padding:16px; width:100%; max-width:440px; box-shadow:0 10px 40px rgba(0,0,0,.35);}
.btn.danger{color:#b42318;}
.tp-hint{font-size:.82rem;font-weight:600;background:#fff8e6;border:1.5px solid #f0c24b;border-radius:10px;padding:7px 10px;margin:4px 0 8px;}
/* Update 26: Reservierungen – klare Knöpfe, Bestätigt-Status */
.res-row{flex-wrap:wrap;}
.res-btns{flex-basis:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px;}
.res-btn{border:1.5px solid var(--border,#d9e2da); background:#fff; border-radius:10px; padding:8px 4px; font-size:.78rem; font-weight:700; cursor:pointer; line-height:1.2;}
.res-btn.confirm{background:#1f6d43; color:#fff; border-color:#1f6d43;}
.res-btn.done{background:#e7f2ea; border-color:#9cc9ab;}
.res-btn.del{color:#b42318; border-color:#f1b8b0;}
.res-confirmed,.res-unconfirmed{flex-basis:100%; font-size:.78rem; font-weight:700; margin-top:6px;}
.res-confirmed{color:#1f6d43;} .res-unconfirmed{color:#b45309;}
@media (max-width:420px){.res-btns{grid-template-columns:repeat(2,1fr);}}
/* Update 27: Am Raster ausrichten */
.tp-align-box{margin:8px 0; padding:10px 12px; border-radius:12px; background:#eef6f0; border:1.5px solid #9cc9ab;}
.tp-align-main{display:flex; gap:8px; align-items:center; font-weight:800; font-size:.92rem; cursor:pointer;}
.tp-align-main input{width:20px; height:20px;}
.tp-align-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; font-size:.86rem;}
.tp-align-row select{margin-left:6px; padding:6px 8px; border-radius:8px;}