/* Werkstatt – Gestaltung der Ansichten Werkbank, Rohstoffe, Spuren, Belege (Ergänzung zu app.css)

   Farben, Schriften, Rahmen, Radien und die Maße der Dichte (--zeile, --text-tabelle, --abstand …) kommen aus den Eigenschaften in
   app.css (:root) – hier steht keine Farbe und kein festes Zeilenmaß. Der Look ist der der alveare food GmbH (seit Auftrag B): Creme,
   Dunkelbraun als Tinte, der Akzent des gewählten Bereichs als einziger Akzent (--orange; die Schrift darauf ist --tinte oder
   --auf-orange), Poppins in Halbfett für Überschriften, Kleinbeschriftungen in Mono-Großbuchstaben.
   Listen sind Tabellen mit feinen Linien (Auftrag U): Zahlen rechtsbündig mit tabellarischen Ziffern, die Kopfzeile bleibt am Laptop
   stehen. Harte Schatten gibt es nur für das gerade Gewählte (gewählter Knopf, gewählte Zelle).

   Mit der Maus (pointer: fine) ist die Zeile 32 px hoch und Text in Tabellen bleibt in einer Zeile mit „…“ am Ende (der ganze Text
   steht im Titel und in den Einzelheiten); am Handy (Voreinstellung) ist sie 44 px hoch und der Text bricht um.
   Ruhig: nichts blinkt, nichts springt, keine Übergänge, keine Animation. Am Handy einspaltig (unter 40rem), Tippflächen mindestens
   44 px, keine waagrechte Seiten-Scrollleiste: Nur der Rahmen einer Tabelle scrollt, und zwar in sich.

   Bedeutung der Farben wie in app.css: orange = Auswahl (gedrückter Knopf, gewählte Zelle, Marken H, W, G) und Balken, Ampel getrennt
   davon und nie ohne Wort und Form. Grau (Vergleich und raus) ist die graue Schrift der Palette, keine neue Farbe und keine Durchsichtigkeit (die ergäbe weniger als 4,5:1).
   Keine Inline-Stile im JS (die CSP lässt style-src nur 'self' zu): Alles, was gestaltet wird, steht hier. */

/* ── Gemeinsam ───────────────────────────────────────────────────────────── */
main > section { margin: 0 0 var(--abstand-l); }
.abschnitt-abstand { margin-top: var(--abstand-l); }
h3 { margin: 0; font-family: var(--schrift); font-size: var(--h3); font-weight: 600; letter-spacing: -.005em; line-height: 1.2; }
h4 { margin: 0; color: var(--grau); font: 600 .68rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
dl, dd { margin: 0; }
ul { margin: 0; }
.nur-leser {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Seitenkopf: der Titel und rechts davon die Werkzeuge (Filter, Suche) in einer Zeile, die am Handy umbricht */
.seitenkopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-s) var(--abstand-l); margin: var(--abstand) 0; }
.seitenkopf h1 { margin: 0; }
.werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-s) var(--abstand); min-width: 0; }

/* Link „In Notion öffnen“ und die Kurzform in engen Tabellen */
.notion-link { display: inline-flex; align-items: center; min-height: var(--tipp); font-size: var(--text-klein); font-weight: 600; }
.notion-kurz { display: inline-flex; align-items: center; min-height: var(--tipp); font-size: var(--text-klein); font-weight: 600; }
.lieferant-link { font-weight: 500; }

/* Kleine Marke (Status 2027, Typ eines Belegs, vorläufig): Pille mit feiner Linie in Mono-Großbuchstaben. Vorläufiges ist nie bunt,
   sondern gestrichelt: der Rand sagt „noch nicht verbindlich“, das Wort steht immer dabei. */
