/* ===========================================================   LotzApp B2B — Nachbestellen (WooCommerce account endpoint)
   Work block I. Tokens: assets/css/b2b-tokens.css.

   Block I shipped without a stylesheet: `Account_Page` enqueued a
   script and nothing else, so the page rendered its markup as a
   bullet list with browser-default controls. It worked and it did not
   look built.

   Every rule is scoped to .lotzwoo-reorder. This is an endpoint inside
   WooCommerce's own account template, sitting between the theme's
   navigation and the theme's footer — it may not repaint either. No
   custom property is defined here; they all come from the shared
   token file, which is why the two surfaces cannot drift apart.

   The prototype (docs/mockups/prototype/account.html) draws this as a
   table with "damals / heute" columns and a status pill per line. The
   markup is a list, because that is what block I built and what its
   suite holds. This dresses that list to read like the table: the same
   columns in the same order, on a grid, collapsing to stacked rows on
   narrow screens where a six-column table would be unreadable anyway.
   ================================================================== */

.lotzwoo-reorder {
  margin: 0 0 var(--lwb-sp-6);

  /* Widths here follow the container, not the viewport. This endpoint renders
     inside WooCommerce's account template, whose content column is narrow on a
     wide screen — a viewport breakpoint reports 1400px while the lines have 590
     to share, and the article names wrap one word per row. */
  container-type: inline-size;
  container-name: lotzwoo-reorder;
}

/* ---------------- Head ---------------- */

.lotzwoo-reorder__head {
  margin-bottom: var(--lwb-sp-4);
}

.lotzwoo-reorder__head h2,
.lotzwoo-reorder__head h3 {
  font-size: var(--lwb-fs-xl);
  margin-bottom: var(--lwb-sp-2);
}

.lotzwoo-reorder__intro {
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-md);
  max-width: 68ch;
}

.lotzwoo-reorder__status {
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-md);
  margin-bottom: var(--lwb-sp-3);
}

.lotzwoo-reorder__status:empty { display: none; }

/* ---------------- One past order ---------------- */

/* Die Bestellkarte ist ein Vordergrund-Gegenstand — dieselbe Art Ding wie
   die Sortimentstabelle im Shop: ein abgegrenztes Stück, mit dem man etwas
   tut. Sie nimmt deshalb die drei Token der Rolle zusammen, wie der
   Kopfkommentar von `b2b-tokens.css` es vorschreibt, und nicht `--lwb-front`
   allein: auf einem weißen Basistheme fallen Grund und Vordergrund farblich
   zusammen, und nur Kante und Schatten heben noch.

   Entschieden von der Mastersession am 2026-08-13. Der Grund liegt über der
   Optik: der Kunde soll die Konto-Seiten als denselben Shop erkennen, in dem
   er eben bestellt hat. Zwei Flächensprachen in einer Anwendung lesen sich
   wie zwei Anwendungen.

   **Genau drei Flächen tragen die Vordergrund-Rolle**, und die Liste ist der
   widersprechbare Teil dieser Änderung:

     .lotzwoo-reorder__order      die Bestellkarte
     .lotzwoo-favorites__table    die Favoritenliste   (bis AP-77: __card)
     .lotzwoo-locations__card     die Ortskarte

   **Die mittlere hat mit AP-77 ihren Träger gewechselt, nicht ihre Rolle.**
   Bis zum 2026-08-21 war jeder Favorit eine Karte und trug sie einzeln; seit
   C3 ist die Fläche eine Liste, und die Rolle sitzt an der Liste. Das ist
   dieselbe Anordnung, die der Absatz oben schon als Vorbild nennt: im Shop
   trägt `.lwb-table` Kontur und Schatten, `.lwb-row` nur eine Trennlinie.
   Hätte jede Zeile die Rolle behalten, wäre die Liste eine Spalte Karten mit
   engerem Rand — und C3 wäre nicht gebaut. **Die Zahl drei steht unverändert;
   es ist derselbe Satz mit einem anderen Selektor.**

   Die übrigen sieben Flächen auf `--lwb-surface` behalten sie: Knöpfe
   (`__all`, `__submit`, `__add`, `__bulk-action`, `__more .button`),
   Auswahlfelder (`__termin`, `__select`), Pillen (`__pill`), das Mengenfeld
   (`__qty`) und der aktive Ortsknopf (`__set--active`). Hebt man die mit,
   schwebt die ganze Seite und nichts steht mehr vorn. Die fünf Vorkommen von
   `--lwb-surface` als *Schriftfarbe* auf markenfarbenen Knöpfen sind keine
   Flächen und bleiben, was sie sind. */
.lotzwoo-reorder__order {
  border: 1px solid var(--lwb-front-border);
  border-radius: var(--lwb-r-lg);
  background: var(--lwb-front);
  box-shadow: var(--lwb-front-shadow);
  margin-bottom: var(--lwb-sp-4);
  overflow: hidden;
}

.lotzwoo-reorder__order-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--lwb-sp-2) var(--lwb-sp-3);
  padding: var(--lwb-sp-3) var(--lwb-sp-4);
  border-bottom: 1px solid var(--lwb-ink-100);
  background: var(--lwb-ink-50);
}

.lotzwoo-reorder__order-head strong {
  color: var(--lwb-ink-900);
  font-size: var(--lwb-fs-base);
  font-variant-numeric: tabular-nums;
}

.lotzwoo-reorder__order-head time {
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-sm);
  font-variant-numeric: tabular-nums;
}

.lotzwoo-reorder__ort {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--lwb-r-full);
  background: var(--lwb-brand-50);
  color: var(--lwb-brand-700);
  font-size: var(--lwb-fs-xs);
  font-weight: 600;
}

/* ---------------- Lines ---------------- */

.lotzwoo-reorder__lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Stacked by default: the article across the top, quantity and price
   beneath it. This is what a narrow account column gets, and it is the
   layout every browser gets if it does not do container queries — the
   readable one, not the broken one. The table shape is the upgrade. */
.lotzwoo-reorder__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--lwb-sp-1) var(--lwb-sp-3);
  align-items: baseline;
  padding: var(--lwb-sp-3) var(--lwb-sp-4);
  border-bottom: 1px solid var(--lwb-ink-100);
}

.lotzwoo-reorder__line > .lotzwoo-reorder__label { grid-column: 1 / -1; }
.lotzwoo-reorder__line > .lotzwoo-reorder__note { grid-column: 1 / -1; }

.lotzwoo-reorder__line:last-child { border-bottom: 0; }

/* FR-ORD-04: a conflict line stays visible and cannot be picked. The
   same hatching the shop uses for a blocked row, so "you cannot order
   this" looks identical in both places rather than needing to be
   learned twice. */
.lotzwoo-reorder__line--conflict {
  background: var(--lwb-hatch-blocked);
  color: var(--lwb-ink-500);
}

/* **Die Artikelnummer darf umbrechen, das Wort nicht** (2026-08-26).

   Name, Variante und Artikelnummer stehen in **einer** Reihe, und die
   Nummer ist lang („Artikelnummer seed-art-020-holunder-1x"). Ohne
   Umbruch nahm sie ihren vollen Platz und drueckte den Namen auf rund
   120 px — „Barsirup Gastro-Serie 0,7 l · Holunder · 1x" stand dann auf
   fuenf Zeilen, und „Holunder" brach mitten im Wort.

   `flex-wrap: wrap` plus `margin-inline-start: auto` an der Nummer: passt
   sie neben den Namen, steht sie rechts; passt sie nicht, nimmt sie die
   naechste Zeile ganz. Der Name behaelt in beiden Faellen seine Breite. */
.lotzwoo-reorder__label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--lwb-sp-1) var(--lwb-sp-2);
  min-width: 0;
  cursor: pointer;
}

.lotzwoo-reorder__label .lotzwoo-reorder__name { min-width: 0; }

.lotzwoo-reorder__label .lotzwoo-reorder__article { margin-inline-start: auto; }

.lotzwoo-reorder__line--conflict .lotzwoo-reorder__label { cursor: not-allowed; }

.lotzwoo-reorder__check {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--lwb-brand-500);
  cursor: inherit;
}

.lotzwoo-reorder__check:focus-visible {
  outline: none;
  box-shadow: var(--lwb-focus);
}

.lotzwoo-reorder__check[disabled] { cursor: not-allowed; }

.lotzwoo-reorder__name {
  min-width: 0;
  color: var(--lwb-ink-900);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.lotzwoo-reorder__line--conflict .lotzwoo-reorder__name { color: var(--lwb-ink-600); }

.lotzwoo-reorder__variant {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: var(--lwb-r-sm);
  background: var(--lwb-ink-100);
  color: var(--lwb-ink-600);
  font-size: var(--lwb-fs-2xs);
  font-weight: 600;
}

/* AP-36: die Artikelnummer der Position. Gedämpft und mit Tabellenziffern —
   sie steht zum Abgleichen mit einem Lieferschein da, nicht zum Lesen. */
.lotzwoo-reorder__article {
  flex: 0 0 auto;
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-2xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lotzwoo-reorder__qty {
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-sm);
  font-variant-numeric: tabular-nums;
}

.lotzwoo-reorder__price {
  color: var(--lwb-ink-900);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* FR-ORD-06: today's price is the one that counts, so it stays the
   loud one; the price paid last time sits beneath it, struck through
   and quiet. Only rendered when the two differ. */
.lotzwoo-reorder__price-was {
  display: block;
  color: var(--lwb-ink-400);
  font-size: var(--lwb-fs-xs);
  font-weight: 400;
}

/* The reason a line is held back, or the warning that lets it through.
   Coloured by the state of the line it sits in rather than by a class
   of its own, because the script writes one note either way. */
.lotzwoo-reorder__note {
  font-size: var(--lwb-fs-xs);
  line-height: 1.35;
}

.lotzwoo-reorder__line--warning .lotzwoo-reorder__note { color: var(--lwb-warn-500); }
.lotzwoo-reorder__line--conflict .lotzwoo-reorder__note { color: var(--lwb-err-700); }

/* ---------------- Batch bar ---------------- */

.lotzwoo-reorder__batch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--lwb-sp-2) var(--lwb-sp-3);
  padding: var(--lwb-sp-3) var(--lwb-sp-4);
  border-top: 1px solid var(--lwb-ink-100);
  background: var(--lwb-ink-50);
}

.lotzwoo-reorder__submit { margin-left: auto; }

/* WooCommerce ships `.button` and most themes restyle it. These rules
   are deliberately specific enough to win without !important: the
   buttons carry `.button` *and* a block class, so one extra class
   beats a theme's plain `.button`. */
.lotzwoo-reorder .lotzwoo-reorder__all,
.lotzwoo-reorder .lotzwoo-reorder__submit,
.lotzwoo-reorder__pager .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lwb-sp-2);
  padding: 8px 15px;
  border: 1px solid var(--lwb-ink-200);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-surface);
  color: var(--lwb-ink-700);
  font: inherit;
  font-size: var(--lwb-fs-md);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 110ms ease, border-color 110ms ease;
}

.lotzwoo-reorder .lotzwoo-reorder__all:hover,
.lotzwoo-reorder__pager .button:hover { background: var(--lwb-ink-100); }

.lotzwoo-reorder .lotzwoo-reorder__submit {
  border-color: var(--lwb-brand-500);
  background: var(--lwb-brand-500);
  color: var(--lwb-surface);
}

.lotzwoo-reorder .lotzwoo-reorder__submit:hover {
  border-color: var(--lwb-brand-600);
  background: var(--lwb-brand-600);
}

.lotzwoo-reorder .lotzwoo-reorder__all:focus-visible,
.lotzwoo-reorder .lotzwoo-reorder__submit:focus-visible,
.lotzwoo-reorder__pager .button:focus-visible {
  outline: none;
  box-shadow: var(--lwb-focus);
}

/* Disabled is the resting state of the submit until something is
   ticked, so it has to read as "not yet", not as "broken". */
.lotzwoo-reorder .lotzwoo-reorder__all[disabled],
.lotzwoo-reorder .lotzwoo-reorder__submit[disabled],
.lotzwoo-reorder__pager .button[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.lotzwoo-reorder__termin {
  padding: 7px 10px;
  border: 1px solid var(--lwb-ink-200);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-surface);
  color: var(--lwb-ink-700);
  font: inherit;
  font-size: var(--lwb-fs-md);
  max-width: 100%;
}

.lotzwoo-reorder__termin:focus-visible {
  outline: none;
  border-color: var(--lwb-brand-500);
  box-shadow: var(--lwb-focus);
}

/* A Termin past its cutoff is listed and disabled rather than hidden,
   so the date the customer is looking for says why it is unavailable
   instead of being absent. Some browsers render that at full contrast. */
.lotzwoo-reorder__termin option[disabled] { color: var(--lwb-ink-400); }

/* ---------------- Pager ---------------- */

.lotzwoo-reorder__pager {
  display: flex;
  gap: var(--lwb-sp-2);
  justify-content: flex-end;
  margin-top: var(--lwb-sp-4);
}

/* ---------------- Wide enough for the table shape ---------------- */

/* Only when the *container* has room. The prototype's columns, in its
   order: select + article, quantity, price, status. `minmax(0, 1fr)`
   rather than `1fr` so a long article name wraps inside its column
   instead of pushing the price off the card. */
@container lotzwoo-reorder (min-width: 640px) {
  .lotzwoo-reorder__line {
    grid-template-columns: minmax(0, 1fr) 70px 120px;
    column-gap: var(--lwb-sp-3);
  }

  /* **Eine Vorlage fuer jede Bestellkarte** (2026-08-26, angefordert:
     „das Spaltenlayout soll ueber alle Tabellen gleich sein").

     Hier stand ein zweiter Zweig: Karten **mit** Hinweiszeile bekamen vier
     Spalten, Karten **ohne** drei. Auf einer Seite mit beiden Sorten standen
     Menge und Preis damit je Karte an einer anderen Stelle — dieselbe
     Angabe, zwei Fluchten.

     **`min-content` war angefragt und geht hier nicht**, und das ist kein
     Detail: jede Bestellkarte ist ihr **eigenes** Raster. `min-content`
     bemisst eine Spalte an dem, was in *diesem* Raster steht — eine Karte mit
     dreistelligen Mengen bekaeme eine breitere Mengenspalte als die daneben,
     und die Fluchten liefen wieder auseinander. Zwischen getrennten Rastern
     richtet nur ein **fester** Wert aus. Die 70 und 120 px sind genau das,
     und sie halten Menge und Preis, die beide kurz und tabellarisch sind.

     Die Hinweiszeile nimmt stattdessen auf jeder Breite die volle Zeile
     (`grid-column: 1 / -1`, weiter oben). Damit bleibt der Befund von AP-70
     C2 erfuellt — keine leere Spalte, die 190 px nimmt —, ohne dass die
     Vorlage je Karte wechselt.

     Der urspruengliche Befund, zur Erinnerung:

     Gemessen am 2026-08-20 an echten Zeilen: Container **653 px**, gerechnete
     Spalten `202,8 / 70 / 120 / 190` — und die Zeile hatte **drei** Kinder.
     Die vierte Spalte war leer und nahm trotzdem 190 px, also 29 % der
     Breite. Genau das ist der Freiraum rechts aussen, den der Auftraggeber
     gemeldet hat, und genau deshalb wirkte die Artikelspalte gestaucht,
     obwohl sie `minmax(0, 1fr)` ist: sie waechst in das, was uebrig bleibt,
     und uebrig blieb wenig.

     **Warum `:has()` an der Liste und nicht `auto` an der Spalte.** Jede
     Zeile ist ihr **eigenes** Rasterelement. Ein `minmax(0, auto)` bemaesse
     die Spalte je Zeile einzeln — eine Zeile mit Hinweis bekaeme eine breite,
     eine ohne eine schmale, und weil die Artikelspalte den Rest nimmt,
     staenden Menge und Preis in jeder Zeile an einer anderen Stelle. Die
     Frage ist nicht „hat *diese* Zeile einen Hinweis", sondern „hat
     **irgendeine** Zeile dieser Bestellung einen" — und das ist genau, was
     `:has()` an der Liste beantwortet. Die Zeilen bleiben untereinander
     ausgerichtet, und ohne Hinweise faellt die Spalte ganz weg.

     Gemessen nach der Aenderung: die Artikelspalte steht bei **404,8** statt
     202,8 px, dieselbe Bestellung, dieselbe Containerbreite. */
  .lotzwoo-reorder__line > .lotzwoo-reorder__label { grid-column: auto; }

  .lotzwoo-reorder__qty { text-align: right; }
}

