/* Getränkekasse – Oberfläche. Kein Build-Schritt, keine fremden Schriften. */

:root{
  --bg:#f3f5f2; --surface:#ffffff; --surface-2:#f7f9f6;
  --ink:#1a231f; --muted:#5d6a62; --faint:#8b978e;
  --line:#e2e6e0; --line-strong:#d0d6cd;
  --accent:#0f6e5c; --accent-ink:#ffffff; --accent-soft:#e2efeb;
  --ok:#1f7a44; --ok-soft:#e4f3e9;
  --warn:#a86800; --warn-soft:#f7ecd8;
  --bad:#b23b3b; --bad-soft:#f6e2e0;
  --shadow:0 1px 2px rgba(20,35,28,.06),0 8px 24px -12px rgba(20,35,28,.14);
  --radius:10px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#121614; --surface:#1a201d; --surface-2:#161b19;
    --ink:#e7ece9; --muted:#9aa7a0; --faint:#71807a;
    --line:#2a322e; --line-strong:#3a433e;
    --accent:#42b39b; --accent-ink:#08120f; --accent-soft:#1c2f2a;
    --ok:#4cae74; --ok-soft:#182a20; --warn:#d09a3e; --warn-soft:#2c2617;
    --bad:#d97d74; --bad-soft:#2e1e1c;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.55);
  }
}

*{box-sizing:border-box}
html{touch-action:manipulation}                 /* kein Doppeltipp-Zoom am Tablet */
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.5;-webkit-text-size-adjust:100%;
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
button,.ktile,.btn,select,input{-webkit-user-select:none;user-select:none}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search]{user-select:text}
.ktile:active,.btn:active,.step:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.ktile:active,.btn:active,.step:active{transform:none}}

/* Vereinslogo als dezentes Wasserzeichen oben rechts */
body::before{content:"";position:fixed;top:14px;right:18px;z-index:0;pointer-events:none;
  width:min(22vw,120px);height:min(22vw,120px);
  background:url("/img/logo.png") center / contain no-repeat;opacity:.10}
@media (prefers-color-scheme:dark){body::before{opacity:.16}}
#app{position:relative;z-index:1}

h1,h2,h3{margin:0;font-weight:600;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:1.4rem} h2{font-size:1.05rem}
a{color:var(--accent)}
.mono,.num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.num{text-align:right;white-space:nowrap}

/* ---------- Grundgerüst ---------- */
/* min-width:0 ist Pflicht: Ohne das schrumpfen Grid-Elemente nicht unter die
   Breite ihres Inhalts und breite Tabellen schieben die ganze Seite seitwärts. */
.shell{display:grid;grid-template-columns:216px 1fr;min-height:100dvh;min-width:0}
.shell > *{min-width:0}
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;
  gap:2px;padding:calc(16px + env(safe-area-inset-top)) 12px 12px;position:sticky;top:0;height:100dvh}
.brand{display:flex;align-items:center;gap:9px;padding:6px 8px 14px;font-weight:700;letter-spacing:-.02em}
.brand img{width:22px;height:22px}
.side nav{display:flex;flex-direction:column;gap:1px}
.side nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;min-height:44px;border-radius:8px;
  color:var(--ink);text-decoration:none;font-size:.92rem;cursor:pointer}
.side nav a:hover{background:var(--surface-2)}
.side nav a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.side .foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding:10px 8px 2px;
  font-size:.78rem;color:var(--faint)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--line-strong);font-size:.74rem;color:var(--muted);width:max-content}
.badge .led{width:6px;height:6px;border-radius:50%;background:var(--ok)}

.main{padding:24px 28px 64px;max-width:1180px;
  padding-right:calc(28px + env(safe-area-inset-right));
  padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:20px;flex-wrap:wrap}
.pagehead p{margin:4px 0 0;color:var(--muted);font-size:.9rem;max-width:60ch}