.pille {
  display: inline-block; padding: 0 .5rem; border: 1px solid var(--tinte); border-radius: var(--r-pill); background: var(--papier);
  font: 600 .64rem/1.55 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.pille.vorlaeufig { border-style: dashed; }
.pille.status-gesetzt { background: var(--tinte); color: var(--papier); }
.pille.status-kandidat { border-style: dashed; }
.pille.status-favorit { background: var(--zeitung-d); }
.pille.status-vergleich, .pille.status-raus { border-color: var(--grau); color: var(--grau); }

/* Marke H, W oder G: In diesem Szenario ist das Angebot gewählt – orange, das ist die Auswahl */
.wahl-marke {
  display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-right: .15rem; border: 1px solid var(--tinte); border-radius: .25rem;
  background: var(--orange); color: var(--tinte); font: 700 .64rem/1 var(--mono);
}

/* Umschalter: Szenario, Art, Status und Filter. Genau ein Knopf ist gedrückt (oder bei .mehrfach jeder für sich): Orange mit Tintenrand
   und fett, auf größeren Bildschirmen zusätzlich mit Haken. Der gedrückte Knopf trägt den harten Schatten – er ist das Gewählte. */
.umschalter {
  display: flex; flex-wrap: wrap; gap: 2px; width: 100%; max-width: 40rem; margin: 0 0 var(--abstand); padding: 2px;
  border: 1px solid var(--tinte); border-radius: calc(var(--tipp) / 2 + 4px); background: var(--papier);
}
.umschalter-knopf {
  flex: 1 1 auto; min-height: var(--tipp); padding: .15rem .8rem; border: 1px solid transparent; border-radius: calc(var(--tipp) / 2);
  background: transparent; color: var(--tinte); font-weight: 500; line-height: 1.2; text-align: center; cursor: pointer;
}
.umschalter-knopf:hover { background: var(--zeitung); }
.umschalter-knopf[aria-pressed="true"] { background: var(--orange); border-color: var(--tinte); box-shadow: var(--schatten-xs); font-weight: 600; }
.werkzeuge .umschalter, .seitenkopf .umschalter { width: auto; margin: 0; }
/* Filter, die jeder für sich an oder aus sind (Status 2027): „an“ ist nur ein Haken auf Papier, „aus“ gestrichelt und grau – Orange
   bleibt der Wahl zwischen Möglichkeiten und dem gewählten Angebot vorbehalten */
.umschalter.mehrfach { max-width: none; gap: .25rem; padding: 0; border: 0; background: transparent; }
.umschalter.mehrfach .umschalter-knopf { flex: 0 1 auto; padding-left: .6rem; padding-right: .6rem; }
.umschalter.mehrfach .umschalter-knopf[aria-pressed="true"] { background: var(--papier); box-shadow: none; }
.umschalter.mehrfach .umschalter-knopf[aria-pressed="false"] { border: 1px dashed var(--grau); color: var(--grau); font-weight: 400; }
/* lange Beschriftungen (die Gruppen der Belege): am Handy zwei Knöpfe je Zeile statt drei */
.umschalter.breit .umschalter-knopf { flex-basis: 40%; }

/* Suche: ein Feld mit Pillenrand */
.suche { display: inline-flex; align-items: center; }
.suche-feld {
  width: 12rem; max-width: 100%; min-height: var(--tipp); padding: .15rem .8rem; border: 1px solid var(--tinte); border-radius: var(--r-pill);
  background: var(--papier); color: var(--tinte); font: inherit;
}
.suche-feld::placeholder { color: var(--grau); opacity: 1; }

/* Balken: Orange auf Zeitung-d, beides mit Tintenrand; die Fülllänge endet in einer Tintenkante. Die Zahl steht immer auch als
   Text daneben. */
.balken {
  display: block; width: 100%; height: .6rem; margin: .25rem 0; border: 1px solid var(--tinte); border-radius: 999px; overflow: hidden;
  -webkit-appearance: none; appearance: none; background: var(--zeitung-d); color: var(--orange);
}
.balken::-webkit-progress-bar { background: var(--zeitung-d); border-radius: 999px; }
.balken::-webkit-progress-value { background: var(--orange); border-radius: 999px; box-shadow: inset -2px 0 0 var(--tinte); }
.balken::-moz-progress-bar { background: var(--orange); border-radius: 999px; box-shadow: inset -2px 0 0 var(--tinte); }

/* Aufklappen: Knopf (aria-expanded) und Feld. Plus/Minus im Kreis wie bei den Fragen auf kuegerl.de: zu = Zeitung, offen = Orange */
.klappe-feld { margin-top: var(--abstand); }
.klappe-titel { margin: 0 0 .25rem; }
.klappe-reihe { margin: var(--abstand) 0; }
.klappe::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-left: auto;
  border: 1px solid var(--tinte); border-radius: 50%; background: var(--zeitung); font-weight: 600; line-height: 1;
}
.klappe[aria-expanded="true"]::after { content: "\2212"; background: var(--orange); }