/* ---------------- Narrow: full-width controls ---------------- */

@container lotzwoo-reorder (max-width: 520px) {
  .lotzwoo-reorder__batch { align-items: stretch; }

  .lotzwoo-reorder__submit { margin-left: 0; }

  .lotzwoo-reorder .lotzwoo-reorder__all,
  .lotzwoo-reorder .lotzwoo-reorder__submit,
  .lotzwoo-reorder__termin { width: 100%; }
}

/* ===========================================================   LotzApp B2B — Favoriten (WooCommerce account endpoint)

   Posten 8 der Karte `plugin-flaechen-kaufweg`. Dasselbe Stylesheet
   wie das Nachbestellen darüber, weil beide Endpunkte im selben
   Konto-Template sitzen und einen Klick auseinanderliegen: zwei
   Dateien wären zwei Orte, an denen derselbe Knopf anders aussieht.

   Kein Token wird hier definiert; sie kommen alle aus
   assets/css/b2b-tokens.css, das .lotzwoo-favorites als dritte Wurzel
   führt. Jede Regel ist auf .lotzwoo-favorites verankert — ein
   Endpunkt rendert zwischen der Navigation und dem Fuß des Themes und
   darf keinen von beiden umfärben.

   Das Kartenraster ist das des Prototyps (docs/mockups/prototype/
   account.html, Abschnitt „Favoriten"): Karte mit Kopf, Gebinde-Pills,
   Preis und Fußleiste. Die Breiten folgen dem Container, nicht dem
   Viewport — dieselbe Falle wie nebenan, wo ein Viewport-Breakpoint
   1400px meldete, während die Zeilen 590 zu teilen hatten.
   ================================================================== */

.lotzwoo-favorites {
  margin: 0 0 var(--lwb-sp-6);
  container-type: inline-size;
  container-name: lotzwoo-favorites;
}

/* ---------------- Head ---------------- */

.lotzwoo-favorites__head { margin-bottom: var(--lwb-sp-4); }

.lotzwoo-favorites__head h2 {
  font-size: var(--lwb-fs-xl);
  margin-bottom: var(--lwb-sp-2);
}

.lotzwoo-favorites__intro {
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-md);
  max-width: 68ch;
}

.lotzwoo-favorites__status {
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-md);
  margin-bottom: var(--lwb-sp-3);
}

.lotzwoo-favorites__status:empty { display: none; }

.lotzwoo-favorites__status a { color: var(--lwb-brand-600); }

/* ---------------- Sammelleiste ---------------- */

.lotzwoo-favorites__bulk {
  border: 1px solid var(--lwb-ink-200);
  border-radius: var(--lwb-r-lg);
  background: var(--lwb-ink-50);
  margin-bottom: var(--lwb-sp-4);
}

.lotzwoo-favorites__bulk-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--lwb-sp-2) var(--lwb-sp-3);
  padding: var(--lwb-sp-3) var(--lwb-sp-4);
}

.lotzwoo-favorites__bulk-count,
.lotzwoo-favorites__bulk-partial {
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-sm);
}

.lotzwoo-favorites__bulk-action { margin-left: auto; }

/* ---------------- Die Liste: eine Zeile je Favorit (AP-77) ---------------- */

/* **Warum eine Liste und kein Kartenraster.** Bis zum 2026-08-21 war jeder
   Favorit eine Karte, und ab 560 px Container standen zwei nebeneinander. An
   dieser Bank gemessen, vor der ersten geänderten Zeile: der Inhaltsbereich
   des Kontos hat auf 1440 px **652,8 px**, die Karten waren **345 px** hoch,
   drei Einträge kosteten **626,9 px** — auf 390 px **994,1 px**. Und die
   Preiskanten standen bei **564 und 899 px**, also nirgends untereinander:
   ein Kartenraster kann nicht fluchten, das ist keine Nachlässigkeit, sondern
   seine Bauart.

   Der Zuschnitt ist deshalb der der **Sortimentstabelle**, absichtlich Zeile
   für Zeile derselbe (`b2b-shop.css`, `.lwb-table` / `.lwb-row`): die Rolle
   an der Tabelle, eine Trennlinie je Zeile, ein Raster für Kopf und Körper.
   Der Kunde soll das Konto als denselben Shop lesen, in dem er eben bestellt
   hat — der Satz steht seit dem 2026-08-13 über der Bestellkarte, und C3 ist
   das erste Mal, dass er auch für die Anordnung gilt und nicht nur für die
   Farbe. */

/* Vordergrund-Rolle — sie ist mit AP-77 von der Karte hierher gewandert.
   Siehe den Kommentar über `.lotzwoo-reorder__order`, der die drei Flächen
   führt. */
.lotzwoo-favorites__table {
  border: 1px solid var(--lwb-front-border);
  border-radius: var(--lwb-r-lg);
  background: var(--lwb-front);
  box-shadow: var(--lwb-front-shadow);
  overflow: hidden;
}

/* Der Leerzustand ist eine Aussage und keine Tabelle: er bringt seinen
   eigenen gestrichelten Rahmen mit, und zwei Rahmen ineinander sähen aus wie
   ein Fehler. */
.lotzwoo-favorites__table:has(> .lotzwoo-favorites__empty) {
  border: 0;
  background: none;
  box-shadow: none;
}

/* **Kopf und Zeile teilen eine Rasterangabe.** Zwei Angaben wären zwei Orte,
   an denen die Spalten auseinanderlaufen können — und das fiele erst dem
   Kunden auf, weil keine Prüfung eine Kopfzeile gegen ihre Zeilen hält. Diese
   Suite tut es (`ap77-favoritenliste`), und sie kann es nur, weil hier eine
   Angabe steht. */
.lotzwoo-favorites__thead,
.lotzwoo-favorites__row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 116px 208px;
  gap: var(--lwb-sp-3);
  align-items: start;
  padding: var(--lwb-sp-2) var(--lwb-sp-4);
}

.lotzwoo-favorites__thead {
  background: var(--lwb-ink-50);
  border-bottom: 1px solid var(--lwb-ink-200);
  font-size: var(--lwb-fs-2xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--lwb-ink-500);
  font-weight: 600;
}

.lotzwoo-favorites__row { border-bottom: 1px solid var(--lwb-ink-100); }
.lotzwoo-favorites__row:last-child { border-bottom: 0; }
.lotzwoo-favorites__row:hover { background: var(--lwb-ink-50); }

/* FR-FAV-03: gesperrt heißt gedämpft und schraffiert, nicht weg. Die
   Schraffur ist dieselbe wie in der Sortimentstabelle, damit derselbe
   Zustand auf beiden Flächen gleich aussieht.

   `background-image` und nicht `background`: die Kurzform setzte auch
   `background-color` zurück und nahm der gesperrten Karte damit ihre Fläche.
   Solange die Fläche `--lwb-surface` war, fiel das nicht auf — sie und der
   Seitengrund trugen dieselbe Farbe. Mit `--lwb-front` fiele die gesperrte
   Karte als einzige aus dem Vordergrund heraus, und zwar nicht als Aussage,
   sondern als Nebenwirkung einer Kurzschreibweise. Am 2026-08-13 auf Bersta
   gemessen: vorher `transparent`, nachher die Fläche der Karte mit der
   Schraffur darüber.

   **Für die Zeile gilt derselbe Satz aus demselben Grund** — sie hat keinen
   eigenen `background-color`, also legt sich die Schraffur über die Fläche
   der Tabelle. Deshalb steht `background-image` hier weiterhin allein. */
.lotzwoo-favorites__row.is-blocked {
  background-image: var(--lwb-hatch-blocked);
}

/* Die Sternzelle. Sie hält genau einen Knopf und ist so breit wie er —
   dieselbe Lehre wie A1 aus AP-70, wo ein Kreis am Container statt am Stern
   hing, weil neben dem Stern noch etwas anderes in der Zelle stand. */
.lotzwoo-favorites__fav {
  display: flex;
  align-items: center;
  min-height: 26px;
}

/* Die Artikelnummer steht seit AP-77 nicht mehr im Kartenkopf, sondern vorn
   in der Meta-Zeile — als eigenes Element, damit `artikelnummer.mjs` und
   `ap61-anzeigenummer.mjs` weiterhin genau die Nummer auslesen und nicht den
   ganzen Satz.

   `tabular-nums` wie im Sortiment (`.lwb-row__sku`): untereinander stehende
   Nummern liest man spaltenweise, und dafür müssen die Ziffern gleich breit
   sein. Auf der Karte war das gleichgültig, in einer Liste ist es der Punkt.
   Etwas dunkler als die Meta-Zeile daneben, weil sie das Einzige darin ist,
   wonach jemand sucht. */
.lotzwoo-favorites__sku {
  color: var(--lwb-ink-600);
  font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.lotzwoo-favorites__star {
  border: 0;
  background: none;
  padding: 2px 4px;
  line-height: 1;
  font-size: var(--lwb-fs-lg);
  color: var(--lwb-ink-300);
  cursor: pointer;
}

.lotzwoo-favorites__star[aria-pressed="true"] { color: var(--lwb-warn-500); }

.lotzwoo-favorites__star:focus-visible {
  outline: none;
  border-radius: var(--lwb-r-sm);
  box-shadow: var(--lwb-focus);
}

/* Die Artikelzelle.

   **`min-width: 0` hält nicht den Überlauf, sondern die Flucht** — und das
   ist gemessen und nicht angenommen. Am 2026-08-21 einzeln zurückgebaut:
   ohne diese Zeile bleibt die Suite **grün**; ohne `minmax(0, 1fr)` an der
   Spalte ebenfalls; ohne `overflow-wrap: anywhere` am Namen ebenfalls. Die
   drei sind gegeneinander redundant, solange die Artikelnamen Leerzeichen
   tragen. **Zusammen zurückgebaut wird es rot**, und zwar dort, wo es weh
   tut: die Artikelspalte wächst in einer Zeile um **12,8 px**, und die
   Preisspalte steht danach nicht mehr unter ihrer eigenen Beschriftung.

   Den waagrechten Überlauf auf 390 px hält etwas anderes, nämlich die
   Container-Stufe am Ende dieses Abschnitts — ohne sie sind es **50 px**,
   gemessen am längsten Namen des Katalogs. Wer diese Zeile für den
   Überlaufschutz hält, sucht beim nächsten Befund an der falschen Stelle. */
.lotzwoo-favorites__body { min-width: 0; }

.lotzwoo-favorites__name {
  color: var(--lwb-ink-900);
  font-size: var(--lwb-fs-md);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Seit AP-77 ein Chip in der Zeile statt einer eigenen Zeile darunter —
   zeichengleich mit `.lwb-row__variant` im Sortiment. Als Block kostete die
   Variante eine volle Textzeile je Eintrag, und das ist in einer Liste die
   teuerste Zeile überhaupt: sie steht bei jedem Eintrag und sagt bei den
   meisten nichts. */
.lotzwoo-favorites__variant {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--lwb-r-sm);
  background: var(--lwb-ink-100);
  color: var(--lwb-ink-600);
  font-size: var(--lwb-fs-2xs);
  font-weight: 600;
}

.lotzwoo-favorites__meta {
  color: var(--lwb-ink-400);
  font-size: var(--lwb-fs-2xs);
  margin-top: 1px;
  overflow-wrap: anywhere;
}

.lotzwoo-favorites__meta:empty { display: none; }

/* ---------------- Gebinde-Pills ---------------- */

/* `sp-1` statt `sp-3` seit AP-77: die Pillen sitzen jetzt in einer Zeile und
   nicht mehr im Körper einer Karte. FR-FAV-05 bleibt unberührt — sie stehen
   vollständig da, gesperrte eingeschlossen, nur enger. */
.lotzwoo-favorites__pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--lwb-sp-1);
  margin: var(--lwb-sp-1) 0 0;
}

.lotzwoo-favorites__pills-label {
  color: var(--lwb-ink-400);
  font-size: var(--lwb-fs-2xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: var(--lwb-sp-1);
}

.lotzwoo-favorites .lotzwoo-favorites__pill {
  padding: 4px 10px;
  border: 1px solid var(--lwb-ink-200);
  border-radius: var(--lwb-r-full);
  background: var(--lwb-surface);
  color: var(--lwb-ink-700);
  font: inherit;
  font-size: var(--lwb-fs-xs);
  line-height: 1.4;
  cursor: pointer;
}

.lotzwoo-favorites .lotzwoo-favorites__pill[aria-pressed="true"] {
  border-color: var(--lwb-brand-500);
  background: var(--lwb-brand-50);
  color: var(--lwb-brand-700);
  font-weight: 600;
}

/* Eine gesperrte Gebindegröße bleibt sichtbar und trägt ihren Grund im
   Titel — sie zu entfernen verschwiege, dass es sie überhaupt gibt. */
.lotzwoo-favorites .lotzwoo-favorites__pill[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.lotzwoo-favorites .lotzwoo-favorites__pill:focus-visible {
  outline: none;
  box-shadow: var(--lwb-focus);
}

/* ---------------- Preis ---------------- */

/* Seit AP-77 eine eigene Rasterspalte statt eines Blocks im Kartenkörper —
   der Abstand nach oben entfällt damit, ihn setzt jetzt die Zeile. */
.lotzwoo-favorites__price { min-width: 0; }

.lotzwoo-favorites__amount {
  color: var(--lwb-ink-900);
  font-size: var(--lwb-fs-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lotzwoo-favorites__unit,
.lotzwoo-favorites__base,
.lotzwoo-favorites__list {
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-xs);
}

.lotzwoo-favorites__list { text-decoration: line-through; }

.lotzwoo-favorites__tiers {
  list-style: none;
  margin: var(--lwb-sp-2) 0 0;
  padding: 0;
  color: var(--lwb-ink-600);
  font-size: var(--lwb-fs-xs);
}

/* ---------------- Sperr-Badges ---------------- */

/* Seit AP-77 unter dem Artikel statt über ihm, und mit Abstand nach oben
   statt nach unten: in der Karte stand das Abzeichen über dem Namen, in einer
   Zeile gehört zuerst der Artikel dahin und danach, was ihm fehlt.

   **Und als Flex-Zeile, nicht als Block.** Eine gesperrte Zeile trägt bis zu
   zwei Abzeichen (Sperrgrund und Preisherkunft); als Blockinhalt stapelten
   sie sich auf **94,5 px**, nebeneinander mit Umbruch auf deutlich weniger.
   Am 2026-08-21 an der gesperrten Zeile dieser Bank gemessen. */
.lotzwoo-favorites__flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lwb-sp-1);
  margin-top: var(--lwb-sp-1);
}

.lotzwoo-favorites__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--lwb-sp-1);
  padding: 2px 8px;
  border-radius: var(--lwb-r-full);
  font-size: var(--lwb-fs-2xs);
  font-weight: 600;
}