/* ---------- Bausteine ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.panel + .panel{margin-top:16px}
.panel h2{margin-bottom:12px}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row.end{align-items:flex-end}
.grow{flex:1}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;min-height:40px;
  border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);
  font-weight:600;font-size:.9rem;cursor:pointer;text-decoration:none;font-family:inherit}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--surface-2);filter:none}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--bad)}
.btn.sm{padding:5px 10px;min-height:32px;font-size:.82rem;border-radius:7px}
.btn.big{padding:14px 28px;min-height:52px;font-size:1.05rem;border-radius:9px}
.btn:disabled{opacity:.5;cursor:not-allowed}

label.f{display:flex;flex-direction:column;gap:5px;font-size:.8rem;color:var(--muted);font-weight:500}
label.f.inline{flex-direction:row;align-items:center;gap:8px}
input,select,textarea{font-family:inherit;font-size:.92rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:7px;padding:9px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}

.tbl{width:100%;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.tbl .scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);
  font-weight:600;background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.wrap,th.wrap{white-space:normal}
tr.flag td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
tr.grp td{background:var(--surface-2);font-weight:700;border-bottom:1px solid var(--line-strong)}

.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:.75rem;font-weight:600;border:1px solid transparent}
.pill.open{background:var(--accent-soft);color:var(--accent)}
.pill.paid{background:var(--ok-soft);color:var(--ok)}
.pill.low{background:var(--bad-soft);color:var(--bad)}
.pill.muted{background:var(--surface-2);color:var(--muted);border-color:var(--line)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.stat .k{font-size:.78rem;color:var(--muted);font-weight:500}
.stat .v{font-family:ui-monospace,monospace;font-size:1.5rem;font-weight:600;margin-top:3px;letter-spacing:-.02em}
.stat .s{font-size:.76rem;color:var(--faint);margin-top:2px}

.muted{color:var(--muted)} .faint{color:var(--faint)}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.hint{font-size:.8rem;color:var(--faint);margin-top:6px}

/* ---------- Getränkeauswahl ---------- */
.kiosk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,220px));gap:12px}
.ktile{display:flex;flex-direction:column;gap:6px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:12px;padding:14px 12px;
  font-size:1.05rem;font-weight:600;color:var(--ink)}
.ktile.drink{justify-content:space-between;min-height:150px}
.ktile.drink.in-cart{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.ktile .top{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left}
.ktile .top b{font-size:1.05rem}
.ktile .sub{font-size:.8rem;font-weight:500;color:var(--muted)}
.ktile.out{opacity:.55}
.adds{display:flex;align-items:center;gap:8px}
.step{width:46px;height:46px;flex:0 0 auto;border-radius:11px;border:1px solid var(--accent);
  background:var(--accent-soft);color:var(--accent);font-size:1.5rem;font-weight:700;line-height:1;
  cursor:pointer;display:grid;place-items:center;font-family:inherit}
.step.add{background:var(--accent);color:var(--accent-ink)}
.step:disabled{opacity:.35;cursor:not-allowed}
.stepn{flex:1;text-align:center;font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums}

/* Warenkorb übersteigt den Bestand: warnen, nie sperren */
.ktile.drink.short{opacity:1;border-color:var(--warn);box-shadow:0 0 0 1px var(--warn) inset}
.warnline{font-size:.78rem;font-weight:600;color:var(--warn)}
.warntext{color:var(--warn);font-weight:600}
.stockwarn{background:var(--warn-soft);border:1px solid var(--warn);color:var(--warn);
  border-radius:10px;padding:12px 14px;margin:14px 0 4px;font-size:.9rem}
.stockwarn ul{margin:6px 0;padding-left:20px}
.stockwarn .note{display:block;font-size:.84rem;opacity:.9;margin-top:4px}

.buchenbar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:14px;margin:16px -28px 0;padding:14px 28px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--line-strong)}
.buchenbar .sum{font-weight:700;font-size:1.05rem}
.buchenbar .sum small{display:block;font-weight:500;font-size:.8rem;color:var(--muted)}
.paygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:6px}
.paygrid button{padding:24px 14px;font-size:1.12rem;font-weight:700;border-radius:14px;
  cursor:pointer;border:1px solid transparent;font-family:inherit}