/* Schalter mit Haken – das ganze Etikett ist Tippfläche. Der Haken ist ein Kästchen mit Tintenrand; angehakt Orange mit Tinten-Haken. */
.schalter { display: flex; align-items: center; gap: .6rem; min-height: var(--tipp); margin: 0 0 var(--abstand); cursor: pointer; }
.schalter input {
  -webkit-appearance: none; appearance: none; flex: none; display: grid; place-content: center;
  width: 1.4rem; height: 1.4rem; margin: 0; border: var(--rahmen); border-radius: .35rem; background: var(--papier); cursor: pointer;
}
.schalter input:checked { background: var(--orange); }
.schalter input:checked::after { content: "\2713"; color: var(--tinte); font: 700 1rem/1 var(--schrift); }

/* Die Legende der Szenarien: ein Satz je Szenario, in einer Zeile, die am Handy umbricht */
.legende-szenarien { display: flex; flex-wrap: wrap; gap: .1rem var(--abstand-l); margin: 0 0 var(--abstand); color: var(--grau); font-size: var(--text-klein); }
.legende-szenario { display: flex; flex-wrap: wrap; gap: 0 .35rem; align-items: baseline; }
.legende-szenario dt { color: var(--tinte); font-weight: 600; }
.legende-szenario dd::before { content: "– "; }

/* ── Tabellen ────────────────────────────────────────────────────────────── */
/* Der Rahmen einer Tabelle: feine Linie, Papier. Am Handy scrollt nur er waagrecht (und nie die Seite); position: relative ist Pflicht:
   Die Texte für Vorleser (.nur-leser, position: absolute) in den Zellen gehören sonst nicht zum Rahmen, ragen über seinen Rand und
   machen die ganze Seite waagrecht scrollbar (am Handy gemessen: 659 statt 375 px). */