.lotzwoo-favorites__badge--err {
  background: var(--lwb-err-50);
  color: var(--lwb-err-700);
}

.lotzwoo-favorites__badge--warn {
  background: var(--lwb-warn-50);
  color: var(--lwb-warn-500);
}

/* Der Reason-Code steht neben dem Satz, weil ein Support-Anruf ihn
   braucht: der Kunde liest den Satz, der Mensch am Telefon den Code. */
.lotzwoo-favorites__code {
  padding: 0 4px;
  border-radius: var(--lwb-r-sm);
  background: color-mix(in srgb, var(--lwb-err-700) 10%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--lwb-fs-2xs);
  font-weight: 400;
}

.lotzwoo-favorites__reason {
  color: var(--lwb-err-700);
  font-size: var(--lwb-fs-xs);
  margin: var(--lwb-sp-1) 0 0;
}

/* ---------------- Die Handlungsspalte ---------------- */

/* Bis AP-77 die Fußleiste einer Karte, mit eigenem Grund und eigener
   Trennlinie. Beides ist weg: in einer Zeile wäre eine zweite Fläche über die
   ganze Breite genau die Kartenoptik, die C3 abschafft. Was bleibt, ist die
   Anordnung — Mengenfeld, dann Knopf, rechtsbündig. */
.lotzwoo-favorites__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--lwb-sp-2);
  min-width: 0;
}

.lotzwoo-favorites__qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--lwb-ink-200);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-surface);
  overflow: hidden;
}

/* 24 statt 28 und 40 statt 48 seit AP-77 — zusammen mit den Rahmen 90 statt
   106 px. Das Mengenfeld ist unverändert bedienbar (Woos eigenes ist 40 px
   breit) und passt neben den Knopf in **eine** Zeile der Handlungsspalte;
   mit den alten Maßen brach der Knopf um und die Zeile wurde doppelt so hoch.
   Der Trefferbereich der beiden Knöpfe bleibt über der Fingerkuppe: 24 × 32. */
.lotzwoo-favorites__qty button {
  width: 24px;
  border: 0;
  background: none;
  color: var(--lwb-ink-600);
  font: inherit;
  font-size: var(--lwb-fs-md);
  cursor: pointer;
}

.lotzwoo-favorites__qty input {
  width: 40px;
  border: 0;
  border-left: 1px solid var(--lwb-ink-200);
  border-right: 1px solid var(--lwb-ink-200);
  padding: 5px 4px;
  background: none;
  color: var(--lwb-ink-900);
  font: inherit;
  font-size: var(--lwb-fs-md);
  text-align: center;
  -moz-appearance: textfield;
}

.lotzwoo-favorites__qty input::-webkit-outer-spin-button,
.lotzwoo-favorites__qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.lotzwoo-favorites__qty input:focus-visible {
  outline: none;
  box-shadow: var(--lwb-focus);
}

/* ---------------- Knöpfe ---------------- */

/* Wie nebenan: WooCommerce liefert `.button` und die meisten Themes
   färben sie um. Die Knöpfe tragen `.button` *und* eine Blockklasse,
   also gewinnt eine Klasse mehr ohne !important. */
.lotzwoo-favorites .lotzwoo-favorites__add,
.lotzwoo-favorites .lotzwoo-favorites__bulk-action,
.lotzwoo-favorites .lotzwoo-favorites__remove,
.lotzwoo-favorites__more .button,
.lotzwoo-favorites__empty .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lwb-sp-2);
  padding: 8px 15px;
  border: 1px solid var(--lwb-ink-200);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-surface);
  color: var(--lwb-ink-700);
  font: inherit;
  font-size: var(--lwb-fs-md);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 110ms ease, border-color 110ms ease;
}

.lotzwoo-favorites .lotzwoo-favorites__add,
.lotzwoo-favorites .lotzwoo-favorites__bulk-action,
.lotzwoo-favorites__empty .button {
  border-color: var(--lwb-brand-500);
  background: var(--lwb-brand-500);
  color: var(--lwb-surface);
}

.lotzwoo-favorites .lotzwoo-favorites__add:hover,
.lotzwoo-favorites .lotzwoo-favorites__bulk-action:hover,
.lotzwoo-favorites__empty .button:hover {
  border-color: var(--lwb-brand-600);
  background: var(--lwb-brand-600);
}

.lotzwoo-favorites .lotzwoo-favorites__remove:hover,
.lotzwoo-favorites__more .button:hover { background: var(--lwb-ink-100); }

/* Der Zeilen-Knopf enger als die Sammelleiste darüber: `sp-2` statt 15 px
   waagrecht, und er schrumpft nicht unter seine Beschriftung. `margin-left:
   auto` ist mit AP-77 entfallen — die Handlungsspalte richtet ihre zwei
   Stücke selbst rechtsbündig aus, und ein `auto` daneben schöbe sie bei
   Umbruch auseinander statt zusammen. */
.lotzwoo-favorites .lotzwoo-favorites__row .lotzwoo-favorites__add {
  padding: 5px var(--lwb-sp-2);
  font-size: var(--lwb-fs-xs);
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Und der gesperrte Knopf trägt „Nicht bestellbar" — 16 Zeichen, die neben
   keinem Mengenfeld stehen müssen, weil eine gesperrte Zeile keines hat. Er
   darf deshalb umbrechen statt die Spalte zu sprengen. */
.lotzwoo-favorites .lotzwoo-favorites__row .lotzwoo-favorites__add[disabled] {
  white-space: normal;
}

.lotzwoo-favorites .lotzwoo-favorites__add:focus-visible,
.lotzwoo-favorites .lotzwoo-favorites__bulk-action:focus-visible,
.lotzwoo-favorites .lotzwoo-favorites__remove:focus-visible,
.lotzwoo-favorites__more .button:focus-visible,
.lotzwoo-favorites__empty .button:focus-visible {
  outline: none;
  box-shadow: var(--lwb-focus);
}

/* Gesperrt ist der Ruhezustand einer ganzen Karte, nicht ein Fehler.
   Der Knopf muss „geht gerade nicht" lesen, nicht „kaputt". */
.lotzwoo-favorites .lotzwoo-favorites__add[disabled],
.lotzwoo-favorites .lotzwoo-favorites__bulk-action[disabled],
.lotzwoo-favorites .lotzwoo-favorites__remove[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* ---------------- Nicht auflösbarer Eintrag ---------------- */

/* Gestrichelt bleibt sie, nur als Zeile: die Trennlinie unten wird zur
   Strichlinie, statt dass ein ganzer Rahmen um eine Zeile läuft. */
.lotzwoo-favorites__row--unresolved { border-bottom-style: dashed; }

.lotzwoo-favorites__row--unresolved .lotzwoo-favorites__reason {
  color: var(--lwb-ink-500);
}

/* ---------------- Leerzustand und Nachladen ---------------- */

.lotzwoo-favorites__empty {
  padding: var(--lwb-sp-8) var(--lwb-sp-4);
  border: 1px dashed var(--lwb-ink-200);
  border-radius: var(--lwb-r-lg);
  background: var(--lwb-ink-50);
  text-align: center;
}

.lotzwoo-favorites__empty h3 {
  font-size: var(--lwb-fs-lg);
  margin: 0 0 var(--lwb-sp-2);
}

.lotzwoo-favorites__empty p {
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-md);
  margin: 0 auto var(--lwb-sp-4);
  max-width: 46ch;
}

.lotzwoo-favorites__more {
  display: flex;
  justify-content: center;
  margin-top: var(--lwb-sp-4);
}

/* ---------------- Schmaler Container: die Zeile klappt um ---------------- */

/* **Am Container gemessen, nicht am Viewport**, und der Satz gilt seit AP-77
   noch schärfer als vorher. Der Inhaltsbereich des Kontos ist auf einem
   breiten Bildschirm schmal: an dieser Bank **652,8 px bei 1440 px Fenster**
   und **358 px bei 390**. Ein Viewport-Haltepunkt bei 700 träfe die falsche
   Zahl in beiden Richtungen.

   Bis AP-77 standen hier zwei Stufen in die andere Richtung — zwei Karten ab
   560 px, drei ab 900. Die zweite hat an dieser Installation **nie** gegriffen
   und die erste sorgte für die 318 px breiten Karten, die C3 abschafft.

   **Die Stufe liegt bei 620 px, und die Zahl ist gerechnet, nicht geraten:**
   die vier Spalten brauchen 30 + 116 + 178 fest, dazu drei Fugen à 12 und
   zweimal 16 Polster — zusammen **392 px**, bevor der Artikelname das erste
   Zeichen bekommt. Bei 620 bleiben ihm 228, und darunter fängt er an, die
   Preisspalte zu drücken. Der Container von 652,8 px liegt darüber, der von
   358 px darunter — beide gemessen, keiner angenommen. */
@container lotzwoo-favorites (max-width: 620px) {
  /* Die Kopfzeile tritt zurück: sie benennt Spalten, die es hier nicht mehr
     gibt. Dasselbe tut die Sortimentstabelle unter 640 px, aus demselben
     Grund. */
  .lotzwoo-favorites__thead { display: none; }

  .lotzwoo-favorites__row {
    grid-template-columns: 26px minmax(0, 1fr);
    row-gap: var(--lwb-sp-2);
    padding: var(--lwb-sp-3) var(--lwb-sp-3);
  }

  /* Preis und Handlung rücken unter den Artikel, in **dieselbe** Spalte —
     nicht in eine dritte Zeile mit eigener Einrückung. Ohne diese zwei Zeilen
     landeten sie in Spalte 1 unter dem Stern und wären 26 px breit. */
  .lotzwoo-favorites__row .lotzwoo-favorites__price,
  .lotzwoo-favorites__row .lotzwoo-favorites__foot { grid-column: 2; }

  .lotzwoo-favorites__foot { justify-content: flex-start; }

  .lotzwoo-favorites__bulk-inner { align-items: stretch; }

  .lotzwoo-favorites .lotzwoo-favorites__bulk-action { margin-left: 0; width: 100%; }
}

/* ===========================================================   LotzApp B2B — Orte & Termine (WooCommerce account endpoint)

   Posten 9 der Karte `plugin-flaechen-kaufweg`. Dasselbe Stylesheet
   wie das Nachbestellen und die Favoriten darüber, weil alle drei
   Endpunkte im selben Konto-Template sitzen und einen Klick
   auseinanderliegen: drei Dateien wären drei Orte, an denen
   derselbe Knopf anders aussieht.

   Kein Token wird hier definiert; sie kommen alle aus
   assets/css/b2b-tokens.css, das .lotzwoo-locations als vierte Wurzel
   führt. Jede Regel ist auf .lotzwoo-locations verankert.
   ================================================================== */

.lotzwoo-locations {
  margin: 0 0 var(--lwb-sp-6);
  container-type: inline-size;
  container-name: lotzwoo-locations;
}

/* ---------------- Head ---------------- */

.lotzwoo-locations__head { margin-bottom: var(--lwb-sp-4); }

.lotzwoo-locations__head h2 {
  font-size: var(--lwb-fs-xl);
  margin-bottom: var(--lwb-sp-2);
}

.lotzwoo-locations__intro {
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-md);
  max-width: 68ch;
}

.lotzwoo-locations__status {
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-md);
  margin-bottom: var(--lwb-sp-3);
}

.lotzwoo-locations__status:empty { display: none; }

/* ---------------- Ortskarte ---------------- */

.lotzwoo-locations__list {
  display: flex;
  flex-direction: column;
  gap: var(--lwb-sp-4);
}

/* Vordergrund-Rolle, siehe die Bestellkarte weiter oben. */
.lotzwoo-locations__card {
  border: 1px solid var(--lwb-front-border);
  border-radius: var(--lwb-r-lg);
  background: var(--lwb-front);
  box-shadow: var(--lwb-front-shadow);
  overflow: hidden;
}

/* Der aktive Ort hebt sich eine Stufe weiter ab als die übrigen. Bis zum
   2026-08-13 war das `sh-md` gegen `sh-sm`; seit die Karte selbst
   `--lwb-front-shadow` (= `sh-md`) trägt, wäre es `sh-md` gegen `sh-md` —
   der Unterschied verschwände lautlos und übrig bliebe allein die
   Rahmenfarbe. Eine Stufe höher, damit der Abstand bleibt, den es vorher
   gab. Keine neue Rolle: `sh-lg` steht seit jeher in der Skala. */
.lotzwoo-locations__card.is-active {
  border-color: var(--lwb-brand-300);
  box-shadow: var(--lwb-sh-lg);
}

.lotzwoo-locations__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lwb-sp-2);
  padding: var(--lwb-sp-3) var(--lwb-sp-4);
  border-bottom: 1px solid var(--lwb-ink-100);
  /* Der Kopf trug als einziger der drei Listen keinen Grund — am
     2026-08-26 gemessen: Bestellungen und Nachbestellen stehen beide auf
     `ink-50`, dieser auf `transparent`. Drei Listen, zwei Antworten. */
  background: var(--lwb-ink-50);
}

/* Der Kopf zentriert per Flex, nicht per Rand. `.woocommerce-MyAccount-content h3`
   (unten, 0-1-1) gibt jedem h3 12px Unterrand; die blosse Klasse (0-1-0)
   verlor dagegen, und seit die Typ-Zeile fehlt, trug der Rand den Namen
   sichtbar aus der Mitte. Daher zwei Klassen. */
.lotzwoo-locations__card-head .lotzwoo-locations__loc-name {
  margin: 0;
}

.lotzwoo-locations__loc-name {
  color: var(--lwb-ink-900);
  font-size: var(--lwb-fs-lg);
  font-weight: 700;
}

.lotzwoo-locations__active-badge {
  padding: 2px 8px;
  border-radius: var(--lwb-r-full);
  background: var(--lwb-brand-50);
  color: var(--lwb-brand-700);
  font-size: var(--lwb-fs-2xs);
  font-weight: 600;
}