.paygrid button .s{display:block;font-size:.82rem;font-weight:500;margin-top:4px;opacity:.85}
.paygrid button.tab{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.paygrid button.now{background:var(--accent);color:var(--accent-ink)}
.cart-line{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.cart-line:last-child{border-bottom:0}
.cart-line .nm{flex:1}
.cart-total{display:flex;justify-content:space-between;font-weight:700;font-size:1.05rem;padding-top:10px}

/* ---------- Anmeldung ---------- */
.login{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:28px;width:100%;max-width:400px;box-shadow:var(--shadow)}
.login h1{margin-bottom:4px}
.login .stack{margin-top:18px}
.login .linkrow{display:flex;justify-content:space-between;margin-top:14px;font-size:.85rem}
.login .linkrow button{background:none;border:0;color:var(--accent);cursor:pointer;
  font:inherit;font-size:.85rem;padding:0}
.err{background:var(--bad-soft);border:1px solid var(--bad);color:var(--bad);
  border-radius:8px;padding:9px 12px;font-size:.87rem}

/* ---------- Sonstiges ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);
  color:var(--bg);padding:10px 18px;border-radius:999px;font-size:.88rem;font-weight:500;
  box-shadow:var(--shadow);z-index:50;max-width:90vw}
.overlay{position:fixed;inset:0;background:rgba(10,16,13,.45);display:grid;place-items:center;
  padding:20px;z-index:40}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;
  max-width:560px;width:100%;box-shadow:var(--shadow);max-height:86vh;overflow:auto}
.modal h3{margin-bottom:10px}
.banner{background:var(--warn-soft);border:1px solid var(--warn);color:var(--warn);
  padding:10px 14px;border-radius:9px;font-size:.85rem;margin-bottom:16px}
.chart{width:100%;height:auto;display:block}
.chart .bar{fill:var(--accent)}
.chart text{fill:var(--faint);font-size:10px;font-family:ui-monospace,monospace}
.chart line{stroke:var(--line-strong)}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.seg button{padding:8px 12px;background:var(--surface);border:0;border-left:1px solid var(--line-strong);
  cursor:pointer;color:var(--muted);font-size:.85rem;font-family:inherit}
.seg button:first-child{border-left:0}
.seg button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.boot{display:grid;place-items:center;min-height:100dvh;color:var(--muted);gap:10px}

/* Tablet hochkant und schmaler: Navigation nach oben */
@media (max-width:900px){
  .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .side{position:static;height:auto;align-self:start;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:6px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px}
  .side .brand{padding:2px 6px}
  .side nav{flex-direction:row;flex-wrap:wrap}
  .side .foot{margin:0;padding:2px 6px;flex-direction:row;align-items:center}
  .main{padding:18px 16px 60px;max-width:none}
  .buchenbar{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
}
/* Telefon: Die Navigation darf nicht ein Drittel des Schirms fressen, und
   alles, was man antippt, braucht 44 px. */
@media (max-width:640px){
  /* Navigation in EINE waagerecht scrollbare Zeile statt vier Umbruchzeilen */
  .side{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:4px;
    padding:calc(8px + env(safe-area-inset-top)) 10px 8px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .side::-webkit-scrollbar{display:none}
  .side .brand{padding:0 6px 0 0;flex:0 0 auto}
  .side .brand span{display:none}          /* Name steht ohnehin in der Überschrift */
  .side nav{flex-wrap:nowrap;flex:0 0 auto}
  .side nav a{flex:0 0 auto;white-space:nowrap;padding:9px 12px}
  .side .foot{flex:0 0 auto;margin:0;padding:0 0 0 6px;flex-direction:row;align-items:center}
  .side .foot .badge{display:none}         /* spart eine ganze Zeile */
  .side .foot .btn{min-height:44px;white-space:nowrap}
  /* Schattenkante rechts, solange noch etwas zu scrollen ist – sonst sieht
     man der Zeile nicht an, dass weitere Punkte folgen. */
  .side{
    background-image:
      linear-gradient(to right, var(--surface), var(--surface)),
      linear-gradient(to left,  var(--surface), var(--surface)),
      linear-gradient(to right, rgba(0,0,0,.22), rgba(0,0,0,0)),
      linear-gradient(to left,  rgba(0,0,0,.22), rgba(0,0,0,0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  /* Wasserzeichen aus: auf dem Telefon liegt es sonst in der Überschrift */
  body::before{display:none}

  .main{padding:14px 14px 96px;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .pagehead{margin-bottom:14px}
  h1{font-size:1.25rem}

  /* Touchziele */
  .btn,.btn.sm,.seg button{min-height:44px}
  .btn.sm{padding:6px 12px}
  /* 16px verhindert, dass iOS beim Antippen in das Feld hineinzoomt */
  input,select,textarea{font-size:16px;min-height:44px}
  input[type=checkbox]{min-height:0;width:22px;height:22px}

  .kiosk-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .ktile.drink{min-height:140px;padding:12px 10px}

  .buchenbar{margin-left:-14px;margin-right:-14px;padding:12px 14px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .buchenbar .btn.big{padding:12px 18px;min-height:48px;font-size:1rem}

  .panel{padding:14px}
  .modal{padding:16px;max-height:92vh}
  .login .card{padding:20px}

  /* Breite Tabellen scrollen in ihrem Rahmen – mit sichtbarem Hinweis am Rand */
  .tbl .scroll{-webkit-overflow-scrolling:touch}
  th,td{padding:10px}
}