/* ============================================================================
   Xani B2B — Gestaltungssystem „KONTORWAND"
   ----------------------------------------------------------------------------
   Grundhaltung (§1 der Spezifikation): Der Bildschirm ist ein Bestellschein,
   kein Schaufenster. Zeilen mit fluchtenden Zahlenspalten, Farbe ausschließlich
   als Sortimentsordnung, Zahlen in Monospace, keine Animation über 120 ms auf
   Listeninteraktionen.

   ALLE Farbwerte stehen in tokens.css. In dieser Datei gibt es kein einziges
   Hex-Literal — Prüfung:
     grep -nE '#[0-9a-fA-F]{3,8}' public/css/*.css | grep -v tokens.css   → leer

   Farbregel: keine Textfarbe ohne die Fläche im selben Regelblock (FEHLER-260).
   ========================================================================== */

/* ── Schriften, selbst gehostet (§3.1) ───────────────────────────────────────
   Drei Familien, variable Achse wght, Subsets latin + latin-ext (türkische und
   polnische Kundennamen). Keine externe Quelle — die CSP erlaubt font-src 'self'.
   Vorgeladen werden ausschließlich Instrument Sans und Geist Mono; Big Shoulders
   erscheint in Flächen, deren Umbruch sich beim Tausch nicht bewegt.          */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Kursiv gibt es genau für den redaktionellen Beschreibungstext (115 Artikel). */
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/instrument-sans-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/instrument-sans-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/geist-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Big Shoulders";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/big-shoulders-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Big Shoulders";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/big-shoulders-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Grundlagen ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--flaeche-seite);
  color: var(--schrift);
  font-family: var(--schrift-text);
  font-size: var(--t-basis);   /* Wurzelgröße bleibt 16 px — sonst ist Zoom unbrauchbar */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Die Seite scrollt nie waagerecht (§9). Nur Staffelband, Staffeltabelle und
     Chipleiste dürfen das, jeweils mit eigenem overflow-x. */
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 600; }
h1 { font-size: var(--t-titel-l); font-family: var(--schrift-display); font-weight: 700; line-height: 1.15; }
h2 { font-size: var(--t-titel-m); font-family: var(--schrift-display); font-weight: 700; }
h3 { font-size: var(--t-titel-s); }

/* Zahlen (§3.3). Pflicht auf jeder Zahl, die untereinander steht oder sich beim
   Tippen ändert. Doppelte Absicherung durch feste ch-Breiten in den Tabellen. */
.num, .preis-zahl, .ez-preis, .ez-summe, .wk-preis, .wk-summe, .bl-summe,
.bp-summe, .bp-menge, .bp-sku, .kachel-sku, .kachel-ean, .ez-sku, .wk-sku,
.artikel-sku, .staffel-preis, .wg-anzahl, .wg-kachel-anzahl, .summe-liste dd,
.buehne-zahlen dd, .kopfband-zahl-wert, .eigenschaften td, .daten-liste dd,
.staffel-tabelle td, .staffel-tabelle tbody th, .bl-datum {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums lining-nums;
}
/* nowrap gilt NUR für echte Zahlenzellen. Datenfelder können lange Werte
   tragen (ein Artikel führt drei EANs in einem Feld) — dort muss umbrochen
   werden, sonst schiebt eine einzige Zelle die ganze Seite nach rechts. */
.num, .preis-zahl, .ez-preis, .ez-summe, .wk-preis, .wk-summe, .bl-summe,
.bp-summe, .staffel-preis, .summe-liste dd, .buehne-zahlen dd,
.kopfband-zahl-wert, .staffel-tabelle td, .staffel-tabelle tbody th {
  white-space: nowrap;
}
.eigenschaften td, .daten-liste dd, .kachel-ean, .ez-sku, .wk-sku, .bp-sku {
  white-space: normal; overflow-wrap: anywhere;
}
.num { text-align: right; }

.visuell-versteckt {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--aktion); color: var(--aktion-schrift);
  padding: var(--a3) var(--a5); border-radius: var(--r2);
}
.skip:focus { left: var(--a2); top: var(--a2); }

/* Fokus erscheint sofort und ist nie unsichtbar (§10, §11.14). */
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: var(--r1); }

/* Seitenrand und Inhaltsbreite (§9) */
main {
  max-width: var(--inhalt-breite);
  margin: 0 auto;
  padding: 0 var(--rand) var(--a10);
}

/* ── Kopfleiste (§6) ──────────────────────────────────────────────────────────
   56 px, sticky, --flaeche, 1 px --linie-stark unten — beim Scrollen KEIN
   Schatten, sondern diese Linie. Links Wortmarke, Mitte das Erfassungsfeld,
   rechts Konto und Bestellung.                                               */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: var(--flaeche); color: var(--schrift);
  border-bottom: 1px solid var(--linie-stark);
}
.kopf-oben {
  max-width: var(--inhalt-breite); margin: 0 auto;
  padding: 0 var(--rand);
  min-height: 56px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--a4);
}
.marke {
  display: flex; align-items: baseline; gap: var(--a2);
  text-decoration: none; flex: 0 0 auto; min-width: 0;
  background: var(--flaeche); color: var(--schrift);
}
.marke-wort {
  font-family: var(--schrift-display); font-weight: 700; font-size: 1.75rem;
  line-height: 1; letter-spacing: .12em; text-transform: uppercase;
}
.marke-zusatz {
  font-family: var(--schrift-display); font-weight: 700; font-size: 1.75rem;
  line-height: 1; letter-spacing: .12em; text-transform: uppercase;
  color: var(--signal);
}

/* Erfassungsfeld: ein Feld, das Suche, SKU und EAN versteht. */
.suche { display: flex; min-width: 0; }
.suche input {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--linie-feld); border-right: 0;
  border-radius: var(--r2) 0 0 var(--r2);
  padding: var(--a2) var(--a3);
  background: var(--flaeche); color: var(--schrift);
  font-size: var(--t-basis);   /* 16 px Pflicht, sonst zoomt iOS beim Fokus */
}
.suche input::placeholder { color: var(--schrift-leise); }
.suche button {
  border: 1px solid var(--aktion); border-radius: 0 var(--r2) var(--r2) 0;
  padding: var(--a2) var(--a4);
  background: var(--aktion); color: var(--aktion-schrift);
  font-weight: 600; font-size: var(--t-zelle); cursor: pointer; white-space: nowrap;
  transition: background-color var(--zeit-hover) ease-out;
}
.suche button:hover { background: var(--aktion-hover); border-color: var(--aktion-hover); }

.kopf-nav { display: flex; align-items: center; gap: var(--a3); min-width: 0; }
.kopf-link {
  text-decoration: none; font-size: var(--t-zelle); white-space: nowrap;
  padding: var(--a2) var(--a1); background: var(--flaeche); color: var(--schrift);
  border-bottom: 1px solid transparent;
}
.kopf-link:hover { border-bottom-color: var(--linie-stark); }
.kopf-link.betont {
  border: 1px solid var(--linie-stark); border-radius: var(--r2);
  padding: var(--a2) var(--a3); background: var(--flaeche); color: var(--schrift);
}
.kopf-konto {
  text-decoration: none; display: grid; line-height: 1.2; max-width: 18ch; min-width: 0;
  background: var(--flaeche); color: var(--schrift);
}
.kopf-konto-firma {
  font-weight: 600; font-size: var(--t-zelle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kopf-konto-zusatz {
  font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .07em;
  color: var(--schrift-leise);
}

/* Der Knopf zur Bestellung. Keine Blase, keine Zählanimation. */
.warenkorb-knopf {
  display: inline-flex; align-items: center; gap: var(--a2); text-decoration: none;
  background: var(--aktion-leise); color: var(--schrift);
  border: 1px solid var(--linie-stark); border-radius: var(--r2);
  padding: var(--a2) var(--a3); white-space: nowrap; min-height: 36px;
  transition: background-color var(--zeit-hover) ease-out, border-color var(--zeit-hover) ease-out;
}
.warenkorb-knopf:hover { border-color: var(--aktion); }
.warenkorb-knopf.voll { border-color: var(--signal); border-width: 2px; }
.warenkorb-wort { font-size: var(--t-zelle); font-weight: 600; }
.warenkorb-zahl {
  min-width: 2.2ch; text-align: center;
  background: var(--aktion); color: var(--aktion-schrift);
  border-radius: var(--r-voll); padding: 0 var(--a2);
  font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--t-klein); font-weight: 600;
}
.menue-knopf { display: none; }

/* ── Warengruppen-Leitsystem in der Navigation ────────────────────────────────
   Der Farbpunkt trägt den Ton der Gruppe (--wg kommt als Custom Property aus
   dem Template). Bedienelemente selbst bleiben farblos (§1.2).               */
.warengruppen {
  background: var(--flaeche-gesenkt); color: var(--schrift);
  border-top: 1px solid var(--linie);
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: thin;
  scroll-snap-type: x proximity;
  max-width: var(--inhalt-breite); margin: 0 auto; padding: 0 var(--rand);
}
.warengruppen a {
  display: flex; align-items: center; gap: var(--a2); white-space: nowrap;
  padding: var(--a2) var(--a3); text-decoration: none;
  font-size: var(--t-zelle); scroll-snap-align: start;
  background: var(--flaeche-gesenkt); color: var(--schrift);
  border-bottom: 3px solid transparent; min-height: 40px;
}
.warengruppen a:first-child { padding-left: 0; }
.warengruppen a:hover { background: var(--flaeche-zebra); color: var(--schrift); }
.warengruppen a[aria-current="page"] {
  background: var(--flaeche); color: var(--schrift);
  border-bottom-color: var(--wg); font-weight: 600;
}
.wg-punkt {
  width: 10px; height: 10px; border-radius: var(--r-voll);
  background: var(--wg); flex: 0 0 auto;
}
.wg-anzahl { font-size: var(--t-mikro); color: var(--schrift-leise); }
.wg-aktion { font-weight: 600; }

/* ── Knöpfe (§4: Radius 4 px, keine Schatten) ─────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a2);
  border: 1px solid var(--aktion); background: var(--aktion); color: var(--aktion-schrift);
  border-radius: var(--r2); padding: var(--a2) var(--a5);
  min-height: 40px; font-weight: 600; font-size: var(--t-zelle);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--zeit-hover) ease-out, border-color var(--zeit-hover) ease-out;
}
.btn:hover { background: var(--aktion-hover); border-color: var(--aktion-hover); }
.btn-zweit { background: var(--aktion-leise); color: var(--schrift); border-color: var(--linie-stark); }
.btn-zweit:hover { background: var(--flaeche-gesenkt); border-color: var(--aktion); }
.btn-still {
  background: var(--flaeche-seite); color: var(--schrift-leise);
  border-color: transparent; padding-inline: var(--a3);
}
.btn-still:hover { background: var(--flaeche-gesenkt); color: var(--schrift); }
.btn-gross { padding: var(--a3) var(--a6); font-size: var(--t-basis); min-height: 48px; }
/* Der Kaufknopf ist derselbe Primärknopf — es gibt genau eine Knopffarbe. */
.btn-kaufen { background: var(--aktion); border-color: var(--aktion); color: var(--aktion-schrift); }
.btn-kaufen:hover { background: var(--aktion-hover); border-color: var(--aktion-hover); }
.btn.gesperrt { opacity: .45; pointer-events: none; }

/* ── Startseite: Kopfband statt Bühne (§6.1) ──────────────────────────────────
   Kein Hero, kein Slider, kein Stockfoto. Links H1 und Untertitel, rechts drei
   Zahlen aus der Datenbank.                                                  */
.buehne, .kopfband {
  background: var(--flaeche-gesenkt); color: var(--schrift);
  margin: 0 calc(var(--rand) * -1) var(--a7);
  padding: var(--a6) var(--rand);
  border-bottom: 2px solid var(--linie-stark);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--a5) var(--a7); align-items: end;
}
.buehne-inhalt, .kopfband-inhalt { min-width: 0; }
.buehne-kicker, .kopfband-kicker {
  text-transform: uppercase; letter-spacing: .07em; font-size: var(--t-mikro);
  font-weight: 600; color: var(--schrift-leise); margin: 0 0 var(--a2);
}
.buehne-titel, .kopfband-titel {
  font-family: var(--schrift-display); font-weight: 700; font-size: var(--t-titel-l);
  line-height: 1.15; margin: 0 0 var(--a2); text-transform: uppercase; letter-spacing: .01em;
}
.buehne-text, .kopfband-text {
  color: var(--schrift-leise); background: var(--flaeche-gesenkt);
  max-width: 66ch; font-size: var(--t-zelle); margin: 0;
}
.buehne-knoepfe, .kopfband-knoepfe {
  display: flex; flex-wrap: wrap; gap: var(--a3); margin: var(--a5) 0 0;
}
.buehne-zahlen, .kopfband-zahlen {
  display: flex; flex-wrap: wrap; gap: var(--a6); margin: 0; align-items: end;
}
.buehne-zahlen > div, .kopfband-zahlen > div { display: grid; gap: 2px; }
.buehne-zahlen dt, .kopfband-zahl-etikett {
  font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; color: var(--schrift-leise);
}
.buehne-zahlen dd, .kopfband-zahl-wert {
  margin: 0; font-family: var(--schrift-zahl); font-size: var(--t-titel-s);
  font-weight: 600; line-height: 1.1; color: var(--schrift);
}

