/* ---------------------------------------------------------------------------
   GLOBUS Markthalle Güdingen — Abholservice
   Bildsprache des Handzettels, sauber gesetzt: Grün trägt die Marke,
   Orange und Gelb die Aktionen, Rot nur den Preis. Schwarze Rahmen mit
   dicker Unterkante geben den Rhythmus.

   Kontrast: Das Markengrün ist bewusst #07742f statt eines helleren Tons —
   damit erreicht weiße Schrift darauf 5,9:1 und liegt sicher über der
   Anforderung von 4,5:1. Preise stehen in Rot (5,9:1 auf Weiß), nicht in
   Orange, das auf Weiß nur 2,4:1 schafft und unlesbar wäre.
   --------------------------------------------------------------------------- */

:root {
  --gruen: #07742f;
  --gruen-dunkel: #055c25;
  --gruen-hell: #e8f3ec;
  --orange: #f39200;
  --orange-hell: #fff3e0;
  --gelb: #ffd200;
  --rot: #c8102e;
  --rot-dunkel: #a30d25;
  --rot-hell: #fdeef0;
  --tinte: #141414;
  --tinte-weich: #5b5b5b;
  --linie: #d9d5cc;
  --grund: #f3f1eb;
  --karte: #ffffff;
  --radius: 6px;
  --schatten: 0 2px 0 rgba(20, 20, 20, .08);
  --schrift: "Barlow", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --schrift-eng: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.45;
  color: var(--tinte);
  background: var(--grund);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--schrift-eng); font-weight: 800; letter-spacing: -.005em; }
h1 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.02; margin: 0 0 8px; }
h2 { font-size: clamp(24px, 3.2vw, 34px); line-height: 1.05; margin: 0 0 12px; }
h3 { font-size: 20px; line-height: 1.1; margin: 0 0 8px; }
a { color: var(--gruen-dunkel); }
a:hover { color: var(--gruen); }
img { max-width: 100%; height: auto; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; }

/* ─── Banner und Kopf ─────────────────────────────────────────────────── */