/* ---------------- Konditionen ---------------- */

.lotzwoo-locations__body {
  padding: var(--lwb-sp-3) var(--lwb-sp-4);
}

.lotzwoo-locations__conds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--lwb-sp-3);
  margin-bottom: var(--lwb-sp-4);
}

.lotzwoo-locations__cond {
  padding: var(--lwb-sp-2) var(--lwb-sp-3);
  border: 1px solid var(--lwb-ink-100);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-ink-50);
}

.lotzwoo-locations__cond-label {
  color: var(--lwb-ink-400);
  font-size: var(--lwb-fs-2xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  margin-bottom: var(--lwb-sp-1);
}

.lotzwoo-locations__cond-value {
  color: var(--lwb-ink-900);
  font-size: var(--lwb-fs-sm);
  font-weight: 600;
}

.lotzwoo-locations__cond-value--sm {
  font-size: var(--lwb-fs-xs);
  font-weight: 400;
}

/* ---------------- Termine ---------------- */

.lotzwoo-locations__appt-section { margin-bottom: var(--lwb-sp-3); }

.lotzwoo-locations__appt-title {
  color: var(--lwb-ink-400);
  font-size: var(--lwb-fs-2xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  margin-bottom: var(--lwb-sp-2);
}

.lotzwoo-locations__termins {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lwb-sp-1) var(--lwb-sp-2);
}

.lotzwoo-locations__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--lwb-sp-1);
  padding: 4px 10px;
  border-radius: var(--lwb-r-full);
  font-size: var(--lwb-fs-xs);
  font-weight: 600;
}

.lotzwoo-locations__badge--ok {
  background: var(--lwb-ok-50);
  color: var(--lwb-ok-500);
}

.lotzwoo-locations__badge--err {
  background: var(--lwb-err-50);
  color: var(--lwb-err-500);
}

/* Der dritte Zustand: offen, aber der Bestellschluss läuft. Dieselben zwei
   Token wie das Warn-Badge der Favoriten — zwei Konto-Flächen, ein Alarmton. */
.lotzwoo-locations__badge--warn {
  background: var(--lwb-warn-50);
  color: var(--lwb-warn-500);
}

.lotzwoo-locations__badge-text { font-weight: 400; font-size: var(--lwb-fs-2xs); }

/* Der Bestellschluss steht in jedem Badge: er ist die Zahl, die erklärt,
   warum ein Termin zu ist — oder wie lange er es noch nicht ist. */
.lotzwoo-locations__badge-cutoff {
  font-weight: 400;
  font-size: var(--lwb-fs-2xs);
  opacity: .8;
}

/* Der Ort existiert, seine Termine sind alle zu. Steht dort, wo sonst der
   Terminwähler stünde, und erklärt den ausgeschalteten Knopf darunter. */
.lotzwoo-locations__no-open {
  margin: var(--lwb-sp-3) 0 0;
  padding: var(--lwb-sp-2) var(--lwb-sp-3);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-warn-50);
  color: var(--lwb-warn-500);
  font-size: var(--lwb-fs-sm);
}

.lotzwoo-locations__no-termin {
  color: var(--lwb-ink-400);
  font-size: var(--lwb-fs-sm);
}

/* ---------------- Termin-Picker ---------------- */

.lotzwoo-locations__termin-picker {
  margin-top: var(--lwb-sp-3);
}

.lotzwoo-locations__termin-label {
  display: block;
  color: var(--lwb-ink-400);
  font-size: var(--lwb-fs-2xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  margin-bottom: var(--lwb-sp-1);
}

.lotzwoo-locations__select {
  padding: 7px 10px;
  border: 1px solid var(--lwb-ink-200);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-surface);
  color: var(--lwb-ink-700);
  font: inherit;
  font-size: var(--lwb-fs-md);
  max-width: 100%;
}

.lotzwoo-locations__select:focus-visible {
  outline: none;
  border-color: var(--lwb-brand-500);
  box-shadow: var(--lwb-focus);
}

.lotzwoo-locations__select option[disabled] { color: var(--lwb-ink-400); }

/* ---------------- Fußleiste ---------------- */

.lotzwoo-locations__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lwb-sp-2);
  padding: var(--lwb-sp-3) var(--lwb-sp-4);
  border-top: 1px solid var(--lwb-ink-100);
  background: var(--lwb-ink-50);
}

.lotzwoo-locations__set {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lwb-sp-2);
  padding: 8px 15px;
  border: 1px solid var(--lwb-brand-500);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-brand-500);
  color: var(--lwb-surface);
  font: inherit;
  font-size: var(--lwb-fs-md);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 110ms ease, border-color 110ms ease;
  margin-left: auto;
}

.lotzwoo-locations__set:hover {
  border-color: var(--lwb-brand-600);
  background: var(--lwb-brand-600);
}

.lotzwoo-locations__set:focus-visible {
  outline: none;
  box-shadow: var(--lwb-focus);
}

.lotzwoo-locations__set[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.lotzwoo-locations__set--active {
  border-color: var(--lwb-ink-200);
  background: var(--lwb-surface);
  color: var(--lwb-ink-500);
}

/* Die Statuszeile der Karte, neben dem Knopf, der sie füllt.

   Die Seite hat auch eine ganz oben — und auf 390px steht die 944 Pixel über
   diesem Knopf, also außerhalb des Bildes. Eine Meldung über eine Handlung
   gehört dorthin, wo die Handlung stattfindet. `:empty` klappt sie weg, wie bei
   der Seitenzeile, damit kein leerer Kasten stehenbleibt. */
.lotzwoo-locations__card-status {
  font-size: var(--lwb-fs-sm);
  color: var(--lwb-ink-500);
}

.lotzwoo-locations__card-status:empty { display: none; }
.lotzwoo-locations__card-status--ok { color: var(--lwb-ok-500); font-weight: 600; }
.lotzwoo-locations__card-status--err { color: var(--lwb-err-500); font-weight: 600; }

/* ---------------- Kundenklasse ---------------- */

/* Der Preis- und Sortimentsschnitt, unter dem die Orte darunter gelesen
   werden. Die Route liefert ihn seit jeher; die Fläche hat ihn bis zum
   2026-08-12 in ein Feld gelegt, das niemand ausgelesen hat. */

/* ---------------- Leerzustand ---------------- */

.lotzwoo-locations__empty {
  padding: var(--lwb-sp-8) var(--lwb-sp-4);
  border: 1px dashed var(--lwb-ink-200);
  border-radius: var(--lwb-r-lg);
  background: var(--lwb-ink-50);
  text-align: center;
}

.lotzwoo-locations__empty h3 {
  font-size: var(--lwb-fs-lg);
  margin: 0;
}

.lotzwoo-locations__empty-note {
  margin: var(--lwb-sp-2) 0 0;
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-sm);
}

.lotzwoo-locations__empty-link {
  display: inline-block;
  margin-top: var(--lwb-sp-4);
  padding: 8px 15px;
  border: 1px solid var(--lwb-brand-500);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-brand-500);
  color: var(--lwb-surface);
  font-size: var(--lwb-fs-md);
  font-weight: 600;
  text-decoration: none;
}

.lotzwoo-locations__empty-link:hover {
  border-color: var(--lwb-brand-600);
  background: var(--lwb-brand-600);
  color: var(--lwb-surface);
}

.lotzwoo-locations__empty-link:focus-visible {
  outline: none;
  box-shadow: var(--lwb-focus);
}

/* ---------------- Schmaler Container ---------------- */

@container lotzwoo-locations (max-width: 420px) {
  .lotzwoo-locations__set { margin-left: 0; width: 100%; }

  .lotzwoo-locations__select { width: 100%; }
}

/* ===========================================================   Posten 10 — der B2B-Bestellkontext in Woos eigenen Bestellansichten

   Kein eigener Endpunkt, deshalb auch kein eigener Rahmen: die Fläche
   steht in Woos `my-orders`-Tabelle und unter Woos `order-details`.
   Alles hier hängt am eigenen Wurzelnamen, weil `b2b-tokens.css` nach
   Wurzelnamen scoped und eine Regel gegen eine nicht genannte Wurzel
   jede `var()` still auf nichts auflöst.
   ================================================================== */

/* ---------------- Die Kontext-Spalte der Liste ---------------- */

.lotzwoo-ordercontext__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lotzwoo-ordercontext__ort {
  color: var(--lwb-ink-900);
  font-weight: 600;
}

.lotzwoo-ordercontext__termin {
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-xs);
}

/* ---------------- Die Einzelansicht ---------------- */

.lotzwoo-ordercontext {
  margin: var(--lwb-sp-6) 0 var(--lwb-sp-8);
  /* Der Container, in dem diese Fläche steht, gehört dem Theme. Ohne
     die Begrenzung erbt die Tabelle darunter dessen Breite und schiebt
     auf 390px die ganze Seite waagrecht. */
  max-width: 100%;
}

.lotzwoo-ordercontext__title {
  font-size: var(--lwb-fs-lg);
  margin-bottom: var(--lwb-sp-2);
}

.lotzwoo-ordercontext__subtitle {
  font-size: var(--lwb-fs-base);
  margin: var(--lwb-sp-6) 0 var(--lwb-sp-3);
}

.lotzwoo-ordercontext__intro,
.lotzwoo-ordercontext__foot {
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-xs);
}

.lotzwoo-ordercontext__foot { margin: var(--lwb-sp-3) 0 0; }

/* ---------------- Die Snapshot-Boxen ---------------- */

.lotzwoo-ordercontext__boxes {
  display: grid;
  /* `auto-fit` mit `minmax` statt fester Spaltenzahl: die Fläche kennt
     die Breite ihres Gastgebers nicht — ein Theme mit Seitenleiste gibt
     ihr weniger als das Fenster hergibt. */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--lwb-sp-3);
}

.lotzwoo-ordercontext__box {
  border: 1px solid var(--lwb-ink-200);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-ink-50);
  padding: var(--lwb-sp-3) var(--lwb-sp-4);
}

.lotzwoo-ordercontext__box h3 {
  font-size: var(--lwb-fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lwb-ink-500);
  margin-bottom: var(--lwb-sp-2);
}

.lotzwoo-ordercontext__box dl { margin: 0; }

.lotzwoo-ordercontext__pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--lwb-sp-2);
  padding: 3px 0;
}

.lotzwoo-ordercontext__pair dt {
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-xs);
  margin: 0;
}

.lotzwoo-ordercontext__pair dd {
  color: var(--lwb-ink-900);
  font-size: var(--lwb-fs-xs);
  font-weight: 600;
  margin: 0;
  text-align: right;
  /* Ortsnamen und Zeitfenster sind vom Sync und beliebig lang. Ohne den
     Umbruch schiebt ein einziger langer Wert die Box über den Rand. */
  overflow-wrap: anywhere;
}

/* ---------------- Gebrochenes Siegel ---------------- */

.lotzwoo-ordercontext__broken {
  border: 1px solid var(--lwb-err-500);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-err-50);
  color: var(--lwb-err-700);
  padding: var(--lwb-sp-3) var(--lwb-sp-4);
}

.lotzwoo-ordercontext__broken strong { display: block; margin-bottom: var(--lwb-sp-1); }

.lotzwoo-ordercontext__broken p {
  color: var(--lwb-ink-700);
  font-size: var(--lwb-fs-xs);
  margin: 0;
}

.lotzwoo-ordercontext__badge--broken {
  color: var(--lwb-err-700);
  background: var(--lwb-err-50);
  border-color: var(--lwb-err-500);
}

/* ---------------- Der Kontexthinweis über der Tabelle ---------------- */

.lotzwoo-ordercontext__notice {
  border: 1px solid var(--lwb-warn-500);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-warn-50);
  padding: var(--lwb-sp-3) var(--lwb-sp-4);
  margin-bottom: var(--lwb-sp-3);
}

.lotzwoo-ordercontext__notice strong {
  display: block;
  color: var(--lwb-ink-900);
  margin-bottom: var(--lwb-sp-1);
}

.lotzwoo-ordercontext__notice p {
  color: var(--lwb-ink-700);
  font-size: var(--lwb-fs-xs);
  margin: 0;
}

/* ---------------- Die Positionstabelle ---------------- */

.lotzwoo-ordercontext__lines {
  width: 100%;
  border-collapse: collapse;
  /* `fixed` nicht: die Spalten sind ungleich breit und der Artikelname
     ist der einzige, der Platz braucht. */
  table-layout: auto;
  margin: 0;
}

.lotzwoo-ordercontext__lines th,
.lotzwoo-ordercontext__lines td {
  border-bottom: 1px solid var(--lwb-ink-200);
  font-size: var(--lwb-fs-xs);
  padding: var(--lwb-sp-2) var(--lwb-sp-2);
  text-align: left;
  vertical-align: top;
}