/* ── Abschnitte ───────────────────────────────────────────────────────────── */
.abschnitt-titel {
  font-family: var(--schrift-display); font-weight: 700; font-size: var(--t-titel-m);
  text-transform: uppercase; letter-spacing: .02em;
  margin: 0 0 var(--a4); padding-bottom: var(--a2);
  border-bottom: 2px solid var(--linie-stark);
}
.seiten-kopf { padding: var(--a7) 0 var(--a5); }
.seiten-kopf p { color: var(--schrift-leise); margin: 0; max-width: 66ch; }
.mehr-zeile { margin: var(--a6) 0 0; }

.warengruppen-raster-abschnitt, .empfohlen-abschnitt, .aktionen-abschnitt,
.aehnlich, .zuletzt-abschnitt { margin-bottom: var(--a9); }

/* Warengruppenkacheln: die einzige große Farbfläche der Startseite. */
.warengruppen-raster {
  display: grid; gap: var(--a3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.wg-kachel {
  display: grid; align-content: space-between; gap: var(--a4);
  text-decoration: none; padding: var(--a4);
  min-height: 108px;
  background: var(--wg); color: var(--wg-schrift);
  border: 1px solid var(--wg); border-radius: var(--r2);
  transition: outline-color var(--zeit-hover) ease-out;
  outline: 2px solid transparent; outline-offset: -2px;
}
.wg-kachel:hover { outline-color: var(--schrift); }
.wg-kachel-name {
  font-family: var(--schrift-display); font-weight: 700; font-size: var(--t-titel-s);
  line-height: 1.1; text-transform: uppercase; letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.wg-kachel-anzahl { font-size: var(--t-klein); opacity: .9; }
/* Die Emoji-Felder aus lib/categories.js sind Datenpflege, kein UI (§11.6). */
.wg-kachel-icon, .wg-icon { display: none; }

/* Laufende Mengenaktionen */
.aktionen-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--a3); }
.aktion-karte {
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--linie-stark); border-left: 4px solid var(--signal);
  border-radius: var(--r2); padding: var(--a4);
}
.aktion-karte h3 { margin: 0 0 var(--a1); font-size: var(--t-titel-s); }
.aktion-karte p { margin: 0; color: var(--schrift-leise); background: var(--flaeche); font-size: var(--t-zelle); }
.aktion-bedingung {
  font-weight: 600; margin-top: var(--a2) !important;
  color: var(--signal) !important; background: var(--flaeche);
  font-family: var(--schrift-zahl); font-size: var(--t-zelle) !important;
}
.aktion-abschnitt { margin-bottom: var(--a9); }
.aktion-kopf { margin-bottom: var(--a4); }
.aktion-kopf h2 { margin-bottom: var(--a1); }

/* „So bestellen Sie" — Sachtext für Gäste, keine Werbesprache. */
.so-bestellen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--a5); }
.so-schritt {
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--linie); border-top: 3px solid var(--aktion);
  border-radius: var(--r2); padding: var(--a4);
}
.so-schritt-nr {
  font-family: var(--schrift-zahl); font-size: var(--t-titel-s); font-weight: 600;
  color: var(--schrift-leise); background: var(--flaeche); display: block;
}
.so-schritt h3 { margin: var(--a1) 0 var(--a2); font-size: var(--t-name-kachel); }
.so-schritt p { margin: 0; font-size: var(--t-zelle); color: var(--schrift-leise); background: var(--flaeche); }

/* ── Artikelkacheln (§5.2 / §5.3) ─────────────────────────────────────────── */
/* Spaltenzahl je Bruchstelle fest nach §9 — nicht „so viele wie passen".
   Die Kachelbreite darf nicht zwischen zwei Bildschirmen springen, sonst
   verschiebt sich die Merkposition der Ware. */
.kachel-raster {
  display: grid; gap: var(--a3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { .kachel-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .kachel-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .kachel-raster { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1680px) { .kachel-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kachel {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--linie); border-top: 3px solid var(--wg);
  border-radius: var(--r2); overflow: hidden;
  transition: border-color var(--zeit-hover) ease-out;
}
.kachel:hover { border-color: var(--linie-stark); border-top-color: var(--wg); }
.kachel-link { text-decoration: none; display: block; background: var(--flaeche); color: var(--schrift); }

/* Fotobühne: Warengruppenton in 12 % über --flaeche, damit sich Foto- und
   Typokachel im Raster angleichen. */
.kachel-bild {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: color-mix(in srgb, var(--wg) 12%, var(--flaeche));
  color: var(--schrift);
}
.kachel-bild img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.bild-zahl {
  position: absolute; right: var(--a2); bottom: var(--a2);
  background: var(--aktion); color: var(--aktion-schrift);
  font-family: var(--schrift-zahl); font-size: var(--t-mikro);
  padding: 1px var(--a1); border-radius: var(--r1);
}

/* Typo-Warenkarte — der REGELFALL (1.429 von 1.934 Artikeln, §5.3).
   Vollflächiger Warengruppenton, Schrift ist der im Token-Paar hinterlegte
   Vordergrund. Nie als Defekt lesbar: kein Icon, kein „Bild folgt". */
.typo-karte {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--a2); padding: var(--a3);
  background: var(--wg); color: var(--wg-schrift);
}
.typo-karte.var-b {
  /* Musterbrecher gegen Farbflächen-Verschmelzung: 547 Artikel derselben
     Gruppe verschmelzen sonst zu einer einzigen Fläche. */
  background-image: linear-gradient(102deg,
    transparent 0 28%,
    color-mix(in srgb, var(--papier) 8%, var(--wg)) 28% 72%,
    transparent 72%);
}
.tk-kopf { display: flex; justify-content: space-between; gap: var(--a2); align-items: baseline; }
.tk-gruppe {
  font-size: var(--t-mikro); font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.tk-sku {
  font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--t-mikro); white-space: nowrap; flex: 0 0 auto;
}
.tk-name {
  font-family: var(--schrift-display); font-weight: 700;
  align-self: center; hyphens: auto; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical;
}
/* Vier Stufen nach Zeichenlänge — serverseitig gesetzt, damit nach dem Rendern
   nichts springt. Eine Breitenachse gibt es in diesen Schriften nicht. */
.tk-name.stufe-1 { font-size: var(--t-karte-1); line-height: 1.05; -webkit-line-clamp: 2; }
.tk-name.stufe-2 { font-size: var(--t-karte-2); line-height: 1.08; -webkit-line-clamp: 3; }
.tk-name.stufe-3 { font-size: var(--t-karte-3); line-height: 1.12; -webkit-line-clamp: 4; }
.tk-name.stufe-4 { font-size: var(--t-karte-4); line-height: 1.18; -webkit-line-clamp: 4; text-overflow: ellipsis; }
.tk-fuss { display: grid; gap: var(--a1); }
.tk-linie { display: block; width: 40%; height: 1px; background: currentColor; opacity: .4; }
.tk-ean {
  font-family: var(--schrift-zahl); font-size: var(--t-mikro);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Mini-Typokarte in Listenzeile und Warenkorb (40 px). */
.mini-karte {
  display: grid; place-items: center; width: 40px; height: 40px;
  background: var(--wg); color: var(--wg-schrift);
  border-radius: var(--r1);
  font-family: var(--schrift-display); font-weight: 700; font-size: var(--t-zelle);
  letter-spacing: .04em; line-height: 1;
}

.kachel-text { padding: var(--a3) var(--a3) var(--a1); min-width: 0; }
.kachel-name {
  font-size: var(--t-name-kachel); font-weight: 600; margin: 0 0 var(--a1);
  line-height: 1.3; hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;
}
.kachel-meta {
  margin: 0; font-size: var(--t-mikro); color: var(--schrift-leise);
  background: var(--flaeche);
  display: flex; flex-wrap: wrap; gap: var(--a2); min-width: 0;
}
.kachel-sku { font-weight: 600; }
.kachel-ean { overflow: hidden; text-overflow: ellipsis; }
.kachel-fuss { margin-top: auto; padding: var(--a2) var(--a3) var(--a3); min-width: 0; }

/* ── Preis und Preisband (§8.1) ───────────────────────────────────────────── */
.preis-block { display: grid; gap: 0; margin-bottom: var(--a2); }
.preis-netto { display: flex; align-items: baseline; gap: var(--a1); flex-wrap: wrap; }
.preis-zahl { font-size: var(--t-preis-zeile); font-weight: 600; line-height: 1.1; }
.preis-einheit { font-size: var(--t-mikro); color: var(--schrift-leise); white-space: nowrap; }
.preis-brutto { font-size: var(--t-mikro); color: var(--schrift-leise); font-family: var(--schrift-zahl); }
.preis-sperre {
  display: inline-block; font-size: var(--t-klein); font-weight: 600;
  background: var(--flaeche); color: var(--schrift);
  text-decoration: none; border-bottom: 1px solid var(--linie-stark);
}
.preis-anfrage {
  font-weight: 600; font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .07em;
  color: var(--fehler); background: var(--flaeche);
}
.preis-block.anfrage {
  background: var(--flaeche-gesenkt); border: 1px solid var(--linie-stark);
  border-radius: var(--r2); padding: var(--a2); min-height: 44px; align-content: center;
}
.preis-block.anfrage .preis-anfrage { background: var(--flaeche-gesenkt); }

/* Das Staffelband steht in JEDER Zeile und Kachel — nie in einem Aufklapper.
   Vier gleich breite Zellen 1 / 12 / 48 / 144. */
.staffel-chips {
  list-style: none; margin: 0 0 var(--a2); padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border: 1px solid var(--linie); border-radius: var(--r2); overflow: hidden;
  min-width: 0;
}
.staffel-chips li {
  display: grid; gap: 0; padding: var(--a1) 2px; text-align: center;
  background: var(--flaeche); color: var(--schrift);
  border-right: 1px solid var(--linie); min-width: 0;
  transition: background-color var(--zeit-staffel) ease-out;
}
.staffel-chips li:last-child { border-right: 0; }
.staffel-menge {
  font-size: var(--t-mikro); font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--schrift-leise); background: inherit;
}
.staffel-preis {
  font-size: var(--t-klein); font-weight: 500; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis;
}
/* Erreichte Stufe: Fläche --band, dunkle Schrift, zusätzlich Unterstrich und
   Gewicht — Farbe ist nie der einzige Zustandsträger (§2.4). */
.staffel-chips li[aria-current="true"] {
  background: var(--band); color: var(--band-schrift);
  box-shadow: inset 0 -2px 0 0 var(--signal); font-weight: 600;
}
.staffel-chips li[aria-current="true"] .staffel-menge { color: var(--band-schrift); }

/* Gastansicht: die Zahl weicht einer Linie in Zahlenbreite, nicht einem
   Weichzeichner und keinem Schloss. Die Zellhöhe bleibt exakt gleich, damit
   nach dem Login kein Pixel Geometrie springt. */
.staffel-linie {
  display: block; height: 1px; width: 5ch; margin: calc((1.15em - 1px) / 2) auto;
  background: var(--linie-stark);
}
.menge-form.ist-gesperrt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a2); }
.menge-form.ist-gesperrt .menge-feld { width: 100%; justify-content: space-between; opacity: .6; }
.menge-form.ist-gesperrt .menge-eingabe { flex: 1 1 auto; width: auto; min-width: 0; }
.menge-form.ist-gesperrt .btn { width: 100%; }
.menge-schritt[disabled] { cursor: default; }

