/* =====================================================================
   Nikolaus am Schützenhaus – Design "Winterliche Dämmerung"
   Dunkle Blaue Stunde, warmes Lampenlicht, Schnee, Lichterketten.
   Bedienflächen (Kasse/KDS/Admin) bleiben ruhig und gut lesbar;
   Schneefall gibt es nur auf Login und Abholdisplay.
   ===================================================================== */
:root {
  --nik-red:#c4262d; --nik-red-dark:#8f1a20;
  --nik-green:#2b6a55;
  --nik-gold:#e6b94d; --lamp:#ffcf80;
  --nik-cream:#f6f1e4;
  --nik-dark:#1c2140;           /* Text auf hellen Flächen */
  --night:#0b1230; --night-2:#141d42; --night-3:#1d2858;
  --snow:#f2f6fc; --snow-2:#dfe7f5; --line:#d5def0;
  --gray:#7c86a3;
  --img-winter:url('/assets/img/schuetzenhaus-winter.jpg'); --img-pos:40% 35%;
}
* { box-sizing:border-box; }
body { font-family:'Segoe UI',system-ui,Arial,sans-serif; margin:0; color:var(--nik-dark);
  background:radial-gradient(ellipse at 50% -15%, #2a3a7c 0%, var(--night-3) 28%, var(--night) 70%) fixed; min-height:100vh; }
a { text-decoration:none; color:inherit; }
.logo { font-family:Georgia,'Times New Roman',serif; font-size:24px; font-weight:800; color:var(--lamp); margin-bottom:6px; letter-spacing:.5px; text-shadow:0 0 18px rgba(255,190,100,.45); }
.logo span { display:block; font-family:'Segoe UI',system-ui,sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--snow); background:rgba(255,255,255,.1); padding:3px 10px; border-radius:20px; margin-top:6px; width:fit-content; margin-inline:auto; }
.event-sub { font-size:12px; color:var(--lamp); margin-bottom:16px; font-weight:700; }
.hint { font-size:11px; color:var(--gray); margin-top:15px; }

/* ---------- Schneefall (nur Login + Display) ---------- */
.login-body::before, .login-body::after, .display-body::before, .display-body::after {
  content:''; position:fixed; left:0; right:0; pointer-events:none; z-index:0; }
.login-body::before, .display-body::before { top:-220px; height:calc(100% + 220px); animation:snowfall-a 13s linear infinite;
  background-size:320px 220px; opacity:.85;
  background-image:radial-gradient(2px 2px at 20px 30px,#fff,transparent),radial-gradient(3px 3px at 90px 120px,rgba(255,255,255,.9),transparent),
    radial-gradient(2px 2px at 160px 60px,#fff,transparent),radial-gradient(1.5px 1.5px at 230px 180px,rgba(255,255,255,.8),transparent),
    radial-gradient(3px 3px at 300px 90px,#fff,transparent); }
.login-body::after, .display-body::after { top:-300px; height:calc(100% + 300px); animation:snowfall-b 24s linear infinite;
  background-size:430px 300px; opacity:.55;
  background-image:radial-gradient(4px 4px at 60px 50px,rgba(255,255,255,.9),transparent),radial-gradient(3px 3px at 200px 200px,#fff,transparent),
    radial-gradient(4px 4px at 340px 120px,rgba(255,255,255,.85),transparent),radial-gradient(2px 2px at 400px 260px,#fff,transparent); }
@keyframes snowfall-a { to { transform:translateY(220px); } }
@keyframes snowfall-b { to { transform:translateY(300px); } }

/* ---------- Login / Startbildschirm ---------- */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; position:relative;
  background:linear-gradient(180deg,rgba(8,12,34,.35),rgba(8,12,34,.8)), var(--img-winter) var(--img-pos)/cover no-repeat fixed; }
.login-box { position:relative; z-index:1; width:360px; max-width:100%; padding:36px 34px; border-radius:20px; text-align:center; color:var(--snow);
  background:rgba(12,19,48,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,214,150,.35); box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 18px 60px rgba(0,0,0,.6), 0 0 60px rgba(255,170,70,.12); }
.login-box h1 { font-size:20px; margin:0 0 18px; font-weight:600; }
.login-box label { display:block; text-align:left; font-size:13px; margin:12px 0 5px; font-weight:600; color:var(--snow-2); }
.login-box input { width:100%; padding:11px 12px; border:1px solid rgba(255,255,255,.22); border-radius:10px; font-size:15px; background:rgba(255,255,255,.08); color:var(--snow); }
.login-box input:focus { outline:none; border-color:var(--lamp); box-shadow:0 0 0 3px rgba(255,207,128,.25); }
.btn-primary { margin-top:22px; width:100%; padding:13px; background:linear-gradient(180deg,#d6323a,var(--nik-red-dark)); color:#fff; border:none; border-radius:10px; font-weight:700; font-size:15px; cursor:pointer; box-shadow:0 4px 18px rgba(196,38,45,.35); }
.btn-primary:hover { filter:brightness(1.12); }
.alert-error { background:#fde3e4; color:#8f1a20; padding:9px 12px; border-radius:10px; margin-bottom:12px; font-size:13px; text-align:left; }
.alert-success { background:#dff3e8; color:#1d5a44; padding:9px 12px; border-radius:10px; margin-bottom:12px; font-size:13px; font-weight:600; }
.startup-spinner { font-size:44px; margin:12px 0; display:inline-block; animation:spin 1.4s linear infinite; }
@keyframes spin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

/* ---------- Topbar mit Lichterkette ---------- */
.topbar { position:sticky; top:0; display:flex; align-items:center; gap:12px; padding:12px 20px; flex-wrap:wrap; color:var(--snow); z-index:100;   /* bleibt beim Scrollen sichtbar */
  background:linear-gradient(90deg,rgba(11,18,48,.95),rgba(11,18,48,.78) 60%,rgba(11,18,48,.92)), var(--img-winter) 40% 38%/cover;
  border-bottom:1px solid rgba(255,214,150,.25); box-shadow:0 6px 24px rgba(0,0,0,.45); }
.topbar::after { content:''; position:absolute; left:0; right:0; bottom:-9px; height:10px; pointer-events:none; z-index:1;
  background-repeat:repeat-x; background-size:144px 10px; filter:drop-shadow(0 0 5px rgba(255,200,120,.9)); animation:twinkle 3.2s ease-in-out infinite alternate;
  background-image:radial-gradient(circle at 12px 5px,#ff6b5e 0 3px,transparent 4px),radial-gradient(circle at 48px 5px,#ffd28a 0 3px,transparent 4px),
    radial-gradient(circle at 84px 5px,#7fe0a4 0 3px,transparent 4px),radial-gradient(circle at 120px 5px,#ffb454 0 3px,transparent 4px); }
@keyframes twinkle { from { opacity:.65; } to { opacity:1; } }
.topbar .logo { font-size:19px; margin-bottom:0; display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.topbar .logo span { font-size:13px; font-weight:600; letter-spacing:.5px; text-transform:none; background:none; padding:0; margin:0; width:auto; color:var(--snow-2); }
.event-badge { background:rgba(255,207,128,.12); border:1px solid rgba(255,207,128,.5); color:var(--lamp); padding:6px 14px; border-radius:20px; font-size:12px; font-weight:700; white-space:nowrap; }
.topbar nav { display:flex; align-items:center; margin-left:auto; }
.topbar nav a { margin-left:4px; font-weight:700; padding:9px 12px; border-radius:10px; color:var(--snow-2); font-size:14px; transition:background .15s; }
.topbar nav a:hover { background:rgba(255,255,255,.1); }
.topbar nav a.active { background:var(--nik-red); color:#fff; box-shadow:0 0 14px rgba(196,38,45,.5); }
.topbar .user { font-size:13px; opacity:.85; white-space:nowrap; margin-left:8px; }
/* Verbindungsanzeige: unsichtbar, solange alles läuft; erscheint auffällig oben mittig bei Unterbrechung */
.ws-status { position:fixed; top:74px; left:50%; right:auto; bottom:auto; transform:translateX(-50%); z-index:1200; display:flex; align-items:center; gap:8px; max-width:92vw;
  font-size:14px; font-weight:800; padding:10px 18px; border-radius:24px; background:rgba(166,28,33,.96); color:#fff; box-shadow:0 6px 24px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.35); animation:wsblink 1.6s ease-in-out infinite; }
.ws-status[hidden] { display:none !important; }
.display-body .ws-status { top:14px; }   /* Abholdisplay hat keine Kopfzeile */
@keyframes wsblink { 50% { box-shadow:0 6px 24px rgba(0,0,0,.5), 0 0 0 5px rgba(255,255,255,.12); } }
.ws-dot { display:none; width:8px; height:8px; border-radius:50%; background:currentColor; }

/* ---------- helle "Schnee"-Flächen (Text dunkel) ---------- */
.range-filter, .cart-panel, .product-card, .open-order-card, .modal-box, .kds-card, .stat-card, table.admin-table, .form-box, .event-list-item, .pagination a, .pagination span
  { color:var(--nik-dark); }

.range-filter { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--snow); padding:14px 18px; border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,.3); margin-bottom:20px; border-top:3px solid var(--lamp); }
.range-filter label { font-size:13px; font-weight:600; }
.range-filter select, .range-filter input[type=date], .range-filter input[type=text] { padding:8px 12px; border:1px solid var(--line); border-radius:8px; font-size:13px; background:#fff; }
.range-preset { padding:8px 14px; border-radius:20px; background:var(--snow-2); font-weight:600; cursor:pointer; font-size:13px; border:none; color:var(--nik-dark); }
.range-preset.active { background:var(--nik-red); color:#fff; }
.range-apply { padding:8px 18px; background:var(--night-3); color:var(--snow); border:none; border-radius:8px; font-weight:700; cursor:pointer; font-size:13px; }

/* ---------- Kasse ---------- */
.kasse-wrap { display:flex; height:calc(100vh - 64px); height:calc(100dvh - 64px); }
.menu-panel { flex:3; padding:22px 28px; overflow-y:auto; color:var(--snow); }
.cart-panel { flex:1.4; background:var(--snow); border-left:3px solid var(--lamp); padding:24px; display:flex; flex-direction:column; box-shadow:-10px 0 40px rgba(0,0,0,.35); }
.cart-panel h2 { margin-top:0; }
.cat-tabs, .view-toggle { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.cat-tab { padding:9px 18px; border-radius:20px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12); color:var(--snow-2); font-weight:700; cursor:pointer; font-size:14px; }
.cat-tab:hover { background:rgba(255,255,255,.16); }
.cat-tab.active { background:var(--nik-red); border-color:var(--nik-red); color:#fff; box-shadow:0 0 14px rgba(196,38,45,.45); }
.view-toggle button { padding:10px 18px; border-radius:12px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12); color:var(--snow-2); font-weight:700; cursor:pointer; font-size:14px; display:flex; align-items:center; gap:6px; }
.view-toggle button.active { background:var(--lamp); border-color:var(--lamp); color:var(--night); box-shadow:0 0 16px rgba(255,200,120,.4); }
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:18px; }
.product-card { background:var(--snow); border-radius:16px; padding:18px 14px; text-align:center; box-shadow:0 6px 16px rgba(0,0,0,.35); cursor:pointer; border:2px solid transparent; transition:transform .12s, box-shadow .12s, border-color .12s; user-select:none; }
.product-card:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 24px rgba(255,200,120,.35); border-color:var(--lamp); }
.product-card:active { transform:scale(.97); }
.product-card .img { font-size:42px; margin-bottom:10px; }
.product-card .name { font-weight:700; font-size:15px; margin-bottom:6px; }
.product-card .price { color:var(--nik-red); font-weight:800; font-size:15px; }
.cart-items { flex:1; overflow-y:auto; }
.cart-item { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; }
.cart-item .qty-btn, .modal-item-row .qty-btn { background:var(--snow-2); border:none; width:26px; height:26px; border-radius:50%; cursor:pointer; font-weight:700; color:var(--nik-dark); }
.cart-item .qty-btn:hover, .modal-item-row .qty-btn:hover { background:var(--lamp); }
.cart-total { font-size:clamp(18px,2vw,24px); white-space:nowrap; font-weight:800; text-align:right; margin:16px 0; color:var(--nik-red); }
.btn-checkout { background:linear-gradient(180deg,#ffd98f,var(--nik-gold)); color:var(--night); border:none; padding:18px; border-radius:14px; font-weight:800; font-size:17px; cursor:pointer; box-shadow:0 6px 22px rgba(230,185,77,.4); }
.btn-checkout:hover { filter:brightness(1.07); }
.open-orders-list { display:flex; flex-direction:column; gap:10px; }
.open-order-card { background:var(--snow); border-radius:12px; padding:14px; box-shadow:0 4px 14px rgba(0,0,0,.3); border-left:5px solid var(--nik-red); }
.open-order-card.in_zubereitung { border-left-color:var(--nik-gold); }
.open-order-card.fertig { border-left-color:#3aa57f; }
.open-order-card .row1 { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.open-order-card .order-num { font-weight:800; font-size:16px; }
.open-order-card .status-tag { font-size:11px; padding:3px 10px; border-radius:12px; font-weight:700; background:var(--snow-2); }
.open-order-card .items-preview { font-size:13px; color:#5b6485; margin-bottom:8px; }
.open-order-card .actions-row { display:flex; gap:8px; }
.open-order-card .actions-row button { flex:1; padding:8px; border:none; border-radius:8px; font-weight:700; cursor:pointer; font-size:12px; }
.btn-oo-edit { background:var(--nik-gold); color:var(--night); }
.btn-oo-delete { background:var(--nik-red); color:#fff; }

/* ---------- Modals ---------- */
.modal-overlay { position:fixed; inset:0; background:rgba(5,8,24,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:2000; }
.modal-box { background:var(--snow); border-radius:20px; padding:40px; max-width:460px; width:90%; text-align:center; border:2px solid var(--lamp); box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 60px rgba(255,190,100,.22); }
.modal-box.wide { max-width:560px; text-align:left; }
.order-success-icon { font-size:52px; margin-bottom:8px; }
.order-success-num { font-size:76px; font-weight:900; color:var(--nik-red); margin:18px 0; letter-spacing:2px; line-height:1; font-family:Georgia,serif; }
.order-success-sub { color:#5b6485; font-size:15px; margin-bottom:22px; font-weight:600; }
.modal-close-btn { background:var(--night-3); color:var(--snow); border:none; padding:14px 34px; border-radius:12px; font-weight:800; cursor:pointer; font-size:15px; }
.modal-box h3 { margin-top:0; }
.modal-item-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); }
.modal-actions { display:flex; gap:10px; margin-top:20px; }
.modal-actions button { flex:1; padding:12px; border:none; border-radius:10px; font-weight:700; cursor:pointer; }
.btn-modal-save { background:var(--nik-gold); color:var(--night); }
.btn-modal-cancel { background:var(--snow-2); color:var(--nik-dark); }

/* ---------- Küche (KDS) ---------- */
.kds-board { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; padding:24px 20px; color:var(--snow); }
.kds-card { background:var(--snow); border-radius:16px; padding:16px; border-top:6px solid var(--nik-red); box-shadow:0 8px 22px rgba(0,0,0,.4); transition:box-shadow .3s; }
.kds-card.in_zubereitung { border-top-color:var(--nik-gold); }
.kds-card.fertig { border-top-color:#3aa57f; }
.kds-card.flash { box-shadow:0 0 0 4px rgba(255,207,128,.75), 0 0 40px rgba(255,190,100,.5); }
.kds-card .order-num { font-size:24px; font-weight:800; font-family:Georgia,serif; }
.kds-card .time { font-size:12px; color:#5b6485; }
.kds-card .age { font-size:15px; font-weight:800; margin:3px 0 2px; color:#3a4470; font-variant-numeric:tabular-nums; }
.kds-card .age .age-label { font-size:12px; font-weight:600; color:#5b6485; }
.kds-card .age.warn { color:#b26a00; }
.kds-card .age.late { color:var(--nik-red); }
.kds-card.late { box-shadow:0 0 0 3px rgba(196,38,45,.6), 0 8px 22px rgba(0,0,0,.4); }
.kds-card .status-line { font-size:12px; font-weight:700; margin:6px 0 4px; }
.kds-card .progress-label { font-size:12px; color:#5b6485; margin:4px 0; }
.item-checklist { list-style:none; padding:0; margin:8px 0; font-size:14px; }
.item-row { display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:10px; margin-bottom:6px; background:#e9eef8; cursor:pointer; user-select:none; }
.item-row:hover { background:#dde6f6; }
.item-row.done { background:#d9f0e5; text-decoration:line-through; color:#6b7590; }
.item-checkbox { width:24px; height:24px; border-radius:7px; border:2px solid var(--nik-gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#fff; font-weight:900; font-size:14px; }
.item-row.done .item-checkbox { background:#3aa57f; border-color:#3aa57f; color:#fff; }
.item-qty { font-weight:700; color:var(--nik-red); }
.kds-card .actions button { width:100%; padding:12px; border:none; border-radius:10px; font-weight:700; cursor:pointer; margin-top:6px; font-size:14px; }
.btn-start { background:var(--nik-gold); color:var(--night); }
.btn-ready { background:#2f8f6d; color:#fff; }
.status-pill { display:inline-block; padding:3px 10px; border-radius:10px; font-size:11px; font-weight:800; }
.status-pill.neu { background:#fde3e4; color:#8f1a20; }
.status-pill.in_zubereitung { background:#fbf0cf; color:#7a5d10; }
.status-pill.fertig { background:#d9f0e5; color:#1d5a44; }
.status-pill.abgeholt { background:#dfe7f8; color:#2a4a8a; }
.status-pill.storniert { background:#efdede; color:#8a2a2a; }

/* ---------- Abholdisplay (Schützenhaus im Schnee) ---------- */
.display-body { position:relative; min-height:100vh; height:100vh; padding:30px; overflow:hidden; color:var(--snow);
  background:linear-gradient(180deg,rgba(6,10,30,.25),rgba(6,10,30,.7) 85%), var(--img-winter) var(--img-pos)/cover no-repeat; }
.display-header, .display-cols { position:relative; z-index:1; }
.display-header { text-align:center; margin-bottom:30px; }
.display-header .logo { font-size:clamp(26px,3.6vw,76px); font-weight:900; text-shadow:0 0 30px rgba(255,190,100,.6); }
.display-header .event-sub { color:var(--snow-2); font-size:15px; margin-top:4px; }
.display-cols { display:grid; grid-template-columns:1fr 1.25fr 1.25fr; gap:28px; height:78%; }
.display-col { background:rgba(8,13,36,.42); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:18px 22px; overflow:hidden; }
.display-col h2 { text-align:center; text-transform:uppercase; letter-spacing:2px; margin:0 0 12px; padding-bottom:10px; border-bottom:2px solid rgba(255,255,255,.18); }
.display-col.queued h2 { color:var(--snow-2); }
.display-col.queued { opacity:.85; }
.display-col.prep h2 { color:var(--lamp); }
.display-col.ready h2 { color:#7fe0a4; }
.order-badge { display:inline-block; font-size:clamp(30px,3.6vw,88px); font-weight:900; margin:.2em; padding:.4em .6em; border-radius:18px; font-family:Georgia,serif; background:rgba(255,207,128,.1); border:2px solid rgba(255,207,128,.45); box-shadow:0 0 22px rgba(255,190,100,.18); transition:transform .3s; }
.order-badge.queued { background:rgba(255,255,255,.07); border:2px dashed rgba(255,255,255,.35); box-shadow:none; font-size:clamp(24px,2.9vw,70px); color:var(--snow-2); }
.order-badge.ready { background:rgba(43,150,108,.9); border-color:#7fe0a4; box-shadow:0 0 34px rgba(127,224,164,.55); animation:pulse 1.8s infinite; }
.order-badge.flash { transform:scale(1.15); }
@keyframes pulse { 0%{transform:scale(1);} 50%{transform:scale(1.05);} 100%{transform:scale(1);} }
.badges-wrap { display:flex; flex-wrap:wrap; justify-content:center; }

/* ---------- Admin ---------- */
.admin-wrap { display:flex; }
.sidebar { width:235px; flex-shrink:0; background:rgba(8,13,36,.7); border-right:1px solid rgba(255,255,255,.08); min-height:calc(100vh - 64px); padding:22px 0; }
.sidebar a { display:block; padding:12px 18px; white-space:nowrap; color:var(--snow-2); font-weight:600; border-left:3px solid transparent; }
.sidebar a:hover { background:rgba(255,255,255,.07); }
.sidebar a.active { background:rgba(196,38,45,.85); color:#fff; border-left-color:var(--lamp); }
.admin-content { flex:1; padding:26px 28px; min-width:0; color:var(--snow-2); }
.admin-content h1 { color:var(--snow); font-family:Georgia,serif; margin-top:0; }
.admin-content h3 { color:var(--snow); }
.admin-content > p[style*="8a8a8a"], .menu-panel p[style*="8a8a8a"] { color:#a9b3d1 !important; }
.admin-content a[style*="--nik-green"] { color:var(--lamp) !important; }
.stat-cards { display:flex; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.stat-card { background:var(--snow); padding:20px; border-radius:14px; flex:1; min-width:160px; box-shadow:0 8px 22px rgba(0,0,0,.35); border-top:3px solid var(--lamp); }
.stat-card .val { font-size:28px; font-weight:800; color:var(--nik-red); font-family:Georgia,serif; }
.stat-card .label { font-size:13px; color:#5b6485; }
table.admin-table { width:100%; background:var(--snow); border-collapse:collapse; border-radius:14px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.35); }
table.admin-table th, table.admin-table td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:14px; }
table.admin-table th { background:var(--night-3); color:var(--snow); font-weight:600; }
.btn-small { padding:6px 12px; border-radius:8px; border:none; font-weight:600; cursor:pointer; font-size:12px; }
.btn-edit { background:var(--nik-gold); color:var(--night); }
.btn-delete { background:var(--nik-red); color:#fff; }
.btn-restore { background:#2f8f6d; color:#fff; }
.form-box { background:var(--snow); padding:24px; border-radius:14px; max-width:400px; box-shadow:0 8px 22px rgba(0,0,0,.35); border-top:3px solid var(--lamp); flex:0 1 360px; min-width:280px; }
.form-box h3 { color:var(--nik-dark); margin-top:0; }
.form-box label { display:block; font-weight:600; margin:10px 0 4px; font-size:13px; }
.form-box input, .form-box select, .form-box textarea { width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--nik-dark); font-family:inherit; }
.event-list-item { display:flex; align-items:center; justify-content:space-between; background:var(--snow); padding:14px 16px; border-radius:12px; margin-bottom:10px; box-shadow:0 4px 14px rgba(0,0,0,.3); border-left:4px solid var(--nik-gold); }
.event-list-item.is-active { border-left-color:#3aa57f; box-shadow:0 4px 14px rgba(0,0,0,.3), 0 0 20px rgba(58,165,127,.25); }
.event-badge-active { background:#2f8f6d; color:#fff; font-size:11px; padding:3px 10px; border-radius:10px; font-weight:700; margin-left:8px; }
.report-row-details { font-size:12px; color:#5b6485; }
.pagination { display:flex; gap:8px; margin-top:16px; align-items:center; flex-wrap:wrap; }
.pagination a, .pagination span { padding:8px 14px; border-radius:10px; background:var(--snow); font-weight:600; font-size:13px; }
.pagination a.active, .pagination span.active { background:var(--nik-red); color:#fff; }

tr.row-inactive td { opacity:.55; }
tr.row-inactive td:last-child { opacity:1; }
.btn-restore { background:#2f8f6d; color:#fff; }

.bar { height:12px; border-radius:6px; background:linear-gradient(90deg,var(--nik-gold),var(--nik-red)); }

/* ---------- Zustände / Barrierefreiheit ---------- */
button:disabled, .btn-checkout:disabled { opacity:.55; cursor:not-allowed; }
:focus-visible { outline:3px solid var(--lamp); outline-offset:2px; }
/* ---------- Responsive ---------- */
@media (max-width:1500px) {
  .topbar .user { display:none; }
  .topbar .logo span { display:none; }
  .topbar { gap:8px; padding:10px 14px; }
  .topbar .logo { font-size:18px; }
  .topbar nav a { padding:8px 9px; font-size:13px; margin-left:2px; }
  .event-badge { max-width:240px; overflow:hidden; text-overflow:ellipsis; }
}
@media (max-width:1000px) { .event-badge { max-width:130px; } .topbar nav a { padding:8px 6px; } }
@media (max-width:1100px) {
  .topbar .logo span { display:none; } .event-badge { font-size:11px; padding:5px 10px; }
  table.admin-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.admin-table th, table.admin-table td { white-space:nowrap; }
}

/* Tablet hoch / kleine Laptops */
@media (max-width:900px) {
  :root { --img-pos:30% 30%; }
  .topbar { padding:10px 14px; gap:8px 10px; }
  .topbar nav { width:100%; margin-left:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .topbar nav::-webkit-scrollbar { display:none; }
  .topbar nav a { margin:0 4px 0 0; padding:9px 14px; white-space:nowrap; }
  .ws-status { top:100px; font-size:12px; padding:7px 12px; }

  /* Kasse: Speisekarte oben, Warenkorb als fester Bereich am unteren Rand */
  .kasse-wrap { flex-direction:column; height:auto; min-height:calc(100dvh - 64px); }
  .menu-panel { flex:1 0 auto; overflow:visible; padding:16px 14px 24px; }
  .cart-panel { flex:none; position:sticky; bottom:0; max-height:55dvh; padding:14px 16px; border-left:none; border-top:3px solid var(--lamp); border-radius:18px 18px 0 0; box-shadow:0 -10px 30px rgba(0,0,0,.45); z-index:20; }
  .cart-panel h2 { font-size:18px; margin:0 0 6px; }
  .cart-items { flex:0 1 auto; max-height:22dvh; min-height:0; }
  .cart-total { font-size:22px; margin:8px 0; }
  .btn-checkout { padding:15px; }
  .product-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }

  .admin-wrap { flex-direction:column; }
  .sidebar { width:100%; min-height:0; display:flex; gap:4px; padding:8px; overflow-x:auto; border-right:none; border-bottom:1px solid rgba(255,255,255,.08); }
  .sidebar a { padding:9px 14px; border-left:none; border-radius:10px; flex-shrink:0; }
  .admin-content { padding:18px 14px; }

  .display-body { height:auto; min-height:100vh; overflow-y:auto; padding:18px; }
  .display-cols { grid-template-columns:1fr; height:auto; gap:18px; }
  .display-header { margin-bottom:16px; }
}

/* Handy */
@media (max-width:600px) {
  .login-body { background:linear-gradient(180deg,rgba(8,12,34,.15),rgba(8,12,34,.72)), var(--img-winter) var(--img-pos)/cover no-repeat fixed; }
  .cart-panel { padding:10px 12px; max-height:none; }
  .cart-panel h2 { display:none; }
  .cart-items { max-height:15dvh; }
  .cart-item { padding:5px 0; font-size:13px; }
  .cart-total { font-size:18px; margin:4px 0 6px; }
  .btn-checkout { padding:12px; font-size:16px; }
  .admin-content > div[style*="display:flex"] { flex-direction:column !important; flex-wrap:nowrap !important; }
  .login-box { padding:28px 22px; }
  .modal-box { padding:24px 18px; }
  .order-success-num { font-size:60px; }
  .kds-board { padding:14px 12px; gap:12px; grid-template-columns:1fr; }
  .stat-card { min-width:calc(50% - 8px); padding:14px; }
  .stat-card .val { font-size:22px; }
  .range-filter { padding:12px; gap:8px; }
  .range-filter input[type=date], .range-filter input[type=text], .range-filter select { flex:1 1 130px; min-width:0; }
  .admin-content [style*="min-width:400px"], .admin-content [style*="min-width:300px"] { min-width:0 !important; }
  .form-box { min-width:0; max-width:none; flex:0 0 auto; width:100%; }
  table.admin-table th, table.admin-table td { padding:10px 10px; }
  .event-list-item { flex-direction:column; align-items:flex-start; gap:10px; }
  .topbar .logo { font-size:17px; }
}

/* Touch-Bedienung: größere Ziele */
@media (pointer:coarse) {
  .cart-item .qty-btn, .modal-item-row .qty-btn { width:38px; height:38px; font-size:18px; }
  .item-row { padding:13px 12px; }
  .item-checkbox { width:28px; height:28px; }
  .btn-small { padding:9px 14px; font-size:13px; }
  .cat-tab, .view-toggle button { padding:11px 18px; }
}

/* Kleinere Bilddatei für schmale Bildschirme */
@media (max-width:700px) { :root { --img-winter:url('/assets/img/schuetzenhaus-winter-sm.jpg'); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* ---------- Speisen: Emoji oder Foto ---------- */
.product-emoji { position:relative; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.product-emoji .topping { position:absolute; right:-.38em; bottom:-.12em; font-size:.52em; line-height:1; padding:.1em; border-radius:50%; background:rgba(255,255,255,.95); box-shadow:0 1px 4px rgba(0,0,0,.35); }
.thumb .product-emoji .topping { right:-3px; bottom:-3px; font-size:.55em; }
.stock-name .topping { position:static; }
.product-photo { display:block; object-fit:cover; border-radius:10px; }
.product-card { position:relative; }
.product-card .img { display:flex; align-items:center; justify-content:center; height:128px; margin-bottom:6px; font-size:56px; }   /* einheitliche Bildfläche */
/* object-fit: contain -> das Bild wird IMMER vollständig angezeigt (nie angeschnitten), egal welches Seitenverhältnis */
.product-card .img .product-photo { width:100%; max-width:128px; height:128px; object-fit:contain; object-position:center; border-radius:0; }
.thumb { display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; vertical-align:middle; overflow:hidden; border-radius:8px; font-size:22px; margin-right:6px; background:var(--snow-2); }
.thumb .product-photo { width:36px; height:36px; border-radius:8px; object-fit:contain; }
.admin-photo { width:110px; height:85px; border-radius:8px; vertical-align:middle; object-fit:contain; background:var(--snow-2); }

/* ---------- Ausverkauft ---------- */
.soldout-badge { display:none; position:absolute; top:8px; right:8px; z-index:2; background:var(--nik-red); color:#fff; font-size:11px; font-weight:800; padding:3px 9px; border-radius:10px; letter-spacing:.3px; }
.product-card.sold-out { opacity:.55; filter:grayscale(.85); cursor:not-allowed; }
.product-card.sold-out:hover { transform:none; border-color:transparent; box-shadow:0 6px 16px rgba(0,0,0,.35); }
.product-card.sold-out .soldout-badge { display:block; }
.btn-soldout { background:#8f1a20; color:#fff; }

/* ---------- Bestellhinweis ---------- */
.note-input { width:100%; padding:10px 12px; margin:8px 0 2px; border:1px solid var(--line); border-radius:10px; font-size:14px; background:#fff; color:var(--nik-dark); font-family:inherit; }
.note-input:focus { outline:none; border-color:var(--nik-gold); box-shadow:0 0 0 3px rgba(230,185,77,.3); }
.oo-note { font-size:12px; font-weight:600; color:#6b4f00; background:#fbf0cf; padding:5px 9px; border-radius:8px; margin-bottom:8px; }
.kds-note { background:#fff3c4; border-left:5px solid var(--nik-gold); padding:9px 11px; border-radius:8px; font-weight:800; margin:8px 0 4px; color:#5a4300; font-size:15px; }

/* ---------- KDS-Werkzeuge ---------- */
.kds-tools { display:flex; gap:10px; padding:14px 20px 0; flex-wrap:wrap; }
.tool-btn { padding:10px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.09); color:var(--snow-2); font-weight:700; font-size:14px; cursor:pointer; }
.tool-btn:hover { background:rgba(255,255,255,.16); }
.tool-btn.on { background:var(--lamp); border-color:var(--lamp); color:var(--night); }
.tool-btn.warn { background:rgba(196,38,45,.85); border-color:var(--nik-red); color:#fff; }
.stock-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.stock-row.out .stock-name { text-decoration:line-through; color:#8a8a8a; }
.stock-name { font-weight:700; }

/* ---------- Display: Wartezeit ---------- */
.wait-info { margin:8px 0 0; font-size:clamp(15px,1.7vw,36px); font-weight:800; color:var(--lamp); text-shadow:0 0 18px rgba(255,190,100,.5); }

/* ---------- Zustände / Barrierefreiheit ---------- */
@media (max-width:600px) {
  .note-input { padding:7px 10px; font-size:13px; margin:4px 0 0; }
}

/* ---------- KDS: Stationsfilter ---------- */
.station-chips { display:contents; }
.tool-btn.station.on { background:var(--nik-red); border-color:var(--nik-red); color:#fff; box-shadow:0 0 14px rgba(196,38,45,.45); }

/* ---------- Nummernzettel / Reihenfolge ---------- */
.auto-slip { display:flex; align-items:center; gap:8px; font-size:12px; color:#5b6485; margin:6px 0 0; cursor:pointer; }
.auto-slip input { width:auto; }
.modal-close-btn.slip { background:var(--nik-gold); color:var(--night); }
.btn-move { background:var(--snow-2); color:var(--nik-dark); padding:6px 9px; margin-right:2px; }

/* ---------- Abholdisplay: Ansage + Bedienknöpfe ---------- */
.announce { position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center; background:rgba(5,8,24,.78); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .35s; }
.announce.show { opacity:1; }
.announce-box { text-align:center; padding:4vh 6vw; border-radius:32px; background:rgba(14,60,46,.92); border:3px solid #7fe0a4; box-shadow:0 0 90px rgba(127,224,164,.55); animation:pulse 1.6s infinite; }
.announce-icon { font-size:clamp(40px,7vw,120px); }
.announce-text { font-size:clamp(22px,3.6vw,72px); font-weight:800; color:#d9f5e6; }
.announce-num { font-family:Georgia,serif; font-size:clamp(90px,22vw,420px); font-weight:900; line-height:1; color:#fff; text-shadow:0 0 50px rgba(127,224,164,.8); }
.display-tools { position:fixed; right:14px; bottom:14px; z-index:950; display:flex; gap:8px; opacity:.35; transition:opacity .2s; }
.display-tools:hover, .display-tools:focus-within { opacity:1; }

/* ---------- Druckansicht (Statistik, Berichte) ---------- */
@media print {
  body { background:#fff !important; color:#000; }
  .topbar, .sidebar, .range-filter, .ws-status, .display-tools, .btn-small, .pagination, .kds-tools { display:none !important; }
  .topbar::after { display:none; }
  .admin-wrap { display:block; }
  .admin-content { padding:0; color:#000; }
  .admin-content h1, .admin-content h3 { color:#000; }
  .admin-content a { color:#000 !important; text-decoration:none; }
  .stat-card, table.admin-table { box-shadow:none; border:1px solid #999; break-inside:avoid; }
  table.admin-table th { background:#eee; color:#000; }
  table.admin-table { display:table !important; }
  .bar { background:#555; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ---------- Vollbild-Knopf (Kopfzeile) ---------- */
.fs-btn { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:var(--snow-2); border-radius:10px; padding:8px 12px; font-weight:700; font-size:13px; cursor:pointer; margin-left:6px; white-space:nowrap; }
.fs-btn:hover { background:rgba(255,255,255,.2); }
.fs-btn[hidden] { display:none; }
@media (max-width:1500px) { .fs-label { display:none; } }
@media print { .fs-btn { display:none !important; } }

/* ---------- KDS: Beschreibung der Speise ---------- */
.item-text { display:flex; flex-direction:column; min-width:0; }
.item-name { font-weight:700; }
.item-desc { font-size:12px; font-weight:500; color:#5b6485; line-height:1.3; margin-top:2px; text-decoration:none; }
.item-row.done .item-desc { text-decoration:line-through; }
.form-box label.check { display:flex; align-items:flex-start; gap:8px; font-weight:600; margin:8px 0 4px; cursor:pointer; }
.form-box label.check input { width:auto; margin-top:3px; }

/* ---------- Allgemein: hidden-Attribut immer respektieren ---------- */
[hidden] { display:none !important; }

/* ---------- Bestellpause ---------- */
.display-pause { margin:10px auto 0; max-width:min(90vw,1100px); font-size:clamp(18px,2.4vw,46px); font-weight:900; color:#fff; background:linear-gradient(90deg,#8f1a20,#c4262d); padding:.35em 1em; border-radius:18px; box-shadow:0 0 40px rgba(196,38,45,.6); animation:wsblink 2s ease-in-out infinite; }
.pause-banner { background:linear-gradient(90deg,#8f1a20,#c4262d); color:#fff; font-weight:800; padding:12px 16px; border-radius:12px; margin-bottom:14px; box-shadow:0 4px 18px rgba(196,38,45,.45); animation:wsblink 2s ease-in-out infinite; }

/* ---------- Bestand ---------- */
.stock-badge { position:absolute; top:8px; left:8px; z-index:2; background:var(--nik-gold); color:var(--night); font-size:11px; font-weight:800; padding:3px 9px; border-radius:10px; }
.stock-low { color:#b26a00; font-weight:800; }
.stock-out { color:var(--nik-red); font-weight:800; }

/* ---------- Schnellhinweise ---------- */
.quick-notes { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px; }
.chip { padding:7px 12px; border-radius:16px; border:1px solid var(--line); background:var(--snow-2); color:var(--nik-dark); font-weight:700; font-size:13px; cursor:pointer; }
.chip.on { background:var(--nik-gold); border-color:var(--nik-gold); color:var(--night); box-shadow:0 0 10px rgba(230,185,77,.5); }

/* ---------- QR-Code im Bestätigungsfenster ---------- */
.success-qr { margin:6px auto 14px; }
.success-qr svg { border-radius:10px; border:1px solid var(--line); }
.qr-hint { font-size:12px; color:#5b6485; font-weight:600; margin-top:4px; }

/* ---------- KDS: Stornieren / Zurücknehmen ---------- */
.kds-card .actions button.btn-cancel { background:transparent; color:#8f1a20; border:1px solid #d9a3a6; font-weight:700; margin-top:8px; }
.kds-card .actions button.btn-cancel:hover { background:#fde3e4; }
.btn-danger { background:var(--nik-red) !important; color:#fff !important; }
.reason-list { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 4px; }
.reason-list .chip { padding:10px 14px; font-size:14px; }

/* ---------- Öffentliche Statusseite (QR-Code) ---------- */
.status-box { width:420px; }
.st-number { font-family:Georgia,serif; font-size:84px; font-weight:900; line-height:1; margin:10px 0 6px; color:#fff; }
.st-title { font-size:22px; font-weight:800; margin-bottom:6px; }
.st-sub { font-size:15px; color:var(--snow-2); min-height:22px; margin-bottom:14px; }
.st-steps { list-style:none; display:flex; gap:6px; padding:0; margin:0 0 14px; }
.st-steps li { flex:1; padding:9px 4px; border-radius:10px; background:rgba(255,255,255,.08); color:#a9b3d1; font-size:12px; font-weight:700; }
.st-steps li.done { background:rgba(43,106,85,.7); color:#d9f5e6; }
.st-steps li.now { background:var(--nik-gold); color:var(--night); box-shadow:0 0 16px rgba(230,185,77,.55); }
.st-items { list-style:none; padding:0; margin:0 0 6px; text-align:left; font-size:14px; color:var(--snow-2); }
.st-items li { padding:6px 4px; border-bottom:1px dotted rgba(255,255,255,.2); }
.status-box.ready { border-color:#7fe0a4; box-shadow:0 0 70px rgba(127,224,164,.55); }
.status-box.ready .st-title { color:#7fe0a4; font-size:30px; }

/* ---------- PIN-Schnellanmeldung ---------- */
.pin-area { margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.18); }
.pin-title { font-weight:800; color:var(--lamp); margin-bottom:10px; }
.pin-users { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.pin-user { padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:var(--snow); font-weight:700; font-size:15px; cursor:pointer; }
.pin-user:hover { background:rgba(255,255,255,.2); }
.pin-who { font-weight:800; font-size:18px; margin-bottom:6px; }
.pin-dots { letter-spacing:6px; font-size:26px; min-height:38px; color:var(--lamp); }
.pin-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:260px; margin:8px auto; }
.pin-pad button { padding:16px 0; font-size:22px; font-weight:800; border-radius:14px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#fff; cursor:pointer; }
.pin-pad button:active { background:var(--lamp); color:var(--night); }
.pin-back { background:none; border:none; color:var(--snow-2); text-decoration:underline; cursor:pointer; margin-top:4px; }

/* ---------- Auto-Logout-Hinweis ---------- */
.idle-warn { position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center; text-align:center; background:rgba(5,8,24,.82); color:#fff; }
.idle-title { font-size:26px; font-weight:900; }
.idle-sub { font-size:18px; margin-top:8px; color:var(--lamp); }

/* ---------- Admin: Bestandsfeld ---------- */
.stock-form { display:inline-flex; gap:4px; align-items:center; }
.stock-input { width:72px; padding:5px 6px; border:1px solid var(--line); border-radius:8px; }

/* ---------- Admin: Standardgrafik-Galerie ---------- */
.gfx-picker { margin:10px 0 6px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:#fff; }
.gfx-picker summary { cursor:pointer; font-weight:700; font-size:13px; }
.gfx-reset { display:flex; align-items:center; gap:10px; margin:10px 0 4px; padding:8px; border-radius:10px; background:#e8f6ee; }
.gfx-reset img { width:56px; height:56px; object-fit:contain; flex-shrink:0; }
.gfx-reset small { display:block; color:#4a5a6a; margin-top:4px; }
.gfx-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; margin-top:10px; }
.gfx-item { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 4px; border:2px solid var(--line); border-radius:10px; cursor:pointer; font-size:11px; font-weight:600; text-align:center; margin:0 !important; }
.gfx-item img { width:64px; height:64px; object-fit:contain; }
.gfx-item input { position:absolute; opacity:0; width:0; height:0; }
.gfx-item:has(input:checked) { border-color:var(--nik-red); background:#fde8e9; }
.gfx-item:hover { border-color:var(--nik-gold); }