.lotzwoo-ordercontext__lines thead th {
  color: var(--lwb-ink-500);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lotzwoo-ordercontext__lines tbody th {
  color: var(--lwb-ink-900);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.lotzwoo-ordercontext__variant {
  display: block;
  color: var(--lwb-ink-500);
  font-weight: 400;
}

.lotzwoo-ordercontext__line--conflict tbody th,
.lotzwoo-ordercontext__line--conflict th { color: var(--lwb-ink-600); }

.lotzwoo-ordercontext__badge {
  display: inline-block;
  border: 1px solid var(--lwb-ink-300);
  border-radius: var(--lwb-r-full);
  font-size: var(--lwb-fs-2xs);
  font-weight: 600;
  padding: 1px var(--lwb-sp-2);
  white-space: nowrap;
}

.lotzwoo-ordercontext__badge--available {
  color: var(--lwb-ok-500);
  background: var(--lwb-ok-50);
  border-color: var(--lwb-ok-500);
}

.lotzwoo-ordercontext__badge--warning {
  color: var(--lwb-warn-500);
  background: var(--lwb-warn-50);
  border-color: var(--lwb-warn-500);
}

.lotzwoo-ordercontext__badge--conflict {
  color: var(--lwb-err-700);
  background: var(--lwb-err-50);
  border-color: var(--lwb-err-500);
}

.lotzwoo-ordercontext__reason {
  display: block;
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-2xs);
  margin-top: 2px;
  max-width: 24em;
}

/* ---------------- Schmal: die Tabelle wird zu Karten ----------------

   Fünf Spalten passen auf 390px nicht nebeneinander, und ein waagrecht
   scrollender Kasten versteckt genau die Spalte, wegen der die Tabelle
   existiert. Jede Zeile wird deshalb zu einer Karte, und jede Zelle
   trägt ihre Überschrift selbst — aus `data-label`, das im Template
   steht und nicht aus einer zweiten Liste hier.
   ------------------------------------------------------------------ */

@media (max-width: 600px) {
  .lotzwoo-ordercontext__lines thead {
    /* Nicht `display: none`: das nähme die Überschriften auch dem
       Screenreader, der die Tabelle weiterhin als Tabelle liest. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lotzwoo-ordercontext__lines,
  .lotzwoo-ordercontext__lines tbody,
  .lotzwoo-ordercontext__lines tr,
  .lotzwoo-ordercontext__lines th,
  .lotzwoo-ordercontext__lines td { display: block; }

  .lotzwoo-ordercontext__lines tr {
    border: 1px solid var(--lwb-ink-200);
    border-radius: var(--lwb-r-md);
    margin-bottom: var(--lwb-sp-3);
    padding: var(--lwb-sp-2) var(--lwb-sp-3);
  }

  .lotzwoo-ordercontext__lines th,
  .lotzwoo-ordercontext__lines td {
    border-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--lwb-sp-2);
    justify-content: space-between;
    padding: 3px 0;
  }

  .lotzwoo-ordercontext__lines td::before {
    content: attr(data-label);
    color: var(--lwb-ink-500);
    font-weight: 400;
  }

  .lotzwoo-ordercontext__lines tbody th {
    border-bottom: 1px solid var(--lwb-ink-200);
    display: block;
    margin-bottom: var(--lwb-sp-1);
    padding-bottom: var(--lwb-sp-2);
  }

  .lotzwoo-ordercontext__reason {
    flex-basis: 100%;
    max-width: none;
    text-align: right;
  }
}

/* ===========================================================   Daueraufträge — eine Liste, die nichts kann (FR-ACC-05)

   Bis 2026-08-31 stand hier ein Platzhalter mit drei Regeln und dem
   Satz „wird ergänzt". Er ist eingelöst: der Abschnitt zeigt jetzt die
   Daueraufträge des Kunden.

   **Und er bleibt ohne jedes Bedienelement.** Kein Knopf, kein
   Formular, keine Zeile, die auf Klick reagiert — angelegt und
   geändert wird ausschließlich in LotzApp. Ein Element, das nach
   Bedienung aussieht, wäre hier schlimmer als ein Platzhalter: es
   verspräche etwas, das diese Fläche nie können soll.

   Die Maße sind weiterhin die von „Orte & Termine" (`:921`), damit der
   Wechsel zwischen den Konto-Reitern nichts springen lässt; die Karte
   nimmt Rahmen, Radius und Schatten der dortigen Karte (`:1123`),
   damit zwei Listen im selben Konto nicht zwei Kartenformen zeigen.
   ================================================================== */

.lotzwoo-standing-orders__head { margin-bottom: var(--lwb-sp-4); }

.lotzwoo-standing-orders__head h2 {
  font-size: var(--lwb-fs-xl);
  margin-bottom: var(--lwb-sp-2);
}

.lotzwoo-standing-orders__intro,
.lotzwoo-standing-orders__empty,
.lotzwoo-standing-orders__hint { color: var(--lwb-ink-500); }

.lotzwoo-standing-orders__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--lwb-sp-4);
}

.lotzwoo-standing-orders__card {
  border: 1px solid var(--lwb-front-border);
  border-radius: var(--lwb-r-lg);
  background: var(--lwb-front);
  box-shadow: var(--lwb-front-shadow);
  overflow: hidden;
}

/* Pausiert wird gedämpft, nicht ausgegraut: die Karte bleibt lesbar, weil
   ihr Inhalt weiter gilt — sie liefert nur gerade nicht. Ein Opazitätsfilter
   über der ganzen Karte hätte auch die Mengen mitgenommen, und die sind das,
   was der Kunde am Telefon vorliest. */
.lotzwoo-standing-orders__card.is-paused { border-style: dashed; }

.lotzwoo-standing-orders__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lwb-sp-2);
  padding: var(--lwb-sp-3) var(--lwb-sp-4);
  border-bottom: 1px solid var(--lwb-ink-100);
  background: var(--lwb-ink-50);
}

.lotzwoo-standing-orders__title {
  font-size: var(--lwb-fs-md);
  margin: 0;
}

/* Kein Knopf und nichts, was wie einer aussieht: ein Zustandsband ist eine
   Auskunft. Deshalb Textfarbe und Rahmen statt Fläche — die gefüllte Pille
   ist im Sortiment die Form für Schaltbares. */
.lotzwoo-standing-orders__state {
  flex: none;
  font-size: var(--lwb-fs-xs);
  line-height: 1;
  padding: var(--lwb-sp-1) var(--lwb-sp-2);
  border: 1px solid var(--lwb-ok-500);
  border-radius: var(--lwb-r-full);
  color: var(--lwb-ok-500);
  white-space: nowrap;
}

.lotzwoo-standing-orders__state--paused {
  border-color: var(--lwb-warn-500);
  color: var(--lwb-warn-500);
}

.lotzwoo-standing-orders__meta,
.lotzwoo-standing-orders__none {
  margin: 0;
  padding: var(--lwb-sp-3) var(--lwb-sp-4);
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-sm);
}

.lotzwoo-standing-orders__meta { padding-bottom: 0; }

.lotzwoo-standing-orders__lines {
  width: 100%;
  border-collapse: collapse;
  margin: var(--lwb-sp-3) 0 0;
  font-size: var(--lwb-fs-sm);
}

.lotzwoo-standing-orders__lines th,
.lotzwoo-standing-orders__lines td {
  text-align: left;
  padding: var(--lwb-sp-2) var(--lwb-sp-4);
  border-top: 1px solid var(--lwb-ink-100);
  vertical-align: top;
}

.lotzwoo-standing-orders__lines th {
  font-size: var(--lwb-fs-2xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--lwb-ink-500);
  font-weight: 600;
}

/* Die Menge steht als Ganzes in einer Zelle („2,5 kg"), also darf sie nicht
   umbrechen — eine Zahl in der einen und ihre Einheit in der nächsten Zeile
   ist zweimal dieselbe Angabe und liest sich als zwei. */
.lotzwoo-standing-orders__qty {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  width: 1%;
}

.lotzwoo-standing-orders__name { width: auto; }

/* Rechts und in Ziffernbreite, wie die Artikelnummer im Sortiment. Der
   Gedankenstrich steht hier für „keine Nummer aufgelöst" und ist derselbe,
   den `Display_Number` überall sonst liefert. */
.lotzwoo-standing-orders__number {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--lwb-ink-500);
  text-align: right;
  width: 1%;
}

/* Auf 390 px bleiben alle drei Spalten stehen, und das ist eine Entscheidung
   gegen den naheliegenden Reflex: die Artikelnummer wegzublenden wäre genau
   die Angabe, die der Kunde am Telefon vorliest — und das Telefon ist bei
   dieser Fläche der vorgesehene Weg. Platz macht stattdessen die Polsterung,
   und die Bezeichnung darf umbrechen. */
@media (max-width: 600px) {
  .lotzwoo-standing-orders__lines th,
  .lotzwoo-standing-orders__lines td {
    padding-left: var(--lwb-sp-2);
    padding-right: var(--lwb-sp-2);
  }

  .lotzwoo-standing-orders__card-head,
  .lotzwoo-standing-orders__meta,
  .lotzwoo-standing-orders__none {
    padding-left: var(--lwb-sp-3);
    padding-right: var(--lwb-sp-3);
  }

  .lotzwoo-standing-orders__name { overflow-wrap: anywhere; }
}

/* ---------------- Die Kontext-Karte über dem Konto-Inhalt (AP-60) ---------------- */

/* Dieselbe Form wie das Tor im Sortiment (`.lwb-panel--center`), aber mit
   eigenen Klassen: das Blatt des Sortiments (`b2b-shop.css`) lädt nur der
   Kurzcode, und ein Katalog-Renderer von 1.250 CSS-Zeilen auf der Adressseite
   wäre genau die Verschwendung, gegen die `Shop_Assets` gebaut ist.

   Die Karte steht **vor** der Reiter-Navigation (`woocommerce_before_account_navigation`).
   Sie ersetzt nichts: Bestellungen, Adressen und Kontodetails bleiben lesbar,
   während sie sagt, warum gerade nicht bestellt werden kann. */
.lotzwoo-contextcard {
  /* Woos Konto-Fläche lässt die Navigation fließen. Eine Karte davor, ohne
     eigene Breite, stünde neben der Spalte statt über ihr. */
  width: 100%;
  clear: both;
}

.lotzwoo-contextcard__panel {
  max-width: 640px;
  margin: var(--lwb-sp-6) auto;
  padding: var(--lwb-sp-8);
  border: 1px solid var(--lwb-ink-200);
  border-radius: var(--lwb-r-lg);
  background: var(--lwb-surface);
  box-shadow: var(--lwb-sh-sm);
  text-align: center;
}

.lotzwoo-contextcard__ico {
  display: block;
  margin-bottom: var(--lwb-sp-3);
  color: var(--lwb-brand-500);
}

/* Das Symbol benennt den Zustand (`triangle-alert`, `clock`, `map-pin`), die
   Farbe bleibt in allen drei Fällen die der Marke — genau wie am Tor im
   Sortiment (`.lwb-gate__ico`). Eine gelbe Fläche über der Bestellliste läse
   sich als Fehler der Seite, und das ist keiner der drei Zustände. */
.lotzwoo-contextcard__glyph { vertical-align: middle; }

.lotzwoo-contextcard__title {
  font-size: var(--lwb-fs-xl);
  margin: 0 0 var(--lwb-sp-2);
}

.lotzwoo-contextcard__body {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-md);
}

.lotzwoo-contextcard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lwb-sp-2);
  justify-content: center;
  margin: var(--lwb-sp-4) 0 0;
}