/* ── Mengenfeld und Stepper (§5.5) ────────────────────────────────────────── */
.menge-form { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--a2); align-items: center; }
.menge-form .menge-rueckmeldung, .menge-form .vpe-hinweis { grid-column: 1 / -1; }
.menge-feld {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--linie-feld); border-radius: var(--r2);
  overflow: hidden; background: var(--flaeche); color: var(--schrift);
}
.menge-schritt {
  border: 0; background: var(--flaeche-gesenkt); color: var(--schrift);
  width: 32px; min-height: 32px; cursor: pointer; font-size: var(--t-basis); line-height: 1;
  transition: background-color var(--zeit-hover) ease-out;
}
.menge-schritt:hover { background: var(--aktion-leise); }
.menge-eingabe {
  border: 0; background: var(--flaeche); color: var(--schrift);
  width: 72px; text-align: right; padding: var(--a1) var(--a2);
  font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--t-basis);   /* 16 px Pflicht (§11.20) */
  font-weight: 500; -moz-appearance: textfield;
}
.menge-eingabe::-webkit-outer-spin-button, .menge-eingabe::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.menge-eingabe.korrigiert { background: var(--warn-flaeche); color: var(--schrift); }
.menge-form:not(.kompakt) .menge-eingabe { width: 96px; }
.menge-form:not(.kompakt) .menge-schritt { width: 48px; min-height: 48px; }
/* In der Kachel stehen Stepper und Knopf untereinander: nebeneinander bliebe
   für den Knopf bei 228 px Kachelbreite kein lesbarer Rest (die Beschriftung
   wurde dort auf 42 px gequetscht). */
.menge-form.kompakt { grid-template-columns: minmax(0, 1fr); gap: var(--a2); }
.menge-form.kompakt .menge-feld { width: 100%; justify-content: space-between; }
.menge-form.kompakt .menge-eingabe { flex: 1 1 auto; width: auto; min-width: 0; text-align: center; }
.menge-form.kompakt .btn { width: 100%; }
.vpe-hinweis { margin: 0; font-size: var(--t-klein); color: var(--schrift-leise); background: transparent; }
.menge-rueckmeldung {
  margin: 0; font-size: var(--t-klein); min-height: 1.2em;
  transition: opacity 120ms linear; background: transparent; color: var(--schrift-leise);
}
.menge-rueckmeldung.erfolg { color: var(--ok); font-weight: 600; background: transparent; }
.menge-rueckmeldung.erfolg.verblasst { opacity: 0; }
.menge-rueckmeldung.fehler { color: var(--fehler); font-weight: 600; background: transparent; }

/* ── Katalog (§6.2) ───────────────────────────────────────────────────────── */
.katalog-kopf {
  display: flex; flex-wrap: wrap; gap: var(--a3) var(--a5); align-items: flex-end;
  justify-content: space-between; padding: var(--a6) 0 var(--a3);
  border-bottom: 2px solid var(--linie-stark); margin-bottom: var(--a5);
}
.katalog-titel { margin: 0; }
.katalog-anzahl {
  margin: var(--a1) 0 0; color: var(--schrift-leise); background: transparent;
  font-size: var(--t-zelle); font-family: var(--schrift-zahl);
}
/* Kategoriekopfband: Vollton der Gruppe, die einzige große Farbfläche der Seite. */
.kategorie-band {
  margin: 0 calc(var(--rand) * -1) var(--a5);
  padding: var(--a5) var(--rand); min-height: 88px;
  background: var(--wg); color: var(--wg-schrift);
  display: flex; flex-wrap: wrap; gap: var(--a3) var(--a5);
  align-items: center; justify-content: space-between;
}
.kategorie-band h1 {
  margin: 0; font-family: var(--schrift-display); font-weight: 700;
  font-size: var(--t-titel-l); text-transform: uppercase; letter-spacing: .01em;
  min-width: 0; overflow-wrap: anywhere;
}
.kategorie-band-zahl {
  font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--t-titel-s); font-weight: 600; white-space: nowrap;
}

/* Werkzeugleiste */
.katalog-werkzeuge { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; }
.ansicht-schalter {
  display: inline-flex; border: 1px solid var(--linie-stark);
  border-radius: var(--r2); overflow: hidden;
}
.ansicht-schalter a {
  padding: var(--a2) var(--a3); text-decoration: none; font-size: var(--t-zelle);
  background: var(--flaeche); color: var(--schrift-leise); min-height: 36px;
  display: inline-flex; align-items: center;
}
.ansicht-schalter a + a { border-left: 1px solid var(--linie); }
.ansicht-schalter a.aktiv { background: var(--aktion); color: var(--aktion-schrift); font-weight: 600; }
.sortier-form select, .a-filter select, .a-filter input {
  border: 1px solid var(--linie-feld); border-radius: var(--r2);
  padding: var(--a2) var(--a3); background: var(--flaeche); color: var(--schrift);
  font-size: var(--t-zelle); min-height: 36px;
}
.filter-schalter {
  padding: var(--a2) var(--a3); border: 1px solid var(--linie-stark); border-radius: var(--r2);
  text-decoration: none; font-size: var(--t-zelle);
  background: var(--flaeche); color: var(--schrift-leise);
  min-height: 36px; display: inline-flex; align-items: center;
  transition: border-color var(--zeit-hover) ease-out;
}
.filter-schalter:hover { border-color: var(--aktion); color: var(--schrift); }
.filter-schalter.aktiv {
  background: var(--aktion-leise); border-color: var(--aktion); color: var(--schrift); font-weight: 600;
}

.blaetterung {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a4);
  margin-top: var(--a7); padding-top: var(--a5); border-top: 1px solid var(--linie);
}
.blaetterung-stand {
  color: var(--schrift-leise); background: transparent;
  font-size: var(--t-zelle); font-family: var(--schrift-zahl);
}

.leer-hinweis {
  padding: var(--a9) var(--a5); background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--linie-stark); border-radius: var(--r2);
}
.leer-hinweis p { color: var(--schrift-leise); background: var(--flaeche); max-width: 66ch; }

/* ── Erfassungstabelle (§5.1) ─────────────────────────────────────────────────
   Das Mengenfeld steht als feste Spalte immer an derselben x-Position; nur so
   ist Spaltennavigation per Tastatur möglich (40 Positionen in 10 Minuten).  */
.tabelle-huelle {
  overflow-x: auto;
  border: 1px solid var(--linie-stark); border-radius: var(--r2);
  background: var(--flaeche);
}
/* WICHTIG: `overflow-x: auto` macht die Hülle zum Scrollport — und ein sticky
   Tabellenkopf richtet sich am NÄCHSTEN Scrollport aus, nicht am Fenster. Der
   Kopf saß dadurch dauerhaft 56 px tief IN der Hülle und deckte die erste
   Zeile ab: ein Klick auf deren Mengenfeld traf den Spaltenkopf.
   Erfassungs- und Positionstabelle passen ab 768 px vollständig in die Seite
   (geprüft bei 768/800/900/1024/1180/1280/1440/1680, Hüllen-Scrollbreite je 0),
   deshalb bekommen genau diese beiden hier keine eigene Scrollachse. Die reinen
   Lesetabellen (Beleg, Konto) behalten sie. */
@media (min-width: 768px) {
  .erfassung-form .tabelle-huelle, .warenkorb-liste .tabelle-huelle { overflow: visible; }
}
.erfass-tabelle, .wk-tabelle { min-width: 46rem; background: var(--flaeche); color: var(--schrift); }
.erfass-tabelle th, .erfass-tabelle td,
.wk-tabelle th, .wk-tabelle td {
  padding: var(--a1) var(--a2); text-align: left; vertical-align: middle;
}
.erfass-tabelle thead th, .wk-tabelle thead th {
  position: sticky; top: 56px; z-index: 2;
  background: var(--flaeche-gesenkt); color: var(--schrift-leise);
  font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; border-bottom: 2px solid var(--linie-stark);
  padding-block: var(--a2);
}
.erfass-tabelle tbody tr, .wk-tabelle tbody tr {
  border-bottom: 1px solid var(--linie);
  /* 4-px-Kante im Warengruppenton: beim Scrollen entsteht daraus die sichtbare
     Sortimentsgliederung, ohne dass Zwischenköpfe Platz kosten. */
  border-left: 4px solid var(--wg);
  background: var(--flaeche); color: var(--schrift);
  height: 44px;
}
.erfass-tabelle tbody tr:nth-child(even), .wk-tabelle tbody tr:nth-child(even) {
  background: var(--flaeche-zebra);
}
/* Hover färbt die Zeilenfläche NICHT (das verfälschte die Preisspalte), sondern
   setzt Linien oben und unten. */
