:root{
  --navy:#13284a; --navy2:#0c1b33; --see:#2b6c98; --rot:#b01e2e; --gruen:#1f7a4d;
  --gelb:#e2a612; --grund:#eaf0f5; --linie:#c9d5e1; --text:#13284a; --leise:#5b6b80;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--text);font-size:17px;line-height:1.4}
button{font:inherit;cursor:pointer;border:0;border-radius:8px}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gelb);outline-offset:2px}
input,select{font:inherit;padding:8px 10px;border:1px solid var(--linie);border-radius:6px;background:#fff;color:var(--text)}
a{color:var(--see)}
.kopf{background:var(--navy);color:#fff;padding:10px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.kopf h1{margin:0;font-size:22px;font-weight:700;letter-spacing:.2px}
.kopf .rechts{margin-left:auto;display:flex;gap:10px;align-items:center}
.kopf a,.kopf button.leise{color:#cfe0f0;background:transparent;font-size:15px;text-decoration:none}
.welle{height:6px;background:repeating-linear-gradient(90deg,var(--see) 0 24px,var(--rot) 24px 30px)}

/* Login */
body.login{display:grid;place-items:center;min-height:100vh;background:var(--navy)}
.loginbox{background:#fff;padding:28px;border-radius:10px;width:min(340px,90vw);display:grid;gap:10px}
.loginbox h1{margin:0 0 6px;font-size:22px}
.loginbox input{width:100%;min-width:0;font-size:26px;text-align:center;letter-spacing:6px}
.loginbox button{background:var(--rot);color:#fff;padding:12px;font-size:18px;font-weight:600}
.fehler{color:var(--rot);margin:0}

/* Übersicht */
.uebersicht{max-width:760px;margin:24px auto;padding:0 16px}
.uebersicht h2{font-size:18px;margin:26px 0 8px;color:var(--leise);font-weight:600}
.links{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.links a{display:block;background:#fff;border-left:5px solid var(--see);padding:14px 16px;border-radius:6px;text-decoration:none;color:var(--text);font-weight:600}
.links a small{display:block;font-weight:400;color:var(--leise)}
.links a.admin{border-color:var(--rot)}

/* Kasse */
.kasse{display:grid;grid-template-columns:1fr 360px;height:calc(100vh - 58px)}
.produkte{overflow:auto;padding:14px 18px 40px}
.gruppe h2{font-size:15px;color:var(--leise);margin:16px 0 6px;font-weight:600}
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.kachel{background:#fff;border:2px solid var(--linie);padding:18px 14px;min-height:104px;text-align:left;color:var(--text);font-size:18px;font-weight:600;position:relative}
.kachel:active{background:#dbe8f3}
.kachel .lager{display:block;font-size:13px;font-weight:400;color:var(--leise);margin-top:4px}
.kachel .im{position:absolute;top:-8px;right:-8px;background:var(--rot);color:#fff;border-radius:20px;min-width:30px;height:30px;display:grid;place-items:center;font-size:16px}
.kachel[disabled]{opacity:.4;cursor:not-allowed}
.korb{background:#fff;border-left:1px solid var(--linie);display:flex;flex-direction:column;min-height:0}
.korb h2{margin:0;padding:14px 16px;font-size:18px;border-bottom:1px solid var(--linie)}
.korbliste{flex:1;overflow:auto;padding:6px 16px}
.zeile{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px dashed var(--linie)}
.zeile .n{flex:1;font-weight:600}
.zeile button{width:40px;height:40px;background:var(--grund);font-size:22px;color:var(--navy)}
.zeile .m{width:28px;text-align:center;font-size:20px;font-weight:700}
.leer{color:var(--leise);padding:20px 0}
.korbfuss{padding:12px 16px;border-top:1px solid var(--linie);display:grid;gap:10px}
.korbfuss input{width:100%}
.gross{background:var(--rot);color:#fff;padding:18px;font-size:20px;font-weight:700}
.gross[disabled]{background:#c9a3a8}
.klein{background:var(--grund);color:var(--navy);padding:10px}
.meldung{position:fixed;inset:0;background:rgba(12,27,51,.85);display:none;place-items:center;z-index:9}
.meldung.an{display:grid}
.meldung div{background:#fff;padding:28px 40px;border-radius:12px;text-align:center}
.meldung .nr{font-size:96px;font-weight:800;color:var(--navy);line-height:1}
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--rot);color:#fff;padding:12px 18px;border-radius:8px;display:none;z-index:10}
.toast.an{display:block}
@media (max-width:820px){.kasse{grid-template-columns:1fr;height:auto}.korb{border-left:0;border-top:1px solid var(--linie)}}

/* Stand */
body.stand{background:var(--navy2);color:#fff}
.spalten{display:grid;grid-template-columns:2fr 1fr;gap:14px;padding:14px;min-height:calc(100vh - 58px)}
.spalte h2{margin:0 0 10px;font-size:18px;color:#a9c1db;font-weight:600}
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;align-content:start}
.karte{background:#fff;color:var(--text);border-radius:10px;border-top:8px solid var(--rot);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.karte.fertig{border-top-color:var(--gruen)}
.karte.alt{box-shadow:0 0 0 3px var(--gelb)}
.karte .oben{display:flex;align-items:baseline;justify-content:space-between}
.karte .nr{font-size:44px;font-weight:800;line-height:1}
.karte .zeit{color:var(--leise);font-size:15px}
.karte ul{margin:0;padding:0;list-style:none;font-size:22px;font-weight:600}
.karte .notiz{background:#fff4d6;padding:6px 8px;border-radius:6px;font-size:16px}
.karte .knoepfe{display:flex;gap:8px;margin-top:auto}
.karte .knoepfe button{flex:1;padding:14px;font-size:18px;font-weight:700}
.b-fertig{background:var(--gruen);color:#fff}
.b-abgeholt{background:var(--navy);color:#fff}
.b-zurueck{background:var(--grund);color:var(--navy);flex:0 0 auto !important;padding:14px 12px !important}
.abgeholt-liste{margin-top:18px;color:#a9c1db;font-size:15px}
.abgeholt-liste button{background:transparent;color:#cfe0f0;border:1px solid #3b5274;padding:6px 10px;margin:4px 4px 0 0}
.leerstand{color:#7f97b4;font-size:20px;padding:30px 0}
@media (max-width:820px){.spalten{grid-template-columns:1fr}}

/* Abholung */
body.abholung{background:var(--navy2);color:#fff}
.abholung .titel{text-align:center;font-size:42px;font-weight:800;padding:24px 10px 6px;margin:0}
.abholung .unter{text-align:center;color:#a9c1db;margin:0 0 20px;font-size:20px}
.nummern{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding:0 24px 24px}
.nummer{background:#fff;color:var(--navy);border-radius:12px;text-align:center;padding:16px 8px;border-bottom:8px solid var(--gruen)}
.nummer b{display:block;font-size:72px;line-height:1}
.nummer span{font-size:20px;font-weight:600;color:var(--see)}
.nummer.neu{animation:blink 1s 3}
@keyframes blink{50%{background:#d9f2e4}}
@media (prefers-reduced-motion:reduce){.nummer.neu{animation:none}}

/* Admin */
.admin{max-width:1100px;margin:0 auto;padding:16px}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs button{background:#fff;color:var(--navy);padding:10px 16px;font-weight:600}
.tabs button.an{background:var(--navy);color:#fff}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:8px;border-bottom:1px solid var(--linie);text-align:left;vertical-align:middle}
th{font-size:14px;color:var(--leise);font-weight:600}
td input[type=text]{width:100%}
td input[type=number]{width:90px}
.speichern{background:var(--see);color:#fff;padding:8px 12px}
.loeschen{background:transparent;color:var(--rot);padding:8px}
.storniert td{color:#9aa7b6;text-decoration:line-through}
.zahlen{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.zahlen div{background:#fff;padding:14px 18px;border-radius:8px;min-width:150px}
.zahlen b{display:block;font-size:30px}
.gefahr{margin-top:30px;padding:16px;background:#fbe9eb;border-radius:8px}
.gefahr button{background:var(--rot);color:#fff;padding:10px 14px}
@media print{body{background:#fff}}
/* Stand als reiner Monitor (ohne Knöpfe, größer) */
body.monitor .kopf h1{font-size:30px}
body.monitor .karten{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
body.monitor .karte .nr{font-size:64px}
body.monitor .karte ul{font-size:28px}
body.monitor .karte .notiz{font-size:20px}

/* ---- Frauenbereich / rosa ---- */
:root{--rosa:#d6337a;--rosa-hell:#fde4ef}
body.frauen .kopf{background:#5a1838}
.karte.rosa{border-top-color:var(--rosa);background:var(--rosa-hell)}
.karte.rosa.fertig{border-top-color:var(--gruen)}
.karte .fuer{background:var(--rosa);color:#fff;font-weight:700;padding:4px 8px;border-radius:6px;font-size:15px;align-self:flex-start}
.karte .kname{font-size:18px;font-weight:600;color:var(--leise)}
.kachel.rueber{border-color:var(--rosa)}
.links .f,.karte-link.f{border-left-color:var(--rosa)}
.karte-link{background:#fff;border-left:5px solid var(--see);padding:12px 16px;border-radius:6px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:8px}
.karte-link span{display:flex;gap:10px;font-weight:400;font-size:15px}
.karte-link span a{display:inline;padding:0;border:0;background:none;color:var(--see);font-weight:600;text-decoration:underline}

/* Kasse: Preise */
.zeile .p{font-variant-numeric:tabular-nums;color:var(--leise);min-width:70px;text-align:right}
.summe{display:flex;justify-content:space-between;align-items:baseline;font-size:18px}
.summe b{font-size:26px;font-variant-numeric:tabular-nums}
#msumme{font-size:22px;font-weight:700;color:var(--rot)}
td input.preis{width:90px}
.leise-text{color:var(--leise);font-size:14px}

/* Läufer */
.laeufer{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:14px}
.laeufer h2{margin:0 0 10px;font-size:18px;color:#f3c1d8;font-weight:600}
.laeufer .karten{grid-template-columns:1fr}
.klein-karten .karte{opacity:.75}
@media (max-width:900px){.laeufer{grid-template-columns:1fr}}

/* Abhol-Monitor: Name */
.nummer em{display:block;font-style:normal;font-size:20px;color:var(--leise);margin:2px 0}

/* Kunden-Seite (QR-Code) */
body.kunde{background:var(--grund);max-width:520px;margin:0 auto;padding:0 0 30px}
body.kunde header{background:var(--navy);color:#fff;text-align:center;padding:18px 16px 22px;border-bottom:6px solid var(--see)}
body.kunde header p{margin:0;color:#a9c1db;font-size:15px}
.knr{font-size:56px;font-weight:800;line-height:1.1}
.kn{font-size:20px;font-weight:600}
body.kunde main{padding:16px;display:grid;gap:12px}
.teil{background:#fff;border-radius:10px;padding:14px 16px;border-left:8px solid var(--gelb)}
.teil.bereit{border-left-color:var(--gruen);background:#e5f4ec}
.teil.unterwegs{border-left-color:var(--rosa)}
.teil.fertig{border-left-color:#9aa7b6;opacity:.7}
.teil .status{font-size:19px;font-weight:700}
.teil .status small{display:block;font-size:15px;font-weight:400;color:var(--leise);margin-top:2px}
.teil ul{margin:8px 0 0;padding-left:18px;font-size:17px}
.hinweis{background:#fff;padding:16px;border-radius:10px}
.fusszeile{text-align:center;color:var(--leise);font-size:14px}