.demo-band {
  background: repeating-linear-gradient(-45deg, #2b3440, #2b3440 12px, #232b35 12px, #232b35 24px);
  color: #fff; text-align: center; font-size: 12px; letter-spacing: .05em;
  padding: 5px 12px; text-transform: uppercase;
}

.kopf { background: var(--gruen); color: #fff; position: sticky; top: 0; z-index: 20; }
.kopf-inner {
  max-width: 1220px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 20px;
}

.marke { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; flex-shrink: 0; }
.marke { color: #fff; }
.marke-logo {
  width: 44px; height: 44px; background: #fff; color: var(--gruen);
  display: grid; place-items: center; font-family: var(--schrift-eng);
  font-weight: 800; font-size: 30px; border-radius: 6px 6px 6px 18px;
}
.marke-text strong { display: block; font-family: var(--schrift-eng); font-size: 22px; font-weight: 800; line-height: 1.02; }
.marke-text small { display: block; font-family: var(--schrift-eng); font-size: 16px; font-weight: 600; opacity: .92; }

.suche { flex: 1; display: flex; max-width: 560px; }
.suche input {
  flex: 1; border: 0; border-radius: var(--radius) 0 0 var(--radius);
  padding: 0 16px; height: 52px; font-size: 17px; font-family: inherit; background: #fff; min-width: 0;
}
.suche input:focus { outline: 3px solid var(--gelb); outline-offset: -3px; }
.suche button {
  border: 0; background: var(--tinte); color: #fff; padding: 0 20px; height: 52px;
  border-radius: 0 var(--radius) var(--radius) 0; font-weight: 600; cursor: pointer;
  font-family: inherit; font-size: 16px;
}
.suche button:hover { background: #000; }

.kopf-nav { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.warenkorb-knopf {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 46px;
  padding: 0 14px; border-radius: var(--radius); background: var(--orange);
  color: var(--tinte); text-decoration: none; font-size: 20px; font-weight: 600;
}
.warenkorb-knopf:hover { background: #ffa726; color: var(--tinte); }
.wk-zahl {
  background: var(--tinte); color: #fff; font-family: var(--schrift-eng); font-weight: 700;
  font-size: 15px; min-width: 24px; height: 24px; border-radius: 12px;
  display: grid; place-items: center; padding: 0 6px;
}

/* Die waagerecht scrollende Warengruppenleiste ist ersatzlos entfallen —
   am Handy sah man nur vier von vierzehn Gruppen. An ihre Stelle tritt das
   Kachelraster (.kacheln), das alle Gruppen gleichzeitig zeigt. */

.kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* Das li ist das Rasterelement und dehnt sich auf die Zeilenhoehe; die Kachel
   darin muss sie uebernehmen, sonst richtet sich jede Kachel nach ihrem
   eigenen Text und die Unterkanten franst aus. */
.kacheln > li { display: flex; }
.kachel {
  flex: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  min-height: 128px; padding: 14px 14px 12px;
  background: var(--karte); color: var(--tinte); text-decoration: none;
  border: 2px solid var(--tinte); border-bottom-width: 6px; border-radius: var(--radius);
  transition: transform .12s ease, background-color .12s ease;
}
.kachel:hover { transform: translateY(-2px); background: var(--wg); color: var(--tinte); }
.kachel:hover .kachel-icon { background: var(--tinte); color: var(--wg); }
.kachel:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--gelb), 0 0 0 7px var(--tinte); }
.kachel.aktiv { background: var(--wg); }
.kachel-icon {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wg); color: var(--tinte); border: 2px solid var(--tinte); flex: none;
}
.kachel-icon svg { width: 26px; height: 26px; }
.kachel-text b { display: block; font-family: var(--schrift-eng); font-weight: 700; font-size: 19px; line-height: 1.08; text-wrap: balance; }
.kachel-text span { display: block; margin-top: 4px; font-size: 14px; color: var(--tinte-weich); }
@media (min-width: 560px) { .kacheln { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 860px) { .kacheln { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .kacheln { grid-template-columns: repeat(7, 1fr); gap: 14px; } .kachel { min-height: 150px; } }

/* ─── Grundlayout ─────────────────────────────────────────────────────── */

.inhalt, .staff-inhalt { max-width: 1220px; margin: 0 auto; padding: 28px 20px 56px; }
.block { margin: 44px 0 0; }
.seiten-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.seiten-sub { color: var(--tinte-weich); margin: 0; font-size: 14.5px; }
.brotkrumen { color: var(--tinte-weich); font-size: 13px; margin-bottom: 16px; }
.brotkrumen a { color: var(--tinte-weich); }
.mitte-knopf { text-align: center; margin: 32px 0; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rechts { text-align: right; }
.mitte { text-align: center; }
.inline { display: inline; }
.optional { color: var(--tinte-weich); font-weight: 400; font-size: 12px; }

/* ─── Knöpfe ──────────────────────────────────────────────────────────── */

.knopf, .knopf-still {
  display: inline-block; border: 1px solid transparent; border-radius: 8px;
  padding: 10px 18px; font-size: 14.5px; font-weight: 600; font-family: inherit;
  text-decoration: none; cursor: pointer; text-align: center; line-height: 1.3;
}
.knopf { background: var(--gruen); color: #fff; }
.knopf:hover { background: var(--gruen-dunkel); color: #fff; }
.knopf.gruen { background: var(--gruen); }
.knopf.gruen:hover { background: #35773e; }
.knopf-still { background: var(--karte); color: var(--tinte); border-color: var(--linie); }
.knopf-still:hover { background: var(--grund); color: var(--tinte); }
.knopf-voll { width: 100%; display: block; }
.knopf-gross { padding: 13px 26px; font-size: 16px; }
.knopf-riesig { padding: 20px 32px; font-size: 20px; width: 100%; background: var(--gruen); color: #fff; border: 0; border-radius: 10px; font-weight: 700; cursor: pointer; font-family: inherit; }
.knopf-riesig:hover { background: #35773e; }
.knopf-link {
  background: none; border: 0; color: var(--gruen-dunkel); cursor: pointer; padding: 0;
  font-size: 13px; font-family: inherit; text-decoration: underline;
}
.knopf-link.hell { color: #cbd5e0; }
.knopf-link.entfernen { color: var(--tinte-weich); }

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input:not([type]), select, textarea {
  font-family: inherit; font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--linie); border-radius: 8px; background: #fff; color: inherit;
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--gruen); outline-offset: -1px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
textarea { resize: vertical; }

/* ─── Bühne (Startseite) ──────────────────────────────────────────────── */

.buehne {
  background: var(--gruen); color: #fff; border-radius: var(--radius);
  padding: 30px 28px 40px; position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center;
}
.buehne::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: repeating-linear-gradient(90deg, var(--orange) 0 28px, var(--gelb) 28px 56px, #fff 56px 84px);
}
.buehne-kicker { color: var(--gelb); font-weight: 700; margin: 0 0 6px; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.buehne h1 { font-size: clamp(38px, 6.5vw, 68px); text-transform: uppercase; line-height: .94; margin-bottom: 14px; }
.buehne-lead { color: rgba(255,255,255,.92); }

/* Der Störer — das eine laute Element der Seite */
.stoerer {
  justify-self: end; position: relative; width: min(100%, 340px);
  background: var(--gelb); color: var(--tinte); padding: 18px 22px 20px;
  clip-path: polygon(0 8%, 6% 0, 94% 3%, 100% 12%, 97% 92%, 90% 100%, 7% 97%, 0 88%);
  transform: rotate(-2deg);
}
.stoerer-kopf { display: inline-block; background: var(--rot); color: #fff; font-family: var(--schrift-eng); font-weight: 800; font-size: 15px; letter-spacing: .06em; padding: 6px 10px; text-transform: uppercase; }
.stoerer-name { font-family: var(--schrift-eng); font-weight: 700; font-size: 24px; line-height: 1.05; margin: 12px 0 2px; }
.stoerer-preis { font-family: var(--schrift-eng); font-weight: 800; font-size: 72px; line-height: .9; letter-spacing: -.03em; margin-top: 6px; }
.stoerer-preis .einheit { font-family: var(--schrift); font-weight: 600; font-size: 16px; letter-spacing: 0; margin-left: 8px; color: #3a3a3a; }
.stoerer-unten { margin-top: 10px; display: flex; justify-content: space-between; font-size: 14px; }
.buehne-lead { font-size: 16.5px; color: var(--tinte-weich); max-width: 46ch; }
.buehne-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

.ablauf-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ablauf-mini li { display: flex; gap: 13px; align-items: flex-start; background: var(--karte); border: 2px solid var(--tinte); border-bottom-width: 5px; border-radius: var(--radius); padding: 14px 16px; }
.ablauf-mini > li > span {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--gruen);
  color: #fff; display: grid; place-items: center; font-family: var(--schrift-eng);
  font-weight: 800; font-size: 24px;
}
.ablauf-mini strong { display: block; font-size: 14.5px; }
.ablauf-mini div { font-size: 13px; color: var(--tinte-weich); line-height: 1.4; }

/* ─── Warengruppen-Kacheln ────────────────────────────────────────────── */

.wg-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.wg-kachel {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 18px 16px; text-decoration: none; color: inherit; display: block;
  border-left: 4px solid var(--wg);
}
.wg-kachel:hover { box-shadow: var(--schatten); transform: translateY(-1px); color: inherit; }
.wg-icon { font-size: 26px; display: block; margin-bottom: 6px; }
.wg-name { display: block; font-weight: 600; font-size: 14.5px; }
.wg-anzahl { display: block; color: var(--tinte-weich); font-size: 12.5px; }
.wg-punkt { margin-right: 8px; }

/* ─── Artikelkarten ───────────────────────────────────────────────────── */

.karten-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.karte {
  background: var(--karte); border: 2px solid var(--tinte); border-bottom-width: 6px;
  border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden;
}
.karte:hover { transform: translateY(-2px); }
.karte-bild { position: relative; display: block; background: var(--grund); }
.karte-bild img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.fahne {
  position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 4px; color: #fff; text-transform: uppercase; letter-spacing: .03em;
}
.fahne-aktion { background: var(--rot); clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%); padding-right: 14px; }
.fahne-bio { background: var(--gruen); top: 8px; left: auto; right: 8px; }
.karte-text { padding: 12px 13px 8px; flex: 1; }
.karte-name { font-family: var(--schrift-eng); font-weight: 700; font-size: 20px; color: inherit; text-decoration: none; display: block; line-height: 1.05; }
.karte-name:hover { color: var(--gruen-dunkel); }
.karte-gebinde { color: var(--tinte-weich); font-size: 12.5px; margin-top: 2px; }
.karte-preis { margin-top: 8px; }
.preis { font-family: var(--schrift-eng); font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: .95; color: var(--rot); display: block; }
.grundpreis { display: block; color: var(--tinte-weich); font-size: 13px; margin-top: 2px; }
.knapp { color: var(--gelb); font-size: 12px; font-weight: 600; margin-top: 4px; }
.knapp.gross { font-size: 14px; }
.verfuegbar { color: var(--gruen); font-size: 14px; font-weight: 600; }
/* Mengenwahl mit Minus und Plus links und rechts der Zahl.
   Die Knöpfe sind mindestens 44 px hoch und breit — darunter wird das Tippen
   am Handy zur Geduldsprobe, gerade für ältere Kundschaft. */
.stepper {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.stepper-knopf {
  border: 0;
  background: var(--grund);
  color: var(--tinte);
  font-size: 21px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  min-height: 46px;
  display: grid;
  place-items: center;
  user-select: none;
}
.stepper-knopf:hover { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.stepper-knopf:active { background: var(--gruen); color: #fff; }
.stepper-knopf:disabled { color: var(--linie); cursor: default; background: var(--grund); }

/* Die allgemeine Feldregel setzt width:100% und hat mit input[type=number]
   eine höhere Spezifität als eine einzelne Klasse. Deshalb hier ebenfalls
   Element + Klasse, sonst gewinnt die allgemeine Regel und das Feld drängt
   den Knopf daneben auf einen Strich zusammen. */
input[type=number].menge {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  padding: 0 2px;
  background: #fff;
  color: var(--tinte);
  appearance: textfield;
  -moz-appearance: textfield;
}
input[type=number].menge::-webkit-outer-spin-button,
input[type=number].menge::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number].menge:focus { outline: 3px solid var(--gruen); outline-offset: -3px; }

.stepper.gross { grid-template-columns: 54px minmax(0, 1fr) 54px; }
.stepper.gross .stepper-knopf { min-height: 54px; font-size: 24px; }
.stepper.gross input[type=number].menge { min-height: 54px; font-size: 18px; }

/* Der Knopf bekommt eine eigene Zeile über die volle Kartenbreite. */
.karte-aktion { display: grid; gap: 8px; padding: 0 13px 13px; }
.karte-aktion .knopf { width: 100%; min-height: 46px; padding: 11px 10px; font-size: 14.5px; }

/* ─── Artikeldetail ───────────────────────────────────────────────────── */

.artikel { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 40px; align-items: start; }
.artikel-bild { position: relative; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
/* Die Warengruppenfarbe ist ein heller Pastellton für Flächen — als
   Schriftfarbe wäre sie unlesbar. Hier trägt sie deshalb nur den Punkt. */
.artikel-wg { color: var(--gruen-dunkel); font-weight: 600; font-size: 15px; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.artikel-wg::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--wg); border: 2px solid var(--tinte); }
.artikel-gebinde { color: var(--tinte-weich); margin: 0 0 18px; }
.preis-gross { font-family: var(--schrift-eng); font-size: 56px; font-weight: 800; letter-spacing: -.03em; line-height: .92; color: var(--rot); }
.artikel-preis { margin-bottom: 14px; }
.artikel-aktion { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin: 20px 0 8px; }
.artikel-aktion .stepper { flex: 0 0 auto; }
.artikel-aktion .knopf { flex: 1 1 220px; min-height: 54px; }
.im-korb { color: var(--gruen); font-size: 14px; }
.artikel-daten { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linie); font-size: 14px; }
.artikel-daten dt { color: var(--tinte-weich); }
.artikel-daten dd { margin: 0; }

/* ─── Warenkorb ───────────────────────────────────────────────────────── */

.korb-layout { display: grid; grid-template-columns: 1fr 330px; gap: 26px; align-items: start; }
.korb-eintrag { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 10px; }
.korb-zeile { display: grid; grid-template-columns: 72px 1fr auto auto auto; gap: 14px; align-items: center; padding: 12px 14px; }
.korb-zeile img { border-radius: 6px; background: var(--grund); }
.korb-name { font-weight: 600; color: inherit; text-decoration: none; }
.korb-gebinde, .korb-einzel { color: var(--tinte-weich); font-size: 12.5px; }
.korb-menge { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.korb-menge .stepper { width: 148px; }
.korb-summe { font-weight: 700; font-size: 16px; min-width: 84px; text-align: right; }

.wunsch { border-top: 1px solid var(--linie); padding: 8px 14px; }
.wunsch summary { cursor: pointer; font-size: 13px; color: var(--tinte-weich); }
.wunsch[open] summary { color: var(--tinte); margin-bottom: 8px; }
.wunsch-form { display: flex; gap: 8px; padding-bottom: 6px; }
.wunsch-marke { color: var(--gruen); }
.korb-leeren { margin-top: 12px; }

.korb-summary { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px; position: sticky; top: 130px; }
.korb-summary dl { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin: 0 0 14px; font-size: 14.5px; }
.korb-summary dt { color: var(--tinte-weich); }
.korb-summary dd { margin: 0; text-align: right; }
.gratis { color: var(--gruen); font-weight: 600; }
.summary-hinweis { background: var(--grund); border-radius: 7px; padding: 10px 12px; font-size: 13px; color: var(--tinte-weich); }
.summary-gesamt { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 0; border-top: 2px solid var(--tinte); margin-bottom: 14px; }
.summary-gesamt strong { font-size: 24px; letter-spacing: -.02em; }
.summary-fuss { color: var(--tinte-weich); font-size: 12.5px; margin: 12px 0 0; }
.mini-liste { list-style: none; margin: 0 0 14px; padding: 0; font-size: 13.5px; }
.mini-liste li { padding: 3px 0; border-bottom: 1px solid var(--grund); }
.mini-liste span { color: var(--tinte-weich); display: inline-block; min-width: 30px; }
.mini-liste .mehr { color: var(--tinte-weich); font-style: italic; }

/* ─── Kasse ───────────────────────────────────────────────────────────── */

.kasse-layout { display: grid; grid-template-columns: 1fr 330px; gap: 26px; align-items: start; }
.tag { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; }
.tag h2 { display: flex; align-items: center; gap: 10px; }
.tag-marke { background: var(--gruen-hell); color: var(--gruen-dunkel); font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.fenster { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.fenster-wahl {
  border: 1.5px solid var(--linie); border-radius: 8px; padding: 11px 12px; cursor: pointer;
  display: block; position: relative; background: #fff;
}
.fenster-wahl:hover { border-color: var(--gruen); background: var(--gruen-hell); }
.fenster-wahl input { position: absolute; opacity: 0; }
.fenster-wahl:has(input:checked) { border-color: var(--gruen); background: var(--gruen-hell); box-shadow: inset 0 0 0 2px var(--gruen); }
.fenster-zeit { display: block; font-weight: 600; font-size: 15px; }
.fenster-frei { display: block; color: var(--tinte-weich); font-size: 12px; }
.fenster-wahl.fast-voll .fenster-frei { color: var(--gelb); font-weight: 600; }

/* ─── Bestellung / QR ─────────────────────────────────────────────────── */

.erfolg { background: var(--gruen-hell); border: 1px solid #cfe4d2; border-radius: var(--radius); padding: 22px 24px; margin-bottom: 24px; }
.erfolg h1 { color: var(--gruen); }
.bestellung-layout { display: grid; grid-template-columns: 320px 1fr; gap: 26px; align-items: start; }
.qr-karte, .abholcode {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 24px; text-align: center;
}
.abholcode { max-width: 520px; margin: 0 auto; }
.qr-titel { color: var(--tinte-weich); font-size: 13px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .05em; }
.qr { border: 8px solid #fff; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--linie); }
.qr.gross { width: 100%; max-width: 320px; }
.qr-code { font-family: ui-monospace, Consolas, monospace; font-size: 21px; letter-spacing: 2px; font-weight: 700; margin: 12px 0 6px; }
.qr-hinweis { color: var(--tinte-weich); font-size: 12.5px; margin: 0 0 16px; }
.bestellung-daten { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px 24px; }
.daten { display: grid; grid-template-columns: auto 1fr; gap: 7px 20px; margin: 0 0 22px; font-size: 14.5px; }
.daten dt { color: var(--tinte-weich); }
.daten dd { margin: 0; }
.daten.mitte { grid-template-columns: 1fr; text-align: center; gap: 2px; }
.daten.mitte dt { margin-top: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

.status-band {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 15px; border-radius: 8px; font-weight: 600; font-size: 14.5px; margin-bottom: 18px;
  background: var(--grund); color: var(--tinte);
}
.status-band small { font-weight: 400; color: var(--tinte-weich); }
.status-punkt { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-band.status-neu { background: #eef2f6; color: #41556b; }
.status-band.status-in_arbeit { background: #fff6e6; color: #9a6511; }
.status-band.status-bereit { background: var(--gruen-hell); color: var(--gruen); }
.status-band.status-abgeholt { background: #eef2f6; color: #5b6672; }
.status-band.status-storniert { background: var(--rot-hell); color: var(--rot); }

.status-pille { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.status-pille.status-neu { background: #eef2f6; color: #41556b; }
.status-pille.status-in_arbeit { background: #fff6e6; color: #9a6511; }
.status-pille.status-bereit { background: var(--gruen-hell); color: var(--gruen); }
.status-pille.status-abgeholt { background: #eef2f6; color: #5b6672; }
.status-pille.status-storniert { background: var(--rot-hell); color: var(--rot); }

/* ─── Tabellen ────────────────────────────────────────────────────────── */

.tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabelle.breit { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.tabelle th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--tinte-weich); padding: 10px 12px; border-bottom: 1px solid var(--linie); }
.tabelle td { padding: 10px 12px; border-bottom: 1px solid var(--grund); vertical-align: top; }
.tabelle small { color: var(--tinte-weich); font-size: 12.5px; }
.tabelle tfoot td { border-bottom: 0; padding-top: 8px; }
.tabelle tfoot .gesamt td { font-weight: 700; font-size: 17px; border-top: 2px solid var(--tinte); padding-top: 12px; }
.tabelle tfoot .korrigiert td { color: var(--gruen); border-top: 1px dashed var(--linie); }
.zeile-fehlt { background: var(--rot-hell); }
.fehlt-marke { color: var(--rot); font-weight: 600; }
.gepickt-marke { color: var(--gruen); }
.ersatz-marke { color: var(--gruen); }
.tabelle tr.inaktiv { opacity: .5; }

/* ─── Formulare / Meldungen ───────────────────────────────────────────── */

.formular-seite { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 34px; align-items: start; }
.formular-seite.eng { grid-template-columns: minmax(0, 460px); justify-content: center; }
.formular-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; }
.formular-lead { color: var(--tinte-weich); margin-top: 0; }
.formular { display: grid; gap: 4px; }
.formular label { font-size: 13.5px; font-weight: 600; margin-top: 12px; }
.formular small { color: var(--tinte-weich); font-size: 12.5px; }
.formular button { margin-top: 18px; }
.formular-fuss { text-align: center; color: var(--tinte-weich); font-size: 14px; margin-top: 16px; }
.formular-neben h2 { font-size: 17px; }

.schritte { padding-left: 20px; margin: 0; display: grid; gap: 12px; }
.schritte li { color: var(--tinte-weich); font-size: 14px; }
.schritte strong { display: block; color: var(--tinte); font-size: 15px; }
.schritte.gross li { font-size: 14.5px; }

.hinweis { background: #fff6e6; border-left: 3px solid var(--gelb); border-radius: 6px; padding: 11px 14px; font-size: 14px; margin: 0 0 18px; }
.fehlerbox { background: var(--rot-hell); border-left: 3px solid var(--rot); border-radius: 6px; padding: 11px 14px; font-size: 14px; margin: 0 0 18px; color: var(--rot-dunkel); }
.erfolgbox { background: var(--gruen-hell); border-left: 3px solid var(--gruen); border-radius: 6px; padding: 11px 14px; font-size: 14px; margin: 0 0 18px; color: #2c6b35; }
.kundenhinweis { background: #eef4fb; border-left: 3px solid #2b6f9c; border-radius: 6px; padding: 11px 14px; font-size: 14px; margin: 0 0 18px; }

.demo-kasten { background: var(--grund); border: 1px dashed var(--linie); border-radius: 8px; padding: 14px 16px; margin-top: 18px; font-size: 13.5px; }
.demo-kasten-titel { font-weight: 700; margin: 0 0 6px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--tinte-weich); }
.demo-kasten p { margin: 4px 0; }
.demo-passwort { font-family: ui-monospace, Consolas, monospace; font-size: 22px; font-weight: 700; letter-spacing: 2px; color: var(--gruen-dunkel); }

.haken { width: 56px; height: 56px; border-radius: 50%; background: var(--gruen-hell); color: var(--gruen); display: grid; place-items: center; font-size: 30px; margin: 0 auto 14px; }
.haken.gross { width: 76px; height: 76px; font-size: 40px; }

.leer { text-align: center; padding: 50px 20px; color: var(--tinte-weich); background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); }
.leer.gross { padding: 80px 20px; }
.leer-sub { font-size: 14px; }
.fehler-code { font-size: 54px; font-weight: 800; color: var(--linie); margin: 0; line-height: 1; }

.blaettern { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 30px 0; font-size: 14px; color: var(--tinte-weich); }
.sortierung { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.sortierung select { width: auto; }
.sortierung label { color: var(--tinte-weich); }

/* ─── Ablaufseite ─────────────────────────────────────────────────────── */

.prozess { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
.prozess-spalte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px 24px; }
.prozess-marke { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 4px; margin-right: 8px; text-transform: uppercase; }
.prozess-marke.kunde { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.prozess-marke.markt { background: #eef2f6; color: #41556b; }
.uebergabe-band { background: var(--tinte); color: #fff; border-radius: var(--radius); padding: 26px 28px; }
.uebergabe-band h2 { color: #fff; }
.uebergabe-band p { color: #cbd5e0; margin: 0; max-width: 78ch; }
.uebergabe-band strong { color: #fff; }

/* ─── Nachrichten ─────────────────────────────────────────────────────── */

.nachrichten { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px 24px; margin-top: 26px; }
.nachrichten-liste { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; }
.nachricht { border-radius: 9px; padding: 11px 14px; background: var(--grund); max-width: 74ch; }
.nachricht.n-kunde { background: var(--rot-hell); margin-left: auto; }
.nachricht.n-markt { background: #eef4fb; }
.nachricht.n-system { background: var(--gruen-hell); font-size: 13.5px; }
.n-kopf { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; color: var(--tinte-weich); margin-bottom: 3px; }
.n-kopf strong { color: var(--tinte); }
.n-text { white-space: pre-wrap; font-size: 14.5px; }
.nachricht-form { display: grid; gap: 6px; max-width: 620px; }
.nachricht-form label { font-size: 13.5px; font-weight: 600; }
.nachricht-form button { justify-self: start; margin-top: 8px; }
.ankreuz { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 400; }
.ankreuz input { width: auto; }

/* ─── Fehlende Artikel (Kundensicht) ──────────────────────────────────── */

.fehlend { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px 24px; margin: 26px auto 0; max-width: 640px; }
.fehl-karte { border: 1px solid var(--linie); border-radius: 9px; padding: 14px 16px; margin-bottom: 12px; }
.fehl-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.fehl-kopf span { color: var(--tinte-weich); font-size: 13px; }
.fehl-notiz { color: var(--tinte-weich); font-size: 13.5px; margin: 6px 0 0; }
.ersatz-kasten { background: var(--gruen-hell); border-left: 3px solid var(--gruen); border-radius: 6px; padding: 12px 14px; margin-top: 12px; }
.ersatz-titel { font-size: 12px; font-weight: 700; color: var(--gruen); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 4px; }
.ersatz-text { margin: 0; font-size: 15px; }
.ersatz-preis { font-weight: 700; margin-left: 8px; }
.ersatz-knoepfe { display: flex; gap: 10px; margin: 12px 0 0; }
.ersatz-entschieden { font-size: 13.5px; margin: 10px 0 0; }
.ersatz-entschieden.ja { color: var(--gruen); font-weight: 600; }
.ersatz-entschieden.nein { color: var(--tinte-weich); }

/* ─── Demo-Postfach ───────────────────────────────────────────────────── */

.mail-kopf { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 14px; }
.mail-rahmen { width: 100%; height: 760px; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; }
.mail-art { font-size: 12px; color: var(--tinte-weich); background: var(--grund); padding: 2px 8px; border-radius: 4px; }

/* ─── Fuß ─────────────────────────────────────────────────────────────── */

.fuss { background: var(--karte); border-top: 1px solid var(--linie); margin-top: 50px; }
.fuss-inner { max-width: 1220px; margin: 0 auto; padding: 32px 20px; display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 34px; font-size: 13.5px; color: var(--tinte-weich); }
.fuss a { color: var(--tinte-weich); text-decoration: none; line-height: 1.9; }
.fuss a:hover { color: var(--gruen); }
.fuss strong { color: var(--tinte); display: block; margin-bottom: 6px; }
.fuss-hinweis { font-size: 12.5px; max-width: 46ch; }

/* ═══ Mitarbeiter-Portal ═══════════════════════════════════════════════ */

body.staff { background: #eef1f4; }
.staff-kopf { background: var(--tinte); color: #fff; position: sticky; top: 0; z-index: 20; }
.staff-kopf-inner { max-width: 1220px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 26px; }
.staff-marke { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }
.staff-logo { width: 38px; height: 38px; border-radius: 8px; background: #384656; display: grid; place-items: center; font-weight: 800; font-size: 20px; }
.staff-marke strong { display: block; font-size: 16px; }
.staff-marke small { display: block; color: #a9b6c4; font-size: 11.5px; }
.staff-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.staff-nav a { color: #cbd5e0; text-decoration: none; padding: 8px 13px; border-radius: 7px; font-size: 14px; }
.staff-nav a:hover { background: #2b3440; color: #fff; }
.staff-nav a.aktiv { background: #384656; color: #fff; font-weight: 600; }
.staff-fuss { max-width: 1220px; margin: 0 auto; padding: 22px 20px 40px; color: #7c8797; font-size: 12.5px; }
.staff-fuss a { color: #7c8797; }
.staff-seitenkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.staff-anmelden { max-width: 420px; margin: 40px auto; }
.kopf-aktionen { display: flex; gap: 10px; }

.kpi-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 26px; }
.kpi { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; }
.kpi-zahl { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.kpi-text { display: block; color: var(--tinte-weich); font-size: 12.5px; }

.staff-tag { margin-bottom: 26px; }
.staff-tag h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.warn-marke { background: var(--rot); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.auftrag-liste { display: grid; gap: 8px; }
.auftrag-zeile {
  background: var(--karte); border: 1px solid var(--linie); border-left: 4px solid var(--linie);
  border-radius: var(--radius); padding: 13px 16px; text-decoration: none; color: inherit;
  display: grid; grid-template-columns: 78px 1fr 190px 190px; gap: 18px; align-items: center;
}
.auftrag-zeile:hover { box-shadow: var(--schatten); color: inherit; }
.auftrag-zeile.status-neu { border-left-color: #41556b; }
.auftrag-zeile.status-in_arbeit { border-left-color: var(--gelb); }
.auftrag-zeile.status-bereit { border-left-color: var(--gruen); }
.az-zeit { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.az-zeit small { display: block; font-size: 12px; font-weight: 400; color: var(--tinte-weich); }
.az-code { font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.az-kunde { color: var(--tinte-weich); font-size: 13.5px; }
.az-notiz { color: #2b6f9c; font-size: 12.5px; margin-top: 2px; }
.az-status { text-align: right; }
.stellplatz { display: block; color: var(--tinte-weich); font-size: 12px; margin-top: 3px; }

.balken { height: 7px; background: var(--grund); border-radius: 4px; overflow: hidden; }
.balken span { display: block; height: 100%; background: var(--gruen); border-radius: 4px; }
.balken.gross { height: 10px; margin-bottom: 18px; }
.az-fortschritt small { color: var(--tinte-weich); font-size: 12px; display: block; margin-top: 4px; }

/* Packliste */
.pick-layout { display: grid; grid-template-columns: 1fr 330px; gap: 22px; align-items: start; }
.pick-liste { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px 22px; }
.pick-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.pick-kopf h2 small { font-weight: 400; color: var(--tinte-weich); font-size: 13px; margin-left: 8px; }
.pick-kopf-aktionen { display: flex; gap: 14px; }
.gang { margin: 22px 0 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--tinte-weich); border-bottom: 1px solid var(--linie); padding-bottom: 5px; }
.pick-eintrag { border-radius: 8px; margin-bottom: 3px; }
.pick-eintrag.pick-gepickt { background: var(--gruen-hell); }
.pick-eintrag.pick-fehlt { background: var(--rot-hell); }
.pick-zeile { display: grid; grid-template-columns: auto 48px 1fr auto; gap: 12px; align-items: center; padding: 9px 10px; }
.pick-schalter { display: flex; gap: 5px; }
.haken.ja, .haken.nein {
  width: 34px; height: 34px; border-radius: 7px; border: 1.5px solid var(--linie);
  background: #fff; cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center;
  color: var(--linie); margin: 0; padding: 0;
}
.haken.ja:hover { border-color: var(--gruen); color: var(--gruen); }
.haken.nein:hover { border-color: var(--rot); color: var(--rot); }
.haken.ja.an { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.haken.nein.an { background: var(--rot); border-color: var(--rot); color: #fff; }
.pick-menge { font-weight: 700; color: var(--tinte-weich); }
.pick-name { font-size: 15px; }
.pick-name small { display: block; color: var(--tinte-weich); font-size: 12.5px; }
.pick-name small.wunsch-marke { color: var(--gruen); font-weight: 600; }
.pick-eintrag.pick-gepickt .pick-name { text-decoration: line-through; text-decoration-color: rgba(63,143,74,.4); }
.pick-platz { font-family: ui-monospace, Consolas, monospace; font-weight: 700; background: var(--grund); padding: 4px 10px; border-radius: 5px; font-size: 13px; }

.fehl-block { padding: 4px 10px 12px 60px; display: grid; gap: 8px; }
.fehl-notiz-form, .ersatz-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fehl-notiz-form label, .ersatz-form label { font-size: 12.5px; font-weight: 600; min-width: 130px; }
.fehl-notiz-form input, .ersatz-form input { flex: 1; min-width: 180px; padding: 7px 10px; font-size: 14px; }
.ersatz-form input.preisfeld { flex: 0 0 96px; width: 96px; min-width: 96px; }
.ersatz-status { font-size: 12.5px; font-weight: 600; width: 100%; }
.ersatz-status.ersatz-vorgeschlagen { color: var(--gelb); }
.ersatz-status.ersatz-angenommen { color: var(--gruen); }
.ersatz-status.ersatz-abgelehnt { color: var(--tinte-weich); }

/* Scanner */
.scan-seite { max-width: 560px; margin: 0 auto; }
.scanner { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; margin: 18px 0 14px; }
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-rahmen { position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.85); border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); pointer-events: none; }
.scan-status { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; padding: 8px 12px; text-align: center; }
.scan-knoepfe { display: flex; gap: 10px; margin-bottom: 22px; }
.scan-knoepfe .knopf { flex: 1; }
.code-form input { text-transform: uppercase; font-family: ui-monospace, Consolas, monospace; font-size: 18px; letter-spacing: 1px; }

/* Identifikation */
.ident, .ident-fehler, .uebergeben {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 28px; max-width: 620px; margin: 0 auto; text-align: center;
}
.ident-kicker { color: var(--gruen); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.ident-name { font-size: 34px; margin: 4px 0 2px; }
.ident-code { font-family: ui-monospace, Consolas, monospace; color: var(--tinte-weich); margin: 0 0 20px; }
.ident-platz { background: var(--tinte); color: #fff; border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.ident-platz-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #a9b6c4; }
.ident-platz-wert { display: block; font-size: 32px; font-weight: 700; letter-spacing: -.01em; }
.ident-warnung { border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px; text-align: left; font-size: 14px; }
.ident-warnung strong { display: block; font-size: 16px; margin-bottom: 3px; }
.ident-warnung.rot { background: var(--rot-hell); color: var(--rot-dunkel); border-left: 4px solid var(--rot); }
.ident-warnung.grau { background: var(--grund); color: var(--tinte-weich); border-left: 4px solid var(--linie); }
.ident-daten { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; text-align: left; margin: 0 0 20px; font-size: 14.5px; }
.ident-daten dt { color: var(--tinte-weich); }
.ident-daten dd { margin: 0; }
.ident-daten .betrag { font-size: 20px; font-weight: 700; }
.ident-fehlend { background: var(--rot-hell); border-radius: 8px; padding: 14px 16px; text-align: left; margin-bottom: 20px; font-size: 14px; }
.ident-fehlend ul { margin: 6px 0 0; padding-left: 20px; }
.ident-links { color: var(--tinte-weich); font-size: 13.5px; margin: 18px 0 0; }
.uebergeben-name { font-size: 18px; font-weight: 600; margin: 0; }
.uebergeben-betrag { font-size: 17px; margin: 6px 0 12px; }

/* Verwaltung */
.verwaltung-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.verwaltung-kachel { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px; text-decoration: none; color: inherit; display: block; }
.verwaltung-kachel:hover { box-shadow: var(--schatten); color: inherit; }
.vk-icon { font-size: 26px; display: block; margin-bottom: 8px; }
.verwaltung-kachel strong { display: block; font-size: 16.5px; margin-bottom: 5px; }
.verwaltung-kachel span:last-child { color: var(--tinte-weich); font-size: 13.5px; }

.einstellungen, .artikel-formular { max-width: 860px; }
.einstell-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 18px; }
.einstell-feld { display: grid; gap: 4px; align-content: start; }
.einstell-feld.breit { grid-column: 1 / -1; }
.einstell-feld label, .einstell-label { font-size: 13.5px; font-weight: 600; }
.einstell-feld small { color: var(--tinte-weich); font-size: 12.5px; }
.wochentage { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 6px 0; }
.einstell-aktion { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.kennzeichen { display: flex; gap: 24px; flex-wrap: wrap; }

.fenster-tag { margin-bottom: 24px; }
.fenster-tag-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.fenster-tag-aktionen { display: flex; gap: 14px; }
.fenster-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; }
.fenster-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 9px; padding: 12px 14px; }
.fenster-karte.gesperrt { opacity: .55; background: repeating-linear-gradient(-45deg, #fff, #fff 6px, #f4f4f2 6px, #f4f4f2 12px); }
.fenster-karte.voll { border-color: var(--gelb); }
.fk-zeit { font-weight: 700; font-size: 15px; }
.fk-balken { height: 6px; background: var(--grund); border-radius: 3px; overflow: hidden; margin: 7px 0 5px; }
.fk-balken span { display: block; height: 100%; background: var(--gelb); }
.fk-zahlen { color: var(--tinte-weich); font-size: 12.5px; }
.fk-aktionen { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
input[type=number].mini { width: 58px; padding: 5px 6px; font-size: 13px; text-align: center; }

.artikel-filter { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.artikel-filter input { flex: 1; min-width: 200px; }
.artikel-filter select { width: auto; }
.artikel-tabelle td { vertical-align: middle; }
.schalter { width: 40px; height: 22px; border-radius: 11px; border: 0; background: #ccd2d9; cursor: pointer; position: relative; padding: 0; }
.schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.schalter.an { background: var(--gruen); }
.schalter.an::after { left: 21px; }

/* ─── Druckansicht ────────────────────────────────────────────────────── */

body.druck { background: #fff; padding: 24px 28px; font-size: 13px; }
.druck-kopf { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid var(--tinte); padding-bottom: 12px; margin-bottom: 14px; }
.druck-kopf h1 { font-size: 24px; margin: 0; }
.druck-kopf p { margin: 2px 0 0; color: #444; }
.druck-termin { text-align: right; }
.druck-termin strong { display: block; font-size: 16px; }
.druck-termin small { display: block; color: #666; }
.druck-hinweis { border: 1px solid #999; border-left: 4px solid #333; padding: 8px 11px; margin-bottom: 12px; }
.druck-tabelle { width: 100%; border-collapse: collapse; }
.druck-tabelle th { text-align: left; font-size: 11px; text-transform: uppercase; border-bottom: 1px solid #333; padding: 5px 6px; }
.druck-tabelle td { padding: 7px 6px; border-bottom: 1px solid #ddd; vertical-align: top; }
.druck-tabelle small { color: #666; font-size: 11px; }
.druck-gang td { background: #eee; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }
.druck-fehlt { color: #999; text-decoration: line-through; }
.druck-wunsch { color: #000 !important; font-weight: 700; }
.w-kasten { width: 32px; }
.w-menge { width: 56px; font-weight: 700; }
.w-platz { width: 90px; font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.kasten { display: inline-block; width: 18px; height: 18px; border: 1.5px solid #333; border-radius: 3px; text-align: center; line-height: 16px; font-weight: 700; }
.druck-fuss { display: flex; gap: 30px; margin-top: 26px; padding-top: 12px; border-top: 1px solid #333; font-size: 12px; align-items: baseline; }
.druck-linie { display: inline-block; width: 130px; border-bottom: 1px solid #333; }
@media print {
  .druck-nurbildschirm { display: none; }
  body.druck { padding: 0; }
}

/* ─── Schmale Bildschirme ─────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .buehne { grid-template-columns: 1fr; padding: 26px; }
  .buehne h1 { font-size: 28px; }
  .korb-layout, .kasse-layout, .bestellung-layout, .pick-layout,
  .formular-seite, .artikel, .prozess { grid-template-columns: 1fr; }
  .korb-summary { position: static; }
  .auftrag-zeile { grid-template-columns: 70px 1fr; gap: 10px; }
  .az-fortschritt, .az-status { grid-column: 2; text-align: left; }
  .fuss-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  /* Der Kopf muss umbrechen duerfen, sonst schiebt er das ganze Dokument
     breiter als den Bildschirm — und dann laeuft jede Seite seitlich weg. */
  .kopf-inner { flex-wrap: wrap; gap: 10px 12px; }
  .suche { order: 3; width: 100%; max-width: none; flex-basis: 100%; }
  .marke { flex: 1 1 auto; min-width: 0; gap: 9px; }
  .marke-logo { width: 36px; height: 36px; font-size: 20px; }
  .marke-text strong { font-size: 15.5px; }
  .marke-text small { display: none; }
  .kopf-nav { margin-left: auto; gap: 7px; flex-shrink: 0; }
  .kopf-nav .knopf, .kopf-nav .knopf-still { padding: 9px 12px; font-size: 13.5px; }
  .warenkorb-knopf { width: 40px; height: 40px; }

  /* Zwei Artikel nebeneinander statt einem — sonst wird die Liste endlos. */
  .karten-gitter { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; }
  .karte-text { padding: 10px 10px 6px; }
  .karte-aktion { padding: 0 10px 10px; gap: 6px; }
  .karte-aktion .knopf { font-size: 13px; padding: 10px 4px; }
  .stepper { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .stepper-knopf { min-height: 42px; }
  input[type=number].menge { min-height: 42px; font-size: 15px; }
  .preis { font-size: 18px; }
  h1 { font-size: 23px; }
  .buehne h1 { font-size: 25px; }
  .inhalt, .staff-inhalt { padding: 20px 14px 40px; }
  .korb-zeile { grid-template-columns: 56px 1fr auto; row-gap: 8px; }
  .korb-zeile img { width: 56px; height: 56px; }
  .korb-summe { grid-column: 3; }
  .korb-menge, .korb-loeschen { grid-column: 2 / -1; flex-direction: row; align-items: center; gap: 10px; }
  .fenster { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .pick-zeile { grid-template-columns: auto 42px 1fr; row-gap: 6px; }
  .pick-platz { grid-column: 3; justify-self: start; }
  .fehl-block { padding-left: 10px; }
  .fehl-notiz-form label, .ersatz-form label { min-width: 100%; }
  .staff-nav a { padding: 7px 9px; font-size: 13px; }
  .fuss-inner { grid-template-columns: 1fr; gap: 20px; }
  .ident-name { font-size: 27px; }
  .ident-platz-wert { font-size: 26px; }
}

/* ─── Nachträge ───────────────────────────────────────────────────────── */

.az-neu { color: #9a6511; font-size: 12.5px; font-weight: 600; margin-top: 3px; }
.knopf-riesig.warnend { background: var(--gelb); color: #4a3208; }
.knopf-riesig.warnend:hover { background: #dd9312; }

/* ─── Nachträge für die Handzettel-Fassung ───────────────────────────── */

.zaehler {
  font-family: var(--schrift-eng); font-weight: 700; font-size: 18px;
  background: var(--karte); border: 2px solid var(--tinte); border-radius: var(--radius);
  padding: 8px 12px; white-space: nowrap;
}
.rechtszeile { color: var(--tinte-weich); font-size: 14px; margin: 16px 0 0; }
.seiten-kopf h2, .seiten-kopf h1 { margin-bottom: 4px; }
.buehne-text { min-width: 0; }
.demo-band { background: var(--tinte); }
.fahne-bio { background: var(--gruen); }
.karte-gebinde { font-size: 14px; }
.knapp { color: #9a6511; }

@media (max-width: 860px) {
  .buehne { grid-template-columns: 1fr; padding: 24px 20px 34px; gap: 24px; }
  .stoerer { justify-self: center; }
  .zaehler { font-size: 16px; }
}

/* ─── Korrekturen auf der grünen Bühne ───────────────────────────────── */
/* Der Fließtext erbte die graue Farbe aus der hellen Fassung und stand
   damit dunkelgrau auf Grün — rund 1,5:1 und praktisch unlesbar. */
.buehne-lead { color: #fff; font-size: 18px; max-width: 42ch; }
.buehne-lead strong { color: var(--gelb); }

/* Der grüne Hauptknopf war auf grünem Grund unsichtbar. Orange mit dunkler
   Schrift erreicht hier 7,8:1. */
.buehne .knopf { background: var(--orange); color: var(--tinte); border-color: var(--orange); }
.buehne .knopf:hover { background: #ffa726; color: var(--tinte); }
.buehne .knopf-still { background: transparent; color: #fff; border-color: #fff; }
.buehne .knopf-still:hover { background: rgba(255,255,255,.16); color: #fff; }

/* Preis der Woche in der Artikelpflege */
.wochenpreis {
  background: none; border: 1px solid var(--linie); border-radius: 5px;
  padding: 4px 9px; cursor: pointer; font-family: inherit; font-size: 14px;
  color: var(--tinte-weich); white-space: nowrap;
}
.wochenpreis:hover { border-color: var(--gelb); color: #9a6511; background: #fffaf0; }
.wochenpreis.an { background: var(--gelb); border-color: var(--tinte); color: var(--tinte); font-weight: 600; }

/* ─── Tagesauswahl in der Auftragsübersicht ──────────────────────────── */

.tagesauswahl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tagknopf {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 0 14px; border-radius: var(--radius); text-decoration: none;
  background: var(--karte); border: 2px solid var(--linie); color: var(--tinte);
  font-weight: 600; font-size: 15px; white-space: nowrap;
}
.tagknopf:hover { border-color: var(--tinte); color: var(--tinte); }
.tagknopf.aktiv { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.tagknopf.ueberfaellig { border-color: var(--rot); }
.tagknopf.ueberfaellig.aktiv { background: var(--rot); border-color: var(--rot); }
.tagzahl {
  background: var(--grund); color: var(--tinte-weich); border-radius: 11px;
  min-width: 22px; height: 22px; display: grid; place-items: center;
  padding: 0 6px; font-size: 13px; font-variant-numeric: tabular-nums;
}
.tagknopf.aktiv .tagzahl { background: rgba(255, 255, 255, .22); color: #fff; }