.erfass-tabelle tbody tr:hover {
  box-shadow: inset 0 1px 0 0 var(--linie-stark), inset 0 -1px 0 0 var(--linie-stark);
}
/* Gefüllte Positionen sind beim Scrollen sofort auffindbar. */
.erfass-tabelle tbody tr.hat-menge {
  box-shadow: inset -2px 0 0 0 var(--signal);
}
/* Die Kopfleiste ist sticky (56 px) und der Tabellenkopf klebt darunter. Ohne
   Abstandsreserve landet eine Zeile, zu der der Browser springt (Fokuswechsel
   per Enter im Erfassungsmodus, Sprungmarke, Zurück-Knopf), UNTER dem Kopf —
   und der Klick auf ihr Mengenfeld trifft dann die Kopfleiste. */
.erfass-tabelle tbody tr, .wk-tabelle tbody tr,
.erfass-tabelle .menge-eingabe, .wk-tabelle .menge-eingabe {
  scroll-margin-top: 112px; scroll-margin-bottom: 72px;
}

.ez-bild, .wk-bild { width: 48px; }
.ez-bild img, .wk-bild img {
  width: 40px; min-width: 40px; height: 40px; object-fit: contain;
  border-radius: var(--r1); background: color-mix(in srgb, var(--wg) 12%, var(--flaeche));
}
.ez-name, .wk-name { min-width: 260px; }
.ez-name a, .wk-name a {
  text-decoration: none; font-weight: 500; font-size: var(--t-zelle);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ez-name a:hover, .wk-name a:hover { text-decoration: underline; }
.ez-sku, .wk-sku {
  display: block; font-size: var(--t-mikro); color: var(--schrift-leise); background: transparent;
}
.wk-staffel {
  display: inline-block; font-size: var(--t-mikro); font-weight: 600;
  background: var(--band); color: var(--band-schrift);
  padding: 0 var(--a1); border-radius: var(--r1);
}
/* Staffelband in der Zeile: vier feste Zellen, Schwellen stehen im Tabellenkopf. */
.ez-staffel { width: 304px; }
.ez-staffel .staffel-band {
  display: grid; grid-auto-flow: column; grid-auto-columns: 76px;
  border: 1px solid var(--linie); border-radius: var(--r2); overflow-x: auto;
}
.ez-staffel .sb-zelle {
  padding: 2px var(--a1); text-align: right; border-right: 1px solid var(--linie);
  background: var(--flaeche); color: var(--schrift);
  font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--t-klein); white-space: nowrap;
  transition: background-color var(--zeit-staffel) ease-out;
}
.ez-staffel .sb-zelle:last-child { border-right: 0; }
.ez-staffel .sb-zelle[aria-current="true"] {
  background: var(--band); color: var(--band-schrift); font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--signal);
}
.ez-preis, .wk-preis {
  text-align: right; white-space: nowrap; width: 104px;
  font-size: var(--t-preis-zeile); font-weight: 600;
}
.ez-summe, .wk-summe { text-align: right; white-space: nowrap; width: 96px; font-weight: 600; }
/* Die Mengenspalte ist die Achse der Erfassung: sie steht auf jedem Bildschirm
   an derselben x-Position und ist 112 px breit. Ab 1180 px wird nur getippt
   (Enter springt in die nächste Zeile) — darunter erscheinen die Steppertasten
   mit 44 px Kantenlänge, weil es auf dem Ladentablet keinen Hover gibt. */
.ez-menge { width: 112px; }
.ez-menge .menge-feld { border: 0; background: transparent; }
.ez-menge .menge-schritt { display: none; }
.ez-menge .menge-eingabe {
  border: 1px solid var(--linie-feld); border-radius: var(--r2);
  width: 100%; background: var(--flaeche); color: var(--schrift);
}
/* Schwelle in der Bandzelle: ab 900 px trägt sie der Tabellenkopf. */
.sb-menge { display: none; }

/* Statusleiste unten — ersetzt die Warenkorbblase (§6). */
.erfassung-leiste {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; flex-wrap: wrap; gap: var(--a3);
  align-items: center; justify-content: space-between;
  background: var(--flaeche); color: var(--schrift);
  border-top: 1px solid var(--linie-stark);
  padding: var(--a2) var(--a3); margin-top: var(--a4); min-height: 44px;
  transform: translateY(calc(100% + var(--a5)));
  transition: transform var(--zeit-schublade) var(--kurve-schublade);
}
.erfassung-leiste.aktiv { transform: none; }
.erfassung-summe { font-size: var(--t-zelle); }
.erfassung-summe strong { font-family: var(--schrift-zahl); font-weight: 600; }

/* ── Artikelseite (§6.3) ──────────────────────────────────────────────────── */
.brotkrumen {
  display: flex; flex-wrap: wrap; gap: var(--a2); padding: var(--a5) 0 var(--a3);
  font-size: var(--t-klein); color: var(--schrift-leise); background: transparent;
}
.brotkrumen a { color: var(--schrift-leise); }
.brotkrumen .krume-wg { color: var(--wg); font-weight: 600; background: transparent; }

.artikel {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--a7); align-items: start;
}
.artikel-bilder { min-width: 0; }
.artikel-bild-gross {
  background: color-mix(in srgb, var(--wg) 12%, var(--flaeche));
  border: 1px solid var(--linie); border-top: 3px solid var(--wg);
  border-radius: var(--r2); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
}
.artikel-bild-gross img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
/* Typo-Warenkarte im Großformat — füllt die Bühne vollständig. */
.artikel-bild-gross.ohne-foto { background: var(--wg); color: var(--wg-schrift); padding: 0; border-color: var(--wg); }
.artikel-bild-gross .typo-karte { width: 100%; height: 100%; padding: var(--a6); }
.artikel-bild-gross .tk-name { font-size: var(--t-karte-gross); line-height: 1.02; -webkit-line-clamp: 5; }
.artikel-bild-gross .tk-gruppe, .artikel-bild-gross .tk-sku, .artikel-bild-gross .tk-ean { font-size: var(--t-klein); }
.artikel-bild-leiste { display: flex; gap: var(--a2); margin-top: var(--a2); flex-wrap: wrap; }
.bild-wahl {
  border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--schrift);
  border-radius: var(--r2); padding: 2px; cursor: pointer; width: 64px; height: 64px;
}
.bild-wahl img { width: 100%; height: 100%; object-fit: contain; }
.bild-wahl.aktiv { border-color: var(--aktion); border-width: 2px; }

.artikel-text { min-width: 0; }
.artikel-kopf { display: flex; flex-wrap: wrap; gap: var(--a2) var(--a4); align-items: baseline; }
.artikel-sku {
  font-family: var(--schrift-zahl); font-size: var(--t-basis);
  color: var(--schrift); background: var(--flaeche);
  border: 1px solid var(--linie-stark); border-radius: var(--r2);
  padding: 2px var(--a2); margin: 0 0 var(--a2); display: inline-block;
}
/* H1 ist Text, nicht Display: der Name muss lesbar sein, nicht plakativ. */
.artikel-name {
  font-family: var(--schrift-text); font-weight: 600; font-size: var(--t-titel-l);
  line-height: 1.2; margin: 0 0 var(--a5); text-transform: none;
}

/* Kontorblock */
.artikel-preis {
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--linie-stark); border-radius: var(--r2);
  padding: var(--a6); margin-bottom: var(--a4);
}
.artikel-preis.gesperrt { background: var(--flaeche-gesenkt); }
.preis-etikett {
  font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; color: var(--schrift-leise); background: transparent;
  margin: 0 0 var(--a2);
}
.preis-haupt { margin: 0; display: flex; align-items: baseline; gap: var(--a2); flex-wrap: wrap; }
.preis-haupt .preis-zahl { font-size: var(--t-preis-seite); line-height: 1; }
.preis-neben {
  margin: var(--a1) 0 0; font-size: var(--t-klein);
  color: var(--schrift-leise); background: transparent; font-family: var(--schrift-zahl);
}
.preis-kundenrabatt {
  margin: var(--a2) 0 0; font-size: var(--t-klein); font-weight: 600;
  color: var(--ok); background: var(--ok-flaeche);
  border-radius: var(--r2); padding: var(--a1) var(--a2);
}
.preis-sperre-titel { font-weight: 600; margin-bottom: var(--a1); }
.preis-anfrage-text { margin: var(--a2) 0 0; font-size: var(--t-zelle); color: var(--schrift-leise); background: transparent; }
.artikel-preis.anfrage .preis-anfrage { background: var(--flaeche); }
.kontor-fuss {
  margin: var(--a4) 0 0; padding-top: var(--a3); border-top: 1px solid var(--linie);
  font-size: var(--t-klein); color: var(--schrift-leise); background: transparent;
}
.verfuegbar { display: flex; align-items: center; gap: var(--a2); font-size: var(--t-zelle); margin: var(--a3) 0 0; }
.verfuegbar-punkt { width: 8px; height: 8px; border-radius: var(--r-voll); flex: 0 0 auto; }
.verfuegbar.ist-lager { color: var(--ok); background: transparent; }
.verfuegbar.ist-lager .verfuegbar-punkt { background: var(--ok); }
.verfuegbar.ist-zulauf { color: var(--warn); background: transparent; }
.verfuegbar.ist-zulauf .verfuegbar-punkt { background: var(--warn); }

/* Staffeltabelle (§8.2): kein Zebra, kein Außenrahmen, Haarlinien. */
.staffel-tabelle { margin: var(--a5) 0; width: 100%; }
.staffel-tabelle caption {
  text-align: left; padding: var(--a2) 0; background: transparent; color: var(--schrift-leise);
  font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}
.staffel-tabelle thead th {
  background: var(--flaeche-gesenkt); color: var(--schrift-leise);
  font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; padding: var(--a2); border-bottom: 1px solid var(--linie-stark);
  text-align: right;
}
.staffel-tabelle thead th:first-child { text-align: left; }
.staffel-tabelle th, .staffel-tabelle td {
  padding: var(--a3) var(--a2); border-top: 1px solid var(--linie);
  background: var(--flaeche); color: var(--schrift); height: 48px;
}
.staffel-tabelle tbody th {
  text-align: left; font-size: var(--t-titel-s); font-weight: 600;
}
.staffel-tabelle td { text-align: right; font-weight: 500; }
.staffel-tabelle tbody tr.ist-aktiv th, .staffel-tabelle tbody tr.ist-aktiv td {
  background: var(--band); color: var(--band-schrift); font-weight: 600;
}
.staffel-tabelle tbody tr.ist-aktiv th { box-shadow: inset 4px 0 0 0 var(--signal); }
.ersparnis { color: var(--signal) !important; background: var(--flaeche); }
.staffel-tabelle tbody tr.ist-aktiv .ersparnis { color: var(--band-schrift) !important; background: var(--band); }
.staffel-sprung {
  min-height: 24px; margin: 0 0 var(--a4); font-size: var(--t-zelle);
  color: var(--signal); background: transparent;
}