.lotzwoo-contextcard__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--lwb-sp-2);
  padding: 12px 20px;
  border: 1px solid var(--lwb-brand-500);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-brand-500);
  color: var(--lwb-surface);
  font-size: var(--lwb-fs-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.lotzwoo-contextcard__btn:hover { background: var(--lwb-brand-600); color: var(--lwb-surface); }

/* `box-shadow` und nicht `outline`: `--lwb-focus` **ist** ein
   `box-shadow`-Wert, und `outline: 0 0 0 3px rgba(…)` verwirft jeder Browser.
   Genau dieser Fehler stand monatelang unbemerkt in `.lwb-nameopen`. */
.lotzwoo-contextcard__btn:focus-visible {
  outline: none;
  box-shadow: var(--lwb-focus);
}

.lotzwoo-contextcard__btn--ghost {
  background: var(--lwb-surface);
  border-color: var(--lwb-ink-200);
  color: var(--lwb-ink-700);
}

.lotzwoo-contextcard__btn--ghost:hover { background: var(--lwb-ink-50); color: var(--lwb-ink-700); }

@media (max-width: 600px) {
  .lotzwoo-contextcard__panel { padding: var(--lwb-sp-6) var(--lwb-sp-4); }

  /* Auf 390 px stehen die zwei Handlungen untereinander, in voller Breite.
     Nebeneinander bleiben ihnen je rund 150 px, und „Erneut versuchen"
     bricht dann mitten im Wort. */
  .lotzwoo-contextcard__btn { flex: 1 1 100%; justify-content: center; }
}
/* ==================================================================   AP-57 · Der Listenumschalter der Favoritenseite (nur Modus `lists`)
   ========================================================================= */

.lotzwoo-favorites__switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lwb-sp-2, 8px);
  margin: 0 0 var(--lwb-sp-4, 16px);
  padding: var(--lwb-sp-2, 8px);
  background: var(--lwb-ink-50, #f8fafc);
  border: 1px solid var(--lwb-line-200, #e2e8f0);
  border-radius: var(--lwb-r-md, 8px);
}

.lotzwoo-favorites__tab {
  border: 1px solid transparent;
  background: none;
  padding: 6px 12px;
  border-radius: var(--lwb-r-full, 999px);
  font-size: 13px;
  color: inherit;
  cursor: pointer;
}

.lotzwoo-favorites__tab:hover { background: var(--lwb-ink-100, #f1f5f9); }
.lotzwoo-favorites__tab.is-active {
  background: var(--lwb-paper, #fff);
  border-color: var(--lwb-line-300, #cbd5e1);
  font-weight: 600;
}

/* Fokus-Ring über box-shadow wie überall in der Fläche — outline mit einem
   box-shadow-Wert ist die Regel, die der Browser verwirft (AP-45). */
.lotzwoo-favorites__tab:focus-visible { box-shadow: var(--lwb-focus); outline: none; }

.lotzwoo-favorites__tab--new { color: var(--lwb-brand-600, #0f766e); border-style: dashed; border-color: var(--lwb-line-300, #cbd5e1); }

.lotzwoo-favorites__tabaction {
  border: 0;
  background: none;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--lwb-ink-400, #64748b);
  cursor: pointer;
  margin-left: auto;
}

.lotzwoo-favorites__tabaction:hover { color: var(--lwb-ink-600, #334155); text-decoration: underline; }
.lotzwoo-favorites__tabaction:focus-visible { box-shadow: var(--lwb-focus); outline: none; }

/* Der Löschknopf nennt eine endgültige Handlung — rot genug, um gelesen zu
   werden, nicht rot genug, um neben dem Umschalter zu schreien. */
.lotzwoo-favorites__tabaction--danger { color: #b32d2e; }
.lotzwoo-favorites__tabaction--danger:hover { color: #8a1f20; }

/* ===========================================================
   AP-70 · C1 — die vier fremden Konto-Flächen bekommen unser Design

   **Vier Flächen sind unsere, vier sind Woos, und das ist die ganze
   Erklärung.** Eigene Endpunkte: `nachbestellen`, `favoriten`,
   `dauerauftraege`, `orte`, dazu die Übersicht aus AP-62. Fremde:
   `orders`, `downloads`, `edit-address`, `edit-account`.

   Gegengezählt am 2026-08-20: `woocommerce-orders-table`,
   `woocommerce-Address`, `woocommerce-EditAccountForm` und `form-row`
   kamen in **keinem** Stylesheet dieses Repos und in keinem der beiden
   Themes vor — null Treffer. Was der Auftraggeber gesehen hat, war
   keine halb fertige Fläche, sondern die Grenze zwischen dem, was
   gebaut wurde, und dem, was nie angefasst wurde — mitten durch
   dieselbe Navigation.

   **Über Stylesheet, nicht über Template-Overrides.** Woos
   Konto-Templates zu überschreiben hieße, sie bei jedem Woo-Update
   nachzuziehen. Die Klassennamen hier sind stabil: Woo führt sie seit
   Jahren als Anfasser für genau diesen Zweck.

   **Und es braucht keine Zeile PHP.** `Order_Context_Hooks::enqueue()`
   lädt dieses Stylesheet bereits auf **jeder** Kontoseite
   (`is_account_page()`), nicht nur auf den eigenen Endpunkten.

   **Was es dagegen sehr wohl braucht, ist ein Eintrag in
   `b2b-tokens.css`:** die Token sind nach Wurzelname gescoped, und ohne
   `.woocommerce-MyAccount-content` dort löst hier jedes `var()` ins
   Leere auf — lautlos. Gegengeprobt: ohne die zwei Zeilen dort sind 16
   von 42 Prüfungen der Konto-Suite rot.

   Jede Regel hängt unter `.woocommerce-MyAccount-content`, damit nichts
   davon in Warenkorb, Kasse oder Sortiment ausschlägt.
   ================================================================== */

/* ---------------- Überschriften und Fließtext ---------------- */

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
  margin: 0 0 var(--lwb-sp-3);
  font-size: var(--lwb-fs-lg);
  font-weight: 600;
  color: var(--lwb-ink-900);
}

.woocommerce-MyAccount-content > p,
.woocommerce-MyAccount-content .woocommerce-Address address {
  font-size: var(--lwb-fs-md);
  color: var(--lwb-ink-700);
  line-height: 1.5;
}

/* ---------------- Bestellungen: die Tabelle wird eine Karte ---------------- */

/* **`table.` ist kein Zierrat, sondern die Spezifitaet.** Woo schreibt
   `.woocommerce table.shop_table` — zwei Klassen **plus** Element; zwei
   Klassen allein verlieren dagegen, und zwar lautlos. Am 2026-08-20
   gemessen: `border-radius` stand auf 5px und der Rahmen auf Woos
   `color-mix`, während die Regel danebenstand und nichts tat. Dieselbe
   Krankheit wie A0, nur in einer fremden Datei. */
.woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-MyAccount-content table.woocommerce-table--order-downloads,
.woocommerce-MyAccount-content table.woocommerce-table--order-details {
  width: 100%;
  margin: 0 0 var(--lwb-sp-6);
  border: 1px solid var(--lwb-front-border);
  border-radius: var(--lwb-r-lg);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--lwb-front);
  box-shadow: var(--lwb-front-shadow);
  overflow: hidden;
  font-size: var(--lwb-fs-md);
}

.woocommerce-MyAccount-content table.woocommerce-orders-table th,
.woocommerce-MyAccount-content table.woocommerce-table--order-downloads th,
.woocommerce-MyAccount-content table.woocommerce-table--order-details th {
  padding: var(--lwb-sp-3) var(--lwb-sp-4);
  border-bottom: 1px solid var(--lwb-ink-200);
  background: var(--lwb-ink-50);
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-2xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
}

.woocommerce-MyAccount-content table.woocommerce-orders-table td,
.woocommerce-MyAccount-content table.woocommerce-table--order-downloads td,
.woocommerce-MyAccount-content table.woocommerce-table--order-details td {
  padding: var(--lwb-sp-3) var(--lwb-sp-4);
  border-bottom: 1px solid var(--lwb-ink-100);
  color: var(--lwb-ink-700);
  vertical-align: middle;
}

.woocommerce-MyAccount-content table.woocommerce-orders-table tr:last-child td,
.woocommerce-MyAccount-content table.woocommerce-table--order-downloads tr:last-child td { border-bottom: 0; }

.woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr:hover { background: var(--lwb-ink-50); }

/* Zahlen tabellarisch, damit eine Spalte mit Beträgen nicht springt —
   dieselbe Entscheidung wie in der Sortimentstabelle. */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-total,
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number,
.woocommerce-MyAccount-content .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

/* ---------------- Adressen ---------------- */

/* Am Container gemessen, nicht am Fenster — der Inhaltsbereich des
   Konto-Templates ist auf einem breiten Bildschirm schmal. Die Falle
   steht bei `.lotzwoo-reorder` ganz oben: ein Fenster-Haltepunkt meldete
   1400 px, während die Zeilen 590 zu teilen hatten. */
/* **Zwei Befunde, beide am 2026-08-26 gemessen, beide lautlos.**

   *Erstens: die Zweispaltigkeit hat nie gegriffen.* Hier stand
   `container-type: inline-size` auf `.woocommerce-Addresses` und darunter
   `@container lotzwoo-konto-adressen (min-width: 560px)` für **dasselbe**
   Element. Ein Element kann nicht sein eigener Query-Container sein —
   `@container` sucht den nächsten **Vorfahren** mit dem Namen, und den gab es
   nicht. Die Regel stand da und tat nichts.

   `repeat(auto-fit, minmax(260px, 1fr))` braucht die Konstruktion gar nicht:
   ab zwei Spalten Platz gibt es zwei, darunter eine. Eine Zeile statt sieben,
   und keine, die sich selbst befragt.

   *Zweitens: Woo gewann die Breite.* `.woocommerce .col2-set .col-1` in
   `woocommerce-layout.css` setzt `width: 48%; float: left` mit Spezifität
   **(0,3,0)**; die Regel hier hatte (0,2,0) und verlor — gemessen 313 px in
   einem 653 px breiten Bereich, beide Karten untereinander statt
   nebeneinander. `.col2-set` steht deshalb jetzt in der Kette: (0,4,0), und
   es nennt genau die fremde Regel, die überstimmt wird. */
/* **Flex und nicht Grid**, und das ist gemessen. Mit
   `grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))` standen die
   zwei Karten am 2026-08-26 **über Kreuz**: die Rechnungsadresse in Spalte 2
   der ersten Reihe, die Lieferadresse in Spalte 1 der zweiten — bei
   `grid-auto-flow: row`, `direction: ltr` und `grid-column: auto` an beiden.
   Woos `u-column1`/`u-column2` sind für ein Float-Layout gebaut, und in
   dieser Kombination bleibt etwas davon hängen, das sich an den berechneten
   Werten nicht ablesen lässt.

   Eine Reihe mit Umbruch kann nicht über Kreuz laufen: die Kinder stehen in
   Dokumentreihenfolge nebeneinander und brechen um, wenn 260 px nicht mehr
   hineinpassen. Dasselbe Ergebnis, ein Mechanismus weniger. */
.woocommerce-MyAccount-content .woocommerce-Addresses {
  display: flex;
  flex-wrap: wrap;
  /* **Linksbuendig mit dem Absatz darueber** (2026-08-26, angefordert).
     Gemessen: der Absatz „Die folgenden Adressen …" und dieser Container
     beginnen beide bei x = 547 — die **Karten** sassen aber bei 563, also
     16 px eingerueckt. `justify-content` stand auf `normal`, und in dieser
     Kombination verteilte der Rest (653 minus zwei Karten und Rinne) sich
     auf beide Seiten. `flex-start` sagt, was gemeint ist. */
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--lwb-sp-4);
  margin: 0 0 var(--lwb-sp-6);
}

/* **Woos Clearfix wird im Flex-Container zu zwei Elementen.**
   `.woocommerce .col2-set::before/::after { content: " "; display: table }`
   ist fuer ein Float-Layout gebaut und dort unsichtbar. In einem
   Flex-Container ist jedes Pseudoelement mit `content` ein **Flexelement** —
   und die zwei nahmen Platz.

   Gemessen, mit `justify-content: flex-start` und Kindern ohne Rand:
   16 px vor der ersten Karte, 17 zwischen den Karten, 16 hinter der zweiten.
   Genau die 16 px, um die die Karten gegen den Absatz darueber versetzt
   standen — und der Grund, warum `flex-start` allein nichts geaendert hat. */
.woocommerce-MyAccount-content .col2-set.woocommerce-Addresses::before,
.woocommerce-MyAccount-content .col2-set.woocommerce-Addresses::after {
  display: none;
}

.woocommerce-MyAccount-content .col2-set.woocommerce-Addresses > .woocommerce-Address {
  flex: 1 1 260px;
  min-width: 0;
}

.woocommerce-MyAccount-content .col2-set.woocommerce-Addresses .woocommerce-Address,
.woocommerce-MyAccount-content .woocommerce-Address {
  width: auto;
  float: none;
  padding: var(--lwb-sp-4);
  border: 1px solid var(--lwb-front-border);
  border-radius: var(--lwb-r-lg);
  background: var(--lwb-front);
  box-shadow: var(--lwb-front-shadow);
}

/* Der Kopf der Karte: Titel links, Griff rechts.

   **`flex-wrap: wrap` ist der Punkt.** Ohne ihn quetscht die Reihe den Titel,
   und „Rechnungsadresse" bricht in „Rech-nungs-adresse" — auf einem schmalen
   Konto-Inhaltsbereich genau der Fall, den der Auftraggeber gemeldet hat. Mit
   Umbruch rutscht stattdessen der Griff in die nächste Zeile, und das Wort
   bleibt ein Wort. */
/* **Eine Spalte, alles an derselben Kante** (2026-08-26, angefordert):
   Titel, darunter der Griff, darunter der Trenner und der Adressblock. Bis
   hierher stand der Griff in derselben Reihe wie der Titel und wurde von
   einem `margin-inline-start: auto` nach rechts geschoben — gemessen sass er
   bei x = 639, waehrend Titel (592) und Adresse (580) schon nicht miteinander
   fluchteten.

   `align-items: flex-start` und nicht `stretch`: der Griff ist ein Knopf und
   soll die Breite seiner Beschriftung haben, nicht die der Karte. */
.woocommerce-MyAccount-content .woocommerce-Address-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* **Kein `gap` — der Knopf traegt den Abstand selbst** (2026-08-26,
     angefordert). Ein `gap` ist symmetrisch; hier soll ueber dem Knopf mehr
     Luft stehen als darunter. Zwei Quellen fuer denselben Abstand waeren
     wieder die eine, die driftet, also traegt ihn genau einer. */
  gap: 0;
  margin-bottom: var(--lwb-sp-3);
  padding-bottom: var(--lwb-sp-3);
  border-bottom: 1px solid var(--lwb-ink-100);
}

.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
  margin: 0;
  font-size: var(--lwb-fs-lg);
}

/* Der Griff ist ein Verweis, kein Knopf. Woo beschriftet ihn
   „Rechnungsadresse bearbeiten" — daneben steht „Rechnungsadresse", also
   sagt er das Wort zweimal und war in dieser Fassung breiter als der Titel,
   den er ergänzt. Als Verweis in Markenfarbe nimmt er die Zeile, die ihm
   zusteht, und der Titel bleibt der Titel. Der Wortlaut ist Woos und bleibt
   es: er ist die Auskunft für den, der ihn ohne den Titel daneben hört. */
/* **Der Griff ist wieder ein Knopf** (2026-08-26). Gestern stand hier eine
   Regel, die ihn zum Verweis machte — weil er „Rechnungsadresse bearbeiten"
   neben einem Titel „Rechnungsadresse" sagte und breiter war als das, was er
   ergaenzt. Das Wort ist jetzt an der Quelle kurz
   ({@see \Lotzwoo\B2B\Account\Address_Card_Label}), also braucht es die
   Regel nicht mehr — und `ap70-konto` bekommt seinen Knopf zurueck, den
   AP-70 fuer alle Konto-Flaechen festgeschrieben hat.

   Was bleibt, ist die Stelle: kein `margin-inline-start: auto`, damit er an
   der linken Kante steht wie alles andere in der Karte.

   **Die Raender sind angefordert** (0,7rem oben, 0,2rem unten) und ersetzen
   den `gap` des Kopfes. Kein `!important`: diese Kette ist (0,4,0) und
   schlaegt den Knopfblock weiter unten, der bei (0,3,0) liegt — dieselbe
   Rechnung, die den Griff schon einmal gerettet hat. */
.woocommerce-MyAccount-content .woocommerce-Address .woocommerce-Address-title a,
/* **Woos eigener Selektor, plus eine Klasse.** `woocommerce-blocktheme.css`
   setzt `.woocommerce-account .addresses .title .edit { margin-bottom: 1em }`
   mit (0,4,0); die Kette darueber hat (0,3,1) und verlor — gemessen blieben
   14 px unter dem Knopf statt der angeforderten 0,2rem. Genau deshalb stand
   `!important` im Vorschlag.
   Gebraucht wird es nicht: `.woocommerce-MyAccount-content` dazwischen macht
   (0,5,0) und nennt den Gegner beim Namen. */
.woocommerce-account .woocommerce-MyAccount-content .addresses .title .edit {
  margin: 0.7rem 0 0.2rem 0;
}

/* **`<address>` ist kursiv, weil Browser das so vorsehen** — und eine
   Anschrift ist keine Hervorhebung. Vier Zeilen Kundendaten in Kursiv lesen
   sich schlechter und sehen aus wie ein Zitat. */
.woocommerce-MyAccount-content .woocommerce-Address address {
  margin: 0;
  font-style: normal;
  font-size: var(--lwb-fs-md);
  line-height: 1.6;
  color: var(--lwb-ink-700);
}

/* ---------------- Formulare: Adressen und Kontodetails ---------------- */

.woocommerce-MyAccount-content form.woocommerce-address-fields,
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm {
  padding: var(--lwb-sp-4);
  border: 1px solid var(--lwb-front-border);
  border-radius: var(--lwb-r-lg);
  background: var(--lwb-front);
  box-shadow: var(--lwb-front-shadow);
}

.woocommerce-MyAccount-content .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--lwb-sp-2);
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
}

/* **Der Abstand zwischen Etikett und Feld kommt aus genau einer Quelle.**

   Gemeldet am 2026-08-26: „manche haben zu viel Abstand". Gemessen war er
   zwar überall 12 px — aber aus **zwei** Quellen zusammengesetzt: dem `gap`
   der Zeile (4 px) und einem geerbten `margin-block-end: 8,4px` am Label,
   das aus der Grundschrift des Themes kommt (0,6em). Zwei Quellen für einen
   Abstand heißt: wo die eine fehlt, ist er ein anderer — ein Etikett ohne
   dieses Margin stand 4 px über seinem Feld, eines mit 12.

   Das Margin geht auf null, der `gap` auf 8 px. Danach ist die Zahl eine,
   sie steht an einer Stelle, und sie gilt für jedes Feld dieser Fläche:
   Text, Auswahl, Textbereich, Kästchen. */
.woocommerce-MyAccount-content .form-row label {
  margin: 0;
  font-size: var(--lwb-fs-xs);
  font-weight: 600;
  line-height: 1.2;
  color: var(--lwb-ink-600);
}

.woocommerce-MyAccount-content .form-row .required { color: var(--lwb-brand-600); text-decoration: none; }

/* Dieselben Felder wie der Terminwähler im Nachbestellen (`__termin`) —
   eine Form, nicht zwei. */
.woocommerce-MyAccount-content .form-row .input-text,
.woocommerce-MyAccount-content .form-row select,
.woocommerce-MyAccount-content .form-row textarea,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm .input-text {
  box-sizing: border-box;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--lwb-ink-200);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-surface);
  color: var(--lwb-ink-900);
  font: inherit;
  font-size: var(--lwb-fs-md);
  line-height: 1.3;
}

.woocommerce-MyAccount-content .form-row .input-text:focus-visible,
.woocommerce-MyAccount-content .form-row select:focus-visible,
.woocommerce-MyAccount-content .form-row textarea:focus-visible {
  outline: none;
  border-color: var(--lwb-brand-500);
  box-shadow: var(--lwb-focus);
}

/* ---------------- Und dasselbe noch einmal, eine Klasse länger ----------------

   **Auf den Bearbeiten-Seiten hat von alledem nichts gegriffen**, und der
   Grund ist an beiden Stellen derselbe: Woo gewinnt mit **einem Element
   mehr** in der Kette. Am 2026-08-26 auf `…/adresse-bearbeiten/billing/`
   ausgelesen, Regel gegen Regel:

     Etikett   `.woocommerce-page form .form-row label`     (0,2,2)  Woo
               `.woocommerce-MyAccount-content .form-row label`  (0,2,1)  wir
     Feld      `.woocommerce form .form-row .input-text`    (0,3,1)  Woo
               `… .form-row .input-text`                    (0,2,1)  wir

   Sichtbar war das als 46 px hohe Felder mit fremden Rahmen (`--wc-form-*`)
   und einem `margin-bottom: 0.7em` am Etikett — **genau die 8,4 px, die der
   Auftraggeber als „zu viel Abstand" gemeldet hat.** Die Regel eine Zeile
   höher, die das Margin auf null setzt, stand da und verlor.

   `.woocommerce-page` davor bringt (0,3,2) und schlägt beide. Die Klasse ist
   nicht geraten: sie steht in Woos eigener Kette und hängt auf jeder Seite
   dieses Plugins am `<body>`. **Kein `!important`** — es gibt einen Gegner,
   er ist benannt, und eine Klasse mehr reicht.

   Wiederholt statt zusammengefasst: die kurzen Fassungen oben gelten auf den
   Flächen ohne Woo-Formular (die Übersicht, die eigenen Endpunkte), diese
   hier zusätzlich dort, wo Woo mitschreibt. Eine gemeinsame Liste hätte die
   längere Kette überall erzwungen und damit die Begründung verwischt. */
.woocommerce-page .woocommerce-MyAccount-content form .form-row label {
  margin: 0;
  font-size: var(--lwb-fs-xs);
  font-weight: 600;
  /* Angefordert am 2026-08-26. Ein Etikett ist eine Zeile; die 1,5 der
     Grundschrift geben ihm eine Zeilenhoehe, die es nur bei einem Umbruch
     braucht — und dann bleibt sie richtig. */
  line-height: 1.2;
  color: var(--lwb-ink-600);
}

.woocommerce-page .woocommerce-MyAccount-content form .form-row .input-text,
.woocommerce-page .woocommerce-MyAccount-content form .form-row select,
.woocommerce-page .woocommerce-MyAccount-content form .form-row textarea {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 7px 10px;
  border: 1px solid var(--lwb-ink-200);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-surface);
  color: var(--lwb-ink-900);
  font-size: var(--lwb-fs-md);
  line-height: 1.3;
}

.woocommerce-page .woocommerce-MyAccount-content form .form-row .input-text:focus-visible,
.woocommerce-page .woocommerce-MyAccount-content form .form-row select:focus-visible,
.woocommerce-page .woocommerce-MyAccount-content form .form-row textarea:focus-visible {
  outline: none;
  border-color: var(--lwb-brand-500);
  box-shadow: var(--lwb-focus);
}

/* ---------------- Eine Höhe für jedes Feld ----------------

   Angefragt war `.form-row select { min-height: 2.6rem !important }`.
   Gemessen am 2026-08-26, bevor etwas gesetzt wurde:

     input.input-text                34,2 px
     select (Kontodetails)           34,2 px   — schon gleich
     Select2 (Land/Region)           49,0 px   — der Ausreißer

   **Die Selects allein höher zu machen hätte den Fehler gedreht**, nicht
   behoben: sie stünden dann bei 41,6 px neben Eingabefeldern mit 34,2. Der
   Wert kommt deshalb an **jedes** Bedienelement dieser Formulare — Text,
   Auswahl, Textbereich und Woos Select2 —, und er steht als Zahl an einer
   Stelle statt viermal.

   `min-height` und keine `height`: ein Textbereich darf höher sein, und ein
   Etikett, das umbricht, soll sein Feld nicht stauchen. Kein `!important` —
   die Ketten hier gewinnen ohnehin, das steht weiter oben. */
.woocommerce-MyAccount-content .form-row .input-text,
.woocommerce-MyAccount-content .form-row select,
.woocommerce-MyAccount-content .form-row textarea,
.woocommerce-page .woocommerce-MyAccount-content form .form-row .input-text,
.woocommerce-page .woocommerce-MyAccount-content form .form-row select,
.woocommerce-page .woocommerce-MyAccount-content form .form-row textarea,
.woocommerce-MyAccount-content .select2-container--default .select2-selection--single {
  min-height: var(--lwb-konto-feld-h);
}

/* **Select2 braucht eine gesetzte Höhe, keine Mindesthöhe.** Es stand bei
   49 px, und `min-height: 2.6rem` (41,6) konnte daran nichts ändern — eine
   Mindesthöhe hebt an, sie senkt nicht. Der Kasten bekommt deshalb die Höhe,
   und der Textknoten darin zentriert sich; sein Polster ist nur noch
   waagrecht, sonst addierte es sich auf die gesetzte Höhe. */

.woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__rendered {
  flex: 1;
  min-height: 0;
  padding: 0 10px;
  line-height: 1.3;
}

/* ---------------- Das Länderfeld ist gar kein `select` ----------------

   **Am 2026-08-26 gemessen, und die Ursache war eine andere als vermutet.**
   Das `<select class="country_select">` ist **1 px hoch und versteckt** — es
   trägt `select2-hidden-accessible`. WooCommerce reicht die Länder- und
   Bundeslandauswahl an **Select2** weiter, und was auf dem Schirm steht, ist
   dessen eigenes Markup aus `<span>`. Jede Regel für `select` in dieser
   Datei ging daran vorbei, ohne dass etwas davon zu sehen war.

   Die Abweichung war vollständig — kein Wert stimmte überein:

     Höhe    44 px gegen 34        Rahmen   rgba(32,7,7,.8) gegen ink-200
     Radius   4 px gegen 8         Grund    #fff gegen surface
     Schrift 13 px, #444           Polster  14,4/17,6 gegen 7/10

   Angeglichen wird der **geschlossene** Zustand, also das, was auf der Seite
   steht. Die aufgeklappte Liste (`.select2-dropdown`) hängt am `<body>` und
   damit außerhalb von `.woocommerce-MyAccount-content`; sie zu fassen hieße,
   sie überall zu fassen — auch in der Kasse, und die hat niemand angefragt.
   Das ist bewusst offen und keine Lücke aus Versehen. */
.woocommerce-MyAccount-content .select2-container { width: 100% !important; }

.woocommerce-MyAccount-content .select2-container--default .select2-selection--single {
  /* **Gesetzte Hoehe, keine Mindesthoehe** — und sie steht hier und nicht
     weiter oben: dort stand sie vor diesem Block, beide mit (0,3,0), und bei
     gleicher Spezifitaet gewinnt die spaetere Regel. Gemessen blieb der
     Kasten deshalb bei 49 px, obwohl die Hoehe gesetzt war.
     `min-height` allein reicht ohnehin nicht: sie hebt an, sie senkt nicht. */
  height: var(--lwb-konto-feld-h);
  display: flex;
  align-items: center;
  border: 1px solid var(--lwb-ink-200);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-surface);
}

.woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 7px 10px;
  color: var(--lwb-ink-900);
  font-size: var(--lwb-fs-md);
  line-height: 1.3;
}

/* Der Pfeil sitzt über die volle Höhe und rückt so weit nach innen wie das
   Polster daneben — sonst klebt er an der Kante, die er eben bekommen hat. */
.woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  inset-inline-end: var(--lwb-sp-2);
}

/* Derselbe Fokusring wie an den Textfeldern. Select2 setzt beim Öffnen
   `--open` **und** `--focus`; beide zeigen denselben Zustand. */
.woocommerce-MyAccount-content .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-MyAccount-content .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--lwb-brand-500);
  box-shadow: var(--lwb-focus);
}

/* **Die Karte um das Formular fehlte, weil die Klasse auf dem `div` sitzt.**
   Die Regel weiter oben sagt `form.woocommerce-address-fields`; Woo schreibt
   aber `<form method="post"><div class="woocommerce-address-fields">`. Ein
   Selektor auf ein Element, das die Klasse nie trägt — dieselbe Krankheit
   wie die Container-Query bei den Adressen, nur mit einem Buchstaben. */
.woocommerce-MyAccount-content .woocommerce-address-fields,
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm {
  padding: var(--lwb-sp-4);
  border: 1px solid var(--lwb-front-border);
  border-radius: var(--lwb-r-lg);
  background: var(--lwb-front);
  box-shadow: var(--lwb-front-shadow);
}

/* **Das Formular ist ein Raster, und der Abstand kommt aus einer Zahl.**

   Angefragt war `.form-row { margin: 0 !important }`. Der Rand war die
   **zweite** Quelle des Zeilenabstands neben der Zweispaltigkeit, und beide
   zusammen ergaben Messwerte, die niemand entschieden hat: gemessen am
   2026-08-26 stand zwischen den Zeilen `6px`, zwischen dem ersten Paar aber
   **−79** — die `inline-flex`-Zeilen ueberlappten sich, weil ihre Hoehe vom
   Leerraum im Markup abhing.

   Ein Raster loest beides auf einmal: zwei Spalten, ein `gap`, und
   `form-row-wide` ueber beide. Die Zeilen brauchen dann keinen Rand mehr —
   `margin: 0` ist hier keine Ueberstimmung, sondern die Folge, und deshalb
   steht kein `!important` dabei.

   `align-items: start`, damit eine Zeile mit zweizeiligem Etikett die
   Nachbarzeile nicht mitstreckt. */
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper,
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
.woocommerce-MyAccount-content fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--lwb-sp-3);
}

.woocommerce-MyAccount-content .form-row,
/* **Die längere Kette, zum dritten Mal an derselben Datei.** Woo setzt
   `.woocommerce form .form-row { margin: 0 0 6px }` mit (0,2,2); die kurze
   Fassung hier hat (0,2,0) und verlor — gemessen blieben die 6 px stehen,
   obwohl die Regel dastand. `.woocommerce-page` davor bringt (0,3,2). */
.woocommerce-page .woocommerce-MyAccount-content form .form-row {
  margin: 0;
  grid-column: 1 / -1;
}

/* **Jedes Kind des Kontoformulars über die volle Breite** (2026-09-24).
   Woo stellt die zwei Passwort-Gruppen und den Absatz mit dem Speicherknopf
   ohne `form-row` hinein; im Raster nahmen sie deshalb je **eine** Spalte —
   „Passwort ändern" und „Darstellung" standen halb breit, der Knopf rechts
   neben „Darstellung" statt am Ende der Karte. Vor- und Nachname stehen
   darunter wieder in ihren Spalten. */
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm > * { grid-column: 1 / -1; }

/* Woos `div.clear` ist im Raster kein Umbruch, sondern eine leere Zelle — und
   jede Zelle bekommt ein `gap`. */
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm > .clear { display: none; }

/* **Woos Clearfix an jeder `form-row`** (`::before`/`::after`, `display: table`)
   stammt aus der Zeit der Floats. In einer Flex-Spalte werden beide zu
   eigenen Elementen, und `gap` legt sich um sie: gemessen 12 px ueber und
   unter jedem Feld, die niemand bestellt hat (2026-09-24). */
.woocommerce-page .woocommerce-MyAccount-content form .form-row::before,
.woocommerce-page .woocommerce-MyAccount-content form .form-row::after { content: none; }

/* Woo gibt `form-row-first`/`-last` 47 % Breite und einen Float — in der
   Rasterspalte hieß das 47 % **der Spalte**, gemessen 143 von 303 px. */
.woocommerce-page .woocommerce-MyAccount-content form .form-row-first,
.woocommerce-page .woocommerce-MyAccount-content form .form-row-last {
  width: auto;
  float: none;
}

/* Anzeigename ausgeblendet (`Display_Name_Lock`). */
.woocommerce-MyAccount-content form[data-lotzwoo-display-name="hidden"] .form-row:has(> #account_display_name) { display: none; }

.woocommerce-MyAccount-content .form-row-first,
.woocommerce-page .woocommerce-MyAccount-content form .form-row-first { grid-column: 1; }

.woocommerce-MyAccount-content .form-row-last,
.woocommerce-page .woocommerce-MyAccount-content form .form-row-last { grid-column: 2; }

.woocommerce-MyAccount-content fieldset {
  margin: var(--lwb-sp-5) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.woocommerce-MyAccount-content fieldset legend {
  padding: 0;
  margin-bottom: var(--lwb-sp-3);
  font-size: var(--lwb-fs-lg);
  font-weight: 600;
  color: var(--lwb-ink-900);
}

.woocommerce-MyAccount-content .woocommerce-form__label-for-checkbox {
  flex-direction: row;
  align-items: center;
  gap: var(--lwb-sp-2);
}

/* ---------------- Knöpfe: dieselben wie nebenan ---------------- */

/* **Drei Schreibweisen für denselben Knopf, und alle drei kommen von Woo.**
   Gegengezählt am 2026-08-20 im Dokument: die Bestellübersicht schreibt
   `woocommerce-button wp-element-button view` (klein), die Adressenkarte
   einen nackten `a.edit` **ganz ohne** Knopfklasse, und die Formulare einen
   `button[type=submit]`. Wer nur die große Schreibweise adressiert,
   gestaltet genau eine der drei Flächen.

   Die Kette ist absichtlich lang genug, um ohne `!important` gegen die
   `.button`-Regel eines Themes zu gewinnen — dieselbe Überlegung wie bei
   `.lotzwoo-reorder .lotzwoo-reorder__submit` weiter oben. */
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content .woocommerce-button,
.woocommerce-MyAccount-content .woocommerce-Address-title .edit,
.woocommerce-MyAccount-content .woocommerce-Address .button,
.woocommerce-MyAccount-content table.woocommerce-orders-table .button,
.woocommerce-MyAccount-content table.woocommerce-table--order-downloads .button,
.woocommerce-MyAccount-content form.woocommerce-address-fields button[type="submit"],
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lwb-sp-2);
  padding: 8px 15px;
  border: 1px solid var(--lwb-ink-200);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-surface);
  color: var(--lwb-ink-700);
  font: inherit;
  font-size: var(--lwb-fs-md);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 110ms ease, border-color 110ms ease;
}

.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content .woocommerce-button:hover,
.woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover,
.woocommerce-MyAccount-content .woocommerce-Address .button:hover { background: var(--lwb-ink-100); }

/* Der eine Knopf, der die Handlung ist — wie `__submit` im Nachbestellen. */
.woocommerce-MyAccount-content form.woocommerce-address-fields button[type="submit"],
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm button[type="submit"] {
  border-color: var(--lwb-brand-500);
  background: var(--lwb-brand-500);
  color: var(--lwb-surface);
}

.woocommerce-MyAccount-content form.woocommerce-address-fields button[type="submit"]:hover,
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm button[type="submit"]:hover {
  border-color: var(--lwb-brand-600);
  background: var(--lwb-brand-600);
}

.woocommerce-MyAccount-content .woocommerce-Button:focus-visible,
.woocommerce-MyAccount-content .woocommerce-button:focus-visible,
.woocommerce-MyAccount-content .woocommerce-Address-title .edit:focus-visible,
.woocommerce-MyAccount-content form.woocommerce-address-fields button[type="submit"]:focus-visible,
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm button[type="submit"]:focus-visible {
  outline: none;
  box-shadow: var(--lwb-focus);
}

/* ---------------- Meldungen und Paginierung ---------------- */

