/* MeisterKlug Schaltpult – Werkzeug 14 „Bestellregeln“ (Präfix spb-). Farben nur aus dem Siegel. */

/* ---------- Steuerung ---------- */
.spb-feld{display:flex;flex-direction:column;gap:6px;font-weight:600;min-width:0}
.spb-feld select{width:100%;min-height:46px;padding:8px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;font-weight:600}
.spb-feld select:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.spb-feld select:disabled{opacity:.55}
.spb-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.spb-gruppe{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.sp-schritt .spb-gruppe>legend{display:block;padding:0;margin-bottom:8px;font-size:15px;font-weight:600}
.spb-stapel{display:flex;flex-direction:column;gap:14px}
.spb-klein{margin:0;font-size:13px;color:var(--muted);line-height:1.45}
.spb-chips .sp-chip>span{min-height:40px;font-size:14px}
.spb-chip input:disabled+span{opacity:.45;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}
.spb-haken{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.spb-haken .sp-haken input:disabled+span{opacity:.5;cursor:not-allowed}
.spb-haken .sp-haken input:disabled:checked+span{opacity:1}
.spb-karten{display:grid;gap:8px}
.spb-karte{position:relative;display:flex}
.spb-karte input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.spb-karte>span{display:flex;flex-direction:column;gap:2px;width:100%;padding:10px 14px 10px 44px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);position:relative;transition:border-color .2s,background .2s}
.spb-karte>span::before{content:"";position:absolute;left:14px;top:13px;width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);background:var(--paper)}
.spb-karte input:checked+span{border-color:var(--sp-farbe);background:var(--sp-hell)}
.spb-karte input:checked+span::before{border-color:var(--sp-farbe);background:radial-gradient(circle,var(--sp-farbe) 45%,var(--paper) 50%)}
.spb-karte input:focus-visible+span{outline:3px solid var(--brass);outline-offset:2px}
.spb-karte input:disabled+span{opacity:.45;cursor:not-allowed}
.spb-karte b{font-size:15px}
.spb-karte small{font-size:13px;color:var(--muted);line-height:1.4}
.spb-bescheid{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.spb-segment-klein{flex:1 1 180px}
.spb-segment-klein span{min-height:38px}
.sp-segment input:disabled+span{opacity:.45}
.spb-schalter-liste{display:flex;flex-direction:column;gap:6px}

/* ---------- Kundenhandy ---------- */
.spb-handy{position:relative;width:min(100%,360px);margin:0 auto;padding:10px;border-radius:34px;background:var(--logo-gruen);border:2px solid color-mix(in srgb,var(--logo-gold) 45%,transparent);box-shadow:var(--sp-schatten)}
.spb-handy-kerbe{display:block;width:34%;height:7px;margin:2px auto 8px;border-radius:999px;background:rgba(249,239,220,.25)}
.spb-handy-bild{border-radius:24px;overflow:hidden;background:var(--paper);color:var(--fg);font-size:14px;line-height:1.45}
.spb-handy-kopf{display:flex;align-items:center;gap:10px;padding:12px 14px 8px}
.spb-handy-kopf span{display:flex;flex-direction:column;min-width:0}
.spb-handy-kopf b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spb-handy-kopf small{font-size:12px;color:var(--muted)}
.spb-handy-logo{flex:none;width:36px;height:36px;padding:3px;border-radius:50%;object-fit:contain;background:var(--logo-gruen);border:2px solid var(--logo-gold)}
.spb-reiter{display:flex;gap:4px;margin:0 10px 8px;padding:4px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.spb-reiter button{flex:1;min-height:36px;border:0;border-radius:999px;background:transparent;color:var(--fg);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.spb-reiter button[aria-selected="true"]{background:var(--sp-farbe);color:var(--sp-auf)}
.spb-reiter button:focus-visible{outline:3px solid var(--brass);outline-offset:1px}
.spb-seite{display:flex;flex-direction:column;gap:8px;padding:2px 14px 16px;min-height:380px}
.spb-seite[hidden]{display:none}
.spb-foto{position:relative;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:var(--logo-gruen)}
.spb-foto img{display:block;width:100%;height:100%;object-fit:cover}
.spb-beispiel{position:absolute;left:8px;top:8px;padding:2px 8px;border-radius:999px;background:var(--logo-gold);color:var(--logo-gruen);font-size:11px;font-weight:700}
.spb-name{margin:2px 0 0;font-family:var(--f-display);font-size:19px;line-height:1.2}
.spb-beschreibung{margin:0;font-size:13px;color:var(--muted)}
.spb-einheiten{display:flex;flex-wrap:wrap;gap:6px}
.spb-einheiten[hidden]{display:none}
.spb-k-chip{position:relative;display:inline-flex}
.spb-k-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.spb-k-chip span{display:inline-flex;align-items:center;min-height:34px;padding:4px 11px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-size:13px;font-weight:600}
.spb-k-chip input:checked+span{background:var(--logo-gruen);border-color:var(--logo-gruen);color:var(--logo-creme)}
.spb-k-chip input:focus-visible+span{outline:3px solid var(--brass);outline-offset:2px}
.spb-menge{display:flex;align-items:center;gap:8px;margin-top:2px}
.spb-stepper{flex:none;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--logo-gruen);background:var(--surface);color:var(--logo-gruen);font-size:20px;font-weight:700;line-height:1;cursor:pointer}
.spb-stepper:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.spb-menge-text{flex:1;min-width:0;font-weight:600;text-align:center}
.spb-preis{margin:0;font-family:var(--f-mono);font-weight:600;font-size:15px;color:var(--logo-gruen)}
.spb-spanne{margin:0;font-size:13px;color:var(--muted)}
.spb-mini{margin:4px 0 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.spb-allergene{margin:0;font-size:13px;font-weight:600}
.spb-hinweise{margin:0;padding-left:18px;font-size:12.5px;color:var(--muted)}
.spb-hinweise:empty{display:none}
.spb-kontingent{align-self:flex-start;margin:0;padding:3px 10px;border-radius:999px;background:var(--logo-gold);color:var(--logo-gruen);font-size:12px;font-weight:700}
.spb-falls{margin:4px 0 0;padding:10px;border:1.5px dashed var(--line);border-radius:12px;display:flex;flex-direction:column;gap:6px}
.spb-falls legend{padding:0 4px;font-size:13px;font-weight:700}
.spb-k-zeile{position:relative;display:flex}
.spb-k-zeile input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.spb-k-zeile span{display:flex;flex-direction:column;width:100%;padding:6px 10px 6px 32px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);position:relative}
.spb-k-zeile span::before{content:"";position:absolute;left:10px;top:10px;width:14px;height:14px;border-radius:50%;border:2px solid var(--muted)}
.spb-k-zeile input:checked+span{border-color:var(--logo-gruen)}
.spb-k-zeile input:checked+span::before{border-color:var(--logo-gruen);background:radial-gradient(circle,var(--logo-gruen) 45%,transparent 50%)}
.spb-k-zeile input:focus-visible+span{outline:3px solid var(--brass);outline-offset:2px}
.spb-k-zeile b{font-size:13px}
.spb-k-zeile small{font-size:12px;color:var(--muted)}
.spb-zeile-gross{margin:0;font-weight:700;font-size:15px}
.spb-zeile{margin:0;font-size:13px}
.spb-alter{font-weight:700;color:var(--rot)}
.spb-warnung{margin:0;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--rot) 10%,var(--surface));border:1.5px solid color-mix(in srgb,var(--rot) 40%,transparent);font-size:13px;font-weight:600}
.spb-warnung[hidden],.spb-zeile[hidden],.spb-kontingent[hidden],.spb-spanne[hidden],.spb-wuensche[hidden],.spb-blase[hidden]{display:none}
.spb-posten{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.spb-posten b{font-family:var(--f-mono);font-size:15px;color:var(--logo-gruen)}
.spb-knopf{display:block;width:100%;min-height:46px;margin-top:4px;border:0;border-radius:999px;background:var(--logo-gruen);color:var(--logo-creme);font:inherit;font-weight:700;font-size:15px;cursor:pointer;box-shadow:inset 0 0 0 2px var(--logo-gold)}
.spb-knopf.ist-zuruecklegen{background:var(--logo-gold);color:var(--logo-gruen);box-shadow:none}
.spb-knopf.ist-gesperrt{opacity:.55}
.spb-knopf:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.spb-schein{padding:12px;border-radius:6px;background:var(--surface);border:1.5px dashed var(--muted);font-family:var(--f-mono);font-size:13px}
.spb-schein p{margin:4px 0 0}
.spb-schein-kopf{display:block;font-family:var(--f-body);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.spb-schein-vermerk{font-family:var(--f-body);font-weight:600;color:var(--logo-gruen)}
.spb-chat[hidden]{display:none}
.spb-szenarien{margin-bottom:2px}
.spb-chat{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:14px;background:color-mix(in srgb,var(--logo-creme) 70%,var(--bg))}
.spb-chat-kopf{margin:0;font-size:12px;color:var(--muted)}
.spb-blase{margin:0;max-width:92%;padding:8px 11px;border-radius:12px 12px 12px 4px;background:var(--surface);border:1px solid var(--line);font-size:13px;box-shadow:0 2px 4px rgba(11,37,25,.08)}

/* ---------- Waage ---------- */
.spb-waage{display:flex;flex-direction:column;gap:6px;width:min(100%,360px);margin:0 auto;padding:14px 16px;border-radius:16px;border:1.5px solid var(--line);background:var(--paper)}
.spb-waage[hidden]{display:none}
.spb-waage-ergebnis{margin:0;font-family:var(--f-mono);font-size:13px;font-weight:600}
.spb-quelle{text-align:center}

@media (max-width:420px){
  .spb-zwei{grid-template-columns:minmax(0,1fr)}
  .spb-haken{grid-template-columns:minmax(0,1fr)}
  .spb-handy{padding:8px;border-radius:28px}
  .spb-seite{padding:2px 10px 14px}
}