.eigenschaften { margin: var(--a6) 0; border-top: 1px solid var(--linie-stark); }
.eigenschaften th, .eigenschaften td {
  padding: var(--a2) 0; border-bottom: 1px solid var(--linie); text-align: left;
  font-size: var(--t-zelle); height: 32px; background: transparent;
}
.eigenschaften th { color: var(--schrift-leise); font-weight: 400; width: 42%; }
.eigenschaften td { font-weight: 500; color: var(--schrift); }
.artikel-kurztext { color: var(--schrift-leise); background: transparent; max-width: 66ch; font-size: var(--t-basis); }

/* ── Warenkorb / Bestellung (§6.4, §6.5) ──────────────────────────────────── */
.warenkorb { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--a6); align-items: start; }
.warenkorb-liste { min-width: 0; }
.warenkorb-aktionen { display: flex; flex-wrap: wrap; gap: var(--a3); justify-content: space-between; margin-top: var(--a4); }
.wk-entfernen {
  background: var(--flaeche); border: 0; color: var(--schrift-leise);
  font-size: var(--t-klein); cursor: pointer; text-decoration: underline;
  min-height: 32px; padding: 0 var(--a1);
}
.wk-entfernen:hover { color: var(--fehler); }
.wk-menge { width: 140px; }
.warenkorb-summe {
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--linie-stark); border-radius: var(--r2);
  padding: var(--a5); position: sticky; top: 72px;
}
.warenkorb-summe h2 { font-size: var(--t-titel-s); font-family: var(--schrift-display); }
.summe-liste { margin: 0 0 var(--a4); display: grid; gap: var(--a2); }
.summe-liste > div { display: flex; justify-content: space-between; gap: var(--a4); font-size: var(--t-zelle); }
.summe-liste dt { color: var(--schrift-leise); background: transparent; }
.summe-liste dd { margin: 0; font-weight: 600; white-space: nowrap; }
.summe-liste .ersparnis-zeile dd { color: var(--signal); background: transparent; }
.summe-gesamt {
  border-top: 2px solid var(--linie-stark); margin-top: var(--a2); padding-top: var(--a2);
  font-size: var(--t-basis) !important;
}
.summe-gesamt dt { color: var(--schrift) !important; font-weight: 600; }
.summe-gesamt dd { font-size: var(--t-titel-s); }
.warenkorb-summe .btn { width: 100%; }
.summe-fussnote { margin: var(--a3) 0 0; font-size: var(--t-klein); color: var(--schrift-leise); background: transparent; }
.frachtfrei-hinweis {
  background: var(--ok-flaeche); color: var(--ok); border: 1px solid var(--ok);
  border-radius: var(--r2); padding: var(--a2) var(--a3);
  font-size: var(--t-zelle); margin-bottom: var(--a4); font-weight: 600;
}
.wk-gesperrt {
  display: inline-block; margin-top: 2px; font-size: var(--t-mikro); font-weight: 600;
  color: var(--warn); background: var(--warn-flaeche);
  border: 1px solid var(--warn); border-radius: var(--r1); padding: 0 var(--a1);
}

/* ── Formulare ────────────────────────────────────────────────────────────── */
fieldset {
  border: 1px solid var(--linie); border-radius: var(--r2);
  padding: var(--a4); margin: 0 0 var(--a5); background: transparent;
}
legend { font-weight: 600; padding: 0 var(--a1); font-size: var(--t-zelle); }
.feld { display: grid; gap: var(--a1); margin: 0 0 var(--a4); }
.feld label { font-size: var(--t-zelle); font-weight: 600; color: var(--schrift-leise); background: transparent; }
.feld input, .feld textarea, .feld select {
  border: 1px solid var(--linie-feld); border-radius: var(--r2);
  padding: var(--a2) var(--a3); background: var(--flaeche); color: var(--schrift);
  width: 100%; font-size: var(--t-basis); min-height: 44px;
}
.feld textarea { min-height: 6rem; font-family: var(--schrift-text); }
.feld input:focus, .feld textarea:focus, .feld select:focus { border-color: var(--aktion); }
.feld-hinweis { font-size: var(--t-klein); color: var(--schrift-leise); background: transparent; font-weight: 400; }
.feld-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0 var(--a4); }
.feld-paar .schmal { max-width: 10rem; }
.feld-wahl { display: grid; gap: var(--a2); margin-bottom: var(--a4); }
.feld-wahl label {
  display: flex; gap: var(--a2); align-items: flex-start; font-size: var(--t-zelle);
  cursor: pointer; min-height: 32px; color: var(--schrift); background: transparent;
}
.feld-wahl input { margin-top: 4px; width: 18px; height: 18px; }

.bestell-spalten { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--a6); align-items: start; }
.bestell-eingaben { min-width: 0; }
.bestell-uebersicht {
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--linie-stark); border-radius: var(--r2);
  padding: var(--a5); position: sticky; top: 72px;
}
.bestell-positionen { list-style: none; margin: 0 0 var(--a4); padding: 0; max-height: 22rem; overflow-y: auto; }
.bestell-positionen li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--a2);
  padding: var(--a2) 0; border-bottom: 1px solid var(--linie); font-size: var(--t-zelle);
}
.bp-menge { color: var(--schrift-leise); background: transparent; }
.bp-sku { display: block; font-size: var(--t-mikro); color: var(--schrift-leise); background: transparent; }
.bp-summe { font-weight: 600; }
.bestell-uebersicht .btn { width: 100%; }

/* ── Beleg (§6.5) ─────────────────────────────────────────────────────────── */
.bestaetigung { max-width: 64rem; margin: 0 auto; padding: var(--a7) 0; }
.bestaetigung-marke {
  text-transform: uppercase; letter-spacing: .07em; font-size: var(--t-mikro);
  font-weight: 600; margin: 0 0 var(--a2);
  color: var(--ok); background: var(--ok-flaeche);
  display: inline-block; padding: var(--a1) var(--a2); border-radius: var(--r2);
}
.bestaetigung h1 {
  font-family: var(--schrift-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--t-titel-l); margin: var(--a2) 0 var(--a4);
}
.bestaetigung-text { color: var(--schrift-leise); background: transparent; max-width: 66ch; }
.bestaetigung .summe-liste { max-width: 24rem; margin-left: auto; margin-top: var(--a5); }

/* ── Zugangsseiten (§6.7) ─────────────────────────────────────────────────── */
.zugang {
  display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--a7);
  align-items: start; padding: var(--a9) 0; max-width: 64rem; margin: 0 auto;
}
.zugang.breit { grid-template-columns: minmax(0, 1fr); max-width: 30rem; }
/* Das Anmeldeformular bleibt auf 420 px Satzbreite (§6.7). Der sachliche
   Erklärblock daneben verschiebt diese Breite nicht. */
.zugang > .zugang-karte { max-width: 420px; width: 100%; }
.zugang.breit > .zugang-karte { max-width: none; }
.zugang-karte {
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--linie-stark); border-radius: var(--r2);
  padding: var(--a7);
}
.zugang-karte h1 { font-size: var(--t-titel-m); margin-bottom: var(--a4); }
.zugang-text { color: var(--schrift-leise); background: transparent; font-size: var(--t-zelle); }
.zugang-karte .btn { width: 100%; min-height: 48px; }
.zugang-fuss { margin: var(--a4) 0 0; font-size: var(--t-zelle); color: var(--schrift-leise); background: transparent; }
.zugang-neben { padding-top: var(--a2); }
.zugang-neben h2 { font-size: var(--t-titel-s); }
.haken-liste { list-style: none; padding: 0; margin: 0 0 var(--a4); display: grid; gap: var(--a2); counter-reset: schritt; }
.haken-liste li {
  padding-left: var(--a6); position: relative; font-size: var(--t-zelle);
  color: var(--schrift-leise); background: transparent;
}
.haken-liste li::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; left: 0; top: 0;
  font-family: var(--schrift-zahl); font-weight: 600;
  color: var(--schrift); background: transparent;
}
.zugang-klein { font-size: var(--t-klein); color: var(--schrift-leise); background: transparent; }

/* ── Konto (§6.6) ─────────────────────────────────────────────────────────── */
.konto-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--a5); }
.konto-karte {
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--linie-stark); border-radius: var(--r2); padding: var(--a5);
}
.konto-karte h2 { font-size: var(--t-titel-s); }
.daten-liste { margin: 0 0 var(--a4); display: grid; gap: var(--a2); }
.daten-liste > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--a2); font-size: var(--t-zelle); }
.daten-liste dt { color: var(--schrift-leise); background: transparent; }
.daten-liste dd { margin: 0; font-weight: 500; }
.konto-kennzahl { font-size: var(--t-zelle); color: var(--schrift-leise); background: transparent; }
.konto-hinweis-text { font-size: var(--t-klein); color: var(--schrift-leise); background: transparent; }
.bestell-liste { list-style: none; padding: 0; margin: 0 0 var(--a4); display: grid; }
.bestell-liste li {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: var(--a3);
  align-items: center; padding: var(--a2) 0; border-bottom: 1px solid var(--linie);
  font-size: var(--t-zelle);
}
.bl-datum { color: var(--schrift-leise); background: transparent; font-size: var(--t-klein); }
.bl-status { justify-self: start; }
.bl-summe { text-align: right; font-weight: 600; }
.status-marke, .bl-status {
  display: inline-block; padding: 0 var(--a2); border-radius: var(--r-voll);
  font-size: var(--t-mikro); font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  background: var(--flaeche-gesenkt); color: var(--schrift-leise);
}
.status-neu { background: var(--warn-flaeche); color: var(--warn); }
.status-bestaetigt { background: var(--ok-flaeche); color: var(--ok); }
.status-storniert { background: var(--fehler-flaeche); color: var(--fehler); }

/* ── Hinweise und Fließtext ───────────────────────────────────────────────── */
.hinweis-kasten {
  border-radius: var(--r2); padding: var(--a3) var(--a4); margin: 0 0 var(--a5);
  border: 1px solid var(--linie-stark); font-size: var(--t-zelle);
  background: var(--flaeche); color: var(--schrift);
}
.hinweis-kasten p:last-child { margin-bottom: 0; }
.hinweis-kasten.erfolg { background: var(--ok-flaeche); border-color: var(--ok); color: var(--schrift); }
.hinweis-kasten.warnung { background: var(--warn-flaeche); border-color: var(--warn); color: var(--schrift); }
.hinweis-kasten.fehler { background: var(--fehler-flaeche); border-color: var(--fehler); color: var(--schrift); }
.konto-hinweis {
  background: var(--flaeche-gesenkt); color: var(--schrift);
  border-top: 1px solid var(--linie-stark);
  margin: var(--a9) calc(var(--rand) * -1) 0; padding: var(--a7) var(--rand);
}
.konto-hinweis-inhalt { max-width: 66ch; }
.konto-hinweis-inhalt p { color: var(--schrift-leise); background: var(--flaeche-gesenkt); }