.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-error {
  margin: 0 0 var(--lwb-sp-4);
  padding: var(--lwb-sp-3) var(--lwb-sp-4);
  border: 1px solid var(--lwb-ink-200);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-ink-50);
  color: var(--lwb-ink-700);
  font-size: var(--lwb-fs-md);
  list-style: none;
}

.woocommerce-MyAccount-content .woocommerce-pagination {
  display: flex;
  gap: var(--lwb-sp-2);
  justify-content: flex-end;
  margin-top: var(--lwb-sp-4);
}

/* ---------------- Die Bestellungen sind eine Liste, keine Tabelle ----------------

   **Der Befund, gemessen am 2026-08-26.** Der Inhaltsbereich des
   Konto-Templates ist **653 px** breit; die Tabelle mit ihren sechs Spalten
   brauchte **754 px**. Die 99 px Überlauf zahlte jede einzelne Zelle: „Wien
   1100 — Hauptfiliale" stand über drei Zeilen, „In Wartestellung" über zwei,
   die Aktionsspalte lief rechts aus dem Bild, und eine Zeile war **183 px**
   hoch. Dazu erbte die Nummernspalte die Kopfzeilenfarbe, weil Woo sie als
   `th` in den `tbody` schreibt und die Kopfregel darüber nicht nach `thead`
   fragte — die beige erste Spalte war das, nicht Absicht.

   **Sechs Spalten passen in 653 px nicht.** Man kann Polster abschaben und
   Schriften verkleinern, bis es rechnerisch aufgeht; das ist die Reparatur,
   die beim nächsten längeren Ortsnamen wieder aufgeht. Der Auftraggeber hat
   am 2026-08-26 stattdessen die Form genannt, die hier ohnehin überall sonst
   steht: „wie die Listen bei Nachbestellen oder Orte & Termine". Eine Karte
   je Bestellung hat kein Spaltenbudget.

   **Ohne Template-Override**, und das ist der Punkt. Der lange Absatz ganz
   oben in diesem Abschnitt hält fest, warum Woos Konto-Templates nicht
   überschrieben werden: sie müssten bei jedem Woo-Update nachgezogen werden.
   Er gilt weiter. Woo liefert für genau diesen Zweck an **jeder** Zelle ein
   `data-title` mit — sein eigenes Stylesheet kippt die Tabelle unter 768 px
   damit auf „Label vor Wert". Hier steht dieselbe Umschaltung, nur auf jeder
   Breite und in unserer Gestaltung. Kein PHP, keine fremde Vorlage, und die
   Spaltenverträge bleiben: `Order_Context_Hooks::render_column()` zeichnet
   weiter in seine Zelle, und eine Spalte, die ein anderes Plugin einhängt,
   erscheint als weitere Zeile in der Karte statt zu verschwinden.

   **`tr.woocommerce-orders-table__row` in der Kette ist Absicht.** Woos
   Schmalregeln (`.woocommerce table.shop_table_responsive tr td::before`)
   haben dieselbe Spezifität wie die naheliegende Fassung ohne sie; unter
   768 px entschiede dann die Ladereihenfolge, und das ist keine Zusicherung,
   sondern ein Zufall, der bei der nächsten Umstellung kippt.

   **Der Preis, benannt:** eine Tabelle, die als Blöcke dargestellt wird,
   verliert für Vorlesewerkzeuge ihre Tabellensemantik — Spalte und Zeile
   sind dann keine Beziehung mehr, sondern Reihenfolge. Deshalb trägt jede
   Zeile ihr Etikett sichtbar **und** vorlesbar über `::before` statt nur
   räumlich über eine Kopfzeile. Woo trifft unter 768 px dieselbe Abwägung;
   neu ist hier nur die Breite, ab der sie gilt. */

.woocommerce-MyAccount-content table.woocommerce-orders-table {
  /* Die Karte sitzt jetzt an der Zeile, nicht am Tisch. Alle vier Rollen
     zurücknehmen, sonst steht ein Rahmen um die Rahmen. */
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin-bottom: var(--lwb-sp-4);
}

/* Die Kopfzeile entfällt: jede Zelle sagt ihren Namen selbst. */
.woocommerce-MyAccount-content table.woocommerce-orders-table thead {
  display: none;
}

.woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-MyAccount-content table.woocommerce-orders-table tbody,
.woocommerce-MyAccount-content table.woocommerce-orders-table tr,
.woocommerce-MyAccount-content table.woocommerce-orders-table th,
.woocommerce-MyAccount-content table.woocommerce-orders-table td {
  display: block;
  width: auto;
}

/* Die Karte — dieselben vier Zeilen wie `.lotzwoo-locations__card` und
   `.lotzwoo-reorder__order`, weil es dieselbe Art Gegenstand ist. */
.woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row {
  margin: 0 0 var(--lwb-sp-4);
  border: 1px solid var(--lwb-front-border);
  border-radius: var(--lwb-r-lg);
  background: var(--lwb-front);
  box-shadow: var(--lwb-front-shadow);
  overflow: hidden;
}

.woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row:hover {
  background: var(--lwb-front);
}

/* Eine Angabe je Zeile: Etikett links, Wert rechts.

   **Kein Flex, und das ist gemessen.** Der naheliegende Griff wäre
   `display: flex; justify-content: space-between`. Woo baut die Summenzelle
   aber aus **drei** Knoten — einem Leerraum, `<span class="…Price-amount">`
   und dem Text „ für 18 Artikel". Flex macht daraus drei Elemente und
   verteilt sie einzeln: „Gesamtsumme … € 501,00 … für 18 Artikel", der
   Betrag in der Mitte der Zeile. Am 2026-08-26 am Klon so gesehen.

   Das Etikett steht deshalb **absolut** und der Wert bleibt im normalen
   Fluss — dann hängen Betrag und Stückzahl zusammen, mitsamt dem Leerzeichen
   zwischen ihnen, das ein Flex-Container verschluckt hätte.

   Die `8em` sind das längste Etikett („Gesamtsumme") plus Luft. Eine Zahl,
   ja — aber eine, die sich selbst meldet: wird ein Etikett länger, bricht es
   um und schiebt nichts. Der Wert daneben bleibt lesbar. */
.woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row > th,
.woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row > td {
  position: relative;
  /* Dieselben Masse wie `.lotzwoo-reorder__line` nebenan (2026-08-26,
     angefordert: „so aussehen wie die li items in den Nachbestellen
     Tabellen"): `sp-3 sp-4` Polster, `ink-100` als Trennlinie, `ink-700` als
     Schrift. Zwei Listen im selben Konto duerfen sich nicht darin
     unterscheiden, wie hoch eine Zeile ist. */
  padding: var(--lwb-sp-3) var(--lwb-sp-4);
  padding-inline-start: calc(var(--lwb-sp-4) + 8em);
  border-bottom: 1px solid var(--lwb-ink-100);
  background: none;
  color: var(--lwb-ink-700);
  text-align: right;
}

/* **Warum das Etikett absolut steht und die Zeile kein Raster ist.**
   `.lotzwoo-reorder__line` ist ein Grid, und das waere hier der naheliegende
   Weg. Woo baut die Summenzelle aber aus **drei** Knoten (Leerraum,
   `<span class="…Price-amount">`, Text „ fuer 18 Artikel"); in einem Grid
   wie in einem Flex-Container wird jeder davon ein eigenes Element, und der
   Betrag stand mitten in der Zeile — am 2026-08-26 so gesehen und
   zurueckgebaut. Gleiches Aussehen, anderer Mechanismus, und der Grund steht
   hier, damit ihn niemand „aufraeumt". */

.woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row > th::before,
.woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row > td::before {
  content: attr(data-title);
  position: absolute;
  top: var(--lwb-sp-3);
  inset-inline-start: var(--lwb-sp-4);
  max-width: 8em;
  color: var(--lwb-ink-500);
  font-size: var(--lwb-fs-sm);
  font-weight: 400;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}

/* **Der Kontextblock bringt 56 px Luft mit** (`margin: 24px 0 32px`,
   gemessen). Sie sind für die Stelle gebaut, an der er sonst steht — unter
   der Bestellung, als eigener Kasten. In einer Kartenzeile ist es nur eine
   Zelle, die dreimal so hoch ist wie ihre zwei Textzeilen. */
.woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row > td.woocommerce-orders-table__cell-lotzwoo-context > * {
  margin-block: 0;
  align-items: flex-end;
}

/* Der Kopf der Karte: die Bestellnummer. Sie ist ein `th` — das bleibt sie,
   sie benennt die Zeile. Ihr Etikett entfällt, „Bestellung" über einer Zahl
   mit Rautezeichen davor sagt nichts, was die Zahl nicht schon sagt. */
.woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row > th.woocommerce-orders-table__cell-order-number {
  padding-inline-start: var(--lwb-sp-4);
  /* `ink-100` und nicht `ink-200` — am 2026-08-26 gegen die zwei
     Nachbarlisten gemessen: `.lotzwoo-reorder__order-head` und
     `.lotzwoo-locations__card-head` trennen beide mit `ink-100`. Eine
     Liste, die kräftiger trennt als die zwei daneben, ist keine Linie. */
  border-bottom: 1px solid var(--lwb-ink-100);
  background: var(--lwb-ink-50);
  color: var(--lwb-ink-900);
  font-size: var(--lwb-fs-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row > th.woocommerce-orders-table__cell-order-number::before {
  content: none;
}

.woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row > th.woocommerce-orders-table__cell-order-number a {
  color: inherit;
  text-decoration: none;
}

/* Der Fuß: die Aktionsknöpfe stehen für sich, ohne Etikett und ohne
   Trennlinie darunter — darunter kommt die Kante der Karte. */
.woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row > td.woocommerce-orders-table__cell-order-actions {
  padding-inline-start: var(--lwb-sp-4);
  border-bottom: 0;
  background: var(--lwb-ink-50);
}

.woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row > td.woocommerce-orders-table__cell-order-actions::before {
  content: none;
}

/* Eine leere Zelle kostet keine Zeile. Woo schreibt sie trotzdem — etwa die
   Kontextspalte bei einer Bestellung, die vor der Kontexteinführung
   entstanden ist. */
.woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row > td:empty {
  display: none;
}

/* ===========================================================
   AP-70 · C5 — die Kontonavigation kostet auf dem Telefon eine Zeile

   `.woocommerce-MyAccount-navigation` kam in **keinem** Stylesheet dieses
   Repos und in keinem der beiden Themes vor — null Treffer, gegengezählt
   am 2026-08-20. Was der Auftraggeber sah, war Woos eigenes: ein Stapel
   aus bis zu zehn Reitern über dem Inhalt. Gemessen nach der Änderung:
   **38 px** statt eines Stapels aus neun Reitern.

   Die Auswahlliste baut `assets/js/b2b-account-nav.js`, und **nur sie**
   setzt `is-lotzwoo-enhanced`. Ohne Skript greift die Regel unten nicht
   und die Liste steht da wie vorher — das ist der billigste Nachweis
   dieses Punktes und der, den ein `<select>` am leichtesten still bricht.
   ================================================================== */

.woocommerce-MyAccount-navigation .lotzwoo-accountnav {
  display: none;
  margin: 0 0 var(--lwb-sp-4);
}

.woocommerce-MyAccount-navigation .lotzwoo-accountnav__select {
  box-sizing: border-box;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--lwb-ink-200);
  border-radius: var(--lwb-r-md);
  background: var(--lwb-surface);
  color: var(--lwb-ink-900);
  font: inherit;
  font-size: var(--lwb-fs-md);
  font-weight: 600;
  line-height: 1.3;
}

.woocommerce-MyAccount-navigation .lotzwoo-accountnav__select:focus-visible {
  outline: none;
  border-color: var(--lwb-brand-500);
  box-shadow: var(--lwb-focus);
}

/* Die Stufe: 768 px ist die, ab der Woos Konto-Vorlage einspaltig wird und
   die Reiter den Inhalt nach unten drängen. Darüber ändert sich nichts. */
@media (max-width: 768px) {
  .woocommerce-MyAccount-navigation.is-lotzwoo-enhanced .lotzwoo-accountnav {
    display: block;
  }

  /* Die Liste tritt zurück — aus dem **Bild**, nicht aus dem Baum. Andere
     Erweiterungen hängen an ihr, und sie steht unverändert im Dokument.
     `display: none` und nicht die Sehhilfen-Klammer: sonst hörte ein
     Screenreader dieselben neun Reiter zweimal. */
  .woocommerce-MyAccount-navigation.is-lotzwoo-enhanced > ul {
    display: none;
  }
}

/* ===========================================================
   AP-97 · Ein Symbol vor jedem Konto-Reiter

   Entscheidung des Auftraggebers vom 2026-09-01, gezeichnet in
   `docs/mockups/2026-09-01-konto-symbole.html`. Das Markup setzt
   `Account_Nav_Icons` über die eigene `myaccount/navigation.php`; hier steht
   nur, wie es liegt und welche Farbe es trägt.

   **Die Liste bleibt Woos Liste.** Diese Regeln setzen keine Fläche, keinen
   Rahmen und keinen Abstand um die Reiter — das gehört dem Theme, und ein
   Plugin, das hier eine Gestalt mitbringt, streitet auf jedem Kundentheme mit
   ihr. Gesetzt wird die Zeile im Link, damit Symbol und Wort auf einer
   Grundlinie stehen, und die Farbe des Symbols.
   ================================================================== */

.woocommerce-MyAccount-navigation li > a {
  display: flex;
  align-items: center;
  gap: var(--lwb-sp-3);
}

/* Zurückhaltender als das Wort daneben: das Symbol führt das Auge, es soll es
   nicht halten. Im aktiven Reiter nimmt es die Markenfarbe an — dieselbe, die
   Woo dem aktiven Eintrag ohnehin gibt. */
.woocommerce-MyAccount-navigation .lotzwoo-accountnav__ico {
  flex: none;
  color: var(--lwb-ink-400);
}

.woocommerce-MyAccount-navigation li > a:hover .lotzwoo-accountnav__ico,
.woocommerce-MyAccount-navigation li > a:focus-visible .lotzwoo-accountnav__ico {
  color: var(--lwb-brand-600);
}

.woocommerce-MyAccount-navigation li.is-active .lotzwoo-accountnav__ico {
  color: var(--lwb-brand-500);
}

/* Der Platzhalter für einen Reiter, den die Tabelle in `Account_Nav_Icons`
   nicht kennt — eine fremde Erweiterung darf jederzeit einen hinzufügen. Er
   hält die Spalte, damit dessen Beschriftung nicht als einzige an der Kante
   klebt. Dieselben 18 px, die `Shop_Icons::inline()` zeichnet. */
.woocommerce-MyAccount-navigation .lotzwoo-accountnav__ico--leer {
  width: 18px;
  height: 18px;
}

/* Die Beschriftung darf abschneiden, das Symbol nicht — ohne diese Zeile
   nähme ein langer Reitername das Symbol mit aus der Zeile. */
.woocommerce-MyAccount-navigation .lotzwoo-accountnav__label {
  min-width: 0;
}