auf Papiergrund und sollen so bleiben. */
.reiter-leiste[role='tablist'] {
display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem;
width: fit-content; max-width: 100%;
margin: 0 auto clamp(var(--r-6), 3.5vw, var(--r-8));
padding: .35rem;
background: rgba(250, 246, 237, .07);
border: 1px solid var(--rand-auf-navy);
border-radius: var(--rund-pille);
}
.reiter-leiste[role='tablist'] .reiter {
min-height: 2.75rem; padding: .55rem clamp(.9rem, 1.6vw, 1.5rem);
background: transparent; border: 0; border-radius: var(--rund-pille);
font-family: var(--schrift-display);
font-size: clamp(.9375rem, .88rem + .2vw, 1.0625rem);
font-weight: 400; letter-spacing: .005em;
color: var(--text-auf-navy-ruhig); /* 5,97:1 auf Navy */
cursor: pointer; white-space: nowrap;
transition: background-color var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}
.reiter-leiste[role='tablist'] .reiter:hover {
color: var(--text-auf-navy); background: rgba(250, 246, 237, .1);
}
.reiter-leiste[role='tablist'] .reiter[aria-selected='true'] {
background: var(--creme); color: var(--navy); /* 13,34:1 */
}
/* Auf schmalen Fenstern brechen vier Reiter in zwei Zeilen, und die
Pillenform wirkt dann unruhig. Dort läuft die Leiste deshalb in einer Zeile
und scrollt waagerecht in sich — die Seite selbst scrollt nicht mit.
Tastaturnutzer erreichen die Reiter weiter mit den Pfeiltasten; focus()
scrollt den gewählten Reiter selbst ins Bild. */
@media (max-width: 720px) {
.reiter-leiste[role='tablist'] {
width: 100%;
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
border-radius: var(--rund-m);
scrollbar-width: none;
}
.reiter-leiste[role='tablist']::-webkit-scrollbar { display: none; }
}
.reiter-tafel[hidden] { display: none !important; }
.reiter-tafel:focus-visible { outline: 3px solid var(--fokus); outline-offset: 6px; border-radius: var(--rund-s); }
/* Die Kategorieüberschrift nennt nur der Reiter — für Vorlesewerkzeuge muss
sie aber in der Gliederung stehen. Deshalb sichtbar erst ohne JavaScript. */
.tafel-kat-titel {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kein-js .tafel-kat-titel {
position: static; width: auto; height: auto; margin: 0 0 .35rem;
overflow: visible; clip: auto; white-space: normal;
font-size: var(--d-karte); color: var(--text-auf-navy);
}
.kein-js .reiter-leiste[role='tablist'] { display: none; }
.kein-js .reiter-tafel[hidden] { display: block !important; }
.kein-js .reiter-tafel { margin-bottom: clamp(var(--r-7), 4.5vw, var(--r-9)); }
.kat-zahl {
display: block; margin: 0 0 clamp(var(--r-4), 2vw, var(--r-5));
font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--hellblau); /* 5,42:1 */
}
.karten-gitter {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
gap: clamp(var(--r-4), 2vw, var(--r-5));
/* Ohne start würden kurze Karten auf die Höhe der längsten gestreckt —
genau der tote Leerraum, der an der Bestandslösung stört. */
align-items: start;
list-style: none; padding: 0; margin: 0;
}
.warenkarte {
margin: 0;
background: var(--navy-hoch);
border-radius: var(--rund-l);
overflow: hidden;
box-shadow: var(--schatten-l);
transition: transform var(--tempo) var(--kurve);
}
.warenkarte:hover { transform: translateY(-3px); }
.warenkarte-bild { position: relative; }
.warenkarte-bild img {
display: block; width: 100%;
aspect-ratio: 4 / 3; object-fit: cover;
}
.warenkarte-titel {
position: absolute; left: 0; right: 0; bottom: 0;
margin: 0; padding: 2.75rem .9rem .7rem;
display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
line-height: 1.1;
color: var(--text-auf-navy);
background: linear-gradient(to top,
rgba(7, 29, 56, .94) 0%,
rgba(7, 29, 56, .72) 55%,
rgba(7, 29, 56, 0) 100%);
text-shadow: 0 1px 10px rgba(7, 29, 56, .65);
}
.warenkarte-koerper { padding: var(--r-4) .95rem 1.15rem; }
.waren-label {
margin: 0 0 .5rem;
display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem;
font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
line-height: 1.35; text-transform: uppercase;
color: var(--hellblau);
}
.waren-label:not(:first-child) { margin-top: var(--r-4); }
.warenliste { list-style: none; margin: 0; padding: 0; }
.warenliste-lang { columns: 2 7.5rem; column-gap: var(--r-4); }
.warenliste li {
margin: 0 0 .2rem; padding: 0;
font-size: var(--t-s); line-height: 1.45;
color: var(--text-auf-navy-ruhig);
break-inside: avoid;
/* „Victoriabarschfilet" ist breiter als eine schmale Listenspalte. Ohne
Trennung lief das Wort über den Kartenrand hinaus. */
hyphens: auto;
overflow-wrap: break-word;
}
.waren-hinweis {
margin: .85rem 0 0;
font-size: var(--t-xs); line-height: 1.45;
color: var(--text-auf-navy-leise);
}
.chip {
padding: .1rem .45rem; border-radius: var(--rund-xs);
background: var(--koralle); color: var(--navy-tief);
font-size: .625rem; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase;
}
.tafeln-fuss {
margin: clamp(var(--r-6), 3.5vw, var(--r-8)) 0 0;
text-align: center; font-size: var(--t-s);
color: var(--text-auf-navy-ruhig);
}
.tafeln-fuss a { color: var(--hellblau); }
/* ── Häufige Fragen ────────────────────────────────────────────────────────
Zwei Spalten ab 900 px, darunter eine. Die Frage steht als h3 über der
Antwort statt in einem Aufklapper: eingeklappter Text wird von
Antwortmaschinen schlechter gelesen, und fünf kurze Absätze brauchen
keine Mechanik. */
.faq-liste {
display: grid;
gap: var(--r-5) var(--r-7);
margin-top: var(--r-6);
}
@media (min-width: 900px) {
.faq-liste { grid-template-columns: 1fr 1fr; }
}
.faq-paar h3 {
font-family: var(--schrift-display);
font-weight: 400;
font-size: var(--d-karte);
line-height: 1.15;
margin: 0 0 .5rem;
color: var(--navy);
}
.faq-paar p {
margin: 0;
max-width: 46ch;
}
/* ── Shop ohne JavaScript ──────────────────────────────────────────────────
Die Warenliste steht auch ohne Skript vollständig da (gut für Leser wie für
Suchmaschinen), bedienen lässt sie sich dann aber nicht. Statt sie zu
verstecken, wird sie sichtbar stillgelegt — die Höhe bleibt gleich, deshalb
springt die Seite nicht, wenn shop.js sie durch die bedienbare Fassung
ersetzt. */
.kein-js #shop-katalog select,
.kein-js #shop-katalog input,
.kein-js #shop-katalog .zaehler button {
pointer-events: none;
opacity: .5;
}
/* ── Lange deutsche Wörter auf schmalen Geräten ────────────────────────────
Bei 320 px bleiben von der Hülle 272 px Textbreite. „Auftragsverarbeitungs-
vertrag" und „moin@fischhandelroemer.de" passen dort nicht in eine Zeile und
schoben die Seite waagerecht heraus (gemessen +35 px auf der Datenschutz-
seite). Trennen statt schieben — mit lang="de" trennt der Browser sinnvoll,
break-word fängt den Rest. */
body { overflow-wrap: break-word; }
@media (max-width: 720px) {
/* Silbentrennung nur, wo die Zeilen wirklich kurz sind. Global gesetzt
trennte sie auch die zweispaltigen Fragen bei 1280 px an acht Stellen
(„Meerespro-dukte", „Vorbe-stellung") und riss dabei Verweise ausein-
ander — schlechter zu lesen als der Umbruch ohne Trennung. */
body { hyphens: auto; }
}
/* ── Häufige Fragen ────────────────────────────────────────────────────────
Zwei Spalten ab 900 px, darunter eine. Die Frage steht als h3 über der
Antwort statt in einem Aufklapper: eingeklappter Text wird von
Antwortmaschinen schlechter gelesen, und fünf kurze Absätze brauchen
keine Mechanik. */
.faq-liste {
display: grid;
gap: var(--r-5) var(--r-7);
margin-top: var(--r-6);
}
@media (min-width: 900px) {
.faq-liste { grid-template-columns: 1fr 1fr; }
}
.faq-paar h3 {
font-family: var(--schrift-display);
font-weight: 400;
font-size: var(--d-karte);
line-height: 1.15;
margin: 0 0 .5rem;
color: var(--navy);
}
.faq-paar p {
margin: 0;
max-width: 46ch;
}
/* ── Shop ohne JavaScript ──────────────────────────────────────────────────
Die Warenliste steht auch ohne Skript vollständig da (gut für Leser wie für
Suchmaschinen), bedienen lässt sie sich dann aber nicht. Statt sie zu
verstecken, wird sie sichtbar stillgelegt — die Höhe bleibt gleich, deshalb
springt die Seite nicht, wenn shop.js sie durch die bedienbare Fassung
ersetzt. */
.kein-js #shop-katalog select,
.kein-js #shop-katalog input,
.kein-js #shop-katalog .zaehler button {
pointer-events: none;
opacity: .5;
}
/* ── Lange deutsche Wörter auf schmalen Geräten ────────────────────────────
Bei 320 px bleiben von der Hülle 272 px Textbreite. „Auftragsverarbeitungs-
vertrag" und „moin@fischhandelroemer.de" passen dort nicht in eine Zeile und
schoben die Seite waagerecht heraus (gemessen +35 px auf der Datenschutz-
seite). Trennen statt schieben — mit lang="de" trennt der Browser sinnvoll,
break-word fängt den Rest. */
body { overflow-wrap: break-word; }
@media (max-width: 720px) {
/* Silbentrennung nur, wo die Zeilen wirklich kurz sind. Global gesetzt
trennte sie auch die zweispaltigen Fragen bei 1280 px an acht Stellen
(„Meerespro-dukte", „Vorbe-stellung") und riss dabei Verweise ausein-
ander — schlechter zu lesen als der Umbruch ohne Trennung. */
body { hyphens: auto; }
}
/* ── Brotkrumenpfad ────────────────────────────────────────────────────────
Nur auf Unterseiten, und bewusst leise: er ist Orientierung, nicht Inhalt.
Der obere Abstand muss den gerissenen Streifen der Kopfzeile überspringen,
der zur Hälfte in den Inhalt hineinhängt (--kopf-riss-h / 2). */
.pfad {
padding: calc(var(--kopf-riss-h) / 2 + var(--r-4)) 0 var(--r-4);
font-size: var(--t-s);
color: var(--text-ruhig);
}
.pfad .huelle { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
/* Kein eigener Unterstrichton: die Grundregel für a nutzt --rand-stark
(3,03:1) und erfüllt damit WCAG 1.4.11. Der schwächere --rand wäre
kaum zu sehen — der Verweis wäre dann nur noch an der Farbe zu
erkennen, und die ist hier dieselbe wie beim Fließtext. */
.pfad a:hover { color: var(--navy); text-decoration-color: currentColor; }
.pfad-teiler { color: var(--koralle); }
.pfad [aria-current='page'] { color: var(--navy); font-weight: 600; }
/* ── Wochenplan: der Schiebekasten ─────────────────────────────────────────
Gemessen: die Tabelle braucht mindestens 480 px. Bei 528 px Fensterbreite
bleiben nach den Rändern der Hülle genau 480 px übrig — darunter schiebt
der Kasten, darüber nicht. Deshalb steht der Hinweis nur bis 527 px.
Der Kasten selbst trägt tabindex="0" (siehe Erzeuger), damit die rechte
Spalte auch ohne Maus erreichbar ist; dafür braucht er einen sichtbaren
Fokusring. */
.plan-schiebe { display: none; }
@media (max-width: 527px) {
.plan-schiebe {
display: block;
margin: 0 0 var(--r-3);
font-size: var(--t-s);
color: var(--text-ruhig);
}
}
.plan:focus-visible {
outline: 2px solid var(--koralle);
outline-offset: 3px;
}
/* ── Ruhiger Text in Karten auf Navy ───────────────────────────────────────
.auf-navy .karte setzt die Textfarbe auf der Karte, ein inline gesetztes
color am hat das aber überschrieben: --text-ruhig ist ein dunkles Navy
für helle Flächen und ergab auf --navy-hoch gemessene 1,25:1. Die zwei
Inline-Angaben sind entfernt; die Regel gehört hierher, wo sie den
passenden Ton für dunkle Flächen wählt. */
.auf-navy .karte p,
.auf-navy .karte-glas p { color: var(--text-auf-navy-ruhig); }
/* ── Vorbesteller-Shop: die drei Plattenreihen ─────────────────────────────
Der Auftraggeber wollte die Bildsprache der Startseite, aber liegend: Bild
links, in den Container hineinragend, rechts Name, Bestandteile und die
Personenzahl. Der Verlauf ist derselbe wie bei den Karten der Startseite —
dunkel oben, hell unten — damit beide Flächen als dieselbe Familie lesen. */
.platten-reihen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r-6); }
.platte-reihe {
position: relative;
display: grid;
grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
align-items: center;
gap: var(--r-6);
padding: var(--r-6) var(--r-6) var(--r-6) 0;
border-radius: var(--rund-xl);
background: linear-gradient(180deg, #0d2c4e 0%, #123f66 45%, #14456f 68%, #1c5b8b 100%);
color: var(--text-auf-navy);
box-shadow: var(--schatten-karte);
transition: box-shadow .18s ease;
}
.platte-reihe.gewaehlt { box-shadow: 0 0 0 2px var(--koralle), var(--schatten-karte); }
/* Das Bild ragt links aus dem Container heraus — wie die Platte auf der
Startseite über die Kartenkanten. Der Container schneidet nicht ab, dafür
fängt .abschnitt-platten-shop den seitlichen Überstand. */
.platte-reihe-bild { margin-left: -3.5rem; margin-right: -1.5rem; }
.platte-reihe-bild img {
width: 100%; height: auto; display: block;
filter: drop-shadow(0 14px 20px rgba(7, 29, 56, .5));
}
.platte-reihe-text { min-width: 0; }
.platte-reihe .platte-titel { margin: 0 0 .15rem; font-size: var(--d-karte); }
.platte-reihe-kurz {
margin: 0 0 var(--r-4);
font-size: var(--t-s);
color: var(--text-auf-navy-ruhig);
}
.platte-reihe .platte-liste { columns: 2 8rem; }
/* Personenzahl: derselbe Zähler wie früher bei den Waren, nur mit Beschriftung. */
.platte-personen {
display: flex; align-items: center; flex-wrap: wrap;
gap: var(--r-3) var(--r-4);
margin-top: var(--r-5);
}
.platte-personen label { font-weight: 600; font-size: var(--t-s); }
.platte-personen .feld-notiz { color: var(--text-auf-navy-ruhig); margin: 0; }
/* Unter 760 px steht das Bild über dem Text; ein 8-rem-Streifen daneben wäre
dort nur noch ein Fleck. */
@media (max-width: 760px) {
.platte-reihe {
grid-template-columns: minmax(0, 1fr);
padding: var(--r-6) var(--r-5);
justify-items: center;
text-align: center;
}
.platte-reihe-bild { margin: 0 auto; width: min(16rem, 70%); }
.platte-reihe .platte-liste { text-align: left; }
.platte-personen { justify-content: center; }
/* Die Reihe ist auf schmalen Geräten mittig gesetzt — im Aufklapper wäre
das falsch: eine Liste aus Name und Zähler liest man linksbündig. */
.platte-reihe .zusatz { text-align: left; }
}
/* Der Hinweis auf noch nicht bestätigte Angaben steht EINMAL über den
Reihen; je Platte genügt der Chip in der Überschrift. Dreimal derselbe
Kasten liest sich wie eine Fehlermeldung. */
.offen-hinweis {
margin: 0 0 var(--r-6);
padding: var(--r-4) var(--r-5);
border-left: 3px solid var(--koralle);
border-radius: 0 var(--rund-s) var(--rund-s) 0;
background: rgba(252, 90, 90, .10);
font-size: var(--t-s);
color: var(--text-ruhig);
}
.platte-reihe .platte-titel .chip {
margin-left: .6rem;
vertical-align: .28em;
white-space: nowrap;
}
/* Die Kurzbeschreibung unter dem Plattennamen auf der Startseite — sie
benennt, was „Platte A" konkret ist. */
.platte-kurz {
margin: -.9rem 0 var(--r-5);
font-size: var(--t-s);
color: var(--text-auf-navy-ruhig);
}
/* ── Kalender für den Abholtermin ──────────────────────────────────────────
Der Auftraggeber wollte ein Monatsraster statt einer Liste, mit
ausgegrauten Tagen ohne Markt. Ein kann das nicht —
sein Kalender lässt sich nicht nach Wochentagen einschränken. Deshalb hier
ein eigenes Raster; die Auswahlliste bleibt verborgen im Formular stehen
und trägt weiterhin den Wert (siehe abholung.js). */
.kalender {
margin-top: var(--r-3);
/* Gedeckelt, weil das Formular auf mittleren Breiten einspaltig wird: ohne
Deckel bläht das quadratische Tagfeld den Kalender auf 670 px auf und die
Tage werden 89 px groß. */
max-width: 22rem;
border: 1px solid var(--rand-fein);
border-radius: var(--rund-l);
background: var(--creme);
padding: var(--r-4);
}
@media (max-width: 400px) {
/* Bei 320 px bleiben sonst nur 25 px je Tagfeld. */
.kalender { padding: var(--r-3); }
}
.kalender-kopf {
display: flex; align-items: center; justify-content: space-between;
gap: var(--r-3); margin-bottom: var(--r-3);
}
.kalender-monat { font-weight: 600; font-size: var(--t-m); color: var(--navy); }
.kalender-blatt {
width: 2.25rem; height: 2.25rem;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--rand-stark); border-radius: 50%;
background: transparent; color: var(--navy);
font-size: 1.125rem; line-height: 1; cursor: pointer;
}
.kalender-blatt:hover:not(:disabled) { background: var(--navy); color: var(--creme); }
.kalender-blatt:disabled { opacity: .35; cursor: default; }
.kalender-gitter { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kalender-gitter th {
padding: 0 0 .35rem;
font-size: var(--t-xs); font-weight: 600; text-align: center;
color: var(--text-ruhig);
}
.kalender-gitter th abbr { text-decoration: none; }
.kalender-gitter td { padding: 1px; text-align: center; }
.kalender-tag {
width: 100%; aspect-ratio: 1 / 1;
min-height: 2.25rem; max-height: 2.75rem;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid transparent; border-radius: var(--rund-s);
background: transparent; color: var(--navy);
font: inherit; font-size: var(--t-s); font-variant-numeric: tabular-nums;
cursor: pointer;
}
.kalender-tag:hover:not(:disabled) { background: var(--navy); color: var(--creme); }
/* Markttage tragen einen leisen Rahmen, damit sie sich auch ohne Farbe von
den gesperrten Tagen unterscheiden — Farbe allein wäre WCAG 1.4.1. */
.kalender-tag:not(:disabled) { border-color: var(--rand-stark); font-weight: 600; }
.kalender-tag:disabled {
/* Gesperrte Bedienelemente sind von WCAG 1.4.3 ausgenommen, lesbar bleiben
sollten die Zahlen trotzdem — man orientiert sich an ihnen im Monat.
Bei .32 waren es gemessene 1,93:1, bei .48 sind es 2,86:1, und der
Unterschied zu den wählbaren Tagen (13,34:1) bleibt eindeutig.
Unterschieden wird ohnehin nicht nur über Farbe: wählbare Tage tragen
Rahmen und Fettung (WCAG 1.4.1). */
color: rgba(10, 42, 80, .48);
cursor: default;
}
.kalender-tag.gewaehlt,
.kalender-tag.gewaehlt:hover { background: var(--koralle); border-color: var(--koralle); color: var(--navy-tief); }
.kalender-hinweis, .kalender-leer {
margin: var(--r-3) 0 0;
font-size: var(--t-xs); color: var(--text-ruhig);
}
.kalender-leer { margin: 0; }
/* ── Salate als Zusatz zur Platte ──────────────────────────────────────────
31 Sorten je Platte wären ausgeklappt eine Wand. hält die Seite
ruhig, klappt ohne JavaScript und meldet seinen Zustand an Screenreader.
Der Aufklapper sitzt auf der navyfarbenen Reihe, also helle Schrift. */
.zusatz {
margin-top: var(--r-5);
border: 1px solid var(--rand-auf-navy);
border-radius: var(--rund-l);
background: rgba(250, 246, 237, .06);
}
.zusatz > summary {
display: flex; align-items: center; flex-wrap: wrap;
gap: .5rem var(--r-3);
padding: var(--r-4) var(--r-5);
cursor: pointer;
list-style: none; /* eigener Pfeil, siehe ::after */
border-radius: var(--rund-l);
}
.zusatz > summary::-webkit-details-marker { display: none; }
.zusatz > summary::after {
content: '';
margin-left: auto;
width: .6rem; height: .6rem;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
rotate: 45deg;
transition: rotate .18s ease;
}
.zusatz[open] > summary::after { rotate: -135deg; }
.zusatz > summary:hover { background: rgba(250, 246, 237, .07); }
.zusatz-titel { font-weight: 600; font-size: var(--t-m); }
.zusatz-frei {
font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase;
color: var(--text-auf-navy-ruhig);
}
/* Der Stand bleibt auch zugeklappt sichtbar — sonst weiß niemand, dass da
noch etwas drinsteckt. */
.zusatz-stand {
padding: .1rem .5rem; border-radius: var(--rund-xs);
background: var(--koralle); color: var(--navy-tief);
font-size: var(--t-xs); font-weight: 700;
}
.zusatz-koerper { padding: 0 var(--r-5) var(--r-5); }
.zusatz-notiz, .zusatz-sperre {
margin: 0 0 var(--r-4);
font-size: var(--t-s);
color: var(--text-auf-navy-ruhig);
}
.zusatz-sperre {
padding: .5rem .75rem;
border-left: 3px solid var(--koralle);
border-radius: 0 var(--rund-s) var(--rund-s) 0;
background: rgba(250, 246, 237, .08);
color: var(--text-auf-navy);
}
.zusatz-gruppe {
margin: var(--r-5) 0 var(--r-3);
font-family: inherit; font-weight: 700;
font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;
color: var(--text-auf-navy-ruhig);
}
.zusatz-gruppe:first-of-type { margin-top: 0; }
/* Eine Spalte, auch auf großen Schirmen: der Aufklapper sitzt in der
Plattenreihe und ist dort nur rund 460 px breit. Zweispaltig blieben je
Name gut 110 px — „Meerrettichlachssalat" brach dann mitten im Wort. */
.zusatz-liste { display: grid; gap: .15rem; }
.zusatz-zeile {
display: flex; align-items: center; justify-content: space-between;
gap: var(--r-3);
padding: .3rem .5rem;
border-radius: var(--rund-s);
}
.zusatz-zeile.gewaehlt {
background: rgba(250, 246, 237, .10);
box-shadow: inset 3px 0 0 var(--koralle);
}
.zusatz-name {
font-size: var(--t-s); min-width: 0;
/* Der Textkörper trägt overflow-wrap: break-word — hier ist ein Trennstrich
das bessere Mittel, sonst hängt ein „t" allein in der zweiten Zeile. */
overflow-wrap: normal; hyphens: auto;
}
/* Der kleine Zähler: dieselbe Form wie bei den Personen, nur kompakter. */
.zaehler-klein { flex: 0 0 auto; border-width: 1px; }
.zaehler-klein button { width: 2rem; height: 2rem; font-size: .95rem; }
.zaehler-klein input { width: 3.1rem; font-size: var(--t-xs); }
.zusatz-gesperrt .zusatz-zeile { opacity: .55; }
/* Die Zusätze in der Vorbestellung: eingerückt unter ihrer Platte. */
.korb-zusatz {
flex: 1 0 100%; /* eigene Zeile unter dem Posten */
list-style: none; margin: .35rem 0 .1rem; padding: 0 0 0 var(--r-4);
border-left: 2px solid var(--rand);
display: grid; gap: .2rem;
font-size: var(--t-xs);
}
.korb-zusatz .korb-menge { font-weight: 600; }
.korb-zusatz .korb-weg { width: 1.4rem; height: 1.4rem; font-size: .75rem; }