.prose { padding: var(--a7) 0; }
.prose.narrow { max-width: 66ch; }
.prose p { color: var(--schrift-leise); background: transparent; }
.prose em, .artikel-kurztext em { font-style: italic; }

/* ── Fuß ──────────────────────────────────────────────────────────────────── */
.fuss {
  background: var(--flaeche-gesenkt); color: var(--schrift);
  border-top: 1px solid var(--linie-stark);
  margin-top: var(--a10); padding: var(--a7) var(--rand) var(--a5);
}
.fuss-raster {
  max-width: var(--inhalt-breite); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--a6);
}
.fuss-marke {
  font-family: var(--schrift-display); font-weight: 700; font-size: var(--t-titel-s);
  text-transform: uppercase; letter-spacing: .1em; display: block; margin-bottom: var(--a2);
}
.fuss-block h2 {
  font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .07em;
  font-family: var(--schrift-text); font-weight: 600;
  color: var(--schrift-leise); background: var(--flaeche-gesenkt); margin-bottom: var(--a2);
}
.fuss-block p { font-size: var(--t-klein); color: var(--schrift-leise); background: var(--flaeche-gesenkt); }
.fuss-block ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--a1); }
.fuss-block a { text-decoration: none; font-size: var(--t-zelle); }
.fuss-block a:hover { text-decoration: underline; }
.fuss-block strong { color: var(--schrift); background: var(--flaeche-gesenkt); }
.fuss-unten {
  max-width: var(--inhalt-breite); margin: var(--a6) auto 0; padding-top: var(--a3);
  border-top: 1px solid var(--linie); display: flex; justify-content: space-between;
  gap: var(--a4); font-size: var(--t-klein); flex-wrap: wrap;
  color: var(--schrift-leise); background: var(--flaeche-gesenkt);
}

/* ============================================================================
   Bruchstellen (§9). Zwischen den Stufen wird nichts interpoliert außer den
   ausdrücklich genannten clamp()-Werten.
   ========================================================================== */

/* ≥ 768: Seitenrand 24 */
@media (min-width: 768px) { :root { --rand: var(--a6); } }
/* ≥ 1280: Referenzbreite, Seitenrand 32 */
@media (min-width: 1280px) { :root { --rand: var(--a7); } }
@media (min-width: 1440px) { :root { --inhalt-breite: 1440px; } }
@media (min-width: 1680px) {
  :root { --inhalt-breite: 1720px; }
  /* Nur die Artikelspalte bekommt den Zuwachs — Zahlenspalten wachsen nie mit. */
  .ez-name, .wk-name { min-width: 320px; max-width: 560px; }
}

/* 1024–1179: Trefferflächen ab hier mind. 44 px, Zeilenhöhe 56 (Touch).
   Ab hier darf die Tabelle unter ihre Wunschbreite schrumpfen — sonst schöbe
   sie ihre eigene Scrollachse vor die Mengenspalte, und genau die muss
   erreichbar bleiben. */
@media (max-width: 1179px) {
  .erfass-tabelle, .wk-tabelle { min-width: 0; }
  .erfass-tabelle th, .erfass-tabelle td,
  .wk-tabelle th, .wk-tabelle td { padding: var(--a1); }
  .ez-name, .wk-name { min-width: 180px; }
  .ez-summe, .wk-summe { width: 80px; }
  .erfass-tabelle tbody tr, .wk-tabelle tbody tr { height: 56px; }
  .menge-schritt { width: 44px; min-height: 44px; }
  .ez-menge { width: 188px; }
  .ez-menge .menge-feld {
    border: 1px solid var(--linie-feld); border-radius: var(--r2);
    background: var(--flaeche); color: var(--schrift); width: 100%;
  }
  .ez-menge .menge-schritt { display: block; }
  .ez-menge .menge-eingabe { border: 0; width: 96px; min-height: 44px; }
  .warenkorb, .bestell-spalten { grid-template-columns: minmax(0, 1fr); }
  .warenkorb-summe, .bestell-uebersicht { position: static; }
}

/* 900–1023: Artikelseite einspaltig gestapelt, Kontorblock nicht mehr sticky. */
@media (max-width: 1023px) {
  /* Die Artikelspalte gibt Breite ab, nicht die Zahlenspalten — sonst rutscht
     das Mengenfeld in die Scrollachse der Tabellenhülle. */
  .ez-name, .wk-name { min-width: 132px; }
  .ez-staffel { width: 272px; }
  .ez-staffel .staffel-band { grid-auto-columns: 68px; }
  .artikel { grid-template-columns: minmax(0, 1fr); gap: var(--a6); }
  .zugang { grid-template-columns: minmax(0, 1fr); }
  .zugang-neben { order: -1; }
  .buehne, .kopfband { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* 768–899: Staffel schrumpft von 4 auf 3 Zellen; die 1er-Stufe wandert in die
   Metazeile der Artikelspalte. Summenspalte entfällt. */
@media (max-width: 899px) {
  .ez-staffel { width: 232px; }
  .ez-staffel .staffel-band { grid-auto-columns: 72px; }
  .ez-staffel .sb-zelle.sb-einzel { display: none; }
  .ez-name .ez-einzelpreis { display: inline; }
  /* Summenspalte entfällt (§9). Die Summe steht in der Statusleiste unten und
     in der Bestellübersicht — ABWEICHUNG: nicht unter dem Mengenfeld, dafür
     wäre die Zeile keine Tabellenzeile mehr. */
  .ez-summe, .erfass-tabelle thead th:last-child { display: none; }
  .ez-name { min-width: 150px; }
  .ez-preis { width: 88px; }
  /* Hier zählt jedes Pixel: der Stepper weicht, das Feld bleibt 44 px hoch. */
  .ez-menge { width: 112px; }
  .ez-menge .menge-schritt { display: none; }
  .ez-menge .menge-feld { border: 0; background: transparent; }
  .ez-menge .menge-eingabe {
    border: 1px solid var(--linie-feld); width: 100%; min-height: 44px;
    background: var(--flaeche); color: var(--schrift);
  }
  /* Ohne Tabellenkopf trägt jede Bandzelle ihre Schwelle selbst — sonst stünde
     dort eine Zahlenreihe ohne Bezug. */
  .sb-menge {
    display: block; text-align: left;
    font-family: var(--schrift-text); font-size: var(--t-mikro); font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; color: var(--schrift-leise);
  }
  .sb-zelle[aria-current="true"] .sb-menge { color: var(--band-schrift); }
}
.ez-einzelpreis { display: none; font-family: var(--schrift-zahl); font-size: var(--t-mikro); color: var(--schrift-leise); background: transparent; }

/* ≤ 860: Kopfleiste umbauen. Die erste Spur ist minmax(0,1fr) und NICHT auto —
   mit auto bestimmt die Wortmarke die Spaltenbreite, die Spuren summieren sich
   über die Fensterbreite hinaus und schieben das Dokument nach rechts
   (dieselbe Falle wie FEHLER-232). */
@media (max-width: 860px) {
  .kopf-oben {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "marke nav menue" "suche suche suche";
    gap: var(--a2); padding-block: var(--a2);
  }
  .marke { grid-area: marke; min-width: 0; overflow: hidden; }
  .marke-wort, .marke-zusatz { font-size: 1.375rem; }
  .suche { grid-area: suche; min-width: 0; }
  .suche input, .suche button { min-height: 44px; }
  .kopf-nav { grid-area: nav; justify-self: end; min-width: 0; }
  .menue-knopf {
    grid-area: menue; display: grid; place-items: center; width: 44px; height: 44px;
    background: var(--flaeche); color: var(--schrift);
    border: 1px solid var(--linie-stark); border-radius: var(--r2); cursor: pointer;
  }
  .menue-strich, .menue-strich::before, .menue-strich::after {
    display: block; width: 18px; height: 2px; background: var(--schrift); content: "";
  }
  .menue-strich { position: relative; }
  .menue-strich::before { position: absolute; top: -6px; }
  .menue-strich::after { position: absolute; top: 6px; }
  .kopf-konto { display: none; }
  .erfass-tabelle thead th, .wk-tabelle thead th { top: 0; }
  .katalog-kopf { align-items: flex-start; }
}

/* ≤ 760: Aus jeder Tabellenzeile wird eine Karte — sonst läge das Mengenfeld
   außerhalb des Bildschirms, ausgerechnet das Element, um das es geht. */
@media (max-width: 760px) {
  .erfassung-form .tabelle-huelle { overflow: visible; border: 0; background: none; }
  .erfass-tabelle { min-width: 0; display: block; }
  .erfass-tabelle thead { display: none; }
  .erfass-tabelle tbody { display: grid; gap: 0; }
  /* Spezifität beachten: die Zeilenhöhe wird oben über
     „.erfass-tabelle tbody tr" gesetzt — eine Regel auf „.erfass-tabelle tr"
     verliert dagegen, und die Karte bliebe auf 56 px geklemmt. */
  .erfass-tabelle tbody tr {
    display: grid; grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--a1) var(--a3);
    grid-template-areas: "bild name" "staffel staffel" "preis menge" "summe menge";
    background: var(--flaeche); color: var(--schrift);
    border: 0; border-bottom: 1px solid var(--linie); border-left: 4px solid var(--wg);
    border-radius: var(--r0); padding: var(--a3); align-items: center; height: auto;
  }
  .erfass-tabelle tbody tr:nth-child(even) { background: var(--flaeche); }
  .erfass-tabelle td { display: block; padding: 0; border: 0; }
  .ez-bild { grid-area: bild; align-self: start; width: auto; }
  .ez-bild img, .ez-bild .mini-karte { width: 44px; min-width: 44px; height: 44px; }
  .ez-name { grid-area: name; min-width: 0; }
  .ez-name a { font-size: var(--t-zelle); }
  .ez-staffel { grid-area: staffel; width: auto; margin-top: var(--a1); }
  .ez-staffel .staffel-band { grid-auto-columns: minmax(72px, 1fr); scroll-snap-type: x proximity; }
  .ez-staffel .sb-zelle { scroll-snap-align: start; }
  .ez-preis { grid-area: preis; text-align: left; font-size: var(--t-titel-s); padding-top: var(--a2) !important; }
  .ez-preis::after {
    content: " netto"; font-family: var(--schrift-text); font-size: var(--t-mikro);
    font-weight: 400; color: var(--schrift-leise);
  }
  .ez-menge { grid-area: menge; width: auto; justify-self: end; }
  .ez-menge .menge-eingabe { width: 96px; }
  .ez-summe { grid-area: summe; text-align: left; font-size: var(--t-zelle); }
  .ez-summe:not(:empty)::before {
    content: "Summe "; font-family: var(--schrift-text); font-size: var(--t-mikro);
    font-weight: 400; color: var(--schrift-leise);
  }

  .warenkorb-liste .tabelle-huelle { overflow: visible; border: 0; background: none; }
  .wk-tabelle { min-width: 0; display: block; }
  .wk-tabelle thead { display: none; }
  .wk-tabelle tbody { display: grid; }
  .wk-tabelle tbody tr {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--a1) var(--a3);
    grid-template-areas: "bild name name" "bild preis summe" "menge menge weg";
    background: var(--flaeche); color: var(--schrift);
    border: 0; border-bottom: 1px solid var(--linie); border-left: 4px solid var(--wg);
    border-radius: var(--r0); padding: var(--a3); align-items: center; height: auto;
  }
  .wk-tabelle tbody tr:nth-child(even) { background: var(--flaeche); }
  .wk-tabelle td { display: block; padding: 0; border: 0; }
  .wk-bild { grid-area: bild; align-self: start; width: auto; }
  .wk-bild img, .wk-bild .mini-karte { width: 44px; min-width: 44px; height: 44px; }
  .wk-name { grid-area: name; min-width: 0; }
  .wk-preis { grid-area: preis; text-align: left; width: auto; }
  .wk-menge { grid-area: menge; width: auto; }
  .wk-summe { grid-area: summe; text-align: right; width: auto; font-size: var(--t-name-kachel); }
  .wk-weg { grid-area: weg; text-align: right; }

  /* Reine Lesetabellen bleiben Tabellen — dort genügt waagerechtes Scrollen
     innerhalb der Hülle. */
  .bestaetigung .tabelle-huelle, .konto-karte .tabelle-huelle, .seite-konto .tabelle-huelle {
    overflow-x: auto; border: 1px solid var(--linie-stark); background: var(--flaeche);
  }
  .bestaetigung .wk-tabelle, .seite-konto .wk-tabelle { display: table; min-width: 34rem; }
  .bestaetigung .wk-tabelle thead, .seite-konto .wk-tabelle thead { display: table-header-group; }
  .bestaetigung .wk-tabelle tbody, .seite-konto .wk-tabelle tbody { display: table-row-group; }
  .bestaetigung .wk-tabelle tbody tr, .seite-konto .wk-tabelle tbody tr {
    display: table-row; background: var(--flaeche); border: 0;
    border-bottom: 1px solid var(--linie); padding: 0;
  }
  .bestaetigung .wk-tabelle td, .seite-konto .wk-tabelle td { display: table-cell; padding: var(--a2); }
}

