/* styles.css – Design einheitlich; Inhalte je Kategorie per JS gesteuert */
:root{
  --logo-bg:#1f1f1f;
  --bg:#ffffff;
  --card:#f8f8f8;
  --text:#0a0a0a;
  --muted:#6b6b6b;
  --line:#e8e8e8;
  --pad:16px;
  --font:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;

  --btn-yellow:#facc15;
  --btn-text:#ffffff;

  --modal-bg:#ffffff;
  --overlay:rgba(0,0,0,.6);
  --chip:#111; --chip-text:#fff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font); -webkit-font-smoothing:antialiased}

/* Logo-Balken */
.logo-header{ text-align:center; padding:var(--pad); background:var(--logo-bg) }
.logo{ max-width:180px; height:auto }

/* Suche */
.top{ position:sticky; top:0; z-index:10; padding:var(--pad); background:var(--bg) }
#q{ width:100%; border:1px solid var(--line); border-radius:6px; padding:10px 12px }

/* Kategorien */
.cats{
  position:sticky; top:84px; display:flex; gap:8px; overflow:auto;
  padding:8px var(--pad); background:var(--bg); border-bottom:1px solid var(--line)
}
.cats button{
  border:1px solid var(--line); background:#fff; color:#0a0a0a;
  padding:6px 10px; font-weight:700; cursor:pointer; border-radius:999px
}
.cats button.active{ background:#000; color:#fff; border-color:#000 }

/* Inhalt */
#main{ padding:var(--pad) }
h2.cat{ margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted) }

/* Produktliste */
.product{ display:block; padding:0 0 18px; margin:0 0 18px; border-bottom:1px solid var(--line) }
.photo{ display:block; width:100%; height:200px !important; object-fit:contain; background:#fff; border:0; border-radius:0 }
.meta{ padding-top:10px }
.name{ margin:0; font-size:18px; font-weight:800 }
.desc{ margin:6px 0 10px; color:var(--muted); line-height:1.4 }
.price-line{ display:flex; justify-content:flex-end; align-items:center; gap:12px }
.config{ border:none; cursor:pointer; font-weight:800; padding:10px 14px; border-radius:6px; background:var(--btn-yellow); color:var(--btn-text) }

/* ===== Modale (Konfigurator / Menü) ===== */
.modal{ width:min(720px, 94vw); border:0; padding:0; background:transparent }
.modal::backdrop{ background:var(--overlay) }
.modal-body{ background:var(--modal-bg); border-radius:12px; overflow:hidden; position:relative; display:grid; gap:16px; padding-bottom:16px }
.modal-photo{ display:block; width:100%; height:200px !important; object-fit:contain; background:#fff; border:0; border-radius:0 }
.modal-title{ padding:0 16px }
.muted{ color:#777 }
.section{ padding:0 16px; display:grid; gap:10px }
.section-title{ font-weight:800; font-size:14px }
.btn-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.chip{ background:var(--chip); color:var(--chip-text); border:none; border-radius:8px; padding:12px; cursor:pointer; font-weight:800 }
.chip.is-active{ outline:3px solid #ffd166 }
.btn-col{ display:grid; gap:8px }
.pill{ width:100%; text-align:center; border:1px solid var(--line); background:#fff; color:#0a0a0a; padding:12px; border-radius:8px; cursor:pointer; font-weight:800 }
.pill.is-active{ outline:2px solid #111 }
.icon-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
.icon{ position:relative; display:grid; gap:6px; justify-items:center; cursor:pointer }
.icon img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; border:1px solid var(--line); transition: filter .15s ease, opacity .15s ease }
.icon.off img{ filter:grayscale(1) brightness(.5) }
.icon span{ font-size:12px; color:#222 }
.icon.off span{ color:#888 }
.toggle-line{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px dashed var(--line) }
.toggle-line input{ width:18px; height:18px }
.modal-actions{ padding:0 16px; display:grid; gap:8px }
.action.long{ width:100%; padding:14px; border-radius:10px; font-weight:900; cursor:pointer; border:none; background:#111; color:#fff }
.action.long.alt{ background:var(--btn-yellow); color:#111 }
.modal-close{ position:absolute; top:8px; right:8px; border:none; background:#000; color:#fff; width:32px; height:32px; border-radius:8px; cursor:pointer; font-weight:900 }

/* Getränke-Karten (Menü) */
.cards-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:0 16px }
@media (min-width:600px){ .cards-grid{ grid-template-columns:repeat(4,1fr) } }
.card{ position:relative; border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; background:#fff; display:grid; gap:8px }
.card-img{ width:100%; aspect-ratio:1/1; object-fit:contain; max-height:200px; display:block }
.card-label{ font-size:13px; color:#222; padding:0 10px 10px 10px }
.card.is-active{ border-color:#111; box-shadow:0 0 0 2px #111 inset }
.card .tick{ position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:999px; background:#111; color:#fff; display:grid; place-items:center; font-size:14px; font-weight:900; opacity:0; transition:opacity .15s ease }
.card.is-active .tick{ opacity:1 }

/* ===================================================================== */
/* =================== Hübscher Checkout-Modal (co-*) =================== */
/* ===================================================================== */

.co-modal{ border:0; padding:0; background:transparent }
.co-modal::backdrop{
  background: radial-gradient(120% 120% at 50% 0%, rgba(0,0,0,.55), rgba(0,0,0,.25) 60%, rgba(0,0,0,.15));
  backdrop-filter: blur(4px);
  animation: coFadeIn .22s ease-out both;
}
@keyframes coFadeIn{ from{opacity:0} to{opacity:1} }

.co{
  width:min(960px, 92vw);
  max-height:82dvh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  border-radius:16px;
  background:var(--modal-bg);
  box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 8px 20px rgba(0,0,0,.12);
  overflow:hidden;
  animation: coPop .16s ease-out both;
}
@keyframes coPop{ from{transform:translateY(4px) scale(.98); opacity:.7} to{transform:none; opacity:1} }

.co__head{ position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:12px; padding:16px 20px; background: linear-gradient(var(--modal-bg), #fcfcfc); border-bottom:1px solid var(--line) }
.co__head h3{ margin:0; letter-spacing:.2px; font:700 18px/1.2 var(--font) }
.co__close{ margin-left:auto; border:0; background:#0000; width:36px; height:36px; border-radius:10px; font-size:20px; line-height:36px; text-align:center; cursor:pointer }
.co__close:hover{ background:#f2f2f2 }

.co__items{ padding:14px 16px; overflow:auto; background: radial-gradient(120% 120% at 0% 0%, rgba(250,250,250,1), rgba(250,250,250,0)), var(--modal-bg); display:grid; gap:12px }
.co-item{ display:grid; grid-template-columns:100px 1fr; gap:14px; padding:10px; border:1px solid var(--line); border-radius:14px; background:#fff; transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease }
.co-item:hover{ border-color:#e7e7e7; box-shadow: 0 8px 18px rgba(0,0,0,.06); transform: translateY(-1px) }
.co-item__img{ width:100px; height:100px; object-fit:cover; border-radius:12px; background:#f6f6f6; border:1px solid #f0f0f0 }
.co-item__line1{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px }
.co-item__name{ font:700 15px/1.2 var(--font); letter-spacing:.2px }
.co-item__price{ font:700 15px/1.2 var(--font); white-space:nowrap; background:#111; color:#fff; border-radius:999px; padding:6px 10px }
.co-item__mods{ margin-top:6px; color:#555; font: 13px/1.5 var(--font) }
.co-item__qty{ margin-top:8px; color:#666; font: 12px/1.4 var(--font) }

.co__foot{ position:sticky; bottom:0; z-index:2; padding:12px 16px; border-top:1px solid var(--line); background: linear-gradient(#fcfcfc, var(--modal-bg)) }
.co__sumrow{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; font: 500 14px/1.2 var(--font) }
.co__sumrow strong{ font-weight:800 }
.co__sumrow--total{ margin-top:8px; padding-top:10px; border-top:1px dashed #e4e4e4; font-size:16px }
.co__actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px }
.co__btn{ padding:11px 14px; border-radius:12px; cursor:pointer; border:1px solid #e3e3e3; background:#fff; transition:transform .05s ease, box-shadow .12s ease, background .12s ease; font-weight:700 }
.co__btn:hover{ background:#f7f7f7; box-shadow:0 4px 12px rgba(0,0,0,.06) }
.co__btn:active{ transform: translateY(1px) }
.co__btn--primary{ background:#111; color:#fff; border-color:#111 }
.co__btn--primary:hover{ box-shadow:0 8px 18px rgba(17,17,17,.25) }

@media (max-width:720px){
  .co{ width: min(96vw, 720px) }
  .co-item{ grid-template-columns:84px 1fr }
  .co-item__img{ width:84px; height:84px }
  .co-item__price{ font-size:14px; padding:5px 9px }
}
.co-empty{ text-align:center; color:#666; padding:28px 12px; border:1px dashed var(--line); border-radius:12px; background:#fff }

/* ===== Zahlung / Bestätigung Zusatz ===== */
.pay__body{ padding:16px }
.pay__row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--line) }
.pay__row:last-child{ border-bottom:0 }
.pay__choice{ display:flex; gap:10px }
.pay__opt{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); padding:8px 12px; border-radius:10px; cursor:pointer }
.pay__opt input{ accent-color:#111 }
.pay__hint{ margin-top:10px; color:#666; font-size:13px }
.confirm__body{ padding:20px; display:grid; gap:12px }
.ticket{ text-align:center; padding:10px 0 }
.ticket__label{ color:#666; font-size:13px }
.ticket__no{ font-weight:900; font-size:48px; line-height:1; letter-spacing:.04em; background:#111; color:#fff; display:inline-block; padding:10px 18px; border-radius:12px }
.confirm__meta{ color:#555; font-size:14px; text-align:center }
.confirm__note{ color:#333; font-size:13px; text-align:center }

/* Motion */
@keyframes coPop{ from{transform:translateY(4px) scale(.98); opacity:.7} to{transform:none; opacity:1} }
@keyframes coFadeIn{ from{opacity:0} to{opacity:1} }