.tabelle-rahmen { position: relative; max-width: 100%; margin: 0 0 var(--abstand); overflow-x: auto; border: 1px solid var(--tinte); border-radius: var(--r-s); background: var(--papier); }
.tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-tabelle); line-height: 1.3; }
.tabelle th, .tabelle td { padding: var(--zelle-y) var(--zelle-x); border-bottom: 1px solid var(--zeitung-d); text-align: left; vertical-align: middle; font-weight: 400; }
.tabelle tbody tr { height: var(--zeile); }
.tabelle thead th {
  height: auto; padding-top: .3rem; padding-bottom: .3rem; background: var(--zeitung); border-bottom: 1px solid var(--tinte);
  color: var(--grau); font: 600 .64rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.tabelle tbody tr:hover > td { background: var(--zeitung); }
.tabelle .zahl-kopf { text-align: right; }
.tabelle td.zahl { text-align: right; }
.tabelle tbody:last-child tr:last-child > td, .tabelle tbody:last-child tr:last-child > th { border-bottom: 0; }
/* Ein Text in einer Zelle: am Laptop eine Zeile mit „…“ am Ende (der Titel trägt den ganzen Text), am Handy bricht er um */
.kappe { display: block; max-width: 100%; overflow-wrap: anywhere; }
.tabellen-zahl { margin: calc(var(--abstand) * -.5) 0 var(--abstand); }
/* Die Kopfzeile bleibt stehen, solange der Rahmen nicht scrollt (ab 80rem passt jede Tabelle in die Breite) */
.tabelle-bereich { min-width: 0; }

/* Zeilenknopf: der Name eines Angebots oder einer Zeile, die sich aufklappt – sieht aus wie Text, ist ein Knopf */
.zeile-knopf {
  display: flex; align-items: center; gap: .25rem; width: 100%; min-height: var(--tipp); margin: 0; padding: 0; border: 0; background: transparent;
  color: var(--tinte); font: inherit; font-weight: 500; text-align: left; cursor: pointer;
}
/* Die Zelle mit dem Zeilenknopf hat oben und unten kein Polster: Der Knopf füllt sie aus und ist so hoch wie die Tippfläche (Touch 44 px,
   mit der Maus 30 px in der 32-px-Zeile) – ein Tipp ins Polster ginge ins Leere */
.tabelle td.angebot-name, .tabelle th.phase-kopf { padding-top: 0; padding-bottom: 0; }
.zeile-knopf:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.zeile-knopf[aria-expanded="true"] { font-weight: 600; }
.zeile-knopf[aria-expanded="true"]::after { content: " \25B4"; }
.zeile-knopf[aria-expanded="false"]::after { content: " \25BE"; color: var(--grau); }

/* Einzelheiten: eine Zeile unter der Zeile, auf Klick (Rohstoffe, Belege, Fahrplan, Rezepturen) – eine Zelle über die ganze Breite, hier bricht der Text um */
.tabelle tr.detail, .tabelle tr.beleg-detail, .tabelle tr.phase-detail { height: auto; }
.tabelle td.einzelheiten { height: auto; padding: var(--abstand-s) var(--abstand); background: var(--zeitung); white-space: normal; }
.einzel-liste { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .15rem var(--abstand); margin: 0 0 var(--abstand-s); font-size: var(--text-tabelle); }
.einzel-liste dt { color: var(--grau); font-weight: 500; }
.einzel-liste dd { min-width: 0; overflow-wrap: anywhere; }
.einzel-belege { display: flex; flex-wrap: wrap; gap: .1rem var(--abstand); }
.einzel-beleg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 .4rem; }
/* Die Notiz ist ein Zettel: Papier mit gestricheltem Tintenrand */
.notiz-text { display: block; padding: var(--abstand-s) var(--abstand); border: 1px dashed var(--tinte); border-radius: var(--r-s); background: var(--papier); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Rohstoffe ───────────────────────────────────────────────────────────── */
.rohstoff-tabelle { min-width: 62rem; }
.rohstoff-tabelle.verpackung { min-width: 40rem; }
.rohstoff-tabelle tbody.gruppe > tr:first-child > * { border-top: 1px solid var(--tinte); }
.rohstoff-tabelle tbody.gruppe:first-of-type > tr:first-child > * { border-top: 0; }
.gruppe-kopf {
  position: sticky; left: 0; z-index: 1; width: 9.5rem; min-width: 8.5rem; padding-top: .1rem; padding-bottom: .1rem; background: var(--zeitung); border-right: 1px solid var(--zeitung-d);
  line-height: 1.15; vertical-align: top; font-weight: 600;
}
.tabelle tbody tr:hover > .gruppe-kopf { background: var(--zeitung); }
.gruppe-knopf {
  display: flex; align-items: baseline; gap: .35rem; width: 100%; min-height: var(--tipp); margin: 0; padding: .1rem 0; border: 0; background: transparent;
  color: var(--tinte); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.gruppe-knopf::before { content: "\25BE"; flex: none; color: var(--grau); }
.gruppe-knopf[aria-expanded="false"]::before { content: "\25B8"; }
.gruppe-name { min-width: 0; overflow-wrap: break-word; }
.gruppe-anzahl { flex: none; color: var(--grau); font-size: var(--text-klein); font-weight: 400; }
.gruppe-hinweis { display: block; font-size: var(--text-klein); font-weight: 400; }
.angebot-grau > td, .angebot-grau .zeile-knopf { color: var(--grau); }
.angebot-name { min-width: 8rem; }
.wahl-zelle { white-space: nowrap; }
/* eingeklappt: eine Zeile mit der Auswahl je Szenario */
.zusammen { height: auto; }
.zusammen-zeile { display: flex; flex-wrap: wrap; gap: 0 var(--abstand-l); }
.auswahl-paar { display: inline-flex; gap: .35rem; min-width: 0; }
.auswahl-szenario { color: var(--grau); font-weight: 500; }
.auswahl-name { min-width: 0; overflow-wrap: anywhere; }
/* die Kosten je Stück stehen hinter einer feinen Linie von der Auswahl getrennt */
.auswahl-kosten { padding-left: var(--abstand-l); border-left: 1px solid var(--zeitung-d); }
/* eine eingeklappte Gruppe ist eine einzige Zeile: ihr Name steht mittig */
.gruppe-zu .gruppe-kopf { vertical-align: middle; }

/* ── Sorten: Name, Kürzel und Foto ───────────────────────────────────────── */
.abschnitt-titel { margin: 0 0 var(--abstand-s); }
.sorte-titel { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; margin: 0; overflow-wrap: anywhere; }
/* Kürzel der Sorte (MV, EM, ML): dunkles Etikett wie „Hülle“ auf den Sortenkarten von kuegerl.de */
.sorte-kurz { flex: none; padding: .1rem .45rem; border-radius: .3rem; background: var(--tinte); color: var(--papier); font: 600 .64rem/1.4 var(--mono); letter-spacing: .14em; }
/* Das kleine Foto einer Sorte (Anschnitt wie auf der Website, 64 px breit gespeichert) in Matrix, Spalten und Kennzahlen */
.sorten-bild { display: block; flex: none; width: 2.1rem; height: auto; }
.sorten-bild-klein { width: 1.6rem; }

/* ── Werkbank ────────────────────────────────────────────────────────────── */
/* Die Kennzahlenleiste: eine schmale Zeile, am Handy zwei mal zwei. Jede Kennzahl hat Namen, Wert und, wo es passt, einen Balken. */
.kennzahlen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 var(--abstand-l); border: 1px solid var(--tinte); border-radius: var(--r-s);
  background: var(--papier);
}
.kennzahl { display: flex; flex-direction: column; justify-content: center; gap: .1rem; min-width: 0; padding: var(--abstand-s) var(--abstand); border-right: 1px solid var(--zeitung-d); border-bottom: 1px solid var(--zeitung-d); }
.kennzahlen .kennzahl:nth-child(2n) { border-right: 0; }
.kennzahl-name { color: var(--grau); font: 600 .62rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.kennzahl-wert { font-size: 1.05rem; font-weight: 600; line-height: 1.25; }
.kennzahl-zusatz { color: var(--grau); font-size: var(--text-klein); }
.kennzahl-link { display: inline-flex; align-items: center; min-width: var(--tipp); min-height: var(--tipp); color: inherit; }
.kennzahl .balken { margin: .1rem 0; }
.soll-liste { display: flex; flex-wrap: wrap; gap: .2rem var(--abstand-l); margin: 0; padding: 0; list-style: none; }
.soll-eintrag { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.soll-kurz { color: var(--grau); font: 600 .68rem/1 var(--mono); letter-spacing: .1em; }
.soll-wert { font-size: var(--text-tabelle); font-weight: 600; }
.soll-wert.leise { font-weight: 400; }

.aufgaben-gruppen { display: grid; gap: var(--abstand); }
.aufgaben-gruppe, .aufgaben-feld { min-width: 0; }
.aufgaben-titel { margin: 0 0 var(--abstand-s); font-size: inherit; letter-spacing: normal; text-transform: none; }
/* Der Titel einer Gruppe ist ihr Knopf: Mono-Großbuchstaben wie die anderen Kleinbeschriftungen */
.aufgaben-titel .gruppe-knopf { width: auto; color: var(--grau); font: 600 .68rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.aufgaben-titel .gruppe-name { font-family: inherit; }
.aufgaben-tabelle { table-layout: auto; }
.aufgaben-tabelle td { white-space: normal; overflow-wrap: anywhere; }
.aufgabe-link { width: 6rem; text-align: right; }
.aufgaben-tabelle td.aufgabe-link { text-align: right; }
.aufgabe-text { min-width: 0; }
/* eine Aufgabe, die umbricht, steht oben: Text und Link beginnen in derselben Zeile */
.tabelle .aufgabe > td { vertical-align: top; }

/* ── Spuren ──────────────────────────────────────────────────────────────── */
.legende { display: flex; flex-wrap: wrap; gap: .1rem var(--abstand-l); margin: 0; padding: 0; list-style: none; font-size: var(--text-klein); }
.legende li { display: flex; align-items: center; gap: .4rem; }
.legende-zeichen { display: inline-block; min-width: 1.5rem; padding: 0 .3rem; border-radius: 5px; text-align: center; }

/* Die erste Spalte (Rohstoff und Angebot) bleibt beim waagrechten Scrollen stehen */
.matrix { table-layout: auto; }
.matrix th, .matrix td { text-align: center; }
.matrix thead th { background: var(--zeitung); }
.matrix .matrix-ecke, .matrix .matrix-zeile {
  position: sticky; left: 0; min-width: 10rem; max-width: 14rem; border-right: 1px solid var(--zeitung-d); background: var(--papier); text-align: left; line-height: 1.15;
}
.matrix .matrix-ecke { z-index: 3; vertical-align: bottom; background: var(--zeitung); }
.matrix .matrix-zeile { z-index: 1; padding-top: .1rem; padding-bottom: .1rem; font-weight: 400; }
.matrix-name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.matrix-angebot { display: block; color: var(--grau); font-size: var(--text-klein); overflow-wrap: anywhere; }
/* der Link zum Lieferanten ist eine Tippfläche von --tipp Höhe, ohne die Zeile höher zu machen: eine Zeile (1lh) plus Polster bis --tipp,
   das ein gleich großer negativer Rand ausgleicht (die Zeilen mit px davor gelten für Browser ohne die Einheit lh) */
.matrix-angebot a {
  display: block; padding: 12px 0; padding: calc((var(--tipp) - 1lh) / 2) 0; margin: -12px 0; margin: calc((var(--tipp) - 1lh) / -2) 0; color: var(--grau);
}
.matrix-kopf { height: 7rem; vertical-align: bottom; }
.matrix-kopf span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.matrix-leer > td { text-align: left; }
.zelle { min-width: 2rem; padding-left: .2rem; padding-right: .2rem; }
/* enthalten (●) und glutenfreier Hafer (gf): die Zelle ist schwarz mit weißem Zeichen – das Zeichen trägt die Bedeutung, nicht
   die Farbe. Spur (○), frei (–) und unbekannt (?) bleiben auf Papier. */
.zelle-enthalten, .zelle-gf { background: var(--tinte); color: var(--papier); font-weight: 700; }
.tabelle tbody tr:hover > .zelle-enthalten, .tabelle tbody tr:hover > .zelle-gf { background: var(--tinte); }
.zelle-spur { font-weight: 600; }
.zelle-frei, .zelle-unbekannt { color: var(--grau); }

.saetze { table-layout: auto; }
.satz-sorte { width: 8rem; font-weight: 400; }
.satz-text { font-size: var(--text); }
.satz-zelle { white-space: normal; overflow-wrap: anywhere; }
.saetze .satz > * { vertical-align: top; }
/* was vorläufig ist, steht unter dem Satz, damit der Satz allein gelesen werden kann */
.satz-vorlaeufig { display: block; }
.etikett-kasten { margin: var(--abstand-l) 0 0; padding: var(--abstand-s) var(--abstand); border: 1px solid var(--tinte); border-radius: var(--r-s); background: var(--papier); }
.etikett-text { margin: .25rem 0 var(--abstand-s); overflow-wrap: anywhere; }
.etikett-urteil { margin: 0 0 .25rem; font-weight: 600; }

/* ── Belege ──────────────────────────────────────────────────────────────── */
.beleg-matrix th, .beleg-matrix td { text-align: left; }
.beleg-matrix .matrix-ecke, .beleg-matrix .matrix-zeile { text-align: left; }
.beleg-zelle { min-width: 7.5rem; padding: 0; }
.beleg-zelle.leise { padding: var(--zelle-y) var(--zelle-x); }
/* Die Zelle ist ein Knopf (Ampel und Kurzstatus); aufgeklappt trägt sie den harten Schatten – sie ist das Gewählte */
.beleg-knopf {
  display: flex; align-items: center; width: 100%; min-height: var(--tipp); padding: 0 var(--zelle-x); border: 1px solid transparent;
  background: transparent; color: var(--tinte); font: inherit; text-align: left; cursor: pointer;
}
.beleg-knopf:hover { background: var(--zeitung); }
.beleg-knopf[aria-expanded="true"] { border-color: var(--tinte); background: var(--orange); box-shadow: var(--schatten-xs); }
.beleg-knopf .ampel { font-size: var(--text-tabelle); }
.einzel-links { display: flex; flex-wrap: wrap; gap: 0 var(--abstand); }
.alle-belege-bereich { margin-top: var(--abstand-l); }
.alle-belege { margin-top: var(--abstand-s); }
.beleg-liste { margin: 0 0 var(--abstand-s); }
.beleg-name { font-weight: 500; }

/* ── Fahrplan ────────────────────────────────────────────────────────────── */
.fahrplan-summe { margin: 0; font-family: var(--schrift); font-size: var(--h2); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.fahrplan-hinweis { margin: 0; }
.fahrplan-tabelle { table-layout: auto; }
.phase-kopf { min-width: 14rem; font-weight: 500; }
/* Am Handy steht die Nummer über dem Namen (so hat der Name die ganze Breite der Zelle), ab 40rem davor */
.phase-knopf { flex-wrap: wrap; gap: 0 .6rem; }
.phase-nr { flex: 1 0 100%; color: var(--grau); font: 600 .64rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.phase-name { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.phase-stand {
  display: inline-flex; align-items: center; padding: 0 .6rem; border: 1px solid var(--tinte); border-radius: var(--r-pill); background: var(--papier);
  font: 600 .64rem/1.55 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.phase-stand.stand-gebaut { background: var(--tinte); color: var(--papier); }
.phase-stand.stand-gebaut::before { content: "\2713\00a0"; }
.phase-stand.stand-in-arbeit { background: var(--zeitung-d); }
.phase-stand.stand-geplant, .phase-stand.stand-unbekannt { border-style: dashed; }
.phase-text { margin: 0 0 var(--abstand-s); }
.phase-luecken .karte-titel { margin-bottom: .2rem; }
.luecken { margin: 0; padding: 0; list-style: none; }
.luecke { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .1rem var(--abstand); align-items: center; padding: .15rem 0; border-top: 1px solid var(--zeitung-d); }
.luecke-anzahl { min-width: 2.4rem; padding: 0 .5rem; border: 1px solid var(--tinte); border-radius: var(--r-pill); background: var(--papier); font: 600 .7rem/1.5 var(--mono); text-align: center; }
.luecke-text { min-width: 0; overflow-wrap: anywhere; }

/* ── Text in Tabellen ────────────────────────────────────────────────────── */
/* Eine Zelle bleibt in einer Zeile (am Handy scrollt der Rahmen der Tabelle, am Laptop endet langer Text mit „…“ – der ganze Text steht
   im Titel und in den Einzelheiten). Ausnahmen, die umbrechen: Einzelheiten, Aufgaben, Sätze. */
.tabelle td { white-space: nowrap; }
.tabelle td.einzelheiten, .zusammen, .tabelle td.aufgabe-text, .tabelle td.satz-zelle, .tabelle td.spurentext-zelle { white-space: normal; }
.kappe { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.kappe-s { max-width: 5.5rem; }
.kappe-m { max-width: 6.5rem; }
.kappe-l { max-width: 12rem; }
.kappe-xl { max-width: 40rem; }
/* Damit nichts zerquetscht wird, haben die breiten Tabellen eine kleinste Breite; darunter scrollt ihr Rahmen */
.beleg-matrix { min-width: 38rem; }
.tabelle.belege { min-width: 44rem; }
.matrix { min-width: 46rem; }
.fahrplan-tabelle { min-width: 40rem; }

/* ── Größere Bildschirme ─────────────────────────────────────────────────── */
@media (min-width: 40rem) {
  .umschalter-knopf[aria-pressed="true"]::before { content: "\2713\00a0"; }
  .umschalter.breit .umschalter-knopf { flex-basis: auto; }
  .phase-knopf { flex-wrap: nowrap; gap: .6rem; }
  .phase-nr { flex: none; }
  .phase-name { flex: 0 1 auto; }
  .satz-sorte { width: 14rem; }
}
@media (min-width: 62rem) {
  .kennzahlen { grid-template-columns: 2.6fr 1.3fr 1.3fr .8fr; }
  .kennzahlen-belege { grid-template-columns: 2.4fr repeat(4, 1fr); }
  .kennzahl { border-bottom: 0; }
  .kennzahlen .kennzahl:nth-child(2n) { border-right: 1px solid var(--zeitung-d); }
  .kennzahlen .kennzahl:last-child { border-right: 0; }
}
/* Mit der Maus: Zeile 32 px, Zellen enger, die Köpfe der Gruppen ohne Polster */
@media (pointer: fine) {
  .gruppe-kopf { padding-top: 0; padding-bottom: 0; }
  .matrix-kopf { height: 5.8rem; }
  .sorten-bild { width: 1.75rem; }
  .sorten-bild-klein { width: 1.5rem; }
}
/* Ab 80rem passt jede Tabelle in die Breite: kein Rahmen, der scrollt – die Kopfzeile bleibt beim Scrollen der Seite stehen */
@media (min-width: 80rem) {
  .tabelle-rahmen { overflow: visible; border-radius: 0; }
  .tabelle thead th { position: sticky; top: 0; z-index: 2; }
  .rohstoff-tabelle, .beleg-matrix, .tabelle.belege, .matrix, .fahrplan-tabelle { min-width: 0; }
}