/* ≤ 639, Referenz 390 */
@media (max-width: 639px) {
  /* Typo-Warenkarte skaliert mit der schmaleren Kachel — sonst reißt der Name
     das Raster. Die Stufenfolge bleibt erhalten. */
  :root {
    --t-karte-1: 1.5rem; --t-karte-2: 1.3rem; --t-karte-3: 1.125rem; --t-karte-4: 1rem;
  }
  .kachel-raster { gap: var(--a2); }
  /* Vier Staffelzellen wären bei 150 px Kachelbreite je 37 px breit — die
     Preise wären abgeschnitten. Die Einzelstufe steht ohnehin groß darüber,
     also trägt das Band hier die drei Mengenstufen und bekommt eine eigene
     Scrollachse mit Rastung (§9: einer der drei erlaubten Container). */
  .staffel-chips {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr);
    overflow-x: auto; scroll-snap-type: x proximity;
  }
  .staffel-chips li { scroll-snap-align: start; }
  .staffel-chips li:first-child { display: none; }
  .staffel-preis { font-size: var(--t-mikro); }
  .kachel-text { padding: var(--a2) var(--a2) var(--a1); }
  .kachel-fuss { padding: var(--a1) var(--a2) var(--a2); }
  .kachel-name { font-size: var(--t-zelle); min-height: 2.6em; }
  .typo-karte { padding: var(--a2); gap: var(--a1); }
  .marke-zusatz { font-size: 1.1rem; }
  .warenkorb-wort { display: none; }
  .warenkorb-knopf { padding: var(--a2); min-height: 44px; }
  .kopf-link { font-size: var(--t-klein); }
  .buehne-zahlen, .kopfband-zahlen { gap: var(--a4); }
  .warengruppen-raster { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--a2); }
  .wg-kachel { min-height: 88px; padding: var(--a3); }
  .wg-kachel-name { font-size: var(--t-name-kachel); }
  .erfassung-leiste { flex-direction: column; align-items: stretch; min-height: 56px; }
  .erfassung-leiste .btn { width: 100%; min-height: 48px; }
  .daten-liste > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bestell-liste li { grid-template-columns: minmax(0, 1fr) auto; }
  /* Die Staffeltabelle ist einer der drei Container, die eine eigene
     Scrollachse haben dürfen (§9) — die Seite selbst scrollt nie waagerecht. */
  .staffel-tabelle { display: block; overflow-x: auto; }
  .staffel-tabelle th, .staffel-tabelle td { padding: var(--a2) var(--a1); }
  .staffel-tabelle tbody th { font-size: var(--t-name-kachel); }
  .artikel-preis { padding: var(--a4); }
  .zugang-karte { padding: var(--a5); }
  .kategorie-band { min-height: 72px; padding: var(--a4) var(--rand); }
}


/* ============================================================================
   Stufe 2 — Verhalten. Schnellerfassung (§7), Prüfansicht der Sammelerfassung
   und Kontorbeleg (§6.5). Keine neuen Farbrollen, keine Hex-Literale: jede
   Fläche bekommt im selben Regelblock ihren Vordergrund (FEHLER-260).
   ========================================================================== */

/* Kopfband der Erfassungsseite: dieselbe Fläche wie auf der Startseite. */
.kopfband h1 {
  font-family: var(--schrift-display); font-weight: 700; font-size: var(--t-titel-l);
  line-height: 1.15; margin: 0 0 var(--a2); text-transform: uppercase; letter-spacing: .01em;
}
.kopfband > div > p {
  color: var(--schrift-leise); background: var(--flaeche-gesenkt);
  max-width: 66ch; font-size: var(--t-zelle); margin: 0;
}
.kopfband-zahlen dt {
  font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; color: var(--schrift-leise); background: var(--flaeche-gesenkt);
}
.kopfband-zahlen dd {
  margin: 0; font-family: var(--schrift-zahl); font-size: var(--t-titel-s);
  font-weight: 600; line-height: 1.1; color: var(--schrift); background: var(--flaeche-gesenkt);
}

/* ── Werkzeugleiste der Erfassung ─────────────────────────────────────────── */
.erf-werkzeuge {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--a3) var(--a5); margin: 0 0 var(--a5);
}
.erf-filter {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--a3); min-width: 0;
}
.erf-filter .feld { margin: 0; min-width: 0; }
.erf-filter input[type="search"] { min-width: 0; width: min(22rem, 100%); }
.erf-filter select { min-width: 0; max-width: 100%; }
.erf-wechsel {
  margin: 0; font-size: var(--t-klein);
  color: var(--schrift-leise); background: transparent;
}

/* ── Tastenlegende (§7.2) ─────────────────────────────────────────────────────
   Eine Tastenbelegung, die man nicht kennt, gibt es nicht: die Legende steht
   dauerhaft und ruhig auf der Seite, nicht in einem Aufklapp-Hilfefenster.   */
.erf-legende {
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--linie-stark); border-radius: var(--r2);
  padding: var(--a4); margin: 0 0 var(--a5);
}
.erf-legende h2 {
  font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; color: var(--schrift-leise); background: var(--flaeche);
  margin: 0 0 var(--a3);
}
.tasten-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--a1) var(--a5); margin: 0;
}
.tasten-liste > div {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--a2); align-items: baseline;
}
.tasten-liste dt { margin: 0; }
.tasten-liste dd {
  margin: 0; min-width: 0; font-size: var(--t-klein);
  color: var(--schrift-leise); background: var(--flaeche);
}
.tasten-liste kbd {
  display: inline-block; white-space: nowrap;
  font-family: var(--schrift-zahl); font-size: var(--t-mikro); font-weight: 600;
  background: var(--flaeche-gesenkt); color: var(--schrift);
  border: 1px solid var(--linie-stark); border-radius: var(--r1);
  padding: 1px var(--a1);
}
.erf-legende-fuss {
  margin: var(--a3) 0 0; font-size: var(--t-klein);
  color: var(--schrift-leise); background: var(--flaeche); max-width: 76ch;
}

/* Rückgängig-Zeile nach dem Löschen einer Position: kein Modal, 8 s Standzeit. */
.erf-rueckgaengig {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3);
  margin: var(--a3) 0 0; padding: var(--a2) var(--a3);
  background: var(--warn-flaeche); color: var(--schrift);
  border: 1px solid var(--warn); border-radius: var(--r2);
  font-size: var(--t-zelle);
}
.erf-rueckgaengig[hidden] { display: none; }

/* Staffelzelle als Knopf (§8.1). Der Ton bleibt am Band — Bedienelemente sind
   nie warengruppenfarbig, die einzige gesättigte Fläche hier ist das Amberband. */
.ez-staffel button.sb-zelle {
  appearance: none; -webkit-appearance: none;
  border-top: 0; border-left: 0; border-bottom: 0;
  display: block; width: 100%; height: 100%; cursor: pointer;
  font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--t-klein); text-align: right;
  background: var(--flaeche); color: var(--schrift);
}
.ez-staffel button.sb-zelle:hover {
  background: var(--aktion-leise); color: var(--schrift);
}
.ez-staffel button.sb-zelle[aria-current="true"] {
  background: var(--band); color: var(--band-schrift); font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--signal);
}

/* ── Sammelerfassung: Einfügefeld ─────────────────────────────────────────── */
.einfuegen {
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--linie-stark); border-radius: var(--r2);
  padding: var(--a5); margin: var(--a7) 0 0;
}
.einfuegen h2 {
  font-family: var(--schrift-display); font-weight: 700; font-size: var(--t-titel-m);
  text-transform: uppercase; letter-spacing: .02em; margin: 0 0 var(--a2);
}
.einfuegen-text, .einfuegen-hinweis {
  color: var(--schrift-leise); background: var(--flaeche);
  font-size: var(--t-klein); max-width: 76ch; margin: 0 0 var(--a3);
}
.einfuegen-hinweis { margin: var(--a3) 0 0; }
.einfuege-feld {
  display: block; width: 100%; min-width: 0; resize: vertical;
  font-family: var(--schrift-zahl); font-size: var(--t-basis); line-height: 1.5;
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--linie-feld); border-radius: var(--r2);
  padding: var(--a3);
}
.einfuegen-knoepfe {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3);
  margin: var(--a3) 0 0;
}
.datei-wahl {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--a2);
  font-size: var(--t-klein); color: var(--schrift-leise); background: var(--flaeche);
  min-width: 0;
}
.datei-wahl input[type="file"] { max-width: 100%; min-width: 0; font-size: var(--t-klein); }

/* ── Prüfansicht der eingefügten Liste (§7.3) ─────────────────────────────── */
.pruef-tabelle {
  width: 100%; min-width: 52rem; border-collapse: collapse;
  background: var(--flaeche); color: var(--schrift);
}
.pruef-tabelle th, .pruef-tabelle td {
  padding: var(--a2); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--linie);
}
.pruef-tabelle thead th {
  background: var(--flaeche-gesenkt); color: var(--schrift-leise);
  font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; border-bottom: 2px solid var(--linie-stark);
}
.pruef-tabelle tbody tr { background: var(--flaeche); color: var(--schrift); }
.pz-roh { width: 15rem; }
.pz-roh code {
  font-family: var(--schrift-zahl); font-size: var(--t-code);
  background: var(--flaeche-zebra); color: var(--schrift);
  padding: 1px var(--a1); border-radius: var(--r1);
  word-break: break-word;
}
.pz-nr {
  display: inline-block; min-width: 2.5ch; margin-right: var(--a2);
  font-size: var(--t-mikro); color: var(--schrift-leise); background: transparent;
}
.pz-zuordnung { min-width: 16rem; }
.pz-artikel { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--a3); align-items: start; }
.pz-bild img, .pz-bild .mini-karte { width: 32px; min-width: 32px; height: 32px; object-fit: contain; }
.pz-text { min-width: 0; display: grid; gap: 2px; }
.pz-text a { font-weight: 500; font-size: var(--t-zelle); }
.pz-meta { font-size: var(--t-mikro); color: var(--schrift-leise); background: transparent; }
.pz-gruppe {
  font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; color: var(--wg); background: transparent;
}
.pz-wahl { display: grid; gap: var(--a2); margin-top: var(--a2); }
.pz-wahl select { max-width: 100%; min-width: 0; }
.pz-hinweis {
  margin: var(--a2) 0 0; font-size: var(--t-klein);
  color: var(--schrift-leise); background: transparent;
}
.pz-menge { width: 7rem; }
.pz-menge .menge-eingabe {
  width: 100%; border: 1px solid var(--linie-feld); border-radius: var(--r2);
  background: var(--flaeche); color: var(--schrift);
}
.pz-strich {
  display: block; width: 3ch; height: 1px; margin-top: var(--a4);
  background: var(--linie-stark);
}
.pz-preis, .pz-summe { width: 8rem; text-align: right; white-space: nowrap; }
.pz-zustand { width: 9rem; }
.pz-marke {
  display: inline-block; font-size: var(--t-mikro); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 1px var(--a2); border-radius: var(--r-voll);
  background: var(--ok-flaeche); color: var(--ok);
}
.pz-mehrdeutig .pz-marke { background: var(--warn-flaeche); color: var(--warn); }
.pz-unbekannt .pz-marke, .pz-ohne_preis .pz-marke { background: var(--fehler-flaeche); color: var(--fehler); }
.pz-zusammengefasst .pz-marke { background: var(--flaeche-gesenkt); color: var(--schrift-leise); }
.pruef-tabelle tbody tr.pz-mehrdeutig { background: var(--warn-flaeche); color: var(--schrift); }
.pruef-tabelle tbody tr.pz-unbekannt,
.pruef-tabelle tbody tr.pz-ohne_preis { background: var(--fehler-flaeche); color: var(--schrift); }
.pruef-knoepfe {
  display: flex; flex-wrap: wrap; gap: var(--a3); align-items: center;
  margin: var(--a5) 0 var(--a3);
}

/* ── Kontorbeleg auf dem Bildschirm (§6.5) ────────────────────────────────── */
.beleg {
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--linie-stark); border-radius: var(--r2);
  padding: var(--a6); margin: var(--a6) 0 var(--a9); max-width: 60rem;
}
.beleg-kopf {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--a5);
  align-items: flex-start;
  border-bottom: 2px solid var(--linie-stark); padding-bottom: var(--a4); margin-bottom: var(--a4);
}
.beleg-marke { display: grid; gap: 2px; min-width: 0; }
.beleg-haus {
  font-family: var(--schrift-display); font-weight: 700; font-size: var(--t-titel-m);
  text-transform: uppercase; letter-spacing: .02em; color: var(--schrift); background: var(--flaeche);
}
.beleg-art {
  font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; color: var(--schrift-leise); background: var(--flaeche);
}
.beleg-daten { display: flex; flex-wrap: wrap; gap: var(--a5); margin: 0; }
.beleg-daten > div { display: grid; gap: 2px; }
.beleg-daten dt {
  font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; color: var(--schrift-leise); background: var(--flaeche);
}
.beleg-daten dd {
  margin: 0; font-family: var(--schrift-zahl); font-weight: 600;
  color: var(--schrift); background: var(--flaeche);
}
.beleg-status {
  background: var(--ok-flaeche); color: var(--schrift);
  border: 1px solid var(--ok); border-radius: var(--r2);
  padding: var(--a2) var(--a3); font-size: var(--t-zelle); margin: 0 0 var(--a5);
}
.beleg-anschriften {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--a5); margin: 0 0 var(--a5);
}
.beleg-block { min-width: 0; }
.beleg-block h2 {
  font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; color: var(--schrift-leise); background: var(--flaeche);
  margin: 0 0 var(--a2);
}
.beleg-block address { font-style: normal; font-size: var(--t-basis); line-height: 1.5; }
.beleg-block p { margin: 0 0 var(--a1); }
.beleg-klein { font-size: var(--t-klein); color: var(--schrift-leise); background: var(--flaeche); }

.beleg-tabelle {
  width: 100%; border-collapse: collapse; margin: 0 0 var(--a5);
  background: var(--flaeche); color: var(--schrift);
}
.beleg-tabelle th, .beleg-tabelle td {
  padding: var(--a2); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--linie);
}
.beleg-tabelle thead th {
  background: var(--flaeche-gesenkt); color: var(--schrift-leise);
  font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; border-bottom: 2px solid var(--linie-stark);
}
.bt-pos { width: 3rem; text-align: right; }
.bt-sku { width: 9rem; }
.bt-name { min-width: 12rem; }
.bt-menge { width: 5rem; text-align: right; }
.bt-preis, .bt-summe { width: 8rem; text-align: right; white-space: nowrap; }
.beleg-tabelle th.bt-pos, .beleg-tabelle th.bt-menge,
.beleg-tabelle th.bt-preis, .beleg-tabelle th.bt-summe { text-align: right; }
.bt-wg {
  display: inline-block; width: 10px; height: 10px; margin-right: var(--a2);
  background: var(--wg); border-radius: var(--r1); vertical-align: baseline;
}
.bt-artikel { font-weight: 500; }
.bt-ean, .bt-staffel { display: block; font-size: var(--t-mikro); }
.bt-ean { color: var(--schrift-leise); background: transparent; }
.bt-staffel {
  margin-top: 2px; font-weight: 600;
  color: var(--band-schrift); background: var(--band);
  padding: 0 var(--a1); border-radius: var(--r1); width: fit-content;
}
.beleg-summe { margin: 0 0 var(--a5); }
.beleg-fuss {
  font-size: var(--t-klein); color: var(--schrift-leise); background: var(--flaeche);
  border-top: 1px solid var(--linie); padding-top: var(--a3); max-width: 76ch;
}
.beleg-knoepfe {
  display: flex; flex-wrap: wrap; gap: var(--a3); align-items: center;
  margin: var(--a5) 0 0;
}
.beleg-knoepfe form { margin: 0; }

/* Bruchstellen der neuen Ansichten. Waagerechter Überlauf ist ein Fehler —
   die breiten Tabellen bekommen ihre eigene Scrollachse in der Hülle. */
@media (max-width: 1023px) {
  .pruef-tabelle { min-width: 44rem; }
}
@media (max-width: 760px) {
  .erf-werkzeuge { flex-direction: column; align-items: stretch; }
  .erf-filter { flex-direction: column; align-items: stretch; }
  .erf-filter input[type="search"] { width: 100%; }
  .tasten-liste { grid-template-columns: minmax(0, 1fr); }
  .erf-legende, .einfuegen, .beleg { padding: var(--a4); }
  .beleg { margin-inline: 0; }
  .pruef-tabelle { min-width: 34rem; }
  .pz-roh { width: 8rem; }
  .pz-preis, .pz-summe, .pz-zustand { width: auto; }
  .beleg-kopf { flex-direction: column; }
  /* Aus jeder Belegzeile wird eine Karte. Eine sechsspaltige Positionstabelle
     passt bei 390 px nicht — und die Seite darf nicht waagerecht scrollen. */
  .beleg-tabelle { display: block; font-size: var(--t-zelle); }
  .beleg-tabelle thead { display: none; }
  .beleg-tabelle tbody { display: block; }
  .beleg-tabelle tbody tr {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "name name name" "sku sku sku" "menge preis summe";
    gap: var(--a1) var(--a3); padding: var(--a3) 0;
    border-bottom: 1px solid var(--linie);
    background: var(--flaeche); color: var(--schrift);
  }
  .beleg-tabelle td { display: block; padding: 0; border: 0; width: auto; min-width: 0; }
  .bt-pos { display: none; }
  .bt-name { grid-area: name; min-width: 0; }
  .bt-sku {
    grid-area: sku; font-family: var(--schrift-zahl); font-size: var(--t-mikro);
    color: var(--schrift-leise); background: var(--flaeche);
  }
  .bt-menge { grid-area: menge; text-align: left; }
  .bt-menge::after { content: " ×"; color: var(--schrift-leise); background: var(--flaeche); }
  .bt-preis { grid-area: preis; text-align: left; }
  .bt-summe { grid-area: summe; text-align: right; font-weight: 600; }
}

/* ── Bewegung (§10) ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
  .erfassung-leiste { transition: none; }
}

/* ── Druck: der Beleg ist ein Dokument für den Ordner hinter der Theke ────── */
@media print {
  .kopf, .fuss, .katalog-werkzeuge, .menge-form, .erfassung-leiste,
  .warenkorb-aktionen, .skip, .blaetterung, .warengruppen { display: none !important; }
  body { background: var(--druck-flaeche); color: var(--druck-schrift); font-size: 11pt; }
  main { max-width: none; padding: 0; }
  .tabelle-huelle { border: 0; overflow: visible; }
  .wk-tabelle, .erfass-tabelle { min-width: 0; }
  .wk-tabelle tbody tr, .erfass-tabelle tbody tr {
    border-left: 0; background: var(--druck-flaeche); color: var(--druck-schrift);
    border-bottom: 1px solid var(--druck-linie); break-inside: avoid;
  }
  .wk-tabelle thead th {
    background: var(--druck-flaeche); color: var(--druck-schrift);
    border-bottom: 1px solid var(--druck-schrift);
  }
  .kategorie-band, .wg-kachel, .typo-karte {
    background: var(--druck-flaeche) !important; color: var(--druck-schrift) !important;
  }
  a { text-decoration: none; }
}